@pautena/react-design-system 0.1.2 → 0.1.3

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,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,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 { withRouter } from "storybook-addon-react-router-v6";
+
+export default {
+  title: "Layouts/AppBarWithDrawer",
+  component: AppBarWithDrawerLayout,
+  decorators: [withRouter],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof AppBarWithDrawerLayout>;
+
+export const MiniDrawerStory = () => (
+  <AppBarWithDrawerLayout>
+    <MiniDrawer>
+      <DrawerContent nav={mockNav} />
+    </MiniDrawer>
+    <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.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, 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/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 { withRouter } from "storybook-addon-react-router-v6";
+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: [withRouter, 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();
+  });
+});

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

@@ -0,0 +1,23 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { ContentElement, HeaderElement } from "../../components";
+import { LoadingArea } from "../../components/loading-area";
+import { TabProvider } from "../../providers";
+
+interface HeaderLayoutProps {
+  loading?: boolean;
+  children: [HeaderElement, ContentElement];
+}
+
+export const HeaderLayout = ({ loading, children }: HeaderLayoutProps) => {
+  const [headerElement, contentElement] = children;
+
+  return (
+    <TabProvider>
+      <Box display="flex" flexDirection="column" height={1}>
+        {headerElement}
+        {loading ? <LoadingArea /> : contentElement}
+      </Box>
+    </TabProvider>
+  );
+};

package/src/layouts/header-layout/index.ts

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

package/src/layouts/index.ts

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

package/src/providers/index.ts

@@ -0,0 +1,2 @@
+export * from "./notification-center";
+export * from "./tab-provider";

package/src/providers/notification-center/index.ts

@@ -0,0 +1,2 @@
+export * from "./notification-center.provider";
+export * from "./notification-center.context";

package/src/providers/notification-center/notification-center.context.ts

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { AlertColor } from "@mui/material";
+import React from "react";
+
+export const NotificationCenterProviderUndefinedError = new Error(
+  "NotificationCenterContext.Provider is required and was undefined",
+);
+export type SnackbarContentType =
+  | React.ReactElement<any, any>
+  | ((key: string) => React.ReactElement<any, any>);
+
+export type SnackbarActionType = React.ReactNode | ((key: string) => React.ReactNode);
+
+export interface Notification {
+  severity: AlertColor;
+  title?: string;
+  message: string;
+}
+
+export interface NotificationCenterProps {
+  show(notification: Notification): void;
+  hide(): void;
+}
+
+export const NotificationCenterContext = React.createContext<NotificationCenterProps | undefined>(
+  undefined,
+);
+
+export const useNotificationCenter = () => {
+  const context = React.useContext(NotificationCenterContext);
+
+  if (context === undefined) {
+    throw NotificationCenterProviderUndefinedError;
+  }
+
+  return context;
+};

package/src/providers/notification-center/notification-center.provider.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { Snackbar, Alert, AlertTitle } from "@mui/material";
+import React, { PropsWithChildren } from "react";
+import { Notification, NotificationCenterContext } from "./notification-center.context";
+
+export type NotificationCenterProviderProps = PropsWithChildren<{
+  autoHideDuration?: number;
+}>;
+
+export const NotificationCenterProvider = ({
+  children,
+  autoHideDuration = 6000,
+}: NotificationCenterProviderProps) => {
+  const [notification, setNotification] = useState<Notification | undefined>(undefined);
+  const [open, setOpen] = useState(false);
+  const show = (notification: Notification) => {
+    setNotification(notification);
+    setOpen(true);
+  };
+
+  const hide = () => {
+    setOpen(false);
+  };
+
+  return (
+    <NotificationCenterContext.Provider
+      value={{
+        show,
+        hide,
+      }}
+    >
+      <Snackbar
+        open={open}
+        autoHideDuration={autoHideDuration}
+        onClose={hide}
+        anchorOrigin={{ vertical: "top", horizontal: "right" }}
+      >
+        <Alert
+          onClose={hide}
+          severity={notification?.severity}
+          aria-label={notification?.severity}
+          sx={{ width: "100%" }}
+        >
+          {notification?.title && <AlertTitle>{notification?.title}</AlertTitle>}
+          {notification?.message}
+        </Alert>
+      </Snackbar>
+      {children}
+    </NotificationCenterContext.Provider>
+  );
+};

package/src/providers/notification-center/notification-center.stories.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { NotificationCenterProvider } from "./notification-center.provider";
+import { useNotificationCenter } from "./notification-center.context";
+import { ContentPlaceholder } from "../../tests";
+import { Button, Box } from "@mui/material";
+
+const DummyError = {
+  title: "Internal Server error",
+  message: "Unable to save the item",
+};
+
+export default {
+  title: "Providers/NotificationCenter",
+  component: ContentPlaceholder,
+  decorators: [
+    (Story) => (
+      <NotificationCenterProvider>
+        <Story />
+      </NotificationCenterProvider>
+    ),
+  ],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof ContentPlaceholder>;
+
+export const Default = () => {
+  const { show, hide } = useNotificationCenter();
+
+  return (
+    <ContentPlaceholder size={3} p={2}>
+      <Box pb={2}>
+        <Button onClick={() => show({ ...DummyError, severity: "info" })} variant="contained">
+          Show info
+        </Button>
+        <Button onClick={() => show({ ...DummyError, severity: "success" })} variant="contained">
+          Show success
+        </Button>
+        <Button onClick={() => show({ ...DummyError, severity: "warning" })} variant="contained">
+          Show warning
+        </Button>
+        <Button onClick={() => show({ ...DummyError, severity: "error" })} variant="contained">
+          Show error
+        </Button>
+        <Button onClick={hide} variant="contained">
+          hide
+        </Button>
+      </Box>
+    </ContentPlaceholder>
+  );
+};