@pautena/react-design-system 0.10.1 → 0.11.0

package/dist/esm/types/components/containers/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./content";
 export * from "./center-container";
+export * from "./list-panel";

package/dist/esm/types/components/containers/list-panel/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./list-panel";
+export * from "./list-panel.context";

package/dist/esm/types/components/containers/list-panel/list-panel-panel.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from "react";
+export type ListPanelPanelProps = PropsWithChildren<{
+    ids: string[];
+}>;
+export declare const ListPanelPanel: ({ ids, children }: ListPanelPanelProps) => JSX.Element | null;

package/dist/esm/types/components/containers/list-panel/list-panel.context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ListPanelContext: import("react").Context<string | undefined>;
+export declare const ListPanelContextProvider: import("react").Provider<string | undefined>;
+export declare const useListPanel: () => string | undefined;

package/dist/esm/types/components/containers/list-panel/list-panel.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from "react";
+export interface ListPanelItem {
+    id: string;
+    text: string;
+    tooltip?: string;
+}
+export type ListPanelProps = PropsWithChildren<{
+    defaultSelectedItem?: string;
+    items: ListPanelItem[];
+    onSelectedItemChange?: (id: string) => void;
+}>;
+export declare const ListPanel: ({ items, defaultSelectedItem, children, onSelectedItemChange, }: ListPanelProps) => JSX.Element;

package/dist/esm/types/components/containers/list-panel/list-panel.mocks.d.ts

@@ -0,0 +1,4 @@
+import { ListPanelItem } from "./list-panel";
+export declare const ListPanelDemoContent: () => JSX.Element;
+export declare const mockItemsShort: ListPanelItem[];
+export declare const mockItemsLong: ListPanelItem[];

package/dist/index.d.ts

@@ -347,6 +347,22 @@ interface CenterContainerProps {
 }
 declare function CenterContainer({ children, centerVertical, centerHorizontal, sx, }: CenterContainerProps): JSX.Element;
 
+interface ListPanelItem {
+    id: string;
+    text: string;
+    tooltip?: string;
+}
+type ListPanelProps = PropsWithChildren<{
+    defaultSelectedItem?: string;
+    items: ListPanelItem[];
+    onSelectedItemChange?: (id: string) => void;
+}>;
+declare const ListPanel: ({ items, defaultSelectedItem, children, onSelectedItemChange, }: ListPanelProps) => JSX.Element;
+
+declare const ListPanelContext: React$1.Context<string | undefined>;
+declare const ListPanelContextProvider: React$1.Provider<string | undefined>;
+declare const useListPanel: () => string | undefined;
+
 interface DrawerAppBarProps extends AppBarProps {
     title?: string;
 }
@@ -1050,4 +1066,4 @@ type TabProviderProps = PropsWithChildren<{
 }>;
 declare const TabProvider: ({ children, initialValue }: TabProviderProps) => JSX.Element;
 
-export { ArrayFieldType, ArrayGroupField, ArrayInstanceType, Autocomplete, AutocompleteProps, BaseFieldType, BaseValueProps, BasicModelInstance, Board, BoardProps, BootstrapDialog, BootstrapDialogDialogProps, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, ConfirmDialog, ConfirmDialogProps, Content, ContentComponent, ContentElement, ContentPlaceholder, ContentPlaceholderProps, ContentProps, DateRangeCalendar, DateRangeCalendarProps, DateRangePicker, DateRangePickerProps, DefaultPlaceholder, DialogAction, Drawer, DrawerAppBar, DrawerAppBarComponent, DrawerAppBarElement, DrawerAppBarProps, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerHeader, DrawerItemAvatar, DrawerItemBullet, DrawerItemLabel, DrawerLayout, DrawerLayoutProps, DrawerMain, DrawerMainProps, DrawerNavigation, DrawerNavigationItem, DrawerNavigationItemCollapsable, DrawerNavigationItemLink, DrawerNavigationSection, DrawerProps, DrawerProvider, DrawerProviderProps, DrawerSection, DrawerSectionProps, DrawerSize, DrawerState, DrawerSubheader, DrawerSubheaderProps, DrawerVariant, EditInputType, EditableValueProps, EnhancedRemoteTable, EnhancedRemoteTableProps, EnhancedTable, EnhancedTableHead, ExpandableAlert, ExpandableAlertProps, FieldType, FormDialog, FormDialogProps, GroupField, GroupInstanceType, GroupValueCard, GroupValueCardProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderLayoutError, HeaderLayoutProps, HeaderNavigationButton, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, LoadingArea, LoadingRequest, LoremIpsumPlaceholder, LoremIpsumPlaceholderProps, Markdown, MarkdownProps, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIcon, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, Select, SelectProps, SelectSize, SignIn, SignInProps, SingleFieldType, SkeletonCard, SkeletonCardProps, SkeletonGrid, SkeletonGridProps, SuccessRequest, TabCard, TabCardPanel, TabCardPanelProps, TabCardProps, TabContext, TabContextProvider, TabData, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, TextField, TextFieldProps, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueEditButton, ValueEditButtonProps, ValueEditButtons, ValueEditButtonsProps, ValueItem, ValueItemComponent, ValueItemElement, ValueItemProps, ValueLabel, ValueLabelProps, ValueRating, ValueRatingProps, ValueText, ValueTextProps, bulletClasses, getDrawerItemColors, getFormData, getRandomItem, labelClasses, markdownDefaultOptions, newArrayWithSize, newBreakpointsCounter, newInstanceFromValuesOrZeroValue, useDialog, useDrawer, useEditableValueDisplay, useGetDefaultThemeColor, useNotificationCenter, useNotifyWhenValueChanges, useTab, valueItemClasses };
+export { ArrayFieldType, ArrayGroupField, ArrayInstanceType, Autocomplete, AutocompleteProps, BaseFieldType, BaseValueProps, BasicModelInstance, Board, BoardProps, BootstrapDialog, BootstrapDialogDialogProps, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, ConfirmDialog, ConfirmDialogProps, Content, ContentComponent, ContentElement, ContentPlaceholder, ContentPlaceholderProps, ContentProps, DateRangeCalendar, DateRangeCalendarProps, DateRangePicker, DateRangePickerProps, DefaultPlaceholder, DialogAction, Drawer, DrawerAppBar, DrawerAppBarComponent, DrawerAppBarElement, DrawerAppBarProps, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerHeader, DrawerItemAvatar, DrawerItemBullet, DrawerItemLabel, DrawerLayout, DrawerLayoutProps, DrawerMain, DrawerMainProps, DrawerNavigation, DrawerNavigationItem, DrawerNavigationItemCollapsable, DrawerNavigationItemLink, DrawerNavigationSection, DrawerProps, DrawerProvider, DrawerProviderProps, DrawerSection, DrawerSectionProps, DrawerSize, DrawerState, DrawerSubheader, DrawerSubheaderProps, DrawerVariant, EditInputType, EditableValueProps, EnhancedRemoteTable, EnhancedRemoteTableProps, EnhancedTable, EnhancedTableHead, ExpandableAlert, ExpandableAlertProps, FieldType, FormDialog, FormDialogProps, GroupField, GroupInstanceType, GroupValueCard, GroupValueCardProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderLayoutError, HeaderLayoutProps, HeaderNavigationButton, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, ListPanel, ListPanelContext, ListPanelContextProvider, ListPanelItem, ListPanelProps, LoadingArea, LoadingRequest, LoremIpsumPlaceholder, LoremIpsumPlaceholderProps, Markdown, MarkdownProps, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIcon, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, Select, SelectProps, SelectSize, SignIn, SignInProps, SingleFieldType, SkeletonCard, SkeletonCardProps, SkeletonGrid, SkeletonGridProps, SuccessRequest, TabCard, TabCardPanel, TabCardPanelProps, TabCardProps, TabContext, TabContextProvider, TabData, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, TextField, TextFieldProps, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueEditButton, ValueEditButtonProps, ValueEditButtons, ValueEditButtonsProps, ValueItem, ValueItemComponent, ValueItemElement, ValueItemProps, ValueLabel, ValueLabelProps, ValueRating, ValueRatingProps, ValueText, ValueTextProps, bulletClasses, getDrawerItemColors, getFormData, getRandomItem, labelClasses, markdownDefaultOptions, newArrayWithSize, newBreakpointsCounter, newInstanceFromValuesOrZeroValue, useDialog, useDrawer, useEditableValueDisplay, useGetDefaultThemeColor, useListPanel, useNotificationCenter, useNotifyWhenValueChanges, useTab, valueItemClasses };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -99,7 +99,7 @@
     "tslib": "^2.6.0",
     "typescript": "^5.1.6",
     "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.32.2"
+    "vitest": "^0.33.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",

package/src/components/containers/containers.stories.mdx

@@ -8,4 +8,5 @@ import LinkTo from '@storybook/addon-links/react';
 <ul>
   <li><LinkTo kind="Components/Containers/CenterContainer">CenterContainer</LinkTo></li>
   <li><LinkTo kind="Components/Containers/Content">Content</LinkTo></li>
+  <li><LinkTo kind="Components/Containers/ListPanel">ListPanel</LinkTo></li>
 </ul>

package/src/components/containers/index.ts

@@ -1,2 +1,3 @@
 export * from "./content";
 export * from "./center-container";
+export * from "./list-panel";

package/src/components/containers/list-panel/index.ts

@@ -0,0 +1,2 @@
+export * from "./list-panel";
+export * from "./list-panel.context";

package/src/components/containers/list-panel/list-panel-panel.tsx

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from "react";
+import { useListPanel } from "./list-panel.context";
+import React from "react";
+
+export type ListPanelPanelProps = PropsWithChildren<{
+  ids: string[];
+}>;
+
+export const ListPanelPanel = ({ ids, children }: ListPanelPanelProps) => {
+  const selectedId = useListPanel();
+
+  if (selectedId && !ids.includes(selectedId)) {
+    return null;
+  }
+
+  return <>{children}</>;
+};

package/src/components/containers/list-panel/list-panel.context.tsx

@@ -0,0 +1,5 @@
+import { createContext, useContext } from "react";
+
+export const ListPanelContext = createContext<string | undefined>(undefined);
+export const ListPanelContextProvider = ListPanelContext.Provider;
+export const useListPanel = () => useContext(ListPanelContext);

package/src/components/containers/list-panel/list-panel.mocks.tsx

@@ -0,0 +1,117 @@
+import { Box } from "@mui/material";
+import { ListPanelItem } from "./list-panel";
+import { useListPanel } from "./list-panel.context";
+import React from "react";
+
+export const ListPanelDemoContent = () => {
+  const selectedId = useListPanel();
+
+  return (
+    <Box width={1} display="flex" justifyContent="center" alignItems="center" pt={2}>
+      Panel content. Selected id: {selectedId}
+    </Box>
+  );
+};
+
+export const mockItemsShort: ListPanelItem[] = [
+  {
+    id: "all",
+    text: "all",
+  },
+  {
+    id: "inbox",
+    text: "Inbox",
+    tooltip: "this is the inbox tooltip",
+  },
+  {
+    id: "sent",
+    text: "Sent",
+  },
+  {
+    id: "drafts",
+    text: "Drafts",
+  },
+];
+
+export const mockItemsLong: ListPanelItem[] = [
+  {
+    id: "item1",
+    text: "Item 1",
+  },
+  {
+    id: "item2",
+    text: "Item 2",
+  },
+  {
+    id: "item3",
+    text: "Item 3",
+  },
+  {
+    id: "item4",
+    text: "Item 4",
+  },
+  {
+    id: "item5",
+    text: "Item 5",
+  },
+  {
+    id: "item6",
+    text: "Item 6",
+  },
+  {
+    id: "item7",
+    text: "Item 7",
+  },
+  {
+    id: "item8",
+    text: "Item 8",
+  },
+  {
+    id: "item9",
+    text: "Item 9",
+  },
+  {
+    id: "item10",
+    text: "Item 10",
+  },
+  {
+    id: "item11",
+    text: "Item 11",
+  },
+  {
+    id: "item12",
+    text: "Item 12",
+  },
+  {
+    id: "item13",
+    text: "Item 13",
+  },
+  {
+    id: "item14",
+    text: "Item 14",
+  },
+  {
+    id: "item15",
+    text: "Item 15",
+  },
+  {
+    id: "item16",
+    text: "Item 16",
+  },
+  {
+    id: "item17",
+    text: "Item 17",
+  },
+  {
+    id: "item18",
+    text: "Item 18",
+  },
+  {
+    id: "item19",
+    text: "Item 19",
+  },
+  {
+    id: "item20",
+    text: "Item 20",
+  },
+];

package/src/components/containers/list-panel/list-panel.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { withContainer } from "../../../storybook";
+import { ListPanel } from "./list-panel";
+import React from "react";
+import { Box } from "@mui/material";
+import { ListPanelPanel } from "./list-panel-panel";
+import { ListPanelDemoContent, mockItemsLong, mockItemsShort } from "./list-panel.mocks";
+
+export default {
+  title: "Components/Containers/ListPanel",
+  component: ListPanel,
+  decorators: [withContainer({ width: 800, height: 600 })],
+  render: (args) => (
+    <ListPanel {...args}>
+      <ListPanelDemoContent />
+      <ListPanelPanel ids={["drafts"]}>
+        <Box>Drafts panel</Box>
+      </ListPanelPanel>
+    </ListPanel>
+  ),
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof ListPanel>;
+type Story = StoryObj<typeof ListPanel>;
+
+export const Short: Story = {
+  args: {
+    items: mockItemsShort,
+  },
+};
+
+export const Long: Story = {
+  args: {
+    items: mockItemsLong,
+    defaultSelectedItem: "item3",
+  },
+};

package/src/components/containers/list-panel/list-panel.test.tsx

@@ -0,0 +1,65 @@
+import { fireEvent, render, screen } from "~/tests/testing-library";
+import { ListPanel, ListPanelItem } from "./list-panel";
+import { ListPanelDemoContent, mockItemsShort } from "./list-panel.mocks";
+import React from "react";
+import { ListPanelPanel } from "./list-panel-panel";
+import { Box } from "@mui/material";
+import { vi } from "vitest";
+
+describe("ListPanel", () => {
+  const renderComponent = ({
+    items,
+    defaultSelectedItem,
+  }: {
+    items: ListPanelItem[];
+    defaultSelectedItem?: string;
+  }) => {
+    const onSelectedItemChange = vi.fn();
+    render(
+      <ListPanel
+        items={items}
+        defaultSelectedItem={defaultSelectedItem}
+        onSelectedItemChange={onSelectedItemChange}
+      >
+        <ListPanelDemoContent />
+        <ListPanelPanel ids={["drafts"]}>
+          <Box>Drafts panel</Box>
+        </ListPanelPanel>
+      </ListPanel>,
+    );
+
+    return { onSelectedItemChange };
+  };
+
+  it("should render a list item for each item", () => {
+    renderComponent({ items: mockItemsShort });
+
+    mockItemsShort.forEach(({ text }) => {
+      expect(screen.getByRole("button", { name: text })).toBeVisible();
+    });
+  });
+
+  it("should mark as selected the default item", () => {
+    renderComponent({ items: mockItemsShort, defaultSelectedItem: "inbox" });
+
+    expect(screen.getByText(/selected id: inbox/i)).toBeVisible();
+  });
+
+  it("should change the selected item if one is clicked", () => {
+    const { onSelectedItemChange } = renderComponent({ items: mockItemsShort });
+
+    fireEvent.click(screen.getByRole("button", { name: /drafts/i }));
+
+    expect(screen.getByText(/selected id: drafts/i)).toBeVisible();
+    expect(onSelectedItemChange).toHaveBeenCalledTimes(1);
+    expect(onSelectedItemChange).toHaveBeenCalledWith("drafts");
+  });
+
+  it("should render the panel if the draft is selected", () => {
+    renderComponent({ items: mockItemsShort });
+
+    fireEvent.click(screen.getByRole("button", { name: /drafts/i }));
+
+    expect(screen.getByText(/drafts panel/i)).toBeVisible();
+  });
+}); 

package/src/components/containers/list-panel/list-panel.tsx

@@ -0,0 +1,87 @@
+import { Grid, List, ListItemButton, ListItemText, Paper, Tooltip, useTheme } from "@mui/material";
+import React, { PropsWithChildren, useState } from "react";
+import { useGetDefaultThemeColor } from "~/utils";
+import { ListPanelContextProvider } from "./list-panel.context";
+import { grey } from "@mui/material/colors";
+
+export interface ListPanelItem {
+  id: string;
+  text: string;
+  tooltip?: string;
+}
+
+export type ListPanelProps = PropsWithChildren<{
+  defaultSelectedItem?: string;
+  items: ListPanelItem[];
+  onSelectedItemChange?: (id: string) => void;
+}>;
+
+export const ListPanel = ({
+  items,
+  defaultSelectedItem,
+  children,
+  onSelectedItemChange = () => null,
+}: ListPanelProps) => {
+  const bgColor = useGetDefaultThemeColor();
+  const { palette, typography } = useTheme();
+  const [selectedItem, setSelectedItem] = useState(defaultSelectedItem);
+
+  const handleSelectItem = (id: string) => {
+    setSelectedItem(id);
+    onSelectedItemChange(id);
+  };
+
+  return (
+    <ListPanelContextProvider value={selectedItem}>
+      <Grid container bgcolor={bgColor} height={1}>
+        <Grid item xs={3} pl={1} height={1}>
+          <List sx={{ height: 1, overflowY: "auto" }}>
+            {items.map(({ id, text, tooltip }) => {
+              const selected = id === selectedItem;
+
+              const contentEl = (
+                <ListItemButton
+                  key={id}
+                  dense
+                  selected={selected}
+                  disableRipple
+                  onClick={() => handleSelectItem(id)}
+                  aria-label={text}
+                  sx={{ backgroundColor: "transparent !important" }}
+                >
+                  <ListItemText
+                    primary={text}
+                    primaryTypographyProps={{
+                      fontWeight: selected ? typography.fontWeightBold : undefined,
+                      color: selected ? typography.body1.color : grey[600],
+                    }}
+                  />
+                </ListItemButton>
+              );
+
+              return tooltip ? (
+                <Tooltip key={id} title={tooltip} enterDelay={1500} placement="right">
+                  {contentEl}
+                </Tooltip>
+              ) : (
+                contentEl
+              );
+            })}
+          </List>
+        </Grid>
+        <Grid item xs={9} pl={2} py={1} pr={1}>
+          <Paper
+            elevation={0}
+            sx={{
+              width: 1,
+              height: 1,
+              backgroundColor: palette.background.paper,
+            }}
+          >
+            {children}
+          </Paper>
+        </Grid>
+      </Grid>
+    </ListPanelContextProvider>
+  );
+};