uiconfig-blueprint 0.1.0-dev.1 → 0.1.0-dev.12

package/src/components/tree2.scss

@@ -0,0 +1,69 @@
+
+// blueprint tree drag and drop styles
+
+//.bp5-tree-node-dragging{
+//    opacity: 0.5;
+//    background-color: green !important;
+//    box-shadow: none;
+//}
+//.bp5-tree-node-dragover{
+//    opacity: 0.5;
+//    background-color: red;
+//    box-shadow: none;
+//}
+.bp5-tree-node-dragover{
+  //opacity: 0.5;
+  //background-color: red;
+  //box-shadow: none;
+  outline: var(--pt-intent-primary) solid 2px;
+  outline-offset: -2px;
+}
+
+.bp5-tree-drop-spacer {
+  width: 100%;
+  height: 0;
+  overflow: visible;
+  font-size: 0;
+  background: none;
+  pointer-events: none;
+  position: relative;
+
+  div{
+    width: 100%;
+    min-height: 10px;
+    background: transparent;
+    position: absolute;
+    transform: translateY(-50%);
+    z-index: 100;
+  }
+  .bp5-tree-dragging-node &{
+    pointer-events: auto;
+  }
+}
+
+.bp5-tree-node-content{
+  transition: background-color 0.2s ease-in-out;
+}
+
+@for $i from 1 through 10 {
+  .bp5-tree-node-content-#{$i} {
+    padding-left: calc(10px * $i);
+  }
+}
+
+.bp5-tree-node-caret{
+  padding: 7px 5px;
+}
+
+.bp5-tree-node-content:has(.bp5-icon) {
+  .bp5-tree-node-caret, .bp5-tree-node-caret-none {
+    min-width: 0px;
+  }
+
+  // because bp5-tree-node-icon is not applied on this icon
+  .bp5-icon:has(.bp5-tree-node-icon-svg), .bp5-tree-node-icon{
+    margin-right: 0px;
+    padding: 0 5px;
+    position: relative;
+  }
+}

package/src/components/treeTypes.ts

@@ -0,0 +1,97 @@
+/*
+ * Copyright 2021 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type {IconName, MaybeElement} from "@blueprintjs/core";
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export interface TreeNodeInfo<T = {}> {
+    /**
+     * A space-delimited list of class names for this tree node element.
+     */
+    className?: string;
+
+    /**
+     * Child tree nodes of this node.
+     */
+    childNodes?: Array<TreeNodeInfo<T>>;
+
+    /**
+     * Whether this tree node is non-interactive. Enabling this prop will ignore
+     * mouse event handlers (in particular click, down, enter, leave).
+     */
+    disabled?: boolean;
+
+    /**
+     * Whether the caret to expand/collapse a node should be shown.
+     * If not specified, this will be true if the node has children and false otherwise.
+     */
+    hasCaret?: boolean;
+
+    /**
+     * The name of a Blueprint icon (or an icon element) to render next to the node's label.
+     */
+    icon?: IconName | MaybeElement;
+
+    /**
+     * A unique identifier for the node.
+     */
+    id: string | number;
+
+    /**
+     */
+    isExpanded?: boolean;
+
+    /**
+     * Whether this node is selected.
+     *
+     * @default false
+     */
+    isSelected?: boolean;
+
+    /**
+     * The main label for the node.
+     */
+    label: string | React.JSX.Element;
+
+    /**
+     * A secondary label/component that is displayed at the right side of the node.
+     */
+    secondaryLabel?: string | MaybeElement;
+
+    /**
+     * An optional custom user object to associate with the node.
+     * This property can then be used in the `onClick`, `onContextMenu` and `onDoubleClick`
+     * event handlers for doing custom logic per node.
+     */
+    nodeData?: T;
+
+    /**
+     * Whether this node can be dragged. If false, drag events will not be enabled for this node.
+     */
+    draggable?: boolean;
+
+    /**
+     * Whether this node can be a drop target. If false, drop events will not be enabled for this node.
+     */
+    droppable?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type TreeEventHandler<T = {}> = (
+    node: TreeNodeInfo<T>,
+    nodePath: number[],
+    e: React.MouseEvent<HTMLElement>,
+) => void;

package/src/lib.ts

@@ -8,11 +8,12 @@ export * from './components/ExtendedNumericInput'
 export * from './components/FileComponent'
 export * from './components/FormGroupComponent'
 export * from './components/InspectorStackComponent'
-export * from './components/variableIcons'
+export * from './components/iconMapping'
 export * from './components/VisualStyleContext'
 export * from './components/DialogContext'
 export * from './components/loadingState'
 export * from './components/AppToaster'
+export * from "./components/treeTypes";
 export * from './bpComponents/BPButtonComponent'
 export * from './bpComponents/BPColorInputComponent'
 export * from './bpComponents/BPComponent'
@@ -31,3 +32,5 @@ export * from './bpComponents/BPTreeComponent'
 export * from './bpComponents/BPTreeFolderComponent'
 export * from './bpComponents/BPValueComponent'
 export * from './bpComponents/BPVectorInputComponent'
+export * from "./bpComponents/NumberUnits";
+export * from "./bpComponents/GetNumberTransformFunctions";

package/src/renderer.scss

@@ -54,12 +54,24 @@
 @import "components/common";
 @import "bpComponents/index";
 
-.bp5-form-group.bp5-inline label.bp5-label{
+:root { font-family: Inter, sans-serif; }
+
+.bp5-vars, :root {
+  --pt-text-color: var(--gray-1) !important;
+  --pt-font-family-sans: Inter, ui-sans-serif, -apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue","Icons16",sans-serif;
+}
+.bp5-dark {
+  --pt-text-color: var(--light-gray2) !important;
+  --pt-font-family-sans: Inter, ui-sans-serif, -apple-system,"BlinkMacSystemFont","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue","Icons16",sans-serif;
+}
+
+.bp5-form-group.bp5-inline label.bp5-label, .switch .bp5-label {
   text-overflow: ellipsis;
   overflow: hidden;
-  max-width: calc(min(50%, 7*$pt-font-size-small));
-  width: 50%;
-  font-size: $pt-font-size-small;
+  max-width: calc(8 * $pt-font-size-small);
+  min-width: calc(8 * $pt-font-size-small);
+  width: calc(8 * $pt-font-size-small);
+  //font-size: $pt-font-size-small;
   height: $pt-input-height;
   line-height: normal;
 
@@ -68,11 +80,19 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+
+  color: $dark-gray1;
+  .bp5-dark & {
+    color: $gray5;
+  }
+
+  font-size: 11px !important;
+  font-weight: 450 !important;
 }
 
 .switch{
   display: flex;
-  justify-content: space-between;
+  justify-content: left;
   align-items: center;
   flex-direction: row-reverse;
   margin-bottom: 0;
@@ -89,12 +109,12 @@
   align-items: center;
   justify-content: flex-end;
   gap: calc($pt-grid-size / 2);
-  height: $pt-input-height;
+  //height: $pt-input-height; // todo: this will break the texture/image input
   flex-grow: 1;
 }
 
 :root{
-  --background-color-transition-time: 0.1s;
+  --background-color-transition-time: 0.2s;
   --background-color-transition: background-color var(--background-color-transition-time) ease-in-out;
 }
 .bp5-panel-stack-view {
@@ -108,10 +128,16 @@
   }
 }
 
-#bpInspectorCard {
+.bpInspectorCard {
   height: 100%;
+  flex-grow: 1;
+  position: relative;
   overflow-y: scroll;
   padding: 0 0 0 0;
+
+  .bp5-panel-stack2-header{
+    box-shadow: none;
+  }
 }
 #blueprintUiContainer {
   height: 100%;
@@ -119,12 +145,12 @@
   padding: 0 0 0 0;
 
   position: fixed;
-  top: 0;
-  right: 10px;
+  top: 20px;
+  right: 20px;
   width: var(--blueprint-ui-container-width);
   pointer-events: auto;
-  max-height: calc(100% - 6rem);
-  border-radius: 0.5rem;
+  max-height: calc(100% - 40px);
+  border-radius: $pt-grid-size;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
@@ -142,6 +168,7 @@
 .folderContent {
   flex: 1 1 auto;
   max-width: 100%;
+  margin-left: calc($pt-grid-size * 0.5);
 }
 
 //button {
@@ -194,3 +221,47 @@
   user-select: none; // todo: why is this needed?
   transition: var(--background-color-transition);
 }
+
+.file-component-select{
+  > select {
+    padding-right: 18px;
+    padding-left: 8px;
+  }
+  > .bp5-icon{
+    right: 0px;
+  }
+}
+
+.bp5-panel-stack2-view{
+  background: transparent;
+}
+
+.bp5-slider-handle{
+  border-radius: 100%;
+}
+
+.bp5-collapse .bp5-collapse-body {
+  transition: transform 0.3s var(--pt-transition-ease), opacity 0.3s;
+}
+.bp5-collapse {
+  transition: height 0.3s var(--pt-transition-ease);
+}
+
+// todo move somewhere
+.bp5-vars, :root {
+  --slider-progress-color: hsla(var(--gray1-hsl), 0.2);
+}
+
+.bp5-dark {
+  --slider-progress-color: hsla(var(--gray4-hsl),0.15);
+}
+
+.bp5-slider-progress, .bp5-slider-track{
+  height: 3px;
+  top: calc($pt-grid-size - 3px)
+}
+.bp5-slider-handle{
+  //background-color: hsla(var(--pt-intent-primary-hsl), 0.7) !important;
+  background-color: hsla(var(--pt-intent-primary-hsl), 1) !important;
+  //backdrop-filter: blur(4px);
+}

package/src/utils.ts

@@ -0,0 +1,34 @@
+
+// todo move to uiConfigMethods
+export function cleanLabel(varName?: string): string|undefined {
+    if (!varName || typeof varName !== 'string') {
+        return varName;
+    }
+
+    let result = varName.trim();
+    if (!result) return '';
+    if(result.includes(' ')) return result; // already has spaces
+
+    result = result.replace(/_/g, ' ');
+
+    // Insert spaces before uppercase letters (camelCase handling)
+    // First handle sequences like "XMLHttp" -> "XML Http"
+    result = result.replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');
+    // Then handle regular camelCase like "firstName" -> "first Name"
+    result = result.replace(/([a-z])([A-Z])/g, '$1 $2');
+
+    // Insert spaces before numbers that follow letters
+    result = result.replace(/([a-zA-Z])(\d)/g, '$1 $2');
+
+    // Insert spaces after numbers that are followed by letters
+    result = result.replace(/(\d)([a-zA-Z])/g, '$1 $2');
+
+    // Split into words, capitalize first letter of each word, and join with spaces
+    const words = result.split(/\s+/).filter(word => word.length > 0);
+    const capitalizedWords = words.map(word =>
+        word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+    );
+
+
+    return capitalizedWords.join(' ');
+}

package/tsconfig.json

@@ -19,6 +19,7 @@
         "sourceMap": true,
         "target": "es6",
         "strictNullChecks": true,
+        "skipLibCheck": true,
         "lib": [
             "es5",
             "es2015",

package/dist/allPaths-EYaH0Usv.js

@@ -1,23 +0,0 @@
-import { I as n } from "./index-0vU2D25U.js";
-import { I as e } from "./index-JBvBPdy9.js";
-import { p as r, I as s } from "./index-OyL-zObJ.js";
-/**
- * @license
- * uiconfig-blueprint v0.1.0-dev.1
- * Copyright 2022-2024 repalash <palash@shaders.app>
- * Apache-2.0 License
- */
-function I(o, t) {
-  var a = r(o);
-  return t === s.STANDARD ? n[a] : e[a];
-}
-function p(o) {
-  return r(o);
-}
-export {
-  n as IconSvgPaths16,
-  e as IconSvgPaths20,
-  I as getIconPaths,
-  p as iconNameToPathsRecordKey
-};
-//# sourceMappingURL=allPaths-EYaH0Usv.js.map