@soyfri/shared-library 1.5.0 → 1.6.0-beta.1

package/dist/styles.css

@@ -1,112 +0,0 @@
-/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
-@layer properties;
-.invisible {
-  visibility: hidden;
-}
-.visible {
-  visibility: visible;
-}
-.absolute {
-  position: absolute;
-}
-.relative {
-  position: relative;
-}
-.sticky {
-  position: sticky;
-}
-.container {
-  width: 100%;
-}
-.block {
-  display: block;
-}
-.flex {
-  display: flex;
-}
-.grid {
-  display: grid;
-}
-.hidden {
-  display: none;
-}
-.inline-block {
-  display: inline-block;
-}
-.inline-flex {
-  display: inline-flex;
-}
-.table {
-  display: table;
-}
-.h-full {
-  height: 100%;
-}
-.w-full {
-  width: 100%;
-}
-.transform {
-  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
-}
-.items-center {
-  align-items: center;
-}
-.border {
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-}
-.lowercase {
-  text-transform: lowercase;
-}
-.outline {
-  outline-style: var(--tw-outline-style);
-  outline-width: 1px;
-}
-.transition {
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
-  transition-timing-function: var(--tw-ease, ease);
-  transition-duration: var(--tw-duration, 0s);
-}
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-    *, ::before, ::after, ::backdrop {
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
-      --tw-border-style: solid;
-      --tw-outline-style: solid;
-    }
-  }
-}

package/rollup.config.cjs

@@ -1,87 +0,0 @@
-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

@@ -1,254 +0,0 @@
-// =============================================================================
-// 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);
-			}}
-    />
-  );
-};
-`;