@pautena/react-design-system 0.5.1 → 0.6.0

package/src/components/value-displays/value-text/value-text.stories.tsx

@@ -1,6 +1,6 @@
-import { ComponentMeta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { ValueText } from "./value-text";
-import { createTemplate, withContainer } from "../../../storybook";
+import { withContainer } from "../../../storybook";
 
 export default {
   title: "Components/Value displays/ValueText",
@@ -9,42 +9,47 @@ export default {
   parameters: {
     layout: "centered",
   },
-} as ComponentMeta<typeof ValueText>;
+} satisfies Meta<typeof ValueText>;
+type Story = StoryObj<typeof ValueText>;
 
-const Template = createTemplate(ValueText);
-
-export const Default = Template.bind({});
-Default.args = {
-  label: "Lorem",
-  value: "ipsum sit",
+export const Default: Story = {
+  args: {
+    label: "Lorem",
+    value: "ipsum sit",
+  },
 };
 
-export const NumberAsValue = Template.bind({});
-NumberAsValue.args = {
-  label: "Lorem",
-  value: 1000,
+export const NumberAsValue: Story = {
+  args: {
+    label: "Lorem",
+    value: 1000,
+  },
 };
 
-export const TruncatedText = Template.bind({});
-TruncatedText.args = {
-  label: "Lorem",
-  value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+export const TruncatedText: Story = {
+  args: {
+    label: "Lorem",
+    value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+  },
 };
 
-export const Placeholder = Template.bind({});
-Placeholder.args = {
-  label: "Lorem",
+export const Placeholder: Story = {
+  args: {
+    label: "Lorem",
+  },
 };
 
-export const CustomPlaceholder = Template.bind({});
-CustomPlaceholder.args = {
-  label: "Lorem",
-  placeholder: ".",
+export const CustomPlaceholder: Story = {
+  args: {
+    label: "Lorem",
+    placeholder: ".",
+  },
 };
 
-export const Editable = Template.bind({});
-Editable.args = {
-  label: "Lorem",
-  value: "lorem ipsum",
-  editable: true,
+export const Editable: Story = {
+  args: {
+    label: "Lorem",
+    value: "lorem ipsum",
+    editable: true,
+  },
 };

package/src/components/value-displays/value-text/value-text.test.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { render, screen } from "~/tests/testing-library";
 import { ValueText } from "./value-text";
 import userEvent from "@testing-library/user-event";
+import { vi } from "vitest";
 
 const DummyValue = "Lorem ipsum sit amet";
 
@@ -15,7 +16,7 @@ describe("ValueText", () => {
     placeholder?: string;
     editable?: boolean;
   }) => {
-    const onEdit = jest.fn();
+    const onEdit = vi.fn();
     render(
       <ValueText
         label="Hello world"

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

@@ -1,6 +1,6 @@
-import { ComponentMeta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { ModelForm } from "./model-form";
-import { createTemplate, withPadding, withLocalizationProvider } from "../../storybook";
+import { withPadding, withLocalizationProvider } from "../../storybook";
 import { createModelInstance, mockModel } from "../generators.mock";
 
 const initialValues = createModelInstance(mockModel);
@@ -12,19 +12,20 @@ export default {
   parameters: {
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof ModelForm>;
+} satisfies Meta<typeof ModelForm>;
+type Story = StoryObj<typeof ModelForm>;
 
-const Template = createTemplate(ModelForm);
-
-export const AddForm = Template.bind({});
-AddForm.args = {
-  model: mockModel,
-  saveButtonText: "add",
+export const AddForm: Story = {
+  args: {
+    model: mockModel,
+    saveButtonText: "add",
+  },
 };
 
-export const UpdateForm = Template.bind({});
-UpdateForm.args = {
-  model: mockModel,
-  initialValues,
-  saveButtonText: "update",
+export const UpdateForm: Story = {
+  args: {
+    model: mockModel,
+    initialValues,
+    saveButtonText: "update",
+  },
 };

package/src/generators/model-form/model-form.test.tsx

@@ -9,6 +9,7 @@ import {
   ReturnTimeFormat,
   TradeDateFormat,
 } from "../generators.mock";
+import { vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { selectOption, typeNumericInput, pickDatetime, selectOptions } from "~/tests/actions";
 import {
@@ -21,7 +22,7 @@ describe("ModelForm", () => {
   const renderComponent = ({
     initialValues = undefined,
   }: { initialValues?: MockInstance } = {}) => {
-    const onSubmit = jest.fn();
+    const onSubmit = vi.fn();
     const instance = render(
       <ModelForm
         model={mockModel}

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

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { DummyModelRouter, InternalModelRouter } from "./stories/model-router.stories";
-import { data as mockData } from "./stories/templates";
+import { vi } from "vitest";
+import { data, data as mockData } from "./stories/templates";
 import userEvent from "@testing-library/user-event";
 import { getRandomItem } from "../../utils";
 import { Model } from "../generators.model";
@@ -225,14 +226,13 @@ describe("ModelRouter", () => {
     addFeature?: boolean;
     detailsFeature?: boolean;
   } = {}) => {
-    const onRequestList = jest.fn();
-    const onRequestItem = jest.fn();
-    const onSubmitNewItem = jest.fn();
-    const onRequestUpdateItem = jest.fn();
-    const onSubmitUpdate = jest.fn();
-    const onRequestDelete = jest.fn();
-    const args = DummyModelRouter.args;
-    const randomItem = getRandomItem(args.initialData);
+    const onRequestList = vi.fn();
+    const onRequestItem = vi.fn();
+    const onSubmitNewItem = vi.fn();
+    const onRequestUpdateItem = vi.fn();
+    const onSubmitUpdate = vi.fn();
+    const onRequestDelete = vi.fn();
+    const randomItem = getRandomItem(data);
 
     const ForceNavigationComponent = ({ id }: { id: string }) => {
       const navigate = useNavigate();
@@ -249,7 +249,6 @@ describe("ModelRouter", () => {
     const instance = render(
       <NotificationCenterProvider>
         <DummyModelRouter
-          {...args}
           deleteFeature={deleteFeature}
           updateFeature={updateFeature}
           addFeature={addFeature}
@@ -261,6 +260,7 @@ describe("ModelRouter", () => {
           onRequestUpdateItemAction={onRequestUpdateItem}
           onSubmitUpdateAction={onSubmitUpdate}
           onRequestDeleteAction={onRequestDelete}
+          initialData={data}
         />
         <ForceNavigationComponent id={randomItem.item.id} />
       </NotificationCenterProvider>,
@@ -279,7 +279,7 @@ describe("ModelRouter", () => {
 
     return {
       ...instance,
-      data: args.initialData,
+      data,
       model: mockModel,
       randomItem,
       onRequestList,
@@ -309,9 +309,9 @@ describe("ModelRouter", () => {
       return (
         <NotificationCenterProvider>
           <ListScreen
-            onRequestList={jest.fn()}
+            onRequestList={vi.fn()}
             listData={[]}
-            onClickDeleteItem={jest.fn()}
+            onClickDeleteItem={vi.fn()}
             listRequest={IdleRequest}
             deleteRequest={deleteRequest}
             modelName="Items"
@@ -343,7 +343,7 @@ describe("ModelRouter", () => {
           <AddScreen
             modelName="Items"
             model={mockModel}
-            onSubmitNewItem={jest.fn()}
+            onSubmitNewItem={vi.fn()}
             newItemRequest={newItemRequest}
           />
           <Box>
@@ -372,10 +372,10 @@ describe("ModelRouter", () => {
           <UpdateScreen
             modelName="Items"
             model={mockModel}
-            onSubmitUpdateItem={jest.fn()}
+            onSubmitUpdateItem={vi.fn()}
             submitUpdateItemRequest={updateRequest}
             updateItemRequest={IdleRequest}
-            onRequestUpdateItem={jest.fn()}
+            onRequestUpdateItem={vi.fn()}
           />
           <Box>
             <Button onClick={() => setUpdateRequest(IdleRequest)}>idle</Button>

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

@@ -1,5 +1,5 @@
-import { ComponentMeta } from "@storybook/react";
-import { withNotificationCenter, createTemplate, withActionRouter } from "../../../storybook";
+import { Meta, StoryObj } from "@storybook/react";
+import { withNotificationCenter, withActionRouter } from "../../../storybook";
 import { item1 } from "./templates";
 import { DetailsScreen } from "../screens";
 import { mockModel } from "../../generators.mock";
@@ -18,21 +18,22 @@ export default {
   parameters: {
     layout: "fullscreen",
   },
-} as ComponentMeta<typeof DetailsScreen>;
+} satisfies Meta<typeof DetailsScreen>;
+type Story = StoryObj<typeof DetailsScreen>;
 
-const Template = createTemplate(DetailsScreen);
-
-export const Loading = Template.bind({});
-Loading.args = {
-  modelName: "Items",
-  model: mockModel,
-  itemRequest: LoadingRequest,
+export const Loading: Story = {
+  args: {
+    modelName: "Items",
+    model: mockModel,
+    itemRequest: LoadingRequest,
+  },
 };
 
-export const Details = Template.bind({});
-Details.args = {
-  modelName: "Items",
-  model: mockModel,
-  itemRequest: IdleRequest,
-  detailsItem: item1,
+export const Details: Story = {
+  args: {
+    modelName: "Items",
+    model: mockModel,
+    itemRequest: IdleRequest,
+    detailsItem: item1,
+  },
 };

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} />;