@pautena/react-design-system 0.12.0 → 0.12.2

package/src/components/containers/list-panel/list-panel.mocks.tsx

@@ -1,117 +0,0 @@
-import { Box } from "@mui/material";
-import { ListPanelItem } from "./list-panel";
-import { useListPanel } from "./list-panel.context";
-import React from "react";
-
-export const ListPanelDemoContent = () => {
-  const selectedId = useListPanel();
-
-  return (
-    <Box width={1} display="flex" justifyContent="center" alignItems="center" pt={2}>
-      Panel content. Selected id: {selectedId}
-    </Box>
-  );
-};
-
-export const mockItemsShort: ListPanelItem[] = [
-  {
-    id: "all",
-    text: "all",
-  },
-  {
-    id: "inbox",
-    text: "Inbox",
-    tooltip: "this is the inbox tooltip",
-  },
-  {
-    id: "sent",
-    text: "Sent",
-  },
-  {
-    id: "drafts",
-    text: "Drafts",
-  },
-];
-
-export const mockItemsLong: ListPanelItem[] = [
-  {
-    id: "item1",
-    text: "Item 1",
-  },
-  {
-    id: "item2",
-    text: "Item 2",
-  },
-  {
-    id: "item3",
-    text: "Item 3",
-  },
-  {
-    id: "item4",
-    text: "Item 4",
-  },
-  {
-    id: "item5",
-    text: "Item 5",
-  },
-  {
-    id: "item6",
-    text: "Item 6",
-  },
-  {
-    id: "item7",
-    text: "Item 7",
-  },
-  {
-    id: "item8",
-    text: "Item 8",
-  },
-  {
-    id: "item9",
-    text: "Item 9",
-  },
-  {
-    id: "item10",
-    text: "Item 10",
-  },
-  {
-    id: "item11",
-    text: "Item 11",
-  },
-  {
-    id: "item12",
-    text: "Item 12",
-  },
-  {
-    id: "item13",
-    text: "Item 13",
-  },
-  {
-    id: "item14",
-    text: "Item 14",
-  },
-  {
-    id: "item15",
-    text: "Item 15",
-  },
-  {
-    id: "item16",
-    text: "Item 16",
-  },
-  {
-    id: "item17",
-    text: "Item 17",
-  },
-  {
-    id: "item18",
-    text: "Item 18",
-  },
-  {
-    id: "item19",
-    text: "Item 19",
-  },
-  {
-    id: "item20",
-    text: "Item 20",
-  },
-];

package/src/components/containers/list-panel/list-panel.stories.tsx

@@ -1,38 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { withContainer } from "../../../storybook";
-import { ListPanel } from "./list-panel";
-import React from "react";
-import { Box } from "@mui/material";
-import { ListPanelPanel } from "./list-panel-panel";
-import { ListPanelDemoContent, mockItemsLong, mockItemsShort } from "./list-panel.mocks";
-
-export default {
-  title: "Components/Containers/ListPanel",
-  component: ListPanel,
-  decorators: [withContainer({ width: 800, height: 600 })],
-  render: (args) => (
-    <ListPanel {...args}>
-      <ListPanelDemoContent />
-      <ListPanelPanel ids={["drafts"]}>
-        <Box>Drafts panel</Box>
-      </ListPanelPanel>
-    </ListPanel>
-  ),
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof ListPanel>;
-type Story = StoryObj<typeof ListPanel>;
-
-export const Short: Story = {
-  args: {
-    items: mockItemsShort,
-  },
-};
-
-export const Long: Story = {
-  args: {
-    items: mockItemsLong,
-    defaultSelectedItem: "item3",
-  },
-};

package/src/components/containers/list-panel/list-panel.test.tsx

@@ -1,65 +0,0 @@
-import { fireEvent, render, screen } from "~/tests/testing-library";
-import { ListPanel, ListPanelItem } from "./list-panel";
-import { ListPanelDemoContent, mockItemsShort } from "./list-panel.mocks";
-import React from "react";
-import { ListPanelPanel } from "./list-panel-panel";
-import { Box } from "@mui/material";
-import { vi } from "vitest";
-
-describe("ListPanel", () => {
-  const renderComponent = ({
-    items,
-    defaultSelectedItem,
-  }: {
-    items: ListPanelItem[];
-    defaultSelectedItem?: string;
-  }) => {
-    const onSelectedItemChange = vi.fn();
-    render(
-      <ListPanel
-        items={items}
-        defaultSelectedItem={defaultSelectedItem}
-        onSelectedItemChange={onSelectedItemChange}
-      >
-        <ListPanelDemoContent />
-        <ListPanelPanel ids={["drafts"]}>
-          <Box>Drafts panel</Box>
-        </ListPanelPanel>
-      </ListPanel>,
-    );
-
-    return { onSelectedItemChange };
-  };
-
-  it("should render a list item for each item", () => {
-    renderComponent({ items: mockItemsShort });
-
-    mockItemsShort.forEach(({ text }) => {
-      expect(screen.getByRole("button", { name: text })).toBeVisible();
-    });
-  });
-
-  it("should mark as selected the default item", () => {
-    renderComponent({ items: mockItemsShort, defaultSelectedItem: "inbox" });
-
-    expect(screen.getByText(/selected id: inbox/i)).toBeVisible();
-  });
-
-  it("should change the selected item if one is clicked", () => {
-    const { onSelectedItemChange } = renderComponent({ items: mockItemsShort });
-
-    fireEvent.click(screen.getByRole("button", { name: /drafts/i }));
-
-    expect(screen.getByText(/selected id: drafts/i)).toBeVisible();
-    expect(onSelectedItemChange).toHaveBeenCalledTimes(1);
-    expect(onSelectedItemChange).toHaveBeenCalledWith("drafts");
-  });
-
-  it("should render the panel if the draft is selected", () => {
-    renderComponent({ items: mockItemsShort });
-
-    fireEvent.click(screen.getByRole("button", { name: /drafts/i }));
-
-    expect(screen.getByText(/drafts panel/i)).toBeVisible();
-  });
-});

package/src/components/containers/list-panel/list-panel.tsx

@@ -1,88 +0,0 @@
-import { Grid, List, ListItemButton, ListItemText, Paper, Tooltip, useTheme } from "@mui/material";
-import React, { PropsWithChildren, useState } from "react";
-import { useGetDefaultThemeColor } from "~/utils";
-import { ListPanelContextProvider } from "./list-panel.context";
-import { grey } from "@mui/material/colors";
-
-export interface ListPanelItem {
-  id: string;
-  text: string;
-  tooltip?: string;
-}
-
-export type ListPanelProps = PropsWithChildren<{
-  defaultSelectedItem?: string;
-  items: ListPanelItem[];
-  colBreakpoint?: number;
-  onSelectedItemChange?: (id: string) => void;
-}>;
-
-export const ListPanel = ({
-  items,
-  defaultSelectedItem,
-  colBreakpoint = 3,
-  children,
-  onSelectedItemChange = () => null,
-}: ListPanelProps) => {
-  const bgColor = useGetDefaultThemeColor();
-  const { palette, typography } = useTheme();
-  const [selectedItem, setSelectedItem] = useState(defaultSelectedItem);
-
-  const handleSelectItem = (id: string) => {
-    setSelectedItem(id);
-    onSelectedItemChange(id);
-  };
-
-  return (
-    <ListPanelContextProvider value={selectedItem}>
-      <Grid container bgcolor={bgColor} height={1}>
-        <Grid item xs={colBreakpoint} pl={1} height={1}>
-          <List sx={{ height: 1, overflowY: "auto" }}>
-            {items.map(({ id, text, tooltip }) => {
-              const selected = id === selectedItem;
-
-              const contentEl = (
-                <ListItemButton
-                  key={id}
-                  dense
-                  selected={selected}
-                  onClick={() => handleSelectItem(id)}
-                  aria-label={text}
-                  sx={{ backgroundColor: selected ? `${palette.grey[300]} !important` : undefined }}
-                >
-                  <ListItemText
-                    primary={text}
-                    primaryTypographyProps={{
-                      fontWeight: selected ? typography.fontWeightMedium : undefined,
-                      color: selected ? typography.body1.color : grey[600],
-                    }}
-                  />
-                </ListItemButton>
-              );
-
-              return tooltip ? (
-                <Tooltip key={id} title={tooltip} enterDelay={1500} placement="right">
-                  {contentEl}
-                </Tooltip>
-              ) : (
-                contentEl
-              );
-            })}
-          </List>
-        </Grid>
-        <Grid item xs={12 - colBreakpoint} pl={1} py={1} pr={1}>
-          <Paper
-            elevation={0}
-            sx={{
-              width: 1,
-              height: 1,
-              backgroundColor: palette.background.paper,
-            }}
-          >
-            {children}
-          </Paper>
-        </Grid>
-      </Grid>
-    </ListPanelContextProvider>
-  );
-};

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

@@ -1,58 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { withContainer } from "../../../storybook";
-import { Board } from "./board";
-import demoMarkdownContent from "~/tests/mocks/markdown.mock.md";
-import { Typography } from "@mui/material";
-import React from "react";
-
-export default {
-  title: "Components/Data Display/Board",
-  component: Board,
-  decorators: [withContainer({ width: 500 })],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Board>;
-type Story = StoryObj<typeof Board>;
-
-export const Text: Story = {
-  args: {
-    content:
-      "Of recommend residence education be on difficult repulsive offending. Judge views had mirth table seems great him for her. Alone all happy asked begin fully stand own get. Excuse ye seeing result of we. See scale dried songs old may not. Promotion did disposing you household any instantly. Hills we do under times at first short an.",
-  },
-};
-
-export const ArrayParagraph: Story = {
-  args: {
-    content: [
-      "Of recommend residence education be on difficult repulsive offending. Judge views had mirth table seems great him for her. Alone all happy asked begin fully stand own get. Excuse ye seeing result of we. See scale dried songs old may not. Promotion did disposing you household any instantly. Hills we do under times at first short an.",
-      "His having within saw become ask passed misery giving. Recommend questions get too fulfilled. He fact in we case miss sake. Entrance be throwing he do blessing up. Hearts warmth in genius do garden advice mr it garret. Collected preserved are middleton dependent residence but him how. Handsome weddings yet mrs you has carriage packages. Preferred joy agreement put continual elsewhere delivered now. Mrs exercise felicity had men speaking met. Rich deal mrs part led pure will but.",
-      "Boy desirous families prepared gay reserved add ecstatic say. Replied joy age visitor nothing cottage. Mrs door paid led loud sure easy read. Hastily at perhaps as neither or ye fertile tedious visitor. Use fine bed none call busy dull when. Quiet ought match my right by table means. Principles up do in me favourable affronting. Twenty mother denied effect we to do on.",
-    ],
-    spacing: 1,
-  },
-};
-
-export const ArrayList: Story = {
-  args: {
-    content: ["lorem: ipsum", "foo: bar", "header: this", "host: localhost"],
-  },
-};
-
-export const Markdown: Story = {
-  args: {
-    markdown: demoMarkdownContent,
-  },
-};
-
-export const Children: Story = {
-  args: {
-    children: (
-      <>
-        <Typography variant="h2">First line</Typography>
-        <Typography variant="subtitle1">Second line</Typography>
-        <Typography variant="h6">Third line</Typography>
-      </>
-    ),
-  },
-};

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

@@ -1,118 +0,0 @@
-import React from "react";
-import { render, screen } from "~/tests/testing-library";
-import { Board } from "./board";
-import { mockMarkdownContent } from "~/tests/mocks/markdown.mock";
-import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
-import { Typography } from "@mui/material";
-
-const content = "This is the content";
-
-const content1 = "This is the content 1";
-const content2 = "This is the content 2";
-const content3 = "This is the content 3";
-const arrayContent = [content1, content2, content3];
-
-const mockCopy = () => {
-  const copy = vi.fn();
-  Object.assign(navigator, {
-    clipboard: {
-      writeText: copy,
-    },
-  });
-  return { copy };
-};
-
-describe("Board", () => {
-  const renderComponent = ({
-    markdown,
-    content,
-  }: {
-    markdown?: string;
-    content?: string | string[];
-  }) => {
-    const { copy } = mockCopy();
-    render(<Board markdown={markdown} content={content} />);
-
-    return { copy };
-  };
-
-  it("should render a string content", () => {
-    renderComponent({ content });
-
-    expect(screen.getByText(content)).toBeVisible();
-  });
-
-  it("should render a array of string content", () => {
-    renderComponent({ content: arrayContent });
-
-    expect(screen.getByText(content1)).toBeVisible();
-    expect(screen.getByText(content2)).toBeVisible();
-    expect(screen.getByText(content3)).toBeVisible();
-  });
-
-  it.skip("should render a markdown content", () => {
-    renderComponent({ markdown: mockMarkdownContent });
-
-    expect(
-      screen.getByRole("heading", { name: "Diu in illa Lavini atque de quoque", level: 5 }),
-    ).toBeVisible();
-  });
-
-  describe("copy", () => {
-    it("should copy the string content to the clipboard if the copy button is clicked", async () => {
-      const { copy } = renderComponent({ content });
-
-      await userEvent.click(screen.getByRole("button"));
-
-      expect(copy).toHaveBeenCalledTimes(1);
-      expect(copy).toHaveBeenCalledWith(content);
-    });
-
-    it("should copy the string array content to the clipboard if the copy button is clicked", async () => {
-      const expectedCopy = arrayContent.join("\n");
-      const { copy } = renderComponent({ content: arrayContent });
-
-      await userEvent.click(screen.getByRole("button"));
-
-      expect(copy).toHaveBeenCalledTimes(1);
-      expect(copy).toHaveBeenCalledWith(expectedCopy);
-    });
-
-    it.skip("should copy the markdown content to the clipboard if the copy button is clicked", async () => {
-      const { copy } = renderComponent({ markdown: mockMarkdownContent });
-
-      await userEvent.click(screen.getByRole("button"));
-
-      expect(copy).toHaveBeenCalledTimes(1);
-      expect(copy).toHaveBeenCalledWith(mockMarkdownContent);
-    });
-
-    it("should render the children and copy the string content if it has a custom children", async () => {
-      const content = "lorem: ipsum";
-      const { copy } = mockCopy();
-      render(
-        <Board content={content}>
-          <Typography variant="h6">row 1</Typography>
-          <Typography variant="caption"> row 2</Typography>
-          <Typography variant="body2" sx={{ textDecoration: "line-through" }}>
-            row 3
-          </Typography>
-          <Typography variant="body2" fontWeight={700}>
-            row 4
-          </Typography>
-        </Board>,
-      );
-
-      expect(screen.getByText(/row 1/i)).toBeVisible();
-      expect(screen.getByText(/row 2/i)).toBeVisible();
-      expect(screen.getByText(/row 3/i)).toBeVisible();
-      expect(screen.getByText(/row 4/i)).toBeVisible();
-
-      await userEvent.click(screen.getByRole("button"));
-
-      expect(copy).toHaveBeenCalledTimes(1);
-      expect(copy).toHaveBeenCalledWith(content);
-    });
-  });
-});

package/src/components/data-display/board/board.tsx

@@ -1,80 +0,0 @@
-import {
-  Box,
-  IconButton,
-  Paper,
-  SxProps,
-  Theme,
-  Tooltip,
-  Typography,
-  useTheme,
-} from "@mui/material";
-import { blueGrey } from "@mui/material/colors";
-import React, { PropsWithChildren, ReactNode } from "react";
-import { Markdown } from "../markdown";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-
-export type BoardProps = PropsWithChildren<{
-  markdown?: string;
-  content?: string | string[];
-  spacing?: 0 | 1 | 2 | 3 | 4 | 5;
-  sx?: SxProps<Theme>;
-}>;
-
-export const Board = ({
-  markdown: markdownProps,
-  content: contentProp,
-  spacing = 0,
-  children,
-  sx,
-}: BoardProps) => {
-  const { spacing: themeSpacing, typography } = useTheme();
-  let copyContent: string;
-  let content: ReactNode;
-
-  if (markdownProps) {
-    copyContent = markdownProps || "";
-  } else if (Array.isArray(contentProp)) {
-    content = contentProp.map((line, i) => (
-      <Typography key={i} sx={{ pb: spacing }}>
-        {line}
-      </Typography>
-    ));
-    copyContent = contentProp.join("\n");
-  } else {
-    content = <Typography>{contentProp}</Typography>;
-    copyContent = contentProp || "";
-  }
-
-  const markdown = markdownProps && <Markdown content={markdownProps} />;
-
-  return (
-    <Paper
-      sx={{
-        position: "relative",
-        pl: 2,
-        pr: 4,
-        py: 1,
-        backgroundColor: blueGrey[800],
-        color: "white",
-        ...sx,
-      }}
-    >
-      <Box display="flex" flexDirection="row">
-        <Box width={1}>{children || markdown || content}</Box>
-        <Box sx={{ position: "absolute", top: themeSpacing(0.5), right: themeSpacing(0.5) }}>
-          {copyContent && (
-            <IconButton
-              aria-label="copy board content"
-              color="inherit"
-              onClick={() => navigator.clipboard.writeText(copyContent)}
-            >
-              <Tooltip title="Copy">
-                <ContentCopyIcon sx={{ fontSize: typography.pxToRem(18) }} />
-              </Tooltip>
-            </IconButton>
-          )}
-        </Box>
-      </Box>
-    </Paper>
-  );
-};

package/src/components/data-display/board/index.ts

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

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

@@ -1,47 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Bullet } from "./bullet";
-
-export default {
-  title: "Components/Data Display/Bullet",
-  component: Bullet,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Bullet>;
-type Story = StoryObj<typeof Bullet>;
-
-export const Primary: Story = {
-  args: {
-    variant: "primary",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: "secondary",
-  },
-};
-
-export const Default: Story = {
-  args: {
-    variant: "default",
-  },
-};
-
-export const Info: Story = {
-  args: {
-    variant: "info",
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    variant: "warning",
-  },
-};
-
-export const Error: Story = {
-  args: {
-    variant: "error",
-  },
-};

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

@@ -1,24 +0,0 @@
-import React from "react";
-import { Bullet, BulletVariant } from "./bullet";
-import { render, screen } from "~/tests/testing-library";
-
-describe("Bullet", () => {
-  const renderComponent = (variant: BulletVariant | undefined = undefined) => {
-    return render(<Bullet variant={variant} />);
-  };
-
-  it("renders as primary without a variant", () => {
-    renderComponent(undefined);
-
-    expect(screen.getByRole("bullet")).toHaveAttribute("aria-describedby", "primary");
-  });
-
-  it.each([["primary"], ["secondary"], ["default"], ["info"], ["warning"], ["error"]])(
-    "renders correctly with variant %s",
-    (variant: string) => {
-      renderComponent(variant as BulletVariant);
-
-      expect(screen.getByRole("bullet")).toHaveAttribute("aria-describedby", variant);
-    },
-  );
-});

package/src/components/data-display/bullet/bullet.tsx

@@ -1,35 +0,0 @@
-import { Badge, SxProps, Theme } from "@mui/material";
-import React from "react";
-
-export type BulletVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
-
-export const bulletClasses = {
-  root: "RdsBullet-root",
-};
-
-export interface BulletProps {
-  /**
-   * Color palette used to draw the component
-   */
-  variant?: BulletVariant;
-  /**
-   * Custom styles
-   */
-  sx?: SxProps<Theme>;
-}
-
-/**
- * Dot to attract the user attention
- */
-export const Bullet = ({ variant = "primary", sx }: BulletProps) => {
-  return (
-    <Badge
-      color={variant}
-      variant="dot"
-      className={bulletClasses.root}
-      role="bullet"
-      aria-describedby={variant}
-      sx={sx}
-    />
-  );
-};

package/src/components/data-display/bullet/index.ts

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

package/src/components/data-display/data-display.stories.mdx

@@ -1,15 +0,0 @@
-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>
-  <li><LinkTo kind="Components/Data Display/Board">Board</LinkTo></li>
-  <li><LinkTo kind="Components/Data Display/Markdown">Markdown</LinkTo></li>
-  <li><LinkTo kind="Components/Data Display/LinkCard">LinkCard</LinkTo></li>
-</ul>