nitro-web 0.0.1

package/components/partials/form/input-date.jsx

@@ -0,0 +1,223 @@
+// todo: finish tailwind conversion
+import { css, theme } from 'twin.macro'
+import { DayPicker } from 'react-day-picker'
+import { format, isValid, parse } from 'date-fns'
+import { getCurrencyPrefixWidth } from '../../../util.js'
+import { Dropdown } from '../element/dropdown.jsx'
+import 'react-day-picker/dist/style.css'
+
+export function InputDate({ className, prefix, id, onChange, mode='single', value, ...props }) {
+  /**
+   * @param {string} mode - 'single'|'range'|'multiple' - an array is returned for non-single modes
+   */
+  const localePattern = 'd MMM yyyy'
+  const isInvalid = className?.includes('is-invalid') ? 'is-invalid' : ''
+  const [prefixWidth, setPrefixWidth] = useState()
+  const ref = useRef(null)
+
+  const dates = useMemo(() => {
+    // Convert the value to an array of valid* dates
+    const _dates = Array.isArray(value) ? value : [value]
+    return _dates.map(date => isValid(date) ? new Date(date) : undefined)
+  }, [value])
+
+  // Hold the month in state to control the calendar when the input changes
+  const [month, setMonth] = useState(dates[0])
+
+  // Hold the input value in state
+  const [inputValue, setInputValue] = useState(() => getInputValue(dates))
+
+  useEffect(() => {
+    // Get the prefix content width
+    setPrefixWidth(getCurrencyPrefixWidth(prefix, 4))
+  }, [prefix])
+
+  function handleDayPickerSelect(newDate) {
+    if (mode == 'single') {
+      ref.current.setIsActive(false) // close the dropdown
+      callOnChange(newDate?.getTime() || null)
+      setInputValue(getInputValue([newDate]))
+
+    } else if (mode == 'range') {
+      const {from, to} = newDate || {} // may not exist
+      callOnChange(from ? [from?.getTime() || null, to?.getTime() || null] : null)
+      setInputValue(getInputValue(from ? [from, to] : []))
+
+    } else {
+      callOnChange(newDate.filter(o => o).map(d => d.getTime()))
+      setInputValue(getInputValue(newDate.filter(o => o)))
+    }
+  }
+
+  function handleInputChange(e) {
+    setInputValue(e.target.value) // keep the input value in sync
+
+    let split = e.target.value.split(/-|,/).map(o => {
+      const date = parse(o.trim(), localePattern, new Date())
+      return isValid(date) ? date : null
+    })
+    
+    // For single/range we need limit the array
+    if (mode == 'range') split.length = 2
+    else if (mode == 'multiple') split = split.filter(o => o) // remove invalid dates
+
+    // Swap dates if needed
+    if (mode == 'range' && split[0] > split[1]) split = [split[0], split[0]]
+
+    // Set month
+    for (let i=split.length; i--;) {
+      if (split[i]) setMonth(split[i])
+      break
+    }
+    
+    // Set dates
+    callOnChange(mode == 'single' ? split[0] : split)
+  }
+
+  function getInputValue(dates) {
+    return dates.map(o => o ? format(o, localePattern) : '').join(mode == 'range' ? ' - ' : ', ')
+  }
+
+  function callOnChange(value) {
+    if (onChange) onChange({ target: { id: id, value: value }}) // timestamp|[timestamp]
+  }
+
+  return (
+    <Dropdown
+      ref={ref}
+      css={style}
+      menuToggles={false}
+      animate={false}
+      // menuIsOpen={true}
+      menuChildren={
+        <DayPicker 
+          mode={mode}
+          month={month}
+          onMonthChange={setMonth}
+          numberOfMonths={mode == 'range' ? 2 : 1}
+          selected={mode === 'single' ? dates[0] : mode == 'range' ? { from: dates[0], to: dates[1] } : dates}
+          onSelect={handleDayPickerSelect}
+        />
+      }
+    > 
+      <div>
+        {prefix && <span class={`input-prefix ${inputValue ? 'has-value' : ''}`}>{prefix}</span>}
+        <input 
+          {...props}
+          key={'k'+prefixWidth}
+          id={id}
+          autoComplete="off" 
+          className={
+            className + ' ' + isInvalid
+          } 
+          value={inputValue}
+          onChange={handleInputChange}
+          onBlur={() => setInputValue(getInputValue(dates))}
+          style={{ textIndent: prefixWidth + 'px' }}
+        />
+      </div>
+    </Dropdown>
+  )
+}
+
+const style = () => css`
+  .rdp {
+    --rdp-cell-size: 34px;
+    --rdp-caption-font-size: 12px;
+    --rdp-accent-color: ${theme('colors.primary')};
+    font-size: 13px;
+    margin: 0 12px 11px;
+    svg {
+      width: 13px;
+      height: 13px;
+    }
+    .rdp-caption_label {
+      height: var(--rdp-cell-size);
+    }
+    .rdp-head_cell {
+      text-align: center !important;
+    }
+    tr {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      th,
+      td {
+        display: flex;
+        align-items: center;
+        margin-left: -1px;
+        margin-top: -1px;
+        .rdp-day {
+          border: 0 !important;
+          position: relative;
+          border-radius: 0 !important;
+          color: inherit;
+          background-color: transparent !important;
+          &:before {
+            content: '';
+            position: absolute;
+            display: block;
+            left: 0px;
+            top: 0px;
+            bottom: 0px;
+            right: 0px;
+            z-index: -1;
+          }
+        }
+        .rdp-day:focus,
+        .rdp-day:hover,
+        .rdp-day:active {
+          &:not([disabled]):not(.rdp-day_selected) {
+            &:before {
+              left: 1px;
+              top: 1px;
+              bottom: 1px;
+              right: 1px;
+              border-radius: 50%;
+              background-color: #e7edff;
+            }
+            &:active {
+              color: white;
+              &:before {
+                background-color: ${theme('colors.primary')};
+              }
+            }
+          }
+        }
+        .rdp-day_selected {
+          color: white;
+          :before {
+            border-radius: 50%;
+            background-color: ${theme('colors.primary')};
+          }
+        }
+        .rdp-day_range_middle {
+          color: ${theme('colors.dark')};
+          :before {
+            border-radius: 0;
+            border: 1px solid rgb(151 133 185);
+            background-color: ${theme('colors.primary-light')};
+          }
+        }
+        .rdp-day_range_start,
+        .rdp-day_range_end {
+          position: relative;
+          z-index: 1;
+          &.rdp-day_range_start:before {
+            border-top-right-radius: 0px;
+            border-bottom-right-radius: 0px;
+          }
+          &.rdp-day_range_end:before {
+            border-top-left-radius: 0px;
+            border-bottom-left-radius: 0px;
+          }
+          &.rdp-day_range_start.rdp-day_range_end:before {
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+  }
+`
+
+

package/components/partials/form/input.jsx

@@ -0,0 +1,131 @@
+/* eslint-disable brace-style */
+import { css } from '@emotion/react'
+import * as util from '../../../util.js'
+import { InputCurrency } from './input-currency.jsx'
+import { InputColor } from './input-color.jsx'
+// import { InputDate } from './input-date.jsx'
+import {
+  EnvelopeIcon,
+  // CalendarIcon,
+  FunnelIcon,
+  MagnifyingGlassIcon,
+  EyeIcon,
+  EyeSlashIcon,
+} from '@heroicons/react/20/solid'
+
+/**
+ * Input
+ * @param {string} name - field name or path on state (used to match errors), e.g. 'date', 'company.email'
+ * @param {object} state - State object to get the value, and check errors against
+ * @param {string} [id] - not required, name used if not provided
+ * @param {('password'|'email'|'text'|'date'|'filter'|'search'|'color'|'textarea'|'currency')} [type='text']
+ */
+export function Input({ name='', state, id, type='text', ...props }) {
+  let iconDir = 'right'
+  let InputEl = 'input'
+  const [inputType, setInputType] = useState(() => {
+    return type == 'password' ? 'password' : (type == 'textarea' ? type : 'text')
+  })
+
+  if (!name) throw new Error('Input component requires a `name` prop')
+  
+  // Input is always controlled if state is passed in
+  if (props.value) {
+    var value = props.value
+  } else if (typeof state == 'object') {
+    value = util.deepFind(state, name)
+    if (typeof value == 'undefined') value = ''
+  }
+
+  // Find any errors that match this input path
+  for (let item of (state?.errors || [])) {
+    if (util.isRegex(name) && (item.title||'').match(name)) var error = item
+    else if (item.title == name) error = item
+  }
+
+  // Special input types
+  if (type == 'password') {
+    var onClick = () => setInputType(o => o == 'password' ? 'text' : 'password')
+    var IconSvg = inputType == 'password' ? <EyeSlashIcon /> : <EyeIcon />
+  } else if (type == 'email') { 
+    IconSvg = <EnvelopeIcon />
+  // } else if (type == 'date') { 
+  //   IconSvg = <CalendarIcon />
+  //   InputEl = InputDate
+  } else if (type == 'filter') { 
+    IconSvg = <FunnelIcon />
+  } else if (type == 'search') { 
+    IconSvg = <MagnifyingGlassIcon />
+  } else if (type == 'color') {
+    iconDir = 'left'
+    IconSvg = <ColorIcon hex={value}/>
+    InputEl = InputColor
+  } else if (type == 'textarea') {
+    InputEl = 'textarea'
+  } else if (type == 'currency') {
+    if (!props.config) throw new Error('Input: `config` is required when type=currency')
+    InputEl = InputCurrency
+  }
+
+  // Create base props object
+  const inputProps = {
+    ...props,
+    // autoComplete: props.autoComplete || 'off',
+    id: id || name,
+    type: inputType,
+    value: value,
+    className: 
+      'col-start-1 row-start-1 block w-full rounded-md bg-white py-2 text-sm outline outline-1 -outline-offset-1 ' +
+      'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 sm:text-sm/6 ' +
+      (iconDir == 'right' && IconSvg ? 'sm:pr-9 pl-3 pr-10 ' : IconSvg ? 'sm:pl-9 pl-10 pr-3 ' : 'px-3 ') +
+      (error ? 'text-red-900 outline-danger focus:outline-danger ' : 'text-input outline-input-border focus:outline-primary ') + 
+      (iconDir == 'right' ? 'justify-self-start ' : 'justify-self-end '),
+  }
+
+  // Only add iconEl prop for custom components
+  const showIconElHere = !['color', 'date'].includes(type)
+  const iconEl = <IconEl iconDir={iconDir} IconSvg={IconSvg} onClick={onClick} type={type} />
+  if (!showIconElHere) {
+    inputProps.iconEl = iconEl
+  }
+
+  return (
+    // https://tailwindui.com/components/application-ui/forms/input-groups#component-474bd025b849b44eb3c46df09a496b7a
+    <div css={style} className={`mt-input-before mb-input-after grid grid-cols-1 ${props?.className || ''}`}>
+      { showIconElHere && iconEl }
+      <InputEl {...inputProps} />
+      {error && <div class="mt-1.5 text-xs text-danger">{error.detail}</div>}
+    </div>
+  )
+}
+
+function IconEl({ iconDir, IconSvg, onClick, type }) {
+  const iconSize = type == 'color' ? 'size-[18px]' : 'size-4'
+  return (
+    !!IconSvg && 
+    <div 
+      className={`col-start-1 row-start-1 ${iconSize} self-center text-gray-400 select-none relative z-[1] ` +
+        `pointer-events-${type == 'password' ? 'auto' : 'none'} ` +
+        (iconDir == 'right' ? 'justify-self-end mr-3' : 'justify-self-start ml-3')
+      }
+      onClick={onClick}
+    >{IconSvg}</div>
+  )
+}
+
+function ColorIcon({ hex }) {
+  return (
+    <span class="block size-full rounded-md" style={{ backgroundColor: hex ? hex : '#f1f1f1' }}></span>
+  )
+}
+
+const style = () => css`
+  input {
+    -moz-appearance: textfield;
+  }
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+`

package/components/partials/form/location.jsx

@@ -0,0 +1,212 @@
+// todo: finish tailwind conversion
+import * as util from '../../../util.js'
+
+export function Location({ clear, id, name, onInput, onSelect, placeholder, placeTypes, value, googleMapsApiKey }) {
+  /**
+   * Get location or area of place (requires both 'maps javascript' and 'places' APIs)
+   *
+   * @param {boolean} clear - clear input after select
+   * @param {function(place)} onInput - called when the input value changes, with an
+   *   empty place, e.g. {full: '...', fullModified: true}
+   * @param {function(place)} onSelect - called when a place is selected
+   * @param {object} value - {full, line1, ..etc}
+   *
+   * Handy box tester (see also util.mongoAddKmsToBox())
+   * https://www.keene.edu/campus/maps/tool/
+   *
+   * Returned Google places viewport (area), i.e. `place.geometry.viewport`
+   * {
+   *   Qa: {g: 174.4438160493033, h: 174.9684260722261} == [btmLng, topLng]
+   *   zb: {g: -37.05901990116617, h: -36.66060184426172} == [btmLat, topLat]
+   * }
+   */
+  const inputRef = useRef(null)
+  const full = (value || {}).full || ''
+  const [inputValue, setInputValue] = useState(full)
+
+  useEffect(() => {
+    if (!onSelect) console.error('Please pass `onSelect` to location.jsx')
+    let autoComplete
+    loadGoogleMaps(googleMapsApiKey).then(() => {
+      if (inputRef.current) {
+        autoComplete = new window.google.maps.places.Autocomplete(inputRef.current, {
+          types: placeTypes ? placeTypes : ['address'],
+          componentRestrictions: { country: ['nz'] },
+        })
+        autoComplete.setFields(['address_components', 'formatted_address', 'geometry'])
+        autoComplete.addListener('place_changed', onPlaceSelect)
+        inputRef.current.addEventListener('keydown', onKeyDown)
+      }
+    })
+    return () => {
+      // It seems like autoComplete cleans up both listeners, handy links if needing to remove sooner..
+      // Cleanup listners: https://stackoverflow.com/a/22862011/1900648
+      // Cleanup .pac-container: https://stackoverflow.com/a/21419890/1900648
+      for (let elem of document.getElementsByClassName('pac-container')) elem.remove()
+    }
+  }, [])
+
+  useEffect(() => {
+    if (full !== inputValue) setInputValue(full)
+  }, [full])
+
+  function formatAddressObject(place) {
+    console.log(place)
+    var addressMap = {
+      city: ['locality'],
+      country: ['country'],
+      number: ['street_number'],
+      postcode: ['postal_code'],
+      region: [
+        'administrative_area_level_1',
+        'administrative_area_level_2',
+        'administrative_area_level_3',
+        'administrative_area_level_4',
+        'administrative_area_level_5',
+      ],
+      street: ['street_address', 'route'],
+      suburb: [
+        'sublocality',
+        'sublocality_level_1',
+        'sublocality_level_2',
+        'sublocality_level_3',
+        'sublocality_level_4',
+      ],
+      unit: ['subpremise'],
+    }
+    var address = {
+      city: '',
+      country: '',
+      number: '',
+      postcode: '',
+      region: '',
+      street: '',
+      suburb: '',
+      unit: '',
+    }
+    place.address_components.forEach((component) => {
+      for (var key in addressMap) {
+        if (addressMap[key].indexOf(component.types[0]) !== -1) {
+          address[key] = component.long_name
+        }
+      }
+    })
+    if (!address.city) {
+      address.city = address.suburb
+      address.suburb = ''
+    }
+    return address
+  }
+
+  function onPlaceSelect() {
+    let place = this.getPlace()
+    if (!place.geometry) return
+    if (clear) setInputValue('')
+    else setInputValue(place.formatted_address)
+    let addressObject = formatAddressObject(place)
+    onSelect({
+      city: addressObject.city,
+      country: addressObject.country,
+      line1: [[addressObject.unit, addressObject.number].filter(o=>o).join('/'), addressObject.street].join(' '),
+      line2: [addressObject.suburb, addressObject.postcode].filter(o=>o).join(', '),
+      full: place.formatted_address,
+      number: addressObject.number,
+      postcode: addressObject.postcode,
+      suburb: addressObject.suburb,
+      location: {
+        coordinates: [place.geometry.location.lng(), place.geometry.location.lat()],
+        type: 'Point',
+      },
+      unit: addressObject.unit,
+      area: !util.deepFind(place, 'geometry.viewport') ? undefined : {
+        bottomLeft: [
+          place.geometry.viewport.getSouthWest().lng(),
+          place.geometry.viewport.getSouthWest().lat(),
+        ],
+        topRight: [
+          place.geometry.viewport.getNorthEast().lng(),
+          place.geometry.viewport.getNorthEast().lat(),
+        ],
+      },
+    })
+  }
+
+  function onChange(event) {
+    // On input change
+    setInputValue(event.target.value)
+    if (onInput) onInput({
+      full: event.target.value,
+      fullModified: true,
+    })
+  }
+
+  function onFocus(event) {
+    // Required to disable the chrome autocomplete, https://stackoverflow.com/a/57131179/4553162
+    if (event.target.autocomplete) {
+      event.target.autocomplete = 'off'
+    }
+  }
+
+  function onKeyDown(event) {
+    // Stop form submission if there is a google autocomplete dropdown opened
+    let prevented
+    if (event.key === 'Enter') {
+      for (let el of document.getElementsByClassName('pac-container')) {
+        if (el.offsetParent !== null && !prevented) { // google autocomplete opened somewhere
+          event.preventDefault()
+          prevented = true
+        }
+      }
+    }
+  }
+
+  return (
+    <input
+      id={id||name}
+      name={name||id}
+      onChange={onChange}
+      onFocus={onFocus}
+      placeholder={placeholder}
+      ref={inputRef}
+      type="text"
+      value={inputValue}
+    />
+  )
+}
+
+function loadGoogleMaps(googleMapsApiKey) {
+  // Requires both 'maps javascript api' and 'places api' within Goolge Cloud Platform
+  if (!window.initMap) {
+    window.initMap = () => {/*noop to prevent warning*/}
+  }
+
+  return new Promise((res) => {
+    let scriptId = 'googleMapsUrl'
+    let script = document.getElementById(scriptId)
+    // script not yet inserted
+    if (script === null) {
+      script = document.createElement('script')
+      script.type = 'text/javascript'
+      script.id = scriptId
+      script.src = `https://maps.googleapis.com/maps/api/js?key=${googleMapsApiKey}`+
+        '&libraries=places&callback=initMap'
+      script.onload = () => res()
+      document.getElementsByTagName('head')[0].appendChild(script)
+    // script has already been inserted
+    } else {
+      // script has already loaded
+      if (window.google) {
+        res()
+      // script hasn't been loaded yet
+      } else {
+        let cachedCallback = script.onload
+        script.onload = () => {
+          cachedCallback()
+          res()
+        }
+      }
+    }
+  })
+}
+
+// Styles are in custom.css