Merge pull request #534 from pixiv/toshusai/add-story-docs

Feat: add docs for storybook

.storybook/main.js

@@ -5,7 +5,11 @@ const glob = promisify(require('glob'))
 const { viteCommonjs } = require('@originjs/vite-plugin-commonjs')
 
 module.exports = {
-  stories: ['../packages/**/*.mdx', '../packages/**/*.story.@(tsx)'],
+  stories: [
+    '../packages/**/*.mdx',
+    '../packages/**/*.story.@(tsx)',
+    './src/**/*.mdx',
+  ],
 
   addons: [
     getAbsolutePath('@storybook/addon-essentials'),

.storybook/preview.js

@@ -12,6 +12,11 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  options: {
+    storySort: {
+      order: ['DOCS'],
+    },
+  },
   viewMode: 'docs',
   docs: {
     container: DocsContainer,

.storybook/src/README.mdx

@@ -0,0 +1,23 @@
+import { Meta, Story } from '@storybook/addon-docs'
+
+<Meta title="DOCS/README" />
+
+![charcoal logo](https://charcoal-web.pixiv.design/charcoal-ogp.jpg)
+
+# Charcoal
+
+## charcoal について
+
+charcoal は [ピクシブ株式会社](https://www.pixiv.co.jp/)
+のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。
+オープンソースであり、ソースコードは全て[Apache License 2.0 ](https://www.apache.org/licenses/LICENSE-2.0) のもと [GitHub リポジトリ](https://github.com/pixiv/charcoal) として公開されています。
+
+## charcoal という名前
+
+「charcoal（木炭）」とはデッサンの道具であり、線を引く、表現の基礎となる素材の一つです。
+また創作物を主役とするサービスの基盤として、それ自体は色を持たないモノクロの素材である、というニュアンスも含みます。
+
+## 設計思想
+
+charcoal はいわゆるコンポーネント実装も含みますが、それ以外にも UI の実装に必要なパッケージを多数収録しています。
+charcoal の設計思想は「定数」「ユーティリティ」「コンポーネント」の三層構造として説明されます。

packages/styled/src/README.mdx

@@ -0,0 +1,44 @@
+import { Meta, Story } from '@storybook/addon-docs'
+
+<Meta title="styled/README" />
+
+# Install
+
+## yarn
+
+```
+yarn add @charcoal-ui/styled
+```
+
+# Usage
+
+```tsx
+import { FC, ReactNode } from 'react'
+import { light, dark } from '@charcoal-ui/theme'
+import {
+  TokenInjector,
+  useTheme,
+  useThemeSetter,
+  themeSelector,
+  prefersColorScheme,
+} from '@charcoal-ui/styled'
+
+const ExampleProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const [theme] = useTheme()
+  useThemeSetter()
+  return (
+    <ThemeProvider theme={theme === 'dark' ? dark : light}>
+      <TokenInjector
+        theme={{
+          ':root': light,
+          [themeSelector('light')]: light,
+          [themeSelector('dark')]: dark,
+          [prefersColorScheme('dark')]: dark,
+        }}
+        background="background1"
+      />
+      {children}
+    </ThemeProvider>
+  )
+}
+```

packages/styled/src/__snapshots__/index.story.storyshot → packages/styled/src/__snapshots__/addThemeUtils.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests styled/example Example 1`] = `
+exports[`Storybook Tests styled/addThemeUtils Example 1`] = `
 .c0 {
   gap: 40px;
   color: #1f1f1f;

packages/styled/src/themeUtils.mdx → packages/styled/src/addThemeUtils.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as CheckboxStories from './index.story'
+import * as Stories from './addThemeUtils.story'
 
 <Meta title="styled/addThemeUtils" />
 
@@ -41,4 +41,4 @@ const AssertiveRingDiv = styled.div`
 
 ### Example
 
-<Canvas of={CheckboxStories.Example} />
+<Canvas of={Stories.Example} />

packages/styled/src/index.story.tsx → packages/styled/src/addThemeUtils.story.tsx

@@ -2,7 +2,7 @@ import styled, { ThemeProvider } from 'styled-components'
 import { MyTheme, myTheme } from './storyHelper'
 
 export default {
-  title: 'styled/example',
+  title: 'styled/addThemeUtils',
 }
 
 declare module 'styled-components' {

packages/styled/src/createTheme.mdx

@@ -0,0 +1,35 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+<Meta title="styled/createTheme" />
+
+# `createTheme`(`deprecated`)
+
+The helper function for styled-components has a performance issue.
+
+```tsx
+import styled from 'styled-components'
+import { createTheme } from '@charcoal-ui/styled'
+
+export const theme = createTheme(styled)
+
+export const Preview = () => {
+  return (
+    <>
+      <Ex>brand</Ex>
+      <Ex2>hover or press me</Ex2>
+    </>
+  )
+}
+const Ex = styled.p`
+  ${theme((o) => [o.bg.brand, o.font.text5, o.width.px(104), o.height.px(104)])}
+`
+
+const Ex2 = styled.p`
+  ${theme((o) => [
+    o.bg.success.hover.press,
+    o.font.text5,
+    o.width.px(104),
+    o.height.px(104),
+  ])}
+`
+```

packages/styled/src/index.test.tsx

@@ -3,7 +3,7 @@ import 'jest-styled-components'
 
 import renderer from 'react-test-renderer'
 import styled, { ThemeProvider } from 'styled-components'
-import { Example } from './index.story'
+import { Example } from './addThemeUtils.story'
 import { MyTheme, myTheme } from './storyHelper'
 
 function render(children: JSX.Element) {