@pautena/react-design-system 0.12.0 → 0.12.2

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

@@ -1,245 +0,0 @@
-import React, { ReactElement } from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import { HeaderLayout, HeaderLayoutProps } from "./header-layout";
-import { withLocalizationProvider, withMemoryRouter } from "~/storybook";
-import { withFullHeight } from "../../storybook";
-import { Content, Header, HeaderProps, HeaderTab, SkeletonGrid, TabPanel } from "../../components";
-import { Box, Typography } from "@mui/material";
-import { useDemoData } from "@mui/x-data-grid-generator";
-import { ModelForm, ObjectDetails, TableList } 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",
-  },
-];
-
-interface HeaderLayoutStoryProps extends HeaderLayoutProps {
-  headerProps: HeaderProps;
-  contentChildren: ReactElement;
-}
-
-const DummyHeaderLayout = ({ headerProps, contentChildren, ...rest }: HeaderLayoutStoryProps) => {
-  return (
-    <HeaderLayout {...rest}>
-      <Header {...headerProps} />
-      <Content>{contentChildren}</Content>
-    </HeaderLayout>
-  );
-};
-
-export default {
-  title: "Layouts/HeaderLayout",
-  component: DummyHeaderLayout,
-  decorators: [withMemoryRouter(), withFullHeight, withLocalizationProvider],
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<typeof DummyHeaderLayout>;
-type Story = StoryObj<typeof DummyHeaderLayout>;
-
-export const Skeleton: Story = {
-  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 as any}
-      columns={columns}
-      defaultSort={columns[0].id}
-      defaultOrder="asc"
-    />
-  );
-};
-
-export const List: Story = {
-  args: {
-    headerProps: {
-      title: "Lorem ipsum",
-      subtitle: "Dolor sit amet",
-      breadcrumbs,
-      actions,
-    },
-    contentChildren: <ListContent />,
-  },
-};
-
-export const Details: Story = {
-  args: {
-    headerProps: {
-      title: "Lorem ipsum",
-      subtitle: "Dolor sit amet",
-      breadcrumbs,
-      actions,
-    },
-    contentChildren: <ObjectDetails model={mockModel} instance={createModelInstance(mockModel)} />,
-  },
-};
-
-export const Form: Story = {
-  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: { rows, columns },
-  } = useDemoData({
-    dataSet: "Commodity",
-    rowLength: 100,
-    maxColumns: 7,
-    editable: true,
-  });
-
-  return <DataGrid rows={rows} columns={columns as any} pagination sx={{ height: 400 }} />;
-};
-
-export const DataTable: Story = {
-  args: {
-    headerProps: {
-      title: "Lorem ipsum",
-      subtitle: "Dolor sit amet",
-      breadcrumbs,
-      actions,
-    },
-    contentChildren: <DataTableContent />,
-  },
-};
-
-export const Tabs: Story = {
-  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: Story = {
-  args: {
-    loading: true,
-    headerProps: {
-      title: "Lorem ipsum",
-      subtitle: "Dolor sit amet",
-      breadcrumbs,
-      actions,
-    },
-    contentChildren: <SkeletonGrid />,
-  },
-};
-
-export const Fetching: Story = {
-  args: {
-    fetching: true,
-    headerProps: {
-      title: "Lorem ipsum",
-      subtitle: "Dolor sit amet",
-      breadcrumbs,
-      actions,
-    },
-    contentChildren: <SkeletonGrid />,
-  },
-};
-
-export const Error: Story = {
-  args: {
-    error: {
-      message: "There is no user with that id",
-    },
-    headerProps: {
-      title: "Lorem ipsum",
-      subtitle: "Dolor sit amet",
-      breadcrumbs,
-      actions,
-    },
-    contentChildren: <SkeletonGrid />,
-  },
-};

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

@@ -1,102 +0,0 @@
-import React from "react";
-import { HeaderLayout, HeaderLayoutError } from "./header-layout";
-import { render, screen } from "~/tests/testing-library";
-import { Content, Header } from "../../components";
-import { Typography } from "@mui/material";
-import { expectProgressIndicator } from "~/tests/assertions";
-
-describe("HeaderLayout", () => {
-  const renderComponent = ({
-    loading,
-    fetching,
-    error,
-  }: { loading?: boolean; fetching?: boolean; error?: HeaderLayoutError } = {}) => {
-    return render(
-      <HeaderLayout loading={loading} fetching={fetching} error={error}>
-        <Header title="Lorem ipsum" subtitle="Dolor sit amet" />
-        <Content>
-          <Typography>Test content</Typography>
-        </Content>
-      </HeaderLayout>,
-    );
-  };
-
-  it("should 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("should render a main element", () => {
-    renderComponent();
-
-    expect(screen.getByRole("main")).toBeVisible();
-  });
-
-  it("should render the content", () => {
-    renderComponent();
-
-    expect(screen.getByText(/test content/i)).toBeVisible();
-  });
-
-  it("should render a loading indicator if loading=true", () => {
-    renderComponent({ loading: true });
-
-    expectProgressIndicator();
-  });
-
-  describe("fetching=true", () => {
-    it("should render a loading indicator", () => {
-      renderComponent({ fetching: true });
-
-      expectProgressIndicator();
-    });
-
-    it("should render the content", () => {
-      renderComponent({ fetching: true });
-
-      expect(screen.getByText(/test content/i)).toBeVisible();
-    });
-  });
-
-  describe("error", () => {
-    it("should not render the error if there is no one", () => {
-      renderComponent({ error: undefined });
-
-      expect(screen.queryByText(/there has been an error/i)).not.toBeInTheDocument();
-    });
-
-    it("should render a title if there is an error without title", () => {
-      renderComponent({
-        error: {
-          message: "Invalid user id",
-        },
-      });
-
-      expect(screen.queryByText(/there has been an error/i)).toBeVisible();
-    });
-
-    it("should render a title if there is an error with title", () => {
-      renderComponent({
-        error: {
-          title: "We had an error",
-          message: "Invalid user id",
-        },
-      });
-
-      expect(screen.queryByText(/we had an error/i)).toBeVisible();
-    });
-
-    it("should render the message", () => {
-      renderComponent({
-        error: {
-          title: "We had an error",
-          message: "Invalid user id",
-        },
-      });
-
-      expect(screen.queryByText(/invalid user id/i)).toBeVisible();
-    });
-  });
-});

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

@@ -1,49 +0,0 @@
-import { Box, LinearProgress } from "@mui/material";
-import React from "react";
-import { ContentElement, HeaderElement, Placeholder, PlaceholderIcon } from "../../components";
-import { LoadingArea } from "../../components/feedback/loading-area";
-import { TabProvider } from "../../providers";
-import ReportProblemIcon from "@mui/icons-material/ReportProblem";
-
-export interface HeaderLayoutError {
-  icon?: PlaceholderIcon;
-  title?: string;
-  message: string;
-}
-
-export interface HeaderLayoutProps {
-  loading?: boolean;
-  fetching?: boolean;
-  error?: HeaderLayoutError;
-  children: [HeaderElement, ContentElement];
-}
-
-const DefaultErrorIcon = () => <ReportProblemIcon color="error" sx={{ width: 200, height: 200 }} />;
-
-export const HeaderLayout = ({ loading, children, fetching, error }: HeaderLayoutProps) => {
-  const [headerElement, contentElement] = children;
-
-  return (
-    <TabProvider>
-      <Box display="flex" flexDirection="column" height={1}>
-        {headerElement}
-        {fetching && (
-          <Box width={1}>
-            <LinearProgress />
-          </Box>
-        )}
-        {loading && <LoadingArea />}
-        {error && (
-          <Box mt={4}>
-            <Placeholder
-              icon={error.icon || DefaultErrorIcon}
-              title={error.title || "There has been an error"}
-              subtitle={error.message}
-            />
-          </Box>
-        )}
-        {!loading && !error && contentElement}
-      </Box>
-    </TabProvider>
-  );
-};

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

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

package/src/layouts/index.ts

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

package/src/layouts/layouts.stories.mdx

@@ -1,11 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import LinkTo from '@storybook/addon-links/react';
-
-<Meta title="Layouts/Introduction" />
-
-## Layouts
-
-<ul>
-  <li><LinkTo kind="Layouts/DrawerLayout">DrawerLayout</LinkTo></li>
-  <li><LinkTo kind="Layouts/HeaderLayout">HeaderLayout</LinkTo></li>
-</ul>

package/src/providers/index.ts

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

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

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

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

@@ -1,31 +0,0 @@
-import { AlertColor } from "@mui/material";
-import React from "react";
-
-export const NotificationCenterProviderUndefinedError = new Error(
-  "NotificationCenterContext.Provider is required and was undefined",
-);
-
-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.hooks.ts

@@ -1,23 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useNotificationCenter, Notification } from "./notification-center.context";
-
-export interface NotifyWhenValueChangesOptions<T> {
-  from: T;
-  to: T;
-}
-
-export const useNotifyWhenValueChanges = <T>(
-  notification: Notification,
-  value: T | undefined,
-  { from, to }: NotifyWhenValueChangesOptions<T>,
-) => {
-  const prevRef = useRef<T>();
-  const { show } = useNotificationCenter();
-
-  useEffect(() => {
-    if (prevRef.current === from && value === to) {
-      show(notification);
-    }
-    prevRef.current = value;
-  }, [value]);
-};

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

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

@@ -1,52 +0,0 @@
-import React from "react";
-import { Meta } from "@storybook/react";
-import { NotificationCenterProvider } from "./notification-center.provider";
-import { useNotificationCenter } from "./notification-center.context";
-import { Button, Box } from "@mui/material";
-import { ContentPlaceholder } from "~/components";
-
-const DummyError = {
-  title: "Internal Server error",
-  message: "Unable to save the item",
-};
-
-export default {
-  title: "Components/Feedback/NotificationCenter",
-  component: ContentPlaceholder,
-  decorators: [
-    (Story) => (
-      <NotificationCenterProvider>
-        <Story />
-      </NotificationCenterProvider>
-    ),
-  ],
-  parameters: {
-    layout: "fullscreen",
-  },
-} satisfies Meta<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>
-  );
-};