@pautena/react-design-system 0.0.1

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

@@ -0,0 +1,52 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { ModelRouterProps } from "../..";
+import { FormLayout, FormLayoutProps } from "../../../layouts";
+import { useNotificationCenter } from "../../../providers/notification-center/notification-center.context";
+
+const getAddPropsFromModel = ({ model, modelName, add }: ModelRouterProps): FormLayoutProps => {
+  return {
+    loading: add.request.loading,
+    headerProps: {
+      title: `Add ${modelName}`,
+      preset: "default",
+      breadcrumbs: [
+        {
+          id: "list",
+          text: modelName,
+          link: "/",
+        },
+        {
+          id: "add",
+          text: `Add new ${modelName}`,
+          link: "/add",
+        },
+      ],
+    },
+    modelFormProps: {
+      model,
+      saveButtonText: "Save",
+      onSubmit: add.onSubmit,
+    },
+  };
+};
+
+export const AddScreen = (props: ModelRouterProps) => {
+  const navigate = useNavigate();
+  const { show } = useNotificationCenter();
+
+  useEffect(() => {
+    if (props.add.request.success) {
+      show({ message: "Item added successfully", severity: "success" });
+      navigate("/");
+    }
+  }, [props.add.request.success]);
+
+  useEffect(() => {
+    if (props.add.request.error) {
+      show({ title: "We had an error", message: props.add.request.error, severity: "error" });
+    }
+  }, [props.add.request.error]);
+
+  return <FormLayout {...getAddPropsFromModel(props)} />;
+};

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

@@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { ModelRouterProps } from "..";
+import { PlaceholderIconArgs } from "../../../components";
+import { DetailsLayout, DetailsLayoutProps } from "../../../layouts";
+import SentimentVeryDissatisfiedIcon from "@mui/icons-material/SentimentVeryDissatisfied";
+
+const getDetailsPropsFromModel = (
+  { modelName, model, detail }: ModelRouterProps,
+  id: string,
+): DetailsLayoutProps => {
+  return {
+    loading: detail.request.loading,
+    headerProps: {
+      title: id,
+      preset: "default",
+      breadcrumbs: [
+        {
+          id: "list",
+          text: modelName,
+          link: "/",
+        },
+        {
+          id: "detail",
+          text: id,
+          link: `/${id}`,
+        },
+      ],
+    },
+    objectDetailsProps: {
+      model,
+      instance: detail.instance,
+    },
+    notFoundPlaceholderProps: {
+      title: "Not found",
+      subtitle: "There is no item with that id",
+      icon: ({ size, color }: PlaceholderIconArgs) => (
+        <SentimentVeryDissatisfiedIcon color={color} sx={{ fontSize: size }} />
+      ),
+    },
+  };
+};
+
+export const DetailsScreen = (props: ModelRouterProps) => {
+  const onScreenMount = props.detail.onScreenMount;
+  const { id = "" } = useParams();
+
+  useEffect(() => {
+    onScreenMount && onScreenMount(id);
+  }, [id]);
+
+  return <DetailsLayout {...getDetailsPropsFromModel(props, id)} />;
+};

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,81 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { BasicData } from "../../../components";
+import { ListLayoutProps, ListLayout } from "../../../layouts";
+import type { ModelRouterProps } from "../model-router";
+
+const getListPropsFromModel = <T extends BasicData>(
+  { model, modelName, list }: ModelRouterProps,
+  onClickListItem: (d: T) => void,
+  onClickListOption: (optionId: "edit" | "remove", item: T) => void,
+): ListLayoutProps<T> => {
+  return {
+    loading: list.listRequest.loading || list.requestDelete.loading,
+    headerProps: {
+      title: modelName,
+      preset: "default",
+      actions: [
+        {
+          id: "add",
+          text: "Add",
+          href: "/add",
+        },
+      ],
+    },
+    emptyPlaceholderProps: {
+      title: `There is no ${modelName}`,
+      subtitle: `There is no item right now`,
+    },
+    listProps: {
+      columns: model.fields
+        .filter(({ listable }) => listable)
+        .map(({ id, name, type }) => ({
+          disablePadding: false,
+          id,
+          label: name,
+          numeric: type === "number",
+          sort: false,
+        })),
+      data: list.data,
+      defaultSort: model.fields[0].id,
+      onClick: onClickListItem,
+      options: [
+        {
+          id: "edit",
+          label: "Edit",
+          onClick: (item) => onClickListOption("edit", item),
+        },
+        {
+          id: "remove",
+          label: "Remove",
+          onClick: (item) => onClickListOption("remove", item),
+        },
+      ],
+    },
+  };
+};
+
+export const ListScreen = (props: ModelRouterProps) => {
+  const { requestList = () => null } = props;
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    requestList();
+  }, []);
+
+  const handleClickListItem = (item: any) => {
+    navigate(`/${item.id}`);
+  };
+
+  const handleClickListOption = (optionId: "edit" | "remove", item: BasicData) => {
+    if (optionId === "edit") {
+      navigate(`/${item.id}/update`);
+    } else {
+      props.list.onClickRemoveItem(item);
+    }
+  };
+
+  return (
+    <ListLayout {...getListPropsFromModel(props, handleClickListItem, handleClickListOption)} />
+  );
+};

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

@@ -0,0 +1,62 @@
+import React, { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { FormLayout, FormLayoutProps } from "../../../layouts";
+import { useNotificationCenter } from "../../../providers/notification-center/notification-center.context";
+import type { ModelRouterProps } from "../model-router";
+
+const getUpdatePropsFromModel = (
+  { modelName, model, update: { instance, onSubmit, request, requestInstance } }: ModelRouterProps,
+  id: string,
+): FormLayoutProps => {
+  const loading = request.loading || requestInstance.loading;
+
+  return {
+    loading: loading,
+    headerProps: {
+      title: `Edit ${id}`,
+      preset: "default",
+      breadcrumbs: [
+        {
+          id: "list",
+          text: modelName,
+          link: "/",
+        },
+        {
+          id: "update",
+          text: `Edit ${id}`,
+          link: `/${id}/update`,
+        },
+      ],
+    },
+    modelFormProps: {
+      model,
+      initialValues: instance,
+      saveButtonText: "Save",
+      onSubmit: onSubmit,
+    },
+  };
+};
+
+export const UpdateScreen = (props: ModelRouterProps) => {
+  const { id = "" } = useParams();
+  const navigate = useNavigate();
+  const { show } = useNotificationCenter();
+  const { onRequestInstance = () => null, request } = props.update;
+
+  useEffect(() => {
+    onRequestInstance(id);
+  }, [id]);
+
+  useEffect(() => {
+    if (request.success) {
+      show({
+        title: "Item updated",
+        message: `The item ${id} has been updated successfully`,
+        severity: "success",
+      });
+      navigate("/");
+    }
+  }, [request.success]);
+
+  return <FormLayout {...getUpdatePropsFromModel(props, id)} />;
+};

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,70 @@
+import React from "react";
+import { Grid } from "@mui/material";
+import {
+  GroupValueCard,
+  GroupValueItem,
+  ValueBoolean,
+  ValueCard,
+  ValueText,
+} from "../../components";
+import { ModelField, GroupField, Model } from "../generators.model";
+
+const singleDetailValueFactory = ({ id, name, type }: ModelField, instance: object) => {
+  const value = instance[id];
+  if (type === "boolean") {
+    return <ValueBoolean label={name} value={value} />;
+  }
+  return <ValueText label={name} value={value?.toString()} />;
+};
+
+interface ObjectDetailGroupProps {
+  detail: GroupField;
+  instance: object;
+}
+
+const ObjectDetailGroup = ({
+  detail: { name, description, value },
+  instance,
+}: ObjectDetailGroupProps) => {
+  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 {
+  model: Model;
+  instance: object;
+}
+
+export const ObjectDetails = ({ model, instance }: ObjectDetailsProps) => {
+  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 detail={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,4 @@
+export * from "./components";
+export * from "./utils";
+export * from "./layouts";
+export * from "./generators";

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

@@ -0,0 +1,29 @@
+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";
+
+export default {
+  title: "Layouts/AppBarWithDrawer",
+  component: AppBarWithDrawerLayout,
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof AppBarWithDrawerLayout>;
+
+export const MiniDrawerStory = () => (
+  <AppBarWithDrawerLayout
+    drawer={
+      <MiniDrawer>
+        <DrawerContent nav={mockNav} />
+      </MiniDrawer>
+    }
+    appBar={<MiniAppBar title="Lorem ipsum" onClickSignOut={() => null} />}
+  >
+    <ContentPlaceholder />
+  </AppBarWithDrawerLayout>
+);
+MiniDrawerStory.storyName = "Mini drawer";

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

@@ -0,0 +1,34 @@
+import React, { PropsWithChildren, ReactElement } from "react";
+import { styled } from "@mui/material/styles";
+import { AppBarComponent } from "../../components/app-bar";
+import { DrawerElement } from "../../components/drawer";
+import { Box, AppBarProps } 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,
+}));
+
+interface Props {
+  drawer: DrawerElement;
+  appBar: ReactElement<AppBarProps, AppBarComponent>;
+}
+
+export const AppBarWithDrawerLayout = ({ drawer, appBar, children }: PropsWithChildren<Props>) => {
+  return (
+    <Box sx={{ display: "flex" }}>
+      <DrawerProvider>
+        {appBar}
+        {drawer}
+        <Box sx={{ flexGrow: 1, p: 3 }}>
+          <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/data-table-layout/data-table-layout.stories.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { DataTableLayout } from "./data-table-layout";
+import { useDemoData } from "@mui/x-data-grid-generator";
+import { withRouter } from "storybook-addon-react-router-v6";
+import { PlaceholderIconArgs } from "../../components";
+import BackupTableIcon from "@mui/icons-material/BackupTable";
+
+const maxColumns = 7;
+const editable = true;
+const breadcrumbs = [
+  {
+    id: "list",
+    text: "Items",
+    link: "/items",
+  },
+  {
+    id: "item",
+    text: "Item 1",
+    link: "/items/1",
+  },
+];
+
+const args = {
+  size: 100,
+  dataSetType: "Commodity",
+  headerProps: {
+    title: "Lorem ipsum",
+    subtitle: "Dolor sit amet",
+    breadcrumbs,
+    actions: [
+      {
+        id: "new",
+        text: "Add",
+      },
+    ],
+  },
+  dataGridProps: {
+    height: 500,
+  },
+  emptyPlaceholderProps: {
+    title: "No item has found",
+    subtitle: "First you have to create an item",
+    icon: ({ size, color }: PlaceholderIconArgs) => (
+      <BackupTableIcon color={color} sx={{ fontSize: size }} />
+    ),
+    actions: [
+      {
+        id: "add",
+        text: "Add",
+        href: "/item/add",
+      },
+    ],
+  },
+};
+
+export default {
+  title: "Layouts/DataTableLayout",
+  component: DataTableLayout,
+  decorators: [withRouter],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof DataTableLayout>;
+
+const Template = createTemplate(({ loading, dataSetType, size, dataGridProps, ...rest }) => {
+  const { data } = useDemoData({
+    dataSet: dataSetType,
+    rowLength: size,
+    maxColumns,
+    editable,
+  });
+  return (
+    <DataTableLayout loading={loading} dataGridProps={{ ...data, ...dataGridProps }} {...rest} />
+  );
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  ...args,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...args,
+  loading: true,
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+  ...args,
+  size: 0,
+};

package/src/layouts/data-table-layout/data-table-layout.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { HeaderProps, Placeholder, PlaceholderProps } from "../../components";
+import { DataGrid, DataGridProps } from "@mui/x-data-grid";
+import { HeaderLayout } from "../header-layout";
+
+interface Props {
+  loading?: boolean;
+  headerProps: HeaderProps;
+  emptyPlaceholderProps: PlaceholderProps;
+  dataGridProps: DataGridProps & { height: number };
+}
+
+export const DataTableLayout = ({
+  loading,
+  headerProps,
+  emptyPlaceholderProps,
+  dataGridProps: { height, rows, ...restDataGridProps },
+}: Props) => {
+  const isEmpty = rows.length === 0;
+
+  return (
+    <HeaderLayout loading={loading} headerProps={headerProps}>
+      {!isEmpty ? (
+        <DataGrid rows={rows} {...restDataGridProps} sx={{ height }} />
+      ) : (
+        <Placeholder {...emptyPlaceholderProps} />
+      )}
+    </HeaderLayout>
+  );
+};

package/src/layouts/data-table-layout/index.ts

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

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

@@ -0,0 +1,81 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { DetailsLayout } from "./details-layout";
+import { withRouter } from "storybook-addon-react-router-v6";
+import { mockModel, createModelInstance } from "../../generators/generators.mock";
+import SentimentVeryDissatisfiedIcon from "@mui/icons-material/SentimentVeryDissatisfied";
+import { PlaceholderIconArgs } from "../../components";
+
+const breadcrumbs = [
+  {
+    id: "list",
+    text: "Items",
+    link: "/items",
+  },
+  {
+    id: "item",
+    text: "Item 1",
+    link: "/items/1",
+  },
+];
+
+const args = {
+  size: 100,
+  dataSetType: "Commodity",
+  headerProps: {
+    title: "Lorem ipsum",
+    subtitle: "Dolor sit amet",
+    breadcrumbs,
+    actions: [
+      {
+        id: "new",
+        text: "Add",
+      },
+    ],
+  },
+  notFoundPlaceholderProps: {
+    title: "Not found",
+    subtitle: "There is no item with that id",
+    icon: ({ size, color }: PlaceholderIconArgs) => (
+      <SentimentVeryDissatisfiedIcon color={color} sx={{ fontSize: size }} />
+    ),
+  },
+};
+
+export default {
+  title: "Layouts/DetailsLayout",
+  component: DetailsLayout,
+  decorators: [withRouter],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof DetailsLayout>;
+
+const Template = createTemplate(DetailsLayout);
+
+export const Default = Template.bind({});
+Default.args = {
+  ...args,
+  objectDetailsProps: {
+    model: mockModel,
+    instance: createModelInstance(mockModel),
+  },
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...args,
+  loading: true,
+  objectDetailsProps: {
+    model: mockModel,
+  },
+};
+
+export const NotFound = Template.bind({});
+NotFound.args = {
+  ...args,
+  objectDetailsProps: {
+    model: mockModel,
+  },
+};

package/src/layouts/details-layout/details-layout.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { HeaderProps, Placeholder, PlaceholderProps } from "../../components";
+import { Model, ObjectDetails } from "../../generators";
+import { HeaderLayout } from "../header-layout";
+
+export interface DetailsLayoutProps {
+  loading?: boolean;
+  headerProps: HeaderProps;
+  objectDetailsProps: {
+    model: Model;
+    instance?: object;
+  };
+  notFoundPlaceholderProps: PlaceholderProps;
+}
+
+export const DetailsLayout = ({
+  loading,
+  headerProps,
+  notFoundPlaceholderProps,
+  objectDetailsProps: { model, instance },
+}: DetailsLayoutProps) => {
+  const notFound = !loading && !instance;
+
+  return (
+    <HeaderLayout loading={loading} headerProps={headerProps}>
+      {!notFound && instance ? (
+        <ObjectDetails model={model} instance={instance} />
+      ) : (
+        <Placeholder {...notFoundPlaceholderProps} />
+      )}
+    </HeaderLayout>
+  );
+};