@incodetech/web 2.0.0-alpha.1

package/src/styles/tokens/primitives.css

@@ -0,0 +1,129 @@
+:root,
+:host {
+  /* Color / Gray */
+
+  --primitive-color-gray-0: #ffffff;
+  --primitive-color-gray-0-80: rgba(255, 255, 255, 0.8);
+  --primitive-color-gray-50: #fcfcfd;
+  --primitive-color-gray-100: #ebecef;
+  --primitive-color-gray-200: #c6c8d2;
+  --primitive-color-gray-300: #a3a8b8;
+  --primitive-color-gray-500: #60667c;
+  --primitive-color-gray-700: #3a3e4b;
+  --primitive-color-gray-800: #262831;
+  --primitive-color-gray-900: #14151a;
+  --primitive-color-gray-900-80: rgba(20, 21, 26, 0.8);
+  --primitive-color-gray-1000: #000000;
+  --primitive-color-gray-1000-80: rgba(0, 0, 0, 0.8);
+
+  /* Color / Brand */
+
+  --primitive-color-brand-50: #e5f0ff;
+  --primitive-color-brand-200: #99ceff;
+  --primitive-color-brand-300: #66a6ff;
+  --primitive-color-brand-400: #3388ff;
+  --primitive-color-brand-500: #006aff;
+  --primitive-color-brand-600: #0055cc;
+  --primitive-color-brand-900: #21273b;
+
+  /* Color / Brand Secondary */
+
+  --primitive-color-brand-secondary-50: #f2e2fe;
+  --primitive-color-brand-secondary-500: #820ad1;
+
+  /* Color / Positive */
+
+  --primitive-color-positive-50: #e4fbf0;
+  --primitive-color-positive-600: #189f60;
+  --primitive-color-positive-800: #0c5030;
+
+  /* Color / Warning */
+
+  --primitive-color-warning-50: #fff7eb;
+  --primitive-color-warning-400: #ffb647;
+  --primitive-color-warning-500: #ff9900;
+  --primitive-color-warning-950: #523100;
+
+  /* Color / Negative */
+
+  --primitive-color-negative-50: #fff0f0;
+  --primitive-color-negative-500: #ff5a5f;
+  --primitive-color-negative-600: #e71111;
+  --primitive-color-negative-950: #240001;
+
+  /* Typography / Family */
+  --primitive-typography-family-rethink-sans: "Rethink Sans";
+  --primitive-typography-family-dm-sans: "DM Sans";
+
+  /* Typography / Size */
+
+  --primitive-typography-size-12: 12px;
+  --primitive-typography-size-14: 14px;
+  --primitive-typography-size-16: 16px;
+  --primitive-typography-size-18: 18px;
+  --primitive-typography-size-20: 20px;
+  --primitive-typography-size-24: 24px;
+  --primitive-typography-size-32: 32px;
+  --primitive-typography-size-40: 40px;
+  --primitive-typography-size-48: 48px;
+  --primitive-typography-size-80: 80px;
+
+  /* Typography / Weight */
+
+  --primitive-typography-weight-thin: 300;
+  --primitive-typography-weight-regular: 400;
+  --primitive-typography-weight-medium: 500;
+  --primitive-typography-weight-semibold: 600;
+  --primitive-typography-weight-bold: 700;
+  --primitive-typography-weight-extrabold: 800;
+
+  /* Typography / Letter Spacing */
+
+  --primitive-typography-letter-spacing-0: 0px;
+  --primitive-typography-letter-spacing-minus-0-5: -0.5px;
+  --primitive-typography-letter-spacing-minus-1: -1px;
+  --primitive-typography-letter-spacing-minus-1-5: -1.5px;
+
+  /* Border / Width */
+
+  --primitive-border-width-0: 0px;
+  --primitive-border-width-1: 1px;
+  --primitive-border-width-2: 2px;
+  --primitive-border-width-4: 4px;
+
+  /* Border / Radius */
+
+  --primitive-border-radius-0: 0px;
+  --primitive-border-radius-4: 4px;
+  --primitive-border-radius-8: 8px;
+  --primitive-border-radius-16: 16px;
+  --primitive-border-radius-24: 24px;
+  --primitive-border-radius-40: 40px;
+  --primitive-border-radius-64: 64px;
+  --primitive-border-radius-9999: 9999px;
+
+  /* Scale */
+
+  --primitive-scale-0: 0px;
+  --primitive-scale-2: 2px;
+  --primitive-scale-4: 4px;
+  --primitive-scale-8: 8px;
+  --primitive-scale-12: 12px;
+  --primitive-scale-16: 16px;
+  --primitive-scale-20: 20px;
+  --primitive-scale-24: 24px;
+  --primitive-scale-32: 32px;
+  --primitive-scale-40: 40px;
+  --primitive-scale-48: 48px;
+  --primitive-scale-56: 56px;
+  --primitive-scale-64: 64px;
+  --primitive-scale-72: 72px;
+  --primitive-scale-80: 80px;
+  --primitive-scale-88: 88px;
+  --primitive-scale-96: 96px;
+  --primitive-scale-104: 104px;
+  --primitive-scale-120: 120px;
+  --primitive-scale-128: 128px;
+  --primitive-scale-160: 160px;
+  --primitive-scale-200: 200px;
+}

package/src/styles/tokens/semantic.css

@@ -0,0 +1,51 @@
+:root,
+:host {
+  /* Border / Width */
+
+  --border-none: var(--primitive-border-width-0);
+  --border-regular: var(--primitive-border-width-1);
+  --border-bold: var(--primitive-border-width-2);
+
+  /* Border / Radius */
+
+  --border-radius-none: var(--primitive-border-radius-0);
+  --border-radius-x-small: var(--primitive-border-radius-4);
+  --border-radius-small: var(--primitive-border-radius-8);
+  --border-radius-medium: var(--primitive-border-radius-16);
+  --border-radius-large: var(--primitive-border-radius-24);
+  --border-radius-x-large: var(--primitive-border-radius-40);
+  --border-radius-xx-large: var(--primitive-border-radius-64);
+  --border-radius-full: var(--primitive-border-radius-9999);
+
+  /* Spacing */
+
+  --spacing-none: var(--primitive-scale-0);
+  --spacing-2: var(--primitive-scale-2);
+  --spacing-4: var(--primitive-scale-4);
+  --spacing-8: var(--primitive-scale-8);
+  --spacing-12: var(--primitive-scale-12);
+  --spacing-16: var(--primitive-scale-16);
+  --spacing-20: var(--primitive-scale-20);
+  --spacing-24: var(--primitive-scale-24);
+  --spacing-32: var(--primitive-scale-32);
+  --spacing-40: var(--primitive-scale-40);
+  --spacing-48: var(--primitive-scale-48);
+  --spacing-64: var(--primitive-scale-64);
+  --spacing-80: var(--primitive-scale-80);
+  --spacing-96: var(--primitive-scale-96);
+  --spacing-104: var(--primitive-scale-104);
+  --spacing-120: var(--primitive-scale-120);
+  --spacing-160: var(--primitive-scale-160);
+  --spacing-200: var(--primitive-scale-200);
+
+  /* Icon / Size */
+
+  --icon-size-xx-small: var(--primitive-scale-16);
+  --icon-size-x-small: var(--primitive-scale-20);
+  --icon-size-small: var(--primitive-scale-24);
+  --icon-size-medium: var(--primitive-scale-32);
+  --icon-size-large: var(--primitive-scale-40);
+  --icon-size-x-large: var(--primitive-scale-48);
+  --icon-size-xx-large: var(--primitive-scale-64);
+  --icon-size-xxx-large: var(--primitive-scale-80);
+}

package/src/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

package/src/types/assets.d.ts

@@ -0,0 +1 @@
+export type AssetManifest = Record<string, string>;

package/src/types/custom-elements.d.ts

@@ -0,0 +1,104 @@
+import type { EmailConfig } from '@incodetech/core/email';
+import type { PhoneConfig } from '@incodetech/core/phone';
+import type { SelfieConfig } from '@incodetech/core/selfie';
+import type { IncodeFlowProps, SpinnerConfig } from '../flow/flow';
+import type { FlowCompletedProps } from '../flow/flowCompleted';
+import type { IncodeModuleProps } from '../shared/webComponent/incodeModule';
+
+// =============================================================================
+// Flow Components
+// =============================================================================
+
+/**
+ * Element type for the `<incode-flow>` web component.
+ *
+ * @example
+ * ```typescript
+ * const flow = document.createElement('incode-flow');
+ * flow.apiURL = 'https://api.example.com';
+ * flow.token = 'session-token';
+ * flow.onComplete = (result) => console.log(result);
+ * document.body.appendChild(flow);
+ * ```
+ */
+export type IncodeFlowElement = HTMLElement & IncodeFlowProps;
+
+/**
+ * Element type for the `<incode-flow-completed>` web component.
+ *
+ * @example
+ * ```typescript
+ * const completed = document.createElement('incode-flow-completed');
+ * completed.action = 'approved';
+ * completed.scoreStatus = 'OK';
+ * document.body.appendChild(completed);
+ * ```
+ */
+export type FlowCompletedElement = HTMLElement & FlowCompletedProps;
+
+// =============================================================================
+// Module Components
+// =============================================================================
+
+/**
+ * Element type for the `<incode-phone>` web component.
+ *
+ * @example
+ * ```typescript
+ * const phone = document.createElement('incode-phone');
+ * phone.config = { otpVerification: true, otpExpirationInMinutes: 5 };
+ * phone.onFinish = () => console.log('Phone verified!');
+ * phone.onError = (error) => console.error(error);
+ * document.body.appendChild(phone);
+ * ```
+ */
+export type IncodePhoneElement = HTMLElement & IncodeModuleProps<PhoneConfig>;
+
+/**
+ * Element type for the `<incode-email>` web component.
+ *
+ * @example
+ * ```typescript
+ * const email = document.createElement('incode-email');
+ * email.config = { otpVerification: true, otpExpirationInMinutes: 5 };
+ * email.onFinish = () => console.log('Email verified!');
+ * email.onError = (error) => console.error(error);
+ * document.body.appendChild(email);
+ * ```
+ */
+export type IncodeEmailElement = HTMLElement & IncodeModuleProps<EmailConfig>;
+
+/**
+ * Element type for the `<incode-selfie>` web component.
+ *
+ * @example
+ * ```typescript
+ * const selfie = document.createElement('incode-selfie');
+ * selfie.config = { showTutorial: true };
+ * selfie.onFinish = () => console.log('Selfie captured!');
+ * selfie.onError = (error) => console.error(error);
+ * document.body.appendChild(selfie);
+ * ```
+ */
+export type IncodeSelfieElement = HTMLElement & IncodeModuleProps<SelfieConfig>;
+
+// =============================================================================
+// Global Type Augmentation
+// =============================================================================
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'incode-flow': IncodeFlowElement;
+    'incode-flow-completed': FlowCompletedElement;
+    'incode-phone': IncodePhoneElement;
+    'incode-email': IncodeEmailElement;
+    'incode-selfie': IncodeSelfieElement;
+  }
+}
+
+// =============================================================================
+// Re-exports for Consumers
+// =============================================================================
+
+export type { IncodeFlowProps, SpinnerConfig, FlowCompletedProps };
+export type { IncodeModuleProps };

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../config/ts/tsconfig.strict.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "outDir": "dist",
+    "declarationMap": false,
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@incodetech/core": ["../core/src"],
+      "@incodetech/core/flow": ["../core/src/flow"],
+      "@incodetech/core/id": ["../core/src/id"],
+      "@incodetech/core/phone": ["../core/src/phone"],
+      "@incodetech/core/email": ["../core/src/email"],
+      "@incodetech/core/selfie": ["../core/src/selfie"],
+      "@incodetech/infra": ["../infra/src"]
+    }
+  },
+  "include": ["src", "dev", "vitest.config.ts", "vitest.setup.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,260 @@
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { preserveGlobals } from '@incodetech/config/vite/preact-globals';
+import preact from '@preact/preset-vite';
+import tailwindcss from '@tailwindcss/vite';
+import postcss from 'postcss';
+import postcssImport from 'postcss-import';
+import type { Plugin } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
+import dts from 'vite-plugin-dts';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const entries = {
+  index: resolve(__dirname, 'src/index.ts'),
+  'selfie/selfie': resolve(__dirname, 'src/selfie/selfie.tsx'),
+  'phone/phone': resolve(__dirname, 'src/phone/phone.tsx'),
+  'email/email': resolve(__dirname, 'src/email/email.tsx'),
+  'flow/flow': resolve(__dirname, 'src/flow/flow.tsx'),
+  'styles/core': resolve(__dirname, 'src/styles/core.css'),
+};
+
+function makeEntryMap(libEntries: Record<string, string>) {
+  const map: Record<string, { dir: string; base: string }> = {};
+  for (const key of Object.keys(libEntries)) {
+    const parts = key.split('/');
+    const base = parts.pop() ?? key;
+    const dir = parts.join('/');
+    map[key] = { dir, base };
+  }
+  return map;
+}
+
+const entryMap = makeEntryMap(entries);
+
+function buildTokensCSS(): Plugin {
+  return {
+    name: 'build-tokens-css',
+    async closeBundle() {
+      const tokensCssPath = resolve(__dirname, 'src/styles/tokens/index.css');
+      const outputPath = resolve(__dirname, 'dist/styles/tokens.css');
+
+      try {
+        const css = readFileSync(tokensCssPath, 'utf-8');
+        const result = await postcss([postcssImport()]).process(css, {
+          from: tokensCssPath,
+          to: outputPath,
+        });
+        mkdirSync(resolve(__dirname, 'dist/styles'), { recursive: true });
+        writeFileSync(outputPath, result.css, 'utf-8');
+      } catch (error) {
+        console.error('Error building tokens.css:', error);
+      }
+    },
+  };
+}
+
+function buildCoreCSS(): Plugin {
+  return {
+    name: 'build-core-css',
+    async closeBundle() {
+      const coreCssPath = resolve(__dirname, 'dist/styles/core.css');
+      const outputPath = resolve(__dirname, 'dist/styles/core.css');
+
+      try {
+        const css = readFileSync(coreCssPath, 'utf-8');
+        const processedCss = css.replace(/@reference\s+[^;]+;/g, '');
+        mkdirSync(resolve(__dirname, 'dist/styles'), { recursive: true });
+        writeFileSync(outputPath, processedCss, 'utf-8');
+      } catch (error) {
+        console.error('Error post-processing core.css:', error);
+      }
+    },
+  };
+}
+
+function useCdnForSvgs(): Plugin {
+  let manifest: Record<string, string> | null = null;
+
+  function loadManifest() {
+    if (manifest) return manifest;
+
+    try {
+      const manifestPath = resolve(__dirname, 'dist/asset-manifest.json');
+      const manifestContent = readFileSync(manifestPath, 'utf-8');
+      manifest = JSON.parse(manifestContent);
+      return manifest;
+    } catch (error) {
+      console.warn('[use-cdn-for-svgs] Could not load asset manifest:', error);
+      return null;
+    }
+  }
+
+  return {
+    name: 'use-cdn-for-svgs',
+    enforce: 'pre',
+    buildStart() {
+      loadManifest();
+    },
+    async resolveId(id, importer) {
+      if (!id.endsWith('.svg')) {
+        return null;
+      }
+
+      const cleanId = id.replace(/\?.*$/, '');
+      const manifestData = loadManifest();
+      if (!manifestData) {
+        return null;
+      }
+
+      try {
+        const resolved = await this.resolve(cleanId, importer, {
+          skipSelf: true,
+        });
+        if (!resolved || !resolved.id || typeof resolved.id !== 'string') {
+          return null;
+        }
+
+        const absolutePath = resolved.id.replace(/\?.*$/, '');
+        const relativePath = relative(
+          resolve(__dirname, 'src'),
+          absolutePath,
+        ).replace(/\\/g, '/');
+        const cdnUrl = manifestData[relativePath];
+
+        if (cdnUrl) {
+          return {
+            id: `\0cdn-svg:${cdnUrl}`,
+            external: false,
+          };
+        }
+      } catch {
+        return null;
+      }
+      return null;
+    },
+    load(id) {
+      if (id.startsWith('\0cdn-svg:')) {
+        const cdnUrl = id.replace('\0cdn-svg:', '');
+        return `export default ${JSON.stringify(cdnUrl)}`;
+      }
+
+      if (id.endsWith('.svg') && !id.includes('?')) {
+        const manifestData = loadManifest();
+        if (!manifestData) {
+          return null;
+        }
+
+        const relativePath = relative(resolve(__dirname, 'src'), id).replace(
+          /\\/g,
+          '/',
+        );
+        const cdnUrl = manifestData[relativePath];
+
+        if (cdnUrl) {
+          return `export default ${JSON.stringify(cdnUrl)}`;
+        }
+      }
+      return null;
+    },
+  };
+}
+
+const defaultAllowedHosts = ['localhost', '127.0.0.1', '::1'];
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, __dirname, '');
+  const extraHosts = env.VITE_ALLOWED_HOSTS?.split(',').filter(Boolean) ?? [];
+  const allowedHosts = [...defaultAllowedHosts, ...extraHosts];
+
+  return {
+    plugins: [
+      useCdnForSvgs(),
+      preact(),
+      buildTokensCSS(),
+      buildCoreCSS(),
+      tailwindcss(),
+      dts({
+        tsconfigPath: resolve(__dirname, 'tsconfig.json'),
+        insertTypesEntry: true,
+        exclude: [
+          'vitest.config.ts',
+          'vitest.setup.ts',
+          '**/*.test.ts',
+          '**/*.test.tsx',
+          'dev/**',
+        ],
+        include: [
+          resolve(__dirname, 'src/**/*.ts'),
+          resolve(__dirname, 'src/**/*.tsx'),
+        ],
+        copyDtsFiles: true,
+        rollupTypes: true,
+        outDir: resolve(__dirname, 'dist/types'),
+      }),
+      preserveGlobals() as Plugin,
+    ],
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src'),
+        '@incodetech/core': resolve(__dirname, '../core/src'),
+      },
+    },
+    root: resolve(__dirname, 'dev'),
+    server: {
+      port: 5173,
+      allowedHosts,
+    },
+    build: {
+      emptyOutDir: true,
+      target: 'es2021',
+      assetsInlineLimit: 0,
+      lib: {
+        entry: entries,
+        formats: ['es'],
+        fileName: (format, entryName) => `${entryName}.${format}.js`,
+      },
+      outDir: resolve(__dirname, 'dist'),
+      sourcemap: false,
+      cssCodeSplit: true,
+      cssMinify: false,
+      rollupOptions: {
+        external: [
+          '@incodetech/core',
+          '@incodetech/core/flow',
+          '@incodetech/core/phone',
+          '@incodetech/core/email',
+          '@incodetech/core/selfie',
+        ],
+        output: {
+          manualChunks: {
+            'vendor-preact': ['preact', 'preact/hooks', 'preact/compat'],
+          },
+          assetFileNames: (assetInfo) => {
+            const names = assetInfo.names || [];
+            const fileName = names[0] || '';
+            if (fileName.endsWith('.css')) {
+              const cssBase = fileName.replace(/\.css$/, '');
+              if (
+                cssBase === 'styles/core' ||
+                cssBase.includes('styles/core')
+              ) {
+                return 'styles/core.css';
+              }
+              for (const [key, { dir, base }] of Object.entries(entryMap)) {
+                if (cssBase === base || key.includes(cssBase)) {
+                  const folder = dir ? `${dir}/` : '';
+                  return `${folder}styles.css`;
+                }
+              }
+              return '[name].css';
+            }
+            return 'assets/[name][extname]';
+          },
+        },
+      },
+    },
+  };
+});

package/vitest.config.ts

@@ -0,0 +1,40 @@
+import { resolve } from 'node:path';
+import { defineConfig, mergeConfig } from 'vitest/config';
+import baseConfig from '../config/vitest/base';
+
+export default mergeConfig(
+  baseConfig,
+  defineConfig({
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src'),
+        '@incodetech/core/selfie': resolve(__dirname, '../core/src/selfie'),
+        '@incodetech/core/flow': resolve(__dirname, '../core/src/flow'),
+        '@incodetech/core': resolve(__dirname, '../core/src'),
+        '@incodetech/infra': resolve(__dirname, '../infra/src'),
+      },
+    },
+    test: {
+      environment: 'jsdom',
+      setupFiles: ['./vitest.setup.ts'],
+      coverage: {
+        exclude: [
+          '**/i18n/**',
+          '**/index.ts',
+          '**/phone/phone.tsx',
+          '**/shared/lottie/**',
+          '**/styles/generatePalette.ts',
+          '**/styles/applyTheme.ts',
+        ],
+        thresholds: {
+          'src/permissions/**': {
+            statements: 0,
+            branches: 0,
+            functions: 0,
+            lines: 0,
+          },
+        },
+      },
+    },
+  }),
+);

package/vitest.setup.ts

@@ -0,0 +1,16 @@
+import { vi } from 'vitest';
+
+vi.mock('./src/i18n/useTranslation', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    ready: true,
+    i18n: {
+      language: 'en',
+      isInitialized: true,
+      on: vi.fn(),
+      off: vi.fn(),
+    },
+  }),
+}));
+
+vi.mock('*.css', () => ({}));