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

このエントリーをはてなブックマークに追加

こんにちは。フロントエンドエンジニアの辻です。
前回に引き続き、Storybook について触れていきます。今回は Typeset を扱います。

Stroybook Doc blocks の Typeset

Typeset とは、Storybook Doc blocks の一種で、プロジェクトのフォントに関する情報をまとめるための機能です。

Typeset の使い方

Storybook 公式サイトの Typeset にある通り、@storybook/blocks から Typeset を import して、props を設定していきます。

Typeset は 4 つの props を受け取る事ができ、これらの値を変更する事で Stroybook 上でフォントの見た目をカスタマイズします。

props 名内容
fontFamilyfont-family を指定します。
fontSizesfont-size を指定します。
fontWeightfont-weight を指定します。
sampleTextStroybook 上で表示するサンプルテキストを指定します。
> Typeset props

以下がサンプルコードです。

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 />
}

Stroybook を起動すると、上記の typography.stories.tsx は下記のように表示されます。
フォントの情報が各 font-size・font-weight・font-family ごとに、網羅されていますね。

このように Typeset を使えば、フォントの情報を簡単にまとめられるため、デザイナーとフロントエンドエンジニア間での情報共有がスムーズに進みます。

まとめ

今回は Storybook Doc blocks の Typeset を紹介しました。
また機会がありましたら、他の Storybook Doc blocks にも触れてみたいと思います。

今すぐの転職でなくてもOKです！まずはお話しませんか？

現在弊社では一緒にお仕事をしてくださるエンジニアさんやデザイナーさんを積極募集しています。まずはカジュアルな面談で、お互いに大事にしていることをお話できたらうれしいです。詳しい応募要項は以下からチェックしてください。

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでの面談でお話しましょう。ぜひお気軽にお問い合わせください！

話をしてみたい！

タグ

このエントリーをはてなブックマークに追加

投稿者 Tsuji Atsuhiro

フロントエンドエンジニア。 DTP・Webデザイナーを経験した後、フロントエンドエンジニアに転向。HTML/CSS/JavaScriptを中心にWeb開発を担当してきました。 UI・UXに興味があり、デザイン・コーディング両面から考えられるデザインエンジニアを目指しています。 普段はマラソンやボクシングなどで体を動かしてます。

合わせて読みたい記事

最近の記事