@pautena/react-design-system 0.4.2 → 0.4.3

package/src/components/tab/tab-card/tab-card.tsx

@@ -8,11 +8,11 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
   },
 }));
 
-interface Props {
+export type TabCardProps = PropsWithChildren<{
   tabs: string[];
-}
+}>;
 
-export const TabCard = ({ children, tabs }: PropsWithChildren<Props>) => {
+export const TabCard = ({ children, tabs }: TabCardProps) => {
   const [tab, setTab] = useTab();
   return (
     <Paper>

package/src/components/table/enhanced-remote-table/enhanced-remote-table.mock.tsx

@@ -2,20 +2,21 @@ import React from "react";
 import { TableCell, TableRow } from "@mui/material";
 import { EnhancedRemoteTable } from "./enhanced-remote-table";
 import { HeadCell, Order } from "../enhanced-table/enhanced-table-head";
+import { Data } from "../enhanced-table/enhanced-table.mock";
 
-interface DummyProps<T> {
-  data: T[];
+export interface EnhancedRemoteDummyTableProps {
+  data: Data[];
   loading: boolean;
-  defaultSort: string;
+  defaultSort: keyof Data;
   defaultOrder?: Order;
-  columns: HeadCell[];
+  columns: HeadCell<Data>[];
   onRequestSort: (col: string, orderBy: Order) => void;
 }
 
-export function EnhancedRemoteDummyTable<T>(props: DummyProps<T>) {
+export function EnhancedRemoteDummyTable(props: EnhancedRemoteDummyTableProps) {
   return (
     <EnhancedRemoteTable {...props}>
-      {(d: unknown) => (
+      {(d: Data) => (
         <TableRow key={d.id}>
           <TableCell>{d.name}</TableCell>
           <TableCell>{d.id}</TableCell>

package/src/components/table/enhanced-remote-table/enhanced-remote-table.test.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import { screen, render } from "@testing-library/react";
 import { EnhancedRemoteDummyTable } from "./enhanced-remote-table.mock";
 import userEvent from "@testing-library/user-event";
-import { columns, data } from "../enhanced-table/enhanced-table.mock";
-import { expectProgressIndicator } from "../../../tests";
+import { columns, Data, data } from "../enhanced-table/enhanced-table.mock";
+import { expectProgressIndicator } from "~/tests/assertions";
 
 function renderInstance({
   defaultSort = "startDate",
   loading = false,
-}: { defaultSort?: string; loading?: boolean } = {}) {
+}: { defaultSort?: keyof Data; loading?: boolean } = {}) {
   const onRequestSort = jest.fn();
   render(
     <EnhancedRemoteDummyTable

package/src/components/table/enhanced-remote-table/enhanced-remote-table.tsx

@@ -10,14 +10,14 @@ import {
 } from "@mui/material";
 import { EnhancedTableHead, HeadCell, Order } from "../enhanced-table";
 
-interface Props<T> {
+export interface EnhancedRemoteTableProps<T> {
   data: T[];
   loading: boolean;
-  defaultSort: string;
+  defaultSort: keyof T;
   defaultOrder?: Order;
-  columns: HeadCell[];
+  columns: HeadCell<T>[];
   children: (data: T, index: number) => ReactNode;
-  onRequestSort: (col: string, orderBy: "asc" | "desc") => void;
+  onRequestSort: (col: keyof T, orderBy: "asc" | "desc") => void;
 }
 
 export const EnhancedRemoteTable = <T,>({
@@ -28,15 +28,15 @@ export const EnhancedRemoteTable = <T,>({
   defaultSort,
   defaultOrder,
   onRequestSort,
-}: Props<T>) => {
+}: EnhancedRemoteTableProps<T>) => {
   const [order, setOrder] = useState({
     orderBy: defaultSort,
     order: defaultOrder || "asc",
   });
 
-  const handleRequestSort = (property: string) => {
-    setOrder((prevState) => {
-      const newOrder = prevState.orderBy === property && prevState.order === "asc" ? "desc" : "asc";
+  const handleRequestSort = (property: keyof T) => {
+    setOrder(({ orderBy, order }) => {
+      const newOrder = orderBy === property && order === "asc" ? "desc" : "asc";
       onRequestSort(property, newOrder);
 
       return {

package/src/components/table/enhanced-table/enhanced-table-head.tsx

@@ -3,23 +3,28 @@ import { TableSortLabel, TableRow, Box, TableCell, TableHead } from "@mui/materi
 import { visuallyHidden } from "@mui/utils";
 
 export type Order = "asc" | "desc";
-export interface HeadCell {
+export interface HeadCell<T> {
   disablePadding: boolean;
-  id: string;
+  id: keyof T;
   label: string;
   numeric: boolean;
   sort: boolean;
 }
 
-interface Props {
-  onRequestSort: (property: string) => void;
+interface EnhancedTableHeadProps<T> {
+  onRequestSort: (property: keyof T) => void;
   order: Order;
-  orderBy: string;
-  headCells: HeadCell[];
+  orderBy: keyof T;
+  headCells: HeadCell<T>[];
 }
 
-export function EnhancedTableHead({ order, orderBy, headCells, onRequestSort }: Props) {
-  const createSortHandler = (property: string) => () => {
+export const EnhancedTableHead = <T,>({
+  order,
+  orderBy,
+  headCells,
+  onRequestSort,
+}: EnhancedTableHeadProps<T>) => {
+  const createSortHandler = (property: keyof T) => () => {
     onRequestSort(property);
   };
 
@@ -55,4 +60,4 @@ export function EnhancedTableHead({ order, orderBy, headCells, onRequestSort }:
       </TableRow>
     </TableHead>
   );
-}
+};

package/src/components/table/enhanced-table/enhanced-table.mock.tsx

@@ -3,7 +3,7 @@ import { EnhancedTable } from ".";
 import { TableCell, TableRow } from "@mui/material";
 import { HeadCell, Order } from "./enhanced-table-head";
 
-export const columns: HeadCell[] = [
+export const columns: HeadCell<Data>[] = [
   {
     id: "name",
     numeric: false,
@@ -27,7 +27,7 @@ export const columns: HeadCell[] = [
   },
 ];
 
-interface Data {
+export interface Data {
   id: number;
   name: string;
   startDate: string;
@@ -61,15 +61,21 @@ export const data: Data[] = [
   },
 ];
 
-interface Props {
+export interface TestTableProps {
   data: Data[];
-  columns: HeadCell[];
-  defaultSort: string;
+  columns: HeadCell<Data>[];
+  defaultSort: keyof Data;
   defaultOrder: Order;
   loading: boolean;
 }
 
-export const TestTable = ({ data, columns, defaultOrder, defaultSort, loading }: Props) => {
+export const TestTable = ({
+  data,
+  columns,
+  defaultOrder,
+  defaultSort,
+  loading,
+}: TestTableProps) => {
   return (
     <EnhancedTable
       search

package/src/components/table/enhanced-table/enhanced-table.test.tsx

@@ -1,13 +1,14 @@
 import React from "react";
-import { expectProgressIndicator, render } from "../../../tests";
+import { render } from "~/tests/testing-library";
 import { screen } from "@testing-library/react";
 import userEvents from "@testing-library/user-event";
-import { TestTable, columns, data } from "./enhanced-table.mock";
+import { TestTable, columns, data, Data } from "./enhanced-table.mock";
+import { expectProgressIndicator } from "~/tests/assertions";
 
-function renderInstance({
+const renderInstance = ({
   defaultSort = "startDate",
   loading = false,
-}: { defaultSort?: string; loading?: boolean } = {}) {
+}: { defaultSort?: keyof Data; loading?: boolean } = {}) => {
   return render(
     <TestTable
       data={data}
@@ -17,7 +18,7 @@ function renderInstance({
       loading={loading}
     />,
   );
-}
+};
 
 describe("EnhancedTable", () => {
   it("all items are rendered in the correct order", async () => {

package/src/components/table/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/table-list/table-list.stories.tsx

@@ -2,8 +2,9 @@ import React from "react";
 import { useDemoData } from "@mui/x-data-grid-generator";
 import { ComponentMeta } from "@storybook/react";
 import { createTemplate } from "../../storybook";
-import { TableList } from "./table-list";
+import { TableList, TableListProps } from "./table-list";
 import { action } from "@storybook/addon-actions";
+import { BasicModelInstance } from "~/generators";
 
 const maxColumns = 3;
 
@@ -15,23 +16,32 @@ export default {
   },
 } as ComponentMeta<typeof TableList>;
 
-const Template = createTemplate(({ dataSetType, size, ...rest }) => {
-  const { data } = useDemoData({
-    dataSet: dataSetType,
-    rowLength: size,
-    maxColumns,
-  });
-  const { rows } = data;
-  const columns = data.columns.map(({ field, headerName }) => ({
-    id: field,
-    label: headerName,
-    sort: true,
-    disablePadding: false,
-    numeric: false,
-  }));
+interface TemplateProps<T extends BasicModelInstance> extends TableListProps<T> {
+  size: number;
+  dataSetType: "Commodity" | "Employee";
+}
 
-  return <TableList {...rest} columns={columns} data={rows} onClick={action("onClick row")} />;
-});
+const Template = createTemplate(
+  <T extends BasicModelInstance>({ dataSetType, size, ...rest }: TemplateProps<T>) => {
+    const { data } = useDemoData({
+      dataSet: dataSetType,
+      rowLength: size,
+      maxColumns,
+    });
+    const { rows } = data;
+    const columns = data.columns.map(({ field, headerName }) => ({
+      id: field,
+      label: headerName || "invalid",
+      sort: true,
+      disablePadding: false,
+      numeric: false,
+    }));
+
+    return (
+      <TableList {...rest} columns={columns} data={rows as any} onClick={action("onClick row")} />
+    );
+  },
+);
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/table-list/table-list.test.tsx

@@ -1,12 +1,13 @@
 import React from "react";
-import { expectProgressIndicator, render } from "../../tests";
+import { render } from "~/tests/testing-library";
 import { screen } from "@testing-library/react";
 import userEvents from "@testing-library/user-event";
 import { TableRowOption, TableList } from "./table-list";
 import { HeadCell } from "../table/enhanced-table";
 import { BasicModelInstance } from "../../generators";
+import { expectProgressIndicator } from "~/tests/assertions";
 
-const columns: HeadCell[] = [
+const columns: HeadCell<BasicModelInstance>[] = [
   {
     id: "id",
     numeric: true,
@@ -81,7 +82,7 @@ describe("TableList", () => {
     defaultSort?: string;
     loading?: boolean;
     search?: boolean;
-    options?: TableRowOption<any>[];
+    options?: TableRowOption<BasicModelInstance>[];
     onClick?: jest.Mock;
   } = {}) => {
     const instance = render(
@@ -109,8 +110,8 @@ describe("TableList", () => {
 
     data.forEach(({ id, name, value }) => {
       expect(screen.getByRole("cell", { name: id })).toBeInTheDocument();
-      expect(screen.getByRole("cell", { name: name })).toBeInTheDocument();
-      expect(screen.getByRole("cell", { name: value })).toBeInTheDocument();
+      expect(screen.getByRole("cell", { name: name as string })).toBeInTheDocument();
+      expect(screen.getByRole("cell", { name: value as string })).toBeInTheDocument();
     });
   });
 
@@ -149,7 +150,8 @@ describe("TableList", () => {
     it("would render the items 2,3 and 4", async () => {
       renderInstance({ search: true });
 
-      await userEvents.type(screen.getByPlaceholderText(/search/i), "a");
+      const search = screen.getByPlaceholderText(/search/i);
+      await userEvents.type(search, "a");
 
       expect(screen.getByText(/item 2/i)).toBeInTheDocument();
       expect(screen.getByText(/item 3/i)).toBeInTheDocument();
@@ -157,6 +159,8 @@ describe("TableList", () => {
 
       expect(screen.queryByText(/item 1/i)).not.toBeInTheDocument();
       expect(screen.queryByText(/item 5/i)).not.toBeInTheDocument();
+
+      await userEvents.clear(search);
     });
 
     it("would render all the items if I remove the search", async () => {
@@ -228,6 +232,7 @@ describe("TableList", () => {
     await userEvents.click(screen.getByRole("row", { name: /item 3/i }));
   });
 
+  // TODO: this tests are throwing a console.error
   describe("options menu", () => {
     it("would render a button to open the menu if doesn't have options", () => {
       renderInstance({ options: undefined });

package/src/components/table-list/table-list.tsx

@@ -2,7 +2,7 @@ import { TableRow, TableCell, IconButton, MenuItem, Menu } from "@mui/material";
 import React from "react";
 import { EnhancedTable, HeadCell, Order } from "../table/enhanced-table";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
-import { BasicModelInstance } from "~/generators";
+import { BasicModelInstance } from "../../generators/generators.model";
 
 const OptionsId = "__options";
 
@@ -13,7 +13,7 @@ export interface TableRowOption<T extends BasicModelInstance> {
 }
 
 export interface TableListProps<T extends BasicModelInstance> {
-  columns: HeadCell[];
+  columns: HeadCell<T>[];
   data: T[];
   search?: boolean;
   defaultSort: string;
@@ -23,6 +23,7 @@ export interface TableListProps<T extends BasicModelInstance> {
   onClick?: (d: T) => void;
 }
 
+// TODO: Move this to teh generators section
 export const TableList = <T extends BasicModelInstance>({
   columns: columnsProp,
   options,
@@ -33,19 +34,19 @@ export const TableList = <T extends BasicModelInstance>({
   defaultOrder,
   loading,
 }: TableListProps<T>) => {
-  const columns = columnsProp;
-  const [anchorMenuEl, setAnchorMenuEl] = React.useState<null | { item: T; anchor: HTMLElement }>(
-    null,
-  );
-  if (options && !columns.some((c) => c.id === OptionsId)) {
-    columns.push({
+  const columns = [
+    ...columnsProp,
+    {
       id: OptionsId,
       label: "",
       disablePadding: false,
       numeric: false,
       sort: false,
-    });
-  }
+    },
+  ];
+  const [anchorMenuEl, setAnchorMenuEl] = React.useState<null | { item: T; anchor: HTMLElement }>(
+    null,
+  );
 
   return (
     <>
@@ -68,8 +69,18 @@ export const TableList = <T extends BasicModelInstance>({
                 sx={{ cursor: onClick && "pointer" }}
               >
                 {columns.map(({ id }, j) => (
-                  <TableCell role="cell" scope="row" key={id} aria-rowindex={i} aria-colindex={j}>
-                    {row[id]}
+                  <TableCell
+                    role="cell"
+                    scope="row"
+                    key={id.toString()}
+                    aria-rowindex={i}
+                    aria-colindex={j}
+                  >
+                    {
+                      row[
+                        id
+                      ] as string /* TODO: This has to be reimplemented having a cell based on each model type */
+                    }
                   </TableCell>
                 ))}
                 {options && (

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,7 +1,12 @@
 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/components";
 
 export default {
   title: "Value displays/GroupValueCard",
@@ -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 { Placeholder } from "~/tests/components";
 
 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}>
+        <Placeholder />
+      </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.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();
+  });
 });