nitro-web 0.0.86 → 0.0.87

package/components/partials/form/location.tsx

@@ -1,225 +0,0 @@
-// @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

package/components/partials/form/select.tsx

@@ -1,360 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { css } from 'twin.macro'
-import { memo } from 'react'
-import ReactSelect, { 
-  components, ControlProps, createFilter, OptionProps, SingleValueProps, ClearIndicatorProps,
-  DropdownIndicatorProps, MultiValueRemoveProps,
-} from 'react-select'
-import { CheckCircleIcon } from '@heroicons/react/20/solid'
-import { ChevronsUpDownIcon, XIcon } from 'lucide-react'
-import { isFieldCached } from 'nitro-web'
-import { getErrorFromState, deepFind, twMerge } from 'nitro-web/util'
-import { Errors } from 'nitro-web/types'
-
-const filterFn = createFilter()
-
-type GetSelectStyle = {
-  name: string
-  isFocused?: boolean
-  isSelected?: boolean
-  hasError?: boolean
-  usePrefixes?: boolean
-}
-
-/** Select (all other props are passed to react-select) **/
-export type SelectProps = {
-  /** field name or path on state (used to match errors), e.g. 'date', 'company.email' **/
-  name: string
-  /** inputId, the name is used if not provided **/
-  id?: string
-  /** 'container' id to pass to react-select **/
-  containerId?: string
-  /** The minimum width of the dropdown menu **/
-  minMenuWidth?: number
-  /** The prefix to add to the input **/
-  prefix?: string
-  /** The onChange handler **/
-  onChange?: (event: { target: { name: string, value: unknown } }) => void
-  /** The options to display in the dropdown **/
-  options: { value: unknown, label: string | React.ReactNode, fixed?: boolean, [key: string]: unknown }[]
-  /** The state object to get the value and check errors from **/
-  state?: { errors?: Errors, [key: string]: any } // was unknown|unknown[]
-  /** Select variations **/
-  mode?: 'country'|'customer'|''
-  /** Pass dependencies to break memoization, handy for onChange/onInputChange **/
-  deps?: unknown[]
-  /** title used to find related error messages */
-  errorTitle?: string|RegExp
-  /** All other props are passed to react-select **/
-  [key: string]: unknown
-}
-
-export const Select = memo(SelectBase, (prev, next) => {
-  return isFieldCached(prev, next)
-})
-
-function SelectBase({ 
-  id, containerId, minMenuWidth, name, prefix='', onChange, options, state, mode='', errorTitle, ...props 
-}: SelectProps) {
-  let value: unknown|unknown[]
-  const error = getErrorFromState(state, errorTitle || name)
-  if (!name) throw new Error('Select component requires a `name` and `options` prop')
-
-  // Get value from value or state
-  if (typeof props.value !== 'undefined') value = props.value
-  else if (typeof state == 'object') value = deepFind(state, name)
-
-  // If multi-select, filter options by value
-  if (Array.isArray(value)) value = options.filter(o => (value as unknown[]).includes(o.value))
-  else value = options.find(o => value === o.value)
-
-  // Input is always controlled if state is passed in
-  if (typeof state == 'object' && typeof value == 'undefined') value = ''
-
-  return (
-    <div css={style} class={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after nitro-select ${props.className||''}`)}>
-      <ReactSelect
-        /**
-         * react-select prop quick reference (https://react-select.com/props#api):
-         *   isDisabled={false}
-         *   isMulti={false}
-         *   isSearchable={true}
-         *   options={[{ value: 'chocolate', label: 'Chocolate' }]}
-         *   placeholder="Select a color"
-         *   value={options.find(o => o.code == state.color)} // to clear you need to set to null, not undefined
-         *   isClearable={false}
-         *   menuIsOpen={false}
-         */
-        {...props}
-        // @ts-expect-error
-        _nitro={{ prefix, mode }}
-        key={value as string}
-        unstyled={true}
-        inputId={id || name}
-        id={containerId}
-        filterOption={(option, searchText) => {
-          if ((option.data as {fixed?: boolean}).fixed) return true
-          return filterFn(option, searchText)
-        }}
-        menuPlacement="auto"
-        minMenuHeight={250}
-        onChange={!onChange ? undefined : (o) => {
-          // Array returned for multi-select
-          const value = Array.isArray(o) 
-            ? o.map(v => typeof v == 'object' && v !== null && 'value' in v ? v.value : v) 
-            : (typeof o == 'object' && o !== null && 'value' in o ? o.value : o)
-          return onChange({ target: { name: name, value: value }})
-        }}
-        options={options}
-        value={value}
-        classNames={{
-          // Input container
-          control: (p) => getSelectStyle({ name: 'control', hasError: !!error, ...p }),
-          valueContainer: () => getSelectStyle({ name: 'valueContainer' }),
-          // Input container objects
-          input: () => getSelectStyle({ name: 'input', hasError: !!error }),
-          multiValue: () => getSelectStyle({ name: 'multiValue' }),
-          multiValueLabel: () => '',
-          multiValueRemove: () => getSelectStyle({ name: 'multiValueRemove' }),
-          placeholder: () => getSelectStyle({ name: 'placeholder' }),
-          singleValue: () => getSelectStyle({ name: 'singleValue', hasError: !!error }),
-          // Indicators
-          clearIndicator: () => getSelectStyle({ name: 'clearIndicator' }),
-          dropdownIndicator: () => getSelectStyle({ name: 'dropdownIndicator' }),
-          indicatorsContainer: () => getSelectStyle({ name: 'indicatorsContainer' }),
-          indicatorSeparator: () => getSelectStyle({ name: 'indicatorSeparator' }),
-          // Dropmenu
-          menu: () => getSelectStyle({ name: 'menu' }),
-          groupHeading: () => getSelectStyle({ name: 'groupHeading' }),
-          noOptionsMessage: () => getSelectStyle({ name: 'noOptionsMessage' }),
-          option: (p) => getSelectStyle({ name: 'option', ...p }),
-        }}
-        components={{ 
-          Control, 
-          SingleValue, 
-          Option,
-          DropdownIndicator, 
-          ClearIndicator, 
-          MultiValueRemove,
-        }}
-        styles={{
-          menu: (base) => ({ 
-            ...base, minWidth: minMenuWidth,
-          }),
-          // On mobile, the label will truncate automatically, so we want to
-          // override that behaviour.
-          multiValueLabel: (base) => ({
-            ...base,
-            whiteSpace: 'normal',
-            overflow: 'visible',
-          }),
-          control: (base) => ({
-            ...base,
-            outline: undefined,
-            transition: 'none',
-          }),
-        }}
-        // menuIsOpen={true}
-        // isSearchable={false}
-        // isClearable={true}
-        // isMulti={true}
-        // isDisabled={true}
-        // maxMenuHeight={200}
-      />
-      {error && <div class="mt-1.5 text-xs text-danger-foreground">{error.detail}</div>}
-    </div>
-  )
-}
-
-function Control({ children, ...props }: ControlProps) {
-  // Add flag and prefix to the input (control)
-  // todo: check that the flag/prefix looks okay
-  const selectedOption = props.getValue()[0]
-  const optionFlag = (selectedOption as { flag?: string })?.flag
-  const _nitro = (props.selectProps as { _nitro?: { prefix?: string, mode?: string } })?._nitro
-  return (
-    <components.Control {...props}>
-      {
-        (() => {
-          if (_nitro?.prefix) {
-            return (
-              <>
-                <span class="relative right-[2px]">{_nitro?.prefix}</span>
-                {children}
-              </>
-            )
-          } else if (_nitro?.mode == 'country') {
-            return (
-              <>
-                { optionFlag && <Flag flag={optionFlag} /> }
-                {children}
-              </>
-            )
-          } else { 
-            return children
-          }
-        })()
-      }
-    </components.Control>
-  )
-}
-
-function SingleValue(props: SingleValueProps) {
-  const selectedOption = props.getValue()[0] as { labelControl?: string }
-  return (
-    <components.SingleValue {...props}>
-      <>{selectedOption?.labelControl || props.children}</>
-    </components.SingleValue>
-  )
-}
-
-function Option(props: OptionProps) {
-  // todo: check that the flag looks okay
-  const data = props.data as { className?: string, flag?: string }
-  const _nitro = (props.selectProps as { _nitro?: { mode?: string } })?._nitro
-  return (
-    <components.Option className={data.className} {...props}>
-      { _nitro?.mode == 'country' && <Flag flag={data.flag} /> }
-      <span class="flex-auto">{props.label}</span>
-      {props.isSelected && <CheckCircleIcon className="size-[22px] text-primary -my-1 -mx-0.5" />}
-    </components.Option>
-  )
-}
-
-const DropdownIndicator = (props: DropdownIndicatorProps) => {
-  return (
-    <components.DropdownIndicator {...props}>
-      <ChevronsUpDownIcon size={15} className="text-gray-400 -my-0.5 -mx-[1px]" />
-    </components.DropdownIndicator>
-  )
-}
-
-const ClearIndicator = (props: ClearIndicatorProps) => {
-  return (
-    <components.ClearIndicator {...props}>
-      <XIcon size={14} />
-    </components.ClearIndicator>
-  )
-}
-
-const MultiValueRemove = (props: MultiValueRemoveProps) => {
-  return (
-    <components.MultiValueRemove {...props}>
-      <XIcon className="size-[1em] p-[1px]" />
-    </components.MultiValueRemove>
-  )
-}
-
-function Flag({ flag }: { flag?: string }) {
-  if (!flag) return null
-  // todo: public needs to come from webpack
-  const publicPath = '/'
-  return (
-    <span class="flag" style={{ backgroundImage: `url(${publicPath}assets/imgs/flags/${flag}.svg)` }} />
-  )
-}
-
-const selectStyles = {
-  // Based off https://www.jussivirtanen.fi/writing/styling-react-select-with-tailwind
-  // Input container
-  control: {
-    base: 'rounded-md bg-white hover:cursor-pointer text-input-base outline outline-1 -outline-offset-1 '
-      + '!min-h-0 outline-input-border',
-    focus: 'outline-2 -outline-offset-2 outline-input-border-focus',
-    error: 'outline-danger',
-  },
-  valueContainer: 'py-[9px] px-[12px] py-input-y px-input-x gap-1', // dont twMerge (input-x is optional)
-  // Input container objects
-  input: {
-    base: 'text-input',
-    error: 'text-danger-foreground',
-  },
-  multiValue: 'bg-primary text-white rounded items-center pl-2 pr-1.5 gap-1.5',
-  multiValueLabel: 'text-xs',
-  multiValueRemove: 'border border-black/10 bg-clip-content bg-white rounded-md text-foreground hover:bg-red-50',
-  placeholder: 'text-input-placeholder',
-  singleValue: {
-    base: 'text-input',
-    error: 'text-danger-foreground',
-  },
-  // Icon indicators
-  clearIndicator: 'text-gray-500 p-1 rounded-md hover:bg-red-50 hover:text-danger-foreground',
-  dropdownIndicator: 'p-1 hover:bg-gray-100 text-gray-500 rounded-md hover:text-black',
-  indicatorsContainer: 'p-1 px-2 gap-1',
-  indicatorSeparator: 'py-0.5 before:content-[""] before:block before:bg-gray-100 before:w-px before:h-full',
-  // Dropdown menu
-  menu: 'mt-1.5 border border-dropdown-ul-border bg-white rounded-md text-input-base overflow-hidden shadow-dropdown-ul',
-  groupHeading: 'ml-3 mt-2 mb-1 text-gray-500 text-input-base',
-  noOptionsMessage: 'm-1 text-gray-500 p-2 bg-gray-50 border border-dashed border-gray-200 rounded-sm',
-  option: {
-    base: 'relative px-3 py-2 !flex items-center gap-2 cursor-default',
-    hover: 'bg-gray-50',
-    selected: '!bg-gray-100 text-dropdown-selected-foreground',
-  },
-}
-
-export function getSelectStyle({ name, isFocused, isSelected, hasError, usePrefixes }: GetSelectStyle) {
-  // Returns a class list that conditionally includes hover/focus modifier classes, or uses CSS modifiers, e.g. hover:, focus:
-  // @ts-expect-error
-  const obj = selectStyles[name]
-  let output = obj?.base
-  if (typeof obj == 'string') return obj // no modifiers
-
-  if (usePrefixes) {
-    if (obj.focus) output += ' ' + obj.focus.split(' ').map((part: string) => `focus:${part}`).join(' ')
-    if (obj.hover) output += ' ' + obj.hover.split(' ').map((part: string) => `hover:${part}`).join(' ')
-  } else {
-    if (obj.focus && isFocused) output += ` ${obj.focus}`
-    if (obj.hover && isFocused) output += ` ${obj.hover}`
-  }
-  if (obj.error && hasError) output += ` ${obj.error}`
-  if (obj.selected && isSelected) output += ` ${obj.selected}`
-  
-  return twMerge(output)
-}
-
-const style = css`
-  /*
-  todo: add these as tailwind classes
-
-  &.rs-medium {
-    .rs__control {
-      padding: 9px 13px;
-      font-size: 13px;
-      font-weight: 400;
-      min-height: 0;
-    }
-    .rs__menu {
-      .rs__option {
-        font-size: 0.85rem;
-      }
-    }
-  }
-  &.rs-small {
-    .rs__control {
-      padding: 5px 13px;
-      font-size: 12.5px;
-      font-weight: 400;
-      min-height: 0;
-    }
-    .rs__menu {
-      .rs__option {
-        font-size: 0.8rem;
-      }
-    }
-  } */
-
-  /*
-  .flag {
-    // https://github.com/lipis/flag-icons
-    flex-shrink: 0;
-    margin-right: 10px;
-    width: 21px;
-    height: 14px;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-    border-radius: 3px;
-    overflow: hidden; 
-  }*/
-`

package/components/partials/is-first-render.ts

@@ -1,14 +0,0 @@
-export function IsFirstRender(delay?: number) {
-  /*
-   * Checks if the current render of a react component is the first
-   * E.g. const isFirst = isFirstRender()
-   * @link https://stackoverflow.com/a/56267719/1900648
-   * @return boolean
-   */
-  const isMountRef = useRef(true)
-  useEffect(() => {
-    if (delay) setTimeout(() => isMountRef.current = false, delay)
-    else isMountRef.current = false
-  }, [])
-  return isMountRef.current
-}

package/components/partials/not-found.tsx

@@ -1,7 +0,0 @@
-export function NotFound() {
-  return (
-    <div class="pt-14 text-center" style={{'minHeight': '300px'}}>
-      Sorry, nothing found.
-    </div>
-  )
-}