refactor: refactor Selection and input

Author: ZanzyTHEbar

GUI/ETVR/src/app.tsx

@@ -3,8 +3,8 @@ import { handleAppBoot, handleTitlebar } from '@src/utils/hooks/app'
 import { AppProvider } from '@store/context/app'
 
 const AppRoutes = lazy(() => import('@routes/Routes'))
-const NewWindow = lazy(() => import('@components/NewWindow'))
-const ExampleMenu = lazy(() => import('@components/NewWindow/Example'))
+const NewContextMenu = lazy(() => import('@components/NewMenu'))
+const ExampleMenu = lazy(() => import('@components/NewMenu/Example'))
 const ToastNotificationWindow = lazy(() => import('@components/Notifications'))
 
 const App = () => {
@@ -19,9 +19,9 @@ const App = () => {
             <Suspense>
                 <AppProvider>
                     <AppRoutes />
-                    <NewWindow ref={ref} name="test">
+                    <NewContextMenu ref={ref} name="test">
                         <ExampleMenu />
-                    </NewWindow>
+                    </NewContextMenu>
                     <ToastNotificationWindow />
                 </AppProvider>
             </Suspense>

GUI/ETVR/src/components/AppSettings/OscSettings/index.tsx

@@ -1,4 +1,4 @@
-import { Input } from '@components/Input'
+import Input from '@components/Input'
 
 export interface IProps {
     onChangeAddress: (value: string) => void

GUI/ETVR/src/components/FirmwareList/index.tsx

@@ -1,11 +1,8 @@
-import { Select } from '@kobalte/core'
-import { FaSolidCheck } from 'solid-icons/fa'
-import { HiSolidSelector } from 'solid-icons/hi'
-import { createSignal } from 'solid-js'
+import { type Component, createSignal } from 'solid-js'
+import Selection from '@components/Selection'
 import { useAppAPIContext } from '@src/store/context/api'
-import './styles.css'
 
-export const FirmwareList = () => {
+const FirmwareList: Component = () => {
     const [firmwareVersion, setFirmwareVersion] = createSignal('')
 
     const { getFirmwareAssets, getFirmwareVersion } = useAppAPIContext()
@@ -21,49 +18,15 @@ export const FirmwareList = () => {
 
     if (getFirmwareVersion) setFirmwareVersion(getFirmwareVersion())
 
-    const [value, setValue] = createSignal(defaultValue)
-
-    // TODO: call api to download firmware assets
-    const handleSubmit = (e: SubmitEvent) => {
-        e.preventDefault()
-        console.log('[Firmware Select]: ', value())
-    }
-
     return (
-        <form onSubmit={handleSubmit}>
-            <Select.Root
-                name="board-select"
-                value={value()}
-                onValueChange={setValue}
-                defaultValue={defaultValue}
-                options={boardNames}
-                placeholder="Select a board..."
-                valueComponent={(props) => props.item.rawValue}
-                itemComponent={(props) => (
-                    <Select.Item item={props.item} class="select__item">
-                        <Select.ItemLabel>{props.item.rawValue}</Select.ItemLabel>
-                        <Select.ItemIndicator class="select__item-indicator">
-                            <FaSolidCheck />
-                        </Select.ItemIndicator>
-                    </Select.Item>
-                )}>
-                <Select.Trigger class="select__trigger" aria-label="ESP_Boards">
-                    <Select.Value class="select__value" />
-                    <Select.Icon class="select__icon">
-                        <HiSolidSelector />
-                    </Select.Icon>
-                </Select.Trigger>
-                <Select.Description>Firmware - {firmwareVersion()}</Select.Description>
-                <Select.Portal>
-                    <Select.Content class="select__content">
-                        <Select.Listbox class="select__listbox" />
-                    </Select.Content>
-                </Select.Portal>
-            </Select.Root>
-            <div>
-                <button type="reset">Reset</button>
-                <button>Submit</button>
-            </div>
-        </form>
+        <Selection
+            name="firmware"
+            options={boardNames}
+            placeholder="Select a board"
+            defaultValue={defaultValue}
+            description={`Firmware version: ${firmwareVersion()}`}
+        />
     )
 }
+
+export default FirmwareList

GUI/ETVR/src/components/FirmwareList/styles.css

@@ -1,10 +1,16 @@
-import { Input } from '@components/Input'
+import Input from '@components/Input'
 
-export const Form = () => {
+const Form = () => {
     const handleChange = (value: string) => {
         console.log(value)
     }
 
+    /* // TODO: call api to download firmware assets
+    const handleSubmit = (e: SubmitEvent) => {
+        e.preventDefault()
+        console.log(`${props.name} [Select]: `, value())
+    } */
+
     return (
         <div>
             <form action="#">
@@ -56,3 +62,5 @@ export const Form = () => {
         </div>
     )
 }
+
+export default Form

GUI/ETVR/src/components/Form/index.tsx

@@ -1,4 +1,6 @@
-export interface IProps {
+import type { Component } from 'solid-js'
+
+interface Props {
     onChange: (value: string) => void
     placeholder: string
     header: string
@@ -7,7 +9,7 @@ export interface IProps {
     required?: boolean
 }
 
-export const Input = (props: IProps) => {
+const Input: Component<Props> = (props) => {
     return (
         <div class="flex grow rounded-xl flex-col pl-3 pr-3 pb-3 pt-3 bg-[#333742] text-white">
             <div>
@@ -35,3 +37,5 @@ export const Input = (props: IProps) => {
         </div>
     )
 }
+
+export default Input

GUI/ETVR/src/components/Input/index.tsx

@@ -1,12 +1,13 @@
-import { Button } from '@kobalte/core'
+import { Button, Switch } from '@kobalte/core'
+
 
 const ExampleMenu = () => {
     return (
         <div>
-            <h1 class="text-lg">Sub Menu</h1>
+            <h1 class="text-lg">Dev Menu</h1>
             <hr class="divider" />
             <label class="context-menu-labels" for="test-button">
-                Test Button
+                Enable Dev Tools
             </label>
             <Button.Root
                 id="test-button"

GUI/ETVR/src/components/NewWindow/Example/index.tsx GUI/ETVR/src/components/NewMenu/Example/index.tsx

@@ -1,14 +1,12 @@
-import { children, createSignal, createEffect, Show, onMount, onCleanup } from 'solid-js'
+import { createSignal, createEffect, Show, onMount, onCleanup, type Component } from 'solid-js'
 import { Portal } from 'solid-js/web'
 import { onClickOutside, useEventListener } from 'solidjs-use'
 import type { NewMenu } from '@static/types/interfaces'
 import { useAppUIContext } from '@src/store/context/ui'
 import './styles.css'
 
-const NewMenu = (props: NewMenu) => {
+const NewContextMenu: Component<NewMenu> = (props) => {
     const [ref, setRef] = createSignal<HTMLElement>()
-    const Children = children(() => props.children)
-
     const { menuOpenStatus, setMenu } = useAppUIContext()
 
     onMount(() => {
@@ -36,23 +34,21 @@ const NewMenu = (props: NewMenu) => {
         })
     })
     return (
-        <div>
-            <Show when={menuOpenStatus() ?? false}>
-                <Portal mount={props?.ref as HTMLElement}>
-                    <div
-                        ref={setRef}
-                        id={props.name}
-                        class="context-menu"
-                        style={{
-                            top: `${menuOpenStatus()?.y ?? 0}px`,
-                            left: `${menuOpenStatus()?.x ?? 0}px`,
-                        }}>
-                        <Children />
-                    </div>
-                </Portal>
-            </Show>
-        </div>
+        <Show when={menuOpenStatus() ?? false}>
+            <Portal mount={props?.ref as HTMLElement}>
+                <div
+                    ref={setRef}
+                    id={props.name}
+                    class="context-menu shadow-lg bg-[#21232d] dark:bg-gray-800 dark:text-white dark:border-gray-700 border border-gray-200 z-50 absolute"
+                    style={{
+                        top: `${menuOpenStatus()?.y ?? 0}px`,
+                        left: `${menuOpenStatus()?.x ?? 0}px`,
+                    }}>
+                    {props.children}
+                </div>
+            </Portal>
+        </Show>
     )
 }
 
-export default NewMenu
+export default NewContextMenu

GUI/ETVR/src/components/NewWindow/index.tsx GUI/ETVR/src/components/NewMenu/index.tsx

@@ -1,5 +1,5 @@
 .context-menu {
-    @apply text-white fixed flex flex-col bg-[#313131] p-3 gap-3 w-fit rounded-sm z-[999];
+    @apply text-white fixed flex flex-col bg-[#313131] p-3 gap-3 w-fit rounded-lg z-[999];
 }
 
 .context-menu button {