@sonardigital/carbon-ui 1.1.45 → 1.1.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonardigital/carbon-ui",
-  "version": "1.1.45",
+  "version": "1.1.48",
   "description": "",
   "main": "src/index.ts",
   "files": [
@@ -38,9 +38,11 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.2",
     "@mui/material": "^7.3.2",
+    "@mui/x-date-pickers": "^8.12.0",
     "@sonardigital/carbon-ui": "^1.1.18",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
+    "dayjs": "^1.11.18",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",

package/src/components/form/fields/FormDatePicker.tsx

@@ -0,0 +1,21 @@
+import { Controller } from 'react-hook-form';
+import { FormLabel } from '../layout';
+import { DatePicker, DatePickerProps } from '../../inputs/DatePicker';
+
+interface FormDatePickerProps extends DatePickerProps {
+  name: string;
+  label: string;
+}
+
+export function FormDatePicker({ name, label, ...props }: FormDatePickerProps): React.ReactElement {
+  return (
+    <Controller
+      name={name}
+      render={({ field }) => (
+        <FormLabel label={label}>
+          <DatePicker {...field} {...props} />
+        </FormLabel>
+      )}
+    />
+  );
+}

package/src/components/form/fields/FormMultiselect.tsx

@@ -13,7 +13,7 @@ interface MultiselectAutocompleteProps
   name: string;
   label: string;
   placeholder?: string;
-  options: { label: string; value: string | number }[];
+  options?: { label: string; value: string | number }[];
   helperText?: string;
   fetchOptions?: () => Promise<{ label: string; value: string | number }[]>;
 }

package/src/components/form/fields/FormSelect.tsx

@@ -12,7 +12,7 @@ interface SelectAutocompleteProps
   name: string;
   label: string;
   placeholder?: string;
-  options: { label: string; value: string | number }[];
+  options?: { label: string; value: string | number }[];
   helperText?: string;
   fetchOptions?: () => Promise<{ label: string; value: string | number }[]>;
 }

package/src/components/form/fields/index.ts

@@ -5,3 +5,4 @@ export * from './FormSelect';
 export * from './FormMultiselect';
 export * from './FormSwitch';
 export * from './form-list/FormList';
+export * from './FormDatePicker';

package/src/components/inputs/DatePicker.tsx

@@ -0,0 +1,119 @@
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import {
+  DatePickerProps as MUIDatePickerProps,
+  DatePicker as MUIDatePicker,
+} from '@mui/x-date-pickers/DatePicker';
+import { IconButton, useTheme } from '@mui/material';
+import { CalendarToday } from '@mui/icons-material';
+import 'dayjs/locale/it';
+import dayjs from 'dayjs';
+import React from 'react';
+
+export interface DatePickerProps extends Omit<MUIDatePickerProps, 'value' | 'onChange'> {
+  value: string | null;
+  onChange: (value: string | null) => void;
+  adapterLocale?: string;
+}
+
+const itLocale = dayjs.Ls.it;
+
+dayjs.locale({
+  ...itLocale,
+  months: itLocale.months?.map((m) => m.charAt(0).toUpperCase() + m.slice(1)),
+});
+
+export function DatePicker({
+  value,
+  onChange,
+  adapterLocale = 'it',
+  ...props
+}: DatePickerProps): React.ReactElement {
+  const theme = useTheme();
+
+  return (
+    <LocalizationProvider
+      dateAdapter={AdapterDayjs}
+      adapterLocale={adapterLocale}
+      dateFormats={{
+        month: 'MMMM',
+      }}
+    >
+      <MUIDatePicker
+        value={value ? dayjs(value) : null}
+        onChange={(v) => {
+          onChange(v ? dayjs(v).toISOString() : null);
+        }}
+        format="DD/MM/YYYY"
+        slots={{
+          openPickerButton: IconButton,
+          openPickerIcon: CalendarToday,
+        }}
+        slotProps={{
+          day: {
+            sx: {
+              fontWeight: 400,
+            },
+          },
+          leftArrowIcon: {
+            sx: { width: 20, height: 20 },
+          },
+          mobileTransition: {
+            timeout: 0,
+          },
+          desktopTransition: {
+            timeout: 0,
+          },
+          rightArrowIcon: {
+            sx: { width: 20, height: 20 },
+          },
+          yearButton: {
+            sx: {
+              width: 75,
+              height: 40,
+              borderRadius: 1.5,
+              fontSize: 15,
+            },
+          },
+          switchViewIcon: {
+            sx: { width: 20, height: 20, opacity: 0.9 },
+          },
+          desktopPaper: {
+            ...theme.components?.MuiPaper?.defaultProps,
+            sx: {
+              ...theme.components?.MuiPaper?.defaultProps?.sx,
+              mt: 1,
+              backgroundColor: 'background.default',
+              boxShadow: '0px 4px 10px rgba(0, 0, 0, 0)',
+              border: 1,
+              borderColor: 'grey.300',
+            },
+          },
+          openPickerButton: {
+            size: 'large',
+            style: {
+              marginRight: -5,
+            },
+          },
+          openPickerIcon: {
+            sx: {
+              width: 17,
+              height: 17,
+            },
+          },
+          textField: {
+            variant: 'outlined',
+            ...theme.components?.MuiTextField?.defaultProps,
+            InputProps: {
+              sx: {
+                ...theme.components?.MuiTextField?.defaultProps?.InputProps?.sx,
+              },
+            },
+            sx: {},
+          },
+        }}
+        {...props}
+      />
+    </LocalizationProvider>
+  );
+}

package/src/components/inputs/SelectAutocomplete.tsx

@@ -5,7 +5,7 @@ import { RiCloseFill } from 'react-icons/ri';
 interface SelectAutocompleteProps
   extends Omit<
     AutocompleteProps<{ label: string; value: string | number }, false, false, false>,
-    'renderInput' | 'onChange' | 'value'
+    'renderInput' | 'onChange' | 'value' | 'options'
   > {
   value: string | number | null;
   onChange: (value: string | number | null) => void;