From 77ff11633454105b7ff3d999fbcc2e41662ee712 Mon Sep 17 00:00:00 2001 From: Xaviju Date: Tue, 9 Apr 2024 23:21:13 +0200 Subject: [PATCH] feat: add design system documentation structure & UI theme --- frontend/.storybook/main.js | 1 + frontend/.storybook/manager.js | 6 ++ frontend/.storybook/penpotTheme.js | 12 +++ frontend/.storybook/preview-head.html | 2 +- frontend/.storybook/preview.js | 3 +- frontend/package.json | 2 + .../app/main/ui/components/GettingStarted.mdx | 66 +++++++++++++++ .../app/main/ui/components/avatar/avatar.mdx | 58 ++++++++++++++ .../ui/components/avatar/avatar.stories.jsx | 14 ++++ .../ui/components/buttons/simple_button.mdx | 80 +++++++++++++++++-- .../buttons/simple_button.stories.jsx | 35 ++++---- 11 files changed, 254 insertions(+), 25 deletions(-) create mode 100644 frontend/.storybook/manager.js create mode 100644 frontend/.storybook/penpotTheme.js create mode 100644 frontend/src/app/main/ui/components/GettingStarted.mdx create mode 100644 frontend/src/app/main/ui/components/avatar/avatar.mdx create mode 100644 frontend/src/app/main/ui/components/avatar/avatar.stories.jsx diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js index a1b422ae6..81b288496 100644 --- a/frontend/.storybook/main.js +++ b/frontend/.storybook/main.js @@ -14,6 +14,7 @@ const config = { }, docs: { autodocs: "tag", + defaultName: "Documentation", }, }; export default config; diff --git a/frontend/.storybook/manager.js b/frontend/.storybook/manager.js new file mode 100644 index 000000000..d046348f3 --- /dev/null +++ b/frontend/.storybook/manager.js @@ -0,0 +1,6 @@ +import { addons } from "@storybook/manager-api"; +import penpotTheme from "./penpotTheme"; + +addons.setConfig({ + theme: penpotTheme, +}); diff --git a/frontend/.storybook/penpotTheme.js b/frontend/.storybook/penpotTheme.js new file mode 100644 index 000000000..f44736ddd --- /dev/null +++ b/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', +}); diff --git a/frontend/.storybook/preview-head.html b/frontend/.storybook/preview-head.html index 4c273a63f..e43ccd245 100644 --- a/frontend/.storybook/preview-head.html +++ b/frontend/.storybook/preview-head.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js index de50ecbf7..e1ef68f7e 100644 --- a/frontend/.storybook/preview.js +++ b/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, diff --git a/frontend/package.json b/frontend/package.json index e8aaa62c7..1c2d61988 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/app/main/ui/components/GettingStarted.mdx b/frontend/src/app/main/ui/components/GettingStarted.mdx new file mode 100644 index 000000000..85153175d --- /dev/null +++ b/frontend/src/app/main/ui/components/GettingStarted.mdx @@ -0,0 +1,66 @@ +import { Meta } from "@storybook/blocks"; + + + +# 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. + +--- diff --git a/frontend/src/app/main/ui/components/avatar/avatar.mdx b/frontend/src/app/main/ui/components/avatar/avatar.mdx new file mode 100644 index 000000000..0b1c4aa70 --- /dev/null +++ b/frontend/src/app/main/ui/components/avatar/avatar.mdx @@ -0,0 +1,58 @@ +import { Meta } from "@storybook/blocks"; +import * as AvatarStories from "./avatar.stories"; + + + +# 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}}`” diff --git a/frontend/src/app/main/ui/components/avatar/avatar.stories.jsx b/frontend/src/app/main/ui/components/avatar/avatar.stories.jsx new file mode 100644 index 000000000..1c7d2a078 --- /dev/null +++ b/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: () => ( + +
Avatar
+ + ), +}; diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.mdx b/frontend/src/app/main/ui/components/buttons/simple_button.mdx index 6c93cc3a2..260eb123c 100644 --- a/frontend/src/app/main/ui/components/buttons/simple_button.mdx +++ b/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"; -# Lorem ipsum +# SimpleButton -This is an example of **markdown** docs within storybook, for the component ``. +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: + + + +## 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. -Simple buttons can also have **icons**: +#### Secondary - \ No newline at end of file +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. + + + +#### Icon + +Button icon should depict what action will occur when the user interacts with it + +## Properties + + + +## Tokens + +--avatar-background +--avatar-border + +## Accesibility + +- Alternate text: “Image of [fullName]" diff --git a/frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx b/frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx index 33142e12c..fae62eb07 100644 --- a/frontend/src/app/main/ui/components/buttons/simple_button.stories.jsx +++ b/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) => ( - - Simple Button - + {args.children} ), }; - -export const WithIcon = { - render: () => ( - - - {Icons.AddRefactor} - Simple Button - - - ), -}