Merge branch 'storybook' into dev

Merge changes made for deployment

Author: Savina Shen (Manpower Services Taiwan Co Ltd)

.github/workflows/deploy.yml

@@ -0,0 +1,37 @@
+name: Deploy Storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - storybook
+
+permissions:
+  contents: write
+  pages: write
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.16.0'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build Storybook
+        env:
+          STORYBOOK_AZURE_MAPS_KEY: ${{ secrets.STORYBOOK_AZURE_MAPS_KEY }}
+        run: npm run build-storybook
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static

.storybook/main.ts

@@ -26,6 +26,6 @@ const config: StorybookConfig = {
     name: '@storybook/react-webpack5',
     options: {},
   },
-  staticDirs: ['..\\public'],
+  staticDirs: ['../public'],
 };
 export default config;

src/stories/BasicUsage/MapControls/MapControl.mdx

@@ -77,7 +77,7 @@ import {
         {
             controlName: 'CompassControl',
             controlOptions: { rotationDegreesDelta: 10, style: 'dark' },
-            options: { position: 'top-left' } as ControlOptions,
+            options: { position: 'bottom-right' } as ControlOptions,
         },
       ]}
     />
@@ -129,7 +129,7 @@ import {
         {
             controlName: 'TrafficControl',
             controlOptions: { incidents: true },
-            options: { position: 'top-right' } as ControlOptions,
+            options: { position: 'top-left' } as ControlOptions,
         },
         {
             controlName: 'TrafficLegendControl',

src/stories/DataVisualization/Datavisualization.mdx

@@ -1,17 +1,12 @@
 import { Meta, Source } from '@storybook/blocks';
-import BubbleLayer from './BubbleLayer/BubbleLayer';
-import * as BubbleLayerStories from './BubbleLayer/BubbleLayer.stories';
+import ClusterAggregates from './ClusterAggregates/ClusterAggregates'
 
 <Meta title="Data Visualization/Introduction"/>
 
-
 # Data Visualization
 **react-azure-maps** provides a set of components to help you visualize data on a map like this: <br/>
 
-{/* <BubbleLayer/> */}
-
-<Canvas of={BubbleLayerStories.Example} sourceState="none" />
-
+<ClusterAggregates showBubbles showNumbers/>
 
 We will need 2 kinds of components to visualize data on a map:
 1. `<AzureMapDataSourceProvider>` : to provide your data to the map.

src/stories/DataVisualization/PolygonLayer/PolygonLayer.stories.ts

@@ -36,8 +36,6 @@ const PolygonLayer = () => {
     </AzureMapsProvider>
   );
 };
-
-export default PolygonLayer;
 `,
     },
   },