feat: mdx to csf

Orfium · Nov 29, 2023 · c95da32 · c95da32
1 parent ad1c153
commit c95da32
Show file tree

Hide file tree

Showing 78 changed files with 4,057 additions and 3,388 deletions.
diff --git a/src/components/Avatar/Avatar.mdx b/src/components/Avatar/Avatar.mdx
@@ -0,0 +1,56 @@
+import { Meta, Canvas, ArgTypes, Story } from '@storybook/blocks';
+import Avatar from './Avatar';
+import SectionHeader from '../../storybook/SectionHeader';
+import * as AvatarStories from './Avatar.stories';
+
+<Meta of={AvatarStories} />
+
+<SectionHeader title={'Avatar'} />
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+- [Variants](#variants)
+
+## Overview
+
+A universal Avatar component can be found around ictinus on menus or can be a standalone component as well. It renders either images, letter or icon from our library
+
+## Props
+
+<ArgTypes of={Avatar} />
+
+## Usage
+
+<UsageGuidelines
+  guidelines={['Use an avatar to consistently represent a person, group, or project']}
+  policies={[
+    'Don’t use when the the max amount of users related to the value is one: use an avatar instead',
+  ]}
+/>
+
+<SubsectionHeader title="Variants" />
+
+### Avatar with icon
+
+Avatar with icon
+
+<Canvas of={AvatarStories.AvatarWithIcon} />
+
+### Avatar with letter
+
+Avatar with letter
+
+<Canvas of={AvatarStories.AvatarWithLetter} />
+
+### Avatar with src
+
+Avatar with src
+
+<Canvas of={AvatarStories.AvatarWithSrc} />
+
+### Avatar Playground
+
+Avatar Playground
+
+<Canvas of={AvatarStories.AvatarPlayground} />
diff --git a/src/components/Avatar/Avatar.stories.mdx → src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.mdx → src/components/Avatar/Avatar.stories.tsx
@@ -1,88 +1,44 @@
-import { Meta, Preview, Props, Story } from '@storybook/addon-docs';
 import { select, withKnobs } from '@storybook/addon-knobs';
 import Avatar from './Avatar';
-import AvatarStack from './AvatarStack';
 import Stack from '../storyUtils/Stack';
-import { BASE_SHADE } from '../../theme/palette';
 import { FIGMA_URL } from '../../utils/common';
-import Overview from '../../storybook/Overview';
 
-<Meta
-  title="Updated Components/Avatar/Avatar"
-  component={Avatar}
-  parameters={{
+export default {
+  title: 'Updated Components/Avatar/Avatar',
+  component: Avatar,
+
+  parameters: {
     design: [
       {
         type: 'figma',
         name: 'Avatar',
         url: `${FIGMA_URL}?node-id=3325%3A58246`,
       },
     ],
-    chromatic: { diffThreshold: 0.3 },
-  }}
-/>
-
-<SectionHeader title={'Avatar'} />
-
-- [Overview](#overview)
-- [Props](#props)
-- [Usage](#usage)
-- [Variants](#variants)
-
-## Overview
 
-<Story
-  name="Overview"
-  parameters={{
-    previewTabs: {
-      canvas: { hidden: true },
+    chromatic: {
+      diffThreshold: 0.3,
     },
-  }}
->
-  <Overview>
-    A universal Avatar component can be found around ictinus on menus or can be a standalone
-    component as well. It renders either images, letter or icon from our library
-  </Overview>
-</Story>
-
-## Props
-
-<Props of={Avatar} />
-
-## Usage
-
-<UsageGuidelines
-  guidelines={['Use an avatar to consistently represent a person, group, or project']}
-  policies={[
-    'Don’t use when the the max amount of users related to the value is one: use an avatar instead',
-  ]}
-/>
+  },
+};
 
-<SubsectionHeader title="Variants" />
-
-### Avatar with icon
-
-Avatar with icon
-
-<Preview>
-  <Story name="Avatar with icon">
+export const AvatarWithIcon = {
+  render: () => (
     <Stack>
-      <Avatar size={1} color={'blue'} iconName={'user'} />
-      <Avatar size={2} color={'blue'} iconName={'alert'} />
-      <Avatar size={3} color={'blue'} iconName={'clock'} />
-      <Avatar size={4} color={'blue'} iconName={'earnings'} />
-      <Avatar size={5} color={'blue'} iconName={'settings'} />
-      <Avatar size={6} color={'blue'} iconName={'view'} />
+      <Avatar size={1} color={'blue'} />
+      <Avatar size={2} color={'blue'} />
+      <Avatar size={3} color={'blue'} />
+      <Avatar size={4} color={'blue'} />
+      <Avatar size={5} color={'blue'} />
+      <Avatar size={6} color={'blue'} />
     </Stack>
-  </Story>
-</Preview>
-
-### Avatar with letter
+  ),
 
-Avatar with letter
+  name: 'Avatar with icon',
+};
 
-<Preview>
-  <Story name="Avatar with letter">
+export const AvatarWithLetter = {
+  render: () => (
     <Stack>
       <Avatar size={1} color={'blue'}>
         JN
@@ -103,15 +59,13 @@ Avatar with letter
         JN
       </Avatar>
     </Stack>
-  </Story>
-</Preview>
+  ),
 
-### Avatar with src
+  name: 'Avatar with letter',
+};
 
-Avatar with src
-
-<Preview>
-  <Story name="Avatar with src">
+export const AvatarWithSrc = {
+  render: () => (
     <Stack>
       <Avatar size={1} src={'https://mui.com/static/images/avatar/1.jpg'}>
         JN
@@ -132,15 +86,13 @@ Avatar with src
         JN
       </Avatar>
     </Stack>
-  </Story>
-</Preview>
-
-### Avatar Playground
+  ),
 
-Avatar Playground
+  name: 'Avatar with src',
+};
 
-<Preview>
-  <Story name="Avatar Playground" parameters={{ decorators: [withKnobs] }}>
+export const AvatarPlayground = {
+  render: () => (
     <Stack>
       <Avatar
         size={select('size', [1, 2, 3, 4, 5, 6], 1)}
@@ -158,5 +110,11 @@ Avatar Playground
         color={select('color', ['blue', 'teal', 'purple', 'red', 'orange'], 'blue')}
       />
     </Stack>
-  </Story>
-</Preview>
+  ),
+
+  name: 'Avatar Playground',
+
+  parameters: {
+    decorators: [withKnobs],
+  },
+};
diff --git a/src/components/Avatar/AvatarStack.mdx b/src/components/Avatar/AvatarStack.mdx
@@ -0,0 +1,41 @@
+import { Meta, Canvas, ArgTypes, Story } from '@storybook/blocks';
+import AvatarStack from './AvatarStack';
+import SectionHeader from '../../storybook/SectionHeader';
+import * as AvatarStackStories from './AvatarStack.stories';
+import Overview from '../../storybook/Overview';
+
+<Meta of={AvatarStackStories} />
+
+<SectionHeader title={'Avatar Stack'} />
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+- [Variants](#variants)
+
+## Overview
+
+A universal AvatarStack component that renders its children as a stack.
+
+## Props
+
+<ArgTypes of={AvatarStack} />
+
+## Usage
+
+<UsageGuidelines
+  guidelines={[
+    'When you need to show a visual representation of users related to a specific value in the data set',
+  ]}
+  policies={[
+    'Don’t use when the the max amount of users related to the value is one: use an avatar instead',
+  ]}
+/>
+
+<SubsectionHeader title="Variants" />
+
+### Avatar Stack
+
+Avatar Stacks in different sizes
+
+<Canvas of={AvatarStackStories.AvatarStackStory} />
diff --git a/...components/Avatar/AvatarStack.stories.mdx → ...components/Avatar/AvatarStack.stories.tsx b/...components/Avatar/AvatarStack.stories.mdx → ...components/Avatar/AvatarStack.stories.tsx
@@ -1,73 +1,25 @@
-import { Meta, Preview, Props, Story } from '@storybook/addon-docs';
-import { select, withKnobs } from '@storybook/addon-knobs';
 import Avatar from './Avatar';
 import AvatarStack from './AvatarStack';
 import Stack from '../storyUtils/Stack';
-import { BASE_SHADE } from '../../theme/palette';
 import { FIGMA_URL } from '../../utils/common';
-import Overview from '../../storybook/Overview';
 
-<Meta
-  title="Updated Components/Avatar/AvatarStack"
-  component={Avatar}
-  parameters={{
+export default {
+  title: 'Updated Components/Avatar/AvatarStack',
+  component: Avatar,
+
+  parameters: {
     design: [
       {
         type: 'figma',
         name: 'Avatar',
         url: `${FIGMA_URL}?node-id=3325%3A58246`,
       },
     ],
-  }}
-/>
-
-<SectionHeader title={'Avatar Stack'} />
-
-- [Overview](#overview)
-- [Props](#props)
-- [Usage](#usage)
-- [Variants](#variants)
-
-## Overview
-
-<Story
-  name="Overview"
-  parameters={{
-    previewTabs: {
-      canvas: { hidden: true },
-    },
-  }}
->
-  <Overview>A universal AvatarStack component that renders its children as a stack.</Overview>
-</Story>
-
-## Props
-
-<Props of={AvatarStack} />
-
-## Usage
+  },
+};
 
-<UsageGuidelines
-  guidelines={[
-    'When you need to show a visual representation of users related to a specific value in the data set',
-  ]}
-  policies={[
-    'Don’t use when the the max amount of users related to the value is one: use an avatar instead',
-  ]}
-/>
-
-## Props
-
-<Props of={AvatarStack} />
-
-<SubsectionHeader title="Variants" />
-
-### Avatar Stack
-
-Avatar Stacks in different sizes
-
-<Preview>
-  <Story name="Avatar Stack">
+export const AvatarStackStory = {
+  render: () => (
     <Stack isVertical>
       <AvatarStack size={1} color={'blue'}>
         <Avatar size={1} src={'https://mui.com/static/images/avatar/6.jpg'}>
@@ -113,7 +65,7 @@ Avatar Stacks in different sizes
         <Avatar size={3} src={'https://mui.com/static/images/avatar/6.jpg'}>
           JN
         </Avatar>
-        <Avatar size={3} color={'blue'} iconName={'user'} />
+        <Avatar size={3} color={'blue'} />
         <Avatar size={3} src={'https://mui.com/static/images/avatar/4.jpg'}>
           JN
         </Avatar>
@@ -151,7 +103,6 @@ Avatar Stacks in different sizes
         <Avatar size={5} src={'https://mui.com/static/images/avatar/6.jpg'}>
           JN
         </Avatar>
-        <Avatar size={5} color={'blue'} iconName={'user'} />
         <Avatar size={5} src={'https://mui.com/static/images/avatar/4.jpg'}>
           JN
         </Avatar>
@@ -169,7 +120,6 @@ Avatar Stacks in different sizes
         <Avatar size={6} src={'https://mui.com/static/images/avatar/6.jpg'}>
           JN
         </Avatar>
-        <Avatar size={6} color={'blue'} iconName={'user'} />
         <Avatar size={6} src={'https://mui.com/static/images/avatar/4.jpg'}>
           JN
         </Avatar>
@@ -184,5 +134,7 @@ Avatar Stacks in different sizes
         </Avatar>
       </AvatarStack>
     </Stack>
-  </Story>
-</Preview>
+  ),
+
+  name: 'Avatar Stack',
+};