@pautena/react-design-system 0.8.2 → 0.10.0

package/src/components/inputs/date-range-calendar/date-range-calendar.tsx

@@ -0,0 +1,118 @@
+import { Box, BoxProps, styled } from "@mui/material";
+import { DateCalendar, PickersDay, PickersDayProps } from "@mui/x-date-pickers";
+import { endOfWeek, format, isAfter, isSameDay, startOfWeek } from "date-fns";
+import { isBefore } from "date-fns/esm";
+import React, { useState } from "react";
+
+type DateRange = [Date, Date | undefined];
+
+interface CustomPickerDayProps extends BoxProps {
+  dayIsBetween: boolean;
+  isFirstDay: boolean;
+  isLastDay: boolean;
+}
+
+const CustomPickersDayBackground = styled(Box, {
+  shouldForwardProp: (prop) =>
+    prop !== "dayIsBetween" &&
+    prop !== "isFirstDay" &&
+    prop !== "isLastDay" &&
+    prop !== "isStartOfWeek" &&
+    prop !== "isEndOfWeek",
+})<CustomPickerDayProps>(({ theme, dayIsBetween, isFirstDay, isLastDay }) => {
+  return {
+    ...((isFirstDay || isLastDay || dayIsBetween) && {
+      borderRadius: 0,
+      backgroundColor: `${theme.palette.primary.light}40`,
+      margin: 0,
+    }),
+    ...(isFirstDay && {
+      borderTopLeftRadius: "50%",
+      borderBottomLeftRadius: "50%",
+    }),
+    ...(isLastDay && {
+      borderTopRightRadius: "50%",
+      borderBottomRightRadius: "50%",
+    }),
+  };
+}) as React.ComponentType<CustomPickerDayProps>;
+
+const Day = (props: PickersDayProps<Date> & { dateRange?: DateRange | null }) => {
+  const { day, dateRange, ...other } = props;
+
+  if (dateRange == null) {
+    return <PickersDay day={day} {...other} />;
+  }
+
+  const [start, end] = dateRange;
+
+  const dayIsBetween = !!end && isAfter(day, start) && isBefore(day, end);
+  const isFirstDay = isSameDay(day, start);
+  const isLastDay = !!end && isSameDay(day, end);
+  const isStartOfWeek = isSameDay(day, startOfWeek(day));
+  const isEndOfWeek = isSameDay(day, endOfWeek(day));
+
+  return (
+    <CustomPickersDayBackground
+      dayIsBetween={dayIsBetween}
+      isFirstDay={isFirstDay || (dayIsBetween && isStartOfWeek)}
+      isLastDay={isLastDay || (dayIsBetween && isEndOfWeek)}
+      aria-label={format(day, "yyyy-MM-dd")}
+      aria-selected={dayIsBetween || isFirstDay || isLastDay}
+      role="gridcell"
+    >
+      <PickersDay {...other} day={day} selected={isFirstDay || isLastDay} />
+    </CustomPickersDayBackground>
+  );
+};
+
+export interface DateRangeCalendarProps {
+  defaultValue: DateRange;
+  onValueChange: (value: DateRange, updatedIndex: number) => void;
+}
+export const DateRangeCalendar = ({ defaultValue, onValueChange }: DateRangeCalendarProps) => {
+  const [value, setValue] = useState(defaultValue);
+  const [index, setIndex] = useState(0);
+
+  const setValueRange = (newRange: DateRange, index: number, newIndex: number) => {
+    setValue(newRange);
+    onValueChange(newRange, index);
+    setIndex(newIndex);
+  };
+
+  const handleChange = (newValue: Date | null) => {
+    if (!newValue) {
+      return;
+    }
+
+    // If is the end date and is minor than the start date
+    if (index === 1 && newValue < value[0]) {
+      return setValueRange([newValue, undefined], 0, 1);
+    }
+
+    // If is the start date and is bigger than the end date
+    if (index === 0 && value[1] && newValue > value[1]) {
+      return setValueRange([newValue, undefined], 0, 1);
+    }
+
+    // Default case
+    setValueRange(
+      [index === 0 ? newValue : value[0], index === 1 ? newValue : value[1]],
+      index,
+      index === 0 ? 1 : 0,
+    );
+  };
+  return (
+    <DateCalendar
+      value={null}
+      onChange={handleChange}
+      slots={{ day: Day }}
+      slotProps={{
+        day: {
+          dateRange: value,
+        } as any,
+      }}
+      aria-label="calendar range picker"
+    />
+  );
+};

package/src/components/inputs/date-range-calendar/index.ts

@@ -0,0 +1 @@
+export * from "./date-range-calendar";

package/src/components/inputs/date-range-picker/date-range-picker.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { withContainer, withLocalizationProvider } from "~/storybook";
+import { DateRangePicker } from "./date-range-picker";
+
+export default {
+  title: "Components/Inputs/DateRangePicker",
+  component: DateRangePicker,
+  decorators: [withLocalizationProvider, withContainer({ width: 300 })],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof DateRangePicker>;
+type Story = StoryObj<typeof DateRangePicker>;
+
+export const Default: Story = {
+  args: {
+    label: "Select your date range",
+    defaultValue: [new Date(2023, 4, 9), new Date(2023, 4, 18)],
+    format: "yyyy/MM/dd",
+    fullWidth: true,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    label: "Select your date range",
+    defaultValue: [new Date(2023, 4, 9), new Date(2023, 4, 18)],
+    format: "yyyy/MM/dd",
+    fullWidth: true,
+    size: "small",
+  },
+};

package/src/components/inputs/date-range-picker/date-range-picker.test.tsx

@@ -0,0 +1,165 @@
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from "~/tests/testing-library";
+import { DateRangePicker } from "./date-range-picker";
+import { vi } from "vitest";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+
+describe("DateRangePicker", () => {
+  const renderComponent = () => {
+    const onValueChange = vi.fn();
+    const startDate = new Date(2023, 4, 2);
+    const endDate = new Date(2023, 4, 24);
+    render(
+      <DateRangePicker
+        label="lorem ipsum"
+        format="yyyy-MM-dd"
+        defaultValue={[startDate, endDate]}
+        onValueChange={onValueChange}
+      />,
+    );
+    return { startDate, endDate, onValueChange };
+  };
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date(2023, 4, 26));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should render an input with a label", () => {
+    renderComponent();
+
+    expect(screen.getByRole("textbox", { name: /lorem ipsum/i })).toBeVisible();
+  });
+
+  it("should render the value inside the input with the correct format", () => {
+    renderComponent();
+
+    expect(screen.getByRole("textbox")).toHaveValue("2023-05-02 - 2023-05-24");
+  });
+
+  it("should open a date selector if the calendar icon is clicked", () => {
+    renderComponent();
+
+    fireEvent.click(screen.getByRole("button", { name: /open calendar/i }));
+
+    expect(screen.getByLabelText(/calendar range picker/i)).toBeVisible();
+  });
+
+  describe("date selection", () => {
+    it("should call onValueChange when the first date is selected with the first value changed", () => {
+      const { endDate, onValueChange } = renderComponent();
+      fireEvent.click(screen.getByRole("button", { name: /open calendar/i }));
+
+      fireEvent.click(
+        screen.getByRole("gridcell", {
+          name: "4",
+        }),
+      );
+
+      expect(onValueChange).toHaveBeenCalledTimes(1);
+      expect(onValueChange).toHaveBeenCalledWith([new Date(2023, 4, 4), endDate], 0);
+    });
+
+    describe("second value selected", () => {
+      it("should call onValueChange when the second date is selected with the second value changed", () => {
+        const { onValueChange } = renderComponent();
+        fireEvent.click(screen.getByRole("button", { name: /open calendar/i }));
+
+        fireEvent.click(
+          screen.getByRole("gridcell", {
+            name: "4",
+          }),
+        );
+        fireEvent.click(
+          screen.getByRole("gridcell", {
+            name: "12",
+          }),
+        );
+
+        expect(onValueChange).toHaveBeenCalledTimes(2);
+        expect(onValueChange).toHaveBeenLastCalledWith(
+          [new Date(2023, 4, 4), new Date(2023, 4, 12)],
+          1,
+        );
+      });
+    });
+
+    describe(" when a second date minor than the initial date", () => {
+      it("should call onValueChange changing the first value with end date as undefined", () => {
+        const { onValueChange } = renderComponent();
+        fireEvent.click(screen.getByRole("button", { name: /open calendar/i }));
+
+        fireEvent.click(
+          screen.getByRole("gridcell", {
+            name: "12",
+          }),
+        );
+        fireEvent.click(
+          screen.getByRole("gridcell", {
+            name: "6",
+          }),
+        );
+
+        expect(onValueChange).toHaveBeenCalledTimes(2);
+        expect(onValueChange).toHaveBeenLastCalledWith([new Date(2023, 4, 6), undefined], 0);
+      });
+
+      it("should show the date format as end date", () => {
+        renderComponent();
+        fireEvent.click(screen.getByRole("button", { name: /open calendar/i }));
+
+        fireEvent.click(
+          screen.getByRole("gridcell", {
+            name: "12",
+          }),
+        );
+        fireEvent.click(
+          screen.getByRole("gridcell", {
+            name: "6",
+          }),
+        );
+
+        expect(screen.getByRole("textbox")).toHaveValue("2023-05-06 - YYYY-MM-DD");
+      });
+    });
+
+    describe("when the first date is bigger than the end date", () => {
+      it("should call onValueChange changing the firest value with the end date as undefined", () => {
+        const { onValueChange } = renderComponent();
+        fireEvent.click(screen.getByRole("button", { name: /open calendar/i }));
+
+        fireEvent.click(
+          screen.getByRole("gridcell", {
+            name: "28",
+          }),
+        );
+
+        expect(onValueChange).toHaveBeenCalledTimes(1);
+        expect(onValueChange).toHaveBeenCalledWith([new Date(2023, 4, 28), undefined], 0);
+      });
+
+      it("should show the date format as end date", () => {
+        renderComponent();
+        fireEvent.click(screen.getByRole("button", { name: /open calendar/i }));
+
+        fireEvent.click(
+          screen.getByRole("gridcell", {
+            name: "28",
+          }),
+        );
+
+        expect(screen.getByRole("textbox")).toHaveValue("2023-05-28 - YYYY-MM-DD");
+      });
+    });
+  });
+});

package/src/components/inputs/date-range-picker/date-range-picker.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { format } from "date-fns";
+import {
+  Box,
+  Button,
+  Collapse,
+  Grid,
+  IconButton,
+  InputAdornment,
+  Paper,
+  TextField,
+} from "@mui/material";
+import EventIcon from "@mui/icons-material/Event";
+import { DateRangeCalendar } from "../date-range-calendar";
+
+type DateRange = [Date, Date | undefined];
+export interface DateRangePickerProps {
+  label: string;
+  defaultValue: DateRange;
+  format: string;
+  fullWidth?: boolean;
+  size?: "small" | "medium";
+  onValueChange: (value: DateRange, index: number) => void;
+}
+
+export const DateRangePicker = ({
+  defaultValue,
+  format: fmt,
+  label,
+  fullWidth,
+  onValueChange,
+  size = "medium",
+}: DateRangePickerProps) => {
+  const [isPopoverOpened, setIsPopoverOpened] = useState(false);
+  const [value, setValue] = useState(defaultValue);
+
+  const handleValueChange = (newValue: DateRange, index: number) => {
+    setValue(newValue);
+    onValueChange(newValue, index);
+    setIsPopoverOpened(index < 1);
+  };
+
+  return (
+    <>
+      <TextField
+        label={label}
+        fullWidth={fullWidth}
+        size={size}
+        value={`${format(value[0], fmt)} - ${value[1] ? format(value[1], fmt) : fmt.toUpperCase()}`}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton onClick={() => setIsPopoverOpened((o) => !o)} aria-label="open calendar">
+                <EventIcon />
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
+      />
+      <Paper>
+        <Collapse in={isPopoverOpened} aria-label="calendar collapse">
+          <DateRangeCalendar defaultValue={defaultValue} onValueChange={handleValueChange} />
+        </Collapse>
+      </Paper>
+    </>
+  );
+};

package/src/components/inputs/date-range-picker/index.ts

@@ -0,0 +1 @@
+export * from "./date-range-picker";

package/src/components/inputs/index.ts

@@ -1,4 +1,6 @@
 export * from "./select";
 export * from "./sign-in";
 export * from "./autocomplete";
+export * from "./date-range-picker";
+export * from "./date-range-calendar";
 export * from "./text-field";

package/src/components/inputs/inputs.stories.mdx

@@ -11,4 +11,6 @@ import LinkTo from '@storybook/addon-links/react';
   <li><LinkTo kind="Components/Inputs/Autocomplete">Autocomplete</LinkTo></li>
   <li><LinkTo kind="Components/Inputs/TextField">TextField</LinkTo></li>
   <li><LinkTo kind="Components/Inputs/SearchInput">SearchInput</LinkTo></li>
+  <li><LinkTo kind="Components/Inputs/DateRangePicker">DateRangePicker</LinkTo></li>
+  <li><LinkTo kind="Components/Inputs/DateRangePicker">DateRangeCalendar</LinkTo></li>
 </ul>

package/src/components/inputs/select/select.stories.tsx

@@ -12,7 +12,7 @@ const baseArgs = {
   fetching: false,
   loading: false,
   fullWidth: true,
-  options: faker.definitions.vehicle?.model || [],
+  options: [...faker.definitions.vehicle.model],
 };
 
 interface TemplateProps<T extends ReactNode> extends SelectProps<T> {

package/src/components/inputs/text-field/text-field.stories.tsx

@@ -16,7 +16,7 @@ export default {
 } satisfies Meta<typeof TextField>;
 type Story = StoryObj<typeof TextField>;
 
-const options: string[] = faker.definitions.vehicle?.model || [];
+const options = faker.definitions.vehicle?.model || [];
 
 export const Default: Story = {
   args: {

package/src/components/inputs/text-field/text-field.test.tsx

@@ -6,7 +6,7 @@ import userEvent from "@testing-library/user-event";
 import { expectProgressIndicator } from "~/tests/assertions";
 import { vi } from "vitest";
 
-const options: string[] = faker.definitions.vehicle?.model || [];
+const options = faker.definitions.vehicle?.model || [];
 
 describe("TextField", () => {
   const renderComponent = ({

package/src/generators/generators.mock.ts

@@ -17,6 +17,7 @@ export const mockModel: Model = {
       sm: 6,
       md: 4,
       listable: false,
+      updatable: false,
     },
     {
       id: "firstName",
@@ -37,6 +38,7 @@ export const mockModel: Model = {
       sm: 6,
       md: 4,
       listable: true,
+      required: false,
     },
     {
       id: "lastName",
@@ -48,16 +50,6 @@ export const mockModel: Model = {
       md: 4,
       listable: true,
     },
-    {
-      id: "gender",
-      type: "enum",
-      value: faker.definitions.name?.gender || [],
-      description: "User gender",
-      name: "Gender",
-      xs: 12,
-      sm: 6,
-      md: 3,
-    },
     {
       id: "age",
       type: "number",
@@ -67,6 +59,7 @@ export const mockModel: Model = {
       sm: 6,
       md: 3,
       listable: false,
+      required: false,
     },
     {
       id: "birthDate",
@@ -90,7 +83,7 @@ export const mockModel: Model = {
         {
           id: "model",
           type: "enum",
-          value: faker.definitions.vehicle?.model || [],
+          value: [...faker.definitions.vehicle.model],
           description: "Lorem ipsum",
           name: "Model",
           xs: 12,
@@ -99,7 +92,7 @@ export const mockModel: Model = {
         {
           id: "manufacturer",
           type: "enum",
-          value: faker.definitions.vehicle?.manufacturer || [],
+          value: [...faker.definitions.vehicle.manufacturer],
           description: "Lorem ipsum",
           name: "Manufacturer",
           xs: 12,
@@ -116,7 +109,7 @@ export const mockModel: Model = {
         {
           id: "type",
           type: "multienum",
-          value: faker.definitions.vehicle?.type || [],
+          value: [...faker.definitions.vehicle.type],
           description: "Lorem ipsum",
           name: "Type",
           xs: 12,
@@ -209,7 +202,6 @@ export interface MockInstance {
   firstName: string;
   middleName: string;
   lastName: string;
-  gender: string;
   age: number;
   birthDate: Date;
   car: {
@@ -235,7 +227,6 @@ const mockFieldValue: Record<string, () => FieldType> = {
   firstName: faker.name.firstName,
   middleName: faker.name.middleName,
   lastName: faker.name.lastName,
-  gender: faker.name.gender,
   age: () => faker.datatype.number({ min: 20, max: 60 }),
   birthDate: () => new Date(2019, 3, 2),
   returnTime: () => new Date(2022, 10, 2, 11, 0),

package/src/generators/generators.model.test.ts

@@ -21,7 +21,6 @@ describe("utilities", () => {
         },
         currency: "",
         firstName: "",
-        gender: "",
         id: "",
         lastName: "",
         middleName: "",
@@ -49,7 +48,6 @@ describe("utilities", () => {
           type: ["sub", "sport"],
         },
         available: true,
-        gender: "female",
         identifiers: ["1", "2"],
       });
 
@@ -68,7 +66,6 @@ describe("utilities", () => {
         },
         currency: "EUR",
         firstName: "",
-        gender: "female",
         id: "1",
         lastName: "",
         middleName: "",

package/src/generators/generators.model.ts

@@ -19,6 +19,8 @@ type Base = {
   description: string;
   name: string;
   listable?: boolean;
+  updatable?: boolean;
+  required?: boolean;
 };
 
 type Breakpoints = {