@zesty-io/material 0.0.3 → 0.1.1

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,22 @@
+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',
+    error: false,
+};

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: ({ label, value, InputProps, required, ...props }: FieldTypeSortProps) => JSX.Element;
+export default FieldTypeSort;

package/es/FieldTypeSort/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import MuiTextField from '@mui/material/TextField';
+import { Button, FormControl, FormLabel, InputAdornment } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+const FieldTypeSort = ({ label, value, InputProps, required, ...props }) => {
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'number', value: value, 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];
+                                input.value = String(+input.value - 1);
+                            }, children: _jsx(RemoveIcon, { 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];
+                                input.value = String(+input.value + 1);
+                            }, children: _jsx(AddIcon, { fontSize: 'small' }) }) })),
+                    // Spread props at the end to allow Input prop overrides
+                    ...InputProps,
+                }, ...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,29 @@
+import { jsx as _jsx, Fragment as _Fragment } 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(_Fragment, { children: _jsx(FieldTypeText, { ...args, value: value, onChange: handleOnChange }) }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    placeholder: 'Placeholder Text...',
+    label: 'Text label',
+    helperText: 'Text helper text',
+};
+export const TextArea = Template.bind({});
+TextArea.args = {
+    multiline: true,
+    rows: 4,
+    placeholder: 'Placeholder Text...',
+    label: 'Text Label',
+    helperText: 'Text helper text',
+};

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: ({ label, maxLength, value, helperText, required, ...props }: FieldTypeTextProps) => JSX.Element;
+export default FieldTypeText;

package/es/FieldTypeText/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import MuiTextField from '@mui/material/TextField';
+import { FormControl, FormLabel, Box } from '@mui/material';
+const FieldTypeText = ({ label, maxLength = 150, value, helperText, required, ...props }) => {
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsxs(FormLabel, { sx: { display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': { order: 2 } }, children: [_jsx(Box, { sx: { order: 1 }, children: label }), _jsxs(Box, { sx: { order: 3, flex: 1, textAlign: 'right' }, children: [value?.length, "/", maxLength] })] }), _jsx(MuiTextField, { size: "small", variant: 'outlined', value: value, 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,
+};

package/es/FieldTypeUrl/index.d.ts

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

package/es/FieldTypeUrl/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import MuiTextField from '@mui/material/TextField';
+import { FormControl, FormLabel, Box } from '@mui/material';
+const FieldTypeUrl = ({ label, maxLength = 2000, value, helperText, required, inputProps, ...props }) => {
+    const inputRef = useRef(null);
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsxs(FormLabel, { sx: { display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': { order: 2 } }, children: [_jsx(Box, { sx: { order: 1 }, children: label }), _jsxs(Box, { sx: { order: 3, flex: 1, textAlign: 'right' }, children: [value?.length, "/", maxLength] })] }), _jsx(MuiTextField, { size: "small", type: 'url', variant: 'outlined', value: value, inputProps: {
+                    ref: inputRef,
+                    // Spread props at the end to allow inputProps prop overrides
+                    ...inputProps,
+                }, error: (value && !inputRef.current?.validity.valid) || value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef.current?.validity.valid) ? 'Your input is not a valid url' : helperText, ...props })] }));
+};
+export default FieldTypeUrl;

package/es/index.d.ts

@@ -1 +1,13 @@
 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 FieldTypeOneToOne } from './FieldTypeOneToOne';
+export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
+export { default as CopyButton } from './CopyButton';
+export { default as ConfirmModal } from './ConfirmModal';

package/es/index.js

@@ -1 +1,13 @@
 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 FieldTypeOneToOne } from './FieldTypeOneToOne';
+export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
+export { default as CopyButton } from './CopyButton';
+export { default as ConfirmModal } from './ConfirmModal';

package/es/theme/Theme.stories.d.ts

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

package/es/theme/Theme.stories.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactJson from 'react-json-view';
+import theme from '.';
+export default {
+    title: 'Theme',
+};
+const Template = (args) => {
+    return (_jsx(ReactJson, { src: theme }));
+};
+export const Default = Template.bind({});

package/es/theme/index.js

@@ -7,26 +7,54 @@ let theme = createTheme({
 });
 theme = createTheme(theme, {
     components: {
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    minWidth: 'auto',
+                },
+            },
+        },
         MuiTooltip: {
             styleOverrides: {
                 tooltip: {
                     color: theme.palette.primary.contrastText,
                     backgroundColor: theme.palette.primary.main,
-                    fontSize: "14px",
-                    lineHeight: "20px",
+                    fontSize: '14px',
+                    lineHeight: '20px',
                 },
                 arrow: {
                     color: theme.palette.primary.main,
-                }
-            }
+                },
+            },
         },
         MuiInputBase: {
             styleOverrides: {
                 root: {
-                    backgroundColor: theme.palette.primary.contrastText
+                    backgroundColor: theme.palette.primary.contrastText,
+                },
+            },
+        },
+        MuiFormLabel: {
+            styleOverrides: {
+                root: {
+                    color: theme.palette.primary.dark,
                 },
-            }
-        }
-    }
+                asterisk: {
+                    color: theme.palette.error.main,
+                }
+            },
+        },
+        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`,
+                    }),
+                }),
+            },
+        },
+    },
 });
 export default theme;

package/es/utils/virtualization.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const ListboxComponent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const randomOptions: string[];

package/es/utils/virtualization.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import ListSubheader from '@mui/material/ListSubheader';
+import { useTheme } from '@mui/material/styles';
+import { VariableSizeList } from 'react-window';
+import Typography from '@mui/material/Typography';
+const LISTBOX_PADDING = 8; // px
+function renderRow(props) {
+    const { data, index, style } = props;
+    const dataSet = data[index];
+    const inlineStyle = {
+        ...style,
+        top: style.top + LISTBOX_PADDING,
+    };
+    if (dataSet.hasOwnProperty('group')) {
+        return (_jsx(ListSubheader, { component: "div", style: inlineStyle, children: dataSet.group }, dataSet.key));
+    }
+    return (_jsx(Typography, { component: "li", ...dataSet[0], noWrap: true, style: inlineStyle, children: dataSet[1] }));
+}
+const OuterElementContext = React.createContext({});
+const OuterElementType = React.forwardRef((props, ref) => {
+    const outerProps = React.useContext(OuterElementContext);
+    return _jsx("div", { ref: ref, ...props, ...outerProps });
+});
+function useResetCache(data) {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (ref.current != null) {
+            ref.current.resetAfterIndex(0, true);
+        }
+    }, [data]);
+    return ref;
+}
+// Adapter for react-window
+export const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {
+    const { children, ...other } = props;
+    const itemData = [];
+    children.forEach((item) => {
+        itemData.push(item);
+        itemData.push(...(item.children || []));
+    });
+    const theme = useTheme();
+    const smUp = useMediaQuery(theme.breakpoints.up('sm'), {
+        noSsr: true,
+    });
+    const itemCount = itemData.length;
+    const itemSize = smUp ? 36 : 48;
+    const getChildSize = (child) => {
+        if (child.hasOwnProperty('group')) {
+            return 48;
+        }
+        return itemSize;
+    };
+    const getHeight = () => {
+        if (itemCount > 8) {
+            return 8 * itemSize;
+        }
+        return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
+    };
+    const gridRef = useResetCache(itemCount);
+    return (_jsx("div", { ref: ref, children: _jsx(OuterElementContext.Provider, { value: other, children: _jsx(VariableSizeList, { itemData: itemData, height: getHeight() + 2 * LISTBOX_PADDING, width: "100%", ref: gridRef, outerElementType: OuterElementType, innerElementType: "ul", itemSize: (index) => getChildSize(itemData[index]), overscanCount: 5, itemCount: itemCount, children: renderRow }) }) }));
+});
+function random(length) {
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < length; i += 1) {
+        result += characters.charAt(Math.floor(Math.random() * characters.length));
+    }
+    return result;
+}
+export const randomOptions = Array.from(new Array(10000))
+    .map(() => random(10 + Math.ceil(Math.random() * 20)))
+    .sort((a, b) => a.toUpperCase().localeCompare(b.toUpperCase()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.0.3",
+  "version": "0.1.1",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",
@@ -16,7 +16,7 @@
   "module": "es/index.js",
   "types": "es/index.d.ts",
   "scripts": {
-    "build": "tsc",
+    "build": "npm ci && tsc",
     "prerelease": "npm test",
     "release": "npm run build && npm publish --access public",
     "release:alpha": "npm run build && npm publish --access public --tag alpha",
@@ -30,7 +30,10 @@
     "@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",
+    "react-window": "^1.8.7"
   },
   "devDependencies": {
     "@babel/core": "^7.17.10",
@@ -40,9 +43,11 @@
     "@storybook/addon-links": "^6.4.22",
     "@storybook/react": "^6.4.22",
     "@storybook/testing-library": "0.0.11",
+    "@types/react-window": "^1.8.5",
     "babel-loader": "^8.2.5",
     "gh-pages": "^3.2.3",
     "react": "^18.1.0",
+    "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.1.0",
     "react-json-view": "^1.21.3",
     "typescript": "^4.6.3"

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/CopyButton/CopyButton.stories.tsx

@@ -0,0 +1,20 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import CopyButton, { CopyButtonProps } from '.';
+
+export default {
+  title: 'CopyButton',
+  component: CopyButton,
+  argType: {},
+} as Meta;
+
+const Template: Story<CopyButtonProps> = (args) => {
+
+  return (
+    <CopyButton {...args} />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  value: 'Copy Me!'
+};

package/src/CopyButton/index.tsx

@@ -0,0 +1,55 @@
+import { useCallback, useState, useEffect } from 'react';
+import Button, { ButtonProps } from '@mui/material/Button';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
+
+export interface CopyButtonProps extends ButtonProps {
+   /**
+   * Value to be copied to clipboard
+   */
+  value: string ;
+}
+
+const CopyButton = ({value, sx, ...props }: CopyButtonProps) => {
+  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 (
+      <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,
+        }}
+        startIcon={copied ? (
+          <CheckIcon color='success' fontSize='small' />
+        ) : (
+          <ContentCopyIcon fontSize='small' />
+        )}
+        // Spread props at the end to allow prop overrides
+        {...props}
+      >
+        {props.children ? props.children : value}
+      </Button>
+  );
+};
+
+export default CopyButton;

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,43 @@
+import { useRef } from 'react';
+import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
+import { Button, FormControl, FormHelperText, FormLabel, InputAdornment } from '@mui/material';
+import BrushIcon from '@mui/icons-material/Brush';
+
+export interface FieldTypeColorProps extends Omit<OutlinedTextFieldProps, 'variant'> {}
+
+const FieldTypeColor = ({InputProps, label, required, ...props }: FieldTypeColorProps) => {
+
+  return (
+    <FormControl fullWidth required={required}>
+      <FormLabel>{label}</FormLabel>
+      <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,
+        }}
+        // Spread props at the end to allow prop overrides
+        {...props}
+      />
+    </FormControl>
+  );
+};
+
+export default FieldTypeColor;