refactor(web): styles and styleguide

web/src/components/AppBar.jsx

@@ -0,0 +1,55 @@
+import { h } from 'preact';
+import Button from './Button';
+import LinkedLogo from './LinkedLogo';
+import MenuIcon from '../icons/Menu';
+import { useLayoutEffect, useCallback, useState } from 'preact/hooks';
+
+// We would typically preserve these in component state
+// But need to avoid too many re-renders
+let ticking = false;
+let lastScrollY = window.scrollY;
+
+export default function AppBar({ title }) {
+  const [show, setShow] = useState(true);
+  const [atZero, setAtZero] = useState(window.scrollY === 0);
+  const [sidebarVisible, setSidebarVisible] = useState(true);
+
+  const scrollListener = useCallback(
+    (event) => {
+      const scrollY = window.scrollY;
+
+      // if (!ticking) {
+      window.requestAnimationFrame(() => {
+        setShow(scrollY <= 0 || lastScrollY > scrollY);
+        setAtZero(scrollY === 0);
+        ticking = false;
+        lastScrollY = scrollY;
+      });
+      ticking = true;
+      // }
+    },
+    [setShow]
+  );
+
+  useLayoutEffect(() => {
+    document.addEventListener('scroll', scrollListener);
+    return () => {
+      document.removeEventListener('scroll', scrollListener);
+    };
+  }, []);
+
+  return (
+    <div
+      className={`w-full border-b border-color-gray-100 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-800 transform transition-all duration-200 translate-y-0 ${
+        !show ? '-translate-y-full' : ''
+      } ${!atZero ? 'shadow' : ''}`}
+    >
+      <div className="lg:hidden">
+        <Button className="rounded-full w-12 h-12 -ml-4 -mt-4 -mb-4" type="text">
+          <MenuIcon />
+        </Button>
+      </div>
+      <LinkedLogo />
+    </div>
+  );
+}

web/src/components/Box.jsx

@@ -1,16 +0,0 @@
-import { h } from 'preact';
-
-export default function Box({ children, className = '', hover = false, href, ...props }) {
-  const Element = href ? 'a' : 'div';
-  return (
-    <Element
-      className={`bg-white dark:bg-gray-700 shadow-lg rounded-lg p-2 lg:p-4 ${
-        hover ? 'hover:bg-gray-300 hover:dark:bg-gray-500 dark:hover:text-gray-900 dark:hover:text-gray-900' : ''
-      } ${className}`}
-      href={href}
-      {...props}
-    >
-      {children}
-    </Element>
-  );
-}

web/src/components/Button.jsx

@@ -2,22 +2,70 @@ import { h } from 'preact';
 
 const noop = () => {};
 
-const BUTTON_COLORS = {
-  blue: { normal: 'bg-blue-500', hover: 'hover:bg-blue-400' },
-  red: { normal: 'bg-red-500', hover: 'hover:bg-red-400' },
-  green: { normal: 'bg-green-500', hover: 'hover:bg-green-400' },
+const ButtonColors = {
+  blue: {
+    contained: 'bg-blue-500 focus:bg-blue-400 active:bg-blue-600 ring-blue-300',
+    outlined: '',
+    text:
+      'text-blue-500 hover:bg-blue-500 hover:bg-opacity-20 focus:bg-blue-500 focus:bg-opacity-40 active:bg-blue-500 active:bg-opacity-40',
+  },
+  red: {
+    contained: 'bg-red-500 focus:bg-red-400 active:bg-red-600 ring-red-300',
+    outlined: '',
+    text: '',
+  },
+  green: {
+    contained: 'bg-green-500 focus:bg-green-400 active:bg-green-600 ring-green-300',
+    outlined: '',
+    text: '',
+  },
+  disabled: {
+    contained: 'bg-gray-400',
+    outlined: '',
+    text: '',
+  },
 };
 
-export default function Button({ children, className, color = 'blue', onClick, size, ...attrs }) {
+const ButtonTypes = {
+  contained: 'text-white shadow focus:shadow-xl hover:shadow-md',
+  outlined: '',
+  text: 'transition-opacity',
+};
+
+export default function Button({
+  children,
+  className = '',
+  color = 'blue',
+  disabled = false,
+  href,
+  onClick,
+  size,
+  type = 'contained',
+  ...attrs
+}) {
+  let classes = `${className} ${
+    ButtonColors[disabled ? 'disabled' : color][type]
+  } font-sans inline-flex font-bold uppercase text-xs px-2 py-2 rounded outline-none focus:outline-none ring-opacity-50 transition-shadow transition-colors ${
+    disabled ? 'cursor-not-allowed' : 'focus:ring-2 cursor-pointer'
+  }`;
+
+  if (disabled) {
+    classes = classes.replace(/(?:focus|active|hover):[^ ]+/g, '');
+  }
+
+  const Element = href ? 'a' : 'div';
+
   return (
-    <div
+    <Element
       role="button"
+      aria-disabled={disabled ? 'true' : 'false'}
       tabindex="0"
-      className={`rounded ${BUTTON_COLORS[color].normal} text-white pl-4 pr-4 pt-2 pb-2 font-bold shadow ${BUTTON_COLORS[color].hover} hover:shadow-lg cursor-pointer ${className}`}
+      className={classes}
       onClick={onClick || noop}
+      href={href}
       {...attrs}
     >
       {children}
-    </div>
+    </Element>
   );
 }

web/src/components/Card.jsx

@@ -0,0 +1,41 @@
+import { h } from 'preact';
+import Button from './Button';
+import Heading from './Heading';
+
+export default function Box({
+  buttons = [],
+  className = '',
+  content,
+  header,
+  href,
+  icons,
+  media = null,
+  subheader,
+  supportingText,
+  ...props
+}) {
+  const Element = href ? 'a' : 'div';
+
+  return (
+    <div className={`bg-white dark:bg-gray-800 shadow-md hover:shadow-xl rounded-lg overflow-hidden ${className}`}>
+      <Element href={href} {...props}>
+        {media}
+        <div class="p-2 pb-2 lg:p-4 lg:pb-2">{header ? <Heading size="base">{header}</Heading> : null}</div>
+      </Element>
+      {buttons.length || content ? (
+        <div class="pl-4 pb-2">
+          {content || null}
+          {buttons.length ? (
+            <div class="flex space-x-4 -ml-2">
+              {buttons.map(({ name, href }) => (
+                <Button key={name} href={href} type="text">
+                  {name}
+                </Button>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

web/src/components/LinkedLogo.jsx

@@ -0,0 +1,16 @@
+import { h } from 'preact';
+import Heading from './Heading';
+import Logo from './Logo';
+
+export default function LinkedLogo() {
+  return (
+    <Heading size="lg">
+      <a className="transition-colors flex items-center space-x-4 dark:text-white hover:text-blue-500" href="/">
+        <div class="w-10">
+          <Logo />
+        </div>
+        Frigate
+      </a>
+    </Heading>
+  );
+}

web/src/components/Logo.jsx

@@ -0,0 +1,9 @@
+import { h } from 'preact';
+
+export default function Logo() {
+  return (
+    <svg viewBox="0 0 512 512" className="fill-current">
+      <path d="M130 446.5C131.6 459.3 145 468 137 470C129 472 94 406.5 86 378.5C78 350.5 73.5 319 75.5 301C77.4999 283 181 255 181 247.5C181 240 147.5 247 146 241C144.5 235 171.3 238.6 178.5 229C189.75 214 204 216.5 213 208.5C222 200.5 233 170 235 157C237 144 215 129 209 119C203 109 222 102 268 83C314 64 460 22 462 27C464 32 414 53 379 66C344 79 287 104 287 111C287 118 290 123.5 288 139.5C286 155.5 285.76 162.971 282 173.5C279.5 180.5 277 197 282 212C286 224 299 233 305 235C310 235.333 323.8 235.8 339 235C358 234 385 236 385 241C385 246 344 243 344 250C344 257 386 249 385 256C384 263 350 260 332 260C317.6 260 296.333 259.333 287 256L285 263C281.667 263 274.7 265 267.5 265C258.5 265 258 268 241.5 268C225 268 230 267 215 266C200 265 144 308 134 322C124 336 130 370 130 385.5C130 399.428 128 430.5 130 446.5Z" />
+    </svg>
+  );
+}

web/src/components/Menu.jsx

@@ -0,0 +1,44 @@
+import { h } from 'preact';
+import RelativeModal from './RelativeModal';
+import { useCallback, useEffect } from 'preact/hooks';
+
+export default function Menu({ className, children, onDismiss, relativeTo }) {
+  return relativeTo ? (
+    <RelativeModal
+      children={children}
+      className={`${className || ''} pt-2 pb-2`}
+      role="listbox"
+      onDismiss={onDismiss}
+      portalRootID="menus"
+      relativeTo={relativeTo}
+    />
+  ) : null;
+}
+
+export function MenuItem({ focus, icon: Icon, label, onSelect, value }) {
+  const handleClick = useCallback(() => {
+    onSelect && onSelect(value, label);
+  }, [onSelect, value, label]);
+
+  const handleKeydown = useCallback(
+    (event) => {
+      if (event.key === 'Enter') {
+        onSelect && onSelect(value, label);
+      }
+    },
+    [onSelect, value, label]
+  );
+
+  return (
+    <div
+      className={`flex space-x-2 p-2 pl-4 pr-4 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer ${
+        focus ? 'bg-gray-200 dark:bg-gray-800 dark:text-white' : ''
+      }`}
+      onclick={handleClick}
+      role="option"
+    >
+      {Icon ? <Icon /> : null}
+      {label}
+    </div>
+  );
+}

web/src/components/RelativeModal.jsx

@@ -0,0 +1,93 @@
+import { h, Fragment } from 'preact';
+import { createPortal } from 'preact/compat';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+
+export default function RelativeModal({ className, role = 'dialog', children, onDismiss, portalRootID, relativeTo }) {
+  const [position, setPosition] = useState({ top: -999, left: 0, width: 0 });
+  const [show, setShow] = useState(false);
+  const portalRoot = portalRootID && document.getElementById(portalRootID);
+  const ref = useRef(null);
+
+  const handleDismiss = useCallback(
+    (event) => {
+      onDismiss && onDismiss(event);
+    },
+    [onDismiss]
+  );
+
+  const handleKeydown = useCallback(
+    (event) => {
+      const focusable = ref.current.querySelectorAll('[tabindex]');
+      if (event.key === 'Tab' && focusable.length) {
+        if (event.shiftKey && document.activeElement === focusable[0]) {
+          focusable[focusable.length - 1].focus();
+          event.preventDefault();
+        } else if (document.activeElement === focusable[focusable.length - 1]) {
+          focusable[0].focus();
+          event.preventDefault();
+        }
+        return;
+      }
+
+      if (event.key === 'Escape') {
+        setShow(false);
+        return;
+      }
+    },
+    [ref.current]
+  );
+
+  useEffect(() => {
+    if (ref && ref.current && relativeTo && relativeTo.current) {
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
+      const { width: menuWidth, height: menuHeight } = ref.current.getBoundingClientRect();
+      const { x, y, width, height } = relativeTo.current.getBoundingClientRect();
+      let top = y + height;
+      let left = x;
+      // too far right
+      if (left + menuWidth > windowWidth) {
+        left = windowWidth - menuWidth;
+      }
+      // too far left
+      else if (left < 0) {
+        left = 0;
+      }
+      // too close to bottom
+      if (top + menuHeight > windowHeight) {
+        top = y - menuHeight;
+      }
+      setPosition({ left, top, width });
+      const focusable = ref.current.querySelector('[tabindex]');
+      focusable && console.log('focusing');
+      focusable && focusable.focus();
+    }
+  }, [relativeTo && relativeTo.current, ref && ref.current]);
+
+  useEffect(() => {
+    if (position.width) {
+      setShow(true);
+    } else {
+      setShow(false);
+    }
+  }, [show, position.width, ref.current]);
+
+  const menu = (
+    <Fragment>
+      <div className="absolute inset-0" onClick={handleDismiss} />
+      <div
+        className={`bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto max-h-48 transition-all duration-75 transform scale-90 opacity-0 ${
+          show ? 'scale-100 opacity-100' : ''
+        } ${className}`}
+        onkeydown={handleKeydown}
+        role={role}
+        ref={ref}
+        style={position.width > 0 ? `width: ${position.width}px; top: ${position.top}px; left: ${position.left}px` : ''}
+      >
+        {children}
+      </div>
+    </Fragment>
+  );
+
+  return portalRoot ? createPortal(menu, portalRoot) : menu;
+}

web/src/components/Select.jsx

@@ -0,0 +1,106 @@
+import { h, Fragment } from 'preact';
+import ArrowDropdown from '../icons/ArrowDropdown';
+import ArrowDropup from '../icons/ArrowDropup';
+import Menu, { MenuItem } from './Menu';
+import TextField from './TextField';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+
+export default function Select({ label, onChange, options: inputOptions = [], selected: propSelected }) {
+  const options = useMemo(
+    () =>
+      typeof inputOptions[0] === 'string' ? inputOptions.map((opt) => ({ value: opt, label: opt })) : inputOptions,
+    [inputOptions]
+  );
+  const [showMenu, setShowMenu] = useState(false);
+  const [selected, setSelected] = useState(
+    Math.max(
+      options.findIndex(({ value }) => value === propSelected),
+      0
+    )
+  );
+  const [focused, setFocused] = useState(null);
+
+  const ref = useRef(null);
+
+  const handleSelect = useCallback(
+    (value, label) => {
+      setSelected(options.findIndex((opt) => opt.value === value));
+      onChange && onChange(value, label);
+      setShowMenu(false);
+    },
+    [onChange]
+  );
+
+  const handleClick = useCallback(() => {
+    setShowMenu(true);
+  }, [setShowMenu]);
+
+  const handleKeydown = useCallback(
+    (event) => {
+      switch (event.key) {
+        case 'Enter': {
+          if (!showMenu) {
+            setShowMenu(true);
+            setFocused(selected);
+          } else {
+            setSelected(focused);
+            onChange && onChange(options[focused].value, options[focused].label);
+            setShowMenu(false);
+          }
+          break;
+        }
+
+        case 'ArrowDown': {
+          const newIndex = focused + 1;
+          newIndex < options.length && setFocused(newIndex);
+          break;
+        }
+
+        case 'ArrowUp': {
+          const newIndex = focused - 1;
+          newIndex > -1 && setFocused(newIndex);
+          break;
+        }
+      }
+    },
+    [setShowMenu, setFocused, focused, selected]
+  );
+
+  const handleDismiss = useCallback(() => {
+    setShowMenu(false);
+  }, [setShowMenu]);
+
+  // Reset the state if the prop value changes
+  useEffect(() => {
+    const selectedIndex = Math.max(
+      options.findIndex(({ value }) => value === propSelected),
+      0
+    );
+    if (propSelected && selectedIndex !== selected) {
+      setSelected(selectedIndex);
+      setFocused(selectedIndex);
+    }
+  }, [propSelected]);
+
+  return (
+    <Fragment>
+      <TextField
+        inputRef={ref}
+        label={label}
+        onchange={onChange}
+        onclick={handleClick}
+        onkeydown={handleKeydown}
+        readonly
+        trailingIcon={showMenu ? ArrowDropup : ArrowDropdown}
+        value={options[selected]?.label}
+      />
+      {showMenu ? (
+        <Menu className="rounded-t-none" onDismiss={handleDismiss} relativeTo={ref}>
+          {options.map(({ value, label }, i) => (
+            <MenuItem key={value} label={label} focus={focused === i} onSelect={handleSelect} value={value} />
+          ))}
+        </Menu>
+      ) : null}
+    </Fragment>
+  );
+}

web/src/components/Switch.jsx

@@ -1,26 +1,62 @@
 import { h } from 'preact';
 import { useCallback, useState } from 'preact/hooks';
 
-export default function Switch({ checked, label, id, onChange }) {
-  const handleChange = useCallback(() => {
-    onChange(id, !checked);
-  }, [id, onChange, checked]);
+export default function Switch({ checked, id, onChange }) {
+  const [internalState, setInternalState] = useState(checked);
+  const [isFocused, setFocused] = useState(false);
+  const [isHovered, setHovered] = useState(false);
+
+  const handleChange = useCallback(
+    (event) => {
+      if (onChange) {
+        onChange(id, !checked);
+      }
+    },
+    [id, onChange, checked]
+  );
+
+  const handleFocus = useCallback(() => {
+    onChange && setFocused(true);
+  }, [onChange, setFocused]);
+
+  const handleBlur = useCallback(() => {
+    onChange && setFocused(false);
+  }, [onChange, setFocused]);
 
   return (
-    <label for={id} className="flex items-center cursor-pointer">
-      <div className="relative">
-        <input id={id} type="checkbox" className="hidden" onChange={handleChange} checked={checked} />
+    <label
+      for={id}
+      className={`flex items-center justify-center ${onChange ? 'cursor-pointer' : 'cursor-not-allowed'}`}
+    >
+      <div
+        onmouseover={handleFocus}
+        onmouseout={handleBlur}
+        className={`w-8 h-5 relative ${!onChange ? 'opacity-60' : ''}`}
+      >
+        <div className="relative overflow-hidden">
+          <input
+            className="absolute left-48"
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+            tabindex="0"
+            id={id}
+            type="checkbox"
+            onChange={handleChange}
+            checked={checked}
+          />
+        </div>
         <div
-          className={`transition-colors toggle__line w-12 h-6 ${
-            !checked ? 'bg-gray-400' : 'bg-blue-400'
+          className={`w-8 h-3 absolute top-1 left-1 ${
+            !checked ? 'bg-gray-300' : 'bg-blue-300'
           } rounded-full shadow-inner`}
         />
         <div
-          className="transition-transform absolute w-6 h-6 bg-white rounded-full shadow-md inset-y-0 left-0"
+          className={`transition-all absolute w-5 h-5 rounded-full shadow-md inset-y-0 left-0  ring-opacity-30 ${
+            isFocused ? 'ring-4 ring-gray-500' : ''
+          } ${checked ? 'bg-blue-600' : 'bg-white'} ${isFocused && checked ? 'ring-blue-500' : ''}`}
           style={checked ? 'transform: translateX(100%);' : 'transform: translateX(0%);'}
         />
       </div>
-      <div className="ml-3 text-gray-700 font-medium dark:text-gray-200">{label}</div>
     </label>
   );
 }

web/src/components/TextField.jsx

@@ -0,0 +1,91 @@
+import { h } from 'preact';
+import { useCallback, useEffect, useState } from 'preact/hooks';
+
+export default function TextField({
+  helpText,
+  keyboardType = 'text',
+  inputRef,
+  label,
+  leadingIcon: LeadingIcon,
+  onBlur,
+  onChangeText,
+  onFocus,
+  readonly,
+  trailingIcon: TrailingIcon,
+  value: propValue = '',
+  ...props
+}) {
+  const [isFocused, setFocused] = useState(false);
+  const [value, setValue] = useState(propValue);
+
+  const handleFocus = useCallback(
+    (event) => {
+      setFocused(true);
+      onFocus && onFocus(event);
+    },
+    [onFocus]
+  );
+
+  const handleBlur = useCallback(
+    (event) => {
+      setFocused(false);
+      onBlur && onBlur(event);
+    },
+    [onBlur]
+  );
+
+  const handleChange = useCallback(
+    (event) => {
+      const { value } = event.target;
+      setValue(value);
+      onChangeText && onChangeText(value);
+    },
+    [onChangeText, setValue]
+  );
+
+  // Reset the state if the prop value changes
+  useEffect(() => {
+    if (propValue !== value) {
+      setValue(propValue);
+    }
+  }, [propValue, setValue]);
+
+  const labelMoved = isFocused || value !== '';
+
+  return (
+    <div className="w-full">
+      <div
+        className={`bg-gray-100 dark:bg-gray-700 rounded rounded-b-none border-gray-400 border-b p-1 pl-4 pr-3 ${
+          isFocused ? 'border-blue-500 dark:border-blue-500' : ''
+        }`}
+        ref={inputRef}
+      >
+        <label className="flex space-x-2">
+          {LeadingIcon ? <LeadingIcon /> : null}
+          <div className="relative w-full">
+            <input
+              className="h-6 mt-6 w-full bg-transparent focus:outline-none focus:ring-0"
+              onBlur={handleBlur}
+              onFocus={handleFocus}
+              onInput={handleChange}
+              readonly={readonly}
+              tabindex="0"
+              type={keyboardType}
+              value={value}
+              {...props}
+            />
+            <div
+              className={`absolute top-3 transition transform text-gray-600 dark:text-gray-400 ${
+                labelMoved ? 'text-xs -translate-y-2' : ''
+              } ${isFocused ? 'text-blue-500 dark:text-blue-500' : ''}`}
+            >
+              {label}
+            </div>
+          </div>
+          {TrailingIcon ? <TrailingIcon /> : null}
+        </label>
+      </div>
+      {helpText ? <div className="text-xs pl-3 pt-1">{helpText}</div> : null}
+    </div>
+  );
+}