@beydesign/storybook 0.0.1 → 0.0.4

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/Avatar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AvatarProps, ComponentsProps } from './types/avatar';
+export declare const Avatar: React.FC<AvatarProps>;
+export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/Avatar.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AvatarImage, AvatarSize, AvatarStyle, getInitials, } from './types/avatar';
+import { Avatar as MuiAvatar, } from '@mui/material';
+import { User } from '@phosphor-icons/react';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+export const Avatar = ({ avatarStyle = AvatarStyle.Placeholder, border = false, image = AvatarImage, size = AvatarSize.xxl, style: customStyle, text = 'Scarlett Johansson', }) => {
+    const getDimensions = (avatarSize) => {
+        switch (avatarSize) {
+            case AvatarSize.xs:
+                return 24;
+            case AvatarSize.sm:
+                return 32;
+            case AvatarSize.md:
+                return 40;
+            case AvatarSize.lg:
+                return 48;
+            case AvatarSize.xl:
+                return 56;
+            case AvatarSize.xxl:
+                return 64;
+            default:
+                return 40;
+        }
+    };
+    const getColor = (avatarStyle) => {
+        switch (avatarStyle) {
+            case AvatarStyle.Letters:
+                return 'var(--colors-light-foreground-fg-primary)';
+            case AvatarStyle.Placeholder:
+                return 'var(--colors-light-foreground-fg-tertiary)';
+            case AvatarStyle.Picture:
+                return 'var(--colors-light-foreground-fg-secondary)';
+            default:
+                return 'var(--colors-light-foreground-fg-tertiary)';
+        }
+    };
+    const getTextSize = () => {
+        if (size === AvatarSize.xxl)
+            return TypographySize.TextL;
+        else if ([AvatarSize.xl, AvatarSize.lg].includes(size))
+            return TypographySize.TextM;
+        else if (size === AvatarSize.md)
+            return TypographySize.TextS;
+        else if (size === AvatarSize.sm)
+            return TypographySize.TextXS;
+        else if (size === AvatarSize.xs)
+            return TypographySize.Text2XS;
+        else
+            return TypographySize.TextS;
+    };
+    const dimensions = getDimensions(size);
+    const props = {
+        sx: {
+            width: dimensions,
+            height: dimensions,
+            border: border
+                ? '1px solid var(--colors-light-border-border-component)'
+                : 'none',
+            backgroundColor: 'var(--colors-light-background-bg-card-highlight)',
+            color: getColor(avatarStyle),
+            fontSize: getTextSize(),
+            borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-11xl)',
+            ...customStyle,
+        },
+    };
+    if (avatarStyle === AvatarStyle.Letters) {
+        return (_jsx(MuiAvatar, { ...props, children: _jsx(Typography, { text: getInitials(text), size: getTextSize(), weight: TypographyWeight.Medium }) }));
+    }
+    else if (avatarStyle === AvatarStyle.Picture) {
+        return _jsx(MuiAvatar, { ...props, src: image });
+    }
+    else {
+        return (_jsx(MuiAvatar, { ...props, children: _jsx(User, { size: dimensions / 2, weight: "bold" }) }));
+    }
+};
+export const Components = () => {
+    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Avatars" }), _jsxs("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: [_jsxs("div", { children: [_jsx("h2", { children: "Size: sm, Avatar Style: Letters" }), _jsx(Avatar, { text: "Scarlett Johansson", size: AvatarSize.sm, avatarStyle: AvatarStyle.Letters })] }), _jsxs("div", { children: [_jsx("h2", { children: "Size: sm, Avatar Style: Picture" }), _jsx(Avatar, { image: AvatarImage, size: AvatarSize.sm, avatarStyle: AvatarStyle.Picture })] }), _jsxs("div", { children: [_jsx("h2", { children: "Size: sm, Avatar Style: Placeholder" }), _jsx(Avatar, { size: AvatarSize.sm, avatarStyle: AvatarStyle.Placeholder })] })] })] }));
+};

package/dist/stories/Avatar.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './Avatar';
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+export declare const Placeholder: Story;
+export declare const Picture: Story;
+export declare const Letters: Story;

package/dist/stories/Avatar.stories.js

@@ -0,0 +1,76 @@
+import { Avatar } from './Avatar';
+import { AvatarImage, AvatarSize, AvatarStyle } from './types/avatar';
+const meta = {
+    title: 'Design System/Components/Avatar',
+    component: Avatar,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4694-9405&t=HGXFzkH7TV5e4UsD-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'Avatar text content',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        image: {
+            control: 'text',
+            description: 'Image URL for the avatar',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        border: {
+            control: 'boolean',
+            description: 'Whether to show a border around the avatar',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        size: {
+            control: 'select',
+            options: ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'],
+            description: 'Size of the avatar',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: AvatarSize.xxl },
+            },
+        },
+        avatarStyle: {
+            control: 'select',
+            options: ['Placeholder', 'Letters', 'Picture'],
+            description: 'Style of the avatar',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: AvatarStyle.Placeholder },
+            },
+        },
+    },
+};
+export default meta;
+export const Placeholder = {
+    args: {
+        size: AvatarSize.xxl,
+        avatarStyle: AvatarStyle.Placeholder,
+    },
+};
+export const Picture = {
+    args: {
+        size: AvatarSize.xxl,
+        image: AvatarImage,
+        avatarStyle: AvatarStyle.Picture,
+    },
+};
+export const Letters = {
+    args: {
+        size: AvatarSize.xxl,
+        text: 'Scarlett Johansson',
+        avatarStyle: AvatarStyle.Letters,
+    },
+};

package/dist/stories/Badge.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Bagde';
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Default: Story;
+export declare const Violet: Story;
+export declare const Lemon: Story;
+export declare const Green: Story;
+export declare const Red: Story;
+export declare const Yellow: Story;

package/dist/stories/Badge.stories.js

@@ -0,0 +1,98 @@
+import { Badge } from './Bagde';
+import { BadgeColor, BadgeSize } from './types/badge';
+const meta = {
+    title: 'Design System/Components/Badge',
+    component: Badge,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4575-13743&t=cm6NmhzfUGa6aUnh-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'Badge text content',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        color: {
+            control: 'select',
+            description: 'Badge color variant',
+            options: Object.values(BadgeColor),
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        size: {
+            control: 'select',
+            description: 'Badge size variant',
+            options: Object.values(BadgeSize),
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        icon: {
+            control: 'text',
+            description: 'Name of the display Phosphor icon (e.g., "Circle")',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        fill: {
+            control: 'boolean',
+            description: 'Fill the badge with color',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Custom style for the badge',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        text: 'Badge',
+        color: BadgeColor.Default,
+        size: BadgeSize.md,
+    },
+};
+export const Violet = {
+    args: {
+        text: 'Badge',
+        color: BadgeColor.Violet,
+    },
+};
+export const Lemon = {
+    args: {
+        text: 'Badge',
+        color: BadgeColor.Lemon,
+    },
+};
+export const Green = {
+    args: {
+        text: 'Badge',
+        color: BadgeColor.Green,
+    },
+};
+export const Red = {
+    args: {
+        text: 'Badge',
+        color: BadgeColor.Red,
+    },
+};
+export const Yellow = {
+    args: {
+        text: 'Badge',
+        color: BadgeColor.Yellow,
+    },
+};

package/dist/stories/Bagde.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { BadgeProps } from './types/badge';
+export declare const Badge: React.FC<BadgeProps>;

package/dist/stories/Bagde.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BadgeColor, BadgeSize } from './types/badge';
+import * as PhosphorIcons from '@phosphor-icons/react';
+import { Box } from '@mui/material';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+const getIconComponent = (iconName, props) => {
+    const Icon = PhosphorIcons[iconName];
+    return Icon ? _jsx(Icon, { ...props }) : null;
+};
+export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, style: customStyle, icon = 'Cactus', fill = true, }) => {
+    const getBackgroundColor = (color) => {
+        switch (color) {
+            case BadgeColor.Default:
+                return 'var(--primitives-desktop-primary-gray-50)';
+            case BadgeColor.Violet:
+                return 'var(--primitives-desktop-primary-brand-violet-100)';
+            case BadgeColor.Lemon:
+                return 'var(--primitives-desktop-primary-brand-lemon-200)';
+            case BadgeColor.Green:
+                return 'var(--primitives-desktop-primary-success-100)';
+            case BadgeColor.Red:
+                return 'var(--primitives-desktop-primary-red-100)';
+            case BadgeColor.Yellow:
+                return 'var(--primitives-desktop-primary-yellow-100)';
+            case BadgeColor.Blue:
+                return 'var(--primitives-desktop-secondary-blue-100)';
+            case BadgeColor.Cyan:
+                return 'var(--primitives-desktop-secondary-cyan-50)';
+            case BadgeColor.Pink:
+                return 'var(--primitives-desktop-secondary-pink-50)';
+            case BadgeColor.DarkTransparent:
+                return `var(--primitives-desktop-primary-transparent-black-60)`;
+        }
+    };
+    const getTextColor = () => {
+        switch (color) {
+            case BadgeColor.Default:
+                return 'var(--colors-light-text-text-title)';
+            case BadgeColor.Violet:
+                return 'var(--primitives-desktop-primary-brand-violet-800)';
+            case BadgeColor.Lemon:
+                return 'var(--primitives-desktop-primary-brand-lemon-900)';
+            case BadgeColor.Green:
+                return 'var(--primitives-desktop-primary-success-800)';
+            case BadgeColor.Red:
+                return 'var(--primitives-desktop-primary-red-800)';
+            case BadgeColor.Yellow:
+                return 'var(--primitives-desktop-primary-yellow-800)';
+            case BadgeColor.Blue:
+                return 'var(--primitives-desktop-secondary-blue-800)';
+            case BadgeColor.Cyan:
+                return 'var(--primitives-desktop-secondary-cyan-800)';
+            case BadgeColor.Pink:
+                return 'var(--primitives-desktop-secondary-pink-800)';
+            case BadgeColor.DarkTransparent:
+                return 'var(--colors-light-text-text-white)';
+        }
+    };
+    const getBorder = (color) => {
+        switch (color) {
+            case BadgeColor.Default:
+                return '1px solid var(--primitives-desktop-primary-gray-100)';
+            case BadgeColor.Violet:
+                return '1px solid var(--primitives-desktop-primary-brand-violet-300)';
+            case BadgeColor.Lemon:
+                return '1px solid var(--primitives-desktop-primary-brand-lemon-300)';
+            case BadgeColor.Green:
+                return '1px solid var(--primitives-desktop-primary-success-300)';
+            case BadgeColor.Red:
+                return '1px solid var(--primitives-desktop-primary-red-300)';
+            case BadgeColor.Yellow:
+                return '1px solid var(--primitives-desktop-primary-yellow-300)';
+            case BadgeColor.Blue:
+                return '1px solid var(--primitives-desktop-secondary-blue-300)';
+            case BadgeColor.Cyan:
+                return '1px solid var(--primitives-desktop-secondary-cyan-300)';
+            case BadgeColor.Pink:
+                return '1px solid var(--primitives-desktop-secondary-pink-300)';
+            case BadgeColor.DarkTransparent:
+                return '1px solid rgba(var(--colors-light-background-bg-component-dark), 0.9)';
+        }
+    };
+    const getPadding = (size) => {
+        switch (size) {
+            case BadgeSize.lg:
+                return 'var(--spacing-tokens-size-in-px-spacing-spacing-sm) var(--spacing-tokens-size-in-px-spacing-spacing-lg)';
+            case BadgeSize.md:
+                return 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) var(--spacing-tokens-size-in-px-spacing-spacing-md)';
+            case BadgeSize.xs:
+                return 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) var(--spacing-tokens-size-in-px-spacing-spacing-md)';
+        }
+    };
+    const getIconSize = (size) => {
+        switch (size) {
+            case BadgeSize.lg:
+                return '20px';
+            case BadgeSize.md:
+                return '16px';
+            case BadgeSize.xs:
+                return '12px';
+        }
+    };
+    const backgroundColor = getBackgroundColor(color);
+    const border = getBorder(color);
+    const padding = getPadding(size);
+    const iconProps = {
+        size: getIconSize(size),
+        color: getTextColor(),
+        weight: 'regular',
+    };
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", bgcolor: fill ? backgroundColor : 'transparent', border: fill ? border : 'none', borderRadius: fill ? 'var(--spacing-tokens-size-in-px-radius-radius-full)' : 'none', padding: padding, gap: "4px", sx: customStyle, children: [icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { text: text, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: getTextColor() }))] }));
+};