@pautena/react-design-system 0.12.0 → 0.12.2

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

@@ -1,229 +0,0 @@
-import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import {
-  withLocalizationProvider,
-  withMemoryRouter,
-  withNotificationCenter,
-} from "../../../storybook";
-import { ModelRouter } from "../model-router";
-import { IdleRequest } from "../model-router.types";
-import { MockInstance, mockModel } from "../../generators.mock";
-import { HandlerFunction } from "@storybook/addon-actions";
-import { useState } from "react";
-import {
-  data,
-  onRequestDeleteAction,
-  onRequestItem,
-  onRequestListAction,
-  onRequestUpdateItemAction,
-  onSubmitNewItemAction,
-  onSubmitUpdateAction,
-  REQUEST_TIMEOUT,
-} from "./templates";
-import { Route, Routes, useNavigate } from "react-router-dom";
-import { Box, Button, Typography } from "@mui/material";
-
-export interface DummyModelRouterProps {
-  requestTimeout: number;
-  initialData: MockInstance[];
-  basePath?: string;
-  deleteFeature?: boolean;
-  updateFeature?: boolean;
-  addFeature?: boolean;
-  detailsFeature?: boolean;
-  onRequestListAction: HandlerFunction;
-  onSubmitNewItemAction: HandlerFunction;
-  onRequestItem: HandlerFunction;
-  onRequestUpdateItemAction: HandlerFunction;
-  onSubmitUpdateAction: HandlerFunction;
-  onRequestDeleteAction: HandlerFunction;
-}
-
-export const DummyModelRouter = (args: DummyModelRouterProps) => {
-  const {
-    requestTimeout,
-    initialData,
-    basePath = "",
-    deleteFeature = true,
-    updateFeature = true,
-    addFeature = true,
-    detailsFeature = true,
-    onRequestListAction,
-    onSubmitNewItemAction,
-    onRequestItem,
-    onRequestUpdateItemAction,
-    onSubmitUpdateAction,
-    onRequestDeleteAction,
-  } = args;
-
-  const [data, setData] = useState<MockInstance[]>([]);
-  const [updateItem, setUpdateItem] = useState<MockInstance | undefined>(undefined);
-  const [listRequestState, setListRequestState] = useState(IdleRequest);
-  const [newItemRequestState, setNewItemRequestState] = useState(IdleRequest);
-  const [submitUpdateItemRequestState, setSubmitUpdateItemRequestState] = useState(IdleRequest);
-  const [removeRequestState, setRemoveRequestState] = useState(IdleRequest);
-  const [detailRequestState, setDetailRequestState] = useState(IdleRequest);
-  const [updateItemRequestState, setUpdateItemRequestState] = useState(IdleRequest);
-  const [detailInstance, setDetailInstance] = useState<MockInstance | undefined>(undefined);
-
-  const handleRequestList = () => {
-    onRequestListAction();
-    setListRequestState({ idle: false, loading: true });
-    setTimeout(() => {
-      setData(initialData);
-      setListRequestState({ idle: true, loading: false, success: true });
-    }, requestTimeout);
-  };
-
-  const handleClickDeleteItem = (item: MockInstance) => {
-    setRemoveRequestState({ idle: false, loading: true });
-    onRequestDeleteAction(item);
-
-    setTimeout(() => {
-      setData((d) => [...d.filter((d) => d !== item)]);
-      setRemoveRequestState({ idle: true, loading: false, success: true });
-    }, requestTimeout);
-  };
-
-  const handleSubmitNewItem = (obj: MockInstance) => {
-    setNewItemRequestState({ idle: false, loading: true });
-    onSubmitNewItemAction(obj);
-
-    setTimeout(() => {
-      setData((d) => [...d, obj]);
-      setNewItemRequestState({ idle: true, loading: false, success: true });
-    }, requestTimeout);
-  };
-
-  const handleRequestItem = (id: string) => {
-    setDetailInstance(undefined);
-    setDetailRequestState({ idle: false, loading: true });
-    onRequestItem(id);
-
-    setTimeout(() => {
-      setDetailInstance(data?.find((d) => d.id === id));
-      setDetailRequestState({ idle: true, loading: false, success: true });
-    }, requestTimeout);
-  };
-
-  const handleRequestUpdateItem = (id: string) => {
-    setUpdateItemRequestState({ idle: false, loading: true });
-    onRequestUpdateItemAction(id);
-
-    setTimeout(() => {
-      setUpdateItem(data?.find((d) => d.id === id));
-      setUpdateItemRequestState({ idle: true, loading: false, success: true });
-    }, requestTimeout);
-  };
-
-  const handleSubmitUpdateItem = (obj: MockInstance) => {
-    setSubmitUpdateItemRequestState({ idle: false, loading: true });
-    onSubmitUpdateAction(obj);
-
-    setTimeout(() => {
-      setData((d) => [
-        ...(d || []).map((item) => {
-          if (item === obj) {
-            return obj;
-          }
-          return item;
-        }),
-      ]);
-      setSubmitUpdateItemRequestState({ idle: true, loading: false, success: true });
-    }, requestTimeout);
-  };
-
-  return (
-    <ModelRouter
-      {...args}
-      modelName="Items"
-      model={mockModel}
-      basePath={basePath}
-      deleteFeature={deleteFeature}
-      updateFeature={updateFeature}
-      addFeature={addFeature}
-      detailsFeature={detailsFeature}
-      onRequestList={handleRequestList}
-      listData={data}
-      listRequest={listRequestState}
-      deleteRequest={removeRequestState}
-      onClickDeleteItem={handleClickDeleteItem}
-      itemRequest={detailRequestState}
-      detailsItem={detailInstance}
-      onRequestItem={handleRequestItem}
-      newItemRequest={newItemRequestState}
-      onSubmitNewItem={handleSubmitNewItem}
-      submitUpdateItemRequest={submitUpdateItemRequestState}
-      updateItemRequest={updateItemRequestState}
-      updateItem={updateItem}
-      onRequestUpdateItem={handleRequestUpdateItem}
-      onSubmitUpdateItem={handleSubmitUpdateItem}
-    />
-  );
-};
-
-export const InternalModelRouter = () => {
-  const navigate = useNavigate();
-
-  return (
-    <Routes>
-      <Route
-        path="/"
-        element={
-          <Box>
-            <Typography>Internal model route</Typography>
-            <Button variant="contained" onClick={() => navigate("/internal")}>
-              Go to Internal
-            </Button>
-          </Box>
-        }
-      />
-      <Route
-        path="/internal/*"
-        element={
-          <ModelRouter
-            modelName="Items"
-            model={mockModel}
-            basePath="/internal"
-            onRequestItem={() => null}
-            itemRequest={IdleRequest}
-            onRequestList={() => null}
-            listData={data}
-            onClickDeleteItem={() => null}
-            listRequest={IdleRequest}
-            deleteRequest={IdleRequest}
-            onSubmitNewItem={() => null}
-            newItemRequest={IdleRequest}
-            onSubmitUpdateItem={() => null}
-            submitUpdateItemRequest={IdleRequest}
-            updateItemRequest={IdleRequest}
-            onRequestUpdateItem={() => null}
-          />
-        }
-      />
-    </Routes>
-  );
-};
-
-export default {
-  title: "Generators/ModelRouter/DummyModelRouter",
-  component: DummyModelRouter,
-  decorators: [withMemoryRouter(), withNotificationCenter, withLocalizationProvider],
-  parameters: {
-    layout: "fullscreen",
-  },
-} 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,33 +0,0 @@
-import { action } from "@storybook/addon-actions";
-import { createModelInstance, MockInstance, mockModel } from "../../generators.mock";
-import { IdleRequest } from "../model-router.types";
-
-export const onRequestListAction = action("Request list data");
-export const onSubmitNewItemAction = action("Submit new item");
-export const onRequestItem = action("Details screen mount");
-export const onRequestUpdateItemAction = action("Request update instance");
-export const onSubmitUpdateAction = action("Submit update form");
-export const onRequestDeleteAction = action("click delete item option");
-
-export const REQUEST_TIMEOUT = 2000;
-
-export const item1 = createModelInstance<MockInstance>(mockModel, 100);
-export const data = [
-  item1,
-  createModelInstance<MockInstance>(mockModel, 101),
-  createModelInstance<MockInstance>(mockModel, 102),
-  createModelInstance<MockInstance>(mockModel, 103),
-  createModelInstance<MockInstance>(mockModel, 104),
-];
-
-export const baseArgs = {
-  modelName: "Items",
-  model: mockModel,
-  listData: data,
-  listRequest: IdleRequest,
-  deleteRequest: IdleRequest,
-  newItemRequest: IdleRequest,
-  updateItemRequest: IdleRequest,
-  submitUpdateItemRequest: IdleRequest,
-  itemRequest: IdleRequest,
-};

package/src/generators/object-details/index.ts

@@ -1 +0,0 @@
-export * from "./object-details";

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

@@ -1,30 +0,0 @@
-import { Meta } from "@storybook/react";
-import { ObjectDetails } from "./object-details";
-import { withPadding } from "../../storybook";
-import { createModelInstance, mockModel } from "../generators.mock";
-
-const instance = createModelInstance(mockModel);
-
-export default {
-  title: "Generators/ObjectDetails",
-  component: ObjectDetails,
-  decorators: [withPadding()],
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof ObjectDetails>;
-
-export const Default = {
-  args: {
-    model: mockModel,
-    instance: instance,
-  },
-};
-
-export const Dense = {
-  args: {
-    model: mockModel,
-    instance: instance,
-    dense: true,
-  },
-};

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

@@ -1,22 +0,0 @@
-import React from "react";
-import { expectModelFieldValue } from "~/tests/assertions";
-import { render } from "~/tests/testing-library";
-import { mockModel, createModelInstance } from "../generators.mock";
-import { ObjectDetails } from "./object-details";
-
-describe("ObjectDetails", () => {
-  const renderComponent = () => {
-    const instance = createModelInstance(mockModel);
-    return {
-      ...render(<ObjectDetails model={mockModel} instance={instance} />),
-      instance,
-      model: mockModel,
-    };
-  };
-
-  it("would render a label/value pair for each detail", () => {
-    const { instance, model } = renderComponent();
-
-    model.fields.forEach((detail) => expectModelFieldValue(detail, instance));
-  });
-});

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

@@ -1,169 +0,0 @@
-import React from "react";
-import { Grid } from "@mui/material";
-import {
-  GroupValueCard,
-  ValueItem,
-  ValueBoolean,
-  ValueText,
-  ValueDatetime,
-} from "../../components";
-import {
-  ModelField,
-  GroupField,
-  Model,
-  BasicModelInstance,
-  GroupInstanceType,
-  ArrayGroupField,
-  ArrayInstanceType,
-} from "../generators.model";
-import { newBreakpointsCounter } from "~/utils/breakpoints";
-import { DataGrid, GridColDef } from "@mui/x-data-grid";
-
-interface SingleDetailValueFactoryOptions {
-  dense?: boolean;
-}
-
-const singleDetailValueFactory = <T extends BasicModelInstance>(
-  field: ModelField,
-  instance: T | GroupInstanceType,
-  { dense }: SingleDetailValueFactoryOptions = {},
-) => {
-  const { id, name, type } = field;
-  const value = instance[id];
-  if (type === "boolean") {
-    return <ValueBoolean dense={dense} label={name} value={value as boolean} />;
-  } else if (type === "date" || type === "time" || type === "datetime") {
-    return <ValueDatetime dense={dense} label={name} value={value as Date} format={field.format} />;
-  }
-
-  if (typeof value === "object" && !Array.isArray(value)) {
-    return <ValueText dense={dense} label={name} value={JSON.stringify(value)} />;
-  }
-  return <ValueText dense={dense} label={name} value={value?.toString()} />;
-};
-
-interface ObjectArrayGroupProps {
-  field: ArrayGroupField;
-  instance: ArrayInstanceType;
-  dense?: boolean;
-}
-
-const ObjectArrayGroup = ({
-  field: { name, description, value },
-  instance,
-  dense,
-}: ObjectArrayGroupProps) => {
-  const columns: GridColDef[] = [{ field: "id", headerName: "ID", width: 70 }];
-
-  value.forEach((column) => {
-    columns.push({
-      field: column.id,
-      headerName: column.name,
-    });
-  });
-
-  const rows = instance.map((f, id) => ({
-    id,
-    ...f,
-  }));
-
-  return (
-    <GroupValueCard title={name} subtitle={description} dense={dense}>
-      <Grid item xs={12}>
-        <DataGrid
-          rows={rows}
-          columns={columns}
-          density={dense ? "compact" : "standard"}
-          disableRowSelectionOnClick
-          pageSizeOptions={[5]}
-          initialState={{
-            pagination: {
-              paginationModel: {
-                pageSize: 5,
-              },
-            },
-          }}
-          sx={{ height: 400 }}
-        />
-      </Grid>
-    </GroupValueCard>
-  );
-};
-
-interface ObjectDetailGroupProps {
-  field: GroupField;
-  instance: GroupInstanceType;
-  dense?: boolean;
-}
-
-const ObjectDetailGroup = ({
-  field: { name, description, value },
-  instance,
-  dense,
-}: ObjectDetailGroupProps) => {
-  const breakpointsCounter = newBreakpointsCounter();
-
-  return (
-    <GroupValueCard title={name} subtitle={description} dense={dense}>
-      {value.map((field) => {
-        const { id, xs, sm, md, lg, xl } = field;
-        const bordered = breakpointsCounter.increment(field);
-        return (
-          <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>
-            {singleDetailValueFactory(field, instance, { dense })}
-          </ValueItem>
-        );
-      })}
-    </GroupValueCard>
-  );
-};
-
-export interface ObjectDetailsProps<T extends BasicModelInstance> {
-  model: Model;
-  dense?: boolean;
-  instance: T;
-}
-
-export const ObjectDetails = <T extends BasicModelInstance>({
-  model,
-  instance,
-  dense,
-}: ObjectDetailsProps<T>) => {
-  const breakpointsCounter = newBreakpointsCounter();
-  return (
-    <Grid container spacing={dense ? 1 : 2}>
-      {model.fields.map((field) => {
-        const { id, type, xs = 3, sm = 0, md = 0, lg = 0, xl = 0 } = field;
-
-        if (type === "group") {
-          breakpointsCounter.increment({ xs: 12 });
-          return (
-            <Grid item key={id} xs={12}>
-              <ObjectDetailGroup
-                field={field}
-                instance={instance[id] as GroupInstanceType}
-                dense={dense}
-              />
-            </Grid>
-          );
-        }
-
-        if (type === "group[]") {
-          breakpointsCounter.increment({ xs: 12 });
-          return (
-            <Grid item key={id} xs={12}>
-              <ObjectArrayGroup field={field} instance={instance[id] as any} dense={dense} />
-            </Grid>
-          );
-        }
-
-        const bordered = breakpointsCounter.increment(field);
-        return (
-          <ValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl} bordered={bordered}>
-            {singleDetailValueFactory(field, instance, { dense })}
-          </ValueItem>
-        );
-      })}
-    </Grid>
-  );
-};

package/src/generators/table-list/index.ts

@@ -1 +0,0 @@
-export * from "./table-list";

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

@@ -1,91 +0,0 @@
-import React from "react";
-import { useDemoData } from "@mui/x-data-grid-generator";
-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;
-
-interface TemplateProps<T extends BasicModelInstance> extends TableListProps<T> {
-  size: number;
-  dataSetType: "Commodity" | "Employee";
-}
-
-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")} />
-  );
-};
-
-export default {
-  title: "Generators/TableList",
-  component: DummyTableList,
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof DummyTableList>;
-type Story = StoryObj<typeof DummyTableList>;
-
-export const Default: Story = {
-  args: {
-    size: 40,
-    dataSetType: "Commodity",
-    search: true,
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    size: 40,
-    dataSetType: "Commodity",
-    search: true,
-    loading: true,
-  },
-};
-
-export const WihtoutSearch: Story = {
-  args: {
-    size: 40,
-    dataSetType: "Commodity",
-    search: false,
-  },
-};
-
-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"),
-      },
-    ],
-  },
-};