@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/org-chart/README.md

@@ -1,265 +0,0 @@
-# Org Chart
-
-A hierarchical organization chart component for visualizing company structures and reporting relationships.
-
-## Installation
-
-Import the components from the org-chart module:
-
-```typescript
-import { ScOrgChart } from '@/ui/org-chart';
-import type { OrgChartNode, OrgChartNodeClickEvent } from '@/ui/org-chart';
-```
-
-## Usage
-
-### Basic Usage
-
-```html
-<sc-org-chart [data]="orgData" (nodeClick)="onNodeClick($event)" />
-```
-
-```typescript
-orgData: OrgChartNode = {
-  id: '1',
-  name: 'John Smith',
-  title: 'CEO',
-  children: [
-    {
-      id: '2',
-      name: 'Jane Doe',
-      title: 'CTO',
-      children: [
-        { id: '3', name: 'Bob Wilson', title: 'Developer' },
-        { id: '4', name: 'Alice Brown', title: 'Designer' },
-      ],
-    },
-    {
-      id: '5',
-      name: 'Mike Johnson',
-      title: 'CFO',
-    },
-  ],
-};
-
-onNodeClick(event: OrgChartNodeClickEvent): void {
-  console.log('Clicked:', event.node.name);
-}
-```
-
-### Horizontal Layout
-
-```html
-<sc-org-chart [data]="orgData" direction="horizontal" />
-```
-
-### With Avatars
-
-```typescript
-orgData: OrgChartNode = {
-  id: '1',
-  name: 'Sarah Johnson',
-  title: 'CEO',
-  avatar: 'https://example.com/sarah.jpg',
-  children: [
-    {
-      id: '2',
-      name: 'Michael Chen',
-      title: 'CTO',
-      avatar: 'https://example.com/michael.jpg',
-    },
-  ],
-};
-```
-
-### With Departments
-
-```typescript
-orgData: OrgChartNode = {
-  id: '1',
-  name: 'John Smith',
-  title: 'CEO',
-  department: 'Executive',
-  children: [
-    {
-      id: '2',
-      name: 'Jane Doe',
-      title: 'Engineering Manager',
-      department: 'Engineering',
-    },
-  ],
-};
-```
-
-### Compact Mode
-
-```html
-<sc-org-chart [data]="orgData" [compact]="true" />
-```
-
-### Non-collapsible
-
-```html
-<sc-org-chart [data]="orgData" [collapsible]="false" />
-```
-
-### Initial Expanded State
-
-```typescript
-orgData: OrgChartNode = {
-  id: '1',
-  name: 'John Smith',
-  title: 'CEO',
-  expanded: false, // Start collapsed
-  children: [...],
-};
-```
-
-## API Reference
-
-### ScOrgChart
-
-The main organization chart component.
-
-#### Inputs
-
-| Input         | Type                         | Default                | Description                   |
-| ------------- | ---------------------------- | ---------------------- | ----------------------------- |
-| `data`        | `OrgChartNode \| null`       | `null`                 | Root node of the organization |
-| `direction`   | `'vertical' \| 'horizontal'` | `'vertical'`           | Layout direction              |
-| `collapsible` | `boolean`                    | `true`                 | Allow nodes to be collapsed   |
-| `compact`     | `boolean`                    | `false`                | Use smaller node cards        |
-| `ariaLabel`   | `string`                     | `'Organization chart'` | Accessible label              |
-| `class`       | `string`                     | `''`                   | Additional CSS classes        |
-
-#### Outputs
-
-| Output       | Type                      | Description                               |
-| ------------ | ------------------------- | ----------------------------------------- |
-| `nodeClick`  | `OrgChartNodeClickEvent`  | Emitted when a node is clicked            |
-| `nodeExpand` | `OrgChartNodeExpandEvent` | Emitted when a node is expanded/collapsed |
-
-### ScOrgChartNode
-
-Individual node component (used internally, can also be used directly for custom layouts).
-
-#### Inputs
-
-| Input         | Type                | Default      | Description           |
-| ------------- | ------------------- | ------------ | --------------------- |
-| `node`        | `OrgChartNode`      | (required)   | Node data to display  |
-| `direction`   | `OrgChartDirection` | `'vertical'` | Layout direction      |
-| `collapsible` | `boolean`           | `true`       | Allow collapse        |
-| `compact`     | `boolean`           | `false`      | Use compact card size |
-
-## Type Definitions
-
-### OrgChartNode
-
-```typescript
-interface OrgChartNode {
-  id: string;
-  name: string;
-  title?: string;
-  avatar?: string;
-  department?: string;
-  children?: OrgChartNode[];
-  expanded?: boolean;
-  data?: Record<string, unknown>;
-}
-```
-
-### OrgChartNodeClickEvent
-
-```typescript
-interface OrgChartNodeClickEvent {
-  node: OrgChartNode;
-  event: MouseEvent;
-}
-```
-
-### OrgChartNodeExpandEvent
-
-```typescript
-interface OrgChartNodeExpandEvent {
-  node: OrgChartNode;
-  expanded: boolean;
-}
-```
-
-### OrgChartDirection
-
-```typescript
-type OrgChartDirection = 'vertical' | 'horizontal';
-```
-
-## Node Properties
-
-| Property     | Type                      | Required | Description                      |
-| ------------ | ------------------------- | -------- | -------------------------------- |
-| `id`         | `string`                  | Yes      | Unique identifier for the node   |
-| `name`       | `string`                  | Yes      | Person's full name               |
-| `title`      | `string`                  | No       | Job title or position            |
-| `avatar`     | `string`                  | No       | URL to profile image             |
-| `department` | `string`                  | No       | Department or team name          |
-| `children`   | `OrgChartNode[]`          | No       | Direct reports (child nodes)     |
-| `expanded`   | `boolean`                 | No       | Initial expanded state           |
-| `data`       | `Record<string, unknown>` | No       | Custom data attached to the node |
-
-## Accessibility
-
-The Org Chart component follows accessibility best practices:
-
-- Container has `role="tree"` for screen readers
-- Nodes have `aria-expanded` attribute when collapsible
-- Each node has accessible label combining name and title
-- Focus indicators for keyboard navigation
-- Avatar images include proper alt text
-- Initials fallback for nodes without avatars
-
-## Keyboard Navigation
-
-| Key   | Action                                |
-| ----- | ------------------------------------- |
-| Tab   | Move focus between nodes              |
-| Enter | Toggle expand/collapse, trigger click |
-| Space | Toggle expand/collapse, trigger click |
-
-## Styling
-
-The component uses Tailwind CSS classes and supports theming:
-
-- Node cards use `bg-card` and `border` colors
-- Connectors use `bg-border` color
-- Avatar fallback uses `bg-primary/10` with `text-primary`
-- Hover states include shadow transitions
-
-### Custom Styling
-
-```html
-<sc-org-chart [data]="orgData" class="[&_button]:shadow-lg" />
-```
-
-## Features
-
-- Hierarchical tree structure visualization
-- Vertical and horizontal layout options
-- Collapsible nodes with smooth expand/collapse
-- Avatar support with initials fallback
-- Department and title display
-- Compact mode for dense hierarchies
-- Connector lines between nodes
-- Click and expand event handlers
-- Custom data attachment
-- Recursive rendering
-- Full keyboard and screen reader support
-
-## Use Cases
-
-- Company organization charts
-- Team hierarchy visualization
-- Management reporting structures
-- Department org charts
-- Project team structures
-- Family trees
-- Any hierarchical relationship visualization

package/src/lib/components/org-chart/index.ts

@@ -1,8 +0,0 @@
-export { ScOrgChart } from './org-chart';
-export { ScOrgChartNode } from './org-chart-node';
-export type {
-  OrgChartDirection,
-  OrgChartNode,
-  OrgChartNodeClickEvent,
-  OrgChartNodeExpandEvent,
-} from './org-chart-types';

package/src/lib/components/org-chart/org-chart-node.ts

@@ -1,253 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  output,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import type {
-  OrgChartDirection,
-  OrgChartNode,
-  OrgChartNodeClickEvent,
-  OrgChartNodeExpandEvent,
-} from './org-chart-types';
-
-@Component({
-  selector: 'sc-org-chart-node',
-  template: `
-    <div [class]="containerClass()">
-      <!-- Node Card -->
-      <div [class]="nodeCardClass()">
-        <button
-          type="button"
-          [class]="cardButtonClass()"
-          [attr.aria-expanded]="hasChildren() ? isExpanded() : null"
-          [attr.aria-label]="
-            node().name + (node().title ? ', ' + node().title : '')
-          "
-          (click)="onNodeClick($event)"
-        >
-          <!-- Avatar -->
-          @if (node().avatar) {
-            <img
-              [src]="node().avatar"
-              [alt]="node().name"
-              class="w-12 h-12 rounded-full object-cover flex-shrink-0"
-            />
-          } @else {
-            <div
-              class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0"
-            >
-              <span class="text-lg font-semibold text-primary">
-                {{ getInitials(node().name) }}
-              </span>
-            </div>
-          }
-
-          <!-- Info -->
-          <div class="flex-1 min-w-0 text-left">
-            <p class="font-semibold text-sm truncate">{{ node().name }}</p>
-            @if (node().title) {
-              <p class="text-xs text-muted-foreground truncate">
-                {{ node().title }}
-              </p>
-            }
-            @if (node().department) {
-              <p class="text-xs text-muted-foreground/70 truncate">
-                {{ node().department }}
-              </p>
-            }
-          </div>
-
-          <!-- Expand indicator -->
-          @if (hasChildren()) {
-            <div class="flex-shrink-0 ml-2">
-              <span [class]="expandIconClass()" [innerHTML]="expandIcon"></span>
-            </div>
-          }
-        </button>
-      </div>
-
-      <!-- Connector Lines & Children -->
-      @if (hasChildren() && isExpanded()) {
-        <div [class]="childrenContainerClass()">
-          <!-- Vertical connector from parent -->
-          <div [class]="connectorClass()"></div>
-
-          <!-- Children wrapper -->
-          <div [class]="childrenWrapperClass()">
-            @for (
-              child of node().children;
-              track child.id;
-              let isFirst = $first;
-              let isLast = $last
-            ) {
-              <div [class]="childNodeClass(isFirst, isLast)">
-                <!-- Horizontal connector to child -->
-                <div [class]="horizontalConnectorClass(isFirst, isLast)"></div>
-
-                <!-- Recursive child node -->
-                <sc-org-chart-node
-                  [node]="child"
-                  [direction]="direction()"
-                  [collapsible]="collapsible()"
-                  [compact]="compact()"
-                  (nodeClick)="nodeClick.emit($event)"
-                  (nodeExpand)="nodeExpand.emit($event)"
-                />
-              </div>
-            }
-          </div>
-        </div>
-      }
-    </div>
-  `,
-  styles: `
-    :host {
-      display: block;
-    }
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScOrgChartNode {
-  readonly node = input.required<OrgChartNode>();
-  readonly direction = input<OrgChartDirection>('vertical');
-  readonly collapsible = input(true);
-  readonly compact = input(false);
-
-  readonly nodeClick = output<OrgChartNodeClickEvent>();
-  readonly nodeExpand = output<OrgChartNodeExpandEvent>();
-
-  protected readonly expanded = signal<boolean | null>(null);
-
-  readonly expandIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`;
-
-  protected readonly hasChildren = computed(() => {
-    const children = this.node().children;
-    return children && children.length > 0;
-  });
-
-  protected readonly isExpanded = computed(() => {
-    const localExpanded = this.expanded();
-    if (localExpanded !== null) return localExpanded;
-    return this.node().expanded !== false;
-  });
-
-  protected readonly containerClass = computed(() =>
-    cn(
-      'flex',
-      this.direction() === 'vertical'
-        ? 'flex-col items-center'
-        : 'flex-row items-start',
-    ),
-  );
-
-  protected readonly nodeCardClass = computed(() => cn('relative z-10'));
-
-  protected readonly cardButtonClass = computed(() =>
-    cn(
-      'flex items-center gap-3 p-3 rounded-lg border bg-card text-card-foreground',
-      'shadow-sm hover:shadow-md transition-shadow',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      this.compact() ? 'min-w-[160px]' : 'min-w-[200px]',
-    ),
-  );
-
-  protected readonly expandIconClass = computed(() =>
-    cn(
-      'inline-flex items-center justify-center transition-transform duration-200',
-      'text-muted-foreground',
-      this.isExpanded() ? 'rotate-180' : 'rotate-0',
-      this.direction() === 'horizontal' &&
-        (this.isExpanded() ? '-rotate-90' : 'rotate-90'),
-    ),
-  );
-
-  protected readonly childrenContainerClass = computed(() =>
-    cn(
-      'flex',
-      this.direction() === 'vertical'
-        ? 'flex-col items-center'
-        : 'flex-row items-start',
-    ),
-  );
-
-  protected readonly connectorClass = computed(() =>
-    cn('bg-border', this.direction() === 'vertical' ? 'w-px h-6' : 'h-px w-6'),
-  );
-
-  protected readonly childrenWrapperClass = computed(() =>
-    cn(
-      'flex relative',
-      this.direction() === 'vertical' ? 'flex-row gap-4' : 'flex-col gap-4',
-    ),
-  );
-
-  protected childNodeClass(isFirst: boolean, isLast: boolean): string {
-    return cn(
-      'flex relative',
-      this.direction() === 'vertical'
-        ? 'flex-col items-center'
-        : 'flex-row items-start',
-    );
-  }
-
-  protected horizontalConnectorClass(
-    isFirst: boolean,
-    isLast: boolean,
-  ): string {
-    if (this.direction() === 'vertical') {
-      return cn(
-        'absolute top-0 h-6 bg-border',
-        'w-px',
-        // Horizontal line connecting siblings
-        !isFirst &&
-          !isLast &&
-          'before:absolute before:top-0 before:left-1/2 before:w-full before:h-px before:bg-border before:-translate-x-1/2',
-        isFirst &&
-          !isLast &&
-          'before:absolute before:top-0 before:left-1/2 before:w-[calc(50%+0.5rem)] before:h-px before:bg-border',
-        !isFirst &&
-          isLast &&
-          'before:absolute before:top-0 before:right-1/2 before:w-[calc(50%+0.5rem)] before:h-px before:bg-border',
-      );
-    } else {
-      return cn(
-        'absolute left-0 w-6 bg-border',
-        'h-px',
-        !isFirst &&
-          !isLast &&
-          'before:absolute before:left-0 before:top-1/2 before:h-full before:w-px before:bg-border before:-translate-y-1/2',
-        isFirst &&
-          !isLast &&
-          'before:absolute before:left-0 before:top-1/2 before:h-[calc(50%+0.5rem)] before:w-px before:bg-border',
-        !isFirst &&
-          isLast &&
-          'before:absolute before:left-0 before:bottom-1/2 before:h-[calc(50%+0.5rem)] before:w-px before:bg-border',
-      );
-    }
-  }
-
-  getInitials(name: string): string {
-    return name
-      .split(' ')
-      .map((part) => part[0])
-      .join('')
-      .toUpperCase()
-      .slice(0, 2);
-  }
-
-  onNodeClick(event: MouseEvent): void {
-    this.nodeClick.emit({ node: this.node(), event });
-
-    if (this.collapsible() && this.hasChildren()) {
-      const newExpanded = !this.isExpanded();
-      this.expanded.set(newExpanded);
-      this.nodeExpand.emit({ node: this.node(), expanded: newExpanded });
-    }
-  }
-}

package/src/lib/components/org-chart/org-chart-types.ts

@@ -1,22 +0,0 @@
-export interface OrgChartNode {
-  id: string;
-  name: string;
-  title?: string;
-  avatar?: string;
-  department?: string;
-  children?: OrgChartNode[];
-  expanded?: boolean;
-  data?: Record<string, unknown>;
-}
-
-export type OrgChartDirection = 'vertical' | 'horizontal';
-
-export interface OrgChartNodeClickEvent {
-  node: OrgChartNode;
-  event: MouseEvent;
-}
-
-export interface OrgChartNodeExpandEvent {
-  node: OrgChartNode;
-  expanded: boolean;
-}

package/src/lib/components/org-chart/org-chart.ts

@@ -1,67 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  output,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScOrgChartNode } from './org-chart-node';
-import type {
-  OrgChartDirection,
-  OrgChartNode,
-  OrgChartNodeClickEvent,
-  OrgChartNodeExpandEvent,
-} from './org-chart-types';
-
-@Component({
-  selector: 'sc-org-chart',
-  imports: [ScOrgChartNode],
-  template: `
-    <div [class]="containerClass()" role="tree" [attr.aria-label]="ariaLabel()">
-      @if (data()) {
-        <sc-org-chart-node
-          [node]="data()!"
-          [direction]="direction()"
-          [collapsible]="collapsible()"
-          [compact]="compact()"
-          (nodeClick)="nodeClick.emit($event)"
-          (nodeExpand)="nodeExpand.emit($event)"
-        />
-      } @else {
-        <div class="text-muted-foreground text-sm p-4">
-          No organization data available
-        </div>
-      }
-    </div>
-  `,
-  styles: `
-    :host {
-      display: block;
-    }
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScOrgChart {
-  readonly data = input<OrgChartNode | null>(null);
-  readonly direction = input<OrgChartDirection>('vertical');
-  readonly collapsible = input(true);
-  readonly compact = input(false);
-  readonly ariaLabel = input<string>('Organization chart');
-  readonly class = input<string>('');
-
-  readonly nodeClick = output<OrgChartNodeClickEvent>();
-  readonly nodeExpand = output<OrgChartNodeExpandEvent>();
-
-  protected readonly containerClass = computed(() =>
-    cn(
-      'inline-flex overflow-auto p-4',
-      this.direction() === 'vertical'
-        ? 'flex-col items-center'
-        : 'flex-row items-start',
-      this.class(),
-    ),
-  );
-}