@pautena/react-design-system 0.0.1 → 0.1.0

package/dist/esm/types/layouts/data-table-layout/data-table-layout.d.ts

@@ -1,12 +0,0 @@
-import { HeaderProps, PlaceholderProps } from "../../components";
-import { DataGridProps } from "@mui/x-data-grid";
-interface Props {
-    loading?: boolean;
-    headerProps: HeaderProps;
-    emptyPlaceholderProps: PlaceholderProps;
-    dataGridProps: DataGridProps & {
-        height: number;
-    };
-}
-export declare const DataTableLayout: ({ loading, headerProps, emptyPlaceholderProps, dataGridProps: { height, rows, ...restDataGridProps }, }: Props) => JSX.Element;
-export {};

package/dist/esm/types/layouts/data-table-layout/index.d.ts

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

package/dist/esm/types/layouts/details-layout/details-layout.d.ts

@@ -1,12 +0,0 @@
-import { HeaderProps, PlaceholderProps } from "../../components";
-import { Model } from "../../generators";
-export interface DetailsLayoutProps {
-    loading?: boolean;
-    headerProps: HeaderProps;
-    objectDetailsProps: {
-        model: Model;
-        instance?: object;
-    };
-    notFoundPlaceholderProps: PlaceholderProps;
-}
-export declare const DetailsLayout: ({ loading, headerProps, notFoundPlaceholderProps, objectDetailsProps: { model, instance }, }: DetailsLayoutProps) => JSX.Element;

package/dist/esm/types/layouts/details-layout/index.d.ts

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

package/dist/esm/types/layouts/form-layout/form-layout.d.ts

@@ -1,8 +0,0 @@
-import { HeaderProps } from "../../components";
-import { ModelFormProps } from "../../generators";
-export interface FormLayoutProps {
-    loading?: boolean;
-    headerProps: HeaderProps;
-    modelFormProps: ModelFormProps;
-}
-export declare const FormLayout: ({ loading, headerProps, modelFormProps }: FormLayoutProps) => JSX.Element;

package/dist/esm/types/layouts/form-layout/index.d.ts

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

package/dist/esm/types/layouts/list-layout/index.d.ts

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

package/dist/esm/types/layouts/list-layout/list-layout.d.ts

@@ -1,8 +0,0 @@
-import { BasicData, HeaderProps, PlaceholderProps, TableListProps } from "../../components";
-export interface ListLayoutProps<T extends BasicData> {
-    loading?: boolean;
-    headerProps: HeaderProps;
-    listProps: TableListProps<T>;
-    emptyPlaceholderProps: PlaceholderProps;
-}
-export declare const ListLayout: <T extends BasicData>({ loading, headerProps, emptyPlaceholderProps, listProps: { data, ...restListProps }, }: ListLayoutProps<T>) => JSX.Element;

package/dist/esm/types/layouts/tab-layout/index.d.ts

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

package/dist/esm/types/layouts/tab-layout/tab-layout.d.ts

@@ -1,7 +0,0 @@
-import { PropsWithChildren } from "react";
-import { HeaderProps } from "../../components";
-interface Props {
-    headerProps: HeaderProps;
-}
-export declare const TabLayout: ({ headerProps, children }: PropsWithChildren<Props>) => JSX.Element;
-export {};

package/src/components/tab/tab.context.ts

@@ -1,5 +0,0 @@
-import { createContext, useContext } from "react";
-
-export const TabContext = createContext(0);
-export const TabContextProvider = TabContext.Provider;
-export const useTab = () => useContext(TabContext);

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

@@ -1,160 +0,0 @@
-import React from "react";
-import { ComponentMeta } from "@storybook/react";
-import { withBrowserRouter } from "../../storybook";
-import { ModelRouter, RequestState } from "./model-router";
-import { mockModel, createModelInstance } from "../generators.mock";
-import { action } from "@storybook/addon-actions";
-import { useState } from "react";
-import { NotificationCenterProvider } from "../../providers";
-
-const REQUEST_TIMEOUT = 2000;
-
-const data = [
-  createModelInstance(mockModel, 100),
-  createModelInstance(mockModel, 101),
-  createModelInstance(mockModel, 102),
-  createModelInstance(mockModel, 103),
-  createModelInstance(mockModel, 104),
-];
-
-export default {
-  title: "Generators/ModelRouter",
-  component: ModelRouter,
-  decorators: [withBrowserRouter()],
-  parameters: {
-    layout: "fullscreen",
-  },
-} as ComponentMeta<typeof ModelRouter>;
-
-const requestListAction = action("Request list data");
-const onSubmitAddAction = action("Submit add form");
-const onDetailsScreenMount = action("Details screen mount");
-const onRequestUpdateInstanceAction = action("Request update instance");
-const onSubmitUpdateAction = action("Submit update form");
-const onRequestDeleteAction = action("click delete item option");
-
-export const DummyModelRouter = (args: any) => {
-  const {
-    requestTimeout,
-    initialData,
-    requestListAction,
-    onSubmitAddAction,
-    onDetailsScreenMount,
-    onRequestUpdateInstanceAction,
-    onSubmitUpdateAction,
-    onRequestDeleteAction,
-  } = args;
-
-  const [data, setData] = useState<any[]>([]);
-  const [updateInstance, setUpdateInstance] = useState<any>(undefined);
-  const [listRequestState, setListRequestState] = useState<RequestState>({ idle: true });
-  const [addRequestState, setAddRequestState] = useState<RequestState>({ idle: true });
-  const [updateRequestState, setUpdateRequestState] = useState<RequestState>({ idle: true });
-  const [updateInstanceRequestState, setUpdateInstanceRequestState] = useState<RequestState>({
-    idle: true,
-  });
-  const [removeRequestState, setRemoveRequestState] = useState<RequestState>({ idle: true });
-  const [detailRequestState, setDetailRequestState] = useState<RequestState>({ idle: true });
-  const [detailInstance, setDetailInstance] = useState(undefined);
-
-  const props = {
-    ...args,
-    requestList: () => {
-      requestListAction();
-      setListRequestState({ idle: false, loading: true });
-      setTimeout(() => {
-        setData(initialData);
-        setListRequestState({ idle: true, loading: false, success: true });
-      }, requestTimeout);
-    },
-    list: {
-      data,
-      listRequest: listRequestState,
-      requestDelete: removeRequestState,
-      onClickRemoveItem: (item) => {
-        setRemoveRequestState({ idle: false, loading: true });
-        onRequestDeleteAction(item);
-
-        setTimeout(() => {
-          setData((d) => [...d.filter((d) => d !== item)]);
-          setRemoveRequestState({ idle: true, loading: false, success: true });
-        }, requestTimeout);
-      },
-    },
-    add: {
-      request: addRequestState,
-      onSubmit: (obj: any) => {
-        setAddRequestState({ idle: false, loading: true });
-        onSubmitAddAction(obj);
-
-        setTimeout(() => {
-          setData((d) => [...d, obj]);
-          setAddRequestState({ idle: true, loading: false, success: true });
-        }, requestTimeout);
-      },
-    },
-    detail: {
-      request: detailRequestState,
-      instance: detailInstance,
-      onScreenMount: (id: string) => {
-        setDetailInstance(undefined);
-        setDetailRequestState({ idle: false, loading: true });
-        onDetailsScreenMount(id);
-
-        setTimeout(() => {
-          setDetailInstance(data?.find((d) => d.id === id));
-          setDetailRequestState({ idle: true, loading: false, success: true });
-        }, requestTimeout);
-      },
-    },
-    update: {
-      request: updateRequestState,
-      requestInstance: updateInstanceRequestState,
-      instance: updateInstance,
-      onRequestInstance: (id: string) => {
-        setUpdateInstanceRequestState({ idle: false, loading: true });
-        onRequestUpdateInstanceAction(id);
-
-        setTimeout(() => {
-          setUpdateInstance(data?.find((d) => d.id === id));
-          setUpdateInstanceRequestState({ idle: true, loading: false, success: true });
-        }, requestTimeout);
-      },
-      onSubmit: (obj: any) => {
-        setUpdateRequestState({ idle: false, loading: true });
-        onSubmitUpdateAction(obj);
-
-        setTimeout(() => {
-          setData((d) => [
-            ...(d || []).map((item) => {
-              if (item === obj) {
-                return obj;
-              }
-              return item;
-            }),
-          ]);
-          setUpdateRequestState({ idle: true, loading: false, success: true });
-        }, requestTimeout);
-      },
-    },
-  };
-
-  return (
-    <NotificationCenterProvider>
-      <ModelRouter {...props} />
-    </NotificationCenterProvider>
-  );
-};
-
-DummyModelRouter.args = {
-  modelName: "Items",
-  model: mockModel,
-  requestTimeout: REQUEST_TIMEOUT,
-  initialData: data,
-  requestListAction,
-  onSubmitAddAction,
-  onDetailsScreenMount,
-  onRequestUpdateInstanceAction,
-  onSubmitUpdateAction,
-  onRequestDeleteAction,
-};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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