LearnStorybook.com 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00339/article/details/142542772

LearnStorybook.com 项目教程

learnstorybook.com Static site and content for Storybook tutorials 项目地址: https://gitcode.com/gh_mirrors/le/learnstorybook.com

1. 项目的目录结构及介绍

learnstorybook.com/
├── .github/
│   └── workflows/
├── .storybook/
│   ├── main.js
│   └── preview.js
├── content/
│   ├── assets/
│   ├── components/
│   ├── design-systems/
│   ├── guides/
│   ├── tutorials/
│   └── index.mdx
├── public/
│   ├── favicon.ico
│   └── images/
├── src/
│   ├── components/
│   ├── pages/
│   ├── styles/
│   └── utils/
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

目录结构介绍

.github/workflows/: 存放GitHub Actions的工作流配置文件。
.storybook/: Storybook的配置文件夹，包含main.js和preview.js。
content/: 存放项目的所有内容，包括教程、指南、设计系统等。
public/: 存放静态资源文件，如favicon和图片。
src/: 存放项目的源代码，包括组件、页面、样式和工具函数。
.gitignore: Git忽略文件配置。
package.json: 项目的依赖和脚本配置。
README.md: 项目的介绍文档。
yarn.lock: Yarn的依赖锁定文件。

2. 项目的启动文件介绍

package.json

package.json 是项目的核心配置文件，包含了项目的依赖、脚本命令等信息。以下是一些关键的脚本命令：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  }
}

dev: 启动开发服务器。
build: 构建生产环境的应用。
start: 启动生产环境的应用。
storybook: 启动Storybook。
build-storybook: 构建Storybook的静态版本。

3. 项目的配置文件介绍

.storybook/main.js

main.js 是Storybook的主要配置文件，定义了Storybook的行为和加载的文件。

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

stories: 定义了Storybook加载的Story文件路径。
addons: 定义了Storybook使用的插件。
framework: 定义了Storybook使用的框架。
core: 定义了Storybook的核心配置，如使用的构建工具。

.storybook/preview.js

preview.js 是Storybook的预览配置文件，定义了Storybook的全局参数和装饰器。

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