nitro-web 0.0.16 → 0.0.17

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

@@ -3,21 +3,21 @@ import Saturation from '@uiw/react-color-saturation'
 import Hue from '@uiw/react-color-hue'
 import { Dropdown, util } from 'nitro-web'
 
-type InputColorProps = {
-  className?: string
+export type FieldColorProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  name: string
+  id?: string 
   defaultColor?: string
-  iconEl?: React.ReactNode
-  id?: string
-  onChange?: (e: { target: { id: string, value: string } }) => void
-  value?: string
-  [key: string]: unknown
+  Icon?: React.ReactNode
+  onChange?: (event: { target: { id: string, value: string|null } }) => void
+  value?: string|null
 }
 
-export function InputColor({ className, defaultColor='#333', iconEl, id, onChange, value, ...props }: InputColorProps) {
+export function FieldColor({ defaultColor='#333', Icon, onChange, value, ...props }: FieldColorProps) {
   const [lastChanged, setLastChanged] = useState(() => `ic-${Date.now()}`)
-  const isInvalid = className?.includes('is-invalid') ? 'is-invalid' : ''
+  const isInvalid = props.className?.includes('is-invalid') ? 'is-invalid' : ''
+  const id = props.id || props.name
 
-  function onInputChange(e: { target: { id: string, value: string } }) {
+  function onInputChange(e: { target: { id: string, value: string|null } }) {
     setLastChanged(`ic-${Date.now()}`)
     if (onChange) onChange(e)
   }
@@ -27,26 +27,27 @@ export function InputColor({ className, defaultColor='#333', iconEl, id, onChang
       dir="bottom-left"
       menuToggles={false}
       menuChildren={
-        <ColorPicker key={lastChanged} defaultColor={defaultColor} id={id} value={value} onChange={onChange} />
+        <ColorPicker key={lastChanged} defaultColor={defaultColor} id={id} name={props.name} value={value} onChange={onChange} />
       }
     >
       <div className="grid grid-cols-1">
-        {iconEl}
-        <input 
-          {...props} 
-          className={className + ' ' + isInvalid} 
-          id={id} 
-          value={value} 
+        {Icon}
+        <input
+          {...props}
+          className={(props.className || '') + ' ' + isInvalid}
+          id={id}
+          value={value}
           onChange={onInputChange}
-          onBlur={() => !validHex(value||'') && onInputChange({ target: { id: id || '', value: '' }})}
-          autoComplete="off" 
+          onBlur={() => !validHex(value||'') && onInputChange({ target: { id: id, value: '' }})}
+          autoComplete="off"
+          type="text"
         />
       </div>
     </Dropdown>
   )
 }
 
-function ColorPicker({ id='', onChange, value='', defaultColor='' }: InputColorProps) {
+function ColorPicker({ id='', onChange, value='', defaultColor='' }: FieldColorProps) {
   const [hsva, setHsva] = useState(() => hexToHsva(validHex(value) ? value : defaultColor))
   const [debounce] = useState(() => util.throttle(callOnChange, 50))
 

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

@@ -1,36 +1,43 @@
-// @ts-nocheck
 import { NumericFormat } from 'react-number-format'
-import { getCurrencyPrefixWidth } from 'nitro-web/util'
+import { getPrefixWidth } from 'nitro-web/util'
 
-type InputCurrencyProps = {
-  /** field name or path on state */
-  id: string
-  /** e.g. { currencies: { nzd: { symbol: '$', digits: 2 } } } */
+// 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
+  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 } } } 
   }
-  className: string
-  /** currency iso */
+  /** currency iso, e.g. 'nzd' */
   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
+  onChange?: (event: { target: { id: string, value: string|number|null } }) => void
+  /** value should be in cents */
+  value?: string|number|null
+  defaultValue?: number | string | null
 }
 
-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 [dontFix, setDontFix] = useState()
+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()
+  const [prefixWidth, setPrefixWidth] = useState(0)
   const ref = useRef({ settings, dontFix }) // was null
+  const id = props.id || props.name
   ref.current = { settings, dontFix }
 
   useEffect(() => {
@@ -53,21 +60,27 @@ export function InputCurrency({ id, config, className, currency='nzd', onChange,
 
   useEffect(() => {
     // Get the prefix content width
-    setPrefixWidth(settings.prefix == '$' ? getCurrencyPrefixWidth(settings.prefix, 1) : 0)
+    setPrefixWidth(settings.prefix == '$' ? getPrefixWidth(settings.prefix, 1) : 0)
   }, [settings.prefix])
 
-  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 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(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
-    // console.log('toDollars', num, value)
-    return toFixed ? value.toFixed((settings || ref.current.settings).maxDecimals) : value
+  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) {
@@ -116,8 +129,9 @@ export function InputCurrency({ id, config, className, currency='nzd', onChange,
   return (
     <div className="relative">
       <NumericFormat
-        id={id}
-        className={className}
+        {...props}
+        id={id} 
+        name={props.name}
         decimalSeparator={settings.decimalSeparator}
         thousandSeparator={settings.thousandSeparator}
         decimalScale={settings.maxDecimals}
@@ -127,9 +141,11 @@ export function InputCurrency({ id, config, className, currency='nzd', onChange,
           onChange({ target: { id: id, value: toCents(floatValue) }})
         }}
         onBlur={() => { setDollars(toDollars(value, true))}}
-        placeholder={placeholder || '0.00'}
+        placeholder={props.placeholder || '0.00'}
         value={dollars}
         style={{ textIndent: `${prefixWidth}px` }}
+        type="text"
+        defaultValue={defaultValue}
       />
       <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' : ''}`}

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

@@ -1,56 +1,56 @@
-// @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 'nitro-web/util'
-import { Dropdown } from 'nitro-web'
-import 'react-day-picker/dist/style.css'
+import { getPrefixWidth } from 'nitro-web/util'
+import { Calendar, Dropdown } from 'nitro-web'
 
-export function InputDate({ className, prefix, id, onChange, mode='single', value, ...props }) {
-  /**
-   * @param {string} mode - 'single'|'range'|'multiple' - an array is returned for non-single modes
-   */
+type Mode = 'single' | 'multiple' | 'range'
+type DropdownRef = {
+  setIsActive: (value: boolean) => void
+}
+export type FieldDateProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  name: string
+  id?: string 
+  mode?: Mode
+  // an array is returned for non-single modes
+  onChange?: (e: { target: { id: string, value: null|number|(null|number)[] } }) => void
+  prefix?: string
+  value?: null|number|string|(null|number|string)[]
+  numberOfMonths?: number
+  Icon?: React.ReactNode
+}
+
+export function FieldDate({ mode='single', onChange, prefix='', value, numberOfMonths, Icon, ...props }: FieldDateProps) {
   const localePattern = 'd MMM yyyy'
-  const isInvalid = className?.includes('is-invalid') ? 'is-invalid' : ''
-  const [prefixWidth, setPrefixWidth] = useState()
-  const ref = useRef(null)
+  const [prefixWidth, setPrefixWidth] = useState(0)
+  const dropdownRef = useRef<DropdownRef>(null)
+  const id = props.id || props.name
+  const [month, setMonth] = useState<number|undefined>()
 
+  // Convert the value to an array of valid* dates
   const dates = useMemo(() => {
-    // Convert the value to an array of valid* dates
     const _dates = Array.isArray(value) ? value : [value]
-    return _dates.map(date => isValid(date) ? new Date(date) : undefined)
+    return _dates.map(date => isValid(date) ? new Date(date as number) : null) /// change to null
   }, [value])
 
-  // Hold the month in state to control the calendar when the input changes
-  const [month, setMonth] = useState(dates[0])
-
   // Hold the input value in state
   const [inputValue, setInputValue] = useState(() => getInputValue(dates))
 
+  // Get the prefix content width
   useEffect(() => {
-    // Get the prefix content width
-    setPrefixWidth(getCurrencyPrefixWidth(prefix, 4))
+    setPrefixWidth(getPrefixWidth(prefix, 4))
   }, [prefix])
 
-  function handleDayPickerSelect(newDate) {
-    if (mode == 'single') {
-      ref.current.setIsActive(false) // close the dropdown
-      callOnChange(newDate?.getTime() || null)
-      setInputValue(getInputValue([newDate]))
-
-    } else if (mode == 'range') {
-      const {from, to} = newDate || {} // may not exist
-      callOnChange(from ? [from?.getTime() || null, to?.getTime() || null] : null)
-      setInputValue(getInputValue(from ? [from, to] : []))
+  function onCalendarChange(mode: Mode, value: null|number|(null|number)[]) {
+    if (mode == 'single') dropdownRef.current?.setIsActive(false) // Close the dropdown
+    setInputValue(getInputValue(value))
+    if (onChange) onChange({ target: { id: id, value: value }})
+  }
 
-    } else {
-      callOnChange(newDate.filter(o => o).map(d => d.getTime()))
-      setInputValue(getInputValue(newDate.filter(o => o)))
-    }
+  function getInputValue(dates: Date|number|null|(Date|number|null)[]) {
+    const _dates = Array.isArray(dates) ? dates : [dates]
+    return _dates.map(o => o ? format(o, localePattern) : '').join(mode == 'range' ? ' - ' : ', ')
   }
 
-  function handleInputChange(e) {
+  function onInputChange(e: React.ChangeEvent<HTMLInputElement>) {
     setInputValue(e.target.value) // keep the input value in sync
 
     let split = e.target.value.split(/-|,/).map(o => {
@@ -63,162 +63,50 @@ export function InputDate({ className, prefix, id, onChange, mode='single', valu
     else if (mode == 'multiple') split = split.filter(o => o) // remove invalid dates
 
     // Swap dates if needed
-    if (mode == 'range' && split[0] > split[1]) split = [split[0], split[0]]
+    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])
+      if (split[i]) setMonth((split[i] as Date).getTime())
       break
     }
     
-    // Set dates
-    callOnChange(mode == 'single' ? split[0] : split)
-  }
-
-  function getInputValue(dates) {
-    return dates.map(o => o ? format(o, localePattern) : '').join(mode == 'range' ? ' - ' : ', ')
-  }
-
-  function callOnChange(value) {
-    if (onChange) onChange({ target: { id: id, value: value }}) // timestamp|[timestamp]
+    // Update 
+    const value = mode == 'single' ? split[0]?.getTime() ?? null : split.map(d => d?.getTime() ?? null)
+    if (onChange) onChange({ target: { id, value }})
   }
 
   return (
     <Dropdown
-      ref={ref}
-      css={style}
+      ref={dropdownRef}
       menuToggles={false}
       animate={false}
       // menuIsOpen={true}
+      minWidth={0}
       menuChildren={
-        <DayPicker 
-          mode={mode}
-          month={month}
-          onMonthChange={setMonth}
-          numberOfMonths={mode == 'range' ? 2 : 1}
-          selected={mode === 'single' ? dates[0] : mode == 'range' ? { from: dates[0], to: dates[1] } : dates}
-          onSelect={handleDayPickerSelect}
-        />
+        <Calendar {...{ mode, value, numberOfMonths, month }} onChange={onCalendarChange} className="px-3 pt-1 pb-2" />
       }
     > 
-      <div>
-        {prefix && <span class={`input-prefix ${inputValue ? 'has-value' : ''}`}>{prefix}</span>}
+      <div className="grid grid-cols-1">
+        {Icon}
+        {
+          prefix && 
+          // Similar classNames to the input.tsx:IconWrapper()
+          <span className="relative col-start-1 row-start-1 self-center select-none z-[1] justify-self-start text-sm ml-3">{prefix}</span>
+        }
         <input 
           {...props}
-          key={'k'+prefixWidth}
+          key={'k' + prefixWidth}
           id={id}
           autoComplete="off" 
-          className={
-            className + ' ' + isInvalid
-          } 
+          className={(props.className||'')}// + props.className?.includes('is-invalid') ? ' is-invalid' : ''} 
           value={inputValue}
-          onChange={handleInputChange}
+          onChange={onInputChange}
           onBlur={() => setInputValue(getInputValue(dates))}
           style={{ textIndent: prefixWidth + 'px' }}
+          type="text"
         />
       </div>
     </Dropdown>
   )
 }
-
-const style = css`
-  .rdp {
-    --rdp-cell-size: 34px;
-    --rdp-caption-font-size: 12px;
-    --rdp-accent-color: blue; /* theme('colors.primary') */
-    font-size: 13px;
-    margin: 0 12px 11px;
-    svg {
-      width: 13px;
-      height: 13px;
-    }
-    .rdp-caption_label {
-      height: var(--rdp-cell-size);
-    }
-    .rdp-head_cell {
-      text-align: center !important;
-    }
-    tr {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      th,
-      td {
-        display: flex;
-        align-items: center;
-        margin-left: -1px;
-        margin-top: -1px;
-        .rdp-day {
-          border: 0 !important;
-          position: relative;
-          border-radius: 0 !important;
-          color: inherit;
-          background-color: transparent !important;
-          &:before {
-            content: '';
-            position: absolute;
-            display: block;
-            left: 0px;
-            top: 0px;
-            bottom: 0px;
-            right: 0px;
-            z-index: -1;
-          }
-        }
-        .rdp-day:focus,
-        .rdp-day:hover,
-        .rdp-day:active {
-          &:not([disabled]):not(.rdp-day_selected) {
-            &:before {
-              left: 1px;
-              top: 1px;
-              bottom: 1px;
-              right: 1px;
-              border-radius: 50%;
-              background-color: #e7edff;
-            }
-            &:active {
-              color: white;
-              &:before {
-                background-color: blue; /* theme('colors.primary') */
-              }
-            }
-          }
-        }
-        .rdp-day_selected {
-          color: white;
-          :before {
-            border-radius: 50%;
-            background-color: blue; /* theme('colors.primary') */
-          }
-        }
-        .rdp-day_range_middle {
-          color: black; /* theme('colors.dark') */
-          :before {
-            border-radius: 0;
-            border: 1px solid rgb(151 133 185);
-            background-color:  blue; /* theme('colors.primary-light') */
-          }
-        }
-        .rdp-day_range_start,
-        .rdp-day_range_end {
-          position: relative;
-          z-index: 1;
-          &.rdp-day_range_start:before {
-            border-top-right-radius: 0px;
-            border-bottom-right-radius: 0px;
-          }
-          &.rdp-day_range_end:before {
-            border-top-left-radius: 0px;
-            border-bottom-left-radius: 0px;
-          }
-          &.rdp-day_range_start.rdp-day_range_end:before {
-            border-radius: 50%;
-          }
-        }
-      }
-    }
-  }
-`
-
-