nitro-web 0.0.85 → 0.0.87

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

@@ -1,252 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { format, isValid, parse } from 'date-fns'
-import { getPrefixWidth } from 'nitro-web/util'
-import { Calendar, Dropdown } from 'nitro-web'
-import { dayButtonClassName } from '../element/calendar'
-
-type Mode = 'single' | 'multiple' | 'range'
-type DropdownRef = {
-  setIsActive: (value: boolean) => void
-}
-
-type PreFieldDateProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
-  /** field name or path on state (used to match errors), e.g. 'date', 'company.email' **/
-  name: string
-  /** mode of the date picker */
-  mode: Mode
-  /** name is used as the id if not provided */
-  id?: string
-  /** show the time picker */
-  showTime?: boolean
-  /** prefix to add to the input */
-  prefix?: string
-  /** number of months to show in the dropdown */
-  numberOfMonths?: number
-  /** icon to show in the input */
-  Icon?: React.ReactNode
-  /** direction of the dropdown */
-  dir?: 'bottom-left'|'bottom-right'|'top-left'|'top-right'
-}
-
-// An array is returned for mode = 'multiple' or 'range'
-export type FieldDateProps = (
-  | ({ mode: 'single' } & PreFieldDateProps & {
-      onChange?: (e: { target: { name: string, value: null|number } }) => void
-      value?: null|number|string
-    })
-  | ({ mode: 'multiple' | 'range' } & PreFieldDateProps & { 
-      onChange?: (e: { target: { name: string, value: (null|number)[] } }) => void 
-      value?: null|number|string|(null|number|string)[]
-    })
-)
-
-type TimePickerProps = {
-  date: Date|null
-  onChange: (mode: Mode, value: number|null) => void
-}
-
-export function FieldDate({
-  dir = 'bottom-left',
-  Icon,
-  mode,
-  numberOfMonths,
-  onChange: onChangeProp,
-  prefix = '',
-  showTime,
-  value: valueProp,
-  ...props
-}: FieldDateProps) {
-  const localePattern = `d MMM yyyy${showTime && mode == 'single' ? ' hh:mmaa' : ''}`
-  const [prefixWidth, setPrefixWidth] = useState(0)
-  const dropdownRef = useRef<DropdownRef>(null)
-  const [month, setMonth] = useState<number|undefined>()
-  const [lastUpdated, setLastUpdated] = useState(0)
-  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<typeof valueProp>(valueProp)
-  const value = valueProp ?? internalValue
-  const onChange = onChangeProp ?? ((e: { target: { name: string, value: any } }) => setInternalValue(e.target.value))
-    
-  // Convert the value to an array of valid* dates
-  const dates = useMemo(() => {
-    const arrOfNumbers = typeof value === 'string' 
-      ? value.split(/\s*,\s*/g).map(o => parseFloat(o)) 
-      : Array.isArray(value) ? value : [value]
-    const out = arrOfNumbers.map(date => isValid(date) ? new Date(date as number) : null) /// changed to null
-    return out
-  }, [value])
-
-  // Hold the input value in state
-  const [inputValue, setInputValue] = useState(() => getInputValue(dates))
-
-  // Update the date's inputValue (text) when the value changes outside of the component
-  useEffect(() => {
-    if (new Date().getTime() > lastUpdated + 100) setInputValue(getInputValue(dates))
-  }, [dates])
-
-  // Get the prefix content width
-  useEffect(() => {
-    setPrefixWidth(getPrefixWidth(prefix, 4))
-  }, [prefix])
-
-  function onCalendarChange(mode: Mode, value: null|number|(null|number)[]) {
-    if (mode == 'single' && !showTime) dropdownRef.current?.setIsActive(false) // Close the dropdown
-    setInputValue(getInputValue(value))
-    // Update the value
-    onChange({ target: { name: props.name, value: getOutputValue(value) } })
-    setLastUpdated(new Date().getTime())
-  }
-
-  function onInputChange(e: React.ChangeEvent<HTMLInputElement>) {
-    setInputValue(e.target.value) // keep the input value in sync
-
-    let split = e.target.value.split(/-|,/).map(o => {
-      const date = parse(o.trim(), localePattern, new Date())
-      return isValid(date) ? date : null
-    })
-    
-    // For single/range we need limit the array
-    if (mode == 'range' && split.length > 1) split.length = 2
-    else if (mode == 'multiple') split = split.filter(o => o) // remove invalid dates
-
-    // Swap dates if needed
-    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] as Date).getTime())
-      break
-    }
-    
-    // Update the value
-    const value = mode == 'single' ? split[0]?.getTime() ?? null : split.map(d => d?.getTime() ?? null)
-    onChange({ target: { name: props.name, value: getOutputValue(value) }})
-    setLastUpdated(new Date().getTime())
-  } 
-
-  function getInputValue(value: Date|number|null|(Date|number|null)[]) {
-    const _dates = Array.isArray(value) ? value : [value]
-    return _dates.map(o => o ? format(o, localePattern) : '').join(mode == 'range' ? ' - ' : ', ')
-  }
-
-  function getOutputValue(value: Date|number|null|(Date|number|null)[]): any {
-    // console.log(value)
-    return value
-  }
-
-  return (
-    <Dropdown
-      ref={dropdownRef}
-      menuToggles={false}
-      // animate={false}
-      // menuIsOpen={true}
-      minWidth={0}
-      menuContent={
-        <div className="flex">
-          <Calendar 
-            // Calendar actually accepts an array of dates, but the type is not typed correctly
-            {...{ mode: mode, value: dates as any, numberOfMonths: numberOfMonths, month: month }} 
-            preserveTime={!!showTime} 
-            onChange={onCalendarChange} 
-            className="pt-1 pb-2  px-3" 
-          />
-          {!!showTime && mode == 'single' && <TimePicker date={dates?.[0]} onChange={onCalendarChange} />}
-        </div>
-      }
-      dir={dir}
-    > 
-      <div className="grid grid-cols-1">
-        {Icon}
-        {
-          prefix && 
-          // Similar classNames to the input.tsx:IconWrapper()
-          <span className="z-[0] col-start-1 row-start-1 self-center select-none justify-self-start text-input-base ml-[12px] ml-input-x">
-            {prefix}
-          </span>
-        }
-        <input 
-          {...props}
-          key={'k' + prefixWidth}
-          id={id}
-          autoComplete="off" 
-          className={(props.className||'')}// + props.className?.includes('is-invalid') ? ' is-invalid' : ''} 
-          onBlur={() => setInputValue(getInputValue(dates))}
-          onChange={onInputChange}
-          style={{ textIndent: prefixWidth + 'px' }}
-          type="text"
-          value={inputValue}
-        />
-      </div>
-    </Dropdown>
-  )
-}
-
-function TimePicker({ date, onChange }: TimePickerProps) {
-  const lists = [
-    [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], // hours
-    [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55], // minutes
-    ['AM', 'PM'], // AM/PM
-  ]
-  
-  // Get current values from date or use defaults
-  const hour = date ? parseInt(format(date, 'h')) : undefined
-  const minute = date ? parseInt(format(date, 'm')) : undefined
-  const period = date ? format(date, 'a') : undefined
-  
-  const handleTimeChange = (type: 'hour' | 'minute' | 'period', value: string | number) => {
-    // Create a new date object from the current date or current time
-    const newDate = new Date(date || new Date())
-    
-    if (type === 'hour') {
-      // Parse the time with the new hour value
-      const timeString = `${value}:${format(newDate, 'mm')} ${format(newDate, 'a')}`
-      const updatedDate = parse(timeString, 'h:mm a', newDate)
-      newDate.setHours(updatedDate.getHours(), updatedDate.getMinutes())
-    } else if (type === 'minute') {
-      // Parse the time with the new minute value
-      const timeString = `${format(newDate, 'h')}:${value} ${format(newDate, 'a')}`
-      const updatedDate = parse(timeString, 'h:mm a', newDate)
-      newDate.setMinutes(updatedDate.getMinutes())
-    } else if (type === 'period') {
-      // Parse the time with the new period value
-      const timeString = `${format(newDate, 'h')}:${format(newDate, 'mm')} ${value}`
-      const updatedDate = parse(timeString, 'h:mm a', newDate)
-      newDate.setHours(updatedDate.getHours())
-    }
-    
-    onChange('single', newDate.getTime())
-  }
-
-  return (
-    lists.map((list, i) => {
-      const type = i === 0 ? 'hour' : i === 1 ? 'minute' : 'period'
-      const currentValue = i === 0 ? hour : i === 1 ? minute : period
-
-      return (
-        <div key={i} className="w-[60px] py-1 relative overflow-hidden hover:overflow-y-auto border-l border-gray-100">
-          <div className="w-[60px] absolute flex flex-col items-center">
-            {list.map(item => (
-              <div 
-                className="py-1 flex group cursor-pointer"
-                key={item}
-                onClick={() => handleTimeChange(type, item)}
-              >
-                <button 
-                  key={item}
-                  className={
-                    `${dayButtonClassName} rounded-full flex justify-center items-center group-hover:bg-gray-100 `
-                    + (item === currentValue ? '!bg-input-border-focus text-white' : '')
-                  }
-                  onClick={() => handleTimeChange(type, item)}
-                >
-                  {item.toString().padStart(2, '0').toLowerCase()}
-                </button>
-              </div>
-            ))}
-          </div>
-        </div>
-      )
-    })
-  )
-}

package/components/partials/form/field.tsx

@@ -1,231 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// fill-current tw class for lucide icons (https://github.com/lucide-icons/lucide/discussions/458)
-import { css } from 'twin.macro'
-import { FieldCurrency, FieldCurrencyProps, FieldColor, FieldColorProps, FieldDate, FieldDateProps } from 'nitro-web'
-import { twMerge, getErrorFromState, deepFind } from 'nitro-web/util'
-import { Errors, type Error } from 'nitro-web/types'
-import { MailIcon, CalendarIcon, FunnelIcon, SearchIcon, EyeIcon, EyeOffIcon } from 'lucide-react'
-import { memo } from 'react'
-
-type FieldType = 'text' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color'
-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
-  /** name is applied if id is not provided */
-  id?: string
-  /** state object to get the value, and check errors against */
-  state?: { errors?: Errors, [key: string]: any }
-  /** type of the field */
-  type?: FieldType
-  /** icon to show in the input */
-  icon?: React.ReactNode
-  iconPos?: 'left' | 'right'
-  /** Dependencies to break the implicit memoization of onChange/onInputChange */
-  deps?: unknown[]
-  placeholder?: string
-  /** title used to find related error messages */
-  errorTitle?: string|RegExp
-}
-type IconWrapperProps = {
-  iconPos: 'left' | 'right'
-  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)
-)
-type IsFieldCachedProps = {
-  name: string
-  state?: FieldProps['state']
-  deps?: FieldProps['deps']
-  errorTitle?: FieldProps['errorTitle']
-}
-
-export const Field = memo(FieldBase, (prev, next) => {
-  return isFieldCached(prev, next)
-})
-
-function FieldBase({ state, icon, iconPos: ip, errorTitle, ...props }: FieldProps) {
-  // `type` must be kept as props.type for TS to be happy and follow the conditions below
-  let value!: string
-  let Icon!: React.ReactNode
-  const error = getErrorFromState(state, errorTitle || props.name)
-  const type = props.type
-  const iconPos = ip == 'left' || (type == 'color' && !ip) ? 'left' : 'right'
-  const id = props.id || props.name
-
-  if (!props.name) {
-    throw new Error('Field component requires a `name` prop')
-  }
-  
-  // Input type
-  const [inputType, setInputType] = useState(() => { // eslint-disable-line
-    return type == 'password' ? 'password' : (type == 'textarea' ? 'textarea' : 'text')
-  })
-  
-  // Value: Input is always controlled if state is passed in
-  if (typeof props.value !== 'undefined') value = props.value as string
-  else if (typeof state == 'object') {
-    const v = deepFind(state, props.name) as string | undefined
-    value = v ?? ''
-  }
-
-  // Icon
-  if (type == 'password') {
-    Icon = <IconWrapper 
-      iconPos={iconPos} 
-      icon={icon || inputType == 'password' ? <EyeOffIcon /> : <EyeIcon />} 
-      onClick={() => setInputType(o => o == 'password' ? 'text' : 'password')}
-      className="size-[15px] size-input-icon pointer-events-auto"
-    />
-  } else if (type == 'email') {
-    Icon = <IconWrapper iconPos={iconPos} icon={icon || <MailIcon />} className="size-[14px] size-input-icon" />
-  } else if (type == 'filter') {
-    Icon = <IconWrapper iconPos={iconPos} icon={icon || <FunnelIcon />} className="size-[14px] size-input-icon" />
-  } else if (type == 'search') {
-    Icon = <IconWrapper iconPos={iconPos} icon={icon || <SearchIcon />} className="size-[14px] size-input-icon" />
-  } else if (type == 'color') {
-    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-[14px] size-input-icon" />
-  } else if (icon) {
-    Icon = <IconWrapper iconPos={iconPos} icon={icon} className="size-[14px] size-input-icon" />
-  }
-
-  // Classname
-  const inputClassName = getInputClasses({ error, Icon, iconPos, type })
-  const commonProps = { id: id, value: value, className: inputClassName }
-
-  // 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>
-    )
-  }
-}
-
-function FieldContainer({ children, className, error }: { children: React.ReactNode, className?: string, error?: Error }) {
-  return (
-    <div css={style} className={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after grid grid-cols-1 nitro-field ${className || ''}`)}>
-      {children}
-      {error && <div class="mt-1.5 text-xs text-danger-foreground nitro-error">{error.detail}</div>}
-    </div>
-  )
-}
-
-function getInputClasses({ error, Icon, iconPos, type }: { error?: Error, Icon?: React.ReactNode, iconPos: string, type?: string }) {
-  // not twMerge
-  const px = 'px-[12px]'
-  const py = 'py-[9px] py-input-y'
-  return (
-    'block col-start-1 row-start-1 w-full rounded-md bg-white text-input-base outline outline-1 -outline-offset-1 ' +
-    'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 ' + `${py} ${px} ` +
-    (iconPos == 'right' && Icon ? 'pr-[32px] pr-input-x-icon pl-input-x ' : '') +
-    (iconPos == 'left' && Icon ? 'pl-[32px] pl-input-x-icon pr-input-x ' : 'px-input-x ') +
-    (iconPos == 'left' && Icon && type == 'color' ? 'indent-[5px] ' : '') +
-    (error 
-      ? 'text-danger-foreground outline-danger focus:outline-danger ' 
-      : 'text-input outline-input-border focus:outline-input-border-focus ') + 
-    (iconPos == 'right' ? 'justify-self-start ' : 'justify-self-end ') + 
-    'nitro-input'
-  )
-}
-
-function IconWrapper({ icon, iconPos, ...props }: IconWrapperProps) {
-  return (
-    !!icon && 
-    <div
-      {...props}
-      className={
-        'z-[0] col-start-1 row-start-1 self-center text-[#c6c8ce] text-input-icon select-none [&>svg]:size-full ' +
-        (iconPos == 'right' ? 'justify-self-end mr-[12px] mr-input-x ' : 'justify-self-start ml-[12px] ml-input-x ') + 
-        props.className || ''
-      }
-    >{icon}</div>
-  )
-}
-
-function ColorSvg({ hex }: { hex?: string }) {
-  return (
-    <span class="block size-full rounded-md" style={{ backgroundColor: hex ? hex : '#f1f1f1' }}></span>
-  )
-}
-
-export function isFieldCached(prev: IsFieldCachedProps, next: IsFieldCachedProps) {
-  // Check if the field is cached, onChange/onInputChange doesn't affect the cache
-  const path = prev.name
-  const prevState = prev.state || {}
-  const nextState = next.state || {}
-  const errorTitle = next.errorTitle || path
-
-  // Check if any prop has changed, except `onChange`/`onInputChange`
-  const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)])
-  for (const k of allKeys) {
-    if (k === 'state' || k === 'onChange' || k === 'onInputChange') continue
-    if (prev[k as keyof typeof prev] !== next[k as keyof typeof next]) {
-      // console.log(4, 'changed', path, k)
-      return false
-    }
-  }
-
-  // If `deps` have changed, handy for onChange/onInputChange, re-render!
-  if ((next.deps?.length !== prev.deps?.length) || next.deps?.some((v, i) => v !== prev.deps?.[i])) return false
-
-  // If the state value has changed, re-render!
-  if (deepFind(prevState, path) !== deepFind(nextState, path)) return false
-  
-  // If the state error has changed, re-render!
-  if (getErrorFromState(prevState, errorTitle) !== getErrorFromState(nextState, errorTitle)) return false
-
-  // All good, use cached version
-  return true
-}
-
-const style = css`
-  input {
-    appearance: textfield;
-    -moz-appearance: textfield;
-  }
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  /* tw4 we can use calc to determine the padding-left with css variables...
-  .inputt {
-    padding-left: calc(var(--input-x) * 2);
-  } */
-`

package/components/partials/form/form-error.tsx

@@ -1,27 +0,0 @@
-import { Errors } from 'nitro-web/types'
-
-type FormError = {
-  state: { errors?: Errors },
-  // display all errors except these field titles, e.g. ['name', 'address']
-  fields?: Array<string>,
-  className?: string,
-}
-
-export function FormError({ state, fields, className }: FormError) {
-  // A catch all error element that should be placed next to the submit button
-  let error: { title: string, detail: string } | undefined
-  for (const item of state.errors || []) {
-    if (!item.title || item.title.match(/^(error|invalid)$/i) || (fields && !fields.includes(item.title))) {
-      error = item
-    }
-  }
-  return (
-    <>
-      {error ? (
-        <div class={`text-danger-foreground mt-1 text-sm nitro-error ${className||''}`}>
-          {error.detail}
-        </div>
-      ) : null}
-    </>
-  )
-}