andrewgryan · andrewgryan · Oct 30, 2024 · Oct 30, 2024 · Oct 30, 2024 · Oct 30, 2024
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,5 @@ dist
 docs/public
 docs/static/leaflet-html.js*
 coverage
+
+*storybook.log
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,14 @@
+/** @type { import('@storybook/web-components-vite').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+  ],
+  framework: {
+    name: "@storybook/web-components-vite",
+    options: {},
+  },
+};
+export default config;
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,15 @@
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/[email protected]/dist/leaflet.css"
+  integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+  crossorigin=""
+/>
+<style>
+l-map {
+  display: block;
+  aspect-ratio: 16 / 9;
+}
+</style>
+
+
+
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,13 @@
+/** @type { import('@storybook/web-components').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/index.html b/index.html
@@ -27,6 +27,5 @@
 </l-map>
 
 <script type="module">
-  // import "./src/index.js"
-  import "./dist/leaflet-html.js"
+  import "./src/index.js"
 </script>
diff --git a/package.json b/package.json
@@ -29,12 +29,22 @@
     "build": "vite build",
     "test": "vitest",
     "coverage": "vitest run --coverage",
-    "coverage:watch": "vitest watch --coverage"
+    "coverage:watch": "vitest watch --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/test": "^8.3.6",
+    "@storybook/web-components": "^8.3.6",
+    "@storybook/web-components-vite": "^8.3.6",
     "@vitest/coverage-v8": "^1.6.0",
     "happy-dom": "^14.10.1",
     "prettier": "3.2.5",
+    "storybook": "^8.3.6",
     "vite": "^5.4.10",
     "vitest": "^1.6.0"
   },

diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx
@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Leaflet HTML - Modern Hypermedia!" />
+
+# Leaflet HTML - Modern Hypermedia Maps
+
+Make a modern application using modern web platform techniques!
diff --git a/src/stories/DivIcon.stories.js b/src/stories/DivIcon.stories.js
@@ -0,0 +1,47 @@
+import "../index.js"
+import "./divicon.css"
+
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+export default {
+  title: 'Example/DivIcon',
+  tags: ['autodocs'],
+  render: ({ className }) => {
+    let icon = "<l-div-icon></l-div-icon>"
+    if (className) {
+      icon =  `<l-div-icon class-name=${className}></l-div-icon>`
+    }
+    return `<l-marker lat-lng="[55, 0]">${ icon }</l-marker>`
+  },
+  argTypes: {
+    className: { type: "string", description: "HTML attribute **class-name**, passed to Leaflet as **className** option.", control: "select", options: ["none", "red", "blue", "yellow"]},
+  },
+  args: {
+  },
+  decorators: [(story) => `
+<l-map center="[53, 0]" zoom="4">
+  <l-tile-layer
+    url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
+  ></l-tile-layer>
+    ${story()}
+</l-map>
+  `],
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default = {
+  args: {
+  },
+};
+
+export const Red = {
+  args: {
+    className: "red"
+  },
+};
+
+export const Blue = {
+  args: {
+    className: "blue"
+  },
+};
diff --git a/src/stories/divicon.css b/src/stories/divicon.css
@@ -0,0 +1,9 @@
+.red {
+  background-color: red;
+}
+.blue {
+  background-color: blue;
+}
+.yellow {
+  background-color: yellow;
+}