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

package/dist/styles.css

@@ -0,0 +1,112 @@
+/*! 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/package.json

@@ -1,10 +1,22 @@
 {
   "name": "@soyfri/shared-library",
-  "version": "1.5.0-beta.4",
+  "version": "1.5.0",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
+    "watch:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch",
+    "build": "vite build --mode lib",
+    "dev": "tsup --watch",
+    "rm": "node cleanDirectories",
+    "clean": "rimraf dist",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "dist": "node build"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -28,140 +40,37 @@
     "react-hook-form": "^7.62.0",
     "tailwindcss": "^4.1.7"
   },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.0.1",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@storybook/addon-docs": "^9.0.15",
+    "@storybook/addon-onboarding": "^9.0.15",
+    "@storybook/addon-vitest": "^9.0.15",
+    "@storybook/react-vite": "^9.0.15",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.5",
+    "@vitest/browser": "^3.1.4",
+    "@vitest/coverage-v8": "^3.1.4",
+    "chromatic": "^12.0.0",
+    "glob": "^11.0.2",
+    "playwright": "^1.52.0",
+    "prettier": "3.5.3",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.41.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "storybook": "^9.0.15",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vitest": "^3.1.4"
+  },
   "overrides": {
     "storybook": "$storybook"
-  },
-  "exports": {
-    ".": {
-      "import": "./index.js",
-      "require": "./index.cjs",
-      "types": "./index.d.ts"
-    },
-    "./package.json": "./package.json",
-    "./components/Tooltip": {
-      "import": "./components/Tooltip/Tooltip.js",
-      "require": "./components/Tooltip/Tooltip.cjs",
-      "types": "./components/Tooltip/Tooltip.d.ts"
-    },
-    "./components/Timeline": {
-      "import": "./components/Timeline/Timeline.js",
-      "require": "./components/Timeline/Timeline.cjs",
-      "types": "./components/Timeline/Timeline.d.ts"
-    },
-    "./components/Tabs": {
-      "import": "./components/Tabs/Tabs.js",
-      "require": "./components/Tabs/Tabs.cjs",
-      "types": "./components/Tabs/Tabs.d.ts"
-    },
-    "./components/Table": {
-      "import": "./components/Table/Table.js",
-      "require": "./components/Table/Table.cjs",
-      "types": "./components/Table/Table.d.ts"
-    },
-    "./components/Stepper": {
-      "import": "./components/Stepper/Stepper.js",
-      "require": "./components/Stepper/Stepper.cjs",
-      "types": "./components/Stepper/Stepper.d.ts"
-    },
-    "./components/StatusMessage": {
-      "import": "./components/StatusMessage/StatusMessage.js",
-      "require": "./components/StatusMessage/StatusMessage.cjs",
-      "types": "./components/StatusMessage/StatusMessage.d.ts"
-    },
-    "./components/Stat": {
-      "import": "./components/Stat/Stat.js",
-      "require": "./components/Stat/Stat.cjs",
-      "types": "./components/Stat/Stat.d.ts"
-    },
-    "./components/Select": {
-      "import": "./components/Select/Select.js",
-      "require": "./components/Select/Select.cjs",
-      "types": "./components/Select/Select.d.ts"
-    },
-    "./components/Modal": {
-      "import": "./components/Modal/Modal.js",
-      "require": "./components/Modal/Modal.cjs",
-      "types": "./components/Modal/Modal.d.ts"
-    },
-    "./components/MenuButton": {
-      "import": "./components/MenuButton/MenuButton.js",
-      "require": "./components/MenuButton/MenuButton.cjs",
-      "types": "./components/MenuButton/MenuButton.d.ts"
-    },
-    "./components/InputGroup": {
-      "import": "./components/InputGroup/InputGroup.js",
-      "require": "./components/InputGroup/InputGroup.cjs",
-      "types": "./components/InputGroup/InputGroup.d.ts"
-    },
-    "./components/Input": {
-      "import": "./components/Input/Input.js",
-      "require": "./components/Input/Input.cjs",
-      "types": "./components/Input/Input.d.ts"
-    },
-    "./components/Icon": {
-      "import": "./components/Icon/Icon.js",
-      "require": "./components/Icon/Icon.cjs",
-      "types": "./components/Icon/Icon.d.ts"
-    },
-    "./components/Gallery": {
-      "import": "./components/Gallery/Gallery.js",
-      "require": "./components/Gallery/Gallery.cjs",
-      "types": "./components/Gallery/Gallery.d.ts"
-    },
-    "./components/Flyout": {
-      "import": "./components/Flyout/Flyout.js",
-      "require": "./components/Flyout/Flyout.cjs",
-      "types": "./components/Flyout/Flyout.d.ts"
-    },
-    "./components/DateTimePicker": {
-      "import": "./components/DateTimePicker/DateTimePicker.js",
-      "require": "./components/DateTimePicker/DateTimePicker.cjs",
-      "types": "./components/DateTimePicker/DateTimePicker.d.ts"
-    },
-    "./components/DateRangePicker": {
-      "import": "./components/DateRangePicker/DateRangePicker.js",
-      "require": "./components/DateRangePicker/DateRangePicker.cjs",
-      "types": "./components/DateRangePicker/DateRangePicker.d.ts"
-    },
-    "./components/DatePicker": {
-      "import": "./components/DatePicker/DatePicker.js",
-      "require": "./components/DatePicker/DatePicker.cjs",
-      "types": "./components/DatePicker/DatePicker.d.ts"
-    },
-    "./components/Column": {
-      "import": "./components/Column/Column.js",
-      "require": "./components/Column/Column.cjs",
-      "types": "./components/Column/Column.d.ts"
-    },
-    "./components/Chip": {
-      "import": "./components/Chip/Chip.js",
-      "require": "./components/Chip/Chip.cjs",
-      "types": "./components/Chip/Chip.d.ts"
-    },
-    "./components/Card": {
-      "import": "./components/Card/Card.js",
-      "require": "./components/Card/Card.cjs",
-      "types": "./components/Card/Card.d.ts"
-    },
-    "./components/Button": {
-      "import": "./components/Button/Button.js",
-      "require": "./components/Button/Button.cjs",
-      "types": "./components/Button/Button.d.ts"
-    },
-    "./components/Avatar": {
-      "import": "./components/Avatar/Avatar.js",
-      "require": "./components/Avatar/Avatar.cjs",
-      "types": "./components/Avatar/Avatar.d.ts"
-    },
-    "./components/Autocomplete": {
-      "import": "./components/Autocomplete/Autocomplete.js",
-      "require": "./components/Autocomplete/Autocomplete.cjs",
-      "types": "./components/Autocomplete/Autocomplete.d.ts"
-    },
-    "./hooks/ClipBoard": {
-      "import": "./hooks/ClipBoard/ClipBoard.js",
-      "require": "./hooks/ClipBoard/ClipBoard.cjs",
-      "types": "./hooks/ClipBoard/ClipBoard.d.ts"
-    }
   }
 }

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);
+			}}
+    />
+  );
+};
+`;