noecosystem-design 0.1.0

package/packages/i18n/src/runtime.mjs

@@ -0,0 +1,113 @@
+export const localeMetadata = Object.freeze({
+  en: Object.freeze({
+    locale: 'en',
+    language: 'English',
+    script: 'Latn',
+    direction: 'ltr',
+    numberingSystem: 'latn',
+    calendar: 'gregory',
+    pseudo: false,
+  }),
+  fa: Object.freeze({
+    locale: 'fa',
+    language: 'فارسی',
+    script: 'Arab',
+    direction: 'rtl',
+    numberingSystem: 'arabext',
+    calendar: 'persian',
+    pseudo: false,
+  }),
+  'en-XA': Object.freeze({
+    locale: 'en-XA',
+    language: 'Pseudo LTR',
+    script: 'Latn',
+    direction: 'ltr',
+    numberingSystem: 'latn',
+    calendar: 'gregory',
+    pseudo: 'ltr',
+  }),
+  'ar-XB': Object.freeze({
+    locale: 'ar-XB',
+    language: 'Pseudo RTL',
+    script: 'Arab',
+    direction: 'rtl',
+    numberingSystem: 'arab',
+    calendar: 'gregory',
+    pseudo: 'rtl',
+  }),
+});
+
+export function getLocaleMetadata(locale) {
+  return localeMetadata[locale] ?? localeMetadata.en;
+}
+
+export function resolveDirection(locale, override = 'auto') {
+  if (override === 'ltr' || override === 'rtl') return override;
+  return getLocaleMetadata(locale).direction;
+}
+
+const pseudoMap = Object.freeze({
+  a: 'à',
+  A: 'Å',
+  e: 'ë',
+  E: 'Ë',
+  i: 'ï',
+  I: 'Ï',
+  o: 'ø',
+  O: 'Ø',
+  u: 'ü',
+  U: 'Û',
+  c: 'ç',
+  C: 'Ç',
+  n: 'ñ',
+  N: 'Ñ',
+});
+
+export function pseudoLocalize(value, mode = 'ltr') {
+  const expanded = String(value)
+    .replace(/[aAeEiIoOuUcCnN]/g, (char) => pseudoMap[char] ?? char)
+    .replace(/\b(\w{4,})\b/g, '$1~$1');
+  return mode === 'rtl' ? `⟦‮${expanded}‬⟧` : `⟦${expanded}⟧`;
+}
+
+export function formatNumber(value, locale = 'en', options = {}) {
+  const meta = getLocaleMetadata(locale);
+  return new Intl.NumberFormat(meta.locale, {
+    numberingSystem: meta.numberingSystem,
+    ...options,
+  }).format(value);
+}
+
+export function formatDate(value, locale = 'en', options = {}) {
+  const meta = getLocaleMetadata(locale);
+  return new Intl.DateTimeFormat(meta.locale, {
+    calendar: meta.calendar,
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    ...options,
+  }).format(new Date(value));
+}
+
+export function formatRelativeTime(value, unit, locale = 'en', options = {}) {
+  return new Intl.RelativeTimeFormat(getLocaleMetadata(locale).locale, {
+    numeric: 'auto',
+    ...options,
+  }).format(value, unit);
+}
+
+export function formatList(values, locale = 'en', options = {}) {
+  return new Intl.ListFormat(getLocaleMetadata(locale).locale, {
+    style: 'long',
+    type: 'conjunction',
+    ...options,
+  }).format(values);
+}
+
+export function applyDocumentLocale(documentElement, locale, override = 'auto') {
+  const meta = getLocaleMetadata(locale);
+  documentElement.lang = meta.locale;
+  documentElement.dir = resolveDirection(locale, override);
+  documentElement.dataset.locale = meta.locale;
+  return meta;
+}

package/packages/i18n/src/translate.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, test } from 'vitest';
+import en from './messages/en.json' with { type: 'json' };
+import fa from './messages/fa.json' with { type: 'json' };
+
+// Keys used by Calendar, DatePicker, ThemeToggle via t()
+const requiredKeys = [
+  'calendar.previousMonth',
+  'calendar.nextMonth',
+  'calendar.chooseDate',
+  'datePicker.close',
+  'datePicker.chooseDate',
+  'datePicker.outOfRange',
+  'datePicker.placeholder.gregory',
+  'datePicker.placeholder.persian',
+  'theme.toggle.light',
+  'theme.toggle.dark',
+  'theme.toggle.label',
+  'theme.preference.light',
+  'theme.preference.dark',
+] as const;
+
+describe('i18n parity — Calendar/DatePicker/ThemeToggle keys exist in both locales', () => {
+  for (const key of requiredKeys) {
+    test(`key ${key} exists in en and fa`, () => {
+      const enValue = (en as Record<string, string>)[key];
+      const faValue = (fa as Record<string, string>)[key];
+      expect(enValue).toBeDefined();
+      expect(typeof enValue).toBe('string');
+      expect((enValue as string).length).toBeGreaterThan(0);
+      expect(faValue).toBeDefined();
+      expect(typeof faValue).toBe('string');
+      expect((faValue as string).length).toBeGreaterThan(0);
+    });
+  }
+
+  test('required keys exist in both locales', () => {
+    const enKeys = Object.keys(en);
+    const faKeys = Object.keys(fa);
+    for (const key of requiredKeys) {
+      expect(enKeys).toContain(key);
+      expect(faKeys).toContain(key);
+    }
+  });
+
+  test('en and fa have identical key sets (full parity)', () => {
+    const enKeys = Object.keys(en).sort();
+    const faKeys = Object.keys(fa).sort();
+    expect(enKeys).toEqual(faKeys);
+  });
+});

package/packages/i18n/src/translate.ts

@@ -0,0 +1,29 @@
+import en from './messages/en.json' with { type: 'json' };
+import fa from './messages/fa.json' with { type: 'json' };
+
+export type MessageKey = keyof typeof en;
+
+const catalog: Record<string, typeof en> = { en, fa: fa as unknown as typeof en };
+
+export function getMessages(locale?: string): typeof en {
+  if (!locale) return en;
+  if (locale.startsWith('fa')) return fa as unknown as typeof en;
+  return (catalog[locale] as typeof en | undefined) ?? en;
+}
+
+export function t(locale: string | undefined, key: MessageKey, fallback?: string): string {
+  const dict = getMessages(locale);
+  return (dict[key] as string) ?? fallback ?? (en[key] as string) ?? key;
+}
+
+// Parity helper for tests
+export function allMessageKeys(): MessageKey[] {
+  return Object.keys(en) as MessageKey[];
+}
+
+export function hasMessage(locale: string, key: MessageKey): boolean {
+  const dict = locale.startsWith('fa')
+    ? (fa as unknown as Record<string, string>)
+    : (en as Record<string, string>);
+  return typeof dict[key] === 'string' && dict[key].length > 0;
+}

package/packages/icons/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@noe/icons",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "peerDependencies": {
+    "react": "^19.2.0"
+  },
+  "exports": {
+    ".": "./src/index.tsx"
+  }
+}

package/packages/icons/src/adapters.tsx

@@ -0,0 +1,167 @@
+import type * as React from 'react';
+
+/**
+ * Icon adapters — explicit provenance, no family mixing.
+ * Each adapter maps external asset families to @noe/icons policy.
+ * Licenses must be recorded before use. No global mirroring; directional icons use `data-logical-direction`.
+ */
+
+export const iconProvenance = Object.freeze({
+  fileFolder: {
+    source: 'Internal NOE',
+    license: 'NOE proprietary — do not redistribute',
+    asset: 'file/folder icons',
+  },
+  payment: {
+    source: 'Payment provider brand guidelines (Visa/Mastercard)',
+    license: 'Brand assets — fair use, do not redistribute, check before publishing',
+    asset: 'payment method icons',
+  },
+  social: {
+    source: 'Social brand guidelines',
+    license: 'Brand assets — fair use',
+    asset: 'social icons',
+  },
+  flag: {
+    source: 'Twemoji/Flagpack',
+    license: 'CC-BY 4.0 / MIT — record per flag set',
+    asset: 'flag icons',
+  },
+  integration: {
+    source: 'Integration partner logos',
+    license: 'Partner brand — check before publishing',
+    asset: 'integration icons',
+  },
+  icons8: {
+    source: 'Icons8',
+    license: 'Icons8 — https://icons8.com/license',
+    asset: 'chevronRight.svg',
+  },
+});
+
+export function FileIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true" {...props}>
+      <path
+        d="M3 2.5A1.5 1.5 0 0 1 4.5 1H9l3 3v9.5A1.5 1.5 0 0 1 10.5 15H4.5A1.5 1.5 0 0 1 3 13.5v-11Z"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.2"
+      />
+      <path
+        d="M9 1v3.5A1.5 1.5 0 0 0 10.5 6H13"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.2"
+      />
+    </svg>
+  );
+}
+
+export function FolderIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" aria-hidden="true" {...props}>
+      <path
+        d="M1.5 5A1.5 1.5 0 0 1 3 3.5H6l2 2H13A1.5 1.5 0 0 1 14.5 7v5A1.5 1.5 0 0 1 13 13.5H3A1.5 1.5 0 0 1 1.5 12V5Z"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.2"
+      />
+    </svg>
+  );
+}
+
+export function PaymentIcon({
+  brand = 'Visa',
+  ...props
+}: React.SVGProps<SVGSVGElement> & { brand?: string }) {
+  return (
+    <svg viewBox="0 0 32 20" role="img" aria-label={`${brand} payment`} {...props}>
+      <rect
+        width={32}
+        height={20}
+        rx={3}
+        fill="var(--noe-color-surface-raised)"
+        stroke="var(--noe-color-border)"
+      />
+      <text
+        x={16}
+        y={13}
+        textAnchor="middle"
+        fontSize={6}
+        fontWeight={700}
+        fill="var(--noe-color-foreground)"
+      >
+        {brand}
+      </text>
+    </svg>
+  );
+}
+
+export function SocialIcon({
+  brand = 'X',
+  ...props
+}: React.SVGProps<SVGSVGElement> & { brand?: string }) {
+  return (
+    <svg viewBox="0 0 16 16" role="img" aria-label={`${brand} social`} {...props}>
+      <circle cx={8} cy={8} r={7} fill="none" stroke="currentColor" strokeWidth="1.2" />
+      <text x={8} y={11} textAnchor="middle" fontSize={6} fontWeight={700} fill="currentColor">
+        {brand[0]}
+      </text>
+    </svg>
+  );
+}
+
+export function FlagIcon({
+  code = 'IR',
+  ...props
+}: React.SVGProps<SVGSVGElement> & { code?: string }) {
+  return (
+    <svg viewBox="0 0 16 12" role="img" aria-label={`${code} flag`} {...props}>
+      <rect
+        width={16}
+        height={12}
+        rx={1.5}
+        fill="var(--noe-color-surface)"
+        stroke="var(--noe-color-border)"
+      />
+      <text
+        x={8}
+        y={8}
+        textAnchor="middle"
+        fontSize={6}
+        fontWeight={600}
+        fill="var(--noe-color-foreground)"
+      >
+        {code}
+      </text>
+    </svg>
+  );
+}
+
+export function IntegrationIcon({
+  name = 'API',
+  ...props
+}: React.SVGProps<SVGSVGElement> & { name?: string }) {
+  return (
+    <svg viewBox="0 0 16 16" role="img" aria-label={`${name} integration`} {...props}>
+      <rect
+        width={16}
+        height={16}
+        rx={3}
+        fill="var(--noe-color-muted)"
+        stroke="var(--noe-color-border)"
+      />
+      <text
+        x={8}
+        y={10}
+        textAnchor="middle"
+        fontSize={5}
+        fontWeight={700}
+        fill="var(--noe-color-foreground)"
+      >
+        {name.slice(0, 3)}
+      </text>
+    </svg>
+  );
+}

package/packages/icons/src/index.tsx

@@ -0,0 +1,103 @@
+import type * as React from 'react';
+
+export type LogicalIconDirection = 'forward' | 'backward';
+
+export const icons8Source = Object.freeze({
+  provider: 'Icons8',
+  asset: 'chevronRight.svg',
+  url: 'https://maxst.icons8.com/vue-static/icon/svg/chevronRight.svg',
+});
+
+export function NoeMark(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 32 32" role="img" aria-label="NOEcosystem" {...props}>
+      <circle cx="16" cy="16" r="12" fill="none" stroke="currentColor" strokeWidth="2" />
+      <circle cx="16" cy="16" r="3" fill="currentColor" />
+      <path d="M4 16h9M19 16h9M16 4v9M16 19v9" stroke="currentColor" strokeWidth="2" />
+    </svg>
+  );
+}
+
+export function ChevronIcon({
+  direction = 'forward',
+  className,
+  ...props
+}: React.SVGProps<SVGSVGElement> & { direction?: LogicalIconDirection }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={['noe-logical-icon', className].filter(Boolean).join(' ')}
+      data-icon-source="icons8"
+      data-logical-direction={direction}
+      viewBox="0 0 16 16"
+      {...props}
+    >
+      <path
+        d="M6.71875 3.5L6 4.20312L9.66016 7.97656L6 11.7539L6.71875 12.4492L11.0586 7.97656L6.71875 3.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function SunIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" {...props}>
+      <g className="noe-theme-toggle__sun">
+        <circle
+          cx="12"
+          cy="12"
+          r="3.75"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12 2.25v2.1M12 19.65v2.1M2.25 12h2.1M19.65 12h2.1M5.1 5.1l1.48 1.48M17.42 17.42l1.48 1.48M18.9 5.1l-1.48 1.48M6.58 17.42 5.1 18.9"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export function MoonIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" {...props}>
+      <path
+        className="noe-theme-toggle__moon"
+        d="M20.2 15.25A8.25 8.25 0 0 1 8.75 3.8a8.26 8.26 0 1 0 11.45 11.45Z"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const iconDirectionPolicy = Object.freeze({
+  mirror: ['forward', 'backward', 'next', 'previous', 'indent', 'outdent', 'panel-open'],
+  neverMirror: [
+    'brand',
+    'play',
+    'pause',
+    'download',
+    'upload',
+    'search',
+    'settings',
+    'check',
+    'close',
+    'chart',
+    'code',
+    'theme-sun',
+    'theme-moon',
+  ],
+});

package/packages/registry/README.md

@@ -0,0 +1,7 @@
+# @noe registry
+
+This is a shadcn-compatible first-party registry source. Descriptions are written for both engineers and coding agents and encode semantic, accessibility, RTL, and usage expectations.
+
+`pnpm build:static` emits this registry to `dist/r/registry.json` and `dist/r/{name}.json`. When mounted under the site, these are served at `https://noecosystem.com/design-system/r/registry.json` and `https://noecosystem.com/design-system/r/{name}.json`, the public URL layout required by the `@noe` registry template in `components.json`. It is not represented as deployed until a hosting workflow produces observable evidence and a consumer installation succeeds through the official shadcn MCP process.
+
+`pnpm test:registry:consumer` exercises the same registry protocol locally with the official shadcn CLI and a disposable consumer project before deployment.