nitro-web 0.0.87 → 0.0.89

package/components/partials/form/field.tsx

@@ -0,0 +1,231 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// fill-current tw class for lucide icons (https://github.com/lucide-icons/lucide/discussions/458)
+import { css } from 'twin.macro'
+import { FieldCurrency, FieldCurrencyProps, FieldColor, FieldColorProps, FieldDate, FieldDateProps } from 'nitro-web'
+import { twMerge, getErrorFromState, deepFind } from 'nitro-web/util'
+import { Errors, type Error } from 'nitro-web/types'
+import { MailIcon, CalendarIcon, FunnelIcon, SearchIcon, EyeIcon, EyeOffIcon } from 'lucide-react'
+import { memo } from 'react'
+
+type FieldType = 'text' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color'
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+type FieldExtraProps = {
+  /** field name or path on state (used to match errors), e.g. 'date', 'company.email' */
+  name: string
+  /** name is applied if id is not provided */
+  id?: string
+  /** state object to get the value, and check errors against */
+  state?: { errors?: Errors, [key: string]: any }
+  /** type of the field */
+  type?: FieldType
+  /** icon to show in the input */
+  icon?: React.ReactNode
+  iconPos?: 'left' | 'right'
+  /** Dependencies to break the implicit memoization of onChange/onInputChange */
+  deps?: unknown[]
+  placeholder?: string
+  /** title used to find related error messages */
+  errorTitle?: string|RegExp
+}
+type IconWrapperProps = {
+  iconPos: 'left' | 'right'
+  icon?: React.ReactNode
+  [key: string]: unknown
+}
+// Discriminated union (https://stackoverflow.com/a/77351290/1900648)
+export type FieldProps = (
+  | ({ type?: 'text' | 'password' | 'email' | 'filter' | 'search' } & InputProps & FieldExtraProps)
+  | ({ type: 'textarea' } & TextareaProps & FieldExtraProps)
+  | ({ type: 'currency' } & FieldCurrencyProps & FieldExtraProps)
+  | ({ type: 'color' } & FieldColorProps & FieldExtraProps)
+  | ({ type: 'date' } & FieldDateProps & FieldExtraProps)
+)
+type IsFieldCachedProps = {
+  name: string
+  state?: FieldProps['state']
+  deps?: FieldProps['deps']
+  errorTitle?: FieldProps['errorTitle']
+}
+
+export const Field = memo(FieldBase, (prev, next) => {
+  return isFieldCached(prev, next)
+})
+
+function FieldBase({ state, icon, iconPos: ip, errorTitle, ...props }: FieldProps) {
+  // `type` must be kept as props.type for TS to be happy and follow the conditions below
+  let value!: string
+  let Icon!: React.ReactNode
+  const error = getErrorFromState(state, errorTitle || props.name)
+  const type = props.type
+  const iconPos = ip == 'left' || (type == 'color' && !ip) ? 'left' : 'right'
+  const id = props.id || props.name
+
+  if (!props.name) {
+    throw new Error('Field component requires a `name` prop')
+  }
+  
+  // Input type
+  const [inputType, setInputType] = useState(() => { // eslint-disable-line
+    return type == 'password' ? 'password' : (type == 'textarea' ? 'textarea' : 'text')
+  })
+  
+  // Value: Input is always controlled if state is passed in
+  if (typeof props.value !== 'undefined') value = props.value as string
+  else if (typeof state == 'object') {
+    const v = deepFind(state, props.name) as string | undefined
+    value = v ?? ''
+  }
+
+  // Icon
+  if (type == 'password') {
+    Icon = <IconWrapper 
+      iconPos={iconPos} 
+      icon={icon || inputType == 'password' ? <EyeOffIcon /> : <EyeIcon />} 
+      onClick={() => setInputType(o => o == 'password' ? 'text' : 'password')}
+      className="size-[15px] size-input-icon pointer-events-auto"
+    />
+  } else if (type == 'email') {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <MailIcon />} className="size-[14px] size-input-icon" />
+  } else if (type == 'filter') {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <FunnelIcon />} className="size-[14px] size-input-icon" />
+  } else if (type == 'search') {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <SearchIcon />} className="size-[14px] size-input-icon" />
+  } else if (type == 'color') {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <ColorSvg hex={value}/>} className="size-[17px]" />
+  } else if (type == 'date') {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <CalendarIcon />} className="size-[14px] size-input-icon" />
+  } else if (icon) {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon} className="size-[14px] size-input-icon" />
+  }
+
+  // Classname
+  const inputClassName = getInputClasses({ error, Icon, iconPos, type })
+  const commonProps = { id: id, value: value, className: inputClassName }
+
+  // Type has to be referenced as props.type for TS to be happy
+  if (!type || type == 'text' || type == 'password' || type == 'email' || type == 'filter' || type == 'search') {
+    return (
+      <FieldContainer error={error} className={props.className}>
+        {Icon}<input {...props} {...commonProps} type={inputType} />
+      </FieldContainer>
+    )
+  } else if (type == 'textarea') {
+    return (
+      <FieldContainer error={error} className={props.className}>
+        {Icon}<textarea {...props} {...commonProps} />
+      </FieldContainer>
+    )
+  } else if (type == 'currency') {
+    return (
+      <FieldContainer error={error} className={props.className}>
+        {Icon}<FieldCurrency {...props} {...commonProps} />
+      </FieldContainer>
+    )
+  } else if (type == 'color') {
+    return (
+      <FieldContainer error={error} className={props.className}>
+        <FieldColor {...props} {...commonProps} Icon={Icon} />
+      </FieldContainer>
+    )
+  } else if (type == 'date') { 
+    return (
+      <FieldContainer error={error} className={props.className}>
+        <FieldDate {...props} {...commonProps} Icon={Icon} />
+      </FieldContainer>
+    )
+  }
+}
+
+function FieldContainer({ children, className, error }: { children: React.ReactNode, className?: string, error?: Error }) {
+  return (
+    <div css={style} className={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after grid grid-cols-1 nitro-field ${className || ''}`)}>
+      {children}
+      {error && <div class="mt-1.5 text-xs text-danger-foreground nitro-error">{error.detail}</div>}
+    </div>
+  )
+}
+
+function getInputClasses({ error, Icon, iconPos, type }: { error?: Error, Icon?: React.ReactNode, iconPos: string, type?: string }) {
+  // not twMerge
+  const px = 'px-[12px]'
+  const py = 'py-[9px] py-input-y'
+  return (
+    'block col-start-1 row-start-1 w-full rounded-md bg-white text-input-base outline outline-1 -outline-offset-1 ' +
+    'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 ' + `${py} ${px} ` +
+    (iconPos == 'right' && Icon ? 'pr-[32px] pr-input-x-icon pl-input-x ' : '') +
+    (iconPos == 'left' && Icon ? 'pl-[32px] pl-input-x-icon pr-input-x ' : 'px-input-x ') +
+    (iconPos == 'left' && Icon && type == 'color' ? 'indent-[5px] ' : '') +
+    (error 
+      ? 'text-danger-foreground outline-danger focus:outline-danger ' 
+      : 'text-input outline-input-border focus:outline-input-border-focus ') + 
+    (iconPos == 'right' ? 'justify-self-start ' : 'justify-self-end ') + 
+    'nitro-input'
+  )
+}
+
+function IconWrapper({ icon, iconPos, ...props }: IconWrapperProps) {
+  return (
+    !!icon && 
+    <div
+      {...props}
+      className={
+        'z-[0] col-start-1 row-start-1 self-center text-[#c6c8ce] text-input-icon select-none [&>svg]:size-full ' +
+        (iconPos == 'right' ? 'justify-self-end mr-[12px] mr-input-x ' : 'justify-self-start ml-[12px] ml-input-x ') + 
+        props.className || ''
+      }
+    >{icon}</div>
+  )
+}
+
+function ColorSvg({ hex }: { hex?: string }) {
+  return (
+    <span class="block size-full rounded-md" style={{ backgroundColor: hex ? hex : '#f1f1f1' }}></span>
+  )
+}
+
+export function isFieldCached(prev: IsFieldCachedProps, next: IsFieldCachedProps) {
+  // Check if the field is cached, onChange/onInputChange doesn't affect the cache
+  const path = prev.name
+  const prevState = prev.state || {}
+  const nextState = next.state || {}
+  const errorTitle = next.errorTitle || path
+
+  // Check if any prop has changed, except `onChange`/`onInputChange`
+  const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)])
+  for (const k of allKeys) {
+    if (k === 'state' || k === 'onChange' || k === 'onInputChange') continue
+    if (prev[k as keyof typeof prev] !== next[k as keyof typeof next]) {
+      // console.log(4, 'changed', path, k)
+      return false
+    }
+  }
+
+  // If `deps` have changed, handy for onChange/onInputChange, re-render!
+  if ((next.deps?.length !== prev.deps?.length) || next.deps?.some((v, i) => v !== prev.deps?.[i])) return false
+
+  // If the state value has changed, re-render!
+  if (deepFind(prevState, path) !== deepFind(nextState, path)) return false
+  
+  // If the state error has changed, re-render!
+  if (getErrorFromState(prevState, errorTitle) !== getErrorFromState(nextState, errorTitle)) return false
+
+  // All good, use cached version
+  return true
+}
+
+const style = css`
+  input {
+    appearance: textfield;
+    -moz-appearance: textfield;
+  }
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  /* tw4 we can use calc to determine the padding-left with css variables...
+  .inputt {
+    padding-left: calc(var(--input-x) * 2);
+  } */
+`

package/components/partials/form/form-error.tsx

@@ -0,0 +1,27 @@
+import { Errors } from 'nitro-web/types'
+
+type FormError = {
+  state: { errors?: Errors },
+  // display all errors except these field titles, e.g. ['name', 'address']
+  fields?: Array<string>,
+  className?: string,
+}
+
+export function FormError({ state, fields, className }: FormError) {
+  // A catch all error element that should be placed next to the submit button
+  let error: { title: string, detail: string } | undefined
+  for (const item of state.errors || []) {
+    if (!item.title || item.title.match(/^(error|invalid)$/i) || (fields && !fields.includes(item.title))) {
+      error = item
+    }
+  }
+  return (
+    <>
+      {error ? (
+        <div class={`text-danger-foreground mt-1 text-sm nitro-error ${className||''}`}>
+          {error.detail}
+        </div>
+      ) : null}
+    </>
+  )
+}

package/components/partials/form/location.tsx

@@ -0,0 +1,225 @@
+// @ts-nocheck
+// todo: finish tailwind conversion
+import * as util from 'nitro-web/util'
+
+type LocationProps = {
+  clear: boolean
+  id?: string
+  name: string
+  onInput?: (place: Place) => void
+  onSelect?: (place: Place) => void
+  placeholder?: string
+  placeTypes?: string[]
+  value?: Place
+  googleMapsApiKey: string
+}
+
+export function Location({ clear, id, name, onInput, onSelect, placeholder, placeTypes, value, googleMapsApiKey }: LocationProps) {
+  /**
+   * 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 (const 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() {
+    const place = this.getPlace()
+    if (!place.geometry) return
+    if (clear) setInputValue('')
+    else setInputValue(place.formatted_address)
+    const 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 (const 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) => {
+    const 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 {
+        const cachedCallback = script.onload
+        script.onload = () => {
+          cachedCallback()
+          res()
+        }
+      }
+    }
+  })
+}
+
+// Styles are in custom.css