@pautena/react-design-system 0.4.3 → 0.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -38,25 +38,26 @@
     "@mui/x-data-grid": "^5.17.24",
     "@mui/x-date-pickers": "^5.0.19",
     "date-fns": "^2.29.3",
+    "lorem-ipsum": "^2.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/core": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
-    "@date-io/date-fns": "^2.16.0",
-    "@faker-js/faker": "^7.6.0",
-    "@mui/x-data-grid-generator": "^5.17.24",
-    "@rollup/plugin-alias": "^4.0.3",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-typescript": "^11.0.0",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
+    "@date-io/date-fns": "^2.15.0",
+    "@faker-js/faker": "^7.3.0",
+    "@mui/x-data-grid-generator": "^5.13.0",
+    "@rollup/plugin-alias": "^3.1.9",
+    "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "8.3.3",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
     "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-links": "^6.5.16",
     "@storybook/builder-webpack4": "^6.5.16",
@@ -83,7 +84,6 @@
     "husky": "^8.0.3",
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.4.3",
-    "lorem-ipsum": "^2.0.8",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.4",
     "ramda": "^0.28.0",
@@ -106,6 +106,7 @@
     "@mui/x-date-pickers": "^5.0.0",
     "@types/react": "^17.0.0 || ^18.0.0",
     "date-fns": "^2.0.0",
+    "lorem-ipsum": "^2.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^6.0.0"

package/src/components/{app-bar → app-bars/app-bar}/app-bar.stories.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { createTemplate } from "../../../storybook";
 import { AppBar } from "./app-bar";
-import { DrawerProvider } from "../drawer";
+import { DrawerProvider } from "../../drawers/drawer";
 import { AppBarProps } from "./app-bar.types";
 
 export default {
-  title: "AppBars/AppBar",
+  title: "Components/AppBars/AppBar",
   component: AppBar,
   parameters: {
     layout: "fullscreen",

package/src/components/{app-bar → app-bars/app-bar}/app-bar.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { fireEvent, render, screen } from "~/tests/testing-library";
 import { AppBar } from "./app-bar";
-import { DrawerProvider } from "../drawer";
+import { DrawerProvider } from "../../drawers/drawer";
 import { AppBarProfile } from "./app-bar.types";
 import userEvent from "@testing-library/user-event";
 

package/src/components/{app-bar → app-bars/app-bar}/app-bar.tsx

@@ -12,7 +12,7 @@ import MenuIcon from "@mui/icons-material/Menu";
 import SearchIcon from "@mui/icons-material/Search";
 import AccountCircle from "@mui/icons-material/AccountCircle";
 import { AppBarComponent, AppBarProps } from "./app-bar.types";
-import { useDrawer } from "../drawer/drawer.context";
+import { useDrawer } from "../../drawers/drawer/drawer.context";
 
 const Search = styled("div")(({ theme }) => ({
   position: "relative",

package/src/components/{app-bar → app-bars/app-bar}/mini-app-bar/mini-app-bar.tsx

@@ -1,9 +1,9 @@
 import { styled } from "@mui/material/styles";
 import { AppBar } from "../app-bar";
 import { AppBarProps } from "@mui/material";
-import { drawerWidth } from "../../drawer/drawer.mixins";
+import { drawerWidth } from "../../../drawers/drawer/drawer.mixins";
 import { AppBarComponent } from "../app-bar.types";
-import { useDrawer } from "../../drawer/drawer.context";
+import { useDrawer } from "../../../drawers/drawer/drawer.context";
 
 export const MiniAppBar: AppBarComponent = styled(AppBar)<AppBarProps>(({ theme }) => {
   const { isOpen } = useDrawer();

package/src/components/app-bars/app-bars.stories.mdx

@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/AppBars/Introduction" />
+
+# App Bars
+
+<ul>
+  <li><LinkTo kind="Components/AppBars/AppBar">AppBar</LinkTo></li>
+</ul>

package/src/components/app-bars/index.ts

@@ -0,0 +1 @@
+export * from "./app-bar";

package/src/components/components.stories.mdx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Introduction" />
+
+# Components
+
+<ul>
+  <li><LinkTo kind="Components/Value displays/Introduction">Value displays</LinkTo></li>
+  <li><LinkTo kind="Components/Feedback/Introduction">Feedback</LinkTo></li>
+  <li><LinkTo kind="Components/AppBars/Introduction">App bars</LinkTo></li>
+  <li><LinkTo kind="Components/Data Display/Introduction">Data Display</LinkTo></li>
+  <li><LinkTo kind="Components/Containers/Introduction">Containers</LinkTo></li>
+  <li><LinkTo kind="Components/Drawers/Introduction">Drawers</LinkTo></li>
+  <li><LinkTo kind="Components/Inputs/Introduction">Inputs</LinkTo></li>
+  <li><LinkTo kind="Components/Navigation/Introduction">Navigation</LinkTo></li>
+  <li><LinkTo kind="Components/Placeholders/Introduction">Placeholders</LinkTo></li>
+  <li><LinkTo kind="Components/Tables/Introduction">Tables</LinkTo></li>
+</ul>

package/src/components/{center-container → containers/center-container}/center-container.stories.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
 import { CenterContainer, CenterContainerProps } from "./center-container";
-import { Label } from "../label";
-import { createTemplate, withContainer } from "../../storybook";
+import { Label } from "../../data-display/label";
+import { createTemplate, withContainer } from "../../../storybook";
 
 export default {
-  title: "Containers/CenterContainer",
+  title: "Components/Containers/CenterContainer",
   component: CenterContainer,
   decorators: [withContainer({ height: 500, bordered: true })],
   parameters: {

package/src/components/containers/containers.stories.mdx

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

package/src/components/{content → containers/content}/content.stories.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { createTemplate } from "../../../storybook";
 import { Content } from "./content";
-import { SkeletonGrid } from "~/tests/components";
+import { SkeletonGrid } from "~/components/placeholders";
 
 export default {
-  title: "Sections/Content",
+  title: "Components/Containers/Content",
   component: Content,
   parameters: {
     layout: "fullscreen",

package/src/components/containers/index.ts

@@ -0,0 +1,2 @@
+export * from "./content";
+export * from "./center-container";

package/src/components/{bullet → data-display/bullet}/bullet.stories.tsx

@@ -1,9 +1,9 @@
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { createTemplate } from "../../../storybook";
 import { Bullet } from "./bullet";
 
 export default {
-  title: "Data Display/Bullet",
+  title: "Components/Data Display/Bullet",
   component: Bullet,
   parameters: {
     layout: "centered",

package/src/components/data-display/data-display.stories.mdx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Data Display/Introduction" />
+
+# App Bars
+
+<ul>
+  <li><LinkTo kind="Components/Data Display/Bullet">Bullet</LinkTo></li>
+  <li><LinkTo kind="Components/Data Display/Label">Label</LinkTo></li>
+  <li><LinkTo kind="Components/Data Display/Header">Header</LinkTo></li>
+</ul>

package/src/components/{header → data-display/header}/header.stories.tsx

@@ -1,11 +1,13 @@
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { createTemplate } from "../../../storybook";
 import { Header } from "./header";
 import { withMemoryRouter } from "~/storybook";
 import { breadcrumbs, tabs, actions } from "./header.dummy";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import React from "react";
 
 export default {
-  title: "Sections/Header",
+  title: "Components/Data Display/Header",
   component: Header,
   decorators: [withMemoryRouter()],
   parameters: {
@@ -108,3 +110,15 @@ WithTabs.args = {
   breadcrumbs,
   tabs,
 };
+
+export const NavigationButton = Template.bind({});
+NavigationButton.args = {
+  title: "Lorem ipsum",
+  subtitle: "Dolor sit amet",
+  preset: "default",
+  navigationButton: {
+    text: "Go back",
+    href: "/back",
+    icon: <ArrowBackIcon />,
+  },
+};

package/src/components/{header → data-display/header}/header.test.tsx

@@ -10,7 +10,7 @@ import {
   HeaderTab,
 } from "./header.types";
 import { breadcrumbs, actions as actionsData, tabs } from "./header.dummy";
-import { TabProvider } from "../../providers";
+import { TabProvider } from "../../../providers";
 
 const actions = actionsData.map((a) => ({ ...a, onClick: a.onClick && jest.fn() }));
 
@@ -23,6 +23,7 @@ function renderInstance({
   actionsVariant,
   tabs,
   selectedTab,
+  navigationButton,
 }: {
   title?: string;
   subtitle?: string | undefined;
@@ -32,6 +33,7 @@ function renderInstance({
   actionsVariant?: HeaderActionVariant;
   tabs?: HeaderTab[];
   selectedTab?: number;
+  navigationButton?: boolean;
 }) {
   const instance = render(
     <TabProvider initialValue={selectedTab}>
@@ -43,6 +45,7 @@ function renderInstance({
         actions={actions}
         actionsVariant={actionsVariant}
         tabs={tabs}
+        navigationButton={navigationButton ? { text: "go back", href: "/back" } : undefined}
       />
     </TabProvider>,
   );
@@ -58,13 +61,13 @@ describe("Header", () => {
   });
 
   describe("subtitle", () => {
-    it("would renders when is set", () => {
+    it("should renders when is set", () => {
       renderInstance({ subtitle: "sit amet" });
 
       expect(screen.queryByRole("heading", { level: 2, name: /sit amet/i })).toBeInTheDocument();
     });
 
-    it("wouldn't render if it is not set", () => {
+    it("shouldn't render if it is not set", () => {
       renderInstance({ subtitle: undefined });
 
       expect(screen.queryByRole("heading", { level: 2 })).not.toBeInTheDocument();
@@ -72,14 +75,14 @@ describe("Header", () => {
   });
 
   describe("breadcrumbs", () => {
-    it("would render a list of links", () => {
+    it("should render a list of links", () => {
       renderInstance({ breadcrumbs });
 
       expect(screen.getByRole("link", { name: /items/i })).toBeInTheDocument();
       expect(screen.getByRole("link", { name: /item 1/i })).toBeInTheDocument();
     });
 
-    it("would navigate to a breadcrumb when is", async () => {
+    it("should navigate to a breadcrumb when is", async () => {
       const { history } = renderInstance({ breadcrumbs });
 
       await userEvent.click(screen.getByRole("link", { name: /items/i }));
@@ -89,7 +92,7 @@ describe("Header", () => {
   });
 
   describe("actions", () => {
-    it("would render a list of buttons", () => {
+    it("should render a list of buttons", () => {
       renderInstance({ actions });
 
       expect(screen.getByRole("button", { name: /add/i })).toBeInTheDocument();
@@ -108,13 +111,13 @@ describe("Header", () => {
       expect(button.onClick).toHaveBeenCalledTimes(1);
     });
 
-    it("wouldn't be possible to click a disabled action", async () => {
+    it("shouldn't be possible to click a disabled action", async () => {
       renderInstance({ actions });
 
       expect(screen.getByRole("button", { name: /disabled/i })).toBeDisabled();
     });
 
-    it("would redirect to the expected url when click an action with an href", async () => {
+    it("should redirect to the expected url when click an action with an href", async () => {
       const { history } = renderInstance({ actions });
 
       await userEvent.click(screen.getByRole("button", { name: /add/i }));
@@ -124,7 +127,7 @@ describe("Header", () => {
   });
 
   describe("tabs", () => {
-    it("would render a list of tabs", () => {
+    it("should render a list of tabs", () => {
       renderInstance({ tabs, selectedTab: 2 });
 
       expect(screen.getByRole("tab", { name: /tab 1/i })).toBeInTheDocument();
@@ -132,7 +135,7 @@ describe("Header", () => {
       expect(screen.getByRole("tab", { name: /tab 3/i })).toBeInTheDocument();
     });
 
-    it("would mark as active the selectedTab", () => {
+    it("should mark as active the selectedTab", () => {
       renderInstance({ tabs, selectedTab: 2 });
 
       expect(screen.getByRole("tab", { name: /tab 1/i, selected: false })).toBeInTheDocument();
@@ -140,13 +143,13 @@ describe("Header", () => {
       expect(screen.getByRole("tab", { name: /tab 3/i, selected: true })).toBeInTheDocument();
     });
 
-    it("wouldn't be possible to click a disabled tab", () => {
+    it("shouldn't be possible to click a disabled tab", () => {
       renderInstance({ tabs, selectedTab: 2 });
 
       expect(screen.getByRole("tab", { name: /tab 2/i })).toBeDisabled();
     });
 
-    it("would change the selected tab when a tab is clicked", async () => {
+    it("should change the selected tab when a tab is clicked", async () => {
       renderInstance({ tabs, selectedTab: 0 });
 
       await userEvent.click(screen.getByRole("tab", { name: /tab 3/i }));
@@ -156,4 +159,26 @@ describe("Header", () => {
       expect(screen.getByRole("tab", { name: /tab 3/i, selected: true })).toBeInTheDocument();
     });
   });
+
+  describe("navigationButton", () => {
+    it("should render a navigation button if is set", () => {
+      renderInstance({ navigationButton: true });
+
+      expect(screen.getByRole("link", { name: /go back/i })).toBeVisible();
+    });
+
+    it("shouldn't render a navigation button if is not set", () => {
+      renderInstance({ navigationButton: false });
+
+      expect(screen.queryByRole("link", { name: /go back/i })).not.toBeInTheDocument();
+    });
+
+    it("should navigate to the navigation path if is clicked", async () => {
+      const { history } = renderInstance({ navigationButton: true });
+
+      await userEvent.click(screen.getByRole("link", { name: /go back/i }));
+
+      expect(history.location.pathname).toBe("/back");
+    });
+  });
 });

package/src/components/{header → data-display/header}/header.tsx

@@ -9,8 +9,8 @@ import {
   Tab,
   Button,
 } from "@mui/material";
-import { Link } from "../link";
-import { useGetDefaultThemeColor } from "../../utils";
+import { Link } from "../../navigation/link";
+import { useGetDefaultThemeColor } from "../../../utils";
 import { HeaderComponent, HeaderPreset, HeaderProps } from "./header.types";
 import { useTab } from "~/providers";
 
@@ -26,6 +26,7 @@ export const Header: HeaderComponent = ({
   breadcrumbs,
   actions,
   tabs,
+  navigationButton,
 }: HeaderProps) => {
   const { palette } = useTheme();
   const defaultColor = useGetDefaultThemeColor();
@@ -53,6 +54,18 @@ export const Header: HeaderComponent = ({
       <Container>
         <Box sx={{ py: 3, display: "flex", flexDirection: "row", justifyContent: "space-between" }}>
           <Box>
+            {navigationButton && (
+              <Button
+                href={navigationButton.href}
+                size="small"
+                color="inherit"
+                LinkComponent={Link}
+                startIcon={navigationButton.icon}
+                sx={{ mb: 1 }}
+              >
+                {navigationButton.text}
+              </Button>
+            )}
             {breadcrumbs?.length && (
               <Breadcrumbs
                 color="inherit"

package/src/components/{header → data-display/header}/header.types.ts

@@ -24,6 +24,21 @@ export interface HeaderTab {
   disabled?: boolean;
 }
 
+export interface HeaderNavigationButton {
+  /**
+   * Button text
+   */
+  text: string;
+  /**
+   * Url where the user has to be redirected
+   */
+  href: string;
+  /**
+   * Icon to be shown before the button
+   */
+  icon?: ReactElement;
+}
+
 export type HeaderProps = {
   /**
    * Title of the header
@@ -55,6 +70,11 @@ export type HeaderProps = {
    * If is set, a list of tabs is dispayed at the bottom
    */
   tabs?: HeaderTab[];
+  /**
+   * A single button that helps the user to navigate to
+   * a screen related to the current screen
+   */
+  navigationButton?: HeaderNavigationButton;
 };
 
 export type HeaderComponent = FunctionComponent<HeaderProps>;

package/src/components/data-display/index.ts

@@ -0,0 +1,3 @@
+export * from "./bullet";
+export * from "./label";
+export * from "./header";

package/src/components/{label → data-display/label}/label.stories.tsx

@@ -1,9 +1,9 @@
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { createTemplate } from "../../../storybook";
 import { Label } from "./label";
 
 export default {
-  title: "Data Display/Label",
+  title: "Components/Data Display/Label",
   component: Label,
   parameters: {
     layout: "centered",

package/src/components/{drawer → drawers/drawer}/drawer.mock.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { DrawerContentComponent, Nav } from "./drawer.types";
 import DiamondIcon from "@mui/icons-material/Diamond";
 import MenuBookIcon from "@mui/icons-material/MenuBook";
+import AccountTreeIcon from "@mui/icons-material/AccountTree";
 import { Box, Typography } from "@mui/material";
 
 export const mockNav: Nav = {
@@ -63,6 +64,32 @@ export const mockNav: Nav = {
             variant: "info",
           },
         },
+        {
+          id: "item2.3",
+          text: "Item 2.3",
+          href: "/items/2-3",
+          icon: <AccountTreeIcon />,
+          items: [
+            {
+              id: "item2.3.1",
+              text: "Item 2.3.1",
+              href: "/items/2-3-1",
+              icon: <DiamondIcon />,
+            },
+            {
+              id: "item2.3.2",
+              text: "Item 2.3.2",
+              href: "/items/2-3-2",
+              icon: <MenuBookIcon />,
+            },
+            {
+              id: "item2.3.3",
+              text: "Item 2.3.3",
+              href: "/items/2-3-3",
+              icon: <DiamondIcon />,
+            },
+          ],
+        },
       ],
     },
     {

package/src/components/{drawer → drawers/drawer}/drawer.types.ts

@@ -1,6 +1,5 @@
 import { FunctionComponent, ReactElement } from "react";
-import { BulletVariant } from "../bullet";
-import { LabelVariant } from "../label";
+import { BulletVariant, LabelVariant } from "../../data-display";
 import { DrawerProps as MuiDrawerProps } from "@mui/material";
 
 export interface NavItemAvatar {
@@ -17,7 +16,7 @@ export interface NavItemBullet {
   variant: BulletVariant;
 }
 
-export interface NavItem {
+export interface NavItemLink {
   id: string;
   text: string;
   href: string;
@@ -27,6 +26,12 @@ export interface NavItem {
   bullet?: NavItemBullet;
 }
 
+export type NavItemCollapsable = Pick<NavItemLink, "id" | "text" | "icon"> & {
+  items: NavItemLink[];
+};
+
+export type NavItem = NavItemLink | NavItemCollapsable;
+
 export interface NavSection {
   title?: string;
   items: NavItem[];
@@ -37,6 +42,10 @@ export interface Nav {
 }
 
 export interface DrawerContentProps {
+  /**
+   * Item currently selected in the navigation
+   */
+  selectedItem?: string;
   /**
    * Object with the content that has to be rendered
    */

package/src/components/{drawer → drawers/drawer}/mini-drawer/mini-drawer.stories.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
-import { MiniDrawer } from "../mini-drawer";
+import { MiniDrawer } from ".";
 import { mockNav } from "../drawer.mock";
 import { DrawerContent } from "../../drawer-content";
 import { DrawerProvider } from "../drawer.provider";
 import { Nav } from "../drawer.types";
-import { withMemoryRouter } from "../../../storybook";
+import { withMemoryRouter } from "../../../../storybook";
 
 export default {
-  title: "Drawers/MiniDrawer",
+  title: "Components/Drawers/MiniDrawer",
   component: MiniDrawer,
   decorators: [withMemoryRouter()],
   parameters: {

package/src/components/{drawer → drawers/drawer}/mini-drawer/mini-drawer.tsx

@@ -8,8 +8,7 @@ import {
   listItemTextClasses,
   listSubheaderClasses,
 } from "@mui/material";
-import { labelClasses } from "../../label";
-import { bulletClasses } from "../../bullet";
+import { labelClasses, bulletClasses } from "../../../data-display";
 
 export const MiniDrawer = styled(Drawer)(({ theme }) => {
   const { isOpen } = useDrawer();