Merge pull request #100 from UW-Macrostrat/package-versions

Upgrade package versions

Author: davenquinn

.github/workflows/dev.build.yaml

@@ -30,7 +30,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
 
       - name: Pin react-docgen version
         run: yarn add -D [email protected]
@@ -62,4 +62,4 @@ jobs:
             --s3-provider=Ceph \
             --s3-endpoint="$S3_ENDPOINT" \
             --s3-access-key-id="$S3_ACCESS_KEY" \
-            --s3-secret-access-key="$S3_SECRET_KEY"
+            --s3-secret-access-key="$S3_SECRET_KEY"

.github/workflows/dev.pr.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
 
       - name: Pin react-docgen version
         run: yarn add -D [email protected]
@@ -41,4 +41,4 @@ jobs:
 
       - name: Install rclone
         run: |
-          curl https://rclone.org/install.sh | sudo bash
+          curl https://rclone.org/install.sh | sudo bash

.storybook/docs-container.ts

@@ -1,12 +1,12 @@
-import { DocsContainer as BaseContainer } from "@storybook/addon-docs";
-import { themes } from "@storybook/theming";
+import { DocsContainer as BaseContainer } from "@storybook/addon-docs/blocks";
+import { themes } from "storybook/theming";
 import h from "@macrostrat/hyper";
 import { useEffect, useState } from "react";
 
 export const DocsContainer = ({ children, context }) => {
   // Check for body class changes
   const [dark, setDark] = useState(
-    document.body.classList.contains("bp5-dark")
+    document.body.classList.contains("bp5-dark"),
   );
 
   useEffect(() => {
@@ -45,6 +45,6 @@ export const DocsContainer = ({ children, context }) => {
       theme,
       context: ctx1,
     },
-    children
+    children,
   );
 };

.storybook/github-link.ts

@@ -0,0 +1,39 @@
+/** GitHub link addon for Storybook
+ * Similar to @kemuridama/storybook-addon-github but compatible with Storybook 9
+ */
+
+import { useStorybookApi } from "storybook/manager-api";
+import { IconButton } from "storybook/internal/components";
+import { GithubIcon } from "@storybook/icons";
+import h from "@macrostrat/hyper";
+
+export const ADDON_ID = "@macrostrat/storybook-addon-github" as const;
+export const TOOL_ID = `${ADDON_ID}/tool` as const;
+export const PARAM_KEY = "githubLink" as const;
+
+export function GithubLink({ active }: { active?: boolean }) {
+  const api = useStorybookApi();
+  const currentStoryData = api.getCurrentStoryData();
+
+  if (!currentStoryData) {
+    return null;
+  }
+
+  const url = [
+    "https://github.com",
+    "UW-Macrostrat/web-components",
+    "blob",
+    "main",
+    currentStoryData.importPath.replace(/\.\//, ""),
+  ].join("/");
+
+  return h(
+    IconButton,
+    { active },
+    h(
+      "a",
+      { href: url, title: "GitHub", target: "_blank", rel: "noreferrer" },
+      [h(GithubIcon), " View on GitHub"],
+    ),
+  );
+}

.storybook/main.ts

@@ -1,5 +1,9 @@
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
 import type { StorybookConfig } from "@storybook/react-vite";
 
+const require = createRequire(import.meta.url);
+
 export default {
   // vite
   stories: [
@@ -10,12 +14,14 @@ export default {
     "../packages/**/*.stories.@(mdx|js|jsx|ts|tsx)",
   ],
   addons: [
+    "@storybook/addon-docs",
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-viewport",
-    "storybook-dark-mode",
-    "@kemuridama/storybook-addon-github",
+    "@vueless/storybook-dark-mode",
   ],
   framework: "@storybook/react-vite",
   docs: {},
 } as StorybookConfig;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}

.storybook/manager.ts

@@ -1,6 +1,20 @@
-import { addons } from "@storybook/manager-api";
+import { addons, types } from "storybook/manager-api";
+import { GithubLink, ADDON_ID, TOOL_ID } from "./github-link";
+import h from "@macrostrat/hyper";
+
 import yourTheme from "./theme";
 
 addons.setConfig({
   theme: yourTheme,
 });
+
+// Register the addon
+addons.register(ADDON_ID, () => {
+  // Register the tool
+  addons.add(TOOL_ID, {
+    type: types.TOOL,
+    title: "GitHub",
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: ({ active }) => h(GithubLink, { active }),
+  });
+});

.storybook/preview.ts

@@ -1,11 +1,11 @@
 import "@blueprintjs/core/lib/css/blueprint.css";
-import { themes } from "@storybook/theming";
+import { themes } from "storybook/theming";
 
 import { FocusStyleManager, HotkeysProvider } from "@blueprintjs/core";
 import h from "@macrostrat/hyper";
 import "@macrostrat/style-system/src/main.sass";
 import { DarkModeProvider } from "@macrostrat/ui-components";
-import { useDarkMode } from "storybook-dark-mode";
+import { useDarkMode } from "@vueless/storybook-dark-mode";
 import { DocsContainer } from "./docs-container";
 import { GeologicPatternProvider } from "@macrostrat/column-components";
 
@@ -48,18 +48,14 @@ export const parameters = {
       },
     },
   },
-  github: {
-    repository: "UW-Macrostrat/web-components",
-    branch: "main",
-  },
 };
 
 export const decorators = [
   (renderStory) => {
     const isEnabled = useDarkMode();
     return h(
       PatternProvider,
-      h(DarkModeProvider, { isEnabled }, renderStory())
+      h(DarkModeProvider, { isEnabled }, renderStory()),
     );
   },
 ];

.storybook/theme.ts

@@ -1,4 +1,4 @@
-import { create } from "@storybook/theming";
+import { create } from "storybook/theming";
 
 export default create({
   base: "light",

examples/strat-column/package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18",
-    "typescript": "^5.0.0",
+    "typescript": "^5.8.3",
     "vite": "^5.3.2",
     "vite-plugin-serve-static": "^1.1.0"
   },

package.json

@@ -2,6 +2,7 @@
   "name": "@macrostrat/web-components",
   "description": "Web components for stratigraphy and geologic mapping managed by Macrostrat",
   "private": true,
+  "type": "module",
   "repository": "https://github.com/UW-Macrostrat/web-components.git",
   "version": "3.0.0",
   "scripts": {
@@ -15,7 +16,6 @@
     "check-types": "tsc --noEmit",
     "check-circular": "madge --circular --extensions ts,tsx ."
   },
-  "type": "module",
   "author": "Daven Quinn",
   "license": "ISC",
   "dependencies": {
@@ -24,25 +24,19 @@
     "@babel/preset-typescript": "^7.21.4",
     "@blueprintjs/core": "^5.10.2",
     "@macrostrat/hyper": "^3.0.6",
+    "@mdx-js/rollup": "^3.1.0",
     "@parcel/bundler-library": "^2.14.4",
     "@parcel/config-default": "^2.14.4",
     "@parcel/transformer-sass": "^2.14.4",
     "@parcel/transformer-typescript-types": "^2.14.4",
-    "@storybook/addon-actions": "^8.6.8",
-    "@storybook/addon-docs": "^8.6.8",
-    "@storybook/addon-essentials": "^8.6.8",
-    "@storybook/addon-links": "^8.6.8",
-    "@storybook/addon-viewport": "^8.6.8",
-    "@storybook/builder-vite": "^8.6.8",
-    "@storybook/components": "^8.6.8",
-    "@storybook/manager-api": "^8.6.8",
-    "@storybook/preview-api": "^8.6.8",
-    "@storybook/react": "^8.6.8",
-    "@storybook/react-vite": "^8.6.8",
-    "@storybook/theming": "^8.6.8",
+    "@storybook/addon-docs": "9.0.12",
+    "@storybook/addon-links": "9.0.12",
+    "@storybook/builder-vite": "9.0.12",
+    "@storybook/react-vite": "9.0.12",
     "@types/d3-geo": "^3.1.0",
     "@types/geojson": "^7946.0.16",
     "@types/react": "^18.3.12",
+    "@vueless/storybook-dark-mode": "^9.0.5",
     "chalk": "^5.0.1",
     "date-fns": "^4.1.0",
     "glob": "^11.0.1",
@@ -51,22 +45,21 @@
     "marked-terminal": "^7.1.0",
     "node-fetch": "^3.2.9",
     "parcel": "^2.14.4",
-    "prettier": "^2.7.1",
-    "react": "^18",
-    "react-dom": "^18",
+    "prettier": "^3.6.1",
+    "react": "^19",
+    "react-dom": "^19",
     "sass-embedded": "^1.83.0",
-    "storybook": "^8.6.8",
-    "storybook-dark-mode": "^4.0.2",
+    "storybook": "9.0.12",
     "tsx": "^4.19.1",
-    "typescript": "^5.6.2",
+    "typescript": "^5.8.3",
     "underscore": "^1.12.0",
     "use-async-effect": "^2.2.1",
-    "vite": "^5.4.11"
+    "vite": "^6.1.6"
   },
   "resolutions": {
     "@types/react": "18.3.12",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19",
+    "react-dom": "^19"
   },
   "workspaces": [
     "packages/*",
@@ -75,11 +68,11 @@
   ],
   "packageManager": "[email protected]",
   "devDependencies": {
-    "@kemuridama/storybook-addon-github": "^1.4.0",
     "@parcel/packager-ts": "^2.14.4",
     "@types/d3-array": "^3.2.1",
     "@types/underscore": "^1.13.0",
     "madge": "^8.0.0",
+    "prettier": "^3.6.1",
     "react-docgen": "7.0.0"
   }
 }