make playground story editable with controls

Author: francinelucca

packages/react/src/Avatar/Avatar.source.tsx

@@ -1,66 +1,15 @@
-// import type {Meta} from '@storybook/react-vite'
-
 import {Avatar} from '@primer/react'
-
-export default () => <Avatar alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
-
-// const DEFAULT_AVATAR_SIZE = 20
-
-// export default {
-//   title: 'Components/Avatar',
-//   component: Avatar,
-// }
-
-// type Args = {
-//   size?: number
-//   sizeAtNarrow?: number
-//   sizeAtRegular?: number
-//   sizeAtWide?: number
-// } & Omit<AvatarProps, 'size'>
-
-// export const Playground: StoryFn<Args> = args => {
-//   return (
-//     <Avatar
-//       size={DEFAULT_AVATAR_SIZE}
-//       square={args.square}
-//       src="https://avatars.githubusercontent.com/u/7143434?v=4"
-//       alt="mona"
-//     />
-//   )
-// }
-
-// Playground.args = {
-//   size: DEFAULT_AVATAR_SIZE,
-// }
-
-// Playground.argTypes = {
-//   size: {
-//     control: {
-//       type: 'number',
-//     },
-//   },
-//   sizeAtNarrow: {
-//     name: 'size.narrow',
-//     control: {
-//       type: 'number',
-//     },
-//   },
-//   sizeAtRegular: {
-//     name: 'size.regular',
-//     control: {
-//       type: 'number',
-//     },
-//   },
-//   sizeAtWide: {
-//     name: 'size.wide',
-//     control: {
-//       type: 'number',
-//     },
-//   },
-//   alt: {
-//     controls: false,
-//     table: {
-//       disable: true,
-//     },
-//   },
-// }
+import {parseSizeFromArgs} from 'storyHelpers'
+
+const Playground = args => {
+  return (
+    <Avatar
+      size={parseSizeFromArgs(args)}
+      square={args.square}
+      src="https://avatars.githubusercontent.com/u/7143434?v=4"
+      alt="mona"
+    />
+  )
+}
+
+export default Playground

packages/react/src/Avatar/Avatar.stories.tsx

@@ -1,22 +1,70 @@
 import * as PrimerReactLibrary from '../index'
+import * as storyHelpers from './storyHelpers'
 import {makeLiveEditStory} from 'storybook-addon-code-editor'
 import type {Meta, StoryObj} from '@storybook/react'
 import storyCode from './Avatar.source.tsx?raw'
+import {Avatar} from '../index'
 
-const meta = {
+const meta: Meta<typeof PrimerReactLibrary.Avatar> = {
   // Story defaults
   title: 'Components/Avatar',
-} satisfies Meta<typeof PrimerReactLibrary.Avatar>
+  component: PrimerReactLibrary.Avatar,
+} as Meta<typeof PrimerReactLibrary.Avatar>
+
+export const Default = () => <Avatar alt="mona" src="https://avatars.githubusercontent.com/u/7143434?v=4" />
 
 export default meta
 
-type Story = StoryObj<typeof meta>
+const DEFAULT_AVATAR_SIZE = 20
+
+type Args = {
+  size?: number
+  sizeAtNarrow?: number
+  sizeAtRegular?: number
+  sizeAtWide?: number
+} & Omit<PrimerReactLibrary.AvatarProps, 'size'>
+
+type Story = StoryObj<Args>
 
-export const Default: Story = {
+export const Playground: Story = {
   // Story config
+  args: {
+    size: DEFAULT_AVATAR_SIZE,
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: 'number',
+      },
+    },
+    sizeAtNarrow: {
+      name: 'size.narrow',
+      control: {
+        type: 'number',
+      },
+    },
+    sizeAtRegular: {
+      name: 'size.regular',
+      control: {
+        type: 'number',
+      },
+    },
+    sizeAtWide: {
+      name: 'size.wide',
+      control: {
+        type: 'number',
+      },
+    },
+    alt: {
+      controls: false,
+      table: {
+        disable: true,
+      },
+    },
+  },
 }
 
-makeLiveEditStory(Default, {
-  availableImports: {'@primer/react': PrimerReactLibrary},
+makeLiveEditStory(Playground, {
+  availableImports: {'@primer/react': PrimerReactLibrary, storyHelpers},
   code: storyCode,
 })