Open23日前にコメント追加3

Remix 周りの初期化

Remix のインストール

npx create-remix@latest {任意の名前}

mob

tailwindのインストール

デフォルトで入ってる。

tailwind.config.ts を下記のように修正する

tailwind.config.ts

import type { Config } from "tailwindcss";

export default {
    darkMode: ["class"],
    content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
  theme: {
  	extend: {
  		fontFamily: {
- 			sans: [\n          'Inter"',\n          "ui-sans-serif",\n          "system-ui",\n          "sans-serif",\n          'Apple Color Emoji"',\n          'Segoe UI Emoji"',\n          'Segoe UI Symbol"',\n          'Noto Color Emoji"',\n        ]
+ 			sans: [
+ 				"Inter",
+ 				"ui-sans-serif",
+	 			"system-ui",
+ 				"sans-serif",
+ 				"Apple Color Emoji",
+ 				"Segoe UI Emoji",
+ 				"Segoe UI Symbol",
+ 				"Noto Color Emoji",
+ 			],
  		},
  		borderRadius: {
  			lg: 'var(--radius)',
  			md: 'calc(var(--radius) - 2px)',
  			sm: 'calc(var(--radius) - 4px)'
  		},
...

mob

Storybook のインストール

npx storybook@latest init

これだけだと、下記のエラーになる。

=> Failed to build the preview
Error: The Remix Vite plugin requires the use of a Vite config file
    at configResolved (./node_modules/@remix-run/dev/dist/vite/plugin.js:724:15)
    at async Promise.all (index 2)
    at async resolveConfig (file://./node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:66404:3)
    at async getOptimizeDeps (./node_modules/@storybook/builder-vite/dist/index.js:69:2932)
    at async createViteServer (./node_modules/@storybook/builder-vite/dist/index.js:69:3557)
    at async Module.start (./node_modules/@storybook/builder-vite/dist/index.js:69:4465)
    at async storybookDevServer (./node_modules/@storybook/core/dist/core-server/index.cjs:36000:11)
    at async buildOrThrow (./node_modules/@storybook/core/dist/core-server/index.cjs:35017:12)
    at async buildDevStandalone (./node_modules/@storybook/core/dist/core-server/index.cjs:37190:78)
    at async withTelemetry (./node_modules/@storybook/core/dist/core-server/index.cjs:35757:12)

vite-sb.config.ts を作る。

vite-sb.config.ts

import { defineConfig, loadEnv } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  process.env = { ...process.env, ...env };
  return {
    plugins: [tsconfigPaths()],
  };
});

main.ts と preview.ts を次のように修正する。

main.ts

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: [
    '../app/**/*.mdx',
    '../app/**/*.stories.@(js|jsx|mjs|ts|tsx)'
  ],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {
+     builder: {
+      viteConfigPath: 'vite-sb.config.ts',
+    }
    },
  },
};
export default config;

preview.ts

+import '../app/tailwind.css'
import type { Preview } from "@storybook/react";

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;