@4byte/shared-lib 0.0.1

package/src/lib/components/byte-table/byte-table.stories.ts

@@ -0,0 +1,296 @@
+import {
+  applicationConfig,
+  moduleMetadata,
+  type Meta,
+  type StoryObj
+} from '@storybook/angular';
+
+import { ByteTable } from './byte-table';
+import { ByteTableModule } from './byte-table.module';
+
+import { provideEmpresaUI } from './../../providers/provide-empresa-ui';
+
+const meta: Meta<ByteTable> = {
+  title: 'Components/ByteTable',
+  component: ByteTable,
+
+  decorators: [
+    moduleMetadata({
+      imports: [
+        ByteTableModule
+      ]
+    }),
+
+    (story, context) =>
+      applicationConfig({
+        providers: [
+          provideEmpresaUI({
+            theme: context.globals['theme']
+          })
+        ]
+      })(story, context)
+  ],
+
+  tags: ['autodocs'],
+
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Componente de tabla reutilizable para listados, basado en PrimeNG y compatible con templates personalizados.'
+      }
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<ByteTable>;
+
+const ciudades = [
+  { name: 'Lima', code: 'LIM', poblacion: 9674755 },
+  { name: 'Arequipa', code: 'AQP', poblacion: 1080635 },
+  { name: 'Cusco', code: 'CUS', poblacion: 447588 },
+  { name: 'Trujillo', code: 'TRU', poblacion: 970736 },
+  { name: 'Piura', code: 'PIU', poblacion: 802067 }
+];
+
+const columnas = [
+  { field: 'name', header: 'Ciudad' },
+  { field: 'code', header: 'Código' },
+  { field: 'poblacion', header: 'Población' }
+];
+
+export const Normal: Story = {
+  render: (args) => ({
+    props: args,
+
+    template: `
+      <byte-table
+        [value]="value"
+        [columns]="columns"
+      >
+
+        <ng-template byteTableHeader let-columns>
+          <tr>
+            @for (col of columns; track col.field) {
+              <th>{{ col.header }}</th>
+            }
+          </tr>
+        </ng-template>
+
+        <ng-template byteTableBody let-rowData let-columns="columns">
+          <tr>
+            <td>{{ rowData.name }}</td>
+            <td>{{ rowData.code }}</td>
+            <td>{{ rowData.poblacion }}</td>
+            <!--@for (col of columns; track col.field) {
+              <td>{{ rowData[col.field] }}</td>
+            }-->
+          </tr>
+        </ng-template>
+
+      </byte-table>
+    `
+  }),
+
+  args: {
+    value: ciudades,
+    columns: columnas
+  }
+};
+
+export const Pagination: Story = {
+  render: (args) => ({
+    props: args,
+
+    template: `
+      <byte-table
+        [value]="value"
+        [columns]="columns"
+        [paginator]="paginator"
+        [rows]="rows"
+        [rowsPerPageOptions]="rowsPerPageOptions"
+      >
+
+        <ng-template byteTableHeader let-columns>
+          <tr>
+            @for (col of columns; track col.field) {
+              <th>{{ col.header }}</th>
+            }
+          </tr>
+        </ng-template>
+
+        <ng-template byteTableBody let-rowData let-columns="columns">
+          <tr>
+            @for (col of columns; track col.field) {
+              <td>{{ rowData[col.field] }}</td>
+            }
+          </tr>
+        </ng-template>
+
+      </byte-table>
+    `
+  }),
+
+  args: {
+    value: ciudades,
+    columns: columnas,
+    paginator: true,
+    rows: 2,
+    rowsPerPageOptions: [2, 5, 10]
+  }
+};
+
+export const Selection: Story = {
+  render: (args) => ({
+    props: args,
+
+    template: `
+      <byte-table
+        [value]="value"
+        [columns]="columns"
+        [selectionMode]="selectionMode"
+        [(ngModel)]="selection"
+      >
+
+        <ng-template byteTableHeader let-columns>
+          <tr>
+            <th style="width: 3rem"></th>
+            @for (col of columns; track col.field) {
+              <th>{{ col.header }}</th>
+            }
+          </tr>
+        </ng-template>
+
+        <ng-template byteTableBody let-rowData let-columns="columns">
+          <tr>
+            <td>
+              <p-tableCheckbox [value]="rowData" />
+            </td>
+            @for (col of columns; track col.field) {
+              <td>{{ rowData[col.field] }}</td>
+            }
+          </tr>
+        </ng-template>
+
+      </byte-table>
+    `
+  }),
+
+  args: {
+    value: ciudades,
+    columns: columnas,
+    selectionMode: 'multiple'
+  }
+};
+
+export const CustomBody: Story = {
+  render: (args) => ({
+    props: args,
+
+    template: `
+      <byte-table
+        [value]="value"
+        [columns]="columns"
+      >
+
+        <ng-template byteTableHeader let-columns>
+          <tr>
+            @for (col of columns; track col.field) {
+              <th>{{ col.header }}</th>
+            }
+          </tr>
+        </ng-template>
+
+        <ng-template byteTableBody let-rowData let-columns="columns">
+          <tr>
+            @for (col of columns; track col.field) {
+              <td>
+                @if (col.field === 'poblacion') {
+                  <strong>{{ rowData[col.field] | number }}</strong>
+                } @else {
+                  {{ rowData[col.field] }}
+                }
+              </td>
+            }
+          </tr>
+        </ng-template>
+
+      </byte-table>
+    `
+  }),
+
+  args: {
+    value: ciudades,
+    columns: columnas
+  }
+};
+
+export const AllTemplates: Story = {
+  render: (args) => ({
+    props: args,
+
+    template: `
+      <byte-table
+        [value]="value"
+        [columns]="columns"
+        [paginator]="paginator"
+        [rows]="rows"
+      >
+
+        <ng-template byteTableCaption>
+          <div style="font-weight: bold;">
+            Ciudades del Perú
+          </div>
+        </ng-template>
+
+        <ng-template byteTableHeader let-columns>
+          <tr>
+            @for (col of columns; track col.field) {
+              <th>{{ col.header }}</th>
+            }
+          </tr>
+        </ng-template>
+
+        <ng-template byteTableBody let-rowData let-columns="columns">
+          <tr>
+            @for (col of columns; track col.field) {
+              <td>{{ rowData[col.field] }}</td>
+            }
+          </tr>
+        </ng-template>
+
+        <ng-template byteTableFooter let-columns>
+          <tr>
+            <td [attr.colspan]="columns.length">
+              Total: {{ value.length }} ciudades
+            </td>
+          </tr>
+        </ng-template>
+
+        <ng-template byteTableEmptyMessage>
+          <tr>
+            <td colspan="3">
+              No hay ciudades disponibles
+            </td>
+          </tr>
+        </ng-template>
+
+        <ng-template byteTableSummary>
+          <div>
+            {{ value.length }} registros en total
+          </div>
+        </ng-template>
+
+      </byte-table>
+    `
+  }),
+
+  args: {
+    value: ciudades,
+    columns: columnas,
+    paginator: true,
+    rows: 3
+  }
+};

package/src/lib/components/byte-table/byte-table.ts

@@ -0,0 +1,162 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  forwardRef,
+  Input
+} from '@angular/core';
+
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { TableModule } from 'primeng/table';
+import { NgTemplateOutlet } from '@angular/common';
+
+import {
+  ByteTableCaptionDirective,
+  ByteTableHeaderDirective,
+  ByteTableBodyDirective,
+  ByteTableFooterDirective,
+  ByteTableEmptyMessageDirective,
+  ByteTableSummaryDirective
+} from './byte-table.directive';
+
+
+@Component({
+  selector: 'byte-table',
+
+  imports: [
+    TableModule,
+
+    NgTemplateOutlet,
+
+    ByteTableCaptionDirective,
+    ByteTableHeaderDirective,
+    ByteTableBodyDirective,
+    ByteTableFooterDirective,
+    ByteTableEmptyMessageDirective,
+    ByteTableSummaryDirective
+  ],
+
+  templateUrl: './byte-table.html',
+
+  styleUrl: './byte-table.css',
+
+  changeDetection: ChangeDetectionStrategy.OnPush,
+
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ByteTable),
+      multi: true
+    }
+  ]
+})
+export class ByteTable {
+
+  // =====================================================
+  // INPUTS
+  // =====================================================
+
+  @Input()
+  value: any[] = [];
+
+  @Input()
+  columns: any[] = [];
+
+  @Input()
+  paginator = false;
+
+  @Input()
+  rows = 10;
+
+  @Input()
+  rowsPerPageOptions: number[] = [10, 25, 50];
+
+  @Input()
+  loading = false;
+
+  @Input()
+  sortField = '';
+
+  @Input()
+  sortOrder = 1;
+
+  @Input()
+  selectionMode: 'single' | 'multiple' | null = null;
+
+  @Input()
+  dataKey = '';
+
+  @Input()
+  scrollable = false;
+
+  @Input()
+  tableStyle: { [klass: string]: any } | null = null;
+
+
+  // =====================================================
+  // CUSTOM TEMPLATES
+  // =====================================================
+
+  @ContentChild(ByteTableCaptionDirective)
+  captionTemplate?: ByteTableCaptionDirective;
+
+  @ContentChild(ByteTableHeaderDirective)
+  headerTemplate?: ByteTableHeaderDirective;
+
+  @ContentChild(ByteTableBodyDirective)
+  bodyTemplate?: ByteTableBodyDirective;
+
+  @ContentChild(ByteTableFooterDirective)
+  footerTemplate?: ByteTableFooterDirective;
+
+  @ContentChild(ByteTableEmptyMessageDirective)
+  emptyMessageTemplate?: ByteTableEmptyMessageDirective;
+
+  @ContentChild(ByteTableSummaryDirective)
+  summaryTemplate?: ByteTableSummaryDirective;
+
+
+  // =====================================================
+  // SELECTION (CVA)
+  // =====================================================
+
+  selection: any = null;
+
+  private onChange: (value: any) => void = () => {};
+
+  private onTouched: () => void = () => {};
+
+
+  writeValue(value: any): void {
+    this.selection = value;
+  }
+
+
+  registerOnChange(fn: (value: any) => void): void {
+    this.onChange = fn;
+  }
+
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+
+  setDisabledState(isDisabled: boolean): void {
+    // p-table no tiene un "disabled" nativo global; se puede usar
+    // para deshabilitar selección si lo necesitas más adelante.
+  }
+
+
+  onSelectionChange(value: any): void {
+
+    this.selection = value;
+
+    this.onChange(value);
+
+    this.onTouched();
+
+  }
+
+}

package/src/lib/components/calendar/calendar.css

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+:host ::ng-deep .p-inputtext,
+:host ::ng-deep .p-inputnumber,
+:host ::ng-deep .p-textarea,
+:host ::ng-deep .p-datepicker,
+:host ::ng-deep .p-select {
+  width: 100%;
+}
+
+:host ::ng-deep .p-inputnumber-input {
+  width: 100%;
+}

package/src/lib/components/calendar/calendar.html

@@ -0,0 +1,15 @@
+<p-datepicker
+  [(ngModel)]="value"
+  [dateFormat]="dateFormat"
+  [placeholder]="placeholder"
+  [showIcon]="showIcon"
+  [disabled]="disabled"
+  [minDate]="minDate"
+  [maxDate]="maxDate"
+  [readonlyInput]="readonlyInput"
+  [showClear]="showClear"
+  [inputId]="inputId"
+  [name]="name"
+  (ngModelChange)="onValueChange($event)"
+  appendTo="body"
+/>

package/src/lib/components/calendar/calendar.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Calendar } from './calendar';
+
+describe('Calendar', () => {
+  let component: Calendar;
+  let fixture: ComponentFixture<Calendar>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Calendar],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Calendar);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/calendar/calendar.stories.ts

@@ -0,0 +1,153 @@
+import { applicationConfig, type Meta, type StoryObj } from '@storybook/angular';
+
+import { Calendar } from './calendar';
+import { provideEmpresaUI } from './../../providers/provide-empresa-ui';
+
+const meta: Meta<Calendar> = {
+  title: 'Components/ByteCalendar',
+  component: Calendar,
+
+  decorators: [
+    (story, context) =>
+      applicationConfig({
+        providers: [
+          provideEmpresaUI({
+            theme: context.globals['theme'],
+          }),
+        ],
+      })(story, context),
+  ],
+
+  tags: ['autodocs'],
+
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Componente de calendario reutilizable basado en PrimeNG. Compatible con formularios mediante ControlValueAccessor.',
+      },
+    },
+  },
+
+  argTypes: {
+    dateFormat: {
+      control: 'text',
+      description: 'Formato utilizado para mostrar la fecha.',
+      table: {
+        defaultValue: { summary: 'dd/mm/yy' },
+      },
+    },
+
+    placeholder: {
+      control: 'text',
+      description: 'Texto mostrado cuando no se ha seleccionado una fecha.',
+      table: {
+        defaultValue: { summary: 'dd/mm/yyyy' },
+      },
+    },
+
+    showIcon: {
+      control: 'boolean',
+      description: 'Muestra u oculta el icono del calendario.',
+    },
+
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilita el calendario.',
+    },
+
+    minDate: {
+      control: 'date',
+      description: 'Fecha mínima que puede seleccionarse.',
+    },
+
+    maxDate: {
+      control: 'date',
+      description: 'Fecha máxima que puede seleccionarse.',
+    },
+
+    readonlyInput: {
+      control: 'boolean',
+      description: 'Impide escribir directamente en el input.',
+    },
+
+    showClear: {
+      control: 'boolean',
+      description: 'Muestra el botón para limpiar la fecha.',
+    },
+
+    inputId: {
+      control: 'text',
+      description: 'Identificador del input.',
+    },
+
+    name: {
+      control: 'text',
+      description: 'Nombre del campo.',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<Calendar>;
+
+export const Default: Story = {
+  args: {
+    dateFormat: 'dd/mm/yy',
+    placeholder: 'dd/mm/yyyy',
+    showIcon: true,
+    disabled: false,
+    readonlyInput: false,
+    showClear: false,
+  },
+};
+
+export const WithDate: Story = {
+  args: {
+    dateFormat: 'dd/mm/yy',
+    placeholder: 'dd/mm/yyyy',
+    showIcon: true,
+    value: new Date(),
+  },
+};
+
+export const WithoutIcon: Story = {
+  args: {
+    placeholder: 'Seleccione una fecha',
+    showIcon: false,
+  },
+};
+
+export const WithClear: Story = {
+  args: {
+    placeholder: 'Seleccione una fecha',
+    showIcon: true,
+    showClear: true,
+  },
+};
+
+export const Readonly: Story = {
+  args: {
+    placeholder: 'Seleccione una fecha',
+    showIcon: true,
+    readonlyInput: false,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Seleccione una fecha',
+    showIcon: true,
+    disabled: true,
+  },
+};
+
+export const DateRange: Story = {
+  args: {
+    placeholder: 'Seleccione una fecha',
+    showIcon: true,
+    minDate: new Date(2026, 0, 1),
+    maxDate: new Date(2026, 11, 31),
+  },
+};