@pautena/react-design-system 0.1.1 → 0.1.2

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

@@ -1,69 +0,0 @@
-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,
-  onSubmitNewItem,
-  newItemRequest,
-}: AddScreenProps<T>) => {
-  const navigate = useNavigate();
-  const { show } = useNotificationCenter();
-
-  useEffect(() => {
-    if (newItemRequest.success) {
-      show({ message: "Item added successfully", severity: "success" });
-      navigate("/");
-    }
-  }, [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

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

@@ -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,110 +0,0 @@
-import React, { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import { Content, Header, TableList } 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,
-  onRequestList,
-  onClickDeleteItem,
-  listRequest,
-  deleteRequest,
-}: ListScreenProps<T>) => {
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    onRequestList();
-  }, []);
-
-  const handleClickListItem = (item: T) => {
-    navigate(`/${item.id}`);
-  };
-
-  const handleClickListOption = (optionId: "edit" | "remove", item: T) => {
-    if (optionId === "edit") {
-      navigate(`/${item.id}/update`);
-    } else {
-      onClickDeleteItem(item);
-    }
-  };
-
-  return (
-    <HeaderLayout loading={listRequest.loading || deleteRequest.loading}>
-      <Header
-        title={modelName}
-        preset="default"
-        actions={[
-          {
-            id: "add",
-            text: "Add",
-            href: "/add",
-          },
-        ]}
-      />
-      <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={[
-            {
-              id: "edit",
-              label: "Edit",
-              onClick: (item) => handleClickListOption("edit", item),
-            },
-            {
-              id: "remove",
-              label: "Remove",
-              onClick: (item) => handleClickListOption("remove", item),
-            },
-          ]}
-        />
-      </Content>
-    </HeaderLayout>
-  );
-};

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

@@ -1,13 +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;
-}

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

@@ -1,96 +0,0 @@
-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,
-  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("/");
-    }
-  }, [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

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

@@ -1,45 +0,0 @@
-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,
-};

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

@@ -1,164 +0,0 @@
-import React from "react";
-import { ComponentMeta } from "@storybook/react";
-import { 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";
-
-interface DummyModelRouterProps {
-  requestTimeout: number;
-  initialData: MockInstance[];
-  onRequestListAction: HandlerFunction;
-  onSubmitNewItemAction: HandlerFunction;
-  onRequestItem: HandlerFunction;
-  onRequestUpdateItemAction: HandlerFunction;
-  onSubmitUpdateAction: HandlerFunction;
-  onRequestDeleteAction: HandlerFunction;
-}
-
-export const DummyModelRouter = (args: DummyModelRouterProps) => {
-  const {
-    requestTimeout,
-    initialData,
-    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) => {
-    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}
-      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}
-    />
-  );
-};
-
-const args: DummyModelRouterProps = {
-  requestTimeout: REQUEST_TIMEOUT,
-  initialData: data,
-  onRequestListAction,
-  onSubmitNewItemAction,
-  onRequestItem,
-  onRequestUpdateItemAction,
-  onSubmitUpdateAction,
-  onRequestDeleteAction,
-};
-
-DummyModelRouter.args = args;
-
-export default {
-  title: "Generators/ModelRouter",
-  component: DummyModelRouter,
-  decorators: [withMemoryRouter(), withNotificationCenter],
-  parameters: {
-    layout: "fullscreen",
-  },
-} as ComponentMeta<typeof DummyModelRouter>;

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

@@ -1,39 +0,0 @@
-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";
-
-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 ModelRouterTemplate = createTemplate(ModelRouter);
-
-export const baseArgs = {
-  modelName: "Items",
-  model: mockModel,
-  listData: data,
-  listRequest: IdleRequest,
-  deleteRequest: IdleRequest,
-  newItemRequest: IdleRequest,
-  updateItemRequest: IdleRequest,
-  submitUpdateItemRequest: IdleRequest,
-  itemRequest: IdleRequest,
-  // onRequestList:onRequestListAction,
-  // onRequestUpdateItem: onRequestUpdateItemAction,
-};

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

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

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

@@ -1,20 +0,0 @@
-import React from "react";
-import { ComponentMeta } 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",
-  },
-} as ComponentMeta<typeof ObjectDetails>;
-
-export const Default = () => {
-  return <ObjectDetails model={mockModel} instance={instance} />;
-};

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

@@ -1,21 +0,0 @@
-import React from "react";
-import { expectModelFieldValue, render } from "../../tests";
-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));
-  });
-});