nitro-web 0.0.43 → 0.0.45

package/.eslintrc.json

@@ -40,7 +40,7 @@
       "allowArray": true, 
       "allowObject": true 
     }],
-    "indent": ["error", 2],
+    "indent": ["error", 2, { "SwitchCase": 1, "offsetTernaryExpressions": true }],
     "max-len": ["error", { "code": 140, "ignorePattern": "^\\s*(<(rect|path|line)\\s|class=|className=|'|`)" }],
     "no-var": "off",
     "no-prototype-builtins": "off",

package/client/app.tsx

@@ -98,8 +98,8 @@ function App({ settings, config, storeContainer }: { settings: Settings, config:
   return (
     <storeContainer.Provider>
       {/* <ThemeProvider theme={themeNormalised}> */}
-        { router && <RouterProvider router={router} /> }
-        <AfterApp settings={settings} />
+      { router && <RouterProvider router={router} /> }
+      <AfterApp settings={settings} />
       {/* </ThemeProvider> */}
     </storeContainer.Provider>
   )

package/components/auth/reset.tsx

@@ -24,7 +24,7 @@ export function ResetInstructions() {
       <form onSubmit={onSubmit}>
         <div>
           <label for="email">Email Address</label>
-          <Field name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
+          <Field name="email" type="email" state={state} onChange={(e) => onChange(setState, e)} placeholder="Your email address..." />
         </div>
         
         <div class="mb-14">
@@ -67,11 +67,11 @@ export function ResetPassword() {
       <form onSubmit={onSubmit}>
         <div>
           <label for="password">Your New Password</label>
-          <Field name="password" type="password" state={state} onChange={onChange.bind(setState)} />
+          <Field name="password" type="password" state={state} onChange={(e) => onChange(setState, e)} />
         </div>
         <div>
           <label for="password2">Repeat Your New Password</label>
-          <Field name="password2" type="password" state={state} onChange={onChange.bind(setState)} />
+          <Field name="password2" type="password" state={state} onChange={(e) => onChange(setState, e)} />
         </div>
 
         <div class="mb-14">

package/components/auth/signin.tsx

@@ -53,14 +53,15 @@ export function Signin() {
       <form onSubmit={onSubmit}>
         <div>
           <label for="email">Email Address</label>
-          <Field name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
+          <Field name="email" type="email" state={state} onChange={(e) => onChange(setState, e)}
+            placeholder="Your email address..." />
         </div>
         <div>
           <div class="flex justify-between"> 
             <label for="password">Password</label>
             <Link to="/reset" class="label underline2">Forgot?</Link>
           </div>
-          <Field name="password" type="password" state={state} onChange={onChange.bind(setState)}/>
+          <Field name="password" type="password" state={state} onChange={(e) => onChange(setState, e)}/>
         </div>
         
         <div class="mb-14">

package/components/auth/signup.tsx

@@ -32,20 +32,20 @@ export function Signup() {
         <div class="grid grid-cols-2 gap-6">  
           <div>
             <label for="name">Your Name</label>
-            <Field name="name" placeholder="E.g. Bruce Wayne" state={state} onChange={onChange.bind(setState)} />
+            <Field name="name" placeholder="E.g. Bruce Wayne" state={state} onChange={(e) => onChange(setState, e)} />
           </div>
           <div>
             <label for="businessName">Company Name</label>
-            <Field name="businessName" placeholder="E.g. Wayne Enterprises" state={state} onChange={onChange.bind(setState)} />
+            <Field name="businessName" placeholder="E.g. Wayne Enterprises" state={state} onChange={(e) => onChange(setState, e)} />
           </div>
         </div>
         <div>
           <label for="email">Email Address</label>
-          <Field name="email" type="email" state={state} onChange={onChange.bind(setState)} placeholder="Your email address..." />
+          <Field name="email" type="email" state={state} onChange={(e) => onChange(setState, e)} placeholder="Your email address..." />
         </div>
         <div>
           <label for="password">Password</label>
-          <Field name="password" type="password" state={state} onChange={onChange.bind(setState)}/>
+          <Field name="password" type="password" state={state} onChange={(e) => onChange(setState, e)}/>
         </div>
         
         <div class="mb-14">

package/components/billing/stripe.api.js

@@ -130,7 +130,7 @@ async function webhookSubUpdated(req, res, event) {
   // Update the subscription on the company
   try {
     const subData = event.data.object
-      // webhook from deleting a company?
+    // webhook from deleting a company?
     if (subData.cancellation_details.comment == 'company deleted') {
       return res.json({})
     }

package/components/partials/element/avatar.tsx

@@ -31,9 +31,10 @@ export function Avatar({ awsUrl, isRound, user, showPlaceholderImage, className
 
   return (
     user.avatar 
-    ? <img class={classes} src={s3Image(awsUrl, user.avatar, 'small')} /> 
-    : showPlaceholderImage ? <img class={classes} src={avatarImg} width="30px" /> 
-    : <Initials className={classes} icon={{ initials: getInitials(user), hex: getHex(user) }} isRound={isRound} isMedium={true} />
+      ? <img class={classes} src={s3Image(awsUrl, user.avatar, 'small')} /> 
+      : showPlaceholderImage 
+        ? <img class={classes} src={avatarImg} width="30px" /> 
+        : <Initials className={classes} icon={{ initials: getInitials(user), hex: getHex(user) }} isRound={isRound} isMedium={true} />
   )
 }
 

package/components/partials/element/modal.tsx

@@ -76,8 +76,9 @@ export function Modal({ show, setShow, children, maxWidth, minHeight, dismissabl
           >
             <div 
               class="absolute top-0 right-0 p-3 m-1 cursor-pointer" 
-              onClick={() => { if (dismissable) { setShow(false) }}}>
-                <SvgX1 />
+              onClick={() => { if (dismissable) { setShow(false) }}}
+            >
+              <SvgX1 />
             </div>
             {children}
           </div>

package/components/partials/element/sidebar.tsx

@@ -32,8 +32,8 @@ export function Sidebar({ Logo, menu, links }: SidebarProps) {
         'fixed inset-y-0 z-50 flex flex-col ease-in-out lg:left-0 lg:translate-x-0 lg:!delay-0 lg:!duration-0 ' +
         (
           sidebarOpen 
-          ? 'left-0 translate-x-[0px] sidebar-transition ' 
-          : 'left-[-100%] translate-x-[-100%]  sidebar-transition-delay '
+            ? 'left-0 translate-x-[0px] sidebar-transition ' 
+            : 'left-[-100%] translate-x-[-100%]  sidebar-transition-delay '
         ) + 
         sidebarWidth
       }>
@@ -55,8 +55,8 @@ export function Sidebar({ Logo, menu, links }: SidebarProps) {
         className={'fixed w-full z-[49] inset-0 bg-gray-900/70 ease-linear lg:hidden ' + 
           (
             sidebarOpen 
-            ? 'left-0 opacity-100 sidebar-transition ' 
-            : 'left-[-100%] opacity-0 sidebar-transition-delay '
+              ? 'left-0 opacity-100 sidebar-transition ' 
+              : 'left-[-100%] opacity-0 sidebar-transition-delay '
           )
         }
       />

package/components/partials/element/tooltip.tsx

@@ -14,11 +14,11 @@ export function Tooltip({ text, children, className, classNamePopup, isSmall }:
     <div class={`${className} relative inline-block align-middle nitro-tooltip`} css={style}>
       {
         text
-        ? <>
-            <div class="tooltip-trigger ">{children}</div>
-            <div class={`tooltip-popup ${classNamePopup||''} ${isSmall ? 'is-small' : ''}`}>{text}</div>
-          </>
-        : children
+          ? <>
+              <div class="tooltip-trigger ">{children}</div>
+              <div class={`tooltip-popup ${classNamePopup||''} ${isSmall ? 'is-small' : ''}`}>{text}</div>
+            </>
+          : children
       }
     </div>
   )

package/components/partials/form/checkbox.tsx

@@ -36,76 +36,76 @@ export function Checkbox({ name, id, size='sm', subtext, text, type='checkbox',
       <div className="flex shrink-0 mt-[2px]">
         {
           type !== 'toggle'
-          ? <div className={`group grid ${_size.checkbox} grid-cols-1`}>
-              <input
-                {...props}
-                id={id}
-                name={name}
-                type={type}
-                className={
-                  `${type === 'radio' ? 'rounded-full' : 'rounded'} col-start-1 row-start-1 appearance-none border border-gray-300 bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto ` + 
-                  // Default
-                  'checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-blue-600 ' +
-                  // Variable-selected color defined?
-                  'checked:!border-variable-selected checked:!bg-variable-selected indeterminate:!border-variable-selected indeterminate:!bg-variable-selected focus-visible:!outline-variable-selected'
-                }
-              />
-              <svg
-                fill="none"
-                viewBox="0 0 14 14"
-                className={`pointer-events-none col-start-1 row-start-1 ${_size.checkbox} self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25`}
-              >
-                {
-                  type === 'radio'
-                  ? <circle
-                      // cx={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 2}
-                      // cy={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 2}
-                      // r={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 6}
-                      cx={7}
-                      cy={7}
-                      r={2.5}
-                      className="fill-white opacity-0 group-has-[:checked]:opacity-100"
-                    />
-                  : <>
-                      <path
-                        d="M4 8L6 10L10 4.5"
-                        strokeWidth={2}
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        className="opacity-0 group-has-[:checked]:opacity-100"
-                      />
-                      <path
-                        d="M4 7H10"
-                        strokeWidth={2}
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        className="opacity-0 group-has-[:indeterminate]:opacity-100"
-                      />
-                    </>
-                }
-              </svg>
-            </div>
-          : <div className="group grid grid-cols-1">
-              <input 
-                {...props}
-                id={id}
-                name={name}
-                type="checkbox" 
-                class="sr-only peer"
-              />
-              <label 
-                for={id}
-                className={
-                  `col-start-1 row-start-1 relative ${_size.toggleWidth} ${_size.toggleHeight} bg-gray-200 peer-focus-visible:outline-none peer-focus-visible:ring-4 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full ${_size.toggleAfterSize} after:transition-all ` +
-                  // Default
-                  'peer-focus-visible:ring-blue-300 peer-checked:bg-blue-600 ' +
-                  // Variable-selected color defined?
-                  'peer-focus-visible:!ring-variable-selected peer-checked:!bg-variable-selected '
-                  // Dark mode not used yet...
-                  // 'dark:peer-focus-visible:ring-blue-800 dark:bg-gray-700 dark:border-gray-600 '
-                }
-              />
-            </div>
+            ? <div className={`group grid ${_size.checkbox} grid-cols-1`}>
+                <input
+                  {...props}
+                  id={id}
+                  name={name}
+                  type={type}
+                  className={
+                    `${type === 'radio' ? 'rounded-full' : 'rounded'} col-start-1 row-start-1 appearance-none border border-gray-300 bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto ` + 
+                    // Default
+                    'checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-blue-600 ' +
+                    // Variable-selected color defined?
+                    'checked:!border-variable-selected checked:!bg-variable-selected indeterminate:!border-variable-selected indeterminate:!bg-variable-selected focus-visible:!outline-variable-selected'
+                  }
+                />
+                <svg
+                  fill="none"
+                  viewBox="0 0 14 14"
+                  className={`pointer-events-none col-start-1 row-start-1 ${_size.checkbox} self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25`}
+                >
+                  {
+                    type === 'radio'
+                      ? <circle
+                          // cx={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 2}
+                          // cy={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 2}
+                          // r={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 6}
+                          cx={7}
+                          cy={7}
+                          r={2.5}
+                          className="fill-white opacity-0 group-has-[:checked]:opacity-100"
+                        />
+                      : <>
+                          <path
+                            d="M4 8L6 10L10 4.5"
+                            strokeWidth={2}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className="opacity-0 group-has-[:checked]:opacity-100"
+                          />
+                          <path
+                            d="M4 7H10"
+                            strokeWidth={2}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className="opacity-0 group-has-[:indeterminate]:opacity-100"
+                          />
+                        </>
+                  }
+                </svg>
+              </div>
+            : <div className="group grid grid-cols-1">
+                <input 
+                  {...props}
+                  id={id}
+                  name={name}
+                  type="checkbox" 
+                  class="sr-only peer"
+                />
+                <label 
+                  for={id}
+                  className={
+                    `col-start-1 row-start-1 relative ${_size.toggleWidth} ${_size.toggleHeight} bg-gray-200 peer-focus-visible:outline-none peer-focus-visible:ring-4 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full ${_size.toggleAfterSize} after:transition-all ` +
+                    // Default
+                    'peer-focus-visible:ring-blue-300 peer-checked:bg-blue-600 ' +
+                    // Variable-selected color defined?
+                    'peer-focus-visible:!ring-variable-selected peer-checked:!bg-variable-selected '
+                    // Dark mode not used yet...
+                    // 'dark:peer-focus-visible:ring-blue-800 dark:bg-gray-700 dark:border-gray-600 '
+                  }
+                />
+              </div>
         }
       </div>
       {text && 

package/components/partials/form/drop.tsx

@@ -12,7 +12,7 @@ type DropProps = {
   /** Field name or path on state (used to match errors), e.g. 'avatar', 'company.avatar' */
   name: string
   /** Called when file is selected or dropped */
-  onChange?: any // (event: { target: { id: string, value: File|FileList } }) => void
+  onChange?: (event: { target: { id: string, value: File|FileList } }) => void
   /** Whether to allow multiple file selection */
   multiple?: boolean
   /** State object to get the value and check errors against */

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

@@ -1,3 +1,4 @@
+/* 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'
@@ -6,27 +7,37 @@ type Mode = 'single' | 'multiple' | 'range'
 type DropdownRef = {
   setIsActive: (value: boolean) => void
 }
-export type FieldDateProps = React.InputHTMLAttributes<HTMLInputElement> & {
+
+type PreFieldDateProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
   name: string
+  mode: Mode
   id?: string 
-  mode?: Mode
   showTime?: boolean
-  // 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
   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: { id: string, value: null|number } }) => void
+      value?: null|number|string
+    })
+  | ({ mode: 'multiple' | 'range' } & PreFieldDateProps & { 
+      onChange: (e: { target: { id: 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({ 
-  mode='single', onChange, prefix='', value, numberOfMonths, Icon, showTime, dir = 'bottom-left', ...props 
+  mode, onChange, prefix='', value, numberOfMonths, Icon, showTime, dir = 'bottom-left', ...props 
 }: FieldDateProps) {
   const localePattern = `d MMM yyyy${showTime && mode == 'single' ? ' hh:mmaa' : ''}`
   const [prefixWidth, setPrefixWidth] = useState(0)
@@ -51,7 +62,7 @@ export function FieldDate({
   function onCalendarChange(mode: Mode, value: null|number|(null|number)[]) {
     if (mode == 'single' && !showTime) dropdownRef.current?.setIsActive(false) // Close the dropdown
     setInputValue(getInputValue(value))
-    if (onChange) onChange({ target: { id: id, value: value }})
+    if (onChange) onChange({ target: { id: id, value: value as any } })
   }
 
   function getInputValue(dates: Date|number|null|(Date|number|null)[]) {
@@ -82,8 +93,8 @@ export function FieldDate({
     
     // Update 
     const value = mode == 'single' ? split[0]?.getTime() ?? null : split.map(d => d?.getTime() ?? null)
-    if (onChange) onChange({ target: { id, value }})
-  }
+    if (onChange) onChange({ target: { id: id, value: value as any }})
+  } 
 
   return (
     <Dropdown

package/components/partials/styleguide.tsx

@@ -9,7 +9,7 @@ export function Styleguide() {
     address: '',
     amount: 100,
     brandColor: '#F3CA5F',
-    country: 'us',
+    country: 'nz',
     currency: 'nzd', // can be commented too
     date: Date.now(),
     'date-range': [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 33],
@@ -38,12 +38,13 @@ export function Styleguide() {
     { label: 'Delete' },
   ]
 
-  function onInputChange (e: { target: { id: string, value: unknown } }) {
-    if ((e.target.id == 'customer' || e.target.id == 'customer2') && e.target.value == '') {
+  function onCustomerInputChange (e: { target: { id: string, value: unknown } }) {
+    if (e.target.id == 'customer' && e.target.value == '0') {
       setCustomerSearch('')
-      e.target.value = null // clear the selected value
+      e.target.value = null // clear the select's selected value
+      setTimeout(() => alert('Adding new customer...'), 0)
     }
-    setState(s => ({ ...s, [e.target.id]: e.target.value }))
+    onChange(setState, e)
   }
 
   function onCustomerSearch (search: string) {
@@ -169,7 +170,7 @@ export function Styleguide() {
             type="country" 
             state={state} 
             options={useMemo(() => getCountryOptions(injectedConfig.countries), [])} 
-            onChange={onInputChange}
+            onChange={(e) => onChange(setState, e)}
           />
         </div>
         <div>
@@ -180,16 +181,16 @@ export function Styleguide() {
             name="customer" 
             type="customer"
             state={state}
-            onChange={onInputChange}
+            onChange={onCustomerInputChange}
             onInputChange={onCustomerSearch}
             options={[ 
               { 
                 className: 'bb', 
                 fixed: true,
-                value: '', 
+                value: '0',
                 label: (
                   <>
-                    <b>New Customer</b>
+                    <b>New Customer</b> (and clear select)
                     {customerSearch ? <> / Add <b>{ucFirst(customerSearch)}</b></> : ''}
                   </>
                 ), 
@@ -206,7 +207,7 @@ export function Styleguide() {
             name="currency"
             state={state} 
             options={useMemo(() => getCurrencyOptions(injectedConfig.currencies), [])} 
-            onChange={onInputChange}
+            onChange={(e) => onChange(setState, e)}
           />
         </div>
       </div>
@@ -215,7 +216,7 @@ export function Styleguide() {
       <div class="grid grid-cols-3 gap-x-6 mb-4">
         <div>
           <label for="firstName">First Name</label>
-          <Field name="firstName" state={state} onChange={onInputChange} />
+          <Field name="firstName" state={state} onChange={(e) => onChange(setState, e)} />
         </div>
         <div>
           <label for="email">Email Address</label>
@@ -238,7 +239,7 @@ export function Styleguide() {
         </div>
         <div>
           <label for="address">Input Error</label>
-          <Field name="address" placeholder="Address..." state={state} onChange={onInputChange} />
+          <Field name="address" placeholder="Address..." state={state} onChange={(e) => onChange(setState, e)} />
         </div>
         <div>
           <label for="description">Description</label>
@@ -246,11 +247,11 @@ export function Styleguide() {
         </div>
         <div>
           <label for="brandColor">Brand Color</label>
-          <Field name="brandColor" type="color" state={state} iconPos="left" onChange={onInputChange} />
+          <Field name="brandColor" type="color" state={state} iconPos="left" onChange={(e) => onChange(setState, e)} />
         </div>
         <div>
           <label for="amount">Amount ({state.amount})</label>
-          <Field name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={onInputChange} 
+          <Field name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={(e) => onChange(setState, e)} 
             config={injectedConfig} />
         </div>
       </div>
@@ -259,15 +260,15 @@ export function Styleguide() {
       <div class="grid grid-cols-1 gap-x-6 mb-4 sm:grid-cols-3">
         <div>
           <label for="date">Date with time</label>
-          <Field name="date-time" type="date" showTime={true} state={state} onChange={onInputChange} />
+          <Field name="date-time" type="date" mode="single" showTime={true} state={state} onChange={(e) => onChange(setState, e)} />
         </div>
         <div>
           <label for="date-range">Date range with prefix</label>
-          <Field name="date-range" type="date" mode="range" prefix="Date:" state={state} onChange={onInputChange} />
+          <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" state={state} onChange={onInputChange} dir="bottom-right" />
+          <Field name="date" type="date" mode="single" state={state} onChange={(e) => onChange(setState, e)} dir="bottom-right" />
         </div>
       </div>
 
@@ -275,13 +276,15 @@ export function Styleguide() {
       <div class="grid grid-cols-3 gap-x-6 mb-4">
         <div>
           <label for="avatar">Avatar</label>
-          <Drop class="is-small" name="avatar" state={state} onChange={onInputChange} awsUrl={injectedConfig.awsUrl} />
+          <Drop class="is-small" name="avatar" state={state} onChange={(e) => onChange(setState, e)} awsUrl={injectedConfig.awsUrl} />
         </div>
         <div>
           <label for="calendar">Calendar</label>
-          <Calendar mode="range" value={state.calendar} numberOfMonths={1} onChange={(mode, value) => {
-            onInputChange({ target: { id: 'calendar', value: value } })
-          }} />
+          <Calendar mode="range" value={state.calendar} numberOfMonths={1} 
+            onChange={(mode, value) => {
+              onChange(setState, { target: { id: 'calendar', value: value } })
+            }} 
+          />
         </div>
       </div>
 
@@ -291,7 +294,7 @@ export function Styleguide() {
         <form class="mb-8 text-left">
           <div>
             <label for="firstName2">First Name</label>
-            <Field name="firstName2" state={state} onChange={onInputChange} />
+            <Field name="firstName2" state={state} onChange={(e) => onChange(setState, e)} />
           </div>
           <div>
             <label for="email2">Email Address</label>

package/components/settings/settings-account.tsx

@@ -48,16 +48,16 @@ export function SettingsAccount() {
           <div class="cols cols-6 cols-gap-3">
             <div class="col">
               <label for="firstName">First Name(s)</label>
-              <Field name="firstName" placeholder="E.g. Bruce" state={state} onChange={onChange.bind(setState)} />
+              <Field name="firstName" placeholder="E.g. Bruce" state={state} onChange={(e) => onChange(setState, e)} />
             </div>
             <div class="col">
               <label for="lastName">Last Name</label>
-              <Field name="lastName" placeholder="E.g. Wayne" state={state} onChange={onChange.bind(setState)} />
+              <Field name="lastName" placeholder="E.g. Wayne" state={state} onChange={(e) => onChange(setState, e)} />
             </div>
             <div class="col">
               <label for="email">Email Address</label>
               <Field name="email" type="email" placeholder="Your email address..." state={state} 
-                onChange={onChange.bind(setState)} />
+                onChange={(e) => onChange(setState, e)} />
             </div>
             <div class="col">
               <Link to="/reset" class="label-right link2 underline2 is-active">Reset Password?</Link>

package/components/settings/settings-business.tsx

@@ -65,7 +65,7 @@ export function SettingsBusiness() {
                 type="country" 
                 state={state} 
                 options={useMemo(() => util.getCountryOptions(injectedConfig.countries), [])} 
-                onChange={onChange.bind(setState)}
+                onChange={(e) => onChange(setState, e)}
               />
             </div>
             <div class="col">
@@ -75,37 +75,37 @@ export function SettingsBusiness() {
                 type="country" 
                 state={state} 
                 options={useMemo(() => util.getCurrencyOptions(injectedConfig.currencies), [])}
-                onChange={onChange.bind(setState)}
+                onChange={(e) => onChange(setState, e)}
               />
             </div>
             <div class="col">
               <label for="business.name">Trading Name</label>
-              <Field name="business.name" placeholder="E.g. Wayne Enterprises" state={state} onChange={onChange.bind(setState)} />
+              <Field name="business.name" placeholder="E.g. Wayne Enterprises" state={state} onChange={(e) => onChange(setState, e)} />
             </div>
             <div class="col">
               <Link to="#" class="label-right link2 underline2 is-active">Custom Address</Link>
               <label for="business.address">Address (Start Typing...)</label>
-              <Field name="business.address.full" placeholder="" state={state} onChange={onChange.bind(setState)} />
+              <Field name="business.address.full" placeholder="" state={state} onChange={(e) => onChange(setState, e)} />
             </div>
             <div class="col">
               <label for="business.website">Website</label>
-              <Field name="business.website" placeholder="https://" state={state} onChange={onChange.bind(setState)} />
+              <Field name="business.website" placeholder="https://" state={state} onChange={(e) => onChange(setState, e)} />
             </div>
             <div class="col">
               <label for="business.phone">Mobile Number</label>
-              <Field name="business.phone" placeholder="" state={state} onChange={onChange.bind(setState)} />
+              <Field name="business.phone" placeholder="" state={state} onChange={(e) => onChange(setState, e)} />
             </div>
             <div class="col">
               <Link to="#" class="label-right link2 underline2 is-active">What&apos;s this for?</Link>
               <label for="tax.number">GST Number</label>
               <Field class="mb-0" name="tax.number" placeholder="Appears on your documents" state={state} 
-                onChange={onChange.bind(setState)} />
+                onChange={(e) => onChange(setState, e)} />
             </div>
             <div class="col">
               <Link to="#" class="label-right link2 underline2 is-active">What&apos;s this for?</Link>
               <label for="business.number">NZBN</label>
               <Field class="mb-0" name="business.number" type="text" rows="23" placeholder="Appears on your documents" state={state} 
-                onChange={onChange.bind(setState)} />
+                onChange={(e) => onChange(setState, e)} />
             </div>
           </div>
         </form>

package/components/settings/settings-team--member.tsx

@@ -42,7 +42,7 @@ export function SettingsTeamMember ({ showModal, setShowModal }: SettingsTeamMem
               name="role"
               isSearchable={false}
               placeholder="Select a role"
-              onChange={onChange.bind(setState)} 
+              onChange={(e) => onChange(setState, e)} 
               state={state}
               minMenuWidth={460}
               options={[
@@ -71,16 +71,16 @@ export function SettingsTeamMember ({ showModal, setShowModal }: SettingsTeamMem
             <label for="email">Email Address</label>
             <Field 
               name="email" type="email" placeholder="Your email address..." state={state} 
-              onChange={onChange.bind(setState)} 
+              onChange={(e) => onChange(setState, e)} 
             />
           </div>
           <div class="col">
             <label for="firstName">First Name</label>
-            <Field name="firstName" placeholder="E.g. Bruce" state={state} onChange={onChange.bind(setState)} />
+            <Field name="firstName" placeholder="E.g. Bruce" state={state} onChange={(e) => onChange(setState, e)} />
           </div>
           <div class="col">
             <label for="lastName">Last Name</label>
-            <Field name="lastName" placeholder="E.g. Wayne" state={state} onChange={onChange.bind(setState)} />
+            <Field name="lastName" placeholder="E.g. Wayne" state={state} onChange={(e) => onChange(setState, e)} />
           </div>
           <div class="col-12">
             <label for="message">Invitation Message</label>
@@ -88,7 +88,8 @@ export function SettingsTeamMember ({ showModal, setShowModal }: SettingsTeamMem
               name="message" 
               type="textarea" 
               placeholder={`${user.firstName} is inviting you to collaborate on ${injectedConfig?.name || 'Nitro'}.`} 
-              state={state} onChange={onChange.bind(setState)} 
+              state={state} 
+              onChange={(e) => onChange(setState, e)} 
             />
           </div>
         </div>

package/package.json

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

@@ -460,21 +460,25 @@ export function omit(obj: {
     [key: string]: unknown;
 };
 /**
- * Updates state from an input event, you can also update deep state properties
- * @param {ChangeEvent|PathValue} eventOrPathValue
+ * Updates state from an input event (deep state properties are supported)
+ * E.g. setState(s => ({ ...s, [e.target.id]: e.target.value }))
+ *
+ * @template T
+ * @param {React.Dispatch<React.SetStateAction<T>>} setState
+ * @param {{target: {id: string, value: unknown}}|[string, function|unknown]} eventOrPathValue
  * @param {Function} [beforeSetState] - optional function to run before setting the state
- * @returns {Promise<object>}
- * @this {function}
+ * @returns {Promise<T>}
  *
  * @example
- *   - <input onChange={onChange.bind(setState)} />
- *   - <input onChange={(e) => onChange.call(setState, e)} />
- *   - <input onChange={() => onChange.call(setState, ['address.name', 'Joe'])} />
- *
- * @typedef {import('react').ChangeEvent} ChangeEvent
- * @typedef {[string, function|unknown]} PathValue - e.g. ['name.first', (state) => state.myNameHere]
+ *   - <input onChange={(e) => onChange(setState, e)} />
+ *   - <input onChange={() => onChange(setState, ['address.name', 'Joe'])} />
  */
-export function onChange(this: Function, eventOrPathValue: ChangeEvent | PathValue, beforeSetState?: Function): Promise<object>;
+export function onChange<T>(setState: React.Dispatch<React.SetStateAction<T>>, eventOrPathValue: {
+    target: {
+        id: string;
+        value: unknown;
+    };
+} | [string, Function | unknown], beforeSetState?: Function): Promise<T>;
 /**
  * Pads a number
  * @param {number} [num=0]
@@ -666,14 +670,6 @@ export type Box = {
     bottomLeft: Point;
     topRight: Point;
 };
-/**
- * Updates state from an input event, you can also update deep state properties
- */
-export type ChangeEvent = import("react").ChangeEvent;
-/**
- * - e.g. ['name.first', (state) => state.myNameHere]
- */
-export type PathValue = [string, Function | unknown];
 /**
  * Build image URL from image array or object
  */

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

@@ -356,10 +356,10 @@ export function debounce(func, wait = 0, options) {
         return leadingEdge(lastCallTime)
       }
       if (maxing) {
-      // Handle invocations in a tight loop.
-      clearTimeout(timerId)
-      timerId = setTimeout(timerExpired, wait)
-      return invokeFunc(lastCallTime)
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId)
+        timerId = setTimeout(timerExpired, wait)
+        return invokeFunc(lastCallTime)
       }
     }
     if (timerId === undefined) {
@@ -1099,24 +1099,20 @@ export function omit (obj, fields) {
 }
 
 /**
- * Updates state from an input event, you can also update deep state properties
- * @param {ChangeEvent|PathValue} eventOrPathValue
+ * Updates state from an input event (deep state properties are supported)
+ * E.g. setState(s => ({ ...s, [e.target.id]: e.target.value }))
+ * 
+ * @template T
+ * @param {React.Dispatch<React.SetStateAction<T>>} setState
+ * @param {{target: {id: string, value: unknown}}|[string, function|unknown]} eventOrPathValue
  * @param {Function} [beforeSetState] - optional function to run before setting the state
- * @returns {Promise<object>}
- * @this {function}
+ * @returns {Promise<T>}
  * 
  * @example
- *   - <input onChange={onChange.bind(setState)} />
- *   - <input onChange={(e) => onChange.call(setState, e)} />
- *   - <input onChange={() => onChange.call(setState, ['address.name', 'Joe'])} />
- * 
- * @typedef {import('react').ChangeEvent} ChangeEvent
- * @typedef {[string, function|unknown]} PathValue - e.g. ['name.first', (state) => state.myNameHere]
+ *   - <input onChange={(e) => onChange(setState, e)} />
+ *   - <input onChange={() => onChange(setState, ['address.name', 'Joe'])} />
  */
-export function onChange (eventOrPathValue, beforeSetState) {
-  if (!isFunction(this)) {
-    throw new Error('Missing setState, please either call or bind setState to the function. E.g. onChange.call(setState, e)')
-  }
+export function onChange (setState, eventOrPathValue, beforeSetState) {
   /** @type {unknown|function} */
   let value
   /** @type {string[]} */
@@ -1124,7 +1120,7 @@ export function onChange (eventOrPathValue, beforeSetState) {
   /** @type {boolean} */
   let hasFiles
   
-  if (eventOrPathValue instanceof Event && eventOrPathValue.target) {
+  if (typeof eventOrPathValue === 'object' && 'target' in eventOrPathValue) {
     const element = /** @type {HTMLInputElement & {_value?: unknown}} */(eventOrPathValue.target) // we need to assume this is an input
     chunks = (element.id || element.name).split('.')
     hasFiles = !!element.files
@@ -1148,7 +1144,7 @@ export function onChange (eventOrPathValue, beforeSetState) {
 
   // Update state
   return new Promise((resolve) => {
-    this((/** @type object */ state) => {
+    setState((state) => {
       /** @type {{[key: string]: any}} */
       const newState = { ...state, ...(hasFiles ? { hasFiles } : {}) }
       let target = newState
@@ -1165,8 +1161,8 @@ export function onChange (eventOrPathValue, beforeSetState) {
       if (beforeSetState) {
         beforeSetState({ newState: newState, fieldName: chunks[i], parent: target })
       }
-      resolve(newState)
-      return newState
+      resolve(/** @type {T} */(newState))
+      return /** @type {T} */(newState)
     })
   })
 }
@@ -1281,8 +1277,8 @@ export async function request (route, data, event, isLoading) {
     const uri = route.replace(/^(post|put|delete|get) /, '')
     const method =
       /** @type {'post'|'put'|'delete'|'get'} */ (
-      (route.match(/^(post|put|delete|get) /)?.[1] || 'post').trim()
-    )
+        (route.match(/^(post|put|delete|get) /)?.[1] || 'post').trim()
+      )
 
     // show loading
     if (isLoading) {
@@ -1553,46 +1549,3 @@ export function ucFirst (string) {
   if (!string) return ''
   return string.charAt(0).toUpperCase() + string.slice(1)
 }
-
-
-
-
-//--------------------------------
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-// const axios2 = axios()
-// const addressSchema2 = addressSchema()
-// const url = buildUrl('https://example.com', { param1: 'value1', param2: 'value2' })
-// const camelCase2 = camelCase('camelCase')
-// const camelCaseToTitle2 = camelCaseToTitle('camelCase')
-// const camelCaseToHypen2 = camelCaseToHypen('camelCase')
-// const capitalise2 = capitalise()
-// const currency2 = currency(1234)
-// const currencyToCents2 = currencyToCents('$12.34')
-// const date2 = date(1234567890)
-// const debounce2 = debounce(() => {}, 1000)
-// const deepCopy2 = deepCopy([])
-// const deepFind2 = deepFind({})
-// const deepSave2 = deepSave({})
-// const each2 = each({})
-// const fileDownload2 = fileDownload('data', 'filename.txt')
-// const formatName2 = formatName('John Smith')
-// const formatSlug2 = formatSlug('John Smith')
-// const formData2 = formData({})
-// const fullName2 = fullName({ firstName: 'John', lastName: 'Smith' })
-// const [firstName, lastName] = fullNameSplit('name')
-// const countries2 = getCountryOptions({ US: { name: 'United States' }, GB: { name: 'United Kingdom' } })
-// const currencies2 = getCurrencyOptions({ USD: { name: 'United States Dollar' }, GBP: { name: 'British Pound' } })
-// const width = getPrefixWidth('£')
-// const directories2 = getDirectories({ join: (...args) => args.join('/') }, 'pwd')
-// const stripeClient = getStripeClientPromise('pk_test')
-// const getResponseErrors2 = getResponseErrors(new Error('test'))
-// const inArray2 = inArray([1, 2, 3], 's')
-// const isArray2 = isArray([1, 2, 3])
-
-// const isObject2 = isObject({})
-
-// const onChange2 = onChange.call(() => {}, { target: {} })
-
-// const queryObject2 = queryObject('?page=1&perPage=10')
-// const queryString2 = queryString({ page: 1, perPage: 10 })