@vendure-io/ui 2.0.0-beta.1 → 2.0.0-beta.11

package/src/components/molecules/skip-link.tsx

@@ -0,0 +1,36 @@
+import { cn } from '@vendure-io/ui/lib/utils';
+import type * as React from 'react';
+
+interface SkipLinkProps extends React.ComponentProps<'a'> {
+  /** The main-content element to focus. Include the leading `#`. */
+  href?: `#${string}`;
+}
+
+/**
+ * Keyboard-only escape hatch for repeated application chrome. Place it as the
+ * first focusable element in the document and point it at `AppShellMain` (whose
+ * default id is `main-content`). Native anchor behavior keeps this server-safe
+ * and works before React hydrates.
+ */
+function SkipLink({
+  className,
+  href = '#main-content',
+  children = 'Skip to main content',
+  ...props
+}: SkipLinkProps) {
+  return (
+    <a
+      data-slot="skip-link"
+      href={href}
+      className={cn(
+        'bg-primary text-primary-foreground fixed top-3 left-3 z-[100] -translate-y-20 rounded-md px-3 py-2 text-sm font-medium opacity-0 outline-none transition-[transform,opacity] duration-(--transition-duration-fast) ease-(--ease-out) focus-visible:translate-y-0 focus-visible:opacity-100 focus-visible:ring-3 focus-visible:ring-ring/50 motion-reduce:transition-none',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+}
+
+export { SkipLink, type SkipLinkProps };

package/src/components/molecules/state-views/loading-state.tsx

@@ -24,13 +24,16 @@ export interface LoadingStateProps
   rows?: number;
   /** Classes applied to each skeleton row (e.g. `h-10` for tighter lists). */
   rowClassName?: string;
-  /** Visible label. An sr-only "Loading…" is always rendered for assistive tech. */
+  /** Visible label. An sr-only `srLabel` is always rendered for assistive tech. */
   label?: React.ReactNode;
+  /** Sr-only label announced to assistive tech. Override for host i18n. @default "Loading…" */
+  srLabel?: string;
 }
 
 /**
  * Placeholder shell for in-flight list/detail queries. Renders as an
- * `aria-live` `<output>` with an always-present sr-only "Loading…" label.
+ * `aria-live` `<output>` with an always-present sr-only `srLabel` (defaults to
+ * "Loading…", overridable for host i18n).
  * `skeleton` (default) draws N shimmer rows; `spinner` centers the `Spinner`
  * atom for compact or unknown-height regions.
  */
@@ -39,6 +42,7 @@ function LoadingState({
   rows = 5,
   rowClassName,
   label,
+  srLabel = 'Loading…',
   className,
   ...props
 }: LoadingStateProps) {
@@ -49,7 +53,7 @@ function LoadingState({
       className={cn(loadingStateVariants({ variant }), className)}
       {...props}
     >
-      <span className="sr-only">Loading…</span>
+      <span className="sr-only">{srLabel}</span>
       {variant === 'spinner' ? (
         <>
           {/* aria-hidden overrides the atom's role="status": the <output> is

package/src/lib/date-value.ts

@@ -0,0 +1,48 @@
+const CALENDAR_DATE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
+
+/** Parse `YYYY-MM-DD` into a local calendar date without a UTC shift. */
+function parseCalendarDate(value: string | null | undefined): Date | undefined {
+  if (!value) return undefined;
+  const match = CALENDAR_DATE_PATTERN.exec(value);
+  if (!match) return undefined;
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3]);
+  const date = new Date(year, month - 1, day);
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return undefined;
+  }
+  return date;
+}
+
+/** Serialize a local calendar date as `YYYY-MM-DD`. */
+function formatCalendarDate(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+function parseInstant(value: string | null | undefined): Date | undefined {
+  if (!value) return undefined;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? undefined : date;
+}
+
+function formatDateLabel(date: Date, locale?: string): string {
+  return new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(date);
+}
+
+function formatDateRangeLabel(from: Date, to: Date | undefined, locale?: string): string {
+  if (!to || from.getTime() === to.getTime()) return formatDateLabel(from, locale);
+  const formatter = new Intl.DateTimeFormat(locale, { dateStyle: 'medium' });
+  return formatter.formatRange(from, to);
+}
+
+export {
+  formatCalendarDate,
+  formatDateLabel,
+  formatDateRangeLabel,
+  parseCalendarDate,
+  parseInstant,
+};

package/src/lib/highlight.ts

@@ -0,0 +1,141 @@
+import {
+  transformerNotationDiff,
+  transformerNotationErrorLevel,
+  transformerNotationFocus,
+  transformerNotationHighlight,
+  transformerNotationWordHighlight,
+} from '@shikijs/transformers';
+import { createHighlighterCore } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+
+/**
+ * The design system's Shiki setup: a lazy shared highlighter with the DS themes
+ * (github-light / github-dark-default), a fixed grammar set, and the `[!code ...]`
+ * notation transformers. Exported so consumers rendering highlighted HTML outside
+ * of `CodeBlock` (e.g. custom docs pipelines) reuse the exact same setup instead
+ * of duplicating it — and get the lazy per-language chunks instead of the full
+ * Shiki bundle.
+ */
+
+const languageLoaders = {
+  bash: () => import('@shikijs/langs/bash').then((module) => module.default),
+  css: () => import('@shikijs/langs/css').then((module) => module.default),
+  dotenv: () => import('@shikijs/langs/dotenv').then((module) => module.default),
+  graphql: () => import('@shikijs/langs/graphql').then((module) => module.default),
+  html: () => import('@shikijs/langs/html').then((module) => module.default),
+  ini: () => import('@shikijs/langs/ini').then((module) => module.default),
+  javascript: () => import('@shikijs/langs/javascript').then((module) => module.default),
+  json: () => import('@shikijs/langs/json').then((module) => module.default),
+  jsonc: () => import('@shikijs/langs/jsonc').then((module) => module.default),
+  jsx: () => import('@shikijs/langs/jsx').then((module) => module.default),
+  markdown: () => import('@shikijs/langs/markdown').then((module) => module.default),
+  mdx: () => import('@shikijs/langs/mdx').then((module) => module.default),
+  python: () => import('@shikijs/langs/python').then((module) => module.default),
+  shellscript: () => import('@shikijs/langs/shellscript').then((module) => module.default),
+  sql: () => import('@shikijs/langs/sql').then((module) => module.default),
+  tsx: () => import('@shikijs/langs/tsx').then((module) => module.default),
+  typescript: () => import('@shikijs/langs/typescript').then((module) => module.default),
+  yaml: () => import('@shikijs/langs/yaml').then((module) => module.default),
+} as const;
+
+type SupportedLanguage = keyof typeof languageLoaders;
+
+const themeLoaders = [
+  () => import('@shikijs/themes/github-light').then((module) => module.default),
+  () => import('@shikijs/themes/github-dark-default').then((module) => module.default),
+] as const;
+
+let highlighterPromise: ReturnType<typeof createHighlighterCore> | null = null;
+
+function getHighlighter(): ReturnType<typeof createHighlighterCore> {
+  highlighterPromise ??= Promise.all([
+    Promise.all(themeLoaders.map((loadTheme) => loadTheme())),
+    Promise.all(Object.values(languageLoaders).map((loadLanguage) => loadLanguage())),
+  ]).then(([themes, languages]) =>
+    createHighlighterCore({
+      themes,
+      langs: languages.flat(),
+      engine: createJavaScriptRegexEngine(),
+    }),
+  );
+
+  return highlighterPromise;
+}
+
+const highlightedCodeCache = new Map<string, Promise<string>>();
+
+/**
+ * Highlight code using Shiki with all transformers.
+ * Uses Shiki's native notation for highlighting:
+ * - // [!code highlight] - highlight a line (use language-appropriate comment)
+ * - // [!code ++] / // [!code --] - diff highlighting
+ * - // [!code focus] - focus mode (blur other lines)
+ * - // [!code word:myVar] - highlight specific word
+ * - // [!code error] / // [!code warning] - error levels
+ */
+async function highlightCode(code: string, language: SupportedLanguage): Promise<string> {
+  const cacheKey = `${language}:${code}`;
+  const cached = highlightedCodeCache.get(cacheKey);
+  if (cached) return cached;
+
+  const highlighted = getHighlighter().then((highlighter) =>
+    highlighter.codeToHtml(code, {
+      lang: language,
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark-default',
+      },
+      transformers: [
+        transformerNotationDiff({ matchAlgorithm: 'v3' }),
+        transformerNotationHighlight({ matchAlgorithm: 'v3' }),
+        transformerNotationWordHighlight({ matchAlgorithm: 'v3' }),
+        transformerNotationFocus({ matchAlgorithm: 'v3' }),
+        transformerNotationErrorLevel({ matchAlgorithm: 'v3' }),
+      ],
+    }),
+  );
+  highlightedCodeCache.set(cacheKey, highlighted);
+  return highlighted;
+}
+
+/**
+ * Language aliases that map to Shiki's bundled language names
+ */
+const LANGUAGE_ALIASES: Record<string, SupportedLanguage> = {
+  env: 'dotenv',
+  js: 'javascript',
+  ts: 'typescript',
+  sh: 'bash',
+  shell: 'bash',
+  yml: 'yaml',
+  py: 'python',
+  md: 'markdown',
+  plaintext: 'ini',
+  text: 'ini',
+  chroma: 'ini',
+};
+
+/**
+ * Normalize language identifier for Shiki/BundledLanguage.
+ * Falls back to 'ini' for unsupported languages (minimal highlighting).
+ */
+function normalizeLanguage(lang?: string): SupportedLanguage {
+  const normalized = lang?.toLowerCase() || 'ini';
+
+  // Check for aliases first
+  const alias = LANGUAGE_ALIASES[normalized];
+  if (alias) {
+    return alias;
+  }
+
+  // Check if the language is one of the explicitly bundled grammars.
+  if (normalized in languageLoaders) {
+    return normalized as SupportedLanguage;
+  }
+
+  // Fallback to 'ini' for unsupported languages (has minimal highlighting)
+  return 'ini';
+}
+
+export { getHighlighter, highlightCode, normalizeLanguage };
+export type { SupportedLanguage };