@pautena/react-design-system 0.6.2 → 0.7.0

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

@@ -1,60 +1,48 @@
-import { Grid, Paper, GridProps, Box, Typography } from "@mui/material";
-import React, { FunctionComponent, PropsWithChildren, ReactElement } from "react";
+import { Grid, Paper, Box, Typography, useTheme } from "@mui/material";
+import React from "react";
 import { useGetDefaultThemeColor } from "../../../utils/theme";
-
-export type GroupValueItemProps = PropsWithChildren<
-  Omit<GridProps, "item" | "container"> & { bordered?: boolean }
->;
-export type GroupValueItemComponent = FunctionComponent<GroupValueItemProps>;
-export type GroupValueItemElement = ReactElement<GroupValueItemProps, GroupValueItemComponent>;
-
-export const groupValueItemClasses = {
-  root: "RdsGroupValueItem-root",
-};
-
-export const GroupValueItem: GroupValueItemComponent = ({
-  children,
-  bordered = true,
-  ...rest
-}: GroupValueItemProps) => {
-  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });
-
-  return (
-    <Grid item className={groupValueItemClasses.root} {...rest}>
-      <Box
-        px={1}
-        sx={{
-          borderLeft: bordered ? `solid ${defaultColor} 1px` : "none",
-        }}
-      >
-        {children}
-      </Box>
-    </Grid>
-  );
-};
+import { ValueItemElement } from "../value-item/value-item";
 
 export interface GroupValueCardProps {
   title: string;
   subtitle?: string;
   centered?: boolean;
-  children: GroupValueItemElement | GroupValueItemElement[];
+  children: ValueItemElement | ValueItemElement[];
+  dense?: boolean;
 }
 
-export const GroupValueCard = ({ title, subtitle, centered, children }: GroupValueCardProps) => {
+export const GroupValueCard = ({
+  title,
+  subtitle,
+  centered,
+  children,
+  dense,
+}: GroupValueCardProps) => {
+  const { typography } = useTheme();
   const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });
 
   return (
     <Paper
       sx={{
-        paddingBottom: 1,
+        paddingBottom: dense ? 0 : 1,
       }}
     >
-      <Box bgcolor={defaultColor} px={2} py={1}>
-        <Typography variant="h6" role="heading" aria-level={1}>
+      <Box
+        bgcolor={defaultColor}
+        px={dense ? 1 : 2}
+        py={dense ? 0.5 : 1}
+        lineHeight={dense ? 0 : undefined}
+      >
+        <Typography variant={dense ? "body1" : "h6"} role="heading" aria-level={1}>
           {title}
         </Typography>
         {subtitle && (
-          <Typography variant="body2" role="heading" aria-level={2}>
+          <Typography
+            variant={dense ? "caption" : "body2"}
+            role="heading"
+            aria-level={2}
+            lineHeight={dense ? typography.pxToRem(15) : undefined}
+          >
             {subtitle}
           </Typography>
         )}
@@ -62,7 +50,7 @@ export const GroupValueCard = ({ title, subtitle, centered, children }: GroupVal
       <Grid
         container
         padding={1}
-        rowSpacing={2}
+        rowSpacing={dense ? 1 : 2}
         justifyContent={centered ? "center" : "flex-start"}
       >
         {children}

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

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

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

@@ -13,6 +13,12 @@ export interface BaseValueProps<T> {
    * String rendered if value is undefined
    */
   placeholder?: string;
+
+  /**
+   * The value has to be displayed as compact or not.
+   * False by default
+   */
+  dense?: boolean;
 }
 
 export interface EditableValueProps<T> {

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

@@ -30,3 +30,11 @@ export const Editable: Story = {
     editable: true,
   },
 };
+
+export const Dense: Story = {
+  args: {
+    label: "Lorem ipsum",
+    value: true,
+    dense: true,
+  },
+};

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

@@ -22,16 +22,17 @@ export const ValueBoolean = ({
   value,
   placeholder = DefaultPlaceholder,
   editable,
+  dense,
   onEdit = () => null,
 }: ValueBooleanProps) => {
   const { typography } = useTheme();
   const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
     useEditableValueDisplay(value, onEdit);
 
-  const iconSx = { fontSize: typography.h5.fontSize };
+  const iconSx = { fontSize: dense ? typography.h6.fontSize : typography.h5.fontSize };
 
   return (
-    <ValueContent label={label}>
+    <ValueContent label={label} dense={dense}>
       {isEditing ? (
         <Box display="flex" alignItems="center">
           <Switch checked={editValue} onChange={(e) => setEditValue(e.target.checked)} />

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

@@ -11,8 +11,8 @@ export default {
   parameters: {
     layout: "centered",
   },
-  render: () => (
-    <ValueContent label="lorem ipsum">
+  render: (args) => (
+    <ValueContent {...args} label="lorem ipsum">
       <Typography>Demo content</Typography>
     </ValueContent>
   ),
@@ -20,3 +20,8 @@ export default {
 type Story = StoryObj<typeof ValueContent>;
 
 export const Default: Story = {};
+export const Dense: Story = {
+  args: {
+    dense: true,
+  },
+};

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

@@ -1,4 +1,4 @@
-import { Box, Tooltip, Typography } from "@mui/material";
+import { Box, Tooltip, Typography, useTheme } from "@mui/material";
 import React from "react";
 
 export const getValueContentLabelId = (label: string): string =>
@@ -24,6 +24,12 @@ export interface ValueContentProps {
    * Component that's going to be renderd under the label
    */
   children: React.ReactElement<any, any>;
+
+  /**
+   * The value has to be displayed as compact or not.
+   * False by default
+   */
+  dense?: boolean;
 }
 
 /**
@@ -34,12 +40,19 @@ export const ValueContent = ({
   tooltip,
   tooltipEnterDelay = 2000,
   children,
+  dense,
 }: ValueContentProps) => {
+  const { typography } = useTheme();
   const id = getValueContentLabelId(label);
 
   return (
-    <Box width={1}>
-      <Typography variant="subtitle2" role="label" id={id}>
+    <Box width={1} lineHeight={dense ? 0 : undefined}>
+      <Typography
+        variant={dense ? "caption" : "subtitle2"}
+        role="label"
+        id={id}
+        lineHeight={dense ? typography.pxToRem(15) : undefined}
+      >
         {label}
       </Typography>
       {tooltip ? (

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

@@ -20,6 +20,15 @@ export const Default: Story = {
   },
 };
 
+export const Dense: Story = {
+  args: {
+    label: "Lorem",
+    value: new Date(2022, 8, 22),
+    format: "yyyy/MM/dd",
+    dense: true,
+  },
+};
+
 export const Placeholder: Story = {
   args: {
     label: "Lorem",

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

@@ -35,6 +35,7 @@ export const ValueDatetime = ({
   placeholder = DefaultPlaceholder,
   editable,
   editInputType = "datetime",
+  dense,
   onEdit = () => null,
 }: ValueDatetimeProps) => {
   const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
@@ -50,7 +51,7 @@ export const ValueDatetime = ({
       : DatePicker;
 
   return (
-    <ValueContent label={label} tooltip={value}>
+    <ValueContent label={label} tooltip={value} dense={dense}>
       {isEditing ? (
         <EditPickerComponent
           value={editValue}
@@ -79,7 +80,7 @@ export const ValueDatetime = ({
         />
       ) : (
         <Box display="flex" alignItems="center">
-          <Typography variant="h5" noWrap aria-labelledby={id}>
+          <Typography variant={dense ? "body1" : "h5"} noWrap aria-labelledby={id}>
             {value}
           </Typography>
           {editable && (

package/src/components/value-displays/value-displays.stories.mdx

@@ -14,4 +14,5 @@ import LinkTo from '@storybook/addon-links/react';
   <li><LinkTo kind="Components/Value displays/ValueImage">ValueImage</LinkTo></li>
   <li><LinkTo kind="Components/Value displays/ValueText">ValueText</LinkTo></li>
   <li><LinkTo kind="Components/Value displays/ValueRating">ValueRating</LinkTo></li>
+  <li><LinkTo kind="Components/Value displays/ValueItem">ValueItem</LinkTo></li>
 </ul>

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

@@ -20,6 +20,14 @@ export const Default: Story = {
   },
 };
 
+export const Dense: Story = {
+  args: {
+    label: "Lorem",
+    value: workInProgressImg,
+    dense: true,
+  },
+};
+
 export const CustomSize: Story = {
   args: {
     label: "Lorem",

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

@@ -11,13 +11,15 @@ export interface ValueImageProps extends BaseValueProps<string> {
 }
 
 const DefaultSize = 100;
+const DefaultDenseSize = 50;
 
 /**
  * Displays a image value with a label
  */
-export const ValueImage = ({ label, value, size = DefaultSize }: ValueImageProps) => {
+export const ValueImage = ({ label, value, size: sizeArg, dense }: ValueImageProps) => {
+  const size = sizeArg || (dense ? DefaultDenseSize : DefaultSize);
   return (
-    <ValueContent label={label}>
+    <ValueContent label={label} dense={dense}>
       <Box component="img" src={value} alt={label} sx={{ width: size, height: size }} />
     </ValueContent>
   );

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

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

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

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ValueItem } from "./value-item";
+import { ValueText } from "../value-text";
+import React from "react";
+
+export default {
+  title: "Components/Value displays/ValueItem",
+  component: ValueItem,
+  parameters: {
+    layout: "centered",
+  },
+  render: (args) => (
+    <ValueItem {...args}>
+      <ValueText label="Hello world" value="Lorem ipsum sit amet" />
+    </ValueItem>
+  ),
+} satisfies Meta<typeof ValueItem>;
+type Story = StoryObj<typeof ValueItem>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Borderless: Story = {
+  args: {
+    bordered: false,
+  },
+};
+
+export const BreakpointsBorder: Story = {
+  args: {
+    bordered: {
+      xs: false,
+      sm: true,
+      md: false,
+      lg: true,
+    },
+  },
+};
+
+export const BreakpointsArrayBorder: Story = {
+  args: {
+    bordered: [false, true, false, true],
+  },
+};

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

@@ -0,0 +1,20 @@
+import { render, screen } from "~/tests/testing-library";
+import { ValueItem } from "./value-item";
+import React from "react";
+import { Typography } from "@mui/material";
+
+describe("ValueItem", () => {
+  const renderComponent = () => {
+    render(
+      <ValueItem>
+        <Typography>test content</Typography>
+      </ValueItem>,
+    );
+  };
+
+  it("should render the children", () => {
+    renderComponent();
+
+    expect(screen.getByText(/test content/i)).toBeVisible();
+  });
+});

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

@@ -0,0 +1,54 @@
+import { GridProps, Grid, Box } from "@mui/material";
+import { ResponsiveStyleValue } from "@mui/system";
+import React, { PropsWithChildren, FunctionComponent, ReactElement } from "react";
+import { useGetDefaultThemeColor } from "~/utils";
+
+export type ValueItemProps = PropsWithChildren<
+  Omit<GridProps, "item" | "container"> & { bordered?: ResponsiveStyleValue<boolean> }
+>;
+export type ValueItemComponent = FunctionComponent<ValueItemProps>;
+export type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;
+
+export const valueItemClasses = {
+  root: "RdsValueItem-root",
+  content: "RdsValueItem-content",
+};
+
+const resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {
+  const borderStyle = `solid ${color} 1px`;
+  const noBorder = "none";
+
+  if (!bordered) {
+    return undefined;
+  }
+
+  if (Array.isArray(bordered)) {
+    return bordered.map((b) => (b ? borderStyle : noBorder));
+  }
+
+  if (typeof bordered === "object") {
+    const style: Record<string, string | undefined> = {};
+    Object.entries(bordered).forEach(([key, value]) => {
+      style[key] = value ? borderStyle : noBorder;
+    });
+    return style;
+  }
+
+  return borderStyle;
+};
+
+export const ValueItem: ValueItemComponent = ({
+  children,
+  bordered = true,
+  ...rest
+}: ValueItemProps) => {
+  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });
+  const borderLeft = resolveBorderStyle(bordered, defaultColor);
+  return (
+    <Grid item className={valueItemClasses.root} {...rest}>
+      <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>
+        {children}
+      </Box>
+    </Grid>
+  );
+};

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

@@ -19,6 +19,14 @@ export const Default: Story = {
   },
 };
 
+export const Dense: Story = {
+  args: {
+    label: "Lorem",
+    value: 3,
+    dense: true,
+  },
+};
+
 export const Max: Story = {
   args: {
     label: "Lorem",

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

@@ -17,6 +17,7 @@ export const ValueRating = ({
   value = 0,
   maxRating = 5,
   editable,
+  dense,
   onEdit = () => null,
 }: ValueRatingProps) => {
   const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
@@ -24,14 +25,15 @@ export const ValueRating = ({
   const id = getValueContentLabelId(label);
 
   return (
-    <ValueContent label={label} tooltip={value.toString()}>
+    <ValueContent label={label} tooltip={value.toString()} dense={dense}>
       <Box display="flex" alignItems="center">
         <Rating
           aria-labelledby={id}
           readOnly={!isEditing}
           max={maxRating}
+          size={dense ? "small" : "medium"}
           value={isEditing ? editValue : value}
-          onChange={(_, newValue) => setEditValue(newValue!)}
+          onChange={(_, newValue) => newValue && setEditValue(newValue)}
         />
         {editable && !isEditing && (
           <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>

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

@@ -19,6 +19,14 @@ export const Default: Story = {
   },
 };
 
+export const Dense: Story = {
+  args: {
+    label: "Lorem",
+    value: "ipsum sit",
+    dense: true,
+  },
+};
+
 export const NumberAsValue: Story = {
   args: {
     label: "Lorem",

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

@@ -20,6 +20,7 @@ export const ValueText = ({
   value: valueProp,
   placeholder = DefaultPlaceholder,
   editable,
+  dense,
   onEdit = () => null,
 }: ValueTextProps) => {
   const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =
@@ -28,7 +29,7 @@ export const ValueText = ({
   const value = valueProp?.toString() || placeholder;
 
   return (
-    <ValueContent label={label} tooltip={value}>
+    <ValueContent label={label} tooltip={value} dense={dense}>
       {isEditing ? (
         <TextField
           value={editValue}
@@ -39,7 +40,7 @@ export const ValueText = ({
           }}
         />
       ) : (
-        <Typography variant="h5" noWrap aria-labelledby={id}>
+        <Typography variant={dense ? "body1" : "h5"} noWrap aria-labelledby={id}>
           {value}
           {editable && (
             <IconButton size="small" onClick={startEdit} sx={{ ml: 1 }}>

package/src/generators/generators.mock.ts

@@ -185,6 +185,48 @@ export const mockModel: Model = {
       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,
+    },
+    {
+      id: "carsHistory",
+      type: "group[]",
+      description: "Lorem ipsum",
+      name: "Cars History",
+      xs: 12,
+      sm: 4,
+      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,
+        },
+      ],
+    },
   ],
 };
 
@@ -210,6 +252,8 @@ export interface MockInstance {
   currency: string;
   tradeDate: Date;
   [key: string]: FieldType;
+  codes: string[];
+  identifiers: string[];
 }
 
 const mockFieldValue: Record<string, () => FieldType> = {
@@ -235,6 +279,8 @@ const mockFieldValue: Record<string, () => FieldType> = {
   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 => {
@@ -251,6 +297,20 @@ export const createModelInstance = <T extends BasicModelInstance>(model: Model,
           {},
         ),
       };
+    } 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,
@@ -260,6 +320,10 @@ export const createModelInstance = <T extends BasicModelInstance>(model: Model,
   }, {} as T);
 };
 
+/*
+
+*/
+
 const getModelFieldValue = ({ id }: ModelField): FieldType => {
   const fieldGenerator = mockFieldValue[id];
   if (!fieldGenerator) {

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

@@ -27,6 +27,9 @@ describe("utilities", () => {
         middleName: "",
         quantity: 0,
         tradeDate: new Date(2022, 8, 12, 9, 0),
+        codes: [],
+        identifiers: [],
+        carsHistory: [],
       });
     });
 
@@ -48,6 +51,7 @@ describe("utilities", () => {
         },
         available: true,
         gender: "female",
+        identifiers: ["1", "2"],
       });
 
       expect(instance).toStrictEqual({
@@ -71,6 +75,9 @@ describe("utilities", () => {
         middleName: "",
         quantity: 0,
         tradeDate: new Date(2022, 8, 12, 9, 0),
+        codes: [],
+        identifiers: ["1", "2"],
+        carsHistory: [],
       });
     });
   });