@pautena/react-design-system 0.18.0 → 0.19.0

package/dist/list-panel/list-panel.d.ts

@@ -7,10 +7,28 @@ export interface ListPanelItem {
     path?: string;
 }
 export type ListPanelProps = PropsWithChildren<{
+    /**
+     * The ID of the item that should be selected by default.
+     */
     defaultSelectedItem?: string;
+    /**
+     * The list of items to be displayed in the panel.
+     */
     items: ListPanelItem[];
+    /**
+     * The mode of the list, either "panel" or "navigation".
+     */
     listMode?: "panel" | "navigation";
+    /**
+     * The breakpoint for column layout.
+     */
     colBreakpoint?: number;
+    /**
+     * Callback function that is called when the selected item changes.
+     */
     onSelectedItemChange?: (id: string) => void;
 }>;
+/**
+ * ListPanel component renders a panel with a list of items and a content area.
+ */
 export declare const ListPanel: ({ items, defaultSelectedItem, colBreakpoint, listMode, children, onSelectedItemChange, }: ListPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/model-form/model-form.d.ts

@@ -6,4 +6,9 @@ export interface ModelFormProps<T extends BasicModelInstance> {
     saveButtonText: string;
     onSubmit: (values: T) => void;
 }
+/**
+ *
+ * ModelForm component is a generic form component for handling model-based forms.
+ * It renders form fields based on the provided model and handles form submission.
+ */
 export declare const ModelForm: <T extends BasicModelInstance>({ model, saveButtonText, dense, onSubmit, initialValues, }: ModelFormProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/object-details/object-details.d.ts

@@ -4,4 +4,8 @@ export interface ObjectDetailsProps<T extends BasicModelInstance> {
     dense?: boolean;
     instance: T;
 }
+/**
+ * ObjectDetails component renders detailed information about a given instance of a model.
+ * It supports rendering various types of fields including single values, groups, and arrays of groups.
+ */
 export declare const ObjectDetails: <T extends BasicModelInstance>({ model, instance, dense, }: ObjectDetailsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/search-input/search-input.d.ts

@@ -6,14 +6,55 @@ export interface SearchFilter {
     type: "text" | "number" | "boolean" | "datetime";
 }
 export interface SearchInputProps<T> {
+    /**
+     * The label for the search input.
+     */
     label?: string;
+    /**
+     * The placeholder text for the search input.
+     */
     placeholder?: string;
+    /**
+     * If true, the search input will take up the full width of its container.
+     */
     fullWidth?: boolean;
+    /**
+     * Helper text to display below the search input.
+     */
     helperText?: string;
+    /**
+     * The size of the search input.
+     */
     size?: SearchInputSize;
+    /**
+     * An array of filters to apply to the search.
+     */
     filters?: SearchFilter[];
+    /**
+     * The system prop that allows defining system overrides and additional CSS styles.
+     */
     sx?: SxProps<Theme>;
+    /**
+     * The format to use for date inputs.
+     */
     dateFormat?: string;
+    /**
+     * Callback function to handle the search action.
+     */
     onSearch: (data: T) => void;
 }
+export interface SearchInputProps<T> {
+    label?: string;
+    placeholder?: string;
+    fullWidth?: boolean;
+    helperText?: string;
+    size?: SearchInputSize;
+    filters?: SearchFilter[];
+    sx?: SxProps<Theme>;
+    dateFormat?: string;
+    onSearch: (data: T) => void;
+}
+/**
+ * A generic search input component that supports various types of filters.
+ */
 export declare const SearchInput: <T>({ label, placeholder, helperText, size, fullWidth, dateFormat, filters, onSearch, sx, }: SearchInputProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/select/select.d.ts

@@ -2,14 +2,56 @@ import { ReactNode } from 'react';
 import { SelectInputProps } from '@mui/material/Select/SelectInput';
 export type SelectSize = "small" | "medium";
 export interface SelectProps<T> {
+    /**
+     * The label for the select input.
+     */
     label: string;
+    /**
+     * The selected value.
+     */
     value: T;
+    /**
+     * If true, the select input is in a loading state.
+     */
     loading?: boolean;
+    /**
+     * If true, the select input is in a fetching state.
+     */
     fetching?: boolean;
+    /**
+     * The size of the select input.
+     */
     size?: SelectSize;
+    /**
+     * The color of the select input.
+     */
     color?: string;
+    /**
+     * If true, the select input takes up the full width of its container.
+     */
     fullWidth?: boolean;
+    /**
+     * The child elements to be rendered within the select input.
+     */
     children?: ReactNode;
+    /**
+     * The callback function to handle changes to the select input.
+     */
     onChange?: SelectInputProps<T>["onChange"];
 }
+export interface SelectProps<T> {
+    label: string;
+    value: T;
+    loading?: boolean;
+    fetching?: boolean;
+    size?: SelectSize;
+    color?: string;
+    fullWidth?: boolean;
+    children?: ReactNode;
+    onChange?: SelectInputProps<T>["onChange"];
+}
+/**
+ * A custom Select component that extends the functionality of the Material-UI Select component.
+ * This component supports additional features such as loading and fetching states, custom colors, and full-width display.
+ */
 export declare const Select: <T extends ReactNode>({ label, value, loading, fetching, size, fullWidth, color, children, onChange, }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/skeleton-card/skeleton-card.d.ts

@@ -1,5 +1,17 @@
+/**
+ * Props for the SkeletonCard component.
+ */
 export interface SkeletonCardProps {
+    /**
+     * The width of the skeleton card. Can be a number (interpreted as pixels) or a string (e.g., "100%", "50px").
+     */
     width?: number | string;
+    /**
+     * The animation style for the skeleton card. Can be "pulse", "wave", or false to disable animation.
+     */
     animation?: "pulse" | "wave" | false;
 }
+/**
+ * SkeletonCard component renders a skeleton loading placeholder for a card.
+ */
 export declare const SkeletonCard: ({ width, animation }: SkeletonCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/skeleton-grid/skeleton-grid.d.ts

@@ -1,4 +1,16 @@
+/**
+ * Props for the SkeletonGrid component.
+ */
 export interface SkeletonGridProps {
+    /**
+     * Optional size of the skeleton grid.
+     */
     size?: number;
 }
+export interface SkeletonGridProps {
+    size?: number;
+}
+/**
+ * SkeletonGrid component renders a grid of skeleton cards.
+ */
 export declare const SkeletonGrid: ({ size }: SkeletonGridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/table-list/table-list.d.ts

@@ -15,4 +15,7 @@ export interface TableListProps<T extends BasicModelInstance> {
     options?: TableRowOption<T>[];
     onClick?: (d: T) => void;
 }
+/**
+ * TableList component renders a list about a given instances of a model.
+ */
 export declare const TableList: <T extends BasicModelInstance>({ columns: columnsProp, options, data, onClick, search, defaultSort, defaultOrder, loading, }: TableListProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/text-field/text-field.d.ts

@@ -1,7 +1,25 @@
 import { TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';
+/**
+ * Props for the TextField component.
+ *
+ * @extends MuiTextFieldProps
+ */
 export type TextFieldProps = MuiTextFieldProps & {
+    /**
+     * Indicates if the field is in a fetching state.
+     */
     fetching?: boolean;
+    /**
+     * Indicates if the field is in a loading state.
+     */
     loading?: boolean;
+    /**
+     * Optional hex color code for the text field.
+     */
     hexColor?: string;
 };
+/**
+ * A customizable TextField component that extends the functionality of the Material-UI TextField component
+ * and supports various props for styling and functionality.
+ */
 export declare const TextField: ({ id: overrideId, label, InputLabelProps, InputProps, fetching, loading, helperText, hexColor, size, fullWidth, sx, ...rest }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/value-item/value-item.d.ts

@@ -10,4 +10,7 @@ export declare const valueItemClasses: {
     root: string;
     content: string;
 };
+/**
+ * `ValueItem` is a component to wrap your value components
+ */
 export declare const ValueItem: ValueItemComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "My custom design system on top of MUI",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -23,7 +23,7 @@
     "format": "npm-run-all format:*",
     "format:js": "prettier --write \"**/*.js\"",
     "format:json": "prettier --write \"**/*.json\"",
-    "format:md": "prettier --write \"**/*.md\"",
+    "format:md": "prettier --write \"**/*.md{,x}\"",
     "format:ts": "prettier --write \"**/*.ts{,x}\""
   },
   "keywords": [
@@ -51,22 +51,21 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
+    "@chromatic-com/storybook": "^3.2.5",
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.21.0",
     "@faker-js/faker": "^9.5.0",
     "@mui/x-data-grid-generator": "^7.27.0",
-    "@storybook/addon-actions": "^8.6.0-beta.7",
-    "@storybook/addon-essentials": "^8.6.0-beta.7",
-    "@storybook/addon-interactions": "^8.6.0-beta.7",
-    "@storybook/addon-knobs": "^8.0.1",
-    "@storybook/addon-links": "^8.6.0-beta.7",
-    "@storybook/addon-mdx-gfm": "^8.6.0-beta.7",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/react": "^8.6.0-beta.7",
-    "@storybook/react-webpack5": "^8.6.0-beta.7",
-    "@storybook/test": "^8.6.0-beta.7",
-    "@storybook/testing-react": "^2.0.1",
-    "@storybook/types": "^8.6.0-beta.7",
+    "@storybook/addon-docs": "^8.6.4",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-links": "^8.6.4",
+    "@storybook/addon-onboarding": "^8.6.4",
+    "@storybook/addon-themes": "^8.6.4",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-vite": "^8.6.4",
+    "@storybook/test": "^8.6.4",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -74,7 +73,7 @@
     "@types/react": "^19.0.10",
     "@typescript-eslint/eslint-plugin": "^8.24.1",
     "@typescript-eslint/parser": "^8.24.1",
-    "babel-loader": "^9.2.1",
+    "babel-loader": "^10.0.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "eslint": "^9.21.0",
     "eslint-config-prettier": "^10.0.1",
@@ -90,7 +89,7 @@
     "prettier": "^3.5.2",
     "ramda": "^0.30.1",
     "react-test-renderer": "^19.0.0",
-    "storybook": "^8.6.0-beta.7",
+    "storybook": "^8.6.0",
     "tslib": "^2.8.1",
     "typescript": "^5.7.3",
     "vite": "^6.1.1",

package/dist/sign-in/index.d.ts

@@ -1 +0,0 @@
-export * from './sign-in';

package/dist/sign-in/sign-in.d.ts

@@ -1,8 +0,0 @@
-export interface SignInProps {
-    title: string;
-    subtitle: string;
-    error?: Error;
-    loading?: boolean;
-    onSubmitSignIn: (email: string, password: string) => void;
-}
-export declare const SignIn: ({ title, subtitle, loading, error, onSubmitSignIn }: SignInProps) => import("react/jsx-runtime").JSX.Element;