InditexTech · jesusmpc · May 26, 2025 · May 26, 2025 · May 26, 2025 · May 26, 2025
diff --git a/code/CHANGELOG.md b/code/CHANGELOG.md
@@ -13,6 +13,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changes
+
+- [#287](https://github.com/InditexTech/weavejs/issues/287) Update create-app frontend
+
 ## [0.16.2] - 2025-05-26
 
 ### Fixed
@@ -314,73 +318,38 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#18](https://github.com/InditexTech/weavejs/issues/18) Fix awareness not working on store-azure-web-pubsub
 
 [Unreleased]: https://github.com/InditexTech/weavejs/compare/0.16.2...HEAD
-
 [0.16.2]: https://github.com/InditexTech/weavejs/compare/0.16.1...0.16.2
-
 [0.16.1]: https://github.com/InditexTech/weavejs/compare/0.16.0...0.16.1
-
 [0.16.0]: https://github.com/InditexTech/weavejs/compare/0.15.0...0.16.0
-
 [0.15.0]: https://github.com/InditexTech/weavejs/compare/0.14.3...0.15.0
-
 [0.14.3]: https://github.com/InditexTech/weavejs/compare/0.14.2...0.14.3
-
 [0.14.2]: https://github.com/InditexTech/weavejs/compare/0.14.1...0.14.2
-
 [0.14.1]: https://github.com/InditexTech/weavejs/compare/0.14.0...0.14.1
-
 [0.14.0]: https://github.com/InditexTech/weavejs/compare/0.13.1...0.14.0
-
 [0.13.1]: https://github.com/InditexTech/weavejs/compare/0.13.0...0.13.1
-
 [0.13.0]: https://github.com/InditexTech/weavejs/compare/0.12.1...0.13.0
-
 [0.12.1]: https://github.com/InditexTech/weavejs/compare/0.12.0...0.12.1
-
 [0.12.0]: https://github.com/InditexTech/weavejs/compare/0.11.0...0.12.0
-
 [0.11.0]: https://github.com/InditexTech/weavejs/compare/0.10.3...0.11.0
-
 [0.10.3]: https://github.com/InditexTech/weavejs/compare/0.10.2...0.10.3
-
 [0.10.2]: https://github.com/InditexTech/weavejs/compare/0.10.1...0.10.2
-
 [0.10.1]: https://github.com/InditexTech/weavejs/compare/0.10.0...0.10.1
-
 [0.10.0]: https://github.com/InditexTech/weavejs/compare/0.9.3...0.10.0
-
 [0.9.3]: https://github.com/InditexTech/weavejs/compare/0.9.2...0.9.3
-
 [0.9.2]: https://github.com/InditexTech/weavejs/compare/0.9.1...0.9.2
-
 [0.9.1]: https://github.com/InditexTech/weavejs/compare/0.9.0...0.9.1
-
 [0.9.0]: https://github.com/InditexTech/weavejs/compare/0.8.0...0.9.0
-
 [0.8.0]: https://github.com/InditexTech/weavejs/compare/0.7.1...0.8.0
-
 [0.7.1]: https://github.com/InditexTech/weavejs/compare/0.7.0...0.7.1
-
 [0.7.0]: https://github.com/InditexTech/weavejs/compare/0.6.0...0.7.0
-
 [0.6.0]: https://github.com/InditexTech/weavejs/compare/0.5.0...0.6.0
-
 [0.5.0]: https://github.com/InditexTech/weavejs/compare/0.4.0...0.5.0
-
 [0.4.0]: https://github.com/InditexTech/weavejs/compare/0.3.3...0.4.0
-
 [0.3.3]: https://github.com/InditexTech/weavejs/compare/0.3.2...0.3.3
-
 [0.3.2]: https://github.com/InditexTech/weavejs/compare/0.3.1...0.3.2
-
 [0.3.1]: https://github.com/InditexTech/weavejs/compare/0.3.0...0.3.1
-
 [0.3.0]: https://github.com/InditexTech/weavejs/compare/0.2.1...0.3.0
-
 [0.2.1]: https://github.com/InditexTech/weavejs/compare/0.2.0...0.2.1
-
 [0.2.0]: https://github.com/InditexTech/weavejs/compare/0.1.1...0.2.0
-
 [0.1.1]: https://github.com/InditexTech/weavejs/compare/0.1.0...0.1.1
-
 [0.1.0]: https://github.com/InditexTech/weavejs/releases/tag/0.1.0
diff --git a/...d-app/template/+nextjs+azure-web-pubsub/components/room-components/inputs/input-color.tsx b/...d-app/template/+nextjs+azure-web-pubsub/components/room-components/inputs/input-color.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Input } from '@/components/ui/input';
 import {
   ColorPicker,
@@ -28,15 +28,36 @@ export const InputColor = ({
   value,
   onChange,
 }: Readonly<InputColorProps>) => {
-  const [actualValue, setActualValue] = useState<string>(value);
+  const editingRef = React.useRef<HTMLInputElement>(null);
+  const [enterPressed, setEnterPressed] = React.useState<boolean>(false);
+  const [editing, setEditing] = React.useState<boolean>(false);
+  const [editedValue, setEditedValue] = React.useState<string>(value);
 
-  useEffect(() => {
-    setActualValue(value);
-  }, [value]);
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        const input = e.target as HTMLInputElement;
+        input.blur();
+        setEnterPressed(true);
+      }
+    },
+    []
+  );
+
+  const handleOnChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setEditedValue(e.target.value);
+    },
+    []
+  );
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setActualValue(e.target.value);
-  };
+  React.useEffect(() => {
+    if (editingRef.current) {
+      editingRef.current.focus();
+    }
+  }, [editing]);
 
   return (
     <div className="flex flex-col items-start justify-start relative">
@@ -49,8 +70,8 @@ export const InputColor = ({
         <Popover>
           <PopoverTrigger asChild>
             <div
-              className="cursor-pointer shrink-0 w-[40px] h-[40px] mr-1 border border-zinc-200 rounded-none"
-              style={{ background: actualValue }}
+              className="cursor-pointer shrink-0 w-[40px] h-[40px] mr-1 border border-black rounded-none"
+              style={{ background: value }}
             />
           </PopoverTrigger>
           <PopoverContent
@@ -61,17 +82,15 @@ export const InputColor = ({
             className="rounded-none border-black"
           >
             <ColorPicker
-              value={actualValue}
+              value={value}
               onChange={(color) => {
-                setActualValue(color as string);
                 onChange(color as string);
               }}
               onFocus={() => {
                 window.weaveOnFieldFocus = true;
               }}
               onBlurCapture={() => {
                 window.weaveOnFieldFocus = false;
-                onChange(actualValue);
               }}
             >
               <ColorPickerSaturation />
@@ -89,28 +108,39 @@ export const InputColor = ({
             </ColorPicker>
           </PopoverContent>
         </Popover>
-
-        <Input
-          type="text"
-          className="w-full py-0 h-[40px] rounded-none !text-[14px] !border-black font-normal text-black text-right focus:outline-none bg-transparent shadow-none"
-          value={actualValue ?? '#000000ff'}
-          onChange={handleInputChange}
-          onFocus={() => {
-            window.weaveOnFieldFocus = true;
-          }}
-          onBlurCapture={() => {
-            window.weaveOnFieldFocus = false;
-            onChange(actualValue);
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              e.preventDefault();
-              e.stopPropagation();
-              const input = e.target as HTMLInputElement;
-              input.blur();
-            }
-          }}
-        />
+        {!editing && (
+          <Input
+            type="text"
+            className="w-full py-0 h-[40px] rounded-none !text-[14px] !border-black font-normal text-black text-right focus:outline-none bg-transparent shadow-none"
+            value={value ?? '#000000ff'}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              if (enterPressed) {
+                onChange?.(e.target.value);
+                setEnterPressed(false);
+              }
+            }}
+            onFocus={() => {
+              setEditing(true);
+              setEditedValue(value ?? '#000000ff');
+              window.weaveOnFieldFocus = true;
+            }}
+          />
+        )}
+        {editing && (
+          <Input
+            ref={editingRef}
+            type="text"
+            className="w-full py-0 h-[40px] rounded-none !text-[14px] !border-black font-normal text-black text-right focus:outline-none bg-transparent shadow-none"
+            value={editedValue}
+            onChange={handleOnChange}
+            onBlurCapture={() => {
+              window.weaveOnFieldFocus = false;
+              setEditing(false);
+              onChange(editedValue);
+            }}
+            onKeyDown={handleKeyDown}
+          />
+        )}
       </div>
     </div>
   );

diff --git a/...template/+nextjs+azure-web-pubsub/components/room-components/inputs/input-font-family.tsx b/...template/+nextjs+azure-web-pubsub/components/room-components/inputs/input-font-family.tsx
@@ -14,7 +14,7 @@ import {
 import { Check, ChevronDown } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
-import { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import { FONTS } from '@/components/utils/constants';
 
 function InputFontFamily({
@@ -24,11 +24,11 @@ function InputFontFamily({
   value: string;
   onChange: (value: string) => void;
 }) {
-  const [selectedFont, setSelectedFont] = useState<string>(value);
-  const [open, setOpen] = useState(false);
-  const lastSelectedFontFamily = useRef<string>(value);
+  const [selectedFont, setSelectedFont] = React.useState<string>(value);
+  const [open, setOpen] = React.useState(false);
+  const lastSelectedFontFamily = React.useRef<string>(value);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (onChange && selectedFont !== lastSelectedFontFamily.current) {
       lastSelectedFontFamily.current = selectedFont;
       onChange(selectedFont);

diff --git a/...-app/template/+nextjs+azure-web-pubsub/components/room-components/inputs/input-number.tsx b/...-app/template/+nextjs+azure-web-pubsub/components/room-components/inputs/input-number.tsx
@@ -20,20 +20,24 @@ export const InputNumber = ({
   min = -Infinity,
   max = Infinity,
 }: Readonly<InputNumberProps>) => {
-  const [actualValue, setActualValue] = React.useState<string>(`${value}`);
-
-  React.useEffect(() => {
-    setActualValue(`${value}`);
-  }, [value]);
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        const input = e.target as HTMLInputElement;
+        input.blur();
+      }
+    },
+    []
+  );
 
-  const handleBlur = () => {
-    let numberToSave = actualValue === '' ? '0' : actualValue;
-    numberToSave = numberToSave.replace(/^0+/, '');
-    if (isNaN(parseFloat(numberToSave))) {
-      numberToSave = '0';
-    }
-    onChange?.(parseFloat(actualValue));
-  };
+  const handleOnValueChange = React.useCallback(
+    (numberValue: number | undefined) => {
+      onChange?.(numberValue ?? 0);
+    },
+    [onChange]
+  );
 
   return (
     <NumberInput
@@ -43,19 +47,9 @@ export const InputNumber = ({
       max={max}
       decimalScale={2}
       className="w-full text-[3px] font-normal text-gray-700 text-right focus:outline-none bg-transparent"
-      value={Number(actualValue)}
-      onChange={(e) => {
-        setActualValue(e.target.value);
-      }}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter') {
-          e.preventDefault();
-          e.stopPropagation();
-          const input = e.target as HTMLInputElement;
-          input.blur();
-        }
-      }}
-      onBlur={handleBlur}
+      value={Number(value)}
+      onValueChange={handleOnValueChange}
+      onKeyDown={handleKeyDown}
     />
   );
 };