@pautena/react-design-system 0.4.2 → 0.4.4

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,6 +24,6 @@ const Template = createTemplate(DrawerContent);
 
 export const Default = Template.bind({});
 Default.args = {
+  selectedItem: "item2.3.2",
   nav: mockNav,
-  open: true,
 };

package/src/components/drawers/drawer-content/drawer-content.test.tsx

@@ -0,0 +1,59 @@
+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";
+
+describe("DrawerContent", () => {
+  const renderComponent = () => {
+    return render(<DrawerContent nav={mockNav} />);
+  };
+
+  it.each([[/section 2/i], [/section avatar/i]])(
+    "would render the title section %s",
+    (sectionTitle: RegExp) => {
+      renderComponent();
+
+      expect(screen.getByRole("heading", { name: sectionTitle })).toBeInTheDocument();
+    },
+  );
+
+  it.each([
+    [/item 1.1/i],
+    [/item 1.2/i],
+    [/item 1.3/i],
+    [/item 1.4/i],
+    [/item 2.1/i],
+    [/item 2.2/i],
+    [/avatar 1/i],
+    [/avatar 2/i],
+  ])("would render the item %s", (itemText: RegExp) => {
+    renderComponent();
+
+    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: {

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

@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
 import userEvent from "@testing-library/user-event";
 import { DrawerItem } from "./drawer-item";
 import DiamondIcon from "@mui/icons-material/Diamond";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { NavItemAvatar, NavItemBullet, NavItemLabel } from "../drawer/drawer.types";
 
 describe("DrawerItem", () => {
@@ -35,10 +35,10 @@ describe("DrawerItem", () => {
     expect(screen.getByRole("link", { name: /lorem ipsum/i })).toBeInTheDocument();
   });
 
-  it("would navigate to the href when is clicked", () => {
+  it("would navigate to the href when is clicked", async () => {
     const { history } = renderComponent();
 
-    userEvent.click(screen.getByRole("link", { name: /lorem ipsum/i }));
+    await userEvent.click(screen.getByRole("link", { name: /lorem ipsum/i }));
 
     expect(history.location.pathname).toBe("/items/1");
   });

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

@@ -7,11 +7,12 @@ import {
   ListItemIcon,
   ListItemText,
   styled,
+  SxProps,
+  Theme,
 } from "@mui/material";
-import { Bullet } from "../bullet";
-import { Label } from "../label";
+import { Bullet, Label } from "../../data-display";
 import { NavItemAvatar, NavItemBullet, NavItemLabel } from "../drawer/drawer.types";
-import { Link } from "../link";
+import { Link } from "../../navigation/link";
 
 export interface DrawerItemProps {
   /**
@@ -39,6 +40,14 @@ export interface DrawerItemProps {
    * Bullet to attract the user attention displyed to the right
    */
   bullet?: NavItemBullet;
+  /**
+   * The item has to be marked as selected
+   */
+  selected?: boolean;
+  /**
+   * Custom styles
+   */
+  sx?: SxProps<Theme>;
 }
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -52,10 +61,19 @@ const DrawerItemLink = styled(Link)(({ theme }) => {
 /**
  * Clicable item inside a drawer
  */
-export const DrawerItem = ({ text, icon, avatar, label, bullet, href }: DrawerItemProps) => {
+export const DrawerItem = ({
+  text,
+  icon,
+  avatar,
+  label,
+  bullet,
+  href,
+  selected,
+  sx,
+}: DrawerItemProps) => {
   return (
     <ListItem disablePadding sx={{ display: "block" }} component={DrawerItemLink} href={href}>
-      <ListItemButton>
+      <ListItemButton selected={selected} sx={sx}>
         {icon && <ListItemIcon>{icon}</ListItemIcon>}
         {avatar && (
           <ListItemAvatar>

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

@@ -1,12 +1,12 @@
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { createTemplate } from "../../../storybook";
 import { DrawerSection } from "./drawer-section";
-import { withContainer } from "../../storybook";
+import { withContainer } from "../../../storybook";
 import { withMemoryRouter } from "~/storybook";
 import { SectionItems } from "./drawer-section.mock";
 
 export default {
-  title: "Drawers/DrawerSection",
+  title: "Components/Drawers/DrawerSection",
   component: DrawerSection,
   decorators: [withMemoryRouter(), withContainer({ width: 250 })],
   parameters: {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
 import { DrawerSection } from "./drawer-section";
 import { SectionItems } from "./drawer-section.mock";

package/src/components/drawers/drawer-section/drawer-section.tsx

@@ -0,0 +1,65 @@
+import { List, ListSubheader } from "@mui/material";
+import React from "react";
+import { DrawerCollapsableItem } from "../drawer-collapsable-item";
+import { DrawerItem } from "../drawer-item";
+import { NavItem } from "../drawer/drawer.types";
+
+export interface DrawerSectionProps {
+  /**
+   * Section title
+   */
+  title?: string;
+  /**
+   * List of items of that section
+   */
+  items: NavItem[];
+
+  /**
+   * Id of the item that has to be marked as selected
+   */
+  selectedItem?: string;
+}
+
+/**
+ * Render a group of items inside the drawer
+ * with an optional title
+ */
+export const DrawerSection = ({ title, items, selectedItem }: DrawerSectionProps) => {
+  return (
+    <>
+      {title && <ListSubheader role="heading">{title}</ListSubheader>}
+      <List>
+        {items.map((item) => {
+          if ("items" in item) {
+            const { id, text, icon, items } = item;
+            const childrenSelected = items.some((item) => item.id === selectedItem);
+            return (
+              <DrawerCollapsableItem
+                key={id}
+                selectedItem={selectedItem}
+                selected={id === selectedItem || childrenSelected}
+                text={text}
+                icon={icon}
+                items={items}
+              />
+            );
+          } else {
+            const { id, text, icon, avatar, label, bullet, href } = item;
+            return (
+              <DrawerItem
+                key={id}
+                selected={id === selectedItem}
+                text={text}
+                icon={icon}
+                avatar={avatar}
+                label={label}
+                bullet={bullet}
+                href={href}
+              />
+            );
+          }
+        })}
+      </List>
+    </>
+  );
+};

package/src/components/drawers/drawers.stories.mdx

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Drawers/Introduction" />
+
+# Drawers
+
+<ul>
+  <li><LinkTo kind="Components/Drawers/MiniDrawer">MiniDrawer</LinkTo></li>
+  <li><LinkTo kind="Components/Drawers/DrawerContent">DrawerContent</LinkTo></li>
+  <li><LinkTo kind="Components/Drawers/DrawerItem">DrawerItem</LinkTo></li>
+  <li><LinkTo kind="Components/Drawers/DrawerSection">DrawerSection</LinkTo></li>
+</ul>

package/src/components/drawers/index.ts

@@ -0,0 +1,4 @@
+export * from "./drawer";
+export * from "./drawer-content";
+export * from "./drawer-item";
+export * from "./drawer-section";

package/src/components/feedback/feedback.stories.mdx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Feedback/Introduction" />
+
+# Feedback
+
+<ul>
+  <li><LinkTo kind="Components/Feedback/LoadingArea">LoadingArea</LinkTo></li>
+  <li><LinkTo kind="Components/Feedback/QueryContainer">QueryContainer</LinkTo></li>
+  <li><LinkTo kind="Components/Feedback/NotificationCenter">NotificationCenter</LinkTo></li>
+</ul>

package/src/components/feedback/index.ts

@@ -0,0 +1,2 @@
+export * from "./loading-area";
+export * from "./query-container";

package/src/components/{loading-area → feedback/loading-area}/loading-area.stories.tsx

@@ -1,9 +1,9 @@
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate, withContainer } from "../../storybook";
+import { createTemplate, withContainer } from "../../../storybook";
 import { LoadingArea } from "./loading-area";
 
 export default {
-  title: "Components/LoadingArea",
+  title: "Components/Feedback/LoadingArea",
   component: LoadingArea,
   decorators: [withContainer({ height: 300 })],
   parameters: {

package/src/components/{loading-area → feedback/loading-area}/loading-area.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { render, expectProgressIndicator } from "../../tests";
+import { expectProgressIndicator } from "~/tests/assertions";
+import { render } from "~/tests/testing-library";
 import { LoadingArea } from "./loading-area";
 
 describe("LoadingArea", () => {

package/src/components/{query-container → feedback/query-container}/query-container.stories.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { ComponentMeta } from "@storybook/react";
-import { createTemplate, withPadding } from "../../storybook";
+import { createTemplate, withPadding } from "../../../storybook";
 import { QueryContainer, QueryContainerProps } from "./query-container";
 import { Typography, Box } from "@mui/material";
 
 export default {
-  title: "Components/QueryContainer",
+  title: "Components/Feedback/QueryContainer",
   component: QueryContainer,
   decorators: [withPadding()],
   parameters: {

package/src/components/{query-container → feedback/query-container}/query-container.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { QueryContainer, QueryContainerError, QueryContainerSuccess } from "./query-container";
-import { expectProgressIndicator, render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { Typography } from "@mui/material";
+import { expectProgressIndicator } from "~/tests/assertions";
 
 describe("QueryContainer", () => {
   const renderComponent = ({

package/src/components/index.ts

@@ -1,19 +1,10 @@
-export * from "./header";
-export * from "./link";
-export * from "./query-container";
-export * from "./sign-in";
-export * from "./tab";
-export * from "./table";
-export * from "./app-bar";
-export * from "./drawer";
-export * from "./table-list";
-export * from "./placeholder";
-export * from "./label";
-export * from "./bullet";
-export * from "./drawer-content";
-export * from "./drawer-section";
-export * from "./drawer-item";
-export * from "./center-container";
 export * from "./value-displays";
-export * from "./content";
-export * from "./enhanced-select";
+export * from "./feedback";
+export * from "./app-bars";
+export * from "./data-display";
+export * from "./containers";
+export * from "./drawers";
+export * from "./inputs";
+export * from "./navigation";
+export * from "./tables";
+export * from "./placeholders";

package/src/components/{enhanced-select → inputs/enhanced-select}/enhanced-select.stories.tsx

@@ -1,14 +1,14 @@
-import { Box, MenuItem, PropTypes, useTheme } from "@mui/material";
+import { Box, MenuItem, useTheme } from "@mui/material";
 import { ComponentMeta } from "@storybook/react";
 import React, { ReactNode } from "react";
-import { createTemplate, withContainer } from "../../storybook";
-import { EnhancedSelect, EnhancedSelectProps } from "./enhanced-select";
+import { createTemplate, withContainer } from "../../../storybook";
+import { EnhancedSelect, EnhancedSelectProps, EnhancedSelectSize } from "./enhanced-select";
 import { faker } from "@faker-js/faker";
 
 const baseArgs = {
   label: "Car model",
   value: faker.vehicle.model(),
-  size: "medium",
+  size: "medium" as EnhancedSelectSize,
   fetching: false,
   loading: false,
   fullWidth: true,
@@ -16,7 +16,7 @@ const baseArgs = {
 };
 
 export default {
-  title: "Input/EnhancedSelect",
+  title: "Components/Inputs/EnhancedSelect",
   component: EnhancedSelect,
   decorators: [withContainer({ width: 200 })],
   parameters: {
@@ -69,15 +69,15 @@ SizeSmall.args = {
   size: "small",
 };
 
-type WithBackgroundProps<T extends ReactNode> = TemplateProps<T> & { bgcolor: PropTypes.Color };
+type WithBackgroundProps = TemplateProps<string> & { bgcolor: "primary" | "secondary" };
 
-export const WithBackground = <T extends string>({
-  options,
-  bgcolor: bgcolorProp,
-  ...rest
-}: WithBackgroundProps<T>) => {
+export const WithBackground = ({ options, bgcolor: bgcolorProp, ...rest }: WithBackgroundProps) => {
   const { palette } = useTheme();
-  const bgcolor = palette[bgcolorProp].main;
+  const BackgroundColors: Record<"primary" | "secondary", string> = {
+    primary: palette.primary.main,
+    secondary: palette.secondary.main,
+  };
+  const bgcolor = BackgroundColors[bgcolorProp];
   const selectColor = palette.getContrastText(bgcolor);
 
   return (

package/src/components/{enhanced-select → inputs/enhanced-select}/enhanced-select.test.tsx

@@ -1,17 +1,22 @@
 import React from "react";
 import { EnhancedSelectLoaded } from "./enhanced-select.stories";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
 
 describe("EnhancedSelect", () => {
   const renderComponent = ({
-    label = EnhancedSelectLoaded.args.label,
+    label = EnhancedSelectLoaded.args?.label || "invalid",
     loading = false,
     fetching = false,
   } = {}) => {
+    const options = (EnhancedSelectLoaded.args?.options as string[]) || [];
+    const value = EnhancedSelectLoaded.args?.value as string;
+
     render(
       <EnhancedSelectLoaded
         {...EnhancedSelectLoaded.args}
+        options={options}
+        value={value}
         label={label}
         loading={loading}
         fetching={fetching}
@@ -19,8 +24,8 @@ describe("EnhancedSelect", () => {
     );
 
     return {
-      options: EnhancedSelectLoaded.args.options as string[],
-      value: EnhancedSelectLoaded.args.value as string,
+      options,
+      value,
     };
   };
 

package/src/components/{enhanced-select → inputs/enhanced-select}/enhanced-select.tsx

@@ -5,15 +5,13 @@ import {
   FormControl,
   InputLabel,
   LinearProgress,
-  useTheme,
   Select,
-  Typography,
   styled,
 } from "@mui/material";
-import { CenterContainer } from "../center-container";
+import { CenterContainer } from "../../containers/center-container";
 import { SelectInputProps } from "@mui/material/Select/SelectInput";
 
-type EnhancedSelectSize = "small" | "medium";
+export type EnhancedSelectSize = "small" | "medium";
 
 export interface EnhancedSelectProps<T> {
   label: string;

package/src/components/inputs/index.ts

@@ -0,0 +1,2 @@
+export * from "./enhanced-select";
+export * from "./sign-in";