@pautena/react-design-system 0.12.0 → 0.12.2

package/src/components/drawers/drawer-section/drawer-section.tsx

@@ -1,49 +0,0 @@
-import { List, useTheme } from "@mui/material";
-import React from "react";
-import { DrawerNavigationItem, DrawerSize } from "../drawer.types";
-import { DrawerSubheader } from "../drawer-subheader";
-import { DrawerItem } from "../drawer-item/drawer-item";
-import { useDrawer } from "../drawer-provider";
-
-export interface DrawerSectionProps {
-  /**
-   * Section title
-   */
-  title?: string;
-  /**
-   * List of items of that section
-   */
-  items: DrawerNavigationItem[];
-  /**
-   * Item size. default to medium
-   */
-  size?: DrawerSize;
-}
-
-/**
- * Render a group of items inside the drawer
- * with an optional title
- */
-export const DrawerSection = ({ title, items, size = "medium" }: DrawerSectionProps) => {
-  const { state } = useDrawer();
-  const { spacing } = useTheme();
-  return (
-    <>
-      {title && state === "open" && (
-        <DrawerSubheader size={size} role="heading">
-          {title}
-        </DrawerSubheader>
-      )}
-      <List
-        sx={{
-          paddingTop: size === "small" ? spacing(0) : undefined,
-          paddingY: state === "collapse" ? 0 : undefined,
-        }}
-      >
-        {items.map((item) => (
-          <DrawerItem key={item.id} item={item} size={size} />
-        ))}
-      </List>
-    </>
-  );
-};

package/src/components/drawers/drawer-section/index.ts

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

package/src/components/drawers/drawer-subheader/drawer-subheader.stories.tsx

@@ -1,27 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { DrawerSubheader } from "./drawer-subheader";
-import { withContainer } from "../../../storybook";
-
-export default {
-  title: "Components/Drawers/DrawerSubheader",
-  component: DrawerSubheader,
-  decorators: [withContainer({ width: 250 })],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof DrawerSubheader>;
-type Story = StoryObj<typeof DrawerSubheader>;
-
-export const Medium: Story = {
-  args: {
-    children: "Lorem ipsum",
-    size: "medium",
-  },
-};
-
-export const Small: Story = {
-  args: {
-    children: "Lorem ipsum",
-    size: "small",
-  },
-};

package/src/components/drawers/drawer-subheader/drawer-subheader.tsx

@@ -1,15 +0,0 @@
-import { ListSubheader, ListSubheaderProps, styled } from "@mui/material";
-import { DrawerSize } from "../drawer.types";
-
-export interface DrawerSubheaderProps extends ListSubheaderProps {
-  /**
-   * Item size. default to medium
-   */
-  size?: DrawerSize;
-}
-
-export const DrawerSubheader = styled(ListSubheader, {
-  shouldForwardProp: (prop) => prop !== "size",
-})<DrawerSubheaderProps>(({ size, theme }) => ({
-  lineHeight: size === "small" ? theme.typography.pxToRem(40) : undefined,
-}));

package/src/components/drawers/drawer-subheader/index.ts

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

package/src/components/drawers/drawer.mock.tsx

@@ -1,195 +0,0 @@
-import React from "react";
-import {
-  DrawerNavigation,
-  DrawerNavigationItem,
-  DrawerNavigationItemCollapsable,
-  DrawerNavigationItemLink,
-  DrawerNavigationSection,
-} from "./drawer.types";
-import DiamondIcon from "@mui/icons-material/Diamond";
-import MenuBookIcon from "@mui/icons-material/MenuBook";
-import AccountTreeIcon from "@mui/icons-material/AccountTree";
-import AccessAlarmIcon from "@mui/icons-material/AccessAlarm";
-import BrushIcon from "@mui/icons-material/Brush";
-import AccountBoxIcon from "@mui/icons-material/AccountBox";
-import FlightTakeoffIcon from "@mui/icons-material/FlightTakeoff";
-import FlightLandIcon from "@mui/icons-material/FlightLand";
-import ApiIcon from "@mui/icons-material/Api";
-import AutoFixOffIcon from "@mui/icons-material/AutoFixOff";
-import CallMissedIcon from "@mui/icons-material/CallMissed";
-import ConnectingAirportsIcon from "@mui/icons-material/ConnectingAirports";
-import DangerousIcon from "@mui/icons-material/Dangerous";
-import SpellcheckIcon from "@mui/icons-material/Spellcheck";
-import ChairIcon from "@mui/icons-material/Chair";
-
-export const mockLinkDrawerNavigationItem: DrawerNavigationItemLink = {
-  id: "item1.1",
-  text: "Item 1.1",
-  icon: <DiamondIcon />,
-  href: "/items/1-1",
-};
-
-export const mockLinkNoIconDrawerNavigationItem: DrawerNavigationItemLink = {
-  id: "item1.1",
-  text: "Item 1.1",
-  href: "/items/1-1",
-};
-
-export const mockLinkBulletDrawerNavigationItem: DrawerNavigationItem = {
-  id: "item1.3",
-  text: "Item 1.3",
-  href: "/items/1-3",
-  icon: <BrushIcon />,
-  bullet: {
-    variant: "secondary",
-  },
-};
-
-export const mockLinkLabelDrawerNavigationItem: DrawerNavigationItem = {
-  id: "item2.1",
-  text: "Item 2.1",
-  href: "/items/2-1",
-  icon: <FlightTakeoffIcon />,
-  label: {
-    text: "10",
-    variant: "error",
-  },
-};
-
-export const mockLinkAvatarDrawerNavigationItem: DrawerNavigationItem = {
-  id: "item.a.1",
-  text: "Avatar 1",
-  href: "/items/a-1",
-  avatar: {
-    src: "https://c.pxhere.com/images/f6/e0/022ab77c391925931fe227c97ab4-1447675.jpg!d",
-    alt: "Avatar 1",
-  },
-};
-
-export const mockListDrawerNavigationItems: DrawerNavigationItem[] = [
-  mockLinkDrawerNavigationItem,
-  {
-    id: "item1.2",
-    text: "Item 1.2",
-    href: "/items/1-2",
-    icon: <AccessAlarmIcon />,
-  },
-  mockLinkBulletDrawerNavigationItem,
-  {
-    id: "item1.4",
-    text: "Item 1.4",
-    href: "/items/1-4",
-    icon: <AccountBoxIcon />,
-    bullet: {
-      variant: "error",
-    },
-  },
-];
-
-export const mockMenuDrawerNavigationItem: DrawerNavigationItemCollapsable = {
-  id: "item2.3.4.2",
-  text: "Item 2.3.4.2",
-  icon: <ConnectingAirportsIcon />,
-  items: [
-    {
-      id: "item2.3.4.2.1",
-      text: "Item 2.3.4.2.1",
-      href: "/items/2-3-4-2.1",
-      icon: <DangerousIcon />,
-    },
-    {
-      id: "item2.3.4.2.2",
-      text: "Item 2.3.4.2.2",
-      href: "/items/2-3-4-2.2",
-      icon: <SpellcheckIcon />,
-    },
-  ],
-};
-
-export const mockMenuInsideMenuDrawerNavigationItem: DrawerNavigationItem = {
-  id: "item2.3.4",
-  text: "Item 2.3.4",
-  href: "/items/2-3-4",
-  icon: <AccountTreeIcon />,
-  items: [
-    {
-      id: "item2.3.4.1",
-      text: "Item 2.3.4.1",
-      href: "/items/2-3-4-1",
-      icon: <CallMissedIcon />,
-    },
-    mockMenuDrawerNavigationItem,
-  ],
-};
-
-export const mockListDrawerNavigationSection: DrawerNavigationSection = {
-  items: mockListDrawerNavigationItems,
-};
-
-export const mockMenuDrawerNavigationSection: DrawerNavigationSection = {
-  title: "Section 2",
-  items: [
-    mockLinkLabelDrawerNavigationItem,
-    {
-      id: "item2.2",
-      text: "Item 2.2",
-      href: "/items/2-2",
-      icon: <FlightLandIcon />,
-      label: {
-        text: "new",
-        variant: "info",
-      },
-    },
-    {
-      id: "item2.3",
-      text: "Item 2.3",
-      href: "/items/2-3",
-      icon: <ChairIcon />,
-      items: [
-        {
-          id: "item2.3.1",
-          text: "Item 2.3.1",
-          href: "/items/2-3-1",
-          icon: <ApiIcon />,
-        },
-        {
-          id: "item2.3.2",
-          text: "Item 2.3.2",
-          href: "/items/2-3-2",
-          icon: <MenuBookIcon />,
-        },
-        {
-          id: "item2.3.3",
-          text: "Item 2.3.3",
-          href: "/items/2-3-3",
-          icon: <AutoFixOffIcon />,
-        },
-        mockMenuInsideMenuDrawerNavigationItem,
-      ],
-    },
-  ],
-};
-
-export const mockAvatarsDrawerNavigationSection: DrawerNavigationSection = {
-  title: "Section avatar",
-  items: [
-    mockLinkAvatarDrawerNavigationItem,
-    {
-      id: "item.a.2",
-      text: "Avatar 2",
-      href: "/items/a-2",
-      avatar: {
-        src: "https://www.publicdomainpictures.net/pictures/270000/velka/avatar-people-person-business-u-15354603894rE.jpg",
-        alt: "Avatar 2",
-      },
-    },
-  ],
-};
-
-export const mockDrawerNavigation: DrawerNavigation = {
-  items: [
-    mockListDrawerNavigationSection,
-    mockMenuDrawerNavigationSection,
-    mockAvatarsDrawerNavigationSection,
-  ],
-};

package/src/components/drawers/drawer.types.ts

@@ -1,78 +0,0 @@
-import { FunctionComponent, ReactElement } from "react";
-import { BulletVariant, LabelVariant } from "../data-display";
-import { DrawerProps as MuiDrawerProps, Theme } from "@mui/material";
-import { DrawerAppBarProps } from "./drawer-app-bar";
-
-export type DrawerVariant = "temporary" | "mini" | "persistent" | "clipped";
-export type DrawerState = "open" | "collapse" | "close";
-export type DrawerSize = "small" | "medium";
-
-export interface DrawerItemAvatar {
-  src: string;
-  alt: string;
-}
-
-export interface DrawerItemLabel {
-  text: string;
-  variant: LabelVariant;
-}
-
-export interface DrawerItemBullet {
-  variant: BulletVariant;
-}
-
-export interface DrawerNavigationItemLink {
-  id: string;
-  text: string;
-  href: string;
-  icon?: ReactElement;
-  avatar?: DrawerItemAvatar;
-  label?: DrawerItemLabel;
-  bullet?: DrawerItemBullet;
-}
-
-export type DrawerNavigationItemCollapsable = Pick<
-  DrawerNavigationItemLink,
-  "id" | "text" | "icon"
-> & {
-  items: DrawerNavigationItem[];
-};
-
-export type DrawerNavigationItem = DrawerNavigationItemLink | DrawerNavigationItemCollapsable;
-
-export interface DrawerNavigationSection {
-  title?: string;
-  items: DrawerNavigationItem[];
-}
-
-export interface DrawerNavigation {
-  items: DrawerNavigationSection[];
-}
-
-export interface DrawerContentProps {
-  /**
-   * Object with the content that has to be rendered
-   */
-  nav: DrawerNavigation;
-  /**
-   * Item size. default to medium
-   */
-  size?: DrawerSize;
-}
-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>;
-
-export const getDrawerItemColors = (theme: Theme, selected: boolean | undefined) => ({
-  color: selected ? theme.palette.primary.main : undefined,
-  fontWeight: selected ? theme.typography.fontWeightBold : theme.typography.fontWeightMedium,
-});
-
-export type DrawerAppBarComponent = FunctionComponent<DrawerAppBarProps>;
-export type DrawerAppBarElement = ReactElement<DrawerAppBarProps, DrawerAppBarComponent>;

package/src/components/drawers/drawers.stories.mdx

@@ -1,15 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import LinkTo from '@storybook/addon-links/react';
-
-<Meta title="Components/Drawers/Introduction" />
-
-# Drawers
-
-<ul>
-  <li><LinkTo kind="Components/Drawers/MiniDrawer">MiniDrawer</LinkTo></li>
-  <li><LinkTo kind="Components/Drawers/DrawerContent">DrawerContent</LinkTo></li>
-  <li><LinkTo kind="Components/Drawers/DrawerItem">DrawerItem</LinkTo></li>
-  <li><LinkTo kind="Components/Drawers/DrawerSection">DrawerSection</LinkTo></li>
-  <li><LinkTo kind="Components/Drawers/DrawerSubheader">DrawerSubheader</LinkTo></li>
-  <li><LinkTo kind="Components/Drawers/DrawerAppBar">DrawerAppBar</LinkTo></li>
-</ul>

package/src/components/drawers/index.ts

@@ -1,8 +0,0 @@
-export * from "./drawer-provider";
-export * from "./drawer-content";
-export * from "./drawer-section";
-export * from "./drawer.types";
-export * from "./drawer-subheader";
-export * from "./drawer-app-bar";
-export * from "./drawer";
-export * from "./drawer-main";

package/src/components/feedback/feedback.stories.mdx

@@ -1,13 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import LinkTo from '@storybook/addon-links/react';
-
-<Meta title="Components/Feedback/Introduction" />
-
-# Feedback
-
-<ul>
-  <li><LinkTo kind="Components/Feedback/LoadingArea">LoadingArea</LinkTo></li>
-  <li><LinkTo kind="Components/Feedback/QueryContainer">QueryContainer</LinkTo></li>
-  <li><LinkTo kind="Components/Feedback/NotificationCenter">NotificationCenter</LinkTo></li>
-  <li><LinkTo kind="Components/Feedback/NotificationCenter">LottieAnimation</LinkTo></li>
-</ul>

package/src/components/feedback/index.ts

@@ -1,2 +0,0 @@
-export * from "./loading-area";
-export * from "./query-container";

package/src/components/feedback/loading-area/index.ts

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

package/src/components/feedback/loading-area/loading-area.stories.tsx

@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { withContainer } from "../../../storybook";
-import { LoadingArea } from "./loading-area";
-
-export default {
-  title: "Components/Feedback/LoadingArea",
-  component: LoadingArea,
-  decorators: [withContainer({ height: 300 })],
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof LoadingArea>;
-type Story = StoryObj<typeof LoadingArea>;
-
-export const Default: Story = {};

package/src/components/feedback/loading-area/loading-area.test.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { expectProgressIndicator } from "~/tests/assertions";
-import { render } from "~/tests/testing-library";
-import { LoadingArea } from "./loading-area";
-
-describe("LoadingArea", () => {
-  it("would render a loading icon", () => {
-    render(<LoadingArea />);
-
-    expectProgressIndicator();
-  });
-});

package/src/components/feedback/loading-area/loading-area.tsx

@@ -1,13 +0,0 @@
-import { CircularProgress, Box } from "@mui/material";
-import React from "react";
-
-/**
- * Displays a centered loading indicator
- */
-export const LoadingArea = () => {
-  return (
-    <Box width={1} height={1} display="flex" justifyContent="center" alignItems="center">
-      <CircularProgress />
-    </Box>
-  );
-};

package/src/components/feedback/query-container/index.ts

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

package/src/components/feedback/query-container/query-container.stories.tsx

@@ -1,87 +0,0 @@
-import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import { withPadding } from "../../../storybook";
-import { QueryContainer, QueryContainerProps } from "./query-container";
-import { Typography, Box } from "@mui/material";
-
-export default {
-  title: "Components/Feedback/QueryContainer",
-  component: QueryContainer,
-  decorators: [withPadding()],
-  parameters: {
-    layout: "fullscreen",
-  },
-  render: (args: QueryContainerProps) => {
-    return (
-      <Box height={300}>
-        <QueryContainer {...args}>
-          <Typography>Children content</Typography>
-        </QueryContainer>
-      </Box>
-    );
-  },
-} satisfies Meta<typeof QueryContainer>;
-type Story = StoryObj<typeof QueryContainer>;
-
-export const Fetching: Story = {
-  args: {
-    fetching: true,
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    loading: true,
-  },
-};
-
-export const FetchingAndLoading: Story = {
-  args: {
-    loading: true,
-    fetching: true,
-  },
-};
-
-export const Error: Story = {
-  args: {
-    fetching: false,
-    error: {
-      name: "Sign in error",
-      message: "User and password doesn't match",
-    },
-  },
-};
-
-export const ErrorWithOnlyMessage: Story = {
-  args: {
-    fetching: false,
-    error: {
-      message: "Internal error",
-    },
-  },
-};
-
-export const Success: Story = {
-  args: {
-    fetching: false,
-    success: {
-      name: "Item added",
-      message: "The new item has been created with id 1",
-    },
-  },
-};
-
-export const SuccessWithOnlyMessage: Story = {
-  args: {
-    fetching: false,
-    success: {
-      message: "The new item has been created with id 1",
-    },
-  },
-};
-
-export const Content: Story = {
-  args: {
-    fetching: false,
-  },
-};