Storybook Doc blocks の Typeset を使って、フォントの情報をまとめてみよう

import type { Meta, StoryObj } from '@storybook/react'
import { Title, Subtitle, Typeset } from '@storybook/blocks'

const SAMPLE_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
const TYPOGRAPHY_CONFIG = {
  type: {
    'font-sans-serif':
      '"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif',
    'font-serif': 'Georgia, Times, "Times New Roman", serif'
  },
  weight: {
    'font-weight-400': 400,
    'font-weight-700': 700
  },
  size: {
    xs: '10px',
    sm: '12px',
    base: '16px',
    lg: '20px',
    xl: '24px'
  }
} as const

const BlankComponent = () => <div className='font-sans'></div>

const meta: Meta<typeof BlankComponent> = {
  title: 'Components/Typography',
  component: BlankComponent,
  parameters: {
    docs: {
      page: () => (
        <>
          <Title>Typography</Title>
          <Subtitle>Normal x sans-serif</Subtitle>
          <Typeset
            fontFamily={TYPOGRAPHY_CONFIG.type['font-sans-serif']}
            fontSizes={[
              `${TYPOGRAPHY_CONFIG.size.xs}`,
              `${TYPOGRAPHY_CONFIG.size.sm}`,
              `${TYPOGRAPHY_CONFIG.size.base}`,
              `${TYPOGRAPHY_CONFIG.size.lg}`,
              `${TYPOGRAPHY_CONFIG.size.xl}`
            ]}
            fontWeight={TYPOGRAPHY_CONFIG.weight['font-weight-400']}
            sampleText={SAMPLE_TEXT}
          />
          <Subtitle>Bold x sans-serif</Subtitle>
          <Typeset
            fontFamily={TYPOGRAPHY_CONFIG.type['font-sans-serif']}
            fontSizes={[
              `${TYPOGRAPHY_CONFIG.size.xs}`,
              `${TYPOGRAPHY_CONFIG.size.sm}`,
              `${TYPOGRAPHY_CONFIG.size.base}`,
              `${TYPOGRAPHY_CONFIG.size.lg}`,
              `${TYPOGRAPHY_CONFIG.size.xl}`
            ]}
            fontWeight={TYPOGRAPHY_CONFIG.weight['font-weight-700']}
            sampleText={SAMPLE_TEXT}
          />

          <Subtitle>Normal x serif</Subtitle>
          <Typeset
            fontFamily={TYPOGRAPHY_CONFIG.type['font-serif']}
            fontSizes={[
              `${TYPOGRAPHY_CONFIG.size.xs}`,
              `${TYPOGRAPHY_CONFIG.size.sm}`,
              `${TYPOGRAPHY_CONFIG.size.base}`,
              `${TYPOGRAPHY_CONFIG.size.lg}`,
              `${TYPOGRAPHY_CONFIG.size.xl}`
            ]}
            fontWeight={TYPOGRAPHY_CONFIG.weight['font-weight-400']}
            sampleText={SAMPLE_TEXT}
          />
          <Subtitle>Bold x serif</Subtitle>
          <Typeset
            fontFamily={TYPOGRAPHY_CONFIG.type['font-serif']}
            fontSizes={[
              `${TYPOGRAPHY_CONFIG.size.xs}`,
              `${TYPOGRAPHY_CONFIG.size.sm}`,
              `${TYPOGRAPHY_CONFIG.size.base}`,
              `${TYPOGRAPHY_CONFIG.size.lg}`,
              `${TYPOGRAPHY_CONFIG.size.xl}`
            ]}
            fontWeight={TYPOGRAPHY_CONFIG.weight['font-weight-700']}
            sampleText={SAMPLE_TEXT}
          />
        </>
      )
    }
  }
}
export default meta
type Story = StoryObj<typeof BlankComponent>

export const Base: Story = {
  render: () => <BlankComponent />
}