@vertesia/ui 0.56.0 → 0.58.0

package/src/core/hooks/useClickOutside.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from "react";
+
+/**
+ *
+ * @param callback
+ * @param skipFn an optional function to skip the callback if the event matches some condition. Return true to skip
+ * @returns
+ */
+export function useClickOutside<T extends HTMLElement>(callback: (e: MouseEvent) => void, skipFn?: (e: MouseEvent) => boolean) {
+    const ref = useRef<T>(null);
+    useEffect(() => {
+        const handleClick = (e: MouseEvent) => {
+            if (ref.current && !ref.current.contains(e.target as Node)) {
+                if (!skipFn || !skipFn(e)) {
+                    callback(e);
+                }
+            }
+        }
+        // add te listener just after the render to avoid the callback to be called on the current click
+        // if you are in a click context
+        window.setTimeout(() => {
+            document.addEventListener('click', handleClick);
+        }, 0);
+        return () => {
+            document.removeEventListener('click', handleClick);
+        }
+    }, [])
+    return ref;
+}

package/src/core/hooks/useCopyToClipboard.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+
+type CopiedValue = string | null
+type CopyFn = (text: string) => Promise<boolean> // Return success
+
+export function useCopyToClipboard(): [CopiedValue, CopyFn] {
+  const [copiedText, setCopiedText] = useState<CopiedValue>(null)
+
+  const copy: CopyFn = async text => {
+    if (!navigator?.clipboard) {
+      console.warn('Clipboard not supported')
+      return false
+    }
+
+    // Try to save to clipboard then save it in the state if worked
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopiedText(text)
+      return true
+    } catch (error) {
+      console.warn('Copy failed', error)
+      setCopiedText(null)
+      return false
+    }
+  }
+
+  return [copiedText, copy]
+}

package/src/core/hooks/useDarkMode.ts

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+
+export function useDarkMode(cb: (isDarkMode: boolean) => unknown) {
+    useEffect(() => {
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const _cb = (e: MediaQueryListEvent) => cb(e.matches);
+        mediaQuery.addEventListener('change', _cb);
+        cb(mediaQuery.matches);
+        return () => mediaQuery.removeEventListener('change', _cb);
+    }, []);
+}

package/src/core/hooks/useDebounce.tsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce(value: string, delay: number) {
+    const [debounceValue, setDebounceValue] = useState(value);
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebounceValue(value);
+        }, delay);
+
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debounceValue;
+}

package/src/core/hooks/useEventSource.ts

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+
+function startSse<T>(url: string, onMessage: (content: string) => void,
+    onCompleted: (payload: T) => void) {
+    const chunks: string[] = [];
+    const sse = new EventSource(url);
+    sse.addEventListener("message", ev => {
+        const data = JSON.parse(ev.data);
+        if (data) {
+            chunks.push(data);
+            onMessage(chunks.join(''))
+        }
+    });
+    sse.addEventListener("close", (ev) => {
+        sse.close();
+        const msg = JSON.parse(ev.data)
+        onCompleted(msg);
+    });
+    return () => {
+        sse.close();
+    }
+
+}
+
+export function useEventSource<T>(url: string | (() => Promise<string>),
+    onMessage: (content: string) => void,
+    onCompleted: (payload: T) => void) {
+    useEffect(() => {
+        if (typeof url === 'function') {
+            url().then(url => startSse(url, onMessage, onCompleted));
+        } else {
+            startSse(url, onMessage, onCompleted);
+        }
+    }, [url])
+}

package/src/core/hooks/useFetch.ts

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+
+export interface FetchOpts<T> {
+    start?: () => void,
+    end?: () => void,
+    defaultValue?: T | (() => T),
+    deps?: any[] | undefined,
+    condition?: () => boolean,
+    onSuccess?: (data: T) => void,
+    onError?: (err: any) => void,
+}
+
+export function useFetch<T = any>(fetcher: () => Promise<T>, opts?: FetchOpts<T> | any[] | undefined | null) {
+    if (Array.isArray(opts)) {
+        opts = { deps: opts };
+    }
+    const options = (opts || {}) as FetchOpts<T>;
+    const [error, setError] = useState<any>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [data, setData] = useState<T | undefined>(options.defaultValue);
+    const fetch = () => {
+        options.start && options.start();
+        setIsLoading(true);
+        return fetcher().then((result: T) => {
+            setData(result);
+            options.onSuccess && options.onSuccess(result);
+        }).catch(error => {
+            setError(error);
+            options.onError && options.onError(error);
+        }).finally(() => {
+            setIsLoading(false);
+            options.end && options.end();
+        });
+    }
+    useEffect(() => {
+        if (!options.condition || options.condition()) {
+            fetch();
+        }
+
+    }, options.deps);
+    return { data, isLoading, error, setData, refetch: fetch };
+}
+
+export function useFetchOnce<T>(fetcher: () => Promise<T>, opts?: FetchOpts<T> | any[] | undefined | null) {
+    if (!opts || Array.isArray(opts)) {
+        opts = { deps: [] };
+    } else if (opts) {
+        opts.deps = [];
+    }
+    return useFetch<T>(fetcher, opts);
+}

package/src/core/hooks/useFlag.tsx

@@ -0,0 +1,13 @@
+import { useState } from "react";
+
+export function useFlag(isOn = false) {
+    const [state, setState] = useState(isOn);
+    return {
+        isOn: state,
+        isOff: !state,
+        set: (value: boolean) => setState(value),
+        on: () => setState(true),
+        off: () => setState(false),
+        toggle: () => setState(!state)
+    }
+}

package/src/core/hooks/useIntersectionObserver.tsx

@@ -0,0 +1,40 @@
+import { RefObject, useEffect } from "react";
+
+/**
+ * if leave option is true then callback will be called when the target leaves the viewport
+ * otherwise when it enters the viewport
+ * @param target
+ * @param cb
+ * @param opts
+ */
+export function useIntersectionObserver(target: RefObject<HTMLElement | null | undefined>, cb: (entry: IntersectionObserverEntry) => void, opts: { leave?: boolean, threshold?: number, deps?: any[] } = {}) {
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            entries => {
+                const isEntering = entries[0].isIntersecting;
+                if (opts.leave) {
+                    if (!isEntering) {
+                        cb(entries[0]);
+                    }
+                } else {
+                    if (isEntering) {
+                        cb(entries[0]);
+                    }
+                }
+            },
+            { threshold: opts.threshold || 1 }
+        );
+
+        if (target.current) {
+            observer.observe(target.current);
+        }
+
+        return () => {
+            if (target.current) {
+                observer.unobserve(target.current);
+            }
+        };
+    }, opts.deps ? opts.deps.concat(target) : [target]);
+
+}

package/src/core/hooks/useIsFistRendering.ts

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from "react";
+
+export function useIsFirstRendering() {
+    const isFirstRender = useRef(true);
+
+    useEffect((cb?: () => void) => {
+        if (cb && isFirstRender.current) {
+            cb();
+        }
+        isFirstRender.current = false;
+        // ---> StrictMode: The following is REQUIRED to reset/cleanup:
+        return () => { isFirstRender.current = true };
+
+    }, []);
+
+    return isFirstRender.current;
+}

package/src/core/hooks/useSafeLayoutEffect.ts

@@ -0,0 +1,5 @@
+import { useEffect, useLayoutEffect } from "react";
+
+const useSafeLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export { useSafeLayoutEffect }

package/src/core/hooks/useSharedValue.ts

@@ -0,0 +1,22 @@
+import { Dispatch, SetStateAction, useState } from "react";
+
+
+export class SharedValue<T> {
+    constructor(private state: [T, Dispatch<SetStateAction<T>>]) {
+    }
+
+    get() {
+        return this.state[0];
+    }
+    set(value: T) {
+        this.state[1](value);
+    }
+}
+
+/**
+ * Share a stateful value
+ */
+export function useSharedValue<T>(initialValue: T | (() => T)) {
+    const state = useState(initialValue);
+    return new SharedValue(state);
+}

package/src/core/index.ts

@@ -0,0 +1,2 @@
+export * from "./hooks/index.js";
+export * from "./components/index.js";

package/src/env/index.ts

@@ -0,0 +1,116 @@
+// hook to initialize the environment and auth session
+// the main app must call this hook before rendering the page.
+
+import { AuthTokenPayload } from "@vertesia/common";
+
+export interface EnvProps {
+    name: string; // the app name
+    version: string,
+    isLocalDev: boolean,
+    isDocker: boolean,
+    type: "production" | "staging" | "preview" | "development" | string,
+    endpoints: {
+        zeno: string,
+        studio: string,
+    },
+    firebase: {
+        apiKey: string,
+        authDomain: string,
+        projectId: string,
+        appId?: string,
+        providerType?: string,
+    },
+    datadog: boolean,
+    logger?: {
+        info: (msg: string, ...args: any) => void,
+        warn: (msg: string, ...args: any) => void,
+        error: (msg: string, ...args: any) => void,
+        debug: (msg: string, ...args: any) => void,
+    }
+    onLogin?: (token: AuthTokenPayload) => void,
+    onLogout?: () => void,
+}
+
+export class VertesiaEnvironment implements Readonly<EnvProps> {
+
+    constructor(private _props?: EnvProps | undefined) {
+    }
+
+    init(props?: EnvProps) {
+        this._props = props;
+        return this;
+    }
+
+    private prop<K extends keyof EnvProps>(name: K): EnvProps[K] {
+        if (!this._props) {
+            throw new Error("VertesiaEnvironment was not initialized");
+        }
+        return this._props[name];
+    }
+
+    get version() {
+        return this.prop("version");
+    }
+
+    get name() {
+        return this.prop("name");
+    }
+
+    get type() {
+        return this.prop("type");
+    }
+
+    get isProd() {
+        return this.type === "production";
+    }
+
+    get isDev() {
+        return !this.isProd;
+    }
+
+    get isPreview() {
+        return this.type === "preview";
+    }
+
+    get isLocalDev() {
+        return this.prop("isLocalDev");
+    }
+
+    get isDocker() {
+        return this.prop("isDocker");
+    }
+
+    get endpoints() {
+        return this.prop("endpoints");
+    }
+
+    get firebase() {
+        return this.prop("firebase");
+    }
+
+    get datadog() {
+        return this.prop("datadog");
+    }
+
+    get logger() {
+        return this._props?.logger ?? console
+    }
+
+    /**
+     * Callback to notify the host app when the user logs in.
+     */
+    onLogin(token: AuthTokenPayload) {
+        this._props?.onLogin?.(token);
+    }
+
+    /**
+     * Callback to notify the host app when the user logs out
+     */
+    onLogout() {
+        this._props?.onLogout?.();
+    }
+}
+
+const Env = new VertesiaEnvironment();
+
+export { Env };

package/src/features/activity-doc/ActivityDoc.tsx

@@ -0,0 +1,199 @@
+import { ActivityDefinition, ActivityPropertyDefinition, ActivityTypeDefinition } from "@vertesia/common";
+import clsx from "clsx";
+import { AnimatePresence, motion } from "motion/react";
+import React, { useMemo, useState } from "react";
+
+function Badge({ children, secondary = false }: { children: React.ReactNode, secondary?: boolean }) {
+    const className = secondary ? "bg-secondary text-primary" : "text-foreground bg-muted";
+    return <span className={className}>{children}</span>
+}
+
+/**
+ * Resolve nested array inner type
+ * @param innerType
+ */
+function resolveInnerType(innerType: ActivityTypeDefinition | undefined) {
+    if (!innerType) {
+        return undefined;
+    } else if (innerType.name === "array") {
+        return resolveInnerType(innerType.innerType);
+    } else {
+        return innerType;
+    }
+}
+
+interface PropertySignatureProps {
+    property: ActivityPropertyDefinition;
+}
+function PropertySignature({ property }: PropertySignatureProps) {
+    return (
+        <div className="flex items-center gap-x-2">
+            <div className="font-semibold text-gray-600">{property.name}</div>
+            {property.optional && <Badge>optional</Badge>}
+            <Badge>{property.type.value}</Badge>
+        </div>
+    )
+}
+interface ActivitiesDocProps {
+    activities: ActivityDefinition[];
+}
+export function ActivitiesDoc({ activities }: ActivitiesDocProps) {
+    return (
+        <div className='flex flex-col gap-y-4 divide-y divide-gray-200'>
+            {activities.map(activity => <ActivityDoc key={activity.name} activity={activity} />)}
+        </div>
+    )
+}
+
+interface ActivitySectionTitleProps {
+    children: React.ReactNode;
+    code?: string;
+}
+function ActivitySectionTitle({ code, children }: ActivitySectionTitleProps) {
+    return (
+        <div className="flex gap-2 items-center border-b border-b-gray-200 mb-2">
+            <div className='text-lg font-medium text-gray-900 py-2 '>{children}</div>
+            {code && <div><Badge>{code}</Badge></div>}
+        </div>
+    )
+}
+interface ActivityDocProps {
+    activity: ActivityDefinition;
+    headingRef?: React.RefObject<HTMLDivElement>;
+    headingClass?: string;
+}
+export function ActivityDoc({ activity, headingClass, headingRef }: ActivityDocProps) {
+    return (
+        <div className={headingClass} id={activity.name} ref={headingRef}>
+            <div className="text-xl font-semibold pt-8">{activity.title}</div>
+            <div className="pb-4"><Badge>{activity.name}</Badge></div>
+            {
+                activity.doc &&
+                <div className="text-gray-700 pb-2">{activity.doc}</div>
+            }
+
+            <div className="pb-4">
+                <ActivitySectionTitle code={activity.paramsType}>Parameters</ActivitySectionTitle>
+                <div className="divide-y divide-gray-100">
+                    {activity.params.map(prop =>
+                        <PropertyDetails key={prop.name} property={prop} />
+                    )}
+                </div>
+            </div>
+            <div className="pb-4">
+                <ActivitySectionTitle>Returns</ActivitySectionTitle>
+                <div>{activity.returnType ? activity.returnType.value : "void"}</div>
+            </div>
+
+        </div>
+    )
+}
+
+function PropertyDetails({ property, className }: { className?: string, property: ActivityPropertyDefinition }) {
+    const expandable = useMemo(() => {
+        const type = resolveInnerType(property.type.innerType) ?? property.type;
+        if (type.name === "object" && type.members) {
+            return <ObjectMembersPanel members={type.members} />
+        } else if (type.name === 'enum' && type.enum) {
+            return <EnumValuesPanel values={type.enum} />
+        } else {
+            return null;
+        }
+    }, [property.type.innerType]);
+    return (
+        <div className={clsx("py-2", className)}>
+            <PropertySignature property={property} />
+            {property.doc && <div className="text-gray-700 text-sm pt-2">
+                {property.doc}
+            </div>}
+            {expandable && <div className="my-2 overflow-hidden">
+                {expandable}
+            </div>
+            }
+        </div>
+    )
+}
+
+interface EnumValuesPanelProps {
+    values: string[] | number[];
+}
+function EnumValuesPanel({ values }: EnumValuesPanelProps) {
+    return <div className="flex flex-wrap items-center gap-2">{
+        values.map((v, i) => <Badge secondary key={i}>{v}</Badge>)
+    }</div>
+}
+
+function ObjectMembersPanel({ members }: { members: ActivityPropertyDefinition[] }) {
+    return <ExpandablePanel
+        className='rounded-md border border-gray-200'
+        button={(isOn) => (
+            <div className="px-4 py-2 flex items-center gap-x-2 text-sm font-medium hover:text-blue-600">
+                <ExpandIcon isOpen={isOn} />
+                {
+                    isOn ?
+                        <div>Hide child properties</div>
+                        :
+                        <div>Show child properties</div>
+                }
+            </div>
+        )}
+        body={<NestedPropertiesDetails properties={members} />} />
+}
+
+function NestedPropertiesDetails({ properties }: { properties: ActivityPropertyDefinition[] }) {
+    return (
+        <div className='border-l-2 border-l-blue-200 flex flex-col divide-y divide-gray-100 border-t border-t-gray-200'>
+            {properties.map(prop => <PropertyDetails key={prop.name} property={prop} className="px-4 py-2" />)}
+        </div>
+    )
+}
+
+interface ExpandablePanelProps {
+    isInitiallyOpen?: boolean;
+    className?: string;
+    button: (isOn: boolean) => React.ReactNode;
+    body: React.ReactNode | React.ReactNode[];
+}
+function ExpandablePanel({ button, body, className, isInitiallyOpen }: ExpandablePanelProps) {
+    const [isExpanded, setExpanded] = useState(isInitiallyOpen || false);
+    return (
+        <div className={clsx(isExpanded ? "block" : "inline-block", className)}>
+            <button className='p-0 m-0 bg-transparent' onClick={() => setExpanded(!isExpanded)}>
+                <AnimatePresence>
+                    {button(isExpanded)}
+                </AnimatePresence>
+            </button>
+            <AnimatePresence>
+                {
+                    isExpanded && <motion.div className='overflow-hidden'
+                        initial={{ height: 0, opacity: 0 }}
+                        animate={{ height: 'auto', opacity: 1 }}
+                        exit={{ height: 0, opacity: 0 }}
+                        transition={{ duration: 0.3, ease: 'easeOut' }}
+                    >
+                        {body}
+                    </motion.div>
+                }
+            </AnimatePresence>
+        </div>
+    )
+}
+
+interface ExpandIconProps {
+    isOpen: boolean;
+}
+function ExpandIcon({ isOpen }: ExpandIconProps) {
+    return (
+        <AnimatePresence propagate mode="wait">
+            <motion.div
+                className="font-mono font-semibold text-gray-400 text-lg"
+                key="closeIcon"
+                initial={{ rotate: 0 }}
+                animate={{ rotate: isOpen ? 45 : 0 }}
+                transition={{ duration: 0.2 }}
+            >
+                +
+            </motion.div>
+        </AnimatePresence>
+    )
+}

package/src/features/activity-doc/index.ts

@@ -0,0 +1 @@
+export * from "./ActivityDoc";

package/src/features/index.ts

@@ -1 +1,2 @@
-// features impl
+export * from "./permissions/index.js";
+export * from "./activity-doc/index.js";

package/src/features/permissions/SecureButton.tsx

@@ -0,0 +1,18 @@
+import { Permission } from "@vertesia/common";
+import { Button, ButtonProps } from "@vertesia/ui/core";
+import { useUserPermissions } from "./UserPermissionsProvider";
+
+interface SecureButtonProps extends ButtonProps {
+    permission: Permission | Permission[];
+}
+export function SecureButton({ permission, isDisabled, title, children, ...others }: SecureButtonProps) {
+    const perms = useUserPermissions();
+    const hasPermission = perms.hasPermission(permission);
+    if (!hasPermission) {
+        isDisabled = true;
+        title = 'You do not have permission to perform this action';
+    }
+    return (
+        <Button isDisabled={isDisabled} title={title} {...others}>{children}</Button>
+    )
+}

package/src/features/permissions/SecureSidebarItem.tsx

@@ -0,0 +1,19 @@
+import { Permission } from "@vertesia/common";
+import { SidebarItem, SidebarItemProps } from "@vertesia/ui/layout";
+import { useUserPermissions } from "./UserPermissionsProvider";
+
+
+interface SecureSidebarItemProps extends SidebarItemProps {
+    permission: Permission | Permission[];
+}
+export function SecureSidebarItem({ permission, ...others }: SecureSidebarItemProps) {
+    const perms = useUserPermissions();
+    const hasPermission = perms.hasPermission(permission);
+    if (!hasPermission) {
+        return null;
+    } else {
+        return (
+            <SidebarItem {...others} />
+        )
+    }
+}