@pautena/react-design-system 0.0.1 → 0.1.2

package/dist/cjs/types/layouts/form-layout/form-layout.d.ts

@@ -1,8 +0,0 @@
-import { HeaderProps } from "../../components";
-import { ModelFormProps } from "../../generators";
-export interface FormLayoutProps {
-    loading?: boolean;
-    headerProps: HeaderProps;
-    modelFormProps: ModelFormProps;
-}
-export declare const FormLayout: ({ loading, headerProps, modelFormProps }: FormLayoutProps) => JSX.Element;

package/dist/cjs/types/layouts/form-layout/index.d.ts

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

package/dist/cjs/types/layouts/list-layout/index.d.ts

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

package/dist/cjs/types/layouts/list-layout/list-layout.d.ts

@@ -1,8 +0,0 @@
-import { BasicData, HeaderProps, PlaceholderProps, TableListProps } from "../../components";
-export interface ListLayoutProps<T extends BasicData> {
-    loading?: boolean;
-    headerProps: HeaderProps;
-    listProps: TableListProps<T>;
-    emptyPlaceholderProps: PlaceholderProps;
-}
-export declare const ListLayout: <T extends BasicData>({ loading, headerProps, emptyPlaceholderProps, listProps: { data, ...restListProps }, }: ListLayoutProps<T>) => JSX.Element;

package/dist/cjs/types/layouts/tab-layout/index.d.ts

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

package/dist/cjs/types/layouts/tab-layout/tab-layout.d.ts

@@ -1,7 +0,0 @@
-import { PropsWithChildren } from "react";
-import { HeaderProps } from "../../components";
-interface Props {
-    headerProps: HeaderProps;
-}
-export declare const TabLayout: ({ headerProps, children }: PropsWithChildren<Props>) => JSX.Element;
-export {};

package/dist/esm/types/components/tab/tab.context.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const TabContext: import("react").Context<number>;
-export declare const TabContextProvider: import("react").Provider<number>;
-export declare const useTab: () => number;

package/dist/esm/types/layouts/data-table-layout/data-table-layout.d.ts

@@ -1,12 +0,0 @@
-import { HeaderProps, PlaceholderProps } from "../../components";
-import { DataGridProps } from "@mui/x-data-grid";
-interface Props {
-    loading?: boolean;
-    headerProps: HeaderProps;
-    emptyPlaceholderProps: PlaceholderProps;
-    dataGridProps: DataGridProps & {
-        height: number;
-    };
-}
-export declare const DataTableLayout: ({ loading, headerProps, emptyPlaceholderProps, dataGridProps: { height, rows, ...restDataGridProps }, }: Props) => JSX.Element;
-export {};

package/dist/esm/types/layouts/data-table-layout/index.d.ts

@@ -1 +0,0 @@
-export * from "./data-table-layout";

package/dist/esm/types/layouts/details-layout/details-layout.d.ts

@@ -1,12 +0,0 @@
-import { HeaderProps, PlaceholderProps } from "../../components";
-import { Model } from "../../generators";
-export interface DetailsLayoutProps {
-    loading?: boolean;
-    headerProps: HeaderProps;
-    objectDetailsProps: {
-        model: Model;
-        instance?: object;
-    };
-    notFoundPlaceholderProps: PlaceholderProps;
-}
-export declare const DetailsLayout: ({ loading, headerProps, notFoundPlaceholderProps, objectDetailsProps: { model, instance }, }: DetailsLayoutProps) => JSX.Element;

package/dist/esm/types/layouts/details-layout/index.d.ts

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

package/dist/esm/types/layouts/form-layout/form-layout.d.ts

@@ -1,8 +0,0 @@
-import { HeaderProps } from "../../components";
-import { ModelFormProps } from "../../generators";
-export interface FormLayoutProps {
-    loading?: boolean;
-    headerProps: HeaderProps;
-    modelFormProps: ModelFormProps;
-}
-export declare const FormLayout: ({ loading, headerProps, modelFormProps }: FormLayoutProps) => JSX.Element;

package/dist/esm/types/layouts/form-layout/index.d.ts

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

package/dist/esm/types/layouts/list-layout/index.d.ts

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

package/dist/esm/types/layouts/list-layout/list-layout.d.ts

@@ -1,8 +0,0 @@
-import { BasicData, HeaderProps, PlaceholderProps, TableListProps } from "../../components";
-export interface ListLayoutProps<T extends BasicData> {
-    loading?: boolean;
-    headerProps: HeaderProps;
-    listProps: TableListProps<T>;
-    emptyPlaceholderProps: PlaceholderProps;
-}
-export declare const ListLayout: <T extends BasicData>({ loading, headerProps, emptyPlaceholderProps, listProps: { data, ...restListProps }, }: ListLayoutProps<T>) => JSX.Element;

package/dist/esm/types/layouts/tab-layout/index.d.ts

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

package/dist/esm/types/layouts/tab-layout/tab-layout.d.ts

@@ -1,7 +0,0 @@
-import { PropsWithChildren } from "react";
-import { HeaderProps } from "../../components";
-interface Props {
-    headerProps: HeaderProps;
-}
-export declare const TabLayout: ({ headerProps, children }: PropsWithChildren<Props>) => JSX.Element;
-export {};

package/jest.config.js

@@ -1,14 +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__/**",
-  ],
-};

package/jest.setup.ts

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

package/rollup.config.js

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

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

@@ -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,
-};

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

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

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