Update CategoryPanel to use dynamic data and refine imports

Refactored `CategoryPanel` to accept `data` as a prop instead of relying on hardcoded `mockData`. Updated storybook configuration to provide mock data and improve the preview handling. Also switched from an alpha version to a stable release of `@acrool/js-utils`.

Author: imagine10255

example/package.json

@@ -14,7 +14,7 @@
     "styled-components": "6.1.17"
   },
   "dependencies": {
-    "@acrool/js-utils": "^3.2.23-alpha.0",
+    "@acrool/js-utils": "^3.2.23",
     "@acrool/react-carousel": "link:..",
     "@acrool/react-grid": "^6.0.7",
     "@acrool/react-iconsvg": "^4.2.1",

example/src/components/examples/CategoryPanel/CategoryPanel.stories.tsx

@@ -6,6 +6,7 @@ import Phone, {NavWrapper} from '@/components/atoms/Phone';
 import Icon, {EIconCode} from '@/library/acrool-react-icon';
 
 import CategoryPanel from './_components/CategoryPanel';
+import {mockData} from './_components/mockData';
 
 
 const meta = {
@@ -20,6 +21,9 @@ const meta = {
             },
         },
     },
+    args: {
+        data: mockData,
+    },
     render: function Render(args) {
         return <Phone>
 
@@ -50,9 +54,6 @@ const meta = {
 
         </Phone>;
     },
-    // argTypes: {},
-    args: {
-    },
 } satisfies Meta<typeof CategoryPanel>;
 
 export default meta;

example/src/components/examples/CategoryPanel/_components/CategoryPanel.tsx

@@ -5,7 +5,6 @@ import {Img} from '@acrool/react-img';
 import {useEffect, useState} from 'react';
 import styled, {css} from 'styled-components';
 
-import {mockData} from './mockData';
 import {IBallCategoryCarouselData, IBallCategoryCarouselProps} from './types';
 
 
@@ -17,74 +16,69 @@ import {IBallCategoryCarouselData, IBallCategoryCarouselProps} from './types';
  * Component / Molecules @ Live Event 輪播
  */
 const CategoryPanel = ({
+    data,
 }: IBallCategoryCarouselProps) => {
     const [activeId, onSetActiveId] = useState<string|null>(null);
     const [controller, setController] = useState<Controller|null>(null);
-    const [previewData, setPreviewData] = useState<IBallCategoryCarouselData[]|undefined>(undefined);
-    const [startIndex, setStartIndex] = useState<number>(0);
+    const [previewData, setPreviewData] = useState<IBallCategoryCarouselData[]|undefined>(data?.slice(0, 6));
 
 
     useEffect(() => {
-        setTimeout(() => {
-            setPreviewData(mockData.slice(0, 6));
-        },1);
-    }, []);
+        setPreviewData(data.slice(0, 6));
+    }, [data]);
 
 
 
 
     const handleOnClick = (id: string) => {
-        const currIndex = mockData.findIndex(row => row.id === id);
+        const currIndex = data.findIndex(row => row.id === id);
         if(currIndex === -1) return;
 
 
         const pageIndex = Math.floor(currIndex / 6);
         const startIndex = pageIndex * 6;
         const endIndex = startIndex + 6;
-        const filterData = mockData.slice(startIndex, endIndex);
+        const filterData = data.slice(startIndex, endIndex);
 
         setPreviewData(filterData);
-        setStartIndex(startIndex);
-        // setTimeout(() => {
-        // }, 1);
-
         onSetActiveId(id);
         controller?.slideToPage(1);
 
     };
 
 
     const getCarouselData = (): TAcroolSlideItemDataList => {
-        const dataPaginate = mockData ? arraySplit(mockData,18) : undefined;
-
-
-        const dataList2 = [
-            <AcroolSlideCard key={`preview_${startIndex}`}>
-                <Row className="flex-nowrap g-2">
-                    {
-                        previewData
-                            ?.map(row => {
-                                const isActive = row.id === activeId;
-
-                                return <Col col={12/6}
-                                    key={`preview_col_${row.id}`}
-                                >
-                                    <Card $active={row.id === activeId} onClick={() => {
-                                        onSetActiveId(row.id);
-                                    }}>
-                                        <div className="position-relative">
-                                            <Img src={isActive ? row.activePath: row.path} width={28} height={28} className="mt-1"/>
-                                            <Count>{row.count}</Count>
-                                        </div>
-                                        <Name className="text-overflow">{row.name}</Name>
-                                        <ActiveLine/>
-                                    </Card>
-                                </Col>;
-                            })
-                    }
-                </Row>
-
-            </AcroolSlideCard>,
+        const dataPaginate = data ? arraySplit(data,18) : undefined;
+
+
+        return [
+            ...(previewData ? [
+                <AcroolSlideCard key={'preview_'}>
+                    <Row className="flex-nowrap g-2">
+                        {
+                            previewData
+                                ?.map(row => {
+                                    const isActive = row.id === activeId;
+
+                                    return <Col col={12/6}
+                                        key={`preview_col_${row.id}`}
+                                    >
+                                        <Card $active={row.id === activeId} onClick={() => {
+                                            onSetActiveId(row.id);
+                                        }}>
+                                            <div className="position-relative">
+                                                <Img src={isActive ? row.activePath: row.path} width={28} height={28} className="mt-1"/>
+                                                <Count>{row.count}</Count>
+                                            </div>
+                                            <Name className="text-overflow">{row.name}</Name>
+                                            <ActiveLine/>
+                                        </Card>
+                                    </Col>;
+                                })
+                        }
+                    </Row>
+
+                </AcroolSlideCard>]: []),
             ...dataPaginate?.map((page, idx) => {
                 return <AcroolSlideCard key={`real_${idx}`}>
                     <Row>
@@ -114,9 +108,6 @@ const CategoryPanel = ({
 
             }) ?? []
         ];
-
-        return dataList2;
-
     };
 
 
@@ -223,7 +214,7 @@ const Card = styled.div<{
 
 const CustomAcroolCarousel = styled(AcroolCarousel)`
     .acrool-react-carousel__container{
-        //min-height: 64px;
+        height: 64px;
     }
 `;
 

example/src/components/examples/CategoryPanel/_components/types.ts

@@ -8,5 +8,6 @@ export interface IBallCategoryCarouselData {
 }
 
 export interface IBallCategoryCarouselProps {
+    data: IBallCategoryCarouselData[]
 }
 

example/yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@acrool/js-utils@^3.2.23-alpha.0":
-  version "3.2.23-alpha.0"
-  resolved "https://registry.yarnpkg.com/@acrool/js-utils/-/js-utils-3.2.23-alpha.0.tgz#8cf9417b788f607cd124b23e4d0cc83fb679b6ab"
-  integrity sha512-cssAwTZauip01C2q+MHBuNRVhpGDspI155+VMlNho6dOUiHGxPrPEqvX6KHFpyJpsOVdp2rwh9B4zVj679RwpA==
+"@acrool/js-utils@^3.2.23":
+  version "3.2.23"
+  resolved "https://registry.yarnpkg.com/@acrool/js-utils/-/js-utils-3.2.23.tgz#43bbac5d92cf3318167ba246b57d0a52bfa382ac"
+  integrity sha512-Yy/yXg5+Q8VZC6CFLtJUrUhZltVzcIXAooAWhLJ9ONvWT+AEcy4DDBkv3YZUblOj5vNhE4s4RWt/ukWOB9aEIQ==
   dependencies:
     big.js "^7.0.1"
     dayjs "^1.x"