@arquimedes.co/eureka-forms 3.0.41 → 3.0.43-test

package/dist/Shared/ErkSelect/ErkSelect.stories.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ErkSelect from './ErkSelect';
+import { MenuItem } from '@mui/material';
+import { useArgs } from 'storybook/internal/preview-api';
+const meta = {
+    component: ErkSelect,
+    tags: ['autodocs'],
+    args: {
+        readOnly: false,
+        MenuProps: {
+            disablePortal: false,
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Label',
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return (_jsxs(ErkSelect, { ...args, onChange: onValueChange, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
+};
+export const Empty = {
+    args: {},
+    render: function Component(args) {
+        return _jsx(ErkSelect, { ...args });
+    },
+};
+export const ValueAndLabel = {
+    args: {
+        label: 'Label',
+        value: 'option',
+    },
+    render: function Component({ inputRef, ...args }) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return (_jsx(ErkSelect, { ...args, onChange: onValueChange, inputRef: inputRef, children: _jsx(MenuItem, { value: 'option', style: { whiteSpace: 'normal' }, children: "Option" }) }));
+    },
+};
+export const Full = {
+    args: {
+        label: 'Label',
+        helperText: 'Helper text',
+    },
+    render: function Component(args) {
+        return (_jsxs(ErkSelect, { ...args, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
+};
+export const Error = {
+    args: {
+        label: 'Label',
+        helperText: 'Helper text',
+        error: true,
+    },
+    render: function Component(args) {
+        return (_jsxs(ErkSelect, { ...args, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
+};
+export const ErrorColor = {
+    args: {
+        label: 'Label',
+        helperText: 'Helper text',
+        error: true,
+    },
+    render: function Component(args) {
+        return (_jsxs(ErkSelect, { ...args, children: [_jsx(MenuItem, { value: 'option1', children: "Option 1" }), _jsx(MenuItem, { value: 'option2', children: "Option 2" }), _jsx(MenuItem, { value: 'option3', children: "Option 3" })] }));
+    },
+};
+export const DifferentColors = {
+    args: {
+        label: 'Label',
+        value: 'option',
+        helperText: 'Helper text',
+    },
+    render: function Component({ inputRef, ...args }) {
+        return (_jsx(ErkSelect, { ...args, inputRef: inputRef, children: _jsx(MenuItem, { value: 'option', style: { whiteSpace: 'normal' }, children: "Option" }) }));
+    },
+};

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { SelectProps as MuiSelectProps } from '@mui/material';
+export interface ErkSmartSelectProps extends Omit<MuiSelectProps, 'ref' | 'onInvalid'> {
+    /** Currently selected value */
+    value?: any;
+    /** The array of options to display */
+    options?: any[];
+    /** If the input is loading */
+    loading?: boolean;
+    /** function called when value changes */
+    onChange?: (value: any) => void;
+    /** Strig to place in the label */
+    label: string;
+    /** The helper Text to display */
+    helperText?: string;
+    /** The icon to display */
+    IconComponent?: React.ElementType;
+    /** If the options are searchable */
+    searchable?: boolean;
+    /** Function to determine the currently selected option */
+    getOptionSelected?: (option: any, value: any) => boolean;
+    /** Function to determine the current value in string format */
+    getValueString?: (value: any) => string;
+    /** If input is readOnly */
+    readOnly?: boolean;
+    onFocus?: React.FocusEventHandler;
+}
+export default function ErkSmartSelect({ options, value, onChange, label, getValueString, loading, getOptionSelected, IconComponent, size, disabled, readOnly, searchable, inputRef, ...others }: ErkSmartSelectProps): JSX.Element;

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createFilterOptions, CircularProgress, Autocomplete as MuiAutocomplete, styled, } from '@mui/material';
+import ErkSelect from '../ErkSelect/ErkSelect';
+import { StyledTextField } from '../ErkTextField/ErkTextField';
+import ErkMenuItem from '../ErkMenuItem';
+const filter = createFilterOptions();
+const StyledAutoComplete = styled(MuiAutocomplete)(({ theme, readOnly, ...props }) => ({
+    '& .Erk-MuiInputBase-root': {
+        cursor: props.disabled || readOnly ? 'default' : 'text',
+    },
+    '& .Erk-MuiInputBase-input': {
+        paddingRight: 24,
+    },
+    '& .Erk-MuiAutocomplete-endAdornment': {
+        marginLeft: 0,
+        marginRight: 9,
+        cursor: 'inherit',
+        color: theme.palette.text.primary + 'a0',
+        '& .Erk-MuiButtonBase-root': {
+            padding: 0,
+            color: readOnly ? theme.palette.text.primary + 'a0' : undefined,
+        },
+    },
+    '& .Erk-MuiAutocomplete-popupIndicatorOpen': {
+        transform: props.popupIcon ? 'none' : undefined,
+    },
+}));
+export default function ErkSmartSelect({ options, value = '', onChange, label, getValueString = (value) => value?.value, loading = false, getOptionSelected, IconComponent, size = 'small', disabled = false, readOnly = false, searchable = false, inputRef, ...others }) {
+    if (searchable) {
+        return (_jsx(StyledAutoComplete, { fullWidth: true, openOnFocus: true, size: size, loading: loading, disabled: disabled || readOnly, readOnly: readOnly, options: options ?? [], loadingText: "Cargando...", onFocus: others.onFocus, "data-testid": "smart-select", noOptionsText: "No hay opciones", value: !loading && value ? value : null, onChange: (_event, newValue) => onChange?.(newValue), popupIcon: loading ? _jsx(CircularProgress, { size: 22 }) : IconComponent ? _jsx(IconComponent, {}) : undefined, filterOptions: (options, params) => {
+                if (value?.label === params?.inputValue) {
+                    return options;
+                }
+                else {
+                    return filter(options, params);
+                }
+            }, renderOption: ({ key, ...props }, option) => (_jsx(ErkMenuItem, { ...props, children: option.label }, key)), getOptionKey: (option) => getValueString(option), getOptionLabel: (option) => {
+                // Value selected with enter, right from the input
+                if (typeof option === 'string') {
+                    return option;
+                }
+                else if (option?.inputValue) {
+                    return option.inputValue ?? '';
+                }
+                else {
+                    // Regular option
+                    return option?.label ?? '';
+                }
+            }, slotProps: { popper: { sx: { zIndex: 1305 } } }, renderInput: (params) => (_jsx(StyledTextField, { ...params, size: size, label: label, labelMargin: 0, name: others.name, readOnly: readOnly, disabled: disabled, inputRef: inputRef, error: others.error, onBlur: others.onBlur, required: others.required, helperText: others.helperText })) }));
+    }
+    else {
+        return (_jsxs(ErkSelect, { ...others, labelMargin: 0, disabled: disabled, readOnly: readOnly, inputRef: inputRef, onChange: (value) => onChange?.(options?.find((option) => getValueString(option) === value)), value: loading ? '' : getValueString(value), label: label, IconComponent: loading ? () => _jsx(CircularProgress, { size: 22 }) : IconComponent, children: [options?.map((option) => (_jsx(ErkMenuItem, { value: getValueString(option), "data-testid": 'smart-select-' + getValueString(option), children: option.label }, getValueString(option)))), options === undefined && value && !loading && (_jsx(ErkMenuItem, { value: getValueString(value), children: value.label ?? '' }, getValueString(value)))] }));
+    }
+}

package/dist/Shared/{RoundedSmartSelect/RoundedSmartSelect.stories.d.ts → ErkSmartSelect/ErkSmartSelect.stories.d.ts}

@@ -1,21 +1,11 @@
-import type { StoryObj } from '@storybook/react';
-import RoundedSmartSelect from './RoundedSmartSelect';
+import type { StoryObj } from '@storybook/react-vite';
+import ErkSmartSelect from './ErkSmartSelect';
 declare const meta: {
-    component: typeof RoundedSmartSelect;
+    component: typeof ErkSmartSelect;
     tags: string[];
     args: {
         searchable: false;
-        focusColor: string;
-        helperTextColor: string;
-        outlineColor: string;
-        backgroundColor: string;
-        color: string;
         readOnly: false;
-        borderRadius: number;
-        fontSize: string;
-        errorColor: string;
-        fontWeight: string;
-        cantEdit: false;
     };
 };
 export default meta;

package/dist/Shared/ErkSmartSelect/ErkSmartSelect.stories.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ErkSmartSelect from './ErkSmartSelect';
+import { useArgs } from 'storybook/internal/preview-api';
+const meta = {
+    component: ErkSmartSelect,
+    tags: ['autodocs'],
+    args: {
+        searchable: false,
+        readOnly: false,
+    },
+};
+export default meta;
+export const Empty = {
+    args: {
+        label: 'Label',
+    },
+};
+export const Default = {
+    args: {
+        label: 'Label',
+        options: [
+            {
+                label: 'Option',
+                value: 'option',
+            },
+        ],
+    },
+    play: async ({ canvas, userEvent }) => {
+        const selector = canvas.getByTestId('smart-select');
+        await userEvent.click(selector);
+        const option = canvas.getByTestId('smart-select-option');
+        await userEvent.click(option);
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return _jsx(ErkSmartSelect, { ...args, onChange: onValueChange });
+    },
+};
+export const Focused = {
+    args: {
+        label: 'Label',
+    },
+    play: async ({ canvas, userEvent }) => {
+        const selector = canvas.getByTestId('smart-select');
+        await userEvent.click(selector);
+        const option = canvas.getByTestId('smart-select-empty');
+        await userEvent.click(option);
+    },
+};
+export const FocusedSearchable = {
+    args: {
+        label: 'Label',
+        searchable: true,
+    },
+    play: async ({ canvas, userEvent }) => {
+        const selector = canvas.getByTestId('smart-select');
+        await userEvent.click(selector);
+    },
+};
+export const SearchableWithOptions = {
+    args: {
+        label: 'Label',
+        searchable: true,
+        options: [
+            {
+                label: 'Option',
+                value: 'option',
+            },
+        ],
+    },
+    play: async ({ canvas, userEvent }) => {
+        const selector = canvas.getByTestId('smart-select');
+        await userEvent.click(selector);
+    },
+};
+export const SearchableWithSearchAndOptions = {
+    args: {
+        label: 'Label',
+        searchable: true,
+        value: 'Opt',
+        options: [
+            {
+                label: 'Option',
+                value: 'option',
+            },
+        ],
+    },
+    play: async ({ canvas, userEvent }) => {
+        const selector = canvas.getByTestId('smart-select');
+        await userEvent.click(selector);
+    },
+};
+export const Loading = {
+    args: {
+        label: 'Label',
+        loading: true,
+    },
+};
+export const LoadingOpened = {
+    args: {
+        label: 'Label',
+        loading: true,
+    },
+    play: async ({ canvas, userEvent }) => {
+        const selector = canvas.getByTestId('smart-select');
+        await userEvent.click(selector);
+    },
+};
+export const SearchableLoadingOpened = {
+    args: {
+        label: 'Label',
+        searchable: true,
+        loading: true,
+    },
+    play: async ({ canvas, userEvent }) => {
+        const selector = canvas.getByTestId('smart-select');
+        await userEvent.click(selector);
+    },
+};
+export const WithValueandLabel = {
+    args: {
+        label: 'Label',
+        value: 'Textinput Value',
+    },
+};
+export const Full = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+    },
+};
+export const Error = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+export const ErrorColor = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        error: true,
+    },
+};
+export const DifferentColors = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+    },
+};

package/dist/Shared/ErkTextField/ErkTextField.d.ts

@@ -0,0 +1,34 @@
+import { OutlinedTextFieldProps as MuiTextFieldProps } from '@mui/material';
+import React, { CSSProperties } from 'react';
+interface StyleProps extends Pick<CSSProperties, 'textAlign' | 'fontSize' | 'padding' | 'fontWeight' | 'backgroundColor' | 'borderRadius'> {
+    readOnly?: boolean;
+}
+declare module '@mui/material/TextField' {
+    interface TextFieldPropsSizeOverrides {
+        large: true;
+    }
+}
+export declare const StyledTextField: import("@emotion/styled").StyledComponent<{
+    variant?: import("@mui/material").TextFieldVariants | undefined;
+} & Omit<import("@mui/material").FilledTextFieldProps | MuiTextFieldProps | import("@mui/material").StandardTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & Omit<ErkTextFieldProps, "onChange"> & StyleProps, {}, {}>;
+export type ErkTextFieldSlotProps = Omit<ErkTextFieldProps, 'value' | 'onChange' | 'fullWidth'>;
+export interface ErkTextFieldProps extends Omit<MuiTextFieldProps, 'variant' | 'onChange' | 'ref'>, StyleProps {
+    /** The value of the textfield */
+    value?: string | number;
+    onChange?: (value: string) => void;
+    /** The icon to display */
+    IconComponent?: React.ElementType | React.ReactNode;
+    /** The max length of the string */
+    maxLength?: number;
+    /** Show red border on error */
+    errorBorder?: boolean;
+    /** labelMargin */
+    labelMargin?: number;
+}
+/**
+ * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
+ */
+declare class ErkTextField extends React.Component<ErkTextFieldProps> {
+    render(): JSX.Element;
+}
+export default ErkTextField;

package/dist/Shared/ErkTextField/ErkTextField.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled, TextField as MuiTextField, useTheme, } from '@mui/material';
+import React, { useCallback, useMemo } from 'react';
+export const StyledTextField = styled(MuiTextField, {
+    shouldForwardProp: (propName) => !['textAlign', 'errorBorder', 'labelMargin', 'minWidth', 'borderRadius'].includes(propName),
+})(({ theme, label, size, error, textAlign, errorBorder, labelMargin = 5, borderRadius = 10, fontSize = size === 'large' ? '1.5rem' : '1rem', padding = '6px 12px', fontWeight = 400, backgroundColor = theme.palette.stepBackgroundColor.default, ...props }) => ({
+    borderRadius,
+    opacity: props.disabled ? 0.5 : 1,
+    marginTop: label ? labelMargin : undefined,
+    minHeight: size === 'small' ? 31 : size === 'medium' ? 40 : undefined,
+    '& .Erk-MuiInputBase-root': {
+        borderRadius,
+        backgroundColor,
+    },
+    '& input, textarea': {
+        fontSize,
+        textAlign,
+        padding,
+        fontWeight,
+        borderRadius,
+        backgroundColor,
+        color: theme.palette.text.primary,
+        cursor: props.disabled || props.readOnly ? 'default' : 'text',
+        lineHeight: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
+        height: size === 'small' ? '1.188em' : size === 'medium' ? '1.75em' : undefined,
+        '&.Mui-readOnly': {
+            color: theme.palette.text.primary,
+            WebkitTextFillColor: theme.palette.text.primary,
+        },
+    },
+    '& .Erk-MuiFormLabel-root:not(.Erk-MuiInputLabel-shrink)': {
+        fontSize,
+        transform: `translate(12px, ${size === 'small' ? 5 : size === 'medium' ? 9 : 7}px) scale(1)`,
+    },
+    '& .Erk-MuiInputLabel-shrink': {
+        color: error && errorBorder ? theme.palette.error.main : undefined,
+    },
+    '& label': {
+        color: theme.palette.text.primary + '8a',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+    '& .Erk-MuiOutlinedInput-root': {
+        '&.Mui-focused fieldset': {
+            borderColor: error && errorBorder ? theme.palette.error.main : theme.palette.primary.main,
+            borderWidth: 2,
+        },
+        '& .Erk-MuiOutlinedInput-notchedOutline': {
+            borderRadius,
+            borderColor: error && errorBorder ? theme.palette.error.main : theme.palette.outline.main,
+            '& legend': {
+                fontSize: '0.75rem',
+            },
+        },
+    },
+    '& .Erk-MuiOutlinedInput-root:hover:not(.Mui-readOnly) .Erk-MuiOutlinedInput-notchedOutline': {
+        borderColor: props.disabled || props.readOnly
+            ? theme.palette.outline.main
+            : error && errorBorder
+                ? theme.palette.error.main
+                : theme.palette.primary.main,
+    },
+    '& label.Mui-focused': {
+        color: theme.palette.primary.main,
+    },
+    '& .Mui-error': {
+        color: theme.palette.error.main,
+        '& fieldset': {
+            borderWidth: error && errorBorder ? 2 : undefined,
+        },
+    },
+    '& .Erk-MuiInputBase-adornedEnd': {
+        paddingRight: '7px',
+    },
+    '& .Erk-MuiFormHelperText-root': {
+        color: theme.palette.helperText.primary,
+        position: 'relative',
+        marginRight: props.maxLength ? 40 : 14,
+        overflow: 'hidden',
+        minHeight: 20,
+        textOverflow: 'ellipsis',
+    },
+    '& .Erk-MuiFormHelperText-root.Mui-error': {
+        color: theme.palette.error.main,
+    },
+    '& .Erk-MuiInputBase-multiline': {
+        padding: 0,
+    },
+    '& .Erk-MuiInputAdornment-root': {
+        marginLeft: 0,
+        marginRight: size === 'medium' ? 2 : 0,
+        fill: theme.palette.text.primary + 'a0',
+        color: theme.palette.text.primary + 'a0',
+    },
+}));
+function CustomTextfield({ onChange, value = '', IconComponent, size = 'small', fullWidth = true, ...others }) {
+    const { readOnly, disabled, maxLength } = others;
+    const { palette } = useTheme();
+    const handleChange = useCallback((event) => {
+        onChange?.(event.target.value);
+    }, [onChange]);
+    const inputProps = useMemo(() => {
+        const mergedInputProps = {
+            ...others.inputProps,
+            spellCheck: true,
+            endAdornment: IconComponent,
+            readOnly: !!readOnly,
+            disabled: !!readOnly || !!disabled,
+        };
+        if (maxLength) {
+            mergedInputProps.inputProps = { maxLength };
+        }
+        return mergedInputProps;
+    }, [others.inputProps, IconComponent, readOnly, disabled, maxLength]);
+    const length = maxLength ? value.toString()?.length : null;
+    const helperText = others.helperText ?? (others.error === false && !others.readOnly ? ' ' : undefined);
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            width: fullWidth ? '100%' : 'fit-content',
+            maxWidth: '100%',
+        }, children: [_jsx(StyledTextField, { ...others, size: size, value: value, variant: "outlined", fullWidth: fullWidth, helperText: helperText, onChange: handleChange, slotProps: { input: inputProps } }), length !== null && (_jsxs("div", { style: helperText
+                    ? {
+                        position: 'absolute',
+                        bottom: '3px',
+                        right: '8px',
+                        minHeight: '20px',
+                        fontSize: '12px',
+                        color: palette.helperText.primary,
+                    }
+                    : {
+                        fontSize: '12px',
+                        color: palette.helperText.primary,
+                        textAlign: 'right',
+                        minHeight: '20px',
+                        paddingRight: '8px',
+                        paddingTop: '2px',
+                        paddingBottom: '2px',
+                    }, children: [length, "/", maxLength] }))] }));
+}
+/**
+ * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
+ */
+class ErkTextField extends React.Component {
+    render() {
+        return _jsx(CustomTextfield, { ...this.props });
+    }
+}
+export default ErkTextField;

package/dist/Shared/{RoundedTextField/RoundedTextField.stories.d.ts → ErkTextField/ErkTextField.stories.d.ts}

@@ -1,22 +1,11 @@
-import type { StoryObj } from '@storybook/react';
-import RoundedTextField from './RoundedTextField';
+import type { StoryObj } from '@storybook/react-vite';
+import ErkTextField from './ErkTextField';
 declare const meta: {
-    component: typeof RoundedTextField;
+    component: typeof ErkTextField;
     tags: string[];
     args: {
-        focusColor: string;
-        helperTextColor: string;
-        outlineColor: string;
-        backgroundColor: string;
-        textColor: string;
-        readOnly: false;
-        borderRadius: number;
-        padding: string;
-        fontSize: string;
-        errorColor: string;
-        fontWeight: string;
+        disabled: false;
         multiline: false;
-        cantEdit: false;
     };
 };
 export default meta;
@@ -33,5 +22,3 @@ export declare const WithValueandLabel: Story;
 export declare const WithMaxLength: Story;
 export declare const Full: Story;
 export declare const Error: Story;
-export declare const ErrorColor: Story;
-export declare const DifferentColors: Story;

package/dist/Shared/ErkTextField/ErkTextField.stories.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ErkTextField from './ErkTextField';
+import { useArgs } from 'storybook/internal/preview-api';
+const meta = {
+    component: ErkTextField,
+    tags: ['autodocs'],
+    args: {
+        disabled: false,
+        multiline: false,
+    },
+};
+export default meta;
+export const Empty = {
+    args: {},
+};
+export const EmptyLabel = {
+    args: {
+        label: 'Label',
+    },
+};
+export const Default = {
+    args: {
+        label: 'Label',
+    },
+    play: async ({ canvas, userEvent }) => {
+        const emailInput = canvas.getByRole('textbox');
+        await userEvent.click(emailInput);
+        await userEvent.type(emailInput, 'example-email@email.com', { initialSelectionStart: 100 });
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return _jsx(ErkTextField, { ...args, ref: undefined, onChange: onValueChange });
+    },
+};
+export const Focused = {
+    args: {
+        label: 'Label',
+    },
+    play: async ({ canvas, userEvent }) => {
+        const emailInput = canvas.getByRole('textbox');
+        await userEvent.click(emailInput);
+    },
+};
+export const FocusedNoLabel = {
+    args: {},
+    play: async ({ canvas, userEvent }) => {
+        const emailInput = canvas.getByRole('textbox');
+        await userEvent.click(emailInput);
+    },
+};
+export const WithValue = {
+    args: {
+        value: 'Textinput Value',
+    },
+};
+export const Multiline = {
+    args: {
+        value: 'TextArea Value',
+        multiline: true,
+        minRows: 4,
+    },
+};
+export const WithHelperText = {
+    args: {
+        helperText: 'Helper text',
+    },
+};
+export const WithValueandLabel = {
+    args: {
+        label: 'Label',
+        value: 'Textinput Value',
+    },
+};
+export const WithMaxLength = {
+    args: {
+        value: 'Value',
+        maxLength: 10,
+    },
+};
+export const Full = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        maxLength: 10,
+    },
+};
+export const Error = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        error: true,
+    },
+};