@beydesign/storybook 0.0.1 → 0.0.3

package/README.md

@@ -1,50 +1,59 @@
-# React + TypeScript + Vite
+# BeyDesign Storybook
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A React component library implementing the Beyond Presence Design System. This package provides a collection of reusable components that follow the design specifications from our [Figma Design System](https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4295-3110&p=f&m=dev).
 
-Currently, two official plugins are available:
+## Installation
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```bash
+# First install the required design tokens package
+npm install @beydesign/tokens
 
-## Expanding the ESLint configuration
+# Then install the component library
+npm install @beydesign/storybook
+```
+
+## Prerequisites
+
+This package depends on `@beydesign/tokens` which provides the design tokens (colors, typography, spacing, etc.) used across the components. Make sure to install and configure it first.
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## Usage
 
-- Configure the top-level `parserOptions` property like this:
+1. Import the components you need:
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+```jsx
+import { MainButton, ButtonHierarchy, ButtonShape, ButtonSize } from '@beydesign/storybook';
+
+function App() {
+  return (
+    <MainButton
+              size={ButtonSize.lg}
+              shape={ButtonShape.Square}
+              onClick={rejoin}
+              disabled={buttonsDisabled}
+              hierarchy={ButtonHierarchy.Primary}
+              showLeadingIcon={false}
+              showTrailingIcon={false}
+              text="Rejoin"
+            />
+  );
+}
 ```
+## Development
+
+To run the Storybook development environment locally:
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
+```bash
+npm install
+npm run storybook
 ```
+
+
+## Links
+
+- [Design System (Figma)](https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4295-3110&p=f&m=dev)
+- [NPM Package](https://www.npmjs.com/package/@beydesign/storybook)
+- [Hosted Storybook](https://beyond-presence.github.io/bey-design-system/)
+
+## Support
+
+For issues and feature requests, please use our GitHub issues page.

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { MainButton } from './stories/Button';
-export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, type MainButtonProps } from './stories/types/button';
+export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, type MainButtonProps, } from './stories/types/button';

package/dist/index.js

@@ -1,4 +1,4 @@
 // Components
 export { MainButton } from './stories/Button';
 // Types
-export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType } from './stories/types/button';
+export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './stories/types/button';

package/dist/stories/Button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, CircularProgress } from '@mui/material';
 import * as PhosphorIcons from '@phosphor-icons/react';
-import { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType } from './types/button';
+import { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './types/button';
 const getIconComponent = (iconName, props) => {
     const Icon = PhosphorIcons[iconName];
     return Icon ? _jsx(Icon, { ...props }) : null;
@@ -141,45 +141,57 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
             [ButtonSize.xl]: {
                 width: displayIconMode === ButtonDisplayMode.Only ? '3.25rem' : '12.75rem',
                 height: '3.25rem',
-                padding: displayIconMode === ButtonDisplayMode.Only ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)' : 'var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-3xl)',
+                padding: displayIconMode === ButtonDisplayMode.Only
+                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-3xl)',
                 fontSize: 'var(--global-font-size-3)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
             },
             [ButtonSize.lg]: {
                 width: displayIconMode === ButtonDisplayMode.Only ? '3rem' : '11.75rem',
                 height: '3rem',
-                padding: displayIconMode === ButtonDisplayMode.Only ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)' : 'var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-2xl)',
+                padding: displayIconMode === ButtonDisplayMode.Only
+                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-2xl)',
                 fontSize: 'var(--global-font-size-3)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
             },
             [ButtonSize.md]: {
                 width: displayIconMode === ButtonDisplayMode.Only ? '2.75rem' : '10.75rem',
                 height: '2.75rem',
-                padding: displayIconMode === ButtonDisplayMode.Only ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)' : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
+                padding: displayIconMode === ButtonDisplayMode.Only
+                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
                 fontSize: 'var(--global-font-size-2)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
             },
             [ButtonSize.sm]: {
                 width: displayIconMode === ButtonDisplayMode.Only ? '2.5rem' : '9.75rem',
                 height: '2.5rem',
-                padding: displayIconMode === ButtonDisplayMode.Only ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)' : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
+                padding: displayIconMode === ButtonDisplayMode.Only
+                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
                 fontSize: 'var(--global-font-size-1)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
             },
             [ButtonSize.xs]: {
                 width: displayIconMode === ButtonDisplayMode.Only ? '2.25rem' : '8.75rem',
                 height: '2.25rem',
-                padding: displayIconMode === ButtonDisplayMode.Only ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)' : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+                padding: displayIconMode === ButtonDisplayMode.Only
+                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
                 fontSize: 'var(--global-font-size-1)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
             },
             [ButtonSize.xxs]: {
                 width: displayIconMode === ButtonDisplayMode.Only ? '2rem' : '7.75rem',
                 height: '2rem',
-                padding: displayIconMode === ButtonDisplayMode.Only ? 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)' : 'var(--spacing-tokens-size-in-px-spacing-spacing-sm) var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+                padding: displayIconMode === ButtonDisplayMode.Only
+                    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)'
+                    : 'var(--spacing-tokens-size-in-px-spacing-spacing-sm) var(--spacing-tokens-size-in-px-spacing-spacing-md)',
                 fontSize: 'var(--global-font-size-0)',
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
-            }
+            },
         };
         return sizes[size] || sizes[ButtonSize.xl];
     };
@@ -200,35 +212,45 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
             [ButtonSize.md]: 20,
             [ButtonSize.sm]: 18,
             [ButtonSize.xs]: 16,
-            [ButtonSize.xxs]: 14
+            [ButtonSize.xxs]: 14,
         };
         return sizes[size] || sizes[ButtonSize.xl];
     };
     const iconProps = {
         size: getIconSize(),
         color: getTextColor(),
-        weight: "regular"
+        weight: 'regular',
     };
     const sizeStyles = getButtonSize();
     const renderContent = () => {
         if (loading) {
             return (_jsx(CircularProgress, { size: 24, sx: {
-                    color: getTextColor()
+                    color: getTextColor(),
                 } }));
         }
         if (displayIconMode === ButtonDisplayMode.Only && displayIcon) {
             return getIconComponent(displayIcon, iconProps);
         }
-        return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)' }, children: [showLeadingIcon && leadingIcon && getIconComponent(leadingIcon, iconProps), text, showTrailingIcon && trailingIcon && getIconComponent(trailingIcon, iconProps)] }));
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
+            }, children: [showLeadingIcon &&
+                    leadingIcon &&
+                    getIconComponent(leadingIcon, iconProps), text, showTrailingIcon &&
+                    trailingIcon &&
+                    getIconComponent(trailingIcon, iconProps)] }));
     };
     return (_jsx(Button, { onClick: onClick ? onClick : () => { }, type: type, disabled: state === ButtonState.Disabled || disabled, sx: {
-            textTransform: "none",
+            textTransform: 'none',
             ...sizeStyles,
             borderRadius: getButtonShape(),
             background: getBackgroundColor(),
             color: getTextColor(),
             border: `1px solid ${getBorderColor()}`,
-            boxShadow: state === ButtonState.Default ? 'var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)' : 'none',
+            boxShadow: state === ButtonState.Default
+                ? 'var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)'
+                : 'none',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MainButton } from './Button';
+declare const meta: Meta<typeof MainButton>;
+export default meta;
+type Story = StoryObj<typeof MainButton>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const SecondaryColor: Story;
+export declare const SecondaryTransparent: Story;
+export declare const Tetriary: Story;
+export declare const TetriaryColor: Story;
+export declare const PrimaryHover: Story;
+export declare const PrimaryDisabled: Story;
+export declare const IconOnly: Story;
+export declare const IconOnlyHover: Story;
+export declare const IconOnlyDisabled: Story;
+export declare const Destructive: Story;
+export declare const DestructiveHover: Story;
+export declare const DestructiveDisabled: Story;
+export declare const Large: Story;
+export declare const Medium: Story;
+export declare const Small: Story;
+export declare const ExtraSmall: Story;
+export declare const ExtraExtraSmall: Story;
+export declare const CircularButton: Story;
+export declare const CircularButtonHover: Story;
+export declare const CircularButtonDisabled: Story;

package/dist/stories/Button.stories.js

@@ -0,0 +1,295 @@
+import { MainButton } from './Button';
+import { ButtonShape, ButtonState } from './types/button';
+import { ButtonDisplayMode } from './types/button';
+import { ButtonHierarchy } from './types/button';
+import { ButtonSize } from './types/button';
+const meta = {
+    title: 'Design System/Components/Button',
+    component: MainButton,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4339-3441&t=21PpejYhkGTLCVlu-4',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'Button text content',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        size: {
+            control: 'select',
+            options: ['xl', 'lg', 'md', 'sm', 'xs', 'xxs'],
+            description: 'Size of the button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'xl' },
+            },
+        },
+        hierarchy: {
+            control: 'select',
+            options: [
+                'Primary',
+                'Secondary',
+                'Secondary-color',
+                'Secondary-transparent',
+                'Tetriary',
+                'Tetriary-color',
+            ],
+            description: 'Visual hierarchy of the button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Primary' },
+            },
+        },
+        displayIcon: {
+            control: 'text',
+            description: 'Name of the display Phosphor icon (e.g., "Circle", "AndroidLogo", "Armchair")',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        displayIconMode: {
+            control: 'select',
+            options: ['Default', 'Only'],
+            description: 'Icon display mode - Default shows text with icons, Only shows a single icon without text',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Default' },
+            },
+        },
+        state: {
+            control: 'select',
+            options: ['Default', 'Hover', 'Disabled'],
+            description: 'Current state of the button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Default' },
+            },
+        },
+        shape: {
+            control: 'select',
+            options: ['Square', 'Circle'],
+            description: 'Shape of the button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Square' },
+            },
+        },
+        destructive: {
+            control: 'boolean',
+            description: 'Whether the button is destructive',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        loading: {
+            control: 'boolean',
+            description: 'Whether the button is in loading state',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        showLeadingIcon: {
+            control: 'boolean',
+            description: 'Whether to show the leading icon',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        showTrailingIcon: {
+            control: 'boolean',
+            description: 'Whether to show the trailing icon',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        leadingIcon: {
+            control: 'text',
+            description: 'Name of the leading Phosphor icon (e.g., "Circle", "AndroidLogo", "Armchair")',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Circle' },
+            },
+        },
+        trailingIcon: {
+            control: 'text',
+            description: 'Name of the trailing Phosphor icon (e.g., "Circle", "AndroidLogo", "Armchair")',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Circle' },
+            },
+        },
+    },
+};
+export default meta;
+export const Primary = {
+    args: {
+        text: 'Button',
+        size: ButtonSize.xl,
+        hierarchy: ButtonHierarchy.Primary,
+        displayIconMode: ButtonDisplayMode.Default,
+        state: ButtonState.Default,
+        shape: ButtonShape.Square,
+        destructive: false,
+        showLeadingIcon: true,
+        showTrailingIcon: true,
+        leadingIcon: 'Circle',
+        trailingIcon: 'Circle',
+    },
+};
+export const Secondary = {
+    args: {
+        ...Primary.args,
+        text: 'Button',
+        hierarchy: ButtonHierarchy.Secondary,
+    },
+};
+export const SecondaryColor = {
+    args: {
+        ...Primary.args,
+        text: 'Button',
+        hierarchy: ButtonHierarchy.SecondaryColor,
+    },
+};
+export const SecondaryTransparent = {
+    args: {
+        ...Primary.args,
+        text: 'Button',
+        hierarchy: ButtonHierarchy.SecondaryTransparent,
+    },
+};
+export const Tetriary = {
+    args: {
+        ...Primary.args,
+        text: 'Button',
+        hierarchy: ButtonHierarchy.Tetriary,
+    },
+};
+export const TetriaryColor = {
+    args: {
+        ...Primary.args,
+        text: 'Button',
+        hierarchy: ButtonHierarchy.TetriaryColor,
+    },
+};
+export const PrimaryHover = {
+    args: {
+        ...Primary.args,
+        state: ButtonState.Hover,
+    },
+};
+export const PrimaryDisabled = {
+    args: {
+        ...Primary.args,
+        state: ButtonState.Disabled,
+    },
+};
+export const IconOnly = {
+    args: {
+        displayIconMode: ButtonDisplayMode.Only,
+        displayIcon: 'AndroidLogo',
+        size: ButtonSize.xl,
+        hierarchy: ButtonHierarchy.Primary,
+        state: ButtonState.Default,
+        shape: ButtonShape.Square,
+    },
+};
+export const IconOnlyHover = {
+    args: {
+        ...IconOnly.args,
+        state: ButtonState.Hover,
+    },
+};
+export const IconOnlyDisabled = {
+    args: {
+        ...IconOnly.args,
+        state: ButtonState.Disabled,
+    },
+};
+export const Destructive = {
+    args: {
+        ...Primary.args,
+        text: 'Button',
+        destructive: true,
+    },
+};
+export const DestructiveHover = {
+    args: {
+        ...Destructive.args,
+        state: ButtonState.Hover,
+    },
+};
+export const DestructiveDisabled = {
+    args: {
+        ...Destructive.args,
+        state: ButtonState.Disabled,
+    },
+};
+export const Large = {
+    args: {
+        ...Primary.args,
+        size: ButtonSize.lg,
+        text: 'Button',
+    },
+};
+export const Medium = {
+    args: {
+        ...Primary.args,
+        size: ButtonSize.md,
+        text: 'Button',
+    },
+};
+export const Small = {
+    args: {
+        ...Primary.args,
+        size: ButtonSize.sm,
+        text: 'Button',
+    },
+};
+export const ExtraSmall = {
+    args: {
+        ...Primary.args,
+        size: ButtonSize.xs,
+        text: 'Button',
+    },
+};
+export const ExtraExtraSmall = {
+    args: {
+        ...Primary.args,
+        size: ButtonSize.xxs,
+        text: 'Button',
+    },
+};
+export const CircularButton = {
+    args: {
+        text: 'Button',
+        size: ButtonSize.xl,
+        hierarchy: ButtonHierarchy.Primary,
+        displayIconMode: ButtonDisplayMode.Only,
+        displayIcon: 'Circle',
+        shape: ButtonShape.Circle,
+        state: ButtonState.Default,
+    },
+};
+export const CircularButtonHover = {
+    args: {
+        ...CircularButton.args,
+        state: ButtonState.Hover,
+    },
+};
+export const CircularButtonDisabled = {
+    args: {
+        ...CircularButton.args,
+        state: ButtonState.Disabled,
+    },
+};

package/dist/stories/Colors.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Colors } from './Colors';
+declare const meta: Meta<typeof Colors>;
+export default meta;
+type Story = StoryObj<typeof Colors>;
+export declare const Default: Story;

package/dist/stories/Colors.stories.js

@@ -0,0 +1,10 @@
+import { Colors } from './Colors';
+const meta = {
+    title: 'Design System/Colors',
+    component: Colors,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Default = {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -16,7 +16,10 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "version:patch": "npm version patch -m \"🔖 Release %s\"",
+    "version:minor": "npm version minor -m \"🔖 Release %s\"",
+    "version:major": "npm version major -m \"🔖 Release %s\""
   },
   "publishConfig": {
     "access": "public"
@@ -33,8 +36,7 @@
     "@phosphor-icons/react": "^2.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "style-dictionary": "^4.3.2",
-    "token-transformer": "^0.0.33"
+    "typescript": "~5.5.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.4",
@@ -49,6 +51,8 @@
     "@storybook/test": "^8.5.2",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.18",
     "eslint": "^8.57.0",
@@ -62,6 +66,7 @@
     "postcss": "^8.4.35",
     "prettier": "3.2.5",
     "storybook": "^8.5.2",
+    "typescript-eslint": "^7.1.1",
     "vite": "^5.1.6"
   },
   "eslintConfig": {

package/dist/stories/Header.d.ts

@@ -1,12 +0,0 @@
-import './header.css';
-type User = {
-    name: string;
-};
-export interface HeaderProps {
-    user?: User;
-    onLogin?: () => void;
-    onLogout?: () => void;
-    onCreateAccount?: () => void;
-}
-export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/stories/Header.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '@mui/material';
-import './header.css';
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (_jsx("header", { children: _jsxs("div", { className: "storybook-header", children: [_jsxs("div", { children: [_jsx("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { fill: "none", fillRule: "evenodd", children: [_jsx("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }), _jsx("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" }), _jsx("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" })] }) }), _jsx("h1", { children: "Acme" })] }), _jsx("div", { children: user ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "welcome", children: ["Welcome, ", _jsx("b", { children: user.name }), "!"] }), _jsx(Button, { size: "small", onClick: onLogout, children: "Log out" })] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", onClick: onLogin, children: "Log in" }), _jsx(Button, { size: "small", onClick: onCreateAccount, children: "Sign up" })] })) })] }) }));

package/dist/stories/Header.stories.d.ts

@@ -1,18 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: ({ user, onLogin, onLogout, onCreateAccount }: import("./Header").HeaderProps) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
-    parameters: {
-        layout: string;
-    };
-    args: {
-        onLogin: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onLogout: import("@vitest/spy").Mock<(...args: any[]) => any>;
-        onCreateAccount: import("@vitest/spy").Mock<(...args: any[]) => any>;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const LoggedIn: Story;
-export declare const LoggedOut: Story;

package/dist/stories/Header.stories.js

@@ -1,26 +0,0 @@
-import { fn } from '@storybook/test';
-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/writing-docs/autodocs
-    tags: ['autodocs'],
-    parameters: {
-        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-        layout: 'fullscreen',
-    },
-    args: {
-        onLogin: fn(),
-        onLogout: fn(),
-        onCreateAccount: fn(),
-    },
-};
-export default meta;
-export const LoggedIn = {
-    args: {
-        user: {
-            name: 'Jane Doe',
-        },
-    },
-};
-export const LoggedOut = {};

package/dist/stories/Page.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import './page.css';
-export declare const Page: React.FC;

package/dist/stories/Page.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Header } from './Header';
-import './page.css';
-export const Page = () => {
-    const [user, setUser] = React.useState();
-    return (_jsxs("article", { children: [_jsx(Header, { user: user, onLogin: () => setUser({ name: 'Jane Doe' }), onLogout: () => setUser(undefined), onCreateAccount: () => setUser({ name: 'Jane Doe' }) }), _jsxs("section", { className: "storybook-page", children: [_jsx("h2", { children: "Pages in Storybook" }), _jsxs("p", { children: ["We recommend building UIs with a", ' ', _jsx("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer", children: _jsx("strong", { children: "component-driven" }) }), ' ', "process starting with atomic components and ending with pages."] }), _jsx("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }), _jsxs("ul", { children: [_jsx("li", { children: "Use a higher-level connected component. Storybook helps you compose such data from the \"args\" of child component stories" }), _jsx("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })] }), _jsxs("p", { children: ["Get a guided tutorial on component-driven development at", ' ', _jsx("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer", children: "Storybook tutorials" }), ". Read more in the", ' ', _jsx("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer", children: "docs" }), "."] }), _jsxs("div", { className: "tip-wrapper", children: [_jsx("span", { className: "tip", children: "Tip" }), " Adjust the width of the canvas with the", ' ', _jsx("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", fillRule: "evenodd", children: _jsx("path", { d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z", id: "a", fill: "#999" }) }) }), "Viewports addon in the toolbar"] })] })] }));
-};

package/dist/stories/Page.stories.d.ts

@@ -1,12 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: import("react").FC<{}>;
-    parameters: {
-        layout: string;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const LoggedOut: Story;
-export declare const LoggedIn: Story;

package/dist/stories/Page.stories.js

@@ -1,24 +0,0 @@
-import { expect, userEvent, within } from '@storybook/test';
-import { Page } from './Page';
-const meta = {
-    title: 'Example/Page',
-    component: Page,
-    parameters: {
-        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-        layout: 'fullscreen',
-    },
-};
-export default meta;
-export const LoggedOut = {};
-// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
-export const LoggedIn = {
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const loginButton = canvas.getByRole('button', { name: /Log in/i });
-        await expect(loginButton).toBeInTheDocument();
-        await userEvent.click(loginButton);
-        await expect(loginButton).not.toBeInTheDocument();
-        const logoutButton = canvas.getByRole('button', { name: /Log out/i });
-        await expect(logoutButton).toBeInTheDocument();
-    },
-};