@pautena/react-design-system 0.0.1

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

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

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

@@ -0,0 +1,65 @@
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { FormLayout } from "./form-layout";
+import { mockModel, createModelInstance } from "../../generators/generators.mock";
+import { withRouter } from "storybook-addon-react-router-v6";
+import { action } from "@storybook/addon-actions";
+
+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",
+      },
+    ],
+  },
+  modelFormProps: {
+    model: mockModel,
+    onSubmit: action("submit model form"),
+  },
+};
+
+export default {
+  title: "Layouts/FormLayout",
+  component: FormLayout,
+  decorators: [withRouter],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof FormLayout>;
+
+const Template = createTemplate(FormLayout);
+
+export const Add = Template.bind({});
+Add.args = {
+  ...args,
+};
+
+export const Update = Template.bind({});
+Update.args = {
+  ...args,
+  modelFormProps: {
+    ...args.modelFormProps,
+    saveButtonText: "update",
+    initialValues: createModelInstance(mockModel),
+  },
+};

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { HeaderProps } from "../../components";
+import { ModelFormProps, ModelForm } from "../../generators";
+import { HeaderLayout } from "../header-layout";
+
+export interface FormLayoutProps {
+  loading?: boolean;
+  headerProps: HeaderProps;
+  modelFormProps: ModelFormProps;
+}
+
+export const FormLayout = ({ loading, headerProps, modelFormProps }: FormLayoutProps) => {
+  return (
+    <HeaderLayout loading={loading} headerProps={headerProps}>
+      <ModelForm {...modelFormProps} />
+    </HeaderLayout>
+  );
+};

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

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

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

@@ -0,0 +1,68 @@
+import React 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";
+
+const breadcrumbs = [
+  {
+    id: "list",
+    text: "Items",
+    link: "/items",
+  },
+  {
+    id: "item",
+    text: "Item 1",
+    link: "/items/1",
+  },
+];
+
+export default {
+  title: "Layouts/HeaderLayout",
+  component: HeaderLayout,
+  decorators: [withRouter, withFullHeight],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof HeaderLayout>;
+
+const Template = createTemplate((args) => {
+  return (
+    <HeaderLayout {...args}>
+      <SkeletonGrid />
+    </HeaderLayout>
+  );
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  headerProps: {
+    title: "Lorem ipsum",
+    subtitle: "Dolor sit amet",
+    breadcrumbs,
+    actions: [
+      {
+        id: "new",
+        text: "Add",
+      },
+    ],
+  },
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+  headerProps: {
+    title: "Lorem ipsum",
+    subtitle: "Dolor sit amet",
+    breadcrumbs,
+    actions: [
+      {
+        id: "new",
+        text: "Add",
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,24 @@
+import { Box, Container } from "@mui/material";
+import React, { PropsWithChildren, useState } from "react";
+import { Header, HeaderProps, TabContextProvider } from "../../components";
+import { LoadingArea } from "../../components/loading-area";
+
+interface Props {
+  loading?: boolean;
+  headerProps: HeaderProps;
+}
+
+export const HeaderLayout = ({ loading, headerProps, children }: PropsWithChildren<Props>) => {
+  const [tab, setTab] = useState(0);
+
+  return (
+    <TabContextProvider value={tab}>
+      <Box display="flex" flexDirection="column" height={1}>
+        <Header {...headerProps} selectedTab={tab} onChangeTab={(_, index) => setTab(index)} />
+        <Container component="main" sx={{ py: 3, flexGrow: 1 }}>
+          {loading ? <LoadingArea /> : children}
+        </Container>
+      </Box>
+    </TabContextProvider>
+  );
+};

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

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

package/src/layouts/index.ts

@@ -0,0 +1,7 @@
+export * from "./data-table-layout";
+export * from "./header-layout";
+export * from "./tab-layout";
+export * from "./list-layout";
+export * from "./app-bar-with-drawer-layout";
+export * from "./details-layout";
+export * from "./form-layout";

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

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

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

@@ -0,0 +1,102 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { ListLayout } from "./list-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 = 3;
+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",
+      },
+    ],
+  },
+  listProps: {
+    search: true,
+  },
+  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/ListLayout",
+  component: ListLayout,
+  decorators: [withRouter],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof ListLayout>;
+
+const Template = createTemplate(({ loading, dataSetType, size, listProps, ...rest }) => {
+  const { data } = useDemoData({
+    dataSet: dataSetType,
+    rowLength: size,
+    maxColumns,
+    editable,
+  });
+
+  const { rows } = data;
+  const columns = data.columns.map(({ field, headerName }) => ({
+    id: field,
+    label: headerName,
+    sort: true,
+  }));
+
+  return (
+    <ListLayout loading={loading} listProps={{ ...listProps, data: rows, columns }} {...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/list-layout/list-layout.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import {
+  BasicData,
+  HeaderProps,
+  Placeholder,
+  PlaceholderProps,
+  TableList,
+  TableListProps,
+} from "../../components";
+import { HeaderLayout } from "../header-layout";
+
+export interface ListLayoutProps<T extends BasicData> {
+  loading?: boolean;
+  headerProps: HeaderProps;
+  listProps: TableListProps<T>;
+  emptyPlaceholderProps: PlaceholderProps;
+}
+
+export const ListLayout = <T extends BasicData>({
+  loading,
+  headerProps,
+  emptyPlaceholderProps,
+  listProps: { data, ...restListProps },
+}: ListLayoutProps<T>) => {
+  const isEmpty = data.length === 0;
+
+  return (
+    <HeaderLayout loading={loading} headerProps={headerProps}>
+      {!isEmpty ? (
+        <TableList data={data} {...restListProps} />
+      ) : (
+        <Placeholder {...emptyPlaceholderProps} />
+      )}
+    </HeaderLayout>
+  );
+};

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

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

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

@@ -0,0 +1,88 @@
+import React from "react";
+import { ComponentMeta } from "@storybook/react";
+import { createTemplate } from "../../storybook";
+import { TabLayout } from "./tab-layout";
+import { withRouter } from "storybook-addon-react-router-v6";
+import { Typography } from "@mui/material";
+import { HeaderTab, TabPanel } from "../../components";
+
+const breadcrumbs = [
+  {
+    id: "list",
+    text: "Items",
+    link: "/items",
+  },
+  {
+    id: "item",
+    text: "Item 1",
+    link: "/items/1",
+  },
+];
+
+const tabs: HeaderTab[] = [
+  {
+    id: "tab1",
+    label: "Tab 1",
+  },
+  {
+    id: "tab2.1",
+    label: "Tab 2.1",
+  },
+  {
+    id: "tab2.2",
+    label: "Tab 2.2",
+  },
+  {
+    id: "tab3",
+    label: "Tab 3",
+    disabled: true,
+  },
+  {
+    id: "tab4",
+    label: "Tab 4",
+  },
+];
+
+export default {
+  title: "Layouts/TabLayout",
+  component: TabLayout,
+  decorators: [withRouter],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof TabLayout>;
+
+const Template = createTemplate((args) => {
+  return (
+    <TabLayout {...args}>
+      <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>
+      <TabPanel index={4}>
+        <Typography>Panel 4</Typography>
+      </TabPanel>
+    </TabLayout>
+  );
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  headerProps: {
+    title: "Lorem ipsum",
+    subtitle: "Dolor sit amet",
+    breadcrumbs,
+    tabs,
+    actions: [
+      {
+        id: "new",
+        text: "Add",
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from "react";
+import { HeaderProps } from "../../components";
+import { HeaderLayout } from "../header-layout";
+
+interface Props {
+  headerProps: HeaderProps;
+}
+
+export const TabLayout = ({ headerProps, children }: PropsWithChildren<Props>) => {
+  return <HeaderLayout headerProps={headerProps}>{children}</HeaderLayout>;
+};

package/src/providers/index.ts

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

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

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

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>
+  );
+};