@anker-in/headless-ui 0.0.40 → 0.0.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/index.js +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/cjs/components/heading.d.ts +1 -1
- package/dist/cjs/components/text.d.ts +1 -1
- package/dist/cjs/components/text.js +1 -1
- package/dist/cjs/components/text.js.map +2 -2
- package/dist/cjs/stories/text.stories.d.ts +1 -1
- package/dist/cjs/stories/text.stories.js +2 -2
- package/dist/cjs/stories/text.stories.js.map +2 -2
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/index.js +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/esm/components/heading.d.ts +1 -1
- package/dist/esm/components/text.d.ts +1 -1
- package/dist/esm/components/text.js +1 -1
- package/dist/esm/components/text.js.map +2 -2
- package/dist/esm/stories/text.stories.d.ts +1 -1
- package/dist/esm/stories/text.stories.js +3 -3
- package/dist/esm/stories/text.stories.js.map +2 -2
- package/package.json +1 -1
- package/style.css +0 -6
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var M=Object.create;var a=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var R=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of S(t))!H.call(e,p)&&p!==o&&a(e,p,{get:()=>t[p],enumerable:!(l=G(t,p))||l.enumerable});return e};var d=(e,t,o)=>(o=e!=null?M(B(e)):{},h(t||!e||!e.__esModule?a(o,"default",{value:e,enumerable:!0}):o,e)),V=e=>h(a({},"__esModule",{value:!0}),e);var U={};R(U,{default:()=>I});module.exports=V(U);var s=require("react/jsx-runtime"),r=d(require("react")),n=require("../../helpers/utils.js"),g=require("../../shared/Styles.js"),x=d(require("../SwiperBox/index.js")),b=require("../../components/index.js"),c=require("../../components/index.js"),k=require("../../components/container.js"),v=d(require("../Title/index.js")),y=require("react-responsive"),N=require("../../hooks/useExposure.js"),P=require("../../shared/trackUrlRef.js");const f="image",u="graphic",E=({data:e,configuration:t})=>{const o=(0,y.useMediaQuery)({query:"(max-width: 768px)"});return(0,s.jsx)("div",{className:(0,n.cn)((()=>{switch(t.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346]
|
|
1
|
+
"use strict";"use client";var M=Object.create;var a=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var R=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of S(t))!H.call(e,p)&&p!==o&&a(e,p,{get:()=>t[p],enumerable:!(l=G(t,p))||l.enumerable});return e};var d=(e,t,o)=>(o=e!=null?M(B(e)):{},h(t||!e||!e.__esModule?a(o,"default",{value:e,enumerable:!0}):o,e)),V=e=>h(a({},"__esModule",{value:!0}),e);var U={};R(U,{default:()=>I});module.exports=V(U);var s=require("react/jsx-runtime"),r=d(require("react")),n=require("../../helpers/utils.js"),g=require("../../shared/Styles.js"),x=d(require("../SwiperBox/index.js")),b=require("../../components/index.js"),c=require("../../components/index.js"),k=require("../../components/container.js"),v=d(require("../Title/index.js")),y=require("react-responsive"),N=require("../../hooks/useExposure.js"),P=require("../../shared/trackUrlRef.js");const f="image",u="graphic",E=({data:e,configuration:t})=>{const o=(0,y.useMediaQuery)({query:"(max-width: 768px)"});return(0,s.jsx)("div",{className:(0,n.cn)((()=>{switch(t.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}})(),{"h-[360px]":o},"flex-1 shrink-0 md:basis-[296px]"),children:(0,s.jsx)("div",{className:(0,n.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":t?.itemShape==="round"}),children:(0,s.jsxs)("a",{href:(0,P.trackUrlRef)(e?.href,`${f}_${u}`),className:"relative block size-full cursor-pointer overflow-hidden",children:[(0,s.jsx)(c.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""}),(0,s.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[(0,s.jsx)(c.Text,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]"}),e?.description&&(0,s.jsx)(b.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})})},w=r.default.forwardRef(({data:e,className:t,...o},l)=>{const p=(0,r.useRef)(null),i=C=>{const m=e?.items?.length>3,T=e?.items?.length>2;switch(C){case 1440:return m?4:e?.items?.length;case 1024:return m?3:e?.items?.length;case 768:return m||T?2.3:2;default:return 1.1}};return(0,r.useImperativeHandle)(l,()=>p.current),(0,N.useExposure)(p,{componentType:f,componentName:u,componentTitle:e?.title}),(0,s.jsx)("div",{className:t,ref:p,children:(0,s.jsx)("div",{className:"graphic-box",children:(0,s.jsxs)(k.Container,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&(0,s.jsx)(v.default,{data:{title:e?.title}}),(0,s.jsx)(x.default,{id:"Graphic",className:(0,n.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:E,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:i()},768:{spaceBetween:16,freeMode:!1,slidesPerView:i(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:i(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:i(1440)}}})]})})})});w.displayName="Graphic";var I=(0,g.withStyles)(w);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346]
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqEU,IAAAI,EAAA,6BApEVC,EAAmD,oBACnDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAsB,oCACtBC,EAAwB,qCACxBA,EAA8B,qCAC9BC,EAA0B,yCAC1BC,EAAkB,gCAClBC,EAA8B,4BAE9BC,EAA4B,sCAC5BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAmBhBC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAkD,CACpF,MAAMC,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAe9D,SACE,OAAC,OACC,aAAW,OAfM,IAAM,CACzB,OAAQD,EAAc,IAAK,CACzB,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n return (\n <div\n className={cn(\n handleAspect(),\n {\n 'h-[360px]': isMobile,\n },\n 'flex-1 shrink-0 md:basis-[296px]'\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.1\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"graphic-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_container", "import_Title", "import_react_responsive", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "Graphic", "React", "className", "props", "ref", "innerRef", "handleSwiperShow", "width", "isShow", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";"use client";var G=Object.create;var
|
|
1
|
+
"use strict";"use client";var G=Object.create;var x=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(e,t)=>{for(var o in t)x(e,o,{get:t[o],enumerable:!0})},D=(e,t,o,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of K(t))!Y.call(e,a)&&a!==o&&x(e,a,{get:()=>t[a],enumerable:!(p=J(t,a))||p.enumerable});return e};var l=(e,t,o)=>(o=e!=null?G(X(e)):{},D(t||!e||!e.__esModule?x(o,"default",{value:e,enumerable:!0}):o,e)),ee=e=>D(x({},"__esModule",{value:!0}),e);var se={};Z(se,{default:()=>oe});module.exports=ee(se);var i=require("react/jsx-runtime"),n=l(require("react")),h=require("../../helpers/utils.js"),I=l(require("../../components/picture.js")),_=l(require("./tabSwitch.js")),T=l(require("../../components/button.js")),M=l(require("../Title/index.js")),E=l(require("../SwiperBox/index.js")),H=require("../../shared/Styles.js"),q=require("./shelfDisplay.js"),ae=require("../../components/container.js"),B=require("react-responsive"),L=require("../../hooks/useExposure.js"),V=require("../../shared/track.js"),R=require("../AiuiProvider/index.js"),$=l(require("../../components/badge.js")),A=require("../../components/heading.js"),O=require("../../components/text.js");const P="image",C="product_shelf",te=999999999e-2,ie=({data:e,configuration:t})=>{const{locale:o="us",copyWriting:p}=(0,R.useAiuiContext)(),a=(0,B.useMediaQuery)({query:"(max-width: 768px)"}),b=(r,s)=>t?.event?.primaryButton?.(r,s+1),m=(r,s)=>t?.event?.secondaryButton?.(r,s+1),c=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0]||{},g=!c?.availableForSale&&c?.price?.amount===te,w=t?.isShowTag,{price:k,basePrice:d}=(0,q.formatVariantPrice)({locale:o,amount:c?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),u=()=>{const r=e?.sku,s=e?.variants;return s?.find(v=>v?.sku===r)?.image?.url||s?.[0]?.image?.url||""};return(0,i.jsx)("div",{className:(0,h.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":a}),children:(0,i.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[(0,i.jsx)("div",{className:(0,h.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,i.jsx)(I.default,{source:u(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),w?(0,i.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter(r=>r.startsWith("CLtag"))?.map(r=>r.replace("CLtag:",""))?.slice(0,2)?.map?.((r,s)=>(0,i.jsx)($.default,{children:r},s))}):null,e?.title?(0,i.jsx)(A.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}):null,e?.description?(0,i.jsx)(O.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}):null,(0,i.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:g?(0,i.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:p?.soldOutText}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:k||""}),(0,i.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:d||""})]})}),(0,i.jsxs)("div",{className:(0,h.cn)("lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,i.jsx)(T.default,{variant:"secondary",onClick:()=>m(e,t?.index),className:`
|
|
2
2
|
${t.direction==="vertical"?"w-full":""}
|
|
3
3
|
`,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,i.jsx)(T.default,{variant:"primary",onClick:()=>b(e,t?.index),className:`
|
|
4
4
|
${t.direction==="vertical"?"w-full":""}
|
|
5
|
-
`,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},
|
|
5
|
+
`,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},re=n.default.forwardRef(({data:e,buildData:t,className:o="",key:p,event:a},b)=>{const[m,c]=(0,n.useState)(""),[g,w]=(0,n.useState)([]),k=(0,B.useMediaQuery)({query:"(max-width: 768px)"}),d=(0,n.useRef)(null);(0,n.useImperativeHandle)(b,()=>d.current),(0,L.useExposure)(d,{componentType:P,componentName:C,componentTitle:e?.title,navigation:m});const{productsTab:u=[],productsCard:r=[],title:s,align:j="left",isShowTab:v=!0,tabShape:z="square",isShowTag:U=!1,...W}=e,S=f=>{const F=f?.map(y=>{const N=t?.products?.find(Q=>Q?.handle===y?.handle);if(N)return{sku:y.sku,...N}})?.filter(y=>y);w(F)};return(0,n.useEffect)(()=>{if(v){c(u?.[0]?.tab||""),S(u?.[0]?.data||[]);return}S(r)},[]),(0,i.jsxs)("div",{ref:d,className:(0,h.cn)("w-full",o,{"aiui-dark":e?.theme==="dark"}),children:[s&&(0,i.jsx)(M.default,{data:{title:s}}),v&&(0,i.jsx)("div",{className:`${k?"w-full overflow-hidden":""}`,children:(0,i.jsx)(_.default,{value:m,tabs:u,tabShape:z,onTabClick:f=>{c(f?.tab),S(f?.data||[]),(0,V.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:P,component_name:C,component_title:e?.title,component_position:1,navigation:f?.tab}})}})}),(0,i.jsx)("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,i.jsx)(E.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${p}${m}`,data:{list:g,configuration:{...W,event:a,isShowTag:U}},Slide:ie,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var oe=(0,H.withStyles)(re);
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {isShowTag ? (\n data?.tags\n ?.filter((item: any) => item.startsWith('CLtag'))\n ?.map((item: any) => item.replace('CLtag:', ''))\n ?.slice(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)\n ) : (\n <div className=\"lg-desktop:h-[28px] h-[24px] w-full\"></div>\n )}\n </div>\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
-
"mappings": "wkBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAkIU,IAAAI,EAAA,6BAjIVC,EAAwE,oBACxEC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAsB,6BACtBC,EAAmB,yCACnBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAmC,6BACnCC,GAA0B,yCAC1BC,EAA8B,4BAC9BC,EAA4B,sCAC5BC,EAAwB,iCACxBC,EAA+B,oCAC/BC,EAAkB,wCAClBC,EAAwB,uCACxBC,EAAqB,oCAGrB,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,GAAiB,aA2DjBC,GAAmB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA0C,CACxF,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,KAAI,kBAAe,EAChDC,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAExDC,EAAkB,CAACC,EAA0BC,IACjDN,GAAe,OAAO,gBAAgBK,EAAQC,EAAQ,CAAC,EAEnDC,EAAoB,CAACF,EAA0BC,IACnDN,GAAe,OAAO,kBAAkBK,EAAQC,EAAQ,CAAC,EAErDE,EAAUT,GAAM,UAAU,KAAMU,GAAcA,GAAM,MAAQV,GAAM,GAAG,GAAKA,GAAM,WAAW,CAAC,GAAK,CAAC,EAElGW,EAAY,CAACF,GAAS,kBAAoBA,GAAS,OAAO,SAAWX,GACrEc,EAAYX,GAAe,UAE3B,CAAE,MAAAY,EAAO,UAAAC,CAAU,KAAI,sBAAmB,CAC9C,OAAQZ,EACR,OAAQO,GAAS,OAAO,QAAU,EAClC,WAAYT,GAAM,gBAAgB,QAAUA,GAAM,OAAO,QAAU,EACnE,aAAcA,GAAM,OAAO,cAAgB,KAC7C,CAAC,EAEKe,EAAY,IAAM,CACtB,MAAMC,EAAMhB,GAAM,IACZiB,EAAWjB,GAAM,SAEvB,OADgBiB,GAAU,KAAMP,GAAcA,GAAM,MAAQM,CAAG,GAC/C,OAAO,KAAOC,IAAW,CAAC,GAAG,OAAO,KAAO,EAC7D,EAEA,SACE,OAAC,OAEC,aAAW,MACT,oHACAhB,GAAe,QAAU,QAAU,cAAgB,eACnD,oGACA,qFACA,CACE,YAAaG,CACf,CACF,EAEA,oBAAC,OAAI,UAAU,gFACb,oBAAC,OACC,aAAW,MACT,yGACF,EAEA,mBAAC,EAAAc,QAAA,CAAQ,OAAQH,EAAU,EAAG,IAAI,GAAG,UAAU,yDAAyD,EAC1G,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter((item: any) => item.startsWith('CLtag'))\n ?.map((item: any) => item.replace('CLtag:', ''))\n ?.slice(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {data?.title ? (\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n ) : null}\n {data?.description ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_container", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import type { SerializedEditorState, SerializedLexicalNode } from 'lexical';
|
|
4
4
|
declare const headingVariants: (props?: ({
|
|
5
5
|
size?: 1 | "none" | 2 | 3 | 4 | 5 | null | undefined;
|
|
6
|
-
weight?: "bold" | "medium" | "semibold" | "
|
|
6
|
+
weight?: "bold" | "medium" | "semibold" | "extraBold" | "black" | null | undefined;
|
|
7
7
|
align?: "left" | "right" | "center" | null | undefined;
|
|
8
8
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
9
9
|
interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {
|
|
@@ -4,7 +4,7 @@ import type { SerializedEditorState, SerializedLexicalNode } from 'lexical';
|
|
|
4
4
|
import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
|
|
5
5
|
declare const textVariants: (props?: ({
|
|
6
6
|
size?: 1 | "none" | 2 | 3 | 4 | null | undefined;
|
|
7
|
-
weight?: "bold" | "
|
|
7
|
+
weight?: "bold" | "medium" | "semibold" | "extraBold" | "black" | null | undefined;
|
|
8
8
|
align?: "left" | "right" | "center" | null | undefined;
|
|
9
9
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
10
|
type TextSpanProps = {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var v=Object.create;var a=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},d=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of C(t))!z.call(e,r)&&r!==o&&a(e,r,{get:()=>t[r],enumerable:!(n=S(t,r))||n.enumerable});return e};var w=(e,t,o)=>(o=e!=null?v(R(e)):{},d(t||!e||!e.__esModule?a(o,"default",{value:e,enumerable:!0}):o,e)),E=e=>d(a({},"__esModule",{value:!0}),e);var W={};L(W,{Text:()=>s});module.exports=E(W);var i=require("react/jsx-runtime"),N=w(require("react")),x=require("@radix-ui/react-slot"),P=require("class-variance-authority"),c=require("@payloadcms/richtext-lexical/html"),f=require("../helpers/index.js");const V=(0,P.cva)("tracking-[-0.02em]",{variants:{size:{none:"tracking",1:"text-[12px] leading-[140%]",2:"text-[14px] leading-[140%]",3:"text-[16px] leading-[140%]",4:"text-[18px] leading-[140%]"},weight:{medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extraBold:"font-extrabold",black:"font-black"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),s=N.forwardRef((e,t)=>{const{children:o,size:n="none",weight:r,align:T,className:g,asChild:h,as:y="span",color:l,html:p,...b}=e,m=p?{dangerouslySetInnerHTML:{__html:typeof p=="string"?p:(0,c.convertLexicalToHTML)({data:p})}}:null,u=l?{style:{color:l}}:null;return(0,i.jsx)(x.Slot,{...b,ref:t,className:(0,f.cn)(V({size:n,weight:n==="none"?r??"medium":r,align:T}),g),...m,...u,children:h?o:(0,i.jsx)(y,{children:m?null:o})})});s.displayName="Text";
|
|
2
2
|
//# sourceMappingURL=text.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/text.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('tracking-[-0.02em]', {\n variants: {\n size: {\n none: 'tracking',\n 1: 'text-[12px] leading-[140%]',\n 2: 'text-[14px] leading-[140%]',\n 3: 'text-[16px] leading-[140%]',\n 4: 'text-[18px] leading-[140%]',\n },\n weight: {\n
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GA+F4B,IAAAI,EAAA,6BA/F5BC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAAuC,oCACvCC,EAAqC,6CAErCC,EAAmB,+BAGnB,MAAMC,KAAe,OAAI,qBAAsB,CAC7C,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,6BACH,EAAG,6BACH,EAAG,6BACH,EAAG,4BACL,EACA,OAAQ,CACN,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('tracking-[-0.02em]', {\n variants: {\n size: {\n none: 'tracking',\n 1: 'text-[12px] leading-[140%]',\n 2: 'text-[14px] leading-[140%]',\n 3: 'text-[16px] leading-[140%]',\n 4: 'text-[18px] leading-[140%]',\n },\n weight: {\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extraBold: 'font-extrabold',\n black: 'font-black',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype TextElement = React.ElementRef<'span'>\ntype TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>\ntype TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>\ntype TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>\ntype TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>\n\ninterface CommonTextProps extends VariantProps<typeof textVariants> {\n as?: 'div' | 'label' | 'p' | 'span'\n asChild?: boolean\n color?: string\n /** \u76F8\u5F53\u4E8E dangerouslySetInnerHTML */\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\ntype TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)\n\nconst Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {\n const {\n children,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n weight,\n align,\n className,\n asChild,\n as: Tag = 'span',\n color,\n html,\n ...textProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n\n return (\n <Slot\n {...textProps}\n ref={forwardedRef}\n className={cn(\n textVariants({\n size,\n weight: size === 'none' ? (weight ?? 'medium') : weight, // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\nText.displayName = 'Text'\n\nexport { Text }\nexport type { TextProps }\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GA+F4B,IAAAI,EAAA,6BA/F5BC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAAuC,oCACvCC,EAAqC,6CAErCC,EAAmB,+BAGnB,MAAMC,KAAe,OAAI,qBAAsB,CAC7C,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,6BACH,EAAG,6BACH,EAAG,6BACH,EAAG,4BACL,EACA,OAAQ,CACN,OAAQ,cACR,SAAU,gBACV,KAAM,YACN,UAAW,iBACX,MAAO,YACT,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAkBKR,EAAOG,EAAM,WAAmC,CAACM,EAAOC,IAAiB,CAC7E,KAAM,CACJ,SAAAC,EACA,KAAAC,EAAO,OACP,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,OACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,KAAO,wBAAqB,CAAE,KAAMA,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KAEJ,SACE,OAAC,QACE,GAAGE,EACJ,IAAKV,EACL,aAAW,MACTF,EAAa,CACX,KAAAI,EACA,OAAQA,IAAS,OAAUC,GAAU,SAAYA,EACjD,MAAAC,CACF,CAAC,EACDC,CACF,EACC,GAAGM,EACH,GAAGC,EAEH,SAAAN,EAAUL,KAAW,OAACM,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EACDX,EAAK,YAAc",
|
|
6
6
|
"names": ["text_exports", "__export", "Text", "__toCommonJS", "import_jsx_runtime", "React", "import_react_slot", "import_class_variance_authority", "import_html", "import_helpers", "textVariants", "props", "forwardedRef", "children", "size", "weight", "align", "className", "asChild", "Tag", "color", "html", "textProps", "htmlContentProps", "styleProps"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var a=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var c=(r,o)=>{for(var l in o)a(r,l,{get:o[l],enumerable:!0})},m=(r,o,l,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of d(o))!p.call(r,i)&&i!==l&&a(r,i,{get:()=>o[i],enumerable:!(n=s(o,i))||n.enumerable});return r};var f=r=>m(a({},"__esModule",{value:!0}),r);var T={};c(T,{All:()=>y,Default:()=>u,Html:()=>b,default:()=>h,weight:()=>g});module.exports=f(T);var e=require("react/jsx-runtime"),t=require("../components/index.js"),z=require("react");const x={title:"Typography/Text",component:t.Text,parameters:{layout:"padded",docs:{description:{component:`\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.
|
|
2
2
|
|
|
3
3
|
### \u6587\u672C\u5C3A\u5BF8
|
|
4
4
|
\u6587\u5B57\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6587\u672C\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6587\u5B57\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6587\u5B57\u5C3A\u5BF8\uFF1A12px
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
- 2: \u8865\u5145\u6587\u672C(14px)
|
|
8
8
|
- 1: \u5C0F\u6807\u9898\uFF0C\u63CF\u8FF0\uFF0C\u6CE8\u91CA(12px)
|
|
9
9
|
- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F
|
|
10
|
-
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},description:"\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20",options:["none",1,2,3],table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},description:"\u6587\u672C\u6743\u91CD\uFF0Cnone \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium, \u5176\u4ED6size \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A bold",options:["
|
|
10
|
+
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},description:"\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20",options:["none",1,2,3,4],table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},description:"\u6587\u672C\u6743\u91CD\uFF0Cnone \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium, \u5176\u4ED6size \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A bold",options:["medium","semibold","bold","extraBold","black"],table:{defaultValue:{summary:"bold"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},description:"html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C",options:["div","label","p","span"],table:{defaultValue:{summary:"span"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{size:3,weight:"bold",align:"left",html:"",as:"p"}};var h=x;const u={args:{children:" The quick brown fox jumps over the lazy dog.",size:3,weight:"bold"}},y={render(){return(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(t.Text,{size:1,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{size:2,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{size:3,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{size:4,children:"The quick brown fox jumps over the lazy dog."})]})}},g={render(){return(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)("span",{className:"text-sm font-extrabold",children:"size 3"}),(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(t.Text,{weight:"medium",size:3,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"semibold",size:3,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"bold",size:3,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"extraBold",size:3,children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"black",size:3,children:"The quick brown fox jumps over the lazy dog."})]}),(0,e.jsx)("span",{className:"mt-2 text-sm font-extrabold",children:"size none"}),(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(t.Text,{weight:"medium",children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"semibold",children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"bold",children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"extraBold",children:"The quick brown fox jumps over the lazy dog."}),(0,e.jsx)(t.Text,{weight:"black",children:"The quick brown fox jumps over the lazy dog."})]})]})}},b={render(){return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(t.Text,{children:"\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C"}),(0,e.jsx)("hr",{}),(0,e.jsx)(t.Text,{html:`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(
|
|
11
11
|
to right,
|
|
12
12
|
#00ff00, /* \u7EFF\u8272 */
|
|
13
13
|
#00ff99, /* \u6D45\u7EFF\u8272 */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/text.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Text',\n component: Text,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.\n\n### \u6587\u672C\u5C3A\u5BF8\n\u6587\u5B57\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6587\u672C\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6587\u5B57\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6587\u5B57\u5C3A\u5BF8\uFF1A12px\n- 4: \u6B63\u65871 \u5B57\u4F53\u504F\u5927\u4E00\u70B9\u7684\u6B63\u6587(18px)\n- 3: \u6B63\u65872 \u5B57\u4F53\u504F\u5C0F\u4E00\u70B9\u7684\u6B63\u6587(16px)\n- 2: \u8865\u5145\u6587\u672C(14px)\n- 1: \u5C0F\u6807\u9898\uFF0C\u63CF\u8FF0\uFF0C\u6CE8\u91CA(12px)\n- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F\n`,\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20',\n options: ['none', 1, 2, 3],\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u6743\u91CD\uFF0Cnone \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium, \u5176\u4ED6size \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A bold',\n options: ['
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,SAAAE,EAAA,YAAAC,EAAA,SAAAC,EAAA,YAAAC,EAAA,WAAAC,IAAA,eAAAC,EAAAP,GAmGM,IAAAQ,EAAA,6BAjGNC,EAAqB,kCACrBC,EAAkB,iBAElB,MAAMC,EAAO,CACX,MAAO,kBACP,UAAW,OACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,YAAa,mKACb,QAAS,CAAC,OAAQ,EAAG,EAAG,CAAC,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Text',\n component: Text,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.\n\n### \u6587\u672C\u5C3A\u5BF8\n\u6587\u5B57\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6587\u672C\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6587\u5B57\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6587\u5B57\u5C3A\u5BF8\uFF1A12px\n- 4: \u6B63\u65871 \u5B57\u4F53\u504F\u5927\u4E00\u70B9\u7684\u6B63\u6587(18px)\n- 3: \u6B63\u65872 \u5B57\u4F53\u504F\u5C0F\u4E00\u70B9\u7684\u6B63\u6587(16px)\n- 2: \u8865\u5145\u6587\u672C(14px)\n- 1: \u5C0F\u6807\u9898\uFF0C\u63CF\u8FF0\uFF0C\u6CE8\u91CA(12px)\n- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F\n`,\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20',\n options: ['none', 1, 2, 3, 4],\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u6743\u91CD\uFF0Cnone \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium, \u5176\u4ED6size \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A bold',\n options: ['medium', 'semibold', 'bold', 'extraBold', 'black'],\n table: {\n defaultValue: { summary: 'bold' },\n },\n },\n align: {\n control: {\n type: 'select',\n },\n options: ['left', 'center', 'right'],\n table: {\n defaultValue: { summary: undefined },\n },\n },\n color: {\n control: {\n type: 'color',\n },\n },\n as: {\n control: {\n type: 'select',\n },\n description: 'html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C',\n options: ['div', 'label', 'p', 'span'],\n table: {\n defaultValue: { summary: 'span' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n size: 3,\n weight: 'bold',\n align: 'left',\n html: '',\n as: 'p',\n },\n} satisfies Meta<typeof Text>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n children: ' The quick brown fox jumps over the lazy dog.',\n size: 3,\n weight: 'bold',\n },\n}\n\nexport const All: Story = {\n render() {\n return (\n <div className=\"flex flex-col\">\n <Text size={1}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={2}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={3}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={4}>The quick brown fox jumps over the lazy dog.</Text>\n </div>\n )\n },\n}\n\nexport const weight: Story = {\n render() {\n return (\n <div className=\"flex flex-col\">\n <span className=\"text-sm font-extrabold\">size 3</span>\n <div className=\"flex flex-col\">\n <Text weight=\"medium\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"semibold\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"bold\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"extraBold\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"black\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n </div>\n <span className=\"mt-2 text-sm font-extrabold\">size none</span>\n <div className=\"flex flex-col\">\n <Text weight=\"medium\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"semibold\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"bold\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"extraBold\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"black\">The quick brown fox jumps over the lazy dog.</Text>\n </div>\n </div>\n )\n },\n}\n\nexport const Html: Story = {\n render() {\n return (\n <>\n <Text>\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C</Text>\n <hr />\n <Text\n html={`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(\n to right, \n #00ff00, /* \u7EFF\u8272 */\n #00ff99, /* \u6D45\u7EFF\u8272 */\n #00ffff, /* \u9752\u8272 */\n #0099ff, /* \u6D45\u84DD\u8272 */\n #8000ff, /* \u7D2B\u8272 */\n #ff00ff /* \u7C89\u8272 */\n );color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}\n />\n <hr />\n <Text\n html={\n {\n root: {\n type: 'root',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'React to Every Noise as You Go',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n {\n tag: 'h3',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'Reserve for Only $1, Get $70 Off',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n ],\n direction: 'ltr',\n },\n } as any\n }\n />\n </>\n )\n },\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["text_stories_exports", "__export", "All", "Default", "Html", "text_stories_default", "weight", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react", "meta"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as i}from"react/jsx-runtime";import u,{useImperativeHandle as w,useRef as g}from"react";import{cn as l}from"../../helpers/utils.js";import{withStyles as x}from"../../shared/Styles.js";import b from"../SwiperBox/index.js";import{Heading as k}from"../../components/index.js";import{Picture as v,Text as y}from"../../components/index.js";import{Container as N}from"../../components/container.js";import P from"../Title/index.js";import{useMediaQuery as C}from"react-responsive";import{useExposure as T}from"../../hooks/useExposure.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";const c="image",m="graphic",G=({data:e,configuration:s})=>{const a=C({query:"(max-width: 768px)"});return t("div",{className:l((()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346]
|
|
1
|
+
"use client";import{jsx as t,jsxs as i}from"react/jsx-runtime";import u,{useImperativeHandle as w,useRef as g}from"react";import{cn as l}from"../../helpers/utils.js";import{withStyles as x}from"../../shared/Styles.js";import b from"../SwiperBox/index.js";import{Heading as k}from"../../components/index.js";import{Picture as v,Text as y}from"../../components/index.js";import{Container as N}from"../../components/container.js";import P from"../Title/index.js";import{useMediaQuery as C}from"react-responsive";import{useExposure as T}from"../../hooks/useExposure.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";const c="image",m="graphic",G=({data:e,configuration:s})=>{const a=C({query:"(max-width: 768px)"});return t("div",{className:l((()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}})(),{"h-[360px]":a},"flex-1 shrink-0 md:basis-[296px]"),children:t("div",{className:l("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:i("a",{href:M(e?.href,`${c}_${m}`),className:"relative block size-full cursor-pointer overflow-hidden",children:[t(v,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""}),i("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[t(y,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]"}),e?.description&&t(k,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})})},d=u.forwardRef(({data:e,className:s,...a},n)=>{const p=g(null),o=h=>{const r=e?.items?.length>3,f=e?.items?.length>2;switch(h){case 1440:return r?4:e?.items?.length;case 1024:return r?3:e?.items?.length;case 768:return r||f?2.3:2;default:return 1.1}};return w(n,()=>p.current),T(p,{componentType:c,componentName:m,componentTitle:e?.title}),t("div",{className:s,ref:p,children:t("div",{className:"graphic-box",children:i(N,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(P,{data:{title:e?.title}}),t(b,{id:"Graphic",className:l("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:G,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:o()},768:{spaceBetween:16,freeMode:!1,slidesPerView:o(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:o(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:o(1440)}}})]})})})});d.displayName="Graphic";var z=x(d);export{z as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346]
|
|
5
|
-
"mappings": "aAqEU,cAAAA,EAMA,QAAAC,MANA,oBApEV,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,4BACxB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,aAAAC,MAAiB,gCAC1B,OAAOC,MAAW,oBAClB,OAAS,iBAAAC,MAAqB,mBAE9B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAmBhBC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAkD,CACpF,MAAMC,EAAWR,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAe9D,OACEb,EAAC,OACC,UAAWK,GAfM,IAAM,CACzB,OAAQe,EAAc,IAAK,CACzB,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n return (\n <div\n className={cn(\n handleAspect(),\n {\n 'h-[360px]': isMobile,\n },\n 'flex-1 shrink-0 md:basis-[296px]'\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.1\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"graphic-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Container", "Title", "useMediaQuery", "useExposure", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "Graphic", "className", "props", "ref", "innerRef", "handleSwiperShow", "width", "isShow", "Graphic_default"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use client";import{Fragment as Z,jsx as t,jsxs as u}from"react/jsx-runtime";import H,{useState as S,useEffect as q,useRef as L,useImperativeHandle as V}from"react";import{cn as
|
|
1
|
+
"use client";import{Fragment as Z,jsx as t,jsxs as u}from"react/jsx-runtime";import H,{useState as S,useEffect as q,useRef as L,useImperativeHandle as V}from"react";import{cn as d}from"../../helpers/utils.js";import R from"../../components/picture.js";import $ from"./tabSwitch.js";import T from"../../components/button.js";import A from"../Title/index.js";import O from"../SwiperBox/index.js";import{withStyles as j}from"../../shared/Styles.js";import{formatVariantPrice as z}from"./shelfDisplay.js";import"../../components/container.js";import{useMediaQuery as B}from"react-responsive";import{useExposure as U}from"../../hooks/useExposure.js";import{gaTrack as W}from"../../shared/track.js";import{useAiuiContext as F}from"../AiuiProvider/index.js";import Q from"../../components/badge.js";import{Heading as G}from"../../components/heading.js";import{Text as J}from"../../components/text.js";const N="image",D="product_shelf",K=999999999e-2,X=({data:e,configuration:i})=>{const{locale:f="us",copyWriting:h}=F(),v=B({query:"(max-width: 768px)"}),y=(r,o)=>i?.event?.primaryButton?.(r,o+1),n=(r,o)=>i?.event?.secondaryButton?.(r,o+1),s=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0]||{},x=!s?.availableForSale&&s?.price?.amount===K,b=i?.isShowTag,{price:g,basePrice:a}=z({locale:f,amount:s?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),l=()=>{const r=e?.sku,o=e?.variants;return o?.find(c=>c?.sku===r)?.image?.url||o?.[0]?.image?.url||""};return t("div",{className:d("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",i?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":v}),children:u("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[t("div",{className:d("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:t(R,{source:l(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),b?t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter(r=>r.startsWith("CLtag"))?.map(r=>r.replace("CLtag:",""))?.slice(0,2)?.map?.((r,o)=>t(Q,{children:r},o))}):null,e?.title?t(G,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}):null,e?.description?t(J,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}):null,t("div",{className:"mb-2 mt-[20px] flex items-center",children:x?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:h?.soldOutText}):u(Z,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:g||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:a||""})]})}),u("div",{className:d("lg-desktop:gap-3 flex items-center gap-2",i.direction==="vertical"?"flex-col":""),children:[i?.secondaryButton?t(T,{variant:"secondary",onClick:()=>n(e,i?.index),className:`
|
|
2
2
|
${i.direction==="vertical"?"w-full":""}
|
|
3
|
-
`,children:i?.secondaryButton||""}):null,i?.primaryButton?t(T,{variant:"primary",onClick:()=>
|
|
3
|
+
`,children:i?.secondaryButton||""}):null,i?.primaryButton?t(T,{variant:"primary",onClick:()=>y(e,i?.index),className:`
|
|
4
4
|
${i.direction==="vertical"?"w-full":""}
|
|
5
|
-
`,children:i?.primaryButton||""}):null]})]})},e?.id||e?.handle)},Y=H.forwardRef(({data:e,buildData:i,className:f="",key:h,event:v},
|
|
5
|
+
`,children:i?.primaryButton||""}):null]})]})},e?.id||e?.handle)},Y=H.forwardRef(({data:e,buildData:i,className:f="",key:h,event:v},y)=>{const[n,s]=S(""),[x,b]=S([]),g=B({query:"(max-width: 768px)"}),a=L(null);V(y,()=>a.current),U(a,{componentType:N,componentName:D,componentTitle:e?.title,navigation:n});const{productsTab:l=[],productsCard:r=[],title:o,align:P="left",isShowTab:c=!0,tabShape:C="square",isShowTag:I=!1,..._}=e,w=p=>{const M=p?.map(m=>{const k=i?.products?.find(E=>E?.handle===m?.handle);if(k)return{sku:m.sku,...k}})?.filter(m=>m);b(M)};return q(()=>{if(c){s(l?.[0]?.tab||""),w(l?.[0]?.data||[]);return}w(r)},[]),u("div",{ref:a,className:d("w-full",f,{"aiui-dark":e?.theme==="dark"}),children:[o&&t(A,{data:{title:o}}),c&&t("div",{className:`${g?"w-full overflow-hidden":""}`,children:t($,{value:n,tabs:l,tabShape:C,onTabClick:p=>{s(p?.tab),w(p?.data||[]),W({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:N,component_name:D,component_title:e?.title,component_position:1,navigation:p?.tab}})}})}),t("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:t(O,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${h}${n}`,data:{list:x,configuration:{..._,event:v,isShowTag:I}},Slide:X,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var xe=j(Y);export{xe as default};
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {isShowTag ? (\n data?.tags\n ?.filter((item: any) => item.startsWith('CLtag'))\n ?.map((item: any) => item.replace('CLtag:', ''))\n ?.slice(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)\n ) : (\n <div className=\"lg-desktop:h-[28px] h-[24px] w-full\"></div>\n )}\n </div>\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
-
"mappings": "aAkIU,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter((item: any) => item.startsWith('CLtag'))\n ?.map((item: any) => item.replace('CLtag:', ''))\n ?.slice(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {data?.title ? (\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n ) : null}\n {data?.description ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Picture", "TabSwitch", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "price", "basePrice", "handleUrl", "sku", "skuArray", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import type { SerializedEditorState, SerializedLexicalNode } from 'lexical';
|
|
4
4
|
declare const headingVariants: (props?: ({
|
|
5
5
|
size?: 1 | "none" | 2 | 3 | 4 | 5 | null | undefined;
|
|
6
|
-
weight?: "bold" | "medium" | "semibold" | "
|
|
6
|
+
weight?: "bold" | "medium" | "semibold" | "extraBold" | "black" | null | undefined;
|
|
7
7
|
align?: "left" | "right" | "center" | null | undefined;
|
|
8
8
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
9
9
|
interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {
|
|
@@ -4,7 +4,7 @@ import type { SerializedEditorState, SerializedLexicalNode } from 'lexical';
|
|
|
4
4
|
import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
|
|
5
5
|
declare const textVariants: (props?: ({
|
|
6
6
|
size?: 1 | "none" | 2 | 3 | 4 | null | undefined;
|
|
7
|
-
weight?: "bold" | "
|
|
7
|
+
weight?: "bold" | "medium" | "semibold" | "extraBold" | "black" | null | undefined;
|
|
8
8
|
align?: "left" | "right" | "center" | null | undefined;
|
|
9
9
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
10
|
type TextSpanProps = {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as s}from"react/jsx-runtime";import*as T from"react";import{Slot as g}from"@radix-ui/react-slot";import{cva as h}from"class-variance-authority";import{convertLexicalToHTML as y}from"@payloadcms/richtext-lexical/html";import{cn as b}from"../helpers/index.js";const u=h("tracking-[-0.02em]",{variants:{size:{none:"tracking",1:"text-[12px] leading-[140%]",2:"text-[14px] leading-[140%]",3:"text-[16px] leading-[140%]",4:"text-[18px] leading-[140%]"},weight:{medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extraBold:"font-extrabold",black:"font-black"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),a=T.forwardRef((i,l)=>{const{children:t,size:o="none",weight:r,align:m,className:d,asChild:x,as:P="span",color:n,html:e,...c}=i,p=e?{dangerouslySetInnerHTML:{__html:typeof e=="string"?e:y({data:e})}}:null,f=n?{style:{color:n}}:null;return s(g,{...c,ref:l,className:b(u({size:o,weight:o==="none"?r??"medium":r,align:m}),d),...p,...f,children:x?t:s(P,{children:p?null:t})})});a.displayName="Text";export{a as Text};
|
|
2
2
|
//# sourceMappingURL=text.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/text.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('tracking-[-0.02em]', {\n variants: {\n size: {\n none: 'tracking',\n 1: 'text-[12px] leading-[140%]',\n 2: 'text-[14px] leading-[140%]',\n 3: 'text-[16px] leading-[140%]',\n 4: 'text-[18px] leading-[140%]',\n },\n weight: {\n
|
|
5
|
-
"mappings": "AA+F4B,cAAAA,MAAA,oBA/F5B,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAA4B,OAAAC,MAAW,2BACvC,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,MAAAC,MAAU,sBAGnB,MAAMC,EAAeH,EAAI,qBAAsB,CAC7C,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,6BACH,EAAG,6BACH,EAAG,6BACH,EAAG,4BACL,EACA,OAAQ,CACN,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('tracking-[-0.02em]', {\n variants: {\n size: {\n none: 'tracking',\n 1: 'text-[12px] leading-[140%]',\n 2: 'text-[14px] leading-[140%]',\n 3: 'text-[16px] leading-[140%]',\n 4: 'text-[18px] leading-[140%]',\n },\n weight: {\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extraBold: 'font-extrabold',\n black: 'font-black',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype TextElement = React.ElementRef<'span'>\ntype TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>\ntype TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>\ntype TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>\ntype TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>\n\ninterface CommonTextProps extends VariantProps<typeof textVariants> {\n as?: 'div' | 'label' | 'p' | 'span'\n asChild?: boolean\n color?: string\n /** \u76F8\u5F53\u4E8E dangerouslySetInnerHTML */\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\ntype TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)\n\nconst Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {\n const {\n children,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n weight,\n align,\n className,\n asChild,\n as: Tag = 'span',\n color,\n html,\n ...textProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n\n return (\n <Slot\n {...textProps}\n ref={forwardedRef}\n className={cn(\n textVariants({\n size,\n weight: size === 'none' ? (weight ?? 'medium') : weight, // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\nText.displayName = 'Text'\n\nexport { Text }\nexport type { TextProps }\n"],
|
|
5
|
+
"mappings": "AA+F4B,cAAAA,MAAA,oBA/F5B,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAA4B,OAAAC,MAAW,2BACvC,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,MAAAC,MAAU,sBAGnB,MAAMC,EAAeH,EAAI,qBAAsB,CAC7C,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,6BACH,EAAG,6BACH,EAAG,6BACH,EAAG,4BACL,EACA,OAAQ,CACN,OAAQ,cACR,SAAU,gBACV,KAAM,YACN,UAAW,iBACX,MAAO,YACT,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAkBKI,EAAON,EAAM,WAAmC,CAACO,EAAOC,IAAiB,CAC7E,KAAM,CACJ,SAAAC,EACA,KAAAC,EAAO,OACP,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,OACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,EAAOd,EAAqB,CAAE,KAAMc,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KAEJ,OACEjB,EAACE,EAAA,CACE,GAAGiB,EACJ,IAAKV,EACL,UAAWJ,EACTC,EAAa,CACX,KAAAK,EACA,OAAQA,IAAS,OAAUC,GAAU,SAAYA,EACjD,MAAAC,CACF,CAAC,EACDC,CACF,EACC,GAAGM,EACH,GAAGC,EAEH,SAAAN,EAAUL,EAAWV,EAACgB,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EACDH,EAAK,YAAc",
|
|
6
6
|
"names": ["jsx", "React", "Slot", "cva", "convertLexicalToHTML", "cn", "textVariants", "Text", "props", "forwardedRef", "children", "size", "weight", "align", "className", "asChild", "Tag", "color", "html", "textProps", "htmlContentProps", "styleProps"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as i,jsx as e,jsxs as o}from"react/jsx-runtime";import{Text as t}from"../components/index.js";import"react";const r={title:"Typography/Text",component:t,parameters:{layout:"padded",docs:{description:{component:`\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.
|
|
2
2
|
|
|
3
3
|
### \u6587\u672C\u5C3A\u5BF8
|
|
4
4
|
\u6587\u5B57\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6587\u672C\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6587\u5B57\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6587\u5B57\u5C3A\u5BF8\uFF1A12px
|
|
@@ -7,7 +7,7 @@ import{Fragment as n,jsx as e,jsxs as o}from"react/jsx-runtime";import{Text as t
|
|
|
7
7
|
- 2: \u8865\u5145\u6587\u672C(14px)
|
|
8
8
|
- 1: \u5C0F\u6807\u9898\uFF0C\u63CF\u8FF0\uFF0C\u6CE8\u91CA(12px)
|
|
9
9
|
- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F
|
|
10
|
-
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},description:"\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20",options:["none",1,2,3],table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},description:"\u6587\u672C\u6743\u91CD\uFF0Cnone \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium, \u5176\u4ED6size \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A bold",options:["
|
|
10
|
+
`}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},description:"\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20",options:["none",1,2,3,4],table:{defaultValue:{summary:"none"}}},weight:{control:{type:"select"},description:"\u6587\u672C\u6743\u91CD\uFF0Cnone \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium, \u5176\u4ED6size \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A bold",options:["medium","semibold","bold","extraBold","black"],table:{defaultValue:{summary:"bold"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},description:"html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C",options:["div","label","p","span"],table:{defaultValue:{summary:"span"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{size:3,weight:"bold",align:"left",html:"",as:"p"}};var s=r;const d={args:{children:" The quick brown fox jumps over the lazy dog.",size:3,weight:"bold"}},p={render(){return o("div",{className:"flex flex-col",children:[e(t,{size:1,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:2,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:3,children:"The quick brown fox jumps over the lazy dog."}),e(t,{size:4,children:"The quick brown fox jumps over the lazy dog."})]})}},c={render(){return o("div",{className:"flex flex-col",children:[e("span",{className:"text-sm font-extrabold",children:"size 3"}),o("div",{className:"flex flex-col",children:[e(t,{weight:"medium",size:3,children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"semibold",size:3,children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"bold",size:3,children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"extraBold",size:3,children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"black",size:3,children:"The quick brown fox jumps over the lazy dog."})]}),e("span",{className:"mt-2 text-sm font-extrabold",children:"size none"}),o("div",{className:"flex flex-col",children:[e(t,{weight:"medium",children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"semibold",children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"bold",children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"extraBold",children:"The quick brown fox jumps over the lazy dog."}),e(t,{weight:"black",children:"The quick brown fox jumps over the lazy dog."})]})]})}},m={render(){return o(i,{children:[e(t,{children:"\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C"}),e("hr",{}),e(t,{html:`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(
|
|
11
11
|
to right,
|
|
12
12
|
#00ff00, /* \u7EFF\u8272 */
|
|
13
13
|
#00ff99, /* \u6D45\u7EFF\u8272 */
|
|
@@ -15,5 +15,5 @@ import{Fragment as n,jsx as e,jsxs as o}from"react/jsx-runtime";import{Text as t
|
|
|
15
15
|
#0099ff, /* \u6D45\u84DD\u8272 */
|
|
16
16
|
#8000ff, /* \u7D2B\u8272 */
|
|
17
17
|
#ff00ff /* \u7C89\u8272 */
|
|
18
|
-
);color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}),e("hr",{}),e(t,{html:{root:{type:"root",format:"",indent:0,version:1,children:[{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"React to Every Noise as You Go",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"},{tag:"h3",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"Reserve for Only $1, Get $70 Off",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"}],direction:"ltr"}}})]})}};export{p as All,d as Default,
|
|
18
|
+
);color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}),e("hr",{}),e(t,{html:{root:{type:"root",format:"",indent:0,version:1,children:[{tag:"h1",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"React to Every Noise as You Go",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"},{tag:"h3",type:"heading",format:"",indent:0,version:1,children:[{mode:"normal",text:"Reserve for Only $1, Get $70 Off",type:"text",style:"",detail:0,format:0,version:1}],direction:"ltr"}],direction:"ltr"}}})]})}};export{p as All,d as Default,m as Html,s as default,c as weight};
|
|
19
19
|
//# sourceMappingURL=text.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/stories/text.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Text',\n component: Text,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.\n\n### \u6587\u672C\u5C3A\u5BF8\n\u6587\u5B57\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6587\u672C\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6587\u5B57\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6587\u5B57\u5C3A\u5BF8\uFF1A12px\n- 4: \u6B63\u65871 \u5B57\u4F53\u504F\u5927\u4E00\u70B9\u7684\u6B63\u6587(18px)\n- 3: \u6B63\u65872 \u5B57\u4F53\u504F\u5C0F\u4E00\u70B9\u7684\u6B63\u6587(16px)\n- 2: \u8865\u5145\u6587\u672C(14px)\n- 1: \u5C0F\u6807\u9898\uFF0C\u63CF\u8FF0\uFF0C\u6CE8\u91CA(12px)\n- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F\n`,\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20',\n options: ['none', 1, 2, 3],\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u6743\u91CD\uFF0Cnone \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium, \u5176\u4ED6size \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A bold',\n options: ['
|
|
5
|
-
"mappings": "AAmGM,
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n title: 'Typography/Text',\n component: Text,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component: `\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.\n\n### \u6587\u672C\u5C3A\u5BF8\n\u6587\u5B57\u7684\u5927\u5C0F\uFF0C\u5C42\u7EA7\uFF0C\u5BF9\u6BD4\u5EA6\u7B49\u90FD\u662F\u5F71\u54CD\u89C6\u89C9\u53EF\u8BFB\u6027\u548C\u9605\u8BFB\u6548\u7387\u7684\u91CD\u8981\u56E0\u7D20\uFF0C\u4E3A\u4FDD\u969C\u6587\u672C\u7684\u6613\u8BFB\u6027\uFF0C\u754C\u9762\u6587\u5B57\u9700\u6EE1\u8DB3\u4EE5\u4E0B\u8981\u6C42\uFF1A\u6700\u5C0F\u53EF\u8BC6\u522B\u6587\u5B57\u5C3A\u5BF8\uFF1A12px\n- 4: \u6B63\u65871 \u5B57\u4F53\u504F\u5927\u4E00\u70B9\u7684\u6B63\u6587(18px)\n- 3: \u6B63\u65872 \u5B57\u4F53\u504F\u5C0F\u4E00\u70B9\u7684\u6B63\u6587(16px)\n- 2: \u8865\u5145\u6587\u672C(14px)\n- 1: \u5C0F\u6807\u9898\uFF0C\u63CF\u8FF0\uFF0C\u6CE8\u91CA(12px)\n- none: \u65E0\u9ED8\u8BA4\u5B57\u4F53\u5927\u5C0F\n`,\n },\n },\n },\n tags: ['autodocs'],\n argTypes: {\n size: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u5C3A\u5BF8 4: \u6B63\u65871(18px) 3: \u6B63\u65872(16px), 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898, none: \u7EE7\u627F\u7236\u5143\u7D20',\n options: ['none', 1, 2, 3, 4],\n table: {\n defaultValue: { summary: 'none' },\n },\n },\n weight: {\n control: {\n type: 'select',\n },\n description: '\u6587\u672C\u6743\u91CD\uFF0Cnone \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium, \u5176\u4ED6size \u65F6\uFF0C\u9ED8\u8BA4\u503C\u4E3A bold',\n options: ['medium', 'semibold', 'bold', 'extraBold', 'black'],\n table: {\n defaultValue: { summary: 'bold' },\n },\n },\n align: {\n control: {\n type: 'select',\n },\n options: ['left', 'center', 'right'],\n table: {\n defaultValue: { summary: undefined },\n },\n },\n color: {\n control: {\n type: 'color',\n },\n },\n as: {\n control: {\n type: 'select',\n },\n description: 'html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C',\n options: ['div', 'label', 'p', 'span'],\n table: {\n defaultValue: { summary: 'span' },\n },\n },\n html: {\n type: 'string',\n description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n },\n },\n args: {\n size: 3,\n weight: 'bold',\n align: 'left',\n html: '',\n as: 'p',\n },\n} satisfies Meta<typeof Text>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n args: {\n children: ' The quick brown fox jumps over the lazy dog.',\n size: 3,\n weight: 'bold',\n },\n}\n\nexport const All: Story = {\n render() {\n return (\n <div className=\"flex flex-col\">\n <Text size={1}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={2}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={3}>The quick brown fox jumps over the lazy dog.</Text>\n <Text size={4}>The quick brown fox jumps over the lazy dog.</Text>\n </div>\n )\n },\n}\n\nexport const weight: Story = {\n render() {\n return (\n <div className=\"flex flex-col\">\n <span className=\"text-sm font-extrabold\">size 3</span>\n <div className=\"flex flex-col\">\n <Text weight=\"medium\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"semibold\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"bold\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"extraBold\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n <Text weight=\"black\" size={3}>\n The quick brown fox jumps over the lazy dog.\n </Text>\n </div>\n <span className=\"mt-2 text-sm font-extrabold\">size none</span>\n <div className=\"flex flex-col\">\n <Text weight=\"medium\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"semibold\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"bold\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"extraBold\">The quick brown fox jumps over the lazy dog.</Text>\n <Text weight=\"black\">The quick brown fox jumps over the lazy dog.</Text>\n </div>\n </div>\n )\n },\n}\n\nexport const Html: Story = {\n render() {\n return (\n <>\n <Text>\u652F\u6301html \u683C\u5F0F \u548Cpayload cms JSON \u683C\u5F0F \u7684\u5BCC\u6587\u672C</Text>\n <hr />\n <Text\n html={`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(\n to right, \n #00ff00, /* \u7EFF\u8272 */\n #00ff99, /* \u6D45\u7EFF\u8272 */\n #00ffff, /* \u9752\u8272 */\n #0099ff, /* \u6D45\u84DD\u8272 */\n #8000ff, /* \u7D2B\u8272 */\n #ff00ff /* \u7C89\u8272 */\n );color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}\n />\n <hr />\n <Text\n html={\n {\n root: {\n type: 'root',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n tag: 'h1',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'React to Every Noise as You Go',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n {\n tag: 'h3',\n type: 'heading',\n format: '',\n indent: 0,\n version: 1,\n children: [\n {\n mode: 'normal',\n text: 'Reserve for Only $1, Get $70 Off',\n type: 'text',\n style: '',\n detail: 0,\n format: 0,\n version: 1,\n },\n ],\n direction: 'ltr',\n },\n ],\n direction: 'ltr',\n },\n } as any\n }\n />\n </>\n )\n },\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "Text", "meta", "text_stories_default", "Default", "All", "weight", "Html"]
|
|
7
7
|
}
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1325,15 +1325,9 @@ video {
|
|
|
1325
1325
|
.font-extrabold {
|
|
1326
1326
|
font-weight: 800;
|
|
1327
1327
|
}
|
|
1328
|
-
.font-light {
|
|
1329
|
-
font-weight: 300;
|
|
1330
|
-
}
|
|
1331
1328
|
.font-medium {
|
|
1332
1329
|
font-weight: 500;
|
|
1333
1330
|
}
|
|
1334
|
-
.font-normal {
|
|
1335
|
-
font-weight: 400;
|
|
1336
|
-
}
|
|
1337
1331
|
.font-semibold {
|
|
1338
1332
|
font-weight: 600;
|
|
1339
1333
|
}
|