@pautena/react-design-system 0.1.2 → 0.2.0

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { CenterContainer, CenterContainerProps } from "./center-container";
+import { Label } from "../label";
+import { createTemplate, withContainer } from "../../storybook";
+
+export default {
+  title: "Containers/CenterContainer",
+  component: CenterContainer,
+  decorators: [withContainer({ height: 500, bordered: true })],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof CenterContainer>;
+
+const Template = createTemplate((args: CenterContainerProps) => {
+  return (
+    <CenterContainer {...args}>
+      <Label text="Lorem ipsum" />
+    </CenterContainer>
+  );
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  centerVertical: true,
+  centerHorizontal: true,
+};
+
+export const VerticalCentered = Template.bind({});
+VerticalCentered.args = {
+  centerVertical: true,
+  centerHorizontal: false,
+};
+
+export const HorizontallyCentered = Template.bind({});
+HorizontallyCentered.args = {
+  centerVertical: false,
+  centerHorizontal: true,
+};
+
+export const CustomStyles = Template.bind({});
+CustomStyles.args = {
+  centerVertical: false,
+  centerHorizontal: false,
+  sx: {
+    px: 3,
+    py: 2,
+  },
+};

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Typography } from "@mui/material";
+import { render, screen } from "../../tests";
+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/center-container/center-container.tsx

@@ -0,0 +1,32 @@
+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/center-container/index.ts

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

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { Content } from "./content";
+import { SkeletonGrid } from "../../tests";
+
+export default {
+  title: "Sections/Content",
+  component: Content,
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof Content>;
+
+const Template = createTemplate(() => {
+  return (
+    <Content>
+      <SkeletonGrid />
+    </Content>
+  );
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { Content } from "./content";
+import { render, screen } from "../../tests";
+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/content/content.tsx

@@ -0,0 +1,11 @@
+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/content/content.types.ts

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

package/src/components/content/index.ts

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

package/src/components/drawer/__snapshots__/drawer.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mixins closedMixin would match a snapshot 1`] = `
+Object {
+  "@media (min-width:600px)": Object {
+    "width": "calc(64px + 1px)",
+  },
+  "overflowX": "hidden",
+  "transition": "width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+  "width": "calc(56px + 1px)",
+}
+`;
+
+exports[`mixins openedMixin would match a snapshot 1`] = `
+Object {
+  "overflowX": "hidden",
+  "transition": "width 225ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+  "width": 240,
+}
+`;

package/src/components/drawer/drawer.context.ts

@@ -0,0 +1,20 @@
+import { useContext, createContext } from "react";
+
+export interface DrawerContextProps {
+  isOpen: boolean;
+  close(): void;
+  open(): void;
+}
+
+export const DrawerContext = createContext<DrawerContextProps | undefined>(undefined);
+export const UndefinedProvider = new Error("DrawerContext.Provider is required and was undefined");
+
+export const useDrawer = () => {
+  const context = useContext(DrawerContext);
+
+  if (context === undefined) {
+    throw UndefinedProvider;
+  }
+
+  return context;
+};

package/src/components/drawer/drawer.mixins.ts

@@ -0,0 +1,24 @@
+import { Theme, CSSObject } from "@mui/material/styles";
+
+export const drawerWidth = 240;
+
+export const openedMixin = (theme: Theme): CSSObject => ({
+  width: drawerWidth,
+  transition: theme.transitions.create("width", {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.enteringScreen,
+  }),
+  overflowX: "hidden",
+});
+
+export const closedMixin = (theme: Theme): CSSObject => ({
+  transition: theme.transitions.create("width", {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  overflowX: "hidden",
+  width: `calc(${theme.spacing(7)} + 1px)`,
+  [theme.breakpoints.up("sm")]: {
+    width: `calc(${theme.spacing(8)} + 1px)`,
+  },
+});

package/src/components/drawer/drawer.mock.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { DrawerContentComponent, Nav } from "./drawer.types";
+import DiamondIcon from "@mui/icons-material/Diamond";
+import MenuBookIcon from "@mui/icons-material/MenuBook";
+import { Box, Typography } from "@mui/material";
+
+export const mockNav: Nav = {
+  items: [
+    {
+      items: [
+        {
+          id: "item1.1",
+          text: "Item 1.1",
+          icon: <DiamondIcon />,
+          href: "/items/1-1",
+        },
+        {
+          id: "item1.2",
+          text: "Item 1.2",
+          href: "/items/1-2",
+          icon: <DiamondIcon />,
+        },
+        {
+          id: "item1.3",
+          text: "Item 1.3",
+          href: "/items/1-3",
+          icon: <DiamondIcon />,
+          bullet: {
+            variant: "secondary",
+          },
+        },
+        {
+          id: "item1.4",
+          text: "Item 1.4",
+          href: "/items/1-4",
+          icon: <DiamondIcon />,
+          bullet: {
+            variant: "error",
+          },
+        },
+      ],
+    },
+    {
+      title: "Section 2",
+      items: [
+        {
+          id: "item2.1",
+          text: "Item 2.1",
+          href: "/items/2-1",
+          icon: <DiamondIcon />,
+          label: {
+            text: "10",
+            variant: "error",
+          },
+        },
+        {
+          id: "item2.2",
+          text: "Item 2.2",
+          href: "/items/2-2",
+          icon: <MenuBookIcon />,
+          label: {
+            text: "new",
+            variant: "info",
+          },
+        },
+      ],
+    },
+    {
+      title: "Section avatar",
+      items: [
+        {
+          id: "item.a.1",
+          text: "Avatar 1",
+          href: "/items/a-1",
+          avatar: {
+            src: "https://c.pxhere.com/images/f6/e0/022ab77c391925931fe227c97ab4-1447675.jpg!d",
+            alt: "Avatar 1",
+          },
+        },
+        {
+          id: "item.a.2",
+          text: "Avatar 2",
+          href: "/items/a-2",
+          avatar: {
+            src: "https://www.publicdomainpictures.net/pictures/270000/velka/avatar-people-person-business-u-15354603894rE.jpg",
+            alt: "Avatar 2",
+          },
+        },
+      ],
+    },
+  ],
+};
+
+export const DummyDrawerContent: DrawerContentComponent = () => {
+  return (
+    <Box>
+      <Typography variant="h6">Dummy Drawer Content</Typography>
+    </Box>
+  );
+};

package/src/components/drawer/drawer.provider.tsx

@@ -0,0 +1,23 @@
+import { useState } from "react";
+import React, { PropsWithChildren } from "react";
+import { DrawerContext } from "./drawer.context";
+
+type Props = PropsWithChildren<{
+  initialOpen?: boolean;
+}>;
+
+export const DrawerProvider = ({ children, initialOpen = false }: Props) => {
+  const [open, setOpen] = useState(initialOpen);
+
+  return (
+    <DrawerContext.Provider
+      value={{
+        isOpen: open,
+        close: () => setOpen(false),
+        open: () => setOpen(true),
+      }}
+    >
+      {children}
+    </DrawerContext.Provider>
+  );
+};

package/src/components/drawer/drawer.test.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { Drawer } from "./drawer";
+import { render, screen } from "../../tests";
+import { DrawerProvider } from "./drawer.provider";
+import { DummyDrawerContent, mockNav } from "./drawer.mock";
+import { Box, Button, createTheme } from "@mui/material";
+import { UndefinedProvider, useDrawer } from "./drawer.context";
+import userEvent from "@testing-library/user-event";
+import { openedMixin, closedMixin } from "./drawer.mixins";
+
+const TestContent = () => {
+  const { open, close } = useDrawer();
+
+  return (
+    <Box>
+      <Button onClick={close}>close</Button>
+      <Button onClick={open}>open</Button>
+    </Box>
+  );
+};
+
+describe("Drawer", () => {
+  const renderComponent = ({ initialOpen = undefined }: { initialOpen?: boolean } = {}) => {
+    return render(
+      <DrawerProvider initialOpen={initialOpen}>
+        <Box>
+          <Drawer>
+            <DummyDrawerContent nav={mockNav} />
+          </Drawer>
+          <TestContent />
+        </Box>
+      </DrawerProvider>,
+    );
+  };
+
+  it("would render closed by default", () => {
+    renderComponent();
+
+    expect(screen.queryByRole("menu", { hidden: true })).not.toBeInTheDocument();
+  });
+
+  it("would render opened if initialOpen is true", () => {
+    renderComponent({ initialOpen: true });
+
+    expect(screen.getByRole("menu", { hidden: false })).toBeInTheDocument();
+  });
+
+  it("would open if the user click the open button", async () => {
+    renderComponent();
+
+    await userEvent.click(screen.getByText(/open/i));
+
+    expect(screen.getByRole("menu", { hidden: false })).toBeInTheDocument();
+  });
+
+  it("would close if the user click the close button and the drawer was opened", async () => {
+    renderComponent({ initialOpen: true });
+
+    await userEvent.click(screen.getByText(/close/i));
+
+    expect(screen.queryByRole("menu", { hidden: true })).not.toBeInTheDocument();
+  });
+});
+
+describe("DrawerContext", () => {
+  it("would throw an error if no Provider is defined", () => {
+    try {
+      render(
+        <Box>
+          <Drawer>
+            <DummyDrawerContent nav={mockNav} />
+          </Drawer>
+          <TestContent />
+        </Box>,
+      );
+      fail("No error has been thrown");
+    } catch (e) {
+      expect(e).toStrictEqual(UndefinedProvider);
+    }
+  });
+});
+
+describe("mixins", () => {
+  describe("openedMixin", () => {
+    it("would match a snapshot", () => {
+      const theme = createTheme();
+      expect(openedMixin(theme)).toMatchSnapshot();
+    });
+  });
+
+  describe("closedMixin", () => {
+    it("would match a snapshot", () => {
+      const theme = createTheme();
+      expect(closedMixin(theme)).toMatchSnapshot();
+    });
+  });
+});

package/src/components/drawer/drawer.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { styled } from "@mui/material/styles";
+import { Drawer as MuiDrawer, Divider, IconButton } from "@mui/material";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import { DrawerComponent, DrawerProps } from "./drawer.types";
+import { useDrawer } from "./drawer.context";
+
+const DrawerHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  padding: theme.spacing(0, 1),
+  ...theme.mixins.toolbar,
+}));
+
+export const Drawer: DrawerComponent = ({ children, ...rest }: DrawerProps) => {
+  const { isOpen, close } = useDrawer();
+
+  return (
+    <MuiDrawer open={isOpen} role="menu" aria-hidden={!isOpen} {...rest}>
+      <DrawerHeader>
+        <IconButton onClick={close}>
+          <ChevronLeftIcon />
+        </IconButton>
+      </DrawerHeader>
+      <Divider />
+      {children}
+    </MuiDrawer>
+  );
+};

package/src/components/drawer/drawer.types.ts

@@ -0,0 +1,53 @@
+import { FunctionComponent, ReactElement } from "react";
+import { BulletVariant } from "../bullet";
+import { LabelVariant } from "../label";
+import { DrawerProps as MuiDrawerProps } from "@mui/material";
+
+export interface NavItemAvatar {
+  src: string;
+  alt: string;
+}
+
+export interface NavItemLabel {
+  text: string;
+  variant: LabelVariant;
+}
+
+export interface NavItemBullet {
+  variant: BulletVariant;
+}
+
+export interface NavItem {
+  id: string;
+  text: string;
+  href: string;
+  icon?: ReactElement;
+  avatar?: NavItemAvatar;
+  label?: NavItemLabel;
+  bullet?: NavItemBullet;
+}
+
+export interface NavSection {
+  title?: string;
+  items: NavItem[];
+}
+
+export interface Nav {
+  items: NavSection[];
+}
+
+export interface DrawerContentProps {
+  /**
+   * Object with the content that has to be rendered
+   */
+  nav: Nav;
+}
+export type DrawerContentComponent = FunctionComponent<DrawerContentProps>;
+export type DrawerContentElement = ReactElement<DrawerContentProps, DrawerContentComponent>;
+
+export interface DrawerProps extends MuiDrawerProps {
+  children: DrawerContentElement;
+}
+
+export type DrawerComponent = FunctionComponent<DrawerProps>;
+export type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;

package/src/components/drawer/index.ts

@@ -0,0 +1,5 @@
+export * from "./drawer";
+export * from "./drawer.types";
+export * from "./mini-drawer";
+export * from "./drawer.provider";
+export * from "./drawer.context";

package/src/components/drawer/mini-drawer/index.ts

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

package/src/components/drawer/mini-drawer/mini-drawer.stories.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { MiniDrawer } from "../mini-drawer";
+import { mockNav } from "../drawer.mock";
+import { DrawerContent } from "../../drawer-content";
+import { DrawerProvider } from "../drawer.provider";
+import { Nav } from "../drawer.types";
+import { withMemoryRouter } from "../../../storybook";
+
+export default {
+  title: "Drawers/MiniDrawer",
+  component: MiniDrawer,
+  decorators: [withMemoryRouter()],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof MiniDrawer>;
+
+interface Props {
+  open: boolean;
+  nav: Nav;
+}
+
+export const Default = ({ nav, open }: Props) => (
+  <DrawerProvider initialOpen={open}>
+    <MiniDrawer>
+      <DrawerContent nav={nav} />
+    </MiniDrawer>
+  </DrawerProvider>
+);
+Default.args = {
+  nav: mockNav,
+  open: true,
+};

package/src/components/drawer/mini-drawer/mini-drawer.tsx

@@ -0,0 +1,67 @@
+import { Drawer } from "../drawer";
+import { styled } from "@mui/material/styles";
+import { drawerWidth, openedMixin, closedMixin } from "../drawer.mixins";
+import { useDrawer } from "../drawer.context";
+import {
+  listItemButtonClasses,
+  listItemIconClasses,
+  listItemTextClasses,
+  listSubheaderClasses,
+} from "@mui/material";
+import { labelClasses } from "../../label";
+import { bulletClasses } from "../../bullet";
+
+export const MiniDrawer = styled(Drawer)(({ theme }) => {
+  const { isOpen } = useDrawer();
+
+  const hideIfClosed = !isOpen && {
+    display: "none",
+  };
+
+  return {
+    width: drawerWidth,
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    boxSizing: "border-box",
+    [`& .${listItemIconClasses.root}`]: {
+      minWidth: 0,
+      justifyContent: "center",
+      ...(isOpen
+        ? {
+            marginRight: theme.spacing(3),
+          }
+        : {
+            marginRight: "auto",
+          }),
+    },
+    [`& .${listItemButtonClasses.root}`]: {
+      minHeight: 48,
+      paddingHorizontal: theme.spacing(2.5),
+      ...(isOpen
+        ? {
+            justifyContent: "initial",
+          }
+        : {
+            justifyContent: "center",
+          }),
+    },
+    [`& .${labelClasses.root}`]: hideIfClosed,
+    [`& .${bulletClasses.root}`]: hideIfClosed,
+    [`& .${listSubheaderClasses.root}`]: hideIfClosed,
+    [`& .${listItemTextClasses.root}`]: {
+      opacity: isOpen ? 1 : 0,
+    },
+    ...(isOpen && {
+      ...openedMixin(theme),
+      "& .MuiDrawer-paper": openedMixin(theme),
+    }),
+    ...(!isOpen && {
+      ...closedMixin(theme),
+      "& .MuiDrawer-paper": closedMixin(theme),
+    }),
+  };
+});
+
+MiniDrawer.defaultProps = {
+  variant: "permanent",
+};