@drakkar.software/octospaces-ui 0.2.1 → 0.4.0

package/src/sidebar/tile-state.test.ts

@@ -0,0 +1,126 @@
+import { describe, it, expect } from 'vitest';
+import { railTileState } from './tile-state.js';
+import type { RailTileTokens } from './tile-state.js';
+
+// ── Shared fixtures ────────────────────────────────────────────────────────────
+
+const tokens: RailTileTokens = {
+  primary: '#0e7090',
+  primaryMuted: '#e0f2f8',
+  primarySubtle: '#cce9f3',
+  surfaceInput: '#f0f4f6',
+  borderSubtle: '#d1dde3',
+  textOnPrimary: '#ffffff',
+  textSecondary: '#5c7080',
+  textTertiary: '#8a9daa',
+  railTile: '#e8edf0',
+  railTileHoverBorder: '#90c8da',
+  railGlow: '#5bc8e2',
+  railTileHoverInk: '#0e7090',
+};
+
+const RADIUS_ACTIVE = 12;
+const RADIUS_DEFAULT = 16;
+
+// ── railTileState ──────────────────────────────────────────────────────────────
+
+describe('railTileState — active tile', () => {
+  it('uses primary bg with no border', () => {
+    const style = railTileState({ active: true, hovered: false, over: false }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.bg).toBe(tokens.primary);
+    expect(style.borderWidth).toBe(0);
+    expect(style.borderColor).toBe('transparent');
+  });
+
+  it('uses textOnPrimary label color', () => {
+    const style = railTileState({ active: true, hovered: false, over: false }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.labelColor).toBe(tokens.textOnPrimary);
+  });
+
+  it('applies a glow shadow', () => {
+    const style = railTileState({ active: true, hovered: false, over: false }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.shadow).not.toBeNull();
+    expect(style.shadow!.shadowColor).toBe(tokens.railGlow);
+  });
+
+  it('uses the active (smaller) radius', () => {
+    const style = railTileState({ active: true, hovered: false, over: false }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.radius).toBe(RADIUS_ACTIVE);
+  });
+});
+
+describe('railTileState — hovered tile (not active)', () => {
+  it('uses primaryMuted bg', () => {
+    const style = railTileState({ active: false, hovered: true, over: false }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.bg).toBe(tokens.primaryMuted);
+  });
+
+  it('uses railTileHoverBorder as border color', () => {
+    const style = railTileState({ active: false, hovered: true, over: false }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.borderColor).toBe(tokens.railTileHoverBorder);
+    expect(style.borderWidth).toBe(1);
+  });
+
+  it('uses railTileHoverInk as label color', () => {
+    const style = railTileState({ active: false, hovered: true, over: false }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.labelColor).toBe(tokens.railTileHoverInk);
+  });
+
+  it('uses the active (smaller) radius when hovered', () => {
+    const style = railTileState({ active: false, hovered: true, over: false }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.radius).toBe(RADIUS_ACTIVE);
+  });
+
+  it('has no glow shadow', () => {
+    const style = railTileState({ active: false, hovered: true, over: false }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.shadow).toBeNull();
+  });
+});
+
+describe('railTileState — resting tile (not active, not hovered)', () => {
+  it('uses railTile bg token', () => {
+    const style = railTileState({ active: false, hovered: false, over: false }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.bg).toBe(tokens.railTile);
+  });
+
+  it('uses borderSubtle and borderWidth 1', () => {
+    const style = railTileState({ active: false, hovered: false, over: false }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.borderColor).toBe(tokens.borderSubtle);
+    expect(style.borderWidth).toBe(1);
+  });
+
+  it('uses textSecondary label color', () => {
+    const style = railTileState({ active: false, hovered: false, over: false }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.labelColor).toBe(tokens.textSecondary);
+  });
+
+  it('uses the default (larger) radius', () => {
+    const style = railTileState({ active: false, hovered: false, over: false }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.radius).toBe(RADIUS_DEFAULT);
+  });
+
+  it('has no glow shadow', () => {
+    const style = railTileState({ active: false, hovered: false, over: false }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.shadow).toBeNull();
+  });
+});
+
+describe('railTileState — drop-over state (DnD target)', () => {
+  it('shows primary border when another tile is dragged over (not active)', () => {
+    const style = railTileState({ active: false, hovered: false, over: true }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.borderColor).toBe(tokens.primary);
+    expect(style.borderWidth).toBe(1);
+  });
+
+  it('uses the active radius when over', () => {
+    const style = railTileState({ active: false, hovered: false, over: true }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    expect(style.radius).toBe(RADIUS_ACTIVE);
+  });
+
+  it('does NOT override border when tile is active (active wins)', () => {
+    const style = railTileState({ active: true, hovered: false, over: true }, tokens, RADIUS_ACTIVE, RADIUS_DEFAULT);
+    // Active tile keeps its no-border style even when over
+    expect(style.borderWidth).toBe(0);
+    expect(style.borderColor).toBe('transparent');
+  });
+});

package/src/sidebar/tile-state.ts

@@ -0,0 +1,100 @@
+/**
+ * Pure helper: maps tile interaction state + resolved theme tokens → visual style.
+ * No React or React Native imports — fully testable in isolation.
+ */
+import type { ShadowToken } from '../theme/types.js';
+import { glowShadow } from '../theme/helpers.js';
+
+// ── Token contract ─────────────────────────────────────────────────────────────
+
+/**
+ * Resolved color tokens consumed by {@link railTileState}. Built from a `Theme`
+ * object in the component layer (see `resolveRailTokens` in `SpacesRail.tsx`).
+ * Swatch entries fall back to palette tokens when the host app hasn't set them.
+ */
+export interface RailTileTokens {
+  // Core palette tokens
+  primary: string;
+  primaryMuted: string;
+  primarySubtle: string;
+  surfaceInput: string;
+  borderSubtle: string;
+  textOnPrimary: string;
+  textSecondary: string;
+  textTertiary: string;
+  // Optional swatch overrides (host app can tune rail-specific colors)
+  railTile: string;           // swatch 'railTile'    ?? surfaceInput
+  railTileHoverBorder: string; // swatch 'railTileHoverBorder' ?? primarySubtle
+  railGlow: string;           // swatch 'railGlow'    ?? primary
+  railTileHoverInk: string;   // swatch 'railTileHoverInk' ?? primary
+}
+
+// ── Output ─────────────────────────────────────────────────────────────────────
+
+/** Resolved visual properties for a single rail tile. */
+export interface RailTileStyle {
+  /** Tile background color. */
+  bg: string;
+  /** Tile border color. */
+  borderColor: string;
+  /** Tile border width (0 when active, 1 otherwise). */
+  borderWidth: number;
+  /** Tile border-radius in pixels (squared-off when active/hovered, rounded otherwise). */
+  radius: number;
+  /** Monogram label color. */
+  labelColor: string;
+  /** Active glow shadow, or `null` when not active. */
+  shadow: ShadowToken | null;
+}
+
+// ── Mapping ────────────────────────────────────────────────────────────────────
+
+/**
+ * Map tile interaction state to visual style tokens.
+ *
+ * @param state     Current interaction state.
+ * @param tokens    Resolved color tokens (see {@link RailTileTokens}).
+ * @param radiusActive   Border-radius when the tile is active or hovered (squarer look).
+ * @param radiusDefault  Border-radius for the resting state (rounder look).
+ */
+export function railTileState(
+  state: { active: boolean; hovered: boolean; over: boolean },
+  tokens: RailTileTokens,
+  radiusActive: number,
+  radiusDefault: number,
+): RailTileStyle {
+  const { active, hovered, over } = state;
+
+  let bg: string;
+  let borderColor: string;
+  let borderWidth: number;
+  let labelColor: string;
+
+  if (active) {
+    bg = tokens.primary;
+    borderColor = 'transparent';
+    borderWidth = 0;
+    labelColor = tokens.textOnPrimary;
+  } else if (hovered) {
+    bg = tokens.primaryMuted;
+    borderColor = tokens.railTileHoverBorder;
+    borderWidth = 1;
+    labelColor = tokens.railTileHoverInk;
+  } else {
+    bg = tokens.railTile;
+    borderColor = tokens.borderSubtle;
+    borderWidth = 1;
+    labelColor = tokens.textSecondary;
+  }
+
+  // Drop-target overlay: accent border when a dragged tile is over this one.
+  if (over && !active) {
+    borderColor = tokens.primary;
+    borderWidth = 1;
+  }
+
+  const radius = active || hovered || over ? radiusActive : radiusDefault;
+  const shadow: ShadowToken | null = active ? glowShadow(tokens.railGlow, 8, 0.3) : null;
+
+  return { bg, borderColor, borderWidth, radius, labelColor, shadow };
+}

package/src/sidebar/types.ts

@@ -0,0 +1,25 @@
+/**
+ * Shared types for the SpacesRail component.
+ *
+ * Structurally compatible with `Space` from `@drakkar.software/octochat-sdk` /
+ * `@drakkar.software/octospaces-sdk` — apps can pass their domain objects directly
+ * without a runtime conversion step.
+ */
+
+/** A minimal space descriptor for the rail: id + display info + badge state. */
+export interface RailSpace {
+  /** Unique space identifier. */
+  id: string;
+  /** Short display name or initials shown as a monogram when no image is available. */
+  short: string;
+  /** Optional image URI (data URI or URL) rendered as the tile background via
+   *  `SpacesRailProps.renderTileImage`. */
+  image?: string;
+  /** Unread-message count shown as a badge overlay. */
+  unread?: number;
+  /** Whether the space is muted (shows a mute-corner icon when `renderIcon` is provided). */
+  muted?: boolean;
+}
+
+/** Named icon slots injected into the rail via `SpacesRailProps.renderIcon`. */
+export type RailIconName = 'dm' | 'lock' | 'mute' | 'add';

package/src/theme/helpers.test.ts

@@ -18,6 +18,7 @@ const mockPalette: Palette = {
   surfaceModal: '#333',
   surfaceInput: '#444',
   sidebar: '#555',
+  sidebarPanel: '#55a',
   sidebarActive: '#666',
   border: '#777',
   borderSubtle: '#888',

package/src/theme/types.ts

@@ -27,6 +27,7 @@ export interface Palette {
   surfaceModal: string;
   surfaceInput: string;
   sidebar: string;
+  sidebarPanel: string;
   sidebarActive: string;
 
   // ── Borders + dividers ────────────────────────────────────────────────────