Merge pull request #34 from imagine10255/main

add example WithAspectRatio, WithStaticHeight, WithSlidesPerViewAuto

.github/workflows/deploy.yml

@@ -36,13 +36,7 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
-      - name: Build Storybook
-        run: yarn build-storybook
-
-      - name: Install Wrangler
-        run: yarn global add wrangler
-
-      - name: Deploy to Cloudflare Pages
-        run: wrangler pages deploy ./storybook-static --project-name=bear-react-carousel-storybook --branch main
+      - name: Build Storybook & Deploy to Cloudflare Pages
+        run: yarn pages:deploy
         env:
-          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+            CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [5.1.3](https://github.com/imagine10255/bear-react-carousel/compare/v5.1.3-alpha.0...v5.1.3) (2024-10-27)
+
 ### [5.1.3-alpha.0](https://github.com/imagine10255/bear-react-carousel/compare/v5.1.2...v5.1.3-alpha.0) (2024-10-10)
 
 ### [5.1.2](https://github.com/imagine10255/bear-react-carousel/compare/v5.1.2-alpha.0...v5.1.2) (2024-09-12)

README.md

@@ -26,6 +26,7 @@
 - [Components](https://bear-react-carousel.pages.dev/docs/category/components)
 - [Features](https://bear-react-carousel.pages.dev/docs/category/feature)
 - [Examples](https://bear-react-carousel.pages.dev/docs/category/examples)
+- [Storybook](https://bear-react-carousel-storybook.pages.dev)
 
 
 ## Features

example/src/components/primary/BearReactCarousel/BearReactCarousel.stories.tsx

@@ -2,12 +2,10 @@ import { Flex } from '@acrool/react-grid';
 import type {Meta, StoryObj} from '@storybook/react';
 import BearCarousel, {
     BearSlideCard,
-    TBearSlideItemDataList,
-    ICarouselState,
-    Controller,
-    TOnSlideChange, elClassName
+    elClassName
 } from 'bear-react-carousel';
 import {baseImage, bearSlideItemData1} from "../../data";
+import {IAspectRatio} from "../../../../../src";
 
 
 const meta = {
@@ -64,11 +62,36 @@ export const WithDebug: Story = {
         isDebug: true,
     }
 };
+export const WithStaticHeight: Story = {
+    args: {
+        slidesPerView: 1,
+        height: '240px',
+    }
+};
+export const WithAspectRatio: Story = {
+    args: {
+        slidesPerView: 1,
+        height: {
+            widthRatio: 2,
+            heightRatio: 1,
+        }
+    }
+};
 export const WithSlidesPerView: Story = {
     args: {
         slidesPerView: 3,
     }
 };
+
+export const WithSlidesPerViewAuto: Story = {
+    args: {
+        slidesPerView: 'auto',
+        data: baseImage.map(row => {
+            return <BearSlideCard key={row.id} bgUrl={row.imageUrl} style={{width: '200px', height: '400px'}}/>;
+        }),
+    }
+};
+
 export const WithSlidesPerGroup: Story = {
     args: {
         isEnableNavButton: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bear-react-carousel",
-  "version": "5.1.3-alpha.0",
+  "version": "5.1.3",
   "description": "Most modern mobile touch slider with hardware accelerated transitions for ReactJS",
   "keywords": [
     "react",

src/BearCarousel.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {booleanToDataAttr, checkDataFormat, checkIsDesktop, isPropsDiff} from './utils';
+import {booleanToDataAttr, isPropsDiff} from './utils';
 import logger from './logger';
 import {IBearCarouselProps} from './types';
 import elClassName from './el-class-name';