@pautena/react-design-system 0.12.2 → 0.13.0-alpha.1

package/dist/utils/types/generators/model-router/screens/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./update-screen";
+export * from "./list-screen";
+export * from "./add-screen";
+export * from "./details-screen";

package/dist/utils/types/generators/model-router/screens/list-screen.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { BasicModelInstance } from "../../generators.model";
+import { RequestState } from "../model-router.types";
+import { BaseScreenProps } from "./screens.types";
+export interface ListScreenProps<T extends BasicModelInstance> extends BaseScreenProps {
+    /**
+     * Callback executed each time the list screen
+     * requests for a data update
+     */
+    onRequestList: () => void;
+    /**
+     * List of items to be displayed in the list screen
+     */
+    listData: T[];
+    /**
+     * Callback executed when the user clicks an option
+     * to delete an item
+     */
+    onClickDeleteItem: (item: T) => void;
+    /**
+     * Current status of the request to retrieve
+     * the list items
+     */
+    listRequest: RequestState;
+    /**
+     * Current status of the request to delete
+     * an item
+     */
+    deleteRequest: RequestState;
+}
+export declare const ListScreen: <T extends BasicModelInstance>({ model, modelName, listData, listRequest, deleteRequest, basePath, deleteFeature, updateFeature, addFeature, detailsFeature, onRequestList, onClickDeleteItem, }: ListScreenProps<T>) => React.JSX.Element;

package/dist/utils/types/generators/model-router/screens/screens.types.d.ts

@@ -0,0 +1,31 @@
+import { Model } from "../../generators.model";
+export interface BaseScreenProps {
+    /**
+     * UI-friendly string that represents the model
+     */
+    modelName: string;
+    /**
+     * Structure that represents the fields of the model
+     */
+    model: Model;
+    /**
+     * Path to attach before each internal ModelRouter path
+     */
+    basePath?: string;
+    /**
+     * If true delete features are enabled
+     */
+    deleteFeature?: boolean;
+    /**
+     * If true update features are enabled
+     */
+    updateFeature?: boolean;
+    /**
+     * If true add features are enabled
+     */
+    addFeature?: boolean;
+    /**
+     * If true details features are enabled
+     */
+    detailsFeature?: boolean;
+}

package/dist/utils/types/generators/model-router/screens/update-screen.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { BasicModelInstance } from "../../generators.model";
+import { RequestState } from "../model-router.types";
+import { BaseScreenProps } from "./screens.types";
+export interface UpdateScreenProps<T extends BasicModelInstance> extends BaseScreenProps {
+    /**
+     * Callback executed when the user wants to update
+     * an item
+     */
+    onSubmitUpdateItem: (obj: T) => void;
+    /**
+     * Current status of the request to update an item
+     */
+    submitUpdateItemRequest: RequestState;
+    /**
+     * Current status of the request to retrieve
+     * the item to be updated
+     */
+    updateItemRequest: RequestState;
+    /**
+     * Callback executed to retrive the item that
+     * has to going tobe updated
+     */
+    onRequestUpdateItem: (id: string) => void;
+    /**
+     * Item that is going to be updated
+     */
+    updateItem?: T;
+}
+export declare const UpdateScreen: <T extends BasicModelInstance>({ model, modelName, basePath, submitUpdateItemRequest, updateItemRequest, updateItem, onSubmitUpdateItem, onRequestUpdateItem, }: UpdateScreenProps<T>) => React.JSX.Element;

package/dist/utils/types/generators/model-router/stories/templates.d.ts

@@ -0,0 +1,21 @@
+import { MockInstance } from "../../generators.mock";
+export declare const onRequestListAction: import("@storybook/addon-actions").HandlerFunction;
+export declare const onSubmitNewItemAction: import("@storybook/addon-actions").HandlerFunction;
+export declare const onRequestItem: import("@storybook/addon-actions").HandlerFunction;
+export declare const onRequestUpdateItemAction: import("@storybook/addon-actions").HandlerFunction;
+export declare const onSubmitUpdateAction: import("@storybook/addon-actions").HandlerFunction;
+export declare const onRequestDeleteAction: import("@storybook/addon-actions").HandlerFunction;
+export declare const REQUEST_TIMEOUT = 2000;
+export declare const item1: MockInstance;
+export declare const data: MockInstance[];
+export declare const baseArgs: {
+    modelName: string;
+    model: import("../..").Model;
+    listData: MockInstance[];
+    listRequest: import("../model-router.types").RequestState;
+    deleteRequest: import("../model-router.types").RequestState;
+    newItemRequest: import("../model-router.types").RequestState;
+    updateItemRequest: import("../model-router.types").RequestState;
+    submitUpdateItemRequest: import("../model-router.types").RequestState;
+    itemRequest: import("../model-router.types").RequestState;
+};

package/dist/utils/types/generators/object-details/index.d.ts

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

package/dist/utils/types/generators/object-details/object-details.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { Model, BasicModelInstance } from "../generators.model";
+export interface ObjectDetailsProps<T extends BasicModelInstance> {
+    model: Model;
+    dense?: boolean;
+    instance: T;
+}
+export declare const ObjectDetails: <T extends BasicModelInstance>({ model, instance, dense, }: ObjectDetailsProps<T>) => React.JSX.Element;

package/dist/utils/types/generators/table-list/index.d.ts

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

package/dist/utils/types/generators/table-list/table-list.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { HeadCell, Order } from "../../components/tables/enhanced-table";
+import { BasicModelInstance } from "../generators.model";
+export interface TableRowOption<T extends BasicModelInstance> {
+    id: string;
+    label: string;
+    onClick: (item: T) => void;
+}
+export interface TableListProps<T extends BasicModelInstance> {
+    columns: HeadCell<T>[];
+    data: T[];
+    search?: boolean;
+    defaultSort: string;
+    defaultOrder?: Order;
+    loading?: boolean;
+    options?: TableRowOption<T>[];
+    onClick?: (d: T) => void;
+}
+export declare const TableList: <T extends BasicModelInstance>({ columns: columnsProp, options, data, onClick, search, defaultSort, defaultOrder, loading, }: TableListProps<T>) => React.JSX.Element;

package/dist/utils/types/hooks/index.d.ts

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

package/dist/utils/types/hooks/routing/index.d.ts

@@ -0,0 +1 @@
+export * from "./routing.hooks";

package/dist/utils/types/hooks/routing/routing.hooks.d.ts

@@ -0,0 +1,5 @@
+export interface NavigateWhenValueChangesOptions<T> {
+    from: T;
+    to: T;
+}
+export declare const useNavigateWhenValueChanges: <T>(path: string, value: T | undefined, { from, to }: NavigateWhenValueChangesOptions<T>) => void;

package/dist/utils/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./components";
+export * from "./utils";
+export * from "./layouts";
+export * from "./generators";
+export * from "./providers";

package/dist/utils/types/layouts/drawer-layout/drawer-layout.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from "react";
+import { DrawerAppBarElement, DrawerElement } from "../../components/drawers";
+import { DrawerProviderProps } from "../../components/drawers/drawer-provider/drawer.provider";
+export interface DrawerLayoutProps {
+    drawerProviderProps?: DrawerProviderProps;
+    children: [DrawerElement, DrawerAppBarElement, ReactNode];
+}
+export declare const DrawerLayout: ({ drawerProviderProps, children: childrenProps, }: DrawerLayoutProps) => React.JSX.Element;

package/dist/utils/types/layouts/drawer-layout/index.d.ts

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

package/dist/utils/types/layouts/header-layout/header-layout.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ContentElement, HeaderElement, PlaceholderIcon } from "../../components";
+export interface HeaderLayoutError {
+    icon?: PlaceholderIcon;
+    title?: string;
+    message: string;
+}
+export interface HeaderLayoutProps {
+    loading?: boolean;
+    fetching?: boolean;
+    error?: HeaderLayoutError;
+    children: [HeaderElement, ContentElement];
+}
+export declare const HeaderLayout: ({ loading, children, fetching, error }: HeaderLayoutProps) => React.JSX.Element;

package/dist/utils/types/layouts/header-layout/index.d.ts

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

package/dist/utils/types/layouts/index.d.ts

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

package/dist/utils/types/providers/index.d.ts

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

package/dist/utils/types/providers/notification-center/index.d.ts

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

package/dist/utils/types/providers/notification-center/notification-center.context.d.ts

@@ -0,0 +1,14 @@
+import { AlertColor } from "@mui/material";
+import React from "react";
+export declare const NotificationCenterProviderUndefinedError: Error;
+export interface Notification {
+    severity: AlertColor;
+    title?: string;
+    message: string;
+}
+export interface NotificationCenterProps {
+    show(notification: Notification): void;
+    hide(): void;
+}
+export declare const NotificationCenterContext: React.Context<NotificationCenterProps | undefined>;
+export declare const useNotificationCenter: () => NotificationCenterProps;

package/dist/utils/types/providers/notification-center/notification-center.hooks.d.ts

@@ -0,0 +1,6 @@
+import { Notification } from "./notification-center.context";
+export interface NotifyWhenValueChangesOptions<T> {
+    from: T;
+    to: T;
+}
+export declare const useNotifyWhenValueChanges: <T>(notification: Notification, value: T | undefined, { from, to }: NotifyWhenValueChangesOptions<T>) => void;

package/dist/utils/types/providers/notification-center/notification-center.provider.d.ts

@@ -0,0 +1,5 @@
+import React, { PropsWithChildren } from "react";
+export type NotificationCenterProviderProps = PropsWithChildren<{
+    autoHideDuration?: number;
+}>;
+export declare const NotificationCenterProvider: ({ children, autoHideDuration, }: NotificationCenterProviderProps) => React.JSX.Element;

package/dist/utils/types/providers/tab-provider/index.d.ts

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

package/dist/utils/types/providers/tab-provider/tab-provider.context.d.ts

@@ -0,0 +1,4 @@
+import { Dispatch, SetStateAction } from "react";
+export declare const TabContext: import("react").Context<[number, Dispatch<SetStateAction<number>>]>;
+export declare const TabContextProvider: import("react").Provider<[number, Dispatch<SetStateAction<number>>]>;
+export declare const useTab: () => [number, Dispatch<SetStateAction<number>>];

package/dist/utils/types/providers/tab-provider/tab-provider.provider.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { PropsWithChildren } from "react";
+type TabProviderProps = PropsWithChildren<{
+    initialValue?: number;
+}>;
+export declare const TabProvider: ({ children, initialValue }: TabProviderProps) => React.JSX.Element;
+export {};

package/dist/utils/types/utils/arrays.d.ts

@@ -0,0 +1,5 @@
+export declare const newArrayWithSize: <T>(size: number, fillValue: T) => any;
+export declare const getRandomItem: <T>(items: T[]) => {
+    index: number;
+    item: T;
+};

package/dist/utils/types/utils/breakpoints.d.ts

@@ -0,0 +1,13 @@
+import { ResponsiveStyleValue } from "@mui/system";
+interface Breakpoints {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+}
+interface BreakpointsCounter extends Breakpoints {
+    increment(breakpoints: Partial<Breakpoints>): ResponsiveStyleValue<boolean>;
+}
+export declare const newBreakpointsCounter: (breakpoint?: number) => BreakpointsCounter;
+export {};

package/dist/utils/types/utils/forms.d.ts

@@ -0,0 +1,2 @@
+import { FormEvent } from "react";
+export declare const getFormData: <T>(e: FormEvent<HTMLFormElement>) => T;

package/dist/utils/types/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./arrays";
+export * from "./theme";
+export * from "./breakpoints";
+export * from "./forms";

package/dist/utils/types/utils/theme.d.ts

@@ -0,0 +1,7 @@
+import { Color } from "@mui/material";
+type KeyColor = keyof Color;
+export declare const useGetDefaultThemeColor: ({ lightWeight, darkWeight, }?: {
+    lightWeight?: keyof Color | undefined;
+    darkWeight?: keyof Color | undefined;
+}) => string;
+export {};

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.12.2",
+  "version": "0.13.0-alpha.1",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "rollup -c",
+    "build": "rm -rf dist && rollup -c",
     "test": "vitest run",
     "test:watch": "vitest",
     "coverage": "vitest run --coverage",
@@ -33,91 +33,93 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@emotion/utils": "^1.2.1",
-    "@mui/base": "^5.0.0-beta.5",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.134",
-    "@mui/material": "^5.13.6",
-    "@mui/system": "^5.13.6",
-    "@mui/x-data-grid": "^6.9.0",
-    "@mui/x-date-pickers": "^6.9.0",
+    "@mui/base": "^5.0.0-beta.13",
+    "@mui/icons-material": "^5.14.7",
+    "@mui/lab": "^5.0.0-alpha.142",
+    "@mui/material": "^5.14.7",
+    "@mui/system": "^5.14.7",
+    "@mui/x-data-grid": "^6.12.0",
+    "@mui/x-date-pickers": "^6.12.0",
+    "@rollup/plugin-replace": "^5.0.2",
     "date-fns": "^2.30.0",
     "lorem-ipsum": "^2.0.8",
-    "markdown-to-jsx": "^7.2.1",
+    "markdown-to-jsx": "^7.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.0"
+    "react-router-dom": "^6.15.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
+    "@babel/core": "^7.22.11",
+    "@babel/preset-env": "^7.22.14",
     "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@date-io/date-fns": "^2.16.0",
+    "@babel/preset-typescript": "^7.22.11",
+    "@date-io/date-fns": "^2.17.0",
     "@faker-js/faker": "^8.0.2",
-    "@mui/x-data-grid-generator": "^6.9.0",
-    "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "8.3.3",
-    "@storybook/addon-actions": "^7.0.24",
-    "@storybook/addon-essentials": "^7.0.24",
-    "@storybook/addon-interactions": "^7.0.24",
+    "@mui/x-data-grid-generator": "^6.12.0",
+    "@rollup/plugin-alias": "^5.0.0",
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-typescript": "^11.1.3",
+    "@storybook/addon-actions": "^7.4.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
     "@storybook/addon-knobs": "^7.0.2",
-    "@storybook/addon-links": "^7.0.24",
-    "@storybook/addon-mdx-gfm": "^7.0.24",
-    "@storybook/react": "^7.0.24",
-    "@storybook/react-webpack5": "^7.0.24",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addon-mdx-gfm": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
     "@storybook/testing-library": "^0.2.0",
-    "@storybook/testing-react": "^2.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@storybook/testing-react": "^2.0.1",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/ramda": "^0.29.2",
-    "@types/react": "^18.0.31",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
-    "babel-loader": "^9.1.2",
+    "@types/ramda": "^0.29.3",
+    "@types/react": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
+    "babel-loader": "^9.1.3",
     "babel-plugin-module-resolver": "^5.0.0",
-    "eslint": "^8.43.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-storybook": "^0.6.12",
-    "gh-pages": "^5.0.0",
+    "eslint": "^8.48.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-storybook": "^0.6.13",
+    "gh-pages": "^6.0.0",
     "history": "^5.3.0",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.3",
     "ramda": "^0.29.0",
     "react-test-renderer": "^18.2.0",
     "rollup": "^2.79.1",
     "rollup-plugin-dts": "^4.2.3",
+    "rollup-plugin-generate-package-json": "^3.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
-    "storybook": "^7.0.24",
-    "tslib": "^2.6.0",
-    "typescript": "^5.1.6",
+    "storybook": "^7.4.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
     "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.33.0"
+    "vitest": "^0.34.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@emotion/utils": "^1.2.1",
-    "@mui/base": "^5.0.0-beta.5",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.134",
-    "@mui/material": "^5.13.6",
-    "@mui/x-data-grid": "^6.9.0",
-    "@mui/x-date-pickers": "^6.9.0",
-    "@types/react": "^18.2.14",
+    "@mui/base": "^5.0.0-beta.13",
+    "@mui/icons-material": "^5.14.7",
+    "@mui/lab": "^5.0.0-alpha.142",
+    "@mui/material": "^5.14.7",
+    "@mui/x-data-grid": "^6.12.0",
+    "@mui/x-date-pickers": "^6.12.0",
+    "@types/react": "^18.2.21",
     "date-fns": "^2.30.0",
     "lorem-ipsum": "^2.0.8",
-    "markdown-to-jsx": "^7.2.1",
+    "markdown-to-jsx": "^7.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.0"
+    "react-router-dom": "^6.15.0"
   },
   "repository": {
     "type": "git",

package/.eslintrc.cjs

@@ -1,40 +0,0 @@
-module.exports = {
-  root: true,
-  settings: {
-    react: {
-      version: "detect",
-    },
-  },
-  env: {
-    browser: true,
-    es2021: true,
-    node: true,
-  },
-  extends: [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended",
-    "plugin:storybook/recommended",
-  ],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: "latest",
-    sourceType: "module",
-  },
-  plugins: ["react", "@typescript-eslint"],
-  rules: {
-    "prettier/prettier": "error",
-    "react/display-name": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        varsIgnorePattern: "^_",
-        argsIgnorePattern: "^_",
-      },
-    ],
-  },
-};

package/.prettierrc.cjs

@@ -1,5 +0,0 @@
-module.exports = {
-  printWidth: 100,
-  semi: true,
-  trailingComma: "all",
-};