refactor(storybook): migrate 7.x to 8.x and update obsolete stories

.storybook/main.js

@@ -11,14 +11,15 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
-    'storybook-dark-mode',
     // NB:
     // 'storybook-addon-swc' may improve build speed in the future.
     // - At time of writing, the build performance gains are negated because it
     //   switches to a slower refresh plugin and also causes other compatibility
     //   issues in Storybook 6.
     // - Testing with React 16.14.0 and Storybook 7 (beta) seemed to perform
     //   well.
+    'storybook-dark-mode',
+    '@storybook/addon-webpack5-compiler-swc',
   ],
 
   framework: {
@@ -85,9 +86,7 @@ module.exports = {
     }
     return config
   },
-  docs: {
-    autodocs: true,
-  },
+  docs: {},
 }
 
 /// Apply some customizations to the config, intended to decrease build time

.storybook/preview.js

@@ -42,3 +42,4 @@ export const parameters = {
 window.t = function (str) {
   return str
 }
+export const tags = ['autodocs']

jsapp/js/components/common/ButtonNew.tsx

@@ -1,25 +1,45 @@
-import { Button as ButtonMantine, createPolymorphicComponent, Tooltip } from '@mantine/core'
+import { Button as ButtonMantine, createPolymorphicComponent, MantineSize, Tooltip } from '@mantine/core'
 import type { ButtonProps as ButtonPropsMantine, TooltipProps } from '@mantine/core/lib/components'
+import { IconName } from 'jsapp/fonts/k-icons'
 import { forwardRef } from 'react'
+import Icon, { IconSize } from './icon'
 
-// See boilerpate at: https://mantine.dev/guides/polymorphic/#wrapping-polymorphic-components
+const ButtonToIconMap: Partial<Record<NonNullable<ButtonProps['size']>, IconSize>> = {
+  sm: 'xs',
+  md: 's',
+  lg: 'm',
+}
 
 export interface ButtonProps extends ButtonPropsMantine {
   tooltip?: React.ReactNode
   tooltipProps?: Partial<Omit<TooltipProps, 'label'>>
+
+  // Standard way of using icons with deterministic sizes.
+  // Note: never use Button with just an icon and no text - if you need that, use `ActionIcon` instead.
+  leftIcon?: IconName
+  rightIcon?: IconName
+  leftSection?: never
+  rightSection?: never
 }
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ tooltip, tooltipProps, ...others }, ref) => {
-  if (!tooltip) {
-    return <ButtonMantine {...others} ref={ref} />
-  }
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ tooltip, tooltipProps, leftIcon, rightIcon, ...others }, ref) => {
+    const iconSize = ButtonToIconMap[others.size ?? 'sm']
+    const leftSection = leftIcon && <Icon name={leftIcon} size={iconSize} />
+    const rightSection = rightIcon && <Icon name={rightIcon} size={iconSize} />
 
-  return (
-    <Tooltip label={tooltip} {...tooltipProps}>
-      <ButtonMantine {...others} ref={ref} />
-    </Tooltip>
-  )
-})
+    if (!tooltip) {
+      return <ButtonMantine {...others} leftSection={leftSection} rightSection={rightSection} ref={ref} />
+    }
+
+    return (
+      <Tooltip label={tooltip} {...tooltipProps}>
+        <ButtonMantine {...others} leftSection={leftSection} rightSection={rightSection} ref={ref} />
+      </Tooltip>
+    )
+  },
+)
 Button.displayName = 'Button'
 
+// See boilerpate at: https://mantine.dev/guides/polymorphic/#wrapping-polymorphic-components
 export default createPolymorphicComponent<'button', ButtonProps>(Button)

jsapp/js/components/common/avatar.stories.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import type { ComponentStory, ComponentMeta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 import Avatar from './avatar'
 import type { AvatarSize } from './avatar'
 
 const avatarSizes: AvatarSize[] = ['s', 'm']
 
-export default {
+const meta: Meta<typeof Avatar> = {
   title: 'common/Avatar',
   component: Avatar,
   argTypes: {
@@ -16,32 +16,35 @@ export default {
     },
     username: { type: 'string' },
     isUsernameVisible: { type: 'boolean' },
-    hasFullName: {
-      type: 'boolean',
-      description: 'Allows testing `fullName` being empty string or not existing',
+    fullName: {
+      options: ['Josh Johnson', 'Captain Person McPerson the Third', undefined],
+      control: { type: 'select' },
+      description: 'This is optional and component renders differently when it is `undefined`',
     },
-    fullName: { type: 'string', if: { arg: 'hasFullName', truthy: true } },
-    hasEmail: {
-      type: 'boolean',
-      description: 'Allows testing `email` being empty string or not existing',
+    email: {
+      options: ['[email protected]', '[email protected]', undefined],
+      control: { type: 'select' },
+      description: 'This is optional and component renders differently when it is `undefined`',
     },
-    email: { type: 'string', if: { arg: 'hasEmail', truthy: true } },
     isEmpty: {
       type: 'boolean',
     },
   },
-} as ComponentMeta<typeof Avatar>
+}
+
+export default meta
 
-const Template: ComponentStory<typeof Avatar> = (args) => <Avatar {...args} />
+type Story = StoryObj<typeof Avatar>
 
-export const Simple = Template.bind({})
-Simple.args = {
-  size: avatarSizes[0],
-  username: 'leszek',
-  isUsernameVisible: true,
+export const Simple: Story = {
+  args: {
+    size: avatarSizes[0],
+    username: 'leszek',
+    isUsernameVisible: true,
+  },
 }
 
-export const Full: StoryObj<typeof Avatar> = {
+export const Full: Story = {
   render: () => (
     <Avatar
       size='m'
@@ -184,12 +187,15 @@ const bulkUsernames = [
   'Roberto',
   'Peng',
 ]
-export const BulkColorsTest = () => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
-    {bulkUsernames.map((username) => (
-      <div key={username}>
-        <Avatar size='m' username={username} />
-      </div>
-    ))}
-  </div>
-)
+
+export const BulkColorsTest: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
+      {bulkUsernames.map((username) => (
+        <div key={username}>
+          <Avatar size='m' username={username} />
+        </div>
+      ))}
+    </div>
+  ),
+}

jsapp/js/components/common/badge.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { ComponentStory, ComponentMeta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 import { IconNames } from 'jsapp/fonts/k-icons'
 import Badge from './badge'
@@ -8,7 +8,7 @@ import type { BadgeColor, BadgeSize } from './badge'
 const badgeColors: BadgeColor[] = ['light-storm', 'light-amber', 'light-blue', 'light-red', 'light-teal', 'light-green']
 const badgeSizes: BadgeSize[] = ['s', 'm', 'l']
 
-export default {
+const meta: Meta<typeof Badge> = {
   title: 'common/Badge',
   component: Badge,
   argTypes: {
@@ -21,18 +21,21 @@ export default {
       control: { type: 'select' },
     },
     icon: {
-      options: IconNames,
+      options: Object.keys(IconNames),
       control: { type: 'select' },
     },
   },
-} as ComponentMeta<typeof Badge>
+}
+
+export default meta
 
-const Template: ComponentStory<typeof Badge> = (args) => <Badge {...args} />
+type Story = StoryObj<typeof Badge>
 
-export const Primary = Template.bind({})
-Primary.args = {
-  color: badgeColors[0],
-  label: 'deployed',
-  size: badgeSizes[0],
-  icon: IconNames['project-deployed'],
+export const Primary: Story = {
+  args: {
+    color: badgeColors[0],
+    label: 'deployed',
+    size: badgeSizes[0],
+    icon: IconNames['project-deployed'],
+  },
 }