Upgrade documentation and examples

.github/workflows/chromatic.yml

@@ -0,0 +1,32 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: "Chromatic Publish"
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  test:
+    name: Publish Storybook to Chromatic
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "npm"
+      - run: npm ci
+      - run: cd docs/Hero && npm ci
+      #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@v1
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken,
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.gitignore

@@ -22,11 +22,8 @@ coverage/
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 build/Release
 
-# Dependency directory
-node_modules/
-
 # Babel compiled sources
-lib/
+# lib/
 
 # UMD distribution
 dist/
@@ -39,3 +36,8 @@ dist/
 nbproject
 .idea
 .node_history
+
+# storybook files
+storybook-static
+
+node_modules

.storybook/global.css

@@ -0,0 +1,73 @@
+[draggable] {
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    -moz-user-drag: element;
+    -webkit-user-drag: element;
+    -khtml-user-drag: element;
+    user-drag: element;
+}
+
+@font-face {
+    font-family: 'SauceCodePro Nerd Font';
+    src: local("./SauceCodeProNerdFontMono-Black.ttf");
+    format: ('truetype');
+}
+
+* {
+    font-family: "SauceCodePro Nerd Font", serif;
+}
+
+svg g.tutorial {
+    stroke: black;
+    stroke-width: 0.01em;
+    fill: transparent;
+}
+
+svg g.h:hover {
+    fill: #61dbfb;
+    transition: fill .1s;
+}
+
+svg g:hover text {
+    fill-opacity: 1;
+    transition: fill .1s;
+}
+
+svg g.q .hexagon {
+    fill: #61fbf5;
+    transition: fill .1s;
+}
+
+svg g.r .hexagon {
+    fill: #fb618e;
+    transition: fill .1s;
+}
+
+svg g.s .hexagon {
+    fill: #fbce61;
+    transition: fill .1s;
+}
+
+svg g.active .hexagon {
+    fill: #61dbfb;
+    transition: fill .1s;
+}
+
+
+svg g text {
+    font-size: 0.17em;
+    fill: white;
+    fill-opacity: 0.7;
+    transition: fill-opacity .1s;
+}
+
+svg path {
+    stroke: #fb61db;
+    stroke-width: 0.2em;
+    stroke-opacity: 0.9;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    transition: .1s;
+}

.storybook/main.ts

@@ -0,0 +1,34 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: [
+    "../docs/GettingStarted/1. Introduction.mdx",
+    "../docs/GettingStarted/2. YourFirstApp.mdx",
+    "../docs/GettingStarted/3. UsingGenerators.mdx",
+    "../docs/GettingStarted/4. UsingLayout.mdx",
+    "../docs/GettingStarted/5. UsingPattern.mdx",
+    "../docs/GettingStarted/6. UsingPath.mdx",
+    "../docs/GettingStarted/7. UsingEvents.mdx",
+    //"../docs/AdvancedExamples/1. DraggingAndDropping.mdx",
+    "../docs/AdvancedExamples/1. UsingHooks.mdx",
+    "../src/**/*.stories.tsx",
+    "../docs/Hero/Hero.stories.tsx",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-webpack5-compiler-swc",
+    "@chromatic-com/storybook",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
+};
+export default config;
+
+

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -2,9 +2,13 @@
 
 ![Downloads](https://img.shields.io/npm/dt/react-hexgrid.svg)
 ![npm version](https://img.shields.io/npm/v/react-hexgrid.svg)
-![dependencies Status](https://img.shields.io/librariesio/github/hellenic/react-hexgrid)
-[![Live demo](https://img.shields.io/badge/live-demo-brightgreen.svg?style=flat-square)](https://hellenic.github.io/react-hexgrid/examples/)
+![Dependencies Status](https://img.shields.io/librariesio/github/hellenic/react-hexgrid)
+[![Live demo](https://img.shields.io/badge/live-demo-brightgreen.svg)](https://hellenic.github.io/react-hexgrid/examples/)
 ![License](https://img.shields.io/npm/l/react-hexgrid.svg)
+[![CodeFactor](https://www.codefactor.io/repository/github/aaronzshey/react-hexgrid/badge)](https://www.codefactor.io/repository/github/aaronzshey/react-hexgrid)
+[![Jest Status](https://img.shields.io/github/actions/workflow/status/aaronzshey/react-hexgrid/node.js.yml?style=flat&logo=jest&label=%20&labelColor=%2398435c)](https://github.com/aaronzshey/react-hexgrid/actions/workflows/node.js.yml)[![Chromatic UI Tests Status](https://img.shields.io/github/actions/workflow/status/aaronzshey/react-hexgrid/chromatic.yml?style=flat&logo=chromatic&label=%20&labelColor=white)](https://github.com/aaronzshey/react-hexgrid/actions/workflows/chromatic.yml)
+
+[![Storybook Permalink](https://raw.githubusercontent.com/storybookjs/brand/master/badge/badge-storybook.svg)](https://main--66a5393443e58f4dc4f0ca6b.chromatic.com/?path=/story/pathfinding--default)
 
 React components to build interactive hexagon grids. This library uses SVG and allows you to create fully customizable and scalable interactive hexagon grids with a simple api.
 

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:66a5393443e58f4dc4f0ca6b",
+  "zip": true
+}

docs/APIDocumentation/Hexagon.mdx

@@ -0,0 +1,9 @@
+import {ArgTypes, Meta} from '@storybook/blocks';
+
+import * as HexagonComponentStory from '../../src/Hexagon/Hexagon.stories.tsx';
+
+<Meta title="API Documentation/Hexagon"/>
+
+# Hexagon 
+
+<ArgTypes of={HexagonComponentStory.Primary}/>