chore: local dev, name attrs, clear icon fixes, refactors. (#48)

morganney · Oct 21, 2023 · af2869a · af2869a
1 parent a04b920
commit af2869a
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 8 deletions.
diff --git a/packages/components/src/autoSuggest/mod.tsx b/packages/components/src/autoSuggest/mod.tsx
@@ -48,6 +48,7 @@ interface AutoSuggestProps<T> {
   placeholder?: string
   labelledBy?: string
   id?: string
+  name?: string
 }
 interface Label {
   label: string
@@ -186,6 +187,7 @@ const getChangeEvt = (value?: string | null): ChangeEvent<HTMLInputElement> => {
 }
 const AutoSuggest = <U,>({
   id,
+  name,
   items,
   value,
   onBlur,
@@ -433,6 +435,7 @@ const AutoSuggest = <U,>({
             }
           })}
           id={id}
+          name={name}
           color={color}
           size={size}
           fontSize={sizing[size].fontSize}

diff --git a/packages/components/src/input/mod.tsx b/packages/components/src/input/mod.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useState, useRef } from 'react'
+import { forwardRef, useCallback, useState, useRef, useEffect } from 'react'
 import styled from 'styled-components'
 
 import { Close as CloseIcon } from '../icons/close/mod.js'
@@ -9,6 +9,7 @@ import type { Size } from '../types.js'
 
 interface InputProps {
   id?: string
+  name?: string
   size?: Size
   labelledBy?: string
   list?: string
@@ -77,6 +78,7 @@ const StyledInput = styled.input<{
 const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   {
     id,
+    name,
     list,
     labelledBy,
     value,
@@ -97,10 +99,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 ) {
   const wrapper = useRef<HTMLSpanElement>(null)
   const isClearable = typeof onClear === 'function'
-  const [hasFocus, setHasFocus] = useState(false)
+  const [showClearIcon, setShowClearIcon] = useState(false)
   const handleOnFocus = useCallback(
     (evt: FocusEvent) => {
-      setHasFocus(true)
+      setShowClearIcon(true)
 
       if (typeof onFocus === 'function') {
         onFocus(evt)
@@ -110,7 +112,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   )
   const handleOnBlur = useCallback((evt: FocusEvent) => {
     if (!evt.currentTarget.contains(evt.relatedTarget)) {
-      setHasFocus(false)
+      setShowClearIcon(false)
     }
   }, [])
   const handleOnClear = useCallback(() => {
@@ -121,10 +123,32 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     }
   }, [onClear])
 
+  useEffect(() => {
+    /**
+     * When the AutoSuggest changes values, either from
+     * user interaction or dynamic scripting, specifically
+     * when `onSelectedItemChanged` is invoked, the blur
+     * event can not fire and the state to hide the clear icon
+     * does not update correctly.
+     *
+     * This corrects for that by resetting the state whenever
+     * the input state says to show the clear icon while the
+     * <input /> is not the activeElement.
+     */
+    if (
+      showClearIcon &&
+      wrapper.current?.querySelector('input') !== document.activeElement
+    ) {
+      setShowClearIcon(false)
+    }
+  }, [value, showClearIcon])
+
   return (
     <Wrapper ref={wrapper} onBlur={handleOnBlur}>
       <StyledInput
         id={id}
+        name={name ?? id}
+        title={value?.toString() || undefined}
         ref={ref}
         list={list}
         type={type}
@@ -142,7 +166,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         borderColor={borderColor}
         aria-labelledby={labelledBy}
       />
-      {value && !isDisabled && isClearable && hasFocus && (
+      {value && !isDisabled && isClearable && showClearIcon && (
         <Close onClick={handleOnClear} tabIndex={0} size="small" />
       )}
     </Wrapper>

diff --git a/packages/components/src/toast/story.tsx b/packages/components/src/toast/story.tsx
@@ -35,7 +35,7 @@ export default {
     type: 'info',
     variant: 'standard',
     message: 'A toast message',
-    position: 'bottom left',
+    position: 'top center',
     timeout: 6_000
   },
   argTypes: {

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -9,6 +9,7 @@
     "cycles": "madge --circular --warning --exclude node_modules --ts-config ./tsconfig.json --extensions ts,tsx src",
     "prettier": "prettier -w .",
     "dev": "vite",
+    "dev:local": "RESTBUS_HOST=http://localhost:3000 vite",
     "dev:node": "tsx devServer.ts",
     "lint": "eslint . src --ext .ts,.tsx --max-warnings 0",
     "lint:fix": "npm run lint -- --fix",

diff --git a/packages/ui/src/components/selectors/agencies.tsx b/packages/ui/src/components/selectors/agencies.tsx
@@ -18,6 +18,7 @@ const Agencies: FC<Props> = ({ agencies, selected, isDisabled, onSelect }) => {
         onClear
         caseInsensitive
         inputBoundByItems
+        name="agencies"
         size="small"
         color="black"
         value={selected ?? undefined}

diff --git a/packages/ui/src/components/selectors/directions.tsx b/packages/ui/src/components/selectors/directions.tsx
@@ -38,6 +38,7 @@ const Directions: FC<Props> = ({
         inputBoundByItems
         size="small"
         color="black"
+        name="directions"
         itemToString={itemToString}
         value={selected ?? undefined}
         isDisabled={isDisabled}

diff --git a/packages/ui/src/components/selectors/routes.tsx b/packages/ui/src/components/selectors/routes.tsx
@@ -25,6 +25,7 @@ const Routes: FC<Props> = ({
         inputBoundByItems
         size="small"
         color="black"
+        name="routes"
         value={selected ?? undefined}
         isDisabled={isDisabled}
         placeholder={`Routes ... ${routes ? `(${routes.length})` : ''}`}

diff --git a/packages/ui/src/components/selectors/stops.tsx b/packages/ui/src/components/selectors/stops.tsx
@@ -26,6 +26,7 @@ const Stops: FC<Props> = ({
         inputBoundByItems
         size="small"
         color="black"
+        name="stops"
         value={selected ?? undefined}
         isDisabled={isDisabled}
         placeholder={`Stops ... ${stops.length ? `(${stops.length})` : ''}`}

diff --git a/packages/ui/src/components/settings/vehicle.tsx b/packages/ui/src/components/settings/vehicle.tsx
@@ -72,7 +72,12 @@ const VehicleSettings: FC = () => {
         direction="horizontal-rev"
         justifyContent="flex-end"
         fontWeight="normal">
-        <input type="checkbox" checked={vehicle.visible} onChange={onChangeVisible} />
+        <input
+          type="checkbox"
+          name="visible"
+          checked={vehicle.visible}
+          onChange={onChangeVisible}
+        />
       </FormItem>
       <FormItem
         label="Color predicted"
@@ -81,6 +86,7 @@ const VehicleSettings: FC = () => {
         fontWeight="normal">
         <input
           type="checkbox"
+          name="colorPredicted"
           disabled={!vehicle.visible}
           checked={vehicle.markPredictedVehicles}
           onChange={onTogglePredictedVehicles}
@@ -94,6 +100,7 @@ const VehicleSettings: FC = () => {
           fontWeight="normal">
           <input
             type="checkbox"
+            name="hideOther"
             disabled={!vehicle.visible}
             checked={vehicle.hideOtherDirections}
             onChange={onToggleHideOtherDirections}

diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
@@ -1,3 +1,5 @@
+import { env } from 'node:process'
+
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
@@ -13,7 +15,14 @@ export default defineConfig(() => {
       })
     ],
     server: {
-      host: true
+      host: true,
+      proxy: !env.RESTBUS_HOST
+        ? undefined
+        : {
+            '/restbus': {
+              target: env.RESTBUS_HOST
+            }
+          }
     }
   }
 })