Merge pull request #99 from Chia-Chi-Shen/storybook

Merge Storybook version 1

Author: yulinscottkang

.eslintrc.js

@@ -0,0 +1,33 @@
+name: Deploy Storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - storybook
+
+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

.github/workflows/deploy.yml

@@ -5,17 +5,16 @@
 /.yalc
 /.pnp
 .pnp.js
-yalc.lock
 
 # testing
 /coverage
-/src/key.ts
 
 # production
 /build
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -24,3 +23,5 @@ yalc.lock
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*storybook.log

.gitignore

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+  brandTitle: 'React Azure Maps',
+  brandUrl: 'https://github.com/Azure/react-azure-maps',
+  brandImage: 'logo1.png',
+  brandTarget: '_blank',
+});

.storybook/AZMtheme.js

@@ -0,0 +1,31 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        actions: false,
+        interactions: false,
+      },
+    },
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        loaderOptions: {
+          parser: 'typescript',
+        },
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  staticDirs: ['../public'],
+};
+export default config;

.storybook/main.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import Theme from './AZMtheme';
+
+addons.setConfig({
+  theme: Theme,
+});

.storybook/manager.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+import 'azure-maps-control/dist/atlas.min.css';
+import '../src/Storybook.css';
+import { Story, Canvas } from '@storybook/addon-docs';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    options: {
+      storySort: {
+        order: [
+          'Getting Started',
+          'Basic Usage',
+          ['*', 'Map Reference'],
+          'Map Annotations',
+          '*',
+          'Data Visualization',
+          ['Introduction'],
+        ],
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/preview.tsx

@@ -1,96 +1,5 @@
-## React Azure Maps Playground
+## React Azure Maps Storybook
 
-This project is community-driven initiative originally created by amazing [@psrednicki](https://github.com/psrednicki), [@msasinowski](https://github.com/msasinowski) and [@tbajda](https://github.com/tbajda) and is now maintained by the Azure Maps team.
-
-- How to link local package version:
-  - run `yarn watch` in `azure-maps-react`
-  - run `yarn link` in `azure-maps-react`
-  - go to `azure-maps-playground` and run `yarn link "react-azure-maps"`
-
-- How to avoid "Invalid Hook call" caused by multiple React instances
-  - go to `azure-maps-playground` and run
-    ```
-    cd node_modules/react
-    yarn link
-    ```
-  - go to `azure-maps-react` and run `yarn link react`
-
-### Subscription key
-
-Please remember to create file and add key to `/src/key.ts`
-
-`export const key = '<Your Subcription Key>'`
-
-## Creators ✨
-
-<!-- CREATORS:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tr>
-    <td style="text-align: center; vertical-align: middle;">
-      <a href="https://github.com/psrednicki"
-        ><img
-          src="https://avatars2.githubusercontent.com/u/41010528?v=4"
-          width="100px;"
-          alt=""
-        /><br /><sub><b>psrednicki</b></sub></a
-      ><br />
-    <div>
-      <a
-        href="https://pl.linkedin.com/in/patryk-%C5%9Brednicki-718204187/"
-        title="LinkedIn"
-        style="text-align:center"
-        ><img
-          src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
-          width="24px;"
-          alt=""
-      /></a>
-    </div>
-    </td>
-    <td style="text-align: center; vertical-align: middle;">
-      <a href="https://github.com/msasinowski"
-        ><img
-          src="https://avatars2.githubusercontent.com/u/38035075?v=4"
-          width="100px;"
-          alt=""
-        /><br /><sub><b>msasinowski</b></sub></a
-      >
-    <div>
-      <a
-        href="https://www.linkedin.com/in/maciej-sasinowski-92076815a/"
-        title="LinkedIn"
-        style="text-align:center"
-        ><img
-          src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
-          width="24px;"
-          alt=""
-      /></a>
-    </div>
-    </td>
-    <td style="text-align: center; vertical-align: middle;">
-      <a href="https://github.com/tbajda"
-        ><img
-          src="https://avatars2.githubusercontent.com/u/27700326?v=4"
-          width="100px;"
-          alt=""
-        /><br /><sub><b>tbajda</b></sub></a
-      >
-    <div>
-      <a
-        href="https://www.linkedin.com/in/tomasz-bajda-ab4468165/"
-        title="LinkedIn"
-        ><img
-          src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
-          width="24px;"
-          alt=""
-      /></a>
-    </div>
-    </td>
-  </tr>
-</table>
-
-<!-- markdownlint-enable -->
-<!-- prettier-ignore-end -->
-
-<!-- CREATORS:END -->
+The React Azure Map Storybook provides a hands-on way to explore and interact with **react-azure-maps**. <br/>
+With Storybook, You can try adjusting various settings and see how these components work in real-time. <br/>
+This helps you understand the practical applications of the package and how to integrate Azure Maps into your React projects effectively.

README.md

@@ -0,0 +1,6 @@
+[.ShellClassInfo]
+IconResource=C:\Windows\System32\SHELL32.dll,41
+[ViewState]
+Mode=
+Vid=
+FolderType=Generic