@pautena/react-design-system 0.5.0 → 0.6.0

package/src/generators/model-router/stories/list-screen.stories.tsx

@@ -1,8 +1,7 @@
-import { ComponentMeta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { withActionRouter, withNotificationCenter } from "../../../storybook";
 import { IdleRequest, LoadingRequest } from "../model-router.types";
 import { data } from "./templates";
-import { createTemplate } from "../../../storybook";
 import { ListScreen } from "../screens";
 import { mockModel } from "../../generators.mock";
 
@@ -13,84 +12,91 @@ export default {
   parameters: {
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof ListScreen>;
+} satisfies Meta<typeof ListScreen>;
+type Story = StoryObj<typeof ListScreen>;
 
-const Template = createTemplate(ListScreen);
-
-export const ListLoading = Template.bind({});
-ListLoading.args = {
-  modelName: "Items",
-  model: mockModel,
-  listData: data,
-  listRequest: LoadingRequest,
-  deleteRequest: IdleRequest,
+export const ListLoading: Story = {
+  args: {
+    modelName: "Items",
+    model: mockModel,
+    listData: data,
+    listRequest: LoadingRequest,
+    deleteRequest: IdleRequest,
+  },
 };
 
-export const DeleteLoading = Template.bind({});
-DeleteLoading.args = {
-  modelName: "Items",
-  model: mockModel,
-  listData: data,
-  listRequest: IdleRequest,
-  deleteRequest: LoadingRequest,
+export const DeleteLoading: Story = {
+  args: {
+    modelName: "Items",
+    model: mockModel,
+    listData: data,
+    listRequest: IdleRequest,
+    deleteRequest: LoadingRequest,
+  },
 };
 
-export const List = Template.bind({});
-List.args = {
-  modelName: "Items",
-  model: mockModel,
-  listData: data,
-  listRequest: IdleRequest,
-  deleteRequest: IdleRequest,
+export const List: Story = {
+  args: {
+    modelName: "Items",
+    model: mockModel,
+    listData: data,
+    listRequest: IdleRequest,
+    deleteRequest: IdleRequest,
+  },
 };
 
-export const WithoutDeleteFeature = Template.bind({});
-WithoutDeleteFeature.args = {
-  modelName: "Items",
-  model: mockModel,
-  listData: data,
-  listRequest: IdleRequest,
-  deleteRequest: IdleRequest,
-  deleteFeature: false,
+export const WithoutDeleteFeature: Story = {
+  args: {
+    modelName: "Items",
+    model: mockModel,
+    listData: data,
+    listRequest: IdleRequest,
+    deleteRequest: IdleRequest,
+    deleteFeature: false,
+  },
 };
 
-export const WithoutUpdateFeature = Template.bind({});
-WithoutUpdateFeature.args = {
-  modelName: "Items",
-  model: mockModel,
-  listData: data,
-  listRequest: IdleRequest,
-  deleteRequest: IdleRequest,
-  updateFeature: false,
+export const WithoutUpdateFeature: Story = {
+  args: {
+    modelName: "Items",
+    model: mockModel,
+    listData: data,
+    listRequest: IdleRequest,
+    deleteRequest: IdleRequest,
+    updateFeature: false,
+  },
 };
 
-export const WithoutDeleteAndUpdateFeature = Template.bind({});
-WithoutDeleteAndUpdateFeature.args = {
-  modelName: "Items",
-  model: mockModel,
-  listData: data,
-  listRequest: IdleRequest,
-  deleteRequest: IdleRequest,
-  deleteFeature: false,
-  updateFeature: false,
+export const WithoutDeleteAndUpdateFeature: Story = {
+  args: {
+    modelName: "Items",
+    model: mockModel,
+    listData: data,
+    listRequest: IdleRequest,
+    deleteRequest: IdleRequest,
+    deleteFeature: false,
+    updateFeature: false,
+  },
 };
 
-export const WithoutAddFeature = Template.bind({});
-WithoutAddFeature.args = {
-  modelName: "Items",
-  model: mockModel,
-  listData: data,
-  listRequest: IdleRequest,
-  deleteRequest: IdleRequest,
-  addFeature: false,
+export const WithoutAddFeature: Story = {
+  args: {
+    modelName: "Items",
+    model: mockModel,
+    listData: data,
+    listRequest: IdleRequest,
+    deleteRequest: IdleRequest,
+    addFeature: false,
+  },
 };
 
-export const WithoutDetailsFeature = Template.bind({});
-WithoutDetailsFeature.args = {
-  modelName: "Items",
-  model: mockModel,
-  listData: data,
-  listRequest: IdleRequest,
-  deleteRequest: IdleRequest,
-  detailsFeature: false,
+export const WithoutDetailsFeature: Story = {
+  args: {
+    modelName: "Items",
+    model: mockModel,
+    listData: data,
+    listRequest: IdleRequest,
+    deleteRequest: IdleRequest,
+    detailsFeature: false,
+  },
 };

package/src/generators/model-router/stories/model-router.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import {
   withLocalizationProvider,
   withMemoryRouter,
@@ -23,7 +23,7 @@ import {
 import { Route, Routes, useNavigate } from "react-router-dom";
 import { Box, Button, Typography } from "@mui/material";
 
-interface DummyModelRouterProps {
+export interface DummyModelRouterProps {
   requestTimeout: number;
   initialData: MockInstance[];
   basePath?: string;
@@ -162,18 +162,6 @@ export const DummyModelRouter = (args: DummyModelRouterProps) => {
   );
 };
 
-const args: DummyModelRouterProps = {
-  requestTimeout: REQUEST_TIMEOUT,
-  initialData: data,
-  onRequestListAction,
-  onSubmitNewItemAction,
-  onRequestItem,
-  onRequestUpdateItemAction,
-  onSubmitUpdateAction,
-  onRequestDeleteAction,
-};
-DummyModelRouter.args = args;
-
 export const InternalModelRouter = () => {
   const navigate = useNavigate();
 
@@ -224,4 +212,18 @@ export default {
   parameters: {
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof DummyModelRouter>;
+} satisfies Meta<typeof DummyModelRouter>;
+type Story = StoryObj<typeof DummyModelRouter>;
+
+export const DemoModelRouter: Story = {
+  args: {
+    requestTimeout: REQUEST_TIMEOUT,
+    initialData: data,
+    onRequestListAction,
+    onSubmitNewItemAction,
+    onRequestItem,
+    onRequestUpdateItemAction,
+    onSubmitUpdateAction,
+    onRequestDeleteAction,
+  },
+};

package/src/generators/model-router/stories/templates.tsx

@@ -1,6 +1,5 @@
 import { action } from "@storybook/addon-actions";
 import { ModelRouter } from "../model-router";
-import { createTemplate } from "../../../storybook";
 import { createModelInstance, MockInstance, mockModel } from "../../generators.mock";
 import { IdleRequest } from "../model-router.types";
 
@@ -22,8 +21,6 @@ export const data = [
   createModelInstance<MockInstance>(mockModel, 104),
 ];
 
-export const ModelRouterTemplate = createTemplate(ModelRouter);
-
 export const baseArgs = {
   modelName: "Items",
   model: mockModel,
@@ -34,6 +31,4 @@ export const baseArgs = {
   updateItemRequest: IdleRequest,
   submitUpdateItemRequest: IdleRequest,
   itemRequest: IdleRequest,
-  // onRequestList:onRequestListAction,
-  // onRequestUpdateItem: onRequestUpdateItemAction,
 };

package/src/generators/object-details/object-details.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import { ObjectDetails } from "./object-details";
 import { withPadding } from "../../storybook";
 import { createModelInstance, mockModel } from "../generators.mock";
@@ -13,7 +13,7 @@ export default {
   parameters: {
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof ObjectDetails>;
+} satisfies Meta<typeof ObjectDetails>;
 
 export const Default = () => {
   return <ObjectDetails model={mockModel} instance={instance} />;

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";