やったこと
themeについてのまとめ
レビューまとめ
COLOR定数をまとめる方法(一例)
type HexColor = `#${string}`
interface AppColorSet {
primary: HexColor
white: HexColor
black: HexColor
}
interface AppTheme {
color: AppColorSet
}
export const theme: AppTheme = {
color: {
primary: "#00A559",
white: "#fff",
black: "#4D4D4D",
},
} as const
HexColorは色の方をliteral typeで指定
AppColorSetで必要な種類を指定
color: {
primary: "#00A559",
white: "#fff",
black: "#4D4D4D",
},
この構造の型を作成する
また、ThemeProviderに入れ込むことで下位コンポーネントで使用可能になる
background-color: ${(props) => props.isSelected ? props.theme.color.primary : props.theme.color.white};
受け取る時はpropsに格納されている
StorybookでThemeProviderを使う方法
現在、ThemeProviderが適用されるのは<ThemeProvider>で囲われた中のコンポーネントだけ
すると、Sotrybookではこれらの色の定数は反映されない
解決方法としては、StorybookのdecoratorsにProviderを登録することで解決する
export const StorybookPropvider = (Story: Story, context: StoryContext) => {
return (
<ThemeProvider theme={theme}>
<Story {...context} />
</ThemeProvider>
)
}
decoratorsって何？
ストーリーを描画する際に、そのストーリーをラップした上位コンポーネントのこと
全てのストーリーに共通して適用するデコレータを定義する場合は、 .storybook/preview.js 内に、 decorators フィールドを追加する
decorators と、複数形になっていることからもわかるように、ここには配列で複数のデコレータを指定することができます。デコレータが複数ある場合は、定義した順に適用され、ラッパーをラップしたコンポーネントの形になります。
export const decorators = [
(Story, context) => ({
template: `
<div style="backgroundColor: gray; padding: 10px">
<Story />
</div>
`
})
]
第一引数には、対象のストーリーコンポーネント(<Story />)が渡される
ここでは、 <story /> を、 <div style="backgroundColor: gray; padding: 10px"> でラップすることで、全てのストーリーに 10px の padding と背景色を設定しています。
また、第二引数の context には、描画するストーリーに関する様々なメタデータが含まれています。
参考資料
- 公式
- [発展編] Decorators を定義する
- Storybook. Decorators and Context in examples
- What Type is Storybook Story From Example
StyledComponents命名について
各コンポーネントのトップレベルの要素についてはContainerと命名するのが多い
Styledとprefixを付けるのは、既存のコンポーネントを拡張する場合は見通しがよくなる
// e.g.
const StyledText = styled(Text)``