Storybook いれる

.gitignore

@@ -10,3 +10,5 @@ build/
 !.vscode/launch.json
 !.vscode/extensions.json
 !.vscode/*.code-snippets
+
+*storybook.log

.vscode/settings.json

@@ -26,5 +26,8 @@
   "[json]": {
     "editor.defaultFormatter": "biomejs.biome",
     "editor.tabSize": 2
+  },
+  "[mdx]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

.vscode/storybook.code-snippets

@@ -0,0 +1,39 @@
+{
+	// Place your nascalay-v2 ワークスペース snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
+	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
+	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
+	// Placeholders with the same ids are connected.
+	// Example:
+	// "Print to console": {
+	// 	"scope": "javascript,typescript",
+	// 	"prefix": "log",
+	// 	"body": [
+	// 		"console.log('$1');",
+	// 		"$2"
+	// 	],
+	// 	"description": "Log output to console"
+	// }
+	"init .stories.tsx": {
+		"scope": "typescriptreact",
+		"prefix": "storyinit",
+		"body": [
+			"import type { Meta, StoryObj } from '@storybook/react'",
+			"import { ${1:ComponentName} } from '${2:path/to/component}'",
+			"",
+			"const meta: Meta<typeof ${1:ComponentName}> = {",
+			"  title: '${1:ComponentName}',",
+			"  component: ${1:ComponentName},",
+			"  tags: ['autodocs'],",
+			"}",
+			"export default meta",
+			"",
+			"type Story = StoryObj<typeof ${1:ComponentName}>",
+			"",
+			"export const Primary: Story = {}",
+			""
+		],
+		"description": "Init storybook"
+	}
+}

apps/client/.storybook/main.ts

@@ -0,0 +1,35 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+import { dirname, join } from "node:path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+
+// biome-ignore lint/suspicious/noExplicitAny: FrameworkName のためにつける (生成時から any)
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: [
+    "../@(app|stories)/**/*.mdx",
+    "../@(app|stories)/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {
+      builder: {
+        viteConfigPath: "vite-sb.config.ts",
+      },
+    },
+  },
+};
+export default config;

apps/client/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400;500&display=swap"
+  rel="stylesheet"
+/>

apps/client/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

apps/client/app/theme/Card.mdx

@@ -0,0 +1,18 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
+import card from "./card";
+import styled from "@emotion/styled";
+
+<Meta title="theme/Card" />
+
+# Card
+
+border と box-shadow を指定します
+
+export const Card = styled.div`
+  ${card.default}
+
+width: 300px;
+height: 100px;
+`;
+
+<Card />

apps/client/app/theme/Colors.mdx

@@ -0,0 +1,94 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
+import colors from "./colors";
+
+<Meta title="theme/Colors" />
+
+# Colors
+
+- [Background](#background)
+- [Text](#text)
+- [Border](#border)
+- [Chromatic](#chromatic)
+
+## Background
+
+<ColorPalette>
+  <ColorItem
+    title="background.primary"
+    colors={{
+      default: colors.background.primary.default,
+    }}
+  />
+  <ColorItem
+    title="background.secondary"
+    colors={{
+      default: colors.background.secondary.default,
+    }}
+  />
+</ColorPalette>
+
+## Text
+
+<ColorPalette>
+  <ColorItem
+    title="text.primary"
+    colors={{
+      default: colors.text.primary.default,
+      disabled: colors.text.primary.disabled,
+    }}
+  />
+  <ColorItem
+    title="text.secondary"
+    colors={{
+      default: colors.text.secondary.default,
+    }}
+  />
+  <ColorItem
+    title="text.tertiary"
+    colors={{
+      default: colors.text.tertiary.default,
+    }}
+  />
+</ColorPalette>
+
+## Border
+
+<ColorPalette>
+  <ColorItem
+    title="border.primary"
+    colors={{
+      default: colors.border.primary.default,
+    }}
+  />
+</ColorPalette>
+
+## Chromatic
+
+<ColorPalette>
+  <ColorItem
+    title="chromatic.red"
+    colors={{
+      default: colors.chromatic.red.default,
+      hover: colors.chromatic.red.hover,
+      active: colors.chromatic.red.active,
+      disabled: colors.chromatic.red.disabled,
+    }}
+  />
+  <ColorItem
+    title="chromatic.blue"
+    colors={{
+      default: colors.chromatic.blue.default,
+      vivid: colors.chromatic.blue.vivid,
+    }}
+  />
+  <ColorItem
+    title="chromatic.yellow"
+    colors={{
+      default: colors.chromatic.yellow.default,
+      hover: colors.chromatic.red.hover,
+      active: colors.chromatic.red.active,
+      disabled: colors.chromatic.red.disabled,
+      "hover-secondary": colors.chromatic.yellow["hover-secondary"],
+    }}
+  />
+</ColorPalette>

apps/client/app/theme/Typography.mdx

@@ -0,0 +1,40 @@
+import { Meta, Typeset } from "@storybook/blocks";
+import typography from "./typography";
+
+<Meta title="theme/Typography" />
+
+export const sampleText =
+  "人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは、世界における自由、正義及び平和の基礎であるので、人権の無視及び軽侮が、人類の良心を踏みにじった野蛮行為をもたらし、言論及び信仰の自由が受けられ、恐怖及び欠乏のない世界の到来が、一般の人々の最高の願望として宣言されたので、人間が専制と圧迫とに対する最後の手段として反逆に訴えることがないようにするためには、法の支配によって人権保護することが肝要であるので、諸国間の友好関係の発展を促進することが、肝要であるので、国際連合の諸国民は、国際連合憲章において、基本的人権、人間の尊厳及び価値並びに男女の同権についての信念を再確認し、かつ、一層大きな自由のうちで社会的進歩と生活水準の向上とを促進することを決意したので、加盟国は、国際連合と協力して、人権及び基本的自由の普遍的な尊重及び遵守の促進を達成することを誓約したので、これらの権利及び自由に対する共通の理解は、この誓約を完全にするためにもっとも重要であるので、よって、ここに、国際連合総会は、社会の各個人及び各機関が、この世界人権宣言を常に念頭に置きながら、加盟国自身の人民の間にも、また、加盟国の管轄下にある地域の人民の間にも、これらの権利と自由との尊重を指導及び教育によって促進すること並びにそれらの普遍的かつ効果的な承認と遵守とを国内的及び国際的な漸進的措置によって確保することに努力するように、すべての人民とすべての国とが達成すべき共通の基準として、この世界人権宣言を公布する。";
+export const fontFamily = "'Kiwi Maru', serif";
+
+# Typography
+
+## Heading
+
+<Typeset
+  fontSizes={[
+    typography.heading1.fontSize,
+    typography.heading2.fontSize,
+    typography.heading3.fontSize,
+    typography.heading4.fontSize,
+    typography.heading5.fontSize,
+  ]}
+  fontWeights={typography.heading1.fontWeight}
+  lineHeights={typography.heading1.lineHeight}
+  sampleText={sampleText}
+  fontFamily={fontFamily}
+/>
+
+## Body
+
+<Typeset
+  fontSizes={[
+    typography.body1.fontSize,
+    typography.body2.fontSize,
+    typography.body3.fontSize,
+  ]}
+  fontWeights={typography.body1.fontWeight}
+  lineHeights={typography.body1.lineHeight}
+  sampleText={sampleText}
+  fontFamily={fontFamily}
+/>

apps/client/package.json

@@ -8,7 +8,9 @@
     "build": "remix vite:build",
     "dev": "remix vite:dev",
     "preview": "vite preview",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build"
   },
   "keywords": [],
   "author": "",
@@ -25,10 +27,20 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@repo/typescript-config": "workspace:*",
+    "@chromatic-com/storybook": "^1.4.0",
     "@remix-run/dev": "^2.9.2",
+    "@repo/typescript-config": "workspace:*",
+    "@storybook/addon-essentials": "^8.1.2",
+    "@storybook/addon-interactions": "^8.1.2",
+    "@storybook/addon-links": "^8.1.2",
+    "@storybook/addon-onboarding": "^8.1.2",
+    "@storybook/blocks": "^8.1.2",
+    "@storybook/react": "^8.1.2",
+    "@storybook/react-vite": "^8.1.2",
+    "@storybook/test": "^8.1.2",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
+    "storybook": "^8.1.2",
     "typescript": "^5.4.5",
     "vite": "^5.2.11",
     "vite-tsconfig-paths": "^4.3.2"

apps/client/vite-sb.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+// for storybook (remix を入れない)
+export default defineConfig({
+  plugins: [tsconfigPaths()],
+});