- To get started, clone this repository to your local machine:
git clone https://github.com/ageolena/react-mui-storybook-vite--demo.git
- Install the dependencies
npm i
- Run locally:
npm run dev
- Run Storybook
npm run storybook
src/: This directory contains all the source code for the React application.
App.tsx: The main React component.
index.tsx: The entry point of the application.
public/: Static assets such as images, fonts, etc., can be placed here.
vite.config.ts: Vite configuration file.
.storybook/: Storybook configuration directory.
main.js: Storybook main configuration file.
preview.js: Storybook preview configuration file.
stories/: Storybook stories directory.
Stories could be found in src/stories
folder
Button story contains a story per variant, controls to showcase flexible-restrictive patterns, mapping for children control and a custom documentation template.
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level
parserOptions
property like this:
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}
- Replace
plugin:@typescript-eslint/recommended
toplugin:@typescript-eslint/recommended-type-checked
orplugin:@typescript-eslint/strict-type-checked
- Optionally add
plugin:@typescript-eslint/stylistic-type-checked
- Install eslint-plugin-react and add
plugin:react/recommended
&plugin:react/jsx-runtime
to theextends
list
- Make sure you have Node.js and npm or yarn installed on your system.
- This project uses Vite for fast development and builds.
- React and TypeScript are used for building the UI components.
- Storybook is used for developing UI components in isolation.
- Feel free to modify and extend the project according to your needs.
https://ageolena.github.io/react-mui-storybook-vite--demo
To deploy Storybook run:
npm run deploy-storybook