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

package/src/shared/baseTutorial/replaceBaseTutorial.test.ts

@@ -1,267 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { getCssVariableAsHex, replaceLottieColor } from './replaceBaseTutorial';
-
-describe('getCssVariableAsHex', () => {
-  beforeEach(() => {
-    document.documentElement.style.setProperty('--test-color', '#ff0000');
-    document.documentElement.style.setProperty('--test-rgb', 'rgb(0, 255, 0)');
-    document.documentElement.style.setProperty(
-      '--test-rgba',
-      'rgba(0, 0, 255, 0.5)',
-    );
-    document.documentElement.style.setProperty('--test-empty', '');
-  });
-
-  afterEach(() => {
-    document.documentElement.style.removeProperty('--test-color');
-    document.documentElement.style.removeProperty('--test-rgb');
-    document.documentElement.style.removeProperty('--test-rgba');
-    document.documentElement.style.removeProperty('--test-empty');
-  });
-
-  it('returns hex value when CSS variable is hex', () => {
-    const result = getCssVariableAsHex('--test-color');
-    expect(result).toBe('#ff0000');
-  });
-
-  it('returns hex value when CSS variable is rgb', () => {
-    const result = getCssVariableAsHex('--test-rgb');
-    expect(result).toBe('#00ff00');
-  });
-
-  it('returns hex value when CSS variable is rgba', () => {
-    const result = getCssVariableAsHex('--test-rgba');
-    expect(result).toBe('#0000ff');
-  });
-
-  it('returns null when CSS variable does not exist', () => {
-    const result = getCssVariableAsHex('--non-existent');
-    expect(result).toBeNull();
-  });
-
-  it('returns null when CSS variable is empty', () => {
-    const result = getCssVariableAsHex('--test-empty');
-    expect(result).toBeNull();
-  });
-
-  it('uses provided element instead of documentElement', () => {
-    const element = document.createElement('div');
-    element.style.setProperty('--custom-color', '#abcdef');
-    document.body.appendChild(element);
-
-    const result = getCssVariableAsHex('--custom-color', element);
-    expect(result).toBe('#abcdef');
-
-    document.body.removeChild(element);
-  });
-
-  it('returns null when document is not available', () => {
-    const originalDocument = global.document;
-    Object.defineProperty(global, 'document', {
-      value: undefined,
-      writable: true,
-      configurable: true,
-    });
-
-    const result = getCssVariableAsHex('--test-color');
-
-    Object.defineProperty(global, 'document', {
-      value: originalDocument,
-      writable: true,
-      configurable: true,
-    });
-
-    expect(result).toBeNull();
-  });
-
-  it('handles rgb with spaces', () => {
-    document.documentElement.style.setProperty(
-      '--test-spaced-rgb',
-      'rgb( 100 , 200 , 50 )',
-    );
-    const result = getCssVariableAsHex('--test-spaced-rgb');
-    expect(result).toBe('#64c832');
-    document.documentElement.style.removeProperty('--test-spaced-rgb');
-  });
-
-  it('returns null for invalid rgb format', () => {
-    document.documentElement.style.setProperty(
-      '--test-invalid',
-      'rgb(invalid)',
-    );
-    const result = getCssVariableAsHex('--test-invalid');
-    expect(result).toBeNull();
-    document.documentElement.style.removeProperty('--test-invalid');
-  });
-
-  it('returns null when rgb has less than 3 numbers', () => {
-    document.documentElement.style.setProperty(
-      '--test-rgb-short',
-      'rgb(100, 200)',
-    );
-    const result = getCssVariableAsHex('--test-rgb-short');
-    expect(result).toBeNull();
-    document.documentElement.style.removeProperty('--test-rgb-short');
-  });
-
-  it('returns null when rgb has no numbers', () => {
-    document.documentElement.style.setProperty(
-      '--test-rgb-no-numbers',
-      'rgb(abc, def, ghi)',
-    );
-    const result = getCssVariableAsHex('--test-rgb-no-numbers');
-    expect(result).toBeNull();
-    document.documentElement.style.removeProperty('--test-rgb-no-numbers');
-  });
-
-  it('handles rgba format', () => {
-    document.documentElement.style.setProperty(
-      '--test-rgba-full',
-      'rgba(255, 0, 0, 1)',
-    );
-    const result = getCssVariableAsHex('--test-rgba-full');
-    expect(result).toBe('#ff0000');
-    document.documentElement.style.removeProperty('--test-rgba-full');
-  });
-
-  it('returns null when CSS variable value is not hex or rgb', () => {
-    document.documentElement.style.setProperty('--test-named-color', 'blue');
-    const result = getCssVariableAsHex('--test-named-color');
-    expect(result).toBeNull();
-    document.documentElement.style.removeProperty('--test-named-color');
-  });
-});
-
-describe('replaceLottieColor', () => {
-  it('replaces replaceColorWithYours with hex color', () => {
-    const lottieJson = {
-      layers: [
-        {
-          shapes: [
-            {
-              it: [
-                {
-                  c: {
-                    k: ['replaceColorWithYours'],
-                  },
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    };
-
-    const result = replaceLottieColor(
-      lottieJson,
-      '#ff0000',
-    ) as typeof lottieJson;
-    const jsonString = JSON.stringify(result);
-    expect(jsonString).toContain('[1,0,0,1]');
-    expect(jsonString).not.toContain('replaceColorWithYours');
-  });
-
-  it('replaces replaceR, replaceG, replaceB with color values', () => {
-    const lottieJson = {
-      test: {
-        k: [0, 'replaceR', 'replaceG', 'replaceB', 1],
-      },
-    };
-
-    const result = replaceLottieColor(
-      lottieJson,
-      '#00ff00',
-    ) as typeof lottieJson;
-    const jsonString = JSON.stringify(result);
-    expect(jsonString).toContain('0');
-    expect(jsonString).toContain('1');
-    expect(jsonString).not.toContain('replaceR');
-    expect(jsonString).not.toContain('replaceG');
-    expect(jsonString).not.toContain('replaceB');
-    const parsed = JSON.parse(jsonString);
-    expect(parsed.test.k).toEqual([0, 0, 1, 0, 1]);
-  });
-
-  it('returns original json when hex color is invalid', () => {
-    const lottieJson = { test: 'value' };
-    const result = replaceLottieColor(lottieJson, 'invalid');
-    expect(result).toEqual(lottieJson);
-  });
-
-  it('handles short hex color', () => {
-    const lottieJson = {
-      color: ['replaceColorWithYours'],
-    };
-
-    const result = replaceLottieColor(lottieJson, '#f00') as typeof lottieJson;
-    const jsonString = JSON.stringify(result);
-    expect(jsonString).toContain('[1,0,0,1]');
-  });
-
-  it('handles hex color without #', () => {
-    const lottieJson = {
-      color: ['replaceColorWithYours'],
-    };
-
-    const result = replaceLottieColor(
-      lottieJson,
-      '00ff00',
-    ) as typeof lottieJson;
-    const jsonString = JSON.stringify(result);
-    expect(jsonString).toContain('[0,1,0,1]');
-  });
-
-  it('handles complex nested structure', () => {
-    const lottieJson = {
-      v: '5.5.7',
-      fr: 30,
-      ip: 0,
-      op: 60,
-      w: 100,
-      h: 100,
-      layers: [
-        {
-          shapes: [
-            {
-              it: [
-                {
-                  c: {
-                    k: ['replaceColorWithYours'],
-                  },
-                },
-              ],
-            },
-          ],
-        },
-      ],
-      meta: {
-        k: [0, 'replaceR', 'replaceG', 'replaceB', 1],
-      },
-    };
-
-    const result = replaceLottieColor(
-      lottieJson,
-      '#123456',
-    ) as typeof lottieJson;
-    const jsonString = JSON.stringify(result);
-    expect(jsonString).not.toContain('replaceColorWithYours');
-    expect(jsonString).not.toContain('replaceR');
-    expect(jsonString).not.toContain('replaceG');
-    expect(jsonString).not.toContain('replaceB');
-    const parsed = JSON.parse(jsonString);
-    const colorArray = parsed.layers[0].shapes[0].it[0].c.k;
-    expect(colorArray).toHaveLength(4);
-    expect(colorArray[0]).toBeCloseTo(0.07058823529411765, 10);
-    expect(colorArray[1]).toBeCloseTo(0.20392156862745098, 10);
-    expect(colorArray[2]).toBeCloseTo(0.33725490196078434, 10);
-    expect(colorArray[3]).toBe(1);
-
-    const metaArray = parsed.meta.k;
-    expect(metaArray).toHaveLength(5);
-    expect(metaArray[0]).toBe(0);
-    expect(metaArray[1]).toBeCloseTo(0.07058823529411765, 10);
-    expect(metaArray[2]).toBeCloseTo(0.20392156862745098, 10);
-    expect(metaArray[3]).toBeCloseTo(0.33725490196078434, 10);
-    expect(metaArray[4]).toBe(1);
-  });
-});

package/src/shared/baseTutorial/replaceBaseTutorial.ts

@@ -1,68 +0,0 @@
-const hexToRgb = (hex: string) => {
-  let normalizedHex = hex.replace('#', '');
-  if (normalizedHex.length === 3) {
-    normalizedHex = normalizedHex
-      .split('')
-      .map((char) => char + char)
-      .join('');
-  }
-  const result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(normalizedHex);
-  return result?.[1] && result?.[2] && result?.[3]
-    ? {
-        r: Number.parseInt(result[1], 16) / 255,
-        g: Number.parseInt(result[2], 16) / 255,
-        b: Number.parseInt(result[3], 16) / 255,
-      }
-    : null;
-};
-
-const rgbToHex = (r: number, g: number, b: number) => {
-  const toHex = (n: number) => {
-    const hex = Math.round(n * 255).toString(16);
-    return hex.length === 1 ? `0${hex}` : hex;
-  };
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-};
-
-export function getCssVariableAsHex(
-  cssVar: string,
-  element?: HTMLElement,
-): string | null {
-  const el =
-    element ||
-    (typeof document !== 'undefined' ? document.documentElement : null);
-  if (!el) return null;
-
-  const computedValue = getComputedStyle(el).getPropertyValue(cssVar).trim();
-  if (!computedValue) return null;
-
-  if (computedValue.startsWith('#')) {
-    return computedValue;
-  }
-
-  if (computedValue.startsWith('rgb')) {
-    const rgbMatch = computedValue.match(/\d+/g);
-    if (rgbMatch && rgbMatch.length >= 3) {
-      const r = Number.parseInt(rgbMatch[0], 10) / 255;
-      const g = Number.parseInt(rgbMatch[1], 10) / 255;
-      const b = Number.parseInt(rgbMatch[2], 10) / 255;
-      return rgbToHex(r, g, b);
-    }
-  }
-
-  return null;
-}
-
-export function replaceLottieColor(lottieJson: unknown, newColor: string) {
-  const newColorRgba = hexToRgb(newColor);
-  if (!newColorRgba) return lottieJson;
-  const lottieColor = [newColorRgba.r, newColorRgba.g, newColorRgba.b, 1];
-
-  return JSON.parse(
-    JSON.stringify(lottieJson)
-      .replace(/"replaceColorWithYours"/g, lottieColor.join(', '))
-      .replace(/"replaceR"/g, newColorRgba.r.toString())
-      .replace(/"replaceG"/g, newColorRgba.g.toString())
-      .replace(/"replaceB"/g, newColorRgba.b.toString()),
-  );
-}

package/src/shared/button/button.css

@@ -1,55 +0,0 @@
-@reference "../../styles/tailwind.css";
-
-.IncodeButton {
-  @apply block w-full rounded-button-primary text-center max-w-[420px] mx-auto;
-  @apply transition-colors duration-200;
-
-  &.IncodeButtonPrimary {
-    @apply bg-button-primary-surface-default text-button-primary-text-default;
-    @apply text-18 font-medium py-[18px] px-32;
-    @apply border-[1.5px] border-button-primary-border-default;
-
-    &:active {
-      @apply bg-button-primary-surface-pressed;
-    }
-
-    &:not(.IncodeButtonLoading):disabled {
-      @apply bg-button-primary-surface-disabled text-button-primary-text-disabled;
-      @apply border border-button-primary-border-disabled cursor-not-allowed;
-    }
-
-    &.IncodeButtonLoading {
-      @apply p-0 min-h-[56px] flex justify-center items-center;
-      @apply cursor-not-allowed pointer-events-none;
-
-      .IncodeLoadingIconPrimaryIcon {
-        fill: var(--button-primary-text-default);
-      }
-
-      .IncodeLoadingIconSecondaryIcon {
-        fill: var(--surface-brand-400-static);
-      }
-    }
-  }
-  &.IncodeButtonLink {
-    @apply bg-transparent text-button-primary-surface-default underline;
-    @apply text-16 font-normal border-none;
-    @apply w-full h-[56px];
-
-    &:disabled {
-      @apply opacity-50 cursor-not-allowed;
-    }
-
-    &.IncodeButtonLoading {
-      @apply cursor-not-allowed pointer-events-none;
-
-      .IncodeLoadingIconPrimaryIcon {
-        fill: var(--button-primary-surface-default);
-      }
-
-      .IncodeLoadingIconSecondaryIcon {
-        fill: var(--surface-brand-400-static);
-      }
-    }
-  }
-}

package/src/shared/button/button.test.tsx

@@ -1,101 +0,0 @@
-import { render, screen } from '@testing-library/preact';
-import { describe, expect, it, vi } from 'vitest';
-import { Button } from './button';
-
-describe('Button', () => {
-  it('renders children correctly', () => {
-    render(<Button>Click me</Button>);
-    expect(screen.getByText('Click me')).toBeTruthy();
-  });
-
-  it('renders with default variant', () => {
-    const { container } = render(<Button>Test</Button>);
-    const button = container.querySelector('button');
-    expect(button?.classList.contains('IncodeButtonPrimary')).toBe(true);
-  });
-
-  it('renders with link variant', () => {
-    const { container } = render(<Button variant="link">Link</Button>);
-    const button = container.querySelector('button');
-    expect(button?.classList.contains('IncodeButtonLink')).toBe(true);
-  });
-
-  it('shows loading icon when isLoading is true', () => {
-    render(<Button isLoading>Test</Button>);
-    const button = screen.getByRole('button');
-    expect(button.classList.contains('IncodeButtonLoading')).toBe(true);
-    expect(button.querySelector('.IncodeLoadingIcon')).toBeTruthy();
-  });
-
-  it('hides children when loading', () => {
-    render(<Button isLoading>Should not see this</Button>);
-    expect(screen.queryByText('Should not see this')).toBeNull();
-  });
-
-  it('is disabled when isLoading is true', () => {
-    render(<Button isLoading>Test</Button>);
-    const button = screen.getByRole('button');
-    expect(button.hasAttribute('disabled')).toBe(true);
-  });
-
-  it('is disabled when disabled prop is true', () => {
-    render(<Button disabled>Test</Button>);
-    const button = screen.getByRole('button');
-    expect(button.hasAttribute('disabled')).toBe(true);
-  });
-
-  it('calls onClick handler when clicked', () => {
-    const handleClick = vi.fn();
-    render(<Button onClick={handleClick}>Click me</Button>);
-    const button = screen.getByRole('button');
-    button.click();
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not call onClick when disabled', () => {
-    const handleClick = vi.fn();
-    render(
-      <Button onClick={handleClick} disabled>
-        Click me
-      </Button>,
-    );
-    const button = screen.getByRole('button');
-    button.click();
-    expect(handleClick).not.toHaveBeenCalled();
-  });
-
-  it('does not call onClick when loading', () => {
-    const handleClick = vi.fn();
-    render(
-      <Button onClick={handleClick} isLoading>
-        Click me
-      </Button>,
-    );
-    const button = screen.getByRole('button');
-    button.click();
-    expect(handleClick).not.toHaveBeenCalled();
-  });
-
-  it('renders with custom class', () => {
-    const { container } = render(<Button class="custom-class">Test</Button>);
-    const button = container.querySelector('button');
-    expect(button?.classList.contains('custom-class')).toBe(true);
-  });
-
-  it('renders with data-testid', () => {
-    render(<Button data-testid="test-button">Test</Button>);
-    expect(screen.getByTestId('test-button')).toBeTruthy();
-  });
-
-  it('renders with default type button', () => {
-    render(<Button>Test</Button>);
-    const button = screen.getByRole('button');
-    expect(button.getAttribute('type')).toBe('button');
-  });
-
-  it('renders with submit type', () => {
-    render(<Button type="submit">Submit</Button>);
-    const button = screen.getByRole('button');
-    expect(button.getAttribute('type')).toBe('submit');
-  });
-});

package/src/shared/button/button.tsx

@@ -1,47 +0,0 @@
-import type { ComponentChildren, HTMLAttributes } from 'preact';
-import { cn } from '../../styles/cn';
-import { LoadingIcon } from '../loader/loadingIcon';
-import './button.css';
-
-export type ButtonProps = Omit<
-  HTMLAttributes<HTMLButtonElement>,
-  'class' | 'type'
-> & {
-  isLoading?: boolean;
-  children?: ComponentChildren;
-  class?: string;
-  type?: 'button' | 'submit' | 'reset';
-  variant?: 'primary' | 'link';
-  disabled?: boolean;
-};
-
-const buttonVariants = {
-  primary: 'IncodeButtonPrimary',
-  link: 'IncodeButtonLink',
-};
-export const Button = (props: ButtonProps) => {
-  const {
-    isLoading = false,
-    variant = 'primary',
-    class: className,
-    type = 'button',
-    children,
-    disabled,
-    ...rest
-  } = props;
-  return (
-    <button
-      {...rest}
-      class={cn(
-        'IncodeButton',
-        isLoading ? 'IncodeButtonLoading' : '',
-        buttonVariants[variant],
-        className,
-      )}
-      disabled={disabled || isLoading}
-      type={type}
-    >
-      {isLoading ? <LoadingIcon size={30} /> : children}
-    </button>
-  );
-};

package/src/shared/componentRoot/incodeComponent.tsx

@@ -1,12 +0,0 @@
-import type { ComponentChildren, VNode } from 'preact';
-
-type IncodeComponentProps = {
-  children?: ComponentChildren;
-};
-
-/**
- * Wraps UI modules with the standard container.
- */
-export function IncodeComponent({ children }: IncodeComponentProps): VNode {
-  return <div class="IncodeComponent">{children}</div>;
-}

package/src/shared/countries/countries.test.ts

@@ -1,75 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import {
-  countries,
-  getCountryByCallingCode,
-  getCountryByCode,
-} from './countries';
-
-describe('countries', () => {
-  it('exports countries array', () => {
-    expect(Array.isArray(countries)).toBe(true);
-    expect(countries.length).toBeGreaterThan(0);
-  });
-
-  it('each country has required properties', () => {
-    const country = countries[0];
-    expect(country).toHaveProperty('code');
-    expect(country).toHaveProperty('emoji');
-    expect(country).toHaveProperty('name');
-    expect(country).toHaveProperty('callingCode');
-  });
-
-  it('calling codes start with +', () => {
-    countries.forEach((country) => {
-      expect(country.callingCode).toMatch(/^\+\d+/);
-    });
-  });
-});
-
-describe('getCountryByCode', () => {
-  it('finds country by uppercase code', () => {
-    const country = getCountryByCode('US');
-    expect(country).toBeDefined();
-    expect(country?.code).toBe('US');
-  });
-
-  it('finds country by lowercase code', () => {
-    const country = getCountryByCode('us');
-    expect(country).toBeDefined();
-    expect(country?.code).toBe('US');
-  });
-
-  it('returns undefined for invalid code', () => {
-    const country = getCountryByCode('XX');
-    expect(country).toBeUndefined();
-  });
-});
-
-describe('getCountryByCallingCode', () => {
-  it('finds country by calling code with +', () => {
-    const country = getCountryByCallingCode('+1');
-    expect(country).toBeDefined();
-    expect(country?.callingCode).toBe('+1');
-  });
-
-  it('finds country by calling code without +', () => {
-    const country = getCountryByCallingCode('1');
-    expect(country).toBeDefined();
-    expect(country?.callingCode).toBe('+1');
-  });
-
-  it('returns undefined for invalid calling code', () => {
-    const country = getCountryByCallingCode('+999');
-    expect(country).toBeUndefined();
-  });
-
-  it('handles empty string', () => {
-    const country = getCountryByCallingCode('');
-    expect(country).toBeUndefined();
-  });
-
-  it('handles calling code with multiple + signs', () => {
-    const country = getCountryByCallingCode('++1');
-    expect(country).toBeUndefined();
-  });
-});