@pautena/react-design-system 0.1.2 → 0.2.0

package/src/layouts/header-layout/header-layout.tsx

@@ -0,0 +1,23 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { ContentElement, HeaderElement } from "../../components";
+import { LoadingArea } from "../../components/loading-area";
+import { TabProvider } from "../../providers";
+
+interface HeaderLayoutProps {
+  loading?: boolean;
+  children: [HeaderElement, ContentElement];
+}
+
+export const HeaderLayout = ({ loading, children }: HeaderLayoutProps) => {
+  const [headerElement, contentElement] = children;
+
+  return (
+    <TabProvider>
+      <Box display="flex" flexDirection="column" height={1}>
+        {headerElement}
+        {loading ? <LoadingArea /> : contentElement}
+      </Box>
+    </TabProvider>
+  );
+};

package/src/layouts/header-layout/index.ts

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

package/src/layouts/index.ts

@@ -0,0 +1,2 @@
+export * from "./app-bar-with-drawer-layout";
+export * from "./header-layout";

package/src/providers/index.ts

@@ -0,0 +1,2 @@
+export * from "./notification-center";
+export * from "./tab-provider";

package/src/providers/notification-center/index.ts

@@ -0,0 +1,2 @@
+export * from "./notification-center.provider";
+export * from "./notification-center.context";

package/src/providers/notification-center/notification-center.context.ts

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { AlertColor } from "@mui/material";
+import React from "react";
+
+export const NotificationCenterProviderUndefinedError = new Error(
+  "NotificationCenterContext.Provider is required and was undefined",
+);
+export type SnackbarContentType =
+  | React.ReactElement<any, any>
+  | ((key: string) => React.ReactElement<any, any>);
+
+export type SnackbarActionType = React.ReactNode | ((key: string) => React.ReactNode);
+
+export interface Notification {
+  severity: AlertColor;
+  title?: string;
+  message: string;
+}
+
+export interface NotificationCenterProps {
+  show(notification: Notification): void;
+  hide(): void;
+}
+
+export const NotificationCenterContext = React.createContext<NotificationCenterProps | undefined>(
+  undefined,
+);
+
+export const useNotificationCenter = () => {
+  const context = React.useContext(NotificationCenterContext);
+
+  if (context === undefined) {
+    throw NotificationCenterProviderUndefinedError;
+  }
+
+  return context;
+};

package/src/providers/notification-center/notification-center.provider.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { Snackbar, Alert, AlertTitle } from "@mui/material";
+import React, { PropsWithChildren } from "react";
+import { Notification, NotificationCenterContext } from "./notification-center.context";
+
+export type NotificationCenterProviderProps = PropsWithChildren<{
+  autoHideDuration?: number;
+}>;
+
+export const NotificationCenterProvider = ({
+  children,
+  autoHideDuration = 6000,
+}: NotificationCenterProviderProps) => {
+  const [notification, setNotification] = useState<Notification | undefined>(undefined);
+  const [open, setOpen] = useState(false);
+  const show = (notification: Notification) => {
+    setNotification(notification);
+    setOpen(true);
+  };
+
+  const hide = () => {
+    setOpen(false);
+  };
+
+  return (
+    <NotificationCenterContext.Provider
+      value={{
+        show,
+        hide,
+      }}
+    >
+      <Snackbar
+        open={open}
+        autoHideDuration={autoHideDuration}
+        onClose={hide}
+        anchorOrigin={{ vertical: "top", horizontal: "right" }}
+      >
+        <Alert
+          onClose={hide}
+          severity={notification?.severity}
+          aria-label={notification?.severity}
+          sx={{ width: "100%" }}
+        >
+          {notification?.title && <AlertTitle>{notification?.title}</AlertTitle>}
+          {notification?.message}
+        </Alert>
+      </Snackbar>
+      {children}
+    </NotificationCenterContext.Provider>
+  );
+};

package/src/providers/notification-center/notification-center.stories.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { NotificationCenterProvider } from "./notification-center.provider";
+import { useNotificationCenter } from "./notification-center.context";
+import { ContentPlaceholder } from "../../tests";
+import { Button, Box } from "@mui/material";
+
+const DummyError = {
+  title: "Internal Server error",
+  message: "Unable to save the item",
+};
+
+export default {
+  title: "Providers/NotificationCenter",
+  component: ContentPlaceholder,
+  decorators: [
+    (Story) => (
+      <NotificationCenterProvider>
+        <Story />
+      </NotificationCenterProvider>
+    ),
+  ],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof ContentPlaceholder>;
+
+export const Default = () => {
+  const { show, hide } = useNotificationCenter();
+
+  return (
+    <ContentPlaceholder size={3} p={2}>
+      <Box pb={2}>
+        <Button onClick={() => show({ ...DummyError, severity: "info" })} variant="contained">
+          Show info
+        </Button>
+        <Button onClick={() => show({ ...DummyError, severity: "success" })} variant="contained">
+          Show success
+        </Button>
+        <Button onClick={() => show({ ...DummyError, severity: "warning" })} variant="contained">
+          Show warning
+        </Button>
+        <Button onClick={() => show({ ...DummyError, severity: "error" })} variant="contained">
+          Show error
+        </Button>
+        <Button onClick={hide} variant="contained">
+          hide
+        </Button>
+      </Box>
+    </ContentPlaceholder>
+  );
+};

package/src/providers/notification-center/notification-center.test.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { AlertColor, Box, Button } from "@mui/material";
+import { render, screen, waitForElementToBeRemoved, expectAlert } from "../../tests";
+import { NotificationCenterProvider } from "./notification-center.provider";
+import {
+  NotificationCenterProviderUndefinedError,
+  useNotificationCenter,
+} from "./notification-center.context";
+
+describe("NotificationCenterProvider", () => {
+  const renderComponent = ({ autoHideDuration }: { autoHideDuration?: number } = {}) => {
+    const TestContent = () => {
+      const { show, hide } = useNotificationCenter();
+
+      const showNotification = (severity: AlertColor) => {
+        show({
+          title: "An alert!",
+          message: "Lorem ipsum sit amet",
+          severity,
+        });
+      };
+      return (
+        <>
+          <Button onClick={() => showNotification("success")}>success</Button>
+          <Button onClick={() => showNotification("info")}>info</Button>
+          <Button onClick={() => showNotification("warning")}>warning</Button>
+          <Button onClick={() => showNotification("error")}>error</Button>
+          <Button onClick={hide}>hide</Button>
+        </>
+      );
+    };
+
+    return render(
+      <NotificationCenterProvider autoHideDuration={autoHideDuration}>
+        <TestContent />
+      </NotificationCenterProvider>,
+    );
+  };
+
+  it("would render an alert with a title and message when a notification is requested", async () => {
+    renderComponent();
+
+    await userEvent.click(screen.getByRole("button", { name: /info/i }));
+
+    await expectAlert({
+      title: /an alert/i,
+      message: /lorem ipsum sit amet/i,
+      severity: "info",
+    });
+  });
+
+  it("would hide the notification if close is called", async () => {
+    renderComponent();
+
+    await userEvent.click(screen.getByRole("button", { name: /info/i }));
+    await userEvent.click(screen.getByRole("button", { name: /hide/i }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole("alert"));
+  });
+
+  it("would hide the notification if the user clicks the close button", async () => {
+    renderComponent();
+
+    await userEvent.click(screen.getByRole("button", { name: /info/i }));
+    await userEvent.click(screen.getByTestId("CloseIcon"));
+
+    await waitForElementToBeRemoved(() => screen.getByRole("alert"));
+  });
+
+  it("would hide the notification after a delay", async () => {
+    renderComponent({ autoHideDuration: 100 });
+
+    await userEvent.click(screen.getByRole("button", { name: /info/i }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole("alert"));
+  });
+
+  describe("notification severity", () => {
+    it.each([
+      ["success", /success/i],
+      ["info", /info/i],
+      ["warning", /warning/i],
+      ["error", /error/i],
+    ])(
+      "would render a notification with severity %s",
+      async (severity: string, buttonName: RegExp) => {
+        renderComponent();
+
+        await userEvent.click(screen.getByRole("button", { name: buttonName }));
+
+        expect(screen.getByRole("alert", { name: severity })).toBeInTheDocument();
+      },
+    );
+  });
+});
+
+describe("useNotificationCenter", () => {
+  it("would throw an error if the component is not wrapped by a NotificationCenterContext.Provider", () => {
+    const FailingComponent = () => {
+      useNotificationCenter();
+      return <Box>FailingComponent</Box>;
+    };
+
+    try {
+      render(<FailingComponent />);
+      fail();
+    } catch (err) {
+      expect(err).toStrictEqual(NotificationCenterProviderUndefinedError);
+    }
+  });
+});

package/src/providers/tab-provider/index.ts

@@ -0,0 +1,2 @@
+export * from "./tab-provider.context";
+export * from "./tab-provider.provider";

package/src/providers/tab-provider/tab-provider.context.ts

@@ -0,0 +1,8 @@
+import { createContext, Dispatch, SetStateAction, useContext } from "react";
+
+export const TabContext = createContext<[number, Dispatch<SetStateAction<number>>]>([
+  0,
+  () => null,
+]);
+export const TabContextProvider = TabContext.Provider;
+export const useTab = () => useContext(TabContext);

package/src/providers/tab-provider/tab-provider.provider.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { PropsWithChildren, useState } from "react";
+import { TabContextProvider } from "./tab-provider.context";
+
+type TabProviderProps = PropsWithChildren<{
+  initialValue?: number;
+}>;
+
+export const TabProvider = ({ children, initialValue = 0 }: TabProviderProps) => {
+  const tabState = useState(initialValue);
+
+  return <TabContextProvider value={tabState}>{children}</TabContextProvider>;
+};

package/src/storybook.tsx

@@ -0,0 +1,90 @@
+/* eslint-disable react/display-name */
+import React, { FunctionComponent } from "react";
+import { ComponentStory } from "@storybook/react";
+import { JSXElementConstructor } from "react";
+import { Box } from "@mui/material";
+import { MemoryRouter, Router, Navigator, Route, Routes } from "react-router-dom";
+import { NotificationCenterProvider } from "./providers";
+import { action } from "@storybook/addon-actions";
+
+export function createTemplate<P>(
+  C: JSXElementConstructor<P>,
+): ComponentStory<JSXElementConstructor<P>> {
+  return (args) => <C {...args} />;
+}
+
+const replaceAction = action("navigator/replace");
+const goAction = action("navigator/go");
+const pushAction = action("navigator/push");
+
+export const withActionRouter =
+  ({ location = "/", path = "/" }: { location?: string; path?: string } = {}) =>
+  (Story: FunctionComponent) => {
+    const navigator: Navigator = {
+      replace: (args) => replaceAction(args),
+      go: (args) => goAction(args),
+      push: (args) => pushAction(args),
+      createHref: () => "",
+    };
+
+    return (
+      <Router location={location} navigator={navigator}>
+        <Routes>
+          <Route path={path} element={<Story />} />
+        </Routes>
+      </Router>
+    );
+  };
+
+export const withMemoryRouter =
+  (initialEntries = ["/"]) =>
+  (Story: FunctionComponent) => {
+    return (
+      <MemoryRouter initialEntries={initialEntries}>
+        <Story />
+      </MemoryRouter>
+    );
+  };
+
+export const withNotificationCenter = (Story: FunctionComponent) => {
+  return (
+    <NotificationCenterProvider>
+      <Story />
+    </NotificationCenterProvider>
+  );
+};
+
+export const withFullHeight = (Story: FunctionComponent) => {
+  return (
+    <Box height="100vh">
+      <Story />
+    </Box>
+  );
+};
+
+export const withContainer =
+  ({ width, height, bordered }: { width?: number; height?: number; bordered?: boolean }) =>
+  (Story: FunctionComponent) => {
+    let sx = {};
+    if (bordered) {
+      sx = {
+        ...sx,
+        border: "solid 1px black",
+      };
+    }
+    return (
+      <Box width={width} height={height} sx={sx}>
+        <Story />
+      </Box>
+    );
+  };
+
+export const withPadding =
+  (padding = 2) =>
+  (Story: FunctionComponent) => {
+    return (
+      <Box padding={padding}>
+        <Story />
+      </Box>
+    );
+  };

package/src/tests/assertions.ts

@@ -0,0 +1,76 @@
+import { AlertColor } from "@mui/material";
+import { ModelField } from "../generators";
+import { screen, waitForElementToBeRemoved } from "./testing-library";
+
+export const expectContentPlaceholder = async () => {
+  expect(await screen.findByTestId(/content-placeholder-test/i)).toBeInTheDocument();
+};
+
+export const expectModelFieldInputExist = (fields: ModelField[]) => {
+  fields.forEach((field) => {
+    if (field.type === "group") {
+      expectModelFieldInputExist(field.value);
+    } else if (field.type === "number") {
+      expect(screen.getByRole("spinbutton", { name: field.name })).toBeInTheDocument();
+    } else {
+      expect(screen.getByRole("textbox", { name: field.name })).toBeInTheDocument();
+    }
+  });
+};
+
+export const expectModelFieldInputValue = (fields: ModelField[], initialValues: object) => {
+  fields.forEach((field) => {
+    const value = initialValues[field.id];
+    if (field.type === "group") {
+      expectModelFieldInputValue(field.value, value);
+    } else if (field.type === "number") {
+      expect(screen.getByDisplayValue(value.toString())).toBeInTheDocument();
+    } else {
+      expect(screen.getByDisplayValue(value.toString())).toBeInTheDocument();
+    }
+  });
+};
+
+export const expectModelFieldValue = (field: ModelField, instance: object) => {
+  const { id, type, name, description } = field;
+  const value = instance[id];
+
+  if (type === "group") {
+    expect(screen.getByRole("heading", { level: 1, name }));
+    expect(screen.getByRole("heading", { level: 2, name: description }));
+    field.value.forEach((groupValue) => expectModelFieldValue(groupValue, value));
+    return;
+  }
+
+  expect(screen.getByRole("label", { name: name })).toBeInTheDocument();
+  if (type === "boolean") {
+    expect(screen.getByTestId(value ? "CheckIcon" : "CloseIcon")).toBeInTheDocument();
+  } else {
+    expect(screen.getByLabelText(name)).toHaveTextContent(value);
+    //expect(screen.getByText(value)).toBeInTheDocument();
+  }
+};
+
+export const expectProgressIndicator = () => {
+  expect(screen.getByRole("progressbar")).toBeInTheDocument();
+};
+
+export const waitForProgressIndicatorToBeRemoved = async () => {
+  await waitForElementToBeRemoved(() => screen.getByRole("progressbar"));
+};
+
+export const expectAlert = async ({
+  title,
+  message,
+  severity,
+}: {
+  title?: RegExp | string;
+  message: RegExp | string;
+  severity: AlertColor;
+}) => {
+  const alertElement = await screen.findByRole("alert");
+  expect(alertElement).toBeInTheDocument();
+  expect(alertElement).toHaveAttribute("aria-label", severity);
+  title && expect(await screen.findByText(title)).toBeInTheDocument();
+  expect(await screen.findByText(message)).toBeInTheDocument();
+};

package/src/tests/components.tsx

@@ -0,0 +1,60 @@
+import React, { PropsWithChildren } from "react";
+import { Typography, Container, Skeleton, Grid, Box } from "@mui/material";
+import { loremIpsum } from "lorem-ipsum";
+import { newArrayWithSize } from "../utils";
+
+export const Placeholder = () => {
+  return (
+    <Typography variant="body1">
+      {loremIpsum({
+        count: 3,
+        units: "paragraph",
+      })}
+    </Typography>
+  );
+};
+
+interface SkeletonCardProps {
+  width?: number | string;
+  animation?: "pulse" | "wave" | false;
+}
+
+export const SkeletonCard = ({ width = "100%", animation = false }: SkeletonCardProps) => {
+  return (
+    <Box width={width}>
+      <Skeleton animation={animation} variant="rectangular" height={118} />
+      <Skeleton animation={animation} variant="rectangular" height={16} sx={{ my: 1 }} />
+      <Skeleton animation={animation} variant="rectangular" width="80%" height={16} />
+    </Box>
+  );
+};
+
+interface SkeletonGridProps {
+  size?: number;
+}
+
+export const SkeletonGrid = ({ size = 20 }: SkeletonGridProps) => {
+  return (
+    <Grid container spacing={2}>
+      {newArrayWithSize(size, 0).map((_, i) => (
+        <Grid item key={i} xs={4}>
+          <SkeletonCard width={1} />
+        </Grid>
+      ))}
+    </Grid>
+  );
+};
+
+type ContentPlaceholderProps = PropsWithChildren<{
+  size?: number;
+  p?: number;
+}>;
+
+export const ContentPlaceholder = ({ size = 20, children, p }: ContentPlaceholderProps) => {
+  return (
+    <Container component="main" sx={{ p }} data-testid="content-placeholder-test">
+      {children}
+      <SkeletonGrid size={size} />
+    </Container>
+  );
+};

package/src/tests/content-placeholder.stories.tsx

@@ -0,0 +1,16 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../storybook";
+import { ContentPlaceholder } from "./components";
+
+export default {
+  title: "Test/ContentPlaceholder",
+  component: ContentPlaceholder,
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof ContentPlaceholder>;
+
+const Template = createTemplate(ContentPlaceholder);
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/tests/index.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./testing-library";
+export * from "./assertions";

package/src/tests/skeleton-card.stories.tsx

@@ -0,0 +1,18 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../storybook";
+import { SkeletonCard } from "./components";
+
+export default {
+  title: "Test/SkeletonCard",
+  component: SkeletonCard,
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof SkeletonCard>;
+
+const Template = createTemplate(SkeletonCard);
+
+export const Default = Template.bind({});
+Default.args = {
+  width: 250,
+};

package/src/tests/testing-library.tsx

@@ -0,0 +1,65 @@
+import { render, RenderOptions } from "@testing-library/react";
+import { MemoryRouter, Router } from "react-router-dom";
+import { createMemoryHistory, MemoryHistory } from "history";
+import React from "react";
+import { ThemeProvider } from "@emotion/react";
+import { Theme, createTheme, PaletteMode } from "@mui/material";
+
+export type TestRouter = "router" | "memory";
+
+function createMockTheme(mode: PaletteMode) {
+  return createTheme({
+    palette: {
+      mode,
+    },
+  });
+}
+
+function createMockHistory(): MemoryHistory {
+  return createMemoryHistory();
+}
+
+const createWrapper =
+  (history: MemoryHistory, theme: Theme, router: TestRouter) =>
+  // eslint-disable-next-line react/display-name
+  ({ children }: { children: React.ReactElement }) => {
+    const isMemoryRouter = router === "memory";
+
+    const R = isMemoryRouter ? MemoryRouter : Router;
+    const routerArgs = isMemoryRouter
+      ? {}
+      : {
+          location: history.location,
+          navigator: history,
+        };
+    return (
+      <ThemeProvider theme={theme}>
+        <R {...routerArgs}>{children}</R>
+      </ThemeProvider>
+    );
+  };
+
+interface CustomRenderOptions {
+  renderOptions?: RenderOptions;
+  mode?: PaletteMode;
+  router?: TestRouter;
+}
+
+const customRender = (ui: React.ReactElement, options: CustomRenderOptions = {}) => {
+  const renderOptions = options.renderOptions || {};
+  const mode = options.mode || "light";
+  const router = options.router || "router";
+
+  const history = createMockHistory();
+  const theme = createMockTheme(mode);
+  const wrapper = createWrapper(history, theme, router);
+
+  const instance = render(ui, { wrapper, ...renderOptions });
+  return { ...instance, history };
+};
+
+// re-export everything
+export * from "@testing-library/react";
+
+// override render method
+export { customRender as render };

package/src/utils/arrays.test.ts

@@ -0,0 +1,9 @@
+import { newArrayWithSize } from "./arrays";
+
+describe("newArrayWithSize", () => {
+  it("would create a new array with size 3 filled with 5", () => {
+    const a = newArrayWithSize(3, 5);
+    expect(a).toHaveLength(3);
+    expect(a.every((x) => x === 5)).toBeTruthy();
+  });
+});

package/src/utils/arrays.ts

@@ -0,0 +1,7 @@
+export const newArrayWithSize = <T>(size: number, fillValue: T) => new Array(size).fill(fillValue);
+
+export const getRandomItem = <T>(items: T[]): { index: number; item: T } => {
+  const index = Math.floor(Math.random() * items.length);
+  const item = items[index];
+  return { index, item };
+};

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./arrays";
+export * from "./theme";