@zesty-io/material 0.0.2 → 0.1.0

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

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

package/src/FieldTypeSort/index.tsx

@@ -0,0 +1,65 @@
+import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
+import { Button, InputAdornment } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+
+export interface FieldTypeSortProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+  value: string;
+}
+
+const FieldTypeSort = ({value, InputProps, InputLabelProps, sx, ...props }: FieldTypeSortProps) => {
+  return (
+      <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: (
+            <InputAdornment position="start">
+              <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] as HTMLInputElement;
+                  console.log('testing input', input)
+                  input.value = String(+input.value + 1)
+                }}><AddIcon fontSize='small' />
+              </Button>
+            </InputAdornment>
+          ),
+          endAdornment: (
+            <InputAdornment position="end">
+              <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] as HTMLInputElement;
+                  console.log('testing input', input)
+                  input.value = String(+input.value - 1)
+                }}><RemoveIcon 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 FieldTypeSort;

package/src/FieldTypeText/FieldTypeText.stories.tsx

@@ -0,0 +1,41 @@
+import { ChangeEvent, useState } from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import FieldTypeText, { FieldTypeTextProps } from './';
+
+export default {
+  title: 'FieldTypeText',
+  component: FieldTypeText,
+  argType: {},
+} as Meta;
+
+const Template: Story<FieldTypeTextProps> = (args) => {
+  const [value, setValue] = useState('');
+
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  }
+
+  return (
+    <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/src/FieldTypeText/index.tsx

@@ -0,0 +1,42 @@
+import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
+import { InputAdornment } from '@mui/material';
+
+export interface FieldTypeTextProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+   /**
+   * Max length of the field
+   * @default 150
+   */
+  maxLength?: number;
+  value: string;
+}
+
+const FieldTypeText = ({maxLength = 150, value, helperText, InputProps, InputLabelProps, ...props }: FieldTypeTextProps) => {
+
+  return (
+      <MuiTextField
+        size="small"
+        variant='outlined'
+        value={value}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end">
+              <>{value.length}/{maxLength}</>
+            </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,
+        }}
+        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}
+      />
+  );
+};
+
+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,50 @@
+import { useRef } from 'react';
+import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
+import { InputAdornment } from '@mui/material';
+
+export interface FieldTypeUrlProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+   /**
+   * Max length of the field
+   * @default 2000
+   */
+  maxLength?: number;
+  value: string;
+}
+
+const FieldTypeUrl = ({maxLength = 2000, value, helperText, InputProps, InputLabelProps, inputProps, ...props }: FieldTypeUrlProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+      <MuiTextField
+        size="small"
+        type='url'
+        variant='outlined'
+        value={value}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end">
+              <>{value.length}/{maxLength}</>
+            </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,
+        }}
+        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}
+      />
+  );
+};
+
+export default FieldTypeUrl;

package/src/index.ts

@@ -1 +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/{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

@@ -8,18 +8,57 @@ let theme: Theme = createTheme({
 });
 
 theme = createTheme(theme, {
-  MuiTooltip: {
+  components: {
+    MuiButton: {
       styleOverrides: {
-          tooltip: {
-              color: theme.palette.primary.contrastText,
-              backgroundColor: theme.palette.primary.main,
-              fontSize: "14px",
-              lineHeight: "20px",
-          },
-          arrow: {
-              color: theme.palette.primary.main,
-          }
-      }
-  }
-})
+        root: {
+          minWidth: 'auto',
+        },
+      },
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          color: theme.palette.primary.contrastText,
+          backgroundColor: theme.palette.primary.main,
+          fontSize: '14px',
+          lineHeight: '20px',
+        },
+        arrow: {
+          color: theme.palette.primary.main,
+        },
+      },
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.primary.contrastText,
+        },
+      },
+    },
+    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: `${
+              theme.palette[ownerState.color].main
+            } !important`,
+          }),
+        }),
+      },
+    },
+  },
+});
+
 export default theme;