@pautena/react-design-system 0.0.1

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/storybook.tsx

@@ -0,0 +1,56 @@
+/* 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 { BrowserRouter } from "react-router-dom";
+
+export function createTemplate<P>(
+  C: JSXElementConstructor<P>,
+): ComponentStory<JSXElementConstructor<P>> {
+  return (args) => <C {...args} />;
+}
+
+export const withBrowserRouter =
+  (basename = "iframe.html") =>
+  (Story) =>
+    (
+      <BrowserRouter basename={basename}>
+        <Story />
+      </BrowserRouter>
+    );
+
+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,72 @@
+import { AlertColor } from "@mui/material";
+import { ModelField } from "../generators";
+import { screen, waitForElementToBeRemoved } from "./testing-library";
+
+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 }}>
+      {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";

package/src/utils/theme.ts

@@ -0,0 +1,6 @@
+import { useTheme } from "@mui/material";
+
+export const useGetDefaultThemeColor = ({ lightWeight = 100, darkWeight = 900 } = {}) => {
+  const { palette } = useTheme();
+  return palette.mode === "light" ? palette.grey[lightWeight] : palette.grey[darkWeight];
+};

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "lib": ["ES2016"],
+    "module": "ESNext",
+    "declaration": true,
+    "declarationDir": "types",
+    "sourceMap": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "emitDeclarationOnly": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": ["jest"]
+  },
+  "include": ["./jest.setup.ts"],
+  "exclude": [
+    "dist",
+    "node_modules",
+    "src/**/*.test.tsx",
+    "src/**/*.stories.tsx",
+    "src/storybook.tsx"
+  ]
+}

package/tsconfig.rollup.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "module": "ESNext",
+    "declaration": true,
+    "declarationDir": "types",
+    "sourceMap": true,
+    "rootDir": "src",
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "emitDeclarationOnly": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "exclude": [
+    "dist",
+    "node_modules",
+    "src/tests",
+    "src/**/*.test.tsx",
+    "src/**/*.stories.tsx",
+    "src/storybook.tsx"
+  ]
+}