@beydesign/storybook 0.0.3 → 0.0.5

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

@@ -1,4 +1,4 @@
-import type { SxProps, Theme } from '@mui/material';
+import type { CSSProperties } from 'react';
 import * as PhosphorIcons from '@phosphor-icons/react';
 /**
  * Button size variants
@@ -77,7 +77,7 @@ export interface MainButtonProps {
     /** HTML button type */
     type?: ButtonType;
     /** Custom styles for the button */
-    style?: SxProps<Theme>;
+    style?: CSSProperties;
     /** Size variant of the button */
     size?: ButtonSize;
     /** Visual hierarchy of the button */

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.3",
+  "version": "0.0.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -15,7 +15,7 @@
     "build:lib": "tsc",
     "lint": "eslint .",
     "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
+    "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\"",