@beydesign/storybook 0.0.1 → 0.0.4

package/dist/stories/Typography.stories.js

@@ -0,0 +1,189 @@
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+const meta = {
+    title: 'Design System/Foundations/Typography',
+    component: Typography,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4312-2152&t=mUqFCoPkymh9swiA-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'Typography text content',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        size: {
+            control: 'select',
+            options: Object.values(TypographySize),
+            description: 'Size of the typography',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'HeadingXL' },
+            },
+        },
+        weight: {
+            control: 'select',
+            options: Object.values(TypographyWeight),
+            description: 'Weight of the typography',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Bold' },
+            },
+        },
+        color: {
+            control: 'color',
+            description: 'Color of the typography',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+export const HeadingXLBold = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.HeadingXL,
+        weight: TypographyWeight.Bold,
+    },
+};
+export const HeadingXLSemiBold = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.HeadingXL,
+        weight: TypographyWeight.SemiBold,
+    },
+};
+export const HeadingXLMedium = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.HeadingXL,
+        weight: TypographyWeight.Medium,
+    },
+};
+export const HeadingXLRegular = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.HeadingXL,
+        weight: TypographyWeight.Regular,
+    },
+};
+export const HeadingLBold = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.HeadingL,
+        weight: TypographyWeight.Bold,
+    },
+};
+export const HeadingLSemiBold = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.HeadingL,
+        weight: TypographyWeight.SemiBold,
+    },
+};
+export const HeadingLMedium = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.HeadingL,
+        weight: TypographyWeight.Medium,
+    },
+};
+export const HeadingLRegular = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.HeadingL,
+        weight: TypographyWeight.Regular,
+    },
+};
+export const HeadingMBold = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.HeadingM,
+        weight: TypographyWeight.Bold,
+    },
+};
+export const Heading2XSRegular = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.Heading2XS,
+        weight: TypographyWeight.Regular,
+    },
+};
+export const TextLBold = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.TextL,
+        weight: TypographyWeight.Bold,
+    },
+};
+export const TextLSemiBold = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.TextL,
+        weight: TypographyWeight.SemiBold,
+    },
+};
+export const TextLMedium = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.TextL,
+        weight: TypographyWeight.Medium,
+    },
+};
+export const TextLRegular = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.TextL,
+        weight: TypographyWeight.Regular,
+    },
+};
+export const TextMBold = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.TextM,
+        weight: TypographyWeight.Bold,
+    },
+};
+export const TextMSemiBold = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.TextM,
+        weight: TypographyWeight.SemiBold,
+    },
+};
+export const TextMMedium = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.TextM,
+        weight: TypographyWeight.Medium,
+    },
+};
+export const TextMRegular = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.TextM,
+        weight: TypographyWeight.Regular,
+    },
+};
+export const TextSBold = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.TextS,
+        weight: TypographyWeight.Bold,
+    },
+};
+export const TextSSemiBold = {
+    args: {
+        text: 'Typography',
+        size: TypographySize.TextS,
+        weight: TypographyWeight.SemiBold,
+    },
+};

package/dist/stories/types/avatar.d.ts

@@ -0,0 +1,44 @@
+import type { SxProps, Theme } from '@mui/material';
+/**
+ * Avatar size variants
+ */
+export declare enum AvatarSize {
+    xxl = "xxl",
+    xl = "xl",
+    lg = "lg",
+    md = "md",
+    sm = "sm",
+    xs = "xs"
+}
+/**
+ * Avatar style variants
+ */
+export declare enum AvatarStyle {
+    Placeholder = "Placeholder",
+    Picture = "Picture",
+    Letters = "Letters"
+}
+export declare const AvatarImage = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTAUPUG0r--EDZzf-f9Afj_Jp7N96yIGsWPgCYIkrAS1rCJHIcdm_RCq_me44bJc0dvvY&usqp=CAU";
+export declare const getInitials: (text: string) => string;
+/**
+ * Avatar component props
+ */
+export type AvatarProps = {
+    /** Style variant of the avatar */
+    avatarStyle: AvatarStyle;
+    /** Text content of the avatar if avatarStyle is Letters */
+    text?: string;
+    /** Image source of the avatar if avatarStyle is Picture  */
+    image?: string;
+    /** Custom style of the avatar */
+    style?: SxProps<Theme>;
+    /** Size variant of the avatar */
+    size?: AvatarSize;
+    /** Visual hierarchy of the avatar */
+    border?: boolean;
+};
+/**
+ * Props for the Components wrapper
+ */
+export interface ComponentsProps {
+}

package/dist/stories/types/avatar.js

@@ -0,0 +1,28 @@
+/**
+ * Avatar size variants
+ */
+export var AvatarSize;
+(function (AvatarSize) {
+    AvatarSize["xxl"] = "xxl";
+    AvatarSize["xl"] = "xl";
+    AvatarSize["lg"] = "lg";
+    AvatarSize["md"] = "md";
+    AvatarSize["sm"] = "sm";
+    AvatarSize["xs"] = "xs";
+})(AvatarSize || (AvatarSize = {}));
+/**
+ * Avatar style variants
+ */
+export var AvatarStyle;
+(function (AvatarStyle) {
+    AvatarStyle["Placeholder"] = "Placeholder";
+    AvatarStyle["Picture"] = "Picture";
+    AvatarStyle["Letters"] = "Letters";
+})(AvatarStyle || (AvatarStyle = {}));
+export const AvatarImage = `https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTAUPUG0r--EDZzf-f9Afj_Jp7N96yIGsWPgCYIkrAS1rCJHIcdm_RCq_me44bJc0dvvY&usqp=CAU`;
+export const getInitials = (text) => {
+    return text
+        .split(' ')
+        .map((word) => word[0]?.toUpperCase())
+        .join('');
+};

package/dist/stories/types/badge.d.ts

@@ -0,0 +1,47 @@
+import type { SxProps, Theme } from '@mui/material';
+import * as PhosphorIcons from '@phosphor-icons/react';
+/**
+ * Badge size variants
+ */
+export declare enum BadgeSize {
+    lg = "lg",
+    md = "md",
+    xs = "xs"
+}
+/**
+ * Badge color variants
+ */
+export declare enum BadgeColor {
+    Default = "Default",
+    Violet = "Violet",
+    Lemon = "Lemon",
+    Green = "Green",
+    Red = "Red",
+    Yellow = "Yellow",
+    Blue = "Blue",
+    Cyan = "Cyan",
+    Pink = "Pink",
+    DarkTransparent = "DarkTransparent"
+}
+/**
+ * Badge component props
+ */
+export type BadgeProps = {
+    /** Size variant of the badge */
+    size?: BadgeSize;
+    /** Color variant of the badge */
+    color?: BadgeColor;
+    /** Text content of the badge */
+    text: string;
+    /** Custom style of the badge */
+    style?: SxProps<Theme>;
+    /** Icon to display in the badge */
+    icon?: keyof typeof PhosphorIcons;
+    /** Whether to fill the icon */
+    fill?: boolean;
+};
+/**
+ * Props for the Components wrapper
+ */
+export interface ComponentsProps {
+}

package/dist/stories/types/badge.js

@@ -0,0 +1,25 @@
+/**
+ * Badge size variants
+ */
+export var BadgeSize;
+(function (BadgeSize) {
+    BadgeSize["lg"] = "lg";
+    BadgeSize["md"] = "md";
+    BadgeSize["xs"] = "xs";
+})(BadgeSize || (BadgeSize = {}));
+/**
+ * Badge color variants
+ */
+export var BadgeColor;
+(function (BadgeColor) {
+    BadgeColor["Default"] = "Default";
+    BadgeColor["Violet"] = "Violet";
+    BadgeColor["Lemon"] = "Lemon";
+    BadgeColor["Green"] = "Green";
+    BadgeColor["Red"] = "Red";
+    BadgeColor["Yellow"] = "Yellow";
+    BadgeColor["Blue"] = "Blue";
+    BadgeColor["Cyan"] = "Cyan";
+    BadgeColor["Pink"] = "Pink";
+    BadgeColor["DarkTransparent"] = "DarkTransparent";
+})(BadgeColor || (BadgeColor = {}));

package/dist/stories/types/checkbox.d.ts

@@ -0,0 +1,26 @@
+export declare enum CheckboxType {
+    Radio = "Radio",
+    Checkbox = "Checkbox"
+}
+/**
+ * Checkbox component props
+ */
+export type CheckboxProps = {
+    /** Type variant of the checkbox */
+    type?: CheckboxType;
+    /** Label of the checkbox */
+    label: string;
+    /** Whether the checkbox is checked */
+    checked?: boolean;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Whether the checkbox is read-only */
+    required?: boolean;
+    /** Event handler for the checkbox */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+/**
+ * Props for the Components wrapper
+ */
+export interface ComponentsProps {
+}

package/dist/stories/types/checkbox.js

@@ -0,0 +1,5 @@
+export var CheckboxType;
+(function (CheckboxType) {
+    CheckboxType["Radio"] = "Radio";
+    CheckboxType["Checkbox"] = "Checkbox";
+})(CheckboxType || (CheckboxType = {}));

package/dist/stories/types/typography.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Typography size variants
+ */
+export declare enum TypographySize {
+    HeadingXL = "HeadingXL",
+    HeadingL = "HeadingL",
+    HeadingM = "HeadingM",
+    HeadingS = "HeadingS",
+    HeadingXS = "HeadingXS",
+    Heading2XS = "Heading2XS",
+    TextL = "TextL",
+    TextM = "TextM",
+    TextS = "TextS",
+    TextXS = "TextXS",
+    Text2XS = "Text2XS"
+}
+/**
+ * Typography weight variants
+ */
+export declare enum TypographyWeight {
+    Bold = "Bold",
+    SemiBold = "SemiBold",
+    Medium = "Medium",
+    Regular = "Regular"
+}
+/**
+ * Typography component props
+ */
+export interface TypographyProps {
+    /** Text content of the typography */
+    text: string;
+    /** Size variant of the typography */
+    size?: TypographySize;
+    /** Weight variant of the typography */
+    weight?: TypographyWeight;
+    /** Color variant of the typography */
+    color?: string;
+}
+/**
+ * Props for the Components wrapper
+ */
+export interface ComponentsProps {
+}

package/dist/stories/types/typography.js

@@ -0,0 +1,27 @@
+/**
+ * Typography size variants
+ */
+export var TypographySize;
+(function (TypographySize) {
+    TypographySize["HeadingXL"] = "HeadingXL";
+    TypographySize["HeadingL"] = "HeadingL";
+    TypographySize["HeadingM"] = "HeadingM";
+    TypographySize["HeadingS"] = "HeadingS";
+    TypographySize["HeadingXS"] = "HeadingXS";
+    TypographySize["Heading2XS"] = "Heading2XS";
+    TypographySize["TextL"] = "TextL";
+    TypographySize["TextM"] = "TextM";
+    TypographySize["TextS"] = "TextS";
+    TypographySize["TextXS"] = "TextXS";
+    TypographySize["Text2XS"] = "Text2XS";
+})(TypographySize || (TypographySize = {}));
+/**
+ * Typography weight variants
+ */
+export var TypographyWeight;
+(function (TypographyWeight) {
+    TypographyWeight["Bold"] = "Bold";
+    TypographyWeight["SemiBold"] = "SemiBold";
+    TypographyWeight["Medium"] = "Medium";
+    TypographyWeight["Regular"] = "Regular";
+})(TypographyWeight || (TypographyWeight = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -15,8 +15,11 @@
     "build:lib": "tsc",
     "lint": "eslint .",
     "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "storybook": "npm update @beydesign/tokens && storybook dev -p 6006",
+    "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();
-    },
-};