@vertesia/ui 0.79.0 → 0.80.0-dev-20251118

package/src/session/auth/composable.ts

@@ -32,95 +32,96 @@ export async function fetchComposableToken(getIdToken: () => Promise<string | nu
         throw new Error('No id token found');
     }
 
-    console.log('Fetching composable token from ' + Env.endpoints.studio);
-    Env.logger.info('Fetching composable token from' + Env.endpoints.studio, {
+    // Use STS endpoint - either configured or default to sts.vertesia.io
+    const stsEndpoint = Env.endpoints.sts;
+    console.log('Using STS for token generation:', stsEndpoint);
+    Env.logger.info('Using STS for token generation', {
         vertesia: {
             account_id: accountId,
             project_id: projectId,
+            sts_url: stsEndpoint,
         },
     });
 
-    const url = new URL(Env.endpoints.studio + '/auth/token');
-    if (accountId) url.searchParams.set('accountId', accountId);
-    if (projectId) url.searchParams.set('projectId', projectId);
-    if (ttl) url.searchParams.set('ttl', String(ttl));
-
-    console.log(`Getting composable token for account ${accountId} and project ${projectId}`);
-    Env.logger.info('Getting composable token', {
-        vertesia: {
+    try {
+        // Call STS to generate a user token
+        const stsUrl = new URL(stsEndpoint + '/token/issue');
+        const requestBody = {
+            type: 'user',
             account_id: accountId,
             project_id: projectId,
-        },
-    });
-
-    const res = await fetch(url, {
-        method: 'GET',
-        headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${idToken}`
-        }
-    }).catch(err => {
-        localStorage.removeItem(LastSelectedAccountId_KEY);
-        localStorage.removeItem(LastSelectedProjectId_KEY);
-        console.error('Failed to get composable token', err);
-        Env.logger.error('Failed to get composable token', {
-            vertesia: {
-                account_id: accountId,
-                project_id: projectId,
-                error: err,
+            expires_at: ttl ? Math.floor(Date.now() / 1000) + ttl : undefined,
+        };
+
+        const stsRes = await fetch(stsUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${idToken}` // Firebase token for authentication
             },
+            body: JSON.stringify(requestBody)
         });
-        throw new Error('Failed to get composable token');
-    });
 
-    if (idToken && res?.status === 412) {
-        console.log("412: auth succeeded but user doesn't exist - signup required", res?.status);
-        Env.logger.error("412: auth succeeded but user doesn't exist - signup required", {
-            vertesia: {
-                account_id: accountId,
-                project_id: projectId,
-                status: res?.status
-            },
-        });
-        const idTokenDecoded = jwtDecode(idToken) as any;
-        if (!idTokenDecoded?.email) {
-            Env.logger.error('No email found in id token');
-            throw new Error('No email found in id token');
-        }
-        Env.logger.error('User not found', {
-            vertesia: {
-                account_id: accountId,
-                project_id: projectId,
-                email: idTokenDecoded.email
+        if (idToken && stsRes?.status === 412) {
+            console.log("412: auth succeeded but user doesn't exist - signup required", stsRes?.status);
+            Env.logger.error("412: auth succeeded but user doesn't exist - signup required", {
+                vertesia: {
+                    account_id: accountId,
+                    project_id: projectId,
+                    status: stsRes?.status
+                },
+            });
+            const idTokenDecoded = jwtDecode(idToken) as any;
+            if (!idTokenDecoded?.email) {
+                Env.logger.error('No email found in id token');
+                throw new Error('No email found in id token');
             }
-        });
-        throw new UserNotFoundError('User not found', idTokenDecoded.email);
-    }
+            Env.logger.error('User not found', {
+                vertesia: {
+                    account_id: accountId,
+                    project_id: projectId,
+                    email: idTokenDecoded.email
+                }
+            });
+            throw new UserNotFoundError('User not found', idTokenDecoded.email);
+        }
+
+        if (!stsRes.ok) {
+            const errorText = await stsRes.text();
+            console.error('STS token generation failed:', stsRes.status, errorText);
+            Env.logger.error('STS token generation failed', {
+                vertesia: {
+                    status: stsRes.status,
+                    error: errorText,
+                    account_id: accountId,
+                    project_id: projectId,
+                },
+            });
+            throw new Error(`Failed to get token from STS: ${stsRes.status}`);
+        }
+
+        const { token } = await stsRes.json();
+        console.log('Successfully got token from STS');
+        Env.logger.info('Successfully got token from STS');
+        return token;
 
-    if (!res || !res.ok) {
-        console.error('Failed to get composable token', res);
-        Env.logger.error('Failed to get composable token', {
+    } catch (error) {
+        if (error instanceof UserNotFoundError) {
+            throw error; // Re-throw UserNotFoundError
+        }
+
+        localStorage.removeItem(LastSelectedAccountId_KEY);
+        localStorage.removeItem(LastSelectedProjectId_KEY);
+        console.error('Failed to get composable token from STS', error);
+        Env.logger.error('Failed to get composable token from STS', {
             vertesia: {
                 account_id: accountId,
                 project_id: projectId,
-                status: res?.status,
+                error: error,
             },
         });
         throw new Error('Failed to get composable token');
     }
-
-    const { token } = await res.json().catch(err => {
-        Env.logger.error('Failed to parse composable token', {
-            vertesia: {
-                account_id: accountId,
-                project_id: projectId,
-                error: err,
-            },
-        });
-        console.error('Failed to parse composable token', err);
-    });
-
-    return token;
 }
 
 /**
@@ -187,4 +188,4 @@ export class UserNotFoundError extends Error {
         this.name = 'UserNotFoundError';
         this.email = email;
     }
-}
+}

package/src/shell/apps/AppProjectSelector.tsx

@@ -1,5 +1,5 @@
 import { ProjectRef, RequireAtLeastOne } from "@vertesia/common";
-import { SelectBox, useFetch } from "@vertesia/ui/core";
+import { VSelectBox, useFetch } from "@vertesia/ui/core";
 import { LastSelectedAccountId_KEY, LastSelectedProjectId_KEY, useUserSession } from "@vertesia/ui/session";
 import { useState } from "react";
 
@@ -47,7 +47,7 @@ function SelectProject({ initialValue, projects, onChange, placeholder = "Select
     }
     let actualValue = !value && initialValue ? projects.find(p => p.id === initialValue) : value;
     return (
-        <SelectBox
+        <VSelectBox
             by="id"
             value={actualValue}
             options={projects}

package/src/widgets/form/Form.tsx

@@ -1,25 +1,22 @@
 
 import { Plus, Trash2 } from "lucide-react";
-import { Button } from "@vertesia/ui/core";
+import { Button, FormItem } from "@vertesia/ui/core";
 import clsx from "clsx";
 import type { JSONSchemaObject } from "@vertesia/common";
 import { ComponentType, ReactNode, SyntheticEvent, useState } from "react";
-import { FormContextProvider, InputComponentProps, useForm } from "./FormContext.js";
+import { FormContext, FormContextProvider, InputComponentProps, useForm } from "./FormContext.js";
 import { ManagedListProperty, ManagedObject, ManagedObjectBase, ManagedProperty, Node } from "./ManagedObject.js";
-import { FormLabel, FormHelper } from "./fields.js";
 import { Input } from "./inputs.js";
 
-
-
-
 interface FormProps {
     object: ManagedObject;
     components?: Record<string, ComponentType<InputComponentProps>>;
     children?: ReactNode | ReactNode[];
     onSubmit?: (data: JSONSchemaObject) => void;
     onChange?: (prop: Node) => void;
+    disabled?: boolean;
 }
-export function Form({ object, components, onSubmit, children, onChange }: FormProps) {
+export function Form({ object, components, onSubmit, children, onChange, disabled }: FormProps) {
     const _onSubmit = (evt: SyntheticEvent) => {
         evt.stopPropagation();
         evt.preventDefault();
@@ -27,10 +24,7 @@ export function Form({ object, components, onSubmit, children, onChange }: FormP
     }
     object.observer = onChange;
     return (
-        <FormContextProvider value={{
-            object,
-            components: components || {}
-        }}>
+        <FormContextProvider value={new FormContext(object, components || {}, disabled ?? false)}>
             <form className="w-full" onSubmit={_onSubmit}>
                 {children}
             </form>
@@ -58,24 +52,6 @@ export function GeneratedForm({ children, ...props }: FormProps) {
     )
 }
 
-
-// interface FieldSetProps {
-//     name: string;
-//     children?: ReactNode | ReactNode[];
-// }
-// export function FieldSet({ name, children }: FieldSetProps) {
-//     const ctx = useForm();
-//     const newCtx = {
-//         ...ctx,
-//         object: ctx.object.getProperty(name) as ManagedObjectProperty
-//     }
-//     return (
-//         <FormContextProvider value={newCtx}>
-//             {children}
-//         </FormContextProvider>
-//     )
-// }
-
 function renderProperty(prop: Node) {
     if (prop.isList) {
         return <ListField key={prop.name} object={prop as ManagedListProperty} />
@@ -105,7 +81,7 @@ export function ScalarField({ object, editor, inline = false }: ScalarFieldProps
     if (!editor) {
         editor = object.schema.editor;
     }
-    const { components } = useForm();
+    const { components, disabled } = useForm();
     const Component = (editor && components[editor]) || Input;
     const inputType = object.getInputType();
     if (inputType === 'checkbox') {
@@ -113,20 +89,16 @@ export function ScalarField({ object, editor, inline = false }: ScalarFieldProps
     }
 
     const handleOnChange = (event: any) => {
+        if (disabled) return;
         const { value } = event.target;
         object.value = object.schema.isNumber ? parseFloat(value) : value
     }
 
     return (
-        <div className="">
-            <div className={clsx('flex gap-2', inline ? 'flex-row items-center' : 'flex-col')}>
-                {!object.isListItem && <FormLabel required={object.schema.isRequired}>{object.title}</FormLabel>}
-                <Component object={object} type={inputType} onChange={handleOnChange} />
-            </div>
-            {
-                object.schema.description && <FormHelper>{object.schema.description}</FormHelper>
-            }
-        </div>
+        <FormItem label={object.title} required={object.schema.isRequired} description={object.schema.description}
+            className={clsx('flex', inline ? 'flex-row items-center' : 'flex-col')}>
+            {!object.isListItem && <Component object={object} type={inputType} onChange={handleOnChange} disabled={disabled} />}
+        </FormItem>
     )
 }
 
@@ -149,13 +121,16 @@ interface ListFieldProps {
 }
 function ListField({ object }: ListFieldProps) {
     const [value, setValue] = useState<any[]>(object.value || []);
+    const { disabled } = useForm();
 
     const addItem = () => {
+        if (disabled) return;
         object.add();
         setValue([...object.value]);
     };
 
     const deleteItem = (index: number) => {
+        if (disabled) return;
         object.remove(index);
         setValue([...object.value]);
     };
@@ -165,11 +140,11 @@ function ListField({ object }: ListFieldProps) {
             {!object.isListItem && <div className='text-gray-900 dark:text-gray-200 font-semibold'>{object.title}</div>}
             {
                 object.items.map((item, index) => {
-                    return <ListItem key={`${index}-${value[index] ?? ''}`} object={item} list={object} onDelete={() => deleteItem(index)} />;
+                    return <ListItem key={`${index}-${value[index] ?? ''}`} object={item} list={object} onDelete={() => deleteItem(index)} disabled={disabled} />;
                 })
             }
             <div>
-                <Button variant='secondary' onClick={addItem}><Plus className="size-6" /> Add</Button>
+                <Button variant='secondary' onClick={addItem} disabled={disabled}><Plus className="size-6" /> Add</Button>
             </div>
         </div>
     )
@@ -179,8 +154,9 @@ interface ListItemProps {
     list: ManagedListProperty;
     object: Node & { index: number };
     onDelete: () => void;
+    disabled?: boolean;
 }
-function ListItem({ list, object, onDelete }: ListItemProps) {
+function ListItem({ list, object, onDelete, disabled }: ListItemProps) {
     return (
         <div className='flex gap-2 w-full'>
             <div className="flex-1">
@@ -188,7 +164,7 @@ function ListItem({ list, object, onDelete }: ListItemProps) {
                     renderItemProperty(object, list.schema.arraySchema.editor)
                 }
             </div>
-            <Button variant='secondary' onClick={onDelete}><Trash2 className='size-4' /></Button>
+            <Button variant='secondary' onClick={onDelete} disabled={disabled}><Trash2 className='size-4' /></Button>
         </div>
     )
 }

package/src/widgets/form/FormContext.ts

@@ -15,10 +15,13 @@ export function useFieldSet() {
 export interface InputComponentProps {
     object: Node;
     type: string; // the editor/input type
+    onChange?: (event: any) => void;
+    disabled?: boolean;
 }
-class FormContext {
+export class FormContext {
     constructor(public object: ManagedObject,
-        public components: Record<string, ComponentType<InputComponentProps>> = {}) {
+        public components: Record<string, ComponentType<InputComponentProps>> = {},
+        public disabled: boolean = false) {
     }
 
 }

package/src/widgets/form/ManagedObject.ts

@@ -10,6 +10,10 @@ function getInputType(_name: string, schema: PropertySchema) {
     if (schema.editor) {
         return schema.editor;
     }
+    // Check format as fallback (e.g., "document", "media", "date", etc.)
+    if (schema.schema.format) {
+        return schema.schema.format;
+    }
     switch (schema.type) {
         case 'number':
         case 'integer':

package/src/widgets/form/fields.tsx

@@ -1,14 +1,16 @@
+import { FormItem } from "@vertesia/ui/core";
+
 interface FormLabelProps {
-    htmlFor?: string;
+    label?: string;
     required?: boolean;
     children: React.ReactNode | React.ReactNode[];
 }
-export function FormLabel({ htmlFor, required, children }: FormLabelProps) {
+export function FormLabel({ label, required, children }: FormLabelProps) {
     return (
-        <label htmlFor={htmlFor} className="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-200">
-            {children}{required && <sup className="text-red-600">*</sup>}
-        </label>
-    )
+        <FormItem label={label} required={required}>
+            {children}
+        </FormItem>
+    );
 }
 
 interface FormHelperProps {

package/src/widgets/form/inputs.tsx

@@ -17,6 +17,7 @@ const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProp
     }
 
     const _onChange = (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        if (props.disabled) return;
         setValue(ev.target.value);
         if (object.schema.isBoolean) {
             object.value = (ev.target as HTMLInputElement).checked;

package/lib/esm/core/components/Textarea.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import React, { useState } from "react";
-import { Styles } from "./styles";
-const Textarea = React.forwardRef(({ unstyled, value, onChange, className, ...others }, ref) => {
-    const [currentValue, setCurrentValue] = useState(value || "");
-    const _onChange = (ev) => {
-        const value = ev.target.value;
-        setCurrentValue(value);
-        onChange && onChange(value);
-    };
-    return (_jsx("textarea", { ref: ref, ...others, className: clsx('w-full', unstyled ? Styles.INPUT_UNSTYLED : Styles.INPUT, className), value: currentValue, onChange: _onChange }));
-});
-export { Textarea };
-//# sourceMappingURL=Textarea.js.map

package/lib/esm/core/components/Textarea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/core/components/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAOlC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAqC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,MAAM,EAAiB,EAAE,GAAG,EAAE,EAAE;IAC9I,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,CAAC,EAA0C,EAAE,EAAE;QAC7D,MAAM,KAAK,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;QAC9B,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,CAAA;IACD,OAAO,CACH,mBAAU,GAAG,EAAE,GAAG,KACV,MAAM,EACV,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EACrF,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,GAAI,CACnD,CAAA;AACL,CAAC,CAAC,CAAC;AAEH,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/lib/types/core/components/Textarea.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-interface TextareaProps extends Omit<React.HTMLProps<HTMLTextAreaElement>, 'ref' | 'onChange'> {
-    onChange: (value: string) => void;
-    unstyled?: boolean;
-}
-declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export { Textarea };
-//# sourceMappingURL=Textarea.d.ts.map

package/lib/types/core/components/Textarea.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/core/components/Textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC;IAC1F,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,QAAQ,2FAaZ,CAAC;AAEH,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/src/core/components/Textarea.tsx

@@ -1,25 +0,0 @@
-import clsx from "clsx";
-import React, { useState } from "react";
-import { Styles } from "./styles";
-
-interface TextareaProps extends Omit<React.HTMLProps<HTMLTextAreaElement>, 'ref' | 'onChange'> {
-    onChange: (value: string) => void;
-    unstyled?: boolean;
-}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ unstyled, value, onChange, className, ...others }: TextareaProps, ref) => {
-    const [currentValue, setCurrentValue] = useState(value || "");
-    const _onChange = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
-        const value = ev.target.value;
-        setCurrentValue(value);
-        onChange && onChange(value);
-    }
-    return (
-        <textarea ref={ref}
-            {...others}
-            className={clsx('w-full', unstyled ? Styles.INPUT_UNSTYLED : Styles.INPUT, className)}
-            value={currentValue} onChange={_onChange} />
-    )
-});
-
-export { Textarea }