Update Storybook version

.gitignore

@@ -66,3 +66,5 @@ typings/
 .DS_Store
 src/**/*.scss.d.ts
 src/**/*.css.d.ts
+
+.idea

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: [
+    '../docs/**/*.mdx',
+    '../src/**/*.story.tsx'
+  ],
+  addons: [
+    '@storybook/addon-storysource',
+    '@storybook/addon-essentials',
+
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
+  }
+};
+
+export default config;

.storybook/manager.js → .storybook/manager.ts

@@ -1,5 +1,5 @@
 import { addons } from '@storybook/addons';
-import { theme } from './theme';
+import theme from './theme';
 
 addons.setConfig({
   theme

.storybook/preview.tsx

@@ -0,0 +1,21 @@
+import { ThemeProvider, darkTheme } from '../src/utils/Theme';
+import theme from './theme';
+
+const withProvider = (Story, context) => (
+  <ThemeProvider value={darkTheme}>
+    <Story {...context} />
+  </ThemeProvider>
+);
+
+const preview = {
+  decorators: [withProvider],
+  parameters: {
+    layout: 'centered',
+    controls: { hideNoControlsWarning: true },
+    docs: {
+      theme
+    }
+  }
+};
+
+export default preview;

.storybook/theme.js

@@ -1,6 +1,7 @@
 import { create } from '@storybook/theming/create';
 
-export const theme = create({
+export default create({
   base: 'dark',
-  brandTitle: 'reablocks'
+  brandTitle: 'reablocks',
+  brandUrl: 'https://github.com/reaviz/reablocks'
 });

docs/Intro.story.mdx → docs/Intro.mdx

@@ -7,22 +7,27 @@ import { Meta } from '@storybook/addon-docs';
   <a href="https://github.com/reaviz/reablocks/actions/workflows/build.yml" target="_blank">
     <img src="https://github.com/reaviz/reablocks/actions/workflows/build.yml/badge.svg" />
   </a>
-  &nbsp;&nbsp;
+  <span>&nbsp;&nbsp;</span>
   <a href="https://npm.im/reablocks" target="_blank">
     <img src="https://img.shields.io/npm/v/reablocks.svg" />
-  </a>&nbsp;&nbsp;
+  </a>
+  <span>&nbsp;&nbsp;</span>
   <a href="https://npm.im/reablocks" target="_blank">
     <img src="https://badgen.net/npm/dw/reablocks" />
-  </a>&nbsp;&nbsp;
+  </a>
+  <span>&nbsp;&nbsp;</span>
   <a href="https://github.com/reaviz/reablocks/blob/master/LICENSE" target="_blank">
     <img src="https://badgen.now.sh/badge/license/apache2" />
-  </a>&nbsp;&nbsp;
+  </a>
+  <span>&nbsp;&nbsp;</span>
   <a href="https://bundlephobia.com/result?p=reablocks" target="_blank">
     <img src="https://badgen.net/bundlephobia/minzip/reablocks" />
-  </a>&nbsp;&nbsp;
+  </a>
+  <span>&nbsp;&nbsp;</span>
   <a href="https://github.com/reaviz/reablocks" target="_blank">
     <img alt="GitHub stars" src="https://img.shields.io/github/stars/reaviz/reablocks?style=social" />
-  </a>&nbsp;&nbsp;
+  </a>
+  <span>&nbsp;&nbsp;</span>
   <a href="https://discord.gg/tt8wGExq35" target="_blank">
     <img src="https://img.shields.io/discord/773948315037073409?label=discord" />
   </a>

docs/components/data/DataSize.story.mdx → docs/components/data/DataSize.mdx

@@ -1,5 +1,6 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { DataSize } from '../../../src/data/DataSize';
+import * as DateSizeStories from '../../../src/data/DataSize/DataSize.story'
 
 <Meta title="Docs/Components/Data/DataSize" />
 
@@ -13,9 +14,7 @@ the API that is exported.
 ## Example
 
 ### Component
-<Canvas withSource="open">
-  <Story id="components-data-data-size--simple" />
-</Canvas>
+<Canvas sourceState="shown" of={DateSizeStories.Simple} />
 
 ### Function API
 ```ts

docs/components/data/DateFormat.story.mdx → docs/components/data/DateFormat.mdx

@@ -1,5 +1,6 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { DateFormat } from '../../../src/data/DateFormat';
+import * as DateFormatStories from '../../../src/data/DateFormat/DateFormat.story';
 
 <Meta title="Docs/Components/Data/DateFormat" />
 
@@ -8,9 +9,7 @@ Date Format is a component that formats a date to a human readable format or use
 locale. It uses [date-fns](https://www.npmjs.com/package/date-fns).
 
 ## Example
-<Canvas withSource="open">
-  <Story id="components-data-dateformat--simple" />
-</Canvas>
+<Canvas sourceState="shown" of={DateFormatStories.Simple} />
 
 ## API
 <ArgsTable of={DateFormat} />

docs/components/data/Duration.story.mdx → docs/components/data/Duration.mdx

@@ -1,5 +1,6 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { Duration } from '../../../src/data/Duration';
+import * as DurationStories from '../../../src/data/Duration/Duration.story';
 
 <Meta title="Docs/Components/Data/Duration" />
 
@@ -13,9 +14,7 @@ the API that is exported.
 ## Example
 
 ### Component
-<Canvas withSource="open">
-  <Story id="components-data-duration--simple" />
-</Canvas>
+<Canvas sourceState="shown" of={DurationStories.Simple} />
 
 ### Function API
 ```ts

docs/components/data/Ellipsis.story.mdx → docs/components/data/Ellipsis.mdx

@@ -1,15 +1,14 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { Ellipsis } from '../../../src/data/Ellipsis';
+import * as EllipsisStories from '../../../src/data/Ellipsis/Ellipsis.story'
 
 <Meta title="Docs/Components/Data/Ellipsis" />
 
 # Ellipsis
 Simple ellipsis component that handles expanding text.
 
 ## Example
-<Canvas withSource="open">
-  <Story id="components-data-ellipsis--simple" />
-</Canvas>
+<Canvas sourceState="shown" of={EllipsisStories.Simple} />
 
 ## API
 <ArgsTable of={Ellipsis} />

docs/components/data/InfinityList.story.mdx → docs/components/data/InfinityList.mdx

@@ -1,5 +1,6 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { InfinityList } from '../../../src/data/InfinityList';
+import * as InfinityListStories from '../../../src/data/InfinityList/InfinityList.story'
 
 <Meta title="Docs/Components/Data/Infinity List" />
 
@@ -16,14 +17,10 @@ the hook API.
 ## Example
 
 ### Component
-<Canvas withSource="open">
-  <Story id="components-data-infinitylist--simple" />
-</Canvas>
+<Canvas sourceState="shown" of={InfinityListStories.Simple} />
 
 ### Hook API
-<Canvas withSource="open">
-  <Story id="components-data-infinitylist--hook" />
-</Canvas>
+<Canvas sourceState="shown" of={InfinityListStories.Hook}/>
 
 ## API
 <ArgsTable of={InfinityList} />

docs/components/data/Pluralize.story.mdx → docs/components/data/Pluralize.mdx

@@ -1,15 +1,14 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { Pluralize } from '../../../src/data/Pluralize';
+import * as PluralizeStories from '../../../src/data/Pluralize/Pluralize.story'
 
 <Meta title="Docs/Components/Data/Pluralize" />
 
 # Pluralize
 Render nouns in singular or plural form.
 
 ## Example
-<Canvas withSource="open">
-  <Story id="components-data-pluralize--simple" />
-</Canvas>
+<Canvas sourceState="shown" of={PluralizeStories.Simple}/>
 
 ## API
 <ArgsTable of={Pluralize} />

docs/components/data/Redact.story.mdx → docs/components/data/Redact.mdx

@@ -1,15 +1,14 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { Redact } from '../../../src/data/Redact';
+import * as RedactStories from '../../../src/data/Redact/Redact.story'
 
 <Meta title="Docs/Components/Data/Redact" />
 
 # Redact
 A simple component that will intelligently redact text using [coverup](https://www.npmjs.com/package/coverup).
 
 ## Example
-<Canvas withSource="open">
-  <Story id="components-data-redact--basic" />
-</Canvas>
+<Canvas sourceState="shown" of={RedactStories.Basic} />
 
 ## API
 <ArgsTable of={Redact} />

docs/components/data/Sort.story.mdx → docs/components/data/Sort.mdx

@@ -1,15 +1,14 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { Sort } from '../../../src/data/Sort';
+import * as SortStories from '../../../src/data/Sort/Sort.story';
 
 <Meta title="Docs/Components/Data/Sort" />
 
 # Sort
 A simple component that shows the sort direction and allows toggling.
 
 ## Example
-<Canvas withSource="open">
-  <Story id="components-data-sort--simple" />
-</Canvas>
+<Canvas sourceState="shown" of={SortStories.Simple} />
 
 ## API
 <ArgsTable of={Sort} />

docs/components/elements/Avatar.story.mdx → docs/components/elements/Avatar.mdx

@@ -1,14 +1,13 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { Avatar } from '../../../src/elements/Avatar';
+import * as AvatarStories from '../../../src/elements/Avatar/Avatar.story'
 
 <Meta title="Docs/Components/Elements/Avatar" />
 
 # Avatar
 
 ## Example
-<Canvas withSource="open">
-  <Story id="components-elements-avatar--default" />
-</Canvas>
+<Canvas sourceState="shown" of={AvatarStories.Default}/>
 
 ## Design Tokens
 This component uses the following design tokens:

docs/components/elements/AvatarGroup.story.mdx → docs/components/elements/AvatarGroup.mdx

@@ -1,15 +1,14 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { AvatarGroup } from '../../../src/elements/AvatarGroup';
+import * as AvatarGroupStories from '../../../src/elements/AvatarGroup/AvatarGroup.story';
 
 <Meta title="Docs/Components/Elements/AvatarGroup" />
 
 # AvatarGroup
 A component to display a group of avatars with a maximum size.
 
 ## Example
-<Canvas withSource="open">
-  <Story id="components-elements-avatar-group--basic" />
-</Canvas>
+<Canvas sourceState="shown" of={AvatarGroupStories.Basic} />
 
 ## Design Tokens
 This component uses the following design tokens:

docs/components/elements/Button.story.mdx → docs/components/elements/Button.mdx

@@ -1,15 +1,16 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs';
 import { Button } from '../../../src/elements/Button';
+import * as ButtonStories from '../../../src/elements/Button/Button.story';
 
 <Meta title="Docs/Components/Elements/Button" />
 
 # Button
 Simple button component.
 
-## Example
-<Canvas withSource="open">
-  <Story id="components-elements-button--variants" />
-</Canvas>
+## Examples
+<Canvas sourceState="shown" of={ButtonStories.Variants} />
+<Canvas sourceState="shown" of={ButtonStories.Sizes} />
+<Canvas sourceState="shown" of={ButtonStories.Colors} />
 
 ## Design Tokens
 This component uses the following design tokens: