feat: customize storybook, refactor button documentation and stories

.storybook/manager.ts

@@ -0,0 +1,8 @@
+// .storybook/manager.js
+
+import { addons } from '@storybook/manager-api'
+import theme from './theme'
+
+addons.setConfig({
+  theme: theme,
+})

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

.storybook/preview.ts

@@ -71,7 +71,7 @@ const preview: Preview = {
         light: '',
         dark: 'dark',
       },
-      defaultTheme: 'dark',
+      defaultTheme: 'light',
     }),
   ],
 }

.storybook/theme.ts

@@ -0,0 +1,26 @@
+// .storybook/theme.ts
+
+import { create } from '@storybook/theming/create'
+
+export default create({
+  base: 'light',
+  brandTitle: 'Shuriken UI',
+  brandUrl: 'https://cssninja.io',
+  brandImage:
+    'https://user-images.githubusercontent.com/3911343/232132309-62971744-dcdb-429c-aa93-6ba0c1caac42.png',
+  brandTarget: '_self',
+  // Typography
+  fontBase: '"Inter", sans-serif',
+  fontCode: 'monospace',
+  colorPrimary: '#8b5cf6',
+  colorSecondary: '#8b5cf6',
+  // Toolbar default and active colors
+  barTextColor: '#9E9E9E',
+  barSelectedColor: '#585C6D',
+  barBg: '#ffffff',
+  // UI
+  appBg: '#f8fafc',
+  appContentBg: '#f8fafc',
+  appBorderColor: '#e2e8f0',
+  appBorderRadius: 6,
+})

src/plugins/components/button/button.component.ts

@@ -15,6 +15,7 @@ export const Button = ({
   flavor = 'solid',
   size = 'md',
   color = 'default',
+  disabled = false,
   onClick,
 }: ButtonAttrs) => {
   return html`

src/plugins/components/button/button.docs.mdx

@@ -1,69 +1,194 @@
-import { Meta, Primary, Controls, Story } from '@storybook/blocks';
-import * as ButtonStories from './button.stories';
-import { defaultConfig } from '.'
+import { Meta, Primary, Controls, Story } from '@storybook/blocks'
+import * as ButtonStories from './button.stories'
+import { defaultButtonConfig } from '.'
 
 <Meta of={ButtonStories} />
 
 # Button
 
-A button is ...
+Buttons are an essential part of any application. Shuriken UI buttons can have different sizes, shapes and colors. They can be used as links or as HTML buttons.
 
 <Primary />
 
 ## Props
 
 <Controls />
 
-## Stories
+## Variants
 
-### Flavor
+<br/>
 
-Flavor is the visual style of the button.
+### Shape
+
+Button shapes allow you to change the border radiuses.
 
 <div className="flex gap-2">
-  <Story of={ButtonStories.Solid} />
-  <Story of={ButtonStories.Pastel} />
-  <Story of={ButtonStories.Outline} />
+  <Story of={ButtonStories.Straight} />
+  <Story of={ButtonStories.Rounded} />
+  <Story of={ButtonStories.Smooth} />
+  <Story of={ButtonStories.Curved} />
+  <Story of={ButtonStories.Full} />
 </div>
 
+<br/>
+
 ### Size
 
 Size allows you to change the size of the button.
 
-<div className="flex gap-2">
+<div className="flex items-end gap-2">
   <Story of={ButtonStories.Sm} />
   <Story of={ButtonStories.Md} />
   <Story of={ButtonStories.Lg} />
-  <Story of={ButtonStories.Xl} />
 </div>
 
+<br/>
 
-### Shape
+### Flavor: solid
 
-Shape allows you to change the roundness of the button.
+Flavors represent the visual styles applied to a button. Below are examples of the solid flavor.
 
 <div className="flex gap-2">
-  <Story of={ButtonStories.Straight} />
-  <Story of={ButtonStories.Rounded} />
-  <Story of={ButtonStories.Smooth} />
-  <Story of={ButtonStories.Curved} />
-  <Story of={ButtonStories.Full} />
+  <Story of={ButtonStories.SolidDefault} />
+  <Story of={ButtonStories.SolidMuted} />
+  <Story of={ButtonStories.SolidPrimary} />
+  <Story of={ButtonStories.SolidInfo} />
+  <Story of={ButtonStories.SolidSuccess} />
+  <Story of={ButtonStories.SolidWarning} />
+  <Story of={ButtonStories.SolidDanger} />
+</div>
+
+<br/>
+
+### Flavor: pastel
+
+Flavors represent the visual styles applied to a button. Below are examples of the pastel flavor.
+
+<div className="flex gap-2">
+  <Story of={ButtonStories.PastelPrimary} />
+  <Story of={ButtonStories.PastelInfo} />
+  <Story of={ButtonStories.PastelSuccess} />
+  <Story of={ButtonStories.PastelWarning} />
+  <Story of={ButtonStories.PastelDanger} />
+</div>
+
+<br/>
+
+### Flavor: outline
+
+Flavors represent the visual styles applied to a button. Below are examples of the outline flavor.
+
+<div className="flex gap-2">
+  <Story of={ButtonStories.OutlinePrimary} />
+  <Story of={ButtonStories.OutlineInfo} />
+  <Story of={ButtonStories.OutlineSuccess} />
+  <Story of={ButtonStories.OutlineWarning} />
+  <Story of={ButtonStories.OutlineDanger} />
+</div>
+
+<br/>
+
+### With icons
+
+Buttons can have icons, both on the left and on the right. Use svg icons inside the button slot to render an icon button.
+
+<div className="flex gap-2">
+  <Story of={ButtonStories.IconDefault} />
+  <Story of={ButtonStories.IconMuted} />
+  <Story of={ButtonStories.IconPrimary} />
+  <Story of={ButtonStories.IconInfo} />
+  <Story of={ButtonStories.IconSuccess} />
+  <Story of={ButtonStories.IconWarning} />
+  <Story of={ButtonStories.IconDanger} />
+</div>
+
+<br/>
+
+### Shadow: flat
+
+Flavors represent the visual styles applied to a button. Below are examples of the solid flavor.
+
+<div className="flex gap-2">
+  <Story of={ButtonStories.ShadowFlatDefault} />
+  <Story of={ButtonStories.ShadowFlatMuted} />
+  <Story of={ButtonStories.ShadowFlatPrimary} />
+  <Story of={ButtonStories.ShadowFlatInfo} />
+  <Story of={ButtonStories.ShadowFlatSuccess} />
+  <Story of={ButtonStories.ShadowFlatWarning} />
+  <Story of={ButtonStories.ShadowFlatDanger} />
+</div>
+
+<br/>
+
+### Shadow: hover
+
+Flavors represent the visual styles applied to a button. Below are examples of the solid flavor.
+
+<div className="flex gap-2">
+  <Story of={ButtonStories.ShadowHoverDefault} />
+  <Story of={ButtonStories.ShadowHoverMuted} />
+  <Story of={ButtonStories.ShadowHoverPrimary} />
+  <Story of={ButtonStories.ShadowHoverInfo} />
+  <Story of={ButtonStories.ShadowHoverSuccess} />
+  <Story of={ButtonStories.ShadowHoverWarning} />
+  <Story of={ButtonStories.ShadowHoverDanger} />
 </div>
 
+<br/>
+<br/>
 
-### Label & default slot
+## State
 
 
+### State: loading
+
+Buttons can be shown in a loading state. The loading indicator informs the user that something is being loaded.
+
+<div className="flex gap-2">
+  <Story of={ButtonStories.LoadingDefault} />
+  <Story of={ButtonStories.LoadingMuted} />
+  <Story of={ButtonStories.LoadingPrimary} />
+  <Story of={ButtonStories.LoadingInfo} />
+  <Story of={ButtonStories.LoadingSuccess} />
+  <Story of={ButtonStories.LoadingWarning} />
+  <Story of={ButtonStories.LoadingDanger} />
+</div>
+
+<br/>
+
+### State: disabled
+
+Buttons can be shown in a disabled state. They are a bit opaque and cannot be clicked to peform an action.
+
+<div className="flex gap-2">
+  <Story of={ButtonStories.DisabledDefault} />
+  <Story of={ButtonStories.DisabledMuted} />
+  <Story of={ButtonStories.DisabledPrimary} />
+  <Story of={ButtonStories.DisabledInfo} />
+  <Story of={ButtonStories.DisabledSuccess} />
+  <Story of={ButtonStories.DisabledWarning} />
+  <Story of={ButtonStories.DisabledDanger} />
+</div>
+
+<br/>
+<br/>
+
+## Slots
+
+### Slot: default
+
 <div className="flex gap-2">
-  <Story of={ButtonStories.Label} />
   <Story of={ButtonStories.LabelSlot} />
 </div>
 
+<br/>
+<br/>
+
 ## Customization
 
-### Default Config
+### Default config
 
 <details>
   <summary>View default config</summary>
-  <pre>{JSON.stringify(defaultConfig, null, 2)}</pre>
-</details>
+  <pre>{JSON.stringify(defaultButtonConfig, null, 2)}</pre>
+</details>