Merge pull request #22 from lyytioy/next

Version 1.0.1
lyytioy · Feb 15, 2022 · 30466eb · 30466eb
2 parents baf1112 + ca1808f
commit 30466eb
Show file tree

Hide file tree

Showing 17 changed files with 277 additions and 266 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -5,4 +5,5 @@ module.exports = {
   core: {
     builder: 'webpack5',
   },
+  staticDirs: ['../public'],
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,17 +2,17 @@
   "name": "@lyyti/design-system",
   "description": "Lyyti Design System",
   "homepage": "https://lyytioy.github.io/lyyti-design-system",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "engines": {
     "node": "^16",
     "npm": "^8"
   },
   "scripts": {
-    "dev": "start-storybook -p 6006 -s public",
+    "dev": "start-storybook -p 6006",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "check-types": "tsc",
-    "build-storybook": "npm ci && build-storybook -s public -o docs-build",
+    "build-storybook": "npm ci && build-storybook -o docs-build",
     "build": "rm -rf dist/* && tsc --project tsconfig.release.json && cp -r src/fonts dist && cp -r src/styles dist && cp package.json dist && cp README.md dist"
   },
   "resolutions": {
@@ -28,6 +28,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.10",
+    "@date-io/dayjs": "^2.13.1",
+    "@date-io/moment": "^2.13.1",
     "@storybook/addon-actions": "^6.4.18",
     "@storybook/addon-essentials": "^6.4.18",
     "@storybook/addon-links": "^6.4.18",
@@ -41,8 +43,6 @@
     "eslint-config-next": "12.0.10",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-storybook": "^0.5.6",
-    "date-fns": "^2.28.0",
-    "moment": "^2.29.1",
     "next": "12.0.10",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -1,7 +1,9 @@
 import { Button as MuiButton, ButtonProps as MuiButtonProps, IconButton } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 
 const containedBoxShadow =
-  '0.79px 6.95px 11px rgb(0 0 0 / 1%), 0.52px 4.53px 6.44px rgb(0 0 0 / 2%), 0.31px 2.76px 3.5px rgb(0 0 0 / 2%), 0.17px 1.52px 1.79px rgb(0 0 0 / 2%), 0.08px 0.72px 0.9px rgb(0 0 0 / 3%), 0.03px 0.25px 0.43px rgb(0 0 0 / 4%), inset 0 0px 0 0 #034e49';
+  '0.79px 6.95px 11px rgba(0, 0, 0, 0.0096), 0.52px 4.53px 6.44px rgba(0, 0, 0, 0.0157), 0.31px 2.76px 3.5px rgba(0, 0, 0, 0.02), 0.17px 1.52px 1.79px rgba(0, 0, 0, 0.0243), 0.08px 0.72px 0.9px rgba(0, 0, 0, 0.0304), 0.03px 0.25px 0.43px rgba(0, 0, 0, 0.04);';
 
 export interface ButtonProps extends Omit<MuiButtonProps, 'size'> {
   chunky?: boolean;
@@ -18,6 +20,8 @@ const Button = ({
   disabled = false,
   ...props
 }: ButtonProps): JSX.Element => {
+  const theme = useTheme();
+
   if (
     children &&
     Object.keys(children).includes('$$typeof') &&
@@ -32,12 +36,113 @@ const Button = ({
     );
   }
 
+  const containedPrimary = {
+    boxShadow: containedBoxShadow,
+    '&::before': {
+      backgroundColor: 'primary.dark',
+    },
+    '&:hover': {
+      backgroundColor: 'primary.main',
+    },
+    '&:active': {
+      backgroundColor: 'primaryStates.activeContained',
+    },
+    '&.Mui-disabled': {
+      backgroundColor: 'primaryStates.disabledBg',
+      color: 'primary.contrastText',
+    },
+  };
+
+  const containedSecondary = {
+    boxShadow: containedBoxShadow,
+    '&::before': {
+      backgroundColor: 'secondary.dark',
+    },
+    '&:hover': {
+      backgroundColor: 'secondary.main',
+    },
+    '&:active': {
+      backgroundColor: 'secondaryStates.activeContained',
+    },
+    '&.Mui-disabled': {
+      backgroundColor: 'secondaryStates.disabledBg',
+      color: 'secondary.contrastText',
+    },
+  };
+
+  const outlinedPrimary = {
+    boxShadow: containedBoxShadow,
+    '&::before': {
+      backgroundColor: 'primaryStates.hover',
+    },
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+    '&:active': {
+      backgroundColor: 'primaryStates.activeOutlined',
+    },
+    '&.Mui-disabled': {
+      border: '1px solid',
+      borderColor: alpha(theme.palette.primary.main, 0.5),
+      color: alpha(theme.palette.primary.main, 0.5),
+    },
+  };
+
+  const outlinedSecondary = {
+    boxShadow: containedBoxShadow,
+    '&::before': {
+      backgroundColor: 'secondaryStates.hover',
+    },
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+    '&:active': {
+      backgroundColor: 'secondaryStates.activeOutlined',
+    },
+    '&.Mui-disabled': {
+      border: '1px solid',
+      borderColor: alpha(theme.palette.secondary.main, 0.5),
+      color: alpha(theme.palette.secondary.main, 0.5),
+    },
+  };
+
+  const textPrimary = {
+    boxShadow: containedBoxShadow,
+    '&::before': {
+      backgroundColor: 'primaryStates.hover',
+    },
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+    '&:active': {
+      backgroundColor: 'primaryStates.activeOutlined',
+    },
+    '&.Mui-disabled': {
+      color: alpha(theme.palette.primary.main, 0.5),
+    },
+  };
+
+  const textSecondary = {
+    boxShadow: containedBoxShadow,
+    '&::before': {
+      backgroundColor: 'secondaryStates.hover',
+    },
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+    '&:active': {
+      backgroundColor: 'secondaryStates.activeOutlined',
+    },
+    '&.Mui-disabled': {
+      color: alpha(theme.palette.secondary.main, 0.5),
+    },
+  };
+
   return (
     <MuiButton
       variant={variant}
       color={color}
       disabled={disabled}
-      {...props}
       sx={{
         borderRadius: '3px',
         padding: chunky ? '15px 23px' : '5px 15px',
@@ -57,65 +162,14 @@ const Button = ({
             width: '100%',
           },
         },
-        '&.MuiButton-containedPrimary': {
-          border: '1px solid',
-          borderColor: 'primary.main',
-          boxShadow: containedBoxShadow,
-          '&::before': {
-            backgroundColor: 'primary.dark',
-          },
-          '&:hover': {
-            backgroundColor: 'primary.main',
-            boxShadow: containedBoxShadow,
-          },
-        },
-        '&.MuiButton-containedSecondary': {
-          border: '1px solid',
-          borderColor: 'secondary.main',
-          boxShadow: containedBoxShadow,
-          '&::before': {
-            backgroundColor: 'secondary.dark',
-          },
-          '&:hover': {
-            backgroundColor: 'secondary.main',
-            boxShadow: containedBoxShadow,
-          },
-        },
-        '&.MuiButton-outlinedPrimary': {
-          '&::before': {
-            backgroundColor: 'rgba(4, 91, 86,.06)',
-          },
-          '&:hover': {
-            backgroundColor: 'transparent',
-          },
-        },
-        '&.MuiButton-outlinedSecondary': {
-          '&::before': {
-            backgroundColor: 'rgba(238, 139, 58,.06)',
-          },
-          '&:hover': {
-            backgroundColor: 'transparent',
-          },
-        },
-        '&.MuiButton-textPrimary': {
-          border: '1px solid rgba(4, 91, 86, 0.1)',
-          '&::before': {
-            backgroundColor: 'rgba(4, 91, 86, 0.1)',
-          },
-          '&:hover': {
-            backgroundColor: 'transparent',
-          },
-        },
-        '&.MuiButton-textSecondary': {
-          border: '1px solid rgba(238, 139, 58, 0.1)',
-          '&::before': {
-            backgroundColor: 'rgba(238, 139, 58, 0.1)',
-          },
-          '&:hover': {
-            backgroundColor: 'transparent',
-          },
-        },
+        '&.MuiButton-containedPrimary': containedPrimary,
+        '&.MuiButton-containedSecondary': containedSecondary,
+        '&.MuiButton-outlinedPrimary': outlinedPrimary,
+        '&.MuiButton-outlinedSecondary': outlinedSecondary,
+        '&.MuiButton-textPrimary': textPrimary,
+        '&.MuiButton-textSecondary': textSecondary,
       }}
+      {...props}
     >
       {children}
     </MuiButton>

diff --git a/src/components/DataGrid.tsx b/src/components/DataGrid.tsx
@@ -3,11 +3,16 @@ import {
   DataGridProps as MuiDataGridProps,
   GridColumns as MuiGridColumns,
   GridRowsProp as MuiGridRowsProp,
+  GridSelectionModel as MuiGridSelectionModel,
 } from '@mui/x-data-grid';
 
+export interface GridColumns extends MuiGridColumns {}
+export interface GridRowsProp extends MuiGridRowsProp {}
+export interface GridSelectionModel extends MuiGridSelectionModel {}
+
 export interface DataGridProps extends MuiDataGridProps {
-  columns: MuiGridColumns;
-  rows: MuiGridRowsProp;
+  columns: GridColumns;
+  rows: GridRowsProp;
   autoHeight?: boolean;
   checkboxSelection?: boolean;
   disableColumnMenu?: boolean;

diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx
@@ -1,10 +1,11 @@
-import { DatePicker as MuiDatePicker, DatePickerProps as MuiDatepickerProps } from '@mui/lab';
+import MuiDatePicker, { DatePickerProps as MuiDatepickerProps } from '@mui/lab/DatePicker';
 import Calendar from '../icons/Calendar';
-import TextField, { ColorTypes, TextFieldProps } from './TextField';
+import TextField, { TextFieldProps } from './TextField';
 
-export interface DatePickerProps<TDate> extends MuiDatepickerProps<TDate> {
-  color?: ColorTypes;
+export interface DatePickerProps<TDate>
+  extends Omit<MuiDatepickerProps<TDate>, 'renderInput' | 'InputProps'> {
   allowAllYears?: boolean;
+  InputProps?: TextFieldProps;
 }
 
 const isDisallowedYear = (date: Date) => {
@@ -15,8 +16,8 @@ const isDisallowedYear = (date: Date) => {
 
 const DatePicker = ({
   allowAllYears = false,
-  color = 'primary',
   showDaysOutsideCurrentMonth = true,
+  InputProps = { color: 'primary', id: 'datepicker' },
   ...props
 }: DatePickerProps<Date>): JSX.Element => {
   return (
@@ -72,7 +73,7 @@ const DatePicker = ({
       showDaysOutsideCurrentMonth={showDaysOutsideCurrentMonth}
       {...props}
       renderInput={(params) => {
-        return <TextField {...(params as TextFieldProps)} color={color} />;
+        return <TextField {...(params as TextFieldProps)} {...InputProps} />;
       }}
     />
   );

diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
@@ -1,18 +1,11 @@
 import { OptionsType } from './Autocomplete';
 import { Globe } from '../icons';
-import Select, { SelectProps } from './Select';
+import Select, { SingleSelectProps } from './Select';
 
-export type LanguageSelectProps<T = OptionsType> = Omit<SelectProps, 'adornment' | 'multiple'> & {
-  options: T[];
-  helperText?: string;
-  error?: boolean;
-  'data-testid'?: string;
-};
+export type LanguageSelectProps = Omit<SingleSelectProps, 'adornment' | 'multiple'>;
 
-const LanguageSelector = ({ options, ...props }: LanguageSelectProps): JSX.Element => {
-  return (
-    <Select {...(props as SelectProps)} adornment={<Globe fontSize="small" />} options={options} />
-  );
+const LanguageSelector = ({ ...props }: LanguageSelectProps): JSX.Element => {
+  return <Select multiple={false} adornment={<Globe fontSize="small" />} {...props} />;
 };
 
 export default LanguageSelector;
diff --git a/src/components/Progress.tsx b/src/components/Progress.tsx
@@ -21,10 +21,10 @@ const Progress = ({
   return (
     <>
       {type === 'circular' && (
-        <CircularProgress {...props} color={color} size={size} value={value} variant={variant} />
+        <CircularProgress color={color} size={size} value={value} variant={variant} {...props} />
       )}
       {type === 'linear' && (
-        <LinearProgress {...props} color={color} value={value} variant={variant} />
+        <LinearProgress color={color} value={value} variant={variant} {...props} />
       )}
     </>
   );

diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -2,28 +2,32 @@ import { Search as SearchIcon } from '../icons';
 import TextField, { TextFieldProps } from './TextField';
 import Autocomplete, { AutocompleteProps, OptionsType } from './Autocomplete';
 
-export type SearchProps<T = OptionsType> = (
-  | Omit<
-      AutocompleteProps<T>,
-      'adornment' | 'filterSelectedOptions' | 'getOptionLabel' | 'multiple'
-    >
-  | Omit<
-      TextFieldProps,
-      'endAdornment' | 'getOptionLabel' | 'hiddenLabel' | 'startAdornment' | 'variant'
-    >
-) & {
-  freeSolo?: boolean;
-  options?: T[];
+export type SingleOptionSearchProps = Omit<
+  TextFieldProps,
+  'endAdornment' | 'getOptionLabel' | 'hiddenLabel' | 'startAdornment' | 'variant'
+>;
+
+export type MultipleOptionsSearchProps = Omit<
+  AutocompleteProps<OptionsType>,
+  'adornment' | 'filterSelectedOptions' | 'getOptionLabel' | 'multiple' | 'options'
+> & {
+  options?: AutocompleteProps['options'];
 };
 
-const Search = ({ freeSolo = true, ...props }: SearchProps): JSX.Element => {
+export type SearchProps = MultipleOptionsSearchProps | SingleOptionSearchProps;
+
+const Search = ({ ...props }: SearchProps): JSX.Element => {
   const searchIcon = <SearchIcon fontSize="small" />;
+
+  const { freeSolo = true, options = [], ...multiProps } = props as MultipleOptionsSearchProps;
+  const singleProps = props as SingleOptionSearchProps;
+
   if ((props as AutocompleteProps).options?.length) {
     return (
-      <Autocomplete {...(props as AutocompleteProps)} adornment={searchIcon} freeSolo={freeSolo} />
+      <Autocomplete adornment={searchIcon} freeSolo={freeSolo} options={options} {...multiProps} />
     );
   }
-  return <TextField {...(props as TextFieldProps)} startAdornment={searchIcon} />;
+  return <TextField startAdornment={searchIcon} {...singleProps} />;
 };
 
 export default Search;
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,4 +5,5 @@ module.exports = { @@
       core: {
         builder: 'webpack5',
       },
+      staticDirs: ['../public'],
     };