@pautena/react-design-system 0.1.2 → 0.2.0

package/src/components/drawer-content/drawer-content.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+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",
+  component: DrawerContent,
+  decorators: [
+    withMemoryRouter(),
+    (Story) => {
+      return <Box maxWidth={300}>{<Story />}</Box>;
+    },
+  ],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof DrawerContent>;
+
+const Template = createTemplate(DrawerContent);
+
+export const Default = Template.bind({});
+Default.args = {
+  nav: mockNav,
+  open: true,
+};

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

@@ -0,0 +1,34 @@
+import React from "react";
+import { render, screen } from "../../tests";
+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();
+  });
+});

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { DrawerSection } from "../drawer-section";
+import { DrawerContentComponent, DrawerContentProps } from "../drawer/drawer.types";
+
+/**
+ * Content to be shown inside a navigation
+ */
+export const DrawerContent: DrawerContentComponent = ({ nav }: DrawerContentProps) => {
+  const { items } = nav;
+
+  return (
+    <>
+      {items.map(({ title, items }, i) => (
+        <DrawerSection key={i} title={title} items={items} />
+      ))}
+    </>
+  );
+};

package/src/components/drawer-content/index.ts

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

package/src/components/drawer-item/drawer-item.stories.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } 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",
+  component: DrawerItem,
+  decorators: [withMemoryRouter(), withContainer({ width: 250 })],
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof DrawerItem>;
+
+const Template = createTemplate(DrawerItem);
+
+export const OnlyText = Template.bind({});
+OnlyText.args = {
+  text: "Lorem ipsum",
+  href: "/items/1",
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  text: "Lorem ipsum",
+  href: "/items/1",
+  icon: <DiamondIcon />,
+};
+
+export const WithAvatar = Template.bind({});
+WithAvatar.args = {
+  text: "Lorem ipsum",
+  href: "/items/1",
+  avatar: {
+    src: "https://c.pxhere.com/images/f6/e0/022ab77c391925931fe227c97ab4-1447675.jpg!d",
+    alt: "Avatar 1",
+  },
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  text: "Lorem ipsum",
+  href: "/items/1",
+  icon: <DiamondIcon />,
+  label: {
+    text: "new",
+    variant: "info",
+  },
+};
+
+export const WithBullet = Template.bind({});
+WithBullet.args = {
+  text: "Lorem ipsum",
+  href: "/items/1",
+  icon: <DiamondIcon />,
+  bullet: {
+    variant: "error",
+  },
+};

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

@@ -0,0 +1,119 @@
+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 { NavItemAvatar, NavItemBullet, NavItemLabel } from "../drawer/drawer.types";
+
+describe("DrawerItem", () => {
+  const renderComponent = ({
+    icon,
+    avatar,
+    label,
+    bullet,
+  }: {
+    icon?: ReactElement;
+    avatar?: NavItemAvatar;
+    label?: NavItemLabel;
+    bullet?: NavItemBullet;
+  } = {}) => {
+    return render(
+      <DrawerItem
+        text="Lorem ipsum"
+        href="/items/1"
+        icon={icon}
+        bullet={bullet}
+        avatar={avatar}
+        label={label}
+      />,
+    );
+  };
+
+  it("would render the text", () => {
+    renderComponent();
+
+    expect(screen.getByRole("link", { name: /lorem ipsum/i })).toBeInTheDocument();
+  });
+
+  it("would navigate to the href when is clicked", () => {
+    const { history } = renderComponent();
+
+    userEvent.click(screen.getByRole("link", { name: /lorem ipsum/i }));
+
+    expect(history.location.pathname).toBe("/items/1");
+  });
+
+  describe("icon", () => {
+    it("would render an icon when is set", () => {
+      renderComponent({ icon: <DiamondIcon /> });
+
+      expect(screen.getByTestId("DiamondIcon")).toBeInTheDocument();
+    });
+
+    it("wouldn't render an icon if is not set", () => {
+      renderComponent({ icon: undefined });
+
+      expect(screen.queryByTestId("DiamondIcon")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("avatar", () => {
+    it("would render an avatar when is set", () => {
+      renderComponent({
+        avatar: {
+          src: "https://c.pxhere.com/images/f6/e0/022ab77c391925931fe227c97ab4-1447675.jpg!d",
+          alt: "Avatar 1",
+        },
+      });
+
+      expect(screen.getByRole("img", { name: /avatar 1/i })).toBeInTheDocument();
+    });
+
+    it("wouldn't render an avatar if is not set", () => {
+      renderComponent();
+
+      expect(screen.queryByRole("img", { name: /avatar 1/i })).not.toBeInTheDocument();
+    });
+  });
+
+  describe("label", () => {
+    it("would render a label when is set", () => {
+      renderComponent({
+        label: {
+          text: "new",
+          variant: "info",
+        },
+      });
+
+      const label = screen.getByRole("label", { name: /new/i });
+      expect(label).toBeInTheDocument();
+      expect(label).toHaveAttribute("aria-describedby", "info");
+    });
+
+    it("wouldn't render a label if is not set", () => {
+      renderComponent();
+
+      expect(screen.queryByRole("label", { name: /new/i })).not.toBeInTheDocument();
+    });
+  });
+
+  describe("bullet", () => {
+    it("would render a bullet when is set", () => {
+      renderComponent({
+        bullet: {
+          variant: "info",
+        },
+      });
+
+      const bullet = screen.getByRole("bullet");
+      expect(bullet).toBeInTheDocument();
+      expect(bullet).toHaveAttribute("aria-describedby", "info");
+    });
+
+    it("wouldn't render a bullet if is not set", () => {
+      renderComponent();
+
+      expect(screen.queryByRole("bullet")).not.toBeInTheDocument();
+    });
+  });
+});

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

@@ -0,0 +1,71 @@
+import React, { ReactElement } from "react";
+import {
+  Avatar,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  styled,
+} from "@mui/material";
+import { Bullet } from "../bullet";
+import { Label } from "../label";
+import { NavItemAvatar, NavItemBullet, NavItemLabel } from "../drawer/drawer.types";
+import { Link } from "../link";
+
+export interface DrawerItemProps {
+  /**
+   * Text displayed inside the item
+   */
+  text: string;
+  /**
+   * Url where the user is going to be redirected
+   * if the item is clicked
+   */
+  href: string;
+  /**
+   * Icon displayed to the left
+   */
+  icon?: ReactElement;
+  /**
+   * Avatar displayed to the left
+   */
+  avatar?: NavItemAvatar;
+  /**
+   * Label with extra info displayed to the right
+   */
+  label?: NavItemLabel;
+  /**
+   * Bullet to attract the user attention displyed to the right
+   */
+  bullet?: NavItemBullet;
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const DrawerItemLink = styled(Link)(({ theme }) => {
+  return {
+    color: theme.palette.text.primary,
+  };
+});
+
+/**
+ * Clicable item inside a drawer
+ */
+export const DrawerItem = ({ text, icon, avatar, label, bullet, href }: DrawerItemProps) => {
+  return (
+    <ListItem disablePadding sx={{ display: "block" }} component={DrawerItemLink} href={href}>
+      <ListItemButton>
+        {icon && <ListItemIcon>{icon}</ListItemIcon>}
+        {avatar && (
+          <ListItemAvatar>
+            <Avatar alt={avatar.alt} src={avatar.src} />
+          </ListItemAvatar>
+        )}
+        <ListItemText primary={text} />
+        {label && <Label text={label.text} variant={label.variant} />}
+        {bullet && <Bullet variant={bullet.variant} />}
+      </ListItemButton>
+    </ListItem>
+  );
+};

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

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

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

@@ -0,0 +1,39 @@
+import React from "react";
+import DiamondIcon from "@mui/icons-material/Diamond";
+import { NavItem } from "../drawer/drawer.types";
+
+export const SectionItems: NavItem[] = [
+  {
+    id: "item1.1",
+    text: "Item 1",
+    icon: <DiamondIcon />,
+    href: "/items/1-1",
+  },
+  {
+    id: "item1.2",
+    text: "Item 2",
+    href: "/items/1-2",
+    avatar: {
+      src: "https://c.pxhere.com/images/f6/e0/022ab77c391925931fe227c97ab4-1447675.jpg!d",
+      alt: "Avatar 1",
+    },
+  },
+  {
+    id: "item1.3",
+    text: "Item 3",
+    href: "/items/1-3",
+    bullet: {
+      variant: "secondary",
+    },
+  },
+  {
+    id: "item1.4",
+    text: "Item 4",
+    href: "/items/1-4",
+    icon: <DiamondIcon />,
+    label: {
+      text: "new",
+      variant: "error",
+    },
+  },
+];

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

@@ -0,0 +1,28 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { DrawerSection } from "./drawer-section";
+import { withContainer } from "../../storybook";
+import { withMemoryRouter } from "~/storybook";
+import { SectionItems } from "./drawer-section.mock";
+
+export default {
+  title: "Drawers/DrawerSection",
+  component: DrawerSection,
+  decorators: [withMemoryRouter(), withContainer({ width: 250 })],
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof DrawerSection>;
+
+const Template = createTemplate(DrawerSection);
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Lorem ipsum",
+  items: SectionItems,
+};
+
+export const WihtoutTitle = Template.bind({});
+WihtoutTitle.args = {
+  items: SectionItems,
+};

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

@@ -0,0 +1,44 @@
+import React from "react";
+import { render, screen } from "../../tests";
+import userEvent from "@testing-library/user-event";
+import { DrawerSection } from "./drawer-section";
+import { SectionItems } from "./drawer-section.mock";
+
+describe("DrawerSection", () => {
+  const renderComponent = ({
+    title,
+  }: {
+    title?: string;
+  } = {}) => {
+    return render(<DrawerSection title={title} items={SectionItems} />);
+  };
+
+  describe("title", () => {
+    it("would render if is set", () => {
+      renderComponent({ title: "Lorem ipsum" });
+
+      expect(screen.getByRole("heading", { name: /lorem ipsum/i })).toBeInTheDocument();
+    });
+
+    it("wouldn't render if it's not set", () => {
+      renderComponent({ title: undefined });
+
+      expect(screen.queryByRole("heading", { name: /lorem ipsum/i })).not.toBeInTheDocument();
+    });
+  });
+
+  describe("click list item", () => {
+    it.each([
+      ["/items/1-1", /item 1/i],
+      ["/items/1-2", /item 2/i],
+      ["/items/1-3", /item 3/i],
+      ["/items/1-4", /item 4/i],
+    ])("would navigate to %s if %s is clicked", async (to: string, item: RegExp) => {
+      const { history } = renderComponent();
+
+      await userEvent.click(screen.getByRole("link", { name: item }));
+
+      expect(history.location.pathname).toBe(to);
+    });
+  });
+});

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

@@ -0,0 +1,40 @@
+import { List, ListSubheader } from "@mui/material";
+import React from "react";
+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[];
+}
+
+/**
+ * Render a group of items inside the drawer
+ * with an optional title
+ */
+export const DrawerSection = ({ title, items }: DrawerSectionProps) => {
+  return (
+    <>
+      {title && <ListSubheader role="heading">{title}</ListSubheader>}
+      <List>
+        {items.map(({ id, text, icon, avatar, label, bullet, href }) => (
+          <DrawerItem
+            key={id}
+            text={text}
+            icon={icon}
+            avatar={avatar}
+            label={label}
+            bullet={bullet}
+            href={href}
+          />
+        ))}
+      </List>
+    </>
+  );
+};

package/src/components/drawer-section/index.ts

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

package/src/components/header/header.dummy.ts

@@ -0,0 +1,55 @@
+import { action } from "@storybook/addon-actions";
+import { HeaderBreadcrumb, HeaderAction, HeaderTab } from "./header";
+
+export const breadcrumbs: HeaderBreadcrumb[] = [
+  {
+    id: "list",
+    text: "Items",
+    link: "/items",
+  },
+  {
+    id: "item",
+    text: "Item 1",
+    link: "/items/1",
+  },
+];
+
+export const actions: HeaderAction[] = [
+  {
+    id: "new",
+    text: "Add",
+    href: "/items/add",
+  },
+  {
+    id: "edit",
+    text: "Edit",
+    onClick: action("click action edit"),
+  },
+  {
+    id: "disabled",
+    text: "Disabled",
+    disabled: true,
+    onClick: action("click action disabled"),
+  },
+  {
+    id: "delete",
+    text: "Delete",
+    onClick: action("click action delete"),
+  },
+];
+
+export const tabs: HeaderTab[] = [
+  {
+    id: "tab1",
+    label: "Tab 1",
+  },
+  {
+    id: "tab2",
+    label: "Tab 2",
+    disabled: true,
+  },
+  {
+    id: "tab3",
+    label: "Tab 3",
+  },
+];

package/src/components/header/header.stories.tsx

@@ -0,0 +1,116 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { Header } from "./header";
+import { withMemoryRouter } from "~/storybook";
+import { breadcrumbs, tabs, actions } from "./header.dummy";
+
+export default {
+  title: "Sections/Header",
+  component: Header,
+  decorators: [withMemoryRouter()],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof Header>;
+
+const Template = createTemplate(Header);
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Lorem ipsum",
+  subtitle: "Dolor sit amet",
+  preset: "inherit",
+  breadcrumbs,
+  actions,
+};
+
+export const OnlyTitle = Template.bind({});
+OnlyTitle.args = {
+  title: "Lorem ipsum",
+};
+
+export const ColorInherit = Template.bind({});
+ColorInherit.args = {
+  title: "Lorem ipsum",
+  subtitle: "Dolor sit amet",
+  preset: "inherit",
+  breadcrumbs,
+  tabs,
+  selectedTab: 2,
+  actions,
+};
+
+export const ColorPrimary = Template.bind({});
+ColorPrimary.args = {
+  title: "Lorem ipsum",
+  subtitle: "Dolor sit amet",
+  preset: "primary",
+  breadcrumbs,
+  tabs,
+  selectedTab: 2,
+  actions,
+};
+
+export const ColorSecondary = Template.bind({});
+ColorSecondary.args = {
+  title: "Lorem ipsum",
+  subtitle: "Dolor sit amet",
+  preset: "secondary",
+  breadcrumbs,
+  tabs,
+  selectedTab: 2,
+  actions,
+};
+
+export const ColorDefault = Template.bind({});
+ColorDefault.args = {
+  title: "Lorem ipsum",
+  subtitle: "Dolor sit amet",
+  preset: "default",
+  breadcrumbs,
+  tabs,
+  selectedTab: 2,
+  actions,
+};
+
+export const ColorTransparent = Template.bind({});
+ColorTransparent.args = {
+  title: "Lorem ipsum",
+  subtitle: "Dolor sit amet",
+  preset: "transparent",
+  breadcrumbs,
+  tabs,
+  selectedTab: 2,
+  actions,
+};
+
+export const WithSubheader = Template.bind({});
+WithSubheader.args = {
+  title: "Lorem ipsum",
+  subtitle: "Dolor sit amet",
+};
+
+export const WithBreadcumbs = Template.bind({});
+WithBreadcumbs.args = {
+  title: "Lorem ipsum",
+  breadcrumbs,
+};
+
+export const WithActions = Template.bind({});
+WithActions.args = {
+  title: "Lorem ipsum",
+  subtitle: "Dolor sit amet",
+  preset: "default",
+  breadcrumbs,
+  actions,
+};
+
+export const WithTabs = Template.bind({});
+WithTabs.args = {
+  title: "Lorem ipsum",
+  subtitle: "Dolor sit amet",
+  preset: "default",
+  breadcrumbs,
+  tabs,
+  selectedTab: 2,
+};