@beydesign/storybook 0.0.70 → 0.0.72

package/dist/stories/Form/FileUpload/FileUpload.js

@@ -1,11 +1,70 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { Box } from '@mui/material';
-import { FileDoc, FilePdf, FileTxt, UploadSimple } from '@phosphor-icons/react';
+import { FileDoc, FilePdf, FileTxt, FileXls, FilePpt, FileJs, FileCss, FileHtml, FileImage, FileAudio, FileVideo, FileZip, FileCode, UploadSimple, FileCsv, } from '@phosphor-icons/react';
 import { Typography, TypographySize, TypographyWeight } from '../../Typography';
+// Map file extensions to their corresponding icons
+const fileIconMap = {
+    // Document/Text Files
+    '.doc': FileDoc,
+    '.docx': FileDoc,
+    '.txt': FileTxt,
+    '.rtf': FileDoc,
+    // Spreadsheet Files
+    '.csv': FileCsv,
+    '.xls': FileXls,
+    '.xlsx': FileXls,
+    // Presentation Files
+    '.ppt': FilePpt,
+    '.pptx': FilePpt,
+    // Code/Markup Files
+    '.js': FileJs,
+    '.ts': FileCode,
+    '.css': FileCss,
+    '.html': FileHtml,
+    '.json': FileJs,
+    '.xml': FileXls,
+    // Media Files
+    '.jpg': FileImage,
+    '.jpeg': FileImage,
+    '.png': FileImage,
+    '.gif': FileImage,
+    '.svg': FileImage,
+    '.mp3': FileAudio,
+    '.wav': FileAudio,
+    '.mp4': FileVideo,
+    '.mov': FileVideo,
+    // Archive Files
+    '.zip': FileZip,
+    '.rar': FileZip,
+    '.tar': FileZip,
+    '.gz': FileZip,
+    // PDF Files
+    '.pdf': FilePdf,
+};
+// Default icon for unknown file types
+const defaultIcon = FileCode;
 export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,.txt', maxFileSizeMB = 10, onFileSelect, }) => {
     const [isDragging, setIsDragging] = useState(false);
     const fileInputRef = useRef(null);
+    // Function to get the icons to display based on acceptedFileTypes
+    const getFileTypeIcons = () => {
+        // Parse the acceptedFileTypes string into an array of extensions
+        const extensions = acceptedFileTypes
+            .toLowerCase()
+            .split(',')
+            .map((ext) => ext.trim())
+            .filter((ext) => ext.startsWith('.'));
+        // Get unique icons for the accepted file types
+        const uniqueIcons = new Map();
+        extensions.forEach((ext) => {
+            const IconComponent = fileIconMap[ext] || defaultIcon;
+            // Use the component name as key to avoid duplicates
+            uniqueIcons.set(IconComponent.name, IconComponent);
+        });
+        return Array.from(uniqueIcons.values());
+    };
+    const fileIcons = getFileTypeIcons();
     const handleFileSelect = (files) => {
         if (!files || disabled)
             return;
@@ -65,5 +124,5 @@ export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,
                             ? 'var(--colors-light-text-text-disabled)'
                             : 'var(--colors-light-text-text-accent)', style: { cursor: disabled ? 'not-allowed' : 'pointer' } }), _jsx(Typography, { text: 'or drag and drop', size: TypographySize.TextS, weight: TypographyWeight.Regular, color: disabled
                             ? 'var(--colors-light-text-text-subtle)'
-                            : 'var(--colors-light-text-text-paragraph)' }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(FilePdf, { ...iconProps }), _jsx(FileDoc, { ...iconProps }), _jsx(FileTxt, { ...iconProps })] })] })] }));
+                            : 'var(--colors-light-text-text-paragraph)' }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [fileIcons.map((Icon, index) => (_jsx(Icon, { ...iconProps }, index))), fileIcons.length === 0 && _jsx(FileCode, { ...iconProps })] })] })] }));
 };

package/dist/stories/Form/TextArea.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
-export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, style, hintBubbleProps, hintBubbleText, required, labelTrailingElement, labelContainerStyle, }) => {
+export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, allowMaxLength = false, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, style, hintBubbleProps, hintBubbleText, required, labelTrailingElement, labelContainerStyle, }) => {
     const [focused, setFocused] = useState(false);
     return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, trailingElement: labelTrailingElement, style: labelContainerStyle })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: `1px solid ${errorText
                         ? 'var(--colors-light-border-border-error)'
@@ -19,5 +19,5 @@ export const TextArea = ({ label, value, onChange, placeholder, hintText, errorT
                                 : 'var(--colors-light-text-text-title)',
                             backgroundColor: 'transparent',
                             resize: 'none',
-                        }, maxLength: maxLength, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { text: errorText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)' })) : hintText ? (_jsx(Typography, { text: hintText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' })) : (_jsx(Box, { style: { flex: 1 } })), showMaxLengthIndicator && maxLength && (_jsx(Typography, { text: `${maxLength - value.length}`, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { alignSelf: 'flex-end' } }))] })] }) }));
+                        }, maxLength: allowMaxLength ? maxLength : undefined, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { text: errorText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)' })) : hintText ? (_jsx(Typography, { text: hintText, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' })) : (_jsx(Box, { style: { flex: 1 } })), showMaxLengthIndicator && allowMaxLength && maxLength && (_jsx(Typography, { text: `${maxLength - value.length}`, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { alignSelf: 'flex-end' } }))] })] }) }));
 };

package/dist/stories/Form/TextArea.stories.d.ts

@@ -141,8 +141,21 @@ declare const meta: {
                 };
             };
         };
+        allowMaxLength: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithMaxLength: Story;

package/dist/stories/Form/TextArea.stories.js

@@ -111,6 +111,14 @@ const meta = {
                 type: { summary: 'ReactNode' },
             },
         },
+        allowMaxLength: {
+            control: 'boolean',
+            description: 'Whether to apply max length restriction',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
     },
 };
 export default meta;
@@ -118,6 +126,17 @@ export const Default = {
     args: {
         label: "Agent's name",
         value: 'Anna',
-        onChange: () => { },
+        onChange: (_value) => { },
+    },
+};
+export const WithMaxLength = {
+    args: {
+        label: 'Limited Text Area',
+        value: '',
+        onChange: (_value) => { },
+        allowMaxLength: true,
+        maxLength: 100,
+        showMaxLengthIndicator: true,
+        placeholder: 'Enter text (max 100 characters)',
     },
 };

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

@@ -19,6 +19,8 @@ export type TextAreaProps = {
     errorText?: string;
     /** Text input disabled */
     disabled?: boolean;
+    /** Whether to apply max length restriction */
+    allowMaxLength?: boolean;
     /** Text input max length */
     maxLength?: number;
     /** Text input show max length indicator */

package/package.json

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