@pautena/react-design-system 0.0.1 → 0.1.2

package/dist/cjs/types/components/app-bar/app-bar.types.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, ReactElement } from "react";
 import { AppBarProps as MuiAppBarProps } from "@mui/material";
 export interface AppBarProfile {
     name: string;
@@ -11,3 +11,4 @@ export interface AppBarProps extends MuiAppBarProps {
     onClickSignOut: () => void;
 }
 export declare type AppBarComponent = FunctionComponent<AppBarProps>;
+export declare type AppBarElement = ReactElement<AppBarProps, AppBarComponent>;

package/dist/cjs/types/components/content/content.d.ts

@@ -0,0 +1,2 @@
+import { ContentProps } from "./content.types";
+export declare const Content: ({ children }: ContentProps) => JSX.Element;

package/dist/cjs/types/components/content/content.types.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren, FunctionComponent, ReactElement } from "react";
+export declare type ContentProps = PropsWithChildren;
+export declare type ContentComponent = FunctionComponent<ContentProps>;
+export declare type ContentElement = ReactElement<ContentElement, ContentComponent>;

package/dist/cjs/types/components/content/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./content";
+export * from "./content.types";

package/dist/cjs/types/components/header/header.d.ts

@@ -1,65 +1,6 @@
-import { PropTypes } from "@mui/material";
-export declare type HeaderPreset = PropTypes.Color | "transparent";
-export declare type HeaderActionVariant = "text" | "outlined" | "contained";
-export declare type HeaderAction = {
-    id: string;
-    text: string;
-    disabled?: boolean;
-    href?: string;
-    onClick?: () => void;
-};
-export interface HeaderBreadcrumb {
-    id: string;
-    text: string;
-    link: string;
-}
-export interface HeaderTab {
-    id: string;
-    label: string;
-    disabled?: boolean;
-}
-export declare type HeaderProps = {
-    /**
-     * Title of the header
-     */
-    title: string;
-    /**
-     * Subtitle of the header
-     */
-    subtitle?: string;
-    /**
-     * Color palete used to render the component
-     */
-    preset: HeaderPreset;
-    /**
-     * List of breadcumbs to represent the path to reach
-     * the page that we are
-     */
-    breadcrumbs?: HeaderBreadcrumb[];
-    /**
-     * List of actions that can be performed by the user.
-     * Each action will be a button in the header.
-     */
-    actions?: HeaderAction[];
-    /**
-     * Variant used to render the actions
-     */
-    actionsVariant?: HeaderActionVariant;
-    /**
-     * If is set, a list of tabs is dispayed at the bottom
-     */
-    tabs?: HeaderTab[];
-    /**
-     * Tab that has to be marked as selected
-     */
-    selectedTab?: number;
-    /**
-     * Callback executed when the user click a tab
-     */
-    onChangeTab?: (tab: HeaderTab, index: number) => void;
-};
+import { HeaderComponent } from "./header.types";
 /**
  * Section used to explain give basic information about the page
  * and put the main actions
  */
-export declare const Header: ({ title, subtitle, preset, actionsVariant, breadcrumbs, actions, tabs, selectedTab, onChangeTab, }: HeaderProps) => JSX.Element;
+export declare const Header: HeaderComponent;

package/dist/cjs/types/components/header/header.types.d.ts

@@ -0,0 +1,55 @@
+import { PropTypes } from "@mui/material";
+import { FunctionComponent, ReactElement } from "react";
+export declare type HeaderPreset = PropTypes.Color | "transparent";
+export declare type HeaderActionVariant = "text" | "outlined" | "contained";
+export declare type HeaderAction = {
+    id: string;
+    text: string;
+    disabled?: boolean;
+    href?: string;
+    onClick?: () => void;
+};
+export interface HeaderBreadcrumb {
+    id: string;
+    text: string;
+    link: string;
+}
+export interface HeaderTab {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+export declare type HeaderProps = {
+    /**
+     * Title of the header
+     */
+    title: string;
+    /**
+     * Subtitle of the header
+     */
+    subtitle?: string;
+    /**
+     * Color palete used to render the component
+     */
+    preset?: HeaderPreset;
+    /**
+     * List of breadcumbs to represent the path to reach
+     * the page that we are
+     */
+    breadcrumbs?: HeaderBreadcrumb[];
+    /**
+     * List of actions that can be performed by the user.
+     * Each action will be a button in the header.
+     */
+    actions?: HeaderAction[];
+    /**
+     * Variant used to render the actions
+     */
+    actionsVariant?: HeaderActionVariant;
+    /**
+     * If is set, a list of tabs is dispayed at the bottom
+     */
+    tabs?: HeaderTab[];
+};
+export declare type HeaderComponent = FunctionComponent<HeaderProps>;
+export declare type HeaderElement = ReactElement<HeaderProps, HeaderComponent>;

package/dist/cjs/types/components/header/index.d.ts

@@ -1 +1,2 @@
 export * from "./header";
+export * from "./header.types";

package/dist/cjs/types/components/index.d.ts

@@ -15,3 +15,4 @@ export * from "./drawer-section";
 export * from "./drawer-item";
 export * from "./center-container";
 export * from "./value-displays";
+export * from "./content";

package/dist/cjs/types/components/tab/index.d.ts

@@ -1,3 +1,2 @@
 export * from "./tab-panel";
 export * from "./tab-card";
-export * from "./tab.context";

package/dist/cjs/types/components/tab/tab-card/tab-card.d.ts

@@ -1,7 +1,6 @@
 import { PropsWithChildren } from "react";
 interface Props {
     tabs: string[];
-    initialTab?: number;
 }
-export declare const TabCard: ({ children, tabs, initialTab }: PropsWithChildren<Props>) => JSX.Element;
+export declare const TabCard: ({ children, tabs }: PropsWithChildren<Props>) => JSX.Element;
 export {};

package/dist/cjs/types/components/table-list/table-list.d.ts

@@ -1,14 +1,11 @@
 import { HeadCell, Order } from "../table/enhanced-table";
-export interface BasicData {
-    id: string;
-    [key: string]: any;
-}
-export interface TableRowOption<T extends BasicData> {
+import { BasicModelInstance } from "~/generators";
+export interface TableRowOption<T extends BasicModelInstance> {
     id: string;
     label: string;
     onClick: (item: T) => void;
 }
-export interface TableListProps<T extends BasicData> {
+export interface TableListProps<T extends BasicModelInstance> {
     columns: HeadCell[];
     data: T[];
     search?: boolean;
@@ -18,4 +15,4 @@ export interface TableListProps<T extends BasicData> {
     options?: TableRowOption<T>[];
     onClick?: (d: T) => void;
 }
-export declare const TableList: <T extends BasicData>({ columns: columnsProp, options, data, onClick, search, defaultSort, defaultOrder, loading, }: TableListProps<T>) => JSX.Element;
+export declare const TableList: <T extends BasicModelInstance>({ columns: columnsProp, options, data, onClick, search, defaultSort, defaultOrder, loading, }: TableListProps<T>) => JSX.Element;

package/dist/cjs/types/generators/generators.mock.d.ts

@@ -1,3 +1,24 @@
 import { Model } from "./generators.model";
 export declare const mockModel: Model;
-export declare const createModelInstance: (model: Model, seed?: number) => any;
+export interface MockInstance {
+    id: string;
+    firstName: string;
+    middleName: string;
+    lastName: string;
+    gender: string;
+    age: number;
+    birthDate: string;
+    car: {
+        model: string;
+        manufacturer: string;
+        color: string;
+        type: string;
+        vin: string;
+        vrm: string;
+    };
+    quantity: number;
+    available: boolean;
+    currency: string;
+    tradeDate: string;
+}
+export declare const createModelInstance: <T extends BasicData>(model: Model, seed?: number) => T;

package/dist/cjs/types/generators/generators.model.d.ts

@@ -24,10 +24,14 @@ declare type SingleFields = StringField | NumberField | BooleanField;
 export declare type GroupField = {
     type: "group";
     value: (Base & Breakpoints & SingleFields)[];
-};
+} & Base;
 declare type Fields = SingleFields | GroupField;
 export declare type ModelField = Base & Breakpoints & Fields;
 export declare type Model = {
     fields: ModelField[];
 };
+export interface BasicModelInstance {
+    id: string;
+    [key: string]: any;
+}
 export {};

package/dist/cjs/types/generators/model-form/model-form.d.ts

@@ -1,8 +1,8 @@
-import { Model } from "../generators.model";
-export interface ModelFormProps {
+import { Model, BasicModelInstance } from "../generators.model";
+export interface ModelFormProps<T extends BasicModelInstance> {
     model: Model;
-    initialValues?: object;
+    initialValues?: T;
     saveButtonText: string;
-    onSubmit: (values: object) => void;
+    onSubmit: (values: T) => void;
 }
-export declare const ModelForm: ({ model, saveButtonText, onSubmit, initialValues, }: ModelFormProps) => JSX.Element;
+export declare const ModelForm: <T extends BasicModelInstance>({ model, saveButtonText, onSubmit, initialValues, }: ModelFormProps<T>) => JSX.Element;

package/dist/cjs/types/generators/model-router/model-router.d.ts

@@ -1,35 +1,4 @@
-import { Model } from "../generators.model";
-export interface RequestState {
-    idle?: boolean;
-    loading?: boolean;
-    error?: string;
-    success?: boolean;
-}
-export interface ModelRouterProps {
-    modelName: string;
-    model: Model;
-    requestList?: () => void;
-    list: {
-        data: any[];
-        onClickRemoveItem: (item: any) => void;
-        listRequest: RequestState;
-        requestDelete: RequestState;
-    };
-    add: {
-        onSubmit: (obj: object) => void;
-        request: RequestState;
-    };
-    detail: {
-        onScreenMount?: (id: string) => void;
-        request: RequestState;
-        instance?: any;
-    };
-    update: {
-        onSubmit: (obj: object) => void;
-        request: RequestState;
-        requestInstance: RequestState;
-        onRequestInstance: (id: string) => void;
-        instance?: any;
-    };
-}
-export declare const ModelRouter: (props: ModelRouterProps) => JSX.Element;
+import { BasicModelInstance } from "../generators.model";
+import { AddScreenProps, DetailsScreenProps, ListScreenProps, UpdateScreenProps } from "./screens";
+export declare type ModelRouterProps<T extends BasicModelInstance> = DetailsScreenProps<T> & ListScreenProps<T> & AddScreenProps<T> & UpdateScreenProps<T>;
+export declare const ModelRouter: <T extends BasicModelInstance>(props: ModelRouterProps<T>) => JSX.Element;

package/dist/cjs/types/generators/model-router/model-router.types.d.ts

@@ -0,0 +1,8 @@
+export interface RequestState {
+    idle?: boolean;
+    loading?: boolean;
+    error?: string;
+    success?: boolean;
+}
+export declare const IdleRequest: RequestState;
+export declare const LoadingRequest: RequestState;

package/dist/cjs/types/generators/model-router/screens/add-screen.d.ts

@@ -1,2 +1,16 @@
-import { ModelRouterProps } from "../..";
-export declare const AddScreen: (props: ModelRouterProps) => JSX.Element;
+import { BasicModelInstance } from "~/generators";
+import { RequestState } from "../model-router.types";
+import { BaseScreenProps } from "./screens.types";
+export interface AddScreenProps<T extends BasicModelInstance> extends BaseScreenProps {
+    /**
+     * Callback executed when the user wants to
+     * add a new item
+     */
+    onSubmitNewItem: (obj: T) => void;
+    /**
+     * Current status of the request to retrieve
+     * add a new item
+     */
+    newItemRequest: RequestState;
+}
+export declare const AddScreen: <T extends BasicModelInstance>({ model, modelName, onSubmitNewItem, newItemRequest, }: AddScreenProps<T>) => JSX.Element;

package/dist/cjs/types/generators/model-router/screens/details-screen.d.ts

@@ -1,2 +1,20 @@
-import { ModelRouterProps } from "..";
-export declare const DetailsScreen: (props: ModelRouterProps) => JSX.Element;
+import { RequestState } from "../model-router.types";
+import { BaseScreenProps } from "./screens.types";
+import { BasicModelInstance } from "~/generators";
+export interface DetailsScreenProps<T extends BasicModelInstance> extends BaseScreenProps {
+    /**
+     * Callback executed each time we want
+     * the details information of an item
+     */
+    onRequestItem: (id: string) => void;
+    /**
+     * Current status of the request to retrieve
+     * an item
+     */
+    itemRequest: RequestState;
+    /**
+     * Item to be displayed
+     */
+    detailsItem?: T;
+}
+export declare const DetailsScreen: <T extends BasicModelInstance>({ model, modelName, onRequestItem, itemRequest, detailsItem, }: DetailsScreenProps<T>) => JSX.Element;

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

@@ -1,2 +1,30 @@
-import type { ModelRouterProps } from "../model-router";
-export declare const ListScreen: (props: ModelRouterProps) => JSX.Element;
+import { BasicModelInstance } from "~/generators";
+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, onRequestList, onClickDeleteItem, listRequest, deleteRequest, }: ListScreenProps<T>) => JSX.Element;

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

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

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

@@ -1,2 +1,29 @@
-import type { ModelRouterProps } from "../model-router";
-export declare const UpdateScreen: (props: ModelRouterProps) => JSX.Element;
+import { BasicModelInstance } from "~/generators";
+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, submitUpdateItemRequest, updateItemRequest, updateItem, onSubmitUpdateItem, onRequestUpdateItem, }: UpdateScreenProps<T>) => JSX.Element;

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+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 ModelRouterTemplate: import("@storybook/react").ComponentStory<import("react").JSXElementConstructor<import("../model-router").ModelRouterProps<import("../..").BasicModelInstance>>>;
+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/cjs/types/generators/object-details/object-details.d.ts

@@ -1,6 +1,6 @@
-import { Model } from "../generators.model";
-export interface ObjectDetailsProps {
+import { Model, BasicModelInstance } from "../generators.model";
+export interface ObjectDetailsProps<T extends BasicModelInstance> {
     model: Model;
-    instance: object;
+    instance: T;
 }
-export declare const ObjectDetails: ({ model, instance }: ObjectDetailsProps) => JSX.Element;
+export declare const ObjectDetails: <T extends BasicModelInstance>({ model, instance, }: ObjectDetailsProps<T>) => JSX.Element;

package/dist/cjs/types/layouts/app-bar-with-drawer-layout/app-bar-with-drawer-layout.d.ts

@@ -1,10 +1,7 @@
-import { PropsWithChildren, ReactElement } from "react";
-import { AppBarComponent } from "../../components/app-bar";
+import { ReactNode } from "react";
+import { AppBarElement } from "../../components/app-bar";
 import { DrawerElement } from "../../components/drawer";
-import { AppBarProps } from "@mui/material";
-interface Props {
-    drawer: DrawerElement;
-    appBar: ReactElement<AppBarProps, AppBarComponent>;
+export interface AppBarWithDrawerLayoutProps {
+    children: [DrawerElement, AppBarElement, ReactNode];
 }
-export declare const AppBarWithDrawerLayout: ({ drawer, appBar, children }: PropsWithChildren<Props>) => JSX.Element;
-export {};
+export declare const AppBarWithDrawerLayout: ({ children: childrenProps, }: AppBarWithDrawerLayoutProps) => JSX.Element;

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

@@ -1,8 +1,7 @@
-import { PropsWithChildren } from "react";
-import { HeaderProps } from "../../components";
-interface Props {
+import { ContentElement, HeaderElement } from "../../components";
+interface HeaderLayoutProps {
     loading?: boolean;
-    headerProps: HeaderProps;
+    children: [HeaderElement, ContentElement];
 }
-export declare const HeaderLayout: ({ loading, headerProps, children }: PropsWithChildren<Props>) => JSX.Element;
+export declare const HeaderLayout: ({ loading, children }: HeaderLayoutProps) => JSX.Element;
 export {};

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

@@ -1,7 +1,2 @@
-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";
+export * from "./header-layout";

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

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

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

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

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

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

package/dist/cjs/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/cjs/types/providers/tab-provider/tab-provider.provider.d.ts

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

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

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