Merge branch 'feat/new-admin-ui' into leo/feat/ui-icon-picker

packages/admin-ui/.storybook/main.ts

@@ -11,7 +11,11 @@ function getAbsolutePath(value: string): any {
 }
 
 const config: StorybookConfig = {
-    stories: ["../docs/stories/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    stories: [
+        "../docs/stories/**/*.mdx",
+        "../src/**/*.mdx",
+        "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+    ],
     staticDirs: ["../assets"],
     addons: [
         getAbsolutePath("@storybook/addon-a11y"),

packages/admin-ui/.storybook/preview.ts

@@ -4,7 +4,8 @@ import "../src/theme.scss";
 
 const preview: Preview = {
     parameters: {
-        layout: "centered"
+        layout: "centered",
+        docs: { toc: { headingSelector: "h2, h3, h4" } }
     }
 };
 

packages/admin-ui/docs/stories/00-getting-started/welcome.mdx

@@ -2,6 +2,14 @@ import { Meta } from '@storybook/blocks';
 
 <Meta title="Getting Started/Welcome" />
 
+<style>
+    {`
+    .sbdocs-wrapper > div:has(div > .toc-wrapper) {
+      display: none;
+    }
+  `}
+</style>
+
 ![Webiny Design System cover](/images/design-system-cover.png)
 
 # Welcome

packages/admin-ui/src/Alert/Alert.mdx

@@ -0,0 +1,43 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as AlertStories from './Alert.stories';
+
+<Meta of={AlertStories} />
+
+# Alert
+
+Alert component is an element used to display important messages to users, such as notifications, warnings, errors, or success confirmations. Its purpose is to bring attention to users by providing feedback on user actions or system states, ensuring users are informed about critical information. Alerts are relevant for guiding user behaviour, preventing errors, and improving user experience by delivering timely feedback and enhancing teh communication between the user and the system.
+
+<Canvas of={AlertStories.Default} />
+
+## Usage
+
+```
+import { Alert } from '@webiny/admin-ui';
+```
+
+## Anatomy
+
+### Options
+<img src="/images/storybook/alert/options.png" alt="Options"/>
+
+### Style
+<img src="/images/storybook/alert/style.png" alt="Style"/>
+
+### Type
+<img src="/images/storybook/alert/type.png" alt="Type"/>
+
+### Examples
+<img src="/images/storybook/alert/examples.png" alt="Examples"/>
+
+## Usage
+
+### Full width banner
+<img src="/images/storybook/alert/full-width-banner.png" alt="Full width banner"/>
+
+
+### Floating element
+<img src="/images/storybook/alert/floating-element.png" alt="Floating element"/>
+
+### Nested element
+<img src="/images/storybook/alert/nested-element.png" alt="Nested element"/>

packages/admin-ui/src/Alert/Alert.stories.tsx

@@ -5,7 +5,6 @@ import React from "react";
 const meta: Meta<typeof Alert> = {
     title: "Components/Alert",
     component: Alert,
-    tags: ["autodocs"],
     argTypes: {},
     decorators: [
         Story => (

packages/admin-ui/src/AutoComplete/AutoComplete.mdx

@@ -0,0 +1,42 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as AutoComplete from './AutoComplete.stories';
+
+<Meta of={AutoComplete} />
+
+# AutoComplete
+
+The Input component is a user interface element that allows users to enter textual, numerical or any other kind of data into system database. It is essential for collecting user information, enabling interaction, and driving application functionality. As the user input is one of the most crucial aspects of using a system, we are ensuring that all our input options have necessary mechanism to make the data input as frictionless as possible.
+
+<Canvas of={AutoComplete.Default} />
+
+## Usage
+
+```
+import { AutoComplete } from '@webiny/admin-ui';
+```
+
+## Anatomy
+
+### Input Anatomy
+<img src="/images/storybook/autocomplete/input-anatomy.png" alt="Input Anatomy"/>
+
+### Style
+<img src="/images/storybook/autocomplete/style.png" alt="Style"/>
+
+### Option
+<img src="/images/storybook/autocomplete/option.png" alt="Option"/>
+
+### States and Styles
+<img src="/images/storybook/autocomplete/states-and-styles.png" alt="States and Styles"/>
+
+### Label Anatomy
+<img src="/images/storybook/autocomplete/label-anatomy.png" alt="Label Anatomy"/>
+
+### Label Properties
+<img src="/images/storybook/autocomplete/label-properties.png" alt="Label Properties"/>
+
+## Usage
+
+### Used in forms
+<img src="/images/storybook/autocomplete/used-in-forms.png" alt="Used in forms"/>

packages/admin-ui/src/AutoComplete/AutoComplete.stories.tsx

@@ -5,7 +5,6 @@ import { AutoComplete } from "./AutoComplete";
 const meta: Meta<typeof AutoComplete> = {
     title: "Components/Form/AutoComplete",
     component: AutoComplete,
-    tags: ["autodocs"],
     argTypes: {
         onValueChange: { action: "onValueChange" },
         onOpenChange: { action: "onOpenChange" }

packages/admin-ui/src/Avatar/Avatar.mdx

@@ -0,0 +1,36 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as AvatarStories from './Avatar.stories';
+
+<Meta of={AvatarStories} />
+
+# Avatar
+
+The Avatar component is a UI element that displays a user’s profile image, initials, or icon, often used to represent a person or entity in an application. Its purpose is to personalize the user experience, making interactions feel more engaging and identifiable and improve recognition and user interaction.
+
+<Canvas of={AvatarStories.Default} />
+
+## Usage
+
+```
+import { Avatar } from '@webiny/admin-ui';
+```
+
+## Anatomy
+
+### Size
+<img src="/images/storybook/avatar/size.png" alt="Size"/>
+
+### Type
+<img src="/images/storybook/avatar/type.png" alt="Type"/>
+
+### Style
+<img src="/images/storybook/avatar/style.png" alt="Style"/>
+
+## Usage
+
+### Header
+<img src="/images/storybook/avatar/header.png" alt="Header"/>
+
+### Table
+<img src="/images/storybook/avatar/table.png" alt="Table"/>

packages/admin-ui/src/Avatar/Avatar.stories.tsx

@@ -6,7 +6,6 @@ import { Avatar } from "./Avatar";
 const meta: Meta<typeof Avatar> = {
     title: "Components/Avatar",
     component: Avatar,
-    tags: ["autodocs"],
     argTypes: {
         size: {
             control: "select",

packages/admin-ui/src/Button/Button.mdx

@@ -0,0 +1,58 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+The Button component is a key UI element that enables users to trigger actions or events, such as submitting forms, navigating pages, or interacting with system functionality. Its purpose is to provide a clear, intuitive way for users to interact with an system. Buttons are relevant in virtually all interfaces, ensuring user engagement by offering a simple, recognizable mechanism for executing commands. They are essential for usability, guiding user behavior and driving application workflows.
+
+<Canvas of={ButtonStories.Primary} />
+
+## Usage
+
+```
+import { Button } from '@webiny/admin-ui';
+```
+
+## Anatomy
+
+### Construction
+<img src="/images/storybook/button/contruction.png" alt="Construction"/>
+
+### Options
+<img src="/images/storybook/button/options.png" alt="Options"/>
+
+### Type
+<img src="/images/storybook/button/type.png" alt="Type"/>
+
+### Size
+Regular buttons come in four different sizes: small, medium, large, and xl. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
+
+<img src="/images/storybook/button/size.png" alt="Size"/>
+
+Icon-only button come in six different sizes to accommodate for various component needs.
+
+<img src="/images/storybook/button/size-icon-only.png" alt="Size - Icon Only"/>
+
+
+### States
+<img src="/images/storybook/button/states.png" alt="States"/>
+
+## Usage
+
+### Icon Usage
+An icon should only be used in a button when it's benefitial and when it has a meaningful association with the label.
+
+<img src="/images/storybook/button/icon-usage.png" alt="Icon Usage"/>
+
+### Use primary buttons sparingly
+Use primary buttons as the desired action for users. Competing primary buttons may leave the user unsure of next steps in their user journey. As a rule of thumb limit primary buttons to 1 in contained UIs and 3 in full page UIs.
+
+<img src="/images/storybook/button/primary-button-usage.png" alt="Primary Button Usage"/>
+
+### Button Group
+When used in groups, buttons should support only maximum of two type variants, with an exception of third variant being ghost extension button (eg. ellipsis). Avoid using random type and icon options within the button groups. Avoid using different sizes within the same group.
+
+<img src="/images/storybook/button/button-group.png" alt="Button Group"/>

packages/admin-ui/src/Button/Button.stories.tsx

@@ -8,7 +8,6 @@ const meta: Meta<typeof Button> = {
     title: "Components/Button",
     component: Button,
     // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-    tags: ["autodocs"],
     // More on argTypes: https://storybook.js.org/docs/api/argtypes
     argTypes: {
         variant: {

packages/admin-ui/src/Card/Card.mdx

@@ -0,0 +1,46 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as CardStories from './Card.stories';
+
+<Meta of={CardStories} />
+
+# Cards
+
+A Card component in design systems is a versatile UI element used to encapsulate content and actions about a single subject. It serves as a modular container that can include images, text, links, buttons, and other interactive elements. Cards are designed to present information in a concise and organized manner, making it easier for users to scan and interact with multiple pieces of content.
+
+<Canvas of={CardStories.Default} />
+
+## Usage
+
+```
+import { Card } from '@webiny/admin-ui';
+```
+
+## Anatomy
+
+### Construction
+Depending on the content type and card usage, there are several elevation options available.
+
+<img src="/images/storybook/card/construction.png" alt="Construction"/>
+
+### Elevation
+
+<img src="/images/storybook/card/elevation.png" alt="Elevation"/>
+
+### Radius
+Depending on the content type and card usage, there are three basic paddings options to consider. Border radius can vary from 4px - 12px
+
+<img src="/images/storybook/card/radius.png" alt="Radius"/>
+
+### Padding
+
+<img src="/images/storybook/card/padding.png" alt="Padding"/>
+
+## Usage
+
+### Stacked
+
+<img src="/images/storybook/card/stacked.png" alt="Stacked"/>
+
+
+

packages/admin-ui/src/Card/Card.stories.tsx

@@ -8,7 +8,6 @@ import { Icon } from "~/Icon";
 const meta: Meta<typeof Card> = {
     title: "Components/Card",
     component: Card,
-    tags: ["autodocs"],
     decorators: [
         Story => (
             <div className="wby-bg-[#f4f4f4] wby-h-[500px] wby-w-[700px] wby-rounded-[5px] wby-px-[50px] wby-content-center">

packages/admin-ui/src/Checkbox/Checkbox.mdx

@@ -0,0 +1,42 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories';
+
+<Meta of={CheckboxStories} />
+
+# Checkbox
+
+Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. A checkbox group is a grouping of checkboxes that are related to each other.
+
+<Canvas of={CheckboxStories.Default} />
+
+## Usage
+
+```
+import { Checkbox } from '@webiny/admin-ui';
+```
+
+## Anatomy
+
+### General
+Checkbox input enable users to select a single or multiple items from a list of offered choices. A chackbox input group organizes related checkbox input options together for better clarity and functionality.
+
+<img src="/images/storybook/checkbox/general.png" alt="General"/>
+
+### Checkbox input options
+Checkbox inputs can exist in two different states: Selected and Not Selected.
+
+<img src="/images/storybook/checkbox/checkbox-input-options.png" alt="Checkbox input options"/>
+
+### States
+<img src="/images/storybook/checkbox/states.png" alt="States"/>
+
+## Usage
+
+### Text overflow
+When the checkbox text content is too long for the horizontal space available, the content should wrap to form another line aligning the text and checkbox on top.
+
+<img src="/images/storybook/checkbox/text-overflow.png" alt="Text overflow"/>
+
+
+

packages/admin-ui/src/Checkbox/Checkbox.stories.tsx

@@ -5,7 +5,6 @@ import { Checkbox } from "~/Checkbox";
 const meta: Meta<typeof Checkbox> = {
     title: "Components/Form/Checkbox",
     component: Checkbox,
-    tags: ["autodocs"],
     parameters: {
         layout: "padded"
     },

packages/admin-ui/src/CheckboxGroup/CheckboxGroup.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as CheckboxGroupStories from './CheckboxGroup.stories';
+
+<Meta of={CheckboxGroupStories} />
+
+# Checkbox Group
+
+Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. A checkbox group is a grouping of checkboxes that are related to each other.
+
+<Canvas of={CheckboxGroupStories.Default} />
+
+## Usage
+
+```
+import { CheckboxGroup } from '@webiny/admin-ui';
+```
+
+## Anatomy
+
+### General
+Checkbox input enable users to select a single or multiple items from a list of offered choices. A chackbox input group organizes related checkbox input options together for better clarity and functionality.
+
+<img src="/images/storybook/checkbox-group/general.png" alt="General"/>
+
+
+
+

packages/admin-ui/src/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -5,7 +5,6 @@ import { CheckboxGroup } from "~/CheckboxGroup";
 const meta: Meta<typeof CheckboxGroup> = {
     title: "Components/Form/CheckboxGroup",
     component: CheckboxGroup,
-    tags: ["autodocs"],
     parameters: {
         layout: "padded"
     },