Merge pull request #3 from Chia-Chi-Shen/dev

Chia-Chi-Shen · web-flow · commit d676013e2bef · 2024-08-14T16:07:09.000+08:00
remove sb style in example components
diff --git a/src/Storybook.css b/src/Storybook.css
@@ -2,7 +2,9 @@
   width: 700px;
   height: 300px;
 }
-
-.atlas-map .azure-map-copyright a {
-  font-size: 9px;
+@media screen and (max-width: 700px) {
+  .defaultMap {
+    width: 90vw;
+    height: 200px;
+  }
 }
diff --git a/src/stories/BasicUsage/MapControls/MapControl.mdx b/src/stories/BasicUsage/MapControls/MapControl.mdx
@@ -9,6 +9,7 @@ These examples show all the map navigation controls on the map and how to custom
 
 ## Style control
 
+
 <MapControl controls={[controls[0]]}/>
 <Source code={`
 import {
diff --git a/src/stories/BasicUsage/MapControls/MapControl.tsx b/src/stories/BasicUsage/MapControls/MapControl.tsx
@@ -1,16 +1,6 @@
-import React from 'react';
-import {
-  IAzureMapControls,
-  ControlOptions,
-  IAzureMapOptions,
-  AzureMapsProvider,
-  AzureMap,
-  useAzureMaps,
-} from 'react-azure-maps';
+import { IAzureMapControls, ControlOptions } from 'react-azure-maps';
 import DefaultMap from '../../DefaultMap/DefaultMap';
-import atlas, { ControlPosition } from 'azure-maps-control';
 import { mapOptions } from '../../../key';
-import { useEffect, useState } from 'react';
 
 export interface ControlProps {
   controls: IAzureMapControls[];
diff --git a/src/stories/BasicUsage/MapRef/MapRef.mdx b/src/stories/BasicUsage/MapRef/MapRef.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Meta, Source } from '@storybook/blocks';
 import { AzureMapsProvider } from 'react-azure-maps';
 import SetStyle from './SetStyle';
 import SetCenter from './SetCenter';
diff --git a/src/stories/BasicUsage/MapRef/SetCenter.tsx b/src/stories/BasicUsage/MapRef/SetCenter.tsx
@@ -18,7 +18,7 @@ const SetCenter = () => {
       <button style={{ color: 'dodgerblue', marginBottom: '10px' }} onClick={() => setMapCenter(getRandomPosition())}>
         Change Map Center
       </button>
-      <div className="defaultMap">
+      <div className="defaultMap sb-unstyled">
         <AzureMap options={mapOptions} />
       </div>
     </>
diff --git a/src/stories/BasicUsage/MapRef/SetStyle.tsx b/src/stories/BasicUsage/MapRef/SetStyle.tsx
@@ -25,7 +25,7 @@ const SetStyle = () => {
       >
         Toggle Tile Boundaries
       </button>
-      <div className="defaultMap">
+      <div className="defaultMap sb-unstyled">
         <AzureMap options={mapOptions} />
       </div>
     </>
diff --git a/src/stories/BasicUsage/MapStyles/MapStyles.mdx b/src/stories/BasicUsage/MapStyles/MapStyles.mdx
@@ -1,4 +1,4 @@
-import { Meta, Source } from '@storybook/blocks';
+import { Source, Meta } from '@storybook/blocks';
 
 <Meta title="Basic Usage/Map Styles"/>
 
diff --git a/src/stories/BasicUsage/MapStyles/MapStyles.tsx b/src/stories/BasicUsage/MapStyles/MapStyles.tsx
@@ -10,7 +10,7 @@ export interface MapStylesProps {
 
 const MapStyles = ({ showLabels, showLogo, renderWorldCopies, showFeedbackLink }: MapStylesProps) => {
   return (
-    <div className="defaultMap">
+    <div className="defaultMap sb-unstyled">
       <AzureMapsProvider>
         <AzureMap
           options={mapOptions}
diff --git a/src/stories/DataVisualization/BubbleLayer/BubbleLayer.mdx b/src/stories/DataVisualization/BubbleLayer/BubbleLayer.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Meta, Source } from '@storybook/blocks';
 
 import * as BubbleLayerStories from './BubbleLayer.stories';
 
@@ -14,8 +14,6 @@ For more available properties, see the documentation [BubbleLayerOptions](https:
 
 <BubbleLayer/>
 
-{/* <Canvas of={BubbleLayerStories.Example} sourceState="none" /> */}
-
 <Source code={`
 <AzureMapLayerProvider
     type="BubbleLayer"
diff --git a/src/stories/DataVisualization/BubbleLayer/BubbleLayer.tsx b/src/stories/DataVisualization/BubbleLayer/BubbleLayer.tsx
@@ -8,7 +8,7 @@ const collection = generateRandomPoints();
 const BubbleLayer = ({ radius, color, opacity, strokeColor, strokeWidth, strokeOpacity, blur }: BubbleLayerOptions) => {
   return (
     <AzureMapsProvider>
-      <div className="defaultMap">
+      <div className="defaultMap sb-unstyled">
         <AzureMap options={mapOptions}>
           <AzureMapDataSourceProvider id="BubbleLayer DataSourceProvider" collection={collection}>
             <AzureMapLayerProvider
diff --git a/src/stories/DataVisualization/ClusterAggregates/ClusterAggregates.tsx b/src/stories/DataVisualization/ClusterAggregates/ClusterAggregates.tsx
@@ -78,7 +78,7 @@ const symbolLayer = (
 const ClusterAggregates = ({ showBubbles, showNumbers }: ClusterAggregatesProps) => {
   return (
     <AzureMapsProvider>
-      <div className="defaultMap">
+      <div className="defaultMap sb-unstyled">
         <AzureMap options={option}>
           <AzureMapDataSourceProvider
             id="ClusterAggregates DataSourceProvider"
diff --git a/src/stories/DataVisualization/Datavisualization.mdx b/src/stories/DataVisualization/Datavisualization.mdx
@@ -1,13 +1,17 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Meta, Source } from '@storybook/blocks';
 import BubbleLayer from './BubbleLayer/BubbleLayer';
+import * as BubbleLayerStories from './BubbleLayer/BubbleLayer.stories';
 
 <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/>
+{/* <BubbleLayer/> */}
+
+<Canvas of={BubbleLayerStories.Example} sourceState="none" />
+
 
 We will need 2 kinds of components to visualize data on a map:
 1. `<AzureMapDataSourceProvider>` : to provide your data to the map.
diff --git a/src/stories/DataVisualization/HeatMapLayer/HeatMapLayer.mdx b/src/stories/DataVisualization/HeatMapLayer/HeatMapLayer.mdx
@@ -1,4 +1,4 @@
-import { Meta, Source } from '@storybook/blocks';
+import { Source, Meta } from '@storybook/blocks';
 
 import HeatMapLayer from './HeatMapLayer';
 
@@ -75,7 +75,6 @@ In our example, we set the weight based on "mag" property of the earthquake data
                 10,
                 1,
             ]}/>
-/>
 
 <Source code={`
 <AzureMapLayerProvider
diff --git a/src/stories/DataVisualization/HeatMapLayer/HeatMapLayer.tsx b/src/stories/DataVisualization/HeatMapLayer/HeatMapLayer.tsx
@@ -22,7 +22,7 @@ const magWeight = [
 const HeatMapLayer = ({ radius, opacity, intensity, weight, color }: HeatMapLayerProps) => {
   return (
     <AzureMapsProvider>
-      <div className="defaultMap">
+      <div className="defaultMap sb-unstyled">
         <AzureMap options={mapOptions}>
           <AzureMapDataSourceProvider
             id="LineLayer DataSourceProvider"
diff --git a/src/stories/DataVisualization/LineLayer/LineLayer.mdx b/src/stories/DataVisualization/LineLayer/LineLayer.mdx
@@ -1,4 +1,4 @@
-import { Meta, Source } from '@storybook/blocks';
+import { Source, Meta } from '@storybook/blocks';
 
 import LineLayer from './LineLayer';
 
diff --git a/src/stories/DataVisualization/LineLayer/LineLayer.tsx b/src/stories/DataVisualization/LineLayer/LineLayer.tsx
@@ -13,7 +13,7 @@ const collection = new atlas.data.LineString([
 const LineLayer = ({ strokeColor, strokeWidth, strokeOpacity, blur, lineCap, translate }: LineLayerOptions) => {
   return (
     <AzureMapsProvider>
-      <div className="defaultMap">
+      <div className="defaultMap sb-unstyled">
         <AzureMap options={{ ...mapOptions, center: [-105.20507, 39.77476], zoom: 1.4 }}>
           <AzureMapDataSourceProvider id="LineLayer DataSourceProvider" collection={collection}>
             <AzureMapLayerProvider
diff --git a/src/stories/DataVisualization/PolygonLayer/PolygonLayer.tsx b/src/stories/DataVisualization/PolygonLayer/PolygonLayer.tsx
@@ -16,7 +16,7 @@ const collection = new atlas.data.Polygon([
 const PolygonLayer = ({ fillColor, fillOpacity }: PolygonLayerOptions) => {
   return (
     <AzureMapsProvider>
-      <div className="defaultMap">
+      <div className="defaultMap sb-unstyled">
         <AzureMap options={{ ...mapOptions, center: [12, 39], zoom: 0 }}>
           <AzureMapDataSourceProvider id="PolygonLayer DataSourceProvider" collection={collection}>
             <AzureMapLayerProvider type="PolygonLayer" options={{ fillColor, fillOpacity }} />
diff --git a/src/stories/DataVisualization/SymbolLayer/SymbolLayer.tsx b/src/stories/DataVisualization/SymbolLayer/SymbolLayer.tsx
@@ -32,7 +32,7 @@ const SymbolLayer = ({
 }: SymbolLayerProps) => {
   return (
     <AzureMapsProvider>
-      <div className="defaultMap">
+      <div className="defaultMap sb-unstyled">
         <AzureMap options={mapOptions}>
           <AzureMapDataSourceProvider id="SymbolLayer DataSourceProvider" collection={collection}>
             <AzureMapLayerProvider
diff --git a/src/stories/DefaultMap/DefaultMap.tsx b/src/stories/DefaultMap/DefaultMap.tsx
@@ -1,27 +1,16 @@
-import React from 'react';
 import { AzureMap, AzureMapsProvider, IAzureMapOptions, IAzureMapControls, AuthenticationType } from 'react-azure-maps';
-// import { AuthenticationType } from 'azure-maps-control';
-import { key } from '../../key';
-
-const authOption: IAzureMapOptions = {
-  authOptions: {
-    authType: AuthenticationType.subscriptionKey,
-    subscriptionKey: key,
-  },
-};
+import { mapOptions } from '../../key';
 
 export interface DefaultMapProps {
   options?: IAzureMapOptions;
   controls?: IAzureMapControls[];
 }
 
 const DefaultMap = ({ options, controls }: DefaultMapProps) => {
-  // console.log(process.env.REACT_APP_AZURE_MAPS_KEY)
-
   return (
     <AzureMapsProvider>
-      <div className="defaultMap">
-        <AzureMap options={{ ...options, ...authOption }} controls={controls} />
+      <div className="defaultMap sb-unstyled">
+        <AzureMap options={{ ...options, ...mapOptions }} controls={controls} />
       </div>
     </AzureMapsProvider>
   );
diff --git a/src/stories/DefaultMap/GettingStarted.mdx b/src/stories/DefaultMap/GettingStarted.mdx
@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
+import { Meta, Source } from '@storybook/addon-docs/blocks';
 
 import DefaultMap from './DefaultMap';
 
diff --git a/src/stories/MapAnnotations/HtmlMarker/HtmlMarker.mdx b/src/stories/MapAnnotations/HtmlMarker/HtmlMarker.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Meta, Source } from '@storybook/blocks';
 
 import * as HtmlMarkerStories from './HtmlMarker.stories';
 
diff --git a/src/stories/MapAnnotations/HtmlMarker/HtmlMarker.tsx b/src/stories/MapAnnotations/HtmlMarker/HtmlMarker.tsx
@@ -5,7 +5,7 @@ import { mapOptions } from '../../../key';
 const HtmlMarker = ({ color, text, position }: HtmlMarkerOptions) => {
   return (
     <AzureMapsProvider>
-      <div className="defaultMap">
+      <div className="defaultMap sb-unstyled">
         <AzureMap options={mapOptions}>
           <AzureMapHtmlMarker
             //   key={rendId}
diff --git a/src/stories/MapAnnotations/Popup/Popup.mdx b/src/stories/MapAnnotations/Popup/Popup.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Meta, Source } from '@storybook/blocks';
 
 import * as PopupStories from './Popup.stories';
 
diff --git a/src/stories/MapAnnotations/Popup/Popup.tsx b/src/stories/MapAnnotations/Popup/Popup.tsx
@@ -5,7 +5,7 @@ const Popup = ({ isVisible, options }: IAzureMapPopup) => {
   // use position as argument would be better
   return (
     <AzureMapsProvider>
-      <div className="defaultMap">
+      <div className="defaultMap sb-unstyled">
         <AzureMap options={mapOptions}>
           <AzureMapPopup
             isVisible={isVisible}

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,9 @@`
`2`	`2`	`width: 700px;`
`3`	`3`	`height: 300px;`
`4`	`4`	`}`
`5`		`-`
`6`		`-.atlas-map .azure-map-copyright a {`
`7`		`- font-size: 9px;`
	`5`	`+@media screen and (max-width: 700px) {`
	`6`	`+ .defaultMap {`
	`7`	`+ width: 90vw;`
	`8`	`+ height: 200px;`
	`9`	`+ }`
`8`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Canvas, Meta, Source } from '@storybook/blocks';`
	`1`	`+import { Meta, Source } from '@storybook/blocks';`
`2`	`2`	`import { AzureMapsProvider } from 'react-azure-maps';`
`3`	`3`	`import SetStyle from './SetStyle';`
`4`	`4`	`import SetCenter from './SetCenter';`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ const SetStyle = () => {`
`25`	`25`	`>`
`26`	`26`	`Toggle Tile Boundaries`
`27`	`27`	`</button>`
`28`		`- <div className="defaultMap">`
	`28`	`+ <div className="defaultMap sb-unstyled">`
`29`	`29`	`<AzureMap options={mapOptions} />`
`30`	`30`	`</div>`
`31`	`31`	`</>`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Meta, Source } from '@storybook/blocks';`
	`1`	`+import { Source, Meta } from '@storybook/blocks';`
`2`	`2`
`3`	`3`	`<Meta title="Basic Usage/Map Styles"/>`
`4`	`4`