@pautena/react-design-system 0.1.2 → 0.2.0

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

@@ -0,0 +1,30 @@
+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, addFeature, detailsFeature } = 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

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

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

@@ -0,0 +1,70 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Header, Content } from "~/components";
+import { BasicModelInstance, ModelForm } from "~/generators";
+import { HeaderLayout } from "../../../layouts";
+import { useNotificationCenter } from "../../../providers";
+import { RequestState } from "../model-router.types";
+import { BaseScreenProps } from "./screens.types";
+
+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>) => {
+  const navigate = useNavigate();
+  const { show } = useNotificationCenter();
+
+  useEffect(() => {
+    if (newItemRequest.success) {
+      show({ message: "Item added successfully", severity: "success" });
+      navigate(`${basePath}/`);
+    }
+  }, [newItemRequest.success]);
+
+  useEffect(() => {
+    if (newItemRequest.error) {
+      show({ title: "We had an error", message: newItemRequest.error, severity: "error" });
+    }
+  }, [newItemRequest.error]);
+
+  return (
+    <HeaderLayout loading={newItemRequest.loading}>
+      <Header
+        title={`Add ${modelName}`}
+        preset="default"
+        breadcrumbs={[
+          {
+            id: "list",
+            text: modelName,
+            link: "/",
+          },
+          {
+            id: "add",
+            text: `Add new ${modelName}`,
+            link: "/add",
+          },
+        ]}
+      />
+      <Content>
+        <ModelForm model={model} saveButtonText="Save" onSubmit={onSubmitNewItem} />
+      </Content>
+    </HeaderLayout>
+  );
+};

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

@@ -0,0 +1,62 @@
+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, ObjectDetails } from "~/generators";
+
+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,
+  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: "/",
+          },
+          {
+            id: "detail",
+            text: id,
+            link: `/${id}`,
+          },
+        ]}
+      />
+      <Content>{detailsItem && <ObjectDetails model={model} instance={detailsItem} />}</Content>
+    </HeaderLayout>
+  );
+};

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,125 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Content, Header, HeaderAction, TableList, TableRowOption } from "~/components";
+import { BasicModelInstance } from "~/generators";
+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();
+  }, []);
+
+  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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,97 @@
+import React, { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { Content, Header } from "~/components";
+import { BasicModelInstance, ModelForm } from "~/generators";
+import { HeaderLayout } from "../../../layouts";
+import { useNotificationCenter } 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 navigate = useNavigate();
+  const { show } = useNotificationCenter();
+  const loading = updateItemRequest.loading || submitUpdateItemRequest.loading;
+
+  useEffect(() => {
+    onRequestUpdateItem(id);
+  }, [id]);
+
+  useEffect(() => {
+    if (submitUpdateItemRequest.success) {
+      show({
+        title: "Item updated",
+        message: `The item ${id} has been updated successfully`,
+        severity: "success",
+      });
+      navigate(`${basePath}/`);
+    }
+  }, [submitUpdateItemRequest.success]);
+
+  return (
+    <HeaderLayout loading={loading}>
+      <Header
+        title={`Edit ${id}`}
+        preset="default"
+        breadcrumbs={[
+          {
+            id: "list",
+            text: modelName,
+            link: "/",
+          },
+          {
+            id: "update",
+            text: `Edit ${id}`,
+            link: `/${id}/update`,
+          },
+        ]}
+      />
+      <Content>
+        <ModelForm
+          model={model}
+          initialValues={updateItem}
+          saveButtonText="Save"
+          onSubmit={onSubmitUpdateItem}
+        />
+      </Content>
+    </HeaderLayout>
+  );
+};

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

@@ -0,0 +1,38 @@
+import { ComponentMeta } from "@storybook/react";
+import { withNotificationCenter, createTemplate, 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",
+  },
+} as ComponentMeta<typeof DetailsScreen>;
+
+const Template = createTemplate(DetailsScreen);
+
+export const Loading = Template.bind({});
+Loading.args = {
+  modelName: "Items",
+  model: mockModel,
+  itemRequest: LoadingRequest,
+};
+
+export const Details = Template.bind({});
+Details.args = {
+  modelName: "Items",
+  model: mockModel,
+  itemRequest: IdleRequest,
+  detailsItem: item1,
+};

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

@@ -0,0 +1,96 @@
+import { ComponentMeta } 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";
+
+export default {
+  title: "Generators/ModelRouter/ListScreen",
+  component: ListScreen,
+  decorators: [withActionRouter(), withNotificationCenter],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<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 DeleteLoading = Template.bind({});
+DeleteLoading.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 WithoutDeleteFeature = Template.bind({});
+WithoutDeleteFeature.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 WithoutDeleteAndUpdateFeature = Template.bind({});
+WithoutDeleteAndUpdateFeature.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 WithoutDetailsFeature = Template.bind({});
+WithoutDetailsFeature.args = {
+  modelName: "Items",
+  model: mockModel,
+  listData: data,
+  listRequest: IdleRequest,
+  deleteRequest: IdleRequest,
+  detailsFeature: false,
+};