@pautena/react-design-system 0.4.2 → 0.4.4

package/src/{components → generators}/table-list/table-list.tsx

@@ -1,8 +1,8 @@
 import { TableRow, TableCell, IconButton, MenuItem, Menu } from "@mui/material";
 import React from "react";
-import { EnhancedTable, HeadCell, Order } from "../table/enhanced-table";
+import { EnhancedTable, HeadCell, Order } from "../../components/tables/enhanced-table";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
-import { BasicModelInstance } from "~/generators";
+import { BasicModelInstance } from "../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/hooks/routing/routing.test.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Typography } from "@mui/material";
 import React, { useState } from "react";
 import { Routes, Route } from "react-router-dom";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { useNavigateWhenValueChanges } from "./routing.hooks";
 import userEvent from "@testing-library/user-event";
 

package/src/layouts/app-bar-with-drawer-layout/app-bar-with-drawer-layout.stories.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
 import { AppBarWithDrawerLayout } from "./app-bar-with-drawer-layout";
-import { ContentPlaceholder } from "../../tests";
-import { mockNav } from "../../components/drawer/drawer.mock";
-import { MiniAppBar } from "../../components/app-bar";
-import { DrawerContent, MiniDrawer } from "../../components";
+import { mockNav } from "../../components/drawers/drawer/drawer.mock";
+import { MiniAppBar } from "../../components/app-bars/app-bar";
+import { ContentPlaceholder, DrawerContent, MiniDrawer } from "../../components";
 import { withMemoryRouter } from "~/storybook";
 
 export default {

package/src/layouts/app-bar-with-drawer-layout/app-bar-with-drawer-layout.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { MiniDrawerStory } from "./app-bar-with-drawer-layout.stories";
-import { expectContentPlaceholder, render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
+import { expectContentPlaceholder } from "~/tests/assertions";
 
 describe("AppBarWithDrawerLayout", () => {
   const renderComponent = () => {

package/src/layouts/app-bar-with-drawer-layout/app-bar-with-drawer-layout.tsx

@@ -1,9 +1,9 @@
 import React, { ReactNode } from "react";
 import { styled } from "@mui/material/styles";
-import { AppBarElement } from "../../components/app-bar";
-import { DrawerElement } from "../../components/drawer";
+import { AppBarElement } from "../../components/app-bars/app-bar";
+import { DrawerElement } from "../../components/drawers/drawer";
 import { Box } from "@mui/material";
-import { DrawerProvider } from "../../components/drawer/drawer.provider";
+import { DrawerProvider } from "../../components/drawers/drawer/drawer.provider";
 
 const DrawerHeader = styled("div")(({ theme }) => ({
   display: "flex",

package/src/layouts/header-layout/header-layout.stories.tsx

@@ -1,14 +1,13 @@
 import React, { ReactElement } from "react";
 import { ComponentMeta } from "@storybook/react";
 import { createTemplate } from "../../storybook";
-import { HeaderLayout } from "./header-layout";
+import { HeaderLayout, HeaderLayoutProps } from "./header-layout";
 import { withMemoryRouter } from "~/storybook";
-import { SkeletonGrid } from "../../tests";
 import { withFullHeight } from "../../storybook";
-import { Content, Header, HeaderProps, HeaderTab, TableList, TabPanel } from "../../components";
+import { Content, Header, HeaderProps, HeaderTab, SkeletonGrid, TabPanel } from "../../components";
 import { Box, Typography } from "@mui/material";
 import { useDemoData } from "@mui/x-data-grid-generator";
-import { ModelForm, ObjectDetails } from "../../generators";
+import { ModelForm, ObjectDetails, TableList } from "../../generators";
 import { mockModel, createModelInstance } from "../../generators/generators.mock";
 import { action } from "@storybook/addon-actions";
 import { DataGrid } from "@mui/x-data-grid";
@@ -58,7 +57,7 @@ export default {
   },
 } as ComponentMeta<typeof HeaderLayout>;
 
-interface HeaderLayoutStoryProps {
+interface HeaderLayoutStoryProps extends HeaderLayoutProps {
   headerProps: HeaderProps;
   contentChildren: ReactElement;
 }
@@ -102,7 +101,14 @@ const ListContent = () => {
     numeric: false,
   }));
 
-  return <TableList data={rows} columns={columns} defaultSort={columns[0].id} defaultOrder="asc" />;
+  return (
+    <TableList
+      data={rows as any}
+      columns={columns}
+      defaultSort={columns[0].id}
+      defaultOrder="asc"
+    />
+  );
 };
 
 export const List = Template.bind({});
@@ -146,14 +152,16 @@ Form.args = {
 };
 
 const DataTableContent = () => {
-  const { data } = useDemoData({
+  const {
+    data: { rows, columns },
+  } = useDemoData({
     dataSet: "Commodity",
     rowLength: 100,
     maxColumns: 7,
     editable: true,
   });
 
-  return <DataGrid rows={data.rows} columns={data.columns} pagination sx={{ height: 400 }} />;
+  return <DataGrid rows={rows} columns={columns as any} pagination sx={{ height: 400 }} />;
 };
 
 export const DataTable = Template.bind({});

package/src/layouts/header-layout/header-layout.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { HeaderLayout } from "./header-layout";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { Content, Header } from "../../components";
 import { Typography } from "@mui/material";
 

package/src/layouts/header-layout/header-layout.tsx

@@ -1,10 +1,10 @@
 import { Box } from "@mui/material";
 import React from "react";
 import { ContentElement, HeaderElement } from "../../components";
-import { LoadingArea } from "../../components/loading-area";
+import { LoadingArea } from "../../components/feedback/loading-area";
 import { TabProvider } from "../../providers";
 
-interface HeaderLayoutProps {
+export interface HeaderLayoutProps {
   loading?: boolean;
   children: [HeaderElement, ContentElement];
 }

package/src/layouts/layouts.stories.mdx

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

package/src/providers/notification-center/notification-center.context.ts

@@ -1,15 +1,9 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { AlertColor } from "@mui/material";
 import React from "react";
 
 export const NotificationCenterProviderUndefinedError = new Error(
   "NotificationCenterContext.Provider is required and was undefined",
 );
-export type SnackbarContentType =
-  | React.ReactElement<any, any>
-  | ((key: string) => React.ReactElement<any, any>);
-
-export type SnackbarActionType = React.ReactNode | ((key: string) => React.ReactNode);
 
 export interface Notification {
   severity: AlertColor;

package/src/providers/notification-center/notification-center.stories.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import { ComponentMeta } from "@storybook/react";
 import { NotificationCenterProvider } from "./notification-center.provider";
 import { useNotificationCenter } from "./notification-center.context";
-import { ContentPlaceholder } from "../../tests";
 import { Button, Box } from "@mui/material";
+import { ContentPlaceholder } from "~/components";
 
 const DummyError = {
   title: "Internal Server error",
@@ -11,7 +11,7 @@ const DummyError = {
 };
 
 export default {
-  title: "Providers/NotificationCenter",
+  title: "Components/Feedback/NotificationCenter",
   component: ContentPlaceholder,
   decorators: [
     (Story) => (

package/src/providers/notification-center/notification-center.test.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import userEvent from "@testing-library/user-event";
 import { AlertColor, Box, Button } from "@mui/material";
-import { render, screen, waitForElementToBeRemoved, expectAlert } from "../../tests";
+import { render, screen, waitForElementToBeRemoved } from "~/tests/testing-library";
 import { NotificationCenterProvider } from "./notification-center.provider";
 import {
   NotificationCenterContext,
@@ -10,6 +10,8 @@ import {
   Notification,
 } from "./notification-center.context";
 import { useNotifyWhenValueChanges } from "./notification-center.hooks";
+import { expectAlert } from "~/tests/assertions";
+import { mockConsoleError } from "~/tests/mocks";
 
 describe("NotificationCenterProvider", () => {
   const renderComponent = ({ autoHideDuration }: { autoHideDuration?: number } = {}) => {
@@ -99,18 +101,15 @@ describe("NotificationCenterProvider", () => {
 });
 
 describe("useNotificationCenter", () => {
+  mockConsoleError();
+
   it("would throw an error if the component is not wrapped by a NotificationCenterContext.Provider", () => {
     const FailingComponent = () => {
       useNotificationCenter();
       return <Box>FailingComponent</Box>;
     };
 
-    try {
-      render(<FailingComponent />);
-      fail();
-    } catch (err) {
-      expect(err).toStrictEqual(NotificationCenterProviderUndefinedError);
-    }
+    expect(() => render(<FailingComponent />)).toThrow(NotificationCenterProviderUndefinedError);
   });
 });
 

package/src/stories/Introduction.stories.mdx

@@ -1,201 +1,26 @@
 import { Meta } from '@storybook/addon-docs';
-import Colors from './assets/colors.svg';
-import StackAlt from './assets/stackalt.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
+import LinkTo from '@storybook/addon-links/react';
+import {hrefTo} from '@storybook/addon-links';
 import WorkInProgress from './assets/work-in-progress.jpg'
 
 <Meta title="Introduction" />
 
-<style>
-  {`
-    .subheading {
-      --mediumdark: '#999999';
-      font-weight: 900;
-      font-size: 13px;
-      color: #999;
-      letter-spacing: 6px;
-      line-height: 24px;
-      text-transform: uppercase;
-      margin-bottom: 12px;
-      margin-top: 40px;
-    }
-
-    .link-list {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
-      row-gap: 10px;
-      margin-bottom: 16px;
-    }
-
-    @media (min-width: 620px) {
-      .link-list {
-        row-gap: 20px;
-        column-gap: 20px;
-        grid-template-columns: 1fr 1fr;
-      }
-    }
-
-    @media all and (-ms-high-contrast:none) {
-    .link-list {
-        display: -ms-grid;
-        -ms-grid-columns: 1fr 1fr;
-        -ms-grid-rows: 1fr 1fr;
-      }
-    }
-
-    .link-item {
-      display: block;
-      padding: 20px 30px 20px 15px;
-      border: 1px solid #00000010;
-      border-radius: 5px;
-      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-      color: #333333;
-      display: flex;
-      align-items: flex-start;
-    }
-
-    .link-item:hover {
-      border-color: #1EA7FD50;
-      transform: translate3d(0, -3px, 0);
-      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-    }
-
-    .link-item:active {
-      border-color: #1EA7FD;
-      transform: translate3d(0, 0, 0);
-    }
-
-    .link-item strong {
-      font-weight: 700;
-      display: block;
-      margin-bottom: 2px;
-    }
-
-    .link-item img {
-      height: 40px;
-      width: 40px;
-      margin-right: 15px;
-      flex: none;
-    }
-
-    .link-item span {
-      font-size: 14px;
-      line-height: 20px;
-    }
-
-    .tip {
-      display: inline-block;
-      border-radius: 1em;
-      font-size: 11px;
-      line-height: 12px;
-      font-weight: 700;
-      background: #E7FDD8;
-      color: #66BF3C;
-      padding: 4px 12px;
-      margin-right: 10px;
-      vertical-align: top;
-    }
-
-    .tip-wrapper {
-      font-size: 13px;
-      line-height: 20px;
-      margin-top: 40px;
-      margin-bottom: 40px;
-    }
-
-    .tip-wrapper code {
-      font-size: 12px;
-      display: inline-block;
-    }
-
-    .wip-img {
-      margin-bottom: 16px;
-    }
-  `}
-</style>
-
 # Welcome to @pautena/react-desgin-system!
 
-Welcome to ```@pautena/react-desgin-system```, the Desgin System with a bunch of components and layouts that
-that I use to create my personal projects.
-
 **WORK IN PROGRESS**
 
 <img src={WorkInProgress} width="200" height="180" class="wip-img"/>
 
-
-<div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Getting started</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <span>
-      <strong>Components</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <img src={Colors} alt="colors" />
-    <span>
-      <strong>Layouts</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Generator</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-## Getting started
-
-This project is available as an [npm package](https://www.npmjs.com/package/@pautena/react-design-system).
-
-npm:
-
-```bash
-npm install @pautena/react-design-system @emotion/react @emotion/styled @mui/icons-material @mui/lab @mui/material @mui/x-data-grid react-dom react-router-dom
-```
-
-yarn:
-
-```bash
-npm install @pautena/react-design-system @emotion/react @emotion/styled @mui/icons-material @mui/lab @mui/material @mui/x-data-grid react-dom react-router-dom
-```
-
-Now you are going to be able to import the components and use it in your React project.
-
-```javascript
-import { AppBarWithDrawerLayout } from "@pautena/react-design-system";
-```
+Welcome to ```@pautena/react-desgin-system```, the Desgin System with a bunch of components and layouts that
+that I use to create my personal projects.
 
 
+<ul>
+  <li><LinkTo kind="Getting Started">Getting Started</LinkTo></li>
+  <li><LinkTo kind="Components" story="Introduction">Components</LinkTo></li>
+  <li><LinkTo kind="Layouts" story="Introduction">Layouts</LinkTo></li>
+  <li><LinkTo kind="Generators" story="Introduction">Generators</LinkTo></li>
+</ul>
 
 # Source code
 

package/src/stories/getting-started.stories.mdx

@@ -0,0 +1,23 @@
+<Meta title="Getting Started" />
+
+## Getting started
+
+This project is available as an [npm package](https://www.npmjs.com/package/@pautena/react-design-system).
+
+npm:
+
+```bash
+npm install @pautena/react-design-system @emotion/react @emotion/styled @mui/icons-material @mui/lab @mui/material @mui/x-data-grid react-dom react-router-dom
+```
+
+yarn:
+
+```bash
+npm install @pautena/react-design-system @emotion/react @emotion/styled @mui/icons-material @mui/lab @mui/material @mui/x-data-grid react-dom react-router-dom
+```
+
+Now you are going to be able to import the components and use it in your React project.
+
+```javascript
+import { AppBarWithDrawerLayout } from "@pautena/react-design-system";
+```

package/src/storybook.tsx

@@ -9,7 +9,7 @@ import { action } from "@storybook/addon-actions";
 import { LocalizationProvider } from "@mui/x-date-pickers/";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 
-export function createTemplate<P>(
+export function createTemplate<P extends object>(
   C: JSXElementConstructor<P>,
 ): ComponentStory<JSXElementConstructor<P>> {
   return (args) => <C {...args} />;

package/src/tests/actions.ts

@@ -2,6 +2,10 @@ import userEvent from "@testing-library/user-event";
 import { screen, fireEvent } from "./testing-library";
 import { format } from "date-fns";
 
+export const typeNumericInput = (element: HTMLElement, value: number) => {
+  fireEvent.change(element, { target: { value } });
+};
+
 export const selectOption = async (element: HTMLElement, option: string) => {
   await userEvent.click(element);
   await userEvent.click(screen.getByRole("option", { name: option }));

package/src/tests/assertions.ts

@@ -1,5 +1,5 @@
 import { AlertColor } from "@mui/material";
-import { ModelField } from "../generators";
+import { BasicModelInstance, GroupInstanceType, ModelField } from "../generators";
 import { screen, waitForElementToBeRemoved } from "./testing-library";
 import { format } from "date-fns";
 import { MockInstance } from "../generators/generators.mock";
@@ -26,19 +26,22 @@ export const expectModelFieldInputExist = (fields: ModelField[]) => {
   });
 };
 
-export const expectModelFieldInputValue = (fields: ModelField[], initialValues: object) => {
+export const expectModelFieldInputValue = (
+  fields: ModelField[],
+  initialValues: BasicModelInstance | GroupInstanceType,
+) => {
   fields.forEach((field) => {
     const value = initialValues[field.id];
     if (field.type === "group") {
-      expectModelFieldInputValue(field.value, value);
+      expectModelFieldInputValue(field.value, value as GroupInstanceType);
     } else if (field.type === "number") {
-      expect(screen.getByDisplayValue(value.toString())).toBeInTheDocument();
+      expect(screen.getByDisplayValue(value as number)).toBeInTheDocument();
     } else if (field.type === "boolean") {
       expect(
-        screen.getByRole("checkbox", { name: field.name, checked: value }),
+        screen.getByRole("checkbox", { name: field.name, checked: value as boolean }),
       ).toBeInTheDocument();
     } else if (field.type === "date" || field.type === "time" || field.type === "datetime") {
-      const expectedDateValue = format(value, field.format);
+      const expectedDateValue = format(value as Date, field.format);
       expect(screen.getByRole("textbox", { name: field.name })).toHaveAttribute(
         "value",
         expectedDateValue,
@@ -49,14 +52,19 @@ export const expectModelFieldInputValue = (fields: ModelField[], initialValues:
   });
 };
 
-export const expectModelFieldValue = (field: ModelField, instance: object) => {
+export const expectModelFieldValue = (
+  field: ModelField,
+  instance: BasicModelInstance | GroupInstanceType,
+) => {
   const { id, type, name, description } = field;
   const value = instance[id];
 
   if (type === "group") {
     expect(screen.getByRole("heading", { level: 1, name }));
     expect(screen.getByRole("heading", { level: 2, name: description }));
-    field.value.forEach((groupValue) => expectModelFieldValue(groupValue, value));
+    field.value.forEach((groupValue) =>
+      expectModelFieldValue(groupValue, value as GroupInstanceType),
+    );
     return;
   }
 
@@ -64,10 +72,10 @@ export const expectModelFieldValue = (field: ModelField, instance: object) => {
   if (type === "boolean") {
     expect(screen.getByTestId(value ? "CheckIcon" : "CloseIcon")).toBeInTheDocument();
   } else if (type === "date" || type === "time" || type === "datetime") {
-    const formatedValue = format(value, field.format);
+    const formatedValue = format(value as Date, field.format);
     expect(screen.getByLabelText(name)).toHaveTextContent(formatedValue);
   } else {
-    expect(screen.getByLabelText(name)).toHaveTextContent(value);
+    expect(screen.getByLabelText(name)).toHaveTextContent(value as string);
   }
 };
 

package/src/tests/datatable-placeholder/datatable-placeholder.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { DatatablePlaceholder } from "./datatable-placeholder";
+
+export default {
+  title: "Components/Placeholders/DatatablePlaceholder",
+  component: DatatablePlaceholder,
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof DatatablePlaceholder>;
+
+const Template = createTemplate(DatatablePlaceholder);
+
+export const Default = Template.bind({});