@incodetech/web 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/styles/tokens/primitives.css

@@ -1,129 +0,0 @@
-: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

@@ -1,51 +0,0 @@
-: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

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

package/src/types/assets.d.ts

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

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

@@ -1,104 +0,0 @@
-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

@@ -1,22 +0,0 @@
-{
-  "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

@@ -1,260 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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', () => ({}));