@producteca/producteca-ui-kit 1.66.0 → 1.68.0

package/README.md

@@ -8,7 +8,6 @@
 - ⚛️ [React 18](https://reactjs.org/)
 - 📚 [Storybook 9](https://storybook.js.org/) - Components preview
 - ⏩ [Vite](https://vitejs.dev/) - Run and build the project blazingly fast!
-- 🔧 [Babel](https://babeljs.io/) - JavaScript transpilation for maximum browser compatibility
 - ⚡ [Vitest](https://vitest.dev/) - Components Unit Testing
 - 📐 [ESLint](https://eslint.org/) & [Prettier](https://prettier.io/) - Formatting and Linting
 - 🌟 [Typescript](https://www.typescriptlang.org/)
@@ -21,7 +20,7 @@
 | Script | Command | Description |
 |--------|---------|-------------|
 | `dev` | `storybook dev -p 6006` | Starts Storybook in development mode on port 6006 |
-| `build` | `rm -rf dist && tsc && vite build && babel dist ...` | Removes the `dist` folder, compiles TypeScript, builds the library using Vite, and transpiles with Babel for maximum browser compatibility |
+| `build` | `rm -rf dist && tsc && vite build` | Removes the `dist` folder, compiles TypeScript, and builds the library using Vite |
 | `build:storybook` | `storybook build` | Builds the static Storybook project |
 | `build-storybook` | `storybook build` | Alias for `build:storybook` |
 | `deploy` | `make deploy` | Deploys the project using the specified Makefile configuration |
@@ -63,20 +62,22 @@ https://<branch>--<appId>.chromatic.com/mcp
 
 Verify with: ask your agent to run `list-all-documentation`.
 
+### Consuming it from other repos
+
+To wire this MCP into other repos that depend on the UI kit — using the
+Chromatic-published endpoint, user vs. project scope, OAuth, and troubleshooting
+— see **[docs/mcp-setup.md](./docs/mcp-setup.md)**.
+
 ## 🌐 Browser Compatibility
 
-Este proyecto utiliza **Babel** para transpilar el código JavaScript/TypeScript, garantizando compatibilidad con:
+El build usa **Vite** (esbuild) con target `es2020`, garantizando compatibilidad con:
 
 - **Navegadores modernos**: Chrome, Firefox, Safari, Edge (últimas 2 versiones)
-- **Navegadores legacy**: Internet Explorer 11+
 - **Dispositivos móviles**: iOS Safari, Chrome Mobile, Samsung Internet
-- **Cobertura global**: >0.25% de usuarios, excluyendo navegadores obsoletos
 
-La configuración de Babel incluye:
-- `@babel/preset-env` para transpilación automática según el target
-- `@babel/preset-react` para sintaxis JSX
-- `@babel/preset-typescript` para TypeScript
-- Plugins adicionales para características modernas de JavaScript
+> Internet Explorer 11 ya no está soportado. Si un consumidor necesitara
+> downleveling a ES5, debería transpilar en su propio pipeline (esbuild no
+> baja de `es2015`).
 
 ### Setting up `@producteca/producteca-ui-kit`
 

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

@@ -11,3 +11,4 @@ export * from './checkIcon/checkIcon';
 export * from './successState/successStateIcon';
 export * from './newState/newStateIcon';
 export * from './maintenance/maintenanceIcon';
+export * from './productecaIcon/productecaIcon';

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

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

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

@@ -8,3 +8,4 @@ export * from './iconWithIdentifier';
 export * from './conditionalOperator';
 export * from './helpArticleLink';
 export * from './maintenance/maintenance';
+export * from './pickChannelModal';

package/dist/components/patterns/pickChannelModal/index.d.ts

@@ -0,0 +1,2 @@
+export { PickChannelModal } from './pickChannelModal';
+export type { PickChannelModalProps, PickChannelModalChannel } from './pickChannelModal.types';

package/dist/components/patterns/pickChannelModal/pickChannelModal.d.ts

@@ -0,0 +1,5 @@
+import { PickChannelModalChannel, PickChannelModalProps } from './pickChannelModal.types';
+
+export declare const productecaStrategy: PickChannelModalChannel;
+export declare const PickChannelModal: ({ open, onClose, channels, generalEditionDescription, channelEditionDescription, showGeneralEdition, onSelectChannel, titleProps, generalEditionTitle, channelEditionTitle, }: PickChannelModalProps) => import("react/jsx-runtime").JSX.Element;
+export default PickChannelModal;

package/dist/components/patterns/pickChannelModal/pickChannelModal.examples.d.ts

@@ -0,0 +1,4 @@
+import { PickChannelModalProps, PickChannelModalChannel } from './pickChannelModal.types';
+
+export declare const sampleChannels: PickChannelModalChannel[];
+export declare const renderInteractive: (args: PickChannelModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/patterns/pickChannelModal/pickChannelModal.types.d.ts

@@ -0,0 +1,23 @@
+import { ModalTitleProps } from '../../modals/modalTitle';
+
+export interface PickChannelModalChannel {
+    clientId: string | number;
+    iconUrl: string;
+    name?: string;
+}
+export interface PickChannelModalProps {
+    open: boolean;
+    channels: PickChannelModalChannel[];
+    onClose?: () => void;
+    titleProps?: ModalTitleProps;
+    showGeneralEdition?: boolean;
+    generalEditionTitle?: string;
+    generalEditionDescription?: string;
+    channelEditionTitle?: string;
+    channelEditionDescription?: string;
+    onSelectChannel?: (channel: PickChannelModalChannel) => void;
+}
+export interface ChannelCardProps {
+    channel: PickChannelModalChannel;
+    onSelect: (channel: PickChannelModalChannel) => void;
+}

package/dist/locales/description.d.ts

@@ -39,6 +39,11 @@ export declare const headerSectionExample = "\n## Uso del componente\n\nEl compo
 export declare const iconWithIdentifierExample = "\n## Uso del componente\n\nEl componente `IconWithIdentifier` muestra un \u00EDcono junto a un texto (por ejemplo un ID o c\u00F3digo).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<IconWithIdentifier\n  icon={<Image src=\"/flag.png\" />}\n  text=\"#ID8765\"\n  showDivider\n/>\n```\n";
 export declare const linkWithIconExample = "\n## Uso del componente\n\nEl componente `LinkWithIcon` muestra un enlace con un \u00EDcono a la izquierda.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<LinkWithIcon\n  text=\"Historial de cambios\"\n  icon={<CustomIcon><History /></CustomIcon>}\n  onClick={() => navigate('/history')}\n/>\n```\n";
 export declare const conditionalOperatorExample = "\n## Uso del componente\n\nEl componente `ConditionalOperator` permite elegir entre operador l\u00F3gico \"Y\" u \"O\" para filtrar o combinar condiciones.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<ConditionalOperator\n  value=\"or\"\n  options={[{ value: 'and', label: 'Y' }, { value: 'or', label: 'O' }]}\n  onChange={(event) => setOperator(event.target.value)}\n/>\n```\n";
+export declare const pickChannelModalExample = "\n## Uso del componente\n\nEl componente `PickChannelModal` muestra un modal con una grilla de canales seleccionables. Recibe el listado `channels` con `{ clientId, iconUrl, name? }`. Opcionalmente, mediante `showGeneralEdition`, agrega una secci\u00F3n superior con la opci\u00F3n Producteca (exportada como `productecaStrategy`) para editar atributos generales \u2014 se comporta como un canal m\u00E1s y se notifica por el mismo `onSelectChannel`. El header acepta cualquier `ModalTitleProps` v\u00EDa `titleProps` (`title`, `icon`, `subtitle`, `helpArticleUrl`, `helpTooltip`).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<PickChannelModal\n  open={open}\n  channels={channels}\n  showGeneralEdition\n  titleProps={{\n    title: 'Editar atributos',\n    icon: <InfoIcon />,\n    subtitle: 'Eleg\u00ED el canal a editar',\n    helpArticleUrl: 'https://help.producteca.com/articles/pick-channel',\n  }}\n  onSelectChannel={(channel) => handleChannelSelected(channel)}\n  onClose={() => setOpen(false)}\n/>\n```\n";
+export declare const pickChannelModalDefault = "\nEstado por defecto con `showGeneralEdition` activado. Se muestra la secci\u00F3n de edici\u00F3n general con la card de Producteca y la secci\u00F3n de canales. Clickear cualquier card invoca `onSelectChannel` con el objeto del canal seleccionado.\n";
+export declare const pickChannelModalWithoutGeneralEdition = "\nVariante sin la secci\u00F3n de edici\u00F3n general \u2014 solo se renderizan las cards recibidas por `channels`. \u00DAtil cuando el flujo no necesita editar atributos gen\u00E9ricos a nivel Producteca.\n";
+export declare const pickChannelModalCustomTexts = "\nDemuestra c\u00F3mo overridear todos los textos visibles (`title`, `generalEditionTitle`, `generalEditionDescription`, `channelEditionTitle`, `channelEditionDescription`) cuando los defaults no encajan con el contexto del producto.\n";
+export declare const pickChannelModalWithFullTitle = "\nHeader con todas las `ModalTitleProps` configuradas: `title`, `subtitle`, `icon` (icono al lado del t\u00EDtulo) y `helpArticleUrl` + `helpTooltip` (que renderizan el \u00EDcono de ayuda con tooltip a la derecha). \u00DAtil cuando el modal necesita contextualizar la acci\u00F3n o linkear a documentaci\u00F3n.\n";
 export declare const emptyStateExample = "\n## Uso del componente\n\nEl componente `EmptyState` muestra un estado vac\u00EDo con mensaje, \u00EDcono opcional y acci\u00F3n (por ejemplo \"Agregar\").\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<EmptyState\n  message=\"No hay resultados\"\n  actionLabel=\"Agregar\"\n  onAction={() => openCreate()}\n/>\n```\n";
 export declare const asyncContentExample = "\n## Uso del componente\n\nEl componente `AsyncContent` maneja los estados de una operaci\u00F3n as\u00EDncrona deriv\u00E1ndolos de las props `isLoading`, `error` y `empty`. La prioridad es: `isLoading` \u2192 `error.value` \u2192 `empty.items` vac\u00EDo \u2192 `success`. Muestra el contenido solo en `success`.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<AsyncContent\n  isLoading={isLoading}\n  error={{\n    value: hasError,\n    text: 'Ocurri\u00F3 un error',\n    actionText: 'Reintentar',\n    onClick: () => refetch(),\n  }}\n  empty={{\n    items,\n    text: 'No hay datos',\n  }}\n>\n  <div>Contenido cuando hay datos disponibles</div>\n</AsyncContent>\n```\n";
 export declare const tooltipExample = "\n## Uso del componente\n\nLos componentes de tooltip (`WithTooltip`, `WithOverflowTooltip`) muestran un mensaje al hacer hover o click. `WithOverflowTooltip` solo muestra el tooltip cuando el contenido se desborda.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<WithTooltip content=\"Texto del tooltip\" placement=\"top\">\n  <span>Hover sobre m\u00ED</span>\n</WithTooltip>\n```\n\n### Solo si hay overflow:\n\n```tsx\n<WithOverflowTooltip maxWidth=\"200px\">\n  <span>Texto que puede truncarse...</span>\n</WithOverflowTooltip>\n```\n";

package/dist/locales/es.d.ts

@@ -209,6 +209,13 @@ declare const _default: {
         modal: {
             example: string;
         };
+        pickChannelModal: {
+            example: string;
+            default: string;
+            withoutGeneralEdition: string;
+            customTexts: string;
+            withFullTitle: string;
+        };
         copyButton: {
             example: string;
         };
@@ -383,6 +390,19 @@ declare const _default: {
         confirm: string;
         openModal: string;
     };
+    pickChannelModal: {
+        title: string;
+        generalEditionTitle: string;
+        generalEditionDescription: string;
+        channelEditionTitle: string;
+        channelEditionDescription: string;
+        openModal: string;
+        fullTitle: {
+            title: string;
+            subtitle: string;
+            helpTooltip: string;
+        };
+    };
     tab: {
         tab1: string;
         tab2: string;