[node-image] Migrates to Storybook

WARNING: At this point, the Storybook does not work properly, because it
does not use the proper files from sigma (it uses the sources instead of
the built version).

The new build is based on the following blog post:
https://betterprogramming.pub/getting-started-with-storybook-without-a-javascript-framework-c2968d3f3d9f

packages/node-image/.eslintrc

@@ -0,0 +1,26 @@
+{
+  // Specify the environments where the code will run
+  "env": {
+    "jest": true, // Enable Jest for testing
+    "browser": true // Enable browser environment
+  },
+
+  // Stop ESLint from searching for configuration in parent folders
+  "root": true,
+
+  // Specify the parser for TypeScript (using @typescript-eslint/parser)
+  "parser": "@typescript-eslint/parser", // Leverages TS ESTree to lint TypeScript
+
+  // Add additional rules and configuration options
+  "plugins": ["@typescript-eslint"],
+
+  // Extend various ESLint configurations and plugins
+  "extends": [
+    "eslint:recommended", // ESLint recommended rules
+    "plugin:@typescript-eslint/recommended", // TypeScript recommended rules
+    "plugin:@typescript-eslint/eslint-recommended", // ESLint overrides for TypeScript
+    "prettier", // Prettier rules
+    "plugin:prettier/recommended", // Prettier plugin integration
+    "plugin:storybook/recommended" // Recommended rules for Storybook
+  ]
+}

packages/node-image/.gitignore

@@ -1,9 +1,5 @@
 node_modules
-.DS_Store
-.vscode
-
 dist
-build
 
-*.d.ts
-*.js
+#storybook build directory
+storybook-static

packages/node-image/.storybook/main.js

@@ -0,0 +1,27 @@
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
+/** @type { import('@storybook/html-vite').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/html-vite"),
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

packages/node-image/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/html').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/node-image/package.json

@@ -2,24 +2,15 @@
   "name": "@sigma/node-image",
   "version": "3.0.0",
   "description": "A node program that renders images for sigma.js",
-  "homepage": "https://www.sigmajs.org",
-  "bugs": "http://github.com/jacomyal/sigma.js/issues",
-  "main": "index.js",
-  "types": "index.d.ts",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
   "files": [
-    "edge",
-    "node",
-    "index.js",
-    "*.d.ts"
+    "/dist"
   ],
-  "scripts": {
-    "dist": "tsc -p ./tsconfig.transpile.json -d",
-    "clean": "rm *.js *.d.ts",
-    "dev": "kotatsu serve playground/index.ts --index playground/index.html --open",
-    "prettier": "prettier --write '**/*.ts'",
-    "prepublishOnly": "npm run dist",
-    "postpublish": "npm run clean"
-  },
+  "homepage": "https://www.sigmajs.org",
+  "bugs": "http://github.com/jacomyal/sigma.js/issues",
   "repository": {
     "type": "git",
     "url": "http://github.com/jacomyal/sigma.js.git"
@@ -43,17 +34,32 @@
   "peerDependencies": {
     "sigma": ">=3.0.0-beta.4"
   },
+  "scripts": {
+    "format": "prettier --write --parser typescript '**/*.ts'",
+    "lint": "eslint . --ext .ts --ignore-path .gitignore --fix",
+    "build": "tsc && vite build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
   "devDependencies": {
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/html": "^7.6.7",
+    "@storybook/html-vite": "^7.6.7",
+    "@storybook/test": "^7.6.7",
     "@types/chroma-js": "^2.4.3",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
     "chroma-js": "^2.4.2",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-storybook": "^0.6.15",
     "graphology": "^0.25.4",
-    "graphology-components": "^1.5.4",
-    "graphology-generators": "^0.11.2",
-    "graphology-layout": "^0.6.1",
-    "graphology-layout-forceatlas2": "^0.10.1",
-    "graphology-types": "^0.24.7",
-    "kotatsu": "^0.23.1",
-    "prettier": "^3.1.1",
-    "typescript": "^5.3.3"
+    "storybook": "^7.6.7",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.7.0"
   }
 }