@zesty-io/material 0.0.4 → 0.1.0

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/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.js

@@ -16,5 +16,6 @@ const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
     placeholder: 'Placeholder Text...',
-    label: 'Some label',
+    label: 'Sort label',
+    helperText: 'Sort helper text',
 };

package/es/FieldTypeSort/index.d.ts

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

package/es/FieldTypeSort/index.js

@@ -1,23 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
 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, inputProps, sx, ...props }) => {
-    const inputRef = useRef(null);
+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: () => {
-                        if (inputRef.current)
-                            inputRef.current.value = String(+inputRef.current.value + 1);
+            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: () => {
-                        if (inputRef.current)
-                            inputRef.current.value = String(+inputRef.current.value - 1);
+            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,
@@ -25,10 +27,6 @@ const FieldTypeSort = ({ value, InputProps, InputLabelProps, inputProps, sx, ...
             shrink: true,
             // Spread props at the end to allow InputLabel prop overrides
             ...InputLabelProps,
-        }, inputProps: {
-            ref: inputRef,
-            // Spread props at the end to allow inputProps prop overrides
-            ...inputProps,
         }, ...props }));
 };
 export default FieldTypeSort;

package/es/FieldTypeText/FieldTypeText.stories.js

@@ -16,14 +16,12 @@ const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
     placeholder: 'Placeholder Text...',
-    label: 'Some label',
-    fullWidth: true,
+    label: 'Text label',
 };
 export const TextArea = Template.bind({});
 TextArea.args = {
     multiline: true,
     rows: 4,
     placeholder: 'Placeholder Text...',
-    label: 'Some Label',
-    fullWidth: true,
+    label: 'Text Label',
 };

package/es/index.d.ts

@@ -1,2 +1,11 @@
 export { default as theme } from './theme';
 export { default as FieldTypeText } from './FieldTypeText';
+export { default as FieldTypeSort } from './FieldTypeSort';
+export { default as FieldTypeUrl } from './FieldTypeUrl';
+export { default as FieldTypeDate } from './FieldTypeDate';
+export { default as FieldTypeDateTime } from './FieldTypeDateTime';
+export { default as FieldTypeColor } from './FieldTypeColor';
+export { default as FieldTypeNumber } from './FieldTypeNumber';
+export { default as FieldTypeDropdown } from './FieldTypeDropdown';
+export { default as CopyButton } from './CopyButton';
+export { default as ConfirmModal } from './ConfirmModal';

package/es/index.js

@@ -1,2 +1,11 @@
 export { default as theme } from './theme';
 export { default as FieldTypeText } from './FieldTypeText';
+export { default as FieldTypeSort } from './FieldTypeSort';
+export { default as FieldTypeUrl } from './FieldTypeUrl';
+export { default as FieldTypeDate } from './FieldTypeDate';
+export { default as FieldTypeDateTime } from './FieldTypeDateTime';
+export { default as FieldTypeColor } from './FieldTypeColor';
+export { default as FieldTypeNumber } from './FieldTypeNumber';
+export { default as FieldTypeDropdown } from './FieldTypeDropdown';
+export { default as CopyButton } from './CopyButton';
+export { default as ConfirmModal } from './ConfirmModal';

package/es/theme/index.js

@@ -11,8 +11,8 @@ theme = createTheme(theme, {
             styleOverrides: {
                 root: {
                     minWidth: 'auto',
-                }
-            }
+                },
+            },
         },
         MuiTooltip: {
             styleOverrides: {
@@ -34,9 +34,17 @@ theme = createTheme(theme, {
                 },
             },
         },
+        MuiFormLabel: {
+            styleOverrides: {
+                root: {
+                    color: theme.palette.primary.dark,
+                },
+            },
+        },
         MuiToggleButton: {
             styleOverrides: {
                 root: ({ ownerState, theme }) => ({
+                    backgroundColor: `${theme.palette[ownerState.color].contrastText} !important`,
                     ...(ownerState.selected && {
                         color: `${theme.palette[ownerState.color].contrastText} !important`,
                         backgroundColor: `${theme.palette[ownerState.color].main} !important`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",
@@ -30,7 +30,9 @@
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
-    "@mui/material": "^5.6.4"
+    "@mui/material": "^5.6.4",
+    "@mui/x-date-pickers": "^5.0.0-alpha.5",
+    "date-fns": "^2.28.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.10",

package/src/ConfirmModal/ConfirmModal.stories.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { Button, Stack } from '@mui/material';
+import ConfirmDialog, { ConfirmDialogProps } from '.';
+
+export default {
+  title: 'ConfirmDialog',
+  component: ConfirmDialog,
+  argType: {},
+} as Meta;
+
+const Template: Story<ConfirmDialogProps> = (args) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button variant="contained" onClick={() => setOpen(true)}>Click me to open</Button>
+      <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: <><Button color="error" variant="contained">Custom 1</Button><Button color="success" variant="contained">Custom 2</Button></>
+};
+

package/src/ConfirmModal/index.tsx

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+import Dialog, { DialogProps } 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';
+
+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 ;
+}
+
+const ConfirmDialog = ({title, content, onClose, children, callback, ...props }: ConfirmDialogProps) => {
+  
+  return (
+    <Dialog
+      {...props}
+    >
+      <DialogTitle>
+        {title}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          {content}
+        </DialogContentText>
+      </DialogContent>
+      {children ? <DialogActions>{children}</DialogActions> : (
+        <DialogActions>
+          <Button variant="contained" onClick={() => callback(false)}>No</Button>
+          <Button variant="contained" onClick={() => callback(true)} autoFocus>
+            Yes
+          </Button>
+        </DialogActions>
+      )}
+    </Dialog>
+  );
+};
+
+export default ConfirmDialog;

package/src/FieldTypeColor/FieldTypeColor.stories.tsx

@@ -0,0 +1,35 @@
+import { ChangeEvent, useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import FieldTypeColor, { FieldTypeColorProps } from './';
+
+export default {
+  title: 'FieldTypeColor',
+  component: FieldTypeColor,
+  argType: {},
+} as Meta;
+
+const Template: Story<FieldTypeColorProps> = (args) => {
+  const [value, setValue] = useState('');
+
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  }
+
+  return (
+    <FieldTypeColor
+      {...args}
+      value={value}
+      onChange={handleOnChange}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: 'Placeholder Text...',
+  label: 'Color label',
+  helperText: 'Color helper text',
+};
+
+
+

package/src/FieldTypeColor/index.tsx

@@ -0,0 +1,45 @@
+import { useRef } from 'react';
+import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
+import { Button, InputAdornment } from '@mui/material';
+import BrushIcon from '@mui/icons-material/Brush';
+
+export interface FieldTypeColorProps extends Omit<OutlinedTextFieldProps, 'variant'> {}
+
+const FieldTypeColor = ({InputProps, InputLabelProps, ...props }: FieldTypeColorProps) => {
+
+  return (
+      <MuiTextField
+        size="small"
+        variant='outlined'
+        type='color'
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end">
+              <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 as HTMLInputElement;
+                  input?.click()
+                }}
+              >
+                <BrushIcon fontSize='small' />
+              </Button>
+            </InputAdornment>
+          ),
+          // 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,
+        }}
+        // Spread props at the end to allow prop overrides
+        {...props}
+      />
+  );
+};
+
+export default FieldTypeColor;

package/src/FieldTypeDate/FieldTypeDate.stories.tsx

@@ -0,0 +1,26 @@
+import {useState} from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import FieldTypeDate, { FieldTypeDateProps } from '.';
+
+export default {
+  title: 'FieldTypeDate',
+  component: FieldTypeDate,
+  argType: {},
+} as Meta;
+
+const Template: Story<FieldTypeDateProps> = (args) => {
+  const [value, setValue] = useState<Date | null>(null);
+
+  return (
+    <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/src/FieldTypeDate/index.tsx

@@ -0,0 +1,37 @@
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker, DatePickerProps} from '@mui/x-date-pickers/DatePicker';
+import { TextField, TextFieldProps } from '@mui/material';
+
+export interface FieldTypeDateProps extends Omit<DatePickerProps<Date, Date>, 'renderInput'> {
+  /**
+   * Props passed to TextField component
+   */
+  textFieldProps?: TextFieldProps;
+};
+
+const FieldTypeDate = ({textFieldProps, ...props}: FieldTypeDateProps) => {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <DatePicker
+        data-testid="zds-date-picker"
+        renderInput={(params) => 
+          <TextField
+            InputLabelProps={{
+              shrink: true,
+               // Spread props at the end to allow InputLabelProps overrides
+              ...textFieldProps?.InputLabelProps,
+            }}
+            {...params}
+             // Spread props at the end to allow textFieldProps overrides
+            {...textFieldProps}
+          />
+        }
+         // Spread props at the end to allow prop overrides
+        {...props}
+      />
+    </LocalizationProvider>
+  );
+}
+
+export default FieldTypeDate;

package/src/FieldTypeDateTime/FieldTypeDateTime.stories.tsx

@@ -0,0 +1,26 @@
+import {useState} from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import FieldTypeDateTime, { FieldTypeDateTimeProps } from '.';
+
+export default {
+  title: 'FieldTypeDateTime',
+  component: FieldTypeDateTime,
+  argType: {},
+} as Meta;
+
+const Template: Story<FieldTypeDateTimeProps> = (args) => {
+  const [value, setValue] = useState<Date | null>(null);
+
+  return (
+    <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/src/FieldTypeDateTime/index.tsx

@@ -0,0 +1,37 @@
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DateTimePicker, DateTimePickerProps} from '@mui/x-date-pickers/DateTimePicker';
+import { TextField, TextFieldProps } from '@mui/material';
+
+export interface FieldTypeDateTimeProps extends Omit<DateTimePickerProps<Date, Date>, 'renderInput'> {
+  /**
+   * Props passed to TextField component
+   */
+  textFieldProps?: TextFieldProps;
+};
+
+const FieldTypeDateTime = ({textFieldProps, ...props}: FieldTypeDateTimeProps) => {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <DateTimePicker
+        data-testid="zds-date-picker"
+        renderInput={(params) => 
+          <TextField
+            InputLabelProps={{
+              shrink: true,
+              // Spread props at the end to allow InputLabelProps overrides
+              ...textFieldProps?.InputLabelProps,
+            }}
+            {...params}
+            // Spread props at the end to allow textFieldProps overrides
+            {...textFieldProps}
+          />
+        }
+         // Spread props at the end to allow prop overrides
+        {...props}
+      />
+    </LocalizationProvider>
+  );
+}
+
+export default FieldTypeDateTime;

package/src/FieldTypeDropdown/FieldTypeDropwdon.stories.tsx

@@ -0,0 +1,51 @@
+import { ChangeEvent, useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import FieldTypeDropdown, { FieldTypeDropdownProps } from './';
+import { MenuItem } from '@mui/material';
+
+export default {
+  title: 'FieldTypeDropdown',
+  component: FieldTypeDropdown,
+  argType: {},
+} as Meta;
+
+const options = [
+  {
+    value: 'option1',
+    label: 'Option 1',
+  },
+  {
+    value: 'option2',
+    label: 'Option 2',
+  },
+  {
+    value: 'option3',
+    label: 'Option 3',
+  },
+];
+
+const Template: Story<FieldTypeDropdownProps> = (args) => {
+  const [value, setValue] = useState('');
+
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  }
+
+  return (
+    <FieldTypeDropdown
+      {...args}
+      value={value}
+      onChange={handleOnChange}
+      options={options}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: 'Placeholder Text...',
+  label: 'Number label',
+};
+
+
+

package/src/FieldTypeDropdown/index.tsx

@@ -0,0 +1,43 @@
+import { MenuItem } from '@mui/material';
+import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
+
+interface Option {
+  label: string;
+  value: any;
+}
+
+export interface FieldTypeDropdownProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+  options: Option[];
+}
+
+const FieldTypeDropdown = ({InputLabelProps, options, ...props }: FieldTypeDropdownProps) => {
+
+  return (
+      <MuiTextField
+        size="small"
+        variant='outlined'
+        select
+        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}
+      >
+        <MenuItem key={''} value={''}>
+          - None -
+        </MenuItem>
+        {options.map((option) => (
+          <MenuItem key={option.value} value={option.value}>
+            {option.label}
+          </MenuItem>
+      ))}
+      </MuiTextField>
+  );
+};
+
+export default FieldTypeDropdown;

package/src/FieldTypeNumber/FieldTypeNumber.stories.tsx

@@ -0,0 +1,34 @@
+import { ChangeEvent, useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import FieldTypeNumber, { FieldTypeNumberProps } from './';
+
+export default {
+  title: 'FieldTypeNumber',
+  component: FieldTypeNumber,
+  argType: {},
+} as Meta;
+
+const Template: Story<FieldTypeNumberProps> = (args) => {
+  const [value, setValue] = useState('0');
+
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  }
+
+  return (
+    <FieldTypeNumber
+      {...args}
+      value={value}
+      onChange={handleOnChange}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: 'Placeholder Text...',
+  label: 'Number label',
+};
+
+
+

package/src/FieldTypeNumber/index.tsx

@@ -0,0 +1,23 @@
+import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
+
+export interface FieldTypeNumberProps extends Omit<OutlinedTextFieldProps, 'variant'> {}
+
+const FieldTypeText = ({InputLabelProps, ...props }: FieldTypeNumberProps) => {
+
+  return (
+      <MuiTextField
+        size="small"
+        variant='outlined'
+        type='number'
+        InputLabelProps={{
+          shrink: true,
+          // Spread props at the end to allow InputLabel prop overrides
+          ...InputLabelProps,
+        }}
+        // Spread props at the end to allow prop overrides
+        {...props}
+      />
+  );
+};
+
+export default FieldTypeText;

package/src/FieldTypeSort/FieldTypeSort.stories.tsx

@@ -1,6 +1,5 @@
 import { ChangeEvent, useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { TextFieldProps } from '@mui/material';
 import FieldTypeSort, { FieldTypeSortProps } from './';
 
 export default {
@@ -28,7 +27,8 @@ const Template: Story<FieldTypeSortProps> = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   placeholder: 'Placeholder Text...',
-  label: 'Some label',
+  label: 'Sort label',
+  helperText: 'Sort helper text',
 };
 
 

package/src/FieldTypeSort/index.tsx

@@ -1,4 +1,3 @@
-import React, { ChangeEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
 import { Button, InputAdornment } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
@@ -8,9 +7,7 @@ export interface FieldTypeSortProps extends Omit<OutlinedTextFieldProps, 'varian
   value: string;
 }
 
-const FieldTypeSort = ({value, InputProps, InputLabelProps, inputProps, sx, ...props }: FieldTypeSortProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
+const FieldTypeSort = ({value, InputProps, InputLabelProps, sx, ...props }: FieldTypeSortProps) => {
   return (
       <MuiTextField
         size="small"
@@ -28,8 +25,11 @@ const FieldTypeSort = ({value, InputProps, InputLabelProps, inputProps, sx, ...p
               <Button
                 size="small"
                 variant="contained"
-                onClick={() => {
-                  if(inputRef.current) inputRef.current.value = String(+inputRef.current.value + 1)
+                onClick={(e) => {
+                  // References input via event in order to modify its value
+                  const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1] as HTMLInputElement;
+                  console.log('testing input', input)
+                  input.value = String(+input.value + 1)
                 }}><AddIcon fontSize='small' />
               </Button>
             </InputAdornment>
@@ -39,8 +39,11 @@ const FieldTypeSort = ({value, InputProps, InputLabelProps, inputProps, sx, ...p
               <Button
                 size="small"
                 variant="contained"
-                onClick={() => {
-                  if(inputRef.current) inputRef.current.value = String(+inputRef.current.value - 1)
+                onClick={(e) => {
+                  // References input via event in order to modify its value
+                  const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1] as HTMLInputElement;
+                  console.log('testing input', input)
+                  input.value = String(+input.value - 1)
                 }}><RemoveIcon fontSize='small' />
               </Button>
             </InputAdornment>
@@ -53,11 +56,6 @@ const FieldTypeSort = ({value, InputProps, InputLabelProps, inputProps, sx, ...p
           // Spread props at the end to allow InputLabel prop overrides
           ...InputLabelProps,
         }}
-        inputProps={{
-          ref: inputRef,
-          // Spread props at the end to allow inputProps prop overrides
-          ...inputProps,
-        }}
         // Spread props at the end to allow prop overrides
         {...props}
       />
@@ -65,45 +63,3 @@ const FieldTypeSort = ({value, InputProps, InputLabelProps, inputProps, sx, ...p
 };
 
 export default FieldTypeSort;
-
-
-// const FieldTypeSort = ({InputProps, InputLabelProps, ...props }: FieldTypeSortProps) => {
-
-//   return (
-//       <MuiTextField
-//         variant='outlined'
-//         type='number'
-//         InputProps={{
-//           startAdornment: (
-//             <InputAdornment position="start">
-//               <Button
-//                 variant="contained"
-//                 onClick={() => {
-//                   callback(props.value + 1)
-//                 }}>+</Button>
-//             </InputAdornment>
-//           ),
-//           endAdornment: (
-//             <InputAdornment position="end">
-//               <Button
-//                 variant="contained"
-//                 onClick={() => {
-//                   callback(props.value - 1)
-//                 }}>-</Button>
-//             </InputAdornment>
-//           ),
-//           // 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,
-//         }}
-//         // Spread props at the end to allow prop overrides
-//         {...props}
-//       />
-//   );
-// };
-
-// export default FieldTypeSort;

package/src/FieldTypeText/FieldTypeText.stories.tsx

@@ -27,8 +27,7 @@ const Template: Story<FieldTypeTextProps> = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   placeholder: 'Placeholder Text...',
-  label: 'Some label',
-  fullWidth: true,
+  label: 'Text label',
 };
 
 export const TextArea = Template.bind({});
@@ -36,8 +35,7 @@ TextArea.args = {
   multiline: true,
   rows: 4,
   placeholder: 'Placeholder Text...',
-  label: 'Some Label',
-  fullWidth: true,
+  label: 'Text Label',
 };
 
 

package/src/FieldTypeText/index.tsx

@@ -1,6 +1,5 @@
-import React, { ChangeEvent, ReactNode, useEffect, useRef, useState } from 'react';
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
-import { Box, InputAdornment } from '@mui/material';
+import { InputAdornment } from '@mui/material';
 
 export interface FieldTypeTextProps extends Omit<OutlinedTextFieldProps, 'variant'> {
    /**

package/src/FieldTypeUrl/index.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { useRef } from 'react';
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
 import { InputAdornment } from '@mui/material';
 

package/src/index.ts

@@ -1,2 +1,11 @@
 export { default as theme } from './theme';
 export { default as FieldTypeText } from './FieldTypeText';
+export { default as FieldTypeSort } from './FieldTypeSort';
+export { default as FieldTypeUrl } from './FieldTypeUrl';
+export { default as FieldTypeDate } from './FieldTypeDate';
+export { default as FieldTypeDateTime } from './FieldTypeDateTime';
+export { default as FieldTypeColor } from './FieldTypeColor';
+export { default as FieldTypeNumber } from './FieldTypeNumber';
+export { default as FieldTypeDropdown } from './FieldTypeDropdown';
+export { default as CopyButton } from './CopyButton';
+export { default as ConfirmModal } from './ConfirmModal';

package/src/theme/index.ts

@@ -13,8 +13,8 @@ theme = createTheme(theme, {
       styleOverrides: {
         root: {
           minWidth: 'auto',
-        }
-      }
+        },
+      },
     },
     MuiTooltip: {
       styleOverrides: {
@@ -36,9 +36,19 @@ theme = createTheme(theme, {
         },
       },
     },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.primary.dark,
+        },
+      },
+    },
     MuiToggleButton: {
       styleOverrides: {
         root: ({ ownerState, theme }: any) => ({
+          backgroundColor: `${
+            theme.palette[ownerState.color].contrastText
+          } !important`,
           ...(ownerState.selected && {
             color: `${theme.palette[ownerState.color].contrastText} !important`,
             backgroundColor: `${