nitro-web 0.2.12 → 0.2.14

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

@@ -22,8 +22,14 @@ export type FieldCurrencyProps = Omit<NumericFormatProps, 'onChange' | 'value' |
   name: string
   /** name is applied if id is not provided */
   id?: string
-  /** currency iso, e.g. 'nzd' */
-  currency: string
+  /** render as a percent field: no currency symbol, '%' suffix */
+  percent?: boolean
+  /** minimum decimal places to show (percent only; defaults to 0) */
+  minDecimals?: number
+  /** maximum decimal places to show (percent only; defaults to 2) */
+  maxDecimals?: number
+  /** currency iso, e.g. 'nzd' (defaults to 'nzd'; ignored when percent) */
+  currency?: string
   /** override the default currencies array used to lookup currency symbol and digits, e.g. {nzd: { symbol: '$', digits: 2 }} */
   currencies?: Currencies, 
   /** override the default CLDR country currency format, e.g. '¤#,##0.00' */
@@ -34,10 +40,14 @@ export type FieldCurrencyProps = Omit<NumericFormatProps, 'onChange' | 'value' |
   defaultValue?: Cents // defined to just fix typescript error
 }
 
-export function FieldCurrency({ currency='nzd', currencies, format, onChange: onChangeProp, ...props }: FieldCurrencyProps) {
+export function FieldCurrency({
+  currency='nzd', currencies, format, percent, minDecimals, maxDecimals, onChange: onChangeProp, ...props
+}: FieldCurrencyProps) {
   const [dontFix, setDontFix] = useState(false)
   const [lastBlurred, setLastBlurred] = useState(0)
-  const [settings, setSettings] = useState(() => getCurrencySettings(currency, currencies, format, props.name))
+  const [settings, setSettings] = useState(() => (
+    getCurrencySettings(currency, currencies, format, props.name, percent, minDecimals, maxDecimals)
+  ))
   const [prefixWidth, setPrefixWidth] = useState(0)
   const [inputPaddingLeft, setInputPaddingLeft] = useState(12)
   const ref = useRef({ dontFix }) // was null
@@ -64,30 +74,36 @@ export function FieldCurrency({ currency='nzd', currencies, format, onChange: on
 
   // Update the settings if the setting parameters change
   useEffect(() => {
-    const _settings = getCurrencySettings(currency, currencies, format, props.name)
+    const _settings = getCurrencySettings(currency, currencies, format, props.name, percent, minDecimals, maxDecimals)
     if (settings.key !== _settings.key) setSettings(_settings)
-  }, [currency, currencies, format])
+  }, [currency, currencies, format, percent, minDecimals, maxDecimals])
 
   // Get the prefix content width
   useEffect(() => {
     setPrefixWidth(settings.prefix ? getPrefixWidth(settings.prefix, 1) : 0)
   }, [settings.prefix])
 
-  function to(type: 'dollars' | 'cents', value?: Cents, settings?: { maxDecimals?: number }) {
+  function to(type: 'dollars' | 'cents', value?: Cents, settings?: { maxDecimals?: number, minDecimals?: number }) {
     const maxDecimals = settings?.maxDecimals
+    const minDecimals = Math.min(settings?.minDecimals ?? 0, maxDecimals ?? 0)
     const parsed = parseFloat(value + '')
     if (!parsed && parsed !== 0) return null
     if (!maxDecimals) return parsed
 
-    const value2 = type === 'dollars' 
-      ? parsed / Math.pow(10, maxDecimals) 
+    const value2 = type === 'dollars'
+      ? parsed / Math.pow(10, maxDecimals)
       : parsed * Math.pow(10, maxDecimals) // e.g. 1.23 => 123
 
     // dont fix when the user is typing.
     if (type === 'dollars' && ref.current.dontFix) { setDontFix(false) }
 
-    // console.log('to', type, value, value2)
-    return type === 'cents' || ref.current.dontFix ? value2 : value2.toFixed(maxDecimals)
+    if (type === 'cents' || ref.current.dontFix || !minDecimals) return value2
+
+    // pad to maxDecimals then trim trailing zeros back down to (at least) minDecimals
+    const [whole, decimals=''] = value2.toFixed(maxDecimals).split('.')
+    let trimmed = decimals
+    while (trimmed.length > minDecimals && trimmed.endsWith('0')) trimmed = trimmed.slice(0, -1)
+    return trimmed ? `${whole}.${trimmed}` : whole
   }
 
   function onChange(source: 'event' | 'prop', floatValue?: number) {
@@ -96,6 +112,10 @@ export function FieldCurrency({ currency='nzd', currencies, format, onChange: on
     else setInternalValue(to('cents', floatValue, settings))
   }
 
+  useEffect(() => {
+    console.log('settings', settings)
+  }, [settings])
+
   return (
     <div className="relative">
       <NumericFormat
@@ -110,6 +130,7 @@ export function FieldCurrency({ currency='nzd', currencies, format, onChange: on
         onBlur={() => { setLastBlurred(Date.now())}}
         placeholder={props.placeholder || '0.00'}
         value={inputValue}
+        suffix={settings.suffix}
         style={{ textIndent: `${prefixWidth}px` }}
         type="text"
       />
@@ -117,15 +138,28 @@ export function FieldCurrency({ currency='nzd', currencies, format, onChange: on
         class={`absolute top-0 bottom-0 inline-flex items-center select-none text-gray-500 text-input-base ${inputValue !== null && settings.prefix == '$' ? 'text-foreground' : ''}`}
         style={{ left: `${inputPaddingLeft}px` }}
       >
-        {settings.prefix || settings.suffix}
+        {settings.prefix}
       </span>
     </div>
   )
 }
 
-function getCurrencySettings(currency: string, currencies?: Currencies, format?: string, name?: string) {
+function getCurrencySettings(
+  currency: string, currencies?: Currencies, format?: string, name?: string, percent?: boolean,
+  minDecimals?: number, maxDecimals?: number
+) {
+  // percent reuses the currency machinery but with a '%' suffix and no currency lookup
+  if (percent) {
+    const _minDecimals = minDecimals ?? 0
+    const _maxDecimals = maxDecimals ?? 2
+    return {
+      key: `percent:${_minDecimals}:${_maxDecimals}`, currency: currency, decimalSeparator: '.', thousandSeparator: ',',
+      minDecimals: _minDecimals, maxDecimals: _maxDecimals, prefix: undefined, suffix: '%',
+    }
+  }
+
   // parse CLDR currency string format, e.g. '¤#,##0.00'
-  const output: { 
+  const output: {
     key?: string               
     currency: string,           // e.g. 'nzd'
     decimalSeparator?: string,  // e.g. '.'

package/components/partials/form/field.tsx

@@ -9,7 +9,8 @@ import { Errors, type Error } from 'nitro-web/types'
 import { MailIcon, CalendarIcon, FunnelIcon, SearchIcon, EyeIcon, EyeOffIcon, ClockIcon, PaperclipIcon } from 'lucide-react'
 import { memo, useState } from 'react'
 
-type FieldType = 'text' | 'number' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color' | 'file'
+type FieldType = 'text' | 'number' | 'password' | 'email' | 'filter' | 'search' | 'textarea' 
+  | 'currency' | 'percent' | 'date' | 'color' | 'file'
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 type FieldExtraProps = {
@@ -42,6 +43,7 @@ export type FieldProps = (
   | ({ type?: 'text' | 'number' | 'password' | 'email' | 'filter' | 'search' } & InputProps & FieldExtraProps)
   | ({ type: 'textarea' } & TextareaProps & FieldExtraProps)
   | ({ type: 'currency' } & FieldCurrencyProps & FieldExtraProps)
+  | ({ type: 'percent' } & Omit<FieldCurrencyProps, 'currency'> & FieldExtraProps)
   | ({ type: 'color' } & FieldColorProps & FieldExtraProps)
   | ({ type: 'date' } & FieldDateProps & FieldExtraProps)
   | ({ type: 'file' } & InputProps & FieldExtraProps)
@@ -140,7 +142,13 @@ function FieldBase({ state, icon, iconPos: ip, errorTitle, inputClassName, ...pr
         {Icon}<FieldCurrency {...props} {...commonProps} />
       </FieldContainer>
     )
-  } else if (type == 'date') { 
+  } else if (type == 'percent') {
+    return (
+      <FieldContainer error={error} className={props.className}>
+        {Icon}<FieldCurrency {...props} {...commonProps} percent />
+      </FieldContainer>
+    )
+  } else if (type == 'date') {
     return (
       <FieldContainer error={error} className={props.className}>
         <FieldDate {...props} {...commonProps} Icon={Icon} />

package/components/partials/form/select.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { css } from 'twin.macro'
-import { memo, useMemo, Fragment } from 'react'
+import { memo, useMemo, useState, Fragment, FocusEvent } from 'react'
 import ReactSelect, { 
   components, ControlProps, createFilter, OptionProps, SingleValueProps, ClearIndicatorProps,
   DropdownIndicatorProps, MultiValueRemoveProps, // ClassNamesConfig,
   ValueContainerProps,
   MenuProps,
+  InputProps,
 } from 'react-select'
 import { CheckCircleIcon } from '@heroicons/react/20/solid'
 import { ChevronsUpDownIcon, SearchIcon, XIcon } from 'lucide-react'
@@ -59,7 +60,7 @@ export type SelectProps<IsMulti extends boolean = false> = {
   /** The state object to get the value and check errors from **/
   state?: { errors?: Errors, [key: string]: any } // was unknown|unknown[]
   /** Select variations **/
-  mode?: string
+  mode?: 'combobox'
   /** Pass dependencies to break memoization, handy for onChange/onInputChange **/
   deps?: unknown[]
   /** title used to find related error messages */
@@ -68,6 +69,12 @@ export type SelectProps<IsMulti extends boolean = false> = {
   classNames?: ClassNames
   /** Show a search icon instead of the dropdown arrow **/
   showSearchIcon?: boolean
+  /** Combobox only: min input length before the menu opens (0 = disabled) **/
+  minLenForSearch?: number
+  /** Combobox only: hide the menu when nothing matches instead of showing "No options" (default true) **/
+  hideEmptyMenu?: boolean
+  /** Hide the right dropdown icon + its padding (text-field look) **/
+  hideDropdownIcon?: boolean
   /** All other props are passed to react-select **/
   [key: string]: unknown
 }
@@ -77,18 +84,24 @@ export const Select = memo(SelectBase, (prev, next) => {
 }) as <IsMulti extends boolean = false>(props: SelectProps<IsMulti>) => React.ReactElement | null
 
 function SelectBase<IsMulti extends boolean = false>({
-  id, containerId, minMenuWidth, name, prefix='', onChange, options, state, mode='', errorTitle, classNames: classNamesProp, 
-  showSearchIcon, className,
+  id, containerId, minMenuWidth, name, prefix='', onChange, options, state, mode, errorTitle, classNames: classNamesProp,
+  showSearchIcon, className, minLenForSearch = 0, hideEmptyMenu = true, hideDropdownIcon,
   ...props
 }: SelectProps<IsMulti>) {
   let value: unknown|unknown[]
   const error = getErrorFromState(state, errorTitle || name)
   if (!name) throw new Error('Select component requires a `name` and `options` prop')
 
+  // Combobox: free text with a suggestions dropdown, the typed text is the value (full-width text-input feel)
+  const isCombobox = mode === 'combobox'
+
   // Get value from value or state
   if (typeof props.value !== 'undefined') value = props.value
   else if (typeof state == 'object') value = deepFind(state, name)
 
+  // Raw (unconverted) value, used as the combobox input text
+  const rawValue = value
+
   // If multi-select, filter options by value
   if (Array.isArray(value)) value = options.filter(o => (value as unknown[]).includes(o.value))
   else value = options.find(o => value === o.value)
@@ -97,9 +110,28 @@ function SelectBase<IsMulti extends boolean = false>({
   if (typeof state == 'object' && typeof value == 'undefined') value = ''
   else if (typeof value == 'undefined') value = null // new
 
+  // Combobox: input text (option label when matched, else raw typed text) + matches, to gate the menu
+  const [focused, setFocused] = useState(false)
+  const [pickedFromMenu, setPickedFromMenu] = useState(false) // keeps the menu closed after a selection until typing
+  const comboInput = typeof value == 'object' && value && typeof (value as SelectOption).label == 'string'
+    ? (value as SelectOption).label as string
+    : String(rawValue ?? '')
+  const comboMatches = !isCombobox ? 0 : options.filter((o) => {
+    const label = typeof o.label == 'string' ? o.label : (o.labelSearch || '')
+    return filterFn({ label: label, value: String(o.value), data: o }, comboInput)
+  }).length
+
   // Merge class names (up to 1 level deep)
   const classNames = useMemo(() => {
     const merged = { ...selectClassNames }
+    // Combobox: input spans full width + stretches to full control height (cancels the valueContainer's vertical
+    // padding) so the whole field is an easy text target, and the text cursor sits on the input, not the control
+    if (isCombobox) {
+      const m = merged as ClassNames
+      m.input = { ...m.input, base: twMerge(m.input?.base,
+        'w-full ![grid-template-columns:0_1fr] cursor-text hover:cursor-text '
+        + '(-my-input-y -my-[9px]) ([&>input]:!py-input-y [&>input]:!py-[9px])') }
+    }
     for (const key in classNamesProp) {
       const value = classNamesProp[key as keyof ClassNames]
       if (typeof value == 'object') {
@@ -116,10 +148,12 @@ function SelectBase<IsMulti extends boolean = false>({
       }
     }
     return merged
-  }, [classNamesProp])
+  }, [classNamesProp, isCombobox])
 
   return (
-    <div css={style} class={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after nitro-select ${className || ''}`)}>
+    <div css={style} class={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after nitro-select ${className || ''}`)}
+      // Combobox: clicking the (already focused) control reopens the menu after a selection
+      onMouseDown={isCombobox ? () => setPickedFromMenu(false) : undefined}>
       <ReactSelect
         /**
          * react-select prop quick reference (https://react-select.com/props#api):
@@ -133,8 +167,8 @@ function SelectBase<IsMulti extends boolean = false>({
          *   menuIsOpen={false}
          */
         {...props}
-        _nitro={{ prefix, mode, showSearchIcon }}
-        key={value as string}
+        _nitro={{ prefix, mode, showSearchIcon: showSearchIcon ?? isCombobox }}
+        key={isCombobox ? name : value as string}
         unstyled={true}
         inputId={id || name}
         id={containerId}
@@ -146,6 +180,7 @@ function SelectBase<IsMulti extends boolean = false>({
         menuPlacement="auto"
         minMenuHeight={250}
         onChange={!onChange ? undefined : (o) => {
+          if (isCombobox) setPickedFromMenu(true) // close the menu after picking an option
           // An array is returned for multi-select
           type OptionType = IsMulti extends true ? SelectOption[] : SelectedOption
           let value: unknown | unknown[] = []
@@ -169,7 +204,7 @@ function SelectBase<IsMulti extends boolean = false>({
           )
         }}
         options={options}
-        value={value}
+        value={isCombobox ? (typeof value == 'object' ? value : null) : value}
         // @ts-expect-error
         classNames={useMemo(() => ({
           // Input container
@@ -205,6 +240,8 @@ function SelectBase<IsMulti extends boolean = false>({
           MultiValueRemove,
           ValueContainer,
           Menu,
+          ...(isCombobox ? { Input: ComboboxInput } : {}),
+          ...(hideDropdownIcon ? { IndicatorsContainer: () => null } : {}),
           ...props.components as object,
         }}
         // menuIsOpen={!search ? false : undefined}
@@ -231,6 +268,29 @@ function SelectBase<IsMulti extends boolean = false>({
         // isMulti={true}
         // isDisabled={true}
         // maxMenuHeight={200}
+        // Combobox: bind the input text to the value (typed text is the value), options are just suggestions
+        {...(isCombobox ? {
+          inputValue: comboInput,
+          controlShouldRenderValue: false,
+          // Gate the menu: needs focus, min input length, and (optionally) a match to avoid the empty "No options" menu.
+          // A menuIsOpen prop hard-overrides this.
+          menuIsOpen: 'menuIsOpen' in props
+            ? props.menuIsOpen as boolean | undefined
+            : focused && !pickedFromMenu && comboInput.length >= minLenForSearch && (!hideEmptyMenu || comboMatches >= 1),
+          onFocus: (e: FocusEvent<HTMLInputElement>) => {
+            setFocused(true); setPickedFromMenu(false);
+            (props.onFocus as ((e: FocusEvent<HTMLInputElement>) => void) | undefined)?.(e)
+          },
+          onBlur: (e: FocusEvent<HTMLInputElement>) => {
+            setFocused(false);
+            (props.onBlur as ((e: FocusEvent<HTMLInputElement>) => void) | undefined)?.(e)
+          },
+          onInputChange: (v: string, meta: { action: string }) => {
+            if (meta.action !== 'input-change') return
+            setPickedFromMenu(false) // typing re-opens the menu
+            onChange?.({ target: { name: name, value: v } }, null as never)
+          },
+        } : {})}
       />
       {error && <div class="mt-1.5 text-xs text-danger-foreground">{error.detail}</div>}
     </div>
@@ -241,9 +301,14 @@ function Menu(props: MenuProps) {
   return props.options.length === 0 ? null : <components.Menu {...props} />
 }
 
+// Combobox: keep the input visible after selecting (react-select hides it to show a value chip we don't render)
+function ComboboxInput(props: InputProps) {
+  return <components.Input {...props} isHidden={false} />
+}
+
 function Control({ children, ...props }: ControlProps) {
   // const selectedOption = props.getValue()[0]
-  const _nitro = (props.selectProps as { _nitro?: { prefix?: string, mode?: string } })?._nitro
+  const _nitro = (props.selectProps as { _nitro?: { prefix?: string, mode?: 'combobox' } })?._nitro
   return (
     <components.Control {...props}>
       {_nitro?.prefix
@@ -287,7 +352,7 @@ function SingleValue({ children, ...props }: SingleValueProps) {
 
 function Option(props: OptionProps) {
   const data = props.data as SelectOption
-  // const _nitro = (props.selectProps as { _nitro?: { mode?: string } })?._nitro
+  // const _nitro = (props.selectProps as { _nitro?: { mode?: 'combobox' } })?._nitro
   // @ts-expect-error
   const flagClassName = props.getClassNames('flag')
   return (

package/components/partials/styleguide.tsx

@@ -10,20 +10,20 @@ import React from 'react'
 
 const perPage = 10
 const allGroups = [
-  'Links', 
-  'Dropdowns', 
-  'Filters', 
-  'Button Colors & Sizes', 
-  'Button Icons', 
-  'Loading Elements', 
-  'Varients', 
+  // 'Links', 
+  // 'Dropdowns', 
+  // 'Filters', 
+  // 'Button Colors & Sizes', 
+  // 'Button Icons', 
+  // 'Loading Elements', 
+  // 'Varients', 
   'Selects', 
-  'Inputs', 
-  'Date Inputs', 
-  'File Inputs & Calendar & Time', 
-  'Tables', 
-  'Modals & Notifications', 
-  'Custom Components',
+  // 'Inputs', 
+  // 'Date Inputs', 
+  // 'File Inputs & Calendar & Time', 
+  // 'Tables', 
+  // 'Modals & Notifications', 
+  // 'Custom Components',
 ] as const
 
 const statusColors = function(status: string) {
@@ -69,6 +69,7 @@ export function Styleguide({ className, elements, children, currencies, groups }
       colorsMulti: ['blue', 'green'],
       country: 'cd',
       currency: 'nzd',
+      percent: 1250,
       customer: '1',
       date: Date.now(),
       dateRange: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 33],
@@ -79,6 +80,7 @@ export function Styleguide({ className, elements, children, currencies, groups }
       calendarSingle: Date.now(),
       calendarRange: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 8],
       firstName: 'Bruce',
+      combobox: 'blue',
       tableFilter: '',
       errors: [
         { title: 'address', detail: 'Address is required' },
@@ -89,7 +91,8 @@ export function Styleguide({ className, elements, children, currencies, groups }
       brandColor: '#8656ED',
       colorsMulti: ['blue'],
       country: 'au',
-      currency: 'btc', 
+      currency: 'btc',
+      percent: 875,
       date: Date.now() + 1000 * 60 * 60 * 24 * 1.2,
       dateRange: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 5.2],
       dateMultiple: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 3.2],
@@ -100,6 +103,7 @@ export function Styleguide({ className, elements, children, currencies, groups }
       calendarRange: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 3.2],
       firstName: 'John',
       tableFilter: '',
+      combobox: 'green',
       errors: [
         { title: 'address', detail: 'Address is required' },
       ],
@@ -223,7 +227,7 @@ export function Styleguide({ className, elements, children, currencies, groups }
             options={[
               { label: 'Set Status', onClick: () => { console.log('set', row._id) } }, 
               { label: 'Delete', onClick: () => { console.log('remove', row._id) } },
-            ]} 
+            ]}
             dir={rows.slice(0, perPage).length - 3 < i ? 'top-right' : 'bottom-right'} 
             minWidth={100}
           >
@@ -470,8 +474,7 @@ export function Styleguide({ className, elements, children, currencies, groups }
               <Select
                 // menuIsOpen={true}
                 placeholder="Select or add customer..."
-                name="customer" 
-                mode="customer"
+                name="customer"
                 state={state}
                 onChange={onCustomerInputChange}
                 onInputChange={onCustomerSearch}
@@ -533,6 +536,30 @@ export function Styleguide({ className, elements, children, currencies, groups }
                 ], [])}
               />
             </div>
+            <div>
+              <label for="combobox">Combobox (Autocomplete /w or free text)</label>
+              <Select
+                name="combobox"
+                mode="combobox"
+                minLenForSearch={1}
+                state={state}
+                onChange={(e) => onChange(e, setState)}
+                placeholder="Start typing to search for a color..."
+                // hideDropdownIcon={true}
+                options={useMemo(() => [
+                  { value: 'blue', label: 'Blue' },
+                  { value: 'green', label: 'Green' },
+                  { value: 'yellow', label: 'Yellow' },
+                  { value: 'red', label: 'Red' },
+                  { value: 'orange', label: 'Orange' },
+                  { value: 'purple', label: 'Purple' },
+                  { value: 'pink', label: 'Pink' },
+                  { value: 'gray', label: 'Gray' },
+                  { value: 'black', label: 'Black' },
+                  { value: 'white', label: 'White' },
+                ], [])}
+              />
+            </div>
           </div>
         </div>
       )}
@@ -583,13 +610,20 @@ export function Styleguide({ className, elements, children, currencies, groups }
             <div>
               <label for="amount">Amount ({state.amount})</label>
               <Field 
-                name="amount" type="currency" state={state} currency={state.currency || 'nzd'} 
+                name="amount" 
+                type="currency" 
+                state={state} 
+                currency={state.currency || 'nzd'} 
                 // Example of using a custom format and currencies, e.g. 
                 format={'¤#,##0.00'} 
                 currencies={currencies}
                 onChange={(e) => onChange(e, setState)}
               />
             </div>
+            <div>
+              <label for="percent">Percent ({state.percent})</label>
+              <Field name="percent" type="percent" state={state} onChange={(e) => onChange(e, setState)} minDecimals={1} maxDecimals={4} />
+            </div>
             <div>
               <label for="firstName">First Name (disabled)</label>
               <Field name="firstName" state={state} onChange={(e) => onChange(e, setState)} disabled />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",