@pautena/react-design-system 0.4.7 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -32,32 +32,33 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@emotion/utils": "^1.2.0",
-    "@mui/icons-material": "^5.11.9",
-    "@mui/lab": "^5.0.0-alpha.120",
-    "@mui/material": "^5.11.10",
-    "@mui/x-data-grid": "^5.17.24",
-    "@mui/x-date-pickers": "^5.0.19",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/lab": "^5.0.0-alpha.124",
+    "@mui/material": "^5.11.15",
+    "@mui/x-data-grid": "^6.0.4",
+    "@mui/x-date-pickers": "^6.0.4",
     "date-fns": "^2.29.3",
     "lorem-ipsum": "^2.0.8",
+    "markdown-to-jsx": "^7.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.8.1"
+    "react-router-dom": "^6.10.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@babel/preset-env": "^7.18.6",
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.0",
-    "@date-io/date-fns": "^2.15.0",
-    "@faker-js/faker": "^7.3.0",
-    "@mui/x-data-grid-generator": "^5.13.0",
+    "@babel/preset-typescript": "^7.21.4",
+    "@date-io/date-fns": "^2.16.0",
+    "@faker-js/faker": "^7.6.0",
+    "@mui/x-data-grid-generator": "^6.0.4",
     "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "8.3.3",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
     "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-links": "^6.5.16",
     "@storybook/builder-webpack4": "^6.5.16",
@@ -67,29 +68,29 @@
     "@storybook/testing-react": "^1.3.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.4.0",
+    "@types/jest": "^29.5.0",
     "@types/ramda": "^0.28.23",
-    "@types/react": "^18.0.28",
-    "@typescript-eslint/eslint-plugin": "^5.53.0",
-    "@typescript-eslint/parser": "^5.53.0",
-    "babel-jest": "^29.4.3",
+    "@types/react": "^18.0.31",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/parser": "^5.57.0",
+    "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-module-resolver": "^5.0.0",
-    "eslint": "^8.34.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint": "^8.37.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "gh-pages": "^5.0.0",
     "history": "^5.3.0",
     "husky": "^8.0.3",
-    "jest": "^29.4.3",
-    "jest-environment-jsdom": "^29.4.3",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.7",
     "ramda": "^0.28.0",
     "react-test-renderer": "^18.2.0",
-    "rollup": "^2.77.0",
-    "rollup-plugin-dts": "^4.2.2",
+    "rollup": "^2.79.1",
+    "rollup-plugin-dts": "^4.2.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
     "tslib": "^2.5.0",
@@ -102,14 +103,15 @@
     "@mui/icons-material": "^5.11.0",
     "@mui/lab": "^5.0.0",
     "@mui/material": "^5.11.0",
-    "@mui/x-data-grid": "^5.17.0",
-    "@mui/x-date-pickers": "^5.0.0",
+    "@mui/x-data-grid": "^6.0.0",
+    "@mui/x-date-pickers": "^6.0.0",
     "@types/react": "^17.0.0 || ^18.0.0",
     "date-fns": "^2.0.0",
     "lorem-ipsum": "^2.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "react-router-dom": "^6.0.0"
+    "react-router-dom": "^6.0.0",
+    "markdown-to-jsx": "^7.0.0"
   },
   "repository": {
     "type": "git",

package/src/components/alerts/alerts.stories.mdx

@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Components/Alerts/Introduction" />
+
+# Alerts
+
+<ul>
+  <li><LinkTo kind="Components/Alerts/ExpandableAlert">ExpandableAlert</LinkTo></li>
+</ul>

package/src/components/alerts/expandable-alert/expandable-alert.stories.tsx

@@ -0,0 +1,48 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { ExpandableAlert } from "./expandable-alert";
+import { withContainer } from "~/storybook";
+
+export default {
+  title: "Components/Alerts/ExpandableAlert",
+  component: ExpandableAlert,
+  decorators: [withContainer({ width: 500 })],
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof ExpandableAlert>;
+
+const Template: ComponentStory<typeof ExpandableAlert> = (args) => <ExpandableAlert {...args} />;
+
+export const Info = Template.bind({});
+Info.args = {
+  severity: "info",
+  title: "Lorem ipsum",
+  message: "Lorem ipsum dolor sit amet",
+  metadata: ["lorem: ipsum", "foo: bar", "header: this", "host: localhost"],
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  ...Info.args,
+  severity: "success",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  ...Info.args,
+  severity: "error",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  ...Info.args,
+  severity: "warning",
+};
+
+export const WihtoutMetadata = Template.bind({});
+WihtoutMetadata.args = {
+  severity: "info",
+  title: "Lorem ipsum",
+  message: "Lorem ipsum dolor sit amet",
+};

package/src/components/alerts/expandable-alert/expandable-alert.test.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { render, screen, waitFor } from "~/tests/testing-library";
+import { ExpandableAlert } from "./expandable-alert";
+import userEvent from "@testing-library/user-event";
+
+const message = "Lorem ipsum dolor sit amet";
+const metadata =
+  "Of recommend residence education be on difficult repulsive offending. Judge views had mirth table seems great him for her. Alone all happy asked begin fully stand own get. Excuse ye seeing result of we. See scale dried songs old may not. Promotion did disposing you household any instantly. Hills we do under times at first short an.";
+const arrayMetadata = ["lorem: ipsum", "foo: bar", "header: this", "host: localhost"];
+
+describe("ExpandableAlert", () => {
+  const renderComponent = ({
+    title,
+    metadata,
+  }: { title?: string; metadata?: string | string[] } = {}) => {
+    const onClose = jest.fn();
+    const copy = jest.fn();
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: copy,
+      },
+    });
+
+    render(
+      <ExpandableAlert
+        severity="info"
+        title={title}
+        message={message}
+        metadata={metadata}
+        onClose={onClose}
+      />,
+    );
+
+    return { onClose, copy };
+  };
+
+  it("should render a title if is set", () => {
+    const title = "This is the title";
+    renderComponent({ title });
+
+    expect(screen.getByText(title)).toBeVisible();
+  });
+
+  it("should render a message", () => {
+    renderComponent();
+
+    expect(screen.getByText(message)).toBeVisible();
+  });
+
+  it("should call onClose if the close button is clicked", async () => {
+    const { onClose } = renderComponent();
+
+    await userEvent.click(screen.getByTestId("CloseIcon"));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("should show a button to expand info if it has metadata", () => {
+    renderComponent({ metadata });
+
+    expect(screen.getByTestId("ExpandMoreIcon")).toBeVisible();
+  });
+
+  it("shouldn't show a button to expand info if it doesn't have metadata", () => {
+    renderComponent({ metadata: undefined });
+
+    expect(screen.queryByTestId("ExpandMoreIcon")).not.toBeInTheDocument();
+  });
+
+  it("should show the metadata if the expand button is clicked", async () => {
+    renderComponent({ metadata });
+
+    await userEvent.click(screen.getByTestId("ExpandMoreIcon"));
+
+    expect(screen.getByText(metadata)).toBeVisible();
+  });
+
+  it("should show the array metadata if the expand button is clicked", async () => {
+    renderComponent({ metadata: arrayMetadata });
+
+    await userEvent.click(screen.getByTestId("ExpandMoreIcon"));
+
+    expect(screen.getByText(arrayMetadata[0])).toBeVisible();
+    expect(screen.getByText(arrayMetadata[1])).toBeVisible();
+    expect(screen.getByText(arrayMetadata[2])).toBeVisible();
+  });
+
+  it("should render a button to hide info if the expand button is clicked", async () => {
+    renderComponent({ metadata: arrayMetadata });
+
+    await userEvent.click(screen.getByTestId("ExpandMoreIcon"));
+
+    expect(screen.getByTestId("ExpandLessIcon")).toBeVisible();
+  });
+
+  it("should hide the metadata if the hide button is clicked", async () => {
+    renderComponent({ metadata });
+
+    await userEvent.click(screen.getByTestId("ExpandMoreIcon"));
+    await userEvent.click(screen.getByTestId("ExpandLessIcon"));
+
+    await waitFor(() => expect(screen.getByText(metadata)).not.toBeVisible());
+  });
+
+  it("should copy the content if the copy button is clicked", async () => {
+    const { copy } = renderComponent({ metadata });
+
+    await userEvent.click(screen.getByTestId("ExpandMoreIcon"));
+    await userEvent.click(screen.getByRole("button", { name: /copy/i }));
+
+    expect(copy).toHaveBeenCalledTimes(1);
+    expect(copy).toHaveBeenCalledWith(metadata);
+  });
+});

package/src/components/alerts/expandable-alert/expandable-alert.tsx

@@ -0,0 +1,71 @@
+import {
+  Alert,
+  alertClasses,
+  AlertColor,
+  AlertTitle,
+  Box,
+  Collapse,
+  IconButton,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import CloseIcon from "@mui/icons-material/Close";
+import { useState } from "react";
+import React from "react";
+import { Board } from "~/components/data-display";
+
+export interface ExpandableAlertProps {
+  severity: AlertColor;
+  iconMapping?: Partial<Record<AlertColor, React.ReactNode>>;
+  title?: string;
+  message: string;
+  metadata?: string | string[];
+  onClose: () => void;
+}
+
+const alertSx = {
+  [`& .${alertClasses.message}`]: {
+    width: 1,
+  },
+};
+
+export const ExpandableAlert = ({
+  severity,
+  iconMapping,
+  title,
+  message,
+  metadata,
+  onClose,
+}: ExpandableAlertProps) => {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <Alert
+      severity={severity}
+      iconMapping={iconMapping}
+      onClose={onClose}
+      action={
+        <Box display="flex" flexDirection="column">
+          <IconButton color="inherit" onClick={onClose}>
+            <CloseIcon fontSize="small" />
+          </IconButton>
+          {metadata && (
+            <IconButton color="inherit" onClick={() => setExpanded((e) => !e)}>
+              {expanded ? <ExpandLessIcon fontSize="small" /> : <ExpandMoreIcon fontSize="small" />}
+            </IconButton>
+          )}
+        </Box>
+      }
+      sx={alertSx}
+    >
+      <Box sx={{ w: 1 }}>
+        {title && <AlertTitle>{title}</AlertTitle>}
+        {message}
+        {metadata && (
+          <Collapse in={expanded} sx={{ mt: 2 }}>
+            <Board content={metadata} />
+          </Collapse>
+        )}
+      </Box>
+    </Alert>
+  );
+};

package/src/components/alerts/expandable-alert/index.ts

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

package/src/components/alerts/index.ts

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

package/src/components/components.stories.mdx

@@ -16,4 +16,6 @@ import LinkTo from '@storybook/addon-links/react';
   <li><LinkTo kind="Components/Navigation/Introduction">Navigation</LinkTo></li>
   <li><LinkTo kind="Components/Placeholders/Introduction">Placeholders</LinkTo></li>
   <li><LinkTo kind="Components/Tables/Introduction">Tables</LinkTo></li>
+  <li><LinkTo kind="Components/Alerts/Introduction">Alerts</LinkTo></li>
+  <li><LinkTo kind="Components/Dialogs/Introduction">Dialogs</LinkTo></li>
 </ul>

package/src/components/data-display/board/board.stories.tsx

@@ -0,0 +1,54 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate, withContainer } from "../../../storybook";
+import { Board } from "./board";
+import demoMarkdownContent from "~/tests/mocks/markdown.mock.md";
+import { Typography } from "@mui/material";
+import React from "react";
+
+export default {
+  title: "Components/Data Display/Board",
+  component: Board,
+  decorators: [withContainer({ width: 500 })],
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof Board>;
+
+const Template = createTemplate(Board);
+
+export const Text = Template.bind({});
+Text.args = {
+  content:
+    "Of recommend residence education be on difficult repulsive offending. Judge views had mirth table seems great him for her. Alone all happy asked begin fully stand own get. Excuse ye seeing result of we. See scale dried songs old may not. Promotion did disposing you household any instantly. Hills we do under times at first short an.",
+};
+
+export const ArrayParagraph = Template.bind({});
+ArrayParagraph.args = {
+  content: [
+    "Of recommend residence education be on difficult repulsive offending. Judge views had mirth table seems great him for her. Alone all happy asked begin fully stand own get. Excuse ye seeing result of we. See scale dried songs old may not. Promotion did disposing you household any instantly. Hills we do under times at first short an.",
+    "His having within saw become ask passed misery giving. Recommend questions get too fulfilled. He fact in we case miss sake. Entrance be throwing he do blessing up. Hearts warmth in genius do garden advice mr it garret. Collected preserved are middleton dependent residence but him how. Handsome weddings yet mrs you has carriage packages. Preferred joy agreement put continual elsewhere delivered now. Mrs exercise felicity had men speaking met. Rich deal mrs part led pure will but.",
+    "Boy desirous families prepared gay reserved add ecstatic say. Replied joy age visitor nothing cottage. Mrs door paid led loud sure easy read. Hastily at perhaps as neither or ye fertile tedious visitor. Use fine bed none call busy dull when. Quiet ought match my right by table means. Principles up do in me favourable affronting. Twenty mother denied effect we to do on.",
+  ],
+  spacing: 1,
+};
+
+export const ArrayList = Template.bind({});
+ArrayList.args = {
+  content: ["lorem: ipsum", "foo: bar", "header: this", "host: localhost"],
+};
+
+export const Markdown = Template.bind({});
+Markdown.args = {
+  markdown: demoMarkdownContent,
+};
+
+export const Children = Template.bind({});
+Children.args = {
+  children: (
+    <>
+      <Typography variant="h2">First line</Typography>
+      <Typography variant="subtitle1">Second line</Typography>
+      <Typography variant="h6">Third line</Typography>
+    </>
+  ),
+};

package/src/components/data-display/board/board.test.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { render, screen, waitFor } from "~/tests/testing-library";
+import { Board } from "./board";
+import { mockMarkdownContent } from "~/tests/mocks/markdown.mock";
+import userEvent from "@testing-library/user-event";
+
+const content = "This is the content";
+
+const content1 = "This is the content 1";
+const content2 = "This is the content 2";
+const content3 = "This is the content 3";
+const arrayContent = [content1, content2, content3];
+
+describe("Board", () => {
+  const renderComponent = ({
+    markdown,
+    content,
+  }: {
+    markdown?: string;
+    content?: string | string[];
+  }) => {
+    const copy = jest.fn();
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: copy,
+      },
+    });
+    render(<Board markdown={markdown} content={content} timeoutCopyText={100} />);
+
+    return { copy };
+  };
+
+  it("should render a string content", () => {
+    renderComponent({ content });
+
+    expect(screen.getByText(content)).toBeVisible();
+  });
+
+  it("should render a array of string content", () => {
+    renderComponent({ content: arrayContent });
+
+    expect(screen.getByText(content1)).toBeVisible();
+    expect(screen.getByText(content2)).toBeVisible();
+    expect(screen.getByText(content3)).toBeVisible();
+  });
+
+  it("should render a markdown content", () => {
+    renderComponent({ markdown: mockMarkdownContent });
+
+    expect(
+      screen.getByRole("heading", { name: "Diu in illa Lavini atque de quoque", level: 5 }),
+    ).toBeVisible();
+  });
+
+  it("should copy the string content to the clipboard if the copy button is clicked", async () => {
+    const { copy } = renderComponent({ content });
+
+    await userEvent.click(screen.getByRole("button"));
+
+    expect(copy).toHaveBeenCalledTimes(1);
+    expect(copy).toHaveBeenCalledWith(content);
+  });
+
+  it("should copy the string array content to the clipboard if the copy button is clicked", async () => {
+    const expectedCopy = arrayContent.join("\n");
+    const { copy } = renderComponent({ content: arrayContent });
+
+    await userEvent.click(screen.getByRole("button"));
+
+    expect(copy).toHaveBeenCalledTimes(1);
+    expect(copy).toHaveBeenCalledWith(expectedCopy);
+  });
+
+  it("should copy the markdown content to the clipboard if the copy button is clicked", async () => {
+    const { copy } = renderComponent({ markdown: mockMarkdownContent });
+
+    await userEvent.click(screen.getByRole("button"));
+
+    expect(copy).toHaveBeenCalledTimes(1);
+    expect(copy).toHaveBeenCalledWith(mockMarkdownContent);
+  });
+
+  it("should change the copy button text when is clicked", async () => {
+    renderComponent({ content });
+
+    await userEvent.click(screen.getByRole("button"));
+
+    expect(screen.getByRole("button", { name: /copied/i })).toBeVisible();
+  });
+
+  it("should return to the original button text after a delay", async () => {
+    renderComponent({ content });
+
+    await userEvent.click(screen.getByRole("button"));
+
+    expect(screen.getByRole("button", { name: /copied/i })).toBeVisible();
+
+    await waitFor(() => expect(screen.getByRole("button", { name: /copy/i })).toBeVisible());
+  });
+});

package/src/components/data-display/board/board.tsx

@@ -0,0 +1,63 @@
+import { Box, Button, Paper, SxProps, Theme, Typography } from "@mui/material";
+import { blueGrey } from "@mui/material/colors";
+import React, { PropsWithChildren, ReactNode, useState } from "react";
+import { Markdown } from "../markdown";
+
+export type BoardProps = PropsWithChildren<{
+  markdown?: string;
+  content?: string | string[];
+  spacing?: 0 | 1 | 2 | 3 | 4 | 5;
+  timeoutCopyText?: number;
+  sx?: SxProps<Theme>;
+}>;
+
+export const Board = ({
+  markdown: markdownProps,
+  content: contentProp,
+  spacing = 0,
+  timeoutCopyText = 2000,
+  children,
+  sx,
+}: BoardProps) => {
+  const [copyText, setCopyText] = useState("Copy");
+  let copyContent: string;
+  let content: ReactNode;
+
+  if (markdownProps) {
+    copyContent = markdownProps || "";
+  } else if (Array.isArray(contentProp)) {
+    content = contentProp.map((line, i) => (
+      <Typography key={i} sx={{ pb: spacing }}>
+        {line}
+      </Typography>
+    ));
+    copyContent = contentProp.join("\n");
+  } else {
+    content = <Typography>{contentProp}</Typography>;
+    copyContent = contentProp || "";
+  }
+
+  const markdown = markdownProps && <Markdown content={markdownProps} />;
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(copyContent);
+    setCopyText("Copied!");
+
+    setTimeout(() => setCopyText("Copy"), timeoutCopyText);
+  };
+
+  return (
+    <Paper sx={{ p: 2, backgroundColor: blueGrey[800], color: "white", ...sx }}>
+      <Box display="flex" flexDirection="row">
+        <Box width={1}>{children || markdown || content}</Box>
+        <Box width={100} sx={{ ml: 1 }}>
+          {copyContent && (
+            <Button fullWidth color="inherit" size="small" variant="outlined" onClick={handleCopy}>
+              {copyText}
+            </Button>
+          )}
+        </Box>
+      </Box>
+    </Paper>
+  );
+};

package/src/components/data-display/board/index.ts

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

package/src/components/data-display/data-display.stories.mdx

@@ -9,4 +9,6 @@ import LinkTo from '@storybook/addon-links/react';
   <li><LinkTo kind="Components/Data Display/Bullet">Bullet</LinkTo></li>
   <li><LinkTo kind="Components/Data Display/Label">Label</LinkTo></li>
   <li><LinkTo kind="Components/Data Display/Header">Header</LinkTo></li>
+  <li><LinkTo kind="Components/Data Display/Board">Board</LinkTo></li>
+  <li><LinkTo kind="Components/Data Display/Markdown">Markdown</LinkTo></li>
 </ul>

package/src/components/data-display/index.ts

@@ -1,3 +1,5 @@
 export * from "./bullet";
 export * from "./label";
 export * from "./header";
+export * from "./board";
+export * from "./markdown";

package/src/components/data-display/markdown/index.ts

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

package/src/components/data-display/markdown/markdown.stories.tsx

@@ -0,0 +1,25 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Markdown } from "./markdown";
+import mockMarkdownContentFile from "~/tests/mocks/markdown.mock.md";
+import React from "react";
+import { mockMarkdownContent } from "~/tests/mocks/markdown.mock";
+
+export default {
+  title: "Components/Data Display/Markdown",
+  component: Markdown,
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof Markdown>;
+
+const Template: ComponentStory<typeof Markdown> = (args) => <Markdown {...args} />;
+
+export const File = Template.bind({});
+File.args = {
+  content: mockMarkdownContentFile,
+};
+
+export const StringVariable = Template.bind({});
+StringVariable.args = {
+  content: mockMarkdownContent,
+};