Issue 385 uitk to salt (#386)

* update build scripts and point salt icons to original library * convert all uitk references to saly * reference heswell version od salt lab package * update sghowcase examples with salt lib
finos · Dec 19, 2022 · f4b712b · f4b712b
1 parent 7f43a93
commit f4b712b
Show file tree

Hide file tree

Showing 138 changed files with 1,308 additions and 1,292 deletions.
diff --git a/vuu-ui/package.json b/vuu-ui/package.json
@@ -8,15 +8,14 @@
     "packages/**",
     "sample-apps/**",
     "showcase",
-    "uitk/packages/core",
-    "uitk/packages/lab"
+    "salt/packages/lab"
   ],
   "scripts": {
     "lint": "eslint . --ext .js,.jsx",
     "prettier": "prettier './**/*.{js,,mjs,jsx,css,md,json}' --config ./.prettierrc",
     "format": "prettier --write './**/*.{js,,mjs,jsx,css,md,json}' --config ./.prettierrc",
     "build": "node ./scripts/build-all.mjs",
-    "build:uitk": "node ./scripts/build-uitk.mjs",
+    "build:salt": "node ./scripts/build-salt.mjs",
     "deploy:websocket-test": "node ./tools/deploy-websocket-test.mjs",
     "visualize-bundle": "esbuild-visualizer --metadata ./deployed_apps/app-vuu-example/features/feature-filtered-grid/meta.json",
     "type-defs": "node ./scripts/build-all-type-defs.mjs",

diff --git a/vuu-ui/packages/vuu-datagrid/package.json b/vuu-ui/packages/vuu-datagrid/package.json
@@ -16,8 +16,8 @@
     "/src"
   ],
   "peerDependencies": {
-    "@heswell/uitk-core": "0.8.0-vuu.1",
-    "@heswell/uitk-lab": "0.8.0-vuu.1",
+    "@salt-ds/core": "1.0.0",
+    "@heswell/salt-lab": "1.0.0-alpha.0",
     "@finos/ui-controls": "0.0.27",
     "@finos/vuu-utils": "0.0.27",
     "classnames": "^2.2.6",

diff --git a/vuu-ui/packages/vuu-datagrid/src/DataGrid.css b/vuu-ui/packages/vuu-datagrid/src/DataGrid.css
@@ -1,17 +1,17 @@
 .vuuDataGrid {
-  --grid-background: var(--uitk-container-background-medium, inherit);
+  --grid-background: var(--salt-container-tertiary-background, inherit);
   --grid-row-background: inherit;
   --grid-row-height: var(--grid-row-height, 20px);
   --grid-row-line-height: 19px;
-  --grid-row-background-selected: var(--uitk-palette-neutral-highlight);
+  --grid-row-background-selected: var(--salt-palette-neutral-highlight);
   --grid-header-cell-highlight-bg: var(--surface3);
 
   --hw-activation-indicator-thumb-bg: #2c2c2c;
   --grid-flex-align: stretch;
   --grid-cell-bg: var(--grid-cell-bg, var(--background));
   --cell-border-top-color: transparent;
   --cell-border-bottom-color: transparent;
-  --cell-border-right-color: var(--grid-cell-border-color, var(--uitk-container-borderColor-medium));
+  --cell-border-right-color: var(--grid-cell-border-color, var(--salt-separable-tertiary-borderColor));
   --cell-border-style: var(--hwDataGridCell-border-style, solid);
   --cell-highlight-bg: var(--grid-cell-highlight-bg);
   --drag-column-bg: var(--grid-drag-column-bg, 'ivory');

diff --git a/vuu-ui/packages/vuu-datagrid/src/DataGrid.tsx b/vuu-ui/packages/vuu-datagrid/src/DataGrid.tsx
@@ -1,6 +1,6 @@
 import { ConfigChangeMessage } from "@finos/vuu-data";
 import { ContextMenuProvider } from "@finos/vuu-layout";
-import { useForkRef } from "@heswell/uitk-core";
+import { useForkRef } from "@salt-ds/core";
 import cx from "classnames";
 import {
   ForwardedRef,

diff --git a/vuu-ui/packages/vuu-datagrid/src/cell-renderers/background-cell.css b/vuu-ui/packages/vuu-datagrid/src/cell-renderers/background-cell.css
@@ -1,6 +1,6 @@
 @-webkit-keyframes reactbgup1 {
   from {
-    background-color: var(--uitk-differential-positive-background);
+    background-color: var(--salt-differential-positive-background);
   }
   to {
     background-color: transparent;
@@ -9,7 +9,7 @@
 
 @-webkit-keyframes reactbgup2 {
   from {
-    background-color: var(--uitk-differential-positive-background);
+    background-color: var(--salt-differential-positive-background);
   }
   to {
     background-color: transparent;
@@ -18,7 +18,7 @@
 
 @-webkit-keyframes reactbgdown1 {
   from {
-    background-color: var(--uitk-differential-negative-background);
+    background-color: var(--salt-differential-negative-background);
   }
   to {
     background-color: transparent;
@@ -27,7 +27,7 @@
 
 @-webkit-keyframes reactbgdown2 {
   from {
-    background-color: var(--uitk-differential-negative-background);
+    background-color: var(--salt-differential-negative-background);
   }
   to {
     background-color: transparent;
@@ -36,7 +36,7 @@
 
 @-webkit-keyframes reactarrowup1 {
   from {
-    color: var(--uitk-differential-positive-foreground);
+    color: var(--salt-differential-positive-foreground);
   }
   to {
     color: transparent;
@@ -45,7 +45,7 @@
 
 @-webkit-keyframes reactarrowup2 {
   from {
-    color: var(--uitk-differential-positive-foreground);
+    color: var(--salt-differential-positive-foreground);
   }
   to {
     color: transparent;
@@ -54,7 +54,7 @@
 
 @-webkit-keyframes reactarrowdown1 {
   from {
-    color: var(--uitk-differential-negative-foreground);
+    color: var(--salt-differential-negative-foreground);
   }
   to {
     color: transparent;
@@ -63,7 +63,7 @@
 
 @-webkit-keyframes reactarrowdown2 {
   from {
-    color: var(--uitk-differential-negative-foreground);
+    color: var(--salt-differential-negative-foreground);
   }
   to {
     color: transparent;
@@ -72,11 +72,11 @@
 
 @-webkit-keyframes reactbgarrowup1 {
   0% {
-    color: var(--uitk-differential-positive-foreground);
-    background-color: var(--uitk-differential-positive-background);
+    color: var(--salt-differential-positive-foreground);
+    background-color: var(--salt-differential-positive-background);
   }
   20% {
-    color: var(--uitk-differential-positive-foreground);
+    color: var(--salt-differential-positive-foreground);
     background-color: transparent;
   }
   100% {
@@ -87,11 +87,11 @@
 
 @-webkit-keyframes reactbgarrowup2 {
   0% {
-    color: var(--uitk-differential-positive-foreground);
-    background-color: var(--uitk-differential-positive-background);
+    color: var(--salt-differential-positive-foreground);
+    background-color: var(--salt-differential-positive-background);
   }
   20% {
-    color: var(--uitk-differential-positive-foreground);
+    color: var(--salt-differential-positive-foreground);
     background-color: transparent;
   }
   100% {
@@ -102,11 +102,11 @@
 
 @-webkit-keyframes reactbgarrowdown1 {
   0% {
-    color: var(--uitk-differential-negative-foreground);
-    background-color: var(--uitk-differential-negative-background);
+    color: var(--salt-differential-negative-foreground);
+    background-color: var(--salt-differential-negative-background);
   }
   20% {
-    color: var(--uitk-differential-negative-foreground);
+    color: var(--salt-differential-negative-foreground);
     background-color: transparent;
   }
   100% {
@@ -117,11 +117,11 @@
 
 @-webkit-keyframes reactbgarrowdown2 {
   0% {
-    color: var(--uitk-differential-negative-foreground);
-    background-color: var(--uitk-differential-negative-background);
+    color: var(--salt-differential-negative-foreground);
+    background-color: var(--salt-differential-negative-background);
   }
   20% {
-    color: var(--uitk-differential-negative-foreground);
+    color: var(--salt-differential-negative-foreground);
     background-color: transparent;
   }
   100% {

diff --git a/vuu-ui/packages/vuu-datagrid/src/cell-renderers/progress-cell.css b/vuu-ui/packages/vuu-datagrid/src/cell-renderers/progress-cell.css
@@ -1,6 +1,6 @@
 .vuuProgressCell {
-  --uitkLinearProgress-minWidth: 100px;
-  --uitkLinearProgress-width: 100%;
+  --saltLinearProgress-minWidth: 100px;
+  --saltLinearProgress-width: 100%;
 }
 
 .vuuProgressCell-progress-container {

diff --git a/vuu-ui/packages/vuu-datagrid/src/cell-renderers/progress-cell.tsx b/vuu-ui/packages/vuu-datagrid/src/cell-renderers/progress-cell.tsx
@@ -1,4 +1,4 @@
-import { LinearProgress } from "@heswell/uitk-lab";
+import { LinearProgress } from "@heswell/salt-lab";
 import cx from "classnames";
 import React from "react";
 

diff --git a/vuu-ui/packages/vuu-datagrid/src/grid-cells/HeaderCell.css b/vuu-ui/packages/vuu-datagrid/src/grid-cells/HeaderCell.css
@@ -5,7 +5,7 @@
   border-bottom: solid 1px var(--heading-border-color);
   border-right: 1px solid var(--heading-border-color);
   box-sizing: border-box;
-  color: var(--uitk-text-secondary-foreground);
+  color: var(--salt-text-secondary-foreground);
   cursor: default;
   display: inline-flex;
   font-weight: bold;

diff --git a/vuu-ui/packages/vuu-datagrid/src/grid-row.css b/vuu-ui/packages/vuu-datagrid/src/grid-row.css
@@ -12,7 +12,7 @@
 }
 
 .vuuDataGridRow-even {
-  --row-background: var(--uitk-palette-neutral-background-high);
+  --row-background: var(--salt-container-secondary-background);
 }
 
 .vuuDataGridRow:not(.vuuDataGridRow-even) {
@@ -25,11 +25,11 @@
 
 .vuuDataGridRow[aria-selected='true'] {
   background-color: var(--grid-row-background-selected);
-  --cell-border-top-color: var(--uitk-selectable-borderColor-selected);
+  --cell-border-top-color: var(--salt-selectable-borderColor-selected);
 }
 
 .vuuDataGridRow-lastSelected {
-  --cell-border-bottom-color: var(--uitk-selectable-borderColor-selected);
+  --cell-border-bottom-color: var(--salt-selectable-borderColor-selected);
 }
 
 .vuuDataGridRow.expanded {

diff --git a/vuu-ui/packages/vuu-filters/package.json b/vuu-ui/packages/vuu-filters/package.json
@@ -28,7 +28,7 @@
   "peerDependencies": {
     "@finos/vuu-data": "0.0.26",
     "@finos/vuu-utils": "0.0.26",
-    "@heswell/uitk-lab": "0.8.8-vuu.1",
+    "@heswell/salt-lab": "1.0.0-alpha.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }

diff --git a/vuu-ui/packages/vuu-filters/src/filter-input/FilterInput.css b/vuu-ui/packages/vuu-filters/src/filter-input/FilterInput.css
@@ -1,26 +1,26 @@
 
-.uitk-density-high {
+.salt-density-high {
     --vuuFilterEditor-buttonWidth: 20px;
     --vuuFilterEditor-height: 22px;
 }
 
 
 .vuuFilterInput {
-    --vuuFilterEditor-background: var(--uitk-container-background-medium);
-    --vuuFilterEditor-color: var(--uitk-text-primary-foreground);
-    --vuuFilterEditor-fontFamily: var(--uitk-typography-fontFamily);
-    --vuuFilterEditor-fontSize: var(--uitk-text-fontSize);
-    --vuuFilterEditor-cursorColor: var(--uitk-text-secondary-foreground);
-    --vuuFilterEditor-selectionBackground: var(--uitk-text-background-selected);
-    --vuuFilterEditor-tooltipBackground: var(--uitk-container-background-high);
-    --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--uitk-container-borderWidth) var(--uitk-container-borderStyle); 
-    --vuuFilterEditor-tooltipElevation: var(--uitk-overlayable-shadow-popout);
-    --vuuFilterEditor-suggestion-selectedBackground: var(--uitk-selectable-background-selected);
+    --vuuFilterEditor-background: var(--salt-container-background-medium);
+    --vuuFilterEditor-color: var(--salt-text-primary-foreground);
+    --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
+    --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
+    --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);
+    --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
+    --vuuFilterEditor-tooltipBackground: var(--salt-container-background-high);
+    --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle); 
+    --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
+    --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);
     --vuuFilterEditor-suggestion-height: 24px;
     --vuuFilterEditor-variableColor: blue;
 
     align-items: center;
-    border-color: var(--uitk-container-borderColor-medium);
+    border-color: var(--salt-container-borderColor-medium);
     border-style: solid none;
     border-width: 1px;
     box-sizing: border-box;
@@ -36,7 +36,7 @@
 .vuuFilterInput-FilterButton,
 .vuuFilterInput-ClearButton {
     --vuu-icon-size: 12px;
-    --uitkButton-width: var(--vuuFilterEditor-buttonWidth, 28px);
+    --saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px);
 }
 
 
diff --git a/vuu-ui/packages/vuu-filters/src/filter-input/FilterInput.tsx b/vuu-ui/packages/vuu-filters/src/filter-input/FilterInput.tsx
@@ -1,7 +1,7 @@
 import { Filter } from "@finos/vuu-filters";
 import { HTMLAttributes } from "react";
 import { SuggestionConsumer, useCodeMirrorEditor } from "./useCodeMirrorEditor";
-import { Button } from "@heswell/uitk-core";
+import { Button } from "@salt-ds/core";
 
 import "./FilterInput.css";
 

diff --git a/vuu-ui/packages/vuu-filters/src/filter-toolbar/FilterDropdown.tsx b/vuu-ui/packages/vuu-filters/src/filter-toolbar/FilterDropdown.tsx
@@ -1,4 +1,4 @@
-import { Dropdown, DropdownProps } from "@heswell/uitk-lab";
+import { Dropdown, DropdownProps } from "@heswell/salt-lab";
 import { useCallback, useState } from "react";
 import { ISuggestionProvider } from "../filter-input";
 

diff --git a/vuu-ui/packages/vuu-filters/src/filter-toolbar/FilterToolbar.css b/vuu-ui/packages/vuu-filters/src/filter-toolbar/FilterToolbar.css
@@ -1,11 +1,11 @@
 .vuuFilterDropdown,
 .vuuFilterSwitch {
-    --uitkToolbarField-marginTop: 0;
+    --saltToolbarField-marginTop: 0;
 
     height: 100%;
 }
 
-.vuuFilterDropdown.uitkFormField-focused:before {
+.vuuFilterDropdown.saltFormField-focused:before {
     top: 2px !important;
     bottom: 2px !important;
 }
diff --git a/vuu-ui/packages/vuu-filters/src/filter-toolbar/FilterToolbar.tsx b/vuu-ui/packages/vuu-filters/src/filter-toolbar/FilterToolbar.tsx
@@ -1,5 +1,5 @@
 import { Filter } from "@finos/vuu-filters";
-import { Toolbar, ToolbarProps } from "@heswell/uitk-lab";
+import { Toolbar, ToolbarProps } from "@heswell/salt-lab";
 import cx from "classnames";
 import { useFilterToolbar } from "./useFilterToolbar";
 import { SuggestionConsumer } from "../filter-input";

diff --git a/vuu-ui/packages/vuu-filters/src/filter-toolbar/useFilterToolbar.tsx b/vuu-ui/packages/vuu-filters/src/filter-toolbar/useFilterToolbar.tsx
@@ -4,7 +4,7 @@ import {
   isMultiValueFilter,
   isSingleValueFilter,
 } from "@finos/vuu-filters";
-import { ToggleButton, ToolbarField } from "@heswell/uitk-lab";
+import { ToggleButton, ToolbarField } from "@heswell/salt-lab";
 import { ReactElement } from "react";
 import { ISuggestionProvider, SuggestionConsumer } from "@finos/vuu-filters";
 import { FilterDropdown } from "./FilterDropdown";

diff --git a/vuu-ui/packages/vuu-filters/src/filter-utils.ts b/vuu-ui/packages/vuu-filters/src/filter-utils.ts
@@ -16,7 +16,7 @@ import {
 } from "./filterTypes";
 import { Row } from "@finos/vuu-utils/src/row-utils";
 import { KeyedColumnDescriptor } from "@finos/vuu-datagrid/src/grid-model";
-import { P } from "@heswell/uitk-lab";
+import { P } from "@heswell/salt-lab";
 
 export const AND = "and";
 export const EQUALS = "=";

diff --git a/vuu-ui/packages/vuu-layout/package.json b/vuu-ui/packages/vuu-layout/package.json
@@ -18,9 +18,9 @@
   ],
   "types": "src/index.ts",
   "peerDependencies": {
-    "@heswell/uitk-core": "0.8.0-vuu.1",
-    "@heswell/uitk-icons": "0.7.0-vuu.1",
-    "@heswell/uitk-lab": "0.8.0-vuu.1",
+    "@salt-ds/core": "1.0.0",
+    "@salt-ds/icons": "1.0.0",
+    "@heswell/salt-lab": "1.0.0-alpha.0",
     "@finos/ui-controls": "0.0.26",
     "@finos/vuu-utils": "0.0.26",
     "classnames": "^2.2.6",