feat: add a storybook support

.eslintrc.json

@@ -7,7 +7,8 @@
  "eslint:recommended",
  "plugin:react/recommended",
  "plugin:react/jsx-runtime",
- "plugin:@typescript-eslint/recommended"
+ "plugin:@typescript-eslint/recommended",
+ "plugin:storybook/recommended"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+const config: StorybookConfig = {
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ ],
+ framework: {
+ name: '@storybook/react-vite',
+ options: {},
+ },
+ docs: {
+ autodocs: 'tag',
+ },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+ parameters: {
+ actions: { argTypesRegex: '^on[A-Z].*' },
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/,
+ },
+ },
+ },
+};
+
+export default preview;

README.md

@@ -29,6 +29,13 @@ All design styles are written from scratch. This application does not use any UI
 - 🧪 **Testing:** jest, react-testing-library
 - 💎 **Others:** desktop first approach, atomic design, progressive web app
 
+## Storybook
+
+To see all components in isolation:
+
+1. Run `yarn storybook` in the root directory.
+2. Open `http:https://localhost:6006` in your browser.
+
 ## How to run
 
 1. Install [Node.js](https://nodejs.org/en/download/).

package.json

@@ -10,7 +10,9 @@
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
- "prepare": "husky install"
+ "prepare": "husky install",
+ "storybook": "storybook dev -p 6006",
+ "build-storybook": "storybook build"
  },
  "dependencies": {
  "@emotion/react": "^11.10.5",
@@ -24,16 +26,27 @@
  "devDependencies": {
  "@commitlint/cli": "^17.4.2",
  "@commitlint/config-conventional": "^17.4.2",
+ "@storybook/addon-essentials": "^7.0.7",
+ "@storybook/addon-interactions": "^7.0.7",
+ "@storybook/addon-links": "^7.0.7",
+ "@storybook/blocks": "^7.0.7",
+ "@storybook/builder-vite": "^7.0.7",
+ "@storybook/react": "^7.0.7",
+ "@storybook/react-vite": "^7.0.7",
+ "@storybook/testing-library": "^0.0.14-next.2",
  "@types/react": "^18.0.26",
  "@types/react-dom": "^18.0.9",
  "@typescript-eslint/eslint-plugin": "^5.48.1",
  "@typescript-eslint/parser": "^5.48.1",
  "@vitejs/plugin-react-swc": "^3.0.0",
  "eslint": "^8.32.0",
  "eslint-plugin-react": "^7.32.0",
+ "eslint-plugin-storybook": "^0.6.11",
  "husky": "^8.0.3",
  "lint-staged": "^13.1.0",
  "prettier": "2.8.3",
+ "prop-types": "^15.8.1",
+ "storybook": "^7.0.7",
  "typescript": "^4.9.3",
  "vite": "^4.0.0",
  "vite-plugin-pwa": "^0.14.1"

src/stories/Button.stories.ts

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+ title: 'Example/Button',
+ component: Button,
+ tags: ['autodocs'],
+ argTypes: {
+ backgroundColor: { control: 'color' },
+ },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+ args: {
+ primary: true,
+ label: 'Button',
+ },
+};
+
+export const Secondary: Story = {
+ args: {
+ label: 'Button',
+ },
+};
+
+export const Large: Story = {
+ args: {
+ size: 'large',
+ label: 'Button',
+ },
+};
+
+export const Small: Story = {
+ args: {
+ size: 'small',
+ label: 'Button',
+ },
+};

src/stories/Button.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+ /**
+ * Is this the principal call to action on the page?
+ */
+ primary?: boolean;
+ /**
+ * What background color to use
+ */
+ backgroundColor?: string;
+ /**
+ * How large should the button be?
+ */
+ size?: 'small' | 'medium' | 'large';
+ /**
+ * Button contents
+ */
+ label: string;
+ /**
+ * Optional click handler
+ */
+ onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+ primary = false,
+ size = 'medium',
+ backgroundColor,
+ label,
+ ...props
+}: ButtonProps) => {
+ const mode = primary
+ ? 'storybook-button--primary'
+ : 'storybook-button--secondary';
+ return (
+ <button
+ type="button"
+ className={['storybook-button', `storybook-button--${size}`, mode].join(
+ ' '
+ )}
+ style={{ backgroundColor }}
+ {...props}
+ >
+ {label}
+ </button>
+ );
+};

src/stories/Header.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+
+const meta = {
+ title: 'Example/Header',
+ component: Header,
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+ tags: ['autodocs'],
+ parameters: {
+ // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+ layout: 'fullscreen',
+ },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+ args: {
+ user: {
+ name: 'Jane Doe',
+ },
+ },
+};
+
+export const LoggedOut: Story = {};

src/stories/Header.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { Button } from './Button';
+import './header.css';
+
+type User = {
+ name: string;
+};
+
+interface HeaderProps {
+ user?: User;
+ onLogin: () => void;
+ onLogout: () => void;
+ onCreateAccount: () => void;
+}
+
+export const Header = ({
+ user,
+ onLogin,
+ onLogout,
+ onCreateAccount,
+}: HeaderProps) => (
+ <header>
+ <div className="wrapper">
+ <div>
+ <svg
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ xmlns="http:https://www.w3.org/2000/svg"
+ >
+ <g fill="none" fillRule="evenodd">
+ <path
+ d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+ fill="#FFF"
+ />
+ <path
+ d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+ fill="#555AB9"
+ />
+ <path
+ d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+ fill="#91BAF8"
+ />
+ </g>
+ </svg>
+ <h1>Acme</h1>
+ </div>
+ <div>
+ {user ? (
+ <>
+ <span className="welcome">
+ Welcome, <b>{user.name}</b>!
+ </span>
+ <Button size="small" onClick={onLogout} label="Log out" />
+ </>
+ ) : (
+ <>
+ <Button size="small" onClick={onLogin} label="Log in" />
+ <Button
+ primary
+ size="small"
+ onClick={onCreateAccount}
+ label="Sign up"
+ />
+ </>
+ )}
+ </div>
+ </div>
+ </header>
+);