@anker-in/lib 1.0.0-beta.5 → 1.0.0-beta.6

package/package.json

@@ -1,12 +1,33 @@
 {
   "name": "@anker-in/lib",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
+  "description": "Convenience package that re-exports all Anker headless packages",
   "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
   "dependencies": {
-    "@anker-in/shopify": "0.0.0-beta.5",
-    "@anker-in/cart": "1.0.0-beta.1",
-    "@anker-in/shared": "1.0.0-beta.1"
+    "@anker-in/shared": "1.0.0-beta.2",
+    "@anker-in/shopify": "0.0.0-beta.6",
+    "@anker-in/cart": "1.0.0-beta.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
@@ -14,12 +35,24 @@
     "jest": "^29.0.0",
     "ts-jest": "^29.2.6",
     "tsup": "^8.4.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "@anker-in/shared": "1.0.0-beta.2",
+    "@anker-in/shopify": "0.0.0-beta.6",
+    "@anker-in/cart": "1.0.0-beta.2"
   },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
+  "keywords": [
+    "anker",
+    "headless",
+    "shopify",
+    "ecommerce",
+    "react"
+  ],
+  "author": "Anker",
+  "license": "MIT",
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup",

package/.turbo/turbo-build.log

@@ -1,27 +0,0 @@
-
-> @anker-in/lib@1.0.0 build /Users/anker/Code/headless-ui/packages/lib
-> tsup
-
-CLI Building entry: src/index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.4.0
-CLI Using tsup config: /Users/anker/Code/headless-ui/packages/lib/tsup.config.ts
-CLI Target: esnext
-CLI Cleaning output folder
-ESM Build start
-CJS Build start
-IIFE Build start
-If you do not supply "output.name", you may not be able to access the exports of an IIFE bundle.
-IIFE dist/index.global.js     198.00 B
-IIFE dist/index.global.js.map 397.00 B
-IIFE ⚡️ Build success in 436ms
-CJS dist/index.js     143.00 B
-CJS dist/index.js.map 389.00 B
-CJS ⚡️ Build success in 438ms
-ESM dist/index.mjs     130.00 B
-ESM dist/index.mjs.map 390.00 B
-ESM ⚡️ Build success in 438ms
-DTS Build start
-DTS ⚡️ Build success in 4317ms
-DTS dist/index.d.mts 161.00 B
-DTS dist/index.d.ts  161.00 B

package/.turbo/turbo-test.log

@@ -1,14 +0,0 @@
-
-> @anker-in/lib@1.0.0 test /Users/anker/Code/headless-ui/packages/lib
-> jest --passWithNoTests
-
-PASS src/__tests__/math.test.ts
-  math functions
-    ✓ add should correctly add two numbers (1 ms)
-    ✓ subtract should correctly subtract two numbers
-
-Test Suites: 1 passed, 1 total
-Tests:       2 passed, 2 total
-Snapshots:   0 total
-Time:        1.197 s
-Ran all test suites.

package/USAGE_EXAMPLE.md

@@ -1,425 +0,0 @@
-# 使用示例
-
-## 完整的电商应用示例
-
-以下是一个完整的示例，展示如何使用 `@anker-in/lib` 构建电商应用：
-
-### 1. 应用入口（App.tsx）
-
-```tsx
-import { HeadlessProvider } from '@anker-in/lib'
-import { ProductList } from './components/ProductList'
-import { Cart } from './components/Cart'
-
-const headlessConfig = {
-  storefrontToken: process.env.NEXT_PUBLIC_SHOPIFY_TOKEN!,
-  storeDomain: process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN!,
-  locale: 'zh-CN',
-  comboMetafieldsNamespace: 'custom',
-  cartIdCookieName: 'anker_cart_id',
-  brand: 'Anker',
-  appName: 'Anker Store'
-}
-
-export default function App() {
-  return (
-    <HeadlessProvider headlessConfig={headlessConfig}>
-      <div className="app">
-        <header>
-          <h1>Anker 商店</h1>
-          <Cart />
-        </header>
-        <main>
-          <ProductList />
-        </main>
-      </div>
-    </HeadlessProvider>
-  )
-}
-```
-
-### 2. 产品列表（ProductList.tsx）
-
-```tsx
-import { useProducts, useHeadlessContext } from '@anker-in/lib'
-import { ProductCard } from './ProductCard'
-
-export function ProductList() {
-  const { locale } = useHeadlessContext()
-  const { data: products, isLoading } = useProducts({
-    first: 12,
-    // 其他查询参数...
-  })
-
-  if (isLoading) return <div>加载中...</div>
-
-  return (
-    <div className="product-grid">
-      {products?.map(product => (
-        <ProductCard key={product.id} product={product} />
-      ))}
-    </div>
-  )
-}
-```
-
-### 3. 产品卡片（ProductCard.tsx）
-
-```tsx
-import { 
-  useAddToCart, 
-  useBuyNow,
-  type Product 
-} from '@anker-in/lib'
-
-interface ProductCardProps {
-  product: Product
-}
-
-export function ProductCard({ product }: ProductCardProps) {
-  const { trigger: addToCart, isMutating: isAdding } = useAddToCart()
-  const { trigger: buyNow, isMutating: isBuying } = useBuyNow()
-
-  const handleAddToCart = async () => {
-    try {
-      await addToCart({
-        lineItems: [{
-          variant: { id: product.variants[0].id },
-          quantity: 1
-        }]
-      })
-      alert('已添加到购物车！')
-    } catch (error) {
-      console.error('添加失败:', error)
-    }
-  }
-
-  const handleBuyNow = async () => {
-    await buyNow({
-      lineItems: [{
-        variant: { id: product.variants[0].id },
-        quantity: 1
-      }],
-      gtmParams: {
-        currency: 'USD',
-        value: parseFloat(product.variants[0].price.amount)
-      }
-    })
-  }
-
-  return (
-    <div className="product-card">
-      <img src={product.images[0]?.url} alt={product.title} />
-      <h3>{product.title}</h3>
-      <p className="price">${product.variants[0].price.amount}</p>
-      
-      <div className="actions">
-        <button 
-          onClick={handleAddToCart}
-          disabled={isAdding}
-        >
-          {isAdding ? '添加中...' : '加入购物车'}
-        </button>
-        
-        <button 
-          onClick={handleBuyNow}
-          disabled={isBuying}
-          className="primary"
-        >
-          {isBuying ? '处理中...' : '立即购买'}
-        </button>
-      </div>
-    </div>
-  )
-}
-```
-
-### 4. 购物车（Cart.tsx）
-
-```tsx
-import { 
-  useCart,
-  useUpdateCartLines,
-  useRemoveCartLines,
-  useApplyCartCodes
-} from '@anker-in/lib'
-import { useState } from 'react'
-
-export function Cart() {
-  const { data: cart } = useCart()
-  const { trigger: updateLines } = useUpdateCartLines()
-  const { trigger: removeLines } = useRemoveCartLines()
-  const { trigger: applyCode } = useApplyCartCodes()
-  const [discountCode, setDiscountCode] = useState('')
-
-  const handleQuantityChange = (lineId: string, quantity: number) => {
-    updateLines({
-      lines: [{
-        id: lineId,
-        quantity
-      }]
-    })
-  }
-
-  const handleRemove = (lineId: string) => {
-    removeLines({ lineIds: [lineId] })
-  }
-
-  const handleApplyDiscount = () => {
-    if (discountCode) {
-      applyCode({ discountCodes: [discountCode] })
-    }
-  }
-
-  if (!cart) return <div>购物车为空</div>
-
-  return (
-    <div className="cart">
-      <h2>购物车 ({cart.lines.length})</h2>
-      
-      {cart.lines.map(line => (
-        <div key={line.id} className="cart-item">
-          <img src={line.merchandise.image?.url} alt={line.merchandise.title} />
-          <div className="info">
-            <h4>{line.merchandise.product.title}</h4>
-            <p>{line.merchandise.title}</p>
-            <p className="price">${line.cost.totalAmount.amount}</p>
-          </div>
-          
-          <div className="quantity">
-            <button onClick={() => handleQuantityChange(line.id, line.quantity - 1)}>
-              -
-            </button>
-            <span>{line.quantity}</span>
-            <button onClick={() => handleQuantityChange(line.id, line.quantity + 1)}>
-              +
-            </button>
-          </div>
-          
-          <button onClick={() => handleRemove(line.id)}>删除</button>
-        </div>
-      ))}
-      
-      <div className="discount">
-        <input
-          type="text"
-          placeholder="优惠码"
-          value={discountCode}
-          onChange={(e) => setDiscountCode(e.target.value)}
-        />
-        <button onClick={handleApplyDiscount}>应用</button>
-      </div>
-      
-      <div className="total">
-        <h3>总计: ${cart.cost.totalAmount.amount}</h3>
-        <a href={cart.checkoutUrl} className="checkout-button">
-          去结账
-        </a>
-      </div>
-    </div>
-  )
-}
-```
-
-### 5. 产品详情页（ProductDetail.tsx）
-
-```tsx
-import { 
-  useProduct, 
-  useBuyNow,
-  useAddToCart,
-  useHeadlessContext
-} from '@anker-in/lib'
-import { useState } from 'react'
-
-interface ProductDetailProps {
-  productId: string
-}
-
-export function ProductDetail({ productId }: ProductDetailProps) {
-  const { brand } = useHeadlessContext()
-  const { data: product, isLoading } = useProduct(productId)
-  const [selectedVariant, setSelectedVariant] = useState(0)
-  const [quantity, setQuantity] = useState(1)
-  
-  const { trigger: buyNow } = useBuyNow()
-  const { trigger: addToCart } = useAddToCart()
-
-  if (isLoading) return <div>加载中...</div>
-  if (!product) return <div>产品未找到</div>
-
-  const currentVariant = product.variants[selectedVariant]
-
-  return (
-    <div className="product-detail">
-      <div className="gallery">
-        {product.images.map((image, idx) => (
-          <img key={idx} src={image.url} alt={`${product.title} ${idx + 1}`} />
-        ))}
-      </div>
-      
-      <div className="info">
-        <span className="brand">{brand}</span>
-        <h1>{product.title}</h1>
-        <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} />
-        
-        <div className="variants">
-          <h3>选择规格</h3>
-          {product.variants.map((variant, idx) => (
-            <button
-              key={variant.id}
-              onClick={() => setSelectedVariant(idx)}
-              className={selectedVariant === idx ? 'active' : ''}
-            >
-              {variant.title}
-            </button>
-          ))}
-        </div>
-        
-        <div className="price">
-          <h2>${currentVariant.price.amount}</h2>
-        </div>
-        
-        <div className="quantity">
-          <label>数量：</label>
-          <input
-            type="number"
-            min="1"
-            value={quantity}
-            onChange={(e) => setQuantity(parseInt(e.target.value))}
-          />
-        </div>
-        
-        <div className="actions">
-          <button
-            onClick={() => addToCart({
-              lineItems: [{
-                variant: { id: currentVariant.id },
-                quantity
-              }]
-            })}
-            className="add-to-cart"
-          >
-            加入购物车
-          </button>
-          
-          <button
-            onClick={() => buyNow({
-              lineItems: [{
-                variant: { id: currentVariant.id },
-                quantity
-              }],
-              gtmParams: {
-                currency: 'USD',
-                value: parseFloat(currentVariant.price.amount) * quantity,
-                items: [{
-                  item_id: product.id,
-                  item_name: product.title,
-                  price: parseFloat(currentVariant.price.amount),
-                  quantity
-                }]
-              }
-            })}
-            className="buy-now"
-          >
-            立即购买
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-```
-
-## 高级功能示例
-
-### 使用购物车特性 Hooks
-
-```tsx
-import {
-  useCartAttributes,
-  usePriceDiscount,
-  useCalcOrderDiscount,
-  useCartItemQuantityLimit
-} from '@anker-in/lib'
-
-function AdvancedCart() {
-  // 购物车自定义属性
-  const { attributes, updateAttribute } = useCartAttributes()
-  
-  // 价格折扣
-  const { discountedPrice } = usePriceDiscount()
-  
-  // 订单折扣计算
-  const { orderDiscount } = useCalcOrderDiscount()
-  
-  // 数量限制
-  const { maxQuantity, isLimitReached } = useCartItemQuantityLimit()
-  
-  return (
-    <div>
-      {/* 使用这些 hooks 的数据 */}
-    </div>
-  )
-}
-```
-
-### 自定义埋点
-
-```tsx
-import { useBuyNow } from '@anker-in/lib'
-
-function CustomTracking() {
-  const { trigger: buyNow } = useBuyNow({ 
-    withTrack: false  // 禁用默认埋点
-  })
-  
-  const handleBuyNow = async () => {
-    // 自定义埋点逻辑
-    window.dataLayer?.push({
-      event: 'custom_buy_now',
-      // ... 自定义数据
-    })
-    
-    await buyNow({
-      lineItems: [/* ... */],
-      fbqTrackConfig: {
-        // Facebook Pixel 配置
-        content_ids: ['product-123'],
-        content_type: 'product',
-        value: 99.99,
-        currency: 'USD'
-      }
-    })
-  }
-  
-  return <button onClick={handleBuyNow}>购买</button>
-}
-```
-
-## TypeScript 支持
-
-所有导出的类型都可以直接使用：
-
-```tsx
-import type {
-  Product,
-  Cart,
-  CartLine,
-  HeadlessConfig,
-  BuyNowArgs,
-  // ... 更多类型
-} from '@anker-in/lib'
-
-const config: HeadlessConfig = {
-  storefrontToken: '...',
-  storeDomain: '...',
-  // ...
-}
-
-function handleProduct(product: Product) {
-  // TypeScript 完整支持
-}
-```
-
-

package/jest.config.ts

@@ -1,12 +0,0 @@
-import { JestConfigWithTsJest } from 'ts-jest'
-
-const config: JestConfigWithTsJest = {
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom', // 使用 node 环境（如果是浏览器库可改成 'jsdom'）
-  clearMocks: true, // 每次测试后自动清除 mock
-  coverageDirectory: 'coverage', // 输出覆盖率报告
-  testMatch: ['**/__tests__/**/*.test.ts'], // 匹配测试文件路径
-  moduleFileExtensions: ['ts', 'js', 'json'],
-}
-
-export default config

package/src/__tests__/math.test.ts

@@ -1,15 +0,0 @@
-import { add, subtract } from '../math'
-
-describe('math functions', () => {
-  test('add should correctly add two numbers', () => {
-    expect(add(2, 3)).toBe(5)
-    expect(add(-1, -1)).toBe(-2)
-    expect(add(0, 5)).toBe(5)
-  })
-
-  test('subtract should correctly subtract two numbers', () => {
-    expect(subtract(5, 3)).toBe(2)
-    expect(subtract(0, 5)).toBe(-5)
-    expect(subtract(-1, -1)).toBe(0)
-  })
-})

package/src/index.ts

@@ -1,7 +0,0 @@
-// 导出本地功能
-export * from './math'
-
-// 重新导出所有包的内容（作为便利导出）
-export * from '@anker-in/shared'
-export * from '@anker-in/shopify'
-export * from '@anker-in/cart'

package/src/math.ts

@@ -1,5 +0,0 @@
-/**
- * 这是一个demo 模版
- */
-export const add = (a: number, b: number) => a + b
-export const subtract = (a: number, b: number) => a - b

package/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "strict": true,
-    "esModuleInterop": true,
-    "lib": ["DOM", "ESNext", "DOM.Iterable"],
-    "skipLibCheck": true,
-    "jsx": "react-jsx",
-    "types": ["jest", "node"]
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
-}

package/tsup.config.ts

@@ -1,20 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig({
-  entry: ['src/index.ts'],
-  format: ['esm', 'cjs'],
-  dts: true,
-  splitting: false,
-  sourcemap: true,
-  clean: true,
-  external: [
-    'react',
-    'react-dom',
-    '@anker-in/shared',
-    '@anker-in/shopify',
-    '@anker-in/cart',
-    'next/router',
-    '@sentry/nextjs',
-    'swr',
-  ],
-})