Merge pull request #73 from Eureka-Shoulders/feat/date_time_picker

feat: date time picker

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@euk-labs/componentz",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
@@ -36,9 +36,9 @@
     "@commitlint/config-conventional": "^16.2.1",
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.2.5",
-    "@mui/lab": "^5.0.0-alpha.71",
-    "@mui/material": "^5.4.4",
+    "@mui/icons-material": "^5.8.0",
+    "@mui/lab": "^5.0.0-alpha.83",
+    "@mui/material": "^5.8.1",
     "@storybook/addon-actions": "^6.4.17",
     "@storybook/addon-essentials": "^6.4.17",
     "@storybook/addon-interactions": "^6.4.17",
@@ -80,9 +80,9 @@
   "peerDependencies": {
     "@emotion/react": ">=11.6.0",
     "@emotion/styled": ">=11.6.0",
-    "@mui/icons-material": "^5.2.4",
-    "@mui/lab": ">=5.0.0-alpha.55",
-    "@mui/material": ">=5.1.1",
+    "@mui/icons-material": ">=5.8.0",
+    "@mui/lab": ">=5.0.0-alpha.83",
+    "@mui/material": ">=5.8.1",
     "mobx": ">=6.3.7",
     "mobx-react-lite": ">=3.2.2",
     "react": ">=17",

src/components/Inputs/DateTimePicker/index.tsx

@@ -0,0 +1,34 @@
+import {
+  DateTimePicker as MuiDateTimePicker,
+  DateTimePickerProps as MuiDateTimePickerProps,
+} from '@mui/lab';
+import { TextField, TextFieldProps } from '@mui/material';
+
+export type DateTimePickerProps = {
+  label?: string;
+  textFieldProps?: TextFieldProps;
+  onChange: (date: unknown, keyboardInputValue: string | undefined) => void;
+  value: Date | string | undefined;
+} & Omit<MuiDateTimePickerProps, 'renderInput' | 'onChange' | 'value'>;
+
+function DateTimePicker({
+  label,
+  onChange,
+  value,
+  textFieldProps,
+  ...props
+}: DateTimePickerProps) {
+  return (
+    <MuiDateTimePicker
+      {...props}
+      value={value}
+      onChange={onChange}
+      label={label}
+      renderInput={(params) => (
+        <TextField {...params} fullWidth {...textFieldProps} />
+      )}
+    />
+  );
+}
+
+export default DateTimePicker;

src/components/Inputs/index.ts

@@ -7,6 +7,10 @@ export {
 } from './Autocomplete';
 export { default as Checkbox, type CheckboxProps } from './Checkbox';
 export { default as DatePicker, type DatePickerProps } from './DatePicker';
+export {
+  default as DateTimePicker,
+  type DateTimePickerProps,
+} from './DateTimePicker';
 export { default as MaskedField, type MaskedFieldProps } from './MaskedField';
 export { default as PasswordField } from './PasswordField';
 export {