@pautena/react-design-system 0.4.7 → 0.5.0

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

@@ -0,0 +1,74 @@
+import { render, screen } from "~/tests/testing-library";
+import { EnhancedAutocomplete } from "./enhanced-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";
+
+const options: string[] = faker.definitions.vehicle?.model || [];
+
+describe("EnhancedAutocomplete", () => {
+  const renderComponent = ({
+    value,
+    loading,
+    fetching,
+  }: { value?: string; loading?: boolean; fetching?: boolean } = {}) => {
+    const onChangeValue = jest.fn();
+    render(
+      <EnhancedAutocomplete
+        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/enhanced-autocomplete/enhanced-autocomplete.tsx

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

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

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

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

@@ -0,0 +1,120 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate, withContainer } from "../../../storybook";
+import { EnhancedTextField } from "./enhanced-text-field";
+import { faker } from "@faker-js/faker";
+import { Box, IconButton, useTheme } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import React from "react";
+
+export default {
+  title: "Components/Inputs/EnhancedTextField",
+  component: EnhancedTextField,
+  decorators: [withContainer({ width: 200 })],
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof EnhancedTextField>;
+
+const options: string[] = faker.definitions.vehicle?.model || [];
+
+const Template = createTemplate(EnhancedTextField);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Car model",
+};
+
+export const HelperText = Template.bind({});
+HelperText.args = {
+  ...Default.args,
+  helperText: "This is a helper text",
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...Default.args,
+  loading: true,
+};
+
+export const LoadingWithValue = Template.bind({});
+LoadingWithValue.args = {
+  ...Default.args,
+  loading: true,
+  value: options[0],
+};
+
+export const Fetching = Template.bind({});
+Fetching.args = {
+  ...Default.args,
+  fetching: true,
+};
+
+export const FetchingWithEndAdornment = Template.bind({});
+FetchingWithEndAdornment.args = {
+  ...Default.args,
+  fetching: true,
+  InputProps: {
+    endAdornment: (
+      <IconButton>
+        <ClearIcon />
+      </IconButton>
+    ),
+  },
+};
+
+export const SizeSmall = Template.bind({});
+SizeSmall.args = {
+  ...Default.args,
+  size: "small",
+};
+
+export const SizeSmallFetching = Template.bind({});
+SizeSmallFetching.args = {
+  ...Default.args,
+  size: "small",
+  fetching: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Default.args,
+  disabled: true,
+};
+
+export const SizeSmallLoading = Template.bind({});
+SizeSmallLoading.args = {
+  ...Default.args,
+  size: "small",
+  loading: true,
+};
+
+type WithBackgroundProps = {
+  bgcolor: "primary" | "secondary";
+  fetching?: boolean;
+  loading?: boolean;
+};
+export const WithBackground = ({
+  bgcolor: bgcolorProp,
+  fetching,
+  loading,
+}: WithBackgroundProps) => {
+  const { palette } = useTheme();
+  const BackgroundColors: Record<"primary" | "secondary", string> = {
+    primary: palette.primary.main,
+    secondary: palette.secondary.main,
+  };
+  const bgcolor = BackgroundColors[bgcolorProp];
+  const color = palette.getContrastText(bgcolor);
+
+  return (
+    <Box bgcolor={bgcolor} padding={3}>
+      <EnhancedTextField label="Car model" hexColor={color} fetching={fetching} loading={loading} />
+    </Box>
+  );
+};
+
+WithBackground.args = {
+  bgcolor: "secondary",
+  loading: true,
+  fetching: true,
+};

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

@@ -0,0 +1,63 @@
+import { render, screen } from "~/tests/testing-library";
+import { EnhancedTextField } from "./enhanced-text-field";
+import { faker } from "@faker-js/faker";
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { expectProgressIndicator } from "~/tests/assertions";
+
+const options: string[] = faker.definitions.vehicle?.model || [];
+
+describe("EnhancedAutocomplete", () => {
+  const renderComponent = ({
+    value,
+    loading,
+    fetching,
+  }: { value?: string; loading?: boolean; fetching?: boolean } = {}) => {
+    const onChange = jest.fn();
+    render(
+      <EnhancedTextField
+        label="Car model"
+        loading={loading}
+        fetching={fetching}
+        value={value}
+        onChange={onChange}
+      />,
+    );
+
+    return { onChange };
+  };
+
+  it("should render a label", () => {
+    renderComponent();
+
+    expect(screen.getByRole("textbox", { name: /car model/i })).toBeVisible();
+  });
+
+  it("should render the value if is defined", () => {
+    const value = options[3];
+    renderComponent({ value });
+
+    expect(screen.getByRole("textbox")).toHaveValue(value);
+  });
+
+  it("should call onChange when we type something", async () => {
+    const { onChange } = renderComponent();
+
+    await userEvent.type(screen.getByRole("textbox"), "Model T");
+
+    expect(onChange).toHaveBeenCalledTimes(7);
+    expect(onChange.mock.calls[6][0].target.value).toBe("Model T");
+  });
+
+  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/enhanced-text-field/enhanced-text-field.tsx

@@ -0,0 +1,101 @@
+import {
+  autocompleteClasses,
+  CircularProgress,
+  circularProgressClasses,
+  FormControl,
+  FormHelperText,
+  iconButtonClasses,
+  InputAdornment,
+  InputLabel,
+  inputLabelClasses,
+  LinearProgress,
+  linearProgressClasses,
+  OutlinedInput,
+  outlinedInputClasses,
+  TextFieldProps,
+} from "@mui/material";
+import { unstable_useId as useId } from "@mui/utils";
+import React from "react";
+
+export type EnhancedTextFieldProps = TextFieldProps & {
+  fetching?: boolean;
+  loading?: boolean;
+  hexColor?: string;
+};
+
+export const EnhancedTextField = ({
+  id: overrideId,
+  label,
+  InputLabelProps,
+  InputProps,
+  fetching,
+  loading,
+  helperText,
+  hexColor,
+  size,
+  fullWidth,
+  sx,
+  ...rest
+}: EnhancedTextFieldProps) => {
+  const id = useId(overrideId);
+  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+  const inputLabelId = label && id ? `${id}-label` : undefined;
+
+  const hexColorSx = hexColor
+    ? {
+        [`& .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: `${hexColor} !important`,
+        },
+        [`& .${inputLabelClasses.root}`]: {
+          color: hexColor,
+        },
+        [`& .${outlinedInputClasses.input}`]: {
+          color: hexColor,
+        },
+        [`& .${circularProgressClasses.root}`]: {
+          color: hexColor,
+        },
+        [`& .${linearProgressClasses.bar}`]: {
+          backgroundColor: hexColor,
+        },
+        [`& .${autocompleteClasses.endAdornment} .${iconButtonClasses.root}`]: {
+          color: hexColor,
+        },
+      }
+    : {};
+
+  return (
+    <FormControl sx={hexColorSx} fullWidth={fullWidth}>
+      <InputLabel
+        size={size === "small" ? "small" : "normal"}
+        id={inputLabelId}
+        htmlFor={id}
+        {...InputLabelProps}
+      >
+        {label}
+      </InputLabel>
+      <OutlinedInput
+        {...InputProps}
+        id={id}
+        label={label}
+        size={size}
+        fullWidth={fullWidth}
+        endAdornment={
+          <InputAdornment position="end">
+            {InputProps?.endAdornment}
+            {fetching ? <CircularProgress color="inherit" size={20} sx={{ ml: 1 }} /> : null}
+          </InputAdornment>
+        }
+        sx={sx}
+        {...(rest as any)}
+      />
+      {loading && (
+        <LinearProgress
+          color="inherit"
+          sx={{ position: "absolute", left: 0, right: 0, bottom: 0 }}
+        />
+      )}
+      {helperText && <FormHelperText id={helperTextId}>{helperText}</FormHelperText>}
+    </FormControl>
+  );
+};

package/src/components/inputs/enhanced-text-field/index.ts

@@ -0,0 +1 @@
+export * from "./enhanced-text-field";

package/src/components/inputs/index.ts

@@ -1,2 +1,3 @@
 export * from "./enhanced-select";
 export * from "./sign-in";
+export * from "./enhanced-autocomplete";

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

@@ -8,4 +8,6 @@ import LinkTo from '@storybook/addon-links/react';
 <ul>
   <li><LinkTo kind="Components/Inputs/EnhancedSelect">EnhancedSelect</LinkTo></li>
   <li><LinkTo kind="Components/Inputs/Sign In">Sign In</LinkTo></li>
+  <li><LinkTo kind="Components/Inputs/EnhancedAutocomplete">EnhancedAutocomplete</LinkTo></li>
+  <li><LinkTo kind="Components/Inputs/EnhancedTextField">EnhancedTextField</LinkTo></li>
 </ul>

package/src/components/value-displays/index.ts

@@ -3,5 +3,6 @@ export * from "./value-card";
 export * from "./value-boolean";
 export * from "./value-datetime";
 export * from "./group-value-card";
-export * from "./value-displays.types";
+export * from "./value-base/value-displays.types";
 export * from "./value-rating";
+export * from "./value-base";

package/src/components/value-displays/value-base/index.ts

@@ -0,0 +1,2 @@
+export * from "./value-edit";
+export * from "./value-displays.types";

package/src/components/value-displays/{value-displays.types.ts → value-base/value-displays.types.ts}

@@ -1,5 +1,3 @@
-import { ReactElement } from "react";
-
 export interface BaseValueProps<T> {
   /**
    * Name of the displayed value
@@ -17,4 +15,16 @@ export interface BaseValueProps<T> {
   placeholder?: string;
 }
 
+export interface EditableValueProps<T> {
+  /**
+   * This field can be edited or not
+   */
+  editable?: boolean;
+
+  /**
+   * Callback executed when the value is edited
+   */
+  onEdit?: (value?: T) => void;
+}
+
 export const DefaultPlaceholder = "-";

package/src/components/value-displays/value-base/value-edit.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import CheckIcon from "@mui/icons-material/Check";
+import ClearIcon from "@mui/icons-material/Clear";
+import { Button, InputAdornment, SxProps, Theme } from "@mui/material";
+
+export interface ValueEditButtonsProps {
+  onClickCancel: () => void;
+  onSubmitEdit: () => void;
+  sx?: SxProps<Theme>;
+}
+
+export const ValueEditButtons = ({ onClickCancel, onSubmitEdit, sx }: ValueEditButtonsProps) => {
+  return (
+    <InputAdornment position="end" sx={sx}>
+      <Button
+        variant="contained"
+        size="small"
+        color="error"
+        startIcon={<ClearIcon />}
+        onClick={onClickCancel}
+        sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}
+      />
+      <Button
+        variant="contained"
+        size="small"
+        color="primary"
+        startIcon={<CheckIcon />}
+        onClick={onSubmitEdit}
+        sx={{ paddingRight: 0, minWidth: 0 }}
+      />
+    </InputAdornment>
+  );
+};
+
+/**
+ * Hook to manage the editing behaviour
+ */
+export const useEditableValueDisplay = <T,>(
+  initialValue: T | undefined,
+  onEdit: (value?: T) => void,
+) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState<T | undefined>(initialValue);
+
+  const cancelEdit = () => {
+    setIsEditing(false);
+    setEditValue(initialValue);
+  };
+  const startEdit = () => {
+    setIsEditing(true);
+  };
+
+  const submitEdit = () => {
+    onEdit(editValue);
+    cancelEdit();
+  };
+
+  return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };
+};

package/src/components/value-displays/value-boolean/value-boolean.stories.tsx

@@ -23,3 +23,10 @@ False.args = {
   label: "Lorem ipsum",
   value: false,
 };
+
+export const Editable = Template.bind({});
+Editable.args = {
+  label: "Lorem ipsum",
+  value: false,
+  editable: true,
+};

package/src/components/value-displays/value-boolean/value-boolean.test.tsx

@@ -1,10 +1,29 @@
 import React from "react";
 import { ValueBoolean } from "./value-boolean";
 import { render, screen } from "~/tests/testing-library";
+import userEvent from "@testing-library/user-event";
 
 describe("ValueBoolean", () => {
-  const renderComponent = ({ value, placeholder }: { value?: boolean; placeholder?: string }) => {
-    return render(<ValueBoolean label="Hello world" value={value} placeholder={placeholder} />);
+  const renderComponent = ({
+    value,
+    placeholder,
+    editable,
+  }: {
+    value?: boolean;
+    placeholder?: string;
+    editable?: boolean;
+  }) => {
+    const onEdit = jest.fn();
+    render(
+      <ValueBoolean
+        label="Hello world"
+        value={value}
+        placeholder={placeholder}
+        editable={editable}
+        onEdit={onEdit}
+      />,
+    );
+    return { onEdit };
   };
 
   it("would render the label", () => {
@@ -36,4 +55,64 @@ describe("ValueBoolean", () => {
 
     expect(screen.getByText(/_/i)).toBeInTheDocument();
   });
+
+  describe("editable", () => {
+    it("shouldn't render an option to edit if editable is false", () => {
+      renderComponent({ value: true, editable: false });
+
+      expect(screen.queryByTestId("EditIcon")).not.toBeInTheDocument();
+    });
+
+    it("should render an option to edit if editable is true", () => {
+      renderComponent({ value: true, editable: true });
+
+      expect(screen.getByTestId("EditIcon")).toBeVisible();
+    });
+
+    it("should render an input with the value if the edit button is clicked", async () => {
+      renderComponent({ value: true, editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+
+      expect(screen.getByRole("checkbox")).toBeChecked();
+    });
+
+    it.each([
+      [true, false],
+      [false, true],
+    ])(
+      "should submit %s if is edited and the initial value is %s",
+      async (expectedValue: boolean, initialValue: boolean) => {
+        const { onEdit } = renderComponent({ value: initialValue, editable: true });
+
+        await userEvent.click(screen.getByTestId("EditIcon"));
+        await userEvent.click(screen.getByRole("checkbox"));
+        await userEvent.click(screen.getByTestId("CheckIcon"));
+
+        expect(onEdit).toHaveBeenCalledTimes(1);
+        expect(onEdit).toHaveBeenCalledWith(expectedValue);
+      },
+    );
+
+    it("should not call onEdit if the edition is cancelled", async () => {
+      const { onEdit } = renderComponent({ value: true, editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("checkbox"));
+      await userEvent.click(screen.getByTestId("ClearIcon"));
+
+      expect(onEdit).not.toHaveBeenCalled();
+    });
+
+    it("should have the original value if is edited again after clear a change", async () => {
+      renderComponent({ value: true, editable: true });
+
+      await userEvent.click(screen.getByTestId("EditIcon"));
+      await userEvent.click(screen.getByRole("checkbox"));
+      await userEvent.click(screen.getByTestId("ClearIcon"));
+      await userEvent.click(screen.getByTestId("EditIcon"));
+
+      expect(screen.getByRole("checkbox")).toBeChecked();
+    });
+  });
 });