@3ddv/software-division-components 1.4.1 → 1.4.3

package/src/dvm/cart/seat-list.stories.ts

@@ -0,0 +1,337 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig } from '@storybook/angular';
+import { provideIcons } from '@ng-icons/core';
+import { lucideMapPin, lucideEye, lucideChevronDown, lucideChevronUp } from '@ng-icons/lucide';
+import { SeatListComponent, SeatGroup } from './seat-list.component';
+import { CartItem } from './cart.types';
+
+const meta: Meta<SeatListComponent> = {
+  title: 'Dvm/Cart/SeatList',
+  component: SeatListComponent,
+  id: 'SeatList',
+  decorators: [
+    applicationConfig({
+      providers: [
+        provideIcons({
+          lucideMapPin,
+          lucideEye,
+          lucideChevronDown,
+          lucideChevronUp,
+        }),
+      ],
+    }),
+  ],
+  argTypes: {
+    seats: {
+      control: 'object',
+      description: 'Array of seats to display in simple mode',
+      table: {
+        type: { summary: 'CartItem[]' },
+      },
+    },
+    groups: {
+      control: 'object',
+      description: 'Array of seat groups to display in accordion mode',
+      table: {
+        type: { summary: 'SeatGroup[]' },
+      },
+    },
+    actionButtonText: {
+      control: 'text',
+      description: 'Text displayed on the action button',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    indicatorColor: {
+      control: 'color',
+      description: 'Color of the indicator dot for seats',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    mapPinClick: {
+      action: 'mapPinClick',
+      description: 'Event emitted when map pin icon is clicked',
+      table: {
+        type: { summary: 'EventEmitter<CartItem>' },
+      },
+    },
+    eyeClick: {
+      action: 'eyeClick',
+      description: 'Event emitted when eye icon is clicked',
+      table: {
+        type: { summary: 'EventEmitter<CartItem>' },
+      },
+    },
+    actionClick: {
+      action: 'actionClick',
+      description: 'Event emitted when action button is clicked',
+      table: {
+        type: { summary: 'EventEmitter<CartItem>' },
+      },
+    },
+    removeClick: {
+      action: 'removeClick',
+      description: 'Event emitted when remove button is clicked',
+      table: {
+        type: { summary: 'EventEmitter<CartItem>' },
+      },
+    },
+    groupToggle: {
+      action: 'groupToggle',
+      description: 'Event emitted when a group accordion is toggled',
+      table: {
+        type: { summary: 'EventEmitter<{ groupId: string | number; expanded: boolean }>' },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<SeatListComponent>;
+
+const sampleSeats: CartItem[] = [
+  {
+    id: 1,
+    section: '304',
+    row: '3',
+    seat: '1',
+    price: 300,
+  },
+  {
+    id: 2,
+    section: '304',
+    row: '3',
+    seat: '2',
+    price: 300,
+  },
+  {
+    id: 3,
+    section: '304',
+    row: '3',
+    seat: '3',
+    price: 300,
+  },
+  {
+    id: 4,
+    section: '304',
+    row: '3',
+    seat: '4',
+    price: 300,
+  },
+];
+
+const sampleGroups: SeatGroup[] = [
+  {
+    id: 'kept',
+    title: 'Kept Seats',
+    count: '(2)',
+    seats: [
+      {
+        id: 1,
+        section: '304',
+        row: '3',
+        seat: '1',
+        price: 300,
+      },
+      {
+        id: 2,
+        section: '304',
+        row: '3',
+        seat: '2',
+        price: 300,
+      },
+    ],
+    expanded: true,
+    indicatorColor: '#10b981',
+    actionButtonText: 'Remove',
+  },
+  {
+    id: 'relocated',
+    title: 'Relocated Seats',
+    count: '(0/2)',
+    seats: [],
+    expanded: false,
+    indicatorColor: '#f97316',
+    actionButtonText: 'Remove',
+  },
+  {
+    id: 'additional',
+    title: 'Additional Seats',
+    count: '(0/6)',
+    seats: [],
+    expanded: false,
+    indicatorColor: '#2563eb',
+    actionButtonText: 'Remove',
+  },
+];
+
+export const SimpleMode: Story = {
+  args: {
+    seats: sampleSeats,
+    actionButtonText: 'Relocate',
+    indicatorColor: '#f97316',
+  },
+};
+
+export const SimpleModeEmpty: Story = {
+  args: {
+    seats: [],
+    actionButtonText: 'Relocate',
+  },
+};
+
+export const SimpleModeSingle: Story = {
+  args: {
+    seats: [sampleSeats[0]],
+    actionButtonText: 'Relocate',
+  },
+};
+
+export const GroupedMode: Story = {
+  args: {
+    groups: sampleGroups,
+  },
+};
+
+export const GroupedModeAllExpanded: Story = {
+  args: {
+    groups: sampleGroups.map(group => ({ ...group, expanded: true })),
+  },
+};
+
+export const GroupedModeWithSeats: Story = {
+  args: {
+    groups: [
+      {
+        id: 'kept',
+        title: 'Kept Seats',
+        count: '(2)',
+        seats: [
+          {
+            id: 1,
+            section: '304',
+            row: '3',
+            seat: '1',
+            price: 300,
+          },
+          {
+            id: 2,
+            section: '304',
+            row: '3',
+            seat: '2',
+            price: 300,
+          },
+        ],
+        expanded: true,
+        indicatorColor: '#10b981',
+        actionButtonText: 'Remove',
+      },
+      {
+        id: 'relocated',
+        title: 'Relocated Seats',
+        count: '(2/2)',
+        seats: [
+          {
+            id: 3,
+            section: '305',
+            row: '5',
+            seat: '10',
+            price: 350,
+          },
+          {
+            id: 4,
+            section: '305',
+            row: '5',
+            seat: '11',
+            price: 350,
+          },
+        ],
+        expanded: false,
+        indicatorColor: '#f97316',
+        actionButtonText: 'Remove',
+      },
+      {
+        id: 'additional',
+        title: 'Additional Seats',
+        count: '(3/6)',
+        seats: [
+          {
+            id: 5,
+            section: '306',
+            row: '7',
+            seat: '15',
+            price: 250,
+          },
+          {
+            id: 6,
+            section: '306',
+            row: '7',
+            seat: '16',
+            price: 250,
+          },
+          {
+            id: 7,
+            section: '306',
+            row: '7',
+            seat: '17',
+            price: 250,
+          },
+        ],
+        expanded: false,
+        indicatorColor: '#2563eb',
+        actionButtonText: 'Remove',
+      },
+    ],
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    seats: sampleSeats,
+  },
+  render: args => ({
+    props: {
+      ...args,
+      mapPinClick: (item: CartItem) => console.log('Map pin clicked for:', item),
+      eyeClick: (item: CartItem) => console.log('Eye clicked for:', item),
+      actionClick: (item: CartItem) => console.log('Action clicked for:', item),
+    },
+    template: `
+      <sdc-seat-list
+        [seats]="seats"
+        [actionButtonText]="actionButtonText"
+        [indicatorColor]="indicatorColor"
+        (mapPinClick)="mapPinClick($event)"
+        (eyeClick)="eyeClick($event)"
+        (actionClick)="actionClick($event)">
+      </sdc-seat-list>
+    `,
+  }),
+};
+
+export const GroupedWithActions: Story = {
+  args: {
+    groups: sampleGroups,
+  },
+  render: args => ({
+    props: {
+      ...args,
+      mapPinClick: (item: CartItem) => console.log('Map pin clicked for:', item),
+      eyeClick: (item: CartItem) => console.log('Eye clicked for:', item),
+      removeClick: (item: CartItem) => console.log('Remove clicked for:', item),
+      groupToggle: (event: { groupId: string | number; expanded: boolean }) => console.log('Group toggled:', event),
+    },
+    template: `
+      <sdc-seat-list
+        [groups]="groups"
+        (mapPinClick)="mapPinClick($event)"
+        (eyeClick)="eyeClick($event)"
+        (removeClick)="removeClick($event)"
+        (groupToggle)="groupToggle($event)">
+      </sdc-seat-list>
+    `,
+  }),
+};

package/src/dvm/cart-item/cart-item.component.html

@@ -0,0 +1 @@
+<div>cart-item component!</div>

package/src/dvm/cart-item/cart-item.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sdc-cart-item',
+  standalone: true,
+  templateUrl: './cart-item.component.html',
+})
+export class CartItemComponent {}

package/src/dvm/cart-item/cart-item.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CartItemService {
+  constructor() {}
+}

package/src/dvm/cart-item/cart.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { CartItemComponent } from './cart-item.component';
+
+const meta: Meta<CartItemComponent> = {
+  title: 'Dvm/CartItem',
+  component: CartItemComponent,
+  id: 'CartItem',
+};
+
+export default meta;
+
+type Story = StoryObj<CartItemComponent>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Primary Button',
+    icon: 'pi pi-check',
+    type: 'button',
+    iconPos: 'left',
+    disabled: false,
+    loading: false,
+    severity: 'primary',
+    rounded: false,
+    raised: true,
+    outlined: false,
+    link: false,
+    size: undefined,
+    ariaLabel: 'Primary button',
+    style: { 'margin-right': '10px' },
+  },
+};

package/src/dvm/cart-item/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/dvm/cart-item/package.json

@@ -0,0 +1,5 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  }
+}

package/src/dvm/cart-item/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of software-division-components
+ */
+
+export * from './cart-item.component';
+export * from './cart-item.service';

package/src/dvm/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/dvm/legend/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/dvm/legend/legend.component.css

@@ -0,0 +1,49 @@
+/* THEMEABLE LEGEND (pure CSS variables; md defaults) */
+.sdc-legend {
+  --sdc-legend-gap-y: var(--space-4);
+  --sdc-legend-padding-x: var(--space-7);
+  --sdc-legend-padding-y: var(--space-2);
+  --sdc-legend-font-size: var(--text-xs);
+  --sdc-legend-font-weight: var(--font-normal);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sdc-legend-gap-y);
+  max-width: 375px;
+  padding: var(--sdc-legend-padding-y) var(--sdc-legend-padding-x);
+  font-size: var(--sdc-legend-font-size);
+  font-weight: var(--sdc-legend-font-weight);
+}
+
+/* Title */
+.sdc-legend__title {
+  font-weight: var(--font-semibold);
+  font-size: var(--text-lg);
+}
+
+/* SIZE TOKENS */
+.sdc-legend.size-xxs,
+.sdc-legend.size-xs {
+  --sdc-legend-padding-x: 0;
+  --sdc-legend-padding-y: 0;
+  --sdc-legend-font-size: var(--text-sm);
+}
+
+.sdc-legend.size-sm {
+  --sdc-legend-padding-x: var(--space-4);
+  --sdc-legend-padding-y: var(--space-1);
+}
+
+.sdc-legend.size-md {
+  --sdc-legend-padding-x: var(--space-7);
+  --sdc-legend-padding-y: var(--space-2);
+}
+
+.sdc-legend.size-lg {
+  --sdc-legend-gap-y: var(--space-6);
+  --sdc-legend-padding-x: var(--space-8);
+  --sdc-legend-padding-y: var(--space-4);
+  --sdc-legend-font-size: var(--text-md);
+  --sdc-legend-font-weight: var(--font-semibold);
+}

package/src/dvm/legend/legend.component.html

@@ -0,0 +1,8 @@
+<fieldset [class]="computedClass()">
+  @if (title()) {
+    <h1 class="sdc-legend__title">
+      {{ title() }}
+    </h1>
+  }
+  <sdc-legend-elements [elements]="elements()" [size]="size()" />
+</fieldset>

package/src/dvm/legend/legend.component.ts

@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { Size, SIZE_ORDER } from '../../types/sizes.type';
+import { LegendElement, LegendSize } from './types';
+import { LegendElementsComponent } from './ui/legend-elements/legend-elements.component';
+
+@Component({
+  selector: 'sdc-legend',
+  standalone: true,
+  imports: [LegendElementsComponent],
+  templateUrl: './legend.component.html',
+  styleUrls: ['./legend.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LegendComponent {
+  public readonly title = input('');
+  public readonly size = input<Size>('md');
+  public readonly elements = input.required<LegendElement[]>();
+  public readonly className = input<string>('');
+
+  private readonly supportedSizes: LegendSize[] = ['xxs', 'xs', 'sm', 'md', 'lg'];
+
+  /** Normalize any Size → LegendSize by flooring to nearest supported size. */
+  private normalizeSize = (s: Size): LegendSize => {
+    const wantedIdx = SIZE_ORDER.indexOf(s);
+    if (wantedIdx === -1) return 'md';
+    for (let i = wantedIdx; i >= 0; i--) {
+      const candidate = SIZE_ORDER[i];
+      if (this.supportedSizes.includes(candidate as LegendSize)) {
+        return candidate as LegendSize;
+      }
+    }
+    return 'md';
+  };
+
+  private readonly _effectiveSize = computed<LegendSize>(() => this.normalizeSize(this.size()));
+
+  protected readonly computedClass = computed(() => {
+    const normalizedSize = this._effectiveSize();
+    return ['sdc-legend', `size-${normalizedSize}`, this.className()].filter(Boolean).join(' ');
+  });
+}

package/src/dvm/legend/legend.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { LegendComponent } from './legend.component';
+
+const meta: Meta<LegendComponent> = {
+  title: 'Dvm/Legend',
+  component: LegendComponent,
+  id: 'Legend',
+};
+
+export default meta;
+
+type Story = StoryObj<LegendComponent>;
+
+export const Primary: Story = {
+  args: {},
+};

package/src/dvm/legend/package.json

@@ -0,0 +1,5 @@
+{
+  "ngPackage": {
+    "entryFile": "public_api.ts"
+  }
+}

package/src/dvm/legend/public-api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of software-division-components
+ */
+
+export * from './legend.component';
+export * from './types';
+export * from './ui/legend-elements';

package/src/dvm/legend/types.ts

@@ -0,0 +1,6 @@
+export interface LegendElement {
+  color: string;
+  name: string;
+}
+
+export type LegendSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';

package/src/dvm/legend/ui/legend-elements/index.ts

@@ -0,0 +1 @@
+export * from './legend-elements.component';

package/src/dvm/legend/ui/legend-elements/legend-elements.component.css

@@ -0,0 +1,49 @@
+/* THEMEABLE LEGEND ELEMENTS (md defaults) */
+.sdc-legend-elements {
+  --slec-gap-x: 0;
+  --slec-gap-y: var(--space-6);
+
+  display: grid;
+  grid-auto-flow: row;
+  row-gap: var(--slec-gap-y);
+  column-gap: var(--slec-gap-x);
+}
+
+/* SIZE TOKENS (size-* drives spacing and alignment) */
+.sdc-legend-elements.size-xs {
+  --slec-gap-y: var(--space-2);
+}
+.sdc-legend-elements.size-sm {
+  --slec-gap-y: var(--space-4);
+}
+.sdc-legend-elements.size-md {
+  --slec-gap-y: var(--space-6);
+}
+.sdc-legend-elements.size-lg {
+  --slec-gap-y: var(--space-6);
+  --slec-gap-x: var(--space-8);
+}
+
+/* Item row */
+.sdc-legend-elements__item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start; /* default */
+}
+/* On lg, center items (old rule: lg centers, others start) */
+.sdc-legend-elements.size-lg .sdc-legend-elements__item {
+  justify-content: center;
+}
+
+/* Dot + label */
+.sdc-legend-elements__dot {
+  margin-right: var(--space-1_5);
+  border-radius: 9999px;
+  width: var(--space-3);
+  height: var(--space-3);
+  flex-shrink: 0;
+  outline: 0.1px solid gray;
+}
+.sdc-legend-elements__label {
+  white-space: nowrap;
+}

package/src/dvm/legend/ui/legend-elements/legend-elements.component.html

@@ -0,0 +1,8 @@
+<div [class]="computedClass()">
+  @for (element of elements(); track element.name) {
+    <div class="sdc-legend-elements__item">
+      <span class="sdc-legend-elements__dot" [style.backgroundColor]="element.color"></span>
+      <p class="sdc-legend-elements__label">{{ element.name }}</p>
+    </div>
+  }
+</div>

package/src/dvm/legend/ui/legend-elements/legend-elements.component.ts

@@ -0,0 +1,41 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { Size, SIZE_ORDER } from '../../../../types/sizes.type';
+import { LegendElement, LegendSize } from '../../types';
+
+@Component({
+  selector: 'sdc-legend-elements',
+  standalone: true, // ← important if you use `imports`
+  imports: [CommonModule],
+  templateUrl: './legend-elements.component.html',
+  styleUrls: ['./legend-elements.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LegendElementsComponent {
+  public readonly size = input<Size>('md');
+  public readonly elements = input.required<LegendElement[]>();
+  public readonly className = input<string>('');
+
+  private readonly supportedSizes: LegendSize[] = ['xs', 'sm', 'md', 'lg'];
+
+  private normalizeSize = (s: Size): LegendSize => {
+    const wantedIdx = SIZE_ORDER.indexOf(s);
+    if (wantedIdx === -1) return 'md';
+    for (let i = wantedIdx; i >= 0; i--) {
+      const cand = SIZE_ORDER[i];
+      if (this.supportedSizes.includes(cand as LegendSize)) return cand as LegendSize;
+    }
+    return 'md';
+  };
+
+  private readonly _effectiveSize = computed<LegendSize>(() => this.normalizeSize(this.size()));
+
+  protected readonly computedClass = computed(() => {
+    const sz = this._effectiveSize();
+    return ['sdc-legend-elements', `size-${sz}`, this.className()].filter(Boolean).join(' ');
+  });
+
+  protected readonly itemClasses = computed(() =>
+    this._effectiveSize() === 'lg' ? 'justify-center' : 'justify-start'
+  );
+}

package/src/dvm/loader/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/src/dvm/loader/loader.component.html

@@ -0,0 +1 @@
+<div>loader component!</div>

package/src/dvm/loader/loader.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sdc-loader',
+  standalone: true,
+  templateUrl: './loader.component.html',
+})
+export class LoaderComponent {}

package/src/dvm/loader/loader.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LoaderService {
+  constructor() {}
+}