@pautena/react-design-system 0.1.2 → 0.2.0

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

@@ -0,0 +1,176 @@
+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[];
+  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,
+    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) => {
+    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}
+      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}
+    />
+  );
+};
+
+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

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

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

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

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

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

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

@@ -0,0 +1,76 @@
+import React from "react";
+import { Grid } from "@mui/material";
+import {
+  GroupValueCard,
+  GroupValueItem,
+  ValueBoolean,
+  ValueCard,
+  ValueText,
+} from "../../components";
+import { ModelField, GroupField, Model, BasicModelInstance } from "../generators.model";
+
+const singleDetailValueFactory = <T extends BasicModelInstance>(
+  { id, name, type }: ModelField,
+  instance: T,
+) => {
+  const value = instance[id];
+  if (type === "boolean") {
+    return <ValueBoolean label={name} value={value} />;
+  }
+  return <ValueText label={name} value={value?.toString()} />;
+};
+
+interface ObjectDetailGroupProps<T extends BasicModelInstance> {
+  field: GroupField;
+  instance: T;
+}
+
+const ObjectDetailGroup = <T extends BasicModelInstance>({
+  field: { name, description, value },
+  instance,
+}: ObjectDetailGroupProps<T>) => {
+  return (
+    <GroupValueCard title={name} subtitle={description}>
+      {value.map((field) => {
+        const { id, xs, sm, md, lg, xl } = field;
+        return (
+          <GroupValueItem key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl}>
+            {singleDetailValueFactory(field, instance)}
+          </GroupValueItem>
+        );
+      })}
+    </GroupValueCard>
+  );
+};
+
+export interface ObjectDetailsProps<T extends BasicModelInstance> {
+  model: Model;
+  instance: T;
+}
+
+export const ObjectDetails = <T extends BasicModelInstance>({
+  model,
+  instance,
+}: ObjectDetailsProps<T>) => {
+  return (
+    <Grid container spacing={2}>
+      {model.fields.map((field) => {
+        const { id, type, xs = 3, sm, md, lg, xl } = field;
+
+        if (type === "group") {
+          return (
+            <Grid item key={id} xs={12}>
+              <ObjectDetailGroup field={field} instance={instance[id]} />
+            </Grid>
+          );
+        }
+
+        return (
+          <Grid item key={id} xs={xs} sm={sm} md={md} lg={lg} xl={xl}>
+            <ValueCard>{singleDetailValueFactory(field, instance)}</ValueCard>
+          </Grid>
+        );
+      })}
+    </Grid>
+  );
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./components";
+export * from "./utils";
+export * from "./layouts";
+export * from "./generators";
+export * from "./providers";

package/src/layouts/app-bar-with-drawer-layout/app-bar-with-drawer-layout.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { AppBarWithDrawerLayout } from "./app-bar-with-drawer-layout";
+import { ContentPlaceholder } from "../../tests";
+import { mockNav } from "../../components/drawer/drawer.mock";
+import { MiniAppBar } from "../../components/app-bar";
+import { DrawerContent, MiniDrawer } from "../../components";
+import { withMemoryRouter } from "~/storybook";
+
+export default {
+  title: "Layouts/AppBarWithDrawer",
+  component: AppBarWithDrawerLayout,
+  decorators: [withMemoryRouter()],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof AppBarWithDrawerLayout>;
+
+export const MiniDrawerStory = () => (
+  <AppBarWithDrawerLayout>
+    <MiniDrawer>
+      <DrawerContent nav={mockNav} />
+    </MiniDrawer>
+    <MiniAppBar title="Lorem ipsum" onClickSignOut={() => null} />
+    <ContentPlaceholder p={3} />
+  </AppBarWithDrawerLayout>
+);
+MiniDrawerStory.storyName = "Mini drawer";

package/src/layouts/app-bar-with-drawer-layout/app-bar-with-drawer-layout.test.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { MiniDrawerStory } from "./app-bar-with-drawer-layout.stories";
+import { expectContentPlaceholder, render, screen } from "../../tests";
+import userEvent from "@testing-library/user-event";
+
+describe("AppBarWithDrawerLayout", () => {
+  const renderComponent = () => {
+    return render(<MiniDrawerStory />);
+  };
+
+  it("would render a drawer", async () => {
+    renderComponent();
+
+    await userEvent.click(screen.getByTestId("MenuIcon"));
+
+    expect(screen.getByRole("button", { name: /item 1.1/i })).toBeInTheDocument();
+  });
+
+  it("would render an appbar", () => {
+    renderComponent();
+
+    expect(screen.getByRole("heading", { level: 1, name: /lorem ipsum/i })).toBeInTheDocument();
+  });
+
+  it("would render the content", async () => {
+    renderComponent();
+
+    await expectContentPlaceholder();
+  });
+});

package/src/layouts/app-bar-with-drawer-layout/app-bar-with-drawer-layout.tsx

@@ -0,0 +1,37 @@
+import React, { ReactNode } from "react";
+import { styled } from "@mui/material/styles";
+import { AppBarElement } from "../../components/app-bar";
+import { DrawerElement } from "../../components/drawer";
+import { Box } from "@mui/material";
+import { DrawerProvider } from "../../components/drawer/drawer.provider";
+
+const DrawerHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  padding: theme.spacing(0, 1),
+  ...theme.mixins.toolbar,
+}));
+
+export interface AppBarWithDrawerLayoutProps {
+  children: [DrawerElement, AppBarElement, ReactNode];
+}
+
+export const AppBarWithDrawerLayout = ({
+  children: childrenProps,
+}: AppBarWithDrawerLayoutProps) => {
+  const [appBar, drawer, children] = childrenProps;
+
+  return (
+    <Box sx={{ display: "flex" }}>
+      <DrawerProvider>
+        {appBar}
+        {drawer}
+        <Box sx={{ flexGrow: 1 }}>
+          <DrawerHeader />
+          {children}
+        </Box>
+      </DrawerProvider>
+    </Box>
+  );
+};

package/src/layouts/app-bar-with-drawer-layout/index.ts

@@ -0,0 +1 @@
+export * from "./app-bar-with-drawer-layout";

package/src/layouts/header-layout/header-layout.stories.tsx

@@ -0,0 +1,204 @@
+import React, { ReactElement } from "react";
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { HeaderLayout } from "./header-layout";
+import { withMemoryRouter } from "~/storybook";
+import { SkeletonGrid } from "../../tests";
+import { withFullHeight } from "../../storybook";
+import { Content, Header, HeaderProps, HeaderTab, TableList, TabPanel } from "../../components";
+import { Box, Typography } from "@mui/material";
+import { useDemoData } from "@mui/x-data-grid-generator";
+import { ModelForm, ObjectDetails } from "../../generators";
+import { mockModel, createModelInstance } from "../../generators/generators.mock";
+import { action } from "@storybook/addon-actions";
+import { DataGrid } from "@mui/x-data-grid";
+
+const breadcrumbs = [
+  {
+    id: "list",
+    text: "Items",
+    link: "/items",
+  },
+  {
+    id: "item",
+    text: "Item 1",
+    link: "/items/1",
+  },
+];
+
+const actions = [
+  {
+    id: "new",
+    text: "Add",
+  },
+];
+
+const tabs: HeaderTab[] = [
+  {
+    id: "tab1",
+    label: "Tab 1",
+  },
+  {
+    id: "tab2",
+    label: "Tab 2",
+    disabled: true,
+  },
+  {
+    id: "tab3",
+    label: "Tab 3",
+  },
+];
+
+export default {
+  title: "Layouts/HeaderLayout",
+  component: HeaderLayout,
+  decorators: [withMemoryRouter(), withFullHeight],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof HeaderLayout>;
+
+interface HeaderLayoutStoryProps {
+  headerProps: HeaderProps;
+  contentChildren: ReactElement;
+}
+
+const Template = createTemplate(
+  ({ headerProps, contentChildren, ...rest }: HeaderLayoutStoryProps) => {
+    return (
+      <HeaderLayout {...rest}>
+        <Header {...headerProps} />
+        <Content>{contentChildren}</Content>
+      </HeaderLayout>
+    );
+  },
+);
+
+export const Skeleton = Template.bind({});
+Skeleton.args = {
+  headerProps: {
+    title: "Lorem ipsum",
+    subtitle: "Dolor sit amet",
+    breadcrumbs,
+    actions,
+  },
+  contentChildren: <SkeletonGrid />,
+};
+
+const ListContent = () => {
+  const { data } = useDemoData({
+    dataSet: "Commodity",
+    rowLength: 100,
+    maxColumns: 3,
+    editable: true,
+  });
+
+  const { rows } = data;
+  const columns = data.columns.map(({ field, headerName }) => ({
+    id: field,
+    label: headerName || "",
+    sort: true,
+    disablePadding: false,
+    numeric: false,
+  }));
+
+  return <TableList data={rows} columns={columns} defaultSort={columns[0].id} defaultOrder="asc" />;
+};
+
+export const List = Template.bind({});
+List.args = {
+  headerProps: {
+    title: "Lorem ipsum",
+    subtitle: "Dolor sit amet",
+    breadcrumbs,
+    actions,
+  },
+  contentChildren: <ListContent />,
+};
+
+export const Details = Template.bind({});
+Details.args = {
+  headerProps: {
+    title: "Lorem ipsum",
+    subtitle: "Dolor sit amet",
+    breadcrumbs,
+    actions,
+  },
+  contentChildren: <ObjectDetails model={mockModel} instance={createModelInstance(mockModel)} />,
+};
+
+export const Form = Template.bind({});
+Form.args = {
+  headerProps: {
+    title: "Lorem ipsum",
+    subtitle: "Dolor sit amet",
+    breadcrumbs,
+    actions,
+  },
+  contentChildren: (
+    <ModelForm
+      model={mockModel}
+      initialValues={createModelInstance(mockModel)}
+      saveButtonText="Save"
+      onSubmit={action("Save form data")}
+    />
+  ),
+};
+
+const DataTableContent = () => {
+  const { data } = useDemoData({
+    dataSet: "Commodity",
+    rowLength: 100,
+    maxColumns: 7,
+    editable: true,
+  });
+
+  return <DataGrid rows={data.rows} columns={data.columns} pagination sx={{ height: 400 }} />;
+};
+
+export const DataTable = Template.bind({});
+DataTable.args = {
+  headerProps: {
+    title: "Lorem ipsum",
+    subtitle: "Dolor sit amet",
+    breadcrumbs,
+    actions,
+  },
+  contentChildren: <DataTableContent />,
+};
+
+export const Tabs = Template.bind({});
+Tabs.args = {
+  headerProps: {
+    title: "Lorem ipsum",
+    subtitle: "Dolor sit amet",
+    breadcrumbs,
+    actions,
+    tabs,
+  },
+  contentChildren: (
+    <Box>
+      <TabPanel index={0}>
+        <Typography>Panel 1</Typography>
+      </TabPanel>
+      <TabPanel index={[1, 2]}>
+        <Typography>Panel 2</Typography>
+      </TabPanel>
+      <TabPanel index={3}>
+        <Typography>Panel 3</Typography>
+      </TabPanel>
+    </Box>
+  ),
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+  headerProps: {
+    title: "Lorem ipsum",
+    subtitle: "Dolor sit amet",
+    breadcrumbs,
+    actions,
+  },
+  contentChildren: <SkeletonGrid />,
+};

package/src/layouts/header-layout/header-layout.test.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { HeaderLayout } from "./header-layout";
+import { render, screen } from "../../tests";
+import { Content, Header } from "../../components";
+import { Typography } from "@mui/material";
+
+describe("HeaderLayout", () => {
+  const renderComponent = () => {
+    return render(
+      <HeaderLayout>
+        <Header title="Lorem ipsum" subtitle="Dolor sit amet" />
+        <Content>
+          <Typography>Test content</Typography>
+        </Content>
+      </HeaderLayout>,
+    );
+  };
+
+  it("would render the header", () => {
+    renderComponent();
+
+    expect(screen.getByRole("heading", { level: 1, name: /lorem ipsum/i })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 2, name: /dolor sit amet/i })).toBeInTheDocument();
+  });
+
+  it("would render a main element", () => {
+    renderComponent();
+
+    expect(screen.getByRole("main")).toBeInTheDocument();
+  });
+
+  it("would render the content", () => {
+    renderComponent();
+
+    expect(screen.getByText(/test content/i)).toBeInTheDocument();
+  });
+});