@pautena/react-design-system 0.11.2 → 0.12.1

package/src/components/navigation/tab-card/tab-card-panel.tsx

@@ -1,19 +0,0 @@
-import { PropsWithChildren, useContext } from "react";
-import { TabCardContext } from "./tab-card.context";
-import React from "react";
-import { Box, SxProps, Theme } from "@mui/material";
-
-export type TabCardPanelProps = PropsWithChildren<{
-  index: number | number[];
-  sx?: SxProps<Theme>;
-}>;
-
-export const TabCardPanel = ({ index, children, sx }: TabCardPanelProps) => {
-  const [value] = useContext(TabCardContext);
-  let isTab = value === index;
-  if (Array.isArray(index)) {
-    isTab = index.includes(value);
-  }
-
-  return isTab ? <Box sx={sx}>{children}</Box> : null;
-};

package/src/components/navigation/tab-card/tab-card.context.tsx

@@ -1,7 +0,0 @@
-import { createContext, Dispatch, SetStateAction } from "react";
-
-export const TabCardContext = createContext<[number, Dispatch<SetStateAction<number>>]>([
-  0,
-  () => null,
-]);
-export const TabCardContextProvider = TabCardContext.Provider;

package/src/components/navigation/tab-card/tab-card.dummy.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import { TabCard, TabData } from "./tab-card";
-import { Typography } from "@mui/material";
-import { TabCardPanel } from "./tab-card-panel";
-import { Label } from "~/components/data-display";
-
-export const DummyTabs = [
-  { text: "tab 1" },
-  { text: "tab 2.1", icon: <Label text="10" variant="success" sx={{ mr: 1 }} /> },
-  { text: "tab 2.2" },
-  { text: "tab 3", icon: <Label text="12" variant="error" sx={{ mr: 1 }} /> },
-];
-
-export interface TabCardDummyProps {
-  tabs: TabData[];
-  initialTab: number;
-  onChangeTab: (tab: TabData, index: number) => void;
-}
-
-export function TabCardDummy({ tabs, initialTab, onChangeTab }: TabCardDummyProps) {
-  return (
-    <TabCard tabs={tabs} initialTab={initialTab} onChangeTab={onChangeTab}>
-      <TabCardPanel index={0} sx={{ p: 2 }}>
-        <Typography>Panel 1</Typography>
-      </TabCardPanel>
-      <TabCardPanel index={[1, 2]} sx={{ p: 2 }}>
-        <Typography>Panel 2</Typography>
-      </TabCardPanel>
-      <TabCardPanel index={3} sx={{ p: 2 }}>
-        <Typography>Panel 3</Typography>
-      </TabCardPanel>
-    </TabCard>
-  );
-}

package/src/components/navigation/tab-card/tab-card.stories.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import { DummyTabs, TabCardDummy, TabCardDummyProps } from "./tab-card.dummy";
-
-export default {
-  title: "Components/Navigation/TabCard",
-  component: TabCardDummy,
-  parameters: {
-    layout: "centered",
-  },
-  render: (props: TabCardDummyProps) => {
-    return <TabCardDummy {...props} />;
-  },
-} satisfies Meta<typeof TabCardDummy>;
-type Story = StoryObj<typeof TabCardDummy>;
-
-export const Default: Story = {
-  args: {
-    tabs: DummyTabs,
-  },
-};

package/src/components/navigation/tab-card/tab-card.test.tsx

@@ -1,74 +0,0 @@
-import React from "react";
-import { DummyTabs, TabCardDummy } from "./tab-card.dummy";
-import { screen, render } from "~/tests/testing-library";
-import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
-
-describe("TabCard", () => {
-  function renderComponent({ initialTab = 0 } = {}) {
-    const onChangeTab = vi.fn();
-    render(<TabCardDummy tabs={DummyTabs} initialTab={initialTab} onChangeTab={onChangeTab} />);
-    return { onChangeTab };
-  }
-
-  it('initialTab is not set the "panel 1" is displayed', () => {
-    renderComponent();
-
-    expect(screen.getByText(/panel 1/i)).toBeInTheDocument();
-  });
-
-  it('initialTab is set to 3 the "panel 3" is displayed', () => {
-    renderComponent({ initialTab: 3 });
-
-    expect(screen.getByText(/panel 3/i)).toBeInTheDocument();
-  });
-
-  it("should render the tab labels", () => {
-    renderComponent();
-
-    expect(screen.getByText(/10/i)).toBeVisible();
-    expect(screen.getByText(/12/i)).toBeVisible();
-  });
-
-  describe("click tab", () => {
-    it.each([
-      [/tab 1/i, /panel 1/i],
-      [/tab 2.1/i, /panel 2/i],
-      [/tab 2.2/i, /panel 2/i],
-      [/tab 3/i, /panel 3/i],
-    ])(
-      'click the tab "%s" the "%s" panel is displayed',
-      async (tabName: RegExp, expectedText: RegExp) => {
-        renderComponent();
-
-        const tab = screen.getByRole("tab", { name: tabName });
-        await userEvent.click(tab);
-
-        expect(screen.getByText(expectedText)).toBeInTheDocument();
-        expect(tab).toHaveAttribute("aria-selected", "true");
-      },
-    );
-
-    it('click the tab "tab 2" and click again the tab "tab 1" the "panel 1" is displayed', async () => {
-      renderComponent();
-
-      const tab1 = screen.getByRole("tab", { name: /tab 1/i });
-      const tab2 = screen.getByRole("tab", { name: /tab 2.1/i });
-      await userEvent.click(tab2);
-      await userEvent.click(tab1);
-
-      expect(screen.getByText(/panel 1/i)).toBeInTheDocument();
-      expect(screen.getByRole("tab", { name: /tab 1/i, selected: true })).toBeVisible();
-      expect(screen.getByRole("tab", { name: /tab 2.1/i, selected: false })).toBeVisible();
-    });
-
-    it("should call onChangeTab", async () => {
-      const { onChangeTab } = renderComponent();
-
-      await userEvent.click(screen.getByRole("tab", { name: /tab 2.2/i }));
-
-      expect(onChangeTab).toHaveBeenCalledTimes(1);
-      expect(onChangeTab).toHaveBeenCalledWith({ text: "tab 2.2" }, 2);
-    });
-  });
-});

package/src/components/navigation/tab-card/tab-card.tsx

@@ -1,81 +0,0 @@
-import { Paper, Tabs, Tab, styled, Box } from "@mui/material";
-import React, { PropsWithChildren, ReactElement, SyntheticEvent, useState } from "react";
-import { TabCardContextProvider } from "./tab-card.context";
-import { useGetDefaultThemeColor } from "~/utils";
-
-export interface TabData {
-  text: string;
-  icon?: ReactElement;
-}
-
-interface StyledTabsProps {
-  children?: React.ReactNode;
-  value: number;
-  onChange: (event: React.SyntheticEvent, newValue: number) => void;
-}
-
-const StyledTabs = styled((props: StyledTabsProps) => (
-  <Tabs {...props} TabIndicatorProps={{ children: <span className="MuiTabs-indicatorSpan" /> }} />
-))(({ theme }) => ({
-  minHeight: theme.spacing(5),
-  "& .MuiTabs-indicator": {
-    display: "flex",
-    justifyContent: "center",
-    backgroundColor: "transparent",
-  },
-  "& .MuiTabs-indicatorSpan": {
-    maxWidth: 40,
-    width: "100%",
-    backgroundColor: theme.palette.primary.main,
-  },
-}));
-
-const StyledTab = styled(Tab)(({ theme }) => ({
-  textTransform: "none",
-  fontWeight: theme.typography.fontWeightRegular,
-  marginRight: theme.spacing(1),
-  color: theme.palette.text.secondary,
-  paddingTop: 0,
-  paddingBottom: 0,
-  minHeight: theme.spacing(5),
-  "&.Mui-selected": {
-    color: theme.palette.text.secondary,
-    fontWeight: theme.typography.fontWeightBold,
-  },
-}));
-
-export type TabCardProps = PropsWithChildren<{
-  tabs: TabData[];
-  initialTab?: number;
-  onChangeTab?: (tab: TabData, index: number) => void;
-}>;
-
-export const TabCard = ({
-  children,
-  tabs,
-  initialTab = 0,
-  onChangeTab = () => null,
-}: TabCardProps) => {
-  const bgColor = useGetDefaultThemeColor();
-  const [selectedTab, setSelectedTab] = useState(initialTab);
-
-  const handleChangeTab = (_: SyntheticEvent<Element, Event>, index: number) => {
-    setSelectedTab(index);
-    onChangeTab(tabs[index], index);
-  };
-
-  return (
-    <TabCardContextProvider value={[selectedTab, setSelectedTab]}>
-      <Paper variant="outlined">
-        <Box bgcolor={bgColor}>
-          <StyledTabs value={selectedTab} onChange={handleChangeTab}>
-            {tabs.map(({ text, icon }) => (
-              <StyledTab iconPosition="start" disableRipple key={text} label={text} icon={icon} />
-            ))}
-          </StyledTabs>
-        </Box>
-        {children}
-      </Paper>
-    </TabCardContextProvider>
-  );
-};

package/src/components/navigation/tab-panel/index.ts

@@ -1 +0,0 @@
-export * from "./tab-panel";

package/src/components/navigation/tab-panel/tab-panel.test.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import { TabPanel } from "./tab-panel";
-import { TabProvider } from "../../../providers";
-
-describe("TabPanel", () => {
-  function renderInstance(initialValue: number) {
-    render(
-      <TabProvider initialValue={initialValue}>
-        <TabPanel index={0}>Panel content</TabPanel>
-      </TabProvider>,
-    );
-  }
-
-  it("if the provider value is the index the content is displayed", () => {
-    renderInstance(0);
-
-    expect(screen.getByText(/panel content/i)).toBeInTheDocument();
-  });
-
-  it("if the provider value is not the index the content is not displayed", () => {
-    renderInstance(1);
-
-    expect(screen.queryByText(/panel content/i)).not.toBeInTheDocument();
-  });
-});

package/src/components/navigation/tab-panel/tab-panel.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import { useTab } from "~/providers";
-
-interface TabPanelProps {
-  children?: React.ReactNode;
-  index: number | number[];
-}
-
-export function TabPanel({ children, index }: TabPanelProps) {
-  const [value] = useTab();
-  let isTab = value === index;
-  if (Array.isArray(index)) {
-    isTab = index.includes(value);
-  }
-
-  return (
-    <div
-      role="tabpanel"
-      hidden={!isTab}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-    >
-      {isTab && <Box sx={{ p: 3 }}>{children}</Box>}
-    </div>
-  );
-}

package/src/components/placeholders/content-placeholder/content-placeholder.stories.tsx

@@ -1,13 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { ContentPlaceholder } from "./content-placeholder";
-
-export default {
-  title: "Components/Placeholders/ContentPlaceholder",
-  component: ContentPlaceholder,
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof ContentPlaceholder>;
-type Story = StoryObj<typeof ContentPlaceholder>;
-
-export const Default: Story = {};

package/src/components/placeholders/content-placeholder/content-placeholder.tsx

@@ -1,17 +0,0 @@
-import { Container } from "@mui/material";
-import React, { PropsWithChildren } from "react";
-import { SkeletonGrid } from "../skeleton-grid";
-
-export type ContentPlaceholderProps = PropsWithChildren<{
-  size?: number;
-  p?: number;
-}>;
-
-export const ContentPlaceholder = ({ size = 20, children, p }: ContentPlaceholderProps) => {
-  return (
-    <Container component="main" sx={{ p }} data-testid="content-placeholder-test">
-      {children}
-      <SkeletonGrid size={size} />
-    </Container>
-  );
-};

package/src/components/placeholders/content-placeholder/index.ts

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

package/src/components/placeholders/index.ts

@@ -1,5 +0,0 @@
-export * from "./placeholder";
-export * from "./skeleton-grid";
-export * from "./skeleton-card";
-export * from "./content-placeholder";
-export * from "./lorem-ipsum-placeholder";

package/src/components/placeholders/lorem-ipsum-placeholder/index.ts

@@ -1 +0,0 @@
-export * from "./lorem-ipsum-placeholder";

package/src/components/placeholders/lorem-ipsum-placeholder/lorem-ipsum-placeholder.stories.tsx

@@ -1,13 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { LoremIpsumPlaceholder } from "./lorem-ipsum-placeholder";
-
-export default {
-  title: "Components/Placeholders/LoremIpsumPlaceholder",
-  component: LoremIpsumPlaceholder,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof LoremIpsumPlaceholder>;
-type Story = StoryObj<typeof LoremIpsumPlaceholder>;
-
-export const Default: Story = {};

package/src/components/placeholders/lorem-ipsum-placeholder/lorem-ipsum-placeholder.tsx

@@ -1,26 +0,0 @@
-import { Typography } from "@mui/material";
-import { Variant } from "@mui/material/styles/createTypography";
-import { loremIpsum } from "lorem-ipsum";
-import { LoremUnit } from "lorem-ipsum/types/src/constants/units";
-import React from "react";
-
-export interface LoremIpsumPlaceholderProps {
-  count?: number;
-  units?: LoremUnit;
-  variant?: Variant;
-}
-
-export const LoremIpsumPlaceholder = ({
-  count = 3,
-  units = "paragraph",
-  variant = "body1",
-}: LoremIpsumPlaceholderProps) => {
-  return (
-    <Typography variant={variant}>
-      {loremIpsum({
-        count,
-        units,
-      })}
-    </Typography>
-  );
-};

package/src/components/placeholders/placeholder/index.ts

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

package/src/components/placeholders/placeholder/placeholder.mock.ts

@@ -1,15 +0,0 @@
-import { PlaceholderAction } from "./placeholder";
-import { action } from "@storybook/addon-actions";
-
-export const actions: PlaceholderAction[] = [
-  {
-    id: "add",
-    text: "Add",
-    href: "/placeholders/add",
-  },
-  {
-    id: "edit",
-    text: "Edit",
-    onClick: action("on click edit action"),
-  },
-];

package/src/components/placeholders/placeholder/placeholder.stories.tsx

@@ -1,45 +0,0 @@
-import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import { Placeholder, PlaceholderIconArgs } from "./placeholder";
-import SearchIcon from "@mui/icons-material/Search";
-import { actions } from "./placeholder.mock";
-
-export default {
-  title: "Components/Placeholders/Placeholder",
-  component: Placeholder,
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof Placeholder>;
-type Story = StoryObj<typeof Placeholder>;
-
-export const Default: Story = {
-  args: {
-    title: "Lorem ipsum dolor sit amet",
-    subtitle:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eleifend at libero in tristique. Pellentesque bibendum arcu eget augue commodo, non convallis eros porttitor",
-  },
-};
-
-export const WithIcon: Story = {
-  args: {
-    icon: ({ size, color }: PlaceholderIconArgs) => (
-      <SearchIcon color={color} sx={{ fontSize: size }} />
-    ),
-    title: "Lorem ipsum dolor sit amet",
-    subtitle:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eleifend at libero in tristique. Pellentesque bibendum arcu eget augue commodo, non convallis eros porttitor",
-  },
-};
-
-export const WithActions: Story = {
-  args: {
-    icon: ({ size, color }: PlaceholderIconArgs) => (
-      <SearchIcon color={color} sx={{ fontSize: size }} />
-    ),
-    title: "Lorem ipsum dolor sit amet",
-    subtitle:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eleifend at libero in tristique. Pellentesque bibendum arcu eget augue commodo, non convallis eros porttitor",
-    actions,
-  },
-};

package/src/components/placeholders/placeholder/placeholder.test.tsx

@@ -1,78 +0,0 @@
-import React, { ReactElement } from "react";
-import { render, screen } from "~/tests/testing-library";
-import userEvent from "@testing-library/user-event";
-import { Placeholder, PlaceholderAction } from "./placeholder";
-import { actions as actionData } from "./placeholder.mock";
-import SearchIcon from "@mui/icons-material/Search";
-import { vi } from "vitest";
-
-const actions = actionData.map((a) => ({ ...a, onClick: vi.fn() }));
-
-describe("Placeholder", () => {
-  const renderComponent = ({
-    actions = undefined,
-    icon = undefined,
-  }: { actions?: PlaceholderAction[]; icon?: ReactElement } = {}) => {
-    const iconFn = icon ? () => icon : undefined;
-    return render(
-      <Placeholder
-        title="Lorem ipsum"
-        subtitle="Lorem ipsum sit amet"
-        actions={actions}
-        icon={iconFn}
-      />,
-    );
-  };
-
-  it("would render the title", () => {
-    renderComponent();
-
-    expect(screen.getByRole("heading", { name: /lorem ipsum/i, level: 1 })).toBeInTheDocument();
-  });
-
-  it("would render the subtitle", () => {
-    renderComponent();
-
-    expect(
-      screen.getByRole("heading", { name: /lorem ipsum sit amet/i, level: 2 }),
-    ).toBeInTheDocument();
-  });
-
-  describe("icon", () => {
-    it("wouldn't render an icon if it's not set", () => {
-      renderComponent({ icon: undefined });
-
-      expect(screen.queryByTestId("SearchIcon")).not.toBeInTheDocument();
-    });
-
-    it("would render an icon if it's set", () => {
-      renderComponent({ icon: <SearchIcon /> });
-
-      expect(screen.queryByTestId("SearchIcon")).toBeInTheDocument();
-    });
-  });
-
-  describe("actions", () => {
-    it("wouldn't render an action if they are not set", () => {
-      renderComponent({ actions: undefined });
-
-      expect(screen.queryByRole("button")).not.toBeInTheDocument();
-    });
-
-    it("would render a button for each action", () => {
-      renderComponent({ actions });
-
-      expect(screen.queryAllByRole("button")).toHaveLength(actions.length);
-      expect(screen.queryByRole("button", { name: /add/i })).toBeInTheDocument();
-      expect(screen.queryByRole("button", { name: /edit/i })).toBeInTheDocument();
-    });
-
-    it("would call onClick if a button is clicked", async () => {
-      renderComponent({ actions });
-
-      await userEvent.click(screen.getByRole("button", { name: /edit/i }));
-
-      expect(actions[1].onClick).toHaveBeenCalledTimes(1);
-    });
-  });
-});

package/src/components/placeholders/placeholder/placeholder.tsx

@@ -1,77 +0,0 @@
-import React, { ReactElement } from "react";
-import { Box, Typography, Button } from "@mui/material";
-
-type IconColor =
-  | "inherit"
-  | "action"
-  | "disabled"
-  | "primary"
-  | "secondary"
-  | "error"
-  | "info"
-  | "success"
-  | "warning";
-
-export interface PlaceholderAction {
-  id: string;
-  text: string;
-  href?: string;
-  onClick?: () => void;
-}
-
-export interface PlaceholderIconArgs {
-  size: number;
-  color: IconColor;
-}
-
-export type PlaceholderIcon = ({ size, color }: PlaceholderIconArgs) => ReactElement;
-
-export interface PlaceholderProps {
-  title: string;
-  subtitle: string;
-  iconSize?: number;
-  icon?: PlaceholderIcon;
-  actions?: PlaceholderAction[];
-}
-
-export const Placeholder = ({
-  title,
-  subtitle,
-  icon,
-  iconSize = 200,
-  actions,
-}: PlaceholderProps) => {
-  return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      justifyContent="center"
-      alignItems="center"
-      textAlign="center"
-    >
-      {icon && icon({ size: iconSize, color: "primary" })}
-      <Typography variant="h4" role="heading" aria-level={1}>
-        {title}
-      </Typography>
-      <Typography variant="subtitle1" role="heading" aria-level={2} sx={{ mt: 2 }}>
-        {subtitle}
-      </Typography>
-      {actions && (
-        <Box sx={{ pt: 2 }}>
-          {actions.map(({ id, text, href, onClick }, index) => (
-            <Button
-              key={id}
-              role="button"
-              variant="contained"
-              href={href}
-              onClick={onClick}
-              sx={{ mr: index < actions.length - 1 ? 2 : 0 }}
-            >
-              {text}
-            </Button>
-          ))}
-        </Box>
-      )}
-    </Box>
-  );
-};

package/src/components/placeholders/placeholders.stories.mdx

@@ -1,14 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import LinkTo from '@storybook/addon-links/react';
-
-<Meta title="Components/Placeholders/Introduction" />
-
-# Placehoders
-
-<ul>
-  <li><LinkTo kind="Components/Placeholders/Placeholder">Placeholder</LinkTo></li>
-  <li><LinkTo kind="Components/Placeholders/SkeletonCard">SkeletonCard</LinkTo></li>
-  <li><LinkTo kind="Components/Placeholders/SkeletonGrid">SkeletonGrid</LinkTo></li>
-  <li><LinkTo kind="Components/Placeholders/ContentPlaceholder">ContentPlaceholder</LinkTo></li>
-  <li><LinkTo kind="Components/Placeholders/LoremIpsumPlaceholder">LoremIpsumPlaceholder</LinkTo></li>
-</ul>

package/src/components/placeholders/skeleton-card/index.ts

@@ -1 +0,0 @@
-export * from "./skeleton-card";

package/src/components/placeholders/skeleton-card/skeleton-card.stories.tsx

@@ -1,17 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { SkeletonCard } from "./skeleton-card";
-
-export default {
-  title: "Components/Placeholders/SkeletonCard",
-  component: SkeletonCard,
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof SkeletonCard>;
-type Story = StoryObj<typeof SkeletonCard>;
-
-export const Default: Story = {
-  args: {
-    width: 250,
-  },
-};

package/src/components/placeholders/skeleton-card/skeleton-card.tsx

@@ -1,17 +0,0 @@
-import { Box, Skeleton } from "@mui/material";
-import React from "react";
-
-export interface SkeletonCardProps {
-  width?: number | string;
-  animation?: "pulse" | "wave" | false;
-}
-
-export const SkeletonCard = ({ width = "100%", animation = false }: SkeletonCardProps) => {
-  return (
-    <Box width={width}>
-      <Skeleton animation={animation} variant="rectangular" height={118} />
-      <Skeleton animation={animation} variant="rectangular" height={16} sx={{ my: 1 }} />
-      <Skeleton animation={animation} variant="rectangular" width="80%" height={16} />
-    </Box>
-  );
-};

package/src/components/placeholders/skeleton-grid/index.ts

@@ -1 +0,0 @@
-export * from "./skeleton-grid";