nitro-web 0.0.65 → 0.0.66

package/client/index.ts

@@ -37,19 +37,20 @@ export { Modal } from '../components/partials/element/modal'
 export { Sidebar, type SidebarProps } from '../components/partials/element/sidebar'
 export { Tooltip } from '../components/partials/element/tooltip'
 export { Topbar } from '../components/partials/element/topbar'
-// Component Form
+
+// Component Form Elements
 export { Checkbox } from '../components/partials/form/checkbox'
 export { Drop } from '../components/partials/form/drop'
 export { DropHandler } from '../components/partials/form/drop-handler'
 export { FormError } from '../components/partials/form/form-error'
-export { Field, isFieldCached } from '../components/partials/form/field'
+export { Field, isFieldCached, type FieldProps } from '../components/partials/form/field'
 export { FieldColor, type FieldColorProps } from '../components/partials/form/field-color'
 export { FieldCurrency, type FieldCurrencyProps } from '../components/partials/form/field-currency'
 export { FieldDate, type FieldDateProps } from '../components/partials/form/field-date'
 export { Location } from '../components/partials/form/location'
-export { Select, getSelectStyle } from '../components/partials/form/select'
+export { Select, getSelectStyle, type SelectProps } from '../components/partials/form/select'
 
-// Component Other
+// Component Other Components
 export { IsFirstRender } from '../components/partials/is-first-render'
 
 // Expose the injected config

package/components/partials/element/button.tsx

@@ -11,6 +11,7 @@ type Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   IconLeftEnd?: React.ReactNode|'v'
   IconRight?: React.ReactNode|'v'
   IconRightEnd?: React.ReactNode|'v'
+  IconCenter?: React.ReactNode|'v'
   children?: React.ReactNode|'v'
 }
 
@@ -23,16 +24,18 @@ export function Button({
   IconLeft, 
   IconLeftEnd, 
   IconRight, 
-  IconRightEnd, 
+  IconRightEnd,
+  IconCenter,
   children,
   type='button',
   ...props 
 }: Button) {
   // const size = (color.match(/xs|sm|md|lg/)?.[0] || 'md') as 'xs'|'sm'|'md'|'lg'
-  const iconPosition = IconLeft ? 'left' : IconLeftEnd ? 'leftEnd' : IconRight ? 'right' : IconRightEnd ? 'rightEnd' : 'none'
+  const iconPosition = 
+    IconLeft ? 'left' : IconLeftEnd ? 'leftEnd' : IconRight ? 'right' : IconRightEnd ? 'rightEnd' : IconCenter ? 'center' : 'none'
   const base = 
-    'relative inline-block text-center font-medium shadow-sm focus-visible:outline focus-visible:outline-2 ' +
-    'focus-visible:outline-offset-2 ring-inset ring-1'
+    'relative inline-flex items-center justify-center text-center font-medium shadow-sm focus-visible:outline ' +
+    'focus-visible:outline-2 focus-visible:outline-offset-2 ring-inset ring-1' + (children ? '' : ' aspect-square')
 
   // Button colors, you can use custom colors by using className instead
   const colors = {
@@ -46,14 +49,14 @@ export function Button({
   
   // Button sizes (px is better for height consistency)
   const sizes = {
-    xs: 'px-[6px] py-[3px] px-button-x-xs py-button-y-xs text-xs rounded',
-    sm: 'px-[10px] py-[6px] px-button-x-sm py-button-y-sm text-button-size rounded-md',
-    md: 'px-[12px] py-[9px] px-button-x-md py-button-y-md text-button-size rounded-md', // default
-    lg: 'px-[18px] py-[11px] px-button-x-lg py-button-y-lg text-button-size rounded-md',
+    xs: 'px-[6px]  h-[25px] px-button-x-xs h-button-h-xs text-xs !text-button-xs rounded',
+    sm: 'px-[10px] h-[32px] px-button-x-sm h-button-h-sm text-button-md text-button-sm rounded-md',
+    md: 'px-[12px] h-[38px] px-button-x-md h-button-h-md text-button-md rounded-md', // default
+    lg: 'px-[18px] h-[42px] px-button-x-lg h-button-h-lg text-button-md !text-button-lg rounded-md',
   }
   
   const appliedColor = color === 'custom' ? customColor : colors[color]
-  const contentLayout = `gap-x-1.5 ${iconPosition == 'none' ? '' : 'inline-flex items-center justify-center'}`
+  const contentLayout = `gap-x-1.5 ${iconPosition == 'none' ? '' : ''}`
   const loading = isLoading ? '[&>*]:opacity-0 text-opacity-0' : ''
 
   function getIcon(Icon: React.ReactNode | 'v') {
@@ -68,11 +71,18 @@ export function Button({
       class={twMerge(`${base} ${sizes[size]} ${appliedColor} ${contentLayout} ${loading} nitro-button ${className||''}`)} 
       {...props}
     >
-      {IconLeft && getIcon(IconLeft)}
-      {IconLeftEnd && getIcon(IconLeftEnd)}
-      <span class={`${iconPosition == 'leftEnd' || iconPosition == 'rightEnd' ? 'flex-1' : ''}`}>{children}</span>
-      {IconRight && getIcon(IconRight)}
-      {IconRightEnd && getIcon(IconRightEnd)}
+      {
+        IconCenter && 
+        <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+          {getIcon(IconCenter)}
+        </span>
+      }
+      {(IconLeft || IconLeftEnd) && getIcon(IconLeft || IconLeftEnd)}
+      <span class={`flex items-center ${iconPosition == 'leftEnd' || iconPosition == 'rightEnd' ? 'flex-1 justify-center' : ''}`}>
+        <span className="w-0">&nbsp;</span> {/* for min-height */}
+        {children}
+      </span>
+      {(IconRight || IconRightEnd) && getIcon(IconRight || IconRightEnd)}
       {
         isLoading &&
         <span className={

package/components/partials/element/filters.tsx

@@ -1,24 +1,25 @@
 import { forwardRef, Dispatch, SetStateAction, useRef, useEffect, useImperativeHandle } from 'react'
-import { Button, Dropdown, Field, Select, twMerge } from 'nitro-web'
-import { camelCaseToTitle, debounce, omit, queryString, queryObject } from 'nitro-web/util'
+import { Button, Dropdown, Field, Select, type FieldProps, type SelectProps } from 'nitro-web'
+import { camelCaseToTitle, debounce, omit, queryString, queryObject, twMerge } from 'nitro-web/util'
 import { ListFilterIcon } from 'lucide-react'
 
-export type FilterType = {
-  name: string
-  type: 'text'|'date'|'search'|'select'
+type CommonProps = {
   label?: string
-  enums?: { label: string, value: string }[]
-  placeholder?: string
+  rowClassName?: string
 }
+export type FilterType = (
+  | FieldProps & CommonProps
+  | ({ type: 'select' } & SelectProps & CommonProps)
+)
 
 type FilterState = {
   [key: string]: string | true
 }
 
 type FiltersProps = {
+  state?: FilterState
+  setState?: Dispatch<SetStateAction<FilterState>>
   filters?: FilterType[]
-  state: FilterState
-  setState: Dispatch<SetStateAction<FilterState>>
   elements?: {
     Button?: typeof Button
     Dropdown?: typeof Dropdown
@@ -31,6 +32,7 @@ type FiltersProps = {
   buttonClassName?: string
   buttonText?: string
   buttonCounterClassName?: string
+  filtersContainerClassName?: string
 }
 
 export type FiltersHandleType = {
@@ -40,14 +42,26 @@ export type FiltersHandleType = {
 const debounceTime = 250
 
 export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({ 
-  filters, state, setState, elements, dropdownProps, buttonProps, buttonClassName, buttonText, buttonCounterClassName,
+  filters, 
+  setState: setState2,
+  state: state2,
+  buttonClassName, 
+  buttonCounterClassName,
+  buttonProps, 
+  buttonText, 
+  dropdownProps, 
+  elements, 
+  filtersContainerClassName,
 }, ref) => {
   const location = useLocation()
   const navigate = useNavigate()
-  const stateRef = useRef(state)
   const [lastUpdated, setLastUpdated] = useState(0)
   const [debouncedSubmit] = useState(() => debounce(submit, debounceTime))
-  const count = Object.keys(state).length - (Object.keys(state).includes('page') ? 1 : 0)
+  const [state3, setState3] = useState(() => ({ ...queryObject(location.search) }))
+  const [state, setState] = [state2 || state3, setState2 || setState3]
+  const stateRef = useRef(state)
+  const count = useMemo(() => Object.keys(state).filter((k) => state[k] && filters?.some((f) => f.name === k)).length, [state, filters])
+
   const Elements = {
     Button: elements?.Button || Button,
     Dropdown: elements?.Dropdown || Dropdown,
@@ -85,9 +99,7 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
 
   function resetAll(e: React.MouseEvent<HTMLButtonElement>) {
     e.preventDefault()
-    setState((s) => ({
-      ...(s.page ? { page: s.page } : {}), // keep pagination
-    } as FilterState))
+    setState((s) => omit(s, filters?.map((f) => f.name) || []) as FilterState)
     onAfterChange()
   }
 
@@ -106,8 +118,8 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
     const queryStr = queryString(omit(stateRef.current, includePagination ? [] : ['page']))
     navigate(location.pathname + queryStr, { replace: true })
   }
-
-  if (!filters) return null
+  
+  // if (!filters) return null
   return (
     <Elements.Dropdown 
       dir="bottom-right"
@@ -119,47 +131,31 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
             <div class="text-lg font-semibold">Filters</div>
             <Button color="clear" size="sm" onClick={resetAll}>Reset All</Button>
           </div>
-          <div class="flex flex-col px-4 py-4 mb-[-6px]">
+          <div class={twMerge(`flex flex-wrap gap-4 px-4 py-4 pb-6 ${filtersContainerClassName || ''}`)}>
             {
-              filters.map((filter) => (
-                <div key={filter.name}>
+              filters?.map(({label, rowClassName, ...filter}, i) => (
+                <div key={i} class={twMerge(`w-full ${rowClassName||''}`)}>
                   <div class="flex justify-between"> 
-                    <label for={filter.name}>{filter.label || camelCaseToTitle(filter.name)}</label>
+                    <label for={filter.id || filter.name}>{label || camelCaseToTitle(filter.name)}</label>
                     <a href="#" class="label font-normal text-secondary underline" onClick={(e) => reset(e, filter)}>Reset</a>
                   </div>
                   {
-                    (filter.type === 'text' || filter.type === 'search') &&
-                    <Elements.Field 
-                      class="mb-4"
-                      name={filter.name}
-                      type={filter.type}
-                      placeholder={filter.placeholder} 
-                      state={state} 
-                      onChange={onInputChange}
-                    />
-                  }
-                  {
-                    filter.type === 'date' &&
-                    <Elements.Field
-                      class="mb-4"
-                      name={filter.name}
-                      type="date"
-                      mode="range"
+                    filter.type === 'select' && 
+                    <Elements.Select
+                      {...filter}
+                      class="mb-0"
                       state={state}
                       onChange={onInputChange}
-                      placeholder={filter.placeholder || 'Select range...'}
+                      type={undefined}
                     />
                   }
                   {
-                    filter.type === 'select' &&
-                    <Elements.Select
-                      class="mb-4"
-                      name={filter.name} 
-                      type="country" 
+                    filter.type !== 'select' && 
+                    <Elements.Field 
+                      {...filter}
+                      class="mb-0"
                       state={state} 
-                      options={filter.enums || []} 
                       onChange={onInputChange}
-                      placeholder={filter.placeholder}
                     />
                   }
                 </div>

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

@@ -3,24 +3,29 @@ import Saturation from '@uiw/react-color-saturation'
 import Hue from '@uiw/react-color-hue'
 import { Dropdown, util } from 'nitro-web'
 
-export type FieldColorProps = React.InputHTMLAttributes<HTMLInputElement> & {
+export type FieldColorProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'|'value'> & {
   name: string
   /** name is applied if id is not provided */
   id?: string 
   defaultColor?: string
   Icon?: React.ReactNode
-  onChange?: (event: { target: { name: string, value: string|null } }) => void
-  value?: string|null
+  onChange?: (event: { target: { name: string, value: string } }) => void
+  value?: string
 }
 
-export function FieldColor({ defaultColor='#333', Icon, onChange, value, ...props }: FieldColorProps) {
+export function FieldColor({ defaultColor='#333', Icon, onChange: onChangeProp, value: valueProp, ...props }: FieldColorProps) {
   const [lastChanged, setLastChanged] = useState(() => `ic-${Date.now()}`)
   const isInvalid = props.className?.includes('is-invalid') ? 'is-invalid' : ''
   const id = props.id || props.name
 
-  function onInputChange(e: { target: { name: string, value: string|null } }) {
+  // Since value and onChange are optional, we need to hold the value in state if not provided
+  const [internalValue, setInternalValue] = useState(valueProp ?? defaultColor)
+  const value = valueProp ?? internalValue
+  const onChange = onChangeProp ?? ((e: { target: { name: string, value: string } }) => setInternalValue(e.target.value))
+
+  function onInputChange(e: { target: { name: string, value: string } }) {
     setLastChanged(`ic-${Date.now()}`)
-    if (onChange) onChange(e)
+    onChange(e)
   }
 
   return (

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

@@ -149,7 +149,7 @@ export function FieldCurrency({ config, currency='nzd', onChange, value, default
         defaultValue={defaultValue}
       />
       <span
-        class={`absolute top-0 bottom-0 left-3 inline-flex items-center select-none text-gray-500 text-input-size ${dollars !== null && settings.prefix == '$' ? 'text-foreground' : ''}`}
+        class={`absolute top-0 bottom-0 left-3 inline-flex items-center select-none text-gray-500 text-input-base ${dollars !== null && settings.prefix == '$' ? 'text-foreground' : ''}`}
       >
         {settings.prefix || settings.suffix}
       </span>

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

@@ -9,14 +9,21 @@ type DropdownRef = {
 }
 
 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 applied if id is not provided
+  /** 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'
 }
 
@@ -27,7 +34,7 @@ export type FieldDateProps = (
       value?: null|number|string
     })
   | ({ mode: 'multiple' | 'range' } & PreFieldDateProps & { 
-      onChange: (e: { target: { name: string, value: (null|number)[] } }) => void 
+      onChange?: (e: { target: { name: string, value: (null|number)[] } }) => void 
       value?: null|number|string|(null|number|string)[]
     })
 )
@@ -37,8 +44,16 @@ type TimePickerProps = {
   onChange: (mode: Mode, value: number|null) => void
 }
 
-export function FieldDate({ 
-  mode, onChange, prefix='', value, numberOfMonths, Icon, showTime, dir = 'bottom-left', ...props 
+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)
@@ -46,7 +61,12 @@ export function FieldDate({
   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 _dates = Array.isArray(value) ? value : [value]
@@ -70,10 +90,8 @@ export function FieldDate({
     if (mode == 'single' && !showTime) dropdownRef.current?.setIsActive(false) // Close the dropdown
     setInputValue(getInputValue(value))
     // Update the value
-    if (onChange) {
-      onChange({ target: { name: props.name, value: value as any } })
-      setLastUpdated(new Date().getTime())
-    }
+    onChange({ target: { name: props.name, value: value as any } })
+    setLastUpdated(new Date().getTime())
   }
 
   function getInputValue(dates: Date|number|null|(Date|number|null)[]) {
@@ -104,10 +122,8 @@ export function FieldDate({
     
     // Update the value
     const value = mode == 'single' ? split[0]?.getTime() ?? null : split.map(d => d?.getTime() ?? null)
-    if (onChange) {
-      onChange({ target: { name: props.name, value: value as any }})
-      setLastUpdated(new Date().getTime())
-    }
+    onChange({ target: { name: props.name, value: value as any }})
+    setLastUpdated(new Date().getTime())
   } 
 
   return (
@@ -135,7 +151,7 @@ export function FieldDate({
         {
           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-size ml-3">
+          <span className="z-[0] col-start-1 row-start-1 self-center select-none justify-self-start text-input-base ml-3">
             {prefix}
           </span>
         }

package/components/partials/form/field.tsx

@@ -1,26 +1,30 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+// Maybe use 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 { EnvelopeIcon, CalendarIcon, FunnelIcon, MagnifyingGlassIcon, EyeIcon, EyeSlashIcon } from '@heroicons/react/20/solid'
 import { memo } from 'react'
-// Maybe use fill-current tw class for lucide icons (https://github.com/lucide-icons/lucide/discussions/458)
 
+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'
+  /** 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
+  /** name is applied if id is not provided */
   id?: string
-  // state object to get the value, and check errors against
+  /** state object to get the value, and check errors against */
   state?: { errors?: Errors, [key: string]: any }
-  type?: 'text' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color'
+  /** type of the field */
+  type?: FieldType
+  /** icon to show in the input */
   icon?: React.ReactNode
   iconPos?: 'left' | 'right'
-  /** Pass dependencies to break memoization, handy for onChange/onInputChange **/
+  /** Pass dependencies to break memoization, handy for onChange/onInputChange */
   deps?: unknown[]
+  placeholder?: string
 }
 type IconWrapperProps = {
   iconPos: string
@@ -46,7 +50,7 @@ export const Field = memo(FieldBase, (prev, next) => {
 })
 
 function FieldBase({ state, icon, iconPos: ip, ...props }: FieldProps) {
-  // type must be kept as props.type for TS to be happy and follow the conditions below
+  // `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, props.name)
@@ -145,7 +149,7 @@ function getInputClasses({ error, Icon, iconPos, type }: { error?: Error, Icon?:
   const plWithIcon = type == 'color' ? 'pl-9' : 'pl-8' // was sm:pl-8 pl-8, etc
   const prWithIcon = type == 'color' ? 'pr-9' : 'pr-8'
   return (
-    `block ${py} col-start-1 row-start-1 w-full rounded-md bg-white text-input-size outline outline-1 -outline-offset-1 ` +
+    `block ${py} 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 ' +
     (iconPos == 'right' && Icon ? `${pl} ${prWithIcon} ` : (Icon ? `${plWithIcon} ${pr} ` : `${pl} ${pr} `)) +
     (error 

package/components/partials/form/select.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { css } from 'twin.macro'
 import { memo } from 'react'
-import ReactSelect, { components, ControlProps, createFilter, OptionProps, SingleValueProps, ClearIndicatorProps,
-  DropdownIndicatorProps, MultiValueRemoveProps } from 'react-select'
+import ReactSelect, { 
+  components, ControlProps, createFilter, OptionProps, SingleValueProps, ClearIndicatorProps,
+  DropdownIndicatorProps, MultiValueRemoveProps,
+} from 'react-select'
 import { ChevronUpDownIcon, CheckCircleIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import { isFieldCached } from 'nitro-web'
 import { getErrorFromState, deepFind, twMerge } from 'nitro-web/util'
@@ -19,11 +21,13 @@ type GetSelectStyle = {
 }
 
 /** Select (all other props are passed to react-select) **/
-type SelectProps = {
+export type SelectProps = {
   /** field name or path on state (used to match errors), e.g. 'date', 'company.email' **/
   name: string
-  /** name used if not provided **/
-  inputId?: string
+  /** inputId, the name is used if not provided **/
+  id?: string
+  /** 'container' id to pass to react-select **/
+  containerId?: string
   /** The minimum width of the dropdown menu **/
   minMenuWidth?: number
   /** The prefix to add to the input **/
@@ -35,7 +39,7 @@ type SelectProps = {
   /** The state object to get the value and check errors from **/
   state?: { errors?: Errors, [key: string]: any } // was unknown|unknown[]
   /** Select variations **/
-  type?: 'country'|'customer'|''
+  mode?: 'country'|'customer'|''
   /** Pass dependencies to break memoization, handy for onChange/onInputChange **/
   deps?: unknown[]
   /** All other props are passed to react-select **/
@@ -46,7 +50,7 @@ export const Select = memo(SelectBase, (prev, next) => {
   return isFieldCached(prev, next)
 })
 
-function SelectBase({ inputId, minMenuWidth, name, prefix='', onChange, options, state, type='', ...props }: SelectProps) {
+function SelectBase({ id, containerId, minMenuWidth, name, prefix='', onChange, options, state, mode='', ...props }: SelectProps) {
   let value: unknown|unknown[]
   const error = getErrorFromState(state, name)
   if (!name) throw new Error('Select component requires a `name` and `options` prop')
@@ -78,10 +82,11 @@ function SelectBase({ inputId, minMenuWidth, name, prefix='', onChange, options,
          */
         {...props}
         // @ts-expect-error
-        _nitro={{ prefix, type }}
+        _nitro={{ prefix, mode }}
         key={value as string}
         unstyled={true}
-        inputId={inputId || name}
+        inputId={id || name}
+        id={containerId}
         filterOption={(option, searchText) => {
           if ((option.data as {fixed?: boolean}).fixed) return true
           return filterFn(option, searchText)
@@ -161,7 +166,7 @@ function Control({ children, ...props }: ControlProps) {
   // todo: check that the flag/prefix looks okay
   const selectedOption = props.getValue()[0]
   const optionFlag = (selectedOption as { flag?: string })?.flag
-  const _nitro = (props.selectProps as { _nitro?: { prefix?: string, type?: string } })?._nitro
+  const _nitro = (props.selectProps as { _nitro?: { prefix?: string, mode?: string } })?._nitro
   return (
     <components.Control {...props}>
       {
@@ -173,7 +178,7 @@ function Control({ children, ...props }: ControlProps) {
                 {children}
               </>
             )
-          } else if (_nitro?.type == 'country') {
+          } else if (_nitro?.mode == 'country') {
             return (
               <>
                 { optionFlag && <Flag flag={optionFlag} /> }
@@ -201,10 +206,10 @@ function SingleValue(props: SingleValueProps) {
 function Option(props: OptionProps) {
   // todo: check that the flag looks okay
   const data = props.data as { className?: string, flag?: string }
-  const _nitro = (props.selectProps as { _nitro?: { type?: string } })?._nitro
+  const _nitro = (props.selectProps as { _nitro?: { mode?: string } })?._nitro
   return (
     <components.Option className={data.className} {...props}>
-      { _nitro?.type == 'country' && <Flag flag={data.flag} /> }
+      { _nitro?.mode == 'country' && <Flag flag={data.flag} /> }
       <span class="flex-auto">{props.label}</span>
       {props.isSelected && <CheckCircleIcon className="size-[22px] text-primary -my-1 -mx-1" />}
     </components.Option>
@@ -248,7 +253,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-input-size outline outline-1 -outline-offset-1 '
+    base: 'rounded-md bg-white hover:cursor-pointer text-input-base outline outline-1 -outline-offset-1 '
       + '!min-h-0 outline-input-border',
     focus: 'outline-2 -outline-offset-2 outline-input-border-focus',
     error: 'outline-danger',
@@ -273,8 +278,8 @@ const selectStyles = {
   indicatorsContainer: 'p-1 px-2 gap-1',
   indicatorSeparator: 'py-0.5 before:content-[""] before:block before:bg-gray-100 before:w-px before:h-full',
   // Dropdown menu
-  menu: 'mt-1.5 border border-dropdown-ul-border bg-white rounded-md text-input-size overflow-hidden shadow-dropdown-ul',
-  groupHeading: 'ml-3 mt-2 mb-1 text-gray-500 text-input-size',
+  menu: 'mt-1.5 border border-dropdown-ul-border bg-white rounded-md text-input-base overflow-hidden shadow-dropdown-ul',
+  groupHeading: 'ml-3 mt-2 mb-1 text-gray-500 text-input-base',
   noOptionsMessage: 'm-1 text-gray-500 p-2 bg-gray-50 border border-dashed border-gray-200 rounded-sm',
   option: {
     base: 'relative px-3 py-2 !flex items-center gap-2 cursor-default',

package/components/partials/styleguide.tsx

@@ -3,7 +3,7 @@ import {
   Filters, FiltersHandleType, FilterType,
 } from 'nitro-web'
 import { getCountryOptions, getCurrencyOptions, ucFirst } from 'nitro-web/util'
-import { Check } from 'lucide-react'
+import { Check, FileEditIcon } from 'lucide-react'
 
 type StyleguideProps = {
   className?: string
@@ -34,27 +34,40 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
   })
   const [filterState, setFilterState] = useState({})
   const filtersRef = useRef<FiltersHandleType>(null)
-  const filters: FilterType[] = useMemo(() => [
-    { 
-      name: 'dateRange',
-      type: 'date',
-    },
-    { 
-      name: 'search',
-      type: 'search',
-      label: 'Keyword Search',
-      placeholder: 'Job, employee name...',
-    },
-    { 
-      name: 'status', 
-      type: 'select',
-      enums: [
-        { label: 'Pending', value: 'pending' }, 
-        { label: 'Approved', value: 'approved' }, 
-        { label: 'Rejected', value: 'rejected' },
-      ],
-    },
-  ], [])
+  const filters = useMemo(() => {
+    const filters: FilterType[] = [
+      { 
+        type: 'date',
+        name: 'dateRange',
+        mode: 'range',
+        placeholder: 'Select a range...',
+      },
+      {
+        type: 'search',
+        name: 'search',
+        label: 'Keyword Search',
+        placeholder: 'Job, employee name...',
+      },
+      {
+        type: 'select',
+        name: 'status',
+        rowClassName: 'flex-1',
+        options: [
+          { label: 'Pending', value: 'pending' }, 
+          { label: 'Approved', value: 'approved' }, 
+          { label: 'Rejected', value: 'rejected' },
+        ],
+      },
+      {
+        type: 'color',
+        name: 'color',
+        label: 'Half column',
+        placeholder: 'Select color...',
+        rowClassName: 'flex-1',
+      },
+    ]
+    return filters
+  }, [])
 
   const options = useMemo(() => [
     { label: 'Open customer preview' },
@@ -182,6 +195,9 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
         <div><Button IconRight="v">IconRight</Button></div>
         <div><Button IconRightEnd="v" className="w-[190px]">IconRightEnd 190px</Button></div>
         <div><Button color="primary" IconRight="v" isLoading>primary isLoading</Button></div>
+        <div><Button IconCenter={<FileEditIcon size={18}/>}></Button></div>
+        <div><Button size="sm" IconCenter={<FileEditIcon size={16}/>}></Button></div>
+        <div><Button size="xs" IconCenter={<FileEditIcon size={14}/>}></Button></div>
       </div>
 
       <h2 class="h3">Checkboxes</h2>
@@ -243,7 +259,7 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
           <Select
             // https://github.com/lipis/flag-icons
             name="country" 
-            type="country" 
+            mode="country"
             state={state} 
             options={useMemo(() => getCountryOptions(injectedConfig.countries), [])} 
             onChange={(e) => onChange(setState, e)}
@@ -255,7 +271,7 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
             // menuIsOpen={true}
             placeholder="Select or add customer..."
             name="customer" 
-            type="customer"
+            mode="customer"
             state={state}
             onChange={onCustomerInputChange}
             onInputChange={onCustomerSearch}
@@ -323,7 +339,7 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
         </div>
         <div>
           <label for="brandColor">Brand Color</label>
-          <Field name="brandColor" type="color" state={state} iconPos="left" onChange={(e) => onChange(setState, e)} />
+          <Field name="brandColor" type="color" iconPos="left" state={state} onChange={(e) => onChange(setState, e)} />
         </div>
         <div>
           <label for="amount">Amount ({state.amount})</label>
@@ -343,8 +359,8 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
           <Field name="date-range" type="date" mode="range" prefix="Date:" state={state} onChange={(e) => onChange(setState, e)} />
         </div>
         <div>
-          <label for="date">Date (right aligned)</label>
-          <Field name="date" type="date" mode="single" state={state} onChange={(e) => onChange(setState, e)} dir="bottom-right" />
+          <label for="date">Date multi-select (right aligned)</label>
+          <Field name="date" type="date" mode="multiple" state={state} onChange={(e) => onChange(setState, e)} dir="bottom-right" />
         </div>
       </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "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 🚀",

package/types/util.d.ts

@@ -503,6 +503,73 @@ export function onChange<T>(setState: React.Dispatch<React.SetStateAction<T>>, e
  * @returns {string}
  */
 export function pad(num?: number, padLeft?: number, fixedRight?: number): string;
+/**
+ * Validates req.query "filters" against a config object, and returns a MongoDB-compatible query object.
+ * @param {{ [key: string]: string }} query - req.query
+ *   E.g. {
+ *     dateRange: '1749038400000,1749729600000',
+ *     location: '10-RS',
+ *     status: 'incomplete',
+ *     search: 'John'
+ *   }
+ * @param {{ [key: string]: 'string'|'number'|'search'|'dateRange'|string[] }} config - allowed filters and their rules
+ *   E.g. {
+ *     dateRange: 'dateRange',
+ *     location: 'string',
+ *     status: ['incomplete', 'complete'],
+ *     search: 'string',
+ *   }
+ * @example returned object (using the examples above):
+ *   E.g. {
+ *     date: { $gte: 1749038400000, $lte: 1749729600000 },
+ *     location: '10-RS',
+ *     status: 'incomplete',
+ *     search: 'John'
+ *   }
+ */
+export function parseFilters(query: {
+    [key: string]: string;
+}, config: {
+    [key: string]: "string" | "number" | "search" | "dateRange" | string[];
+}): {
+    [key: string]: string | number | string[] | {
+        $gte: number;
+        $lte?: number;
+    } | {
+        $search: string;
+    };
+};
+/**
+ * Parses req.query "pagination" and "sorting" fields and returns a monastery-compatible options object.
+ * @param {{ fieldsFlattened: object, name: string }} model - The Monastery model
+ * @param {{ page?: string, sort?: '1'|'-1', sortBy?: string }} query - req.query
+ *   E.g. {
+ *     page: '1',
+ *     sort: '1',
+ *     sortBy: 'createdAt'
+ *   }
+ * @param {number} [limit=10]
+ * @example returned object (using the examples above):
+ *   E.g. {
+ *     limit: 10,
+ *     skip: undefined,
+ *     sort: { createdAt: 1 },
+ *   }
+ */
+export function parseSortOptions(model: {
+    fieldsFlattened: object;
+    name: string;
+}, query: {
+    page?: string;
+    sort?: "1" | "-1";
+    sortBy?: string;
+}, limit?: number): {
+    limit: number;
+    skip: number;
+    sort: {
+        [x: string]: number;
+    };
+};
 /**
  * Picks fields from an object
  * @param {{ [key: string]: any }} obj

package/types/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../util.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../util.js"],"names":[],"mappings":"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"}

package/util.js

@@ -1199,6 +1199,112 @@ export function pad (num=0, padLeft=0, fixedRight) {
   }
 }
 
+/**
+ * Validates req.query "filters" against a config object, and returns a MongoDB-compatible query object.
+ * @param {{ [key: string]: string }} query - req.query
+ *   E.g. {
+ *     dateRange: '1749038400000,1749729600000',
+ *     location: '10-RS',
+ *     status: 'incomplete',
+ *     search: 'John'
+ *   }
+ * @param {{ [key: string]: 'string'|'number'|'search'|'dateRange'|string[] }} config - allowed filters and their rules
+ *   E.g. {
+ *     dateRange: 'dateRange',
+ *     location: 'string',
+ *     status: ['incomplete', 'complete'],
+ *     search: 'string',
+ *   }
+ * @example returned object (using the examples above):
+ *   E.g. {
+ *     date: { $gte: 1749038400000, $lte: 1749729600000 },
+ *     location: '10-RS',
+ *     status: 'incomplete',
+ *     search: 'John'
+ *   }
+ */
+export function parseFilters(query, config) {
+  /** @type {{ [key: string]: string|number|{ $gte: number; $lte?: number; }|{ $search: string }|string[] }} */
+  const mongoQuery = {}
+
+  for (const key in query) {
+    const val = query[key]
+    const rule = config[key]
+
+    if (!rule) {
+      continue
+
+    } else if (rule === 'string') {
+      if (typeof val !== 'string') throw new Error(`The "${key}" filter has an invalid value "${val}". Expected a string.`)
+      mongoQuery[key] = val
+
+    } else if (rule === 'number') {
+      if (typeof val !== 'number' || isNaN(val)) throw new Error(`The "${key}" filter has an invalid value "${val}". Expected a number.`)
+      mongoQuery[key] = parseFloat(val)
+
+    } else if (rule === 'search') {
+      if (typeof val !== 'string') throw new Error(`The "${key}" filter has an invalid value "${val}". Expected a string.`)
+      mongoQuery['$text'] = { $search: val }
+
+    } else if (Array.isArray(rule)) {
+      if (!rule.includes(val)) {
+        throw new Error(`The "${key}" filter has an invalid value "${val}". Allowed values: "${rule.join('", "')}"`)
+      }
+      mongoQuery[key] = val
+
+    } else if (rule === 'dateRange') {
+      const [start, end] = val.split(',').map(Number)
+      if (isNaN(start) && isNaN(end)) throw new Error(`The "${key}" filter has an invalid value "${val}". Expected a date range.`)
+      else if (isNaN(start)) mongoQuery.date = { $gte: 0, $lte: end }
+      else if (isNaN(end)) mongoQuery.date = { $gte: start }
+      else mongoQuery.date = { $gte: start, $lte: end }
+
+    } else {
+      throw new Error(`Unknown filter type "${rule}" in the config.`)
+    }
+  }
+
+  return mongoQuery
+}
+
+/**
+ * Parses req.query "pagination" and "sorting" fields and returns a monastery-compatible options object.
+ * @param {{ fieldsFlattened: object, name: string }} model - The Monastery model
+ * @param {{ page?: string, sort?: '1'|'-1', sortBy?: string }} query - req.query
+ *   E.g. { 
+ *     page: '1', 
+ *     sort: '1', 
+ *     sortBy: 'createdAt' 
+ *   }
+ * @param {number} [limit=10]
+ * @example returned object (using the examples above):
+ *   E.g. {
+ *     limit: 10,
+ *     skip: undefined,
+ *     sort: { createdAt: 1 },
+ *   }
+ */
+export function parseSortOptions(model, query, limit = 10) {
+  const page = parseInt(query.page || '') || 1
+
+  // Validate sortBy value
+  const sortBy = query.sortBy || 'createdAt'
+  const fields = Object.keys(model.fieldsFlattened)
+  if (!fields.includes(sortBy)) {
+    throw new Error(`"${sortBy}" is an invalid sortBy value for the "${model.name}" model.`)
+  }
+
+  const sort = sortBy === 'createdAt' && !query.sort ? -1 : (parseInt(query.sort || '') || 1)
+
+  return {
+    limit: limit + 1, // get an extra row to signal there are more pages
+    skip: page > 1 ? (page - 1) * limit : undefined,
+    sort: {
+      [sortBy]: sort,
+    },
+  }
+}
+
 /**
  * Picks fields from an object
  * @param {{ [key: string]: any }} obj
@@ -1570,7 +1676,13 @@ export function trim (string) {
  */
 export function twMerge(...args) {
   const ignoredClasses = /** @type {string[]} */([])
-  const ignoreClasses = ['text-button-size', 'text-input-size']
+  const ignoreClasses = [
+    'text-button-xs',
+    'text-button-sm',
+    'text-button-md',
+    'text-button-lg',
+    'text-input-base',
+  ]
   const classes = args.filter(Boolean).join(' ').split(' ')
 
   const filteredClasses = classes.filter(c => {