@pautena/react-design-system 0.4.2 → 0.4.4

package/src/components/{table → tables}/enhanced-table/enhanced-table.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { ChangeEvent } from "react";
 import { ReactNode, useState } from "react";
 import {
@@ -15,11 +14,12 @@ import {
 import Search from "@mui/icons-material/Search";
 import { EnhancedTableHead, HeadCell, Order } from "./enhanced-table-head";
 
-function getFilter<T>(columns: HeadCell[], search: string) {
+function getFilter<T>(columns: HeadCell<T>[], search: string) {
   return (d: T) => {
     return (
       !search ||
       columns.some((col) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let value = (d as any)[col.id];
         if (value?.toLowerCase) {
           value = value.toLowerCase();
@@ -30,7 +30,7 @@ function getFilter<T>(columns: HeadCell[], search: string) {
   };
 }
 
-function getComparator(order: Order, orderBy: any): (a: any, b: any) => number {
+function getComparator<T>(order: Order, orderBy: keyof T): (a: T, b: T) => number {
   return order === "desc"
     ? (a, b) => descendingComparator(a, b, orderBy)
     : (a, b) => -descendingComparator(a, b, orderBy);
@@ -48,10 +48,10 @@ function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
 interface Props<T> {
   readonly data: T[];
   search?: boolean;
-  defaultSort: string;
+  defaultSort: keyof T;
   defaultOrder?: Order;
   loading?: boolean;
-  columns: HeadCell[];
+  columns: HeadCell<T>[];
   children: (data: T[]) => ReactNode;
 }
 
@@ -66,9 +66,9 @@ export const EnhancedTable = <T,>({
 }: Props<T>) => {
   const [searchFilter, setSearchFilter] = useState<string>("");
   const [order, setOrder] = useState<Order>(defaultOrder);
-  const [orderBy, setOrderBy] = useState(defaultSort);
+  const [orderBy, setOrderBy] = useState<keyof T>(defaultSort);
 
-  const handleRequestSort = (property: string) => {
+  const handleRequestSort = (property: keyof T) => {
     const isAsc = orderBy === property && order === "asc";
     setOrder(isAsc ? "desc" : "asc");
     setOrderBy(property);
@@ -95,7 +95,7 @@ export const EnhancedTable = <T,>({
                   </InputAdornment>
                 ),
               }}
-              onChange={(e: ChangeEvent<any>) => setSearchFilter(e.target.value)}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setSearchFilter(e.target.value)}
             />
           </Box>
         )}

package/src/components/tables/table.stories.mdx

@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Tables/Introduction" />
+
+# Tables
+
+<ul>
+  <li><LinkTo kind="Components/Tables/EnhancedRemoteTable">EnhancedRemoteTable</LinkTo></li>
+  <li><LinkTo kind="Components/Tables/EnhancedTable">EnhancedTable</LinkTo></li>
+</ul>

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

@@ -1,9 +1,9 @@
 import React from "react";
 import { ValueBoolean } from "../value-boolean/value-boolean";
 import { ValueText } from "../value-text";
-import { GroupValueCard, GroupValueItem } from "./group-value-card";
+import { GroupValueCard, GroupValueCardProps, GroupValueItem } from "./group-value-card";
 
-export const GroupValueCardDummy = (props) => {
+export const GroupValueCardDummy = (props: GroupValueCardProps) => {
   return (
     <GroupValueCard {...props}>
       <GroupValueItem xs={12} sm={6} md={4}>

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

@@ -1,10 +1,15 @@
 import { ComponentMeta } from "@storybook/react";
-import { GroupValueCard } from "./group-value-card";
+import { GroupValueCard, GroupValueItem } from "./group-value-card";
 import { createTemplate, withPadding } from "../../../storybook";
 import { GroupValueCardDummy } from "./group-value-card.mock";
+import { ValueImage } from "../value-image";
+import workInProgressImg from "../../../stories/assets/work-in-progress.jpg";
+import React from "react";
+import { ValueContent } from "../value-content";
+import { DatatablePlaceholder } from "~/tests/datatable-placeholder";
 
 export default {
-  title: "Value displays/GroupValueCard",
+  title: "Components/Value displays/GroupValueCard",
   component: GroupValueCard,
   decorators: [withPadding(2)],
   parameters: {
@@ -24,3 +29,21 @@ export const WihtoutSubtitle = Template.bind({});
 WihtoutSubtitle.args = {
   title: "Hello world",
 };
+
+export const WithImage = () => (
+  <GroupValueCard centered title="Hello world" subtitle="Lorem ipsum sit amet">
+    <GroupValueItem xs={12} bordered={false}>
+      <ValueImage label="Lorem ipsum" value={workInProgressImg} />
+    </GroupValueItem>
+  </GroupValueCard>
+);
+
+export const WithDataTable = () => (
+  <GroupValueCard title="Hello world" subtitle="Lorem ipsum sit amet">
+    <GroupValueItem xs={12} bordered={false}>
+      <ValueContent label="lorem ipsum">
+        <DatatablePlaceholder />
+      </ValueContent>
+    </GroupValueItem>
+  </GroupValueCard>
+);

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

@@ -1,13 +1,18 @@
-import { render, screen } from "../../../tests";
+import { render, screen } from "~/tests/testing-library";
 import React from "react";
 import { GroupValueCardDummy } from "./group-value-card.mock";
+import { LoremIpsumPlaceholder } from "~/components/placeholders";
 
 describe("GroupValueCard", () => {
   const renderComponent = ({
     title = "Hello world",
     subtitle = undefined,
   }: { title?: string; subtitle?: string } = {}) => {
-    return render(<GroupValueCardDummy title={title} subtitle={subtitle} />);
+    return render(
+      <GroupValueCardDummy title={title} subtitle={subtitle}>
+        <LoremIpsumPlaceholder />
+      </GroupValueCardDummy>,
+    );
   };
   it("would render a title", () => {
     renderComponent({ title: "Hello world" });

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

@@ -2,7 +2,9 @@ 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 GroupValueItemProps = PropsWithChildren<
+  Omit<GridProps, "item" | "container"> & { bordered?: boolean }
+>;
 export type GroupValueItemComponent = FunctionComponent<GroupValueItemProps>;
 export type GroupValueItemElement = ReactElement<GroupValueItemProps, GroupValueItemComponent>;
 
@@ -12,6 +14,7 @@ export const groupValueItemClasses = {
 
 export const GroupValueItem: GroupValueItemComponent = ({
   children,
+  bordered = true,
   ...rest
 }: GroupValueItemProps) => {
   const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });
@@ -21,7 +24,7 @@ export const GroupValueItem: GroupValueItemComponent = ({
       <Box
         px={1}
         sx={{
-          borderLeft: `solid ${defaultColor} 1px`,
+          borderLeft: bordered ? `solid ${defaultColor} 1px` : "none",
         }}
       >
         {children}
@@ -33,10 +36,11 @@ export const GroupValueItem: GroupValueItemComponent = ({
 export interface GroupValueCardProps {
   title: string;
   subtitle?: string;
+  centered?: boolean;
   children: GroupValueItemElement | GroupValueItemElement[];
 }
 
-export const GroupValueCard = ({ title, subtitle, children }: GroupValueCardProps) => {
+export const GroupValueCard = ({ title, subtitle, centered, children }: GroupValueCardProps) => {
   const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });
 
   return (
@@ -55,7 +59,12 @@ export const GroupValueCard = ({ title, subtitle, children }: GroupValueCardProp
           </Typography>
         )}
       </Box>
-      <Grid container margin={2} rowSpacing={2}>
+      <Grid
+        container
+        padding={1}
+        rowSpacing={2}
+        justifyContent={centered ? "center" : "flex-start"}
+      >
         {children}
       </Grid>
     </Paper>

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

@@ -3,3 +3,4 @@ export * from "./value-card";
 export * from "./value-boolean";
 export * from "./value-datetime";
 export * from "./group-value-card";
+export * from "./value-displays.types";

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

@@ -3,7 +3,7 @@ import { ValueBoolean } from "./value-boolean";
 import { createTemplate } from "../../../storybook";
 
 export default {
-  title: "Value displays/ValueBoolean",
+  title: "Components/Value displays/ValueBoolean",
   component: ValueBoolean,
   parameters: {
     layout: "centered",

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

@@ -1,10 +1,10 @@
 import React from "react";
 import { ValueBoolean } from "./value-boolean";
-import { render, screen } from "../../../tests";
+import { render, screen } from "~/tests/testing-library";
 
 describe("ValueBoolean", () => {
-  const renderComponent = ({ value }: { value: boolean }) => {
-    return render(<ValueBoolean label="Hello world" value={value} />);
+  const renderComponent = ({ value, placeholder }: { value?: boolean; placeholder?: string }) => {
+    return render(<ValueBoolean label="Hello world" value={value} placeholder={placeholder} />);
   };
 
   it("would render the label", () => {
@@ -24,4 +24,16 @@ describe("ValueBoolean", () => {
 
     expect(screen.getByTestId("CloseIcon")).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();
+  });
 });

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

@@ -1,33 +1,33 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import { Typography, useTheme } from "@mui/material";
 import React from "react";
 import CheckIcon from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
+import { BaseValueProps, DefaultPlaceholder } from "../value-displays.types";
+import { ValueContent } from "../value-content";
 
-export interface ValueBooleanProps {
-  /**
-   * Name of the displayed value
-   */
-  label: string;
-  /**
-   * Value displayed
-   */
-  value: boolean;
-}
+export type ValueBooleanProps = BaseValueProps<boolean>;
 
 /**
  * Displays a boolean value with a label
  */
-export const ValueBoolean = ({ label, value }: ValueBooleanProps) => {
+export const ValueBoolean = ({
+  label,
+  value,
+  placeholder = DefaultPlaceholder,
+}: 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>
+    <ValueContent label={label}>
+      {value === undefined ? (
+        <Typography variant="h5">{placeholder}</Typography>
+      ) : value ? (
+        <CheckIcon color="success" sx={iconSx} />
+      ) : (
+        <CloseIcon color="error" sx={iconSx} />
+      )}
+    </ValueContent>
   );
 };

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

@@ -5,7 +5,7 @@ import { createTemplate } from "../../../storybook";
 import { ValueText } from "../value-text";
 
 export default {
-  title: "Value displays/ValueCard",
+  title: "Components/Value displays/ValueCard",
   component: ValueCard,
   parameters: {
     layout: "centered",

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { ValueCard } from "./value-card";
-import { render, screen } from "../../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { ReactElement } from "react";
 import { ValueText } from "../value-text";
 

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

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

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

@@ -0,0 +1,20 @@
+import { ComponentMeta } from "@storybook/react";
+import { ValueContent } from "./value-content";
+import { withContainer } from "../../../storybook";
+import { Typography } from "@mui/material";
+import React from "react";
+
+export default {
+  title: "Components/Value displays/ValueContent",
+  component: ValueContent,
+  decorators: [withContainer({ width: 200 })],
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof ValueContent>;
+
+export const Default = () => (
+  <ValueContent label="lorem ipsum">
+    <Typography>Demo content</Typography>
+  </ValueContent>
+);

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { Typography } from "@mui/material";
+import { render, screen } from "~/tests/testing-library";
+import { ValueContent } from "./value-content";
+import userEvent from "@testing-library/user-event";
+
+describe("ValueContent", () => {
+  const renderComponent = ({ tooltip }: { tooltip?: string } = {}) => {
+    render(
+      <ValueContent label="lorem ipsum" tooltip={tooltip} tooltipEnterDelay={0}>
+        <Typography>Test content</Typography>
+      </ValueContent>,
+    );
+  };
+
+  it("should render a label", () => {
+    renderComponent();
+
+    expect(screen.getByRole("label", { name: /lorem ipsum/i })).toBeInTheDocument();
+  });
+
+  describe("tooltip", () => {
+    it("should render a tooltip if is defined and the user hovers the value", async () => {
+      renderComponent({ tooltip: "dolor sit amet" });
+
+      await userEvent.hover(screen.getByText(/test content/i));
+
+      expect(await screen.findByRole("tooltip", { name: /dolor sit amet/i })).toBeInTheDocument();
+    });
+
+    it("shouldn't render a tooltip if it's not defined", () => {
+      renderComponent({ tooltip: undefined });
+
+      expect(screen.queryByRole("tooltip", { name: /dolor sit amet/i })).not.toBeInTheDocument();
+    });
+  });
+
+  describe("children", () => {
+    it("should render the children if tooltip is defined", () => {
+      renderComponent({ tooltip: "dolor sit amet" });
+
+      expect(screen.getByText(/test content/i)).toBeInTheDocument();
+    });
+    it("should render the children if tooltip is undefined", () => {
+      renderComponent({ tooltip: undefined });
+
+      expect(screen.getByText(/test content/i)).toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,54 @@
+import { Box, Tooltip, Typography } from "@mui/material";
+import React from "react";
+
+export const getValueContentLabelId = (label: string): string =>
+  `label-${label.replace(/ /g, "-")}`;
+
+export interface ValueContentProps {
+  /**
+   * Name of the displayed value
+   */
+  label: string;
+
+  /**
+   * If defined, a tooltip is going to be added arround the children;
+   */
+  tooltip?: string;
+
+  /**
+   * Timeout before the tooltip appears when the user hovers the value
+   */
+  tooltipEnterDelay?: number;
+
+  /**
+   * Component that's going to be renderd under the label
+   */
+  children: React.ReactElement<any, any>;
+}
+
+/**
+ * Displays a string value with a label
+ */
+export const ValueContent = ({
+  label,
+  tooltip,
+  tooltipEnterDelay = 2000,
+  children,
+}: ValueContentProps) => {
+  const id = getValueContentLabelId(label);
+
+  return (
+    <Box width={1}>
+      <Typography variant="subtitle2" role="label" id={id}>
+        {label}
+      </Typography>
+      {tooltip ? (
+        <Tooltip title={tooltip} placement="top" enterDelay={tooltipEnterDelay}>
+          {children}
+        </Tooltip>
+      ) : (
+        children
+      )}
+    </Box>
+  );
+};

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

@@ -3,7 +3,7 @@ import { ValueDatetime } from "./value-datetime";
 import { createTemplate, withContainer } from "../../../storybook";
 
 export default {
-  title: "Value displays/ValueDate",
+  title: "Components/Value displays/ValueDatetime",
   component: ValueDatetime,
   decorators: [withContainer({ width: 200 })],
   parameters: {
@@ -19,3 +19,16 @@ Default.args = {
   value: new Date(2022, 8, 22),
   format: "yyyy/MM/dd",
 };
+
+export const Placeholder = Template.bind({});
+Placeholder.args = {
+  label: "Lorem",
+  format: "yyyy/MM/dd",
+};
+
+export const CustomPlaceholder = Template.bind({});
+CustomPlaceholder.args = {
+  label: "Lorem",
+  format: "yyyy/MM/dd",
+  placeholder: ".",
+};

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

@@ -1,23 +1,42 @@
 import React from "react";
-import { render, screen } from "../../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { ValueDatetime } from "./value-datetime";
 
+const DummyValue = new Date(2022, 7, 10);
+
 describe("ValueDatetime", () => {
-  const renderComponent = () => {
+  const renderComponent = ({ value, placeholder }: { value?: Date; placeholder?: string }) => {
     return render(
-      <ValueDatetime label="Hello world" value={new Date(2022, 7, 10)} format="dd-MM-yyyy" />,
+      <ValueDatetime
+        label="Hello world"
+        value={value}
+        placeholder={placeholder}
+        format="dd-MM-yyyy"
+      />,
     );
   };
 
   it("would render the label", () => {
-    renderComponent();
+    renderComponent({ value: DummyValue });
 
     expect(screen.getByRole("label", { name: /hello world/i })).toBeInTheDocument();
   });
 
   it("would render the value", () => {
-    renderComponent();
+    renderComponent({ value: DummyValue });
 
     expect(screen.getByText(/10-08-2022/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();
+  });
 });

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

@@ -1,17 +1,10 @@
-import { Box, Tooltip, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
 import React from "react";
 import { format } from "date-fns";
+import { BaseValueProps, DefaultPlaceholder } from "../value-displays.types";
+import { getValueContentLabelId, ValueContent } from "../value-content";
 
-export interface ValueDatetimeProps {
-  /**
-   * Name of the displayed value
-   */
-  label: string;
-  /**
-   * Value displayed
-   */
-  value: Date;
-
+export interface ValueDatetimeProps extends BaseValueProps<Date> {
   /**
    * Datetime format
    */
@@ -21,20 +14,20 @@ export interface ValueDatetimeProps {
 /**
  * Displays a formated datetime with a label
  */
-export const ValueDatetime = ({ label, value, format: fmt }: ValueDatetimeProps) => {
-  const id = `label-${label.replace(/ /g, "-")}`;
-  const formatedValue = format(value, fmt);
+export const ValueDatetime = ({
+  label,
+  value: valueProp,
+  format: fmt,
+  placeholder = DefaultPlaceholder,
+}: ValueDatetimeProps) => {
+  const id = getValueContentLabelId(label);
+  const value = (valueProp && format(valueProp, fmt)) || placeholder;
 
   return (
-    <Box>
-      <Typography variant="subtitle2" role="label" id={id}>
-        {label}
+    <ValueContent label={label} tooltip={value}>
+      <Typography variant="h5" noWrap aria-labelledby={id}>
+        {value}
       </Typography>
-      <Tooltip title={formatedValue} placement="top" enterDelay={2000}>
-        <Typography variant="h5" noWrap aria-labelledby={id}>
-          {formatedValue}
-        </Typography>
-      </Tooltip>
-    </Box>
+    </ValueContent>
   );
 };

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

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Value displays/Introduction" />
+
+# Value Displays
+
+<ul>
+  <li><LinkTo kind="Components/Value displays/GroupValueCard">GroupValueCard</LinkTo></li>
+  <li><LinkTo kind="Components/Value displays/ValueBoolean">ValueBoolean</LinkTo></li>
+  <li><LinkTo kind="Components/Value displays/ValueCard">ValueCard</LinkTo></li>
+  <li><LinkTo kind="Components/Value displays/ValueContent">ValueContent</LinkTo></li>
+  <li><LinkTo kind="Components/Value displays/ValueDatetime">ValueDatetime</LinkTo></li>
+  <li><LinkTo kind="Components/Value displays/ValueImage">ValueImage</LinkTo></li>
+  <li><LinkTo kind="Components/Value displays/ValueText">ValueText</LinkTo></li>
+</ul>

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

@@ -0,0 +1,18 @@
+export interface BaseValueProps<T> {
+  /**
+   * Name of the displayed value
+   */
+  label: string;
+
+  /**
+   * Value displayed
+   */
+  value?: T;
+
+  /**
+   * String rendered if value is undefined
+   */
+  placeholder?: string;
+}
+
+export const DefaultPlaceholder = "-";

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

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

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

@@ -0,0 +1,28 @@
+import { ComponentMeta } from "@storybook/react";
+import { ValueImage } from "./value-image";
+import { createTemplate, withContainer } from "../../../storybook";
+import workInProgressImg from "../../../stories/assets/work-in-progress.jpg";
+
+export default {
+  title: "Components/Value displays/ValueImage",
+  component: ValueImage,
+  decorators: [withContainer({ width: 200 })],
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof ValueImage>;
+
+const Template = createTemplate(ValueImage);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Lorem",
+  value: workInProgressImg,
+};
+
+export const CustomSize = Template.bind({});
+CustomSize.args = {
+  label: "Lorem",
+  value: workInProgressImg,
+  size: 250,
+};