@pautena/react-design-system 0.5.0 → 0.6.0

package/dist/esm/types/components/app-bars/app-bar/app-bar.d.ts

@@ -1,2 +0,0 @@
-import { AppBarComponent } from "./app-bar.types";
-export declare const AppBar: AppBarComponent;

package/dist/esm/types/components/app-bars/app-bar/app-bar.types.d.ts

@@ -1,14 +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/dist/esm/types/components/app-bars/app-bar/index.d.ts

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

package/dist/esm/types/components/app-bars/app-bar/mini-app-bar/index.d.ts

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

package/dist/esm/types/components/app-bars/app-bar/mini-app-bar/mini-app-bar.d.ts

@@ -1,2 +0,0 @@
-import { AppBarComponent } from "../app-bar.types";
-export declare const MiniAppBar: AppBarComponent;

package/dist/esm/types/components/app-bars/index.d.ts

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

package/dist/esm/types/components/drawers/drawer/drawer.mock.d.ts

@@ -1,3 +0,0 @@
-import { DrawerContentComponent, Nav } from "./drawer.types";
-export declare const mockNav: Nav;
-export declare const DummyDrawerContent: DrawerContentComponent;

package/dist/esm/types/components/drawers/drawer/drawer.provider.d.ts

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from "react";
-type Props = PropsWithChildren<{
-    initialOpen?: boolean;
-}>;
-export declare const DrawerProvider: ({ children, initialOpen }: Props) => JSX.Element;
-export {};

package/dist/esm/types/components/drawers/drawer/drawer.types.d.ts

@@ -1,51 +0,0 @@
-import { FunctionComponent, ReactElement } from "react";
-import { BulletVariant, LabelVariant } from "../../data-display";
-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 NavItemLink {
-    id: string;
-    text: string;
-    href: string;
-    icon?: ReactElement;
-    avatar?: NavItemAvatar;
-    label?: NavItemLabel;
-    bullet?: NavItemBullet;
-}
-export type NavItemCollapsable = Pick<NavItemLink, "id" | "text" | "icon"> & {
-    items: NavItemLink[];
-};
-export type NavItem = NavItemLink | NavItemCollapsable;
-export interface NavSection {
-    title?: string;
-    items: NavItem[];
-}
-export interface Nav {
-    items: NavSection[];
-}
-export interface DrawerContentProps {
-    /**
-     * Item currently selected in the navigation
-     */
-    selectedItem?: string;
-    /**
-     * 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/dist/esm/types/components/drawers/drawer/mini-drawer/index.d.ts

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

package/dist/esm/types/components/drawers/drawer/mini-drawer/mini-drawer.d.ts

@@ -1 +0,0 @@
-export declare const MiniDrawer: import("@emotion/styled").StyledComponent<import("..").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/esm/types/components/drawers/drawer-collapsable-item/drawer-collapsable-item.d.ts

@@ -1,26 +0,0 @@
-import { ReactElement } from "react";
-import { NavItemLink } from "../drawer/drawer.types";
-export interface DrawerCollapsableItemProps {
-    /**
-     * Text displayed inside the item
-     */
-    text: string;
-    /**
-     * Icon displayed to the left
-     */
-    icon?: ReactElement;
-    /**
-     * The item has to be marked as selected
-     */
-    selected?: boolean;
-    /**
-     * Id of the item that has to be marked as selected;
-     */
-    selectedItem?: string;
-    /**
-     * Items that are going to be displayed inside
-     * the collapsable
-     */
-    items: NavItemLink[];
-}
-export declare const DrawerCollapsableItem: ({ text, icon, selected, selectedItem, items, }: DrawerCollapsableItemProps) => JSX.Element;

package/dist/esm/types/components/drawers/drawer-collapsable-item/index.d.ts

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

package/dist/esm/types/components/drawers/drawer-section/drawer-section.mock.d.ts

@@ -1,2 +0,0 @@
-import { NavItem } from "../drawer/drawer.types";
-export declare const SectionItems: NavItem[];

package/dist/esm/types/components/inputs/enhanced-autocomplete/enhanced-autocomplete.d.ts

@@ -1,10 +0,0 @@
-import { AutocompleteProps, ChipTypeMap } from "@mui/material";
-import React from "react";
-export interface EnhancedAutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"]> extends Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, "renderInput" | "onChange" | "color"> {
-    label: string;
-    helperText?: string;
-    color?: string;
-    fetching?: boolean;
-    onChangeValue?: (value: T) => void;
-}
-export declare const EnhancedAutocomplete: <T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType<any> = "div">(props: EnhancedAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => JSX.Element;

package/dist/esm/types/components/inputs/enhanced-autocomplete/index.d.ts

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

package/dist/esm/types/components/inputs/enhanced-select/enhanced-select.d.ts

@@ -1,15 +0,0 @@
-import React, { ReactNode } from "react";
-import { SelectInputProps } from "@mui/material/Select/SelectInput";
-export type EnhancedSelectSize = "small" | "medium";
-export interface EnhancedSelectProps<T> {
-    label: string;
-    value: T;
-    loading?: boolean;
-    fetching?: boolean;
-    size?: EnhancedSelectSize;
-    color?: string;
-    fullWidth?: boolean;
-    children?: ReactNode;
-    onChange?: SelectInputProps<T>["onChange"];
-}
-export declare const EnhancedSelect: <T extends React.ReactNode>({ label, value, loading, fetching, size, fullWidth, color, children, onChange, }: EnhancedSelectProps<T>) => JSX.Element;

package/dist/esm/types/components/inputs/enhanced-select/index.d.ts

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

package/dist/esm/types/components/inputs/enhanced-text-field/enhanced-text-field.d.ts

@@ -1,7 +0,0 @@
-import { TextFieldProps } from "@mui/material";
-export type EnhancedTextFieldProps = TextFieldProps & {
-    fetching?: boolean;
-    loading?: boolean;
-    hexColor?: string;
-};
-export declare const EnhancedTextField: ({ id: overrideId, label, InputLabelProps, InputProps, fetching, loading, helperText, hexColor, size, fullWidth, sx, ...rest }: EnhancedTextFieldProps) => JSX.Element;

package/dist/esm/types/components/inputs/enhanced-text-field/index.d.ts

@@ -1 +0,0 @@
-export * from "./enhanced-text-field";

package/dist/esm/types/layouts/app-bar-with-drawer-layout/app-bar-with-drawer-layout.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from "react";
-import { AppBarElement } from "../../components/app-bars/app-bar";
-import { DrawerElement } from "../../components/drawers/drawer";
-export interface AppBarWithDrawerLayoutProps {
-    children: [DrawerElement, AppBarElement, ReactNode];
-}
-export declare const AppBarWithDrawerLayout: ({ children: childrenProps, }: AppBarWithDrawerLayoutProps) => JSX.Element;

package/dist/esm/types/layouts/app-bar-with-drawer-layout/index.d.ts

@@ -1 +0,0 @@
-export * from "./app-bar-with-drawer-layout";

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

@@ -1,55 +0,0 @@
-import React from "react";
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../../storybook";
-import { AppBar } from "./app-bar";
-import { DrawerProvider } from "../../drawers/drawer";
-import { AppBarProps } from "./app-bar.types";
-
-export default {
-  title: "Components/AppBars/AppBar",
-  component: AppBar,
-  parameters: {
-    layout: "fullscreen",
-  },
-} as ComponentMeta<typeof AppBar>;
-
-const Template = createTemplate((args: AppBarProps) => {
-  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-bars/app-bar/app-bar.test.tsx

@@ -1,142 +0,0 @@
-import React from "react";
-import { fireEvent, render, screen } from "~/tests/testing-library";
-import { AppBar } from "./app-bar";
-import { DrawerProvider } from "../../drawers/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-bars/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 "../../drawers/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-bars/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-bars/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-bars/app-bar/mini-app-bar/index.ts

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

package/src/components/app-bars/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 "../../../drawers/drawer/drawer.mixins";
-import { AppBarComponent } from "../app-bar.types";
-import { useDrawer } from "../../../drawers/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/app-bars/app-bars.stories.mdx

@@ -1,10 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import LinkTo from '@storybook/addon-links/react';
-
-<Meta title="Components/AppBars/Introduction" />
-
-# App Bars
-
-<ul>
-  <li><LinkTo kind="Components/AppBars/AppBar">AppBar</LinkTo></li>
-</ul>

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

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

package/src/components/drawers/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`] = `
-{
-  "@media (min-width:600px)": {
-    "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`] = `
-{
-  "overflowX": "hidden",
-  "transition": "width 225ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
-  "width": 240,
-}
-`;