@i-rent/component-library 0.0.1

package/nuxt.ts

@@ -0,0 +1,30 @@
+import { defineNuxtModule, addComponent } from '@nuxt/kit'
+import { fileURLToPath } from 'node:url'
+import { dirname, resolve } from 'node:path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+export default defineNuxtModule({
+  meta: {
+    name: 'component-library',
+    configKey: 'componentLibrary'
+  },
+  setup() {
+    const bundlePath = resolve(__dirname, './dist/component-library.js')
+    const components: Array<{ name: string; export: string }> = [
+      { name: 'IButton', export: 'IButton' },
+      { name: 'ICalendar', export: 'ICalendar' },
+      { name: 'IOccupancyCalendar', export: 'IOccupancyCalendar' },
+      { name: 'IDatePicker', export: 'IDatePicker' },
+      { name: 'IIcon', export: 'IIcon' },
+      { name: 'ITooltip', export: 'ITooltip' },
+      { name: 'IInput', export: 'IInput' },
+      { name: 'IMap', export: 'IMap' },
+      { name: 'ICard', export: 'ICard' },
+    ]
+    components.forEach(({ name, export: exportName }) => {
+      addComponent({ name, filePath: bundlePath, export: exportName })
+    })
+  }
+})

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@i-rent/component-library",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "engines": {
+    "node": ">=18",
+    "pnpm": ">=9"
+  },
+  "files": [
+    "dist",
+    "nuxt.ts",
+    "src/scss"
+  ],
+  "main": "./dist/component-library.umd.cjs",
+  "module": "./dist/component-library.js",
+  "exports": {
+    ".": {
+      "import": "./dist/component-library.js",
+      "require": "./dist/component-library.umd.cjs"
+    },
+    "./nuxt": "./nuxt.ts",
+    "./scss/variables": {
+      "sass": "./src/scss/_variables.scss"
+    },
+    "./scss/main": {
+      "sass": "./src/scss/main.scss"
+    },
+    "./scss/*": {
+      "sass": "./src/scss/*"
+    }
+  },
+  "dependencies": {
+    "supercluster": "^8.0.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.2.1",
+    "@googlemaps/js-api-loader": "^1.16.8",
+    "@nuxt/kit": "^3.0.0 || ^4.0.0",
+    "@playwright/test": "^1.59.1",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/addon-onboarding": "10.4.6",
+    "@storybook/addon-themes": "10.4.6",
+    "@storybook/vue3-vite": "10.4.6",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/vue": "^8.1.0",
+    "@tsconfig/node22": "^22.0.0",
+    "@types/google.maps": "^3.58.1",
+    "@types/node": "^22.9.3",
+    "@types/supercluster": "^7.1.3",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/coverage-v8": "^4.1.5",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.1.3",
+    "@vue/test-utils": "^2.4.8",
+    "@vue/tsconfig": "^0.7.0",
+    "autoprefixer": "^10.4.20",
+    "baseline-browser-mapping": "^2.9.12",
+    "cross-env": "^10.1.0",
+    "date-fns": "^4.1.0",
+    "eslint": "^9.14.0",
+    "eslint-plugin-storybook": "10.4.6",
+    "eslint-plugin-vue": "^9.30.0",
+    "happy-dom": "^20.9.0",
+    "postcss": "^8.4.49",
+    "prettier": "^3.3.3",
+    "sass": "^1.83.0",
+    "storybook": "10.4.6",
+    "typescript": "~5.6.3",
+    "vite": "^6.0.1",
+    "vite-plugin-vue-devtools": "^7.6.5",
+    "vitest": "^4.1.5",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.1.10"
+  },
+  "scripts": {
+    "prepare-corepack": "npm install -g corepack",
+    "install-pnpm": "corepack enable && corepack install && pnpm install",
+    "setup": "npm run prepare-corepack && npm run install-pnpm",
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "build:watch": "vite build --watch",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "coverage": "vitest run --coverage",
+    "storybook": "cross-env STORYBOOK=true storybook dev -p 6006",
+    "build-storybook": "cross-env STORYBOOK=true storybook build"
+  }
+}

package/src/scss/_colors.scss

@@ -0,0 +1,75 @@
+@use './variables' as *;
+
+:root,
+:host {
+  /*------------------------------------*/
+  // # Primary — la fuente de verdad vive en _themes.scss (deriva del tema
+  // activo vía --i-theme-h / --i-theme-s). Acá solo se derivan los tints/shades.
+  // Fallback #0786be por si _themes.scss no estuviera cargado.
+  /*------------------------------------*/
+  --i-theme-primary:           var(--i-theme-brand-40, #0786be);
+  --i-theme-primary-lighten-5: oklch(from var(--i-theme-primary) clamp(0, calc(l + 0.30), 1) c h);
+  --i-theme-primary-lighten-4: oklch(from var(--i-theme-primary) clamp(0, calc(l + 0.24), 1) c h);
+  --i-theme-primary-lighten-3: oklch(from var(--i-theme-primary) clamp(0, calc(l + 0.18), 1) c h);
+  --i-theme-primary-lighten-2: oklch(from var(--i-theme-primary) clamp(0, calc(l + 0.12), 1) c h);
+  --i-theme-primary-lighten-1: oklch(from var(--i-theme-primary) clamp(0, calc(l + 0.06), 1) c h);
+  --i-theme-primary-darken-1:  oklch(from var(--i-theme-primary) clamp(0, calc(l - 0.06), 1) c h);
+  --i-theme-primary-darken-2:  oklch(from var(--i-theme-primary) clamp(0, calc(l - 0.12), 1) c h);
+  --i-theme-primary-darken-3:  oklch(from var(--i-theme-primary) clamp(0, calc(l - 0.18), 1) c h);
+  --i-theme-primary-darken-4:  oklch(from var(--i-theme-primary) clamp(0, calc(l - 0.24), 1) c h);
+  // compat aliases
+  --i-theme-primary-light-2:   var(--i-theme-primary-lighten-2);
+  --i-theme-primary-light-1:   var(--i-theme-primary-lighten-1);
+  --i-theme-primary-dark-1:    var(--i-theme-primary-darken-1);
+  --i-theme-primary-dark-2:    var(--i-theme-primary-darken-2);
+  /*------------------------------------*/
+  // # Black
+  /*------------------------------------*/
+  --i-theme-black-light-2: #636069;
+  --i-theme-black-light-1: #514e56;
+  --i-theme-black: #3d3b40;
+  --i-theme-black-dark-1: #454349;
+  --i-theme-black-dark-2: #28272a;
+  /*------------------------------------*/
+  // # White
+  /*------------------------------------*/
+  --i-theme-white-dark-2: #bbb9c0;
+  --i-theme-white-dark-1: #dbdadd;
+  --i-theme-white: #efeef0;
+  --i-theme-white-light-1: #f7f7f8;
+  --i-theme-white-light-2: #fff;
+  /*------------------------------------*/
+  // # Status and Feedback
+  /*------------------------------------*/
+  --i-theme-success: #23c197;
+  --i-theme-warning: #ffc964;
+  --i-theme-error: #ff3838;
+  --i-theme-disabled: #a4abb6;
+  /*------------------------------------*/
+  // # Reservations types
+  /*------------------------------------*/
+  --i-theme-green: #8eda91;
+  --i-theme-grey: #7b7b7b;
+  --i-theme-orange: #ff8f20;
+  --i-theme-light-blue: #33c3fd;
+  --i-theme-teal: #04c8b0;
+  /*------------------------------------*/
+  // # Font Color
+  /*------------------------------------*/
+  --i-font-color: #28272a;
+  --i-font-color-shade: #3e3d3f;
+}
+
+:root[data-theme='dark'],
+:host([data-theme='dark']) {
+  --i-font-color: #f7f7f8;
+  --i-font-color-shade: #dededf;
+  /*------------------------------------*/
+  // # Reservations types
+  /*------------------------------------*/
+  --i-theme-green: #5eca62;
+  --i-theme-grey: #7b7b7b;
+  --i-theme-orange: #ff8f20;
+  --i-theme-light-blue: #33c3fd;
+  --i-theme-teal: #04c8b0;
+}

package/src/scss/_themes.scss

@@ -0,0 +1,69 @@
+// ============================================================================
+// Themes — sistema de marca por hue + saturation (mecánica del proyecto
+// webs_individuals_script, naming propio --i-theme-*).
+//
+// Cada tema setea SOLO dos tokens privados: --i-theme-h (hue) y --i-theme-s
+// (saturation). Toda la escala --i-theme-brand-* se re-deriva sola por cascada
+// con hsl(). Agregar un tema = 2 números.
+//
+// Selectores duales:
+//   :host([theme='X'])  → modo Web Component (shadow DOM)
+//   [theme='X']         → modo Vue normal (el atributo hereda a los hijos)
+//
+// Stops de lightness idénticos al origen (brand-40 = primary, brand-30 = hover).
+// ============================================================================
+
+// Hue/saturation base (default sky). Sólo acá: es el punto de partida heredable.
+:root,
+:host {
+  --i-theme-h: 191; // sky default
+  --i-theme-s: 100%;
+}
+
+// Escala derivada — declarada en :root, :host Y [theme].
+// CLAVE: una custom property que usa var() se resuelve en el elemento donde se
+// DECLARA, no donde se usa. Por eso la escala debe re-declararse en cada elemento
+// que pueda portar un `theme`, para que se re-derive con el hue/saturation LOCAL.
+// (En el origen esto es gratis porque el theme vive en el mismo :host que la escala.)
+:root,
+:host,
+[theme] {
+  // Escala de marca derivada — 95 (más claro) → 05 (más oscuro)
+  --i-theme-brand-95: hsl(var(--i-theme-h), var(--i-theme-s), 94%);
+  --i-theme-brand-90: hsl(var(--i-theme-h), var(--i-theme-s), 89%);
+  --i-theme-brand-80: hsl(var(--i-theme-h), var(--i-theme-s), 78%);
+  --i-theme-brand-70: hsl(var(--i-theme-h), var(--i-theme-s), 66%);
+  --i-theme-brand-60: hsl(var(--i-theme-h), var(--i-theme-s), 55%);
+  --i-theme-brand-50: hsl(var(--i-theme-h), var(--i-theme-s), 44%);
+  --i-theme-brand-40: hsl(var(--i-theme-h), var(--i-theme-s), 35%);
+  --i-theme-brand-30: hsl(var(--i-theme-h), var(--i-theme-s), 26%);
+  --i-theme-brand-20: hsl(var(--i-theme-h), var(--i-theme-s), 18%);
+  --i-theme-brand-10: hsl(var(--i-theme-h), var(--i-theme-s), 9%);
+  --i-theme-brand-05: hsl(var(--i-theme-h), var(--i-theme-s), 0%);
+
+  // Aliases de marca — fuente de verdad del primary (deriva del tema activo)
+  --i-theme-primary: var(--i-theme-brand-40);
+  --i-theme-primary-hover: var(--i-theme-brand-30);
+}
+
+// ── 19 temas nombrados (h/s portados de webs_individuals_script) ────────────
+:host([theme='aqua']),    [theme='aqua']    { --i-theme-h: 177; --i-theme-s: 73%; }
+:host([theme='beige']),   [theme='beige']   { --i-theme-h: 38;  --i-theme-s: 32%; }
+:host([theme='blue']),    [theme='blue']    { --i-theme-h: 219; --i-theme-s: 100%; }
+:host([theme='blueAf']),  [theme='blueAf']  { --i-theme-h: 196; --i-theme-s: 80%; }
+:host([theme='classic']), [theme='classic'] { --i-theme-h: 332; --i-theme-s: 79%; }
+:host([theme='crimson']), [theme='crimson'] { --i-theme-h: 349; --i-theme-s: 84%; }
+:host([theme='gold']),    [theme='gold']    { --i-theme-h: 50;  --i-theme-s: 34%; }
+:host([theme='green']),   [theme='green']   { --i-theme-h: 138; --i-theme-s: 40%; }
+:host([theme='green2']),  [theme='green2']  { --i-theme-h: 142; --i-theme-s: 75%; }
+:host([theme='grey']),    [theme='grey']    { --i-theme-h: 0;   --i-theme-s: 0%; }
+:host([theme='navy']),    [theme='navy']    { --i-theme-h: 218; --i-theme-s: 26%; }
+:host([theme='oldPink']), [theme='oldPink'] { --i-theme-h: 345; --i-theme-s: 50%; }
+:host([theme='orange']),  [theme='orange']  { --i-theme-h: 33;  --i-theme-s: 93%; }
+:host([theme='peach']),   [theme='peach']   { --i-theme-h: 29;  --i-theme-s: 94%; }
+:host([theme='pink']),    [theme='pink']    { --i-theme-h: 323; --i-theme-s: 97%; }
+:host([theme='purple']),  [theme='purple']  { --i-theme-h: 250; --i-theme-s: 77%; }
+:host([theme='red']),     [theme='red']     { --i-theme-h: 357; --i-theme-s: 88%; }
+:host([theme='sand']),    [theme='sand']    { --i-theme-h: 42;  --i-theme-s: 25%; }
+:host([theme='sky']),     [theme='sky']     { --i-theme-h: 191; --i-theme-s: 100%; }
+:host([theme='violet']),  [theme='violet']  { --i-theme-h: 300; --i-theme-s: 100%; }

package/src/scss/_typography.scss

@@ -0,0 +1,38 @@
+@use './variables' as *;
+
+/*------------------------------------*/
+// # Font Import (opcional, solo si se necesita)
+// El usuario puede importar el font manualmente o usar esta variable
+/*------------------------------------*/
+@if $i-font-import-url {
+  @import url($i-font-import-url);
+}
+
+/*------------------------------------*/
+// # Component Font Styles
+// Los fonts se aplican SOLO a los componentes de la librería
+// NO afectan el proyecto principal
+/*------------------------------------*/
+.i-btn,
+.i-input,
+.i-tooltip,
+.i-icon,
+.i-calendar,
+.i-calendar-occupancy,
+.i-date-picker {
+  font-family: $i-font-family;
+  font-size: $i-font-size;
+}
+
+/*------------------------------------*/
+// # Component Text Colors
+// Los colores de texto se aplican SOLO a los componentes
+/*------------------------------------*/
+.i-btn,
+.i-tooltip__label {
+  color: var(--i-font-color);
+}
+
+.i-input {
+  color: var(--i-font-color-shade);
+}

package/src/scss/_utilities.scss

@@ -0,0 +1,144 @@
+@use './variables' as *;
+
+/*------------------------------------*/
+// # 1. Ripple
+// # 2. Border radius
+/*------------------------------------*/
+
+/*------------------------------------*/
+// # 1. Ripple
+/*------------------------------------*/
+@if $i-ripple {
+  .i-ripple {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .i-ripple:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 5px;
+    height: 5px;
+    background-color: rgb(30, 30, 30, 0.08);
+    opacity: 0;
+    border-radius: 100%;
+  }
+
+  @keyframes i-ripple {
+    0% {
+      transform: scale(0, 0);
+      opacity: 1;
+    }
+    20% {
+      transform: scale(25, 25);
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      transform: scale(40, 40);
+    }
+  }
+
+  .i-ripple:focus:not(:active)::after {
+    animation: i-ripple 1s ease-out;
+  }
+  .i-ripple:active {
+    box-shadow: none;
+  }
+}
+
+/*------------------------------------*/
+// # 2. Borders radius
+/*------------------------------------*/
+@if $i-border-pill {
+  .i-border-pill {
+    border-radius: 999px;
+  }
+}
+
+@if $i-border-smooth {
+  .i-border-smooth {
+    border-radius: 0.5rem;
+  }
+}
+
+@if $i-border-elegant {
+  .i-border-elegant {
+    border-radius: 0.12rem;
+  }
+}
+
+/*------------------------------------*/
+// # 3. Scrollbar
+/*------------------------------------*/
+
+%scrollbar-base {
+  --scrollbar-size: 6px;
+  --scrollbar-padding: 1rem;
+  --scrollbar-radius: 999px;
+  --scrollbar-thumb-color: oklch(from var(--i-theme-primary, #0786be) l c h / 0.45);
+  --scrollbar-thumb-color-hover: oklch(from var(--i-theme-primary, #0786be) l c h / 0.70);
+
+  scrollbar-width: thin !important;
+  scrollbar-color: var(--scrollbar-thumb-color) transparent !important;
+
+  &::-webkit-scrollbar {
+    width: var(--scrollbar-size) !important;
+    height: var(--scrollbar-size) !important;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent !important;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb-color) !important;
+    border-radius: var(--scrollbar-radius) !important;
+    border: 2px solid transparent !important;
+    background-clip: content-box !important;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-color-hover) !important;
+  }
+}
+
+@if $i-scrollbar or $i-scrollbar-y or $i-scrollbar-x or $i-scrollbar-both {
+  @if $i-scrollbar {
+    .i-scrollbar {
+      @extend %scrollbar-base;
+      padding-inline-end: var(--scrollbar-padding) !important;
+    }
+  }
+
+  @if $i-scrollbar-y {
+    .i-scrollbar-y {
+      @extend %scrollbar-base;
+      overflow-y: auto !important;
+      overflow-x: hidden !important;
+      padding-inline-end: var(--scrollbar-padding) !important;
+    }
+  }
+
+  @if $i-scrollbar-x {
+    .i-scrollbar-x {
+      @extend %scrollbar-base;
+      overflow-x: auto !important;
+      overflow-y: hidden !important;
+      padding-inline-end: var(--scrollbar-padding) !important;
+      padding-block-end: var(--scrollbar-padding) !important;
+    }
+  }
+
+  @if $i-scrollbar-both {
+    .i-scrollbar-both {
+      @extend %scrollbar-base;
+      overflow-y: auto !important;
+      overflow-x: auto !important;
+      padding-inline-end: var(--scrollbar-padding) !important;
+      padding-block-end: var(--scrollbar-padding) !important;
+    }
+  }
+}

package/src/scss/_variables.scss

@@ -0,0 +1,84 @@
+/*------------------------------------*/
+// # Font Variables
+// Variables SASS para fonts (NO se aplican globalmente)
+/*------------------------------------*/
+$i-font-family: 'Roboto', sans-serif !default;
+$i-font-size: 16px !default;
+$i-font-import-url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap' !default;
+
+/*------------------------------------*/
+// # Utility Modifiers Variables
+// Controla qué modificadores están disponibles
+// 1 = habilitado, 0 o null = deshabilitado
+/*------------------------------------*/
+
+// Border radius modifiers
+$i-border-pill: 1 !default;
+$i-border-smooth: 1 !default;
+$i-border-elegant: 1 !default;
+
+// Ripple modifier
+$i-ripple: 1 !default;
+
+// Scrollbar modifiers
+$i-scrollbar: 1 !default;
+$i-scrollbar-y: 1 !default;
+$i-scrollbar-x: 1 !default;
+$i-scrollbar-both: 1 !default;
+
+// Colors
+$i-theme-black-light-2: #636069 !default;
+$i-theme-black-light-1: #514e56 !default;
+$i-theme-black: #3d3b40 !default;
+$i-theme-black-dark-1: #454349 !default;
+$i-theme-black-dark-2: #28272a !default;
+/*------------------------------------*/
+// # White
+/*------------------------------------*/
+$i-theme-white-dark-2: #bbb9c0 !default;
+$i-theme-white-dark-1: #dbdadd !default;
+$i-theme-white: #efeef0 !default;
+$i-theme-white-light-1: #f7f7f8 !default;
+$i-theme-white-light-2: #fff !default;
+/*------------------------------------*/
+// # Primary
+/*------------------------------------*/
+$i-theme-primary-light-2: #3dc1f3 !default;
+$i-theme-primary-light-1: #14aae3 !default;
+$i-theme-primary: #0786be !default;
+$i-theme-primary-dark-1: #076d9d !default;
+$i-theme-primary-dark-2: #0a5c82 !default;
+$i-theme-primary-rgb: 7 134 190 !default;
+/*------------------------------------*/
+// # Status and Feedback
+/*------------------------------------*/
+$i-theme-success: #23c197 !default;
+$i-theme-warning: #ffc964 !default;
+$i-theme-error: #ff3838 !default;
+$i-theme-disabled: #a4abb6 !default;
+/*------------------------------------*/
+// # Reservations types
+/*------------------------------------*/
+$i-theme-green: #8eda91 !default;
+$i-theme-grey: #7b7b7b !default;
+$i-theme-orange: #ff8f20 !default;
+$i-theme-light-blue: #33c3fd !default;
+$i-theme-teal: #04c8b0 !default;
+/*------------------------------------*/
+// # Font Color
+/*------------------------------------*/
+$i-font-color: #28272a !default;
+$i-font-color-shade: #3e3d3f !default;
+
+/*------------------------------------*/
+// # Component Modifiers (forwarded)
+// Modificadores de componentes expuestos para override
+/*------------------------------------*/
+@forward '../stories/i-button/_modifiers';
+@forward '../stories/i-calendar/_modifiers';
+@forward '../stories/i-occupancy-calendar/_modifiers';
+@forward '../stories/i-input/_modifiers';
+@forward '../stories/i-icon/_modifiers';
+@forward '../stories/i-tooltip/_modifiers';
+@forward '../stories/i-date-picker/_modifiers';
+@forward '../stories/i-map/_modifiers';

package/src/scss/main.scss

@@ -0,0 +1,5 @@
+@use './colors';
+@use './themes';
+@use './utilities';
+@use './variables';
+@use './typography';