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

package/lib/esm/utils.d.ts

@@ -0,0 +1 @@
+export declare function cleanLabel(varName?: string): string | undefined;

package/lib/esm/utils.js

@@ -0,0 +1,19 @@
+export function cleanLabel(varName) {
+    if (!varName || typeof varName !== 'string') {
+        return varName;
+    }
+    let result = varName.trim();
+    if (!result)
+        return '';
+    if (result.includes(' '))
+        return result;
+    result = result.replace(/_/g, ' ');
+    result = result.replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');
+    result = result.replace(/([a-z])([A-Z])/g, '$1 $2');
+    result = result.replace(/([a-zA-Z])(\d)/g, '$1 $2');
+    result = result.replace(/(\d)([a-zA-Z])/g, '$1 $2');
+    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(' ');
+}
+//# sourceMappingURL=utils.js.map

package/lib/esm/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,UAAU,CAAC,OAAgB;IACvC,IAAI,CAAC,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QAC1C,OAAO,OAAO,CAAC;IACnB,CAAC;IAED,IAAI,MAAM,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC;IAC5B,IAAI,CAAC,MAAM;QAAE,OAAO,EAAE,CAAC;IACvB,IAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;QAAE,OAAO,MAAM,CAAC;IAEvC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAInC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC;IAEzD,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;IAGpD,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;IAGpD,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;IAGpD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAClE,MAAM,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACtC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAC7D,CAAC;IAGF,OAAO,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACtC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "uiconfig-blueprint",
   "name:umd": "bpui",
-  "version": "0.1.0-dev.11",
+  "version": "0.1.0-dev.12",
   "description": "Blueprint.js wrapper and custom components for web controls UI. To be used with uiconfig.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -16,10 +16,13 @@
       "require": "./dist/index.js",
       "browser": "./dist/index.js"
     },
+    "./dist/": {
+      "import": "./dist/",
+      "require": "./dist/"
+    },
     "./lib/esm": {
-      "types": "./dist/index.d.ts",
-      "import": "./lib/esm/index.js",
-      "require": "./dist/index.js"
+      "types": "./lib/esm/index.d.ts",
+      "import": "./lib/esm/index.js"
     },
     "./lib/esm/*": {
       "types": "./lib/esm/*.d.ts",
@@ -29,6 +32,10 @@
       "import": "./lib/css/*.css",
       "require": "./lib/css/*.css"
     },
+    "./src/": {
+      "import": "./src/",
+      "require": "./src/"
+    },
     "./package.json": "./package.json"
   },
   "files": [

package/src/bpComponents/BPButtonComponent.tsx

@@ -22,7 +22,7 @@ export class BPButtonComponent extends BPLabelledComponent<()=>void, BPLabelledC
                  style={{flexBasis: this.state.baseWidth ?? this.flexBasis}}
             >
                 <Button className="bpButton"
-                        disabled={this.state.disabled}
+                        disabled={this.state.disabled || this.state.readOnly}
                         intent={Intent.PRIMARY}
                         // small={true}
                         fill={true}

package/src/bpComponents/BPColorInputComponent.tsx

@@ -39,7 +39,7 @@ export class BPColorInputComponent extends BPValueComponent<ColorRepresentation,
         else console.error('not supported color', val)
         this._tempColor.set(val)
         if (srgbConvert) this._tempColor.convertLinearToSRGB()
-        const value = '#' + this._tempColor.getHexString()
+        const value = '#' + this._tempColor.getHexString().toUpperCase()
         // console.log('color', mode, value, val)
         return {...state, mode, value, lastValue: val, srgbConvert} // default config.srgb = false
     }

package/src/bpComponents/BPDropdownInputComponent.tsx

@@ -3,6 +3,7 @@ import {Button, MenuItem} from "@blueprintjs/core";
 import {BPInputComponent} from "./BPInputComponent";
 import {BPValueComponentState} from "./BPValueComponent";
 import {ItemRenderer, Select} from "@blueprintjs/select";
+import {cleanLabel} from "../utils";
 
 export interface DropdownItem{
     label: string,
@@ -40,8 +41,8 @@ export class BPDropdownInputComponent extends BPInputComponent<string|number, BP
 
     getUpdatedState(state: BPDropdownComponentState): BPDropdownComponentState {
         const children = this.context.methods.getChildren(this.props.config)
-        const options: DropdownItem[] = children.map(value => {
-            const label = this.context.methods.getLabel(value)
+        const options: DropdownItem[] = children.map((value, i) => {
+            const label = cleanLabel(this.context.methods.getLabel(value)) || `Option ${i}`
             return {label, value: value!.value ?? label}
         })
 

package/src/bpComponents/BPFolderComponent.scss

@@ -27,6 +27,10 @@
   display: flex;
   flex-direction: column;
   background-color: $light-gray4 !important;
+
+
+  //border-top: #7c7c7c7c 1px solid !important;
+  //border-bottom: #7c7c7c7c 1px solid !important;
 }
 .bp5-dark .folder-card {
   background-color: $dark-gray1 !important;
@@ -44,6 +48,9 @@
 
 
 .folder-trigger-button {
+  font-size: 12px !important;
+  font-weight: 550 !important;
+
   margin-top: 1px;
   display: flex;
   align-items: center;
@@ -76,7 +83,7 @@
   }
 
   &.folder-trigger-button-expanded{
-    background-color: $dark-gray2 !important;
+    //background-color: $dark-gray2 !important;
   }
 }
 
@@ -119,3 +126,12 @@
   }
 }
 
+.folder-card{
+  .bp5-input-group .bp5-input{
+    font-size: var(--pt-font-size-small);
+  }
+
+  .bp5-button{
+    font-size: var(--pt-font-size-small);
+  }
+}

package/src/bpComponents/BPFolderComponent.tsx

@@ -90,7 +90,8 @@ export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, l
                     disabled={props.disabled}
                     small={props.minimal}
                     style={props.level ? {marginLeft: "6px"} : {fontSize: "0.95rem", paddingTop: "8px", paddingBottom: "8px"}}
-                    intent={props.open ? Intent.PRIMARY : Intent.NONE}
+                    // intent={props.open ? Intent.PRIMARY : Intent.NONE}
+                    intent={Intent.NONE}
                     // icon={props.enabled !== undefined  && <span style={{minWidth: '20px'}}></span>} // adding a span here will center the text in the button
                     icon={(
                         <>
@@ -99,7 +100,8 @@ export const FolderHeadCard: React.FC<React.PropsWithChildren<{ open: boolean, l
                                 transition: "rotate 0.25s ease-in-out"
                             }}/>
                         </>
-                    )}>{props.label}
+                    )}
+                >{props.label}
                 </Button>
                 {hasEnabled && <Checkbox
                     style={{margin: 0, position: 'absolute', left: '10px'}}

package/src/bpComponents/BPLabelledComponent.tsx

@@ -1,4 +1,5 @@
 import {BPComponent, BPComponentProps, BPComponentState, UiConfigRendererContextType} from "./BPComponent";
+import {cleanLabel} from "../utils";
 
 export type BPLabelledComponentState = BPComponentState & {
     label: string
@@ -12,8 +13,7 @@ export abstract class BPLabelledComponent<TValue, TState, TProps extends BPCompo
     getUpdatedState(state: TState & BPLabelledComponentState): TState & BPLabelledComponentState {
         return super.getUpdatedState({
             ...state,
-            label: this.context.methods.getLabel(this.props.config) || state.label,
+            label: cleanLabel(this.context.methods.getLabel(this.props.config)) || state.label,
         })
     }
-
 }

package/src/components/ExtendedNumericInput.tsx

@@ -291,7 +291,7 @@ export class ExtendedNumericInput extends React.PureComponent<Props, IExtendedNu
         return (+value).toString();
     };
 
-    private roundValue = (value: number, precision: number = 1) => {
+    private roundValue = (value: number, precision: number = 6) => {
         // round to at most two decimal places
         return Math.round(value * 10 ** precision) / 10 ** precision;
     };

package/src/components/NumericInput.tsx

@@ -45,7 +45,6 @@ import {
     parseStringToStringNumber,
     sanitizeNumericInput,
     toLocaleString,
-    toMaxPrecision,
 } from "@blueprintjs/core/src/components/forms/numericInputUtils";
 
 export interface NumericInputProps extends InputSharedProps {
@@ -174,7 +173,7 @@ export interface NumericInputState {
     prevMinProp?: number;
     prevMaxProp?: number;
     shouldSelectAfterUpdate: boolean;
-    stepMaxPrecision: number;
+    // stepMaxPrecision: number;
     value: string;
 }
 
@@ -241,19 +240,19 @@ export class NumericInput extends AbstractPureComponent<HTMLInputProps & Numeric
         // in controlled mode, use props.value
         // in uncontrolled mode, if state.value has not been assigned yet (upon initial mount), use props.defaultValue
         const value = props.value?.toString() ?? state.value;
-        const stepMaxPrecision = NumericInput.getStepMaxPrecision(props);
+        // const stepMaxPrecision = NumericInput.getStepMaxPrecision(props);
 
         const sanitizedValue =
             value !== NumericInput.VALUE_EMPTY
-                ? NumericInput.roundAndClampValue(value, stepMaxPrecision, props.min, props.max, 0, props.locale)
+                ? NumericInput.roundAndClampValue(value, /*stepMaxPrecision,*/ props.min, props.max, 0, props.locale)
                 : NumericInput.VALUE_EMPTY;
 
         // if a new min and max were provided that cause the existing value to fall
         // outside of the new bounds, then clamp the value to the new valid range.
         if (didBoundsChange && sanitizedValue !== state.value) {
-            return { ...nextState, stepMaxPrecision, value: sanitizedValue };
+            return { ...nextState, /*stepMaxPrecision,*/ value: sanitizedValue };
         }
-        return { ...nextState, stepMaxPrecision, value };
+        return { ...nextState, /*stepMaxPrecision,*/ value };
     }
 
     private static CONTINUOUS_CHANGE_DELAY = 300;
@@ -262,17 +261,17 @@ export class NumericInput extends AbstractPureComponent<HTMLInputProps & Numeric
 
     // Value Helpers
     // =============
-    private static getStepMaxPrecision(props: HTMLInputProps & NumericInputProps) {
-        if (props.minorStepSize != null) {
-            return Utils.countDecimalPlaces(props.minorStepSize);
-        } else {
-            return Utils.countDecimalPlaces(props.stepSize!);
-        }
-    }
+    // private static getStepMaxPrecision(props: HTMLInputProps & NumericInputProps) {
+    //     if (props.minorStepSize != null) {
+    //         return Utils.countDecimalPlaces(props.minorStepSize);
+    //     } else {
+    //         return Utils.countDecimalPlaces(props.stepSize!);
+    //     }
+    // }
 
     private static roundAndClampValue(
         value: string,
-        stepMaxPrecision: number,
+        // stepMaxPrecision: number,
         min: number | undefined,
         max: number | undefined,
         delta = 0,
@@ -282,7 +281,8 @@ export class NumericInput extends AbstractPureComponent<HTMLInputProps & Numeric
             return NumericInput.VALUE_EMPTY;
         }
         const currentValue = parseStringToStringNumber(value, locale);
-        const nextValue = toMaxPrecision(Number(currentValue) + delta, stepMaxPrecision);
+        // const nextValue = toMaxPrecision(Number(currentValue) + delta, stepMaxPrecision);
+        const nextValue = (Number(currentValue) + delta);
         const clampedValue = clampValue(nextValue, min, max);
         return toLocaleString(clampedValue, locale);
     }
@@ -290,7 +290,7 @@ export class NumericInput extends AbstractPureComponent<HTMLInputProps & Numeric
     public state: NumericInputState = {
         currentImeInputInvalid: false,
         shouldSelectAfterUpdate: false,
-        stepMaxPrecision: NumericInput.getStepMaxPrecision(this.props),
+        // stepMaxPrecision: NumericInput.getStepMaxPrecision(this.props),
         value: getValueOrEmptyValue(this.props.value ?? this.props.defaultValue),
     };
 
@@ -664,7 +664,7 @@ export class NumericInput extends AbstractPureComponent<HTMLInputProps & Numeric
     private roundAndClampValue(value: string, delta = 0) {
         return NumericInput.roundAndClampValue(
             value,
-            this.state.stepMaxPrecision,
+            // this.state.stepMaxPrecision,
             this.props.min,
             this.props.max,
             delta,

package/src/renderer.scss

@@ -71,7 +71,7 @@
   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;
+  //font-size: $pt-font-size-small;
   height: $pt-input-height;
   line-height: normal;
 
@@ -85,6 +85,9 @@
   .bp5-dark & {
     color: $gray5;
   }
+
+  font-size: 11px !important;
+  font-weight: 450 !important;
 }
 
 .switch{

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(' ');
+}