├── .nvmrc ├── .prettierrc.json ├── test.setup.ts ├── packages ├── vite-body │ ├── src │ │ ├── index.ts │ │ ├── vite-env.d.ts │ │ ├── components │ │ │ ├── index.ts │ │ │ └── Body │ │ │ │ ├── __snapshots__ │ │ │ │ └── Body.test.tsx.snap │ │ │ │ ├── index.tsx │ │ │ │ ├── Body.test.tsx │ │ │ │ └── Body.stories.tsx │ │ └── assets │ │ │ └── colors.svg │ ├── .storybook │ │ ├── preview-head.html │ │ ├── preview.ts │ │ └── main.ts │ ├── vite.config.ts │ ├── tsconfig.json │ └── package.json ├── vite-common │ ├── src │ │ ├── index.ts │ │ ├── vite-env.d.ts │ │ ├── components │ │ │ ├── index.ts │ │ │ ├── Button │ │ │ │ ├── styles.module.scss │ │ │ │ ├── index.tsx │ │ │ │ └── Button.stories.tsx │ │ │ └── Links │ │ │ │ ├── styles.module.scss │ │ │ │ ├── index.tsx │ │ │ │ └── Links.stories.tsx │ │ ├── helpers │ │ │ └── checkMessage │ │ │ │ ├── index.ts │ │ │ │ └── checkMessage.test.ts │ │ └── assets │ │ │ └── repo.svg │ ├── .storybook │ │ ├── preview-head.html │ │ ├── preview.ts │ │ └── main.ts │ ├── tsconfig.json │ ├── vite.config.ts │ └── package.json ├── vite-footer │ ├── src │ │ ├── index.ts │ │ ├── vite-env.d.ts │ │ ├── components │ │ │ ├── index.ts │ │ │ └── Footer │ │ │ │ ├── index.tsx │ │ │ │ └── Footer.stories.tsx │ │ └── assets │ │ │ └── flow.svg │ ├── .storybook │ │ ├── preview-head.html │ │ ├── preview.ts │ │ └── main.ts │ ├── vite.config.ts │ ├── tsconfig.json │ └── package.json └── vite-header │ ├── src │ ├── index.ts │ ├── vite-env.d.ts │ ├── components │ │ ├── index.ts │ │ └── Header │ │ │ ├── styles.module.scss │ │ │ ├── index.tsx │ │ │ └── Header.stories.tsx │ └── assets │ │ └── direction.svg │ ├── .storybook │ ├── preview-head.html │ ├── preview.ts │ └── main.ts │ ├── vite.config.ts │ ├── tsconfig.json │ └── package.json ├── .storybook ├── preview-head.html ├── preview.ts └── main.ts ├── .prettierignore ├── lerna.json ├── babel.config.json ├── tsconfig.node.json ├── .eslintrc.cjs ├── .gitignore ├── vite.config.ts ├── README.md ├── tsconfig.json ├── jest.config.ts └── package.json /.nvmrc: -------------------------------------------------------------------------------- 1 | v18.13.0 2 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /test.setup.ts: -------------------------------------------------------------------------------- 1 | import "@testing-library/jest-dom/extend-expect"; -------------------------------------------------------------------------------- /packages/vite-body/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./components"; 2 | -------------------------------------------------------------------------------- /packages/vite-common/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./components"; 2 | -------------------------------------------------------------------------------- /packages/vite-footer/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./components"; 2 | -------------------------------------------------------------------------------- /packages/vite-header/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./components"; 2 | -------------------------------------------------------------------------------- /packages/vite-body/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/vite-common/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/vite-footer/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/vite-header/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/vite-body/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Body } from "./Body"; 2 | -------------------------------------------------------------------------------- /packages/vite-footer/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Footer } from "././Footer"; 2 | -------------------------------------------------------------------------------- /packages/vite-header/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Header } from "./Header"; 2 | -------------------------------------------------------------------------------- /packages/vite-body/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /packages/vite-common/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /packages/vite-footer/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /packages/vite-header/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | package.json 4 | package-lock.json 5 | coverage 6 | storybook-static 7 | -------------------------------------------------------------------------------- /packages/vite-body/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import preview from "../../../.storybook/preview"; 2 | 3 | export default preview; 4 | -------------------------------------------------------------------------------- /packages/vite-common/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import preview from "../../../.storybook/preview"; 2 | 3 | export default preview; 4 | -------------------------------------------------------------------------------- /packages/vite-footer/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import preview from "../../../.storybook/preview"; 2 | 3 | export default preview; 4 | -------------------------------------------------------------------------------- /packages/vite-common/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Button } from "./Button"; 2 | export { default as Links } from "./Links"; -------------------------------------------------------------------------------- /packages/vite-header/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import preview from "../../../.storybook/preview"; 2 | 3 | import "vite-common/dist/style.css"; 4 | 5 | export default preview; 6 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "node_modules/lerna/schemas/lerna-schema.json", 3 | "useWorkspaces": true, 4 | "packages": ["packages/*"], 5 | "version": "independent" 6 | } 7 | -------------------------------------------------------------------------------- /packages/vite-common/src/components/Button/styles.module.scss: -------------------------------------------------------------------------------- 1 | .button { 2 | padding: 5px 10px; 3 | border-radius: 4px; 4 | border: 1px solid darkred; 5 | color: white; 6 | } 7 | -------------------------------------------------------------------------------- /packages/vite-common/src/helpers/checkMessage/index.ts: -------------------------------------------------------------------------------- 1 | export function checkMessage(message: string) { 2 | if (message === "hello") { 3 | return "world"; 4 | } else { 5 | return "error"; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | [ 5 | "@babel/preset-react", 6 | { 7 | "runtime": "automatic" 8 | } 9 | ], 10 | "@babel/preset-typescript" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /packages/vite-body/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import commonConfigs from "../../../.storybook/main"; 2 | 3 | const config = { 4 | ...commonConfigs, 5 | stories: ["../src/**/*..mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /packages/vite-common/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import commonConfigs from "../../../.storybook/main"; 2 | 3 | const config = { 4 | ...commonConfigs, 5 | stories: ["../src/**/*..mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /packages/vite-footer/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import commonConfigs from "../../../.storybook/main"; 2 | 3 | const config = { 4 | ...commonConfigs, 5 | stories: ["../src/**/*..mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /packages/vite-header/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import commonConfigs from "../../../.storybook/main"; 2 | 3 | const config = { 4 | ...commonConfigs, 5 | stories: ["../src/**/*..mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /packages/vite-common/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./dist/types" 7 | }, 8 | "include": ["src/**/*.ts", "src/**/*.tsx"] 9 | } 10 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "node", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/vite-header/src/components/Header/styles.module.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | border: 2px solid gray; 3 | border-radius: 4px; 4 | background-color: snow; 5 | display: flex; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 0 20px; 9 | } 10 | -------------------------------------------------------------------------------- /packages/vite-body/vite.config.ts: -------------------------------------------------------------------------------- 1 | import * as path from "path"; 2 | import { getBaseConfig } from "../../vite.config"; 3 | 4 | export default getBaseConfig({ 5 | lib: { 6 | entry: path.resolve(__dirname, "src/index.ts"), 7 | name: "ViteBody", 8 | fileName: "vite-body", 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /packages/vite-common/src/components/Links/styles.module.scss: -------------------------------------------------------------------------------- 1 | .links { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | flex-wrap: wrap; 6 | width: 100%; 7 | border: 1px solid green; 8 | list-style-type: none; 9 | li { 10 | padding: 5px 10px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/vite-common/vite.config.ts: -------------------------------------------------------------------------------- 1 | import * as path from "path"; 2 | import { getBaseConfig } from "../../vite.config"; 3 | 4 | export default getBaseConfig({ 5 | lib: { 6 | entry: path.resolve(__dirname, "src/index.ts"), 7 | name: "ViteCommon", 8 | fileName: "vite-common", 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /packages/vite-footer/vite.config.ts: -------------------------------------------------------------------------------- 1 | import * as path from "path"; 2 | import { getBaseConfig } from "../../vite.config"; 3 | 4 | export default getBaseConfig({ 5 | lib: { 6 | entry: path.resolve(__dirname, "src/index.ts"), 7 | name: "ViteFooter", 8 | fileName: "vite-footer", 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /packages/vite-header/vite.config.ts: -------------------------------------------------------------------------------- 1 | import * as path from "path"; 2 | import { getBaseConfig } from "../../vite.config"; 3 | 4 | export default getBaseConfig({ 5 | lib: { 6 | entry: path.resolve(__dirname, "src/index.ts"), 7 | name: "ViteHeader", 8 | fileName: "vite-header", 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /packages/vite-body/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./dist/types", 7 | "typeRoots": ["../../node_modules/@types", "./dist/types"] 8 | }, 9 | "include": ["src/**/*.ts", "src/**/*.tsx"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/vite-footer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./dist/types", 7 | "typeRoots": ["../../node_modules/@types", "./dist/types"] 8 | }, 9 | "include": ["src/**/*.ts", "src/**/*.tsx"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/vite-header/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "./src", 5 | "outDir": "./dist", 6 | "declarationDir": "./dist/types", 7 | "typeRoots": ["../../node_modules/@types", "./dist/types"], 8 | }, 9 | "include": ["src/**/*.ts", "src/**/*.tsx"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/vite-common/src/helpers/checkMessage/checkMessage.test.ts: -------------------------------------------------------------------------------- 1 | import { checkMessage } from "."; 2 | 3 | describe("checkMessage", () => { 4 | it('should return "world" if message is "hello"', () => { 5 | expect(checkMessage("hello")).toBe("world"); 6 | }); 7 | 8 | it('should return "error" if message is not "hello"', () => { 9 | expect(checkMessage("")).toBe("error"); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/vite-body/src/components/Body/__snapshots__/Body.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` should render component 1`] = ` 4 |
5 |
6 |

7 | Title test 8 |

9 |

10 | subtitle test 11 |

12 |

13 | message test 14 |

15 |
16 | Button 17 |
18 |
19 |
20 | `; 21 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { browser: true, es2020: true }, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:@typescript-eslint/recommended', 6 | 'plugin:react-hooks/recommended', 7 | ], 8 | parser: '@typescript-eslint/parser', 9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 10 | plugins: ['react-refresh'], 11 | rules: { 12 | 'react-refresh/only-export-components': 'warn', 13 | }, 14 | } 15 | -------------------------------------------------------------------------------- /packages/vite-footer/src/components/Footer/index.tsx: -------------------------------------------------------------------------------- 1 | import { Button, Links } from "vite-common"; 2 | 3 | export interface FooterProps { 4 | links: { 5 | label: string; 6 | href: string; 7 | }[]; 8 | } 9 | 10 | export const Footer = ({ links }: FooterProps) => { 11 | return ( 12 |
13 | 14 |
16 | ); 17 | }; 18 | 19 | export default Footer; 20 | -------------------------------------------------------------------------------- /packages/vite-body/src/components/Body/index.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "vite-common"; 2 | 3 | export interface BodyProps { 4 | title: string; 5 | subTitle: string; 6 | message: string; 7 | } 8 | 9 | export const Body = ({ title, subTitle, message }: BodyProps) => { 10 | return ( 11 |
12 |

{title}

13 |

{subTitle}

14 |

{message}

15 |
17 | ); 18 | }; 19 | 20 | export default Body; 21 | -------------------------------------------------------------------------------- /packages/vite-common/src/components/Links/index.tsx: -------------------------------------------------------------------------------- 1 | import styles from "./styles.module.scss"; 2 | 3 | export interface Link { 4 | label: string; 5 | href: string; 6 | } 7 | 8 | export interface LinksProps { 9 | links: Link[]; 10 | } 11 | 12 | export const Links = ({ links }: LinksProps) => { 13 | return ( 14 |
    15 | {links.map(({ label, href }) => ( 16 |
  • {label}
    • 17 | ))} 18 |
19 | ); 20 | }; 21 | 22 | export default Links; 23 | -------------------------------------------------------------------------------- /packages/vite-footer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-footer", 3 | "private": true, 4 | "version": "1.1.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview", 11 | "storybook": "storybook dev -p 6006", 12 | "build-storybook": "storybook build" 13 | }, 14 | "dependencies": { 15 | "vite-common": "^2.0.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/vite-header/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-header", 3 | "private": true, 4 | "version": "2.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview", 11 | "storybook": "storybook dev -p 6006", 12 | "build-storybook": "storybook build" 13 | }, 14 | "dependencies": { 15 | "vite-common": "^2.0.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/vite-header/src/components/Header/index.tsx: -------------------------------------------------------------------------------- 1 | import { Button, Links } from "vite-common"; 2 | import styles from "./styles.module.scss"; 3 | 4 | export interface HeaderProps { 5 | links: { label: string; href: string }[]; 6 | } 7 | 8 | export const Header = ({ links }: HeaderProps) => ( 9 |
10 |
Logo
11 | 14 |
16 | ); 17 | 18 | export default Header; 19 | -------------------------------------------------------------------------------- /packages/vite-body/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-body", 3 | "private": true, 4 | "version": "2.0.0", 5 | "type": "module", 6 | "types": "dist/types/index.d.ts", 7 | "scripts": { 8 | "dev": "vite", 9 | "build": "tsc && vite build", 10 | "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 11 | "preview": "vite preview", 12 | "storybook": "storybook dev -p 6006", 13 | "build-storybook": "storybook build" 14 | }, 15 | "dependencies": { 16 | "vite-common": "^2.0.1" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/vite-body/src/components/Body/Body.test.tsx: -------------------------------------------------------------------------------- 1 | import { render } from "@testing-library/react"; 2 | import { Body } from "."; 3 | 4 | jest.mock("vite-common", () => ({ 5 | Button: () =>
Button
, 6 | })); 7 | 8 | describe("", () => { 9 | it("should render component", () => { 10 | const { container } = render( 11 | 16 | ); 17 | 18 | expect(container).toMatchSnapshot(); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | storybook-static 3 | coverage 4 | dist 5 | .idea/ 6 | 7 | # General 8 | .DS_Store 9 | .AppleDouble 10 | .LSOverride 11 | 12 | # Thumbnails 13 | ._* 14 | 15 | # Files that might appear in the root of a volume 16 | .DocumentRevisions-V100 17 | .fseventsd 18 | .Spotlight-V100 19 | .TemporaryItems 20 | .Trashes 21 | .VolumeIcon.icns 22 | .com.apple.timemachine.donotpresent 23 | .idea 24 | 25 | # Directories potentially created on remote AFP share 26 | .AppleDB 27 | .AppleDesktop 28 | Network Trash Folder 29 | Temporary Items 30 | .apdisk 31 | -------------------------------------------------------------------------------- /packages/vite-common/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-common", 3 | "private": true, 4 | "type": "module", 5 | "version": "2.0.1", 6 | "main": "./dist/vite-common.umd.cjs", 7 | "module": "./dist/vite-common.js", 8 | "types": "dist/types/index.d.ts", 9 | "scripts": { 10 | "dev": "vite", 11 | "build": "vite build && tsc", 12 | "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 13 | "preview": "vite preview", 14 | "storybook": "storybook dev -p 6006", 15 | "build-storybook": "storybook build" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from "@vitejs/plugin-react"; 2 | import path from "path"; 3 | import { defineConfig } from "vite"; 4 | 5 | const isExternal = (id: string) => !id.startsWith(".") && !path.isAbsolute(id); 6 | 7 | export const getBaseConfig = ({ plugins = [], lib }) => 8 | defineConfig({ 9 | plugins: [react(), ...plugins], 10 | build: { 11 | lib, 12 | rollupOptions: { 13 | external: isExternal, 14 | output: { 15 | globals: { 16 | react: "React", 17 | }, 18 | }, 19 | }, 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from "@storybook/react"; 2 | 3 | const preview: Preview = { 4 | parameters: { 5 | actions: { argTypesRegex: "^on[A-Z].*" }, 6 | options: { 7 | storySort: (a, b) => { 8 | return a.title === b.title 9 | ? 0 10 | : a.id.localeCompare(b.id, { numeric: true }); 11 | }, 12 | }, 13 | layout: "fullscreen", 14 | controls: { 15 | matchers: { 16 | color: /(background|color)$/i, 17 | date: /Date$/, 18 | }, 19 | }, 20 | }, 21 | }; 22 | 23 | export default preview; 24 | -------------------------------------------------------------------------------- /packages/vite-common/src/components/Button/index.tsx: -------------------------------------------------------------------------------- 1 | import styles from "./styles.module.scss"; 2 | 3 | export interface ButtonProps { 4 | backgroundColor?: string; 5 | label: string; 6 | onClick?: () => void; 7 | } 8 | 9 | export const Button = ({ 10 | backgroundColor = "gray", 11 | label, 12 | ...props 13 | }: ButtonProps) => { 14 | return ( 15 | 23 | ); 24 | }; 25 | 26 | export default Button; 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Lerna / Vite / Storybook - Monorepo 2 | =================================== 3 | 4 | This is a monorepo template for a project using Lerna, Vite and Storybook. 5 | 6 | ## Getting Started 7 | 8 | ### Install dependencies 9 | 10 | ```bash 11 | yarn install 12 | ``` 13 | 14 | ### Run Storybook 15 | 16 | ```bash 17 | yarn start:vite-common 18 | ``` 19 | 20 | ### Build Storybook 21 | 22 | ```bash 23 | yarn build:vite-common 24 | ``` 25 | or build all 26 | ```bash 27 | yarn build 28 | ``` 29 | 30 | ### Run tests 31 | 32 | ```bash 33 | yarn test 34 | ``` 35 | 36 | ### Run lint 37 | 38 | ```bash 39 | yarn lint 40 | ``` 41 | -------------------------------------------------------------------------------- /packages/vite-common/src/components/Button/Button.stories.tsx: -------------------------------------------------------------------------------- 1 | import { StoryFn, Meta } from "@storybook/react"; 2 | import { Button } from "."; 3 | 4 | export default { 5 | title: "Example/Button", 6 | component: Button, 7 | argTypes: { 8 | backgroundColor: { control: "color" }, 9 | }, 10 | } as Meta; 11 | 12 | const Template: StoryFn = (args) =>