@zesty-io/material 0.0.3 → 0.0.4

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/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/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,20 @@
+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: 'Some label',
+};

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, inputProps, sx, ...props }: FieldTypeSortProps) => JSX.Element;
+export default FieldTypeSort;

package/es/FieldTypeSort/index.js

@@ -0,0 +1,34 @@
+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);
+    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);
+                    }, 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);
+                    }, 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,
+        }, inputProps: {
+            ref: inputRef,
+            // Spread props at the end to allow inputProps 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 } 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: 'Some label',
+    fullWidth: true,
+};
+export const TextArea = Template.bind({});
+TextArea.args = {
+    multiline: true,
+    rows: 4,
+    placeholder: 'Placeholder Text...',
+    label: 'Some Label',
+    fullWidth: true,
+};

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,
+};

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: ({ maxLength, value, helperText, InputProps, InputLabelProps, inputProps, ...props }: FieldTypeUrlProps) => JSX.Element;
+export default FieldTypeUrl;

package/es/FieldTypeUrl/index.js

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import MuiTextField from '@mui/material/TextField';
+import { InputAdornment } from '@mui/material';
+const FieldTypeUrl = ({ maxLength = 2000, value, helperText, InputProps, InputLabelProps, inputProps, ...props }) => {
+    const inputRef = useRef(null);
+    return (_jsx(MuiTextField, { size: "small", type: 'url', 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,
+        }, 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,2 @@
 export { default as theme } from './theme';
+export { default as FieldTypeText } from './FieldTypeText';

package/es/index.js

@@ -1 +1,2 @@
 export { default as theme } from './theme';
+export { default as FieldTypeText } from './FieldTypeText';

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,43 @@ 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,
                 },
-            }
-        }
-    }
+            },
+        },
+        MuiToggleButton: {
+            styleOverrides: {
+                root: ({ ownerState, theme }) => ({
+                    ...(ownerState.selected && {
+                        color: `${theme.palette[ownerState.color].contrastText} !important`,
+                        backgroundColor: `${theme.palette[ownerState.color].main} !important`,
+                    }),
+                }),
+            },
+        },
+    },
 });
 export default theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",
@@ -43,6 +43,7 @@
     "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/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,
+        }}
+        // Spread props at the end to allow prop overrides
+        {...props}
+      >
+        {copied ? (
+        <CheckIcon color='success' fontSize='small' />
+      ) : (
+        <ContentCopyIcon fontSize='small' />
+      )}
+      {props.children ? props.children : value}
+      </Button>
+  );
+};
+
+export default CopyButton;

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 { TextFieldProps } from '@mui/material';
+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: 'Some label',
+};
+
+
+

package/src/FieldTypeSort/index.tsx

@@ -0,0 +1,109 @@
+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';
+import RemoveIcon from '@mui/icons-material/Remove';
+
+export interface FieldTypeSortProps extends Omit<OutlinedTextFieldProps, 'variant'> {
+  value: string;
+}
+
+const FieldTypeSort = ({value, InputProps, InputLabelProps, inputProps, sx, ...props }: FieldTypeSortProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  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={() => {
+                  if(inputRef.current) inputRef.current.value = String(+inputRef.current.value + 1)
+                }}><AddIcon fontSize='small' />
+              </Button>
+            </InputAdornment>
+          ),
+          endAdornment: (
+            <InputAdornment position="end">
+              <Button
+                size="small"
+                variant="contained"
+                onClick={() => {
+                  if(inputRef.current) inputRef.current.value = String(+inputRef.current.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,
+        }}
+        inputProps={{
+          ref: inputRef,
+          // Spread props at the end to allow inputProps prop overrides
+          ...inputProps,
+        }}
+        // Spread props at the end to allow prop overrides
+        {...props}
+      />
+  );
+};
+
+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

@@ -0,0 +1,43 @@
+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: 'Some label',
+  fullWidth: true,
+};
+
+export const TextArea = Template.bind({});
+TextArea.args = {
+  multiline: true,
+  rows: 4,
+  placeholder: 'Placeholder Text...',
+  label: 'Some Label',
+  fullWidth: true,
+};
+
+

package/src/FieldTypeText/index.tsx

@@ -0,0 +1,43 @@
+import React, { ChangeEvent, ReactNode, useEffect, useRef, useState } from 'react';
+import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
+import { Box, 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 React, { ChangeEvent, ReactNode, useCallback, useEffect, useRef, useState } 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,2 @@
 export { default as theme } from './theme';
+export { default as FieldTypeText } from './FieldTypeText';

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,46 @@ 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,
         },
-      }
-    }
-  }
-})
+      },
+    },
+    MuiToggleButton: {
+      styleOverrides: {
+        root: ({ ownerState, theme }: any) => ({
+          ...(ownerState.selected && {
+            color: `${theme.palette[ownerState.color].contrastText} !important`,
+            backgroundColor: `${
+              theme.palette[ownerState.color].main
+            } !important`,
+          }),
+        }),
+      },
+    },
+  },
+});
 
 export default theme;