Merge branch 'column-components-improvement'

* column-components-improvement:
  Remove extra command
  Updated basic styles for column components

package.json

@@ -83,5 +83,8 @@
     "geologic-patterns@2.0.0-dev1": {
       "unplugged": true
     }
+  },
+  "dependencies": {
+    "@types/react": "^18.3.12"
   }
 }

packages/column-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-components",
-  "version": "1.0.0-dev2",
+  "version": "1.0.0-dev3",
   "description": "React rendering primitives for stratigraphic columns",
   "keywords": [
     "geology",
@@ -37,12 +37,10 @@
   "license": "MIT",
   "devDependencies": {
     "parcel": "^2.12.0",
-    "postcss": "^8.0.0",
-    "postcss-modules": "^4.3.0",
     "stylus": "^0.59.0"
   },
   "dependencies": {
-    "@macrostrat/hyper": "^2.1.0",
+    "@macrostrat/hyper": "^3.0.2",
     "chroma-js": "^2.1.0",
     "classnames": "^2.2.6",
     "d3-axis": "^1.0.12",
@@ -63,7 +61,7 @@
     "react-scroll": "^1.7.16",
     "react-select": "^3.0.8",
     "react-svg-textures": "^1.4.7",
-    "ui-box": "^3.0.2",
+    "ui-box": "^5.4.1",
     "uuid": "^7.0.3"
   },
   "peerDependencies": {

packages/column-components/src/context/asset-path.ts

@@ -5,25 +5,31 @@
  */
 import { createContext } from "react";
 import h from "@macrostrat/hyper";
-import T from "prop-types";
 
-const AssetPathContext = createContext({
-  resolveSymbol() {},
+interface AssetPathCtx {
+  resolveSymbol: (symbol: string) => string | null;
+}
+
+const AssetPathContext = createContext<AssetPathCtx>({
+  resolveSymbol(): string | null {
+    return null;
+  },
 });
 
-const AssetPathProvider = function (props) {
+interface AssetPathProviderProps extends AssetPathCtx {
+  children: React.ReactNode;
+}
+
+function AssetPathProvider(props: AssetPathProviderProps) {
   const { children, resolveSymbol } = props;
   return h(
+    // @ts-ignore
     AssetPathContext.Provider,
     {
       value: { resolveSymbol },
     },
     children
   );
-};
-
-AssetPathProvider.propTypes = {
-  resolveSymbol: T.func.isRequired,
-};
+}
 
 export { AssetPathContext, AssetPathProvider };

packages/column-components/src/context/column.ts

@@ -1,10 +1,9 @@
 import { scaleLinear, ScaleContinuousNumeric, ScaleLinear } from "d3-scale";
 import React, { createContext, useContext, useMemo } from "react";
 import h from "@macrostrat/hyper";
-import T from "prop-types";
 
 type HeightRange = [number, number];
-type ColumnScale = ScaleContinuousNumeric<HeightRange, number>;
+type ColumnScale = ScaleContinuousNumeric<HeightRange, number> | any;
 
 type ColumnScaleClamped = ScaleLinear<number, number>;
 
@@ -14,6 +13,8 @@ declare interface ColumnDivision {
   surface: number;
   bottom: number;
   top: number;
+  // Extra properties that are there for legacy purposes
+  flooding_surface_order?: number;
 }
 
 enum ColumnAxisType {
@@ -50,13 +51,13 @@ const rangeOrHeight = function (props, propName) {
 
 interface ColumnProviderProps<T extends ColumnDivision> {
   pixelsPerMeter?: number;
-  divisions: T;
-  range?: HeightRange;
+  divisions: T[];
+  range?: HeightRange | any;
   height?: number;
   zoom?: number;
   width?: number;
   axisType?: ColumnAxisType;
-  children?: React.ReactChild;
+  children?: any;
 }
 
 function ColumnProvider<T extends ColumnDivision>(

packages/column-components/src/context/facies.ts

@@ -3,7 +3,7 @@
  * DS102: Remove unnecessary code created because of implicit returns
  * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
  */
-import { Component, createContext } from "react";
+import { Component, createContext, ExoticComponent } from "react";
 import { StatefulComponent } from "@macrostrat/ui-components";
 import h from "@macrostrat/hyper";
 
@@ -12,7 +12,7 @@ const FaciesContext = createContext({
   onColorChanged() {},
 });
 
-class FaciesProvider extends StatefulComponent {
+class FaciesProvider extends StatefulComponent<any, any> {
   constructor(props) {
     super(props);
     this.state = {
@@ -45,6 +45,7 @@ class FaciesProvider extends StatefulComponent {
       ...procedures,
       ...rest,
     };
+
     return h(FaciesContext.Provider, { value }, children);
   }
 }

packages/column-components/src/context/lithology.ts

@@ -8,8 +8,9 @@ import h from "@macrostrat/hyper";
 
 const LithologyContext = createContext({ lithologies: [] });
 
-const LithologyProvider = function(props) {
+const LithologyProvider = function (props) {
   const { lithologies, children } = props;
+  // @ts-ignore
   return h(LithologyContext.Provider, { value: { lithologies } }, children);
 };