@cardstack/boxel-cli 0.2.0-unstable.448 → 0.3.0-unstable.13

package/bundled-types/boxel-ui/helpers/contrast-color.ts

@@ -0,0 +1,32 @@
+import {
+  calculateContrast,
+  calculateLuminance,
+  hexToRgb,
+  targetContrast,
+  targetContrastAAA,
+} from './color-tools.ts';
+
+/*
+  Takes in a hex color code and returns black or white depending on the contrast ratio.
+  Useful for situations where you need to display text on top of a dynamic background-color.
+  Example: '#ffeb00' returns '#000000' (black); '#1a4f76' returns '#ffffff' (white)
+  Inspired by https://stackoverflow.com/a/35970186
+  More info: https://www.w3.org/TR/WCAG20-TECHS/G18.html
+*/
+export function getContrastColor(
+  value: string | undefined,
+  darkColor = 'var(--boxel-dark, #000000)',
+  lightColor = 'var(--boxel-light, #ffffff)',
+  opts?: { isSmallText: true },
+) {
+  if (!value) {
+    return;
+  }
+  let rgb = hexToRgb(value);
+  if (!rgb) {
+    return;
+  }
+  let ratio = calculateContrast(calculateLuminance(rgb), 0); // luminocity of black is 0
+  let contrastLevel = opts?.isSmallText ? targetContrastAAA : targetContrast;
+  return ratio >= contrastLevel ? darkColor : lightColor;
+}

package/bundled-types/boxel-ui/helpers/css-var.ts

@@ -0,0 +1,41 @@
+import { helper } from '@ember/component/helper';
+import { htmlSafe } from '@ember/template';
+
+type CSSValueOrFuncReturningCSSValue =
+  | string
+  | number
+  | (() => string)
+  | undefined;
+
+function formatValue(value: CSSValueOrFuncReturningCSSValue) {
+  if (typeof value === 'function') {
+    value = value();
+  }
+  if (typeof value === 'number') {
+    value = value.toString();
+  }
+
+  return value;
+}
+
+export function cssVar(
+  values: Record<string, CSSValueOrFuncReturningCSSValue>,
+): string {
+  let vars: string[] = [];
+  Object.keys(values).forEach((name) => {
+    let formattedValue = formatValue(values[name]);
+    if (!formattedValue) {
+      return;
+    }
+    vars.push(`--${name}: ${formattedValue}`);
+  });
+
+  return vars.join('; ');
+}
+
+export default helper(function (
+  _params,
+  hash: Record<string, CSSValueOrFuncReturningCSSValue>,
+) {
+  return htmlSafe(cssVar(hash));
+});

package/bundled-types/boxel-ui/helpers/currency-format.ts

@@ -0,0 +1,25 @@
+import { helper } from '@ember/component/helper';
+
+const DEFAULT_CURRENCY = 'USD';
+
+export interface Signature {
+  Args: {
+    Positional: [value: number, currency?: string];
+  };
+  Return: string;
+}
+
+export function currencyFormat(
+  value: number,
+  currency: string = DEFAULT_CURRENCY,
+) {
+  const formatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: currency,
+  });
+  return formatter.format(value);
+}
+
+export default helper<Signature>(function ([value, currency]) {
+  return currencyFormat(value, currency || DEFAULT_CURRENCY);
+});

package/bundled-types/boxel-ui/helpers/dayjs-format.ts

@@ -0,0 +1,27 @@
+import dayjs from 'dayjs';
+
+const DEFAULT_LOCALE = 'en';
+const DEFAULT_OUTPUT_FORMAT = 'D MMMM, YYYY';
+
+/**
+ * Deprecated: Use `formatDateTime` instead.
+ *
+ * Utility function for formatting dates in JavaScript/TypeScript code.
+ * Use this function when you need to format dates in your component logic,
+ * computed properties, or any JavaScript/TypeScript code.
+ *
+ * @example
+ * const formatted = formatDateTime(date, "MMM D, YYYY");
+ */
+export function dayjsFormat(
+  date: dayjs.ConfigType,
+  formatString: string = DEFAULT_OUTPUT_FORMAT,
+  locale: string = DEFAULT_LOCALE,
+  option?: dayjs.OptionType,
+): string {
+  if (option) {
+    return dayjs(date, option).locale(locale).format(formatString);
+  } else {
+    return dayjs(date).locale(locale).format(formatString);
+  }
+}

package/bundled-types/boxel-ui/helpers/deterministic-color-from-string.ts

@@ -0,0 +1,45 @@
+import {
+  calculateContrast,
+  calculateLuminance,
+  hslToRgb,
+  rgbToHexString,
+  targetContrast,
+} from './color-tools.ts';
+
+// Selects a random color from a set of colors based on the input string
+export function deterministicColorFromString(str?: string | null): string {
+  if (!str) {
+    return '#EEEEEE';
+  }
+
+  // Generate hash value between 0-1
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  hash = Math.abs(hash);
+
+  const hue = hash % 360;
+  const saturation = 65 + (hash % 15); // 65-80% for better contrast
+
+  let lightness = 50; // Starting lightness value
+  let rgb = hslToRgb({ h: hue, s: saturation, l: lightness });
+
+  // Adjust lightness to ensure target contrast ratio or above
+  while (lightness <= 100) {
+    const luminance = calculateLuminance(rgb);
+    const contrastWithBlack = calculateContrast(luminance, 0); // Black luminance = 0
+    const contrastWithWhite = calculateContrast(luminance, 1); // White luminance = 1
+    // Check if the color meets contrast requirements against black or white
+    if (
+      contrastWithBlack >= targetContrast ||
+      contrastWithWhite >= targetContrast
+    ) {
+      break;
+    }
+    lightness++;
+    rgb = hslToRgb({ h: hue, s: saturation, l: lightness });
+  }
+
+  return rgbToHexString(rgb);
+}

package/bundled-types/boxel-ui/helpers/element.ts

@@ -0,0 +1,16 @@
+/* eslint-disable ember/no-classic-components */
+import EmberComponent from '@ember/component';
+import type { ComponentLike } from '@glint/template';
+
+interface Signature<T extends keyof HTMLElementTagNameMap> {
+  Blocks: { default: [] };
+  Element: HTMLElementTagNameMap[T];
+}
+
+export default function element<T extends keyof HTMLElementTagNameMap>(
+  tagName: T | undefined,
+): ComponentLike<Signature<T>> {
+  return class DynamicElement extends EmberComponent<Signature<T>> {
+    tagName = (tagName ?? ('div' as T)) as string;
+  };
+}

package/bundled-types/boxel-ui/helpers/extract-css-variables.ts

@@ -0,0 +1,126 @@
+import {
+  type CssGroups,
+  type CssRuleMap,
+  normalizeCssValue,
+  normalizeSelector,
+} from './theme-css.ts';
+
+const COMMENT_PATTERN = /\/\*[\s\S]*?\*\//g;
+const BLOCK_PATTERN = /(.*?)\{([\s\S]*?)\}/g;
+const PROPERTY_PATTERN = /^[a-z\d-]+$/i;
+
+// Turns a CSS declaration block into a property-value map.
+const parseCssDeclarations = (rules?: string): CssRuleMap | undefined => {
+  if (!rules?.trim()) {
+    return;
+  }
+
+  const cssMap: CssRuleMap = new Map();
+  let normalizedRules = rules
+    .split(';')
+    .map((rule) => rule.replace(/[\r\n]+/g, ' ').trim())
+    .map((rule) => rule.replace(/\s{2,}/g, ' '))
+    .filter(Boolean);
+
+  const entries: Array<[string, string]> = [];
+  for (const declaration of normalizedRules) {
+    const colonIndex = declaration.indexOf(':');
+    if (colonIndex <= 0) {
+      console.warn(
+        'parseCssDeclarations: skipping declaration without colon ("%s")',
+        declaration,
+      );
+      continue;
+    }
+    const property = declaration.slice(0, colonIndex).trim();
+    const value = declaration.slice(colonIndex + 1).trim();
+    if (
+      !property ||
+      (!property.startsWith('--') && !PROPERTY_PATTERN.test(property))
+    ) {
+      console.warn(
+        'parseCssDeclarations: skipping invalid property "%s"',
+        property,
+      );
+      continue;
+    }
+    const normalizedValue = normalizeCssValue(value);
+    if (!normalizedValue) {
+      continue;
+    }
+    entries.push([property, normalizedValue]);
+  }
+
+  entries.sort(([a], [b]) => a.localeCompare(b));
+  for (const [property, normalizedValue] of entries) {
+    cssMap.set(property, normalizedValue);
+  }
+
+  return cssMap.size ? cssMap : undefined;
+};
+
+// Groups selectors and their declaration maps from raw CSS text.
+export function parseCssGroups(
+  cssString?: string | null,
+): CssGroups | undefined {
+  const sanitized = cssString
+    ? cssString.replace(COMMENT_PATTERN, ' ').trim()
+    : '';
+  if (!sanitized) {
+    return;
+  }
+
+  const groups: CssGroups = new Map();
+  for (const match of sanitized.matchAll(BLOCK_PATTERN)) {
+    const selectorSource = match[1]?.trim();
+    const selector = selectorSource
+      ? (normalizeSelector(selectorSource) ?? ':root')
+      : ':root';
+    const rules = parseCssDeclarations(match[2]);
+    if (!rules?.size) {
+      continue;
+    }
+    const existing = groups.get(selector) ?? new Map();
+    for (const [property, value] of rules) {
+      existing.set(property, value);
+    }
+    groups.set(selector, existing);
+  }
+
+  if (!groups.size) {
+    const fallbackRules = parseCssDeclarations(sanitized);
+    if (fallbackRules?.size) {
+      groups.set(':root', fallbackRules);
+    }
+  }
+
+  return groups.size ? groups : undefined;
+}
+
+// Returns the variables for a requested selector as `--name: value;` string.
+export function extractCssVariables(
+  cssString?: string | null,
+  selector = ':root',
+): string | undefined {
+  try {
+    const groups = parseCssGroups(cssString);
+    if (!groups?.size) {
+      return;
+    }
+
+    const normalizedSelector = selector
+      ? (normalizeSelector(selector) ?? ':root')
+      : ':root';
+    const rules = groups.get(normalizedSelector);
+    if (!rules?.size) {
+      return;
+    }
+    return [...rules.entries()]
+      .filter(([property]) => property.startsWith('--'))
+      .map(([property, value]) => `${property}: ${value}`)
+      .join('; ');
+  } catch (error) {
+    console.error('Error extracting CSS variables:', error);
+    return;
+  }
+}

package/bundled-types/boxel-ui/helpers/format-age.ts

@@ -0,0 +1,72 @@
+export default function formatAge(
+  birthdate: Date | string | null | undefined,
+  options: {
+    fallback?: string;
+    locale?: string;
+    precise?: boolean;
+    unit?: 'auto' | 'years' | 'months' | 'days';
+  } = {},
+): string {
+  // Stub implementation - will be replaced with actual logic
+  if (birthdate == null) {
+    return options.fallback || '';
+  }
+
+  let date: Date;
+  if (typeof birthdate === 'string') {
+    date = new Date(birthdate);
+  } else if (birthdate instanceof Date) {
+    date = birthdate;
+  } else {
+    return options.fallback || '';
+  }
+
+  if (isNaN(date.getTime())) {
+    return options.fallback || '';
+  }
+
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+
+  if (diffMs < 0) {
+    return options.fallback || '';
+  }
+
+  const { unit = 'auto', precise = false, locale = 'en-US' } = options;
+
+  // Helper function to format time units with internationalization
+  const formatTimeUnit = (value: number, unit: 'year' | 'month' | 'day') => {
+    // Use Intl.NumberFormat with unit style for proper pluralization and localization
+    // This gives us just the number and unit without "ago" or directional context
+    const nf = new Intl.NumberFormat(locale, {
+      style: 'unit',
+      unit: unit,
+      unitDisplay: 'long', // Use full words like "years" instead of "yr"
+    });
+
+    return nf.format(value).replace('年', '岁'); // the latter is more appropriate for age in Chinese
+  };
+
+  const years = Math.floor(diffMs / (365.25 * 24 * 60 * 60 * 1000));
+  const months = Math.floor(diffMs / (30.44 * 24 * 60 * 60 * 1000));
+  const days = Math.floor(diffMs / (24 * 60 * 60 * 1000));
+
+  if (unit === 'years' || (unit === 'auto' && years > 0)) {
+    if (precise && years > 0) {
+      const remainingMonths = Math.floor(
+        (diffMs - years * 365.25 * 24 * 60 * 60 * 1000) /
+          (30.44 * 24 * 60 * 60 * 1000),
+      );
+      return remainingMonths > 0
+        ? `${formatTimeUnit(years, 'year')}, ${formatTimeUnit(remainingMonths, 'month')}`
+        : formatTimeUnit(years, 'year');
+    }
+    return formatTimeUnit(years, 'year');
+  }
+
+  if (unit === 'months' || (unit === 'auto' && months > 0 && years === 0)) {
+    return formatTimeUnit(months, 'month');
+  }
+
+  return formatTimeUnit(days, 'day');
+}

package/bundled-types/boxel-ui/helpers/format-countdown.ts

@@ -0,0 +1,110 @@
+export default function formatCountdown(
+  eventDate: Date | string | null | undefined,
+  options: {
+    fallback?: string;
+    locale?: string;
+    showDays?: boolean;
+    showHours?: boolean;
+    showMinutes?: boolean;
+    showSeconds?: boolean;
+  } = {},
+): string {
+  // Stub implementation - will be replaced with actual logic
+  if (eventDate == null) {
+    return options.fallback || '';
+  }
+
+  let date: Date;
+  if (typeof eventDate === 'string') {
+    date = new Date(eventDate);
+  } else if (eventDate instanceof Date) {
+    date = eventDate;
+  } else {
+    return options.fallback || '';
+  }
+
+  if (isNaN(date.getTime())) {
+    return options.fallback || '';
+  }
+
+  const now = new Date();
+  const diffMs = date.getTime() - now.getTime();
+
+  if (diffMs < -1000) {
+    // Only show "Expired" if more than 1 second in the past
+    return options.fallback || 'Expired';
+  }
+
+  const {
+    showDays = false,
+    showHours = true,
+    showMinutes = true,
+    showSeconds = true,
+    locale = 'en-US',
+  } = options;
+
+  // Add 500ms to account for execution time and round up to the nearest second
+  const adjustedDiffMs = Math.max(0, diffMs + 500); // Ensure we don't go negative
+  const totalSeconds = Math.floor(adjustedDiffMs / 1000);
+  const days = Math.floor(totalSeconds / (24 * 60 * 60));
+  const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / (60 * 60));
+  const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
+  const seconds = totalSeconds % 60;
+
+  // Handle the case where we only want to show days
+  if (showDays && !showHours && !showMinutes && !showSeconds) {
+    const dayLabel = getDayLabel(days, locale);
+    return `${days} ${dayLabel}`;
+  }
+
+  // If showing days, always use the days format
+  if (showDays) {
+    const dayLabel = getDayLabel(days, locale);
+    const timeComponents = [];
+
+    if (showHours) {
+      timeComponents.push(hours.toString()); // No padding for hours when showing days
+    }
+    if (showMinutes) {
+      timeComponents.push(minutes.toString().padStart(2, '0'));
+    }
+    if (showSeconds) {
+      timeComponents.push(seconds.toString().padStart(2, '0'));
+    }
+
+    const timeString = timeComponents.join(':');
+    return `${days} ${dayLabel}, ${timeString}`;
+  }
+
+  // For times without days or when days are hidden, show as H:MM:SS format
+  const timeComponents = [];
+
+  // Calculate total hours if days are hidden
+  const totalHours = showDays ? hours : hours + days * 24;
+
+  // Always include hours when not showing days or when explicitly showing hours
+  if (showHours || !showDays) {
+    // Don't pad hours with leading zero for basic format
+    timeComponents.push(totalHours.toString());
+  }
+
+  if (showMinutes) {
+    timeComponents.push(minutes.toString().padStart(2, '0'));
+  }
+
+  if (showSeconds) {
+    timeComponents.push(seconds.toString().padStart(2, '0'));
+  }
+
+  return timeComponents.join(':') || '0:00:00';
+}
+
+function getDayLabel(days: number, locale: string): string {
+  if (locale.startsWith('es')) {
+    return days === 1 ? 'día' : 'días';
+  } else if (locale.startsWith('fr')) {
+    return days === 1 ? 'jour' : 'jours';
+  } else {
+    return days === 1 ? 'day' : 'days';
+  }
+}

package/bundled-types/boxel-ui/helpers/format-currency.ts

@@ -0,0 +1,95 @@
+export default function formatCurrency(
+  amount: number | null | undefined,
+  options: {
+    currency?: string;
+    fallback?: string;
+    locale?: string;
+    size?: 'tiny' | 'short' | 'medium' | 'long';
+  } = {},
+): string {
+  if (
+    amount == null ||
+    typeof amount !== 'number' ||
+    isNaN(amount) ||
+    !isFinite(amount)
+  ) {
+    return options.fallback || '';
+  }
+
+  const { currency = 'USD', size = 'medium', locale = 'en-US' } = options;
+
+  // Handle special formatting for tiny size with compact notation
+  if (size === 'tiny') {
+    const absAmount = Math.abs(amount);
+    if (absAmount >= 1000000) {
+      const formatter = new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+        notation: 'compact',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 1,
+      });
+      return formatter.format(amount);
+    }
+    if (absAmount >= 1000) {
+      const formatter = new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+        notation: 'compact',
+        minimumFractionDigits: 1,
+        maximumFractionDigits: 1,
+      });
+      return formatter.format(amount);
+    }
+    const formatter = new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    });
+    return formatter.format(amount);
+  }
+
+  // Handle long format with spelled out currency
+  if (size === 'long') {
+    const formatter = new Intl.NumberFormat(locale, {
+      style: 'decimal',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+    const currencyNames: Record<string, string> = {
+      USD: 'US dollars',
+      EUR: 'euros',
+      JPY: 'yen',
+      GBP: 'pounds',
+      CAD: 'Canadian dollars',
+      AUD: 'Australian dollars',
+    };
+    const currencyName = currencyNames[currency] || `${currency} currency`;
+    return `${formatter.format(amount)} ${currencyName}`;
+  }
+
+  // Handle short format (no decimals)
+  if (size === 'short') {
+    const formatter = new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    });
+    return formatter.format(Math.round(amount));
+  }
+
+  // Default medium format (full precision)
+  const minimumFractionDigits = currency === 'JPY' ? 0 : 2;
+  const maximumFractionDigits = currency === 'JPY' ? 0 : 2;
+
+  const formatter = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+    minimumFractionDigits,
+    maximumFractionDigits,
+  });
+
+  return formatter.format(amount);
+}