storybook環境をviteで構築

前回の続き
https://zenn.dev/marumarumeruru/articles/e592c2ea5dc141

storybookの環境を上乗せする

vite-app $ npx -p @storybook/cli sb init --type react --builder storybook-builder-vite

最終的な構成

vite-app $ tree -a -I "node_modules|.git" 
.
├── .gitignore
├── .storybook
│   ├── main.js
│   └── preview.js
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── favicon.svg
│   ├── index.css
│   ├── logo.svg
│   ├── main.tsx
│   ├── stories
│   │   ├── Button.stories.tsx
│   │   ├── Button.tsx
│   │   ├── Header.stories.tsx
│   │   ├── Header.tsx
│   │   ├── Introduction.stories.mdx
│   │   ├── Page.stories.tsx
│   │   ├── Page.tsx
│   │   ├── assets
│   │   │   ├── code-brackets.svg
│   │   │   ├── colors.svg
│   │   │   ├── comments.svg
│   │   │   ├── direction.svg
│   │   │   ├── flow.svg
│   │   │   ├── plugin.svg
│   │   │   ├── repo.svg
│   │   │   └── stackalt.svg
│   │   ├── button.css
│   │   ├── header.css
│   │   └── page.css
│   └── vite-env.d.ts
├── tsconfig.json
└── vite.config.ts

4 directories, 33 files

package.json

{
  "name": "vite-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.16.10",
    "@storybook/addon-actions": "^6.4.13",
    "@storybook/addon-essentials": "^6.4.13",
    "@storybook/addon-links": "^6.4.13",
    "@storybook/react": "^6.4.13",
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@vitejs/plugin-react": "^1.0.7",
    "babel-loader": "^8.2.3",
    "storybook-builder-vite": "^0.1.13",
    "typescript": "^4.4.4",
    "vite": "^2.7.2"
  }
}

main.js

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "storybook-builder-vite"
  }
}

preview.js

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}