@pautena/react-design-system 0.12.0 → 0.12.2

package/src/components/data-display/header/header-title.tsx

@@ -1,51 +0,0 @@
-import { CircularProgress, Typography, useTheme } from "@mui/material";
-import React from "react";
-import { PropsWithChildren } from "react";
-
-export type HeaderTitleProps = PropsWithChildren<{ loading?: boolean }>;
-
-export const HeaderTitle = ({ loading, children }: HeaderTitleProps) => {
-  const { typography } = useTheme();
-
-  if (loading) {
-    return (
-      <CircularProgress color="inherit" size={typography.h4.fontSize} aria-label="title loading" />
-    );
-  }
-
-  if (typeof children === "string") {
-    return (
-      <Typography variant="h4" role="heading" aria-level={1}>
-        {children}
-      </Typography>
-    );
-  }
-
-  return <>{children}</>;
-};
-
-export type HeaderSubtitleProps = PropsWithChildren<{ loading?: boolean }>;
-
-export const HeaderSubtitle = ({ loading, children }: HeaderSubtitleProps) => {
-  const { typography } = useTheme();
-
-  if (loading) {
-    return (
-      <CircularProgress
-        color="inherit"
-        size={typography.body1.fontSize}
-        aria-label="subtitle loading"
-      />
-    );
-  }
-
-  if (typeof children === "string") {
-    return (
-      <Typography variant="body1" role="heading" aria-level={2}>
-        {children}
-      </Typography>
-    );
-  }
-
-  return <>{children}</>;
-};

package/src/components/data-display/header/header.dummy.ts

@@ -1,56 +0,0 @@
-import { action } from "@storybook/addon-actions";
-import { HeaderBreadcrumb, HeaderAction, HeaderTab } from "./header.types";
-
-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",
-  },
-];
-export const linkedTabs = tabs.map((tab) => ({ ...tab, href: `/tab/${tab.id}` }));

package/src/components/data-display/header/header.stories.tsx

@@ -1,212 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Header } from "./header";
-import { withMemoryRouter } from "~/storybook";
-import { breadcrumbs, tabs, actions, linkedTabs } from "./header.dummy";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import React from "react";
-import { TabProvider } from "~/providers";
-import { Content } from "~/components/containers";
-import { Box, Typography } from "@mui/material";
-import { TabPanel } from "~/components/navigation/tab-panel";
-import { Route, Routes, useLocation } from "react-router-dom";
-import { Label } from "../label";
-
-export default {
-  title: "Components/Data Display/Header",
-  component: Header,
-  decorators: [withMemoryRouter()],
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof Header>;
-type Story = StoryObj<typeof Header>;
-
-export const Default: Story = {
-  args: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    preset: "default",
-    breadcrumbs,
-    actions,
-  },
-};
-
-export const OnlyTitle: Story = {
-  args: {
-    title: "Lorem ipsum",
-  },
-};
-
-export const CustomTitle: Story = {
-  args: {
-    ...Default.args,
-    title: (
-      <Box display="flex" flexDirection="row" alignItems="center">
-        <Typography variant="h6">Lorem ipsum</Typography>
-        <Label variant="primary" text="4 items" sx={{ ml: 1 }} />
-      </Box>
-    ),
-  },
-};
-
-export const TitleLoading: Story = {
-  args: {
-    ...Default.args,
-    loadingTitle: true,
-  },
-};
-
-export const CustomSubtitle: Story = {
-  args: {
-    ...Default.args,
-    subtitle: (
-      <Box display="flex" flexDirection="row" alignItems="center">
-        <Typography variant="body2">Dolor sit amet</Typography>
-        <Label variant="error" text="since yesterday" sx={{ ml: 1 }} />
-      </Box>
-    ),
-  },
-};
-
-export const SubtitleLoading: Story = {
-  args: {
-    ...Default.args,
-    loadingSubtitle: true,
-  },
-};
-
-export const ColorInherit: Story = {
-  args: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    preset: "inherit",
-    breadcrumbs,
-    tabs,
-    actions,
-  },
-};
-
-export const ColorPrimary: Story = {
-  args: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    preset: "primary",
-    breadcrumbs,
-    tabs,
-    actions,
-  },
-};
-
-export const ColorSecondary: Story = {
-  args: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    preset: "secondary",
-    breadcrumbs,
-    tabs,
-    actions,
-  },
-};
-
-export const ColorDefault: Story = {
-  args: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    preset: "default",
-    breadcrumbs,
-    tabs,
-    actions,
-  },
-};
-
-export const ColorTransparent: Story = {
-  args: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    preset: "transparent",
-    breadcrumbs,
-    tabs,
-    actions,
-  },
-};
-
-export const WithSubheader: Story = {
-  args: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-  },
-};
-
-export const WithBreadcumbs: Story = {
-  args: {
-    title: "Lorem ipsum",
-    breadcrumbs,
-  },
-};
-
-export const WithActions: Story = {
-  args: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    preset: "default",
-    tabsMode: "panel",
-    breadcrumbs,
-    actions,
-  },
-};
-
-export const WithPanelTabs = () => (
-  <TabProvider>
-    <Header title="Lorem ipsum" subtitle="Dolor sit amet" tabsMode="panel" tabs={tabs} />
-    <Content>
-      <TabPanel index={0}>
-        <Typography>Panel Tab 1</Typography>
-      </TabPanel>
-      <TabPanel index={1}>
-        <Typography>Panel Tab 2</Typography>
-      </TabPanel>
-      <TabPanel index={2}>
-        <Typography>Panel Tab 3</Typography>
-      </TabPanel>
-    </Content>
-  </TabProvider>
-);
-
-export const WithLinkedTabs = () => {
-  const location = useLocation();
-
-  return (
-    <Box>
-      <Header
-        title="Lorem ipsum"
-        subtitle="Dolor sit amet"
-        tabsMode="navigation"
-        tabs={linkedTabs}
-      />
-      <Content>
-        <>
-          <Typography>Location: {location.pathname}</Typography>
-          <Routes>
-            <Route path="/tab/tab1" element={<Typography>Panel: /tab/tab1</Typography>} />
-            <Route path="/tab/tab2" element={<Typography>Panel: /tab/tab2</Typography>} />
-            <Route path="/tab/tab3" element={<Typography>Panel: /tab/tab3</Typography>} />
-            <Route path="/" element={<Typography>Home</Typography>} />
-          </Routes>
-        </>
-      </Content>
-    </Box>
-  );
-};
-
-export const NavigationButton: Story = {
-  args: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    preset: "default",
-    navigationButton: {
-      text: "Go back",
-      href: "/back",
-      icon: <ArrowBackIcon />,
-    },
-  },
-};

package/src/components/data-display/header/header.test.tsx

@@ -1,299 +0,0 @@
-import React, { ReactElement } from "react";
-import { render, screen } from "~/tests/testing-library";
-import userEvent from "@testing-library/user-event";
-import { Header } from "./header";
-import { vi } from "vitest";
-import {
-  HeaderAction,
-  HeaderActionVariant,
-  HeaderBreadcrumb,
-  HeaderPreset,
-  HeaderTab,
-} from "./header.types";
-import { breadcrumbs, actions as actionsData, tabs, linkedTabs } from "./header.dummy";
-import { TabProvider } from "../../../providers";
-import { WithLinkedTabs, WithPanelTabs } from "./header.stories";
-import { Typography } from "@mui/material";
-import { Box } from "@mui/system";
-import { Label } from "../label";
-
-const actions = actionsData.map((a) => ({ ...a, onClick: a.onClick && vi.fn() }));
-
-const renderInstance = ({
-  title = "Lorem ipsum",
-  loadingTitle,
-  subtitle,
-  loadingSubtitle,
-  preset = "default",
-  breadcrumbs,
-  actions,
-  actionsVariant,
-  tabs,
-  selectedTab,
-  navigationButton,
-}: {
-  title?: string | ReactElement;
-  subtitle?: string | ReactElement;
-  loadingTitle?: boolean;
-  loadingSubtitle?: boolean;
-  preset?: HeaderPreset;
-  breadcrumbs?: HeaderBreadcrumb[];
-  actions?: HeaderAction[];
-  actionsVariant?: HeaderActionVariant;
-  tabs?: HeaderTab[];
-  selectedTab?: number;
-  navigationButton?: boolean;
-}) => {
-  const instance = render(
-    <TabProvider initialValue={selectedTab}>
-      <Header
-        title={title}
-        loadingTitle={loadingTitle}
-        subtitle={subtitle}
-        loadingSubtitle={loadingSubtitle}
-        preset={preset}
-        breadcrumbs={breadcrumbs}
-        actions={actions}
-        actionsVariant={actionsVariant}
-        tabs={tabs}
-        navigationButton={navigationButton ? { text: "go back", href: "/back" } : undefined}
-      />
-    </TabProvider>,
-  );
-
-  return { ...instance };
-};
-
-describe("Header", () => {
-  describe("title", () => {
-    it("should render the title", () => {
-      renderInstance({ title: "Lorem ipsum" });
-
-      expect(screen.getByRole("heading", { level: 1, name: /lorem ipsum/i })).toBeInTheDocument();
-    });
-
-    it("should render the custom title", () => {
-      renderInstance({
-        title: (
-          <Box display="flex" flexDirection="row" alignItems="center">
-            <Typography variant="h6">custom title</Typography>
-            <Label variant="primary" text="4 items" sx={{ ml: 1 }} />
-          </Box>
-        ),
-      });
-
-      expect(screen.getByRole("heading", { level: 6, name: /custom title/i })).toBeVisible();
-      expect(screen.getByText(/4 items/i)).toBeVisible();
-    });
-
-    it("should render a loading indicator if title is loading", () => {
-      renderInstance({ title: "Lorem ipsum", loadingTitle: true });
-
-      expect(
-        screen.queryByRole("heading", { level: 1, name: /lorem ipsum/i }),
-      ).not.toBeInTheDocument();
-      expect(screen.queryByRole("progressbar", { name: /title loading/i })).toBeInTheDocument();
-    });
-  });
-
-  describe("subtitle", () => {
-    it("should render when is set", () => {
-      renderInstance({ subtitle: "sit amet" });
-
-      expect(screen.queryByRole("heading", { level: 2, name: /sit amet/i })).toBeInTheDocument();
-    });
-
-    it("shouldn't render if it is not set", () => {
-      renderInstance({ subtitle: undefined });
-
-      expect(screen.queryByRole("heading", { level: 2 })).not.toBeInTheDocument();
-    });
-
-    it("should render the custom title", () => {
-      renderInstance({
-        subtitle: (
-          <Box display="flex" flexDirection="row" alignItems="center">
-            <Typography variant="body2">Dolor sit amet</Typography>
-            <Label variant="error" text="since yesterday" sx={{ ml: 1 }} />
-          </Box>
-        ),
-      });
-
-      expect(screen.getByText(/dolor sit amet/i)).toBeVisible();
-      expect(screen.getByText(/since yesterday/i)).toBeVisible();
-    });
-
-    it("should render a loading indicator if title is loading", () => {
-      renderInstance({ subtitle: "sit amet", loadingSubtitle: true });
-
-      expect(screen.queryByRole("heading", { level: 2 })).not.toBeInTheDocument();
-      expect(screen.queryByRole("progressbar", { name: /subtitle loading/i })).toBeInTheDocument();
-    });
-  });
-
-  describe("breadcrumbs", () => {
-    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("should navigate to a breadcrumb when is", async () => {
-      const { history } = renderInstance({ breadcrumbs });
-
-      await userEvent.click(screen.getByRole("link", { name: /items/i }));
-
-      expect(history.location.pathname).toBe("/items");
-    });
-  });
-
-  describe("actions", () => {
-    it("should render a list of buttons", () => {
-      renderInstance({ actions });
-
-      expect(screen.getByRole("button", { name: /add/i })).toBeInTheDocument();
-      expect(screen.getByRole("button", { name: /edit/i })).toBeInTheDocument();
-      expect(screen.getByRole("button", { name: /disabled/i })).toBeInTheDocument();
-      expect(screen.getByRole("button", { name: /delete/i })).toBeInTheDocument();
-    });
-
-    it("clicks an action with an onClick defined it will be called", async () => {
-      renderInstance({ actions });
-
-      const button = actions[1];
-
-      await userEvent.click(screen.getByRole("button", { name: button.text }));
-
-      expect(button.onClick).toHaveBeenCalledTimes(1);
-    });
-
-    it("shouldn't be possible to click a disabled action", async () => {
-      renderInstance({ actions });
-
-      expect(screen.getByRole("button", { name: /disabled/i })).toBeDisabled();
-    });
-
-    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 }));
-
-      expect(history.location.pathname).toBe("/items/add");
-    });
-  });
-
-  describe("tabs", () => {
-    it("should render a list of tabs", () => {
-      renderInstance({ tabs, selectedTab: 2 });
-
-      expect(screen.getByRole("tab", { name: /tab 1/i })).toBeInTheDocument();
-      expect(screen.getByRole("tab", { name: /tab 2/i })).toBeInTheDocument();
-      expect(screen.getByRole("tab", { name: /tab 3/i })).toBeInTheDocument();
-    });
-
-    it("should mark as active the selectedTab", () => {
-      renderInstance({ tabs, selectedTab: 2 });
-
-      expect(screen.getByRole("tab", { name: /tab 1/i, selected: false })).toBeInTheDocument();
-      expect(screen.getByRole("tab", { name: /tab 2/i, selected: false })).toBeInTheDocument();
-      expect(screen.getByRole("tab", { name: /tab 3/i, selected: true })).toBeInTheDocument();
-    });
-
-    it("shouldn't be possible to click a disabled tab", () => {
-      renderInstance({ tabs, selectedTab: 2 });
-
-      expect(screen.getByRole("tab", { name: /tab 2/i })).toBeDisabled();
-    });
-
-    describe("tabMode = panel", () => {
-      const enabledTestCases = tabs.filter((tab) => !tab.disabled).map(({ label }) => [label]);
-
-      const renderPanelTabsInstance = () => {
-        render(<WithPanelTabs />);
-      };
-
-      it("should change the selected tab when a tab is clicked", async () => {
-        renderPanelTabsInstance();
-
-        await userEvent.click(screen.getByRole("tab", { name: /tab 3/i }));
-
-        expect(screen.getByRole("tab", { name: /tab 1/i, selected: false })).toBeInTheDocument();
-        expect(screen.getByRole("tab", { name: /tab 2/i, selected: false })).toBeInTheDocument();
-        expect(screen.getByRole("tab", { name: /tab 3/i, selected: true })).toBeInTheDocument();
-      });
-
-      it.each(enabledTestCases)(
-        "if i cliick the tab %s the content of that panel should be rendered",
-        async (label: string) => {
-          renderPanelTabsInstance();
-
-          await userEvent.click(screen.getByRole("tab", { name: label }));
-
-          expect(screen.getByText(`Panel ${label}`)).toBeVisible();
-        },
-      );
-    });
-
-    describe("tabMode = navigation", () => {
-      const enabledTestCases = linkedTabs
-        .filter((tab) => !tab.disabled)
-        .map(({ label, href }) => [href, label]);
-      const renderLinkedTabsInstance = () => {
-        render(<WithLinkedTabs />, { router: "memory" });
-      };
-
-      it("should render a list of tabs", () => {
-        renderLinkedTabsInstance();
-
-        tabs.forEach(({ label }) => {
-          expect(screen.getByRole("tab", { name: label })).toBeVisible();
-        });
-      });
-
-      it.each(enabledTestCases)(
-        "should render %s if the user click %s label",
-        async (href: string, label: string) => {
-          renderLinkedTabsInstance();
-
-          await userEvent.click(screen.getByRole("tab", { name: label }));
-
-          expect(screen.getByText(`Panel: ${href}`)).toBeVisible();
-        },
-      );
-
-      it.each(enabledTestCases)(
-        "should navigate to %s if the user click %s label",
-        async (href: string, label: string) => {
-          renderLinkedTabsInstance();
-
-          await userEvent.click(screen.getByRole("tab", { name: label }));
-
-          expect(screen.getByText(`Location: ${href}`)).toBeVisible();
-        },
-      );
-    });
-  });
-
-  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");
-    });
-  });
-});