@beydesign/storybook 0.0.71 → 0.0.72

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.71",
+  "version": "0.0.72",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",