nitro-web 0.0.87 → 0.0.89

package/components/partials/form/drop.tsx

@@ -0,0 +1,141 @@
+// @ts-nocheck
+import { deepFind, s3Image, getErrorFromState } from 'nitro-web/util'
+import { DropHandler } from 'nitro-web'
+import noImage from 'nitro-web/client/imgs/no-image.svg'
+import { Errors, MonasteryImage } from 'nitro-web/types'
+import { twMerge } from 'nitro-web/util'
+
+type DropProps = {
+  awsUrl?: string
+  className?: string
+  /** Field name or path on state (used to match errors), e.g. 'avatar', 'company.avatar' */
+  name: string
+  /** Optional ID for the input element. Defaults to name if not provided */
+  id?: string
+  /** Called when file is selected or dropped */
+  onChange?: (event: { target: { name: string, value: File|FileList } }) => void
+  /** Whether to allow multiple file selection */
+  multiple?: boolean
+  /** State object to get the value and check errors against */
+  state?: {
+    errors?: Errors
+    [key: string]: unknown
+  }
+  /** title used to find related error messages */
+  errorTitle?: string|RegExp
+  /** Props to pass to the input element */
+  [key: string]: unknown
+}
+
+type Image = File | FileList | MonasteryImage | null
+
+export function Drop({ awsUrl, className, id, name, onChange, multiple, state, errorTitle, ...props }: DropProps) {
+  if (!name) throw new Error('Drop component requires a `name` prop')
+  let value: Image = null
+  const error = getErrorFromState(state, errorTitle || name)
+  const inputId = id || name
+  const [urls, setUrls] = useState([])
+  const stateRef = useRef(state)
+  stateRef.current = state
+
+  // Input is always controlled if state is passed in
+  if (typeof props.value !== 'undefined') value = props.value as Image
+  else if (typeof state == 'object') value = deepFind(state, name) as Image
+  if (typeof value == 'undefined') value = null
+
+  useEffect(() => {
+    (async () => setUrls(await getUrls(value as File | FileList | MonasteryImage | null)))()
+  }, [value])
+
+  function tryAgain (e: { preventDefault: Function }) {
+    e.preventDefault()
+    // clear file input to allow reupload
+    const input = document.getElementById(name) as HTMLInputElement
+    if (input) input.value = ''
+    if (onChange) {
+      const errors = (stateRef?.current?.errors || []).filter((e: Errors[]) => e?.title != name)
+      onChange({
+        // remove file from state
+        target: { name: name, value: null },
+        // reset (server) errors
+        errors: errors.length ? errors : undefined,
+      })
+    }
+  }
+
+  async function onFileAttach (files: FileList) { 
+    // files is a FileList object
+    if (onChange) onChange({ target: { name: name, value: multiple ? files : files[0] } })
+  }
+
+  async function getUrls(objectOrFileListItem: File | FileList | MonasteryImage | null) {
+    /**
+     * @param {object|FileList} objectOrFileListItem - FileList object or monastery image object
+     * @returns {Promise} - Resolves to an array of image URLs
+     */
+    // Make sure FileLists are converted to a real array
+    if (!objectOrFileListItem) return []
+    const array = 'length' in objectOrFileListItem ? Array.from(objectOrFileListItem) : [objectOrFileListItem]
+    return Promise.all(array.map((item) => {
+      return new Promise((resolve, reject) => {
+        if ('lastModified' in item) {
+          const reader = new FileReader()
+          reader.onload = () => resolve(reader.result)
+          reader.onerror = reject
+          reader.readAsDataURL(item)
+        } else {
+          resolve(s3Image(awsUrl, item))
+        }
+      })
+    }))
+  }
+
+  // function getFilename (objectOrFile) {
+  //   if (objectOrFile.lastModified) return objectOrFile.name
+  //   else return 'avatar.jpg'
+  // }
+
+  return (
+    <div class={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after nitro-field nitro-drop ${className || ''}`)}>
+      <input 
+        {...props}
+        id={inputId}
+        type="file"
+        onChange={(e) => onFileAttach(e.target.files as FileList)}
+        hidden
+      />
+      <DropHandler 
+        onDrop={onFileAttach} 
+        className="flex flex-column justify-center items-center text-center gap-2 text-grey-300 text-sm px-8 min-h-[300px]"
+      >
+        {
+          !value &&
+          <>
+            {/* {todo upload svg here} */}
+            <div>
+              Drag and drop your file here&nbsp;
+              <label class="weight-500 inline-block text-sm text-primary" for={inputId}>or select a file</label>
+            </div>
+          </>
+        }
+        {
+          !!value &&
+          <>
+            {
+              urls.map((url, i) => (
+                <div key={i} class="flex align-items-center gap-1">
+                  <img src={url || noImage} width="100%" />
+                </div>
+              ))
+            }
+            <div>
+              Your file has been added successfully.&nbsp; 
+              <Link to="#" class="text-primary" onClick={tryAgain}>Use another file?</Link>
+            </div>
+          </>
+        }
+      </DropHandler>
+      {error && <div class="form-error mt-0-5">{error.detail}</div>}
+    </div>
+  )
+}

package/components/partials/form/field-color.tsx

@@ -0,0 +1,86 @@
+import { hsvaToHex, hexToHsva, validHex, HsvaColor } from '@uiw/color-convert'
+import Saturation from '@uiw/react-color-saturation'
+import Hue from '@uiw/react-color-hue'
+import { Dropdown, util } from 'nitro-web'
+
+export type FieldColorProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'|'value'> & {
+  name: string
+  /** name is applied if id is not provided */
+  id?: string 
+  defaultColor?: string
+  Icon?: React.ReactNode
+  onChange?: (event: { target: { name: string, value: string } }) => void
+  value?: string
+}
+
+export function FieldColor({ defaultColor='#333', Icon, onChange: onChangeProp, value: valueProp, ...props }: FieldColorProps) {
+  const [lastChanged, setLastChanged] = useState(() => `ic-${Date.now()}`)
+  const isInvalid = props.className?.includes('is-invalid') ? 'is-invalid' : ''
+  const id = props.id || props.name
+
+  // Since value and onChange are optional, we need to hold the value in state if not provided
+  const [internalValue, setInternalValue] = useState(valueProp ?? defaultColor)
+  const value = valueProp ?? internalValue
+  const onChange = onChangeProp ?? ((e: { target: { name: string, value: string } }) => setInternalValue(e.target.value))
+
+  function onInputChange(e: { target: { name: string, value: string } }) {
+    setLastChanged(`ic-${Date.now()}`)
+    onChange(e)
+  }
+
+  return (
+    <Dropdown 
+      dir="bottom-left"
+      menuToggles={false}
+      menuContent={
+        <ColorPicker key={lastChanged} defaultColor={defaultColor} name={props.name} value={value} onChange={onChange} />
+      }
+    >
+      <div className="grid grid-cols-1">
+        {Icon}
+        <input
+          {...props}
+          className={(props.className || '') + ' ' + isInvalid}
+          id={id}
+          value={value}
+          onChange={onInputChange}
+          onBlur={() => !validHex(value||'') && onInputChange({ target: { name: props.name, value: '' }})}
+          autoComplete="off"
+          type="text"
+        />
+      </div>
+    </Dropdown>
+  )
+}
+
+function ColorPicker({ name='', onChange, value='', defaultColor='' }: FieldColorProps) {
+  const [hsva, setHsva] = useState(() => hexToHsva(validHex(value) ? value : defaultColor))
+  const [debounce] = useState(() => util.throttle(callOnChange, 50))
+
+  function callOnChange(newHsva: HsvaColor) {
+    if (onChange) onChange({ target: { name: name, value: hsvaToHex(newHsva) }})
+  }
+
+  return (
+    <>
+      <Saturation
+        className="!w-[100%] !h-[150px]"
+        hsva={hsva}
+        onChange={(newHsva) => {
+          setHsva(newHsva)
+          if (onChange) debounce(newHsva)
+        }}
+      />
+      <Hue
+        hue={hsva.h}
+        onChange={(newHue) => {
+          setHsva({ ...hsva, ...newHue })
+          if (onChange) debounce({ ...hsva, ...newHue })
+        }}
+      />
+    </>
+  )
+}
+
+
+

package/components/partials/form/field-currency.tsx

@@ -0,0 +1,158 @@
+import { NumericFormat } from 'react-number-format'
+import { getPrefixWidth } from 'nitro-web/util'
+
+// Declaring the type here because typescript fails to infer type when referencing NumericFormatProps from react-number-format
+type NumericFormatProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  thousandSeparator?: boolean | string;
+  decimalSeparator?: string;
+  allowedDecimalSeparators?: Array<string>;
+  thousandsGroupStyle?: 'thousand' | 'lakh' | 'wan' | 'none';
+  decimalScale?: number;
+  fixedDecimalScale?: boolean;
+  allowNegative?: boolean;
+  allowLeadingZeros?: boolean;
+  suffix?: string;
+  prefix?: string;
+}
+
+export type FieldCurrencyProps = NumericFormatProps & {
+  name: string
+  /** name is applied if id is not provided */
+  id?: string 
+  /** e.g. { currencies: { nzd: { symbol: '$', digits: 2 } } } (check out the nitro example for more info) */
+  config: {
+    currencies: { [key: string]: { symbol: string, digits: number } }, 
+    countries: { [key: string]: { numberFormats: { currency: string } } } 
+  }
+  /** currency iso, e.g. 'nzd' */
+  currency: string
+  onChange?: (event: { target: { name: string, value: string|number|null } }) => void
+  /** value should be in cents */
+  value?: string|number|null
+  defaultValue?: number | string | null
+}
+
+export function FieldCurrency({ config, currency='nzd', onChange, value, defaultValue, ...props }: FieldCurrencyProps) {
+  const [dontFix, setDontFix] = useState(false)
+  const [settings, setSettings] = useState(() => getCurrencySettings(currency))
+  const [dollars, setDollars] = useState(() => toDollars(value, true, settings))
+  const [prefixWidth, setPrefixWidth] = useState(0)
+  const ref = useRef({ settings, dontFix }) // was null
+  const id = props.id || props.name
+  ref.current = { settings, dontFix }
+
+  useEffect(() => {
+    if (settings.currency !== currency) {
+      const settings = getCurrencySettings(currency)
+      setSettings(settings)
+      setDollars(toDollars(value, true, settings)) // required latest _settings
+    }
+  }, [currency])
+
+  useEffect(() => {
+    if (ref.current.dontFix) {
+      setDollars(toDollars(value))
+      setDontFix(false)
+    } else {
+      setDollars(toDollars(value, true))
+    }
+  }, [value])
+
+
+  useEffect(() => {
+    // Get the prefix content width
+    setPrefixWidth(settings.prefix == '$' ? getPrefixWidth(settings.prefix, 1) : 0)
+  }, [settings.prefix])
+
+  function toCents(value?: string|number|null) {
+    const maxDecimals = ref.current.settings.maxDecimals
+    const parsed = parseFloat(value + '')
+    if (!parsed && parsed !== 0) return null
+    if (!maxDecimals) return parsed
+    const value2 = Math.round(parsed * Math.pow(10, maxDecimals)) // e.g. 1.23 => 123
+    // console.log('toCents', parsed, value2)
+    return value2
+  }
+
+  function toDollars(value?: string|number|null, toFixed?: boolean, settings?: { maxDecimals?: number }) {
+    const maxDecimals = (settings || ref.current.settings).maxDecimals
+    const parsed = parseFloat(value + '')
+    if (!parsed && parsed !== 0) return null
+    if (!maxDecimals) return parsed
+    const value2 = parsed / Math.pow(10, maxDecimals) // e.g. 1.23 => 123
+    // console.log('toDollars', value, value2)
+    return toFixed ? value2.toFixed(maxDecimals) : value2
+  }
+
+  function getCurrencySettings(currency: string) {
+    // parse CLDR currency string format, e.g. '¤#,##0.00'
+    const output: { 
+      currency: string,           // e.g. 'nzd'
+      decimalSeparator?: string,  // e.g. '.'
+      thousandSeparator?: string, // e.g. ','
+      minDecimals?: number,       // e.g. 2
+      maxDecimals?: number,       // e.g. 2
+      prefix?: string,            // e.g. '$'
+      suffix?: string             // e.g. ''
+    } = { currency }
+    const { symbol, digits } = config.currencies[currency]
+    let format = config.countries['nz'].numberFormats.currency
+
+    // Check for currency symbol (¤) and determine its position
+    if (format.indexOf('¤') !== -1) {
+      const position = format.indexOf('¤') === 0 ? 'prefix' : 'suffix'
+      output[position] = symbol
+      format = format.replace('¤', '')
+    }
+
+    // Find and set the thousands separator
+    const thousandMatch = format.match(/[^0-9#]/)
+    if (thousandMatch) output.thousandSeparator = thousandMatch[0]
+
+    // Find and set the decimal separator and fraction digits
+    const decimalMatch = format.match(/0[^0-9]/)
+    if (decimalMatch) {
+      output.decimalSeparator = decimalMatch[0].slice(1)
+      if (typeof digits !== 'undefined') {
+        output.minDecimals = digits
+        output.maxDecimals = digits
+      } else {
+        const fractionDigits = format.split(output.decimalSeparator)[1]
+        if (fractionDigits) {
+          output.minDecimals = fractionDigits.length 
+          output.maxDecimals = fractionDigits.length
+        }
+      }
+    }
+    return output
+  }
+
+  return (
+    <div className="relative">
+      <NumericFormat
+        {...props}
+        id={id} 
+        name={props.name}
+        decimalSeparator={settings.decimalSeparator}
+        thousandSeparator={settings.thousandSeparator}
+        decimalScale={settings.maxDecimals}
+        onValueChange={!onChange ? undefined : ({ floatValue }, e) => {
+          // console.log('onValueChange', floatValue, e)
+          if (e.source === 'event') setDontFix(true)
+          onChange({ target: { name: props.name, value: toCents(floatValue) }})
+        }}
+        onBlur={() => { setDollars(toDollars(value, true))}}
+        placeholder={props.placeholder || '0.00'}
+        value={dollars}
+        style={{ textIndent: `${prefixWidth}px` }}
+        type="text"
+        defaultValue={defaultValue}
+      />
+      <span
+        class={`absolute top-0 bottom-0 left-[12px] left-input-x inline-flex items-center select-none text-gray-500 text-input-base ${dollars !== null && settings.prefix == '$' ? 'text-foreground' : ''}`}
+      >
+        {settings.prefix || settings.suffix}
+      </span>
+    </div>
+  )
+}

package/components/partials/form/field-date.tsx

@@ -0,0 +1,252 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { format, isValid, parse } from 'date-fns'
+import { getPrefixWidth } from 'nitro-web/util'
+import { Calendar, Dropdown } from 'nitro-web'
+import { dayButtonClassName } from '../element/calendar'
+
+type Mode = 'single' | 'multiple' | 'range'
+type DropdownRef = {
+  setIsActive: (value: boolean) => void
+}
+
+type PreFieldDateProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+  /** field name or path on state (used to match errors), e.g. 'date', 'company.email' **/
+  name: string
+  /** mode of the date picker */
+  mode: Mode
+  /** name is used as the id if not provided */
+  id?: string
+  /** show the time picker */
+  showTime?: boolean
+  /** prefix to add to the input */
+  prefix?: string
+  /** number of months to show in the dropdown */
+  numberOfMonths?: number
+  /** icon to show in the input */
+  Icon?: React.ReactNode
+  /** direction of the dropdown */
+  dir?: 'bottom-left'|'bottom-right'|'top-left'|'top-right'
+}
+
+// An array is returned for mode = 'multiple' or 'range'
+export type FieldDateProps = (
+  | ({ mode: 'single' } & PreFieldDateProps & {
+      onChange?: (e: { target: { name: string, value: null|number } }) => void
+      value?: null|number|string
+    })
+  | ({ mode: 'multiple' | 'range' } & PreFieldDateProps & { 
+      onChange?: (e: { target: { name: string, value: (null|number)[] } }) => void 
+      value?: null|number|string|(null|number|string)[]
+    })
+)
+
+type TimePickerProps = {
+  date: Date|null
+  onChange: (mode: Mode, value: number|null) => void
+}
+
+export function FieldDate({
+  dir = 'bottom-left',
+  Icon,
+  mode,
+  numberOfMonths,
+  onChange: onChangeProp,
+  prefix = '',
+  showTime,
+  value: valueProp,
+  ...props
+}: FieldDateProps) {
+  const localePattern = `d MMM yyyy${showTime && mode == 'single' ? ' hh:mmaa' : ''}`
+  const [prefixWidth, setPrefixWidth] = useState(0)
+  const dropdownRef = useRef<DropdownRef>(null)
+  const [month, setMonth] = useState<number|undefined>()
+  const [lastUpdated, setLastUpdated] = useState(0)
+  const id = props.id || props.name
+
+  // Since value and onChange are optional, we need to hold the value in state if not provided
+  const [internalValue, setInternalValue] = useState<typeof valueProp>(valueProp)
+  const value = valueProp ?? internalValue
+  const onChange = onChangeProp ?? ((e: { target: { name: string, value: any } }) => setInternalValue(e.target.value))
+    
+  // Convert the value to an array of valid* dates
+  const dates = useMemo(() => {
+    const arrOfNumbers = typeof value === 'string' 
+      ? value.split(/\s*,\s*/g).map(o => parseFloat(o)) 
+      : Array.isArray(value) ? value : [value]
+    const out = arrOfNumbers.map(date => isValid(date) ? new Date(date as number) : null) /// changed to null
+    return out
+  }, [value])
+
+  // Hold the input value in state
+  const [inputValue, setInputValue] = useState(() => getInputValue(dates))
+
+  // Update the date's inputValue (text) when the value changes outside of the component
+  useEffect(() => {
+    if (new Date().getTime() > lastUpdated + 100) setInputValue(getInputValue(dates))
+  }, [dates])
+
+  // Get the prefix content width
+  useEffect(() => {
+    setPrefixWidth(getPrefixWidth(prefix, 4))
+  }, [prefix])
+
+  function onCalendarChange(mode: Mode, value: null|number|(null|number)[]) {
+    if (mode == 'single' && !showTime) dropdownRef.current?.setIsActive(false) // Close the dropdown
+    setInputValue(getInputValue(value))
+    // Update the value
+    onChange({ target: { name: props.name, value: getOutputValue(value) } })
+    setLastUpdated(new Date().getTime())
+  }
+
+  function onInputChange(e: React.ChangeEvent<HTMLInputElement>) {
+    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 > 1) split.length = 2
+    else if (mode == 'multiple') split = split.filter(o => o) // remove invalid dates
+
+    // Swap dates if needed
+    if (mode == 'range' && (split[0] || 0) > (split[1] || 0)) split = [split[0], split[0]]
+
+    // Set month
+    for (let i=split.length; i--;) {
+      if (split[i]) setMonth((split[i] as Date).getTime())
+      break
+    }
+    
+    // Update the value
+    const value = mode == 'single' ? split[0]?.getTime() ?? null : split.map(d => d?.getTime() ?? null)
+    onChange({ target: { name: props.name, value: getOutputValue(value) }})
+    setLastUpdated(new Date().getTime())
+  } 
+
+  function getInputValue(value: Date|number|null|(Date|number|null)[]) {
+    const _dates = Array.isArray(value) ? value : [value]
+    return _dates.map(o => o ? format(o, localePattern) : '').join(mode == 'range' ? ' - ' : ', ')
+  }
+
+  function getOutputValue(value: Date|number|null|(Date|number|null)[]): any {
+    // console.log(value)
+    return value
+  }
+
+  return (
+    <Dropdown
+      ref={dropdownRef}
+      menuToggles={false}
+      // animate={false}
+      // menuIsOpen={true}
+      minWidth={0}
+      menuContent={
+        <div className="flex">
+          <Calendar 
+            // Calendar actually accepts an array of dates, but the type is not typed correctly
+            {...{ mode: mode, value: dates as any, numberOfMonths: numberOfMonths, month: month }} 
+            preserveTime={!!showTime} 
+            onChange={onCalendarChange} 
+            className="pt-1 pb-2  px-3" 
+          />
+          {!!showTime && mode == 'single' && <TimePicker date={dates?.[0]} onChange={onCalendarChange} />}
+        </div>
+      }
+      dir={dir}
+    > 
+      <div className="grid grid-cols-1">
+        {Icon}
+        {
+          prefix && 
+          // Similar classNames to the input.tsx:IconWrapper()
+          <span className="z-[0] col-start-1 row-start-1 self-center select-none justify-self-start text-input-base ml-[12px] ml-input-x">
+            {prefix}
+          </span>
+        }
+        <input 
+          {...props}
+          key={'k' + prefixWidth}
+          id={id}
+          autoComplete="off" 
+          className={(props.className||'')}// + props.className?.includes('is-invalid') ? ' is-invalid' : ''} 
+          onBlur={() => setInputValue(getInputValue(dates))}
+          onChange={onInputChange}
+          style={{ textIndent: prefixWidth + 'px' }}
+          type="text"
+          value={inputValue}
+        />
+      </div>
+    </Dropdown>
+  )
+}
+
+function TimePicker({ date, onChange }: TimePickerProps) {
+  const lists = [
+    [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], // hours
+    [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55], // minutes
+    ['AM', 'PM'], // AM/PM
+  ]
+  
+  // Get current values from date or use defaults
+  const hour = date ? parseInt(format(date, 'h')) : undefined
+  const minute = date ? parseInt(format(date, 'm')) : undefined
+  const period = date ? format(date, 'a') : undefined
+  
+  const handleTimeChange = (type: 'hour' | 'minute' | 'period', value: string | number) => {
+    // Create a new date object from the current date or current time
+    const newDate = new Date(date || new Date())
+    
+    if (type === 'hour') {
+      // Parse the time with the new hour value
+      const timeString = `${value}:${format(newDate, 'mm')} ${format(newDate, 'a')}`
+      const updatedDate = parse(timeString, 'h:mm a', newDate)
+      newDate.setHours(updatedDate.getHours(), updatedDate.getMinutes())
+    } else if (type === 'minute') {
+      // Parse the time with the new minute value
+      const timeString = `${format(newDate, 'h')}:${value} ${format(newDate, 'a')}`
+      const updatedDate = parse(timeString, 'h:mm a', newDate)
+      newDate.setMinutes(updatedDate.getMinutes())
+    } else if (type === 'period') {
+      // Parse the time with the new period value
+      const timeString = `${format(newDate, 'h')}:${format(newDate, 'mm')} ${value}`
+      const updatedDate = parse(timeString, 'h:mm a', newDate)
+      newDate.setHours(updatedDate.getHours())
+    }
+    
+    onChange('single', newDate.getTime())
+  }
+
+  return (
+    lists.map((list, i) => {
+      const type = i === 0 ? 'hour' : i === 1 ? 'minute' : 'period'
+      const currentValue = i === 0 ? hour : i === 1 ? minute : period
+
+      return (
+        <div key={i} className="w-[60px] py-1 relative overflow-hidden hover:overflow-y-auto border-l border-gray-100">
+          <div className="w-[60px] absolute flex flex-col items-center">
+            {list.map(item => (
+              <div 
+                className="py-1 flex group cursor-pointer"
+                key={item}
+                onClick={() => handleTimeChange(type, item)}
+              >
+                <button 
+                  key={item}
+                  className={
+                    `${dayButtonClassName} rounded-full flex justify-center items-center group-hover:bg-gray-100 `
+                    + (item === currentValue ? '!bg-input-border-focus text-white' : '')
+                  }
+                  onClick={() => handleTimeChange(type, item)}
+                >
+                  {item.toString().padStart(2, '0').toLowerCase()}
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )
+    })
+  )
+}