@pautena/react-design-system 0.12.0 → 0.12.1

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

@@ -1,144 +0,0 @@
-import React from "react";
-import {
-  Breadcrumbs,
-  Typography,
-  Container,
-  useTheme,
-  Box,
-  Tabs,
-  Tab,
-  Button,
-} from "@mui/material";
-import { Link } from "../../navigation/link";
-import { useGetDefaultThemeColor } from "../../../utils";
-import { HeaderComponent, HeaderPreset, HeaderProps } from "./header.types";
-import { useTab } from "~/providers";
-import { useLocation } from "react-router-dom";
-import { HeaderSubtitle, HeaderTitle } from "./header-title";
-
-/**
- * Section used to explain give basic information about the page
- * and put the main actions
- */
-export const Header: HeaderComponent = ({
-  title = "",
-  loadingTitle,
-  subtitle,
-  loadingSubtitle,
-  preset = "default",
-  actionsVariant = "outlined",
-  breadcrumbs,
-  actions,
-  tabs,
-  tabsMode = "panel",
-  navigationButton,
-}: HeaderProps) => {
-  const location = useLocation();
-  const { palette } = useTheme();
-  const defaultColor = useGetDefaultThemeColor();
-  const [selectedTab, setSelectedTab] = useTab();
-
-  const bgColorPresets: Record<HeaderPreset, string> = {
-    default: defaultColor,
-    primary: palette.primary.main,
-    secondary: palette.secondary.main,
-    inherit: "inherit",
-    transparent: "transparent",
-  };
-  const bgColor = bgColorPresets[preset];
-  const textColorPresets: Record<HeaderPreset, string> = {
-    default: palette.getContrastText(bgColorPresets.default),
-    primary: palette.primary.contrastText,
-    secondary: palette.secondary.contrastText,
-    inherit: "inherit",
-    transparent: palette.text.primary,
-  };
-  const textColor = textColorPresets[preset];
-
-  const modedSelectedTab =
-    tabsMode === "panel" ? selectedTab : tabs?.findIndex((tab) => tab.href === location.pathname);
-
-  return (
-    <Box bgcolor={bgColor} color={textColor}>
-      <Container>
-        <Box sx={{ py: 3, display: "flex", flexDirection: "row", justifyContent: "space-between" }}>
-          <Box>
-            {navigationButton && (
-              <Button
-                href={navigationButton.href}
-                size="small"
-                color="inherit"
-                LinkComponent={Link}
-                startIcon={navigationButton.icon}
-                sx={{ mb: 1 }}
-              >
-                {navigationButton.text}
-              </Button>
-            )}
-            {breadcrumbs?.length && (
-              <Breadcrumbs
-                color="inherit"
-                separator="›"
-                aria-label="breadcrumb"
-                sx={{ marginTop: 1 }}
-              >
-                {breadcrumbs.map(({ id, link, text }) => (
-                  <Link
-                    key={id}
-                    underline="hover"
-                    color="inherit"
-                    href={link}
-                    variant="body2"
-                    role="link"
-                  >
-                    {text}
-                  </Link>
-                ))}
-              </Breadcrumbs>
-            )}
-            <HeaderTitle loading={loadingTitle}>{title}</HeaderTitle>
-            {(subtitle || loadingSubtitle) && (
-              <HeaderSubtitle loading={loadingSubtitle}>{subtitle}</HeaderSubtitle>
-            )}
-          </Box>
-          {actions && (
-            <Box>
-              {actions.map(({ disabled, id, href, onClick, text }, i) => (
-                <Button
-                  component={href ? Link : "button"}
-                  role="button"
-                  color="inherit"
-                  disabled={disabled}
-                  key={id}
-                  variant={actionsVariant}
-                  size="small"
-                  href={href}
-                  onClick={onClick}
-                  sx={{ mr: i != actions.length - 1 ? 1 : 0 }}
-                >
-                  {text}
-                </Button>
-              ))}
-            </Box>
-          )}
-        </Box>
-        {tabs && (
-          <Tabs
-            value={modedSelectedTab}
-            textColor="inherit"
-            onChange={tabsMode === "panel" ? (_, index) => setSelectedTab(index) : undefined}
-          >
-            {tabs.map(({ id, label, disabled, href }) => {
-              const tabProps = { label, disabled };
-              if (tabsMode === "panel") {
-                return <Tab key={id} {...tabProps} />;
-              } else {
-                return <Tab key={id} {...tabProps} component={Link} href={href} />;
-              }
-            })}
-          </Tabs>
-        )}
-      </Container>
-    </Box>
-  );
-};

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

@@ -1,96 +0,0 @@
-import { PropTypes } from "@mui/material";
-import { FunctionComponent, ReactElement } from "react";
-
-export type HeaderPreset = PropTypes.Color | "transparent";
-export type HeaderActionVariant = "text" | "outlined" | "contained";
-
-export type HeaderAction = {
-  id: string;
-  text: string;
-  disabled?: boolean;
-  href?: string;
-  onClick?: () => void;
-};
-
-export interface HeaderBreadcrumb {
-  id: string;
-  text: string;
-  link: string;
-}
-
-export interface HeaderTab {
-  id: string;
-  label: string;
-  disabled?: boolean;
-  href?: string;
-}
-
-export interface HeaderNavigationButton {
-  /**
-   * Button text
-   */
-  text: string;
-  /**
-   * Url where the user has to be redirected
-   */
-  href: string;
-  /**
-   * Icon to be shown before the button
-   */
-  icon?: ReactElement;
-}
-
-export type HeaderProps = {
-  /**
-   * Title of the header
-   */
-  title?: string | ReactElement;
-  /**
-   * Show a loading indicator in the title position
-   */
-  loadingTitle?: boolean;
-  /**
-   * Subtitle of the header
-   */
-  subtitle?: string | ReactElement;
-  /**
-   * Show a loading indicator in the subtitle position
-   */
-  loadingSubtitle?: boolean;
-  /**
-   * Color palete used to render the component
-   */
-  preset?: HeaderPreset;
-  /**
-   * List of breadcumbs to represent the path to reach
-   * the page that we are
-   */
-  breadcrumbs?: HeaderBreadcrumb[];
-  /**
-   * List of actions that can be performed by the user.
-   * Each action will be a button in the header.
-   */
-  actions?: HeaderAction[];
-  /**
-   * Variant used to render the actions
-   */
-  actionsVariant?: HeaderActionVariant;
-  /**
-   * If is set, a list of tabs is dispayed at the bottom
-   */
-  tabs?: HeaderTab[];
-  /**
-   * The tabs will work using
-   * - a panel container (panel)
-   * - using a the navigation system (navigation).
-   */
-  tabsMode?: "panel" | "navigation";
-  /**
-   * A single button that helps the user to navigate to
-   * a screen related to the current screen
-   */
-  navigationButton?: HeaderNavigationButton;
-};
-
-export type HeaderComponent = FunctionComponent<HeaderProps>;
-export type HeaderElement = ReactElement<HeaderProps, HeaderComponent>;

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

@@ -1,3 +0,0 @@
-export * from "./header";
-export * from "./header.types";
-export * from "./header-title";

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

@@ -1,5 +0,0 @@
-export * from "./bullet";
-export * from "./label";
-export * from "./header";
-export * from "./board";
-export * from "./markdown";

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

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

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

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

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

@@ -1,30 +0,0 @@
-import React from "react";
-import { Label, LabelVariant } from "./label";
-import { render, screen } from "~/tests/testing-library";
-
-describe("Label", () => {
-  const renderComponent = (variant: LabelVariant | undefined = undefined) => {
-    return render(<Label variant={variant} text="lorem ipsum" />);
-  };
-
-  it("renders the label text", () => {
-    renderComponent();
-
-    expect(screen.getByText("lorem ipsum")).toBeInTheDocument();
-  });
-
-  it("renders as default without a variant", () => {
-    renderComponent(undefined);
-
-    expect(screen.getByRole("label", { name: /default/i })).toBeVisible();
-  });
-
-  it.each([["primary"], ["secondary"], ["default"], ["info"], ["warning"], ["error"]])(
-    "renders correctly with variant %s",
-    (variant: string) => {
-      renderComponent(variant as LabelVariant);
-
-      expect(screen.getByRole("label", { name: `lorem ipsum ${variant} label` })).toBeVisible();
-    },
-  );
-});

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

@@ -1,93 +0,0 @@
-import { Box, SxProps, Theme, useTheme } from "@mui/material";
-import React from "react";
-
-export type LabelVariant =
-  | "primary"
-  | "secondary"
-  | "default"
-  | "info"
-  | "warning"
-  | "error"
-  | "success";
-
-export const labelClasses = {
-  root: "RdsLabel-root",
-};
-
-export interface LabelProps {
-  /**
-   * Content of the component
-   */
-  text: string;
-  /**
-   * Color palette used to draw the component
-   */
-  variant?: LabelVariant;
-
-  /**
-   * Custom styles
-   */
-  sx?: SxProps<Theme>;
-
-  /**
-   * Show the text as uppercase
-   */
-  textTransform?: "none" | "capitalize" | "uppercase";
-}
-
-/**
- * Compact element to represent a text
- */
-export const Label = ({
-  text,
-  variant = "default",
-  textTransform = "capitalize",
-  sx,
-}: LabelProps) => {
-  const { palette, typography } = useTheme();
-
-  const backgroundColor: Record<LabelVariant, string> = {
-    default: palette.mode === "light" ? palette.grey[100] : palette.grey[900],
-    primary: palette.primary.light,
-    secondary: palette.secondary.light,
-    info: palette.info.light,
-    warning: palette.warning.light,
-    error: palette.error.light,
-    success: palette.success.light,
-  };
-
-  const textColor: Record<LabelVariant, string> = {
-    default: palette.getContrastText(backgroundColor.default),
-    primary: palette.primary.contrastText,
-    secondary: palette.secondary.contrastText,
-    info: palette.info.contrastText,
-    warning: palette.warning.contrastText,
-    error: palette.error.contrastText,
-    success: palette.success.contrastText,
-  };
-
-  return (
-    <Box
-      height={24}
-      minWidth={22}
-      display="inline-flex"
-      justifyContent="center"
-      alignItems="center"
-      bgcolor={backgroundColor[variant]}
-      color={textColor[variant]}
-      fontSize={typography.caption.fontSize}
-      fontWeight={typography.fontWeightBold}
-      lineHeight={0}
-      textTransform={textTransform}
-      whiteSpace="nowrap"
-      borderRadius={2}
-      role="label"
-      aria-label={`${text} ${variant} label`}
-      py={0}
-      px={1}
-      sx={{ cursor: "default", ...sx }}
-    >
-      {text}
-    </Box>
-  );
-};

package/src/components/data-display/link-card/link-card.stories.tsx

@@ -1,59 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { withContainer, withMemoryRouter } from "../../../storybook";
-import { LinkCard } from "./link-card";
-
-export default {
-  title: "Components/Data Display/LinkCard",
-  component: LinkCard,
-  decorators: [withContainer({ width: 400 }), withMemoryRouter()],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof LinkCard>;
-type Story = StoryObj<typeof LinkCard>;
-
-export const Primary: Story = {
-  args: {
-    title: "Lorem ipsum",
-    message:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-    linkText: "Learn more",
-    variant: "primary",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    ...Primary.args,
-    variant: "secondary",
-  },
-};
-
-export const Info: Story = {
-  args: {
-    ...Primary.args,
-    variant: "info",
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    ...Primary.args,
-    variant: "warning",
-  },
-};
-
-export const Error: Story = {
-  args: {
-    ...Primary.args,
-    variant: "error",
-  },
-};
-
-export const WithoutLinkButton: Story = {
-  args: {
-    title: "Lorem ipsum",
-    message:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-  },
-};

package/src/components/data-display/link-card/link-card.test.tsx

@@ -1,43 +0,0 @@
-import { render, screen } from "~/tests/testing-library";
-import { LinkCard } from "./link-card";
-import userEvent from "@testing-library/user-event";
-import React from "react";
-
-describe("LinkCard", () => {
-  const renderComponent = ({ linkText }: { linkText?: string } = {}) => {
-    return render(
-      <LinkCard
-        title="Lorem ipsum"
-        message="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-        href="/test"
-        linkText={linkText}
-      />,
-    );
-  };
-
-  it("should render a title", () => {
-    renderComponent();
-
-    expect(screen.getByRole("heading", { level: 6, name: /lorem ipsum/i })).toBeVisible();
-  });
-
-  it("should render a message", () => {
-    renderComponent();
-
-    expect(screen.getByText(/lorem ipsum dolor sit amet/i)).toBeVisible();
-  });
-
-  it("should render a extra text if linkText is defined", () => {
-    renderComponent({ linkText: "check more" });
-
-    expect(screen.getByText(/check more/i)).toBeVisible();
-  });
-
-  it("should navigate to the href if the card is clicked", async () => {
-    const { history } = renderComponent();
-
-    await userEvent.click(screen.getByText(/Lorem ipsum dolor sit amet/i));
-
-    expect(history.location.pathname).toBe("/test");
-  });
-});

package/src/components/data-display/link-card/link-card.tsx

@@ -1,52 +0,0 @@
-import { Paper, SxProps, Theme, Typography, useTheme } from "@mui/material";
-import { grey } from "@mui/material/colors";
-import React from "react";
-import { Link } from "~/components/navigation/link";
-
-export type LinkCardVariant = "primary" | "secondary" | "info" | "warning" | "error";
-export interface LinkCardProps {
-  variant?: LinkCardVariant;
-  href: string;
-  title: string;
-  message: string;
-  linkText?: string;
-  sx?: SxProps<Theme>;
-}
-
-export const LinkCard = ({
-  variant = "primary",
-  title,
-  message,
-  href,
-  linkText,
-  sx,
-}: LinkCardProps) => {
-  const { palette } = useTheme();
-
-  const rootSx: SxProps<Theme> = {
-    p: 3,
-    display: "flex",
-    flexDirection: "column",
-    textDecoration: "none",
-    backgroundColor: palette.mode === "light" ? grey[50] : grey[900],
-    borderColor: grey[400],
-    ":hover": {
-      borderColor: palette[variant].main,
-      backgroundColor: palette.mode === "light" ? palette.common.white : grey[800],
-    },
-  };
-
-  return (
-    <Paper component={Link} href={href} variant="outlined" sx={{ ...rootSx, ...sx }}>
-      <Typography variant="h6">{title}</Typography>
-      <Typography variant="caption" sx={{ mt: 2 }}>
-        {message}
-      </Typography>
-      {linkText && (
-        <Typography color={variant} variant="button" sx={{ mt: 2 }}>
-          {linkText}
-        </Typography>
-      )}
-    </Paper>
-  );
-};

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

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

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

@@ -1,25 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Markdown } from "./markdown";
-import mockMarkdownContentFile from "~/tests/mocks/markdown.mock.md";
-import { mockMarkdownContent } from "~/tests/mocks/markdown.mock";
-
-export default {
-  title: "Components/Data Display/Markdown",
-  component: Markdown,
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Markdown>;
-type Story = StoryObj<typeof Markdown>;
-
-export const File: Story = {
-  args: {
-    content: mockMarkdownContentFile,
-  },
-};
-
-export const StringVariable: Story = {
-  args: {
-    content: mockMarkdownContent,
-  },
-};

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

@@ -1,64 +0,0 @@
-import { Markdown } from "./markdown";
-import { render, screen } from "~/tests/testing-library";
-import React from "react";
-import { mockMarkdownContent } from "~/tests/mocks/markdown.mock";
-
-describe.skip("Markdown", () => {
-  const renderComponent = () => {
-    render(<Markdown content={mockMarkdownContent} />);
-  };
-
-  it.each(["Diu in illa Lavini atque de quoque"])(
-    "should render the title '%s'",
-    (title: string) => {
-      renderComponent();
-
-      expect(screen.getByRole("heading", { name: title, level: 5 })).toBeVisible();
-    },
-  );
-
-  it.each([
-    ["Secretaque nepos mentitis cupidine ponti dextramque nata"],
-    ["Mota dixit"],
-    ["Link section"],
-    ["List section"],
-  ])("should render the subtitle '%s'", (subtitle: string) => {
-    renderComponent();
-
-    expect(
-      screen.getByRole("heading", {
-        name: subtitle,
-        level: 6,
-      }),
-    ).toBeVisible();
-  });
-
-  it.each([
-    "funesta opposuitque deus adloquitur reminiscitur manibus ales? Spumisque fulva, veneni, vicit dum? Ipse responsa equo!",
-    "Deos debebat, in tenuit postquam candida errorem vires undis limina ignis pectora capere dant, in curvo",
-    "Dum tot tum nunc, atque deae telum rustica tuebere tacti dat. Nunc quasi Tritonidos fluminis. Ulli regnat clamant luminis moenia; hoc numen accipe, indefletaeque artesque fores ales in concumbere. Boves humi regimen, vulnus ore adspicias, sit mutua nega, illud; quam fruges meritis.",
-  ])("should render the content '%s'", (content: string) => {
-    renderComponent();
-
-    expect(screen.getByText(content)).toBeVisible();
-  });
-
-  it.each([["toto link"]])("should render the link '%s'", (link: string) => {
-    renderComponent();
-
-    expect(screen.getByRole("link", { name: link })).toBeVisible();
-  });
-
-  it.each([
-    ["Cum bella cantato"],
-    ["Sinistra maternos tamen Gorgonis sim aquis"],
-    ["Quo orat dabitur Dianae ira timendi templi"],
-    ["Cum oro Lycabas ultima"],
-    ["Haut ad dedit reducit crimina adhaeret pectore"],
-    ["Vulnere latebramque minima"],
-  ])("should render the list item '%s'", (listItem: string) => {
-    renderComponent();
-
-    expect(screen.getByText(listItem)).toBeVisible();
-  });
-});