nitro-web 0.0.86 → 0.0.87

package/components/partials/form/checkbox.tsx

@@ -1,150 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { twMerge, deepFind, getErrorFromState } from 'nitro-web/util'
-import { Errors, type Error } from 'nitro-web/types'
-
-type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {  
-  /** 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. Used for radios */
-  id?: string 
-  /** state object to get the value, and check errors against */
-  state?: { errors?: Errors, [key: string]: any }
-  size?: number
-  subtext?: string|React.ReactNode
-  text?: string|React.ReactNode
-  type?: 'checkbox' | 'radio' | 'toggle'
-  checkboxClassName?: string
-  svgClassName?: string
-  labelClassName?: string
-  /** title used to find related error messages */
-  errorTitle?: string|RegExp
-}
-
-export function Checkbox({ 
-  state, size, subtext, text, type='checkbox', className, checkboxClassName, svgClassName, labelClassName, errorTitle, ...props 
-}: CheckboxProps) {
-  // Checkbox/radio/toggle component
-  let value!: boolean
-  const error = getErrorFromState(state, errorTitle || props.name)
-  const id = props.id || props.name
-
-  if (!props.name) throw new Error('Checkbox requires a `name` prop')
-  
-  // Value: Input is always controlled if state is passed in
-  if (typeof props.checked !== 'undefined') value = props.checked
-  else if (typeof state == 'object') {
-    const v = deepFind(state, props.name) as boolean | undefined
-    value = v ?? false
-  }
-
-  const BORDER = 2
-  const checkboxSize = size ?? 14
-  const toggleHeight = size ?? 18
-  const toggleWidth = toggleHeight * 2 - BORDER * 2
-  const toggleAfterSize = toggleHeight - BORDER * 2
-
-  return (
-    <div 
-      className={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after text-sm nitro-checkbox ${className}`)}
-    >
-      <div className="flex gap-3 items-baseline">
-        <div className="shrink-0 flex items-center">
-          <div className="w-0">&nbsp;</div>
-          <div className="group relative">
-            {
-              type !== 'toggle'
-                ? <>
-                    <input
-                      {...props}
-                      id={id}
-                      type={type}
-                      style={{ width: checkboxSize, height: checkboxSize }}
-                      checked={value}
-                      className={
-                        twMerge(
-                          `${type === 'radio' ? 'rounded-full' : 'rounded'} appearance-none border border-gray-300 bg-white forced-colors:appearance-auto disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ` + 
-                          // Variable-selected theme colors (was .*-blue-600)
-                          'checked:border-variable-selected checked:bg-variable-selected indeterminate:border-variable-selected indeterminate:bg-variable-selected focus-visible:outline-variable-selected ' +
-                          // Dark mode not used yet... dark:focus-visible:outline-blue-800
-                          checkboxClassName
-                        )
-                      }
-                    />
-                    <svg
-                      fill="none"
-                      viewBox="0 0 14 14"
-                      style={{ width: checkboxSize, height: checkboxSize }}
-                      className={twMerge('absolute top-0 left-0 pointer-events-none justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25', svgClassName)}
-                    >
-                      {
-                        type === 'radio'
-                          ? <circle
-                              // cx={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 2}
-                              // cy={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 2}
-                              // r={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 6}
-                              cx={7}
-                              cy={7}
-                              r={2.5}
-                              className="fill-white opacity-0 group-has-[:checked]:opacity-100"
-                            />
-                          : <>
-                              <path
-                                d="M4 8L6 10L10 4.5"
-                                strokeWidth={2}
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                className="opacity-0 group-has-[:checked]:opacity-100"
-                              />
-                              <path
-                                d="M4 7H10"
-                                strokeWidth={2}
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                className="opacity-0 group-has-[:indeterminate]:opacity-100"
-                              />
-                            </>
-                      }
-                    </svg>
-                  </>
-                : <>
-                    <input 
-                      {...props}
-                      id={id}
-                      type="checkbox" 
-                      className="sr-only peer"
-                      checked={value}
-                    />
-                    <label
-                      for={id}
-                      style={{ width: toggleWidth, height: toggleHeight }}
-                      className={
-                        twMerge(
-                          'block bg-gray-200 rounded-full transition-colors peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 ' +
-                          // Variable-selected theme colors (was .*-blue-600)
-                          'peer-checked:bg-variable-selected peer-focus-visible:outline-variable-selected ' +
-                          labelClassName
-                        )
-                      }
-                    >
-                      <span
-                        style={{ width: toggleAfterSize, height: toggleAfterSize }}
-                        className={
-                          'absolute top-[2px] start-[2px] bg-white border-gray-300 border rounded-full transition-all group-has-[:checked]:border-white group-has-[:checked]:translate-x-full '
-                        }
-                      />
-                    </label>
-                  </>
-            }
-          </div>
-        </div>
-        {text && 
-          <label for={id} className="text-[length:inherit] leading-[inherit] select-none">
-            <span className="text-gray-900">{text}</span>
-            <span className="ml-2 text-gray-500">{subtext}</span>
-          </label>
-        }
-      </div>
-      {error && <div class="mt-1.5 text-xs text-danger-foreground nitro-error">{error.detail}</div>}
-    </div>
-  )
-}

package/components/partials/form/drop-handler.tsx

@@ -1,68 +0,0 @@
-type DropHandlerProps = {
-  onDrop: (files: FileList) => void
-  children: React.ReactNode
-  className?: string
-}
-
-export const DropHandler = ({ onDrop, children, className }: DropHandlerProps) => {
-  const dropRef = useRef<HTMLDivElement>(null)
-  let dragCounter = useRef(0).current
-  const [dragging, setDragging] = useState(false)
-
-  useEffect(() => {
-    const div = dropRef.current
-    div?.addEventListener('dragenter', handleDragIn)
-    div?.addEventListener('dragleave', handleDragOut)
-    div?.addEventListener('dragover', handleDragOver)
-    div?.addEventListener('drop', handleDrop)
-    return () => {
-      div?.removeEventListener('dragenter', handleDragIn)
-      div?.removeEventListener('dragleave', handleDragOut)
-      div?.removeEventListener('dragover', handleDragOver)
-      div?.removeEventListener('drop', handleDrop)
-    }
-  }, [])
-
-  const handleDragIn = (e: DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounter++
-    if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) {
-      setDragging(true)
-    }
-  }
-
-  const handleDragOut = (e: DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounter--
-    if (dragCounter === 0) {
-      setDragging(false)
-    }
-  }
-
-  const handleDragOver = (e: DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }
-
-  const handleDrop = (e: DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setDragging(false)
-    if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
-      onDrop(e.dataTransfer.files)
-      // e.dataTransfer.clearData() // causes an error in firefox
-      dragCounter = 0
-    }
-  }
-
-  return (
-    <div 
-      ref={dropRef}
-      class={`${className} relative w-full p-[20px] border-2 border-dashed border-input-border rounded-md ${dragging ? 'border-primary before:content-[""] before:absolute before:inset-0 before:bg-primary before:opacity-5' : ''}`}
-    >
-      {children}
-    </div>
-  )
-}

package/components/partials/form/drop.tsx

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

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

@@ -1,158 +0,0 @@
-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>
-  )
-}