Merge pull request #206 from UW-Macrostrat/update-blueprint

Update BlueprintJS and other major improvements

Author: davenquinn

.parcelrc

@@ -6,14 +6,14 @@ 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("bp6-dark"),
   );
 
   useEffect(() => {
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.attributeName === "class") {
-          const dark = document.body.classList.contains("bp5-dark");
+          const dark = document.body.classList.contains("bp6-dark");
           setDark(dark);
         }
       });

.storybook/docs-container.ts

@@ -2,6 +2,7 @@
 import { createRequire } from "node:module";
 import { dirname, join } from "node:path";
 import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
 
 const require = createRequire(import.meta.url);
 
@@ -19,10 +20,29 @@ export default {
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@vueless/storybook-dark-mode"),
   ],
-  framework: getAbsolutePath("@storybook/react-vite"),
+  framework: "@storybook/react-vite",
+  async viteFinal(config) {
+    // Prioritize source files for bundling if available
+    return mergeConfig(config, {
+      resolve: {
+        conditions: ["source"],
+      },
+      optimizeDeps: {
+        exclude: ["node_modules/.cache/storybook"],
+      },
+      css: {
+        preprocessorOptions: {
+          // https://vite.dev/config/shared-options.html#css-preprocessoroptions
+          sass: {
+            api: "modern-compiler", // or "modern", "legacy"
+          },
+        },
+      },
+    });
+  },
   docs: {},
 } as StorybookConfig;
 
 function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, "package.json")));
+  return dirname(require.resolve(value));
 }

.storybook/main.ts

@@ -30,7 +30,7 @@ export const parameters = {
     //current: "light",
     dark: { ...themes.dark },
     light: { ...themes.light },
-    darkClass: ["bp5-dark"],
+    darkClass: ["bp6-dark"],
     lightClass: [],
     stylePreview: true,
   },

.storybook/preview.ts

@@ -1,15 +1,9 @@
-nodeLinker: node-modules
+nodeLinker: pnp
 
 packageExtensions:
   "@blueprintjs/datetime@*":
     dependencies:
-      "@types/react": ^16||^17||^18
-  "@parcel/fs@^2.13.3":
-    dependencies:
-      "@parcel/core": ^2.13.3
-  "@parcel/workers@^2.13.3":
-    dependencies:
-      "@parcel/core": ^2.13.3
+      "@types/react": ^18||^19
   "@types/react@*":
     dependencies:
       prop-types: "*"
@@ -31,3 +25,6 @@ packageExtensions:
       supports-color: "*"
 
 yarnPath: .yarn/releases/yarn-4.12.0.cjs
+
+pnpFallbackMode: all
+pnpMode: loose

.yarnrc.yml

@@ -1,5 +1,17 @@
 # Changelog
 
+# `[4.0.0]` - 2026-01-26
+
+- Major update to bundling strategy using the
+  [`@macrostrat/web-components-bundler`](./toolchain/bundler) package, removing
+  the `parcel` dependency.
+- Add a `update-metadata` script to handle changes to package JSON files across
+  the monorepo.
+- Update peer dependencies to React 18.
+- Require styles to be imported separately for many packages.
+- Update to Yarn PnP
+- Update Storybook to version `10.2.0`
+
 # `[3.0.0]` - 2024-02-04
 
 This release includes major changes in support of bundling all dependencies for

CHANGELOG.md

@@ -10,37 +10,78 @@ within the library itself.
 You can view the latest version of each component in the
 [storybook](https://dev.macrostrat.org/docs/web-components/?path=/docs/text-extractions-text-extraction--docs)
 
-## Architecture
+## Usage
 
-#### Libraries
+### Libraries
 
 Macrostrat's web components system is a workbench for producing user interface
 components. It is structured as a monorepo, with several modules (in the
 `packages` directory) that are being maintained for publication to NPM and
 referencing in Macrostrat's user-facing applications. Open-source contributions
 and third-party usage are welcome!
 
-Following is a list of all published modules
-
-[![@macrostrat/api-types](https://img.shields.io/npm/v/@macrostrat/api-types?label=%40macrostrat%2Fapi-types)](https://www.npmjs.com/package/@macrostrat/api-types)
-[![@macrostrat/color-utils](https://img.shields.io/npm/v/@macrostrat/color-utils?label=%40macrostrat%2Fcolor-utils)](https://www.npmjs.com/package/@macrostrat/color-utils)
-[![@macrostrat/column-components](https://img.shields.io/npm/v/@macrostrat/column-components?label=%40macrostrat%2Fcolumn-components)](https://www.npmjs.com/package/@macrostrat/column-components)
-[![@macrostrat/column-views](https://img.shields.io/npm/v/@macrostrat/column-views?label=%40macrostrat%2Fcolumn-views)](https://www.npmjs.com/package/@macrostrat/column-views)
-[![@macrostrat/data-components](https://img.shields.io/npm/v/@macrostrat/data-components?label=%40macrostrat%2Fdata-components)](https://www.npmjs.com/package/@macrostrat/data-components)
-[![@macrostrat/data-sheet](https://img.shields.io/npm/v/@macrostrat/data-sheet?label=%40macrostrat%2Fdata-sheet)](https://www.npmjs.com/package/@macrostrat/data-sheet)
-[![@macrostrat/feedback-components](https://img.shields.io/npm/v/@macrostrat/feedback-components?label=%40macrostrat%2Ffeedback-components)](https://www.npmjs.com/package/@macrostrat/feedback-components)
-[![@macrostrat/form-components](https://img.shields.io/npm/v/@macrostrat/form-components?label=%40macrostrat%2Fform-components)](https://www.npmjs.com/package/@macrostrat/form-components)
-[![@macrostrat/map-interface](https://img.shields.io/npm/v/@macrostrat/map-interface?label=%40macrostrat%2Fmap-interface)](https://www.npmjs.com/package/@macrostrat/map-interface)
-[![@macrostrat/map-styles](https://img.shields.io/npm/v/@macrostrat/map-styles?label=%40macrostrat%2Fmap-styles)](https://www.npmjs.com/package/@macrostrat/map-styles)
-[![@macrostrat/mapbox-react](https://img.shields.io/npm/v/@macrostrat/mapbox-react?label=%40macrostrat%2Fmapbox-react)](https://www.npmjs.com/package/@macrostrat/mapbox-react)
-[![@macrostrat/mapbox-utils](https://img.shields.io/npm/v/@macrostrat/mapbox-utils?label=%40macrostrat%2Fmapbox-utils)](https://www.npmjs.com/package/@macrostrat/mapbox-utils)
-[![@macrostrat/stratigraphy-utils](https://img.shields.io/npm/v/@macrostrat/stratigraphy-utils?label=%40macrostrat%2Fstratigraphy-utils)](https://www.npmjs.com/package/@macrostrat/stratigraphy-utils)
-[![@macrostrat/style-system](https://img.shields.io/npm/v/@macrostrat/style-system?label=%40macrostrat%2Fstyle-system)](https://www.npmjs.com/package/@macrostrat/style-system)
-[![@macrostrat/svg-map-components](https://img.shields.io/npm/v/@macrostrat/svg-map-components?label=%40macrostrat%2Fsvg-map-components)](https://www.npmjs.com/package/@macrostrat/svg-map-components)
-[![@macrostrat/timescale](https://img.shields.io/npm/v/@macrostrat/timescale?label=%40macrostrat%2Ftimescale)](https://www.npmjs.com/package/@macrostrat/timescale)
-[![@macrostrat/ui-components](https://img.shields.io/npm/v/@macrostrat/ui-components?label=%40macrostrat%2Fui-components)](https://www.npmjs.com/package/@macrostrat/ui-components)
-
-## Contributing to web components
+- [![@macrostrat/api-types](https://img.shields.io/npm/v/@macrostrat/api-types?label=%40macrostrat%2Fapi-types)](https://www.npmjs.com/package/@macrostrat/api-types)
+- [![@macrostrat/color-utils](https://img.shields.io/npm/v/@macrostrat/color-utils?label=%40macrostrat%2Fcolor-utils)](https://www.npmjs.com/package/@macrostrat/color-utils)
+- [![@macrostrat/column-components](https://img.shields.io/npm/v/@macrostrat/column-components?label=%40macrostrat%2Fcolumn-components)](https://www.npmjs.com/package/@macrostrat/column-components)
+- [![@macrostrat/column-views](https://img.shields.io/npm/v/@macrostrat/column-views?label=%40macrostrat%2Fcolumn-views)](https://www.npmjs.com/package/@macrostrat/column-views)
+- [![@macrostrat/data-components](https://img.shields.io/npm/v/@macrostrat/data-components?label=%40macrostrat%2Fdata-components)](https://www.npmjs.com/package/@macrostrat/data-components)
+- [![@macrostrat/data-sheet](https://img.shields.io/npm/v/@macrostrat/data-sheet?label=%40macrostrat%2Fdata-sheet)](https://www.npmjs.com/package/@macrostrat/data-sheet)
+- [![@macrostrat/feedback-components](https://img.shields.io/npm/v/@macrostrat/feedback-components?label=%40macrostrat%2Ffeedback-components)](https://www.npmjs.com/package/@macrostrat/feedback-components)
+- [![@macrostrat/form-components](https://img.shields.io/npm/v/@macrostrat/form-components?label=%40macrostrat%2Fform-components)](https://www.npmjs.com/package/@macrostrat/form-components)
+- [![@macrostrat/map-interface](https://img.shields.io/npm/v/@macrostrat/map-interface?label=%40macrostrat%2Fmap-interface)](https://www.npmjs.com/package/@macrostrat/map-interface)
+- [![@macrostrat/map-styles](https://img.shields.io/npm/v/@macrostrat/map-styles?label=%40macrostrat%2Fmap-styles)](https://www.npmjs.com/package/@macrostrat/map-styles)
+- [![@macrostrat/mapbox-react](https://img.shields.io/npm/v/@macrostrat/mapbox-react?label=%40macrostrat%2Fmapbox-react)](https://www.npmjs.com/package/@macrostrat/mapbox-react)
+- [![@macrostrat/mapbox-utils](https://img.shields.io/npm/v/@macrostrat/mapbox-utils?label=%40macrostrat%2Fmapbox-utils)](https://www.npmjs.com/package/@macrostrat/mapbox-utils)
+- [![@macrostrat/static-map-utils](https://img.shields.io/npm/v/@macrostrat/static-map-utils?label=%40macrostrat%2Fstatic-map-utils)](https://www.npmjs.com/package/@macrostrat/static-map-utils)
+- [![@macrostrat/stratigraphy-utils](https://img.shields.io/npm/v/@macrostrat/stratigraphy-utils?label=%40macrostrat%2Fstratigraphy-utils)](https://www.npmjs.com/package/@macrostrat/stratigraphy-utils)
+- [![@macrostrat/style-system](https://img.shields.io/npm/v/@macrostrat/style-system?label=%40macrostrat%2Fstyle-system)](https://www.npmjs.com/package/@macrostrat/style-system)
+- [![@macrostrat/svg-map-components](https://img.shields.io/npm/v/@macrostrat/svg-map-components?label=%40macrostrat%2Fsvg-map-components)](https://www.npmjs.com/package/@macrostrat/svg-map-components)
+- [![@macrostrat/timescale](https://img.shields.io/npm/v/@macrostrat/timescale?label=%40macrostrat%2Ftimescale)](https://www.npmjs.com/package/@macrostrat/timescale)
+- [![@macrostrat/ui-components](https://img.shields.io/npm/v/@macrostrat/ui-components?label=%40macrostrat%2Fui-components)](https://www.npmjs.com/package/@macrostrat/ui-components)
+
+### Style imports
+
+Many packages in this monorepo have styles that need to be imported separately
+into consuming applications. These styles can be imported into HTML
+
+```html
+<link
+  rel="stylesheet"
+  href="@macrostrat/column-components/dist/column-components.css"
+/>
+```
+
+or into JavaScript/TypeScript files:
+
+```ts
+import "@macrostrat/column-components/dist/column-components.css";
+```
+
+For each package, styles can also be imported using a synthetic default import:
+
+```ts
+import "@macrostrat/column-components/style.css";
+```
+
+The following table lists the packages that require separate style imports,
+along with the version since which the style import has been necessary.
+
+| Module                             | Stylesheet                         | Since   |
+| ---------------------------------- | ---------------------------------- | ------- |
+| `@macrostrat/column-components`    | `.../dist/column-components.css`   | `2.0.0` |
+| `@macrostrat/column-creator`       | `.../dist/column-creator.css`      | `0.2.0` |
+| `@macrostrat/column-views`         | `.../dist/column-views.css`        | `3.0.0` |
+| `@macrostrat/data-components`      | `.../dist/data-components.css`     | `1.0.0` |
+| `@macrostrat/data-sheet`           | `.../dist/data-sheet.css`          | `3.0.0` |
+| `@macrostrat/feedback-components`  | `.../dist/feedback-components.css` | `2.0.0` |
+| `@macrostrat/form-components`      | `.../dist/form-components.css`     | `1.0.0` |
+| `@macrostrat/map-interface`        | `.../dist/map-interface.css`       | `2.0.0` |
+| `@macrostrat/static-map-utils`     | `.../dist/static-map-utils.css`    | `2.0.0` |
+| `@macrostrat/timescale`            | `.../dist/timescale.css`           | `3.0.0` |
+| `@macrostrat/ui-components`        | `.../dist/ui-components.css`       | `5.0.0` |
+| ---------------------------------- | ---------------------------------- | ------- |
+
+## Contributing
 
 ### Installation
 

README.md

@@ -16,7 +16,7 @@
     "vite-plugin-serve-static": "^1.1.0"
   },
   "dependencies": {
-    "@blueprintjs/core": "^5.16.5",
+    "@blueprintjs/core": "^6.6.1",
     "@macrostrat/hyper": "^3.0.6",
     "@vitejs/plugin-react": "^4.3.4",
     "react": "^18.0.0",

examples/strat-column/package.json

@@ -4,15 +4,17 @@
   "private": true,
   "type": "module",
   "repository": "https://github.com/UW-Macrostrat/web-components.git",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "scripts": {
-    "dev": "storybook dev -p 6006 --no-open",
+    "dev": "NODE_NO_WARNINGS=1 storybook dev -p 6006 --no-open",
     "build:storybook": "storybook build --debug",
+    "build:bundler": "yarn workspace @macrostrat/web-components-bundler run build",
     "build": "NODE_NO_WARNINGS=1 tsx scripts/publish-helpers build",
     "status": "NODE_NO_WARNINGS=1 tsx scripts/publish-helpers status",
     "prepare": "NODE_NO_WARNINGS=1 tsx scripts/publish-helpers prepare",
     "publish": "NODE_NO_WARNINGS=1 tsx scripts/publish-helpers publish",
     "tag-versions": "NODE_NO_WARNINGS=1 tsx scripts/publish-helpers tag-versions",
+    "update-metadata": "NODE_NO_WARNINGS=1 tsx scripts/publish-helpers/update-package-json-files.ts",
     "publish:storybook": "./scripts/publish-storybook.sh",
     "format": "prettier --write .",
     "check-types": "tsc --noEmit",
@@ -21,62 +23,50 @@
   "author": "Daven Quinn",
   "license": "ISC",
   "dependencies": {
-    "@babel/core": "^7.18.6",
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-typescript": "^7.21.4",
-    "@blueprintjs/core": "^5.10.2",
+    "@blueprintjs/core": "^6.6.1",
+    "@macrostrat/column-components": "workspace:^",
     "@macrostrat/hyper": "^3.0.6",
+    "@macrostrat/style-system": "workspace:^",
+    "@macrostrat/ui-components": "workspace:^",
+    "@macrostrat/web-components-bundler": "workspace:^",
     "@mdx-js/rollup": "^3.1.0",
-    "@parcel/bundler-default": "^2.16.0",
-    "@parcel/bundler-library": "^2.16.0",
-    "@parcel/config-default": "^2.16.0",
-    "@parcel/transformer-sass": "^2.16.0",
-    "@parcel/transformer-typescript-types": "^2.16.0",
-    "@storybook/addon-docs": "10.1.11",
-    "@storybook/addon-links": "10.1.11",
-    "@storybook/builder-vite": "10.1.11",
-    "@storybook/react-vite": "10.1.11",
+    "@storybook/addon-docs": "10.2.0",
+    "@storybook/addon-links": "10.2.0",
+    "@storybook/builder-vite": "10.2.0",
+    "@storybook/icons": "^2.0.1",
+    "@storybook/react-vite": "10.2.0",
     "@types/d3-geo": "^3.1.0",
     "@types/geojson": "^7946.0.16",
     "@types/react": "^18.3.12",
-    "@vueless/storybook-dark-mode": "^10.0.4",
-    "chalk": "^5.0.1",
+    "@vueless/storybook-dark-mode": "^10.0.6",
+    "chalk": "^5.6.2",
     "date-fns": "^4.1.0",
     "glob": "^11.1.0",
     "lorem-ipsum": "^2.0.8",
+    "madge": "^8.0.0",
     "marked": "^11.0",
     "marked-terminal": "^7.1.0",
     "node-fetch": "^3.2.9",
-    "parcel": "^2.16.0",
-    "react": "^19",
-    "react-dom": "^19",
-    "sass-embedded": "^1.83.0",
-    "storybook": "10.1.11",
+    "react": "^18||^19",
+    "react-dom": "^18||^19",
+    "storybook": "10.2.0",
     "tsx": "^4.19.1",
     "typescript": "^5.8.3",
-    "underscore": "^1.12.0",
-    "use-async-effect": "^2.2.1",
-    "vite": "^7.2.7"
+    "underscore": "^1.13.7",
+    "use-async-effect": "^2.2.1"
+  },
+  "devDependencies": {
+    "prettier": "^3.7.4",
+    "vite": "^7.3.1"
   },
   "resolutions": {
-    "@types/react": "18.3.12",
     "react": "^19",
-    "react-dom": "^19",
-    "rollup": "4.44.2"
+    "react-dom": "^19"
   },
   "workspaces": [
     "packages/*",
     "toolchain/*",
     "examples/*"
   ],
-  "packageManager": "[email protected]",
-  "devDependencies": {
-    "@parcel/packager-ts": "^2.16.0",
-    "@parcel/transformer-stylus": "^2.16.0",
-    "@types/d3-array": "^3.2.1",
-    "@types/underscore": "^1.13.0",
-    "madge": "^8.0.0",
-    "prettier": "^3.7.4",
-    "react-docgen": "^7.0.0"
-  }
+  "packageManager": "[email protected]"
 }

package.json

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.5] - 2026-01-26
+
+Removed local `tsconfig.json` file and Parcel dependency.
+
 ## [1.1.4] - 2025-12-19
 
 Increase alignment of GeoJSON types