@pautena/react-design-system 0.1.2 → 0.1.3

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,
+};

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

@@ -0,0 +1,76 @@
+import React, { ReactElement } from "react";
+import { render, screen } from "../../tests";
+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";
+
+const actions = actionData.map((a) => ({ ...a, onClick: jest.fn() }));
+
+describe("Placeholder", () => {
+  const renderComponent = ({
+    actions = undefined,
+    icon = undefined,
+  }: { actions?: PlaceholderAction[]; icon?: ReactElement } = {}) => {
+    return render(
+      <Placeholder
+        title="Lorem ipsum"
+        subtitle="Lorem ipsum sit amet"
+        actions={actions}
+        icon={() => icon}
+      />,
+    );
+  };
+
+  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/placeholder/placeholder.tsx

@@ -0,0 +1,75 @@
+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 interface PlaceholderProps {
+  title: string;
+  subtitle: string;
+  iconSize?: number;
+  icon?: ({ size, color }: PlaceholderIconArgs) => ReactElement;
+  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/query-container/index.ts

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