nitro-web 0.0.15 → 0.0.17

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%;
-          }
-        }
-      }
-    }
-  }
-`
-
-

package/components/partials/form/input.tsx

@@ -1,134 +1,165 @@
-// @ts-nocheck
 import { css } from 'twin.macro'
-import { InputColor, InputCurrency, util } from 'nitro-web' // InputDate
-
+import { twMerge } from 'tailwind-merge'
+import { util, FieldCurrency, FieldCurrencyProps, FieldColor, FieldColorProps, FieldDate, FieldDateProps } from 'nitro-web'
+import { Errors, type Error } from 'types'
 import {
   EnvelopeIcon,
-  // CalendarIcon,
+  CalendarIcon,
   FunnelIcon,
   MagnifyingGlassIcon,
   EyeIcon,
   EyeSlashIcon,
 } from '@heroicons/react/20/solid'
 
-interface InputProps {
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+type FieldExtraProps = {
+  // field name or path on state (used to match errors), e.g. 'date', 'company.email'
   name: string
-  state?: any
   id?: string
-  type?: string
-  [key: string]: any
+  // state object to get the value, and check errors against
+  state?: { errors: Errors, [key: string]: unknown }
+  type?: 'text' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color'
+  icon?: React.ReactNode
+  iconPos?: 'left' | 'right'
+}
+type IconWrapperProps = {
+  iconPos: string
+  icon?: React.ReactNode
+  [key: string]: unknown
 }
+// Discriminated union (https://stackoverflow.com/a/77351290/1900648)
+export type FieldProps = (
+  | ({ type?: 'text' | 'password' | 'email' | 'filter' | 'search' } & InputProps & FieldExtraProps)
+  | ({ type: 'textarea' } & TextareaProps & FieldExtraProps)
+  | ({ type: 'currency' } & FieldCurrencyProps & FieldExtraProps)
+  | ({ type: 'color' } & FieldColorProps & FieldExtraProps)
+  | ({ type: 'date' } & FieldDateProps & FieldExtraProps)
+)
+
+export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
+  // type must be kept as props.type for TS to be happy and follow the conditions below
+  let error!: Error
+  let value!: string
+  let Icon!: React.ReactNode
+  const type = props.type
+  const iconPos = ip == 'left' || (type == 'color' && !ip) ? 'left' : 'right'
 
-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'
+  if (!props.name) {
+    throw new Error('Input component requires a `name` prop')
+  }
+  
+  // Input type
   const [inputType, setInputType] = useState(() => { // eslint-disable-line
-    return type == 'password' ? 'password' : (type == 'textarea' ? type : 'text')
+    return type == 'password' ? 'password' : (type == 'textarea' ? 'textarea' : 'text')
   })
-
-  if (!name) throw new Error('Input component requires a `name` prop')
   
-  // Input is always controlled if state is passed in
-  if (props.value) {
-    var value = props.value
-  } else if (typeof state == 'object') {
-    value = util.deepFind(state, name)
-    if (typeof value == 'undefined') value = ''
-  }
+  // Value: Input is always controlled if state is passed in
+  if (props.value) value = props.value as string
+  else if (typeof state == 'object') value = util.deepFind(state, props.name) ?? ''
 
-  // Find any errors that match this input path
+  // Errors: find any that match this input path
   for (const item of (state?.errors || [])) {
-    if (util.isRegex(name) && (item.title||'').match(name)) var error = item
-    else if (item.title == name) error = item
+    if (util.isRegex(props.name) && (item.title || '').match(props.name)) error = item
+    else if (item.title == props.name) error = item
   }
 
-  // Special input types
+  // Icon
   if (type == 'password') {
-    onClick = () => setInputType(o => o == 'password' ? 'text' : 'password')
-    IconSvg = inputType == 'password' ? <EyeSlashIcon /> : <EyeIcon />
-  } else if (type == 'email') { 
-    IconSvg = <EnvelopeIcon />
-  // } else if (type == 'date') { 
-  //   IconSvg = <CalendarIcon />
-  //   InputEl = InputDate
-  } else if (type == 'filter') { 
-    IconSvg = <FunnelIcon />
-  } else if (type == 'search') { 
-    IconSvg = <MagnifyingGlassIcon />
+    Icon = <IconWrapper 
+      iconPos={iconPos} 
+      icon={icon || inputType == 'password' ? <EyeSlashIcon /> : <EyeIcon />} 
+      onClick={() => setInputType(o => o == 'password' ? 'text' : 'password')}
+      className="pointer-events-auto"
+    />
+  } else if (type == 'email') {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <EnvelopeIcon />} />
+  } else if (type == 'filter') {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <FunnelIcon />} className="size-3"  />
+  } else if (type == 'search') {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <MagnifyingGlassIcon />} className="size-4" />
   } else if (type == 'color') {
-    iconDir = 'left'
-    IconSvg = <ColorIcon hex={value}/>
-    InputEl = InputColor
-  } else if (type == 'textarea') {
-    InputEl = 'textarea'
-  } else if (type == 'currency') {
-    if (!props.config) throw new Error('Input: `config` is required when type=currency')
-    InputEl = InputCurrency
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <ColorSvg hex={value}/>} className="size-[17px]" />
+  } else if (type == 'date') {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <CalendarIcon />} className="size-4" />
+  } else {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon} />
   }
 
-  // Icon
-  const iconEl = <IconEl iconDir={iconDir} IconSvg={IconSvg} onClick={onClick} type={type} />
+  // Classname
+  const inputClassName = getInputClasses({ error, Icon, iconPos, type })
+  const commonProps = { id: props.name || props.id, value: value, className: inputClassName }
 
-  // Create base props object
-  const inputProps = {
-    ...props,
-    // autoComplete: props.autoComplete || 'off',
-    id: id || name,
-    type: inputType,
-    value: value,
-    iconEl: iconEl,
-    className: 
-      'col-start-1 row-start-1 block w-full rounded-md bg-white py-2 text-sm outline outline-1 -outline-offset-1 ' +
-      'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 sm:text-sm/6 ' +
-      (iconDir == 'right' && IconSvg ? 'sm:pr-9 pl-3 pr-10 ' : IconSvg ? 'sm:pl-9 pl-10 pr-3 ' : 'px-3 ') +
-      (error ? 'text-red-900 outline-danger focus:outline-danger ' : 'text-input outline-input-border focus:outline-primary ') + 
-      (iconDir == 'right' ? 'justify-self-start ' : 'justify-self-end '),
+  // Type has to be referenced as props.type for TS to be happy
+  if (!type || type == 'text' || type == 'password' || type == 'email' || type == 'filter' || type == 'search') {
+    return (
+      <FieldContainer error={error} className={props.className}>
+        {Icon}<input {...props} {...commonProps} type={inputType} />
+      </FieldContainer>
+    )
+  } else if (type == 'textarea') {
+    return (
+      <FieldContainer error={error} className={props.className}>
+        {Icon}<textarea {...props} {...commonProps} />
+      </FieldContainer>
+    )
+  } else if (type == 'currency') {
+    return (
+      <FieldContainer error={error} className={props.className}>
+        {Icon}<FieldCurrency {...props} {...commonProps} />
+      </FieldContainer>
+    )
+  } else if (type == 'color') {
+    return (
+      <FieldContainer error={error} className={props.className}>
+        <FieldColor {...props} {...commonProps} Icon={Icon} />
+      </FieldContainer>
+    )
+  } else if (type == 'date') { 
+    return (
+      <FieldContainer error={error} className={props.className}>
+        <FieldDate {...props} {...commonProps} Icon={Icon} />
+      </FieldContainer>
+    )
   }
+}
 
-  // Only add iconEl prop for custom components
-  if (!['color', 'date'].includes(type)) delete inputProps.iconEl
-
+function FieldContainer({ children, className, error }: { children: React.ReactNode, className?: string, error?: Error }) {
   return (
-    // https://tailwindui.com/components/application-ui/forms/input-groups#component-474bd025b849b44eb3c46df09a496b7a
-    <div css={style} className={`mt-input-before mb-input-after grid grid-cols-1 ${props?.className || ''}`}>
-      { !inputProps.iconEl && iconEl }
-      <InputEl {...inputProps} />
+    <div css={style} className={`mt-input-before mb-input-after grid grid-cols-1 ${className || ''}`}>
+      {children}
       {error && <div class="mt-1.5 text-xs text-danger">{error.detail}</div>}
     </div>
   )
 }
 
-type IconElProps = {
-  iconDir: string
-  IconSvg: React.ReactNode
-  onClick: () => void
-  type: string
+function getInputClasses({ error, Icon, iconPos, type }: { error: Error, Icon?: React.ReactNode, iconPos: string, type?: string }) {
+  const paddingLeft = type == 'color' ? 'sm:pl-9 pl-9' : 'sm:pl-8 pl-8'
+  const paddingRight = type == 'color' ? 'sm:pr-9 pr-9' : 'sm:pr-8 pr-8'
+  return (
+    'col-start-1 row-start-1 block w-full rounded-md bg-white py-2 text-sm leading-[1.65] outline outline-1 -outline-offset-1 ' +
+    'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 ' +
+    (iconPos == 'right' && Icon ? `${paddingRight} pl-3 ` : (Icon ? `${paddingLeft} pr-3 ` : 'px-3 ')) +
+    (error ? 'text-red-900 outline-danger focus:outline-danger ' : 'text-input outline-input-border focus:outline-primary ') + 
+    (iconPos == 'right' ? 'justify-self-start ' : 'justify-self-end ')
+  )
 }
 
-function IconEl({ iconDir, IconSvg, onClick, type }: IconElProps) {
-  const iconSize = type == 'color' ? 'size-[18px]' : 'size-4'
+function IconWrapper({ icon, iconPos, ...props }: IconWrapperProps) {
   return (
-    !!IconSvg && 
-    <div 
-      className={`col-start-1 row-start-1 ${iconSize} self-center text-[#c6c8ce] select-none relative z-[1] ` +
-        `pointer-events-${type == 'password' ? 'auto' : 'none'} ` +
-        (iconDir == 'right' ? 'justify-self-end mr-3' : 'justify-self-start ml-3')
-      }
-      onClick={onClick}
-    >{IconSvg}</div>
+    !!icon && 
+    <div
+      {...props}
+      className={twMerge(
+        'relative size-[14px] col-start-1 row-start-1 self-center text-[#c6c8ce] select-none z-[1] ' +
+        (iconPos == 'right' ? 'justify-self-end mr-3 ' : 'justify-self-start ml-3 ') + 
+        props.className || ''
+      )}
+    >{icon}</div>
   )
 }
 
-function ColorIcon({ hex }: { hex: string }) {
+function ColorSvg({ hex }: { hex?: string }) {
   return (
     <span class="block size-full rounded-md" style={{ backgroundColor: hex ? hex : '#f1f1f1' }}></span>
   )

package/components/partials/form/select.tsx

@@ -2,7 +2,7 @@ import { css } from 'twin.macro'
 import { twMerge } from 'tailwind-merge'
 import ReactSelect, { components, ControlProps, createFilter, OptionProps, SingleValueProps } from 'react-select'
 import { ClearIndicatorProps, DropdownIndicatorProps, MultiValueRemoveProps } from 'react-select'
-import { ChevronDownIcon, CheckCircleIcon, XMarkIcon } from '@heroicons/react/20/solid'
+import { ChevronUpDownIcon, CheckCircleIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import { util } from 'nitro-web'
 import { Errors } from 'types'
 
@@ -203,7 +203,7 @@ function Option(props: OptionProps) {
 const DropdownIndicator = (props: DropdownIndicatorProps) => {
   return (
     <components.DropdownIndicator {...props}>
-      <ChevronDownIcon className="size-6 -my-0.5 -mx-1" />
+      <ChevronUpDownIcon className="text-gray-400 size-[17px] -my-0.5 -mx-0.5" />
     </components.DropdownIndicator>
   )
 }
@@ -237,7 +237,7 @@ const selectStyles = {
   // Based off https://www.jussivirtanen.fi/writing/styling-react-select-with-tailwind
   // Input container
   control: {
-    base: 'rounded-md bg-white hover:cursor-pointer text-sm sm:text-sm/6 outline outline-1 -outline-offset-1 outline-input-border',
+    base: 'rounded-md bg-white hover:cursor-pointer text-sm leading-[1.65] outline outline-1 -outline-offset-1 outline-input-border',
     focus: 'outline-2 -outline-offset-2 outline-primary',
     error: 'outline-danger',
   },
@@ -249,7 +249,7 @@ const selectStyles = {
   },
   multiValue: 'bg-primary text-white rounded items-center pl-2 pr-1.5 gap-1.5',
   multiValueLabel: '',
-  multiValueRemove: 'border border-primary-dark bg-white rounded-md text-dark hover:bg-red-50',
+  multiValueRemove: 'border border-black/10 bg-clip-content bg-white rounded-md text-dark hover:bg-red-50',
   placeholder: 'text-input-placeholder',
   singleValue: {
     base: 'text-input',