Merge pull request #58 from UW-Macrostrat/ui-components-v5

UI components dependency pruning

packages/column-components/stories/measured-section.sass

@@ -1,6 +1,8 @@
 //:global
 //  @require "./imported"
 
+@use "sass:color"
+
 #app
   width: 40em
 
@@ -57,10 +59,10 @@ g.lithology-column use.frame
 @mixin interval($color)
   &>.interval-box
     margin: 0px
-    background-color: lighten($color, 50%)
-    border: 2px solid lighten($color, 10%) !important
+    background-color: color.adjust($color, $lightness: 50%)
+    border: 2px solid color.adjust($color, $lightness: 10%) !important
     .interval-label
-      color: darken($color, 30%)
+      color: color.adjust($color, $lightness: -30%)
 
 .interval
   &.Blueflower

packages/map-interface/package.json

@@ -11,15 +11,15 @@
     "@macrostrat/hyper": "^2.2.1",
     "@macrostrat/mapbox-react": "workspace:*",
     "@macrostrat/mapbox-utils": "workspace:*",
-    "@macrostrat/ui-components": "workspace:^4.0.1",
+    "@macrostrat/ui-components": "^4.0.1",
     "@mapbox/tilebelt": "^1.0.2",
     "@turf/bbox": "^6.5.0",
     "chroma-js": "^2.4.2",
     "classnames": "^2.3.2",
     "d3-array": "^3.2.4",
     "d3-format": "^3.1.0",
     "mapbox-gl": "^2.15.0",
-    "query-string": "^8.1.0",
+    "query-string": "^9.0.0",
     "transition-hook": "^1.5.2",
     "underscore": "^1.13.6",
     "use-resize-observer": "^9.1.0"

packages/style-system/src/colors.scss

@@ -42,22 +42,22 @@ $dark-colors: (
     color.change($dark-background, $alpha: 0.6),
   accent-color: $accent,
   // light gray 3,
-  accent-secondary-color: lighten($accent, 0%),
-  accent-secondary-hover-color: lighten($accent, 5%),
+  accent-secondary-color: $accent,
+  accent-secondary-hover-color: color.adjust($accent, $lightness: 5%),
   panel-rule-color: #404854,
   secondary-color: $gray1,
   // gray3,
-  tertiary-background: lighten($accent, 4%),
+  tertiary-background: color.adjust($accent, $lightness: 4%),
   // light gray 5,
   tertiary-color: #383e47,
   // light gray 4,
   tertiary-border-color: #5f6b7c,
   // gray 5,
-  accent-hover-color: lighten($accent, 4%),
+  accent-hover-color: color.adjust($accent, $lightness: 4%),
   // light gray 1,
   accent-border-color: #5f6b7c,
   // gray5,
   card-shadow-color: color.adjust($gray1, $alpha: 0.2),
   ui-color-accent-text: rgb(252, 217, 250),
-  ui-color-accent: darken(rgb(143, 39, 138), 50%),
+  ui-color-accent: color.adjust(rgb(143, 39, 138), $lightness: -50%),
 );

packages/ui-components/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [4.0.2] - 2024-10-24
+
+- Migrate from `@blueprintjs/datetime` to `@blueprintjs/datetime2` to allow
+  official React 18 compatibility
+- Allow `@macrostrat/hyper` version 3
+- Update `query-string` to version 9
+- Remove unused dependencies, which were mostly present due to speculation on
+  future needs and desired functionality
+  - `@mantine/core`
+  - `@mantine/hooks`
+  - `io-ts`
+  - `fp-ts`
+  - `core-js`
+  - `date-fns`
+  - `@emotion/react`
+  - `@babel/polyfill`
+- Create a "development panel" component for use in application debugging
+- Remove `init.js` file, which was used to set up global state but is kind of
+  outmoded.
+
 ## [4.0.1] - 2024-10-02
 
 Bug fix: missing package specifier
@@ -8,9 +28,10 @@ Bug fix: missing package specifier
 
 - Update BlueprintJS to version 5
 - Remove unused script files
-- Add an `applySystemDarkMode` function to `DarkModeProvider` to allow the user to apply the system's dark mode setting.
-- Add a default validator for local storage items to prevent errors arising
-  from malformed stored objects.
+- Add an `applySystemDarkMode` function to `DarkModeProvider` to allow the user
+  to apply the system's dark mode setting.
+- Add a default validator for local storage items to prevent errors arising from
+  malformed stored objects.
 - Broke out position button handling somewhat
 - Removed duplicate styles
 
@@ -20,9 +41,10 @@ Bug fix: missing package specifier
 
 ## [3.1.0] - 2023-04-21
 
-- Add a `followSystem` option to `DarkModeProvider` to allow the user to follow the system's dark mode setting.
-- Add a `Box`, `FlexRow`, `FlexColumn`, and `Spacer` components
-  to improve layout capabilities.
+- Add a `followSystem` option to `DarkModeProvider` to allow the user to follow
+  the system's dark mode setting.
+- Add a `Box`, `FlexRow`, `FlexColumn`, and `Spacer` components to improve
+  layout capabilities.
 
 ## [3.0.0] - August 2022
 
@@ -40,32 +62,40 @@ Bug fix: missing package specifier
 ## [1.0.0] - 23-09-2021
 
 - Finally remove deprecated `APIView` component.
-- Change `InfiniteScrollView` component to use `IntersectionObserver` APIs, in order to get rid of stale dependency `react-infinite-scroller`.
+- Change `InfiniteScrollView` component to use `IntersectionObserver` APIs, in
+  order to get rid of stale dependency `react-infinite-scroller`.
 - Add a `useScrollMarkers` hook
 
 ## [0.7.0] - 20-09-2021
 
-- **Breaking change**: Move `LinkCard` and other compents in `ext/router-links` to the new [`@macrostrat/router-components`](https://github.com/UW-Macrostrat/router-components) module.
+- **Breaking change**: Move `LinkCard` and other compents in `ext/router-links`
+  to the new
+  [ `@macrostrat/router-components`](https://github.com/UW-Macrostrat/router-components)
+  module.
 - Add a skeletal data provider that tracks multiple `useAPIResult` calls
 - Added a default theme (Monokai) to `JSONView`
 - Added a `ModalPanel` component
 - Upgrade `@macrostrat/hyper` dependency
 
 ## [0.6.0] - 28-06-2021
 
-- **Breaking change**: Move `LinkCard` and other components depending on `react-router-dom` to a separate `ext/router-links` section.
-  This allows applications that don't use `react-router` to still use the bulk of the module
+- **Breaking change**: Move `LinkCard` and other components depending on
+  `react-router-dom` to a separate `ext/router-links` section. This allows
+  applications that don't use `react-router` to still use the bulk of the module
 - Move Changelog to a separate file
 - Upgrade delete button
 - Added an `ErrorBoundary` component
-- Allowed resetting `useStoredState` using a third parameter, as such: `const [state, setState, resetState] = useStoredState(id, initialState)`
-- Can now reset dark mode state to default using a `Shift+click` on the `DarkModeButton`.
+- Allowed resetting `useStoredState` using a third parameter, as such:
+  `const [state, setState, resetState] = useStoredState(id, initialState)`
+- Can now reset dark mode state to default using a `Shift+click` on the
+  `DarkModeButton`.
 
 ## [0.5.0] - 10-02-2021
 
-- Move towards using Axios base types for API context. Allows more advanced abilities
-  to control global request context through Axios's built-in methods. Additional configurability
-  will be progressively added through the `0.5` series.
+- Move towards using Axios base types for API context. Allows more advanced
+  abilities to control global request context through Axios's built-in methods.
+  Additional configurability will be progressively added through the `0.5`
+  series.
 
 ## [0.4.4] - 14-11-2020
 
@@ -76,7 +106,8 @@ Bug fix: missing package specifier
 ## [0.4.2] - 12-10-2020
 
 - Added `SettingsProvider` and settings context for persistent settings
-- Upgraded dark mode context to store values across page reloads (using local storage)
+- Upgraded dark mode context to store values across page reloads (using local
+  storage)
 
 ## [0.3.0] - 18-08-2020
 

packages/ui-components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@macrostrat/ui-components",
-  "version": "4.0.1",
-  "description": "UI components for React and blueprint.js",
+  "version": "4.0.2",
+  "description": "UI components for React and Blueprint.js",
   "main": "dist/main.js",
   "module": "dist/module.js",
   "types": "dist/types.d.ts",
@@ -16,8 +16,7 @@
   ],
   "files": [
     "dist",
-    "src",
-    "init.js"
+    "src"
   ],
   "author": "Daven Quinn",
   "contributors": [
@@ -30,43 +29,26 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.4.4",
     "@blueprintjs/core": "^5.10.2",
-    "@blueprintjs/datetime": "^5.3.4",
-    "@macrostrat/hyper": "^2.2.1",
-    "@mantine/core": "^4.1.3",
-    "@mantine/hooks": "^4.1.3",
-    "axios": "^1.6.0",
-    "chroma-js": "^2.4.2",
+    "@blueprintjs/datetime2": "^2.3.11",
+    "@macrostrat/hyper": "^2.2.1||^3.0.0",
+    "axios": "^1.7.7",
+    "chroma-js": "^2.4.2||^3.0.0",
     "classnames": "^2.3.0",
-    "core-js": "^3.6.4",
-    "d3-array": "^3.0.4",
-    "date-fns": "^2.15.0",
-    "fp-ts": "^2.5.3",
+    "d3-array": "^3.2.4",
     "immutability-helper": "^3.1.1",
-    "io-ts": "^2.1.2",
-    "query-string": "^7.0.0",
+    "query-string": "^9.0.0",
     "react-color": "^2.19.3",
     "react-dropzone": "^11.4.2",
     "react-intersection-observer": "^8.32.1",
-    "react-json-tree": "^0.15.0",
+    "react-json-tree": "^0.19.0",
     "ui-box": "^5.4.1",
-    "underscore": "^1.9.1",
+    "underscore": "^1.13.1",
     "use-async-effect": "^2.2.1",
     "use-element-dimensions": "^2.1.3",
     "zustand": "^4.5.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.12",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
-    "@babel/plugin-transform-typescript": "^7.11.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-node-resolve": "^13.1.3",
     "parcel": "^2.12.0"
   },
   "exports": {

packages/ui-components/src/api/frontend.ts

@@ -5,10 +5,8 @@ import { Spinner } from "@blueprintjs/core";
 import { APIContext, APIActions, APIHelpers } from "./provider";
 import { debounce } from "underscore";
 import { APIConfig } from "./types";
-import { QueryParams } from "../util/query-string";
-import { JSONView } from "../util/json-view";
+import { QueryParams, JSONView } from "../util";
 import { IndexingProvider } from "./indexing";
-import { number } from "fp-ts";
 
 interface APIPlaceholderProps {
   isLoading: boolean;
@@ -56,9 +54,9 @@ class APIResultView<T> extends Component<APIResultProps<T>, APIResultState<T>> {
     // method will be called with null data
     placeholder: APIResultPlaceholder,
     debounce: 300,
-    children: data => {
+    children: (data) => {
       return h(JSONView, { data });
-    }
+    },
   };
   _didFetch: boolean;
   _lazyGetData: () => Promise<void>;
@@ -117,7 +115,7 @@ class APIResultView<T> extends Component<APIResultProps<T>, APIResultState<T>> {
     } else if (isValidElement(children)) {
       return cloneElement(children, {
         data,
-        isLoading
+        isLoading,
       });
     } else {
       throw new Error(
@@ -138,7 +136,7 @@ class APIResultView<T> extends Component<APIResultProps<T>, APIResultState<T>> {
         IndexingProvider,
         {
           totalCount: data.length,
-          indexOffset: 0
+          indexOffset: 0,
         },
         this.renderInner()
       );