@zesty-io/material 0.0.2 → 0.1.0

package/.storybook/main.js

@@ -6,7 +6,20 @@ module.exports = {
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
   ],
-  "framework": "@storybook/react"
+  "framework": "@storybook/react",
+  typescript: {
+    check: true,
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      shouldRemoveUndefinedFromOptional: true,
+      propFilter: (prop) => {
+        return prop.parent
+          ? /@mui/.test(prop.parent.fileName) ||
+              !/node_modules/.test(prop.parent.fileName)
+          : true;
+      },
+    },
+  },
 }

package/.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Mulish" />

package/.storybook/preview.js

@@ -1,9 +1,15 @@
+import React from 'react';
+import { ThemeProvider } from 'emotion-theming';
+import { theme } from '../src/index.ts';
+
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}
+  actions: { argTypesRegex: '^on[A-Z].*' },
+};
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={theme}>
+      <Story />
+    </ThemeProvider>
+  ),
+];

package/es/ConfirmModal/ConfirmModal.stories.d.ts

@@ -0,0 +1,6 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { ConfirmDialogProps } from '.';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<ConfirmDialogProps>;
+export declare const CustomChildren: Story<ConfirmDialogProps>;

package/es/ConfirmModal/ConfirmModal.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '@mui/material';
+import ConfirmDialog from '.';
+export default {
+    title: 'ConfirmDialog',
+    component: ConfirmDialog,
+    argType: {},
+};
+const Template = (args) => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", onClick: () => setOpen(true), children: "Click me to open" }), _jsx(ConfirmDialog, { ...args, open: open, callback: (confirmed) => setOpen(false) })] }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    title: 'Confirm modal title',
+    content: 'Confirm modal content',
+};
+export const CustomChildren = Template.bind({});
+CustomChildren.args = {
+    title: 'Confirm modal title',
+    content: 'Confirm modal content',
+    children: _jsxs(_Fragment, { children: [_jsx(Button, { color: "error", variant: "contained", children: "Custom 1" }), _jsx(Button, { color: "success", variant: "contained", children: "Custom 2" })] })
+};

package/es/ConfirmModal/index.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { DialogProps } from '@mui/material/Dialog';
+export interface ConfirmDialogProps extends Omit<DialogProps, 'title'> {
+    /**
+     * Title of confirm dialog
+     */
+    title: string | ReactNode;
+    /**
+     * Content of confirm dialog
+     */
+    content: string | ReactNode;
+    /**
+     * Callback of confirm dialog
+     */
+    callback: (confirmed: boolean) => void;
+}
+declare const ConfirmDialog: ({ title, content, onClose, children, callback, ...props }: ConfirmDialogProps) => JSX.Element;
+export default ConfirmDialog;

package/es/ConfirmModal/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import { Button } from '@mui/material';
+const ConfirmDialog = ({ title, content, onClose, children, callback, ...props }) => {
+    return (_jsxs(Dialog, { ...props, children: [_jsx(DialogTitle, { children: title }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: content }) }), children ? _jsx(DialogActions, { children: children }) : (_jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", onClick: () => callback(false), children: "No" }), _jsx(Button, { variant: "contained", onClick: () => callback(true), autoFocus: true, children: "Yes" })] }))] }));
+};
+export default ConfirmDialog;

package/es/CopyButton/CopyButton.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { CopyButtonProps } from '.';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<CopyButtonProps>;

package/es/CopyButton/CopyButton.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CopyButton from '.';
+export default {
+    title: 'CopyButton',
+    component: CopyButton,
+    argType: {},
+};
+const Template = (args) => {
+    return (_jsx(CopyButton, { ...args }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    value: 'Copy Me!'
+};

package/es/CopyButton/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ButtonProps } from '@mui/material/Button';
+export interface CopyButtonProps extends ButtonProps {
+    /**
+    * Value to be copied to clipboard
+    */
+    value: string;
+}
+declare const CopyButton: ({ value, sx, ...props }: CopyButtonProps) => JSX.Element;
+export default CopyButton;

package/es/CopyButton/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState, useEffect } from 'react';
+import Button from '@mui/material/Button';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
+const CopyButton = ({ value, sx, ...props }) => {
+    const [copied, setCopied] = useState(false);
+    const copyValue = useCallback(() => {
+        navigator?.clipboard.writeText(value);
+        setCopied(true);
+    }, [value]);
+    useEffect(() => {
+        const iconTimer = setTimeout(() => {
+            setCopied(false);
+        }, 500);
+        return () => {
+            clearTimeout(iconTimer);
+        };
+    }, [copied]);
+    return (_jsxs(Button, { variant: 'outlined', onClick: copyValue, size: "small", title: props.children ? `Copy ${props.children}` : `Copy ${value}`, sx: {
+            textTransform: 'unset',
+            // Spread sx prop at the end to allow sx prop overrides
+            ...sx,
+        }, ...props, children: [copied ? (_jsx(CheckIcon, { color: 'success', fontSize: 'small' })) : (_jsx(ContentCopyIcon, { fontSize: 'small' })), props.children ? props.children : value] }));
+};
+export default CopyButton;

package/es/FieldTypeColor/FieldTypeColor.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { FieldTypeColorProps } from './';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<FieldTypeColorProps>;

package/es/FieldTypeColor/FieldTypeColor.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import FieldTypeColor from './';
+export default {
+    title: 'FieldTypeColor',
+    component: FieldTypeColor,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = useState('');
+    const handleOnChange = (e) => {
+        setValue(e.target.value);
+    };
+    return (_jsx(FieldTypeColor, { ...args, value: value, onChange: handleOnChange }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    placeholder: 'Placeholder Text...',
+    label: 'Color label',
+    helperText: 'Color helper text',
+};

package/es/FieldTypeColor/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { OutlinedTextFieldProps } from '@mui/material/TextField';
+export interface FieldTypeColorProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+}
+declare const FieldTypeColor: ({ InputProps, InputLabelProps, ...props }: FieldTypeColorProps) => JSX.Element;
+export default FieldTypeColor;

package/es/FieldTypeColor/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MuiTextField from '@mui/material/TextField';
+import { Button, InputAdornment } from '@mui/material';
+import BrushIcon from '@mui/icons-material/Brush';
+const FieldTypeColor = ({ InputProps, InputLabelProps, ...props }) => {
+    return (_jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'color', InputProps: {
+            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
+                        // References color input via event in order to open color picker
+                        const input = e.currentTarget?.parentElement?.parentElement?.firstElementChild;
+                        input?.click();
+                    }, children: _jsx(BrushIcon, { fontSize: 'small' }) }) })),
+            // Spread props at the end to allow Input prop overrides
+            ...InputProps,
+        }, InputLabelProps: {
+            shrink: true,
+            // Spread props at the end to allow InputLabel prop overrides
+            ...InputLabelProps,
+        }, ...props }));
+};
+export default FieldTypeColor;

package/es/FieldTypeDate/FieldTypeDate.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { FieldTypeDateProps } from '.';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<FieldTypeDateProps>;

package/es/FieldTypeDate/FieldTypeDate.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import FieldTypeDate from '.';
+export default {
+    title: 'FieldTypeDate',
+    component: FieldTypeDate,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = useState(null);
+    return (_jsx(FieldTypeDate, { ...args, value: value, onChange: (value) => setValue(value) }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Date label',
+    textFieldProps: {
+        helperText: 'Date helper text',
+        error: false,
+    }
+};

package/es/FieldTypeDate/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
+import { TextFieldProps } from '@mui/material';
+export interface FieldTypeDateProps extends Omit<DatePickerProps<Date, Date>, 'renderInput'> {
+    /**
+     * Props passed to TextField component
+     */
+    textFieldProps?: TextFieldProps;
+}
+declare const FieldTypeDate: ({ textFieldProps, ...props }: FieldTypeDateProps) => JSX.Element;
+export default FieldTypeDate;

package/es/FieldTypeDate/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { TextField } from '@mui/material';
+;
+const FieldTypeDate = ({ textFieldProps, ...props }) => {
+    return (_jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DatePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { InputLabelProps: {
+                    shrink: true,
+                    // Spread props at the end to allow InputLabelProps overrides
+                    ...textFieldProps?.InputLabelProps,
+                }, ...params, ...textFieldProps }), ...props }) }));
+};
+export default FieldTypeDate;

package/es/FieldTypeDateTime/FieldTypeDateTime.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { FieldTypeDateTimeProps } from '.';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<FieldTypeDateTimeProps>;

package/es/FieldTypeDateTime/FieldTypeDateTime.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import FieldTypeDateTime from '.';
+export default {
+    title: 'FieldTypeDateTime',
+    component: FieldTypeDateTime,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = useState(null);
+    return (_jsx(FieldTypeDateTime, { ...args, value: value, onChange: (value) => setValue(value) }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Date label',
+    textFieldProps: {
+        helperText: 'Date helper text',
+        error: false,
+    }
+};

package/es/FieldTypeDateTime/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { DateTimePickerProps } from '@mui/x-date-pickers/DateTimePicker';
+import { TextFieldProps } from '@mui/material';
+export interface FieldTypeDateTimeProps extends Omit<DateTimePickerProps<Date, Date>, 'renderInput'> {
+    /**
+     * Props passed to TextField component
+     */
+    textFieldProps?: TextFieldProps;
+}
+declare const FieldTypeDateTime: ({ textFieldProps, ...props }: FieldTypeDateTimeProps) => JSX.Element;
+export default FieldTypeDateTime;

package/es/FieldTypeDateTime/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { TextField } from '@mui/material';
+;
+const FieldTypeDateTime = ({ textFieldProps, ...props }) => {
+    return (_jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DateTimePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { InputLabelProps: {
+                    shrink: true,
+                    // Spread props at the end to allow InputLabelProps overrides
+                    ...textFieldProps?.InputLabelProps,
+                }, ...params, ...textFieldProps }), ...props }) }));
+};
+export default FieldTypeDateTime;

package/es/FieldTypeDropdown/FieldTypeDropwdon.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { FieldTypeDropdownProps } from './';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<FieldTypeDropdownProps>;

package/es/FieldTypeDropdown/FieldTypeDropwdon.stories.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import FieldTypeDropdown from './';
+export default {
+    title: 'FieldTypeDropdown',
+    component: FieldTypeDropdown,
+    argType: {},
+};
+const options = [
+    {
+        value: 'option1',
+        label: 'Option 1',
+    },
+    {
+        value: 'option2',
+        label: 'Option 2',
+    },
+    {
+        value: 'option3',
+        label: 'Option 3',
+    },
+];
+const Template = (args) => {
+    const [value, setValue] = useState('');
+    const handleOnChange = (e) => {
+        setValue(e.target.value);
+    };
+    return (_jsx(FieldTypeDropdown, { ...args, value: value, onChange: handleOnChange, options: options }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    placeholder: 'Placeholder Text...',
+    label: 'Number label',
+};

package/es/FieldTypeDropdown/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { OutlinedTextFieldProps } from '@mui/material/TextField';
+interface Option {
+    label: string;
+    value: any;
+}
+export interface FieldTypeDropdownProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+    options: Option[];
+}
+declare const FieldTypeDropdown: ({ InputLabelProps, options, ...props }: FieldTypeDropdownProps) => JSX.Element;
+export default FieldTypeDropdown;

package/es/FieldTypeDropdown/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MenuItem } from '@mui/material';
+import MuiTextField from '@mui/material/TextField';
+const FieldTypeDropdown = ({ InputLabelProps, options, ...props }) => {
+    return (_jsxs(MuiTextField, { size: "small", variant: 'outlined', select: true, InputLabelProps: {
+            shrink: true,
+            // Spread props at the end to allow InputLabel prop overrides
+            ...InputLabelProps,
+        }, 
+        // Spread props at the end to allow prop overrides
+        SelectProps: {
+            displayEmpty: true,
+        }, ...props, children: [_jsx(MenuItem, { value: '', children: "- None -" }, ''), options.map((option) => (_jsx(MenuItem, { value: option.value, children: option.label }, option.value)))] }));
+};
+export default FieldTypeDropdown;

package/es/FieldTypeNumber/FieldTypeNumber.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { FieldTypeNumberProps } from './';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<FieldTypeNumberProps>;

package/es/FieldTypeNumber/FieldTypeNumber.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import FieldTypeNumber from './';
+export default {
+    title: 'FieldTypeNumber',
+    component: FieldTypeNumber,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = useState('0');
+    const handleOnChange = (e) => {
+        setValue(e.target.value);
+    };
+    return (_jsx(FieldTypeNumber, { ...args, value: value, onChange: handleOnChange }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    placeholder: 'Placeholder Text...',
+    label: 'Number label',
+};

package/es/FieldTypeNumber/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { OutlinedTextFieldProps } from '@mui/material/TextField';
+export interface FieldTypeNumberProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+}
+declare const FieldTypeText: ({ InputLabelProps, ...props }: FieldTypeNumberProps) => JSX.Element;
+export default FieldTypeText;

package/es/FieldTypeNumber/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MuiTextField from '@mui/material/TextField';
+const FieldTypeText = ({ InputLabelProps, ...props }) => {
+    return (_jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'number', InputLabelProps: {
+            shrink: true,
+            // Spread props at the end to allow InputLabel prop overrides
+            ...InputLabelProps,
+        }, ...props }));
+};
+export default FieldTypeText;

package/es/FieldTypeSort/FieldTypeSort.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { FieldTypeSortProps } from './';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<FieldTypeSortProps>;

package/es/FieldTypeSort/FieldTypeSort.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import FieldTypeSort from './';
+export default {
+    title: 'FieldTypeSort',
+    component: FieldTypeSort,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = useState('3');
+    const handleOnChange = (e) => {
+        setValue(e.target.value);
+    };
+    return (_jsx(FieldTypeSort, { ...args, value: value, onChange: handleOnChange }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    placeholder: 'Placeholder Text...',
+    label: 'Sort label',
+    helperText: 'Sort helper text',
+};

package/es/FieldTypeSort/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { OutlinedTextFieldProps } from '@mui/material/TextField';
+export interface FieldTypeSortProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+    value: string;
+}
+declare const FieldTypeSort: ({ value, InputProps, InputLabelProps, sx, ...props }: FieldTypeSortProps) => JSX.Element;
+export default FieldTypeSort;

package/es/FieldTypeSort/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MuiTextField from '@mui/material/TextField';
+import { Button, InputAdornment } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+const FieldTypeSort = ({ value, InputProps, InputLabelProps, sx, ...props }) => {
+    return (_jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'number', value: value, sx: {
+            width: 165,
+            // Spread props at the end to allow sx prop overrides
+            ...sx
+        }, InputProps: {
+            startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
+                        // References input via event in order to modify its value
+                        const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
+                        console.log('testing input', input);
+                        input.value = String(+input.value + 1);
+                    }, children: _jsx(AddIcon, { fontSize: 'small' }) }) })),
+            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
+                        // References input via event in order to modify its value
+                        const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
+                        console.log('testing input', input);
+                        input.value = String(+input.value - 1);
+                    }, children: _jsx(RemoveIcon, { fontSize: 'small' }) }) })),
+            // Spread props at the end to allow Input prop overrides
+            ...InputProps,
+        }, InputLabelProps: {
+            shrink: true,
+            // Spread props at the end to allow InputLabel prop overrides
+            ...InputLabelProps,
+        }, ...props }));
+};
+export default FieldTypeSort;

package/es/FieldTypeText/FieldTypeText.stories.d.ts

@@ -0,0 +1,6 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { FieldTypeTextProps } from './';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<FieldTypeTextProps>;
+export declare const TextArea: Story<FieldTypeTextProps>;

package/es/FieldTypeText/FieldTypeText.stories.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import FieldTypeText from './';
+export default {
+    title: 'FieldTypeText',
+    component: FieldTypeText,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = useState('');
+    const handleOnChange = (e) => {
+        setValue(e.target.value);
+    };
+    return (_jsx(FieldTypeText, { ...args, value: value, onChange: handleOnChange }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    placeholder: 'Placeholder Text...',
+    label: 'Text label',
+};
+export const TextArea = Template.bind({});
+TextArea.args = {
+    multiline: true,
+    rows: 4,
+    placeholder: 'Placeholder Text...',
+    label: 'Text Label',
+};

package/es/FieldTypeText/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { OutlinedTextFieldProps } from '@mui/material/TextField';
+export interface FieldTypeTextProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+    /**
+    * Max length of the field
+    * @default 150
+    */
+    maxLength?: number;
+    value: string;
+}
+declare const FieldTypeText: ({ maxLength, value, helperText, InputProps, InputLabelProps, ...props }: FieldTypeTextProps) => JSX.Element;
+export default FieldTypeText;

package/es/FieldTypeText/index.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import MuiTextField from '@mui/material/TextField';
+import { InputAdornment } from '@mui/material';
+const FieldTypeText = ({ maxLength = 150, value, helperText, InputProps, InputLabelProps, ...props }) => {
+    return (_jsx(MuiTextField, { size: "small", variant: 'outlined', value: value, InputProps: {
+            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsxs(_Fragment, { children: [value.length, "/", maxLength] }) })),
+            // Spread props at the end to allow Input prop overrides
+            ...InputProps,
+        }, InputLabelProps: {
+            shrink: true,
+            // Spread props at the end to allow InputLabel prop overrides
+            ...InputLabelProps,
+        }, error: value.length > maxLength, helperText: value.length > maxLength ? 'Your input is over the specified limit' : helperText, ...props }));
+};
+export default FieldTypeText;

package/es/FieldTypeUrl/FieldTypeUrl.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { FieldTypeUrlProps } from './';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<FieldTypeUrlProps>;

package/es/FieldTypeUrl/FieldTypeUrl.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import FieldTypeUrl from './';
+export default {
+    title: 'FieldTypeUrl',
+    component: FieldTypeUrl,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = useState('');
+    const handleOnChange = (e) => {
+        setValue(e.target.value);
+    };
+    return (_jsx(FieldTypeUrl, { ...args, value: value, onChange: handleOnChange }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    placeholder: 'Placeholder Text...',
+    label: 'Some label',
+    fullWidth: true,
+};