@pautena/react-design-system 0.12.0 → 0.12.2

package/src/components/inputs/autocomplete/autocomplete.test.tsx

@@ -1,75 +0,0 @@
-import { render, screen } from "~/tests/testing-library";
-import { Autocomplete } from "./autocomplete";
-import { faker } from "@faker-js/faker";
-import React from "react";
-import { selectOption } from "~/tests/actions";
-import userEvents from "@testing-library/user-event";
-import { expectProgressIndicator } from "~/tests/assertions";
-import { vi } from "vitest";
-
-const options: string[] = [...faker.definitions.vehicle.model];
-
-describe("Autocomplete", () => {
-  const renderComponent = ({
-    value,
-    loading,
-    fetching,
-  }: { value?: string; loading?: boolean; fetching?: boolean } = {}) => {
-    const onChangeValue = vi.fn();
-    render(
-      <Autocomplete
-        label="Car model"
-        loading={loading}
-        fetching={fetching}
-        value={value}
-        options={options}
-        onChangeValue={onChangeValue}
-      />,
-    );
-
-    return { onChangeValue };
-  };
-
-  it("should render a label", () => {
-    renderComponent();
-
-    expect(screen.getByRole("combobox", { name: /car model/i })).toBeVisible();
-  });
-
-  it("should render the value if is defined", () => {
-    const value = options[3];
-    renderComponent({ value });
-
-    expect(screen.getByRole("combobox")).toHaveValue(value);
-  });
-
-  it("should call onChange when the selected value changes", async () => {
-    const { onChangeValue } = renderComponent();
-
-    await selectOption(screen.getByRole("combobox"), "Model T");
-
-    expect(onChangeValue).toHaveBeenCalledTimes(1);
-    expect(onChangeValue).toHaveBeenCalledWith("Model T");
-  });
-
-  it("should filter the options if the user enters a search", async () => {
-    renderComponent();
-
-    await userEvents.type(screen.getByRole("combobox"), "Rang");
-
-    expect(screen.getByRole("option", { name: "Durango" })).toBeVisible();
-    expect(screen.getByRole("option", { name: "Wrangler" })).toBeVisible();
-  });
-
-  it("should render a loading indicator if is fetching", () => {
-    renderComponent({ loading: true });
-
-    expectProgressIndicator();
-  });
-
-  it("should render a loading indicator if is loading", () => {
-    renderComponent({ fetching: true });
-
-    expectProgressIndicator();
-  });
-});

package/src/components/inputs/autocomplete/autocomplete.tsx

@@ -1,68 +0,0 @@
-import {
-  Autocomplete as MuiAutocomplete,
-  AutocompleteProps as MuiAutocompleteProps,
-  ChipTypeMap,
-} from "@mui/material";
-import React from "react";
-import { TextField } from "../text-field";
-
-export interface AutocompleteProps<
-  T,
-  Multiple extends boolean | undefined,
-  DisableClearable extends boolean | undefined,
-  FreeSolo extends boolean | undefined,
-  ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"],
-> extends Omit<
-    MuiAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>,
-    "renderInput" | "onChange" | "color"
-  > {
-  label: string;
-  helperText?: string;
-  color?: string;
-  fetching?: boolean;
-  onChangeValue?: (value: T) => void;
-}
-
-export const Autocomplete = <
-  T,
-  Multiple extends boolean | undefined,
-  DisableClearable extends boolean | undefined,
-  FreeSolo extends boolean | undefined,
-  ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"],
->(
-  props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>,
-) => {
-  const {
-    label,
-    loading,
-    fetching,
-    options,
-    helperText,
-    color,
-    onChangeValue = () => null,
-    sx,
-    ...rest
-  } = props;
-  const loadingOrFetching = loading || fetching;
-
-  return (
-    <MuiAutocomplete
-      loading={loadingOrFetching}
-      options={fetching ? [] : options}
-      onChange={(_, value) => onChangeValue(value as T)}
-      {...(rest as any)}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          label={label}
-          fullWidth
-          fetching={fetching}
-          loading={loading}
-          hexColor={color}
-          helperText={helperText}
-        />
-      )}
-      sx={sx}
-    />
-  );
-};

package/src/components/inputs/autocomplete/index.ts

@@ -1 +0,0 @@
-export * from "./autocomplete";

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

@@ -1,19 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { withContainer, withLocalizationProvider } from "~/storybook";
-import { DateRangeCalendar } from "./date-range-calendar";
-
-export default {
-  title: "Components/Inputs/DateRangeCalendar",
-  component: DateRangeCalendar,
-  decorators: [withLocalizationProvider],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof DateRangeCalendar>;
-type Story = StoryObj<typeof DateRangeCalendar>;
-
-export const Default: Story = {
-  args: {
-    defaultValue: [new Date(2023, 4, 2), new Date(2023, 4, 24)],
-  },
-};

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

@@ -1,150 +0,0 @@
-import { fireEvent, render, screen, waitFor } from "~/tests/testing-library";
-import { DateRangeCalendar } from "./date-range-calendar";
-import { vi } from "vitest";
-import React from "react";
-import { differenceInCalendarDays, format, addDays, subDays } from "date-fns";
-
-describe("DateRangeCalendar", () => {
-  const renderComponent = () => {
-    const onValueChange = vi.fn();
-    const startDate = new Date(2023, 4, 2);
-    const endDate = new Date(2023, 4, 24);
-    render(<DateRangeCalendar defaultValue={[startDate, endDate]} onValueChange={onValueChange} />);
-    return { startDate, endDate, onValueChange };
-  };
-
-  beforeEach(() => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date(2023, 4, 26));
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it("should mark the dates between the start and the end as selected", () => {
-    const { startDate, endDate } = renderComponent();
-
-    const days = differenceInCalendarDays(endDate, startDate);
-
-    for (let i = 0; i < days; ++i) {
-      const date = addDays(startDate, i);
-      expect(
-        screen.getByRole("gridcell", {
-          name: format(date, "yyyy-MM-dd"),
-          selected: true,
-        }),
-      ).toBeVisible();
-    }
-  });
-
-  it("should not mark as selected the date before and after the range", () => {
-    const { startDate, endDate } = renderComponent();
-
-    expect(
-      screen.getByRole("gridcell", {
-        name: format(subDays(startDate, 1), "yyyy-MM-dd"),
-        selected: false,
-      }),
-    ).toBeVisible();
-    expect(
-      screen.getByRole("gridcell", {
-        name: format(addDays(endDate, 1), "yyyy-MM-dd"),
-        selected: false,
-      }),
-    ).toBeVisible();
-  });
-
-  describe("onValueChange", () => {
-    it("should call onValueChange when the first date is selected with the first value changed", () => {
-      const { endDate, onValueChange } = renderComponent();
-
-      fireEvent.click(
-        screen.getByRole("gridcell", {
-          name: "4",
-        }),
-      );
-
-      expect(onValueChange).toHaveBeenCalledTimes(1);
-      expect(onValueChange).toHaveBeenCalledWith([new Date(2023, 4, 4), endDate], 0);
-    });
-
-    it("should call onValueChange when the second date is selected with the second value changed", () => {
-      const { onValueChange } = renderComponent();
-
-      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,
-      );
-    });
-
-    it("should call onValueChange when the third date is selected with the first value changed", () => {
-      const { onValueChange } = renderComponent();
-
-      fireEvent.click(
-        screen.getByRole("gridcell", {
-          name: "4",
-        }),
-      );
-      fireEvent.click(
-        screen.getByRole("gridcell", {
-          name: "12",
-        }),
-      );
-      fireEvent.click(
-        screen.getByRole("gridcell", {
-          name: "2",
-        }),
-      );
-
-      expect(onValueChange).toHaveBeenCalledTimes(3);
-      expect(onValueChange).toHaveBeenLastCalledWith(
-        [new Date(2023, 4, 2), new Date(2023, 4, 12)],
-        0,
-      );
-    });
-
-    it("should call onValueChange when a second date minor than the initial date is selected changing the first value", () => {
-      const { onValueChange } = renderComponent();
-
-      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 call onValueChange when the first date is bigger than the end date with the end date as undefined", () => {
-      const { onValueChange } = renderComponent();
-
-      fireEvent.click(
-        screen.getByRole("gridcell", {
-          name: "28",
-        }),
-      );
-
-      expect(onValueChange).toHaveBeenCalledTimes(1);
-      expect(onValueChange).toHaveBeenCalledWith([new Date(2023, 4, 28), undefined], 0);
-    });
-  });
-});

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

@@ -1,118 +0,0 @@
-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

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

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

@@ -1,32 +0,0 @@
-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

@@ -1,165 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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>
-    </>
-  );
-};