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

package/src/shared/spacer/spacer.test.tsx

@@ -1,143 +0,0 @@
-import { render } from '@testing-library/preact';
-import { describe, expect, it } from 'vitest';
-import { Spacer } from './spacer';
-
-describe('Spacer', () => {
-  it('renders with default vertical direction', () => {
-    const { container } = render(<Spacer size={16} />);
-    const spacer = container.querySelector('div');
-    expect(spacer?.classList.contains('IncodeSpacerVertical16')).toBe(true);
-  });
-
-  it('renders with horizontal direction', () => {
-    const { container } = render(<Spacer size={16} direction="horizontal" />);
-    const spacer = container.querySelector('div');
-    expect(spacer?.classList.contains('IncodeSpacerHorizontal16')).toBe(true);
-  });
-
-  it('renders with vertical direction explicitly', () => {
-    const { container } = render(<Spacer size={16} direction="vertical" />);
-    const spacer = container.querySelector('div');
-    expect(spacer?.classList.contains('IncodeSpacerVertical16')).toBe(true);
-  });
-
-  it('renders with all vertical scale token sizes', () => {
-    const sizes = [
-      0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 104, 120, 200,
-    ];
-    sizes.forEach((size) => {
-      const { container } = render(<Spacer size={size} />);
-      const spacer = container.querySelector('div');
-      expect(spacer?.classList.contains(`IncodeSpacerVertical${size}`)).toBe(
-        true,
-      );
-    });
-  });
-
-  it('renders with all horizontal scale token sizes', () => {
-    const sizes = [
-      0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 104, 120, 200,
-    ];
-    sizes.forEach((size) => {
-      const { container } = render(
-        <Spacer size={size} direction="horizontal" />,
-      );
-      const spacer = container.querySelector('div');
-      expect(spacer?.classList.contains(`IncodeSpacerHorizontal${size}`)).toBe(
-        true,
-      );
-    });
-  });
-
-  it('renders flex spacer when size is undefined', () => {
-    const { container } = render(<Spacer />);
-    const spacer = container.querySelector('div');
-    expect(spacer?.classList.contains('IncodeSpacerFlex')).toBe(true);
-  });
-
-  it('renders with custom className', () => {
-    const { container } = render(<Spacer size={16} className="custom-class" />);
-    const spacer = container.querySelector('div');
-    expect(spacer?.classList.contains('IncodeSpacerVertical16')).toBe(true);
-    expect(spacer?.classList.contains('custom-class')).toBe(true);
-  });
-
-  it('renders flex spacer with custom className', () => {
-    const { container } = render(<Spacer className="custom-flex" />);
-    const spacer = container.querySelector('div');
-    expect(spacer?.classList.contains('IncodeSpacerFlex')).toBe(true);
-    expect(spacer?.classList.contains('custom-flex')).toBe(true);
-  });
-
-  it('handles non-scale token number size', () => {
-    const { container } = render(<Spacer size={99} />);
-    const spacer = container.querySelector('div');
-    expect(spacer?.classList.length).toBe(0);
-  });
-
-  it('handles string size', () => {
-    const { container } = render(<Spacer size="20px" />);
-    const spacer = container.querySelector('div');
-    expect(spacer?.classList.length).toBe(0);
-  });
-
-  it('handles non-scale token number with horizontal direction', () => {
-    const { container } = render(<Spacer size={99} direction="horizontal" />);
-    const spacer = container.querySelector('div');
-    expect(spacer?.classList.length).toBe(0);
-  });
-
-  it('handles string size with horizontal direction', () => {
-    const { container } = render(<Spacer size="20px" direction="horizontal" />);
-    const spacer = container.querySelector('div');
-    expect(spacer?.classList.length).toBe(0);
-  });
-
-  it('handles empty className string', () => {
-    const { container } = render(<Spacer size={16} className="" />);
-    const spacer = container.querySelector('div');
-    expect(spacer?.classList.contains('IncodeSpacerVertical16')).toBe(true);
-  });
-
-  it('applies correct CSS classes for vertical spacer', () => {
-    const { container } = render(<Spacer size={8} direction="vertical" />);
-    const spacer = container.querySelector('div');
-    const classes = Array.from(spacer?.classList || []);
-    expect(classes).toContain('IncodeSpacerVertical8');
-  });
-
-  it('applies correct CSS classes for horizontal spacer', () => {
-    const { container } = render(<Spacer size={8} direction="horizontal" />);
-    const spacer = container.querySelector('div');
-    const classes = Array.from(spacer?.classList || []);
-    expect(classes).toContain('IncodeSpacerHorizontal8');
-  });
-
-  it('applies correct CSS class for flex spacer', () => {
-    const { container } = render(<Spacer />);
-    const spacer = container.querySelector('div');
-    const classes = Array.from(spacer?.classList || []);
-    expect(classes).toContain('IncodeSpacerFlex');
-  });
-
-  it('handles invalid direction value', () => {
-    const { container } = render(
-      <Spacer size={16} direction={'invalid' as 'horizontal'} />,
-    );
-    const spacer = container.querySelector('div');
-    expect(spacer?.classList.length).toBe(0);
-  });
-
-  it('handles invalid direction with className', () => {
-    const { container } = render(
-      <Spacer
-        size={16}
-        direction={'invalid' as 'horizontal'}
-        className="custom"
-      />,
-    );
-    const spacer = container.querySelector('div');
-    expect(spacer?.classList.contains('custom')).toBe(true);
-    expect(spacer?.classList.length).toBe(1);
-  });
-});

package/src/shared/spacer/spacer.tsx

@@ -1,88 +0,0 @@
-import './spacer.css';
-
-type SpacerProps = {
-  size?: number | string;
-  direction?: 'horizontal' | 'vertical';
-  className?: string;
-};
-
-const scaleTokens = new Set([
-  0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 104, 120, 160, 200,
-]);
-
-const scaleToClassName = (
-  size: number,
-  direction: 'horizontal' | 'vertical',
-) => {
-  if (direction === 'horizontal') {
-    return {
-      0: 'IncodeSpacerHorizontal0',
-      2: 'IncodeSpacerHorizontal2',
-      4: 'IncodeSpacerHorizontal4',
-      8: 'IncodeSpacerHorizontal8',
-      12: 'IncodeSpacerHorizontal12',
-      16: 'IncodeSpacerHorizontal16',
-      20: 'IncodeSpacerHorizontal20',
-      24: 'IncodeSpacerHorizontal24',
-      32: 'IncodeSpacerHorizontal32',
-      40: 'IncodeSpacerHorizontal40',
-      48: 'IncodeSpacerHorizontal48',
-      64: 'IncodeSpacerHorizontal64',
-      80: 'IncodeSpacerHorizontal80',
-      96: 'IncodeSpacerHorizontal96',
-      104: 'IncodeSpacerHorizontal104',
-      120: 'IncodeSpacerHorizontal120',
-      160: 'IncodeSpacerHorizontal160',
-      200: 'IncodeSpacerHorizontal200',
-    }[size];
-  }
-  return {
-    0: 'IncodeSpacerVertical0',
-    2: 'IncodeSpacerVertical2',
-    4: 'IncodeSpacerVertical4',
-    8: 'IncodeSpacerVertical8',
-    12: 'IncodeSpacerVertical12',
-    16: 'IncodeSpacerVertical16',
-    20: 'IncodeSpacerVertical20',
-    24: 'IncodeSpacerVertical24',
-    32: 'IncodeSpacerVertical32',
-    40: 'IncodeSpacerVertical40',
-    48: 'IncodeSpacerVertical48',
-    64: 'IncodeSpacerVertical64',
-    80: 'IncodeSpacerVertical80',
-    96: 'IncodeSpacerVertical96',
-    104: 'IncodeSpacerVertical104',
-    120: 'IncodeSpacerVertical120',
-    160: 'IncodeSpacerVertical160',
-    200: 'IncodeSpacerVertical200',
-  }[size];
-};
-
-export const Spacer = ({
-  size,
-  className,
-  direction = 'vertical',
-}: SpacerProps) => {
-  if (size === undefined) {
-    return <div class={`IncodeSpacerFlex ${className || ''}`} />;
-  }
-
-  const dimension =
-    direction === 'horizontal'
-      ? 'w'
-      : direction === 'vertical'
-        ? 'h'
-        : undefined;
-
-  if (!dimension) {
-    return <div class={`${className || ''}`} />;
-  }
-
-  if (typeof size === 'number' && scaleTokens.has(size)) {
-    return (
-      <div class={`${scaleToClassName(size, direction)} ${className || ''}`} />
-    );
-  }
-
-  return <div class={`${className || ''}`} />;
-};

package/src/shared/spinner/index.ts

@@ -1,2 +0,0 @@
-export type { SpinnerProps, SpinnerSize } from './spinner';
-export { Spinner } from './spinner';

package/src/shared/spinner/spinner.css

@@ -1,28 +0,0 @@
-@reference "../../styles/tailwind.css";
-
-.IncodeSpinner {
-  @apply flex items-center justify-center;
-}
-
-.IncodeSpinner.IncodeSpinnerFullScreen {
-  @apply fixed inset-0 z-50;
-  background-color: var(--spinner-surface-overlay);
-  opacity: var(--spinner-surface-overlay-opacity, 1);
-}
-
-.IncodeSpinnerContent {
-  @apply flex flex-col items-center justify-center;
-}
-
-.IncodeSpinnerText {
-  @apply flex flex-col items-center text-center;
-}
-
-.IncodeSpinnerTitle {
-  color: var(--spinner-text-title);
-}
-
-.IncodeSpinnerSubtitle {
-  @apply text-base;
-  color: var(--spinner-text-subtitle);
-}

package/src/shared/spinner/spinner.test.tsx

@@ -1,82 +0,0 @@
-import { render, screen } from '@testing-library/preact';
-import { describe, expect, it, vi } from 'vitest';
-import { Spinner } from './spinner';
-
-vi.mock('../loader/loadingIcon', () => ({
-  LoadingIcon: ({ size }: { size: number }) => (
-    <div data-testid="loading-icon" data-size={size}>
-      Loading Icon
-    </div>
-  ),
-}));
-
-describe('Spinner', () => {
-  it('renders with default props (icon only, no text)', () => {
-    const { container } = render(<Spinner />);
-    const spinner = container.querySelector('.IncodeSpinner');
-    expect(spinner).toBeTruthy();
-    expect(spinner?.classList.contains('IncodeSpinnerFullScreen')).toBe(true);
-    // No text by default
-    expect(container.querySelector('.IncodeSpinnerText')).toBeNull();
-  });
-
-  it('renders with fullScreen false', () => {
-    const { container } = render(<Spinner fullScreen={false} />);
-    const spinner = container.querySelector('.IncodeSpinner');
-    expect(spinner).toBeTruthy();
-    expect(spinner?.classList.contains('IncodeSpinnerFullScreen')).toBe(false);
-  });
-
-  it('renders LoadingIcon with default medium size', () => {
-    render(<Spinner />);
-    const icon = screen.getByTestId('loading-icon');
-    expect(icon).toBeTruthy();
-    expect(icon.getAttribute('data-size')).toBe('48');
-  });
-
-  it('renders LoadingIcon with small size', () => {
-    render(<Spinner size="small" />);
-    const icon = screen.getByTestId('loading-icon');
-    expect(icon.getAttribute('data-size')).toBe('24');
-  });
-
-  it('renders LoadingIcon with large size', () => {
-    render(<Spinner size="large" />);
-    const icon = screen.getByTestId('loading-icon');
-    expect(icon.getAttribute('data-size')).toBe('64');
-  });
-
-  it('renders with title', () => {
-    render(<Spinner title="Loading..." />);
-    expect(screen.getByText('Loading...')).toBeTruthy();
-  });
-
-  it('renders with subtitle', () => {
-    render(<Spinner subtitle="Please wait" />);
-    expect(screen.getByText('Please wait')).toBeTruthy();
-  });
-
-  it('renders with both title and subtitle', () => {
-    render(<Spinner title="Loading..." subtitle="Please wait" />);
-    expect(screen.getByText('Loading...')).toBeTruthy();
-    expect(screen.getByText('Please wait')).toBeTruthy();
-  });
-
-  it('applies custom className', () => {
-    const { container } = render(<Spinner className="custom-class" />);
-    const spinner = container.querySelector('.IncodeSpinner');
-    expect(spinner?.classList.contains('custom-class')).toBe(true);
-  });
-
-  it('renders text container when title is provided', () => {
-    const { container } = render(<Spinner title="Loading" />);
-    const textContainer = container.querySelector('.IncodeSpinnerText');
-    expect(textContainer).toBeTruthy();
-  });
-
-  it('renders text container when subtitle is provided', () => {
-    const { container } = render(<Spinner subtitle="Please wait" />);
-    const textContainer = container.querySelector('.IncodeSpinnerText');
-    expect(textContainer).toBeTruthy();
-  });
-});

package/src/shared/spinner/spinner.tsx

@@ -1,65 +0,0 @@
-import type { FC } from 'preact/compat';
-import { cn } from '@/styles/cn';
-import { LoadingIcon } from '../loader/loadingIcon';
-import { Spacer } from '../spacer/spacer';
-import { Title } from '../title/title';
-import './spinner.css';
-
-export type SpinnerSize = 'small' | 'medium' | 'large';
-
-export type SpinnerProps = {
-  /** Title text to display below the spinner */
-  title?: string;
-  /** Subtitle text to display below the title */
-  subtitle?: string;
-  /** Size of the spinner icon */
-  size?: SpinnerSize;
-  /** Whether to display as full-screen overlay */
-  fullScreen?: boolean;
-  /** Additional CSS class name */
-  className?: string;
-};
-
-const sizeMap: Record<SpinnerSize, number> = {
-  small: 24,
-  medium: 48,
-  large: 64,
-};
-
-export const Spinner: FC<SpinnerProps> = ({
-  title,
-  subtitle,
-  size = 'medium',
-  fullScreen = true,
-  className,
-}) => {
-  const iconSize = sizeMap[size];
-
-  const containerClass = cn(
-    'IncodeSpinner',
-    fullScreen && 'IncodeSpinnerFullScreen',
-    className,
-  );
-
-  return (
-    <div class={containerClass}>
-      <div class="IncodeSpinnerContent">
-        <LoadingIcon size={iconSize} />
-        {(title || subtitle) && (
-          <>
-            <Spacer size={16} />
-            <div class="IncodeSpinnerText">
-              {title && <Title className="IncodeSpinnerTitle">{title}</Title>}
-              {subtitle && (
-                <>
-                  {title && <Spacer size={12} />}
-                  <p class="IncodeSpinnerSubtitle">{subtitle}</p>
-                </>
-              )}
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/shared/title/title.css

@@ -1,7 +0,0 @@
-@reference "../../styles/tailwind.css";
-
-.IncodeComponent {
-  .IncodeTitle {
-    @apply text-2xl font-bold text-center tracking-[-1px] leading-[125%] text-text-body-primary;
-  }
-}

package/src/shared/title/title.tsx

@@ -1,12 +0,0 @@
-import type { ComponentChildren } from 'preact';
-import type { FC } from 'preact/compat';
-import './title.css';
-
-type TitleProps = {
-  children: ComponentChildren;
-  className?: string;
-};
-
-export const Title: FC<TitleProps> = ({ children, className }) => {
-  return <h2 class={`IncodeTitle ${className ?? ''}`}>{children}</h2>;
-};

package/src/shared/uiConfig/uiConfig.ts

@@ -1,36 +0,0 @@
-import { useSyncExternalStore } from 'preact/compat';
-
-export type UiConfig = {
-  logoSrc?: string;
-  logoHeight?: string;
-  hideHeader?: boolean;
-  hideFooterBranding?: boolean;
-};
-
-let uiConfig: UiConfig = {};
-const listeners = new Set<() => void>();
-
-function subscribe(listener: () => void): () => void {
-  listeners.add(listener);
-  return () => {
-    listeners.delete(listener);
-  };
-}
-
-function getSnapshot(): UiConfig {
-  return uiConfig;
-}
-
-/**
- * Sets global UI configuration defaults for `@incodetech/ui`.
- */
-export function setUiConfig(next: UiConfig): void {
-  uiConfig = next;
-  for (const listener of listeners) {
-    listener();
-  }
-}
-
-export function useUiConfig(): UiConfig {
-  return useSyncExternalStore(subscribe, getSnapshot);
-}

package/src/shared/webComponent/incodeModule.ts

@@ -1,29 +0,0 @@
-import type { ComponentType } from 'preact';
-import { registerIncodeElement } from './registerIncodeElement';
-
-export type IncodeModuleProps<TConfig> = {
-  /**
-   * Module configuration required to render the flow.
-   * For Web Components, this is typically assigned via `element.config = ...`.
-   */
-  config?: TConfig;
-
-  /**
-   * Callback invoked when the module completes successfully.
-   */
-  onFinish?: () => void;
-
-  /**
-   * Callback invoked when a fatal module error occurs.
-   */
-  onError?: (error: string | undefined) => void;
-};
-
-export const incodeModulePropKeys = ['config', 'onFinish', 'onError'] as const;
-
-export function registerIncodeModuleElement<TConfig>(
-  component: ComponentType<IncodeModuleProps<TConfig>>,
-  tagName: string,
-): void {
-  registerIncodeElement(component, tagName, incodeModulePropKeys);
-}

package/src/shared/webComponent/registerIncodeElement.ts

@@ -1,15 +0,0 @@
-import type { ComponentType } from 'preact';
-import register from 'preact-custom-element';
-
-/**
- * Registers a Preact component as a Web Component with `shadow: false`.
- */
-export function registerIncodeElement<TProps>(
-  component: ComponentType<TProps>,
-  tagName: string,
-  props: readonly (keyof TProps)[],
-): void {
-  register(component, tagName, [...props], {
-    shadow: false,
-  });
-}

package/src/styles/__mocks__/fetchTheme.ts

@@ -1,19 +0,0 @@
-import { vi } from 'vitest';
-import type { ThemeConfig } from '../themeTypes';
-
-export const mockFetchTheme = vi.fn<() => Promise<ThemeConfig>>();
-export const mockFetchAssets = vi.fn();
-export const mockFetchAndApplyTheme = vi.fn<() => Promise<ThemeConfig>>();
-
-export const createMockThemeConfig = (
-  overrides?: Partial<ThemeConfig>,
-): ThemeConfig => ({
-  main: '#ff0000',
-  buttonColor: '#ffffff',
-  ...overrides,
-});
-
-export const createMockAssetsResponse = () => ({
-  theme: '/api/theme.json',
-  'logo.png': 'https://example.com/logo.png',
-});

package/src/styles/applyTheme.ts

@@ -1,37 +0,0 @@
-import { generateBrandPalette } from './generatePalette';
-
-export function applyTheme(mainColor: string, buttonColor?: string): void {
-  if (typeof document === 'undefined') {
-    return;
-  }
-
-  const palette = generateBrandPalette(mainColor);
-
-  let styleElement = document.getElementById(
-    'incode-theme',
-  ) as HTMLStyleElement | null;
-
-  if (!styleElement) {
-    styleElement = document.createElement('style');
-    styleElement.id = 'incode-theme';
-    document.head.appendChild(styleElement);
-  }
-
-  const buttonTextColor = buttonColor || '#ffffff';
-
-  const css = `
-    :root,
-    :host {
-      --primitive-color-brand-50: ${palette['50']};
-      --primitive-color-brand-200: ${palette['200']};
-      --primitive-color-brand-300: ${palette['300']};
-      --primitive-color-brand-400: ${palette['400']};
-      --primitive-color-brand-500: ${palette['500']};
-      --primitive-color-brand-600: ${palette['600']};
-      --primitive-color-brand-900: ${palette['900']};
-      --button-primary-text-default: ${buttonTextColor};
-    }
-  `;
-
-  styleElement.textContent = css;
-}

package/src/styles/cn.test.tsx

@@ -1,57 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { cn } from './cn';
-
-describe('cn', () => {
-  it('should return empty string for no arguments', () => {
-    expect(cn()).toBe('');
-  });
-
-  it('should return single string class', () => {
-    expect(cn('foo')).toBe('foo');
-  });
-
-  it('should join multiple string classes', () => {
-    expect(cn('foo', 'bar', 'baz')).toBe('foo bar baz');
-  });
-
-  it('should filter out null values', () => {
-    expect(cn('foo', null, 'bar')).toBe('foo bar');
-  });
-
-  it('should filter out undefined values', () => {
-    expect(cn('foo', undefined, 'bar')).toBe('foo bar');
-  });
-
-  it('should filter out false values', () => {
-    expect(cn('foo', false, 'bar')).toBe('foo bar');
-  });
-
-  it('should handle object with truthy values', () => {
-    expect(cn({ foo: true, bar: true })).toBe('foo bar');
-  });
-
-  it('should filter out object keys with falsy values', () => {
-    expect(cn({ foo: true, bar: false, baz: true })).toBe('foo baz');
-  });
-
-  it('should handle mixed string and object classes', () => {
-    expect(cn('base', { active: true, disabled: false })).toBe('base active');
-  });
-
-  it('should handle empty object', () => {
-    expect(cn({})).toBe('');
-  });
-
-  it('should handle complex combinations', () => {
-    expect(
-      cn(
-        'btn',
-        null,
-        { primary: true, large: false },
-        undefined,
-        'extra',
-        false,
-      ),
-    ).toBe('btn primary extra');
-  });
-});

package/src/styles/cn.tsx

@@ -1,21 +0,0 @@
-type ClassValue = string | null | undefined | false | Record<string, boolean>;
-
-export const cn = (...classes: ClassValue[]) => {
-  const result: string[] = [];
-
-  for (const cls of classes) {
-    if (!cls) continue;
-
-    if (typeof cls === 'string') {
-      result.push(cls);
-    } else if (typeof cls === 'object') {
-      for (const [key, value] of Object.entries(cls)) {
-        if (value) {
-          result.push(key);
-        }
-      }
-    }
-  }
-
-  return result.join(' ');
-};

package/src/styles/core.css

@@ -1,12 +0,0 @@
-@import "./tailwind.css";
-
-@import "../shared/button/button.css";
-@import "../shared/otpInput/otpInput.css";
-@import "../shared/page/page.css";
-@import "../shared/page/verifiedByIncode.css";
-@import "../shared/title/title.css";
-@import "../shared/icons/successIcon.css";
-@import "../shared/spacer/spacer.css";
-@import "../shared/loader/loadingIcon.css";
-@import "../shared/baseTutorial/baseTutorial.css";
-@import "../shared/spinner/spinner.css";