@4byte/shared-lib 0.0.1 → 0.0.2

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

@@ -1,449 +0,0 @@
-import {
-  applicationConfig,
-  moduleMetadata,
-  type Meta,
-  type StoryObj
-} from '@storybook/angular';
-
-import { ByteButton } from './byte-button';
-import { ByteButtonModule } from './byte-button.module';
-
-import { provideEmpresaUI } from './../../providers/provide-empresa-ui';
-
-
-const meta: Meta<ByteButton> = {
-
-  title: 'Components/ByteButton',
-
-  component: ByteButton,
-
-  decorators: [
-
-    moduleMetadata({
-      imports: [
-        ByteButtonModule
-      ]
-    }),
-
-    (story, context) =>
-      applicationConfig({
-        providers: [
-          provideEmpresaUI({
-            theme: context.globals['theme']
-          })
-        ]
-      })(story, context)
-
-  ],
-
-  tags: ['autodocs'],
-
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Componente de botón reutilizable basado en PrimeNG, con soporte para iconos, variantes, estados y contenido personalizado.'
-      }
-    }
-  }
-
-};
-
-export default meta;
-
-type Story = StoryObj<ByteButton>;
-
-
-// =====================================================
-// NORMAL
-// =====================================================
-
-export const Normal: Story = {
-
-  args: {
-
-    label: 'Guardar',
-
-    icon: 'pi pi-save',
-
-    severity: 'success'
-
-  },
-
-};
-
-
-// =====================================================
-// SEVERITIES
-// =====================================================
-
-export const Severities: Story = {
-
-  render: (args) => ({
-
-    props: args,
-
-    template: `
-
-      <div
-        style="
-          display: flex;
-          gap: 1rem;
-          flex-wrap: wrap;
-        "
-      >
-
-        <byte-button
-          label="Primary"
-        />
-
-        <byte-button
-          label="Secondary"
-          severity="secondary"
-        />
-
-        <byte-button
-          label="Success"
-          severity="success"
-        />
-
-        <byte-button
-          label="Info"
-          severity="info"
-        />
-
-        <byte-button
-          label="Warn"
-          severity="warn"
-        />
-
-        <byte-button
-          label="Danger"
-          severity="danger"
-        />
-
-        <byte-button
-          label="Contrast"
-          severity="contrast"
-        />
-
-      </div>
-
-    `
-
-  })
-
-};
-
-
-// =====================================================
-// ICON
-// =====================================================
-
-/* export const Icon: Story = {
-
-  args: {
-
-    label: 'Guardar',
-
-    icon: 'pi pi-save',
-
-    severity: 'success'
-
-  }
-
-}; */
-
-
-// =====================================================
-// ICON ONLY
-// =====================================================
-
-export const IconOnly: Story = {
-
-  args: {
-
-    icon: 'pi pi-trash',
-
-    severity: 'danger',
-
-    rounded: true
-
-  }
-
-};
-
-
-// =====================================================
-// VARIANTS
-// =====================================================
-
-export const Variants: Story = {
-
-  render: (args) => ({
-
-    props: args,
-
-    template: `
-
-      <div
-        style="
-          display: flex;
-          gap: 1rem;
-          flex-wrap: wrap;
-        "
-      >
-
-        <byte-button
-          label="Default"
-        />
-
-        <byte-button
-          label="Outlined"
-          variant="outlined"
-        />
-
-        <byte-button
-          label="Text"
-          variant="text"
-        />
-
-      </div>
-
-    `
-
-  })
-
-};
-
-
-// =====================================================
-// SIZES
-// =====================================================
-
-export const Sizes: Story = {
-
-  render: (args) => ({
-
-    props: args,
-
-    template: `
-
-      <div
-        style="
-          display: flex;
-          gap: 1rem;
-          align-items: center;
-        "
-      >
-
-        <byte-button
-          label="Small"
-          size="small"
-        />
-
-        <byte-button
-          label="Normal"
-        />
-
-        <byte-button
-          label="Large"
-          size="large"
-        />
-
-      </div>
-
-    `
-
-  })
-
-};
-
-
-// =====================================================
-// STATES
-// =====================================================
-
-export const States: Story = {
-
-  render: (args) => ({
-
-    props: args,
-
-    template: `
-
-      <div
-        style="
-          display: flex;
-          gap: 1rem;
-          flex-wrap: wrap;
-        "
-      >
-
-        <byte-button
-          label="Normal"
-        />
-
-        <byte-button
-          label="Disabled"
-          [disabled]="true"
-        />
-
-        <byte-button
-          label="Loading"
-          [loading]="true"
-        />
-
-      </div>
-
-    `
-
-  })
-
-};
-
-
-// =====================================================
-// BUTTON TYPES
-// =====================================================
-
-export const Types: Story = {
-
-  render: (args) => ({
-
-    props: args,
-
-    template: `
-
-      <div
-        style="
-          display: flex;
-          gap: 1rem;
-        "
-      >
-
-        <byte-button
-          label="Button"
-          type="button"
-        />
-
-        <byte-button
-          label="Submit"
-          type="submit"
-        />
-
-        <byte-button
-          label="Reset"
-          type="reset"
-        />
-
-      </div>
-
-    `
-
-  })
-
-};
-
-
-// =====================================================
-// SHAPES
-// =====================================================
-
-export const Shapes: Story = {
-
-  render: (args) => ({
-
-    props: args,
-
-    template: `
-
-      <div
-        style="
-          display: flex;
-          gap: 1rem;
-          align-items: center;
-        "
-      >
-
-        <byte-button
-          label="Normal"
-        />
-
-        <byte-button
-          label="Raised"
-          [raised]="true"
-        />
-
-        <byte-button
-          label="Rounded"
-          [rounded]="true"
-        />
-
-      </div>
-
-    `
-
-  })
-
-};
-
-
-// =====================================================
-// CUSTOM CONTENT
-// =====================================================
-
-export const CustomContent: Story = {
-
-  render: (args) => ({
-
-    props: args,
-
-    template: `
-
-      <byte-button
-        severity="success"
-      >
-
-        <ng-template byteButtonContent>
-
-          <span>
-
-            <i class="pi pi-check"></i>
-
-            Guardar cambios
-
-          </span>
-
-        </ng-template>
-
-      </byte-button>
-
-    `
-
-  })
-
-};
-
-
-// =====================================================
-// BUTTON GROUP
-// =====================================================
-
-export const ButtonGroup: Story = {
-
-  render: (args) => ({
-
-    props: args,
-
-    template: `
-    <byte-button-group>
-      <byte-button label="Save" icon="pi pi-check" />
-      <byte-button label="Delete" icon="pi pi-trash" variant="outlined"/>
-      <byte-button label="Cancel" icon="pi pi-times" variant="outlined"/>
-    </byte-button-group>
-    `
-
-  })
-
-};

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

@@ -1,129 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ContentChild,
-  EventEmitter,
-  Input,
-  Output
-} from '@angular/core';
-
-import { NgTemplateOutlet } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-
-import { ByteButtonContentDirective } from './byte-button.directive';
-
-
-@Component({
-  selector: 'byte-button',
-
-  imports: [
-    ButtonModule,
-    NgTemplateOutlet,
-    ByteButtonContentDirective
-  ],
-
-  templateUrl: './byte-button.html',
-
-  styleUrl: './byte-button.css',
-
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ByteButton {
-
-  // =====================================================
-  // INPUTS
-  // =====================================================
-
-  @Input()
-  label = '';
-
-  @Input()
-  icon = '';
-
-  @Input()
-  iconPos: 'left' | 'right' | 'top' | 'bottom' = 'left';
-
-  @Input()
-  severity:
-    | 'secondary'
-    | 'success'
-    | 'info'
-    | 'warn'
-    | 'danger'
-    | 'contrast'
-    | undefined;
-
-  @Input()
-  variant:
-    | 'outlined'
-    | 'text'
-    | undefined;
-
-  @Input()
-  size:
-    | 'small'
-    | 'large'
-    | undefined;
-
-  @Input()
-  disabled = false;
-
-  @Input()
-  loading = false;
-
-  @Input()
-  loadingIcon = '';
-
-  @Input()
-  raised = false;
-
-  @Input()
-  rounded = false;
-
-  @Input()
-  text = false;
-
-  @Input()
-  outlined = false;
-
-  @Input()
-  link = false;
-
-  @Input()
-  plain = false;
-
-  @Input()
-  fluid = false;
-
-  @Input()
-  type: 'button' | 'submit' | 'reset' = 'button';
-
-  @Input()
-  buttonProps: Record<string, any> = {};
-
-
-  // =====================================================
-  // CUSTOM TEMPLATE
-  // =====================================================
-
-  @ContentChild(ByteButtonContentDirective)
-  contentTemplate?: ByteButtonContentDirective;
-
-
-  // =====================================================
-  // OUTPUT
-  // =====================================================
-
-  @Output()
-  clicked = new EventEmitter<MouseEvent>();
-
-
-  // =====================================================
-  // CLICK
-  // =====================================================
-
-  onButtonClick(event: MouseEvent): void {
-    this.clicked.emit(event);
-  }
-
-}

package/src/lib/components/byte-dialog/byte-dialog.directive.ts

@@ -1,21 +0,0 @@
-import { Directive, TemplateRef } from '@angular/core';
-
-@Directive({
-  selector: 'ng-template[byteDialogHeader]',
-  standalone: true
-})
-export class ByteDialogHeaderDirective {
-  constructor(
-    public template: TemplateRef<any>
-  ) {}
-}
-
-@Directive({
-  selector: 'ng-template[byteDialogFooter]',
-  standalone: true
-})
-export class ByteDialogFooterDirective {
-  constructor(
-    public template: TemplateRef<any>
-  ) {}
-}

package/src/lib/components/byte-dialog/byte-dialog.html

@@ -1,47 +0,0 @@
-<p-dialog
-  [(visible)]="visible"
-  (visibleChange)="onVisibleChange($event)"
-  [header]="header"
-  [modal]="modal"
-  [closable]="closable"
-  [draggable]="draggable"
-  [resizable]="resizable"
-  [dismissableMask]="dismissableMask"
-  [closeOnEscape]="closeOnEscape"
-  [maximizable]="maximizable"
-  [blockScroll]="blockScroll"
-  [position]="position"
-  [style]="style"
-  [styleClass]="styleClass"
-  [contentStyle]="contentStyle"
-  [breakpoints]="breakpoints"
-  appendTo="body"
->
-
-  @if (headerTemplate) {
-
-    <ng-template pTemplate="header">
-
-      <ng-container
-        [ngTemplateOutlet]="headerTemplate.template"
-      />
-
-    </ng-template>
-
-  }
-
-  <ng-content></ng-content>
-
-  @if (footerTemplate) {
-
-    <ng-template pTemplate="footer">
-
-      <ng-container
-        [ngTemplateOutlet]="footerTemplate.template"
-      />
-
-    </ng-template>
-
-  }
-
-</p-dialog>

package/src/lib/components/byte-dialog/byte-dialog.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { ByteDialog } from './byte-dialog';
-import {
-  ByteDialogHeaderDirective,
-  ByteDialogFooterDirective
-} from './byte-dialog.directive';
-
-@NgModule({
-  imports: [
-    ByteDialog,
-    ByteDialogHeaderDirective,
-    ByteDialogFooterDirective
-  ],
-  exports: [
-    ByteDialog,
-    ByteDialogHeaderDirective,
-    ByteDialogFooterDirective
-  ]
-})
-export class ByteDialogModule {}

package/src/lib/components/byte-dialog/byte-dialog.spec.ts

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