@pautena/react-design-system 0.1.2 → 0.1.3

package/package.json

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

package/src/components/app-bar/app-bar.stories.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { AppBar } from "./app-bar";
+import { DrawerProvider } from "../drawer";
+
+export default {
+  title: "AppBars/AppBar",
+  component: AppBar,
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof AppBar>;
+
+const Template = createTemplate((args) => {
+  return (
+    <DrawerProvider>
+      <AppBar {...args} />
+    </DrawerProvider>
+  );
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Lorem ipsum",
+  menu: true,
+};
+
+export const WithSearch = Template.bind({});
+WithSearch.args = {
+  title: "Lorem ipsum",
+  search: true,
+  menu: true,
+};
+
+export const WithoutTitle = Template.bind({});
+WithoutTitle.args = {
+  menu: true,
+};
+
+export const WihtoutMenu = Template.bind({});
+WihtoutMenu.args = {
+  title: "Lorem ipsum",
+  menu: false,
+};
+
+export const WithProfile = Template.bind({});
+WithProfile.args = {
+  title: "Lorem ipsum",
+  menu: true,
+  profile: {
+    name: "Test user",
+  },
+};

package/src/components/app-bar/app-bar.test.tsx

@@ -0,0 +1,142 @@
+import React from "react";
+import { fireEvent, render, screen } from "../../tests";
+import { AppBar } from "./app-bar";
+import { DrawerProvider } from "../drawer";
+import { AppBarProfile } from "./app-bar.types";
+import userEvent from "@testing-library/user-event";
+
+const profile: AppBarProfile = {
+  name: "John Smith",
+};
+
+describe("AppBar", () => {
+  const renderComponent = ({
+    search,
+    title,
+    menu,
+    initialOpen,
+    profile,
+  }: {
+    title?: string;
+    search?: boolean;
+    menu?: boolean;
+    initialOpen?: boolean;
+    profile?: AppBarProfile;
+  } = {}) => {
+    const onClickSignOut = jest.fn();
+    const instance = render(
+      <DrawerProvider initialOpen={initialOpen}>
+        <AppBar
+          title={title}
+          menu={menu}
+          search={search}
+          profile={profile}
+          onClickSignOut={onClickSignOut}
+        />
+      </DrawerProvider>,
+    );
+    return { ...instance, onClickSignOut };
+  };
+
+  const clickOutsideProfileMenu = () => {
+    const child = screen.getByRole("presentation").firstChild;
+    expect(child).toBeDefined();
+    child && fireEvent.click(child);
+  };
+
+  describe("title", () => {
+    it("wouldn't render a title if it's not defined", () => {
+      renderComponent({ title: undefined });
+
+      expect(screen.queryByRole("heading", { level: 1 })).not.toBeInTheDocument();
+    });
+
+    it("would render a title if it's defined", () => {
+      renderComponent({ title: "Lorem ipsum" });
+
+      expect(screen.queryByRole("heading", { level: 1, name: /lorem ipsum/i })).toBeInTheDocument();
+    });
+  });
+
+  describe("menu", () => {
+    it("wouldn't render a menu button if menu is not defined", () => {
+      renderComponent();
+
+      expect(screen.queryByRole("button", { name: /open drawer/i })).not.toBeInTheDocument();
+    });
+
+    it("wouldn't render a menu button if menu is false", () => {
+      renderComponent({ menu: false });
+
+      expect(screen.queryByRole("button", { name: /open drawer/i })).not.toBeInTheDocument();
+    });
+
+    it("would render a menu button if menu is true", () => {
+      renderComponent({ menu: true });
+
+      expect(screen.getByRole("button", { name: /open drawer/i })).toBeInTheDocument();
+    });
+  });
+
+  describe("search", () => {
+    it("wouldn't render a search box by default", () => {
+      renderComponent();
+
+      expect(screen.queryByRole("search")).not.toBeInTheDocument();
+    });
+
+    it("wouldn't render a search box if search is false", () => {
+      renderComponent({ search: false });
+
+      expect(screen.queryByRole("search")).not.toBeInTheDocument();
+    });
+
+    it("would render a search box if search is true", () => {
+      renderComponent({ search: true });
+
+      expect(screen.getByRole("search")).toBeInTheDocument();
+    });
+  });
+
+  describe("profile", () => {
+    it("wouldn't render the user profile if it's not set", () => {
+      renderComponent({ profile: undefined });
+
+      expect(screen.queryByRole("button", { name: /menu button/i })).not.toBeInTheDocument();
+    });
+
+    it("would render the user profile if the profile is defined", () => {
+      renderComponent({ profile });
+
+      expect(screen.getByRole("button", { name: /menu button/i })).toBeInTheDocument();
+    });
+
+    describe("the user click the profile button", () => {
+      it("would open the menu", async () => {
+        renderComponent({ profile });
+
+        await userEvent.click(screen.getByRole("button", { name: /menu button/i }));
+
+        expect(screen.getByRole("menu")).toBeInTheDocument();
+      });
+    });
+
+    it("would call onClickSignOut if the user press the sign out button", async () => {
+      const { onClickSignOut } = renderComponent({ profile });
+
+      await userEvent.click(screen.getByRole("button", { name: /menu button/i }));
+      await userEvent.click(screen.getByRole("menuitem", { name: /sign out/i }));
+
+      expect(onClickSignOut).toHaveBeenCalledTimes(1);
+    });
+
+    it("would hide the menu if the focus changes to an external element", async () => {
+      renderComponent({ profile, title: "lorem ipsum" });
+
+      await userEvent.click(screen.getByRole("button", { name: /menu button/i }));
+      clickOutsideProfileMenu();
+
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/components/app-bar/app-bar.tsx

@@ -0,0 +1,150 @@
+import * as React from "react";
+import { styled, alpha } from "@mui/material/styles";
+import MuiAppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import InputBase from "@mui/material/InputBase";
+import MenuItem from "@mui/material/MenuItem";
+import Menu from "@mui/material/Menu";
+import MenuIcon from "@mui/icons-material/Menu";
+import SearchIcon from "@mui/icons-material/Search";
+import AccountCircle from "@mui/icons-material/AccountCircle";
+import { AppBarComponent, AppBarProps } from "./app-bar.types";
+import { useDrawer } from "../drawer/drawer.context";
+
+const Search = styled("div")(({ theme }) => ({
+  position: "relative",
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: alpha(theme.palette.common.white, 0.15),
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.common.white, 0.25),
+  },
+  marginRight: theme.spacing(2),
+  marginLeft: 0,
+  width: "100%",
+  [theme.breakpoints.up("sm")]: {
+    marginLeft: theme.spacing(3),
+    width: "auto",
+  },
+}));
+
+const SearchIconWrapper = styled("div")(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  height: "100%",
+  position: "absolute",
+  pointerEvents: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+  color: "inherit",
+  "& .MuiInputBase-input": {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create("width"),
+    width: "100%",
+    [theme.breakpoints.up("md")]: {
+      width: "20ch",
+    },
+  },
+}));
+
+export const AppBar: AppBarComponent = ({
+  search = false,
+  title,
+  menu = false,
+  profile,
+  onClickSignOut,
+  ...rest
+}: AppBarProps) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const { isOpen, open } = useDrawer();
+
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <MuiAppBar {...rest}>
+      <Toolbar>
+        {menu && (
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            onClick={open}
+            edge="start"
+            sx={{
+              marginRight: 5,
+              ...(isOpen && { display: "none" }),
+            }}
+          >
+            <MenuIcon />
+          </IconButton>
+        )}
+        {title && (
+          <Typography
+            variant="h6"
+            component="h1"
+            role="heading"
+            aria-level={1}
+            noWrap
+            sx={{ display: { xs: "none", sm: "block" } }}
+          >
+            {title}
+          </Typography>
+        )}
+        {search && (
+          <Search role="search">
+            <SearchIconWrapper>
+              <SearchIcon />
+            </SearchIconWrapper>
+            <StyledInputBase placeholder="Search…" inputProps={{ "aria-label": "search" }} />
+          </Search>
+        )}
+        <Box sx={{ flexGrow: 1 }} />
+        {profile && (
+          <Box sx={{ display: { xs: "none", md: "flex" } }}>
+            <IconButton
+              size="large"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              aria-label="menu button"
+              role="button"
+              aria-expanded={Boolean(anchorEl)}
+              onClick={handleMenu}
+              color="inherit"
+            >
+              <AccountCircle />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorEl}
+              anchorOrigin={{
+                vertical: "top",
+                horizontal: "right",
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "right",
+              }}
+              open={Boolean(anchorEl)}
+              onClose={handleClose}
+            >
+              <MenuItem onClick={onClickSignOut}>Sign out</MenuItem>
+            </Menu>
+          </Box>
+        )}
+      </Toolbar>
+    </MuiAppBar>
+  );
+};

package/src/components/app-bar/app-bar.types.ts

@@ -0,0 +1,17 @@
+import { FunctionComponent, ReactElement } from "react";
+import { AppBarProps as MuiAppBarProps } from "@mui/material";
+
+export interface AppBarProfile {
+  name: string;
+}
+
+export interface AppBarProps extends MuiAppBarProps {
+  menu?: boolean;
+  title?: string;
+  search?: boolean;
+  profile?: AppBarProfile;
+  onClickSignOut: () => void;
+}
+
+export type AppBarComponent = FunctionComponent<AppBarProps>;
+export type AppBarElement = ReactElement<AppBarProps, AppBarComponent>;

package/src/components/app-bar/index.ts

@@ -0,0 +1,3 @@
+export * from "./mini-app-bar";
+export * from "./mini-app-bar";
+export * from "./app-bar.types";

package/src/components/app-bar/mini-app-bar/index.ts

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

package/src/components/app-bar/mini-app-bar/mini-app-bar.tsx

@@ -0,0 +1,31 @@
+import { styled } from "@mui/material/styles";
+import { AppBar } from "../app-bar";
+import { AppBarProps } from "@mui/material";
+import { drawerWidth } from "../../drawer/drawer.mixins";
+import { AppBarComponent } from "../app-bar.types";
+import { useDrawer } from "../../drawer/drawer.context";
+
+export const MiniAppBar: AppBarComponent = styled(AppBar)<AppBarProps>(({ theme }) => {
+  const { isOpen } = useDrawer();
+
+  return {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    ...(isOpen && {
+      marginLeft: drawerWidth,
+      width: `calc(100% - ${drawerWidth}px)`,
+      transition: theme.transitions.create(["width", "margin"], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+    }),
+  };
+});
+
+MiniAppBar.defaultProps = {
+  position: "fixed",
+  menu: true,
+};

package/src/components/bullet/bullet.stories.tsx

@@ -0,0 +1,43 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { Bullet } from "./bullet";
+
+export default {
+  title: "Data Display/Bullet",
+  component: Bullet,
+  parameters: {
+    layout: "centered",
+  },
+} as ComponentMeta<typeof Bullet>;
+
+const Template = createTemplate(Bullet);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  variant: "primary",
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  variant: "secondary",
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  variant: "default",
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  variant: "info",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  variant: "warning",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  variant: "error",
+};

package/src/components/bullet/bullet.test.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Bullet, BulletVariant } from "./bullet";
+import { render, screen } from "../../tests";
+
+describe("Bullet", () => {
+  const renderComponent = (variant: BulletVariant | undefined = undefined) => {
+    return render(<Bullet variant={variant} />);
+  };
+
+  it("renders as primary without a variant", () => {
+    renderComponent(undefined);
+
+    expect(screen.getByRole("bullet")).toHaveAttribute("aria-describedby", "primary");
+  });
+
+  it.each([["primary"], ["secondary"], ["default"], ["info"], ["warning"], ["error"]])(
+    "renders correctly with variant %s",
+    (variant: string) => {
+      renderComponent(variant as BulletVariant);
+
+      expect(screen.getByRole("bullet")).toHaveAttribute("aria-describedby", variant);
+    },
+  );
+});

package/src/components/bullet/bullet.tsx

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

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

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>
+  );
+};