@pautena/react-design-system 0.5.1 → 0.6.0

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

@@ -0,0 +1,94 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { DrawerContent } from "./drawer-content";
+import { withMemoryRouter } from "~/storybook";
+import { Drawer, DrawerProvider } from "./drawer-provider";
+import { mockDrawerNavigation } from "./drawer.mock";
+import { ContentPlaceholder } from "../placeholders";
+import { DrawerState, DrawerVariant } from "./drawer.types";
+import { DrawerAppBar } from "./drawer-app-bar";
+import { DrawerMain } from "./drawer-main";
+
+interface DrawerDemoArgs {
+  initialState: DrawerState;
+  variant: DrawerVariant;
+  selectedItemId?: string;
+  underAppBar?: boolean;
+}
+
+export default {
+  title: "Components/Drawers/Drawer demo",
+  decorators: [withMemoryRouter()],
+  parameters: {
+    layout: "fullscreen",
+  },
+  render: ({ initialState, variant, selectedItemId, underAppBar }) => (
+    <DrawerProvider
+      initialState={initialState}
+      variant={variant}
+      selectedItemId={selectedItemId}
+      underAppBar={underAppBar}
+    >
+      <DrawerAppBar title="Drawer demo" />
+      <Drawer>
+        <DrawerContent nav={mockDrawerNavigation} />
+      </Drawer>
+      <DrawerMain>
+        <ContentPlaceholder p={3} />
+      </DrawerMain>
+    </DrawerProvider>
+  ),
+} satisfies Meta<DrawerDemoArgs>;
+type Story = StoryObj<DrawerDemoArgs>;
+
+export const Temporary: Story = {
+  args: {
+    variant: "temporary",
+    selectedItemId: "item2.3.2",
+  },
+};
+
+export const TemporaryUnder: Story = {
+  args: {
+    ...Temporary.args,
+    variant: "temporary",
+    underAppBar: true,
+  },
+};
+
+export const Persistent: Story = {
+  args: {
+    ...Temporary.args,
+    variant: "persistent",
+  },
+};
+
+export const PersistentUnder: Story = {
+  args: {
+    ...Temporary.args,
+    variant: "persistent",
+    underAppBar: true,
+  },
+};
+
+export const Clipped: Story = {
+  args: {
+    ...Temporary.args,
+    variant: "clipped",
+  },
+};
+
+export const ClippedUnder: Story = {
+  args: {
+    ...Temporary.args,
+    variant: "clipped",
+    underAppBar: true,
+  },
+};
+
+export const MiniDrawer: Story = {
+  args: {
+    ...Temporary.args,
+    variant: "mini",
+  },
+};

package/src/components/drawers/drawer-item/drawer-item-link.tsx

@@ -0,0 +1,149 @@
+import React, { ReactElement } from "react";
+import {
+  Avatar,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  SxProps,
+  Theme,
+  styled,
+  useTheme,
+} from "@mui/material";
+import { Bullet, Label } from "../../data-display";
+import {
+  DrawerItemAvatar,
+  DrawerItemBullet,
+  DrawerItemLabel,
+  DrawerSize,
+  getDrawerItemColors,
+} from "../drawer.types";
+import { Link } from "../../navigation/link";
+import { useDrawer } from "../drawer-provider";
+
+export interface DrawerItemLinkProps {
+  /**
+   * Item size. default to medium
+   */
+  size?: DrawerSize;
+  /**
+   * Text displayed inside the item
+   */
+  text: string;
+  /**
+   * Url where the user is going to be redirected
+   * if the item is clicked
+   */
+  href: string;
+  /**
+   * Icon displayed to the left
+   */
+  icon?: ReactElement;
+  /**
+   * Avatar displayed to the left
+   */
+  avatar?: DrawerItemAvatar;
+  /**
+   * Label with extra info displayed to the right
+   */
+  label?: DrawerItemLabel;
+  /**
+   * Bullet to attract the user attention displyed to the right
+   */
+  bullet?: DrawerItemBullet;
+  /**
+   * The item has to be marked as selected
+   */
+  selected?: boolean;
+  /**
+   * Deep level of this item inside the submenus
+   */
+  level: number;
+  /**
+   * Custom styles
+   */
+  sx?: SxProps<Theme>;
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const StyledLink = styled(Link)(({ theme }) => {
+  return {
+    color: theme.palette.text.primary,
+  };
+});
+
+const sxCollapsedIcon = {
+  minWidth: 0,
+  justifyContent: "center",
+  marginRight: "auto",
+};
+
+/**
+ * Clicable item inside a drawer
+ */
+export const DrawerItemLink = ({
+  text,
+  icon,
+  avatar,
+  label,
+  bullet,
+  href,
+  selected,
+  size = "medium",
+  level,
+  sx,
+}: DrawerItemLinkProps) => {
+  const { state } = useDrawer();
+  const theme = useTheme();
+  const { color, fontWeight } = getDrawerItemColors(theme, selected);
+
+  return (
+    <ListItemButton
+      LinkComponent={StyledLink}
+      dense={size === "small"}
+      aria-label={text}
+      href={href}
+      selected={selected}
+      sx={{
+        ...sx,
+        pl: state === "open" ? theme.spacing(2 + 1.5 * level) : undefined,
+        ...(state === "collapse" && {
+          paddingHorizontal: theme.spacing(2.5),
+          justifyContent: "center",
+        }),
+      }}
+    >
+      {icon && (
+        <ListItemIcon sx={{ color, ...(state === "collapse" && level === 0 && sxCollapsedIcon) }}>
+          {icon}
+        </ListItemIcon>
+      )}
+      {avatar && (
+        <ListItemAvatar
+          sx={{
+            ...(state === "collapse" && level === 0 && sxCollapsedIcon),
+          }}
+        >
+          <Avatar
+            alt={avatar.alt}
+            src={avatar.src}
+            sx={{
+              ...(size === "small" && { width: 24, height: 24 }),
+              ...(state === "collapse" && { width: 30, height: 30 }),
+            }}
+          />
+        </ListItemAvatar>
+      )}
+      <ListItemText
+        disableTypography
+        primary={text}
+        sx={{ color, fontWeight, opacity: state === "collapse" && level === 0 ? 0 : undefined }}
+      />
+      {label && state === "open" && (
+        <Label text={label.text} variant={label.variant} sx={{ ml: 2 }} />
+      )}
+      {bullet && state === "open" && <Bullet variant={bullet.variant} sx={{ ml: 2 }} />}
+    </ListItemButton>
+  );
+};

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

@@ -1,61 +1,153 @@
-import React from "react";
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate, withContainer } from "../../../storybook";
-import { DrawerItem } from "./drawer-item";
+import { Meta, StoryObj } from "@storybook/react";
+import { withMemoryRouter, withContainer } from "~/storybook";
+import { DrawerItem, DrawerItemProps } from "./drawer-item";
 import DiamondIcon from "@mui/icons-material/Diamond";
-import { withMemoryRouter } from "~/storybook";
+import React from "react";
+import { mockMenuDrawerNavigationItem, mockLinkNoIconDrawerNavigationItem } from "../drawer.mock";
+import { DrawerProvider } from "../drawer-provider";
+import { DrawerState } from "../drawer.types";
+import { useTheme } from "@mui/material";
+
+type DrawerItemStoryArgs = DrawerItemProps & {
+  initialState?: DrawerState;
+  selectedItemId?: string;
+};
 
 export default {
   title: "Components/Drawers/DrawerItem",
   component: DrawerItem,
-  decorators: [withMemoryRouter(), withContainer({ width: 250 })],
+  decorators: [withMemoryRouter()],
   parameters: {
     layout: "centered",
   },
-} as ComponentMeta<typeof DrawerItem>;
+  render: ({ initialState = "open", selectedItemId, ...args }) => {
+    const { spacing } = useTheme();
+
+    return (
+      <DrawerProvider initialState={initialState} selectedItemId={selectedItemId}>
+        <DrawerItem {...args} />
+      </DrawerProvider>
+    );
+  },
+} satisfies Meta<DrawerItemStoryArgs>;
+type Story = StoryObj<DrawerItemStoryArgs>;
+
+export const ItemOnlyText: Story = {
+  name: "Item (open)",
+  args: {
+    item: mockLinkNoIconDrawerNavigationItem,
+  },
+};
+
+export const ItemWithIcon: Story = {
+  name: "Item (icon,open)",
+  args: {
+    item: {
+      ...mockLinkNoIconDrawerNavigationItem,
+      icon: <DiamondIcon />,
+    },
+  },
+};
 
-const Template = createTemplate(DrawerItem);
+export const ItemWithAvatar: Story = {
+  name: "Item (avatar,open)",
+  args: {
+    item: {
+      ...mockLinkNoIconDrawerNavigationItem,
+      avatar: {
+        src: "https://c.pxhere.com/images/f6/e0/022ab77c391925931fe227c97ab4-1447675.jpg!d",
+        alt: "Avatar 1",
+      },
+    },
+  },
+};
 
-export const OnlyText = Template.bind({});
-OnlyText.args = {
-  text: "Lorem ipsum",
-  href: "/items/1",
+export const ItemWithLabel: Story = {
+  name: "Item (icon,label,open)",
+  args: {
+    item: {
+      ...mockLinkNoIconDrawerNavigationItem,
+      icon: <DiamondIcon />,
+      label: {
+        text: "new",
+        variant: "info",
+      },
+    },
+  },
 };
 
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  text: "Lorem ipsum",
-  href: "/items/1",
-  icon: <DiamondIcon />,
+export const ItemWithBullet: Story = {
+  name: "Item (icon,bullet,open)",
+  args: {
+    item: {
+      ...mockLinkNoIconDrawerNavigationItem,
+      icon: <DiamondIcon />,
+      bullet: {
+        variant: "error",
+      },
+    },
+  },
+};
+
+export const ItemSelected: Story = {
+  name: "Item (icon,label,selected,open)",
+  args: {
+    ...ItemWithLabel.args,
+    selectedItemId: mockLinkNoIconDrawerNavigationItem.id,
+  },
+};
+
+export const ItemSizeSmallWithIcon: Story = {
+  name: "Item (icon,label,small,open)",
+  args: {
+    ...ItemWithLabel.args,
+    size: "small",
+  },
+};
+
+export const ItemSizeSmallWithAvatar: Story = {
+  name: "Item (avatar,small,open)",
+  args: {
+    ...ItemWithAvatar.args,
+    size: "small",
+  },
+};
+
+export const ItemSizeSmallSelected: Story = {
+  name: "Item (icon,label,selected,small,open)",
+  args: {
+    ...ItemSelected.args,
+    size: "small",
+  },
+};
+
+export const MenuNotSelected: Story = {
+  name: "Menu (open)",
+  args: {
+    item: mockMenuDrawerNavigationItem,
+  },
 };
 
-export const WithAvatar = Template.bind({});
-WithAvatar.args = {
-  text: "Lorem ipsum",
-  href: "/items/1",
-  avatar: {
-    src: "https://c.pxhere.com/images/f6/e0/022ab77c391925931fe227c97ab4-1447675.jpg!d",
-    alt: "Avatar 1",
+export const MenuSelected: Story = {
+  name: "Menu (selected,open)",
+  args: {
+    ...MenuNotSelected.args,
+    selectedItemId: mockMenuDrawerNavigationItem.id,
   },
 };
 
-export const WithLabel = Template.bind({});
-WithLabel.args = {
-  text: "Lorem ipsum",
-  href: "/items/1",
-  icon: <DiamondIcon />,
-  label: {
-    text: "new",
-    variant: "info",
+export const MenuNoSelectedSmall: Story = {
+  name: "Menu (small,open)",
+  args: {
+    ...MenuNotSelected.args,
+    size: "small",
   },
 };
 
-export const WithBullet = Template.bind({});
-WithBullet.args = {
-  text: "Lorem ipsum",
-  href: "/items/1",
-  icon: <DiamondIcon />,
-  bullet: {
-    variant: "error",
+export const MenuSelectedSmall: Story = {
+  name: "Menu (small,selected,open)",
+  args: {
+    ...MenuSelected.args,
+    size: "small",
   },
 };