nitro-web 0.0.1

package/components/partials/form/checkbox.jsx

@@ -0,0 +1,74 @@
+
+/**
+ * Checkbox/radio/toggle component
+ * @param {string} name - The name of the checkbox
+ * @param {string} [id] - The id of the checkbox (used for radios)
+ * @param {'sm' | 'md'} [size='sm'] - The size of the toggle
+ * @param {string} [subtext] 
+ * @param {string} [text] 
+ * @param {'checkbox' | 'radio' | 'toggle'} [type='checkbox']
+ * @param {object} [props] - input props
+ * 
+ * @link https://tailwindui.com/components/application-ui/forms/checkboxes#component-744ed4fa65ba36b925701eb4da5c6e31
+ */
+export function Checkbox({ name, id, size='sm', subtext, text, type='checkbox', ...props }) {
+  if (!name) throw new Error('Checkbox requires a `name` prop')
+  id = id || name
+  return (
+    <div className={`mt-input-before mb-input-after flex gap-3 ${props.className || ''}`}>
+      <div className="flex h-6 shrink-0 items-center">
+        {
+          type !== 'toggle'
+          ? <div className="group grid size-4 grid-cols-1">
+              <input
+                {...props}
+                id={id}
+                name={name}
+                type={type}
+                className="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+              />
+              <svg
+                fill="none"
+                viewBox="0 0 14 14"
+                className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
+              >
+                <path
+                  d="M3 8L6 11L11 3.5"
+                  strokeWidth={2}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="opacity-0 group-has-[:checked]:opacity-100"
+                />
+                <path
+                  d="M3 7H11"
+                  strokeWidth={2}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="opacity-0 group-has-[:indeterminate]:opacity-100"
+                />
+              </svg>
+            </div>
+          : <div className="group grid grid-cols-1">
+              <input 
+                {...props}
+                id={id}
+                name={name}
+                type="checkbox" 
+                class="sr-only peer"
+              />
+              <label 
+                for={id}
+                className={`col-start-1 row-start-1 relative ${size == 'sm' ? 'w-9' : 'w-11'} ${size == 'sm' ? 'h-5' : 'h-6'} bg-gray-200 peer-focus-visible:outline-none peer-focus-visible:ring-4 peer-focus-visible:ring-blue-300 dark:peer-focus-visible:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full ${size == 'sm' ? 'after:w-4' : 'after:w-5'} ${size == 'sm' ? 'after:h-4' : 'after:h-5'} after:transition-all dark:border-gray-600 peer-checked:bg-blue-600`}
+              />
+            </div>
+        }
+      </div>
+      {text && <div className="text-sm/6">
+        <label for={id} className="select-none">
+          <span className="font-medium text-gray-900">{text}</span>
+          <span className="ml-2 text-gray-500">{subtext}</span>
+        </label>
+      </div>}
+    </div>
+  )
+}

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

@@ -0,0 +1,62 @@
+export const DropHandler = ({ onDrop, children, className }) => {
+  const dropRef = useRef()
+  let dragCounter = useRef(0).current
+  const [dragging, setDragging] = useState(false)
+
+  useEffect(() => {
+    let 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) => {
+    e.preventDefault()
+    e.stopPropagation()
+    dragCounter++
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+      setDragging(true)
+    }
+  }
+
+  const handleDragOut = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    dragCounter--
+    if (dragCounter === 0) {
+      setDragging(false)
+    }
+  }
+
+  const handleDragOver = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleDrop = (e) => {
+    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 border-dashed border-input-border border-2 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.jsx

@@ -0,0 +1,125 @@
+import { isRegex, deepFind, s3Image } from '../../../util.js'
+import { DropHandler } from './drop-handler.jsx'
+
+export function Drop({ awsUrl, className, id, name, onChange, multiple, state, ...props }) {
+  /**
+   * @param {string} name - field name or path on state (used to match errors), e.g. 'avatar', 'company.avatar'
+   * @param {string} <id> - not required, name used if not provided
+   * @param {function} onChange({ target: { id: <{name}|errors>, value } }) - gets called on success/error
+   * @param {object} state - State object to get the value, and check errors against
+   */
+  if (!name) throw new Error('Drop component requires a `name` prop')
+  const inputId = id ||name
+  const stateRef = useRef()
+  const [urls, setUrls] = useState([])
+  stateRef.current = state
+
+  // Input is always controlled if state is passed in
+  if (props.value) {
+    var value = props.value
+  } else if (typeof state == 'object') {
+    value = deepFind(state, name)
+    if (typeof value == 'undefined') value = null
+  }
+
+  // An error matches this input path
+  for (let item of (state?.errors || [])) {
+    if (isRegex(name) && (item.title||'').match(name)) var error = item
+    else if (item.title == name) error = item
+  }
+
+  useEffect(() => {
+    (async () => setUrls(await getUrls(value)))()
+  }, [value])
+
+  function tryAgain (e) {
+    e.preventDefault()
+    // clear file input to allow reupload
+    document.getElementById(name).value = ''
+    if (onChange) {
+      const errors = (stateRef.errors||[]).filter(e => e.title != name)
+      onChange({
+        // remove file from state
+        target: { id: name, value: null },
+        // reset (server) errors
+        errors: errors.length ? errors : undefined,
+      })
+    }
+  }
+
+  async function onFileAttach (files=[]) { 
+    // files is a FileList object
+    if (onChange) onChange({ target: { id: name, value: multiple ? files : files[0] } })
+  }
+
+  async function getUrls(objectOrFileListItem) {
+    /**
+     * @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 = objectOrFileListItem.length ? Array.from(objectOrFileListItem) : [objectOrFileListItem]
+    return Promise.all(array.map((file) => {
+      return new Promise((resolve, reject) => {
+        if (file.lastModified) {
+          const reader = new FileReader()
+          reader.onload = () => resolve(reader.result)
+          reader.onerror = reject
+          reader.readAsDataURL(file)
+        } else {
+          resolve(s3Image(awsUrl, file))
+        }
+      })
+    }))
+  }
+
+  // function getFilename (objectOrFile) {
+  //   if (objectOrFile.lastModified) return objectOrFile.name
+  //   else return 'avatar.jpg'
+  // }
+
+  return (
+    <div class={`mt-input-before mb-input-after ${className || ''}`}>
+      <input 
+        {...props}
+        id={inputId}
+        type="file"
+        onChange={(e) => onFileAttach(e.target.files)}
+        hidden
+      />
+      <DropHandler 
+        onDrop={onFileAttach} 
+        class="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} 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/form-error.jsx

@@ -0,0 +1,21 @@
+export function FormError({ state, fields, className }) {
+  /**
+   * this is a catch all error component that should be placed next to the submit button
+   * @param {object} state
+   * @param {array} <fields> - display all errors except these field titles, e.g. ['name', 'address']
+   */
+  for (let item of state.errors || []) {
+    if (!item.title || item.title.match(/^(error|invalid)$/i) || (fields && !fields.includes(item.title))) {
+      var error = item
+    }
+  }
+  return (
+    <>
+      {error ? (
+        <div class={`text-danger mt-1 text-sm ${className||''}`}>
+          {error.detail}
+        </div>
+      ) : null}
+    </>
+  )
+}

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

@@ -0,0 +1,77 @@
+import { css } from 'twin.macro'
+import { hsvaToHex, hexToHsva, validHex } from '@uiw/color-convert'
+import Saturation from '@uiw/react-color-saturation'
+import Hue from '@uiw/react-color-hue'
+import { Dropdown } from '../element/dropdown.jsx'
+import { throttle } from '../../../util.js'
+
+export function InputColor({ className, defaultColor='#333', iconEl, id, onChange, value, ...props }) {
+  const [lastChanged, setLastChanged] = useState(() => `ic-${Date.now()}`)
+  const isInvalid = className?.includes('is-invalid') ? 'is-invalid' : ''
+
+  function onInputChange(e) {
+    setLastChanged(`ic-${Date.now()}`)
+    if (onChange) onChange(e)
+  }
+
+  return (
+    <Dropdown
+      css={style}
+      menuToggles={false}
+      menuChildren={
+        <ColorPicker key={lastChanged} defaultColor={defaultColor} id={id} value={value} onChange={onChange} />
+      }
+    >
+      <div className="grid grid-cols-1">
+        {iconEl}
+        <input 
+          {...props} 
+          className={className + ' ' + isInvalid} 
+          id={id} 
+          value={value} 
+          onChange={onInputChange}
+          onBlur={() => !validHex(value) && onInputChange({ target: { id: id, value: '' }})}
+          autoComplete="off" 
+        />
+      </div>
+    </Dropdown>
+  )
+}
+
+function ColorPicker({ id, onChange, value, defaultColor }) {
+  const [hsva, setHsva] = useState(() => hexToHsva(validHex(value) ? value : defaultColor))
+  const [debounce] = useState(() => throttle(callOnChange, 50))
+
+  function callOnChange(newHsva) {
+    onChange({ target: { id: id, value: hsvaToHex(newHsva) }})
+  }
+
+  return (
+    <>
+      <Saturation
+        hsva={hsva}
+        onChange={(newHsva) => {
+          setHsva(newHsva)
+          if (onChange) debounce(newHsva)
+        }}
+      />
+      <Hue
+        hue={hsva.h}
+        onChange={(newHue) => {
+          setHsva({ ...hsva, ...newHue })
+          if (onChange) debounce({ ...hsva, ...newHue })
+        }}
+      />
+    </>
+  )
+}
+
+const style = () => css`
+  text-indent: 0 !important; // since is-color is on dropdown
+  .w-color-interactive {
+    width: 100% !important;
+    height: 150px !important;
+  }
+`
+
+

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

@@ -0,0 +1,133 @@
+/*eslint-disable*/
+import { NumericFormat } from 'react-number-format'
+import { getCurrencyPrefixWidth } from '../../../util.js'
+
+/**
+ * @param {string} id - field name or path on state
+ * @param {object} config - e.g. { currencies: { nzd: { symbol: '$', digits: 2 } } }
+ * @param {string} [currency] - currency iso
+ * @param {function} [onChange] - e.g. (event) => onInputChange(event)
+ * @param {string} [placeholder] - e.g. 'Amount'
+ * @param {cents} [value] - e.g. 123 (input is always controlled if state is passed in)
+ */
+export function InputCurrency({ id, config, className, currency='nzd', onChange, placeholder, value }) {
+  const ref = useRef()
+  const [dontFix, setDontFix] = useState()
+  const [settings, setSettings] = useState(() => getCurrencySettings(currency))
+  const [dollars, setDollars] = useState(() => toDollars(value, true, settings))
+  const [prefixWidth, setPrefixWidth] = useState()
+  ref.current = { settings, dontFix }
+
+  if (!config) throw new Error('InputCurrency: `config` is required')
+
+  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 == '$' ? getCurrencyPrefixWidth(settings.prefix, 1) : 0)
+  }, [settings.prefix])
+
+  function toCents(num) {
+    if (!num && num !== 0) return null
+    const value = Math.round(num * Math.pow(10, ref.current.settings.maxDecimals)) // e.g. 1.23 => 123
+    // console.log('toCents', num, value)
+    return value
+  }
+
+  function toDollars(num, toFixed, settings) {
+    if (!num && num !== 0) return null
+    const value = num / Math.pow(10, (settings||ref.current.settings).maxDecimals) // e.g. 1.23 => 123
+    // console.log('toDollars', num, value)
+    return toFixed ? value.toFixed((settings||ref.current.settings).maxDecimals) : value
+  }
+
+  function getCurrencySettings(currency) {
+    /**
+     * parse CLDR currency format, e.g. '¤#,##0.00'
+     * @param {string} currency - currency iso
+     * @returns {object}
+     * {
+     *   currency: 'nzd',
+     *   decimalSeparator: '.',
+     *   thousandSeparator: ',',
+     *   minDecimals: 2,
+     *   maxDecimals: 2,
+     *   prefix: '$',
+     *   suffix: '',
+     * }
+     */
+    const output = { 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
+        id={id}
+        className={className}
+        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: { id: id, value: toCents(floatValue) }})
+        }}
+        onBlur={() => { setDollars(toDollars(value, true))}}
+        placeholder={placeholder || '0.00'}
+        value={dollars}
+        style={{ textIndent: `${prefixWidth}px` }}
+      />
+      <span
+        class={`absolute top-[1px] bottom-0 left-3 inline-flex items-center select-none text-gray-500 text-sm sm:text-sm/6 ${dollars !== null && settings.prefix == '$' ? 'text-dark' : ''}`}
+      >
+        {settings.prefix || settings.suffix}
+      </span>
+    </div>
+  )
+}