@pautena/react-design-system 0.0.1 → 0.1.2

package/src/components/bullet/bullet.tsx

@@ -1,30 +0,0 @@
-import { Badge } from "@mui/material";
-import React from "react";
-
-export type BulletVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
-
-export const bulletClasses = {
-  root: "RdsBullet-root",
-};
-
-export interface BulletProps {
-  /**
-   * Color palette used to draw the component
-   */
-  variant?: BulletVariant;
-}
-
-/**
- * Dot to attract the user attention
- */
-export const Bullet = ({ variant = "primary" }: BulletProps) => {
-  return (
-    <Badge
-      color={variant}
-      variant="dot"
-      className={bulletClasses.root}
-      role="bullet"
-      aria-describedby={variant}
-    />
-  );
-};

package/src/components/bullet/index.ts

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

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

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

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

@@ -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/center-container/index.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,34 +0,0 @@
-import React from "react";
-import { ComponentMeta } from "@storybook/react";
-import { withRouter } from "storybook-addon-react-router-v6";
-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";
-
-export default {
-  title: "Drawers/MiniDrawer",
-  component: MiniDrawer,
-  decorators: [withRouter],
-  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

@@ -1,67 +0,0 @@
-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",
-};

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

@@ -1,29 +0,0 @@
-import React from "react";
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
-import { DrawerContent } from "./drawer-content";
-import { mockNav } from "../drawer/drawer.mock";
-import { Box } from "@mui/material";
-import { withRouter } from "storybook-addon-react-router-v6";
-
-export default {
-  title: "Drawers/DrawerContent",
-  component: DrawerContent,
-  decorators: [
-    withRouter,
-    (Story) => {
-      return <Box maxWidth={300}>{<Story />}</Box>;
-    },
-  ],
-  parameters: {
-    layout: "fullscreen",
-  },
-} as ComponentMeta<typeof DrawerContent>;
-
-const Template = createTemplate(DrawerContent);
-
-export const Default = Template.bind({});
-Default.args = {
-  nav: mockNav,
-  open: true,
-};

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

@@ -1,34 +0,0 @@
-import React from "react";
-import { render, screen } from "../../tests";
-import { mockNav } from "../drawer/drawer.mock";
-import { DrawerContent } from "./drawer-content";
-
-describe("DrawerContent", () => {
-  const renderComponent = () => {
-    return render(<DrawerContent nav={mockNav} />);
-  };
-
-  it.each([[/section 2/i], [/section avatar/i]])(
-    "would render the title section %s",
-    (sectionTitle: RegExp) => {
-      renderComponent();
-
-      expect(screen.getByRole("heading", { name: sectionTitle })).toBeInTheDocument();
-    },
-  );
-
-  it.each([
-    [/item 1.1/i],
-    [/item 1.2/i],
-    [/item 1.3/i],
-    [/item 1.4/i],
-    [/item 2.1/i],
-    [/item 2.2/i],
-    [/avatar 1/i],
-    [/avatar 2/i],
-  ])("would render the item %s", (itemText: RegExp) => {
-    renderComponent();
-
-    expect(screen.getByRole("link", { name: itemText })).toBeInTheDocument();
-  });
-});