@pautena/react-design-system 0.0.1 → 0.1.2

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

@@ -1,167 +0,0 @@
-import React from "react";
-import { render, screen } from "../../tests";
-import userEvent from "@testing-library/user-event";
-import {
-  Header,
-  HeaderAction,
-  HeaderActionVariant,
-  HeaderBreadcrumb,
-  HeaderPreset,
-  HeaderTab,
-} from "./header";
-import { breadcrumbs, actions as actionsData, tabs } from "./header.dummy";
-
-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 onChangeTab = jest.fn();
-
-  const instance = render(
-    <Header
-      title={title}
-      subtitle={subtitle}
-      preset={preset}
-      breadcrumbs={breadcrumbs}
-      actions={actions}
-      actionsVariant={actionsVariant}
-      tabs={tabs}
-      selectedTab={selectedTab}
-      onChangeTab={onChangeTab}
-    />,
-  );
-
-  return { ...instance, onChangeTab };
-}
-
-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 call onChangeTab when a tab is clicked", async () => {
-      const { onChangeTab } = renderInstance({ tabs, selectedTab: 0 });
-
-      await userEvent.click(screen.getByRole("tab", { name: /tab 3/i }));
-
-      expect(onChangeTab).toHaveBeenCalledTimes(1);
-      expect(onChangeTab).toHaveBeenCalledWith(tabs[2], 2);
-    });
-
-    it("wouldn't call onChangeTab when the clicked tab is the selectedTab", async () => {
-      const { onChangeTab } = renderInstance({ tabs, selectedTab: 2 });
-
-      await userEvent.click(screen.getByRole("tab", { name: /tab 3/i }));
-
-      expect(onChangeTab).not.toHaveBeenCalled();
-    });
-  });
-});

package/src/components/header/header.tsx

@@ -1,185 +0,0 @@
-import React from "react";
-import {
-  Breadcrumbs,
-  Typography,
-  Container,
-  useTheme,
-  Box,
-  Tabs,
-  Tab,
-  Button,
-} from "@mui/material";
-import { Link } from "../link";
-import { PropTypes } from "@mui/material";
-import { useGetDefaultThemeColor } from "../../utils";
-
-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[];
-  /**
-   * Tab that has to be marked as selected
-   */
-  selectedTab?: number;
-  /**
-   * Callback executed when the user click a tab
-   */
-  onChangeTab?: (tab: HeaderTab, index: number) => void;
-};
-
-/**
- * Section used to explain give basic information about the page
- * and put the main actions
- */
-export const Header = ({
-  title,
-  subtitle,
-  preset = "default",
-  actionsVariant = "outlined",
-  breadcrumbs,
-  actions,
-  tabs,
-  selectedTab,
-  onChangeTab = () => null,
-}: HeaderProps) => {
-  const { palette } = useTheme();
-  const defaultColor = useGetDefaultThemeColor();
-
-  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) => onChangeTab(tabs[index], index)}
-          >
-            {tabs.map(({ id, label, disabled }) => (
-              <Tab key={id} label={label} disabled={disabled} />
-            ))}
-          </Tabs>
-        )}
-      </Container>
-    </Box>
-  );
-};

package/src/components/header/index.ts

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

package/src/components/index.ts

@@ -1,17 +0,0 @@
-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";

package/src/components/label/index.ts

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

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

@@ -1,49 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

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

package/src/components/link/link.tsx

@@ -1,17 +0,0 @@
-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

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

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

@@ -1,17 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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

package/src/components/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/placeholder/placeholder.stories.tsx

@@ -1,44 +0,0 @@
-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,
-};