@4byte/shared-lib 0.0.1

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

@@ -0,0 +1,449 @@
+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

@@ -0,0 +1,129 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,47 @@
+<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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,22 @@
+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();
+  });
+});