uiconfig-blueprint 0.0.2 → 0.1.0-dev.1

package/src/components/DialogContext.tsx

@@ -0,0 +1,150 @@
+import {createContext, Dispatch, ReactNode, SetStateAction, useCallback, useContext, useState} from 'react'
+import {Button, Dialog, DialogBody, DialogFooter, FormGroup, InputGroup} from '@blueprintjs/core'
+import {useLoadingState} from './loadingState'
+import {Intent} from '@blueprintjs/core/src/common/intent'
+
+export type DialogStateType = {
+    isOpen: boolean,
+    title: string,
+    content: ReactNode,
+    actions: ReactNode,
+    state: any,
+    canClose: boolean // if true, dialog can be closed by clicking outside of it
+}
+export const defaultDialogContext = {
+    isOpen: false, title: '',
+    content: null as ReactNode,
+    actions: null as ReactNode,
+    state: {} as any, canClose: true,
+}
+export function setupDialog(){
+    const [dialog, setDialog] = useState<DialogStateType>(defaultDialogContext)
+    const open = useCallback((d: Partial<DialogStateType>)=>{
+        setDialog({...dialog, isOpen: true, ...d})
+    }, [dialog, setDialog])
+    const close = useCallback(()=>setDialog({...dialog, isOpen: false}), [dialog, setDialog])
+    return {dialog, open, close, setDialog}
+}
+export const DialogContext = createContext<{dialog: DialogStateType, open: (d: Partial<DialogStateType>)=>void, close: ()=>void, setDialog: Dispatch<SetStateAction<DialogStateType>>}>(
+    {dialog: defaultDialogContext, open: ()=>{}, close: ()=>{}, setDialog: ()=>{}}
+)
+export const useDialog = () => useContext(DialogContext)
+
+export function DialogProvider({children}: {children: ReactNode}){
+    const dialog = setupDialog()
+    return <DialogContext.Provider value={{...dialog}}>
+        {children}
+    </DialogContext.Provider>
+}
+
+export function DialogComponent(){
+    const {dialog, close} = useDialog()
+    return (
+        <Dialog title={dialog.title} isOpen={dialog.isOpen} isCloseButtonShown={dialog.canClose} onClose={() => {dialog.canClose && close()}}>
+        <DialogBody>
+            {dialog.content}
+        </DialogBody>
+        <DialogFooter actions={dialog.actions}/>
+    </Dialog>)
+}
+
+/**
+ * Usage:
+ * ```tsx
+ * const {prompt, close} = useDialogPrompt()
+ * const text = await prompt({
+ *    title: 'Enter some text',
+ *    message: 'Enter some text: ',
+ *    placeholder: 'Enter some text',
+ *    value: 'Default Value',
+ *    onClose: ()=>{console.log('close'); return true},
+ *    onSubmit: ()=>{console.log('submit'); return true},
+ *    closeButtonText: 'Close',
+ *    submitButtonText: 'Okay',
+ * })
+ * ```
+ */
+export function useDialogPrompt(){
+    const {open, close} = useDialog()
+    const {loadingState, updateLoading} = useLoadingState()
+    const [intent, setIntent] = useState<Intent>(Intent.NONE)
+    const [helperText, setHelperText] = useState('')
+    const prompt = useCallback(({
+        closeButtonText = 'Close',
+        submitButtonText = 'Okay',
+        message = 'Enter some text: ',
+        placeholder = '',
+        value = '',
+        showInput = true,
+        onClose, onSubmit,
+        ...props}: Partial<DialogStateType> &
+        {
+            closeButtonText?: string,
+            submitButtonText?: string,
+            message?: string,
+            placeholder?: string,
+            value?: string,
+            showInput?: boolean,
+            onClose?: (value: string)=>boolean|undefined|Promise<boolean|undefined>, // does not close if false
+            onSubmit?: (value: string)=>boolean|undefined|any|Promise<boolean|undefined|any>, // does not close if false
+    }) => {
+        return new Promise<string|null>((resolve)=>{
+            const state = {value}
+            const doClose = async()=> {
+                if (onClose && (await onClose(state.value)) !== false) return
+                close()
+                resolve(null)
+            }
+            const doSubmit = async()=> {
+                if (onSubmit) {
+                    const res = await onSubmit(state.value)
+                    if(res.error){
+                        setIntent(Intent.DANGER)
+                        setHelperText(res.error)
+                    }
+                    if(res !== false) return
+                }
+                close()
+                resolve(state.value)
+            }
+            open({
+                canClose: false,
+                ...props,
+                state,
+                content: (
+                    <FormGroup
+                        helperText={helperText||undefined}
+                        intent={intent}
+                        label={message}
+                        labelFor="dialog-prompt-text-input"
+                    >
+                        <InputGroup
+                            intent={intent}
+                            id="dialog-prompt-text-input"
+                            placeholder={placeholder}
+                            defaultValue={state.value}
+                            style={{display: showInput ? 'block' : 'none'}}
+                            onChange={(e: any) => {
+                                state.value = e.target.value
+                                if(helperText) setHelperText('')
+                                if(intent !== Intent.NONE) setIntent(Intent.NONE)
+                            }} // todo: submit on enter
+                        />
+                    </FormGroup>
+                ),
+                actions: (
+                    <>
+                        <Button text={closeButtonText}
+                                loading={loadingState['popup-close']}
+                                onClick={() => updateLoading('popup-close', doClose())}/>
+                        <Button text={submitButtonText}
+                                intent="primary"
+                                loading={loadingState['popup-submit']}
+                                onClick={() => updateLoading('popup-submit', doSubmit())}/>
+                    </>
+                ),
+            })
+        })
+    }, [open, close, loadingState, updateLoading])
+    return {prompt, close}
+}

package/src/components/DraggableIcon.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import {Icon, IconName, MaybeElement} from "@blueprintjs/core";
 
+// todo: bounds and stepsize
 export class DraggableIcon extends React.Component<{ icon: IconName | MaybeElement, size?: number, value: number, stepSize?: number, small?: boolean, onChange: (v: number, last?: boolean) => void }> {
     private cursor = 'auto'
     private dragStartOffset = -Infinity

package/src/components/ExtendedNumericInput.tsx

@@ -35,7 +35,7 @@ const NumberAbbreviation = {
 
 const NUMBER_ABBREVIATION_REGEX = /((\.\d+)|(\d+(\.\d+)?))(k|m|b)\b/gi;
 const SCIENTIFIC_NOTATION_REGEX = /((\.\d+)|(\d+(\.\d+)?))(e\d+)\b/gi;
-
+// todo: bounds and stepsize
 export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & NumericInputProps & { onChange2: (v: number, last?: boolean) => void }, IExtendedNumericInputState> {
     public state: IExtendedNumericInputState = {
         value: (this.props.value ?? this.props.defaultValue ?? '').toString(),
@@ -66,7 +66,7 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
                                    }}/>
                 )}
                 // leftIcon={"variable"}
-                buttonPosition={this.props.disabled ? "none" : "right"}
+                buttonPosition={this.props.buttonPosition ?? (this.props.disabled ? "none" : "right")}
                 allowNumericCharactersOnly={false}
                 onBlur={this.handleBlur}
                 onKeyDown={this.handleKeyDown}

package/src/components/FormGroupComponent.tsx

@@ -1,5 +1,5 @@
 import {FormGroup} from "@blueprintjs/core";
-import React, {PropsWithChildren} from "react";
+import {PropsWithChildren} from "react";
 
 export function FormGroupComponent(props: PropsWithChildren<{ label: string, flexBasis?: string, disabled?: boolean }>) {
     return (

package/src/components/InspectorStackComponent.tsx

@@ -1,10 +1,8 @@
 import React from "react";
-import {Button, Card, Panel, PanelStack2, Popover} from "@blueprintjs/core";
+import {Card, Panel, PanelStack2} from "@blueprintjs/core";
 import {ConfigObject, ConfigProps} from "../ConfigObject";
 import {UiObjectConfig} from 'uiconfig.js'
 import {UiConfigRendererContext} from '../bpComponents/BPComponent'
-import {Classes} from '@blueprintjs/core/src/common'
-import {defaultVisualStyle, ThemeSettingsMenuComponent, VisualStyleContext} from './VisualStyleContext'
 
 // import {ViewerAppContext} from "./ViewerAppComponent";
 
@@ -29,44 +27,16 @@ export function InspectorStackComponent({config}: { config: UiObjectConfig<any,
     React.useEffect(() => {
         // console.warn('change', config)
         setCurrentPanelStack([stackItem()])
-    }, [config])
-
-    const localStoragePrefix = 'bpUi'
-    const localStorageIds = {
-        'darkMode': localStoragePrefix + 'DarkMode',
-        'theme': localStoragePrefix + 'Theme',
-    }
-    const [darkMode, setDarkMode] = React.useState(localStorage.getItem(localStorageIds.darkMode) !== (defaultVisualStyle.darkMode ? 'false' : 'true'))
-    React.useEffect(() => {
-        localStorage.setItem('bpUiDarkMode', darkMode ? 'true' : 'false')
-    }, [darkMode])
-    const [theme, setTheme] = React.useState(localStorage.getItem(localStorageIds.theme) || defaultVisualStyle.theme)
-    React.useEffect(() => {
-        localStorage.setItem('bpUiTheme', theme)
-        document.documentElement.classList.remove(...Object.keys(defaultVisualStyle.themes).map(k => k))
-        document.documentElement.classList.add(theme)
-    }, [theme])
+    }, [setCurrentPanelStack, stackItem])
 
     return (
-        <VisualStyleContext.Provider value={{...defaultVisualStyle, darkMode, setDarkMode, theme, setTheme}}>
-        <Card id="bpInspectorCard" className={darkMode?Classes.DARK:""} style={{height: "100%", flexGrow: "1", position: "relative"}}>
+        <Card id="bpInspectorCard" style={{height: "100%", flexGrow: "1", position: "relative"}}>
             <PanelStack2 className="inspectorPanelStack"
                          showPanelHeader={true}
                          renderActivePanelOnly={true}
                          onOpen={(p) => setCurrentPanelStack([...currentPanelStack, p] as any)}
                          onClose={() => setCurrentPanelStack(currentPanelStack.slice(0, -1))}
                          stack={currentPanelStack}/>
-            <div className={"bpPanelStackHeaderOverlay " + Classes.PANEL_STACK2_HEADER}>
-                <Popover targetProps={{style: {position: "absolute", right: "5px"}}}
-                         minimal={true}
-                         targetTagName={"div"}
-                    content={
-                    <ThemeSettingsMenuComponent/>
-                } placement="bottom">
-                    <Button icon="cog" small minimal text="" />
-                </Popover>
-            </div>
         </Card>
-        </VisualStyleContext.Provider>
     )
 }

package/src/components/VisualStyleContext.tsx

@@ -22,9 +22,38 @@ export const defaultVisualStyle = {
 export const VisualStyleContext = React.createContext<typeof defaultVisualStyle>(defaultVisualStyle)
 export const useVisualStyle = () => React.useContext(VisualStyleContext)
 
+const localStoragePrefix = 'bpUi'
+const localStorageIds = {
+    'darkMode': localStoragePrefix + 'DarkMode',
+    'theme': localStoragePrefix + 'Theme',
+}
+export function setupVisualStyle(){
+    const [darkMode, setDarkMode] = React.useState(localStorage.getItem(localStorageIds.darkMode) !== (defaultVisualStyle.darkMode ? 'false' : 'true'))
+    React.useEffect(() => {
+        localStorage.setItem('bpUiDarkMode', darkMode ? 'true' : 'false')
+        const clas = Classes.DARK
+        if(!darkMode)  document.body.classList.remove(clas)
+        else document.body.classList.add(clas)
+    }, [darkMode])
+    const [theme, setTheme] = React.useState(localStorage.getItem(localStorageIds.theme) || defaultVisualStyle.theme)
+    React.useEffect(() => {
+        localStorage.setItem('bpUiTheme', theme)
+        document.documentElement.classList.remove(...Object.keys(defaultVisualStyle.themes).map(k => k))
+        document.documentElement.classList.add(theme)
+    }, [theme])
+    return {darkMode, setDarkMode, theme, setTheme}
+}
+
+export function VisualStyleProvider({children}: {children: React.ReactNode}) {
+    const visualStyle = setupVisualStyle()
+    return <VisualStyleContext.Provider value={{...defaultVisualStyle, ...visualStyle}}>
+        {children}
+    </VisualStyleContext.Provider>
+}
+
 export function ThemeSettingsMenuComponent() {
     const visualStyle = useVisualStyle()
-    return <Menu className={Classes.ELEVATION_0}  >
+    return <Menu className={Classes.ELEVATION_0}>
         <MenuItem
             icon="contrast"
             text="Color"
@@ -35,11 +64,13 @@ export function ThemeSettingsMenuComponent() {
                 <>
                     <MenuItem icon="flash" text="Light Mode"
                               shouldDismissPopover={false}
+                              key="light"
                               selected={!visualStyle.darkMode}
                               onClick={() => visualStyle.setDarkMode(false)}
                               roleStructure="listoption"/>
                     <MenuItem icon="moon" text="Dark Mode"
                               shouldDismissPopover={false}
+                              key="dark"
                               selected={visualStyle.darkMode}
                               onClick={() => visualStyle.setDarkMode(true)}
                               roleStructure="listoption"/>
@@ -57,6 +88,7 @@ export function ThemeSettingsMenuComponent() {
                     {Object.entries(visualStyle.themes).map(([key, value]) => (
                         <MenuItem
                                   shouldDismissPopover={false}
+                                  key={key}
                                   text={value.label}
                                   selected={visualStyle.theme === key}
                                   onClick={() => visualStyle.setTheme(key)}

package/src/components/bpIconWrapper.tsx

@@ -1,5 +1,5 @@
 // https://github.com/palantir/blueprint/issues/2348#issuecomment-389322440
-import React, {ReactNode} from "react";
+import {ReactNode} from "react";
 
 export const bpIconWrapper = (path: ReactNode, viewbox = 16) => {
     return (

package/src/components/common.scss

@@ -14,6 +14,12 @@
   width: 100%;
   background: transparent;
   box-shadow: none;
+  pointer-events: none;
+  border: none;
+}
+
+.bpPanelStackHeaderOverlay * {
+  pointer-events: auto;
 }
 
 .hidden{

package/src/components/loadingState.tsx

@@ -0,0 +1,11 @@
+import {useCallback, useState} from 'react'
+
+export function useLoadingState(){
+    const [loadingState, setLoadingState] = useState<Record<string, boolean>>({})
+    const updateLoading = useCallback(async (key: string, promise?: Promise<any>|void) => {
+        if(!promise || promise.then === undefined) return setLoadingState({...loadingState, [key]: false})
+        setLoadingState({...loadingState, [key]: true})
+        await promise.then(() => setLoadingState({...loadingState, [key]: false}))
+    }, [loadingState])
+    return {loadingState, updateLoading}
+}

package/src/components/variableIcons.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {bpIconWrapper} from "./bpIconWrapper";
 
 export const xIcon1 = bpIconWrapper(

package/src/lib.ts

@@ -0,0 +1,33 @@
+export * from './threejs'
+export * from './contexts'
+export * from './ConfigObject'
+export * from './components/bpIconWrapper'
+export * from './components/ConfigurationPanelComponent'
+export * from './components/DraggableIcon'
+export * from './components/ExtendedNumericInput'
+export * from './components/FileComponent'
+export * from './components/FormGroupComponent'
+export * from './components/InspectorStackComponent'
+export * from './components/variableIcons'
+export * from './components/VisualStyleContext'
+export * from './components/DialogContext'
+export * from './components/loadingState'
+export * from './components/AppToaster'
+export * from './bpComponents/BPButtonComponent'
+export * from './bpComponents/BPColorInputComponent'
+export * from './bpComponents/BPComponent'
+export * from './bpComponents/BPContainerComponent'
+export * from './bpComponents/BPDropdownInputComponent'
+export * from './bpComponents/BPFileComponent'
+export * from './bpComponents/BPFolderComponent'
+export * from './bpComponents/BPInputComponent'
+export * from './bpComponents/BPLabelledComponent'
+export * from './bpComponents/BPNumberInputComponent'
+export * from './bpComponents/BPPanelComponent'
+export * from './bpComponents/BPSliderInputComponent'
+export * from './bpComponents/BPTextInputComponent'
+export * from './bpComponents/BPToggleInputComponent'
+export * from './bpComponents/BPTreeComponent'
+export * from './bpComponents/BPTreeFolderComponent'
+export * from './bpComponents/BPValueComponent'
+export * from './bpComponents/BPVectorInputComponent'

package/src/renderer.scss

@@ -1,66 +1,75 @@
-@import "~normalize.css/normalize";
+@import "normalize.css/normalize";
 
-//@import "~@blueprintjs/core/lib/scss/variables.scss";
+//@import "@blueprintjs/core/lib/scss/variables.scss";
 
-//@import "~@blueprintjs/core/lib/css/blueprint";
-//@import "~@blueprintjs/select/lib/css/blueprint-select";
-@import "~@blueprintjs/icons/lib/css/blueprint-icons";
+//@import "@blueprintjs/core/lib/css/blueprint";
+//@import "@blueprintjs/select/lib/css/blueprint-select";
+@import "@blueprintjs/icons/lib/css/blueprint-icons";
 
-@import "~blueprint-styler/base/blueprint-tokens";
-@import "~blueprint-styler/base/blueprint";
-@import "~blueprint-styler/base/tokens.scss";
+//@import "@blueprintjs/core/src/blueprint";
+//@import "@blueprintjs/select/src/blueprint-select.scss";
+//@import "@blueprintjs/icons/src/blueprint-icons.scss";
 
-@import "components/common";
-@import "bpComponents/index";
-
-//@import "~@blueprintjs/core/src/blueprint";
-//@import "~@blueprintjs/select/src/blueprint-select.scss";
-//@import "~@blueprintjs/icons/src/blueprint-icons.scss";
+@import "blueprint-styler/base/blueprint-tokens";
+@import "blueprint-styler/base/blueprint";
+@import "blueprint-styler/base/tokens.scss";
 
 :root.bpx-bpv3{
-  @import "~blueprint-styler/overrides/bpv3/custom-tokens.scss";
-  @import "~blueprint-styler/overrides/bpv3/override";
-  @import "~blueprint-styler/overrides/bpv3/override-tokens";
+  @import "blueprint-styler/overrides/bpv3/custom-tokens.scss";
+  @import "blueprint-styler/overrides/bpv3/override";
+  @import "blueprint-styler/overrides/bpv3/override-tokens";
 }
 
 :root.bpx-antd {
-  @import "~blueprint-styler/overrides/antd/custom-tokens.scss";
-  @import "~blueprint-styler/overrides/antd/override";
-  @import "~blueprint-styler/overrides/antd/override-tokens";
+  @import "blueprint-styler/overrides/antd/custom-tokens.scss";
+  @import "blueprint-styler/overrides/antd/override";
+  @import "blueprint-styler/overrides/antd/override-tokens";
 }
 
 :root.bpx-carbon {
-  @import "~blueprint-styler/overrides/carbon/custom-tokens.scss";
-  @import "~blueprint-styler/overrides/carbon/override";
-  @import "~blueprint-styler/overrides/carbon/override-tokens";
+  @import "blueprint-styler/overrides/carbon/custom-tokens.scss";
+  @import "blueprint-styler/overrides/carbon/override";
+  @import "blueprint-styler/overrides/carbon/override-tokens";
 }
 
 :root.bpx-flat {
-  @import "~blueprint-styler/overrides/flat/custom-tokens.scss";
-  @import "~blueprint-styler/overrides/flat/override";
-  @import "~blueprint-styler/overrides/flat/override-tokens";
+  @import "blueprint-styler/overrides/flat/custom-tokens.scss";
+  @import "blueprint-styler/overrides/flat/override";
+  @import "blueprint-styler/overrides/flat/override-tokens";
 }
 
 :root.bpx-fluent {
-  @import "~blueprint-styler/overrides/fluent/custom-tokens.scss";
-  @import "~blueprint-styler/overrides/fluent/override";
-  @import "~blueprint-styler/overrides/fluent/override-tokens";
+  @import "blueprint-styler/overrides/fluent/custom-tokens.scss";
+  @import "blueprint-styler/overrides/fluent/override";
+  @import "blueprint-styler/overrides/fluent/override-tokens";
 }
 
 :root.bpx-pnnl {
-  @import "~blueprint-styler/overrides/pnnl/custom-tokens.scss";
-  @import "~blueprint-styler/overrides/pnnl/override";
-  @import "~blueprint-styler/overrides/pnnl/override-tokens";
+  @import "blueprint-styler/overrides/pnnl/custom-tokens.scss";
+  @import "blueprint-styler/overrides/pnnl/override";
+  @import "blueprint-styler/overrides/pnnl/override-tokens";
 }
 
+
+@import "components/common";
+@import "bpComponents/index";
+
 .bp5-form-group.bp5-inline label.bp5-label{
   text-overflow: ellipsis;
   overflow: hidden;
-  white-space: nowrap;
-  max-width: calc(min(50%, 12*$pt-font-size-small));
+  max-width: calc(min(50%, 7*$pt-font-size-small));
   width: 50%;
   font-size: $pt-font-size-small;
+  height: $pt-input-height;
+  line-height: normal;
+
+  //white-space: nowrap;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
 }
+
 .switch{
   display: flex;
   justify-content: space-between;
@@ -84,10 +93,18 @@
   flex-grow: 1;
 }
 
+:root{
+  --background-color-transition-time: 0.1s;
+  --background-color-transition: background-color var(--background-color-transition-time) ease-in-out;
+}
 .bp5-panel-stack-view {
-  .bp5-dark & {
-    background-color: $dark-gray2 !important;
+  background-color: $light-gray4 !important;
+  transition: var(--background-color-transition);
+}
 
+.bp5-dark{
+  .bp5-panel-stack-view {
+    background-color: $dark-gray2 !important;
   }
 }
 
@@ -126,6 +143,7 @@
   flex: 1 1 auto;
   max-width: 100%;
 }
+
 //button {
 //  -webkit-tap-highlight-color: rgba(0,0,0,0);
 //}
@@ -133,27 +151,7 @@
 //  outline: 0;
 //  box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2);
 //}
-.editorSplitContainer {
-  display: flex;
-  height: calc(100% - $pt-navbar-height);
-
-  .gutter {
-    background: $dark-gray1;
-    flex-shrink: 0;
-  }
 
-  .gutter:hover {
-    background: $dark-gray4;
-  }
-
-  .gutter-horizontal {
-    cursor: ew-resize;
-  }
-
-  .gutter-vertical {
-    cursor: ns-resize;
-  }
-}
 .bp5-control-group {
   .bp5-input-group{
     flex-grow: 1;
@@ -191,3 +189,8 @@
 .bp5-menu{
   padding: 0;
 }
+
+.bp5-button{
+  user-select: none; // todo: why is this needed?
+  transition: var(--background-color-transition);
+}

package/src/tsconfig.json

@@ -0,0 +1,6 @@
+{
+    "extends": "../tsconfig",
+    "compilerOptions": {
+        "outDir": "../lib/esm"
+    }
+}

package/tsconfig.json

@@ -6,7 +6,7 @@
         "experimentalDecorators": true,
         "isolatedModules": true,
         "module": "es2015",
-        "jsx": "react",
+        "jsx": "react-jsx",
         "noImplicitAny": true,
         "declaration": true,
         "noImplicitThis": true,

package/dist/allPaths-gmYjuI3J.js

@@ -1,23 +0,0 @@
-import { I as n } from "./index-tqa0R-I0.js";
-import { I as e } from "./index-iM9IChdK.js";
-import { p as r, I as s } from "./index-fkZWUkpO.js";
-/**
- * @license
- * uiconfig-blueprint v0.0.1
- * Copyright 2022-2023 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-gmYjuI3J.js.map