@pautena/react-design-system 0.4.3 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "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,11 @@
 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";
 
 export default {
-  title: "Sections/Header",
+  title: "Components/Data Display/Header",
   component: Header,
   decorators: [withMemoryRouter()],
   parameters: {

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() }));
 

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";
 

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();

package/src/components/drawers/drawer-collapsable-item/drawer-collapsable-item.test.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { render, screen } from "~/tests/testing-library";
+import userEvent from "@testing-library/user-event";
+import { DrawerCollapsableItem } from "./drawer-collapsable-item";
+
+interface RenderComponentOptions {
+  selected?: boolean;
+}
+
+describe("DrawerCollapsableItem", () => {
+  const renderComponent = ({ selected }: RenderComponentOptions = {}) => {
+    const items = [
+      {
+        id: "item2.3.1",
+        text: "Item 2.3.1",
+        href: "/items/2-3-1",
+      },
+      {
+        id: "item2.3.2",
+        text: "Item 2.3.2",
+        href: "/items/2-3-2",
+      },
+      {
+        id: "item2.3.3",
+        text: "Item 2.3.3",
+        href: "/items/2-3-3",
+      },
+    ];
+    render(
+      <DrawerCollapsableItem
+        selectedItem="item2.3.2"
+        text="lorem ipsum"
+        items={items}
+        selected={selected}
+      />,
+    );
+  };
+
+  it("should render a text", () => {
+    renderComponent();
+
+    expect(screen.getByText(/lorem ipsum/i)).toBeVisible();
+  });
+
+  it("should be closed by default", () => {
+    renderComponent();
+
+    expect(screen.queryByText(/item 2.3.1/i)).toBeFalsy();
+    expect(screen.queryByText(/item 2.3.2/i)).toBeFalsy();
+    expect(screen.queryByText(/item 2.3.3/i)).toBeFalsy();
+  });
+
+  it("should render the items if the user click the button", async () => {
+    renderComponent();
+
+    await userEvent.click(screen.getByRole("button"));
+
+    expect(screen.getByText(/item 2.3.1/i)).toBeVisible();
+    expect(screen.getByText(/item 2.3.2/i)).toBeVisible();
+    expect(screen.getByText(/item 2.3.3/i)).toBeVisible();
+  });
+});

package/src/components/drawers/drawer-collapsable-item/drawer-collapsable-item.tsx

@@ -0,0 +1,78 @@
+import {
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemAvatar,
+  Avatar,
+  ListItemText,
+  Collapse,
+  List,
+} from "@mui/material";
+import React, { ReactElement, useState } from "react";
+import { NavItem, NavItemLink } from "../drawer/drawer.types";
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+import { DrawerItem } from "../drawer-item";
+
+export interface DrawerCollapsableItemProps {
+  /**
+   * Text displayed inside the item
+   */
+  text: string;
+  /**
+   * Icon displayed to the left
+   */
+  icon?: ReactElement;
+  /**
+   * The item has to be marked as selected
+   */
+  selected?: boolean;
+  /**
+   * Id of the item that has to be marked as selected;
+   */
+  selectedItem?: string;
+  /**
+   * Items that are going to be displayed inside
+   * the collapsable
+   */
+  items: NavItemLink[];
+}
+
+export const DrawerCollapsableItem = ({
+  text,
+  icon,
+  selected,
+  selectedItem,
+  items,
+}: DrawerCollapsableItemProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <ListItem disablePadding sx={{ display: "block" }}>
+        <ListItemButton selected={selected} onClick={() => setOpen((o) => !o)}>
+          {icon && <ListItemIcon>{icon}</ListItemIcon>}
+          <ListItemText primary={text} />
+          {open ? <ExpandLess /> : <ExpandMore />}
+        </ListItemButton>
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <List component="div" disablePadding>
+          {items.map(({ id, text, icon, avatar, label, bullet, href }) => (
+            <DrawerItem
+              key={id}
+              selected={id === selectedItem}
+              text={text}
+              icon={icon}
+              avatar={avatar}
+              label={label}
+              bullet={bullet}
+              href={href}
+              sx={{ pl: 4 }}
+            />
+          ))}
+        </List>
+      </Collapse>
+    </>
+  );
+};

package/src/components/drawers/drawer-collapsable-item/index.ts

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

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

@@ -1,13 +1,13 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { createTemplate } from "../../../storybook";
 import { DrawerContent } from "./drawer-content";
 import { mockNav } from "../drawer/drawer.mock";
 import { Box } from "@mui/material";
 import { withMemoryRouter } from "~/storybook";
 
 export default {
-  title: "Drawers/DrawerContent",
+  title: "Components/Drawers/DrawerContent",
   component: DrawerContent,
   decorators: [
     withMemoryRouter(),
@@ -24,5 +24,6 @@ const Template = createTemplate(DrawerContent);
 
 export const Default = Template.bind({});
 Default.args = {
+  selectedItem: "item2.3.2",
   nav: mockNav,
 };

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { render, screen } from "~/tests/testing-library";
+import userEvent from "@testing-library/user-event";
 import { mockNav } from "../drawer/drawer.mock";
 import { DrawerContent } from "./drawer-content";
 
@@ -31,4 +32,28 @@ describe("DrawerContent", () => {
 
     expect(screen.getByRole("link", { name: itemText })).toBeInTheDocument();
   });
+
+  it("should render the item 2.3 as a button", () => {
+    renderComponent();
+
+    expect(screen.getByRole("button", { name: /item 2.3/i })).toBeInTheDocument();
+  });
+
+  it("shouldn't render the collapsed 2.3 items by default", () => {
+    renderComponent();
+
+    expect(screen.queryByText(/item 2.3.1/i)).toBeFalsy();
+    expect(screen.queryByText(/item 2.3.2/i)).toBeFalsy();
+    expect(screen.queryByText(/item 2.3.3/i)).toBeFalsy();
+  });
+
+  it("should render the 2.3 teims if the user click the button", async () => {
+    renderComponent();
+
+    await userEvent.click(screen.getByText(/item 2.3/i));
+
+    expect(screen.getByText(/item 2.3.1/i)).toBeVisible();
+    expect(screen.getByText(/item 2.3.2/i)).toBeVisible();
+    expect(screen.getByText(/item 2.3.3/i)).toBeVisible();
+  });
 });

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

@@ -5,13 +5,14 @@ import { DrawerContentComponent, DrawerContentProps } from "../drawer/drawer.typ
 /**
  * Content to be shown inside a navigation
  */
-export const DrawerContent: DrawerContentComponent = ({ nav }: DrawerContentProps) => {
-  const { items } = nav;
-
+export const DrawerContent: DrawerContentComponent = ({
+  nav: { items },
+  selectedItem,
+}: DrawerContentProps) => {
   return (
     <>
       {items.map(({ title, items }, i) => (
-        <DrawerSection key={i} title={title} items={items} />
+        <DrawerSection key={i} title={title} items={items} selectedItem={selectedItem} />
       ))}
     </>
   );

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

@@ -1,13 +1,12 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { createTemplate, withContainer } from "../../../storybook";
 import { DrawerItem } from "./drawer-item";
 import DiamondIcon from "@mui/icons-material/Diamond";
-import { withContainer } from "../../storybook";
 import { withMemoryRouter } from "~/storybook";
 
 export default {
-  title: "Drawers/DrawerItem",
+  title: "Components/Drawers/DrawerItem",
   component: DrawerItem,
   decorators: [withMemoryRouter(), withContainer({ width: 250 })],
   parameters: {