@pautena/react-design-system 0.1.1 → 0.1.2

package/package.json

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

package/.eslintrc.js

@@ -1,26 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-    node: true,
-  },
-  extends: [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/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",
-  },
-};

package/.github/workflows/ci.yml

@@ -1,23 +0,0 @@
-name: 'ci'
-on:
-  pull_request:
-  push:
-    branches:
-      - main
-
-jobs:
-  ci:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/cache@v2
-        with:
-          path: |
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
-            '**/node_modules'
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-      
-      - run: yarn
-      - run: yarn lint
-      - run: yarn test

package/.github/workflows/deploy-storybook.yaml

@@ -1,23 +0,0 @@
-name: 'Deploy Storybook'
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  ci:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/cache@v2
-        id: yarn-cache
-        with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - run: yarn
-      - run: yarn storybook:build
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./storybook-static

package/.github/workflows/publish.yml

@@ -1,31 +0,0 @@
-name: Publish to NPM
-on:
-  release:
-    types: [created]
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - uses: actions/cache@v2
-        with:
-          path: |
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
-            '**/node_modules'
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn- 
-      - name: Setup Node
-        uses: actions/setup-node@v2
-        with:
-          node-version: '16.x'
-          registry-url: 'https://registry.npmjs.org'
-      - name: Install dependencies
-        run: yarn install
-      - name: Build
-        run: yarn  build
-      - name: Publish package on NPM
-        run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.husky/pre-commit

@@ -1,5 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-yarn lint
-yarn test

package/.prettierignore

@@ -1,5 +0,0 @@
-node_modules
-storybook-static
-coverage
-dist
-types

package/.storybook/main.js

@@ -1,10 +0,0 @@
-module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-knobs",
-  ],
-  framework: "@storybook/react",
-};

package/.storybook/preview.js

@@ -1,36 +0,0 @@
-import { ThemeProvider, CssBaseline, createTheme } from "@mui/material";
-import { addDecorator } from "@storybook/react";
-import { Box } from "@mui/material";
-import { select, withKnobs } from "@storybook/addon-knobs";
-
-const light = createTheme();
-const dark = createTheme({
-  palette: {
-    mode: "dark",
-  },
-});
-
-const themes = { light, dark };
-const themeNames = Object.keys(themes);
-
-addDecorator((Story) => {
-  const theme = select("Theme", themeNames, themeNames[0], "Themes");
-
-  return (
-    <ThemeProvider theme={themes[theme]}>
-      <CssBaseline />
-      <Story />
-    </ThemeProvider>
-  );
-});
-addDecorator(withKnobs);
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};

package/babel.config.js

@@ -1,13 +0,0 @@
-module.exports = {
-  presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
-  plugins: [
-    [
-      "module-resolver",
-      {
-        alias: {
-          "~": "./src",
-        },
-      },
-    ],
-  ],
-};

package/jest.config.js

@@ -1,17 +0,0 @@
-module.exports = {
-  testEnvironment: "jsdom",
-  setupFilesAfterEnv: ["./jest.setup.ts"],
-  collectCoverageFrom: [
-    "./src/**",
-    "!src/**/*.stories.tsx",
-    "!src/**/*.dummy.ts",
-    "!src/**/*.mock.tsx",
-    "!src/**/*.test.tsx",
-    "!src/storybook.tsx",
-    "!src/tests/**",
-    "!src/**/__snapshots__/**",
-  ],
-  moduleNameMapper: {
-    "~/(.*)": "<rootDir>/src/$1",
-  },
-};

package/jest.setup.ts

@@ -1,5 +0,0 @@
-import "@testing-library/jest-dom";
-
-beforeEach(() => {
-  jest.resetAllMocks();
-});

package/rollup.config.js

@@ -1,52 +0,0 @@
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "@rollup/plugin-typescript";
-import alias from "@rollup/plugin-alias";
-import dts from "rollup-plugin-dts";
-import path from "path";
-import { terser } from "rollup-plugin-terser";
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import packageJson from "./package.json";
-
-const projectRootDir = path.resolve(__dirname);
-
-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(),
-      alias({
-        entries: [
-          {
-            find: "~",
-            replacement: path.resolve(projectRootDir, "src"),
-          },
-        ],
-      }),
-    ],
-    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

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

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

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

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

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

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

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

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