Version 1.0.2

package.json

@@ -2,7 +2,7 @@
   "name": "@lyyti/design-system",
   "description": "Lyyti Design System",
   "homepage": "https://lyytioy.github.io/lyyti-design-system",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "engines": {
     "node": "^16",
     "npm": "^8"
@@ -30,23 +30,25 @@
     "@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",
-    "@storybook/builder-webpack5": "^6.4.18",
-    "@storybook/manager-webpack5": "^6.4.18",
-    "@storybook/react": "^6.4.18",
-    "@types/node": "17.0.14",
-    "@types/react": "17.0.38",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/builder-webpack5": "^6.4.19",
+    "@storybook/manager-webpack5": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@types/node": "^16.11",
+    "@types/react": "17.0.43",
     "babel-loader": "^8.2.3",
-    "eslint": "8.8.0",
-    "eslint-config-next": "12.0.10",
+    "dayjs": "^1.11.0",
+    "eslint": "8.12.0",
+    "eslint-config-next": "12.1.2",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-storybook": "^0.5.6",
-    "next": "12.0.10",
+    "eslint-plugin-storybook": "^0.5.7",
+    "moment": "^2.29.1",
+    "next": "12.1.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "typescript": "4.5.5",
+    "typescript": "4.6.3",
     "webpack": "^5.66.0"
   },
   "main": "index.js",

src/components/Button.tsx

@@ -30,7 +30,7 @@ const Button = ({
     children.props.fontSize
   ) {
     return (
-      <IconButton color={color} disabled={disabled} size="large">
+      <IconButton color={color} disabled={disabled} size="large" {...props}>
         {children}
       </IconButton>
     );

src/components/Dialog.tsx

@@ -34,11 +34,7 @@ const Dialog = ({
         <Button
           onClick={onClose as MouseEventHandler<HTMLButtonElement>}
           sx={{
-            position: 'absolute',
-            right: '24px',
-            padding: '4px',
-            width: 'min-content',
-            minWidth: '32px',
+            padding: '12px',
             borderRadius: '50%',
           }}
         >

src/components/Progress.tsx

@@ -1,12 +1,12 @@
 import CircularProgress from './CircularProgress';
 import LinearProgress, { LinearProgressProps } from './LinearProgress';
 
-export interface ProgressProps extends LinearProgressProps {
-  color: 'primary' | 'secondary';
+export interface ProgressProps extends Omit<LinearProgressProps, 'color' | 'variant'> {
+  color?: 'primary' | 'secondary';
   size?: number | string;
-  type: 'circular' | 'linear';
+  type?: 'circular' | 'linear';
   value?: number;
-  variant: 'determinate' | 'indeterminate';
+  variant?: 'determinate' | 'indeterminate';
   'data-testid'?: string;
 }
 

src/components/Select.tsx

@@ -31,6 +31,7 @@ const Select = ({
         multiple={multiple}
         options={options}
         disableClearable
+        data-testid={testid}
         {...(props as MultipleSelectProps)}
       />
     );

src/components/TimePicker.tsx

@@ -1,144 +1,31 @@
-import Autocomplete, { AutocompleteProps } from './Autocomplete';
-import { SizeTypes } from './TextField';
-import { Clock } from '../icons';
+import MuiTimePicker, { TimePickerProps as MuiTimePickerProps } from '@mui/lab/TimePicker';
+import TextField, { TextFieldProps } from './TextField';
 
-const twentyFourHourTimes = [
-  { id: '00:00', value: '00:00' },
-  { id: '00:30', value: '00:30' },
-  { id: '01:00', value: '01:00' },
-  { id: '01:30', value: '01:30' },
-  { id: '02:00', value: '02:00' },
-  { id: '02:30', value: '02:30' },
-  { id: '03:00', value: '03:00' },
-  { id: '03:30', value: '03:30' },
-  { id: '04:00', value: '04:00' },
-  { id: '04:30', value: '04:30' },
-  { id: '05:00', value: '05:00' },
-  { id: '05:30', value: '05:30' },
-  { id: '06:00', value: '06:00' },
-  { id: '07:00', value: '07:00' },
-  { id: '07:30', value: '07:30' },
-  { id: '08:00', value: '08:00' },
-  { id: '08:30', value: '08:30' },
-  { id: '09:00', value: '09:00' },
-  { id: '09:30', value: '09:30' },
-  { id: '10:00', value: '10:00' },
-  { id: '10:30', value: '10:30' },
-  { id: '11:00', value: '11:00' },
-  { id: '11:30', value: '11:30' },
-  { id: '12:00', value: '12:00' },
-  { id: '12:30', value: '12:30' },
-  { id: '13:00', value: '13:00' },
-  { id: '13:30', value: '13:30' },
-  { id: '14:00', value: '14:00' },
-  { id: '14:30', value: '14:30' },
-  { id: '15:00', value: '15:00' },
-  { id: '15:30', value: '15:30' },
-  { id: '16:00', value: '16:00' },
-  { id: '16:30', value: '16:30' },
-  { id: '17:00', value: '17:00' },
-  { id: '17:30', value: '17:30' },
-  { id: '18:00', value: '18:00' },
-  { id: '18:30', value: '18:30' },
-  { id: '19:00', value: '19:00' },
-  { id: '19:30', value: '19:30' },
-  { id: '20:00', value: '20:00' },
-  { id: '20:30', value: '20:30' },
-  { id: '21:00', value: '21:00' },
-  { id: '21:30', value: '21:30' },
-  { id: '22:00', value: '22:00' },
-  { id: '22:30', value: '22:30' },
-  { id: '23:00', value: '23:00' },
-  { id: '23:30', value: '23:30' },
-];
-
-const twelveHourTimes = [
-  { id: '12:00 AM', value: '12:00 AM' },
-  { id: '12:30 AM', value: '12:30 AM' },
-  { id: '01:00 AM', value: '01:00 AM' },
-  { id: '01:30 AM', value: '01:30 AM' },
-  { id: '02:00 AM', value: '02:00 AM' },
-  { id: '02:30 AM', value: '02:30 AM' },
-  { id: '03:00 AM', value: '03:00 AM' },
-  { id: '03:30 AM', value: '03:30 AM' },
-  { id: '04:00 AM', value: '04:00 AM' },
-  { id: '04:30 AM', value: '04:30 AM' },
-  { id: '05:00 AM', value: '05:00 AM' },
-  { id: '05:30 AM', value: '05:30 AM' },
-  { id: '06:00 AM', value: '06:00 AM' },
-  { id: '07:00 AM', value: '07:00 AM' },
-  { id: '07:30 AM', value: '07:30 AM' },
-  { id: '08:00 AM', value: '08:00 AM' },
-  { id: '08:30 AM', value: '08:30 AM' },
-  { id: '09:00 AM', value: '09:00 AM' },
-  { id: '09:30 AM', value: '09:30 AM' },
-  { id: '10:00 AM', value: '10:00 AM' },
-  { id: '10:30 AM', value: '10:30 AM' },
-  { id: '11:00 AM', value: '11:00 AM' },
-  { id: '11:30 AM', value: '11:30 AM' },
-  { id: '12:00 PM', value: '12:00 PM' },
-  { id: '12:30 PM', value: '12:30 PM' },
-  { id: '01:00 PM', value: '01:00 PM' },
-  { id: '01:30 PM', value: '01:30 PM' },
-  { id: '02:00 PM', value: '02:00 PM' },
-  { id: '02:30 PM', value: '02:30 PM' },
-  { id: '03:00 PM', value: '03:00 PM' },
-  { id: '03:30 PM', value: '03:30 PM' },
-  { id: '04:00 PM', value: '04:00 PM' },
-  { id: '04:30 PM', value: '04:30 PM' },
-  { id: '05:00 PM', value: '05:00 PM' },
-  { id: '05:30 PM', value: '05:30 PM' },
-  { id: '06:00 PM', value: '06:00 PM' },
-  { id: '07:00 PM', value: '07:00 PM' },
-  { id: '07:30 PM', value: '07:30 PM' },
-  { id: '08:00 PM', value: '08:00 PM' },
-  { id: '08:30 PM', value: '08:30 PM' },
-  { id: '09:00 PM', value: '09:00 PM' },
-  { id: '09:30 PM', value: '09:30 PM' },
-  { id: '10:00 PM', value: '10:00 PM' },
-  { id: '10:30 PM', value: '10:30 PM' },
-  { id: '11:00 PM', value: '11:00 PM' },
-  { id: '11:30 PM', value: '11:30 PM' },
-];
-
-export interface TimePickerProps extends Omit<AutocompleteProps, 'renderInput' | 'options'> {
-  twelvehour?: boolean;
-  error?: boolean;
-  helperText?: string;
-  size?: SizeTypes;
-  label?: string;
+export interface TimePickerProps extends Omit<MuiTimePickerProps, 'renderInput' | 'InputProps'> {
+  InputProps?: TextFieldProps;
   'data-testid'?: string;
 }
 
-const TimePicker = ({
-  twelvehour,
-  error,
-  helperText,
-  size = 'small',
-  label,
-  ...props
-}: TimePickerProps): JSX.Element => {
+const TimePicker = ({ ampm = false, InputProps = {}, ...props }: TimePickerProps): JSX.Element => {
   return (
-    <Autocomplete
-      freeSolo
-      forcePopupIcon
-      popupIcon={<Clock color="inherit" />}
-      options={twelvehour ? twelveHourTimes : twentyFourHourTimes}
-      disableClearable={true}
-      size={size}
-      label={label}
-      error={error}
-      helperText={helperText}
-      sx={{
-        '& .MuiAutocomplete-popupIndicatorOpen': { transform: 'none' },
-      }}
+    <MuiTimePicker
+      ampm={ampm}
       {...props}
+      PopperProps={{
+        // @ts-ignore
+        sx: {
+          '& .MuiClockPicker-arrowSwitcher': {
+            width: '70px',
+
+            '& button:hover': {
+              backgroundColor: 'primary.light',
+            },
+          },
+        },
+      }}
+      renderInput={(params) => <TextField {...(params as TextFieldProps)} {...InputProps} />}
     />
   );
 };
 
-TimePicker.defaultProps = {
-  twelvehour: false,
-};
-
 export default TimePicker;

src/components/Tooltip.tsx

@@ -1,7 +1,7 @@
 import { Tooltip as MuiTooltip, TooltipProps as MuiTooltipProps } from '@mui/material';
 
 export interface TooltipProps extends MuiTooltipProps {
-  arrow: boolean;
+  arrow?: boolean;
   placement?:
     | 'bottom-end'
     | 'bottom-start'

src/index.ts

@@ -49,6 +49,7 @@ export { default as StepLabel } from './components/StepLabel';
 export { default as Stepper } from './components/Stepper';
 export { default as Switch } from './components/Switch';
 export { default as Tab } from './components/Tab';
+export { default as TabPanel } from '@mui/lab/TabPanel';
 export { default as Tabs } from './components/Tabs';
 export { default as TextField } from './components/TextField';
 export { default as TimePicker } from './components/TimePicker';

stories/Inputs/DatePicker.stories.tsx

@@ -74,7 +74,7 @@ Please install any of these date management libraries, @date-io adapter for it a
   },
 } as Meta;
 
-const TemplateDateFns: Story<DatePickerProps<Date>> = (args) => {
+const TemplateDateJs: Story<DatePickerProps<Date>> = (args) => {
   // Run `npm install @date-io/dayjs` to install the adapter
 
   // import AdapterDateFns from '@date-io/dayjs';
@@ -114,10 +114,10 @@ const TemplateMoment: Story<DatePickerProps<Date>> = (args) => {
   );
 };
 
-export const Default = TemplateMoment.bind({});
+export const Default = TemplateDateJs.bind({});
 Default.args = {};
 
-export const White = TemplateMoment.bind({});
+export const White = TemplateDateJs.bind({});
 White.args = {
   label: 'Event date',
   InputProps: { color: 'white' },
@@ -128,8 +128,8 @@ White.parameters = {
   backgrounds: { default: 'dark' },
 };
 
-export const DateFns = TemplateDateFns.bind({});
-DateFns.args = {
+export const DateMoment = TemplateMoment.bind({});
+DateMoment.args = {
   InputProps: { label: 'Birthday' },
   showDaysOutsideCurrentMonth: false,
   allowAllYears: true,