@dropi/ui-components 1.0.0

package/src/components-source/radio-selection-list/radio-selection-list.component.stories.ts

@@ -0,0 +1,313 @@
+/**
+ * @fileoverview Radio Selection List component stories for Storybook
+ * @description A radio button list component with rich options including icons, tags, and descriptions
+ */
+import type { Meta, StoryFn, StoryObj } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+
+import { RadioSelectionListComponent } from './radio-selection-list.component';
+import { Option } from '@app/utilities/interfaces/ui/radio-selection-list.interface';
+
+const options: Option[] = [
+  {
+    id: 'Blue',
+    name: 'Blue',
+    description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.',
+  },
+  {
+    id: 'Red',
+    name: 'Red',
+  },
+  {
+    id: 'Green',
+    name: 'Green',
+    description:
+      'lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae. lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.',
+  },
+];
+
+let optionsWithIcons: Option[] = options.map((option) => ({ ...option }));
+
+optionsWithIcons[0].iconImages = [
+  {
+    url: 'img/payment-processors/pse.png',
+    alt: 'PSE',
+  },
+];
+
+optionsWithIcons[2].iconImages = [
+  {
+    url: 'img/payment-processors/paypal.svg',
+    alt: 'Paypal',
+  },
+];
+
+const NewLayoutOptions: Option[] = [
+  {
+    id: 'pse',
+    name: 'Recharge by PSE',
+    description: '',
+
+    iconImages: [
+      {
+        url: '/assets/img/payment-processors/pse.png',
+        alt: 'PSE',
+      },
+    ],
+  },
+  {
+    id: 'banks',
+    name: 'Banco',
+    description: 'Commission 17%',
+    iconImages: [
+      {
+        url: '/assets/img/payment-processors/tether.png',
+        alt: 'Tether',
+      },
+      {
+        url: '/assets/img/payment-processors/global-66.png',
+        alt: 'Global 66',
+      },
+    ],
+  },
+  {
+    id: 'paypal',
+    name: 'Banco',
+    description: 'Commission 17%',
+    halfWidth: true,
+    iconImages: [
+      {
+        url: '/assets/img/payment-processors/paypal.svg',
+        alt: 'Paypal',
+      },
+    ],
+  },
+  {
+    id: 'global',
+    name: 'Banco',
+    description: 'Commission 17%',
+    halfWidth: true,
+    iconImages: [
+      {
+        url: '/assets/img/payment-processors/global-66.png',
+        alt: 'Global 66',
+      },
+    ],
+  },
+  {
+    id: 'payoneer',
+    name: 'Banco',
+    description: 'Commission 17%',
+    halfWidth: true,
+    iconImages: [
+      {
+        url: '/assets/img/payment-processors/payoneer.png',
+        alt: 'Payoneer',
+      },
+    ],
+  },
+];
+
+const meta: Meta<RadioSelectionListComponent> = {
+  title: 'UI Dropi/Radio Selection List',
+  component: RadioSelectionListComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+# Radio Selection List Component
+
+A versatile radio button list with rich option support.
+
+## Key Features
+- **Icon support**: Options can include multiple icons/images
+- **Tags**: Highlight options with labels like "Hot", "New", "Discount"
+- **Tables**: Display additional data in table format within options
+- **Descriptions**: Show detailed descriptions for each option
+- **Half-width layout**: Compact display mode for options
+- **Extra content**: Inject custom content after selected options
+        `,
+      },
+    },
+  },
+  argTypes: {
+    options: {
+      description: 'Available options in the list',
+      control: 'object',
+      table: { category: 'Data' },
+    },
+    selectedOption: {
+      description: 'Currently selected option ID',
+      control: 'text',
+      table: { category: 'State' },
+    },
+    alwaysShowDescription: {
+      description: 'Show option description even when not selected',
+      control: 'boolean',
+      defaultValue: true,
+      table: { category: 'Display' },
+    },
+    typeLayout: {
+      description: 'Layout type for cards (default, description)',
+      control: 'text',
+      defaultValue: 'default',
+      table: { category: 'Display' },
+    },
+  },
+  args: {
+    valueChange: action('valueChange'),
+  },
+};
+
+export default meta;
+type Story = StoryObj<RadioSelectionListComponent>;
+
+export const ThreeOptions: Story = {
+  args: {
+    options,
+  },
+};
+
+export const SelectedOption: Story = {
+  args: {
+    options,
+    selectedOption: 'Blue',
+  },
+};
+
+export const AlwaysShowDescriptionInFalse: Story = {
+  args: {
+    options,
+    alwaysShowDescription: false,
+  },
+};
+
+export const WithIcons: Story = {
+  args: {
+    options: optionsWithIcons,
+  },
+};
+
+export const SelectedOptionWithIcons: Story = {
+  args: {
+    options: optionsWithIcons,
+    selectedOption: 'Green',
+  },
+};
+
+export const AlwaysShowDescriptionInFalseWithIcons: Story = {
+  args: {
+    options: optionsWithIcons,
+    alwaysShowDescription: false,
+  },
+};
+
+export const WithTags: Story = {
+  args: {
+    options: [
+      {
+        ...options[0],
+        tag: 'Discount',
+      },
+      {
+        ...options[1],
+        tag: 'Hot',
+      },
+      {
+        ...options[2],
+        tag: 'New',
+      },
+    ],
+  },
+};
+
+export const WithTableOptions: Story = {
+  args: {
+    options: [
+      {
+        ...options[0],
+        table: [
+          {
+            name: 'Price',
+            value: 'S/. 100.00',
+          },
+          {
+            name: 'Discount',
+            value: 'S/. 10.00',
+          },
+        ],
+      },
+      {
+        ...options[1],
+        table: [
+          {
+            name: 'Price',
+            value: 'S/. 100.00',
+          },
+          {
+            name: 'Discount',
+            value: 'S/. 10.00',
+          },
+          {
+            name: 'Stock',
+            value: 1000,
+          },
+        ],
+        tag: 'Hot sale',
+      },
+      {
+        ...options[2],
+      },
+    ],
+  },
+};
+
+export const WithFilterOptions: Story = {
+  args: {
+    options,
+    showFilter: true,
+  },
+};
+
+export const NewLayout: Story = {
+  args: {
+    options: NewLayoutOptions.slice(0, 2),
+
+    typeLayout: 'description',
+  },
+};
+
+export const halfWidth: Story = {
+  args: {
+    options: NewLayoutOptions.slice(2, 5),
+
+    typeLayout: 'description',
+  },
+};
+
+export const ConExtraContent: StoryFn<RadioSelectionListComponent> = () => ({
+  props: {
+    options: NewLayoutOptions,
+    selectedOption: 'pse',
+    withExtraContentId: 'pse',
+    alwaysShowDescription: false,
+    typeLayout: 'description',
+  },
+  template: `
+    <ng-template #extraInfo>
+      <div style="padding: 12px; background-color: #f4f4f4; border-radius: 4px; width: 100%;">
+        Información adicional después de la opcion PSE.
+      </div>
+    </ng-template>
+
+    <app-radio-selection-list
+      [options]="options"
+      [(selectedOption)]="selectedOption"
+      [extraContent]="extraInfo"
+      [withExtraContentId]="withExtraContentId"
+      [alwaysShowDescription]="alwaysShowDescription"
+      [typeLayout]="typeLayout"
+    ></app-radio-selection-list>
+  `,
+});

package/src/components-source/radio-selection-list/radio-selection-list.component.ts

@@ -0,0 +1,143 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  SimpleChanges,
+  TemplateRef,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+
+import { Subscription } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import {
+  Option,
+  RadioSelectionFilteredOptions,
+} from '@app/utilities/interfaces/ui/radio-selection-list.interface';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-radio-selection-list',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, ReactiveFormsModule],
+  templateUrl: './radio-selection-list.component.html',
+  styleUrls: ['./radio-selection-list.component.scss'],
+})
+/**
+ * Componente para mostrar una lista de opciones que se pueden seleccionar.
+ * Los botones de cada opción se renderizan con una imagen y un texto.
+ * Luego de seleccionar una opción, se emite un evento {@link valueChange} con el id de la opción seleccionada.
+ *
+ * @example
+ * <app-radio-selection-list
+ *   [options]="options"
+ *   (valueChange)="onValueChange($event)"
+ *   [alwaysShowDescription]="true"
+ *   [selectedOption]="'option-1'"
+ * ></app-radio-selection-list>
+ *
+ * @export
+ * @class RadioSelectionListComponent
+ */
+export class RadioSelectionListComponent implements OnInit {
+  @Input() extraContent: TemplateRef<any> | null = null;
+  @Input() withExtraContentId: string | null = null;
+  /**
+   * Opciones a mostrar en la lista.
+   * Cada opción debe tener un id, un nombre y opcionalmente una descripción y una lista de iconos.
+   * @type {Option[]}
+   */
+  @Input() options: Option[] = [];
+
+  /**
+   * Layout de la lista de opciones.
+   * Por defecto es 'default', acá se define si se muestra con las imagenes a la derecha o con una imagen a la izquierda.
+   * @type {'description'|'default'}
+   */
+  @Input() typeLayout: 'description' | 'default' = 'default';
+
+  /**
+   * Si se muestra la descripción de la opción aunque no está seleccionada.
+   * Por defecto es verdadero.
+   * @type {boolean}
+   */
+  @Input() alwaysShowDescription: boolean = true;
+
+  /**
+   * Id de la opción seleccionada.
+   * Por defecto es nulo.
+   * @type {string}
+   */
+  @Input() selectedOption?: string = null;
+
+  /**
+   * Permite mostrar u ocultar el campo de búsqueda
+   * @default true
+   */
+  @Input() showFilter: boolean = false;
+
+  /**
+   * Placeholder para el campo de búsqueda
+   */
+  @Input() filterPlaceholder: string = 'Search';
+
+  /**
+   * Tiempo de demora en milisegundos para realizar la búsqueda
+   */
+  @Input() searchDelay: number = 100;
+
+  /**
+   * Evento emitido cuando se selecciona una opción.
+   * El valor emitido es el id de la opción seleccionada.
+   * @type {EventEmitter<string>}
+   */
+  @Output() valueChange: EventEmitter<string> = new EventEmitter<string>();
+
+  /**
+   * Evento que se dispara al realizar una búsqueda (Se emite cuando se cambia el valor del input de búsqueda basado en @SearchDelay)
+   */
+  @Output() onSearch = new EventEmitter<RadioSelectionFilteredOptions>();
+
+  private readonly subscriptions: Subscription = new Subscription();
+  searchControl = new FormControl('');
+  filteredOptions: Option[] = [];
+
+  constructor(private readonly translateService: TranslateService) {}
+
+  ngOnInit() {
+    this.subscriptions.add(
+      this.searchControl.valueChanges.pipe(debounceTime(this.searchDelay)).subscribe((value) => {
+        this.filterOption(value);
+        this.onSearch.emit({
+          searchValue: value,
+          filteredOptions: this.filteredOptions,
+        });
+      }),
+    );
+
+    this.filteredOptions = this.options;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['options']) this.filteredOptions = this.options;
+  }
+
+  filterOption(optionName: string) {
+    if (!optionName?.trim()) this.filteredOptions = this.options;
+    this.filteredOptions = this.options.filter((o) =>
+      o.name.toLowerCase().includes(optionName.toLowerCase()),
+    );
+  }
+
+  /**
+   * Función que se ejecuta al seleccionar una opción.
+   * @param optionId Id de la opción seleccionada.
+   * @type {void}
+   */
+  selectOption(optionId: string): void {
+    this.selectedOption = optionId;
+    this.valueChange.emit(this.selectedOption);
+  }
+}

package/src/components-source/read-more/read-more.component.html

@@ -0,0 +1,14 @@
+<div class="description-container">
+  <p class="text" [style]="textStyle">
+    {{ truncatedText }}
+    <a
+      href="javascript:void(0);"
+      *ngIf="text?.split(' ')?.length > maxWords && (showSeeLess || !isExpanded)"
+      (click)="toggleExpanded()"
+      class="toggle-button"
+      [style]="buttonStyle"
+    >
+      {{ isExpanded ? 'Show less' : 'Show more' | translate }}
+    </a>
+  </p>
+</div>

package/src/components-source/read-more/read-more.component.scss

@@ -0,0 +1,16 @@
+.description-container {
+  font-family: Inter, sans-serif;
+}
+
+.text {
+  margin: 0px;
+}
+
+.toggle-button {
+  color: var(--Gray-gray-800, #585C65);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px;
+  cursor: pointer;
+}