@pautena/react-design-system 0.12.0 → 0.12.1

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

@@ -1,30 +0,0 @@
-import React from "react";
-import { Routes, Route } from "react-router-dom";
-import { BasicModelInstance } from "../generators.model";
-import {
-  AddScreen,
-  AddScreenProps,
-  DetailsScreen,
-  DetailsScreenProps,
-  ListScreen,
-  ListScreenProps,
-  UpdateScreen,
-  UpdateScreenProps,
-} from "./screens";
-
-export type ModelRouterProps<T extends BasicModelInstance> = DetailsScreenProps<T> &
-  ListScreenProps<T> &
-  AddScreenProps<T> &
-  UpdateScreenProps<T>;
-
-export const ModelRouter = <T extends BasicModelInstance>(props: ModelRouterProps<T>) => {
-  const { updateFeature = true, addFeature = true, detailsFeature = true } = props;
-  return (
-    <Routes>
-      <Route path="" element={<ListScreen {...props} />} />
-      {detailsFeature && <Route path=":id" element={<DetailsScreen {...props} />} />}
-      {addFeature && <Route path="add" element={<AddScreen {...props} />} />}
-      {updateFeature && <Route path=":id/update" element={<UpdateScreen {...props} />} />}
-    </Routes>
-  );
-};

package/src/generators/model-router/model-router.types.ts

@@ -1,18 +0,0 @@
-export interface RequestState {
-  idle?: boolean;
-  loading?: boolean;
-  error?: string;
-  success?: boolean;
-}
-
-export const IdleRequest: RequestState = {
-  idle: true,
-};
-
-export const LoadingRequest: RequestState = {
-  loading: true,
-};
-
-export const SuccessRequest: RequestState = {
-  success: true,
-};

package/src/generators/model-router/screens/add-screen.tsx

@@ -1,67 +0,0 @@
-import React from "react";
-import { Header, Content } from "~/components";
-import { BasicModelInstance } from "../../generators.model";
-import { ModelForm } from "../../model-form";
-import { HeaderLayout } from "../../../layouts";
-import { useNotifyWhenValueChanges } from "../../../providers";
-import { RequestState } from "../model-router.types";
-import { BaseScreenProps } from "./screens.types";
-import { useNavigateWhenValueChanges } from "../../../hooks";
-
-export interface AddScreenProps<T extends BasicModelInstance> extends BaseScreenProps {
-  /**
-   * Callback executed when the user wants to
-   * add a new item
-   */
-  onSubmitNewItem: (obj: T) => void;
-
-  /**
-   * Current status of the request to retrieve
-   * add a new item
-   */
-  newItemRequest: RequestState;
-}
-
-export const AddScreen = <T extends BasicModelInstance>({
-  model,
-  modelName,
-  basePath = "",
-  onSubmitNewItem,
-  newItemRequest,
-}: AddScreenProps<T>) => {
-  useNotifyWhenValueChanges(
-    { message: "Item added successfully", severity: "success" },
-    !!newItemRequest.success,
-    { from: false, to: true },
-  );
-  useNavigateWhenValueChanges(`${basePath}/`, !!newItemRequest.success, { from: false, to: true });
-  useNotifyWhenValueChanges(
-    { title: "We had an error", message: newItemRequest.error || "", severity: "error" },
-    !!newItemRequest.error,
-    { from: false, to: true },
-  );
-
-  return (
-    <HeaderLayout loading={newItemRequest.loading}>
-      <Header
-        title={`Add ${modelName}`}
-        preset="default"
-        breadcrumbs={[
-          {
-            id: "list",
-            text: modelName,
-            link: `${basePath}/`,
-          },
-          {
-            id: "add",
-            text: `Add new ${modelName}`,
-            link: `${basePath}/add`,
-          },
-        ]}
-      />
-      <Content>
-        <ModelForm model={model} saveButtonText="Save" onSubmit={onSubmitNewItem} />
-      </Content>
-    </HeaderLayout>
-  );
-};

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

@@ -1,64 +0,0 @@
-import React, { useEffect } from "react";
-import { useParams } from "react-router-dom";
-import { RequestState } from "../model-router.types";
-import { Content, Header } from "~/components";
-import { HeaderLayout } from "~/layouts";
-import { BaseScreenProps } from "./screens.types";
-import { BasicModelInstance } from "../../generators.model";
-import { ObjectDetails } from "~/generators/object-details";
-
-export interface DetailsScreenProps<T extends BasicModelInstance> extends BaseScreenProps {
-  /**
-   * Callback executed each time we want
-   * the details information of an item
-   */
-  onRequestItem: (id: string) => void;
-
-  /**
-   * Current status of the request to retrieve
-   * an item
-   */
-  itemRequest: RequestState;
-
-  /**
-   * Item to be displayed
-   */
-  detailsItem?: T;
-}
-
-export const DetailsScreen = <T extends BasicModelInstance>({
-  model,
-  modelName,
-  basePath = "",
-  onRequestItem,
-  itemRequest,
-  detailsItem,
-}: DetailsScreenProps<T>) => {
-  const { id = "" } = useParams();
-
-  useEffect(() => {
-    onRequestItem(id);
-  }, [id]);
-
-  return (
-    <HeaderLayout loading={itemRequest.loading}>
-      <Header
-        title={id}
-        preset="default"
-        breadcrumbs={[
-          {
-            id: "list",
-            text: modelName,
-            link: `${basePath}/`,
-          },
-          {
-            id: "detail",
-            text: id,
-            link: `${basePath}/${id}`,
-          },
-        ]}
-      />
-      <Content>{detailsItem && <ObjectDetails model={model} instance={detailsItem} />}</Content>
-    </HeaderLayout>
-  );
-};

package/src/generators/model-router/screens/index.ts

@@ -1,4 +0,0 @@
-export * from "./update-screen";
-export * from "./list-screen";
-export * from "./add-screen";
-export * from "./details-screen";

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

@@ -1,143 +0,0 @@
-import React, { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import { Content, Header, HeaderAction } from "~/components";
-import { TableList, TableRowOption } from "../../table-list";
-import { BasicModelInstance } from "../../generators.model";
-import { useNotifyWhenValueChanges } from "~/providers";
-import { HeaderLayout } from "../../../layouts";
-import { RequestState } from "../model-router.types";
-import { BaseScreenProps } from "./screens.types";
-
-export interface ListScreenProps<T extends BasicModelInstance> extends BaseScreenProps {
-  /**
-   * Callback executed each time the list screen
-   * requests for a data update
-   */
-  onRequestList: () => void;
-
-  /**
-   * List of items to be displayed in the list screen
-   */
-  listData: T[];
-
-  /**
-   * Callback executed when the user clicks an option
-   * to delete an item
-   */
-  onClickDeleteItem: (item: T) => void;
-
-  /**
-   * Current status of the request to retrieve
-   * the list items
-   */
-  listRequest: RequestState;
-
-  /**
-   * Current status of the request to delete
-   * an item
-   */
-  deleteRequest: RequestState;
-}
-
-export const ListScreen = <T extends BasicModelInstance>({
-  model,
-  modelName,
-  listData,
-  listRequest,
-  deleteRequest,
-  basePath = "",
-  deleteFeature = true,
-  updateFeature = true,
-  addFeature = true,
-  detailsFeature = true,
-  onRequestList,
-  onClickDeleteItem,
-}: ListScreenProps<T>) => {
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    onRequestList();
-  }, []);
-
-  useNotifyWhenValueChanges(
-    {
-      title: "Item deleted",
-      message: "The item has been deleted successfully",
-      severity: "success",
-    },
-    !!deleteRequest.success,
-    { from: false, to: true },
-  );
-
-  useNotifyWhenValueChanges(
-    { title: "We had an error", message: deleteRequest.error || "", severity: "error" },
-    !!deleteRequest.error,
-    { from: false, to: true },
-  );
-
-  const handleClickListItem = detailsFeature
-    ? (item: T) => {
-        navigate(`${basePath}/${item.id}`);
-      }
-    : undefined;
-
-  const handleClickListOption = (optionId: "edit" | "remove", item: T) => {
-    if (optionId === "edit") {
-      navigate(`${basePath}/${item.id}/update`);
-    } else {
-      onClickDeleteItem(item);
-    }
-  };
-
-  const options: TableRowOption<T>[] = [];
-
-  updateFeature &&
-    options.push({
-      id: "edit",
-      label: "Edit",
-      onClick: (item: T) => handleClickListOption("edit", item),
-    });
-
-  deleteFeature &&
-    options.push({
-      id: "remove",
-      label: "Remove",
-      onClick: (item: T) => handleClickListOption("remove", item),
-    });
-
-  const actions: HeaderAction[] = [];
-
-  addFeature &&
-    actions.push({
-      id: "add",
-      text: "Add",
-      href: `${basePath}/add`,
-    });
-
-  return (
-    <HeaderLayout loading={listRequest.loading || deleteRequest.loading}>
-      <Header
-        title={modelName}
-        preset="default"
-        actions={actions.length > 0 ? actions : undefined}
-      />
-      <Content>
-        <TableList
-          columns={model.fields
-            .filter(({ listable }) => listable)
-            .map(({ id, name, type }) => ({
-              disablePadding: false,
-              id,
-              label: name,
-              numeric: type === "number",
-              sort: false,
-            }))}
-          data={listData}
-          defaultSort={model.fields[0].id}
-          onClick={handleClickListItem}
-          options={options.length > 0 ? options : undefined}
-        />
-      </Content>
-    </HeaderLayout>
-  );
-};

package/src/generators/model-router/screens/screens.types.ts

@@ -1,38 +0,0 @@
-import { Model } from "../../generators.model";
-
-export interface BaseScreenProps {
-  /**
-   * UI-friendly string that represents the model
-   */
-  modelName: string;
-
-  /**
-   * Structure that represents the fields of the model
-   */
-  model: Model;
-
-  /**
-   * Path to attach before each internal ModelRouter path
-   */
-  basePath?: string;
-
-  /**
-   * If true delete features are enabled
-   */
-  deleteFeature?: boolean;
-
-  /**
-   * If true update features are enabled
-   */
-  updateFeature?: boolean;
-
-  /**
-   * If true add features are enabled
-   */
-  addFeature?: boolean;
-
-  /**
-   * If true details features are enabled
-   */
-  detailsFeature?: boolean;
-}

package/src/generators/model-router/screens/update-screen.tsx

@@ -1,105 +0,0 @@
-import React, { useEffect } from "react";
-import { useParams } from "react-router-dom";
-import { Content, Header } from "~/components";
-import { BasicModelInstance } from "../../generators.model";
-import { ModelForm } from "../../model-form";
-import { useNavigateWhenValueChanges } from "~/hooks";
-import { HeaderLayout } from "../../../layouts";
-import { useNotifyWhenValueChanges } from "../../../providers";
-import { RequestState } from "../model-router.types";
-import { BaseScreenProps } from "./screens.types";
-
-export interface UpdateScreenProps<T extends BasicModelInstance> extends BaseScreenProps {
-  /**
-   * Callback executed when the user wants to update
-   * an item
-   */
-  onSubmitUpdateItem: (obj: T) => void;
-  /**
-   * Current status of the request to update an item
-   */
-  submitUpdateItemRequest: RequestState;
-
-  /**
-   * Current status of the request to retrieve
-   * the item to be updated
-   */
-  updateItemRequest: RequestState;
-
-  /**
-   * Callback executed to retrive the item that
-   * has to going tobe updated
-   */
-  onRequestUpdateItem: (id: string) => void;
-
-  /**
-   * Item that is going to be updated
-   */
-  updateItem?: T;
-}
-
-export const UpdateScreen = <T extends BasicModelInstance>({
-  model,
-  modelName,
-  basePath = "",
-  submitUpdateItemRequest,
-  updateItemRequest,
-  updateItem,
-  onSubmitUpdateItem,
-  onRequestUpdateItem,
-}: UpdateScreenProps<T>) => {
-  const { id = "" } = useParams();
-  const loading = updateItemRequest.loading || submitUpdateItemRequest.loading;
-
-  useEffect(() => {
-    onRequestUpdateItem(id);
-  }, [id]);
-
-  useNotifyWhenValueChanges(
-    {
-      title: "Item updated",
-      message: `The item ${id} has been updated successfully`,
-      severity: "success",
-    },
-    !!submitUpdateItemRequest.success,
-    { from: false, to: true },
-  );
-  useNavigateWhenValueChanges(`${basePath}/`, !!submitUpdateItemRequest.success, {
-    from: false,
-    to: true,
-  });
-  useNotifyWhenValueChanges(
-    { title: "We had an error", message: submitUpdateItemRequest.error || "", severity: "error" },
-    !!submitUpdateItemRequest.error,
-    { from: false, to: true },
-  );
-
-  return (
-    <HeaderLayout loading={loading}>
-      <Header
-        title={`Edit ${id}`}
-        preset="default"
-        breadcrumbs={[
-          {
-            id: "list",
-            text: modelName,
-            link: `${basePath}/`,
-          },
-          {
-            id: "update",
-            text: `Edit ${id}`,
-            link: `${basePath}/${id}/update`,
-          },
-        ]}
-      />
-      <Content>
-        <ModelForm
-          model={model}
-          initialValues={updateItem}
-          saveButtonText="Save"
-          onSubmit={onSubmitUpdateItem}
-        />
-      </Content>
-    </HeaderLayout>
-  );
-};

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

@@ -1,39 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { withNotificationCenter, withActionRouter } from "../../../storybook";
-import { item1 } from "./templates";
-import { DetailsScreen } from "../screens";
-import { mockModel } from "../../generators.mock";
-import { IdleRequest, LoadingRequest } from "../model-router.types";
-
-export default {
-  title: "Generators/ModelRouter/DetailsScreen",
-  component: DetailsScreen,
-  decorators: [
-    withActionRouter({
-      location: `/${item1.id}`,
-      path: "/:id",
-    }),
-    withNotificationCenter,
-  ],
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof DetailsScreen>;
-type Story = StoryObj<typeof DetailsScreen>;
-
-export const Loading: Story = {
-  args: {
-    modelName: "Items",
-    model: mockModel,
-    itemRequest: LoadingRequest,
-  },
-};
-
-export const Details: Story = {
-  args: {
-    modelName: "Items",
-    model: mockModel,
-    itemRequest: IdleRequest,
-    detailsItem: item1,
-  },
-};

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

@@ -1,102 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { withActionRouter, withNotificationCenter } from "../../../storybook";
-import { IdleRequest, LoadingRequest } from "../model-router.types";
-import { data } from "./templates";
-import { ListScreen } from "../screens";
-import { mockModel } from "../../generators.mock";
-
-export default {
-  title: "Generators/ModelRouter/ListScreen",
-  component: ListScreen,
-  decorators: [withActionRouter(), withNotificationCenter],
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof ListScreen>;
-type Story = StoryObj<typeof ListScreen>;
-
-export const ListLoading: Story = {
-  args: {
-    modelName: "Items",
-    model: mockModel,
-    listData: data,
-    listRequest: LoadingRequest,
-    deleteRequest: IdleRequest,
-  },
-};
-
-export const DeleteLoading: Story = {
-  args: {
-    modelName: "Items",
-    model: mockModel,
-    listData: data,
-    listRequest: IdleRequest,
-    deleteRequest: LoadingRequest,
-  },
-};
-
-export const List: Story = {
-  args: {
-    modelName: "Items",
-    model: mockModel,
-    listData: data,
-    listRequest: IdleRequest,
-    deleteRequest: IdleRequest,
-  },
-};
-
-export const WithoutDeleteFeature: Story = {
-  args: {
-    modelName: "Items",
-    model: mockModel,
-    listData: data,
-    listRequest: IdleRequest,
-    deleteRequest: IdleRequest,
-    deleteFeature: false,
-  },
-};
-
-export const WithoutUpdateFeature: Story = {
-  args: {
-    modelName: "Items",
-    model: mockModel,
-    listData: data,
-    listRequest: IdleRequest,
-    deleteRequest: IdleRequest,
-    updateFeature: false,
-  },
-};
-
-export const WithoutDeleteAndUpdateFeature: Story = {
-  args: {
-    modelName: "Items",
-    model: mockModel,
-    listData: data,
-    listRequest: IdleRequest,
-    deleteRequest: IdleRequest,
-    deleteFeature: false,
-    updateFeature: false,
-  },
-};
-
-export const WithoutAddFeature: Story = {
-  args: {
-    modelName: "Items",
-    model: mockModel,
-    listData: data,
-    listRequest: IdleRequest,
-    deleteRequest: IdleRequest,
-    addFeature: false,
-  },
-};
-
-export const WithoutDetailsFeature: Story = {
-  args: {
-    modelName: "Items",
-    model: mockModel,
-    listData: data,
-    listRequest: IdleRequest,
-    deleteRequest: IdleRequest,
-    detailsFeature: false,
-  },
-};