feat: add design system documentation structure & UI theme

frontend/.storybook/main.js

@@ -14,6 +14,7 @@ const config = {
   },
   docs: {
     autodocs: "tag",
+    defaultName: "Documentation",
   },
 };
 export default config;

frontend/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+import penpotTheme from "./penpotTheme";
+
+addons.setConfig({
+  theme: penpotTheme,
+});

frontend/.storybook/penpotTheme.js

@@ -0,0 +1,12 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+  base: "dark",
+  brandTitle: "Penpot Storybook",
+  brandUrl: "https://penpot.app",
+  brandImage: "https://penpot.app/logo/brand-dark-penpot-symbol-white.png",
+  brandTarget: "_self",
+
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+});

frontend/.storybook/preview-head.html

@@ -1 +1 @@
-<link href="/css/main.css" rel="stylesheet" type="text/css" />
+<!-- <link href="/css/main.css" rel="stylesheet" type="text/css" /> -->

frontend/.storybook/preview.js

@@ -1,9 +1,10 @@
-import "../resources/public/css/main.css";
+// import "../resources/public/css/main.css";
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
+    layout: "centered",
     controls: {
       matchers: {
         color: /(background|color)$/i,

frontend/package.json

@@ -43,9 +43,11 @@
     "@storybook/addon-links": "^7.6.17",
     "@storybook/addon-onboarding": "^1.0.11",
     "@storybook/blocks": "^7.6.17",
+    "@storybook/manager-api": "^8.0.6",
     "@storybook/react": "^7.6.17",
     "@storybook/react-vite": "^7.6.17",
     "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^8.0.6",
     "@types/node": "^20.11.20",
     "animate.css": "^4.1.1",
     "autoprefixer": "^10.4.17",

frontend/src/app/main/ui/components/GettingStarted.mdx

@@ -0,0 +1,66 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Getting Started" />
+
+# Getting Started
+
+Welcome! Whether you're a designer or a developer, this guide will help you get started and connect you to the essential resources you need.
+
+## Table of Contents
+
+- [Design Resources](#design-resources)
+
+  - [Penpot](#penpot)
+  - [UI/UX Design Guidelines](#uiux-design-guidelines)
+  - [Design Assets](#design-assets)
+
+- [Development Resources](#development-resources)
+  - [Coding Standards](#coding-standards)
+  - [Version Control](#version-control)
+  - [Development Tools](#development-tools)
+
+---
+
+## Design Resources
+
+### Penpot
+
+- [Penpot Production Environment](https://www.penpot.app/)
+- [Penpot Design Environment](https://www.design.penpot.app/)
+
+> **Get Access**
+> If you're not already part of the Penpot project, request access to your design team.
+
+### UI/UX Design Guidelines
+
+Before you dive into designing, familiarize yourself with our UI/UX design guidelines. They provide valuable insights into our design philosophy and standards.
+
+- [UI/UX Guidelines Document](https://your-design-guidelines-link.com)
+
+### Design Assets
+
+All the essential design assets like logos, icons, and brand guidelines can be found in the Penpot project. Ensure you have access and familiarize yourself with these assets for consistency.
+
+---
+
+## Development Resources
+
+### Coding Standards
+
+Maintaining a consistent code style is essential for collaborative development. Our coding standards document will guide you on best practices.
+
+- [Coding Standards Document](https://your-coding-standards-link.com)
+
+### Version Control
+
+We use Git for version control. Make sure you have Git installed and are familiar with its basics.
+
+### Development Tools
+
+Your development environment is critical. Here are some tools and resources to help you set up your workspace:
+
+- **Code Editor**: We recommend using [Visual Studio Code](https://code.visualstudio.com/) for development. It's highly customizable and supports a wide range of extensions.
+
+- **Package Manager**: [npm](https://www.npmjs.com/) is the package manager we use for JavaScript projects. Install it to manage project dependencies.
+
+---

frontend/src/app/main/ui/components/avatar/avatar.mdx

@@ -0,0 +1,58 @@
+import { Meta } from "@storybook/blocks";
+import * as AvatarStories from "./avatar.stories";
+
+<Meta of={AvatarStories} />
+
+# Avatar
+
+A visual representation of a user. Avatars can show initials (default) or an image - set by the user.
+
+(not in current DS but in designs) -> Avatar component can also show the user name next to it in contexts like comments (dialogs and lists), dashboard - user menu - or user account settings. Maybe those should be another component.
+
+## Usage
+
+## Where to use
+
+(Empty)
+
+## When to use
+
+Avatars without user name are used in places where the space is limited or in stacked avatar component. [Missing link] See component stacked avatars AKA group avatars
+
+## Behavior
+
+### Interactions
+
+A tooltip with the full user name should appear on hover
+
+## Interface
+
+### Types
+
+### States
+
+### Variants
+
+## Properties
+
+**Size**
+
+Typed list of sizes:
+
+- x-small
+- small
+- medium
+- big
+
+**image**
+
+Url of the
+
+## Tokens
+
+--avatar-background
+--avatar-border
+
+## Accesibility
+
+- Alternate text: “Image of `${{fullName}}`”

frontend/src/app/main/ui/components/avatar/avatar.stories.jsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+
+import Components from "@target/components";
+export default {
+  title: "Components/Avatar",
+};
+
+export const Default = {
+  render: () => (
+    <Components.StoryWrapper>
+      <div>Avatar</div>
+    </Components.StoryWrapper>
+  ),
+};

frontend/src/app/main/ui/components/buttons/simple_button.mdx

@@ -1,16 +1,82 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as SimpleButtonStories from "./simple_button.stories"
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as SimpleButtonStories from "./simple_button.stories";
 
 <Meta of={SimpleButtonStories} />
 
-# Lorem ipsum
+# SimpleButton
 
-This is an example of **markdown** docs within storybook, for the component `<SimpleButton>`.
+A button is a clickable or tap-able UI element representing an action or providing access to a specific function in an app. It has text or an icon indicating its purpose and is commonly used for form submissions, confirmation, or cancellation actions. Clear labeling, proper sizing, ample padding, and spacing contribute to ensuring accessibility and ease of use.
 
-Here's how we can render a simple button:
+<Canvas of={SimpleButtonStories.Default} />
+<Controls />
+
+## Usage
+
+## Where to use
+
+The main button highlights the primary action in a context, being visually distinct (e.g., color, size) from others. Users readily identify it as the key means to accomplish tasks. Proper placement, usually at the bottom right corner, ensures consistency and efficient goal completion.
+
+## When to use
+
+Utilize the main button for vital actions, highlighting priority and clarity. Keep each view or modal limited to one main button, accompanied by fewer secondary ones if needed. This approach promotes intuitive navigation and seamless user experience.
+
+## Behavior
+
+### Interactions
+
+- **Loading**: Upon engaging with long-lasting (>500ms) tasks, showcase a visible, contrasting loader near the source. Accompany it with brief status updates to keep users informed.
+
+## Interface
+
+### Types
+
+#### Primary
+
+Used to initiate the main / primary action of a view or flow. Avoid to have more than one primary buttons in the same view or flow.
 
 <Canvas of={SimpleButtonStories.Default} />
 
-Simple buttons can also have **icons**:
+#### Secondary
 
-<Canvas of={SimpleButtonStories.WithIcon} />
+Are the default and most common buttons in the interface. Use them for nor primary actions.
+
+#### Invisible
+
+> note: is more common to name this kind of button “gost” or similar. Use them for less prominent, and sometimes independent, actions (examples: add pages, add properties, etc.)
+
+#### Destructive
+
+Used for any action that implies remove / delete destroys any object or data.
+
+### States
+
+- Rest (default)
+- Hover
+- Selected (active)
+- Focus
+- Disabled
+
+### Variants
+
+#### Text
+
+Button label should express what action will occur when the user interacts with it.
+
+<Canvas of={SimpleButtonStories.Default} />
+
+#### Icon
+
+Button icon should depict what action will occur when the user interacts with it
+
+## Properties
+
+<Controls />
+
+## Tokens
+
+--avatar-background
+--avatar-border
+
+## Accesibility
+
+- Alternate text: “Image of [fullName]"

frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx

@@ -4,27 +4,30 @@ import Components from "@target/components";
 import Icons from "@target/icons";
 
 export default {
-  title: 'Buttons/Simple Button',
+  title: "Components/Simple Button",
   component: Components.SimpleButton,
+  argTypes: {
+    variant: {
+      description: "type description",
+      options: ["primary", "secondary"],
+      control: { type: "radio" },
+    },
+    children: {
+      description: "Call to action",
+      control: {
+        type: "text",
+      },
+    },
+  },
 };
 
 export const Default = {
-  render: () => (
+  args: {
+    children: "SimpleButton",
+  },
+  render: (args) => (
     <Components.StoryWrapper>
-      <Components.SimpleButton>
-        Simple Button
-      </Components.SimpleButton>
+      <Components.SimpleButton>{args.children}</Components.SimpleButton>
     </Components.StoryWrapper>
   ),
 };
-
-export const WithIcon = {
-  render: () => (
-    <Components.StoryWrapper>
-      <Components.SimpleButton>
-        {Icons.AddRefactor}
-        Simple Button
-      </Components.SimpleButton>
-    </Components.StoryWrapper>
-  ),
-}