@pautena/react-design-system 0.0.1

package/src/components/value-displays/group-value-card/group-value-card.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from "../../../tests";
+import React from "react";
+import { GroupValueCardDummy } from "./group-value-card.mock";
+
+describe("GroupValueCard", () => {
+  const renderComponent = ({
+    title = "Hello world",
+    subtitle = undefined,
+  }: { title?: string; subtitle?: string } = {}) => {
+    return render(<GroupValueCardDummy title={title} subtitle={subtitle} />);
+  };
+  it("would render a title", () => {
+    renderComponent({ title: "Hello world" });
+
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+
+  describe("subtitle", () => {
+    it("would not render a subtitle if it's not provided", () => {
+      renderComponent({ subtitle: undefined });
+
+      expect(screen.queryByRole("heading", { level: 2 })).not.toBeInTheDocument();
+    });
+
+    it("would render a subtitle if it's provided", () => {
+      renderComponent({ subtitle: "Hi. I am batman" });
+
+      expect(
+        screen.getByRole("heading", { level: 2, name: /hi. i am batman/i }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("would render all values", () => {
+    renderComponent();
+
+    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
+    expect(screen.getByText(/lorem ipsum sit amet/i)).toBeInTheDocument();
+
+    expect(screen.getByRole("label", { name: /enabled/i })).toBeInTheDocument();
+    expect(screen.getByTestId("CheckIcon")).toBeInTheDocument();
+
+    expect(screen.getByRole("label", { name: /quantity/i })).toBeInTheDocument();
+    expect(screen.getByText(/1200/i)).toBeInTheDocument();
+
+    expect(screen.getByRole("label", { name: /currency/i })).toBeInTheDocument();
+    expect(screen.getByText(/eur/i)).toBeInTheDocument();
+
+    expect(screen.getByRole("label", { name: /i am batman/i })).toBeInTheDocument();
+    expect(screen.getByText(/does it come in black/i)).toBeInTheDocument();
+
+    expect(screen.getByRole("label", { name: /status/i })).toBeInTheDocument();
+    expect(screen.getByText(/open/i)).toBeInTheDocument();
+
+    expect(screen.getByRole("label", { name: /level/i })).toBeInTheDocument();
+    expect(screen.getByText(/2144/i)).toBeInTheDocument();
+  });
+});

package/src/components/value-displays/group-value-card/group-value-card.tsx

@@ -0,0 +1,65 @@
+import { Grid, Paper, GridProps, Box, Typography } from "@mui/material";
+import React, { FunctionComponent, PropsWithChildren, ReactElement } from "react";
+import { useGetDefaultThemeColor } from "../../../utils/theme";
+
+export type GroupValueItemProps = PropsWithChildren<Omit<GridProps, "item" | "container">>;
+export type GroupValueItemComponent = FunctionComponent<GroupValueItemProps>;
+export type GroupValueItemElement = ReactElement<GroupValueItemProps, GroupValueItemComponent>;
+
+export const groupValueItemClasses = {
+  root: "RdsGroupValueItem-root",
+};
+
+const defaultThemeColorOpts = { lightWeight: 200, darkWeight: 800 };
+
+export const GroupValueItem: GroupValueItemComponent = ({
+  children,
+  ...rest
+}: GroupValueItemProps) => {
+  const defaultColor = useGetDefaultThemeColor(defaultThemeColorOpts);
+
+  return (
+    <Grid item className={groupValueItemClasses.root} {...rest}>
+      <Box
+        px={1}
+        sx={{
+          borderLeft: `solid ${defaultColor} 1px`,
+        }}
+      >
+        {children}
+      </Box>
+    </Grid>
+  );
+};
+
+export interface GroupValueCardProps {
+  title: string;
+  subtitle?: string;
+  children: GroupValueItemElement | GroupValueItemElement[];
+}
+
+export const GroupValueCard = ({ title, subtitle, children }: GroupValueCardProps) => {
+  const defaultColor = useGetDefaultThemeColor(defaultThemeColorOpts);
+
+  return (
+    <Paper
+      sx={{
+        paddingBottom: 1,
+      }}
+    >
+      <Box bgcolor={defaultColor} px={2} py={1}>
+        <Typography variant="h6" role="heading" aria-level={1}>
+          {title}
+        </Typography>
+        {subtitle && (
+          <Typography variant="body2" role="heading" aria-level={2}>
+            {subtitle}
+          </Typography>
+        )}
+      </Box>
+      <Grid container margin={2} rowSpacing={2}>
+        {children}
+      </Grid>
+    </Paper>
+  );
+};

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

@@ -0,0 +1 @@
+export * from "./group-value-card";

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

@@ -0,0 +1,4 @@
+export * from "./value-text";
+export * from "./value-card";
+export * from "./value-boolean";
+export * from "./group-value-card";

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

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

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

@@ -0,0 +1,25 @@
+import { ComponentMeta } from "@storybook/react";
+import { ValueBoolean } from "./value-boolean";
+import { createTemplate } from "../../../storybook";
+
+export default {
+  title: "Value displays/ValueBoolean",
+  component: ValueBoolean,
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof ValueBoolean>;
+
+const Template = createTemplate(ValueBoolean);
+
+export const True = Template.bind({});
+True.args = {
+  label: "Lorem ipsum",
+  value: true,
+};
+
+export const False = Template.bind({});
+False.args = {
+  label: "Lorem ipsum",
+  value: false,
+};

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { ValueBoolean } from "./value-boolean";
+import { render, screen } from "../../../tests";
+
+describe("ValueBoolean", () => {
+  const renderComponent = ({ value }: { value: boolean }) => {
+    return render(<ValueBoolean label="Hello world" value={value} />);
+  };
+
+  it("would render the label", () => {
+    renderComponent({ value: true });
+
+    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
+  });
+
+  it("would render a check if value is true", () => {
+    renderComponent({ value: true });
+
+    expect(screen.getByTestId("CheckIcon")).toBeInTheDocument();
+  });
+
+  it("would render a cross if value is false", () => {
+    renderComponent({ value: false });
+
+    expect(screen.getByTestId("CloseIcon")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,33 @@
+import { Box, Typography, useTheme } from "@mui/material";
+import React from "react";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+
+export interface ValueBooleanProps {
+  /**
+   * Name of the displayed value
+   */
+  label: string;
+  /**
+   * Value displayed
+   */
+  value: boolean;
+}
+
+/**
+ * Displays a boolean value with a label
+ */
+export const ValueBoolean = ({ label, value }: ValueBooleanProps) => {
+  const { typography } = useTheme();
+
+  const iconSx = { fontSize: typography.h5.fontSize };
+
+  return (
+    <Box>
+      <Typography variant="subtitle2" role="label">
+        {label}
+      </Typography>
+      {value ? <CheckIcon color="success" sx={iconSx} /> : <CloseIcon color="error" sx={iconSx} />}
+    </Box>
+  );
+};

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

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

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

@@ -0,0 +1,22 @@
+import React, { PropsWithChildren } from "react";
+import { ComponentMeta } from "@storybook/react";
+import { ValueCard } from "./value-card";
+import { createTemplate } from "../../../storybook";
+import { ValueText } from "../value-text";
+
+export default {
+  title: "Value displays/ValueCard",
+  component: ValueCard,
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof ValueCard>;
+
+const Template = createTemplate(({ children }: PropsWithChildren) => {
+  return <ValueCard>{children}</ValueCard>;
+});
+
+export const ValueCardText = Template.bind({});
+ValueCardText.args = {
+  children: <ValueText label="Hello world" value="Lorem ipsum sit amet" />,
+};

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { ValueCard } from "./value-card";
+import { render, screen } from "../../../tests";
+import { ReactElement } from "react";
+import { ValueText } from "../value-text";
+
+describe("ValueCard", () => {
+  const renderComponent = ({ children }: { children: ReactElement }) => {
+    return render(<ValueCard>{children}</ValueCard>);
+  };
+
+  it("would render with a ValueText inside", () => {
+    renderComponent({ children: <ValueText label="Hello world" value="Lorem ipsum sit amet" /> });
+
+    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
+    expect(screen.getByText(/lorem ipsum sit amet/i)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Paper } from "@mui/material";
+import { PropsWithChildren } from "react";
+
+export type ValueCardProps = PropsWithChildren;
+
+/**
+ * Container to show a labeled value
+ */
+export const ValueCard = ({ children }: ValueCardProps) => {
+  return <Paper sx={{ p: 2 }}>{children}</Paper>;
+};

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

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

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { render, screen } from "../../../tests";
+import { ValueText } from "./value-text";
+
+describe("ValueText", () => {
+  const renderComponent = () => {
+    return render(<ValueText label="Hello world" value="Lorem ipsum sit amet" />);
+  };
+
+  it("would render the label", () => {
+    renderComponent();
+
+    expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
+  });
+
+  it("would render the value", () => {
+    renderComponent();
+
+    expect(screen.getByText(/lorem ipsum sit amet/i)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,26 @@
+import { ComponentMeta } from "@storybook/react";
+import { ValueText } from "./value-text";
+import { createTemplate, withContainer } from "../../../storybook";
+
+export default {
+  title: "Value displays/ValueText",
+  component: ValueText,
+  decorators: [withContainer({ width: 200 })],
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof ValueText>;
+
+const Template = createTemplate(ValueText);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Lorem",
+  value: "ipsum sit",
+};
+
+export const TruncatedText = Template.bind({});
+TruncatedText.args = {
+  label: "Lorem",
+  value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+};

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

@@ -0,0 +1,32 @@
+import { Box, Tooltip, Typography } from "@mui/material";
+import React from "react";
+
+export interface ValueTextProps {
+  /**
+   * Name of the displayed value
+   */
+  label: string;
+  /**
+   * Value displayed
+   */
+  value: string;
+}
+
+/**
+ * Displays a string value with a label
+ */
+export const ValueText = ({ label, value }: ValueTextProps) => {
+  const id = `label-${label.replace(/ /g, "-")}`;
+  return (
+    <Box>
+      <Typography variant="subtitle2" role="label" id={id}>
+        {label}
+      </Typography>
+      <Tooltip title={value} placement="top" enterDelay={2000}>
+        <Typography variant="h5" noWrap aria-labelledby={id}>
+          {value}
+        </Typography>
+      </Tooltip>
+    </Box>
+  );
+};

package/src/generators/generators.mock.ts

@@ -0,0 +1,215 @@
+import { Model, ModelField } from "./generators.model";
+import { faker } from "@faker-js/faker";
+
+export const mockModel: Model = {
+  fields: [
+    {
+      id: "id",
+      type: "string",
+      description: "User identifier",
+      name: "Id",
+      xs: 12,
+      sm: 6,
+      md: 4,
+      listable: 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,
+    },
+    {
+      id: "lastName",
+      type: "string",
+      description: "User last name",
+      name: "Last name",
+      xs: 12,
+      sm: 6,
+      md: 4,
+      listable: true,
+    },
+    {
+      id: "gender",
+      type: "string",
+      description: "User gender",
+      name: "Gender",
+      xs: 12,
+      sm: 6,
+      md: 3,
+    },
+    {
+      id: "age",
+      type: "number",
+      description: "User age",
+      name: "Age",
+      xs: 12,
+      sm: 6,
+      md: 3,
+      listable: true,
+    },
+    {
+      id: "birthDate",
+      type: "string",
+      description: "When he was born",
+      name: "Birth Date",
+      xs: 12,
+      sm: 6,
+      md: 6,
+      listable: true,
+    },
+    {
+      id: "car",
+      type: "group",
+      description: "Information about the user car",
+      name: "User car",
+      value: [
+        {
+          id: "model",
+          type: "string",
+          description: "Lorem ipsum",
+          name: "Model",
+          xs: 12,
+          sm: 5,
+        },
+        {
+          id: "manufacturer",
+          type: "string",
+          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: "string",
+          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: "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: "string",
+      description: "Lorem ipsum",
+      name: "Trade date",
+      xs: 12,
+      sm: 3,
+    },
+  ],
+};
+
+const mockFieldValue = {
+  id: () => faker.datatype.number({ min: 1000, max: 100000 }).toString(),
+  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: () => faker.datatype.datetime().toString(),
+  model: faker.vehicle.model,
+  manufacturer: faker.vehicle.manufacturer,
+  color: faker.vehicle.color,
+  type: faker.vehicle.type,
+  vin: faker.vehicle.vin,
+  vrm: faker.vehicle.vrm,
+  quantity: () => faker.datatype.number({ min: 1, max: 9 }),
+  available: faker.datatype.boolean,
+  currency: () => "MXN",
+  tradeDate: () => "Thu Jul 21 2022 22:44:10 GMT+0200 (Central European Summer Time)",
+};
+
+export const createModelInstance = (model: Model, seed = 100): any => {
+  faker.seed(seed);
+  const obj = {};
+
+  model.fields.forEach((field) => {
+    let value;
+    if (field.type === "group") {
+      value = {};
+      field.value.forEach((groupField) => {
+        value[groupField.id] = getModelFieldValue(groupField);
+      });
+    } else {
+      value = getModelFieldValue(field);
+    }
+
+    obj[field.id] = value;
+  });
+
+  return obj;
+};
+
+const getModelFieldValue = ({ id, type }: ModelField) => {
+  const fieldGenerator = mockFieldValue[id];
+  if (!fieldGenerator) {
+    const generator = faker.datatype[type];
+    return generator ? generator() : faker.datatype.string();
+  }
+  return fieldGenerator();
+};

package/src/generators/generators.model.ts

@@ -0,0 +1,41 @@
+type Base = {
+  id: string;
+  description: string;
+  name: string;
+  listable?: boolean;
+};
+
+type Breakpoints = {
+  xs?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+};
+
+type StringField = {
+  type: "string";
+};
+
+type NumberField = {
+  type: "number";
+};
+
+type BooleanField = {
+  type: "boolean";
+};
+
+type SingleFields = StringField | NumberField | BooleanField;
+
+export type GroupField = {
+  type: "group";
+  value: (Base & Breakpoints & SingleFields)[];
+};
+
+type Fields = SingleFields | GroupField;
+
+export type ModelField = Base & Breakpoints & Fields;
+
+export type Model = {
+  fields: ModelField[];
+};

package/src/generators/index.ts

@@ -0,0 +1,4 @@
+export * from "./object-details";
+export * from "./model-router";
+export * from "./generators.model";
+export * from "./model-form";

package/src/generators/model-form/index.ts

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

package/src/generators/model-form/model-form.stories.tsx

@@ -0,0 +1,30 @@
+import { ComponentMeta } from "@storybook/react";
+import { ModelForm } from "./model-form";
+import { createTemplate, withPadding } from "../../storybook";
+import { createModelInstance, mockModel } from "../generators.mock";
+
+const initialValues = createModelInstance(mockModel);
+
+export default {
+  title: "Generators/ModelForm",
+  component: ModelForm,
+  decorators: [withPadding(2)],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof ModelForm>;
+
+const Template = createTemplate(ModelForm);
+
+export const AddForm = Template.bind({});
+AddForm.args = {
+  model: mockModel,
+  saveButtonText: "add",
+};
+
+export const UpdateForm = Template.bind({});
+UpdateForm.args = {
+  model: mockModel,
+  initialValues,
+  saveButtonText: "update",
+};