Merge pull request #74 from christopherpickering/dev

.eslintrc.json

@@ -6,6 +6,7 @@
   "extends": [
     "plugin:react/recommended",
     "airbnb",
+    "plugin:storybook/recommended",
     "plugin:storybook/recommended"
   ],
   "globals": {

.github/workflows/docs.yaml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v3

.github/workflows/lint.yaml

@@ -6,7 +6,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v3

.github/workflows/release.yaml

@@ -10,7 +10,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
           persist-credentials: false

.storybook/main.js

@@ -1,35 +1,21 @@
-const path = require('path');
-module.exports = {
-  stories: ['./**/*.stories.mdx'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', {
-    name: '@storybook/addon-postcss',
-    options: {
-      postcssLoaderOptions: {
-        implementation: require('postcss')
-      }
-    }
-  }, '@storybook/addon-docs', '@storybook/addon-mdx-gfm'],
-  webpackFinal: config => {
-    config.module.rules.push({
-      test: /\.(js|jsx)$/,
-      loader: require.resolve('babel-loader'),
-      options: {
-        presets: ['@babel/preset-env', '@babel/preset-react'],
-        plugins: ['@babel/plugin-proposal-nullish-coalescing-operator']
-      }
-    });
-    config.module.rules.push({
-      test: /\.scss$/,
-      use: ['style-loader', 'css-loader?modules&importLoaders', 'sass-loader'],
-      include: path.resolve(__dirname, '../')
-    });
-    return config;
-  },
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: [
+    './stories/**/*.mdx',
+    './stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
   framework: {
     name: '@storybook/react-webpack5',
-    options: {}
+    options: {},
   },
   docs: {
-    autodocs: true
-  }
-};
+    autodocs: 'tag',
+  },
+};
+export default config;

.storybook/preview.js

@@ -1,9 +1,20 @@
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+/** @type { import('@storybook/react').Preview } */
+
+import '../node_modules/leaflet/dist/leaflet.css';
+import '../node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css';
+import '../node_modules/leaflet.markercluster/dist/MarkerCluster.css';
+import './stories/examples/styles.css';
+
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
     },
   },
 };
+
+export default preview;

.storybook/doc.stories.mdx → .storybook/stories/Configure.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Meta, Story } from "@storybook/blocks";
 
 import {
   BasicExample,
@@ -9,7 +9,7 @@ import {
   MarkerTooltip,
 } from './examples';
 
-<Meta title="React Leaflet MarkerCluster" />
+<Meta title="Documentation" />
 
 # Basic example
 
@@ -41,10 +41,9 @@ import MarkerClusterGroup from 'react-leaflet-markercluster';
 
 If you would like to pass some props to the Marker, please use [react-leaflet Marker component API](https://react-leaflet.js.org/docs/en/components.html#marker).
 
-<Story name="Basic example">{BasicExample}</Story>
+<BasicExample />
 
 [GitHub source code](https://github.com/christopherpickering/react-leaflet-markercluster/blob/master/.storybook/examples/basic.js)
-
 ---
 
 # Event listeners
@@ -100,7 +99,7 @@ import MarkerClusterGroup from 'react-leaflet-markercluster';
 </MapContainer>;
  ```
 
-<Story name="Event listeners">{EventListeners}</Story>
+<EventListeners />
 
 [GitHub source code](https://github.com/christopherpickering/react-leaflet-markercluster/blob/master/.storybook/examples/event-listeners.js)
 
@@ -173,7 +172,7 @@ And do not forget about styles for your class:
 
 If you would like to pass some props to the Cluster, please check [List of all Leaflet.markercluster options](https://github.com/Leaflet/Leaflet.markercluster#all-options)
 
-<Story name="Cluster custom icon">{MarkerClusterOptions}</Story>
+<MarkerClusterOptions />
 
 
 [GitHub source code](https://github.com/christopherpickering/react-leaflet-markercluster/blob/master/.storybook/examples/marker-cluster-options.js)
@@ -231,7 +230,7 @@ const redMarker = L.icon({
 
 If you would like to pass some props to the Cluster, please check [List of all Leaflet Marker options](http://leafletjs.com/reference.html#marker-option)
 
-<Story name="Marker icon and title">{MarkerOptions}</Story>
+<MarkerOptions />
 
 [GitHub source code](https://github.com/christopherpickering/react-leaflet-markercluster/blob/master/.storybook/examples/marker-options.js)
 
@@ -298,7 +297,7 @@ const redMarker = L.icon({
 
 If you would like to pass some props to the Cluster, please check [List of all Leaflet Popup options](http://leafletjs.com/reference.html#popup-option)
 
-<Story name="Marker popup">{MarkerPopup}</Story>
+<MarkerPopup />
 
 [GitHub source code](https://github.com/christopherpickering/react-leaflet-markercluster/blob/master/.storybook/examples/marker-popup.js)
 
@@ -352,6 +351,6 @@ import MarkerClusterGroup from 'react-leaflet-markercluster';
 
 If you would like to pass some props to the Cluster, please check [List of all Leaflet Tooltip options](http://leafletjs.com/reference.html#tooltip-option)
 
-<Story name="Marker tooltip">{MarkerTooltip}</Story>
+<MarkerTooltip />
 
 [GitHub source code](https://github.com/christopherpickering/react-leaflet-markercluster/blob/master/.storybook/examples/marker-tooltip.js)

.storybook/examples/basic.js → .storybook/stories/examples/basic.js

@@ -2,13 +2,10 @@ import React from 'react';
 
 import { MapContainer, TileLayer, Marker } from 'react-leaflet';
 
-import MarkerClusterGroup from './../../src/react-leaflet-markercluster';
+import MarkerClusterGroup from './../../../src/react-leaflet-markercluster';
 
 import { MAP_ZOOM, MAP_MAX_ZOOM, MAP_CENTER_COORDINATES } from './constants';
 
-import '../../dist/styles.min.css';
-import './styles.css';
-
 const BasicExample = () => (
   <MapContainer
     className="markercluster-map"

.storybook/examples/event-listeners.js → .storybook/stories/examples/event-listeners.js

@@ -2,14 +2,11 @@ import React from 'react';
 
 import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
 
-import MarkerClusterGroup from './../../src/react-leaflet-markercluster';
+import MarkerClusterGroup from './../../../src/react-leaflet-markercluster';
 
 import { logAction } from './helpers';
 import { MAP_ZOOM, MAP_MAX_ZOOM, MAP_CENTER_COORDINATES } from './constants';
 
-import '../../dist/styles.min.css';
-import './styles.css';
-
 const EventListeners = () => (
   <MapContainer
     className="markercluster-map"

.storybook/examples/marker-cluster-options.js → .storybook/stories/examples/marker-cluster-options.js

@@ -3,13 +3,10 @@ import React from 'react';
 import L from 'leaflet';
 import { MapContainer, TileLayer, Marker } from 'react-leaflet';
 
-import MarkerClusterGroup from './../../src/react-leaflet-markercluster';
+import MarkerClusterGroup from './../../../src/react-leaflet-markercluster';
 
 import { MAP_ZOOM, MAP_MAX_ZOOM, MAP_CENTER_COORDINATES } from './constants';
 
-import '../../dist/styles.min.css';
-import './styles.css';
-
 // Function for creating custom icon for cluster group
 // https://github.com/Leaflet/Leaflet.markercluster#customising-the-clustered-markers
 // NOTE: iconCreateFunction is running by leaflet, which is not support ES6 arrow func syntax

.storybook/examples/marker-options.js → .storybook/stories/examples/marker-options.js

@@ -3,14 +3,11 @@ import React from 'react';
 import L from 'leaflet';
 import { MapContainer, TileLayer, Marker } from 'react-leaflet';
 
-import MarkerClusterGroup from './../../src/react-leaflet-markercluster';
+import MarkerClusterGroup from './../../../src/react-leaflet-markercluster';
 
 import redFilledMarker from './icons/red-filled-marker.svg';
 import { MAP_ZOOM, MAP_MAX_ZOOM, MAP_CENTER_COORDINATES } from './constants';
 
-import '../../dist/styles.min.css';
-import './styles.css';
-
 // Create marker icon according to the official leaflet documentation
 const redMarker = L.icon({
   iconUrl: redFilledMarker,

.storybook/examples/marker-popup.js → .storybook/stories/examples/marker-popup.js

@@ -3,14 +3,11 @@ import React from 'react';
 import L from 'leaflet';
 import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
 
-import MarkerClusterGroup from './../../src/react-leaflet-markercluster';
+import MarkerClusterGroup from './../../../src/react-leaflet-markercluster';
 
 import redFilledMarker from './icons/red-filled-marker.svg';
 import { MAP_ZOOM, MAP_MAX_ZOOM, MAP_CENTER_COORDINATES } from './constants';
 
-import '../../dist/styles.min.css';
-import './styles.css';
-
 // Create marker icon according to the official leaflet documentation
 const redMarker = L.icon({
   iconUrl: redFilledMarker,

.storybook/examples/marker-tooltip.js → .storybook/stories/examples/marker-tooltip.js

@@ -3,13 +3,10 @@ import React from 'react';
 import L from 'leaflet';
 import { MapContainer, TileLayer, Marker, Tooltip } from 'react-leaflet';
 
-import MarkerClusterGroup from './../../src/react-leaflet-markercluster';
+import MarkerClusterGroup from './../../../src/react-leaflet-markercluster';
 
 import { MAP_ZOOM, MAP_MAX_ZOOM, MAP_CENTER_COORDINATES } from './constants';
 
-import '../../dist/styles.min.css';
-import './styles.css';
-
 // Setup Tooltip according to react-leaflet documentation
 // https://react-leaflet.js.org/docs/en/examples.html
 // http://leafletjs.com/reference.html#tooltip-option

.storybook/examples/styles.css → .storybook/stories/examples/styles.css

@@ -1,11 +1,5 @@
-/*@imoprt '../../node_modules/leaflet/dist/leaflet.css';
-@import '../../src/styles.scss';
-
-$puple: #9370db;
-$gray: #ededed;
-*/
 .markercluster-map {
-  height: 90vh;
+  height: 400px;
 }
 
 /* Customize the Clustered Markers */