@soyfri/shared-library 1.5.0-beta.4 → 1.5.0

package/.dockerignore

@@ -0,0 +1,8 @@
+# Ignore dependencies, build artifacts, and local environment files
+node_modules
+dist
+
+# Ignore git and docker files
+.git
+.gitignore
+.dockerignore

package/.github/workflows/publish.yml

@@ -0,0 +1,107 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "main" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [v23.6.1]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          npm-version: '10.9.2'
+          cache: 'npm' # Se asume que package-lock.json está en el repositorio
+      
+      - name: Install dependencies
+        run: npm install --frozen-lockfile # Uso de --frozen-lockfile para CI/CD
+
+      - name: Remove underscore-prefixed directories
+        run: npm run rm --if-present
+
+      - name: Build package
+        run: npm run build --if-present
+      
+      - name: Dist package
+        run: npm run dist --if-present
+
+      - name: Upload build artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist-package
+          path: dist/ # Guarda el directorio de distribución como un artefacto
+
+  publish:
+    runs-on: ubuntu-latest
+    needs: build # 👈 Depende del trabajo de construcción
+    environment: production # 👈 Asocia este trabajo con el ambiente 'production'
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        
+      - name: Download build artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: dist-package
+          path: dist/ # Descarga el artefacto en el directorio 'dist'
+
+      - name: Use Node.js 20.x for publishing
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          npm-version: '10.9.2'
+          registry-url: 'https://registry.npmjs.org'
+          
+      - name: Publish package
+        working-directory: dist
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+  
+  notify:
+    runs-on: ubuntu-latest
+    needs: publish
+    environment: production
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        
+      - name: Get package version
+        id: get_version
+        run: echo "PACKAGE_VERSION=$(npm pkg get version | tr -d '\"')" >> $GITHUB_ENV
+        
+      - name: Get commit message and author
+        id: get_commit_info
+        run: |
+          echo "COMMIT_MESSAGE=$(git log -1 --pretty=format:%s)" >> $GITHUB_ENV
+          echo "COMMIT_AUTHOR=$(git log -1 --pretty=format:%an)" >> $GITHUB_ENV
+        
+      - name: Send Discord notification (Success)
+        if: success()
+        uses: tsickert/discord-webhook@v5.3.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          content: "✅ **Publicación Exitosa:** Nueva versión de la librería de componentes en npm.\n**Paquete:** [@soyfri/shared-library](https://www.npmjs.com/package/@soyfri/shared-library/v/${{ env.PACKAGE_VERSION }})\n**Versión:** `v${{ env.PACKAGE_VERSION }}`\n**Notas del commit:** ${{ env.COMMIT_MESSAGE }}\n**Autor:** ${{ env.COMMIT_AUTHOR }}"
+          username: "GitHub Actions"
+          avatar-url: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
+      
+      - name: Send Discord notification (Failure)
+        if: failure()
+        uses: tsickert/discord-webhook@v5.3.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          content: "❌ **Publicación Fallida:** Falló la publicación de la librería de componentes en npm.\n**Commit:** ${{ env.COMMIT_MESSAGE }}\n**Autor:** ${{ env.COMMIT_AUTHOR }}"
+          username: "GitHub Actions"
+          avatar-url: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"

package/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "tabWidth": 2
+}

package/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)"
+  ],
+  "addons": [
+    "@storybook/addon-onboarding",
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-docs"
+  ],
+  "framework": {
+    "name": "@storybook/react-vite",
+    "options": {}
+  }
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react-vite'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

package/Dockerfile

@@ -0,0 +1,37 @@
+# Use a specific Node.js version for the build environment.
+FROM node:20-alpine AS builder
+
+# Set the working directory in the container.
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json to leverage Docker's layer caching.
+# This step is cached and only re-runs if package*.json files change.
+COPY package*.json ./
+
+# Install project dependencies.
+RUN npm install
+
+# Copy the rest of your application's source code.
+COPY . .
+
+# Run the build script to create the distribution files.
+RUN npm run build --if-present
+
+RUN npm run dist --if-present
+
+# --- Final Stage: Create a lightweight image with only the build artifacts ---
+# Use a minimal base image. 'scratch' is the smallest, 'alpine' is also a good choice.
+FROM scratch
+
+# Set the working directory to the root of your library.
+WORKDIR /usr/src/app
+
+# Copy the built files from the 'builder' stage.
+COPY --from=builder /usr/src/app/dist ./dist
+
+# The final image contains only the 'dist' directory.
+# There is no need for EXPOSE or CMD as this is a component library, not a runnable application.
+
+# You can add a LABEL to describe the image if needed.
+LABEL maintainer="Your Name"
+LABEL version="1.0"

package/build.js

@@ -0,0 +1,102 @@
+import { readFileSync, existsSync, mkdirSync, writeFileSync, copyFileSync } from 'fs';
+import { join, basename } from 'path';
+import { sync } from 'glob';
+
+const projectRoot = process.cwd();
+const srcComponentsDir = join(projectRoot, 'src', 'components');
+const srcHooksDir = join(projectRoot, 'src', 'hooks');
+const distDir = join(projectRoot, 'dist');
+const distComponentsDir = join(distDir, 'components');
+const distHooksDir = join(distDir, 'hooks');
+const originalPackageJsonPath = join(projectRoot, 'package.json');
+const distPackageJsonPath = join(distDir, 'package.json');
+const readmePath = join(projectRoot, 'README.md');
+
+// Leer el package.json original
+const originalPackageJson = JSON.parse(readFileSync(originalPackageJsonPath, 'utf8'));
+
+// Inicializar el nuevo objeto exports
+let newExports = {
+  ".": {
+    "import": "./index.js",
+    "require": "./index.cjs",
+    "types": "./index.d.ts"
+  },
+  "./package.json": "./package.json"
+};
+
+// Función para procesar directorios de forma condicional y crear entradas en exports
+const processDirectories = (sourceDir, distDir, exportPrefix) => {
+  if (!existsSync(sourceDir)) {
+    console.log(`Directorio no encontrado: ${sourceDir}. Saltando.`);
+    return;
+  }
+  
+  if (!existsSync(distDir)) {
+    mkdirSync(distDir, { recursive: true });
+  }
+
+  const componentDirs = sync(`${sourceDir}/*/`);
+  
+  console.log(`Buscando módulos en: ${sourceDir}`);
+  
+  componentDirs.forEach(componentDirPath => {
+    const componentName = basename(componentDirPath);
+    
+    // Verificar si el nombre de la carpeta tiene la inicial en mayúscula
+    if (!/^[A-Z]/.test(componentName)) {
+      console.log(`  - Saltando '${componentName}' porque su carpeta no empieza con mayúscula.`);
+      return; // Saltar este componente
+    }
+
+    console.log(`  - Módulo encontrado: ${componentName}`);
+    
+    // Crear carpeta en dist
+    const distModuleFolder = join(distDir, componentName);
+    if (!existsSync(distModuleFolder)) {
+      mkdirSync(distModuleFolder, { recursive: true });
+    }
+
+    // Agregar entrada al objeto exports
+    const exportPath = `./${exportPrefix}/${componentName}`;
+    newExports[exportPath] = {
+      "import": `./${exportPrefix}/${componentName}/${componentName}.js`,
+      "require": `./${exportPrefix}/${componentName}/${componentName}.cjs`,
+      "types": `./${exportPrefix}/${componentName}/${componentName}.d.ts`
+    };
+  });
+};
+
+// Procesar componentes
+processDirectories(srcComponentsDir, distComponentsDir, 'components');
+
+// Procesar hooks
+processDirectories(srcHooksDir, distHooksDir, 'hooks');
+
+// Crear una copia del package.json original para dist
+const distPackageJson = { ...originalPackageJson };
+distPackageJson.exports = newExports;
+
+// Eliminar propiedades innecesarias
+delete distPackageJson.scripts;
+delete distPackageJson.devDependencies;
+delete distPackageJson.private;
+
+// Asegurarse de que el directorio 'dist' exista
+if (!existsSync(distDir)) {
+  mkdirSync(distDir, { recursive: true });
+}
+
+// Copiar README.md a la carpeta dist
+if (existsSync(readmePath)) {
+  copyFileSync(readmePath, join(distDir, 'README.md'));
+  console.log('Copiando README.md a la carpeta dist.');
+} else {
+  console.log('No se encontró README.md en la raíz del proyecto. Saltando.');
+}
+
+// Escribir el nuevo package.json en dist/
+writeFileSync(distPackageJsonPath, JSON.stringify(distPackageJson, null, 2), 'utf8');
+
+console.log(`\n'package.json' generado exitosamente en: ${distPackageJsonPath}`);
+console.log('Contenido de la propiedad "exports":', JSON.stringify(newExports, null, 2));

package/chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:6836406d3794ebfc4012fb25",
+  "zip": true
+}

package/cleanDirectories.js

@@ -0,0 +1,40 @@
+import { promises as fs } from 'fs';
+import { join } from 'path';
+
+// Define the folders to be cleaned (sub-folders will be deleted)
+const foldersToClean = ['components', 'hooks'];
+const srcPath = join(process.cwd(), 'src');
+
+const deleteLowercaseFolders = async () => {
+  console.log('Iniciando el proceso de eliminación de carpetas...');
+  
+  for (const parentFolder of foldersToClean) {
+    const parentPath = join(srcPath, parentFolder);
+
+    if (!await fs.stat(parentPath).catch(() => false)) {
+      console.log(`Directorio padre no encontrado: ${parentPath}. Saltando.`);
+      continue;
+    }
+
+    try {
+      // Leer el contenido del directorio padre y obtener información de los archivos
+      const entries = await fs.readdir(parentPath, { withFileTypes: true });
+
+      for (const entry of entries) {
+        // Check if the entry is a directory and its name starts with a lowercase letter.
+        if (entry.isDirectory() && /^[a-z]/.test(entry.name)) {
+          const folderPath = join(parentPath, entry.name);
+          await fs.rm(folderPath, { recursive: true, force: true });
+          console.log(`- Carpeta eliminada: ${folderPath}`);
+        }
+      }
+    } catch (error) {
+      console.error(`Error al procesar el directorio ${parentPath}:`, error);
+    }
+  }
+
+  console.log('Proceso de limpieza completado.');
+};
+
+// Execute the main function
+deleteLowercaseFolders();

package/dist/components/Autocomplete/Autocomplete.cjs

@@ -0,0 +1,109 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const ClearIcon = require("@mui/icons-material/Clear");
+function AutocompleteSelect(props) {
+  const {
+    label,
+    options = [],
+    value,
+    onChange,
+    placeholder,
+    multiple = false,
+    disabled = false,
+    loading = false,
+    error = false,
+    helperText,
+    renderOptionItem,
+    renderChipLabel,
+    maxChipsToShow = 3
+  } = props;
+  const renderTags = (value2, getTagProps) => {
+    const displayed = value2.slice(0, maxChipsToShow);
+    const hidden = value2.length - maxChipsToShow;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      displayed.map((option, index) => /* @__PURE__ */ React.createElement(
+        material.Chip,
+        __spreadProps(__spreadValues({}, getTagProps({ index })), {
+          key: option.value,
+          label: renderChipLabel ? renderChipLabel(option) : option.label,
+          avatar: option.img ? /* @__PURE__ */ jsxRuntime.jsx(material.Avatar, { src: option.img }) : void 0,
+          deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, {})
+        })
+      )),
+      hidden > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: `+${hidden} más` })
+    ] });
+  };
+  const renderOption = (propsLi, option) => /* @__PURE__ */ React.createElement("li", __spreadProps(__spreadValues({}, propsLi), { key: option.value }), renderOptionItem ? renderOptionItem(option) : option.label);
+  const renderAutocomplete = (value2, onChange2) => {
+    var _a, _b;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.Autocomplete,
+      {
+        multiple,
+        options,
+        value: multiple ? (_a = options.filter(
+          (o) => value2 == null ? void 0 : value2.includes(o.value)
+        )) != null ? _a : [] : (_b = options.find((o) => o.value === value2)) != null ? _b : null,
+        disabled,
+        loading,
+        getOptionLabel: (opt) => {
+          var _a2;
+          return (_a2 = opt == null ? void 0 : opt.label) != null ? _a2 : "";
+        },
+        isOptionEqualToValue: (a, b) => a.value === b.value,
+        onChange: onChange2,
+        renderOption,
+        renderTags: multiple ? renderTags : void 0,
+        noOptionsText: "No hay opciones",
+        loadingText: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 20 }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: "Cargando..." })
+        ] }),
+        renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
+          material.TextField,
+          __spreadProps(__spreadValues({}, params), {
+            label,
+            placeholder,
+            error,
+            helperText
+          })
+        )
+      }
+    );
+  };
+  const handleChangeInternal = (event, newValue) => {
+    var _a;
+    if (multiple) {
+      const values = (newValue != null ? newValue : []).map((opt) => opt.value);
+      onChange == null ? void 0 : onChange(values);
+    } else {
+      const value2 = (_a = newValue == null ? void 0 : newValue.value) != null ? _a : "";
+      onChange == null ? void 0 : onChange(value2);
+    }
+  };
+  return renderAutocomplete(value, handleChangeInternal);
+}
+exports.Autocomplete = AutocompleteSelect;
+//# sourceMappingURL=Autocomplete.cjs.map

package/dist/components/Autocomplete/Autocomplete.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.cjs","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Autocomplete,\n  TextField,\n  Chip,\n  Avatar,\n  Box,\n  Typography,\n  CircularProgress,\n} from \"@mui/material\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\n\nexport interface SelectOption {\n  value: string | number;\n  label: string;\n  img?: string;\n  disabled?: boolean;\n  group?: string;\n  [key: string]: any;\n}\n\ntype RenderOptionItem = (item: SelectOption) => React.ReactNode;\ntype RenderChipLabel = (item: SelectOption) => React.ReactNode;\n\ninterface AutocompleteProps<\n  TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n> {\n  label?: string;\n  value: TValue | TValue[];\n  onChange: (val: TValue | TValue[]) => void;\n  options?: SelectOption[];\n  placeholder?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  error?: boolean;\n  helperText?: string;\n  maxChipsToShow?: number;\n  renderOptionItem?: RenderOptionItem;\n  renderChipLabel?: RenderChipLabel;\n}\n\nexport function AutocompleteSelect<\n  TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n>(props: AutocompleteProps<TValue>) {\n  const {\n    label,\n    options = [],\n    value,\n    onChange,\n    placeholder,\n    multiple = false,\n    disabled = false,\n    loading = false,\n    error = false,\n    helperText,\n    renderOptionItem,\n    renderChipLabel,\n    maxChipsToShow = 3,\n  } = props;\n\n  const renderTags = (value: SelectOption[], getTagProps: any) => {\n    const displayed = value.slice(0, maxChipsToShow);\n    const hidden = value.length - maxChipsToShow;\n\n    return (\n      <>\n        {displayed.map((option, index) => (\n          <Chip\n            {...getTagProps({ index })}\n            key={option.value}\n            label={renderChipLabel ? renderChipLabel(option) : option.label}\n            avatar={option.img ? <Avatar src={option.img} /> : undefined}\n            deleteIcon={<ClearIcon />}\n          />\n        ))}\n\n        {hidden > 0 && <Chip label={`+${hidden} más`} />}\n      </>\n    );\n  };\n\n  const renderOption = (propsLi: any, option: SelectOption) => (\n    <li {...propsLi} key={option.value}>\n      {renderOptionItem ? renderOptionItem(option) : option.label}\n    </li>\n  );\n\n  const renderAutocomplete = (value: any, onChange: any) => (\n    <Autocomplete\n      multiple={multiple}\n      options={options}\n      value={\n        multiple\n          ? (options.filter((o) =>\n              (value as string[] | undefined)?.includes(o.value as string),\n            ) ?? [])\n          : (options.find((o) => o.value === value) ?? null)\n      }\n      disabled={disabled}\n      loading={loading}\n      getOptionLabel={(opt) => opt?.label ?? \"\"}\n      isOptionEqualToValue={(a, b) => a.value === b.value}\n      onChange={onChange}\n      renderOption={renderOption}\n      renderTags={multiple ? renderTags : undefined}\n      noOptionsText=\"No hay opciones\"\n      loadingText={\n        <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1 }}>\n          <CircularProgress size={20} />\n          <Typography>Cargando...</Typography>\n        </Box>\n      }\n      renderInput={(params) => (\n        <TextField\n          {...params}\n          label={label}\n          placeholder={placeholder}\n          error={error}\n          helperText={helperText}\n        />\n      )}\n    />\n  );\n\n  const handleChangeInternal = (event: any, newValue: any) => {\n    if (multiple) {\n      const values = (newValue ?? []).map((opt: any) => opt.value);\n      (onChange as (val: TValue[]) => void)?.(values);\n    } else {\n      const value = newValue?.value ?? \"\";\n      (onChange as (val: TValue) => void)?.(value);\n    }\n  };\n\n  return renderAutocomplete(value, handleChangeInternal);\n}\n\nexport default AutocompleteSelect;\n"],"names":["value","jsxs","Fragment","createElement","Chip","jsx","Avatar","onChange","Autocomplete","_a","Box","CircularProgress","Typography","TextField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0CO,SAAS,mBAEd,OAAkC;AAClC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,CAAA;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,EAAA,IACf;AAEJ,QAAM,aAAa,CAACA,QAAuB,gBAAqB;AAC9D,UAAM,YAAYA,OAAM,MAAM,GAAG,cAAc;AAC/C,UAAM,SAASA,OAAM,SAAS;AAE9B,WACEC,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,MAAA,UAAU,IAAI,CAAC,QAAQ,UACtBC,sBAAAA;AAAAA,QAACC,SAAAA;AAAAA,QAAA,iCACK,YAAY,EAAE,OAAO,IAD1B;AAAA,UAEC,KAAK,OAAO;AAAA,UACZ,OAAO,kBAAkB,gBAAgB,MAAM,IAAI,OAAO;AAAA,UAC1D,QAAQ,OAAO,MAAMC,+BAACC,SAAAA,UAAO,KAAK,OAAO,KAAK,IAAK;AAAA,UACnD,2CAAa,WAAA,CAAA,CAAU;AAAA,QAAA;AAAA,MAAA,CAE1B;AAAA,MAEA,SAAS,KAAKD,2BAAAA,IAACD,iBAAK,OAAO,IAAI,MAAM,OAAA,CAAQ;AAAA,IAAA,GAChD;AAAA,EAEJ;AAEA,QAAM,eAAe,CAAC,SAAc,WAClCD,sBAAAA,cAAC,uCAAO,YAAS,KAAK,OAAO,UAC1B,mBAAmB,iBAAiB,MAAM,IAAI,OAAO,KACxD;AAGF,QAAM,qBAAqB,CAACH,QAAYO;;AACtCF,sCAAAA;AAAAA,MAACG,SAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OACE,YACK,aAAQ;AAAA,UAAO,CAAC,MACdR,iCAAgC,SAAS,EAAE;AAAA,QAAe,MAD5D,YAEI,CAAA,KACJ,aAAQ,KAAK,CAAC,MAAM,EAAE,UAAUA,MAAK,MAArC,YAA0C;AAAA,QAEjD;AAAA,QACA;AAAA,QACA,gBAAgB,CAAC;;AAAQ,kBAAAS,MAAA,2BAAK,UAAL,OAAAA,MAAc;AAAA;AAAA,QACvC,sBAAsB,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE;AAAA,QAC9C,UAAUF;AAAAA,QACV;AAAA,QACA,YAAY,WAAW,aAAa;AAAA,QACpC,eAAc;AAAA,QACd,aACEN,2BAAAA,KAACS,SAAAA,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA,GACrD,UAAA;AAAA,UAAAL,2BAAAA,IAACM,SAAAA,kBAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,UAC5BN,2BAAAA,IAACO,SAAAA,cAAW,UAAA,cAAA,CAAW;AAAA,QAAA,GACzB;AAAA,QAEF,aAAa,CAAC,WACZP,2BAAAA;AAAAA,UAACQ,SAAAA;AAAAA,UAAA,iCACK,SADL;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA;AAKN,QAAM,uBAAuB,CAAC,OAAY,aAAkB;;AAC1D,QAAI,UAAU;AACZ,YAAM,UAAU,8BAAY,CAAA,GAAI,IAAI,CAAC,QAAa,IAAI,KAAK;AAC1D,2CAAuC;AAAA,IAC1C,OAAO;AACL,YAAMb,UAAQ,0CAAU,UAAV,YAAmB;AAChC,2CAAqCA;AAAAA,IACxC;AAAA,EACF;AAEA,SAAO,mBAAmB,OAAO,oBAAoB;AACvD;;"}

package/dist/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,109 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { createElement } from "react";
+import { Autocomplete, TextField, Box, CircularProgress, Typography, Chip, Avatar } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+function AutocompleteSelect(props) {
+  const {
+    label,
+    options = [],
+    value,
+    onChange,
+    placeholder,
+    multiple = false,
+    disabled = false,
+    loading = false,
+    error = false,
+    helperText,
+    renderOptionItem,
+    renderChipLabel,
+    maxChipsToShow = 3
+  } = props;
+  const renderTags = (value2, getTagProps) => {
+    const displayed = value2.slice(0, maxChipsToShow);
+    const hidden = value2.length - maxChipsToShow;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      displayed.map((option, index) => /* @__PURE__ */ createElement(
+        Chip,
+        __spreadProps(__spreadValues({}, getTagProps({ index })), {
+          key: option.value,
+          label: renderChipLabel ? renderChipLabel(option) : option.label,
+          avatar: option.img ? /* @__PURE__ */ jsx(Avatar, { src: option.img }) : void 0,
+          deleteIcon: /* @__PURE__ */ jsx(ClearIcon, {})
+        })
+      )),
+      hidden > 0 && /* @__PURE__ */ jsx(Chip, { label: `+${hidden} más` })
+    ] });
+  };
+  const renderOption = (propsLi, option) => /* @__PURE__ */ createElement("li", __spreadProps(__spreadValues({}, propsLi), { key: option.value }), renderOptionItem ? renderOptionItem(option) : option.label);
+  const renderAutocomplete = (value2, onChange2) => {
+    var _a, _b;
+    return /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        multiple,
+        options,
+        value: multiple ? (_a = options.filter(
+          (o) => value2 == null ? void 0 : value2.includes(o.value)
+        )) != null ? _a : [] : (_b = options.find((o) => o.value === value2)) != null ? _b : null,
+        disabled,
+        loading,
+        getOptionLabel: (opt) => {
+          var _a2;
+          return (_a2 = opt == null ? void 0 : opt.label) != null ? _a2 : "";
+        },
+        isOptionEqualToValue: (a, b) => a.value === b.value,
+        onChange: onChange2,
+        renderOption,
+        renderTags: multiple ? renderTags : void 0,
+        noOptionsText: "No hay opciones",
+        loadingText: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
+          /* @__PURE__ */ jsx(Typography, { children: "Cargando..." })
+        ] }),
+        renderInput: (params) => /* @__PURE__ */ jsx(
+          TextField,
+          __spreadProps(__spreadValues({}, params), {
+            label,
+            placeholder,
+            error,
+            helperText
+          })
+        )
+      }
+    );
+  };
+  const handleChangeInternal = (event, newValue) => {
+    var _a;
+    if (multiple) {
+      const values = (newValue != null ? newValue : []).map((opt) => opt.value);
+      onChange == null ? void 0 : onChange(values);
+    } else {
+      const value2 = (_a = newValue == null ? void 0 : newValue.value) != null ? _a : "";
+      onChange == null ? void 0 : onChange(value2);
+    }
+  };
+  return renderAutocomplete(value, handleChangeInternal);
+}
+export {
+  AutocompleteSelect as Autocomplete
+};
+//# sourceMappingURL=Autocomplete.js.map

package/dist/components/Autocomplete/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Autocomplete,\n  TextField,\n  Chip,\n  Avatar,\n  Box,\n  Typography,\n  CircularProgress,\n} from \"@mui/material\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\n\nexport interface SelectOption {\n  value: string | number;\n  label: string;\n  img?: string;\n  disabled?: boolean;\n  group?: string;\n  [key: string]: any;\n}\n\ntype RenderOptionItem = (item: SelectOption) => React.ReactNode;\ntype RenderChipLabel = (item: SelectOption) => React.ReactNode;\n\ninterface AutocompleteProps<\n  TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n> {\n  label?: string;\n  value: TValue | TValue[];\n  onChange: (val: TValue | TValue[]) => void;\n  options?: SelectOption[];\n  placeholder?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  error?: boolean;\n  helperText?: string;\n  maxChipsToShow?: number;\n  renderOptionItem?: RenderOptionItem;\n  renderChipLabel?: RenderChipLabel;\n}\n\nexport function AutocompleteSelect<\n  TValue extends SelectOption[\"value\"] = SelectOption[\"value\"],\n>(props: AutocompleteProps<TValue>) {\n  const {\n    label,\n    options = [],\n    value,\n    onChange,\n    placeholder,\n    multiple = false,\n    disabled = false,\n    loading = false,\n    error = false,\n    helperText,\n    renderOptionItem,\n    renderChipLabel,\n    maxChipsToShow = 3,\n  } = props;\n\n  const renderTags = (value: SelectOption[], getTagProps: any) => {\n    const displayed = value.slice(0, maxChipsToShow);\n    const hidden = value.length - maxChipsToShow;\n\n    return (\n      <>\n        {displayed.map((option, index) => (\n          <Chip\n            {...getTagProps({ index })}\n            key={option.value}\n            label={renderChipLabel ? renderChipLabel(option) : option.label}\n            avatar={option.img ? <Avatar src={option.img} /> : undefined}\n            deleteIcon={<ClearIcon />}\n          />\n        ))}\n\n        {hidden > 0 && <Chip label={`+${hidden} más`} />}\n      </>\n    );\n  };\n\n  const renderOption = (propsLi: any, option: SelectOption) => (\n    <li {...propsLi} key={option.value}>\n      {renderOptionItem ? renderOptionItem(option) : option.label}\n    </li>\n  );\n\n  const renderAutocomplete = (value: any, onChange: any) => (\n    <Autocomplete\n      multiple={multiple}\n      options={options}\n      value={\n        multiple\n          ? (options.filter((o) =>\n              (value as string[] | undefined)?.includes(o.value as string),\n            ) ?? [])\n          : (options.find((o) => o.value === value) ?? null)\n      }\n      disabled={disabled}\n      loading={loading}\n      getOptionLabel={(opt) => opt?.label ?? \"\"}\n      isOptionEqualToValue={(a, b) => a.value === b.value}\n      onChange={onChange}\n      renderOption={renderOption}\n      renderTags={multiple ? renderTags : undefined}\n      noOptionsText=\"No hay opciones\"\n      loadingText={\n        <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1 }}>\n          <CircularProgress size={20} />\n          <Typography>Cargando...</Typography>\n        </Box>\n      }\n      renderInput={(params) => (\n        <TextField\n          {...params}\n          label={label}\n          placeholder={placeholder}\n          error={error}\n          helperText={helperText}\n        />\n      )}\n    />\n  );\n\n  const handleChangeInternal = (event: any, newValue: any) => {\n    if (multiple) {\n      const values = (newValue ?? []).map((opt: any) => opt.value);\n      (onChange as (val: TValue[]) => void)?.(values);\n    } else {\n      const value = newValue?.value ?? \"\";\n      (onChange as (val: TValue) => void)?.(value);\n    }\n  };\n\n  return renderAutocomplete(value, handleChangeInternal);\n}\n\nexport default AutocompleteSelect;\n"],"names":["value","onChange","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0CO,SAAS,mBAEd,OAAkC;AAClC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU,CAAA;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,EAAA,IACf;AAEJ,QAAM,aAAa,CAACA,QAAuB,gBAAqB;AAC9D,UAAM,YAAYA,OAAM,MAAM,GAAG,cAAc;AAC/C,UAAM,SAASA,OAAM,SAAS;AAE9B,WACE,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA,UAAU,IAAI,CAAC,QAAQ,UACtB;AAAA,QAAC;AAAA,QAAA,iCACK,YAAY,EAAE,OAAO,IAD1B;AAAA,UAEC,KAAK,OAAO;AAAA,UACZ,OAAO,kBAAkB,gBAAgB,MAAM,IAAI,OAAO;AAAA,UAC1D,QAAQ,OAAO,MAAM,oBAAC,UAAO,KAAK,OAAO,KAAK,IAAK;AAAA,UACnD,gCAAa,WAAA,CAAA,CAAU;AAAA,QAAA;AAAA,MAAA,CAE1B;AAAA,MAEA,SAAS,KAAK,oBAAC,QAAK,OAAO,IAAI,MAAM,OAAA,CAAQ;AAAA,IAAA,GAChD;AAAA,EAEJ;AAEA,QAAM,eAAe,CAAC,SAAc,WAClC,8BAAC,uCAAO,YAAS,KAAK,OAAO,UAC1B,mBAAmB,iBAAiB,MAAM,IAAI,OAAO,KACxD;AAGF,QAAM,qBAAqB,CAACA,QAAYC;;AACtC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OACE,YACK,aAAQ;AAAA,UAAO,CAAC,MACdD,iCAAgC,SAAS,EAAE;AAAA,QAAe,MAD5D,YAEI,CAAA,KACJ,aAAQ,KAAK,CAAC,MAAM,EAAE,UAAUA,MAAK,MAArC,YAA0C;AAAA,QAEjD;AAAA,QACA;AAAA,QACA,gBAAgB,CAAC;;AAAQ,kBAAAE,MAAA,2BAAK,UAAL,OAAAA,MAAc;AAAA;AAAA,QACvC,sBAAsB,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE;AAAA,QAC9C,UAAUD;AAAAA,QACV;AAAA,QACA,YAAY,WAAW,aAAa;AAAA,QACpC,eAAc;AAAA,QACd,aACE,qBAAC,KAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA,GACrD,UAAA;AAAA,UAAA,oBAAC,kBAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,UAC5B,oBAAC,cAAW,UAAA,cAAA,CAAW;AAAA,QAAA,GACzB;AAAA,QAEF,aAAa,CAAC,WACZ;AAAA,UAAC;AAAA,UAAA,iCACK,SADL;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA;AAKN,QAAM,uBAAuB,CAAC,OAAY,aAAkB;;AAC1D,QAAI,UAAU;AACZ,YAAM,UAAU,8BAAY,CAAA,GAAI,IAAI,CAAC,QAAa,IAAI,KAAK;AAC1D,2CAAuC;AAAA,IAC1C,OAAO;AACL,YAAMD,UAAQ,0CAAU,UAAV,YAAmB;AAChC,2CAAqCA;AAAAA,IACxC;AAAA,EACF;AAEA,SAAO,mBAAmB,OAAO,oBAAoB;AACvD;"}