nitro-web 0.0.11 → 0.0.12

package/components/partials/form/{input-currency.jsx → input-currency.tsx}

@@ -1,26 +1,36 @@
-/*eslint-disable*/
+// @ts-nocheck
 import { NumericFormat } from 'react-number-format'
-import { getCurrencyPrefixWidth } from '../../../util.js'
+import { getCurrencyPrefixWidth } from 'nitro-web/util'
 
-/**
- * @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 }) {
+type InputCurrencyProps = {
+  /** field name or path on state */
+  id: string
+  /** e.g. { currencies: { nzd: { symbol: '$', digits: 2 } } } */
+  config: {
+    currencies: { [key: string]: { symbol: string, digits: number } }, 
+    countries: { [key: string]: { numberFormats: { currency: string } } } 
+  }
+  className: string
+  /** currency iso */
+  currency: string
+  onChange: (event: { target: { id: string, value: string } }) => void
+  /** e.g. 'Amount' */
+  placeholder: string
+  /** e.g. 123 (input is always controlled if state is passed in) */
+  value: number
+}
+
+export function InputCurrency({ id, config, className, currency='nzd', onChange, placeholder, value }: InputCurrencyProps) {
   if (!config?.currencies || !config?.countries) {
     throw new Error(
       'InputCurrency: `config.currencies` and `config.countries` is required, check out the nitro example for more info.'
     )
   }
-  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()
+  const ref = useRef({ settings, dontFix }) // was null
   ref.current = { settings, dontFix }
 
   useEffect(() => {
@@ -46,36 +56,31 @@ export function InputCurrency({ id, config, className, currency='nzd', onChange,
     setPrefixWidth(settings.prefix == '$' ? getCurrencyPrefixWidth(settings.prefix, 1) : 0)
   }, [settings.prefix])
 
-  function toCents(num) {
+  function toCents(num: number) {
     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) {
+  function toDollars(num: string|number, toFixed: boolean, settings: { maxDecimals: number }) {
     if (!num && num !== 0) return null
-    const value = num / Math.pow(10, (settings||ref.current.settings).maxDecimals) // e.g. 1.23 => 123
+    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
+    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 }
+  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
 

package/components/partials/form/{input-date.jsx → input-date.tsx}

@@ -1,9 +1,10 @@
+// @ts-nocheck
 // todo: finish tailwind conversion
 import { css } from 'twin.macro'
 import { DayPicker } from 'react-day-picker'
 import { format, isValid, parse } from 'date-fns'
-import { getCurrencyPrefixWidth } from '../../../util.js'
-import { Dropdown } from '../element/dropdown.jsx'
+import { getCurrencyPrefixWidth } from 'nitro-web/util'
+import { Dropdown } from 'nitro-web'
 import 'react-day-picker/dist/style.css'
 
 export function InputDate({ className, prefix, id, onChange, mode='single', value, ...props }) {
@@ -120,7 +121,7 @@ export function InputDate({ className, prefix, id, onChange, mode='single', valu
   )
 }
 
-const style = () => css`
+const style = css`
   .rdp {
     --rdp-cell-size: 34px;
     --rdp-caption-font-size: 12px;

package/components/partials/form/{input.jsx → input.tsx}

@@ -1,8 +1,7 @@
+// @ts-nocheck
 import { css } from 'twin.macro'
-import * as util from '../../../util.js'
-import { InputCurrency } from './input-currency.jsx'
-import { InputColor } from './input-color.jsx'
-// import { InputDate } from './input-date.jsx'
+import { InputColor, InputCurrency, util } from 'nitro-web' // InputDate
+
 import {
   EnvelopeIcon,
   // CalendarIcon,
@@ -12,17 +11,27 @@ import {
   EyeSlashIcon,
 } from '@heroicons/react/20/solid'
 
-/**
- * Input
- * @param {string} name - field name or path on state (used to match errors), e.g. 'date', 'company.email'
- * @param {object} state - State object to get the value, and check errors against
- * @param {string} [id] - not required, name used if not provided
- * @param {('password'|'email'|'text'|'date'|'filter'|'search'|'color'|'textarea'|'currency')} [type='text']
- */
-export function Input({ name='', state, id, type='text', ...props }) {
+interface InputProps {
+  name: string
+  state?: any
+  id?: string
+  type?: string
+  [key: string]: any
+}
+
+export function Input({ name='', state, id, type='text', ...props }: InputProps) {
+  /**
+   * Input
+   * @param {string} name - field name or path on state (used to match errors), e.g. 'date', 'company.email'
+   * @param {object} state - State object to get the value, and check errors against
+   * @param {string} [id] - not required, name used if not provided
+   * @param {('password'|'email'|'text'|'date'|'filter'|'search'|'color'|'textarea'|'currency')} [type='text']
+   */
+  let IconSvg: React.ReactNode
+  let onClick: () => void
   let iconDir = 'right'
   let InputEl = 'input'
-  const [inputType, setInputType] = useState(() => {
+  const [inputType, setInputType] = useState(() => { // eslint-disable-line
     return type == 'password' ? 'password' : (type == 'textarea' ? type : 'text')
   })
 
@@ -37,15 +46,15 @@ export function Input({ name='', state, id, type='text', ...props }) {
   }
 
   // Find any errors that match this input path
-  for (let item of (state?.errors || [])) {
+  for (const item of (state?.errors || [])) {
     if (util.isRegex(name) && (item.title||'').match(name)) var error = item
     else if (item.title == name) error = item
   }
 
   // Special input types
   if (type == 'password') {
-    var onClick = () => setInputType(o => o == 'password' ? 'text' : 'password')
-    var IconSvg = inputType == 'password' ? <EyeSlashIcon /> : <EyeIcon />
+    onClick = () => setInputType(o => o == 'password' ? 'text' : 'password')
+    IconSvg = inputType == 'password' ? <EyeSlashIcon /> : <EyeIcon />
   } else if (type == 'email') { 
     IconSvg = <EnvelopeIcon />
   // } else if (type == 'date') { 
@@ -98,7 +107,14 @@ export function Input({ name='', state, id, type='text', ...props }) {
   )
 }
 
-function IconEl({ iconDir, IconSvg, onClick, type }) {
+type IconElProps = {
+  iconDir: string
+  IconSvg: React.ReactNode
+  onClick: () => void
+  type: string
+}
+
+function IconEl({ iconDir, IconSvg, onClick, type }: IconElProps) {
   const iconSize = type == 'color' ? 'size-[18px]' : 'size-4'
   return (
     !!IconSvg && 
@@ -112,13 +128,13 @@ function IconEl({ iconDir, IconSvg, onClick, type }) {
   )
 }
 
-function ColorIcon({ hex }) {
+function ColorIcon({ hex }: { hex: string }) {
   return (
     <span class="block size-full rounded-md" style={{ backgroundColor: hex ? hex : '#f1f1f1' }}></span>
   )
 }
 
-const style = () => css`
+const style = css`
   input {
     appearance: textfield;
     -moz-appearance: textfield;

package/components/partials/form/{location.jsx → location.tsx}

@@ -1,7 +1,20 @@
+// @ts-nocheck
 // todo: finish tailwind conversion
-import * as util from '../../../util.js'
+import * as util from 'nitro-web/util'
 
-export function Location({ clear, id, name, onInput, onSelect, placeholder, placeTypes, value, googleMapsApiKey }) {
+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)
    *
@@ -42,7 +55,7 @@ export function Location({ clear, id, name, onInput, onSelect, placeholder, plac
       // 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 (let elem of document.getElementsByClassName('pac-container')) elem.remove()
+      for (const elem of document.getElementsByClassName('pac-container')) elem.remove()
     }
   }, [])
 
@@ -99,11 +112,11 @@ export function Location({ clear, id, name, onInput, onSelect, placeholder, plac
   }
 
   function onPlaceSelect() {
-    let place = this.getPlace()
+    const place = this.getPlace()
     if (!place.geometry) return
     if (clear) setInputValue('')
     else setInputValue(place.formatted_address)
-    let addressObject = formatAddressObject(place)
+    const addressObject = formatAddressObject(place)
     onSelect({
       city: addressObject.city,
       country: addressObject.country,
@@ -151,7 +164,7 @@ export function Location({ clear, id, name, onInput, onSelect, placeholder, plac
     // Stop form submission if there is a google autocomplete dropdown opened
     let prevented
     if (event.key === 'Enter') {
-      for (let el of document.getElementsByClassName('pac-container')) {
+      for (const el of document.getElementsByClassName('pac-container')) {
         if (el.offsetParent !== null && !prevented) { // google autocomplete opened somewhere
           event.preventDefault()
           prevented = true
@@ -181,7 +194,7 @@ function loadGoogleMaps(googleMapsApiKey) {
   }
 
   return new Promise((res) => {
-    let scriptId = 'googleMapsUrl'
+    const scriptId = 'googleMapsUrl'
     let script = document.getElementById(scriptId)
     // script not yet inserted
     if (script === null) {
@@ -199,7 +212,7 @@ function loadGoogleMaps(googleMapsApiKey) {
         res()
       // script hasn't been loaded yet
       } else {
-        let cachedCallback = script.onload
+        const cachedCallback = script.onload
         script.onload = () => {
           cachedCallback()
           res()