remove example only storybook

example/src/components/data.tsx

@@ -2,40 +2,15 @@ import {BearSlideCard, TBearSlideItemDataList } from "bear-react-carousel";
 import {asset} from '../utils';
 import {generatorArray} from "@acrool/js-utils/array";
 
-export const racingImages = [
-    {id: 1, name: 'Strawberry', imageUrl: asset('/sample/food/01.jpg')},
-    {id: 2, name: 'Honey Cranberry Pie', imageUrl: asset('/sample/food/02.jpg')},
-    {id: 3, name: 'Tomato noodles', imageUrl: asset('/sample/food/03.jpg')},
-];
-
-
-
 
 export const baseImage = generatorArray(14, 'cat').map((key, idx) => {
    return {
        id: key,
-       imageUrl: asset(`/sample/${idx + 1}.jpg`)
+       imageUrl: asset(`/images/sample/${idx + 1}.jpg`)
    };
 });
 
 
-export const catImages = [
-    {id: 1, imageUrl: asset('/sample/cat/01.jpg')},
-    {id: 2, imageUrl: asset('/sample/cat/02.jpg')},
-    {id: 3, imageUrl: asset('/sample/cat/03.jpg')},
-    {id: 4, imageUrl: asset('/sample/cat/04.jpg')},
-    {id: 5, imageUrl: asset('/sample/cat/05.jpg')},
-];
-
-
-export const preViewImage = [
-    {id: 1, name: 'CleanShot 2022-10-20 at [email protected]', size: '256.21KB', createdAt: '2022-10-20 12:00:00', imageUrl: 'https://image.kr8851.com/uploads/product-goods/2022/10/26/3910809/8.jpg?v=1026215633'},
-    {id: 2, name: 'CleanShot 2022-10-22 at [email protected]', size: '10.21KB', createdAt: '2022-10-22 23:00:10', imageUrl: asset('/sample/cat/02.jpg')},
-    {id: 3, name: 'CleanShot 2022-10-23 at [email protected]', size: '26.01KB', createdAt: '2022-10-23 11:00:30', imageUrl: asset('/sample/cat/03.jpg')},
-    {id: 4, name: 'CleanShot 2022-10-24 at [email protected]', size: '226.21KB', createdAt: '2022-10-24 22:33:00', imageUrl: asset('/sample/cat/04.jpg')},
-    {id: 5, name: 'CleanShot 2022-10-26 at [email protected]', size: '2MB', createdAt: '2022-10-26 08:12:20', imageUrl: asset('/sample/cat/05.jpg')},
-];
-
 
 export interface IFoodImage {
     id: number,
@@ -73,36 +48,6 @@ export const foodImages: IFoodImage[] = [
 ];
 
 
-export const diffImages = [
-    {id: 1, imageUrl: asset('/sample/cat/vertical-01.jpg')},
-    {id: 2, imageUrl: asset('/sample/cat/01.jpg')},
-    {id: 3, imageUrl: asset('/sample/cat/02.jpg')},
-    {id: 4, imageUrl: asset('/sample/cat/vertical-02.jpg')},
-    {id: 5, imageUrl: asset('/sample/cat/03.jpg')},
-    {id: 6, imageUrl: asset('/sample/cat/vertical-03.jpg')},
-    {id: 7, imageUrl: asset('/sample/cat/04.jpg')},
-    {id: 8, imageUrl: asset('/sample/cat/vertical-04.jpg')},
-    {id: 9, imageUrl: asset('/sample/cat/05.jpg')},
-];
-
-
-
-export interface ICarImage {
-    id: number
-    imageUrl: string
-}
-
-
-export const carImages: ICarImage[] = [
-    {id: 1, imageUrl: asset('/sample/racing/01.webp')},
-    {id: 2, imageUrl: asset('/sample/racing/02.webp')},
-    {id: 3, imageUrl: asset('/sample/racing/03.webp')},
-    {id: 4, imageUrl: asset('/sample/racing/04.webp')},
-    {id: 5, imageUrl: asset('/sample/racing/05.webp')},
-    {id: 6, imageUrl: asset('/sample/racing/06.webp')},
-];
-
-
 
 
 

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

@@ -0,0 +1,40 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import Effect from "./Effect";
+import Effect2 from "./Effect2";
+
+
+const meta = {
+    title: 'Examples/Effect',
+    component: Effect,
+    parameters: {
+        layout: 'centered',
+        actions: {argTypesRegex: '^on.*'},
+        docs: {
+            description: {
+                component: 'Carousel item component'
+            },
+        },
+    },
+    argTypes: {},
+    args: {},
+} satisfies Meta<typeof Effect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+
+
+export const Primary: Story = {
+    args: {
+    }
+};
+
+
+
+export const case2: Story = {
+    args: {},
+    render: function Render(args) {
+        return <Effect2/>;
+    },
+};

example2/src/components/organize/Effect/Effect.tsx → example/src/components/examples/Effect/Effect.tsx

@@ -7,7 +7,7 @@ import BearCarousel, {
     ICarouselState,
     Controller, moveEffectFn, TMoveEffectFn
 } from 'bear-react-carousel';
-import {baseImage as images} from '@/config/images';
+import {baseImage} from "../../data";
 
 
 
@@ -25,15 +25,8 @@ function Effect() {
 
 
     // 輪播項目1
-    const bearSlideItemData1: TBearSlideItemDataList = images.map(row => {
-        return {
-            key: row.id,
-            children: <BearSlideCard>
-                <div className="h-100 d-flex"
-                    style={{fontSize: '40px', backgroundColor: row.color}}
-                />
-            </BearSlideCard>
-        };
+    const bearSlideItemData1: TBearSlideItemDataList = baseImage.map(row => {
+        return <BearSlideCard key={row.id} bgUrl={row.imageUrl} style={{width: '200px', height: '200px'}}/>;
     });
 
 

example2/src/components/organize/Effect/Effect2.tsx → example/src/components/examples/Effect/Effect2.tsx

@@ -7,23 +7,17 @@ import BearCarousel, {
     ICarouselState,
     Controller, moveEffectFn, TMoveEffectFn
 } from 'bear-react-carousel';
-import {baseImage as images} from '@/config/images';
+import {baseImage} from "../../data";
 
 
 
 
 
 
 // 輪播項目1
-const bearSlideItemData1: TBearSlideItemDataList = images.map(row => {
-    return {
-        key: row.id,
-        children: <BearSlideCard>
-            <div className="h-100 d-flex"
-                style={{fontSize: '40px', backgroundColor: row.color}}
-            />
-        </BearSlideCard>
-    };
+const bearSlideItemData1: TBearSlideItemDataList = baseImage.map(row => {
+            return <BearSlideCard key={row.id} bgUrl={row.imageUrl} style={{width: '200px', height: '200px'}}/>;
+
 });
 
 
@@ -37,19 +31,6 @@ function Effect2() {
     const [slidePreview, setSlidePreview] = useState(1);
 
 
-    // 輪播項目1
-    const bearSlideItemData1: TBearSlideItemDataList = images.map(row => {
-        return {
-            key: row.id,
-            children: <BearSlideCard>
-                <div className="h-100 d-flex"
-                    style={{fontSize: '40px', backgroundColor: row.color}}
-                />
-            </BearSlideCard>
-        };
-    });
-
-
     // const handleOnPercentage: IBreakpointSetting['effectFn'] = (el, percentage) => {
     //     el.style.transform = `translate(0px, ${-50 * percentage}px)`;
     //     el.style.transition = 'none';

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

@@ -0,0 +1,30 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import JuejinVip from "./JuejinVip";
+
+
+const meta = {
+    title: 'Examples/JuejinVip',
+    component: JuejinVip,
+    parameters: {
+        layout: 'centered',
+        actions: {argTypesRegex: '^on.*'},
+        docs: {
+            description: {
+                component: 'Carousel item component'
+            },
+        },
+    },
+    argTypes: {},
+    args: {},
+} satisfies Meta<typeof JuejinVip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+
+
+export const Primary: Story = {
+    args: {
+    }
+};

example2/src/components/organize/JuejinVip/JuejinVip.tsx → example/src/components/examples/JuejinVip/JuejinVip.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {Grid, Flex, minmax} from 'bear-react-grid';
+import {Grid, Flex, minmax} from '@acrool/react-grid';
 import Icons from './_components/Icons';
 import BearCarousel, {
     TMoveEffectFn,
@@ -284,7 +284,7 @@ export default JuejinVip;
 
 const MetaCard = styled.div`
     text-align: center;
-  padding-top: 15px;
+  padding-top: 10px;
 `;
 
 
@@ -304,6 +304,7 @@ const MetaLv = styled.div`
     font-size: 12px;
   font-weight: 700;
   margin-bottom: 5px;
+    color: #fff;
 `;
 
 const Do = styled.div`
@@ -477,6 +478,7 @@ const CardRoot = styled(Grid)`
   //height: 400px;
   width: 100%;
   position: relative;
+    user-select: none;
 
 
 `;

example2/src/components/organize/JuejinVip/_components/Avatar.tsx → example/src/components/examples/JuejinVip/_components/Avatar.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import {Grid, Flex, Container, auto} from 'bear-react-grid';
+import {Grid, Flex, Container, auto, FCProps} from '@acrool/react-grid';
 import React from 'react';
-import {asset} from '@/utils';
+import {asset} from '../../../../utils';
 
 interface IProps extends FCProps {
 
@@ -13,7 +13,7 @@ const Avatar = ({
     return <AvatarRoot>
         <Container className="h-inherit">
             <Grid col={auto(2)} className="justify-content-start h-inherit gap-2">
-                <img src={asset('/images/avatar.jpg')} className="rounded-circle h-inherit" alt="Bruce Lee"/>
+                <img src={asset('/images/juejin_vip/avatar.jpg')} className="rounded-circle h-inherit" alt="Bruce Lee"/>
                 <Flex className="flex-column justify-content-center text-left gap-2">
                     <Flex className="gap-2">
                         <Name>Imagine Chiu</Name>
@@ -31,6 +31,7 @@ export default Avatar;
 
 const Level = styled.div`
   background-color: #005fbd;
+    color: #fff;
   font-size: 12px;
   font-weight: 600;
   border-radius: 4px;

example2/src/components/organize/JuejinVip/_components/LvAboutWrapper.tsx → example/src/components/examples/JuejinVip/_components/LvAboutWrapper.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import {Container, Grid} from 'bear-react-grid';
+import {Container, Grid, FCProps} from '@acrool/react-grid';
 
 interface IProps extends FCProps {
     level: number
@@ -69,8 +69,9 @@ const Title = styled.div`
 
 
 const Item = styled(Grid)`
-  filter: grayscale(1);
+    filter: grayscale(1);
     justify-self: center;
+    color: #fff;
 
     :nth-child(1){
       filter: grayscale(0);

example2/src/components/organize/JuejinVip/_components/NavWrapper.tsx → example/src/components/examples/JuejinVip/_components/NavWrapper.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import {Container, Grid} from 'bear-react-grid';
+import {Container, Grid} from '@acrool/react-grid';
 import Icons from './Icons';
 import React from 'react';
 

example2/src/components/organize/JuejinVip/_components/Phone.tsx → example/src/components/examples/JuejinVip/_components/Phone.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import {FCChildrenProps, media} from 'bear-react-grid';
+import {FCChildrenProps, media} from '@acrool/react-grid';
 
 interface IProps extends FCChildrenProps {
 

example/src/components/examples/Modal/Effect.stories.tsx

@@ -0,0 +1,31 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import Modal from "./Modal";
+
+
+const meta = {
+    title: 'Examples/Modal',
+    component: Modal,
+    parameters: {
+        layout: 'centered',
+        actions: {argTypesRegex: '^on.*'},
+        docs: {
+            description: {
+                component: 'Carousel item component'
+            },
+        },
+    },
+    argTypes: {},
+    args: {},
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+
+
+export const Primary: Story = {
+    args: {
+    }
+};
+