Updates

components/lib/Readme.md

@@ -15,3 +15,13 @@ You need a couple of packages and settings to integrate this package
 ### CSS Base
 
 This package contains a `base.css` file which has all the base css rules required to run. This css file must be imported in your base project, and it can be update in a separate `.css` file.
+
+### Install packages
+
+```sh
+bun add lucide-react tailwind-merge html-to-react gray-matter mdx typescript lodash react-code-blocks react-responsive-modal next-mdx-remote remark-gfm rehype-prism-plus openai
+```
+
+```sh
+bun add -D @types/ace @types/react @types/react-dom tailwindcss @types/mdx @next/mdx
+```

components/lib/form/Input/NumberInputButtons.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import Row from "../../layout/Row";
 import { Info, Minus, Plus } from "lucide-react";
 import twuiNumberfy from "../../utils/numberfy";
@@ -7,10 +7,10 @@ import { InputProps } from ".";
 let pressInterval: any;
 let pressTimeout: any;
 
-type Props = Pick<InputProps<any>, "min" | "max" | "step"> & {
+type Props = Pick<InputProps<any>, "min" | "max" | "step" | "decimal"> & {
+    value: string;
     setValue: React.Dispatch<React.SetStateAction<string>>;
-    getNormalizedValue: (v: string) => void;
+    buttonDownRef: React.RefObject<boolean>;
-    buttonDownRef: React.MutableRefObject<boolean>;
     inputRef: React.RefObject<HTMLInputElement | null>;
 };
 
@@ -18,21 +18,50 @@ type Props = Pick<InputProps<any>, "min" | "max" | "step"> & {
  * # Input Number Text Buttons
  */
 export default function NumberInputButtons({
-    getNormalizedValue,
+    value,
     setValue,
     min,
     max,
     step,
     buttonDownRef,
     inputRef,
+    decimal,
 }: Props) {
     const PRESS_TRIGGER_TIMEOUT = 200;
     const DEFAULT_STEP = 1;
 
+    const [buttonDown, setButtonDown] = useState(false);
+
+    // function getNormalizedValue(value: string) {
+    //     if (numberText) {
+    //         if (props.max && twuiNumberfy(value) > twuiNumberfy(props.max))
+    //             return getFinalValue(props.max);
+
+    //         if (props.min && twuiNumberfy(value) < twuiNumberfy(props.min))
+    //             return getFinalValue(props.min);
+
+    //         return getFinalValue(value);
+    //     } else {
+    //         return value;
+    //     }
+    // }
+
+    useEffect(() => {
+        buttonDownRef.current = buttonDown;
+        if (buttonDown) {
+            setValue(inputRef.current?.value || "");
+        } else {
+            setTimeout(() => {
+                setValue(inputRef.current?.value || "");
+            }, 50);
+        }
+    }, [buttonDown]);
+
     function incrementDownPress() {
         window.clearTimeout(pressTimeout);
+        setButtonDown(true);
+
         pressTimeout = setTimeout(() => {
-            buttonDownRef.current = true;
             pressInterval = setInterval(() => {
                 increment();
             }, 50);
@@ -40,14 +69,15 @@ export default function NumberInputButtons({
     }
 
     function incrementDownCancel() {
-        buttonDownRef.current = false;
+        setButtonDown(false);
         window.clearTimeout(pressTimeout);
         window.clearInterval(pressInterval);
     }
 
     function decrementDownPress() {
+        setButtonDown(true);
+
         pressTimeout = setTimeout(() => {
-            buttonDownRef.current = true;
             pressInterval = setInterval(() => {
                 decrement();
             }, 50);
@@ -55,41 +85,51 @@ export default function NumberInputButtons({
     }
 
     function decrementDownCancel() {
-        buttonDownRef.current = false;
+        setButtonDown(false);
         window.clearTimeout(pressTimeout);
         window.clearInterval(pressInterval);
     }
 
     function increment() {
-        const existingValue = inputRef.current?.value;
+        if (!inputRef.current) return;
-        const existingNumberValue = twuiNumberfy(existingValue);
 
-        if (max && existingNumberValue >= twuiNumberfy(max)) {
+        const existingValue = inputRef.current.value;
-            return setValue(String(max));
+        const existingNumberValue = twuiNumberfy(existingValue, decimal);
-        } else if (min && existingNumberValue < twuiNumberfy(min)) {
+
-            return setValue(String(min));
+        let new_value = "";
+
+        if (max && existingNumberValue >= twuiNumberfy(max, decimal)) {
+            new_value = twuiNumberfy(max, decimal).toLocaleString();
+        } else if (min && existingNumberValue < twuiNumberfy(min, decimal)) {
+            new_value = twuiNumberfy(min, decimal).toLocaleString();
         } else {
-            setValue(
+            new_value = (
-                String(
+                existingNumberValue +
-                    existingNumberValue + twuiNumberfy(step || DEFAULT_STEP),
+                twuiNumberfy(step || DEFAULT_STEP, decimal)
-                ),
+            ).toLocaleString();
-            );
         }
+
+        inputRef.current.value = new_value;
     }
 
     function decrement() {
-        const existingValue = inputRef.current?.value;
+        if (!inputRef.current) return;
-        const existingNumberValue = twuiNumberfy(existingValue);
 
-        if (min && existingNumberValue <= twuiNumberfy(min)) {
+        const existingValue = inputRef.current?.value;
-            setValue(String(min));
+        const existingNumberValue = twuiNumberfy(existingValue, decimal);
+
+        let new_value = "";
+
+        if (min && existingNumberValue <= twuiNumberfy(min, decimal)) {
+            new_value = twuiNumberfy(min, decimal).toLocaleString();
         } else {
-            setValue(
+            new_value = (
-                String(
+                existingNumberValue -
-                    existingNumberValue - twuiNumberfy(step || DEFAULT_STEP),
+                twuiNumberfy(step || DEFAULT_STEP, decimal)
-                ),
+            ).toLocaleString();
-            );
         }
+
+        inputRef.current.value = new_value;
     }
 
     return (

components/lib/form/Input/index.tsx

@@ -6,27 +6,21 @@ import React, {
     ReactNode,
     RefObject,
     TextareaHTMLAttributes,
+    useRef,
 } from "react";
 import { twMerge } from "tailwind-merge";
 import Span from "../../layout/Span";
-import Button from "../../layout/Button";
 import { Eye, EyeOff, Info, InfoIcon, X } from "lucide-react";
 import { AutocompleteOptions } from "../../types";
 import twuiNumberfy from "../../utils/numberfy";
 import Dropdown from "../../elements/Dropdown";
-import Card from "../../elements/Card";
 import Stack from "../../layout/Stack";
 import NumberInputButtons from "./NumberInputButtons";
 import twuiSlugToNormalText from "../../utils/slug-to-normal-text";
-import twuiUseReady from "../../hooks/useReady";
 import Row from "../../layout/Row";
 import Paper from "../../elements/Paper";
 import { TWUISelectValidityObject } from "../Select";
 
-let timeout: any;
-let validationFnTimeout: any;
-let externalValueChangeTimeout: any;
-
 export type InputProps<KeyType extends string> = Omit<
     DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
     "prefix" | "suffix"
@@ -80,6 +74,7 @@ export type InputProps<KeyType extends string> = Omit<
             React.HTMLAttributes<HTMLDivElement>,
             HTMLDivElement
         >;
+        // refreshDefaultValue?: number;
     };
 
 let refreshes = 0;
@@ -121,9 +116,18 @@ export default function Input<KeyType extends string>(
         validity: existingValidity,
         clearInputProps,
         rawNumber,
+        // refreshDefaultValue,
         ...props
     } = inputProps;
 
+    const componentRefreshesRef = useRef(0);
+    let timeoutRef = useRef<any>(null);
+    let validationFnTimeoutRef = useRef<any>(null);
+    let externalValueChangeTimeoutRef = useRef<any>(null);
+
+    refreshes++;
+    componentRefreshesRef.current++;
+
     function getFinalValue(v: any) {
         if (rawNumber) return twuiNumberfy(v);
         if (numberText) {
@@ -167,21 +171,8 @@ export default function Input<KeyType extends string>(
         props.placeholder ||
         (props.name ? twuiSlugToNormalText(props.name) : undefined);
 
-    function getNormalizedValue(value: string) {
-        if (numberText) {
-            if (props.max && twuiNumberfy(value) > twuiNumberfy(props.max))
-                return getFinalValue(props.max);
-
-            if (props.min && twuiNumberfy(value) < twuiNumberfy(props.min))
-                return getFinalValue(props.min);
-
-            return getFinalValue(value);
-        } else {
-            return value;
-        }
-    }
-
     React.useEffect(() => {
+        // if (!existingReady) return;
         if (!existingValidity) return;
         setValidity(existingValidity);
     }, [existingValidity]);
@@ -190,8 +181,8 @@ export default function Input<KeyType extends string>(
         if (buttonDownRef.current) return;
 
         if (changeHandler) {
-            window.clearTimeout(externalValueChangeTimeout);
+            window.clearTimeout(externalValueChangeTimeoutRef.current);
-            externalValueChangeTimeout = setTimeout(() => {
+            externalValueChangeTimeoutRef.current = setTimeout(() => {
                 changeHandler(val);
             }, finalDebounce);
         }
@@ -208,10 +199,10 @@ export default function Input<KeyType extends string>(
                 return;
             }
 
-            window.clearTimeout(timeout);
+            window.clearTimeout(timeoutRef.current);
 
             if (validationRegex) {
-                timeout = setTimeout(() => {
+                timeoutRef.current = setTimeout(() => {
                     setValidity({
                         isValid: validationRegex.test(val),
                         msg: "Value mismatch",
@@ -220,9 +211,9 @@ export default function Input<KeyType extends string>(
             }
 
             if (validationFunction) {
-                window.clearTimeout(validationFnTimeout);
+                window.clearTimeout(validationFnTimeoutRef.current);
 
-                validationFnTimeout = setTimeout(() => {
+                validationFnTimeoutRef.current = setTimeout(() => {
                     if (validationRegex && !validationRegex.test(val)) {
                         return;
                     }
@@ -235,11 +226,20 @@ export default function Input<KeyType extends string>(
     };
 
     React.useEffect(() => {
+        // if (!existingReady) return;
         if (typeof props.value !== "string" || !props.value.match(/./)) return;
         setValue(String(props.value));
     }, [props.value]);
 
+    // React.useEffect(() => {
+    //     if (!refreshDefaultValue) return;
+    //     console.log("Name:", props.title || props.name);
+    //     console.log("props.defaultValue", props.defaultValue);
+    //     // setValue(String(props.defaultValue || ""));
+    // }, [refreshDefaultValue]);
+
     React.useEffect(() => {
+        // if (!existingReady) return;
         if (istextarea && textAreaRef.current) {
         } else if (inputRef?.current) {
             inputRef.current.value = getFinalValue(value);
@@ -452,11 +452,12 @@ export default function Input<KeyType extends string>(
                     <NumberInputButtons
                         setValue={setValue}
                         inputRef={inputRef}
-                        getNormalizedValue={getNormalizedValue}
+                        value={value}
                         max={props.max}
                         min={props.min}
                         step={props.step}
                         buttonDownRef={buttonDownRef}
+                        decimal={decimal}
                     />
                 ) : null}
             </div>

components/lib/hooks/useIntersectionObserver.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 
 type Param = {
     elementRef?: React.RefObject<Element | undefined>;
@@ -9,8 +9,6 @@ type Param = {
     delay?: number;
 };
 
-let timeout: any;
-
 export default function useIntersectionObserver({
     elementRef,
     className,
@@ -19,6 +17,8 @@ export default function useIntersectionObserver({
     delay,
     elId,
 }: Param) {
+    let timeoutRef = useRef<any>(null);
+
     const [isIntersecting, setIsIntersecting] = React.useState(false);
     const [refresh, setRefresh] = React.useState(0);
 
@@ -27,10 +27,10 @@ export default function useIntersectionObserver({
     const observerCallback: IntersectionObserverCallback = React.useCallback(
         (entries, observer) => {
             const entry = entries[0];
-            window.clearTimeout(timeout);
+            window.clearTimeout(timeoutRef.current);
 
             if (entry.isIntersecting) {
-                timeout = setTimeout(() => {
+                timeoutRef.current = setTimeout(() => {
                     setIsIntersecting(true);
 
                     if (removeIntersected) {
@@ -41,7 +41,7 @@ export default function useIntersectionObserver({
                 setIsIntersecting(false);
             }
         },
-        []
+        [],
     );
 
     React.useEffect(() => {

components/lib/hooks/useWebSocket.tsx

@@ -6,6 +6,7 @@ export type UseWebsocketHookParams = {
     disableReconnect?: boolean;
     /** Interval to ping the websocket. So that the connection doesn't go down. Default 30000ms (30 seconds)  */
     keepAliveDuration?: number;
+    /** Interval in ms to force-refresh the connection */
     refreshConnection?: number;
 };
 
@@ -16,10 +17,10 @@ export const WebSocketEventNames = ["wsDataEvent", "wsMessageEvent"] as const;
  * @event wsDataEvent Listen for event named `wsDataEvent` on `window` to receive Data events
  * @event wsMessageEvent Listen for event named `wsMessageEvent` on `window` to receive Message events
  *
- * @example window.addEventLiatener("wsDataEvent", (e)=>{
+ * @example window.addEventListener("wsDataEvent", (e)=>{
  *    console.log(e.detail.data) // type object
  * })
- * @example window.addEventLiatener("wsMessageEvent", (e)=>{
+ * @example window.addEventListener("wsMessageEvent", (e)=>{
  *      console.log(e.detail.message) // type string
  * })
  */
@@ -34,22 +35,29 @@ export default function useWebSocket<
 }: UseWebsocketHookParams) {
     const DEBOUNCE = debounce || 500;
     const KEEP_ALIVE_DURATION = keepAliveDuration || 1000 * 30;
-    const KEEP_ALIVE_TIMEOUT = 1000 * 60 * 3;
-
     const KEEP_ALIVE_MESSAGE = "twui::ping";
 
-    let uptime = 0;
+    const tries = useRef(0);
-    let tries = useRef(0);
 
-    // const queue: string[] = [];
+    // Refs to avoid stale closures in callbacks
+    const urlRef = useRef(url);
+    const disableReconnectRef = useRef(disableReconnect);
+    const keepAliveDurationRef = useRef(KEEP_ALIVE_DURATION);
+
+    React.useEffect(() => {
+        urlRef.current = url;
+        disableReconnectRef.current = disableReconnect;
+        keepAliveDurationRef.current = KEEP_ALIVE_DURATION;
+    });
 
     const msgInterval = useRef<any>(null);
     const sendInterval = useRef<any>(null);
     const keepAliveInterval = useRef<any>(null);
+    const refreshInterval = useRef<any>(null);
+    const reconnectTimeout = useRef<any>(null);
 
-    const [socket, setSocket] = React.useState<WebSocket | undefined>(
+    const [socket, setSocket] = React.useState<WebSocket | undefined>(undefined);
-        undefined
+    const socketRef = useRef<WebSocket | undefined>(undefined);
-    );
 
     const messageQueueRef = React.useRef<string[]>([]);
     const sendMessageQueueRef = React.useRef<string[]>([]);
@@ -74,16 +82,17 @@ export default function useWebSocket<
      * # Connect to Websocket
      */
     const connect = React.useCallback(() => {
+        const currentUrl = urlRef.current;
         const domain = window.location.origin;
-        const wsURL = url.startsWith(`ws`)
+        const wsURL = currentUrl.startsWith("ws")
-            ? url
+            ? currentUrl
-            : domain.replace(/^http/, "ws") + ("/" + url).replace(/\/\//g, "/");
+            : domain.replace(/^http/, "ws") + ("/" + currentUrl).replace(/\/\//g, "/");
 
         if (!wsURL) return;
 
-        let ws = new WebSocket(wsURL);
+        const ws = new WebSocket(wsURL);
 
-        ws.onerror = (ev) => {
+        ws.onerror = () => {
             console.log(`Websocket ERROR:`);
         };
 
@@ -91,15 +100,17 @@ export default function useWebSocket<
             messageQueueRef.current.push(ev.data);
         };
 
-        ws.onopen = (ev) => {
+        ws.onopen = () => {
             window.clearInterval(keepAliveInterval.current);
 
             keepAliveInterval.current = window.setInterval(() => {
                 if (ws.readyState === WebSocket.OPEN) {
                     ws.send(KEEP_ALIVE_MESSAGE);
                 }
-            }, KEEP_ALIVE_DURATION);
+            }, keepAliveDurationRef.current);
 
+            tries.current = 0;
+            socketRef.current = ws;
             setSocket(ws);
             console.log(`Websocket connected to ${wsURL}`);
         };
@@ -111,23 +122,21 @@ export default function useWebSocket<
                 wasClean: ev.wasClean,
             });
 
-            if (disableReconnect) return;
-
-            console.log("Attempting to reconnect ...");
-            console.log("URL:", url);
             window.clearInterval(keepAliveInterval.current);
+            socketRef.current = undefined;
+            setSocket(undefined);
 
-            console.log("tries", tries);
+            if (disableReconnectRef.current) return;
 
             if (tries.current >= 3) {
+                console.log("Max reconnect attempts reached.");
                 return;
             }
 
-            console.log("Attempting to reconnect ...");
-
             tries.current += 1;
-
+            const backoff = Math.min(1000 * 2 ** tries.current, 30000);
-            connect();
+            console.log(`Attempting to reconnect in ${backoff}ms... (attempt ${tries.current})`);
+            reconnectTimeout.current = window.setTimeout(connect, backoff);
         };
     }, []);
 
@@ -135,18 +144,40 @@ export default function useWebSocket<
      * # Initial Connection
      */
     React.useEffect(() => {
-        if (socket) return;
-
         connect();
+
+        return () => {
+            window.clearTimeout(reconnectTimeout.current);
+            window.clearInterval(keepAliveInterval.current);
+            window.clearInterval(refreshInterval.current);
+            socketRef.current?.close();
+        };
     }, []);
 
+    /**
+     * # Refresh Connection Interval
+     */
+    React.useEffect(() => {
+        if (!refreshConnection) return;
+
+        refreshInterval.current = window.setInterval(() => {
+            console.log("Refreshing WebSocket connection...");
+            window.clearTimeout(reconnectTimeout.current);
+            socketRef.current?.close();
+            tries.current = 0;
+            connect();
+        }, refreshConnection);
+
+        return () => window.clearInterval(refreshInterval.current);
+    }, [refreshConnection]);
+
     React.useEffect(() => {
         if (!socket) return;
 
         sendInterval.current = setInterval(handleSendMessageQueue, DEBOUNCE);
         msgInterval.current = setInterval(handleReceivedMessageQueue, DEBOUNCE);
 
-        return function () {
+        return () => {
             window.clearInterval(sendInterval.current);
             window.clearInterval(msgInterval.current);
         };
@@ -173,7 +204,8 @@ export default function useWebSocket<
      * Send Message Queue Handler
      */
     const handleSendMessageQueue = React.useCallback(() => {
-        if (!socket || socket.readyState !== WebSocket.OPEN) {
+        const ws = socketRef.current;
+        if (!ws || ws.readyState !== WebSocket.OPEN) {
             window.clearInterval(sendInterval.current);
             return;
         }
@@ -181,19 +213,18 @@ export default function useWebSocket<
         const newMessage = sendMessageQueueRef.current.shift();
         if (!newMessage) return;
 
-        socket.send(newMessage);
+        ws.send(newMessage);
-    }, [socket]);
+    }, []);
 
     /**
      * # Send Data Function
      */
-    const sendData = React.useCallback(
+    const sendData = React.useCallback((data: T) => {
-        (data: T) => {
         try {
             const queueItemJSON = JSON.stringify(data);
 
             const existingQueue = sendMessageQueueRef.current.find(
-                    (q) => q == queueItemJSON
+                (q) => q === queueItemJSON
             );
             if (!existingQueue) {
                 sendMessageQueueRef.current.push(queueItemJSON);
@@ -201,9 +232,7 @@ export default function useWebSocket<
         } catch (error: any) {
             console.log("Error Sending socket message", error.message);
         }
-        },
+    }, []);
-        [socket]
-    );
 
     return { socket, sendData };
 }

components/lib/utils/fetch/fetchApi.ts

@@ -93,6 +93,7 @@ export default async function fetchApi<
                 options.headers = _.merge(options.headers, finalHeaders);
 
                 const finalOptions: any = { ...options };
+
                 fetchData = await fetch(finalURL, finalOptions);
             } else {
                 const finalOptions = {