@tallyui/components 1.0.0 → 2.0.0

package/src/__tests__/helpers.ts

@@ -1,111 +0,0 @@
-import type { TallyConnector, CustomerTraits } from '@tallyui/core';
-import { wooProductTraits } from '@tallyui/connector-woocommerce';
-import { medusaProductTraits } from '@tallyui/connector-medusa';
-import { products } from '@tallyui/mock-api/data';
-import { toWooProduct, toMedusaProduct } from '@tallyui/mock-api/transforms';
-
-/**
- * Sample WooCommerce product document for component tests.
- * Generated from the shared mock catalog.
- */
-export const wooDoc = toWooProduct(products[0], 1);
-
-/**
- * Sample MedusaJS product document for component tests.
- * Generated from the shared mock catalog.
- */
-export const medusaDoc = toMedusaProduct(products[0]);
-
-/**
- * Sample WooCommerce customer document for component tests.
- */
-export const wooCustomerDoc = {
-  id: 1,
-  first_name: 'Jane',
-  last_name: 'Smith',
-  email: 'jane@example.com',
-  billing: {
-    address_1: '123 Main St',
-    city: 'Springfield',
-    state: 'IL',
-    postcode: '62701',
-  },
-};
-
-/**
- * Sample MedusaJS customer document for component tests.
- */
-export const medusaCustomerDoc = {
-  id: 'cus_01H',
-  first_name: 'Jane',
-  last_name: 'Smith',
-  email: 'jane@example.com',
-  addresses: [{
-    address_1: '123 Main St',
-    city: 'Springfield',
-    province: 'IL',
-    postal_code: '62701',
-  }],
-};
-
-const wooCustomerTraits: CustomerTraits = {
-  getId: (doc) => String(doc.id),
-  getName: (doc) => [doc.first_name, doc.last_name].filter(Boolean).join(' ') || 'Guest',
-  getEmail: (doc) => doc.email || undefined,
-  getPhone: (doc) => doc.billing?.phone || undefined,
-  getAddressSummary: (doc) => {
-    const b = doc.billing;
-    if (!b?.address_1) return undefined;
-    return [b.address_1, b.city, b.state].filter(Boolean).join(', ');
-  },
-};
-
-const medusaCustomerTraits: CustomerTraits = {
-  getId: (doc) => doc.id,
-  getName: (doc) => [doc.first_name, doc.last_name].filter(Boolean).join(' ') || 'Guest',
-  getEmail: (doc) => doc.email || undefined,
-  getPhone: (doc) => doc.phone || undefined,
-  getAddressSummary: (doc) => {
-    const a = doc.addresses?.[0];
-    if (!a?.address_1) return undefined;
-    return [a.address_1, a.city, a.province].filter(Boolean).join(', ');
-  },
-};
-
-/**
- * Builds a minimal TallyConnector with real product traits
- * for either WooCommerce or Medusa.
- */
-export function createTestConnector(type: 'woo' | 'medusa'): TallyConnector {
-  const traits = type === 'woo' ? wooProductTraits : medusaProductTraits;
-
-  return {
-    id: type,
-    name: type === 'woo' ? 'WooCommerce' : 'MedusaJS',
-    description: `Test ${type} connector`,
-    auth: {
-      type: 'none',
-      fields: [],
-      getHeaders: () => ({}),
-    },
-    schemas: {
-      products: {
-        version: 0,
-        primaryKey: 'id',
-        type: 'object',
-        properties: { id: { type: 'string', maxLength: 100 } },
-        required: ['id'],
-      },
-    },
-    traits: {
-      product: traits,
-      customer: type === 'woo' ? wooCustomerTraits : medusaCustomerTraits,
-    },
-    sync: {
-      products: {
-        fetchAllIds: async () => [],
-        fetchByIds: async () => [],
-      },
-    },
-  };
-}

package/src/__tests__/order-summary-line.test.tsx

@@ -1,18 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { OrderSummaryLine } from '../checkout/order-summary-line';
-
-describe('OrderSummaryLine', () => {
-  it('renders label and amount', () => {
-    render(<OrderSummaryLine label="Subtotal" amount="$599.99" />);
-    expect(screen.getByText('Subtotal')).toBeDefined();
-    expect(screen.getByText('$599.99')).toBeDefined();
-  });
-
-  it('applies bold variant', () => {
-    const { container } = render(
-      <OrderSummaryLine label="Total" amount="$659.99" bold />
-    );
-    expect(container).toBeDefined();
-  });
-});

package/src/__tests__/order-summary.test.tsx

@@ -1,32 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Text } from 'react-native';
-import { OrderSummary } from '../checkout/order-summary';
-
-describe('OrderSummary', () => {
-  it('renders subtotal, tax, and total lines', () => {
-    render(
-      <OrderSummary subtotal="$1199.98" tax="$120.00" taxLabel="GST" total="$1319.98" />
-    );
-    expect(screen.getByText('Subtotal')).toBeDefined();
-    expect(screen.getByText('$1199.98')).toBeDefined();
-    expect(screen.getByText('GST')).toBeDefined();
-    expect(screen.getByText('$120.00')).toBeDefined();
-    expect(screen.getByText('Total')).toBeDefined();
-    expect(screen.getByText('$1319.98')).toBeDefined();
-  });
-
-  it('renders header slot', () => {
-    render(
-      <OrderSummary subtotal="$100.00" total="$100.00" header={<Text>Customer: Jane</Text>} />
-    );
-    expect(screen.getByText('Customer: Jane')).toBeDefined();
-  });
-
-  it('renders payment info', () => {
-    render(
-      <OrderSummary subtotal="$100.00" total="$100.00" payments={[{ label: 'Cash', amount: '$100.00' }]} />
-    );
-    expect(screen.getByText('Cash')).toBeDefined();
-  });
-});

package/src/__tests__/payment-method-card.test.tsx

@@ -1,24 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { PaymentMethodCard } from '../checkout/payment-method-card';
-
-describe('PaymentMethodCard', () => {
-  it('renders the method label', () => {
-    render(<PaymentMethodCard label="Credit Card" selected={false} onPress={() => {}} />);
-    expect(screen.getByText('Credit Card')).toBeDefined();
-  });
-
-  it('calls onPress when tapped', () => {
-    const onPress = vi.fn();
-    render(<PaymentMethodCard label="Cash" selected={false} onPress={onPress} />);
-    fireEvent.click(screen.getByText('Cash'));
-    expect(onPress).toHaveBeenCalled();
-  });
-
-  it('shows selected state visually', () => {
-    const { container } = render(
-      <PaymentMethodCard label="Cash" selected={true} onPress={() => {}} />
-    );
-    expect(container).toBeDefined();
-  });
-});

package/src/__tests__/payment-selector.test.tsx

@@ -1,23 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { PaymentSelector } from '../checkout/payment-selector';
-
-describe('PaymentSelector', () => {
-  const methods = [
-    { id: 'cash', label: 'Cash' },
-    { id: 'card', label: 'Credit Card' },
-  ];
-
-  it('renders all payment methods', () => {
-    render(<PaymentSelector methods={methods} selected="cash" onSelect={() => {}} />);
-    expect(screen.getByText('Cash')).toBeDefined();
-    expect(screen.getByText('Credit Card')).toBeDefined();
-  });
-
-  it('calls onSelect when a method is tapped', () => {
-    const onSelect = vi.fn();
-    render(<PaymentSelector methods={methods} selected="cash" onSelect={onSelect} />);
-    fireEvent.click(screen.getByText('Credit Card'));
-    expect(onSelect).toHaveBeenCalledWith('card');
-  });
-});

package/src/__tests__/product-card.test.tsx

@@ -1,31 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ConnectorProvider } from '@tallyui/core';
-import { ProductCard } from '../product/product-card';
-import { createTestConnector, wooDoc } from './helpers';
-
-describe('ProductCard', () => {
-  it('renders product name and price', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductCard doc={wooDoc} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Espresso Machine Pro')).toBeDefined();
-    expect(screen.getByText('$1299.00')).toBeDefined();
-  });
-
-  it('calls onPress when tapped', () => {
-    const onPress = vi.fn();
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductCard doc={wooDoc} onPress={onPress} />
-      </ConnectorProvider>
-    );
-    // Click on the product name text element
-    fireEvent.click(screen.getByText('Espresso Machine Pro'));
-    expect(onPress).toHaveBeenCalled();
-  });
-});

package/src/__tests__/product-grid.test.tsx

@@ -1,37 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Text } from 'react-native';
-import { ConnectorProvider } from '@tallyui/core';
-import { ProductGrid } from '../product/product-grid';
-import { createTestConnector, wooDoc } from './helpers';
-
-describe('ProductGrid', () => {
-  it('renders items via renderItem', () => {
-    const connector = createTestConnector('woo');
-    const items = [{ ...wooDoc, id: 1 }, { ...wooDoc, id: 2, name: 'Grinder Pro' }];
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductGrid
-          items={items}
-          renderItem={(doc) => <Text key={doc.id}>{doc.name}</Text>}
-        />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Espresso Machine Pro')).toBeDefined();
-    expect(screen.getByText('Grinder Pro')).toBeDefined();
-  });
-
-  it('renders emptyState when items is empty', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductGrid
-          items={[]}
-          renderItem={() => null}
-          emptyState={<Text>No products</Text>}
-        />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('No products')).toBeDefined();
-  });
-});

package/src/__tests__/product-image.test.tsx

@@ -1,54 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { ConnectorProvider } from '@tallyui/core';
-import { ProductImage } from '../product/product-image';
-import { createTestConnector, wooDoc, medusaDoc } from './helpers';
-
-describe('ProductImage', () => {
-  it('renders an image for WooCommerce product', () => {
-    const connector = createTestConnector('woo');
-    const { container } = render(
-      <ConnectorProvider connector={connector}>
-        <ProductImage doc={wooDoc} />
-      </ConnectorProvider>
-    );
-    const img = container.querySelector('img');
-    expect(img).not.toBeNull();
-    expect(img?.getAttribute('src')).toBe('https://picsum.photos/seed/espresso-machine/800/800');
-  });
-
-  it('renders an image for Medusa product (uses thumbnail)', () => {
-    const connector = createTestConnector('medusa');
-    const { container } = render(
-      <ConnectorProvider connector={connector}>
-        <ProductImage doc={medusaDoc} />
-      </ConnectorProvider>
-    );
-    const img = container.querySelector('img');
-    expect(img).not.toBeNull();
-    expect(img?.getAttribute('src')).toBe('https://picsum.photos/seed/espresso-machine/800/800');
-  });
-
-  it('renders nothing when no image URL is available', () => {
-    const connector = createTestConnector('woo');
-    const { container } = render(
-      <ConnectorProvider connector={connector}>
-        <ProductImage doc={{}} />
-      </ConnectorProvider>
-    );
-    const img = container.querySelector('img');
-    expect(img).toBeNull();
-  });
-
-  it('renders with custom size prop without crashing', () => {
-    const connector = createTestConnector('woo');
-    const { container } = render(
-      <ConnectorProvider connector={connector}>
-        <ProductImage doc={wooDoc} size={120} />
-      </ConnectorProvider>
-    );
-    const img = container.querySelector('img');
-    expect(img).not.toBeNull();
-    expect(img?.getAttribute('src')).toBe('https://picsum.photos/seed/espresso-machine/800/800');
-  });
-});

package/src/__tests__/product-price.test.tsx

@@ -1,68 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { ConnectorProvider } from '@tallyui/core';
-import { ProductPrice } from '../product/product-price';
-import { createTestConnector, wooDoc, medusaDoc } from './helpers';
-
-describe('ProductPrice', () => {
-  it('renders WooCommerce price with default $ symbol', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductPrice doc={wooDoc} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('$1299.00')).toBeDefined();
-  });
-
-  it('renders Medusa price (converted from cents)', () => {
-    const connector = createTestConnector('medusa');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductPrice doc={medusaDoc} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('$1299.00')).toBeDefined();
-  });
-
-  it('renders custom currency symbol', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductPrice doc={wooDoc} currencySymbol="€" />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('€1299.00')).toBeDefined();
-  });
-
-  it('renders dash when price is missing', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductPrice doc={{}} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('-')).toBeDefined();
-  });
-
-  it('shows sale price with "was" indicator for on-sale WooCommerce product', () => {
-    const connector = createTestConnector('woo');
-    const saleDoc = {
-      ...wooDoc,
-      price: '499.99',
-      sale_price: '499.99',
-      regular_price: '599.99',
-      on_sale: true,
-    };
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductPrice doc={saleDoc} />
-      </ConnectorProvider>
-    );
-    // The component should show the sale price and "was" regular price
-    const el = screen.getByText(/499\.99/);
-    expect(el).toBeDefined();
-    expect(el.textContent).toContain('was');
-    expect(el.textContent).toContain('599.99');
-  });
-});

package/src/__tests__/product-sku.test.tsx

@@ -1,47 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { ConnectorProvider } from '@tallyui/core';
-import { ProductSku } from '../product/product-sku';
-import { createTestConnector, wooDoc, medusaDoc } from './helpers';
-
-describe('ProductSku', () => {
-  it('renders WooCommerce SKU', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductSku doc={wooDoc} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('EQ-ESP-001')).toBeDefined();
-  });
-
-  it('renders Medusa SKU from variant', () => {
-    const connector = createTestConnector('medusa');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductSku doc={medusaDoc} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('EQ-ESP-001')).toBeDefined();
-  });
-
-  it('renders fallback when SKU is missing', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductSku doc={{}} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('—')).toBeDefined();
-  });
-
-  it('renders custom fallback text', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductSku doc={{}} fallback="N/A" />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('N/A')).toBeDefined();
-  });
-});

package/src/__tests__/product-stock-badge.test.tsx

@@ -1,58 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { ConnectorProvider } from '@tallyui/core';
-import { ProductStockBadge } from '../product/product-stock-badge';
-import { createTestConnector, wooDoc, medusaDoc } from './helpers';
-
-describe('ProductStockBadge', () => {
-  it('renders "In Stock" for WooCommerce in-stock product', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductStockBadge doc={wooDoc} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('In Stock')).toBeDefined();
-  });
-
-  it('renders "In Stock" for Medusa product with inventory', () => {
-    const connector = createTestConnector('medusa');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductStockBadge doc={medusaDoc} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('In Stock')).toBeDefined();
-  });
-
-  it('renders "Out of Stock" for out-of-stock product', () => {
-    const connector = createTestConnector('woo');
-    const outOfStockDoc = { ...wooDoc, stock_status: 'outofstock', stock_quantity: 0 };
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductStockBadge doc={outOfStockDoc} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Out of Stock')).toBeDefined();
-  });
-
-  it('shows quantity when showQuantity is true', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductStockBadge doc={wooDoc} showQuantity />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('In Stock (12)')).toBeDefined();
-  });
-
-  it('renders "Unknown" when stock status is missing', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductStockBadge doc={{}} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Unknown')).toBeDefined();
-  });
-});

package/src/__tests__/product-title.test.tsx

@@ -1,38 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { ConnectorProvider } from '@tallyui/core';
-import { ProductTitle } from '../product/product-title';
-import { createTestConnector, wooDoc, medusaDoc } from './helpers';
-
-describe('ProductTitle', () => {
-  it('renders the WooCommerce product name', () => {
-    const connector = createTestConnector('woo');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductTitle doc={wooDoc} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Espresso Machine Pro')).toBeDefined();
-  });
-
-  it('renders the Medusa product title', () => {
-    const connector = createTestConnector('medusa');
-    render(
-      <ConnectorProvider connector={connector}>
-        <ProductTitle doc={medusaDoc} />
-      </ConnectorProvider>
-    );
-    expect(screen.getByText('Espresso Machine Pro')).toBeDefined();
-  });
-
-  it('renders empty string gracefully for missing name', () => {
-    const connector = createTestConnector('woo');
-    const { container } = render(
-      <ConnectorProvider connector={connector}>
-        <ProductTitle doc={{}} />
-      </ConnectorProvider>
-    );
-    // Should render without crashing
-    expect(container).toBeDefined();
-  });
-});

package/src/__tests__/search-input.test.tsx

@@ -1,22 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { SearchInput } from '../input/search-input';
-
-describe('SearchInput', () => {
-  it('renders with placeholder text', () => {
-    render(<SearchInput value="" onChangeText={() => {}} placeholder="Search products..." />);
-    expect(screen.getByPlaceholderText('Search products...')).toBeDefined();
-  });
-
-  it('displays the current value', () => {
-    render(<SearchInput value="espresso" onChangeText={() => {}} />);
-    expect(screen.getByDisplayValue('espresso')).toBeDefined();
-  });
-
-  it('calls onChangeText when text changes', () => {
-    const onChangeText = vi.fn();
-    render(<SearchInput value="" onChangeText={onChangeText} />);
-    fireEvent.change(screen.getByPlaceholderText('Search...'), { target: { value: 'latte' } });
-    expect(onChangeText).toHaveBeenCalledWith('latte');
-  });
-});