@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/Text.stories.js

@@ -0,0 +1,217 @@
+import { transformStorySource } from "../utilities/transformers.js";
+import { Text } from "../dist/esm/index.js";
+export default {
+    title: 'Litho/Text',
+    component: Text,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: "A Text component that renders customizable text with different variants, colors, and font weights. The text can be configured with different sizes, weights, and alignment options."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        children: {
+            control: 'text',
+            description: 'The text content to display'
+        },
+        variant: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'heading4xl',
+                'heading2xl',
+                'headingXl',
+                'headingLg',
+                'headingMd',
+                'headingSm',
+                'headingXs',
+                'bodyXl',
+                'bodyLg',
+                'bodyMd',
+                'bodySm',
+                'bodyXs'
+            ],
+            description: 'Text size and style variant'
+        },
+        color: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'default',
+                'subdued',
+                'normal',
+                'critical',
+                'success',
+                'warning',
+                'alternate',
+                'link',
+                'low',
+                'lower',
+                'lowest',
+                'disabled',
+                'success-fg',
+                'critical-fg',
+                'warning-fg',
+                'attention-fg',
+                'info-fg',
+                'highlight-fg',
+                'insight-fg',
+                'neutral-fg',
+                'success-alt-fg',
+                'critical-alt-fg',
+                'warning-alt-fg',
+                'attention-alt-fg',
+                'info-alt-fg',
+                'highlight-alt-fg',
+                'insight-alt-fg',
+                'neutral-alt-fg',
+                'btn-secondary-fg',
+                'tab-active-fg',
+                'text-inverse'
+            ],
+            description: 'Text color variant'
+        },
+        fontWeight: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'normal',
+                'regular',
+                'medium',
+                'semibold',
+                'bold'
+            ],
+            description: 'Font weight'
+        },
+        alignment: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'left',
+                'center',
+                'right',
+                'start',
+                'end'
+            ],
+            description: 'Text alignment'
+        },
+        as: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'p',
+                'span',
+                'div',
+                'h1',
+                'h2',
+                'h3',
+                'h4',
+                'h5',
+                'h6'
+            ],
+            description: 'HTML element to render as'
+        },
+        truncate: {
+            control: 'boolean',
+            description: 'Whether to truncate text with ellipsis'
+        },
+        visuallyHidden: {
+            control: 'boolean',
+            description: 'Visually hides text for accessibility'
+        },
+        clampLines: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                1,
+                2,
+                3,
+                4,
+                5,
+                false
+            ],
+            description: 'Number of lines to clamp (false to disable)'
+        },
+        strike: {
+            control: 'boolean',
+            description: 'Whether to strike through the text'
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class names'
+        }
+    }
+};
+export var Default = {
+    args: {
+        children: 'Default text'
+    }
+};
+export var Heading = {
+    args: {
+        variant: 'headingLg',
+        children: 'Large Heading'
+    }
+};
+export var Display = {
+    args: {
+        variant: 'displayMedium',
+        children: 'Display Text'
+    }
+};
+export var Body = {
+    args: {
+        variant: 'bodyMd',
+        children: 'Body text for regular content'
+    }
+};
+export var Caption = {
+    args: {
+        variant: 'captionMd',
+        children: 'Caption text'
+    }
+};
+export var Subdued = {
+    args: {
+        color: 'subdued',
+        children: 'Subdued text color'
+    }
+};
+export var Critical = {
+    args: {
+        color: 'critical',
+        children: 'Critical text color'
+    }
+};
+export var Success = {
+    args: {
+        color: 'success',
+        children: 'Success text color'
+    }
+};
+export var Bold = {
+    args: {
+        fontWeight: 'bold',
+        children: 'Bold text'
+    }
+};
+export var Centered = {
+    args: {
+        alignment: 'center',
+        children: 'Centered text'
+    }
+};

package/dist/esm/stories/TextField.stories.js

@@ -0,0 +1,332 @@
+import { transformStorySource } from "../utilities/transformers.js";
+import { TextField } from "../dist/esm/index.js";
+export default {
+    title: 'Litho/TextField',
+    component: TextField,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A TextField component that renders a customizable text input field with a label, placeholder, and optional help text. The field can be configured with different types, values, and states."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Field label'
+        },
+        labelVariant: {
+            control: 'select',
+            options: [
+                'bodyXs',
+                'bodySm',
+                'bodyMd',
+                'bodyLg',
+                'headingXs',
+                'headingSm',
+                'headingMd',
+                'headingLg'
+            ],
+            description: 'Visual variant for the label text'
+        },
+        labelAction: {
+            control: 'object',
+            description: 'Action button to display next to the label'
+        },
+        labelHidden: {
+            control: 'boolean',
+            description: 'Whether to visually hide the label'
+        },
+        type: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'text',
+                'email',
+                'password',
+                'search',
+                'tel',
+                'url',
+                'number'
+            ],
+            description: 'Input type'
+        },
+        value: {
+            control: 'text',
+            description: 'Field value'
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text'
+        },
+        prefix: {
+            control: 'text',
+            description: 'Text content to display before the input'
+        },
+        suffix: {
+            control: 'text',
+            description: 'Text content to display after the input'
+        },
+        helpText: {
+            control: 'text',
+            description: 'Help text below the field'
+        },
+        error: {
+            control: 'text',
+            description: 'Error message'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disabled state'
+        },
+        readOnly: {
+            control: 'boolean',
+            description: 'Read-only state'
+        },
+        requiredIndicator: {
+            control: 'boolean',
+            description: 'Whether to show a required field indicator'
+        },
+        clearButton: {
+            control: 'boolean',
+            description: 'Whether to show a clear button'
+        },
+        autoFocus: {
+            control: 'boolean',
+            description: 'Whether to focus the input on mount'
+        },
+        focused: {
+            control: 'boolean',
+            description: 'Whether the input is focused'
+        },
+        multiline: {
+            control: 'number',
+            description: 'Number of lines for multiline input (1 for single line)'
+        },
+        autoGrow: {
+            control: 'boolean',
+            description: 'Whether textarea should automatically grow with content'
+        },
+        maxHeight: {
+            control: 'number',
+            description: 'Maximum height in pixels before scrolling starts'
+        },
+        subdued: {
+            control: 'boolean',
+            description: 'Whether to use subdued styling'
+        },
+        transparent: {
+            control: 'boolean',
+            description: 'Whether to use transparent background'
+        },
+        align: {
+            control: 'select',
+            options: [
+                'left',
+                'center',
+                'right'
+            ],
+            description: 'Text alignment within the input'
+        },
+        selectTextOnFocus: {
+            control: 'boolean',
+            description: 'Whether to select all text when focused'
+        },
+        name: {
+            control: 'text',
+            description: 'Name attribute for the input'
+        },
+        id: {
+            control: 'text',
+            description: 'ID for the input element'
+        },
+        role: {
+            control: 'text',
+            description: 'ARIA role'
+        },
+        step: {
+            control: 'number',
+            description: 'Step value for number inputs'
+        },
+        largeStep: {
+            control: 'number',
+            description: 'Large step value when using shift + arrows'
+        },
+        autoComplete: {
+            control: 'text',
+            description: 'Autocomplete attribute'
+        },
+        max: {
+            control: 'number',
+            description: 'Maximum value for number inputs'
+        },
+        maxLength: {
+            control: 'number',
+            description: 'Maximum length for text input'
+        },
+        min: {
+            control: 'number',
+            description: 'Minimum value for number inputs'
+        },
+        minLength: {
+            control: 'number',
+            description: 'Minimum length for text input'
+        },
+        pattern: {
+            control: 'text',
+            description: 'Input validation pattern'
+        },
+        spellCheck: {
+            control: 'boolean',
+            description: 'Whether to enable spell checking'
+        },
+        showCharacterCount: {
+            control: 'boolean',
+            description: 'Whether to show character count'
+        },
+        showNumberSteppers: {
+            control: 'boolean',
+            description: 'Whether to show number steppers for number inputs'
+        },
+        connectedRight: {
+            control: 'object',
+            description: 'React element to connect to the right of the input'
+        },
+        connectedLeft: {
+            control: 'object',
+            description: 'React element to connect to the left of the input'
+        },
+        icon: {
+            control: 'object',
+            description: 'Icon component to display within the input'
+        },
+        tooltip: {
+            control: 'object',
+            description: 'Tooltip content for the label'
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes'
+        },
+        ariaOwns: {
+            control: 'text',
+            description: 'ARIA owns attribute'
+        },
+        ariaControls: {
+            control: 'text',
+            description: 'ARIA controls attribute'
+        },
+        ariaExpanded: {
+            control: 'boolean',
+            description: 'ARIA expanded attribute'
+        },
+        ariaActiveDescendant: {
+            control: 'text',
+            description: 'ARIA active descendant attribute'
+        },
+        ariaAutocomplete: {
+            control: 'text',
+            description: 'ARIA autocomplete attribute'
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Handler for value changes'
+        },
+        onFocus: {
+            action: 'focused',
+            description: 'Handler for input focus'
+        },
+        onBlur: {
+            action: 'blurred',
+            description: 'Handler for input blur'
+        },
+        onKeyDown: {
+            action: 'keyDown',
+            description: 'Handler for key down'
+        },
+        onClearButtonClick: {
+            action: 'clearClicked',
+            description: 'Handler for clear button click'
+        }
+    }
+};
+export var Default = {
+    args: {
+        label: 'Name',
+        placeholder: 'Enter your name'
+    }
+};
+export var WithValue = {
+    args: {
+        label: 'Email',
+        type: 'email',
+        value: 'user@example.com',
+        placeholder: 'Enter your email'
+    }
+};
+export var WithHelpText = {
+    args: {
+        label: 'Username',
+        placeholder: 'Enter username',
+        helpText: 'Must be at least 3 characters long'
+    }
+};
+export var WithError = {
+    args: {
+        label: 'Password',
+        type: 'password',
+        placeholder: 'Enter password',
+        error: 'Password must be at least 8 characters'
+    }
+};
+export var Required = {
+    args: {
+        label: 'Full Name',
+        placeholder: 'Enter your full name',
+        required: true
+    }
+};
+export var Disabled = {
+    args: {
+        label: 'Disabled Field',
+        value: 'This field is disabled',
+        disabled: true
+    }
+};
+export var ReadOnly = {
+    args: {
+        label: 'Read Only Field',
+        value: 'This field is read-only',
+        readOnly: true
+    }
+};
+export var Multiline = {
+    args: {
+        label: 'Description',
+        placeholder: 'Enter a description...',
+        multiline: true,
+        helpText: 'Provide a detailed description'
+    }
+};
+export var Number = {
+    args: {
+        label: 'Age',
+        type: 'number',
+        placeholder: 'Enter your age'
+    }
+};
+export var Search = {
+    args: {
+        label: 'Search',
+        type: 'search',
+        placeholder: 'Search products...'
+    }
+};