@zesty-io/material 0.0.3 → 0.1.1

package/src/FieldTypeText/index.tsx

@@ -0,0 +1,35 @@
+import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
+import { FormControl, FormLabel, Box } from '@mui/material';
+
+export interface FieldTypeTextProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+   /**
+   * Max length of the field
+   * @default 150
+   */
+  maxLength?: number;
+  value: string;
+}
+
+const FieldTypeText = ({label, maxLength = 150, value, helperText, required, ...props }: FieldTypeTextProps) => {
+
+  return (
+    <FormControl fullWidth required={required}>
+      {/* Sets flex order to make appended required asterisk properly positioned */}
+      <FormLabel sx={{display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': {order: 2}}}>
+        <Box sx={{ order: 1}}>{label}</Box> 
+        <Box sx={{ order: 3, flex: 1, textAlign: 'right'}}>{value?.length}/{maxLength}</Box>
+      </FormLabel>
+      <MuiTextField
+        size="small"
+        variant='outlined'
+        value={value}
+        error={value?.length > maxLength}
+        helperText={value?.length > maxLength ? 'Your input is over the specified limit' : helperText}
+        // Spread props at the end to allow prop overrides
+        {...props}
+      />
+    </FormControl>
+  );
+};
+
+export default FieldTypeText;

package/src/FieldTypeUrl/FieldTypeUrl.stories.tsx

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

package/src/FieldTypeUrl/index.tsx

@@ -0,0 +1,43 @@
+import { useRef } from 'react';
+import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
+import { FormControl, FormLabel, Box } from '@mui/material';
+
+export interface FieldTypeUrlProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+   /**
+   * Max length of the field
+   * @default 2000
+   */
+  maxLength?: number;
+  value: string;
+}
+
+const FieldTypeUrl = ({label, maxLength = 2000, value, helperText, required, inputProps, ...props }: FieldTypeUrlProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <FormControl fullWidth required={required}>
+      {/* Sets flex order to make appended required asterisk properly positioned */}
+      <FormLabel sx={{display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': {order: 2}}}>
+        <Box sx={{ order: 1}}>{label}</Box> 
+        <Box sx={{ order: 3, flex: 1, textAlign: 'right'}}>{value?.length}/{maxLength}</Box>
+      </FormLabel>
+      <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}
+        // Spread props at the end to allow prop overrides
+        {...props}
+      />
+    </FormControl>
+  );
+};
+
+export default FieldTypeUrl;

package/src/index.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/src/{stories → theme}/Theme.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactJson from 'react-json-view'
 import { Story, Meta } from '@storybook/react/types-6-0';
-import theme from '../theme';
+import theme from '.';
 
 export default {
   title: 'Theme',

package/src/theme/index.ts

@@ -9,27 +9,59 @@ let theme: 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 }: any) => ({
+          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/src/utils/virtualization.tsx

@@ -0,0 +1,125 @@
+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, ListChildComponentProps } from 'react-window';
+import Typography from '@mui/material/Typography';
+
+const LISTBOX_PADDING = 8; // px
+
+function renderRow(props: ListChildComponentProps) {
+  const { data, index, style } = props;
+  const dataSet = data[index];
+  const inlineStyle = {
+    ...style,
+    top: (style.top as number) + LISTBOX_PADDING,
+  };
+
+  if (dataSet.hasOwnProperty('group')) {
+    return (
+      <ListSubheader key={dataSet.key} component="div" style={inlineStyle}>
+        {dataSet.group}
+      </ListSubheader>
+    );
+  }
+
+  return (
+    <Typography component="li" {...dataSet[0]} noWrap style={inlineStyle}>
+      {dataSet[1]}
+    </Typography>
+  );
+}
+
+const OuterElementContext = React.createContext({});
+
+const OuterElementType = React.forwardRef<HTMLDivElement>((props, ref) => {
+  const outerProps = React.useContext(OuterElementContext);
+  return <div ref={ref} {...props} {...outerProps} />;
+});
+
+function useResetCache(data: any) {
+  const ref = React.useRef<VariableSizeList>(null);
+  React.useEffect(() => {
+    if (ref.current != null) {
+      ref.current.resetAfterIndex(0, true);
+    }
+  }, [data]);
+  return ref;
+}
+
+// Adapter for react-window
+export const ListboxComponent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLElement>
+>(function ListboxComponent(props, ref) {
+  const { children, ...other } = props;
+  const itemData: React.ReactChild[] = [];
+  (children as React.ReactChild[]).forEach(
+    (item: React.ReactChild & { children?: React.ReactChild[] }) => {
+      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: React.ReactChild) => {
+    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 (
+    <div ref={ref}>
+      <OuterElementContext.Provider value={other}>
+        <VariableSizeList
+          itemData={itemData}
+          height={getHeight() + 2 * LISTBOX_PADDING}
+          width="100%"
+          ref={gridRef}
+          outerElementType={OuterElementType}
+          innerElementType="ul"
+          itemSize={(index: any) => getChildSize(itemData[index])}
+          overscanCount={5}
+          itemCount={itemCount}
+        >
+          {renderRow}
+        </VariableSizeList>
+      </OuterElementContext.Provider>
+    </div>
+  );
+});
+
+function random(length: number) {
+  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: string, b: string) => a.toUpperCase().localeCompare(b.toUpperCase()));
+