@datlv-trustshop/shopify-inapp-components 0.2.15 → 0.2.16

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.
@@ -87,7 +87,7 @@ export const ArticleList = ({ limit, className = "", onArticleClick, layout = "s
87
87
  transform: `translateX(-${slidePercentage}%)`,
88
88
  }, children: displayArticles.map((article) => (_jsx("div", { style: {
89
89
  flex: "0 0 auto",
90
- width: isMobile ? "90%" : "270px",
90
+ width: isMobile ? "85%" : "270px",
91
91
  }, children: _jsxs("div", { style: {
92
92
  display: "flex",
93
93
  flexDirection: "column",
@@ -1 +1 @@
1
- {"version":3,"file":"ArticleList.js","sourceRoot":"","sources":["../../src/components/ArticleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { Button, Box } from \"@shopify/polaris\";\nimport { ExternalIcon } from \"@shopify/polaris-icons\";\nimport { ArticleItem } from \"../types\";\nimport { useDashboard } from \"../hooks/useDashboard\";\n\nexport interface ArticleListProps {\n limit?: number;\n className?: string;\n onArticleClick?: (article: ArticleItem) => void;\n layout?: \"slide\" | \"list\" | \"grid\";\n showThumbnail?: boolean;\n showAuthor?: boolean;\n showDate?: boolean;\n currentIndex?: number;\n showNavigation?: boolean;\n autoPlay?: boolean;\n autoPlayInterval?: number;\n onSlideChange?: (index: number) => void;\n renderButton?: (\n article: ArticleItem,\n handlers: {\n onClick: () => void;\n },\n ) => React.ReactNode;\n}\n\nexport const ArticleList: React.FC<ArticleListProps> = ({\n limit,\n className = \"\",\n onArticleClick,\n layout = \"slide\",\n showThumbnail = true,\n currentIndex: externalCurrentIndex,\n showNavigation = true,\n autoPlay = false,\n autoPlayInterval = 5000,\n onSlideChange,\n renderButton,\n}) => {\n const { data } = useDashboard();\n const articles = data?.articles || [];\n const displayArticles = limit ? articles.slice(0, limit) : articles;\n const [isMobile, setIsMobile] = useState(false);\n const [internalCurrentIndex, setInternalCurrentIndex] = useState(0);\n\n const currentIndex =\n externalCurrentIndex !== undefined\n ? externalCurrentIndex\n : internalCurrentIndex;\n\n useEffect(() => {\n const checkMobile = () => {\n setIsMobile(window.innerWidth <= 768);\n };\n\n checkMobile();\n window.addEventListener(\"resize\", checkMobile);\n\n return () => window.removeEventListener(\"resize\", checkMobile);\n }, []);\n\n useEffect(() => {\n if (!autoPlay || layout !== \"slide\" || displayArticles.length <= 1) return;\n\n const interval = setInterval(() => {\n const newIndex = (currentIndex + 1) % displayArticles.length;\n if (externalCurrentIndex === undefined) {\n setInternalCurrentIndex(newIndex);\n }\n onSlideChange?.(newIndex);\n }, autoPlayInterval);\n\n return () => clearInterval(interval);\n }, [\n autoPlay,\n layout,\n displayArticles.length,\n currentIndex,\n autoPlayInterval,\n externalCurrentIndex,\n onSlideChange,\n ]);\n\n const handleSlideChange = (newIndex: number) => {\n if (externalCurrentIndex === undefined) {\n setInternalCurrentIndex(newIndex);\n }\n onSlideChange?.(newIndex);\n };\n\n const handlePrevious = () => {\n const newIndex =\n currentIndex === 0 ? displayArticles.length - 1 : currentIndex - 1;\n handleSlideChange(newIndex);\n };\n\n const handleNext = () => {\n const newIndex = (currentIndex + 1) % displayArticles.length;\n handleSlideChange(newIndex);\n };\n\n const handleArticleClick = (article: ArticleItem) => {\n if (article.link) {\n window.open(article.link, \"_blank\");\n }\n onArticleClick?.(article);\n };\n\n if (displayArticles.length === 0) {\n return (\n <div className={className} style={{ width: \"100%\" }}>\n <p style={{ textAlign: \"center\", color: \"#999\" }}>\n No articles available\n </p>\n </div>\n );\n }\n\n if (layout === \"slide\") {\n let slidePercentage: number;\n if (isMobile) {\n slidePercentage = currentIndex * 90;\n } else {\n const itemWidth = 100 / displayArticles.length;\n slidePercentage = currentIndex * itemWidth * 1.5;\n }\n\n return (\n <div\n className={className}\n style={{\n position: \"relative\",\n overflow: \"hidden\",\n width: \"100%\",\n }}\n >\n <div\n style={{\n overflow: \"hidden\",\n position: \"relative\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n transition: \"transform 0.5s ease-in-out\",\n gap: \"20px\",\n willChange: \"transform\",\n transform: `translateX(-${slidePercentage}%)`,\n }}\n >\n {displayArticles.map((article) => (\n <div\n key={article.id}\n style={{\n flex: \"0 0 auto\",\n width: isMobile ? \"90%\" : \"270px\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4px\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"10px\",\n }}\n >\n {showThumbnail && article.imageUrl && (\n <div\n style={{\n width: isMobile ? \"100%\" : \"270px\",\n height: \"152px\",\n overflow: \"hidden\",\n borderRadius: \"8px\",\n }}\n >\n <img\n src={\n article.imageUrl ||\n \"https://asset.trustshop.io/dashboard/news-review-summary.png\"\n }\n alt={article.title}\n style={{\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n }}\n />\n </div>\n )}\n {article.category && (\n <div\n style={{\n color: \"var(--p-color-text-emphasis, #616161)\",\n }}\n >\n <span style={{ fontSize: \"13px\" }}>\n {article.category}\n </span>\n </div>\n )}\n </div>\n\n <div\n className=\"title-button\"\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"6px\",\n }}\n >\n <h3\n style={{\n margin: 0,\n fontSize: \"14px\",\n fontWeight: \"bold\",\n color: \"#303030\",\n lineHeight: \"1.4\",\n }}\n >\n {article.title}\n </h3>\n\n {renderButton ? (\n renderButton(article, {\n onClick: () => handleArticleClick(article),\n })\n ) : (\n <Box>\n <Button\n icon={ExternalIcon}\n onClick={() => handleArticleClick(article)}\n variant=\"plain\"\n >\n {article.buttonText || (article.link ? \"Read article\" : \"Learn more\")}\n </Button>\n </Box>\n )}\n </div>\n </div>\n </div>\n ))}\n </div>\n\n {showNavigation && displayArticles.length > 1 && (\n <>\n <button\n onClick={handlePrevious}\n aria-label=\"Previous slide\"\n style={{\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n left: \"10px\",\n background: \"rgba(255, 255, 255, 0.9)\",\n border: \"1px solid #e3e3e3\",\n borderRadius: \"50%\",\n width: \"32px\",\n height: \"32px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n zIndex: 10,\n transition: \"background-color 0.2s\",\n padding: 0,\n }}\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"#303030\">\n <path\n d=\"M10.5 13L5.5 8l5-5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </button>\n <button\n onClick={handleNext}\n aria-label=\"Next slide\"\n style={{\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n right: \"10px\",\n background: \"rgba(255, 255, 255, 0.9)\",\n border: \"1px solid #e3e3e3\",\n borderRadius: \"50%\",\n width: \"32px\",\n height: \"32px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n zIndex: 10,\n transition: \"background-color 0.2s\",\n padding: 0,\n }}\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"#303030\">\n <path\n d=\"M5.5 13l5-5-5-5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </button>\n </>\n )}\n </div>\n\n {showNavigation && displayArticles.length > 1 && (\n <div\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n gap: \"8px\",\n marginTop: \"16px\",\n }}\n >\n {displayArticles.map((_, index) => (\n <button\n key={index}\n onClick={() => handleSlideChange(index)}\n aria-label={`Go to slide ${index + 1}`}\n style={{\n width: \"8px\",\n height: \"8px\",\n borderRadius: \"50%\",\n backgroundColor:\n index === currentIndex ? \"#303030\" : \"#e3e3e3\",\n cursor: \"pointer\",\n transition: \"background-color 0.3s\",\n border: \"none\",\n padding: 0,\n }}\n />\n ))}\n </div>\n )}\n </div>\n );\n }\n\n return null;\n};\n"]}
1
+ {"version":3,"file":"ArticleList.js","sourceRoot":"","sources":["../../src/components/ArticleList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { Button, Box } from \"@shopify/polaris\";\nimport { ExternalIcon } from \"@shopify/polaris-icons\";\nimport { ArticleItem } from \"../types\";\nimport { useDashboard } from \"../hooks/useDashboard\";\n\nexport interface ArticleListProps {\n limit?: number;\n className?: string;\n onArticleClick?: (article: ArticleItem) => void;\n layout?: \"slide\" | \"list\" | \"grid\";\n showThumbnail?: boolean;\n showAuthor?: boolean;\n showDate?: boolean;\n currentIndex?: number;\n showNavigation?: boolean;\n autoPlay?: boolean;\n autoPlayInterval?: number;\n onSlideChange?: (index: number) => void;\n renderButton?: (\n article: ArticleItem,\n handlers: {\n onClick: () => void;\n },\n ) => React.ReactNode;\n}\n\nexport const ArticleList: React.FC<ArticleListProps> = ({\n limit,\n className = \"\",\n onArticleClick,\n layout = \"slide\",\n showThumbnail = true,\n currentIndex: externalCurrentIndex,\n showNavigation = true,\n autoPlay = false,\n autoPlayInterval = 5000,\n onSlideChange,\n renderButton,\n}) => {\n const { data } = useDashboard();\n const articles = data?.articles || [];\n const displayArticles = limit ? articles.slice(0, limit) : articles;\n const [isMobile, setIsMobile] = useState(false);\n const [internalCurrentIndex, setInternalCurrentIndex] = useState(0);\n\n const currentIndex =\n externalCurrentIndex !== undefined\n ? externalCurrentIndex\n : internalCurrentIndex;\n\n useEffect(() => {\n const checkMobile = () => {\n setIsMobile(window.innerWidth <= 768);\n };\n\n checkMobile();\n window.addEventListener(\"resize\", checkMobile);\n\n return () => window.removeEventListener(\"resize\", checkMobile);\n }, []);\n\n useEffect(() => {\n if (!autoPlay || layout !== \"slide\" || displayArticles.length <= 1) return;\n\n const interval = setInterval(() => {\n const newIndex = (currentIndex + 1) % displayArticles.length;\n if (externalCurrentIndex === undefined) {\n setInternalCurrentIndex(newIndex);\n }\n onSlideChange?.(newIndex);\n }, autoPlayInterval);\n\n return () => clearInterval(interval);\n }, [\n autoPlay,\n layout,\n displayArticles.length,\n currentIndex,\n autoPlayInterval,\n externalCurrentIndex,\n onSlideChange,\n ]);\n\n const handleSlideChange = (newIndex: number) => {\n if (externalCurrentIndex === undefined) {\n setInternalCurrentIndex(newIndex);\n }\n onSlideChange?.(newIndex);\n };\n\n const handlePrevious = () => {\n const newIndex =\n currentIndex === 0 ? displayArticles.length - 1 : currentIndex - 1;\n handleSlideChange(newIndex);\n };\n\n const handleNext = () => {\n const newIndex = (currentIndex + 1) % displayArticles.length;\n handleSlideChange(newIndex);\n };\n\n const handleArticleClick = (article: ArticleItem) => {\n if (article.link) {\n window.open(article.link, \"_blank\");\n }\n onArticleClick?.(article);\n };\n\n if (displayArticles.length === 0) {\n return (\n <div className={className} style={{ width: \"100%\" }}>\n <p style={{ textAlign: \"center\", color: \"#999\" }}>\n No articles available\n </p>\n </div>\n );\n }\n\n if (layout === \"slide\") {\n let slidePercentage: number;\n if (isMobile) {\n slidePercentage = currentIndex * 90;\n } else {\n const itemWidth = 100 / displayArticles.length;\n slidePercentage = currentIndex * itemWidth * 1.5;\n }\n\n return (\n <div\n className={className}\n style={{\n position: \"relative\",\n overflow: \"hidden\",\n width: \"100%\",\n }}\n >\n <div\n style={{\n overflow: \"hidden\",\n position: \"relative\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n transition: \"transform 0.5s ease-in-out\",\n gap: \"20px\",\n willChange: \"transform\",\n transform: `translateX(-${slidePercentage}%)`,\n }}\n >\n {displayArticles.map((article) => (\n <div\n key={article.id}\n style={{\n flex: \"0 0 auto\",\n width: isMobile ? \"85%\" : \"270px\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4px\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"10px\",\n }}\n >\n {showThumbnail && article.imageUrl && (\n <div\n style={{\n width: isMobile ? \"100%\" : \"270px\",\n height: \"152px\",\n overflow: \"hidden\",\n borderRadius: \"8px\",\n }}\n >\n <img\n src={\n article.imageUrl ||\n \"https://asset.trustshop.io/dashboard/news-review-summary.png\"\n }\n alt={article.title}\n style={{\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n }}\n />\n </div>\n )}\n {article.category && (\n <div\n style={{\n color: \"var(--p-color-text-emphasis, #616161)\",\n }}\n >\n <span style={{ fontSize: \"13px\" }}>\n {article.category}\n </span>\n </div>\n )}\n </div>\n\n <div\n className=\"title-button\"\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"6px\",\n }}\n >\n <h3\n style={{\n margin: 0,\n fontSize: \"14px\",\n fontWeight: \"bold\",\n color: \"#303030\",\n lineHeight: \"1.4\",\n }}\n >\n {article.title}\n </h3>\n\n {renderButton ? (\n renderButton(article, {\n onClick: () => handleArticleClick(article),\n })\n ) : (\n <Box>\n <Button\n icon={ExternalIcon}\n onClick={() => handleArticleClick(article)}\n variant=\"plain\"\n >\n {article.buttonText || (article.link ? \"Read article\" : \"Learn more\")}\n </Button>\n </Box>\n )}\n </div>\n </div>\n </div>\n ))}\n </div>\n\n {showNavigation && displayArticles.length > 1 && (\n <>\n <button\n onClick={handlePrevious}\n aria-label=\"Previous slide\"\n style={{\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n left: \"10px\",\n background: \"rgba(255, 255, 255, 0.9)\",\n border: \"1px solid #e3e3e3\",\n borderRadius: \"50%\",\n width: \"32px\",\n height: \"32px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n zIndex: 10,\n transition: \"background-color 0.2s\",\n padding: 0,\n }}\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"#303030\">\n <path\n d=\"M10.5 13L5.5 8l5-5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </button>\n <button\n onClick={handleNext}\n aria-label=\"Next slide\"\n style={{\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n right: \"10px\",\n background: \"rgba(255, 255, 255, 0.9)\",\n border: \"1px solid #e3e3e3\",\n borderRadius: \"50%\",\n width: \"32px\",\n height: \"32px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n zIndex: 10,\n transition: \"background-color 0.2s\",\n padding: 0,\n }}\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"#303030\">\n <path\n d=\"M5.5 13l5-5-5-5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n />\n </svg>\n </button>\n </>\n )}\n </div>\n\n {showNavigation && displayArticles.length > 1 && (\n <div\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n gap: \"8px\",\n marginTop: \"16px\",\n }}\n >\n {displayArticles.map((_, index) => (\n <button\n key={index}\n onClick={() => handleSlideChange(index)}\n aria-label={`Go to slide ${index + 1}`}\n style={{\n width: \"8px\",\n height: \"8px\",\n borderRadius: \"50%\",\n backgroundColor:\n index === currentIndex ? \"#303030\" : \"#e3e3e3\",\n cursor: \"pointer\",\n transition: \"background-color 0.3s\",\n border: \"none\",\n padding: 0,\n }}\n />\n ))}\n </div>\n )}\n </div>\n );\n }\n\n return null;\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@datlv-trustshop/shopify-inapp-components",
3
- "version": "0.2.15",
3
+ "version": "0.2.16",
4
4
  "private": false,
5
5
  "description": "React TypeScript components for Shopify in-app dashboard content",
6
6
  "main": "dist/index.js",