@pautena/react-design-system 0.5.1 → 0.6.0

package/src/generators/table-list/table-list.stories.tsx

@@ -1,85 +1,91 @@
 import React from "react";
 import { useDemoData } from "@mui/x-data-grid-generator";
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { Meta, StoryObj } from "@storybook/react";
 import { TableList, TableListProps } from "./table-list";
 import { action } from "@storybook/addon-actions";
 import { BasicModelInstance } from "~/generators";
 
 const maxColumns = 3;
 
-export default {
-  title: "Generators/TableList",
-  component: TableList,
-  parameters: {
-    layout: "fullscreen",
-  },
-} as ComponentMeta<typeof TableList>;
-
 interface TemplateProps<T extends BasicModelInstance> extends TableListProps<T> {
   size: number;
   dataSetType: "Commodity" | "Employee";
 }
 
-const Template = createTemplate(
-  <T extends BasicModelInstance>({ dataSetType, size, ...rest }: TemplateProps<T>) => {
-    const { data } = useDemoData({
-      dataSet: dataSetType,
-      rowLength: size,
-      maxColumns,
-    });
-    const { rows } = data;
-    const columns = data.columns.map(({ field, headerName }) => ({
-      id: field,
-      label: headerName || "invalid",
-      sort: true,
-      disablePadding: false,
-      numeric: false,
-    }));
+const DummyTableList = <T extends BasicModelInstance>({
+  dataSetType,
+  size,
+  ...rest
+}: TemplateProps<T>) => {
+  const { data } = useDemoData({
+    dataSet: dataSetType,
+    rowLength: size,
+    maxColumns,
+  });
+  const { rows } = data;
+  const columns = data.columns.map(({ field, headerName }) => ({
+    id: field,
+    label: headerName || "invalid",
+    sort: true,
+    disablePadding: false,
+    numeric: false,
+  }));
+
+  return (
+    <TableList {...rest} columns={columns} data={rows as any} onClick={action("onClick row")} />
+  );
+};
 
-    return (
-      <TableList {...rest} columns={columns} data={rows as any} onClick={action("onClick row")} />
-    );
+export default {
+  title: "Generators/TableList",
+  component: DummyTableList,
+  parameters: {
+    layout: "fullscreen",
   },
-);
+} satisfies Meta<typeof DummyTableList>;
+type Story = StoryObj<typeof DummyTableList>;
 
-export const Default = Template.bind({});
-Default.args = {
-  size: 40,
-  dataSetType: "Commodity",
-  search: true,
+export const Default: Story = {
+  args: {
+    size: 40,
+    dataSetType: "Commodity",
+    search: true,
+  },
 };
 
-export const Loading = Template.bind({});
-Loading.args = {
-  size: 40,
-  dataSetType: "Commodity",
-  search: true,
-  loading: true,
+export const Loading: Story = {
+  args: {
+    size: 40,
+    dataSetType: "Commodity",
+    search: true,
+    loading: true,
+  },
 };
 
-export const WihtoutSearch = Template.bind({});
-WihtoutSearch.args = {
-  size: 40,
-  dataSetType: "Commodity",
-  search: false,
+export const WihtoutSearch: Story = {
+  args: {
+    size: 40,
+    dataSetType: "Commodity",
+    search: false,
+  },
 };
 
-export const WithOptions = Template.bind({});
-WithOptions.args = {
-  size: 40,
-  dataSetType: "Commodity",
-  search: false,
-  options: [
-    {
-      id: "edit",
-      label: "Edit",
-      onClick: action("Option edit"),
-    },
-    {
-      id: "remove",
-      label: "Remove",
-      onClick: action("Option remove"),
-    },
-  ],
+export const WithOptions: Story = {
+  args: {
+    size: 40,
+    dataSetType: "Commodity",
+    search: false,
+    options: [
+      {
+        id: "edit",
+        label: "Edit",
+        onClick: action("Option edit"),
+      },
+      {
+        id: "remove",
+        label: "Remove",
+        onClick: action("Option remove"),
+      },
+    ],
+  },
 };

package/src/generators/table-list/table-list.test.tsx

@@ -6,6 +6,7 @@ import { TableRowOption, TableList } from "./table-list";
 import { HeadCell } from "../../components/tables/enhanced-table";
 import { BasicModelInstance } from "..";
 import { expectProgressIndicator } from "~/tests/assertions";
+import { vi } from "vitest";
 
 const columns: HeadCell<BasicModelInstance>[] = [
   {
@@ -62,12 +63,12 @@ const options = [
   {
     id: "edit",
     label: "Edit",
-    onClick: jest.fn(),
+    onClick: vi.fn(),
   },
   {
     id: "remove",
     label: "Remove",
-    onClick: jest.fn(),
+    onClick: vi.fn(),
   },
 ];
 
@@ -77,7 +78,7 @@ describe("TableList", () => {
     defaultSort = "value",
     loading = false,
     options = undefined,
-    onClick = jest.fn(),
+    onClick = vi.fn(),
   }: {
     defaultSort?: string;
     loading?: boolean;

package/src/layouts/drawer-layout/drawer-layout.stories.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { DrawerLayoutProps } from "./drawer-layout";
+import { mockDrawerNavigation } from "../../components/drawers/drawer.mock";
+import { ContentPlaceholder, DrawerContent, Drawer, DrawerAppBar } from "../../components";
+import { withMemoryRouter } from "~/storybook";
+
+export default {
+  title: "Layouts/DrawerLayout",
+  component: DrawerLayoutProps,
+  decorators: [withMemoryRouter()],
+  parameters: {
+    layout: "fullscreen",
+  },
+  render: (args) => (
+    <DrawerLayoutProps {...args}>
+      <Drawer>
+        <DrawerContent nav={mockDrawerNavigation} />
+      </Drawer>
+      <DrawerAppBar title="Lorem ipsum" />
+      <ContentPlaceholder p={3} />
+    </DrawerLayoutProps>
+  ),
+} satisfies Meta<typeof DrawerLayoutProps>;
+type Story = StoryObj<typeof DrawerLayoutProps>;
+
+export const Temporary: Story = {
+  args: {
+    drawerProviderProps: {
+      variant: "temporary",
+    },
+  },
+};
+
+export const Persistent: Story = {
+  args: {
+    drawerProviderProps: {
+      variant: "persistent",
+    },
+  },
+};
+
+export const Clipped: Story = {
+  args: {
+    drawerProviderProps: {
+      variant: "clipped",
+    },
+  },
+};
+
+export const Mini: Story = {
+  args: {
+    drawerProviderProps: {
+      variant: "mini",
+    },
+  },
+};

package/src/layouts/{app-bar-with-drawer-layout/app-bar-with-drawer-layout.test.tsx → drawer-layout/drawer-layout.test.tsx}

@@ -1,12 +1,22 @@
 import React from "react";
-import { MiniDrawerStory } from "./app-bar-with-drawer-layout.stories";
 import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
 import { expectContentPlaceholder } from "~/tests/assertions";
+import { Drawer, DrawerContent, DrawerAppBar, ContentPlaceholder } from "~/components";
+import { mockDrawerNavigation } from "~/components/drawers/drawer.mock";
+import { DrawerLayoutProps } from "./drawer-layout";
 
-describe("AppBarWithDrawerLayout", () => {
+describe("DrawerLayout", () => {
   const renderComponent = () => {
-    return render(<MiniDrawerStory />);
+    return render(
+      <DrawerLayoutProps>
+        <Drawer>
+          <DrawerContent nav={mockDrawerNavigation} />
+        </Drawer>
+        <DrawerAppBar title="Lorem ipsum" />
+        <ContentPlaceholder p={3} />
+      </DrawerLayoutProps>,
+    );
   };
 
   it("would render a drawer", async () => {
@@ -14,7 +24,7 @@ describe("AppBarWithDrawerLayout", () => {
 
     await userEvent.click(screen.getByTestId("MenuIcon"));
 
-    expect(screen.getByRole("button", { name: /item 1.1/i })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /item 1.1/i })).toBeInTheDocument();
   });
 
   it("would render an appbar", () => {

package/src/layouts/drawer-layout/drawer-layout.tsx

@@ -0,0 +1,26 @@
+import React, { ReactNode } from "react";
+import { DrawerAppBarElement, DrawerElement, DrawerMain } from "../../components/drawers";
+import {
+  DrawerProvider,
+  DrawerProviderProps,
+} from "../../components/drawers/drawer-provider/drawer.provider";
+
+export interface DrawerLayoutProps {
+  drawerProviderProps?: DrawerProviderProps;
+  children: [DrawerElement, DrawerAppBarElement, ReactNode];
+}
+
+export const DrawerLayoutProps = ({
+  drawerProviderProps,
+  children: childrenProps,
+}: DrawerLayoutProps) => {
+  const [appBar, drawer, children] = childrenProps;
+
+  return (
+    <DrawerProvider {...drawerProviderProps}>
+      {appBar}
+      {drawer}
+      <DrawerMain>{children}</DrawerMain>
+    </DrawerProvider>
+  );
+};

package/src/layouts/drawer-layout/index.ts

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

package/src/layouts/header-layout/header-layout.stories.tsx

@@ -1,6 +1,5 @@
 import React, { ReactElement } from "react";
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { Meta, StoryObj } from "@storybook/react";
 import { HeaderLayout, HeaderLayoutProps } from "./header-layout";
 import { withMemoryRouter } from "~/storybook";
 import { withFullHeight } from "../../storybook";
@@ -48,40 +47,40 @@ const tabs: HeaderTab[] = [
   },
 ];
 
-export default {
-  title: "Layouts/HeaderLayout",
-  component: HeaderLayout,
-  decorators: [withMemoryRouter(), withFullHeight],
-  parameters: {
-    layout: "fullscreen",
-  },
-} as ComponentMeta<typeof HeaderLayout>;
-
 interface HeaderLayoutStoryProps extends HeaderLayoutProps {
   headerProps: HeaderProps;
   contentChildren: ReactElement;
 }
 
-const Template = createTemplate(
-  ({ headerProps, contentChildren, ...rest }: HeaderLayoutStoryProps) => {
-    return (
-      <HeaderLayout {...rest}>
-        <Header {...headerProps} />
-        <Content>{contentChildren}</Content>
-      </HeaderLayout>
-    );
+const DummyHeaderLayout = ({ headerProps, contentChildren, ...rest }: HeaderLayoutStoryProps) => {
+  return (
+    <HeaderLayout {...rest}>
+      <Header {...headerProps} />
+      <Content>{contentChildren}</Content>
+    </HeaderLayout>
+  );
+};
+
+export default {
+  title: "Layouts/HeaderLayout",
+  component: DummyHeaderLayout,
+  decorators: [withMemoryRouter(), withFullHeight],
+  parameters: {
+    layout: "fullscreen",
   },
-);
-
-export const Skeleton = Template.bind({});
-Skeleton.args = {
-  headerProps: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    breadcrumbs,
-    actions,
+} satisfies Meta<typeof DummyHeaderLayout>;
+type Story = StoryObj<typeof DummyHeaderLayout>;
+
+export const Skeleton: Story = {
+  args: {
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+    },
+    contentChildren: <SkeletonGrid />,
   },
-  contentChildren: <SkeletonGrid />,
 };
 
 const ListContent = () => {
@@ -111,44 +110,47 @@ const ListContent = () => {
   );
 };
 
-export const List = Template.bind({});
-List.args = {
-  headerProps: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    breadcrumbs,
-    actions,
+export const List: Story = {
+  args: {
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+    },
+    contentChildren: <ListContent />,
   },
-  contentChildren: <ListContent />,
 };
 
-export const Details = Template.bind({});
-Details.args = {
-  headerProps: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    breadcrumbs,
-    actions,
+export const Details: Story = {
+  args: {
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+    },
+    contentChildren: <ObjectDetails model={mockModel} instance={createModelInstance(mockModel)} />,
   },
-  contentChildren: <ObjectDetails model={mockModel} instance={createModelInstance(mockModel)} />,
 };
 
-export const Form = Template.bind({});
-Form.args = {
-  headerProps: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    breadcrumbs,
-    actions,
+export const Form: Story = {
+  args: {
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+    },
+    contentChildren: (
+      <ModelForm
+        model={mockModel}
+        initialValues={createModelInstance(mockModel)}
+        saveButtonText="Save"
+        onSubmit={action("Save form data")}
+      />
+    ),
   },
-  contentChildren: (
-    <ModelForm
-      model={mockModel}
-      initialValues={createModelInstance(mockModel)}
-      saveButtonText="Save"
-      onSubmit={action("Save form data")}
-    />
-  ),
 };
 
 const DataTableContent = () => {
@@ -164,49 +166,52 @@ const DataTableContent = () => {
   return <DataGrid rows={rows} columns={columns as any} pagination sx={{ height: 400 }} />;
 };
 
-export const DataTable = Template.bind({});
-DataTable.args = {
-  headerProps: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    breadcrumbs,
-    actions,
+export const DataTable: Story = {
+  args: {
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+    },
+    contentChildren: <DataTableContent />,
   },
-  contentChildren: <DataTableContent />,
 };
 
-export const Tabs = Template.bind({});
-Tabs.args = {
-  headerProps: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    breadcrumbs,
-    actions,
-    tabs,
+export const Tabs: Story = {
+  args: {
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+      tabs,
+    },
+    contentChildren: (
+      <Box>
+        <TabPanel index={0}>
+          <Typography>Panel 1</Typography>
+        </TabPanel>
+        <TabPanel index={[1, 2]}>
+          <Typography>Panel 2</Typography>
+        </TabPanel>
+        <TabPanel index={3}>
+          <Typography>Panel 3</Typography>
+        </TabPanel>
+      </Box>
+    ),
   },
-  contentChildren: (
-    <Box>
-      <TabPanel index={0}>
-        <Typography>Panel 1</Typography>
-      </TabPanel>
-      <TabPanel index={[1, 2]}>
-        <Typography>Panel 2</Typography>
-      </TabPanel>
-      <TabPanel index={3}>
-        <Typography>Panel 3</Typography>
-      </TabPanel>
-    </Box>
-  ),
 };
 
-export const Loading = Template.bind({});
-Loading.args = {
-  loading: true,
-  headerProps: {
-    title: "Lorem ipsum",
-    subtitle: "Dolor sit amet",
-    breadcrumbs,
-    actions,
+export const Loading: Story = {
+  args: {
+    loading: true,
+    headerProps: {
+      title: "Lorem ipsum",
+      subtitle: "Dolor sit amet",
+      breadcrumbs,
+      actions,
+    },
+    contentChildren: <SkeletonGrid />,
   },
-  contentChildren: <SkeletonGrid />,
 };

package/src/layouts/index.ts

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

package/src/layouts/layouts.stories.mdx

@@ -6,6 +6,6 @@ import LinkTo from '@storybook/addon-links/react';
 ## Layouts
 
 <ul>
-  <li><LinkTo kind="Layouts/AppBarWithDrawer">AppBarWithDrawer</LinkTo></li>
+  <li><LinkTo kind="Layouts/DrawerLayout">DrawerLayout</LinkTo></li>
   <li><LinkTo kind="Layouts/HeaderLayout">HeaderLayout</LinkTo></li>
 </ul>

package/src/providers/notification-center/notification-center.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { NotificationCenterProvider } from "./notification-center.provider";
 import { useNotificationCenter } from "./notification-center.context";
 import { Button, Box } from "@mui/material";
@@ -23,7 +23,7 @@ export default {
   parameters: {
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof ContentPlaceholder>;
+} satisfies Meta<typeof ContentPlaceholder>;
 
 export const Default = () => {
   const { show, hide } = useNotificationCenter();

package/src/providers/notification-center/notification-center.test.tsx

@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event";
 import { AlertColor, Box, Button } from "@mui/material";
 import { render, screen, waitForElementToBeRemoved } from "~/tests/testing-library";
 import { NotificationCenterProvider } from "./notification-center.provider";
+import { vi } from "vitest";
 import {
   NotificationCenterContext,
   NotificationCenterProviderUndefinedError,
@@ -121,7 +122,7 @@ describe("useNotifyWhenValueChanges", () => {
   };
 
   const renderHook = ({ to, from }: { to: boolean; from: boolean }) => {
-    const show = jest.fn();
+    const show = vi.fn();
 
     const DummyComponent = () => {
       const [value, setValue] = useState<boolean | undefined>(false);
@@ -140,7 +141,7 @@ describe("useNotifyWhenValueChanges", () => {
       <NotificationCenterContext.Provider
         value={{
           show,
-          hide: jest.fn(),
+          hide: vi.fn(),
         }}
       >
         <DummyComponent />

package/src/stories/getting-started.stories.mdx

@@ -19,5 +19,5 @@ npm install @pautena/react-design-system @emotion/react @emotion/styled @mui/ico
 Now you are going to be able to import the components and use it in your React project.
 
 ```javascript
-import { AppBarWithDrawerLayout } from "@pautena/react-design-system";
+import { DrawerLayout } from "@pautena/react-design-system";
 ```

package/src/storybook.tsx

@@ -1,7 +1,5 @@
 /* eslint-disable react/display-name */
-import React, { FunctionComponent, PropsWithChildren, ReactElement, useState } from "react";
-import { ComponentStory } from "@storybook/react";
-import { JSXElementConstructor } from "react";
+import React, { FunctionComponent, useState } from "react";
 import { Box, Button, SxProps, Theme } from "@mui/material";
 import { MemoryRouter, Router, Navigator, Route, Routes } from "react-router-dom";
 import { NotificationCenterProvider } from "./providers";
@@ -9,12 +7,6 @@ import { action } from "@storybook/addon-actions";
 import { LocalizationProvider } from "@mui/x-date-pickers/";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 
-export function createTemplate<P extends object>(
-  C: JSXElementConstructor<P>,
-): ComponentStory<JSXElementConstructor<P>> {
-  return (args) => <C {...args} />;
-}
-
 const replaceAction = action("navigator/replace");
 const goAction = action("navigator/go");
 const pushAction = action("navigator/push");

package/src/tests/datatable-placeholder/datatable-placeholder.stories.tsx

@@ -1,5 +1,4 @@
-import { ComponentMeta } from "@storybook/react";
-import { createTemplate } from "../../storybook";
+import { Meta, StoryObj } from "@storybook/react";
 import { DatatablePlaceholder } from "./datatable-placeholder";
 
 export default {
@@ -8,8 +7,7 @@ export default {
   parameters: {
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof DatatablePlaceholder>;
+} satisfies Meta<typeof DatatablePlaceholder>;
+type Story = StoryObj<typeof DatatablePlaceholder>;
 
-const Template = createTemplate(DatatablePlaceholder);
-
-export const Default = Template.bind({});
+export const Default: Story = {};

package/src/tests/mocks.ts

@@ -1,3 +1,5 @@
+import { vi } from "vitest";
+
 export const mockConsoleError = () => {
   mockConsole("error");
 };
@@ -12,7 +14,7 @@ export const mockConsole = (severity: "error" | "warn") => {
 
   beforeEach(() => {
     logFn = console[severity];
-    console[severity] = jest.fn();
+    console[severity] = vi.fn();
   });
 
   afterEach(() => {