@pautena/react-design-system 0.12.0 → 0.12.2

package/.eslintrc.cjs

@@ -0,0 +1,40 @@
+module.exports = {
+  root: true,
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["react", "@typescript-eslint"],
+  rules: {
+    "prettier/prettier": "error",
+    "react/display-name": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        varsIgnorePattern: "^_",
+        argsIgnorePattern: "^_",
+      },
+    ],
+  },
+};

package/.prettierrc.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  printWidth: 100,
+  semi: true,
+  trailingComma: "all",
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

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

@@ -1,96 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React, { useState } from "react";
-import { ExpandableAlert } from "./expandable-alert";
-import { withContainer } from "~/storybook";
-import { Box, Button, Snackbar, Typography } from "@mui/material";
-
-export default {
-  title: "Components/Alerts/ExpandableAlert",
-  component: ExpandableAlert,
-  decorators: [withContainer({ width: 500 })],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof ExpandableAlert>;
-type Story = StoryObj<typeof ExpandableAlert>;
-
-export const Info: Story = {
-  args: {
-    severity: "info",
-    title: "Lorem ipsum",
-    message: "Lorem ipsum dolor sit amet",
-    metadata: ["lorem: ipsum", "foo: bar", "header: this", "host: localhost"],
-  },
-};
-
-export const Success: Story = {
-  args: {
-    ...Info.args,
-    severity: "success",
-  },
-};
-
-export const Error: Story = {
-  args: {
-    ...Info.args,
-    severity: "error",
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    ...Info.args,
-    severity: "warning",
-  },
-};
-
-export const WihtoutMetadata: Story = {
-  args: {
-    severity: "info",
-    title: "Lorem ipsum",
-    message: "Lorem ipsum dolor sit amet",
-  },
-};
-
-export const MetadataCustomComponent = () => (
-  <ExpandableAlert
-    severity="info"
-    onClose={() => null}
-    title="Lorem ipsum"
-    message="Lorem ipsum dolor sit amet"
-    metadata={["lorem: ipsum", "foo: bar", "header: this", "host: localhost"]}
-    metadataComponent={
-      <>
-        <Typography variant="h6">lorem: ipsum</Typography>
-        <Typography variant="caption">foo: bar</Typography>
-        <Typography variant="body2" sx={{ textDecoration: "line-through" }}>
-          header: this
-        </Typography>
-        <Typography variant="body2" fontWeight={700}>
-          host: localhost
-        </Typography>
-      </>
-    }
-  />
-);
-
-export const SnackbarAlert = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Box>
-      <Button variant="contained" onClick={() => setOpen(true)}>
-        Snackbar
-      </Button>
-      <Snackbar open={open}>
-        <ExpandableAlert
-          severity="info"
-          onClose={() => setOpen(false)}
-          title="Lorem ipsum"
-          message="Lorem ipsum dolor sit amet"
-          metadata={["lorem: ipsum", "foo: bar", "header: this", "host: localhost"]}
-        />
-      </Snackbar>
-    </Box>
-  );
-};

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

@@ -1,137 +0,0 @@
-import React, { useState } from "react";
-import { render, screen, waitFor } from "~/tests/testing-library";
-import { ExpandableAlert } from "./expandable-alert";
-import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
-import { Box, Button, Snackbar } from "@mui/material";
-
-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 = vi.fn();
-    const copy = vi.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);
-  });
-
-  it("should work inside a snackbar", async () => {
-    const SnackbarAlert = () => {
-      const [open, setOpen] = useState(false);
-
-      return (
-        <Box>
-          <Button onClick={() => setOpen(true)}>snackbar</Button>
-          <Snackbar open={open}>
-            <ExpandableAlert severity="info" message="lorem ipsum" onClose={() => setOpen(false)} />
-          </Snackbar>
-        </Box>
-      );
-    };
-
-    render(<SnackbarAlert />);
-
-    await userEvent.click(screen.getByRole("button", { name: /snackbar/i }));
-
-    expect(screen.getByText(/lorem ipsum/i)).toBeVisible();
-  });
-});

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

@@ -1,78 +0,0 @@
-import {
-  Alert,
-  alertClasses,
-  AlertColor,
-  AlertTitle,
-  Box,
-  Collapse,
-  IconButton,
-  SxProps,
-  Theme,
-} 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 { forwardRef, ReactElement, 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[];
-  metadataComponent?: ReactElement;
-  onClose: () => void;
-  sx?: SxProps<Theme>;
-}
-
-const alertSx = {
-  [`& .${alertClasses.message}`]: {
-    width: 1,
-  },
-};
-
-export const ExpandableAlert = forwardRef<any, ExpandableAlertProps>(
-  (
-    { severity, iconMapping, title, message, metadata, metadataComponent, onClose, sx = {} },
-    ref,
-  ) => {
-    const [expanded, setExpanded] = useState(false);
-    return (
-      <Alert
-        ref={ref}
-        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, ...sx }}
-      >
-        <Box sx={{ w: 1 }}>
-          {title && <AlertTitle>{title}</AlertTitle>}
-          {message}
-          {metadata && (
-            <Collapse in={expanded} sx={{ mt: 2 }}>
-              <Board content={metadata}>{metadataComponent}</Board>
-            </Collapse>
-          )}
-        </Box>
-      </Alert>
-    );
-  },
-);

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

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

package/src/components/alerts/index.ts

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

package/src/components/components.stories.mdx

@@ -1,20 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import LinkTo from '@storybook/addon-links/react';
-
-<Meta title="Components/Introduction" />
-
-# Components
-
-<ul>
-  <li><LinkTo kind="Components/Value displays/Introduction">Value displays</LinkTo></li>
-  <li><LinkTo kind="Components/Feedback/Introduction">Feedback</LinkTo></li>
-  <li><LinkTo kind="Components/Data Display/Introduction">Data Display</LinkTo></li>
-  <li><LinkTo kind="Components/Containers/Introduction">Containers</LinkTo></li>
-  <li><LinkTo kind="Components/Drawers/Introduction">Drawers</LinkTo></li>
-  <li><LinkTo kind="Components/Inputs/Introduction">Inputs</LinkTo></li>
-  <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/containers/center-container/center-container.stories.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import { CenterContainer } from "./center-container";
-import { Label } from "../../data-display/label";
-import { withContainer } from "../../../storybook";
-
-export default {
-  title: "Components/Containers/CenterContainer",
-  component: CenterContainer,
-  decorators: [withContainer({ height: 500, bordered: true })],
-  parameters: {
-    layout: "fullscreen",
-  },
-  render: (args) => (
-    <CenterContainer {...args}>
-      <Label text="Lorem ipsum" />
-    </CenterContainer>
-  ),
-} satisfies Meta<typeof CenterContainer>;
-type Story = StoryObj<typeof CenterContainer>;
-
-export const Default: Story = {
-  args: {
-    centerVertical: true,
-    centerHorizontal: true,
-  },
-};
-
-export const VerticalCentered: Story = {
-  args: {
-    centerVertical: true,
-    centerHorizontal: false,
-  },
-};
-
-export const HorizontallyCentered: Story = {
-  args: {
-    centerVertical: false,
-    centerHorizontal: true,
-  },
-};
-
-export const CustomStyles: Story = {
-  args: {
-    centerVertical: false,
-    centerHorizontal: false,
-    sx: {
-      px: 3,
-      py: 2,
-    },
-  },
-};

package/src/components/containers/center-container/center-container.test.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { Typography } from "@mui/material";
-import { render, screen } from "~/tests/testing-library";
-import { CenterContainer } from "./center-container";
-
-describe("CenterContainer", () => {
-  it("would render the children", () => {
-    render(
-      <CenterContainer>
-        <Typography>Content</Typography>
-      </CenterContainer>,
-    );
-
-    expect(screen.getByText(/content/i)).toBeInTheDocument();
-  });
-});

package/src/components/containers/center-container/center-container.tsx

@@ -1,32 +0,0 @@
-import React, { ReactNode } from "react";
-import { Box, SxProps, Theme } from "@mui/material";
-
-export interface CenterContainerProps {
-  children: ReactNode | undefined;
-  centerVertical?: boolean;
-  centerHorizontal?: boolean;
-  sx?: SxProps<Theme>;
-}
-
-export function CenterContainer({
-  children,
-  centerVertical = true,
-  centerHorizontal = true,
-  sx,
-}: CenterContainerProps) {
-  return (
-    <Box
-      width={1}
-      height={1}
-      sx={{
-        ...sx,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: centerVertical ? "center" : "flex-start",
-        alignItems: centerHorizontal ? "center" : "flex-start",
-      }}
-    >
-      {children}
-    </Box>
-  );
-}

package/src/components/containers/center-container/index.ts

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

package/src/components/containers/containers.stories.mdx

@@ -1,12 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import LinkTo from '@storybook/addon-links/react';
-
-<Meta title="Components/Containers/Introduction" />
-
-# Containers
-
-<ul>
-  <li><LinkTo kind="Components/Containers/CenterContainer">CenterContainer</LinkTo></li>
-  <li><LinkTo kind="Components/Containers/Content">Content</LinkTo></li>
-  <li><LinkTo kind="Components/Containers/ListPanel">ListPanel</LinkTo></li>
-</ul>

package/src/components/containers/content/content.stories.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import { Content } from "./content";
-import { SkeletonGrid } from "~/components/placeholders";
-
-export default {
-  title: "Components/Containers/Content",
-  component: Content,
-  parameters: {
-    layout: "fullscreen",
-  },
-  render: () => (
-    <Content>
-      <SkeletonGrid />
-    </Content>
-  ),
-} satisfies Meta<typeof Content>;
-type Story = StoryObj<typeof Content>;
-
-export const Default: Story = {};

package/src/components/containers/content/content.test.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { Content } from "./content";
-import { render, screen } from "~/tests/testing-library";
-import { Typography } from "@mui/material";
-
-describe("Content", () => {
-  const renderComponent = () => {
-    return render(
-      <Content>
-        <Typography>Children content</Typography>
-      </Content>,
-    );
-  };
-
-  it("would render a children", () => {
-    renderComponent();
-
-    expect(screen.getByText(/children content/i)).toBeInTheDocument();
-  });
-
-  it("would render a main element", () => {
-    renderComponent();
-
-    expect(screen.getByRole("main")).toBeInTheDocument();
-  });
-});

package/src/components/containers/content/content.tsx

@@ -1,11 +0,0 @@
-import React from "react";
-import { Container } from "@mui/material";
-import { ContentProps } from "./content.types";
-
-export const Content = ({ children }: ContentProps) => {
-  return (
-    <Container component="main" sx={{ py: 3, flexGrow: 1 }}>
-      {children}
-    </Container>
-  );
-};

package/src/components/containers/content/content.types.ts

@@ -1,5 +0,0 @@
-import { PropsWithChildren, FunctionComponent, ReactElement } from "react";
-
-export type ContentProps = PropsWithChildren;
-export type ContentComponent = FunctionComponent<ContentProps>;
-export type ContentElement = ReactElement<ContentElement, ContentComponent>;

package/src/components/containers/content/index.ts

@@ -1,2 +0,0 @@
-export * from "./content";
-export * from "./content.types";

package/src/components/containers/index.ts

@@ -1,3 +0,0 @@
-export * from "./content";
-export * from "./center-container";
-export * from "./list-panel";

package/src/components/containers/list-panel/index.ts

@@ -1,2 +0,0 @@
-export * from "./list-panel";
-export * from "./list-panel.context";

package/src/components/containers/list-panel/list-panel-panel.tsx

@@ -1,17 +0,0 @@
-import { PropsWithChildren } from "react";
-import { useListPanel } from "./list-panel.context";
-import React from "react";
-
-export type ListPanelPanelProps = PropsWithChildren<{
-  ids: string[];
-}>;
-
-export const ListPanelPanel = ({ ids, children }: ListPanelPanelProps) => {
-  const selectedId = useListPanel();
-
-  if (selectedId && !ids.includes(selectedId)) {
-    return null;
-  }
-
-  return <>{children}</>;
-};

package/src/components/containers/list-panel/list-panel.context.tsx

@@ -1,5 +0,0 @@
-import { createContext, useContext } from "react";
-
-export const ListPanelContext = createContext<string | undefined>(undefined);
-export const ListPanelContextProvider = ListPanelContext.Provider;
-export const useListPanel = () => useContext(ListPanelContext);