@anker-in/campaign-ui 0.1.10 → 0.2.10-beta.10

package/src/components/credits/modal/loadingDots.tsx

@@ -0,0 +1,17 @@
+import { cn } from '../../../helpers/utils'
+
+interface LoadingProps {
+  className?: string
+}
+
+function LoadingDots({ className }: LoadingProps) {
+  return (
+    <div className={cn(className)}>
+      <span className="dot" key={`dot_1`} />
+      <span className="dot" key={`dot_2`} />
+      <span className="dot" key={`dot_3`} />
+    </div>
+  )
+}
+
+export default LoadingDots

package/src/components/credits/modal/modalContainer.tsx

@@ -0,0 +1,112 @@
+import { cn } from '../../../helpers/utils'
+import { useEffect, useState, type UIEvent } from 'react'
+import ReactModal from 'react-modal'
+
+export type ModalContainerProps = {
+  overlayClassName?: string
+  className?: string
+  scrollClassName?: string
+  title?: string
+  titleClassName?: string
+  useAnimation?: boolean // 使用动画展示
+  animationClassName?: string // 动画展示控制的classname
+  isOpen: boolean
+  children?: any
+  onClose: () => void
+  onScrollEnd?: (event: UIEvent<HTMLDivElement>) => void
+}
+
+export const CreditsModalContainer = ({
+  isOpen,
+  title,
+  className = '',
+  overlayClassName = '',
+  scrollClassName = '',
+  onClose,
+  onScrollEnd,
+  children,
+  useAnimation,
+  animationClassName,
+  titleClassName = '',
+  ...props
+}: ModalContainerProps): React.ReactElement => {
+  const [animationShow, setAnimationShow] = useState(false)
+
+  useEffect(() => {
+    if (!useAnimation) {
+      return
+    }
+    requestAnimationFrame(() => {
+      setAnimationShow(isOpen ?? false)
+    })
+  }, [isOpen, useAnimation])
+
+  return (
+    <ReactModal
+      isOpen={isOpen ?? false}
+      overlayClassName={cn(
+        'fixed inset-0 z-[999] flex items-center justify-center bg-black/70 leading-[1.2] md:items-end',
+        overlayClassName
+      )}
+      className={cn(
+        'min-md:max-h-[calc(100vh-96px)] relative flex min-h-[200px] flex-col overflow-hidden rounded-[16px] bg-white outline-none transition-all duration-300 md:h-[88.27vh] md:w-full md:rounded-b-none',
+        animationShow ? '' : animationClassName,
+        className
+      )}
+      onRequestClose={onClose}
+      {...props}
+    >
+      <div
+        className={cn(
+          'flex w-full shrink-0 items-center justify-between',
+          title ? 'min-l:px-[32px] h-[70px] border-b border-[#e2e2e2] px-[24px]' : 'h-[48px] px-[16px]',
+          titleClassName
+        )}
+      >
+        <div className="text-[18px] font-bold">{title}</div>
+        <div
+          className="size-[22px] cursor-pointer"
+          onClick={onClose}
+          onKeyDown={e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              onClose?.()
+            }
+          }}
+          role="button"
+          tabIndex={0}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M16.8525 5.31015C16.4558 4.91337 15.8125 4.91338 15.4157 5.31015L11.1268 9.5991L6.83815 5.31049C6.44138 4.91372 5.79808 4.91372 5.40131 5.31049C5.00454 5.70726 5.00455 6.35055 5.40131 6.74732L9.68993 11.0359L5.40105 15.3248C5.00428 15.7216 5.00428 16.3649 5.40105 16.7616C5.79782 17.1584 6.44111 17.1584 6.83788 16.7616L11.1268 12.4728L15.416 16.762C15.8128 17.1588 16.456 17.1588 16.8528 16.762C17.2496 16.3652 17.2496 15.7219 16.8528 15.3252L12.5636 11.0359L16.8525 6.74698C17.2493 6.35021 17.2493 5.70692 16.8525 5.31015ZM16.921 6.02856C16.921 6.22992 16.8441 6.43127 16.6905 6.5849L14.465 8.8104L12.2395 11.0359L12.2395 11.0359L16.6905 6.58493C16.8441 6.43129 16.921 6.22993 16.921 6.02856ZM5.34966 6.19087C5.37992 6.3354 5.45115 6.47307 5.56336 6.58528L10.014 11.0359L10.014 11.0359L5.56336 6.58524C5.45116 6.47304 5.37992 6.33539 5.34966 6.19087ZM5.35087 16.2121C5.38193 16.3541 5.45267 16.4891 5.56309 16.5996C5.87037 16.9068 6.36856 16.9068 6.67583 16.5996L11.1268 12.1486L15.578 16.5999C15.8853 16.9072 16.3835 16.9072 16.6908 16.5999C16.8498 16.4409 16.9265 16.2307 16.9209 16.0223C16.9265 16.2307 16.8498 16.4409 16.6908 16.5999C16.3835 16.9072 15.8853 16.9072 15.578 16.5999L11.1268 12.1487L6.67583 16.5996C6.36856 16.9069 5.87037 16.9069 5.56309 16.5996C5.45267 16.4892 5.38192 16.3541 5.35087 16.2121Z"
+              fill="#333333"
+            />
+          </svg>
+        </div>
+      </div>
+      <div
+        className={cn(
+          'my-[32px] flex-1 overflow-auto overscroll-contain px-[24px] md:mb-[48px]',
+          !title && 'mt-0',
+          'min-l:px-[32px]',
+          scrollClassName
+        )}
+        onScroll={event => {
+          const targetElement = event.target as HTMLDivElement
+
+          if (targetElement.scrollHeight <= targetElement.clientHeight) {
+            return
+          }
+
+          if (targetElement.scrollTop + targetElement.clientHeight >= targetElement.scrollHeight - 50) {
+            onScrollEnd && onScrollEnd(event)
+          }
+        }}
+      >
+        {children}
+      </div>
+    </ReactModal>
+  )
+}

package/src/components/credits/modal/rulesModal.tsx

@@ -0,0 +1,44 @@
+import { Text } from '@anker-in/headless-ui'
+import { useMemo } from 'react'
+
+import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
+import { cn } from '../../../helpers/utils'
+
+function RulesModal({
+  rules,
+  className,
+  ruleClassName,
+  ...props
+}: {
+  rules: string | string[]
+  ruleClassName?: string
+  className?: string
+} & ModalContainerProps) {
+  const rulesComponent = useMemo(() => {
+    if (typeof rules === 'string') {
+      return <Text className={cn('text-[16px] font-semibold', ruleClassName)} html={rules}></Text>
+    } else {
+      return (
+        <ul className="ml-4 text-[16px]">
+          {rules?.map((rule, index) => (
+            <li key={index} className={cn('mb-[10px] list-disc')}>
+              <Text
+                as="div"
+                className={cn('text-[16px] font-semibold leading-[1.4] text-[#777777]', ruleClassName)}
+                html={rule}
+              ></Text>
+            </li>
+          ))}
+        </ul>
+      )
+    }
+  }, [ruleClassName, rules])
+
+  return (
+    <CreditsModalContainer className={cn('max-h-[90vh] w-[640px]', className)} {...props}>
+      {rulesComponent}
+    </CreditsModalContainer>
+  )
+}
+
+export default RulesModal

package/src/components/credits/modal/tip.tsx

@@ -0,0 +1,92 @@
+import classNames from 'classnames'
+import { useState } from 'react'
+
+function Tip({ info, index }: { info: string; index: number }) {
+  const [show, setShow] = useState(false)
+
+  return (
+    <div
+      className="relative ml-[6px] cursor-pointer"
+      onClick={() => {
+        setShow(!show)
+      }}
+      role="button"
+      tabIndex={0}
+      onKeyDown={e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+        }
+      }}
+      onMouseOver={() => {
+        setShow(true)
+      }}
+      onFocus={() => {
+        setShow(true)
+      }}
+      onMouseLeave={() => {
+        setShow(false)
+      }}
+      onBlur={() => {
+        setShow(false)
+      }}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18ZM9.765 10.7118H8.316C8.316 9.71658 8.95624 9.11788 9.5487 8.56386C10.0589 8.08679 10.5336 7.64285 10.5336 7.0074C10.5336 6.2766 9.9918 5.9112 9.1854 5.9112C8.3916 5.9112 7.7994 6.327 7.5474 7.0704L6.3 6.3648C6.7788 5.13 7.938 4.5 9.2232 4.5C10.6218 4.5 11.9826 5.3316 11.9826 6.9192C11.9826 7.95842 11.3297 8.58584 10.7324 9.15979C10.2289 9.64359 9.765 10.0894 9.765 10.7118ZM9.9918 12.69C9.9918 13.2066 9.5634 13.635 9.0468 13.635C8.5176 13.635 8.1018 13.2066 8.1018 12.69C8.1018 12.1608 8.5176 11.745 9.0468 11.745C9.5634 11.745 9.9918 12.1608 9.9918 12.69Z"
+          fill="#999999"
+        />
+      </svg>
+      <div
+        className={classNames(
+          'absolute -right-[14px] hidden min-w-[300px] shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+          index === 0 ? 'top-[33px]' : 'bottom-[33px]',
+          show && '!block'
+        )}
+      >
+        <i
+          className="absolute right-[8px] blur-[12px]"
+          style={
+            index === 0
+              ? {
+                  top: '-9px',
+                  borderRight: '16px solid transparent ',
+                  borderLeft: '16px solid transparent ',
+                  borderBottom: '8px solid rgba(0,0,0,0.12)',
+                }
+              : {
+                  bottom: '-9px',
+                  borderRight: '16px solid transparent ',
+                  borderLeft: '16px solid transparent ',
+                  borderTop: '8px solid rgba(0,0,0,0.12)',
+                }
+          }
+        ></i>
+        <i
+          className="absolute right-[8px]"
+          style={
+            index === 0
+              ? {
+                  top: '-7px',
+                  borderRight: '16px solid transparent ',
+                  borderLeft: '16px solid transparent ',
+                  borderBottom: '8px solid #fff ',
+                }
+              : {
+                  bottom: '-7px',
+                  borderRight: '16px solid transparent ',
+                  borderLeft: '16px solid transparent ',
+                  borderTop: '8px solid #fff ',
+                }
+          }
+        ></i>
+        <p className="relative block rounded-[4px] bg-white px-[14px] py-[12px]">
+          <span className="block text-left text-[14px] font-semibold leading-[1.4] text-[#333]">{info}</span>
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default Tip

package/src/components/credits/type.ts

@@ -0,0 +1,60 @@
+import type { Product, ProductVariant } from '@anker-in/shopify'
+import type { AlpcConsumeType, ConsumeType } from './context/const'
+
+export interface Subscription {
+  preference: {
+    subscribe: boolean
+    brand: string
+  }[]
+}
+
+export type RedeemableItem = {
+  config: {
+    title: string
+    desc: string
+    rules: string[]
+    image: {
+      url: string
+    }
+    type: ConsumeType
+    value: string
+  }
+  alpc: {
+    id: string
+    consumeCredits: number
+    remainingInventory: number
+    isLimited: boolean
+    consumeType: AlpcConsumeType
+    showCredit: boolean
+    title: string
+  }
+  product: Product
+  variant: ProductVariant
+}
+
+export interface ShippingCountry {
+  id: string
+  name: string
+  code: string
+  provinces: {
+    id: string
+    name: string
+    code: string
+  }[]
+}
+
+export interface ShippingZone {
+  name: string
+  countries: ShippingCountry[]
+}
+
+export type CreditsPageCommon = {
+  pointUnit: string
+  ruleLabel: string
+  soldOut: string
+  imageMapping: {
+    [key in ConsumeType]: {
+      url: string
+    }
+  }
+}

package/src/components/index.ts

@@ -1,6 +1,6 @@
 // eslint-disable-next-line import/extensions
 
-export { default as Chat } from './chat/index.js'
+export { default as Chat } from './chat/index'
 
 export {
   Role,
@@ -9,4 +9,6 @@ export {
   useCopilotChat,
   useCopilotAction,
   useCopilotReadable,
-} from './chat/utils.js'
+} from './chat/utils'
+
+export * from './credits/index'

package/src/debug-env.ts

@@ -0,0 +1,18 @@
+// 调试环境变量工具
+export const debugEnv = () => {
+  console.log('=== Campaign UI Environment Variables Debug ===')
+  console.log('NEXT_PUBLIC_BRAND:', process.env.NEXT_PUBLIC_BRAND)
+  console.log('NEXT_PUBLIC_ENV:', process.env.NEXT_PUBLIC_ENV)
+  console.log('NEXT_PUBLIC_I18N_SHOPIFY_STOREFRONT_TOKEN:', process.env.NEXT_PUBLIC_I18N_SHOPIFY_STOREFRONT_TOKEN)
+  console.log('NEXT_PUBLIC_I18N_SHOPIFY_STORE_DOMAIN:', process.env.NEXT_PUBLIC_I18N_SHOPIFY_STORE_DOMAIN)
+  console.log('NEXT_PUBLIC_METAFIELD_NAMESPACE_PREFIX:', process.env.NEXT_PUBLIC_METAFIELD_NAMESPACE_PREFIX)
+  console.log('===============================================')
+  
+  return {
+    BRAND: process.env.NEXT_PUBLIC_BRAND || 'soundcore',
+    ENV: process.env.NEXT_PUBLIC_ENV,
+    STOREFRONT_TOKEN: process.env.NEXT_PUBLIC_I18N_SHOPIFY_STOREFRONT_TOKEN,
+    STORE_DOMAIN: process.env.NEXT_PUBLIC_I18N_SHOPIFY_STORE_DOMAIN,
+    METAFIELD_PREFIX: process.env.NEXT_PUBLIC_METAFIELD_NAMESPACE_PREFIX || ''
+  }
+}

package/src/helpers/fetcher.ts

@@ -1,4 +1,4 @@
-import handleFetchResponse from './fetchResponse.js'
+import handleFetchResponse from './fetchResponse'
 
 const isObject = (value: null) => {
   return value !== null && typeof value === 'object' && !Array.isArray(value)

package/src/helpers/index.ts

@@ -1,2 +1,2 @@
-export { cn } from './utils.js'
-export { noop } from './utils.js'
+export { cn } from './utils'
+export { noop } from './utils'

package/src/helpers/track.ts

@@ -0,0 +1,55 @@
+declare global {
+  interface Window {
+    dataLayer?: Array<any>
+    fbq?: (...args: any[]) => void
+    klaviyo?: any
+    gtag?: any
+  }
+}
+
+// GA 埋点
+export const gaTrack = (data: any) => {
+  if (typeof window === 'undefined') {
+    return ''
+  }
+  window.dataLayer = window?.dataLayer || []
+  if (!Array.isArray(window.dataLayer)) {
+    return ''
+  }
+
+  try {
+    window?.dataLayer?.push({ event_parameters: null })
+    window?.dataLayer?.push(data || {})
+  } catch (error) {
+    console.log('pageGTMEvent error', error)
+  }
+}
+
+// facebook 埋点
+export const fbq = (...args: any[]) => {
+  if (window.fbq) {
+    window.fbq(...args)
+  }
+}
+
+export const gtag = (...args: any[]) => {
+  if (window.gtag) {
+    window.gtag(...args)
+  }
+}
+
+export const getGtmGroup = ({ query, asPath }: { query: any; asPath: string }) => {
+  if (asPath.includes('collections')) {
+    return `Product List Page_${query?.handle}`
+  }
+
+  if (asPath.includes('products')) {
+    return 'Product Detail Page_' + query?.handle
+  }
+
+  if (asPath === '/' || asPath === '/app-home') {
+    return 'Home Page'
+  }
+
+  return 'Activity Page_' + query?.handle || query?.paths?.[0]?.replace('storefront-', '')
+}

package/src/index.ts

@@ -1 +1,4 @@
-export * from './components/index.js'
+export * from './components/index'
+
+// 导出 Shopify 相关模块
+export * from '@anker-in/shopify'

package/src/stories/chat.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
-import { Chat } from '../components/index.js'
+import { Chat } from '../components/index'
 import '../styles/chat.css'
 
 type Story = StoryObj<typeof meta>

package/tailwind.config.ts

@@ -0,0 +1,72 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+  // 添加前缀避免与主项目冲突
+  prefix: 'cmp-',
+  content: [
+    './src/components/**/*.{js,jsx,ts,tsx}',
+    './src/icons/**/*.{js,jsx,ts,tsx}',
+    '../storybook/.storybook/**/*.{js,jsx,ts,tsx}',
+  ],
+  // 禁用 preflight 避免覆盖主项目的基础样式
+  corePlugins: {
+    preflight: false,
+  },
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: 'var(--brand-color-1)',
+          foreground: 'var(--btn-text-color)',
+        },
+        btn: {
+          primary: {
+            DEFAULT: 'var(--btn-bg-color)',
+            foreground: 'var(--btn-text-color)',
+            active: 'var(--btn-bg-active-color)',
+            disabled: {
+              DEFAULT: 'var(--btn-bg-disabled-color)',
+              foreground: 'var(--quaternary-color)',
+            },
+            border: {
+              DEFAULT: 'var(--btn-text-secondary-color)',
+              disabled: 'var(--btn-bg-secondary-disabled-border-color)',
+            },
+          },
+          secondary: {
+            DEFAULT: 'var(--btn-bg-secondary-color)',
+            foreground: 'var(--btn-text-secondary-color)',
+            active: 'var(--btn-bg-secondary-active-color)',
+            disabled: {
+              DEFAULT: 'var(--btn-bg-secondary-disabled-color)',
+              foreground: 'var(--btn-border-secondary-border-color)',
+              borderColor: 'var(--btn-border-secondary-border-color)',
+            },
+          },
+        },
+        badge: {
+          DEFAULT: 'var(--secondary-brand-color-2)',
+          foreground: 'var(--brand-color-1)',
+        },
+        skeleton: {
+          DEFAULT: 'var(--tertiary-color)',
+        },
+        background: {
+          DEFAULT: 'var(--container-primary-color)',
+        },
+      },
+      borderRadius: {
+        btn: 'var(--btn-radius)',
+      },
+      lineHeight: {
+        tight: 'var(--line-height-tight)',
+        normal: 'var(--line-height-normal)',
+        loose: 'var(--line-height-loose)',
+      },
+      letterSpacing: {
+        DEFAULT: 'var(--letter-spacing-normal)',
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config

package/dist/cjs/components/animation/CodeEditor.d.ts

@@ -1,7 +0,0 @@
-declare const CodeEditor: ({ htmlCode, styleCode, jsCode, handleCodeChange, }: {
-    htmlCode: string;
-    styleCode: string;
-    jsCode: string;
-    handleCodeChange: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export default CodeEditor;

package/dist/cjs/components/animation/CodeEditor.js

@@ -1,2 +0,0 @@
-"use strict";var u=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var w=(e,a)=>{for(var t in a)s(e,t,{get:a[t],enumerable:!0})},r=(e,a,t,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of f(a))!L.call(e,n)&&n!==t&&s(e,n,{get:()=>a[n],enumerable:!(c=m(a,n))||c.enumerable});return e};var x=(e,a,t)=>(t=e!=null?u(v(e)):{},r(a||!e||!e.__esModule?s(t,"default",{value:e,enumerable:!0}):t,e)),C=e=>r(s({},"__esModule",{value:!0}),e);var z={};w(z,{default:()=>M});module.exports=C(z);var l=require("react/jsx-runtime"),h=require("react"),g=require("../../helpers/index.js"),d=x(require("@monaco-editor/react"));const y=({htmlCode:e,styleCode:a,jsCode:t,handleCodeChange:c})=>(0,l.jsx)("div",{className:"flex flex-col bg-[#000] gap-[5px]",children:[{type:"html",label:"HTML",language:"html",code:e,icon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"></path><path fill="#e74d4d" d="M12 18.178l4.62-1.256.623-6.778H9.026L8.822 7.89h8.626l.227-2.211H6.325l.636 6.678h7.82l-.261 2.866-2.52.667-2.52-.667-.158-1.844h-2.27l.329 3.544L12 18.178zM3 2h18l-1.623 18L12 22l-7.377-2L3 2z"></path></svg>'},{type:"css",label:"CSS",language:"css",code:a,icon:'<svg t="1730629714840" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6769" width="20" height="20"><path d="M384 611.456 384 497.216c0-15.136 6.688-29.44 18.848-40.288 12.16-10.848 28.192-16.832 45.152-16.832l0-57.12c-70.4 0-128 51.392-128 114.208l0 85.664c0 15.776-14.336 28.544-32 28.544l-32 0 0 57.12 32 0c17.664 0 32 12.8 32 28.544l0 85.664c0 62.816 57.6 114.208 128 114.208l0-57.12c-16.96 0-32.992-5.984-45.152-16.832-12.16-10.848-18.848-25.152-18.848-40.288l0-114.24c0-15.776-14.336-28.544-32-28.544C369.664 640 384 627.2 384 611.456zM640 668.544l0 114.24c0 15.136-6.688 29.44-18.848 40.288-12.16 10.848-28.192 16.832-45.152 16.832l0 57.12c70.4 0 128-51.392 128-114.208l0-85.664c0-15.776 14.336-28.544 32-28.544l32 0 0-57.12-32 0c-17.664 0-32-12.8-32-28.544L704 497.216c0-62.816-57.6-114.208-128-114.208l0 57.12c16.96 0 32.992 5.984 45.152 16.832 12.16 10.848 18.848 25.152 18.848 40.288l0 114.24c0 15.776 14.336 28.544 32 28.544C654.336 640 640 652.8 640 668.544zM903.424 199.424l-142.88-142.848C729.472 25.44 668 0 624 0L144 0C100 0 64 36 64 80l0 864c0 44 36 80 80 80l736 0c44 0 80-36 80-80L960 336C960 292 934.528 230.528 903.424 199.424zM858.176 244.672c3.136 3.136 6.24 6.976 9.28 11.328L704 256 704 92.544c4.352 3.04 8.192 6.144 11.328 9.28L858.176 244.672zM896 944c0 8.672-7.328 16-16 16L144 960c-8.672 0-16-7.328-16-16L128 80c0-8.672 7.328-16 16-16l480 0c4.832 0 10.24 0.608 16 1.696L640 320l254.304 0c1.088 5.76 1.696 11.168 1.696 16L896 944z" fill="#1296db" p-id="6770"></path></svg>'},{type:"js",label:"JS",language:"javascript",code:t,icon:'<svg t="1730629587097" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5557" width="20" height="20"><path d="M707.072 648.448c-15.36 8.704-36.864 13.312-63.488 13.312-30.208 0-52.224-5.632-66.56-15.872-15.872-11.776-25.6-31.744-29.696-59.392h-59.392c2.56 46.592 19.456 80.384 50.176 101.888 25.088 17.408 60.416 26.112 105.472 26.112 46.592 0 82.944-9.728 108.544-28.16 25.6-18.944 38.4-45.056 38.4-77.824 0-33.792-15.872-59.904-47.616-78.848-14.336-8.192-46.08-20.48-95.744-35.84-33.792-10.752-54.784-18.432-62.464-22.528-17.408-9.216-25.6-22.016-25.6-37.376 0-17.408 7.168-30.208 22.528-37.888 12.288-6.656 29.696-9.728 52.736-9.728 26.624 0 47.104 4.608 60.416 14.848 13.312 9.728 23.04 26.112 28.16 48.64h59.392c-3.584-39.936-18.432-69.632-44.032-88.576-24.064-17.92-57.856-26.624-100.864-26.624-39.424 0-71.68 8.704-97.28 26.624-27.648 18.432-40.96 44.032-40.96 76.288s13.824 56.832 41.984 73.728c10.752 6.144 38.912 16.384 83.968 30.72 40.448 12.288 64 20.48 71.168 24.064 22.528 11.264 34.304 26.624 34.304 46.08 0 15.36-8.192 27.136-23.552 36.352zM884.864 223.84L557.984 34.56a101.088 101.088 0 0 0-101.056 0L130.24 223.872a101.12 101.12 0 0 0-50.24 87.2v401.312c0 36.384 19.712 70.016 51.424 87.872l117.792 66.176c1.28 0.704 2.688 0.768 4.032 1.312 15.648 7.616 34.272 11.52 57.472 11.52 42.496 0 75.36-15.52 94.816-37.024 17.408-20.48 26.112-51.2 26.112-93.184V341.76h-59.904v405.248c0 26.112-4.608 45.056-13.824 56.832-9.216 11.776-24.064 17.92-44.032 17.92-2.688 0-18.656-4.096-31.2-9.408l-0.16-0.032c-0.736-0.48-1.184-1.248-1.952-1.664l-117.76-66.176A36.96 36.96 0 0 1 144 712.352v-401.28c0-13.088 7.04-25.28 18.336-31.84l326.656-189.28a36.8 36.8 0 0 1 36.896 0l326.88 189.28c11.328 6.592 18.368 18.784 18.368 31.872V713.6c0 12.864-6.88 24.96-17.92 31.552L537.472 933.824a36.8 36.8 0 0 1-36.896 0.512l-67.168-37.76a32 32 0 1 0-31.392 55.808l67.2 37.76a100.832 100.832 0 0 0 101.056-1.376l315.744-188.672a101.216 101.216 0 0 0 49.088-86.496V311.072a100.992 100.992 0 0 0-50.24-87.232z" fill="#fcd002" p-id="5558"></path></svg>'}]?.map(o=>(0,l.jsx)(b,{data:o,code:o?.code||"",language:o?.language||"html",handleCodeChange:c}))});var M=y;const b=({data:e,code:a,language:t,handleCodeChange:c})=>{const n=(0,d.useMonaco)(),o=(0,h.useRef)(null),O={selectOnLineNumbers:!0,automaticLayout:!0,formatOnType:!0,formatOnPaste:!0,minimap:{enabled:!1}},p=(i,H)=>{o.current=i,i.updateOptions({selectOnLineNumbers:!0,automaticLayout:!0,formatOnType:!0,formatOnPaste:!0,minimap:{enabled:!1}})};return(0,l.jsxs)("div",{className:"flex-1",children:[(0,l.jsxs)("a",{className:(0,g.cn)("flex gap-[5px] max-w-[170px] w-full py-[2px] px-[14px] rounded-t-[4px] cursor-pointer bg-[#1e1e1e] text-[#fff]"),children:[(0,l.jsx)("div",{dangerouslySetInnerHTML:{__html:e?.icon}}),(0,l.jsx)("span",{children:e?.label})]}),(0,l.jsx)(d.default,{height:"28vh",defaultLanguage:t,defaultValue:a,theme:"vs-dark",onMount:p})]})};
-//# sourceMappingURL=CodeEditor.js.map

package/dist/cjs/components/animation/CodeEditor.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/components/animation/CodeEditor.tsx"],
-  "sourcesContent": ["/* eslint-disable */\nimport { useEffect, useState, useRef } from 'react'\nimport { cn } from '../../helpers/index.js'\nimport Editor, { useMonaco } from '@monaco-editor/react'\n\nconst CodeEditor = ({\n  htmlCode,\n  styleCode,\n  jsCode,\n  handleCodeChange,\n}: {\n  htmlCode: string\n  styleCode: string\n  jsCode: string\n  handleCodeChange: any\n}) => {\n  const codeData = [\n    {\n      type: 'html',\n      label: 'HTML',\n      language: 'html',\n      code: htmlCode,\n      icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path fill=\"none\" d=\"M0 0h24v24H0z\"></path><path fill=\"#e74d4d\" d=\"M12 18.178l4.62-1.256.623-6.778H9.026L8.822 7.89h8.626l.227-2.211H6.325l.636 6.678h7.82l-.261 2.866-2.52.667-2.52-.667-.158-1.844h-2.27l.329 3.544L12 18.178zM3 2h18l-1.623 18L12 22l-7.377-2L3 2z\"></path></svg>',\n    },\n    {\n      type: 'css',\n      label: 'CSS',\n      language: 'css',\n      code: styleCode,\n      icon: '<svg t=\"1730629714840\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"6769\" width=\"20\" height=\"20\"><path d=\"M384 611.456 384 497.216c0-15.136 6.688-29.44 18.848-40.288 12.16-10.848 28.192-16.832 45.152-16.832l0-57.12c-70.4 0-128 51.392-128 114.208l0 85.664c0 15.776-14.336 28.544-32 28.544l-32 0 0 57.12 32 0c17.664 0 32 12.8 32 28.544l0 85.664c0 62.816 57.6 114.208 128 114.208l0-57.12c-16.96 0-32.992-5.984-45.152-16.832-12.16-10.848-18.848-25.152-18.848-40.288l0-114.24c0-15.776-14.336-28.544-32-28.544C369.664 640 384 627.2 384 611.456zM640 668.544l0 114.24c0 15.136-6.688 29.44-18.848 40.288-12.16 10.848-28.192 16.832-45.152 16.832l0 57.12c70.4 0 128-51.392 128-114.208l0-85.664c0-15.776 14.336-28.544 32-28.544l32 0 0-57.12-32 0c-17.664 0-32-12.8-32-28.544L704 497.216c0-62.816-57.6-114.208-128-114.208l0 57.12c16.96 0 32.992 5.984 45.152 16.832 12.16 10.848 18.848 25.152 18.848 40.288l0 114.24c0 15.776 14.336 28.544 32 28.544C654.336 640 640 652.8 640 668.544zM903.424 199.424l-142.88-142.848C729.472 25.44 668 0 624 0L144 0C100 0 64 36 64 80l0 864c0 44 36 80 80 80l736 0c44 0 80-36 80-80L960 336C960 292 934.528 230.528 903.424 199.424zM858.176 244.672c3.136 3.136 6.24 6.976 9.28 11.328L704 256 704 92.544c4.352 3.04 8.192 6.144 11.328 9.28L858.176 244.672zM896 944c0 8.672-7.328 16-16 16L144 960c-8.672 0-16-7.328-16-16L128 80c0-8.672 7.328-16 16-16l480 0c4.832 0 10.24 0.608 16 1.696L640 320l254.304 0c1.088 5.76 1.696 11.168 1.696 16L896 944z\" fill=\"#1296db\" p-id=\"6770\"></path></svg>',\n    },\n    {\n      type: 'js',\n      label: 'JS',\n      language: 'javascript',\n      code: jsCode,\n      icon: '<svg t=\"1730629587097\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"5557\" width=\"20\" height=\"20\"><path d=\"M707.072 648.448c-15.36 8.704-36.864 13.312-63.488 13.312-30.208 0-52.224-5.632-66.56-15.872-15.872-11.776-25.6-31.744-29.696-59.392h-59.392c2.56 46.592 19.456 80.384 50.176 101.888 25.088 17.408 60.416 26.112 105.472 26.112 46.592 0 82.944-9.728 108.544-28.16 25.6-18.944 38.4-45.056 38.4-77.824 0-33.792-15.872-59.904-47.616-78.848-14.336-8.192-46.08-20.48-95.744-35.84-33.792-10.752-54.784-18.432-62.464-22.528-17.408-9.216-25.6-22.016-25.6-37.376 0-17.408 7.168-30.208 22.528-37.888 12.288-6.656 29.696-9.728 52.736-9.728 26.624 0 47.104 4.608 60.416 14.848 13.312 9.728 23.04 26.112 28.16 48.64h59.392c-3.584-39.936-18.432-69.632-44.032-88.576-24.064-17.92-57.856-26.624-100.864-26.624-39.424 0-71.68 8.704-97.28 26.624-27.648 18.432-40.96 44.032-40.96 76.288s13.824 56.832 41.984 73.728c10.752 6.144 38.912 16.384 83.968 30.72 40.448 12.288 64 20.48 71.168 24.064 22.528 11.264 34.304 26.624 34.304 46.08 0 15.36-8.192 27.136-23.552 36.352zM884.864 223.84L557.984 34.56a101.088 101.088 0 0 0-101.056 0L130.24 223.872a101.12 101.12 0 0 0-50.24 87.2v401.312c0 36.384 19.712 70.016 51.424 87.872l117.792 66.176c1.28 0.704 2.688 0.768 4.032 1.312 15.648 7.616 34.272 11.52 57.472 11.52 42.496 0 75.36-15.52 94.816-37.024 17.408-20.48 26.112-51.2 26.112-93.184V341.76h-59.904v405.248c0 26.112-4.608 45.056-13.824 56.832-9.216 11.776-24.064 17.92-44.032 17.92-2.688 0-18.656-4.096-31.2-9.408l-0.16-0.032c-0.736-0.48-1.184-1.248-1.952-1.664l-117.76-66.176A36.96 36.96 0 0 1 144 712.352v-401.28c0-13.088 7.04-25.28 18.336-31.84l326.656-189.28a36.8 36.8 0 0 1 36.896 0l326.88 189.28c11.328 6.592 18.368 18.784 18.368 31.872V713.6c0 12.864-6.88 24.96-17.92 31.552L537.472 933.824a36.8 36.8 0 0 1-36.896 0.512l-67.168-37.76a32 32 0 1 0-31.392 55.808l67.2 37.76a100.832 100.832 0 0 0 101.056-1.376l315.744-188.672a101.216 101.216 0 0 0 49.088-86.496V311.072a100.992 100.992 0 0 0-50.24-87.232z\" fill=\"#fcd002\" p-id=\"5558\"></path></svg>',\n    },\n  ]\n  return (\n    <div className=\"flex flex-col bg-[#000] gap-[5px]\">\n      {codeData?.map(item => (\n        <CodeItem\n          data={item}\n          code={item?.code || ''}\n          language={item?.language || 'html'}\n          handleCodeChange={handleCodeChange}\n        />\n      ))}\n    </div>\n  )\n}\nexport default CodeEditor\n\nconst CodeItem = ({\n  data,\n  code,\n  language,\n  handleCodeChange,\n}: {\n  data: any\n  code: string\n  language: string\n  handleCodeChange: any\n}) => {\n  const monaco = useMonaco()\n  const editorRef = useRef(null)\n  const editorOptions = {\n    selectOnLineNumbers: true,\n    automaticLayout: true, // \u81EA\u52A8\u9002\u5E94\u5E03\u5C40\n    formatOnType: true,\n    formatOnPaste: true,\n    minimap: {\n      enabled: false,\n    },\n  }\n  const handleEditorDidMount = (editor: any, monaco: any) => {\n    editorRef.current = editor\n    // \u914D\u7F6E\u81EA\u52A8\u683C\u5F0F\u5316\u9009\u9879\n    editor.updateOptions({\n      selectOnLineNumbers: true,\n      automaticLayout: true, // \u81EA\u52A8\u9002\u5E94\u5E03\u5C40\n      formatOnType: true,\n      formatOnPaste: true,\n      minimap: {\n        enabled: false,\n      },\n    })\n  }\n  // const handleFormatDocument = () => {\n  //   if (editorRef.current) {\n  //     editorRef?.current?.getAction('editor.action.formatDocument').run()\n  //   }\n  // }\n  return (\n    <div className=\"flex-1\">\n      <a\n        className={cn(\n          'flex gap-[5px] max-w-[170px] w-full py-[2px] px-[14px] rounded-t-[4px] cursor-pointer bg-[#1e1e1e] text-[#fff]'\n        )}\n      >\n        <div dangerouslySetInnerHTML={{ __html: data?.icon }} />\n        <span>{data?.label}</span>\n      </a>\n      <Editor\n        height=\"28vh\"\n        defaultLanguage={language}\n        defaultValue={code}\n        theme=\"vs-dark\"\n        onMount={handleEditorDidMount}\n      />\n    </div>\n  )\n}\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA0CQ,IAAAI,EAAA,6BAzCRC,EAA4C,iBAC5CC,EAAmB,kCACnBD,EAAkC,mCAElC,MAAME,EAAa,CAAC,CAClB,SAAAC,EACA,UAAAC,EACA,OAAAC,EACA,iBAAAC,CACF,OA8BI,OAAC,OAAI,UAAU,oCACZ,SAzBY,CACf,CACE,KAAM,OACN,MAAO,OACP,SAAU,OACV,KAAMH,EACN,KAAM,yWACR,EACA,CACE,KAAM,MACN,MAAO,MACP,SAAU,MACV,KAAMC,EACN,KAAM,0gDACR,EACA,CACE,KAAM,KACN,MAAO,KACP,SAAU,aACV,KAAMC,EACN,KAAM,oiEACR,CACF,GAGe,IAAIE,MACb,OAACC,EAAA,CACC,KAAMD,EACN,KAAMA,GAAM,MAAQ,GACpB,SAAUA,GAAM,UAAY,OAC5B,iBAAkBD,EACpB,CACD,EACH,EAGJ,IAAOT,EAAQK,EAEf,MAAMM,EAAW,CAAC,CAChB,KAAAC,EACA,KAAAC,EACA,SAAAC,EACA,iBAAAL,CACF,IAKM,CACJ,MAAMM,KAAS,aAAU,EACnBC,KAAY,UAAO,IAAI,EACvBC,EAAgB,CACpB,oBAAqB,GACrB,gBAAiB,GACjB,aAAc,GACd,cAAe,GACf,QAAS,CACP,QAAS,EACX,CACF,EACMC,EAAuB,CAACC,EAAaJ,IAAgB,CACzDC,EAAU,QAAUG,EAEpBA,EAAO,cAAc,CACnB,oBAAqB,GACrB,gBAAiB,GACjB,aAAc,GACd,cAAe,GACf,QAAS,CACP,QAAS,EACX,CACF,CAAC,CACH,EAMA,SACE,QAAC,OAAI,UAAU,SACb,qBAAC,KACC,aAAW,MACT,gHACF,EAEA,oBAAC,OAAI,wBAAyB,CAAE,OAAQP,GAAM,IAAK,EAAG,KACtD,OAAC,QAAM,SAAAA,GAAM,MAAM,GACrB,KACA,OAAC,EAAAQ,QAAA,CACC,OAAO,OACP,gBAAiBN,EACjB,aAAcD,EACd,MAAM,UACN,QAASK,EACX,GACF,CAEJ",
-  "names": ["CodeEditor_exports", "__export", "CodeEditor_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_helpers", "CodeEditor", "htmlCode", "styleCode", "jsCode", "handleCodeChange", "item", "CodeItem", "data", "code", "language", "monaco", "editorRef", "editorOptions", "handleEditorDidMount", "editor", "Editor"]
-}

package/dist/cjs/components/animation/Preview.d.ts

@@ -1,5 +0,0 @@
-export interface PreviewProps {
-    code: string;
-}
-declare const Preview: (props: PreviewProps) => import("react/jsx-runtime").JSX.Element;
-export default Preview;

package/dist/cjs/components/animation/Preview.js

@@ -1,2 +0,0 @@
-"use strict";var o=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var w=(r,e)=>{for(var t in e)o(r,t,{get:e[t],enumerable:!0})},P=(r,e,t,f)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of p(e))!l.call(r,i)&&i!==t&&o(r,i,{get:()=>e[i],enumerable:!(f=n(e,i))||f.enumerable});return r};var a=r=>P(o({},"__esModule",{value:!0}),r);var v={};w(v,{default:()=>u});module.exports=a(v);var c=require("react/jsx-runtime"),s=require("react");const d=r=>{const{code:e}=r,t=(0,s.useRef)(null);return(0,c.jsx)("iframe",{ref:t,title:"preview",style:{width:"100%",height:"100%"}})};var u=d;
-//# sourceMappingURL=Preview.js.map

package/dist/cjs/components/animation/Preview.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/components/animation/Preview.tsx"],
-  "sourcesContent": ["/* eslint-disable */\nimport React, { useEffect, useRef } from 'react'\n// import * as Babel from '@babel/standalone'\n\nexport interface PreviewProps {\n  code: string\n}\n\nconst Preview = (props: PreviewProps) => {\n  const { code } = props\n  const iframeRef = useRef(null)\n\n  // useEffect(() => {\n  //   const timeout = setTimeout(() => {\n  //     const compiledCode = Babel.transform(code, { presets: ['react'] }).code\n  //     const html = `\n  //       <!DOCTYPE html>\n  //       <html>\n  //         <head></head>\n  //         <body>\n  //           <div id=\"root\"></div>\n  //           <script>\n  //             ${compiledCode}\n  //             const App = () => React.createElement('div', null, 'Hello World');\n  //             ReactDOM.render(React.createElement(App), document.getElementById('root'));\n  //           </script>\n  //         </body>\n  //       </html>\n  //     `\n  //     if (iframeRef?.current) iframeRef.current.srcdoc = html\n  //   }, 500)\n\n  //   return () => clearTimeout(timeout)\n  // }, [code])\n\n  return <iframe ref={iframeRef} title=\"preview\" style={{ width: '100%', height: '100%' }} />\n}\n\nexport default Preview\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmCS,IAAAI,EAAA,6BAlCTC,EAAyC,iBAOzC,MAAMC,EAAWC,GAAwB,CACvC,KAAM,CAAE,KAAAC,CAAK,EAAID,EACXE,KAAY,UAAO,IAAI,EAyB7B,SAAO,OAAC,UAAO,IAAKA,EAAW,MAAM,UAAU,MAAO,CAAE,MAAO,OAAQ,OAAQ,MAAO,EAAG,CAC3F,EAEA,IAAOP,EAAQI",
-  "names": ["Preview_exports", "__export", "Preview_default", "__toCommonJS", "import_jsx_runtime", "import_react", "Preview", "props", "code", "iframeRef"]
-}

package/dist/cjs/components/animation/bannerAni.d.ts

@@ -1,16 +0,0 @@
-export interface BannerAniProps {
-    type: string;
-    banner1: string;
-    banner2: string;
-    link1?: string;
-    link2?: string;
-    GSAP: any;
-}
-declare global {
-    interface Window {
-        gsap: any;
-        ScrollTrigger: any;
-    }
-}
-declare const BannerAni: (props: BannerAniProps) => import("react/jsx-runtime").JSX.Element | undefined;
-export default BannerAni;