@dropi/ui-components 1.0.0

package/src/components-source/city-selector/city-selector.component.stories.ts

@@ -0,0 +1,200 @@
+/**
+ * @fileoverview City Selector component stories for Storybook
+ * @description A grouped multi-select dropdown for city selection by state/region
+ */
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { HttpClientModule } from '@angular/common/http';
+import { CitySelectorComponent } from './city-selector.component';
+import { CityService } from '../../pages/service/city/city.service';
+import { Api } from 'src/app/services/api.service';
+import { AlertsService } from 'src/app/services/alerts.service';
+import { TranslateService, TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateStore } from '@ngx-translate/core';
+import { SettingsService } from 'src/app/services/setting.service';
+import { of } from 'rxjs';
+
+const mockTranslateLoader = {
+  getTranslation: () => of({}),
+};
+
+const meta: Meta<CitySelectorComponent> = {
+  title: 'UI Dropi/City Selector',
+  component: CitySelectorComponent,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+# City Selector Component
+
+A grouped multi-select dropdown for city selection organized by state/region.
+
+## Key Features
+- **Grouped options**: Cities organized by state/department
+- **Multi-select**: Select multiple cities at once
+- **Search/filter**: Filter cities by name
+- **Disabled state**: Can be disabled when needed
+        `,
+      },
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [
+        HttpClientModule,
+        TranslateModule.forRoot({
+          loader: { provide: TranslateLoader, useValue: mockTranslateLoader },
+        }),
+      ],
+      providers: [
+        CityService,
+        Api,
+        AlertsService,
+        TranslateService,
+        TranslateStore,
+        SettingsService,
+        {
+          provide: Api,
+          useValue: {
+            getCitiesByCountry: () => ({
+              subscribe: (callback: any) => {
+                callback({
+                  data: [
+                    {
+                      label: 'Cundinamarca',
+                      id_state: '1',
+                      items: [
+                        { label: 'Bogotá', id_city: '2' },
+                        { label: 'Zipaquirá', id_city: '3' },
+                        { label: 'Cota', id_city: '4' },
+                        { label: 'Chía', id_city: '5' },
+                        { label: 'Soacha', id_city: '6' },
+                        { label: 'Funza', id_city: '7' },
+                      ],
+                    },
+                    {
+                      label: 'Antioquia',
+                      id_state: '8',
+                      items: [
+                        { label: 'Medellín', id_city: '9' },
+                        { label: 'Envigado', id_city: '10' },
+                        { label: 'Bello', id_city: '11' },
+                        { label: 'Rionegro', id_city: '12' },
+                        { label: 'Itagüí', id_city: '13' },
+                        { label: 'Sabaneta', id_city: '14' },
+                      ],
+                    },
+                    // Agrega más datos según sea necesario
+                  ],
+                });
+              },
+            }),
+          },
+        },
+      ],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    selectedCities: {
+      control: 'object',
+      description: 'Array of currently selected cities',
+      table: { category: 'Data' },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the selector is disabled',
+      table: { category: 'State' },
+    },
+  },
+  args: {
+    groupedCities: [
+      {
+        label: 'Cundinamarca',
+        value: '1',
+        items: [
+          { label: 'Bogotá', value: '2' },
+          { label: 'Zipaquirá', value: '3' },
+          { label: 'Cota', value: '4' },
+          { label: 'Chía', value: '5' },
+          { label: 'Soacha', value: '6' },
+          { label: 'Funza', value: '7' },
+        ],
+      },
+      {
+        label: 'Antioquia',
+        value: '8',
+        items: [
+          { label: 'Medellín', value: '9' },
+          { label: 'Envigado', value: '10' },
+          { label: 'Bello', value: '11' },
+          { label: 'Rionegro', value: '12' },
+          { label: 'Itagüí', value: '13' },
+          { label: 'Sabaneta', value: '14' },
+        ],
+      },
+      {
+        label: 'Valle del Cauca',
+        value: '15',
+        items: [
+          { label: 'Cali', value: '16' },
+          { label: 'Palmira', value: '17' },
+          { label: 'Buenaventura', value: '18' },
+          { label: 'Tuluá', value: '19' },
+          { label: 'Jamundí', value: '20' },
+          { label: 'Cartago', value: '21' },
+        ],
+      },
+      {
+        label: 'Atlántico',
+        value: '22',
+        items: [
+          { label: 'Barranquilla', value: '23' },
+          { label: 'Soledad', value: '24' },
+          { label: 'Malambo', value: '25' },
+          { label: 'Puerto Colombia', value: '26' },
+          { label: 'Galapa', value: '27' },
+        ],
+      },
+      {
+        label: 'Santander',
+        value: '28',
+        items: [
+          { label: 'Bucaramanga', value: '29' },
+          { label: 'Floridablanca', value: '30' },
+          { label: 'Piedecuesta', value: '31' },
+          { label: 'Girón', value: '32' },
+          { label: 'Barrancabermeja', value: '33' },
+        ],
+      },
+    ],
+    disabled: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<CitySelectorComponent>;
+
+export const Default: Story = {
+  args: {
+    selectedCities: [],
+  },
+};
+
+export const WithSelection: Story = {
+  args: {
+    selectedCities: [
+      { label: 'Bogotá', value: '2' },
+      { label: 'Cali', value: '16' },
+    ],
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    selectedCities: [],
+    disabled: true,
+  },
+};

package/src/components-source/city-selector/city-selector.component.ts

@@ -0,0 +1,151 @@
+import { Component, Input, Output, EventEmitter, OnInit, NO_ERRORS_SCHEMA } from '@angular/core';
+import { SelectItemGroup, SharedModule } from 'primeng/api';
+import { CityService } from '../../pages/service/city/city.service';
+import { CacheService } from '../../services/cache.service';
+import { Subscription } from 'rxjs';
+import { FormsModule } from '@angular/forms';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { TranslateModule } from '@ngx-translate/core';
+
+interface GroupedCities {
+  label: string;
+  value: string;
+  items: City[];
+}
+
+interface City {
+  label: string;
+  value: number;
+}
+
+@Component({
+  selector: 'dropi-city-selector',
+  templateUrl: './city-selector.component.html',
+  styleUrls: ['./city-selector.component.scss'],
+  standalone: true,
+  imports: [MultiSelectModule, FormsModule, SharedModule, TranslateModule],
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class CitySelectorComponent implements OnInit {
+  @Input() selectedCities!: any[];
+  @Input() disabled: boolean = false;
+
+  @Output() selectedCitiesChange = new EventEmitter<any>();
+
+  groupedCities!: SelectItemGroup[];
+  country: string = '';
+
+  private subscription: Subscription;
+  private localStorageKey = 'groupedCities';
+  private allCities: any[] = []; // Almacena todas las ciudades
+  private chunkSize = 100; // Tamaño del chunk para la carga diferida
+
+  constructor(
+    private cityService: CityService,
+    private cacheService: CacheService,
+  ) {}
+
+  ngOnInit() {
+    console.log(this.disabled);
+
+    const country = JSON.parse(localStorage.getItem('DROPI_configurations'))[0].country || '';
+    if (country) {
+      this.country = country;
+    }
+    if (!this.selectedCities) {
+      this.selectedCities = [];
+    } else {
+      this.selectedCities =
+        this.selectedCities.map((city: any) => city.value) || this.selectedCities;
+    }
+
+    // Verificar caché por dominio primero
+    const domain = window.location.hostname;
+    const cacheKey = `grouped-cities-${domain}`;
+    const cachedCities = this.cacheService.get<any[]>(cacheKey);
+
+    if (cachedCities) {
+      console.log('🔄 Usando ciudades desde caché para dominio:', domain);
+      this.allCities = cachedCities;
+      this.groupedCities = this.allCities.slice(0, this.chunkSize);
+      return;
+    }
+
+    // Fallback a localStorage si no hay caché por dominio
+    const storedCities = localStorage.getItem(this.localStorageKey);
+    if (storedCities) {
+      this.allCities = JSON.parse(storedCities);
+      this.groupedCities = this.allCities.slice(0, this.chunkSize);
+    } else {
+      this.fetchCitiesFromAPI();
+    }
+  }
+
+  fetchCitiesFromAPI() {
+    //console.log('Fetching cities from API for country:', this.country);
+    this.subscription = this.cityService.getCitiesByCountry({ country: this.country }).subscribe(
+      (res: any) => {
+        if (!res.data) return;
+
+        let response = res.data;
+        console.log('State response', response);
+
+        const capitalize = (str: string) => {
+          return str
+            .toLowerCase()
+            .replace(/\b\w/g, (char) => char.toUpperCase())
+            .replace(/\s*\(.*?\)\s*/g, ''); // Eliminar texto entre paréntesis
+        };
+
+        if (Array.isArray(response)) {
+          this.allCities = response.map((state: any) => {
+            return {
+              label: capitalize(state.label),
+              value: state.id_state.toString(),
+              items: state.items
+                ? state.items.map((city: any) => {
+                    return {
+                      label: capitalize(city.label),
+                      value: city.id_city.toString(),
+                    };
+                  })
+                : [],
+            };
+          });
+
+          this.groupedCities = this.allCities.slice(0, this.chunkSize); // Carga inicial
+
+          // Guardar en localStorage (fallback)
+          localStorage.setItem(this.localStorageKey, JSON.stringify(this.allCities));
+
+          // Guardar en caché por dominio (6 horas)
+          const domain = window.location.hostname;
+          const cacheKey = `grouped-cities-${domain}`;
+          this.cacheService.set(cacheKey, this.allCities, 6 * 60 * 60 * 1000);
+          console.log('💾 Guardando ciudades en caché para dominio:', domain);
+        } else {
+          console.error('Response is not an array:', response);
+        }
+      },
+      (error: any) => {
+        console.error('❌ Error fetching cities:', error);
+      },
+    );
+  }
+
+  loadCities(event: any) {
+    // Cargar más datos cuando se desplaza
+    const { first, last } = event;
+    if (last > this.groupedCities.length) {
+      const moreCities = this.allCities.slice(
+        this.groupedCities.length,
+        this.groupedCities.length + this.chunkSize,
+      );
+      this.groupedCities = [...this.groupedCities, ...moreCities];
+    }
+  }
+
+  onSelectCityChange(event: any) {
+    this.selectedCitiesChange.emit(event);
+  }
+}

package/src/components-source/color-picker/color-picker.component.html

@@ -0,0 +1,54 @@
+<div class="general-container" #colorPicker>
+  <div class="main-input-container">
+    <div class="overlay" (click)="showEditor()"></div>
+    <div class="line-color-preview">
+      <div class="color-preview" [style.background]="currentColor"></div>
+    </div>
+    <div class="color-info">
+      <input type="text" class="color-input" [ngModel]="currentColor" maxlength="9" />
+    </div>
+  </div>
+
+  <div class="color-picker-container position-{{position}}" [ngClass]="{ show: showEdit }">
+    <div class="main-color-canvas-container">
+      <canvas #colorCanvas width="256" height="150" (mousedown)="onColorMouseDown($event)"></canvas>
+      <div
+        class="color-selector-pointer"
+        [style.left]="(saturation / 100) * 256 + 'px'"
+        [style.top]="((100 - value) / 100) * 150 + 'px'"
+      ></div>
+    </div>
+
+    <div class="slider-container">
+      <div class="slider-group">
+        <div class="hue-slider-container">
+          <canvas #hueCanvas width="256" height="20" (mousedown)="onHueMouseDown($event)"></canvas>
+          <div class="slider-pointer" [style.left]="(hue / 360) * 234 + 'px'"></div>
+        </div>
+      </div>
+
+      <div class="slider-group">
+        <div class="opacity-slider-container">
+          <canvas
+            #opacityCanvas
+            width="256"
+            height="20"
+            (mousedown)="onOpacityMouseDown($event)"
+          ></canvas>
+          <div class="slider-pointer" [style.left]="(opacity / 100) * 234 + 'px'"></div>
+        </div>
+      </div>
+
+      <div class="color-info">
+        <div class="color-label">HEX</div>
+        <input
+          type="text"
+          class="color-input"
+          [(ngModel)]="color"
+          (ngModelChange)="onHexInputChange()"
+          maxlength="9"
+        />
+      </div>
+    </div>
+  </div>
+</div>

package/src/components-source/color-picker/color-picker.component.scss

@@ -0,0 +1,203 @@
+.general-container {
+  position: relative;
+  width: fit-content;
+}
+
+.main-input-container {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--Size-3);
+  position: relative;
+  width: fit-content;
+
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    cursor: pointer;
+  }
+}
+
+.line-color-preview {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid var(--Gray-Gray-200);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+
+  .color-preview {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 1px solid var(--Gray-Gray-200);
+  }
+}
+
+.position-right {
+  top: 0;
+  left: 250px;
+}
+
+.position-left {
+  top: 0;
+  right: 200px;
+}
+
+.position-top {
+  bottom: 55px;
+}
+
+.position-bottom {
+  top: 55px;
+}
+
+.position-bottom::before {
+  transform: rotate(90deg);
+  left: 50%;
+  top: -15px;
+}
+
+.position-right::before {
+  left: -6px;
+  top: 10px;
+}
+
+.position-top::before {
+  transform: rotate(270deg);
+  left: 50%;
+  bottom: -15px;
+}
+
+.position-left::before {
+  transform: rotate(180deg);
+  right: -9px;
+}
+
+.color-picker-container::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-right: 10px solid var(--Neutral-White);
+  z-index: 1;
+}
+
+.color-picker-container {
+  width: 280px;
+  padding: var(--Size-4);
+  background: var(--Neutral-White);
+  border-radius: var(--Size-2);
+  box-shadow: var(--Shadow-large);
+  position: absolute;
+  z-index: 100;
+  transform-origin: top left;
+  opacity: 0;
+  transition:
+    transform 0.2s ease-out,
+    opacity 0.2s ease-out;
+  pointer-events: none;
+
+  .main-color-canvas-container {
+    position: relative;
+    margin-bottom: var(--Size-4);
+    border: 1px solid var(--Gray-Gray-200);
+    border-radius: var(--Size-1);
+    display: flex;
+    justify-self: center;
+    align-items: center;
+
+    canvas {
+      display: block;
+      border-radius: var(--Size-1);
+    }
+
+    .color-selector-pointer {
+      position: absolute;
+      width: var(--Size-3);
+      height: var(--Size-3);
+      border: 2px solid var(--Neutral-White);
+      border-radius: 50%;
+      transform: translate(-6px, -6px);
+      pointer-events: none;
+    }
+  }
+
+  .slider-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--Size-3);
+
+    .slider-group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--Size-1);
+
+      label {
+        font-size: var(--font-size-xs);
+        color: var(--Gray-Gray-500);
+        font-weight: bold;
+      }
+
+      .hue-slider-container,
+      .opacity-slider-container {
+        position: relative;
+        height: var(--Size-3);
+        border-radius: var(--Size-4);
+        overflow: hidden;
+
+        canvas {
+          display: block;
+          width: 100%;
+          height: 100%;
+        }
+
+        .slider-pointer {
+          position: absolute;
+          top: 0;
+          height: var(--Size-3);
+          width: var(--Size-3);
+          background: transparent;
+          border: 2px solid var(--Neutral-White);
+          border-radius: 50%;
+          pointer-events: none;
+        }
+      }
+    }
+  }
+}
+
+.color-picker-container.show {
+  transform: scale(1);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.color-info {
+  .color-label {
+    font-size: var(--font-size-xs);
+    color: var(--Gray-Gray-500);
+    font-weight: bold;
+    text-transform: uppercase;
+    margin-bottom: var(--Size-2);
+  }
+
+  .color-input {
+    border: 1px solid #ddd;
+    border-radius: var(--Size-1);
+    padding: 6px 8px;
+    font-size: var(--font-size-s);
+    width: 100%;
+    font-family: monospace;
+    text-transform: uppercase;
+  }
+}