@beydesign/storybook 0.0.9 → 0.0.11

package/dist/index.d.ts

@@ -3,8 +3,12 @@ export { Avatar } from './stories/Avatar';
 export { Typography } from './stories/Typography';
 export { Badge } from './stories/Bagde';
 export { Checkbox } from './stories/Checkbox';
+export { ToggleButtonGroup } from './stories/ToggleButtonGroup';
+export { ProgressIndicator } from './stories/ProgressIndicator';
 export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, type MainButtonProps, } from './stories/types/button';
 export { BadgeColor, BadgeSize, type BadgeProps } from './stories/types/badge';
 export { AvatarStyle, AvatarSize, type AvatarProps, } from './stories/types/avatar';
 export { TypographySize, TypographyWeight, type TypographyProps, } from './stories/types/typography';
 export { CheckboxType, type CheckboxProps } from './stories/types/checkbox';
+export { ToggleButtonGroupSize, type ToggleButtonGroupProps, } from './stories/types/toggle-button-group';
+export { ProgressIndicatorMode, type ProgressIndicatorProps, } from './stories/types/progress-indicator';

package/dist/index.js

@@ -4,9 +4,13 @@ export { Avatar } from './stories/Avatar';
 export { Typography } from './stories/Typography';
 export { Badge } from './stories/Bagde';
 export { Checkbox } from './stories/Checkbox';
+export { ToggleButtonGroup } from './stories/ToggleButtonGroup';
+export { ProgressIndicator } from './stories/ProgressIndicator';
 // Types
 export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './stories/types/button';
 export { BadgeColor, BadgeSize } from './stories/types/badge';
 export { AvatarStyle, AvatarSize, } from './stories/types/avatar';
 export { TypographySize, TypographyWeight, } from './stories/types/typography';
 export { CheckboxType } from './stories/types/checkbox';
+export { ToggleButtonGroupSize, } from './stories/types/toggle-button-group';
+export { ProgressIndicatorMode, } from './stories/types/progress-indicator';

package/dist/stories/ProgressIndicator.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ComponentsProps, ProgressIndicatorProps } from './types/progress-indicator';
+export declare const ProgressIndicator: React.FC<ProgressIndicatorProps>;
+export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/ProgressIndicator.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ProgressIndicatorMode, } from './types/progress-indicator';
+import { Box } from '@mui/material';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, currentValue = 40, maxValue = 100, fillColor = 'var(--colors-light-background-bg-brand)', backgroundColor = 'var(--colors-light-background-bg-white)', text = 'used', textColor = 'var(--colors-light-text-text-primary)', style, }) => {
+    let errorText = '';
+    const calculateFill = () => {
+        if (mode === ProgressIndicatorMode.Value) {
+            return (currentValue / maxValue) * 100;
+        }
+        else {
+            return currentValue;
+        }
+    };
+    if (!Number.isInteger(currentValue)) {
+        errorText = 'Current value must be an integer';
+    }
+    else if (!Number.isInteger(maxValue)) {
+        errorText = 'Max value must be an integer';
+    }
+    else if (currentValue < 0) {
+        errorText = 'Invalid current value';
+    }
+    else if (currentValue > maxValue) {
+        errorText = 'Current value is greater than max value';
+    }
+    else if (mode === ProgressIndicatorMode.Percentage) {
+        if (maxValue > 100 || maxValue < 0) {
+            errorText = 'Invalid max value for percentage mode';
+        }
+    }
+    if (errorText) {
+        return (_jsx(Typography, { text: errorText, size: TypographySize.TextXS, weight: TypographyWeight.Regular }));
+    }
+    return (_jsxs(Box, { display: "flex", flexDirection: mode === ProgressIndicatorMode.Value ? 'column' : 'row', justifyContent: 'space-between', alignItems: mode === ProgressIndicatorMode.Value ? 'flex-end' : 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, minWidth: 200, children: [mode === ProgressIndicatorMode.Value && (_jsx(Typography, { text: `${currentValue} / ${maxValue} ${text}`, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor })), _jsx(Box, { display: "flex", flexGrow: 1, flexDirection: "row", alignItems: "center", borderRadius: '4px', sx: { backgroundColor, overflow: 'hidden' }, height: '4px', width: '100%', children: _jsx(Box, { height: '100%', borderRadius: '4px', sx: { backgroundColor: fillColor, width: `${calculateFill()}%` } }) }), mode === ProgressIndicatorMode.Percentage && (_jsx(Typography, { text: `${currentValue}%`, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor }))] }));
+};
+export const Components = () => {
+    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Progress Indicator" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' } })] }));
+};

package/dist/stories/ProgressIndicator.stories.d.ts

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

package/dist/stories/ProgressIndicator.stories.js

@@ -0,0 +1,80 @@
+import { ProgressIndicator } from './ProgressIndicator';
+import { ProgressIndicatorMode } from './types/progress-indicator';
+const meta = {
+    title: 'Design System/Components/ProgressIndicator',
+    component: ProgressIndicator,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4793-22258&t=3PJghL9RdZ71sldb-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        currentValue: {
+            control: 'number',
+            description: 'Current value of the progress indicator',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        maxValue: {
+            control: 'number',
+            description: 'Maximum value of the progress indicator',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        mode: {
+            control: 'select',
+            description: 'Mode of the progress indicator',
+            options: Object.values(ProgressIndicatorMode),
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        text: {
+            control: 'text',
+            description: 'Text of the progress indicator',
+        },
+        textColor: {
+            control: 'color',
+            description: 'Text color of the progress indicator',
+        },
+        fillColor: {
+            control: 'color',
+            description: 'Fill color of the progress indicator',
+        },
+        backgroundColor: {
+            control: 'color',
+            description: 'Background color of the progress indicator',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        mode: ProgressIndicatorMode.Value,
+        currentValue: 10,
+        maxValue: 100,
+    },
+};
+export const Percentage = {
+    args: {
+        mode: ProgressIndicatorMode.Percentage,
+        currentValue: 30,
+        maxValue: 100,
+    },
+};
+export const Custom = {
+    args: {
+        mode: ProgressIndicatorMode.Value,
+        currentValue: 10,
+        maxValue: 100,
+        backgroundColor: 'red',
+        fillColor: 'blue',
+        text: 'consumed',
+        textColor: 'purple',
+    },
+};

package/dist/stories/types/progress-indicator.d.ts

@@ -0,0 +1,35 @@
+import { Theme } from '@mui/material';
+import { SxProps } from '@mui/material';
+/**
+ * Progress indicator mode variants
+ */
+export declare enum ProgressIndicatorMode {
+    Value = "Value",
+    Percentage = "Percentage"
+}
+/**
+ * Progress indicator component props
+ */
+export type ProgressIndicatorProps = {
+    /** Mode variant of the progress indicator */
+    mode?: ProgressIndicatorMode;
+    /** Value of the progress indicator */
+    currentValue: number;
+    /** Maximum value of the progress indicator */
+    maxValue: number;
+    /** Fill color of the progress indicator */
+    fillColor?: string;
+    /** Background color of the progress indicator */
+    backgroundColor?: string;
+    /** Text of the progress indicator */
+    text?: string;
+    /** Text color of the progress indicator */
+    textColor?: string;
+    /** Style of the progress indicator */
+    style?: SxProps<Theme>;
+};
+/**
+ * Props for the Components wrapper
+ */
+export interface ComponentsProps {
+}

package/dist/stories/types/progress-indicator.js

@@ -0,0 +1,8 @@
+/**
+ * Progress indicator mode variants
+ */
+export var ProgressIndicatorMode;
+(function (ProgressIndicatorMode) {
+    ProgressIndicatorMode["Value"] = "Value";
+    ProgressIndicatorMode["Percentage"] = "Percentage";
+})(ProgressIndicatorMode || (ProgressIndicatorMode = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",