@pautena/react-design-system 0.11.2 → 0.12.1

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

@@ -1,72 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ValueText } from "./value-text";
-import { withContainer } from "../../../storybook";
-
-export default {
-  title: "Components/Value displays/ValueText",
-  component: ValueText,
-  decorators: [withContainer({ width: 200 })],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof ValueText>;
-type Story = StoryObj<typeof ValueText>;
-
-export const Default: Story = {
-  args: {
-    label: "Lorem",
-    value: "ipsum sit",
-  },
-};
-
-export const Dense: Story = {
-  args: {
-    label: "Lorem",
-    value: "ipsum sit",
-    dense: true,
-  },
-};
-
-export const NumberAsValue: Story = {
-  args: {
-    label: "Lorem",
-    value: 1000,
-  },
-};
-
-export const TruncatedText: Story = {
-  args: {
-    label: "Lorem",
-    value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-  },
-};
-
-export const Placeholder: Story = {
-  args: {
-    label: "Lorem",
-  },
-};
-
-export const CustomPlaceholder: Story = {
-  args: {
-    label: "Lorem",
-    placeholder: ".",
-  },
-};
-
-export const Editable: Story = {
-  args: {
-    label: "Lorem",
-    value: "lorem ipsum",
-    editable: true,
-  },
-};
-
-export const DenseEditable: Story = {
-  args: {
-    label: "Lorem",
-    value: "lorem ipsum",
-    dense: true,
-    editable: true,
-  },
-};

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

@@ -1,129 +0,0 @@
-import React from "react";
-import { render, screen } from "~/tests/testing-library";
-import { ValueText } from "./value-text";
-import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
-
-const DummyValue = "Lorem ipsum sit amet";
-
-describe("ValueText", () => {
-  const renderComponent = ({
-    value,
-    placeholder,
-    editable,
-  }: {
-    value?: string | number;
-    placeholder?: string;
-    editable?: boolean;
-  }) => {
-    const onEdit = vi.fn();
-    render(
-      <ValueText
-        label="Hello world"
-        value={value}
-        placeholder={placeholder}
-        editable={editable}
-        onEdit={onEdit}
-      />,
-    );
-    return { onEdit };
-  };
-
-  it("would render the label", () => {
-    renderComponent({ value: DummyValue });
-
-    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
-  });
-
-  it("would render the value", () => {
-    renderComponent({ value: DummyValue });
-
-    expect(screen.getByText(/lorem ipsum sit amet/i)).toBeInTheDocument();
-  });
-
-  it("would render the value if is a number", () => {
-    renderComponent({ value: 1000 });
-
-    expect(screen.getByText(/1000/i)).toBeInTheDocument();
-  });
-
-  it("should render the placeholder if value is undefined", () => {
-    renderComponent({ value: undefined });
-
-    expect(screen.getByText(/-/i)).toBeInTheDocument();
-  });
-
-  it("should render the custom placeholder if value is undefined and placeholder has value", () => {
-    renderComponent({ value: undefined, placeholder: "_" });
-
-    expect(screen.getByText(/_/i)).toBeInTheDocument();
-  });
-
-  describe("editable", () => {
-    it("shouldn't render an option to edit if editable is false", () => {
-      renderComponent({ value: DummyValue, editable: false });
-
-      expect(screen.queryByTestId("EditIcon")).not.toBeInTheDocument();
-    });
-
-    it("should render an option to edit if editable is true", () => {
-      renderComponent({ value: DummyValue, editable: true });
-
-      expect(screen.getByRole("button", { name: /edit/i })).toBeVisible();
-    });
-
-    it("should render an input with the value if the edit button is clicked", async () => {
-      renderComponent({ value: DummyValue, editable: true });
-
-      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
-
-      expect(screen.getByRole("textbox")).toHaveValue(DummyValue);
-    });
-
-    it("should submit the new value if is edited", async () => {
-      const { onEdit } = renderComponent({ value: DummyValue, editable: true });
-
-      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
-      await userEvent.clear(screen.getByRole("textbox"));
-      await userEvent.type(screen.getByRole("textbox"), "new value");
-      await userEvent.click(screen.getByRole("button", { name: /submit/i }));
-
-      expect(onEdit).toHaveBeenCalledTimes(1);
-      expect(onEdit).toHaveBeenCalledWith("new value");
-    });
-
-    it("should not call onEdit if the edition is cancelled", async () => {
-      const { onEdit } = renderComponent({ value: DummyValue, editable: true });
-
-      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
-      await userEvent.clear(screen.getByRole("textbox"));
-      await userEvent.type(screen.getByRole("textbox"), "new value");
-      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
-
-      expect(onEdit).not.toHaveBeenCalled();
-    });
-
-    it("should have the original value if is edited again after clear a change", async () => {
-      renderComponent({ value: DummyValue, editable: true });
-
-      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
-      await userEvent.clear(screen.getByRole("textbox"));
-      await userEvent.type(screen.getByRole("textbox"), "new value");
-      await userEvent.click(screen.getByRole("button", { name: /cancel/i }));
-      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
-
-      expect(screen.getByRole("textbox")).toHaveValue(DummyValue);
-    });
-
-    it("should call onEdit if the enter button is pressed", async () => {
-      const { onEdit } = renderComponent({ value: DummyValue, editable: true });
-
-      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
-      await userEvent.clear(screen.getByRole("textbox"));
-      await userEvent.type(screen.getByRole("textbox"), "new value{enter}");
-
-      expect(onEdit).toHaveBeenCalledTimes(1);
-      expect(onEdit).toHaveBeenCalledWith("new value");
-    });
-  });
-});

package/src/components/value-displays/value-text/value-text.tsx

@@ -1,67 +0,0 @@
-import { Typography, TextField } from "@mui/material";
-import React, { useEffect, useRef } from "react";
-import {
-  BaseValueProps,
-  DefaultPlaceholder,
-  EditableValueProps,
-  useEditableValueDisplay,
-  ValueEditButton,
-  ValueEditButtons,
-} from "../value-base";
-import { getValueContentLabelId, ValueContent } from "../value-content";
-
-export type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;
-
-/**
- * Displays a string value with a label
- */
-export const ValueText = ({
-  label,
-  value: valueProp,
-  placeholder = DefaultPlaceholder,
-  editable,
-  dense,
-  onEdit = () => null,
-}: ValueTextProps) => {
-  const editInputRef = useRef<HTMLInputElement>(null);
-  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
-    useEditableValueDisplay(valueProp?.toString(), onEdit);
-  const id = getValueContentLabelId(label);
-  const value = valueProp?.toString() || placeholder;
-
-  const editKeyPressListener = (e: KeyboardEvent) => {
-    if (e.key === "Enter") {
-      onEdit((e.target as any).value);
-    }
-  };
-
-  useEffect(() => {
-    editInputRef.current?.addEventListener("keypress", editKeyPressListener);
-    return () => editInputRef.current?.removeEventListener("keypress", editKeyPressListener);
-  }, [editInputRef.current]);
-
-  return (
-    <ValueContent hideLabel={isEditing} label={label} tooltip={value} dense={dense}>
-      {isEditing ? (
-        <TextField
-          inputRef={editInputRef}
-          value={editValue}
-          label={label}
-          size="small"
-          onChange={(e) => setEditValue(e.target.value)}
-          InputProps={{
-            endAdornment: (
-              <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />
-            ),
-          }}
-          sx={{ marginY: !dense ? 1 : 0 }}
-        />
-      ) : (
-        <Typography variant={dense ? "body1" : "h5"} noWrap aria-labelledby={id}>
-          {value}
-          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}
-        </Typography>
-      )}
-    </ValueContent>
-  );
-};

package/src/generators/generators.mock.ts

@@ -1,298 +0,0 @@
-import { BasicModelInstance, FieldType, Model, ModelField } from "./generators.model";
-import { faker } from "@faker-js/faker";
-import * as R from "ramda";
-import { newArrayWithSize } from "../utils";
-
-export const BirthDateFormat = "dd/MM/yyyy";
-export const ReturnTimeFormat = "HH:mm";
-export const TradeDateFormat = "dd/MM/yyyy HH:mm";
-export const mockModel: Model = {
-  fields: [
-    {
-      id: "id",
-      type: "string",
-      description: "User identifier",
-      name: "Id",
-      xs: 12,
-      sm: 6,
-      md: 4,
-      listable: false,
-      updatable: false,
-    },
-    {
-      id: "firstName",
-      type: "string",
-      description: "User first name",
-      name: "First name",
-      xs: 12,
-      sm: 6,
-      md: 4,
-      listable: true,
-    },
-    {
-      id: "middleName",
-      type: "string",
-      description: "User middle name",
-      name: "Middle name",
-      xs: 12,
-      sm: 6,
-      md: 4,
-      listable: true,
-      required: false,
-    },
-    {
-      id: "lastName",
-      type: "string",
-      description: "User last name",
-      name: "Last name",
-      xs: 12,
-      sm: 6,
-      md: 4,
-      listable: true,
-    },
-    {
-      id: "age",
-      type: "number",
-      description: "User age",
-      name: "Age",
-      xs: 12,
-      sm: 6,
-      md: 3,
-      listable: false,
-      required: false,
-    },
-    {
-      id: "birthDate",
-      type: "date",
-      format: BirthDateFormat,
-      default: new Date(2014, 8, 18),
-      description: "When he was born",
-      name: "Birth Date",
-      xs: 12,
-      sm: 6,
-      md: 6,
-      listable: false,
-    },
-    {
-      id: "car",
-      type: "group",
-      description: "Information about the user car",
-      name: "User car",
-      xs: 12,
-      value: [
-        {
-          id: "model",
-          type: "enum",
-          value: [...faker.definitions.vehicle.model],
-          description: "Lorem ipsum",
-          name: "Model",
-          xs: 12,
-          sm: 5,
-        },
-        {
-          id: "manufacturer",
-          type: "enum",
-          value: [...faker.definitions.vehicle.manufacturer],
-          description: "Lorem ipsum",
-          name: "Manufacturer",
-          xs: 12,
-          sm: 5,
-        },
-        {
-          id: "color",
-          type: "string",
-          description: "Lorem ipsum",
-          name: "Color",
-          xs: 12,
-          sm: 2,
-        },
-        {
-          id: "type",
-          type: "multienum",
-          value: [...faker.definitions.vehicle.type],
-          description: "Lorem ipsum",
-          name: "Type",
-          xs: 12,
-          sm: 3,
-        },
-        {
-          id: "vin",
-          type: "string",
-          description: "Lorem ipsum",
-          name: "VIN",
-          xs: 12,
-          sm: 5,
-        },
-        {
-          id: "vrm",
-          type: "string",
-          description: "Lorem ipsum",
-          name: "VRM",
-          xs: 12,
-          sm: 4,
-        },
-        {
-          id: "returnTime",
-          type: "time",
-          format: ReturnTimeFormat,
-          default: new Date(2022, 8, 21, 9, 0),
-          description: "Lorem ipsum",
-          name: "Return time",
-          xs: 12,
-          sm: 4,
-        },
-      ],
-    },
-    {
-      id: "quantity",
-      type: "number",
-      description: "Lorem ipsum",
-      name: "Q",
-      xs: 12,
-      sm: 2,
-      md: 1,
-    },
-    {
-      id: "available",
-      type: "boolean",
-      description: "Lorem ipsum",
-      name: "Available",
-      xs: 12,
-      sm: 2,
-    },
-    {
-      id: "currency",
-      type: "string",
-      description: "Lorem ipsum",
-      name: "Unit Price Currency",
-      xs: 12,
-      sm: 3,
-    },
-    {
-      id: "tradeDate",
-      type: "datetime",
-      format: TradeDateFormat,
-      default: new Date(2022, 8, 12, 9, 0),
-      description: "Lorem ipsum",
-      name: "Trade date",
-      xs: 12,
-      sm: 5,
-    },
-    {
-      id: "codes",
-      type: "string[]",
-      description: "Lorem ipsum",
-      name: "Codes",
-      xs: 12,
-      sm: 5,
-    },
-    {
-      id: "identifiers",
-      type: "number[]",
-      description: "Lorem ipsum",
-      name: "Identifiers",
-      xs: 12,
-      sm: 4,
-    },
-  ],
-};
-
-export interface MockInstance {
-  id: string;
-  firstName: string;
-  middleName: string;
-  lastName: string;
-  age: number;
-  birthDate: Date;
-  car: {
-    model: string;
-    manufacturer: string;
-    color: string;
-    type: string[];
-    vin: string;
-    vrm: string;
-    returnTime: Date;
-  };
-  quantity: number;
-  available: boolean;
-  currency: string;
-  tradeDate: Date;
-  [key: string]: FieldType;
-  codes: string[];
-  identifiers: string[];
-}
-
-const mockFieldValue: Record<string, () => FieldType> = {
-  id: () => faker.datatype.number({ min: 1000, max: 100000 }).toString(),
-  firstName: faker.name.firstName,
-  middleName: faker.name.middleName,
-  lastName: faker.name.lastName,
-  age: () => faker.datatype.number({ min: 20, max: 60 }),
-  birthDate: () => new Date(2019, 3, 2),
-  returnTime: () => new Date(2022, 10, 2, 11, 0),
-  model: faker.vehicle.model,
-  manufacturer: faker.vehicle.manufacturer,
-  color: faker.vehicle.color,
-  type: () => {
-    const array = newArrayWithSize(faker.datatype.number({ min: 2, max: 5 }), 0);
-    const result = array.map(() => faker.vehicle.type());
-    return R.uniq(result);
-  },
-  vin: faker.vehicle.vin,
-  vrm: faker.vehicle.vrm,
-  quantity: () => faker.datatype.number({ min: 1, max: 9 }),
-  available: faker.datatype.boolean,
-  currency: () => "MXN",
-  tradeDate: () => new Date(2012, 2, 11, 8, 25),
-  codes: () => [faker.word.noun(), faker.word.noun(), faker.word.noun()],
-  identifiers: () => [faker.datatype.number(), faker.datatype.number(), faker.datatype.number()],
-};
-
-export const createModelInstance = <T extends BasicModelInstance>(model: Model, seed = 100): T => {
-  faker.seed(seed);
-  return model.fields.reduce((acc, field) => {
-    if (field.type === "group") {
-      return {
-        ...acc,
-        [field.id]: field.value.reduce(
-          (acc, groupField) => ({
-            ...acc,
-            [groupField.id]: getModelFieldValue(groupField),
-          }),
-          {},
-        ),
-      };
-    } else if (field.type === "group[]") {
-      const numElements = faker.datatype.number({ min: 2, max: 5 });
-      return {
-        ...acc,
-        [field.id]: new Array(numElements).fill(0).map(() =>
-          field.value.reduce(
-            (acc, arrayField) => ({
-              ...acc,
-              [arrayField.id]: getModelFieldValue(arrayField),
-            }),
-            {},
-          ),
-        ),
-      };
-    } else {
-      return {
-        ...acc,
-        [field.id]: getModelFieldValue(field),
-      };
-    }
-  }, {} as T);
-};
-
-/*
-
-*/
-
-const getModelFieldValue = ({ id }: ModelField): FieldType => {
-  const fieldGenerator = mockFieldValue[id];
-  if (!fieldGenerator) {
-    return faker.datatype.string();
-  }
-  return fieldGenerator();
-};

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

@@ -1,79 +0,0 @@
-import { createModelInstance, mockModel } from "./generators.mock";
-import { newInstanceFromValuesOrZeroValue } from "./generators.model";
-
-describe("utilities", () => {
-  describe("newInstanceFromValuesOrZeroValue", () => {
-    it("would create a zero value instance if no values are provided", () => {
-      const instance = newInstanceFromValuesOrZeroValue(mockModel);
-
-      expect(instance).toStrictEqual({
-        age: 0,
-        available: false,
-        birthDate: new Date(2014, 8, 18),
-        car: {
-          color: "",
-          manufacturer: "",
-          model: "",
-          returnTime: new Date(2022, 8, 21, 9, 0),
-          type: [],
-          vin: "",
-          vrm: "",
-        },
-        currency: "",
-        firstName: "",
-        id: "",
-        lastName: "",
-        middleName: "",
-        quantity: 0,
-        tradeDate: new Date(2022, 8, 12, 9, 0),
-        codes: [],
-        identifiers: [],
-      });
-    });
-
-    it("would create the same instance if a full instance is provided", () => {
-      const values = createModelInstance(mockModel);
-      const instance = newInstanceFromValuesOrZeroValue(mockModel, values);
-
-      expect(instance).toStrictEqual(instance);
-    });
-
-    it("would create a mixed instance if just some values are provided", () => {
-      const instance = newInstanceFromValuesOrZeroValue(mockModel, {
-        id: "1",
-        age: 10,
-        currency: "EUR",
-        car: {
-          returnTime: new Date(2022, 9, 10, 23),
-          type: ["sub", "sport"],
-        },
-        available: true,
-        identifiers: ["1", "2"],
-      });
-
-      expect(instance).toStrictEqual({
-        age: 10,
-        available: true,
-        birthDate: new Date(2014, 8, 18),
-        car: {
-          color: "",
-          manufacturer: "",
-          model: "",
-          returnTime: new Date(2022, 9, 10, 23),
-          type: ["sub", "sport"],
-          vin: "",
-          vrm: "",
-        },
-        currency: "EUR",
-        firstName: "",
-        id: "1",
-        lastName: "",
-        middleName: "",
-        quantity: 0,
-        tradeDate: new Date(2022, 8, 12, 9, 0),
-        codes: [],
-        identifiers: ["1", "2"],
-      });
-    });
-  });
-});