@pautena/react-design-system 0.0.1

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@pautena/react-design-system",
+  "version": "0.0.1",
+  "description": "My custom design system on top of MUI",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "scripts": {
+    "build": "rollup -c",
+    "test": "jest",
+    "coverage": "jest --coverage",
+    "storybook": "start-storybook -p 6006",
+    "storybook:build": "build-storybook",
+    "storybook:deploy": "gh-pages -d storybook-static",
+    "lint": "npm-run-all lint:*",
+    "lint:eslint": "eslint *.js src --ext .js,.ts,.tsx",
+    "lint:ts": "tsc -p . --pretty",
+    "format": "npm-run-all format:*",
+    "format:js": "prettier --write \"**/*.js\"",
+    "format:json": "prettier --write \"**/*.json\"",
+    "format:md": "prettier --write \"**/*.md\"",
+    "format:ts": "prettier --write \"**/*.ts{,x}\""
+  },
+  "keywords": [
+    "mui",
+    "design",
+    "system"
+  ],
+  "author": "Pau Tena Vidal",
+  "license": "MIT",
+  "dependencies": {
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.90",
+    "@mui/material": "^5.9.0",
+    "@mui/x-data-grid": "^5.13.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@faker-js/faker": "^7.3.0",
+    "@mui/x-data-grid-generator": "^5.13.0",
+    "@rollup/plugin-commonjs": "^22.0.1",
+    "@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-knobs": "^6.4.0",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-webpack4": "^6.5.9",
+    "@storybook/manager-webpack4": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/testing-react": "^1.3.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@types/jest": "^28.1.5",
+    "@types/ramda": "^0.28.15",
+    "@types/react": "^18.0.15",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
+    "babel-jest": "^28.1.3",
+    "babel-loader": "^8.2.5",
+    "eslint": "^8.19.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "gh-pages": "^4.0.0",
+    "husky": "^8.0.1",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "lorem-ipsum": "^2.0.8",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.7.1",
+    "ramda": "^0.28.0",
+    "react-test-renderer": "^18.2.0",
+    "rollup": "^2.77.0",
+    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-terser": "^7.0.2",
+    "storybook-addon-react-router-v6": "^0.1.10",
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pautena/react-design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/pautena/react-design-system/issues"
+  },
+  "homepage": "https://pautena.com/react-design-system/"
+}

package/rollup.config.js

@@ -0,0 +1,40 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+import { terser } from "rollup-plugin-terser";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import packageJson from "./package.json";
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({
+        tsconfig: "./tsconfig.rollup.json",
+      }),
+      terser(),
+    ],
+    external: ["react", "react-dom"],
+  },
+  {
+    input: "dist/esm/types/index.d.ts",
+    output: [{ file: "dist/index.d.ts", format: "esm" }],
+    plugins: [dts()],
+  },
+];

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,16 @@
+import { FunctionComponent } 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>;

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";