@pautena/react-design-system 0.1.2 → 0.2.0

package/src/components/header/header.test.tsx

@@ -0,0 +1,159 @@
+import React from "react";
+import { render, screen } from "../../tests";
+import userEvent from "@testing-library/user-event";
+import { Header } from "./header";
+import {
+  HeaderAction,
+  HeaderActionVariant,
+  HeaderBreadcrumb,
+  HeaderPreset,
+  HeaderTab,
+} from "./header.types";
+import { breadcrumbs, actions as actionsData, tabs } from "./header.dummy";
+import { TabProvider } from "../../providers";
+
+const actions = actionsData.map((a) => ({ ...a, onClick: a.onClick && jest.fn() }));
+
+function renderInstance({
+  title = "Lorem ipsum",
+  subtitle,
+  preset = "default",
+  breadcrumbs,
+  actions,
+  actionsVariant,
+  tabs,
+  selectedTab,
+}: {
+  title?: string;
+  subtitle?: string | undefined;
+  preset?: HeaderPreset;
+  breadcrumbs?: HeaderBreadcrumb[];
+  actions?: HeaderAction[];
+  actionsVariant?: HeaderActionVariant;
+  tabs?: HeaderTab[];
+  selectedTab?: number;
+}) {
+  const instance = render(
+    <TabProvider initialValue={selectedTab}>
+      <Header
+        title={title}
+        subtitle={subtitle}
+        preset={preset}
+        breadcrumbs={breadcrumbs}
+        actions={actions}
+        actionsVariant={actionsVariant}
+        tabs={tabs}
+      />
+    </TabProvider>,
+  );
+
+  return { ...instance };
+}
+
+describe("Header", () => {
+  it("renders the title", () => {
+    renderInstance({ title: "Lorem ipsum" });
+
+    expect(screen.getByRole("heading", { level: 1, name: /lorem ipsum/i })).toBeInTheDocument();
+  });
+
+  describe("subtitle", () => {
+    it("would renders when is set", () => {
+      renderInstance({ subtitle: "sit amet" });
+
+      expect(screen.queryByRole("heading", { level: 2, name: /sit amet/i })).toBeInTheDocument();
+    });
+
+    it("wouldn't render if it is not set", () => {
+      renderInstance({ subtitle: undefined });
+
+      expect(screen.queryByRole("heading", { level: 2 })).not.toBeInTheDocument();
+    });
+  });
+
+  describe("breadcrumbs", () => {
+    it("would 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("would 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("would 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("wouldn't be possible to click a disabled action", async () => {
+      renderInstance({ actions });
+
+      expect(screen.getByRole("button", { name: /disabled/i })).toBeDisabled();
+    });
+
+    it("would 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("would 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("would 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("wouldn't be possible to click a disabled tab", () => {
+      renderInstance({ tabs, selectedTab: 2 });
+
+      expect(screen.getByRole("tab", { name: /tab 2/i })).toBeDisabled();
+    });
+
+    it("would change the selected tab when a tab is clicked", async () => {
+      renderInstance({ tabs, selectedTab: 0 });
+
+      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();
+    });
+  });
+});

package/src/components/header/header.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import {
+  Breadcrumbs,
+  Typography,
+  Container,
+  useTheme,
+  Box,
+  Tabs,
+  Tab,
+  Button,
+} from "@mui/material";
+import { Link } from "../link";
+import { useGetDefaultThemeColor } from "../../utils";
+import { HeaderComponent, HeaderPreset, HeaderProps } from "./header.types";
+import { useTab } from "~/providers";
+
+/**
+ * Section used to explain give basic information about the page
+ * and put the main actions
+ */
+export const Header: HeaderComponent = ({
+  title,
+  subtitle,
+  preset = "default",
+  actionsVariant = "outlined",
+  breadcrumbs,
+  actions,
+  tabs,
+}: HeaderProps) => {
+  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];
+
+  return (
+    <Box bgcolor={bgColor} color={textColor}>
+      <Container>
+        <Box sx={{ py: 3, display: "flex", flexDirection: "row", justifyContent: "space-between" }}>
+          <Box>
+            {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>
+            )}
+            <Typography variant="h4" role="heading" aria-level={1}>
+              {title}
+            </Typography>
+            {subtitle && (
+              <Typography variant="body1" role="heading" aria-level={2}>
+                {subtitle}
+              </Typography>
+            )}
+          </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={selectedTab}
+            textColor="inherit"
+            onChange={(_, index) => setSelectedTab(index)}
+          >
+            {tabs.map(({ id, label, disabled }) => (
+              <Tab key={id} label={label} disabled={disabled} />
+            ))}
+          </Tabs>
+        )}
+      </Container>
+    </Box>
+  );
+};

package/src/components/header/header.types.ts

@@ -0,0 +1,61 @@
+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;
+}
+
+export type HeaderProps = {
+  /**
+   * Title of the header
+   */
+  title: string;
+  /**
+   * Subtitle of the header
+   */
+  subtitle?: string;
+  /**
+   * 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[];
+};
+
+export type HeaderComponent = FunctionComponent<HeaderProps>;
+export type HeaderElement = ReactElement<HeaderProps, HeaderComponent>;

package/src/components/header/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,18 @@
+export * from "./header";
+export * from "./link";
+export * from "./query-container";
+export * from "./sign-in";
+export * from "./tab";
+export * from "./table";
+export * from "./app-bar";
+export * from "./drawer";
+export * from "./table-list";
+export * from "./placeholder";
+export * from "./label";
+export * from "./bullet";
+export * from "./drawer-content";
+export * from "./drawer-section";
+export * from "./drawer-item";
+export * from "./center-container";
+export * from "./value-displays";
+export * from "./content";

package/src/components/label/index.ts

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

package/src/components/label/label.stories.tsx

@@ -0,0 +1,49 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { Label } from "./label";
+
+export default {
+  title: "Data Display/Label",
+  component: Label,
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof Label>;
+
+const Template = createTemplate(Label);
+
+export const Default = Template.bind({});
+Default.args = {
+  text: "lorem",
+  variant: "default",
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  text: "lorem",
+  variant: "primary",
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  text: "lorem",
+  variant: "secondary",
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  text: "lorem",
+  variant: "info",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  text: "lorem",
+  variant: "warning",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  text: "lorem",
+  variant: "error",
+};

package/src/components/label/label.test.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Label, LabelVariant } from "./label";
+import { render, screen } from "../../tests";
+
+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")).toHaveAttribute("aria-describedby", "default");
+  });
+
+  it.each([["primary"], ["secondary"], ["default"], ["info"], ["warning"], ["error"]])(
+    "renders correctly with variant %s",
+    (variant: string) => {
+      renderComponent(variant as LabelVariant);
+
+      expect(screen.getByRole("label")).toHaveAttribute("aria-describedby", variant);
+    },
+  );
+});

package/src/components/label/label.tsx

@@ -0,0 +1,60 @@
+import { Box, Typography, useTheme } from "@mui/material";
+import React from "react";
+
+export type LabelVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
+
+export const labelClasses = {
+  root: "RdsLabel-root",
+};
+
+export interface LabelProps {
+  /**
+   * Content of the component
+   */
+  text: string;
+  /**
+   * Color palette used to draw the component
+   */
+  variant?: LabelVariant;
+}
+
+/**
+ * Compact element to represent a text
+ */
+export const Label = ({ text, variant = "default" }: LabelProps) => {
+  const { palette } = useTheme();
+
+  const backgroundColor: Record<LabelVariant, string> = {
+    default: palette.mode === "light" ? palette.grey[100] : palette.grey[900],
+    primary: palette.primary.main,
+    secondary: palette.secondary.main,
+    info: palette.info.main,
+    warning: palette.warning.main,
+    error: palette.error.main,
+  };
+
+  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,
+  };
+
+  return (
+    <Box
+      px={1}
+      sx={{ backgroundColor: backgroundColor[variant] }}
+      borderRadius={1}
+      color={textColor[variant]}
+      className={labelClasses.root}
+      role="label"
+      aria-describedby={variant}
+    >
+      <Typography variant="caption" fontWeight={700}>
+        {text.toUpperCase()}
+      </Typography>
+    </Box>
+  );
+};

package/src/components/link/index.ts

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

package/src/components/link/link.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Link as RouterLink, LinkProps as RouterLinkProps } from "react-router-dom";
+import { forwardRef } from "react";
+import { LinkProps, Link as MuiLink } from "@mui/material";
+
+// eslint-disable-next-line react/display-name, @typescript-eslint/no-explicit-any
+export const LinkBehaviour = forwardRef<
+  any,
+  Omit<RouterLinkProps, "to"> & { href: RouterLinkProps["to"] }
+>((props, ref) => {
+  const { href, ...other } = props;
+  return <RouterLink ref={ref} to={href} {...other} />;
+});
+
+export const Link = forwardRef<any, LinkProps>((props, _) => {
+  return <MuiLink {...props} component={LinkBehaviour} />;
+});

package/src/components/loading-area/index.ts

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

package/src/components/loading-area/loading-area.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate, withContainer } from "../../storybook";
+import { LoadingArea } from "./loading-area";
+
+export default {
+  title: "Components/LoadingArea",
+  component: LoadingArea,
+  decorators: [withContainer({ height: 300 })],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof LoadingArea>;
+
+const Template = createTemplate(LoadingArea);
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/loading-area/loading-area.test.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { render, expectProgressIndicator } from "../../tests";
+import { LoadingArea } from "./loading-area";
+
+describe("LoadingArea", () => {
+  it("would render a loading icon", () => {
+    render(<LoadingArea />);
+
+    expectProgressIndicator();
+  });
+});

package/src/components/loading-area/loading-area.tsx

@@ -0,0 +1,13 @@
+import { CircularProgress, Box } from "@mui/material";
+import React from "react";
+
+/**
+ * Displays a centered loading indicator
+ */
+export const LoadingArea = () => {
+  return (
+    <Box width={1} height={1} display="flex" justifyContent="center" alignItems="center">
+      <CircularProgress />
+    </Box>
+  );
+};

package/src/components/placeholder/index.ts

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

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

@@ -0,0 +1,15 @@
+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/placeholder/placeholder.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { Placeholder, PlaceholderIconArgs } from "./placeholder";
+import SearchIcon from "@mui/icons-material/Search";
+import { actions } from "./placeholder.mock";
+
+export default {
+  title: "Components/Placeholder",
+  component: Placeholder,
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof Placeholder>;
+
+const Template = createTemplate(Placeholder);
+
+export const Default = Template.bind({});
+Default.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 = Template.bind({});
+WithIcon.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 = Template.bind({});
+WithActions.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,
+};