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

package/rollup.config.cjs

@@ -0,0 +1,87 @@
+const resolve = require('@rollup/plugin-node-resolve');
+const commonjs = require('@rollup/plugin-commonjs');
+const typescript = require('rollup-plugin-typescript2');
+const peerDepsExternal = require('rollup-plugin-peer-deps-external');
+const postcss = require('rollup-plugin-postcss');
+const terser = require('@rollup/plugin-terser');
+// const alias = require('@rollup/plugin-alias'); // 👈 Ya no necesitamos este plugin
+const { globSync } = require('glob');
+const path = require('path');
+const pkg = require('./package.json');
+const projectRootDir = path.resolve(__dirname);
+
+const componentEntryPoints = globSync('src/components/*/index.ts').reduce((acc, file) => {
+  const componentName = path.basename(path.dirname(file));
+  acc[`components/${componentName}`] = file;
+  return acc;
+}, {});
+
+const mainEntry = {
+  index: 'src/index.ts',
+};
+
+module.exports = {
+  input: {
+    ...mainEntry,
+    ...componentEntryPoints,
+  },
+  output: [
+    {
+      dir: 'dist/esm',
+      format: 'esm',
+      sourcemap: true,
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+      entryFileNames: '[name].js',
+      chunkFileNames: '_chunks/chunk-[hash].js',
+      exports: 'named',
+    },
+    {
+      dir: 'dist/cjs',
+      format: 'cjs',
+      sourcemap: true,
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+      entryFileNames: '[name].cjs',
+      chunkFileNames: '_chunks/chunk-[hash].cjs',
+      exports: 'named',
+    },
+  ],
+  plugins: [
+    peerDepsExternal(),
+    // 👈 Configura el alias dentro del plugin 'resolve'
+    resolve({
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      alias: {
+        entries: [
+          { find: '@soyfri/shared-library', replacement: path.resolve(projectRootDir, 'src') }
+        ]
+      }
+    }),
+    commonjs(),
+    typescript({
+      tsconfig: './tsconfig.json',
+      useTsconfigDeclarationDir: true,
+    }),
+    postcss({
+      config: {
+        path: './postcss.config.js',
+      },
+      extensions: ['.css'],
+      minimize: true,
+      extract: true,
+    }),
+    terser(),
+  ],
+  external: [
+    'react',
+    'react-dom',
+    /@mui\/.*/,
+    /@emotion\/.*/,
+    'dayjs',
+    'react-hook-form',
+    'tailwindcss',
+    'autoprefixer',
+    'postcss',
+  ],
+};

package/src/components/Autocomplete/Autocomplete.definitions.ts

@@ -0,0 +1,254 @@
+// =============================================================================
+// SIMPLE
+// =============================================================================
+export const SimpleAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box, Typography } from '@mui/material';
+
+const options = [
+  { value: '10', label: '10' },
+  { value: '25', label: '25' },
+];
+
+export const SimpleExample = () => {
+  const [value, setValue] = useState(options[1]);
+
+  return (
+    <Box sx={{ width: 250 }}>
+      <Autocomplete
+        label="Registros por página"
+        options={options}
+        value={value}
+        onChange={(val) => {
+          setValue(val as string);
+        }}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Valor: {value}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+// =============================================================================
+// PLACEHOLDER
+// =============================================================================
+export const WithPlaceholderAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box, Typography } from '@mui/material';
+
+export const WithPlaceholderExample = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <Box sx={{ width: 300 }}>
+      <Autocomplete
+        label="Seleccione una opción"
+        options={[]}
+        value={value}
+        onChange={(val) => {
+         setValue(val as string);
+        }}
+        placeholder="Ninguna opción seleccionada"
+      />
+      <Typography sx={{ mt: 2 }}>
+        {value || 'Ninguno'}
+      </Typography>
+    </Box>
+  );
+};
+`;
+
+// =============================================================================
+// MULTIPLE
+// =============================================================================
+export const MultipleAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Box } from '@mui/material';
+
+const options = [
+  { value: 'pending', label: 'Pendiente' },
+  { value: 'approved', label: 'Aprobado' },
+];
+
+export const MultipleExample = () => {
+  const [value, setValue] = useState([]);
+
+  return (
+    <Box sx={{ width: 400 }}>
+      <Autocomplete
+        multiple
+        options={options}
+        value={value}
+        onChange={(val) => {
+          setValue(val as string[]);
+        }}
+      />
+    </Box>
+  );
+};
+`;
+
+// =============================================================================
+// MULTIPLE LIMIT
+// =============================================================================
+export const MultipleWithLimitAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+
+export const MultipleWithLimitExample = () => {
+  const [value, setValue] = useState([]);
+
+  return (
+    <Autocomplete
+      multiple
+      maxChipsToShow={2}
+      options={[]}
+      value={value}
+      onChange={(val) => {
+        setValue(val as string[]);
+      }}
+    />
+  );
+};
+`;
+
+// =============================================================================
+// CUSTOM OPTION
+// =============================================================================
+export const CustomRenderOptionAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Avatar, Box } from '@mui/material';
+
+const users = [
+  { value: 'admin', label: 'Administrador', img: '...' },
+];
+
+export const CustomRenderExample = () => {
+  const [value, setValue] = useState([]);
+
+  return (
+    <Autocomplete
+      multiple
+      options={users}
+      value={value}
+      onChange={(val) => {
+        setValue(val as string[]);
+      }}
+      renderOptionItem={(item) => (
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <Avatar src={item.img} />
+          {item.label}
+        </Box>
+      )}
+    />
+  );
+};
+`;
+
+// =============================================================================
+// CUSTOM CHIP
+// =============================================================================
+export const CustomChipRenderAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+import { Typography } from '@mui/material';
+
+export const CustomChipExample = () => {
+  const [value, setValue] = useState([]);
+
+  return (
+    <Autocomplete
+      multiple
+      options={[]}
+      value={value}
+      onChange={(val) => {
+        setValue(val as string[]);
+      }}
+      renderChipLabel={(item) => (
+        <Typography variant="caption">
+          {item.label.charAt(0)}
+        </Typography>
+      )}
+    />
+  );
+};
+`;
+
+// =============================================================================
+// LOADING
+// =============================================================================
+export const LoadingAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+
+export const LoadingExample = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <Autocomplete
+      loading
+      options={[]}
+      value={value}
+      onChange={(val) => {
+				setValue(val as string);
+			}}
+    />
+  );
+};
+`;
+
+// =============================================================================
+// EMPTY
+// =============================================================================
+export const EmptyOptionsAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+
+export const EmptyExample = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <Autocomplete
+      options={[]}
+      value={value}
+      onChange={(val) => {
+				setValue(val as string);
+			}}
+      placeholder="No hay opciones"
+    />
+  );
+};
+`;
+
+// =============================================================================
+// MANY
+// =============================================================================
+export const ManyOptionsAutocompleteDefinition = `
+import React, { useState } from 'react';
+import Autocomplete from './Autocomplete';
+
+const options = Array.from({ length: 50 }, (_, i) => ({
+  value: i,
+  label: 'Opción ' + i,
+}));
+
+export const ManyOptionsExample = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <Autocomplete
+      options={options}
+      value={value}
+      onChange={(val) => {
+				setValue(val as string);
+			}}
+    />
+  );
+};
+`;