@producteca/producteca-ui-kit 1.44.4 → 1.45.0

package/dist/components/draggableList/draggableList.d.js

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

package/dist/components/draggableList/draggableList.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { DraggableProps } from './draggableList.types';
+
+export declare const DraggableList: React.FC<DraggableProps>;
+export default DraggableList;

package/dist/components/draggableList/draggableList.examples.d.js

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

package/dist/components/draggableList/draggableList.examples.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { SelectFieldProps, SelectOption } from '../inputs/selectField/selectField.types';
+import { DraggableComponentProps } from './draggableList.types';
+import { FormFieldProps } from '../inputs/formField/formField';
+
+export type DraggableSelectFieldProps = DraggableComponentProps & Partial<SelectFieldProps> & {
+    onItemChange?: (value: string) => void;
+    disabled?: boolean;
+};
+export type DraggableFormFieldProps = DraggableComponentProps & Partial<FormFieldProps> & {
+    onItemChange?: (value: string) => void;
+    disabled?: boolean;
+};
+export declare const selectOptions: SelectOption[];
+export declare const DraggableSelectField: React.MemoExoticComponent<({ item, onItemChange, ...props }: DraggableSelectFieldProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const DraggableFormField: React.MemoExoticComponent<({ item, onItemChange, ...props }: DraggableFormFieldProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/draggableList/draggableList.types.d.js

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

package/dist/components/draggableList/draggableList.types.d.ts

@@ -0,0 +1,23 @@
+import { ChangeEvent, ComponentType } from 'react';
+import { ReduxFormInput } from '../../hooks/useReduxFormField';
+
+export interface DraggableComponentProps {
+    item: DraggableItem;
+    onItemChange?: (value: string) => void;
+    [key: string]: any;
+}
+export interface DraggableItem {
+    id: string;
+    value?: string;
+    [key: string]: any;
+}
+export interface DraggableProps {
+    addLabel?: string;
+    label?: string;
+    value?: DraggableItem[];
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    canRemove?: () => boolean;
+    itemComponent?: ComponentType<DraggableComponentProps & Record<string, unknown>>;
+    componentProps?: Record<string, unknown>;
+    input?: ReduxFormInput;
+}

package/dist/components/draggableList/draggableRow.d.js

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

package/dist/components/draggableList/draggableRow.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { DraggableItem, DraggableProps } from './draggableList.types';
+
+interface DraggableRowProps {
+    isAdding?: boolean;
+    item: DraggableItem;
+    isRemoving?: boolean;
+    onRemove: (id: string) => void;
+    canRemove?: () => boolean;
+    component?: DraggableProps['itemComponent'];
+    componentProps?: Record<string, unknown>;
+    onSelectValue: (id: string, value: string) => void;
+}
+export declare const DraggableRow: React.MemoExoticComponent<({ item, isAdding, onRemove, canRemove, component, isRemoving, onSelectValue, componentProps, }: DraggableRowProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/draggableList/index.d.js

@@ -0,0 +1,2 @@
+export { DraggableList } from './draggableList';
+export { DraggableList as default } from './draggableList';

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

@@ -0,0 +1,3 @@
+export { DraggableList } from './draggableList';
+export { DraggableList as default } from './draggableList';
+export type { DraggableProps, DraggableItem, DraggableComponentProps } from './draggableList.types';

package/dist/components/icons/index.d.js

@@ -3,4 +3,5 @@ export * from './mailIcon/mailIcon';
 export * from './fileIcon/fileIcon';
 export * from './priceDownIcon/priceDownIcon';
 export * from './priceCloseIcon/priceCloseIcon';
+export * from './trashIcon/trashIcon';
 export * from './customIcon/customIcon';

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

@@ -3,4 +3,5 @@ export * from './mailIcon/mailIcon';
 export * from './fileIcon/fileIcon';
 export * from './priceDownIcon/priceDownIcon';
 export * from './priceCloseIcon/priceCloseIcon';
+export * from './trashIcon/trashIcon';
 export * from './customIcon/customIcon';

package/dist/components/icons/trashIcon/trashIcon.d.js

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

package/dist/components/icons/trashIcon/trashIcon.d.ts

@@ -0,0 +1,5 @@
+import { IconInterface } from '../parameters';
+
+export declare const TrashIcon: ({ size, color }: IconInterface) => import("react/jsx-runtime").JSX.Element;
+export type { IconInterface };
+export default TrashIcon;

package/dist/components/index.d.js

@@ -14,4 +14,5 @@ export * from './tabs';
 export * from './card';
 export * from './sidebar';
 export * from './dropdown';
-export * from './link';
+export * from './link';
+export * from './draggableList';

package/dist/components/index.d.ts

@@ -15,3 +15,4 @@ export * from './card';
 export * from './sidebar';
 export * from './dropdown';
 export * from './link';
+export * from './draggableList';

package/dist/locales/description.d.ts

@@ -14,3 +14,4 @@ export declare const saveBarExample = "\n  #### Uso b\u00E1sico\n  ```typescript
 export declare const checkboxInputReduxFormExample = "\n  #### Ejemplo de uso con Redux Form - CheckboxInput\n  \n  ```typescript\n    <Field\n      name=\"salesSync\"\n      component={CheckboxInput}\n      classComponent={'decrease-stock'}\n      props={{\n        name: 'cancelSales',\n        value: this.salesSync().cancelSales,\n        checked: this.salesSync().cancelSales,\n        label: this.context.localize('settings.cancelSales')\n      }}\n    />\n  ```\n";
 export declare const breadcrumbItemFormat = "\n  ## Formato de BreadcrumbItem\n\n  El componente Breadcrumb acepta un array de objetos `BreadcrumbItem` con las siguientes propiedades:\n\n  ### Propiedades disponibles:\n\n  - **`text`** (string, requerido): El texto que se muestra para el item del breadcrumb\n  - **`onClick`** (function, opcional): Funci\u00F3n que se ejecuta al hacer click en el item\n  - **`isActive`** (boolean, opcional): Indica si el item est\u00E1 activo. Por defecto, el \u00FAltimo item se considera activo\n  - **`href`** (string, opcional): URL del enlace (actualmente no implementado en el renderizado)\n\n  ### Comportamiento:\n\n  - Los items con `onClick` se renderizan como botones clickeables\n  - Los items sin `onClick` se renderizan como texto est\u00E1tico\n  - El \u00FAltimo item siempre se considera activo (a menos que se especifique `isActive: true` en otro item)\n  - Cada item se separa autom\u00E1ticamente con el s\u00EDmbolo \">\"\n\n  ### Ejemplo de uso:\n\n  ```tsx\n  const breadcrumbItems = [\n    { text: 'Dashboard' },\n    { text: 'Productos', onClick: () => navigate('/products') },\n    { text: 'Detalles', isActive: true }\n  ]\n\n  <Breadcrumb items={breadcrumbItems} />\n  ```\n";
 export declare const menuItems = "Lista de \u00EDtems que se mostrar\u00E1n en el men\u00FA.\n      \n**Tipo:** `MenuActionItem[]`\n\n```ts\ninterface MenuActionItem {\n  label: React.ReactNode\n  icon?: React.ReactElement\n  onClick?: () => void\n  selected?: boolean\n  disabled?: boolean\n}\n```\n";
+export declare const draggableListExample = "\n## Uso del componente\n\nEl componente `DraggableList` permite crear listas de items arrastrables con un componente personalizado para cada item.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<DraggableList\n  label=\"Seleccionar un deposito\"\n  addLabel=\"+ Agregar\"\n  itemComponent={SelectField}\n  componentProps={{\n    placeholder: 'Seleccionar...',\n    options: [\n      { value: 'option1', label: 'Opci\u00F3n 1' },\n      { value: 'option2', label: 'Opci\u00F3n 2' },\n    ],\n    size: 'md',\n  }}\n  value={[\n    { id: 'item-1', value: 'option1' },\n    { id: 'item-2', value: 'option2' },\n  ]}\n  onChange={(event) => console.log('Items actualizados:', event.target.value)}\n/>\n```\n\n### Ejemplo con Redux Form (Field):\n\n```tsx\n<Field\n  name=\"warehouses\"\n  component={DraggableList}\n  itemComponent={DraggableFormField}\n  label=\"Dep\u00F3sitos\"\n  addLabel=\"+ Agregar\"\n  componentProps={{\n    placeholder: 'Nombre del dep\u00F3sito',\n    size: 'md',\n    type: 'text',\n  }}\n/>\n```\n\n";

package/dist/locales/es.d.ts

@@ -18,6 +18,7 @@ declare const _default: {
     loremIpsum: string;
     loremIpsumExtraLarge: string;
     add: string;
+    addPlus: string;
     previous: string;
     continue: string;
     cancel: string;
@@ -91,6 +92,15 @@ declare const _default: {
             clickPreviousButton: string;
             clickSaveButtonOnly: string;
         };
+        draggableList: {
+            example: string;
+            itemComponent: string;
+            value: string;
+            onChange: string;
+            addLabel: string;
+            label: string;
+            componentProps: string;
+        };
         formField: {
             example: string;
             isValid: string;
@@ -158,6 +168,26 @@ declare const _default: {
         edit: string;
         customAction: string;
     };
+    draggableList: {
+        addLabel: string;
+        addRow: string;
+        placeholder: string;
+        textLabel: string;
+        nameLabel: string;
+        elementLabel: string;
+        activeLabel: string;
+        enabledLabel: string;
+        options: {
+            store: string;
+            marketplace: string;
+            stock: string;
+            logistics: string;
+        };
+        sampleValues: {
+            one: string;
+            two: string;
+        };
+    };
     breadcrumb: {
         historyChanges: string;
         products: string;