react-crud-mui 0.0.1-beta.1

package/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

package/dist/components/action-commands/ActionCommands.d.ts

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from 'react';
+export interface ActionCommandsProps extends PropsWithChildren {
+    onEdit?: () => void;
+    onView?: () => void;
+    onCopy?: () => void;
+    onDelete?: () => void;
+    canView?: boolean;
+    canDelete?: boolean;
+    canEdit?: boolean;
+    canCopy?: boolean;
+    showView?: boolean;
+    showEdit?: boolean;
+    showDelete?: boolean;
+    showCopy?: boolean;
+    disabled?: boolean;
+    confirmOnDelete?: boolean;
+}
+declare function ActionCommands({ onDelete, onEdit, onCopy, onView, canView, canDelete, canEdit, canCopy, showCopy, showView, showEdit, showDelete, disabled, children, }: ActionCommandsProps): import("react/jsx-runtime").JSX.Element;
+export default ActionCommands;

package/dist/components/combobox/ComboBox.d.ts

@@ -0,0 +1,24 @@
+import { Ref } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { AutocompleteProps, StandardTextFieldProps } from '@mui/material';
+import { ComboboxTemplate } from './hooks/useComboboxTemplate';
+export type CreatableModel = FieldValues & CreatableModelProps;
+declare const addValueField: unique symbol;
+declare const addDisplayTextField: unique symbol;
+type CreatableModelProps = {
+    [addValueField]?: string;
+    [addDisplayTextField]?: string;
+};
+export interface ComboBoxProps<T extends CreatableModel, Creatable extends boolean = false> extends Partial<AutocompleteProps<T, false, true, Creatable>>, Pick<StandardTextFieldProps, 'autoFocus' | 'label' | 'error' | 'helperText'> {
+    data?: T[];
+    direction?: 'row' | 'column';
+    optionTemplate: ComboboxTemplate<T>;
+    displayTemplate?: ComboboxTemplate<T>;
+    descriptionTemplate?: ComboboxTemplate<T>;
+    creatable?: Creatable;
+    onCreate?: (text: string) => Promise<T>;
+    selectRef?: Ref<unknown>;
+}
+declare function ComboBox<T extends CreatableModel, Creatable extends boolean>({ autoFocus, creatable, data, descriptionTemplate, direction, displayTemplate, error, getOptionLabel, helperText, loading, onBlur, onCreate, optionTemplate, label, renderOption: onRenderOption, selectRef, ...rest }: ComboBoxProps<T, Creatable>): import("react/jsx-runtime").JSX.Element;
+declare const _default: typeof ComboBox;
+export default _default;

package/dist/components/combobox/hooks/useComboboxTemplate.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { FieldValues } from 'react-hook-form';
+export type ComboboxTemplateFn<T extends FieldValues> = (model: T) => ReactNode;
+export type ComboboxTemplate<T extends FieldValues> = string | ComboboxTemplateFn<T>;
+export interface UseComboboxTemplateOptions<T extends FieldValues> {
+    displayTemplate?: ComboboxTemplate<T>;
+    descriptionTemplate?: ComboboxTemplate<T>;
+    optionTemplate: ComboboxTemplate<T>;
+}
+export interface UseComboboxTemplateReturn<T extends FieldValues> {
+    renderDisplay?: ComboboxTemplateFn<T>;
+    renderDescription?: ComboboxTemplateFn<T>;
+    renderOption: ComboboxTemplateFn<T>;
+}
+declare function useComboboxTemplate<T extends FieldValues>({ optionTemplate, displayTemplate, descriptionTemplate, }: UseComboboxTemplateOptions<T>): UseComboboxTemplateReturn<T>;
+export default useComboboxTemplate;

package/dist/components/dayjs/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/detail-page/components/AutoSave.d.ts

@@ -0,0 +1,6 @@
+interface AutoSaveProps {
+    onValuesChange: () => void;
+    delay?: number;
+}
+declare function AutoSave({ onValuesChange, delay }: AutoSaveProps): null;
+export default AutoSave;

package/dist/components/detail-page/components/DetailPageCommands.d.ts

@@ -0,0 +1,75 @@
+import { ReactNode } from 'react';
+import { LoadingButtonProps } from '@mui/lab/LoadingButton';
+import { MoreButtonItem } from '../../more-button/MoreButton';
+import { CloseReason, CommandsPosition } from '../../page/Page';
+import { SaveMode } from '../pages/DetailPageData';
+export interface DetailPageCommandsFlag {
+    copy?: boolean;
+    save?: boolean;
+    savecreate?: boolean;
+    saveclose?: boolean;
+    discardchanges?: boolean;
+    delete?: boolean;
+    close?: boolean;
+    navigate?: boolean;
+    create?: boolean;
+}
+export interface DetailPageCommandsExtraProps {
+    save?: LoadingButtonProps;
+    discardchanges?: LoadingButtonProps;
+    delete?: LoadingButtonProps;
+    close?: LoadingButtonProps;
+    navigate?: LoadingButtonProps;
+    create?: LoadingButtonProps;
+}
+export interface DetailPageCommandsOptions {
+    visible: DetailPageCommandsFlag;
+    disabled: DetailPageCommandsFlag;
+    loading?: boolean;
+    isNew: boolean;
+    isDisabled?: boolean;
+}
+export type DetailPageCommandsState = {
+    onSave?: () => void;
+    onSaveCreate?: () => void;
+    onCreate?: () => void;
+    onCopy?: () => void;
+    onDiscardChanges?: () => void;
+    onDelete?: () => void;
+    onClose?: (reason?: CloseReason) => void;
+    onSaveClose?: () => void;
+    saveCommandMode?: SaveMode;
+    createCommandLabel?: ReactNode;
+    commandsPosition?: CommandsPosition;
+};
+export type DetailPageCommandsLayoutContents = {
+    save: ReactNode;
+    create: ReactNode;
+    discardChanges: ReactNode;
+    delete: ReactNode;
+    close: ReactNode;
+    content: ReactNode;
+    renderMoreCommand: (items: MoreButtonItem[]) => ReactNode;
+    extra?: ReactNode;
+};
+export type DetailPageCommmandsSettings = {
+    content: ReactNode;
+    layout: DetailPageCommandsLayoutContents;
+    props: DetailPageCommandsState & DetailPageCommandsOptions;
+};
+export interface DetailPageCommandsProps extends DetailPageCommandsState {
+    onCommands?: (props: DetailPageCommmandsSettings) => ReactNode;
+    onExtraCommands?: () => ReactNode;
+    commandsExtraProps?: DetailPageCommandsExtraProps;
+}
+export declare enum DetailPageCommandNames {
+    SAVE = "save",
+    CREATE = "create",
+    COPY = "copy",
+    DISCARD = "discard",
+    DELETE = "delete",
+    CLOSE = "close",
+    NAVIGATE = "navigate"
+}
+declare function DetailPageCommands(props: DetailPageCommandsProps): import("react/jsx-runtime").JSX.Element;
+export default DetailPageCommands;

package/dist/components/detail-page/components/DetailPageDefaultLayout.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { NeedDataReason } from '../pages/DetailPageContent';
+export type DetailPageLayoutOptions = {
+    loading?: boolean;
+    reason: NeedDataReason;
+};
+export type DetailPageLayoutProps = {
+    content?: ReactNode;
+    stepsContent?: ReactNode;
+    autoSaveContent?: ReactNode;
+    options: DetailPageLayoutOptions;
+};
+type DetailPageDefaultLayoutProps = DetailPageLayoutProps;
+declare function DetailPageDefaultLayout({ content, stepsContent, autoSaveContent, }: DetailPageDefaultLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default DetailPageDefaultLayout;

package/dist/components/detail-page/components/DetailPageDrawerCommands.d.ts

@@ -0,0 +1,3 @@
+import { DetailPageCommmandsSettings } from './DetailPageCommands';
+declare function DetailPageDrawerCommands({ layout, props }: DetailPageCommmandsSettings): import("react/jsx-runtime").JSX.Element;
+export default DetailPageDrawerCommands;

package/dist/components/detail-page/components/DetailPageHeader.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { HeaderProps } from '../../header/Header';
+import { NeedDataReason } from '../pages/DetailPageContent';
+export interface DetailPageHeaderProps extends HeaderProps, PropsWithChildren {
+    reason: NeedDataReason;
+}
+declare function DetailPageHeader({ reason, ...headerProps }: DetailPageHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default DetailPageHeader;

package/dist/components/detail-page/components/DetailPageShortCuts.d.ts

@@ -0,0 +1,7 @@
+import { UseDetailPageHotKeysProps } from '../hooks/useDetailPageHotKeys';
+type DetailPageShortCutsProps = UseDetailPageHotKeysProps;
+/**
+ * Dummy wrapper component for shortcut hook
+ */
+declare function DetailPageShortCuts(props: DetailPageShortCutsProps): null;
+export default DetailPageShortCuts;

package/dist/components/detail-page/components/DetailPageStepCommands.d.ts

@@ -0,0 +1,37 @@
+import { default as React, ReactNode } from 'react';
+import { StepPane } from './DetailPageSteps';
+export type StepsButtonsOptions = {
+    showNextButton?: boolean;
+    showPrevButton?: boolean;
+    disableNextButton?: boolean;
+    disablePrevButton?: boolean;
+    disableFinishButton?: boolean;
+    currentKey: string;
+    activeStepIndex: number;
+    steps: StepPane[];
+    showFinishButton?: boolean;
+    loading?: boolean;
+};
+export type StepCommandsStates = {
+    onNextClick?: () => void;
+    onPrevClick?: () => void;
+    onFinish?: () => void;
+    nextButtonTitle?: React.ReactNode;
+    prevButtonTitle?: React.ReactNode;
+    options: StepsButtonsOptions;
+};
+export type StepCommandsLayout = {
+    prev: ReactNode;
+    next: ReactNode;
+    finish: ReactNode;
+};
+export type StepCommandsComponentProps = StepCommandsStates & StepCommandsLayout;
+export interface DetailPageStepCommandsProps extends StepCommandsStates {
+    commands?: React.ComponentType<StepCommandsComponentProps>;
+}
+export declare enum DetailPageStepCommandNames {
+    PREV = "prev",
+    NEXT = "next"
+}
+declare function DetailPageStepCommands({ commands: CustomCommands, ...options }: DetailPageStepCommandsProps): import("react/jsx-runtime").JSX.Element;
+export default DetailPageStepCommands;

package/dist/components/detail-page/components/DetailPageSteps.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { StepLabelProps, StepperProps, StepProps } from '@mui/material';
+import { DetailPageStepCommandsProps } from './DetailPageStepCommands';
+export interface DetailPageStepsProps extends Omit<StepperProps, 'onChange'> {
+    items: StepPane[];
+    status?: StepStatus;
+    showFinishButton?: DetailPageStepCommandsProps['options']['showFinishButton'];
+    commands?: DetailPageStepCommandsProps['commands'];
+}
+export type StepPane = Omit<StepProps & StepLabelProps, 'children' | 'key'> & {
+    key: string;
+    label: ReactNode;
+    children: ReactNode;
+};
+export type StepStatus = 'wait' | 'process' | 'finish' | 'error';
+declare function DetailPageSteps({ activeStep, items, status, ...stepperProps }: DetailPageStepsProps): import("react/jsx-runtime").JSX.Element;
+export default DetailPageSteps;

package/dist/components/detail-page/components/Prompt.d.ts

@@ -0,0 +1,4 @@
+import { UseFormPromptProps } from '../hooks/useFormPrompt';
+type PromptProps = UseFormPromptProps;
+declare function Prompt(props: PromptProps): null;
+export default Prompt;

package/dist/components/detail-page/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { default as useDetailPage } from './useDetailPage';
+export { default as useDetailPageModal } from './useDetailPageModal';
+export { default as useDetailPageRouteParams } from './useDetailPageRouteParams';
+export { default as useFormConfirmDirtyChange } from './useFormConfirmDirtyChange';
+export { default as useSegmentParams } from './useSegmentParams';

package/dist/components/detail-page/hooks/useDetailPage.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { DetailPageContentProps } from '../pages/DetailPageContent';
+export type DetailPageContextType<TModel extends FieldValues = FieldValues> = Pick<DetailPageContentProps<TModel>, 'loading' | 'enableClose' | 'enableCopy' | 'enableCreate' | 'enableDelete' | 'enableDiscardChanges' | 'enableSave' | 'reason' | 'disabled' | 'data' | 'activeSegmentIndex'> & {
+    onSave: () => void;
+    setActiveSegmentIndex: (index: number) => void;
+};
+export declare const DetailPageContext: React.Context<DetailPageContextType<FieldValues> | null>;
+declare const useDetailPage: <TModel extends FieldValues = FieldValues>() => DetailPageContextType<TModel>;
+export default useDetailPage;

package/dist/components/detail-page/hooks/useDetailPageHotKeys.d.ts

@@ -0,0 +1,14 @@
+import { HotkeyCallback, Options } from 'react-hotkeys-hook';
+export interface UseDetailPageHotKeysProps extends Partial<Options> {
+    onSave: HotkeyCallback;
+    onNewItem?: HotkeyCallback;
+    onDelete: HotkeyCallback;
+    onSaveClose: HotkeyCallback;
+    onSaveCreate: HotkeyCallback;
+}
+export declare const DETAILPAGE_HOTKEYS_SCOPE = "detailpage-scope";
+/**
+ * Hotkeys for ListPage component
+ */
+declare function useDetailPageHotKeys({ onSave, onDelete, onSaveCreate, onSaveClose, onNewItem, scopes, ...hotKeyOptions }: UseDetailPageHotKeysProps): void;
+export default useDetailPageHotKeys;