@tuturuuu/utils 0.0.2 → 0.6.0

package/src/keyboard-preset.ts

@@ -0,0 +1,109 @@
+import {
+  closestCorners,
+  type DroppableContainer,
+  getFirstCollision,
+  KeyboardCode,
+  type KeyboardCoordinateGetter,
+} from '@dnd-kit/core';
+
+const directions: string[] = [
+  KeyboardCode.Down,
+  KeyboardCode.Right,
+  KeyboardCode.Up,
+  KeyboardCode.Left,
+];
+
+export const coordinateGetter: KeyboardCoordinateGetter = (
+  event,
+  { context: { active, droppableRects, droppableContainers, collisionRect } }
+) => {
+  if (directions.includes(event.code)) {
+    event.preventDefault();
+
+    if (!active || !collisionRect) {
+      return;
+    }
+
+    const filteredContainers: DroppableContainer[] = [];
+
+    droppableContainers.getEnabled().forEach((entry) => {
+      if (!entry || entry?.disabled) {
+        return;
+      }
+
+      const rect = droppableRects.get(entry.id);
+
+      if (!rect) {
+        return;
+      }
+
+      const data = entry.data.current;
+
+      if (data) {
+        const { type, children } = data;
+
+        if (type === 'Column' && children?.length > 0) {
+          if (active.data.current?.type !== 'Column') {
+            return;
+          }
+        }
+      }
+
+      switch (event.code) {
+        case KeyboardCode.Down:
+          if (active.data.current?.type === 'Column') {
+            return;
+          }
+          if (collisionRect.top < rect.top) {
+            // find all droppable areas below
+            filteredContainers.push(entry);
+          }
+          break;
+        case KeyboardCode.Up:
+          if (active.data.current?.type === 'Column') {
+            return;
+          }
+          if (collisionRect.top > rect.top) {
+            // find all droppable areas above
+            filteredContainers.push(entry);
+          }
+          break;
+        case KeyboardCode.Left:
+          if (collisionRect.left >= rect.left + rect.width) {
+            // find all droppable areas to left
+            filteredContainers.push(entry);
+          }
+          break;
+        case KeyboardCode.Right:
+          // find all droppable areas to right
+          if (collisionRect.left + collisionRect.width <= rect.left) {
+            filteredContainers.push(entry);
+          }
+          break;
+      }
+    });
+    const collisions = closestCorners({
+      active,
+      collisionRect: collisionRect,
+      droppableRects,
+      droppableContainers: filteredContainers,
+      pointerCoordinates: null,
+    });
+    const closestId = getFirstCollision(collisions, 'id');
+
+    if (closestId != null) {
+      const newDroppable = droppableContainers.get(closestId);
+      const newNode = newDroppable?.node.current;
+      const newRect = newDroppable?.rect.current;
+
+      if (newNode && newRect) {
+        return {
+          x: newRect.left,
+          y: newRect.top,
+        };
+      }
+    }
+  }
+
+  return undefined;
+};

package/src/label-colors.ts

@@ -0,0 +1,213 @@
+/**
+ * Label color utilities for computing accessible label styles with proper contrast.
+ * These functions handle color normalization, luminance calculation, and automatic
+ * color adjustments to ensure accessibility standards are met.
+ */
+
+/**
+ * Normalize a hex color string to a standard 6-character format.
+ * Handles both 3-character and 6-character hex codes, with or without # prefix.
+ *
+ * @param input - Raw color string (e.g., "#f00", "ff0000", "#ff0000")
+ * @returns Normalized hex string with # prefix, or null if invalid
+ */
+function normalizeHex(input: string): string | null {
+  if (!input) return null;
+  let c = input.trim();
+  if (c.startsWith('#')) c = c.slice(1);
+  if (c.length === 3) {
+    c = c
+      .split('')
+      .map((ch) => ch + ch)
+      .join('');
+  }
+  if (c.length !== 6) return null;
+  if (!/^[0-9a-fA-F]{6}$/.test(c)) return null;
+  return `#${c.toLowerCase()}`;
+}
+
+/**
+ * Convert a hex color to RGB values.
+ *
+ * @param hex - Hex color string
+ * @returns RGB object with r, g, b values (0-255), or null if invalid
+ */
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  const n = normalizeHex(hex);
+  if (!n) return null;
+  const r = parseInt(n.substring(1, 3), 16);
+  const g = parseInt(n.substring(3, 5), 16);
+  const b = parseInt(n.substring(5, 7), 16);
+  return { r, g, b };
+}
+
+/**
+ * Calculate the relative luminance of an RGB color.
+ * Uses the WCAG formula for luminance calculation.
+ *
+ * @param rgb - RGB color object
+ * @returns Relative luminance value (0-1)
+ */
+function luminance({ r, g, b }: { r: number; g: number; b: number }): number {
+  const channel = (v: number) => {
+    const s = v / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+
+/**
+ * Adjust the brightness of a hex color by modifying its lightness.
+ * Converts to HSL, adjusts lightness and saturation, then converts back to hex.
+ *
+ * @param hex - Hex color string
+ * @param factor - Brightness factor (< 1 darkens, > 1 lightens)
+ * @returns Adjusted hex color string
+ */
+function adjust(hex: string, factor: number): string {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  const rN = rgb.r / 255;
+  const gN = rgb.g / 255;
+  const bN = rgb.b / 255;
+  const max = Math.max(rN, gN, bN);
+  const min = Math.min(rN, gN, bN);
+  let h = 0;
+  const l = (max + min) / 2;
+  const d = max - min;
+  let s = 0;
+  if (d !== 0) {
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case rN:
+        h = (gN - bN) / d + (gN < bN ? 6 : 0);
+        break;
+      case gN:
+        h = (bN - rN) / d + 2;
+        break;
+      default:
+        h = (rN - gN) / d + 4;
+    }
+    h /= 6;
+  }
+  const targetL = Math.min(
+    1,
+    Math.max(0, l * (factor >= 1 ? 1 + (factor - 1) * 0.75 : factor))
+  );
+  const targetS = factor > 1 && targetL > 0.7 ? s * 0.85 : s;
+  const hue2rgb = (p: number, q: number, t: number) => {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+  const q =
+    targetL < 0.5
+      ? targetL * (1 + targetS)
+      : targetL + targetS - targetL * targetS;
+  const p = 2 * targetL - q;
+  const r = Math.round(hue2rgb(p, q, h + 1 / 3) * 255);
+  const g = Math.round(hue2rgb(p, q, h) * 255);
+  const b = Math.round(hue2rgb(p, q, h - 1 / 3) * 255);
+  return `#${[r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('')}`;
+}
+
+/**
+ * Color name to hex mapping for common color names.
+ * Supports Tailwind-style color names.
+ */
+const COLOR_NAME_MAP: Record<string, string> = {
+  red: '#ef4444',
+  orange: '#f97316',
+  amber: '#f59e0b',
+  yellow: '#eab308',
+  lime: '#84cc16',
+  green: '#22c55e',
+  emerald: '#10b981',
+  teal: '#14b8a6',
+  cyan: '#06b6d4',
+  sky: '#0ea5e9',
+  blue: '#3b82f6',
+  indigo: '#6366f1',
+  violet: '#8b5cf6',
+  purple: '#a855f7',
+  fuchsia: '#d946ef',
+  pink: '#ec4899',
+  rose: '#f43f5e',
+  gray: '#6b7280',
+  slate: '#64748b',
+  zinc: '#71717a',
+};
+
+export interface AccessibleLabelStyles {
+  bg: string;
+  border: string;
+  text: string;
+}
+
+/**
+ * Compute accessible label styles based on theme.
+ *
+ * @param raw - Raw color input (hex code or color name)
+ * @param isDark - Whether current theme is dark mode
+ */
+export function computeAccessibleLabelStyles(
+  raw: string | null | undefined,
+  isDark?: boolean
+): AccessibleLabelStyles | null {
+  if (typeof raw !== 'string') return null;
+  const normalizedRaw = raw.trim();
+  if (!normalizedRaw) return null;
+
+  const baseHex =
+    normalizeHex(normalizedRaw) ||
+    COLOR_NAME_MAP[normalizedRaw.toLowerCase()] ||
+    null;
+  if (!baseHex) return null;
+
+  const rgb = hexToRgb(baseHex);
+  if (!rgb) return null;
+  const lum = luminance(rgb);
+
+  const bg = `${baseHex}1a`;
+  let border: string;
+  let text = baseHex;
+
+  // Backward-compatible default behavior used across existing packages.
+  if (typeof isDark !== 'boolean') {
+    border = `${baseHex}4d`;
+    if (lum < 0.22) {
+      text = adjust(baseHex, 1.25);
+    } else if (lum > 0.82) {
+      text = adjust(baseHex, 0.65);
+    }
+    return { bg, border, text };
+  }
+
+  if (isDark) {
+    border = `${baseHex}4d`;
+    if (lum < 0.35) {
+      text = adjust(baseHex, 1.5);
+    } else if (lum < 0.6) {
+      text = adjust(baseHex, 1.25);
+    } else if (lum > 0.85) {
+      text = adjust(baseHex, 0.9);
+    }
+  } else {
+    border = `${baseHex}66`;
+    if (lum < 0.18) {
+      text = adjust(baseHex, 1.2);
+      border = `${baseHex}4d`;
+    } else if (lum > 0.82) {
+      text = adjust(baseHex, 0.45);
+      border = `${adjust(baseHex, 0.45)}99`;
+    } else if (lum > 0.5) {
+      text = adjust(baseHex, 0.65);
+      border = `${adjust(baseHex, 0.65)}99`;
+    }
+  }
+
+  return { bg, border, text };
+}

package/src/launchable-apps.test.ts

@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest';
+import {
+  getLaunchableApp,
+  getLaunchableAppByTitle,
+  getLaunchableAppOrigin,
+  type LaunchableWorkspace,
+  resolveLaunchableAppPath,
+  resolveLaunchableAppUrl,
+} from './launchable-apps';
+
+const personalWorkspace: LaunchableWorkspace = {
+  id: 'workspace-id',
+  name: 'Personal',
+  personal: true,
+};
+
+const teamWorkspace: LaunchableWorkspace = {
+  id: 'team-workspace',
+  name: 'Team Workspace',
+  personal: false,
+};
+
+describe('launchable apps', () => {
+  it('resolves apps by slug, title, and aliases', () => {
+    expect(getLaunchableApp('calendar')?.title).toBe('Calendar');
+    expect(getLaunchableAppByTitle('Tuturuuu')?.slug).toBe('platform');
+    expect(getLaunchableAppByTitle('apps gateway')?.slug).toBe('apps');
+  });
+
+  it('resolves production, Portless, and local origins', () => {
+    const app = getLaunchableApp('calendar');
+
+    expect(app).not.toBeNull();
+    expect(getLaunchableAppOrigin(app!, { environment: 'production' })).toBe(
+      'https://calendar.tuturuuu.com'
+    );
+    expect(getLaunchableAppOrigin(app!, { environment: 'portless' })).toBe(
+      'https://calendar.tuturuuu.localhost'
+    );
+    expect(getLaunchableAppOrigin(app!, { environment: 'localhost' })).toBe(
+      'http://localhost:7806'
+    );
+
+    const meet = getLaunchableApp('meet');
+    expect(meet).not.toBeNull();
+    expect(getLaunchableAppOrigin(meet!, { environment: 'production' })).toBe(
+      'https://meet.tuturuuu.com'
+    );
+  });
+
+  it('detects Portless dev from the current origin', () => {
+    const app = getLaunchableApp('tasks');
+
+    expect(app).not.toBeNull();
+    expect(
+      getLaunchableAppOrigin(app!, {
+        currentOrigin: 'https://calendar.tuturuuu.localhost',
+      })
+    ).toBe('https://tasks.tuturuuu.localhost');
+  });
+
+  it('uses default paths when no workspace is provided', () => {
+    const app = getLaunchableApp('learn');
+
+    expect(app).not.toBeNull();
+    expect(resolveLaunchableAppPath({ app: app! })).toBe('/dashboard');
+  });
+
+  it('uses workspace-aware paths and personal slugs', () => {
+    const platform = getLaunchableApp('platform');
+    const tasks = getLaunchableApp('tasks');
+    const meet = getLaunchableApp('meet');
+
+    expect(platform).not.toBeNull();
+    expect(tasks).not.toBeNull();
+    expect(meet).not.toBeNull();
+    expect(
+      resolveLaunchableAppPath({
+        app: platform!,
+        workspace: personalWorkspace,
+      })
+    ).toBe('/personal');
+    expect(
+      resolveLaunchableAppPath({
+        app: tasks!,
+        workspace: teamWorkspace,
+      })
+    ).toBe('/team-workspace/tasks');
+    expect(
+      resolveLaunchableAppPath({
+        app: meet!,
+        workspace: teamWorkspace,
+      })
+    ).toBe('/workspace/team-workspace');
+  });
+
+  it('lets callers override workspace path resolution', () => {
+    const app = getLaunchableApp('calendar');
+
+    expect(app).not.toBeNull();
+    expect(
+      resolveLaunchableAppPath({
+        app: app!,
+        workspace: teamWorkspace,
+        workspacePathResolver: (workspace) => `/custom/${workspace.id}`,
+      })
+    ).toBe('/custom/team-workspace');
+  });
+
+  it('resolves full URLs with paths and search params', () => {
+    const app = getLaunchableApp('finance');
+
+    expect(app).not.toBeNull();
+    expect(
+      resolveLaunchableAppUrl({
+        app: app!,
+        environment: 'production',
+        searchParams: {
+          source: 'command',
+          tag: ['a', 'b'],
+        },
+        workspace: personalWorkspace,
+      })
+    ).toBe('https://finance.tuturuuu.com/personal?source=command&tag=a&tag=b');
+  });
+});