nitro-web 0.0.107 → 0.0.109

package/components/auth/reset.tsx

@@ -4,9 +4,10 @@ import { Errors } from 'nitro-web/types'
 type resetInstructionsProps = {
   className?: string,
   elements?: { Button?: typeof Button },
+  redirectTo?: string,
 }
 
-export function ResetInstructions({ className, elements }: resetInstructionsProps) {
+export function ResetInstructions({ className, elements, redirectTo }: resetInstructionsProps) {
   const navigate = useNavigate()
   const isLoading = useState(false)
   const [, setStore] = useTracked()
@@ -20,7 +21,7 @@ export function ResetInstructions({ className, elements }: resetInstructionsProp
     try {
       await request('post /api/reset-instructions', state, event, isLoading, setState)
       setStore((s) => ({ ...s, message: 'Done! Please check your email.' }))
-      navigate('/signin')
+      navigate(redirectTo || '/signin')
     } catch (e) {
       return setState({ ...state, errors: e as Errors })
     }
@@ -47,7 +48,7 @@ export function ResetInstructions({ className, elements }: resetInstructionsProp
   )
 }
 
-export function ResetPassword({ className, elements }: resetInstructionsProps) {
+export function ResetPassword({ className, elements, redirectTo }: resetInstructionsProps) {
   const navigate = useNavigate()
   const params = useParams()
   const isLoading = useState(false)
@@ -67,7 +68,7 @@ export function ResetPassword({ className, elements }: resetInstructionsProps) {
     try {
       const data = await request('post /api/reset-password', state, event, isLoading, setState)
       setStore((s) => ({ ...s, ...data }))
-      navigate('/')
+      navigate(redirectTo || '/')
     } catch (e) {
       return setState({ ...state, errors: e as Errors })
     }

package/components/auth/signin.tsx

@@ -4,9 +4,10 @@ import { Errors } from 'nitro-web/types'
 type signinProps = {
   className?: string,
   elements?: { Button?: typeof Button },
+  redirectTo?: string,
 }
 
-export function Signin({ className, elements }: signinProps) {
+export function Signin({ className, elements, redirectTo }: signinProps) {
   const navigate = useNavigate()
   const location = useLocation()
   const isSignout = location.pathname == '/signout'
@@ -48,7 +49,7 @@ export function Signin({ className, elements }: signinProps) {
       setStore((s) => ({ ...s, ...data }))
       setTimeout(() => { // wait for setStore
         if (location.search.includes('redirect')) navigate(location.search.replace('?redirect=', ''))
-        else navigate('/')
+        else navigate(redirectTo || '/')
       }, 100) 
     } catch (e) {
       return setState({ ...state, errors: e as Errors})

package/components/auth/signup.tsx

@@ -4,9 +4,10 @@ import { Errors } from 'nitro-web/types'
 type signupProps = {
   className?: string,
   elements?: { Button?: typeof Button },
+  redirectTo?: string,
 }
 
-export function Signup({ className, elements }: signupProps) {
+export function Signup({ className, elements, redirectTo }: signupProps) {
   const navigate = useNavigate()
   const isLoading = useState(false)
   const [, setStore] = useTracked()
@@ -26,7 +27,7 @@ export function Signup({ className, elements }: signupProps) {
     try {
       const data = await request('post /api/signup', state, e, isLoading, setState)
       setStore((prev) => ({ ...prev, ...data }))
-      setTimeout(() => navigate('/'), 0) // wait for setStore
+      setTimeout(() => navigate(redirectTo || '/'), 0) // wait for setStore
     } catch (e) {
       setState((prev) => ({ ...prev, errors: e as Errors }))
     }

package/components/partials/element/calendar.tsx

@@ -1,4 +1,4 @@
-import { DayPicker, getDefaultClassNames } from 'react-day-picker'
+import { DayPicker, getDefaultClassNames, DayPickerProps as DayPickerPropsBase } from 'react-day-picker'
 import { isValid } from 'date-fns'
 import 'react-day-picker/style.css'
 import { IsFirstRender } from 'nitro-web'
@@ -11,8 +11,10 @@ type ModeSelection<T extends Mode> = (
   : T extends 'multiple' ? Date[]
   : { from?: Date; to?: Date }
 )
+export type DayPickerProps = Omit<DayPickerPropsBase, 
+  'mode' | 'selected' | 'onSelect' | 'modifiersClassNames' | 'classNames' | 'numberOfMonths'  | 'month' | 'onMonthChange'>
 
-export type CalendarProps = {
+export type CalendarProps = DayPickerProps & {
   mode?: Mode
   onChange?: (mode: Mode, value: null|number|(null|number)[]) => void
   value?: null|number|string|(null|number|string)[]
@@ -22,7 +24,8 @@ export type CalendarProps = {
   preserveTime?: boolean // just for single mode
 }
 
-export function Calendar({ mode='single', onChange, value, numberOfMonths, month: monthProp, className, preserveTime }: CalendarProps) {
+export function Calendar({ mode='single', onChange, value, numberOfMonths, month: monthProp, className, preserveTime, 
+  ...props }: CalendarProps) {
   const isFirstRender = IsFirstRender()
   const isRange = mode == 'range'
 
@@ -113,11 +116,11 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
     <div>
       {
         mode === 'single' ? (
-          <DayPicker mode="single" selected={dates[0]} {...common} className={className} />
+          <DayPicker  {...props} {...common} mode="single" selected={dates[0]} className={className} />
         ) : mode === 'range' ? (
-          <DayPicker mode="range" selected={{ from: dates[0], to: dates[1] }} {...common} className={className} />
+          <DayPicker {...props} {...common} mode="range" selected={{ from: dates[0], to: dates[1] }} className={className} />
         ) : (
-          <DayPicker mode="multiple" selected={dates.filter((d) => !!d)} {...common} className={className} />
+          <DayPicker {...props} {...common} mode="multiple" selected={dates.filter((d) => !!d)} className={className} />
         )
       }
     </div>

package/components/partials/element/table.tsx

@@ -100,8 +100,8 @@ export function Table<T extends TableRow>({
     else return align == 'left' ? '' : align == 'center' ? 'text-center' : 'text-right'
   }, [])
 
-  // Reset selected rows when the location changes
-  useEffect(() => setSelectedRowIds([]), [location.key])
+  // Reset selected rows when the location changes, or the number of rows changed (e.g. when a row is removed)
+  useEffect(() => setSelectedRowIds([]), [location.key, rows.map(row => row?._id||'').join(',')])
 
   // --- Sorting ---
 
@@ -134,7 +134,8 @@ export function Table<T extends TableRow>({
             columns.map((col, j) => {
               const disableSort = col.disableSort || selectedRowIds.length
               const sideColor = j == 0 && rowSideColor ? rowSideColor(undefined) : undefined
-              const pl = j == 0 ? columnPaddingX : columnGap
+              const sideColorPadding = sideColor && rows.length > 0 ? sideColor.width + 5 : 0
+              const pl = sideColorPadding + (j == 0 ? columnPaddingX : columnGap)
               const pr = j == columns.length - 1 ? columnPaddingX : columnGap
               return (
                 <div
@@ -152,13 +153,10 @@ export function Table<T extends TableRow>({
                   )}
                 >
                   <div
-                    style={{ 
-                      maxHeight: rowContentHeightMax, 
-                      paddingLeft: sideColor && rows.length > 0 ? sideColor.width + 5 : 0,
-                    }}
+                    style={{ maxHeight: rowContentHeightMax }}
                     className={twMerge(
+                      col.value == 'checkbox' ? 'relative' : getLineClampClassName(col.rowLinesMax),
                       rowContentHeightMax ? 'overflow-hidden' : '',
-                      getLineClampClassName(col.rowLinesMax),
                       col.overflow ? 'overflow-visible' : '',
                       col.innerClassName
                     )}
@@ -175,7 +173,7 @@ export function Table<T extends TableRow>({
                               onChange={(e) => onSelect('all', e.target.checked)}
                             />
                             <div 
-                              className={`${selectedRowIds.length ? 'block' : 'hidden'} [&>*]:absolute [&>*]:inset-y-0 [&>*]:left-[68px] [&>*]:z-10`}
+                              className={`${selectedRowIds.length ? 'block' : 'hidden'} [&>*]:absolute [&>*]:inset-y-0 [&>*]:left-[35px] [&>*]:z-10 whitespace-nowrap`}
                             >
                               {generateCheckboxActions && generateCheckboxActions(selectedRowIds)}
                             </div>

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

@@ -18,21 +18,20 @@ type NumericFormatProps = React.InputHTMLAttributes<HTMLInputElement> & {
 export type FieldCurrencyProps = NumericFormatProps & {
   name: string
   /** name is applied if id is not provided */
-  id?: string 
-  /** e.g. { currencies: { nzd: { symbol: '$', digits: 2 } } } (check out the nitro example for more info) */
-  config: {
-    currencies: { [key: string]: { symbol: string, digits: number } }, 
-    countries: { [key: string]: { numberFormats: { currency: string } } } 
-  }
+  id?: string
   /** currency iso, e.g. 'nzd' */
   currency: string
+  /** override the default currencies array used to lookup currency symbol and digits, e.g. {nzd: { symbol: '$', digits: 2 }} */
+  currencies?: { [key: string]: { symbol: string, digits: number } }, 
+  /** override the default CLDR country currency format, e.g. '¤#,##0.00' */
+  format?: string, 
   onChange?: (event: { target: { name: string, value: string|number|null } }) => void
   /** value should be in cents */
   value?: string|number|null
   defaultValue?: number | string | null
 }
 
-export function FieldCurrency({ config, currency='nzd', onChange, value, defaultValue, ...props }: FieldCurrencyProps) {
+export function FieldCurrency({ currency='nzd', currencies, format, onChange, value, defaultValue, ...props }: FieldCurrencyProps) {
   const [dontFix, setDontFix] = useState(false)
   const [settings, setSettings] = useState(() => getCurrencySettings(currency))
   const [dollars, setDollars] = useState(() => toDollars(value, true, settings))
@@ -61,7 +60,7 @@ export function FieldCurrency({ config, currency='nzd', onChange, value, default
 
   useEffect(() => {
     // Get the prefix content width
-    setPrefixWidth(settings.prefix == '$' ? getPrefixWidth(settings.prefix, 1) : 0)
+    setPrefixWidth(settings.prefix ? getPrefixWidth(settings.prefix, 1) : 0)
   }, [settings.prefix])
 
   function toCents(value?: string|number|null) {
@@ -95,29 +94,33 @@ export function FieldCurrency({ config, currency='nzd', onChange, value, default
       prefix?: string,            // e.g. '$'
       suffix?: string             // e.g. ''
     } = { currency }
-    const { symbol, digits } = config.currencies[currency]
-    let format = config.countries['nz'].numberFormats.currency
+
+    let _format = format || defaultFormat
+    const _currencies = currencies ?? defaultCurrencies
+    const currencyObject = _currencies[currency as keyof typeof _currencies]
+    const symbol = currencyObject ? currencyObject.symbol : ''
+    const digits = currencyObject ? currencyObject.digits : 2
 
     // Check for currency symbol (¤) and determine its position
-    if (format.indexOf('¤') !== -1) {
-      const position = format.indexOf('¤') === 0 ? 'prefix' : 'suffix'
+    if (_format.indexOf('¤') !== -1) {
+      const position = _format.indexOf('¤') === 0 ? 'prefix' : 'suffix'
       output[position] = symbol
-      format = format.replace('¤', '')
+      _format = _format.replace('¤', '')
     }
 
     // Find and set the thousands separator
-    const thousandMatch = format.match(/[^0-9#]/)
+    const thousandMatch = _format.match(/[^0-9#]/)
     if (thousandMatch) output.thousandSeparator = thousandMatch[0]
 
     // Find and set the decimal separator and fraction digits
-    const decimalMatch = format.match(/0[^0-9]/)
+    const decimalMatch = _format.match(/0[^0-9]/)
     if (decimalMatch) {
       output.decimalSeparator = decimalMatch[0].slice(1)
       if (typeof digits !== 'undefined') {
         output.minDecimals = digits
         output.maxDecimals = digits
       } else {
-        const fractionDigits = format.split(output.decimalSeparator)[1]
+        const fractionDigits = _format.split(output.decimalSeparator)[1]
         if (fractionDigits) {
           output.minDecimals = fractionDigits.length 
           output.maxDecimals = fractionDigits.length
@@ -156,3 +159,14 @@ export function FieldCurrency({ config, currency='nzd', onChange, value, default
     </div>
   )
 }
+
+const defaultCurrencies = {
+  nzd: { symbol: '$', digits: 2 },
+  aud: { symbol: '$', digits: 2 },
+  usd: { symbol: '$', digits: 2 },
+  eur: { symbol: '€', digits: 2 },
+  gbp: { symbol: '£', digits: 2 },
+  btc: { symbol: '₿', digits: 8 },
+}
+
+const defaultFormat = '¤#,##0.00'

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

@@ -2,7 +2,7 @@
 import { format, isValid, parse } from 'date-fns'
 import { getPrefixWidth } from 'nitro-web/util'
 import { Calendar, Dropdown } from 'nitro-web'
-import { dayButtonClassName } from '../element/calendar'
+import { dayButtonClassName, DayPickerProps } from '../element/calendar'
 
 type Mode = 'single' | 'multiple' | 'range'
 type DropdownRef = {
@@ -26,6 +26,8 @@ type PreFieldDateProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onCh
   Icon?: React.ReactNode
   /** direction of the dropdown */
   dir?: 'bottom-left'|'bottom-right'|'top-left'|'top-right'
+  /** Calendar props */
+  DayPickerProps?: DayPickerProps
 }
 
 // An array is returned for mode = 'multiple' or 'range'
@@ -54,6 +56,7 @@ export function FieldDate({
   prefix = '',
   showTime,
   value: valueProp,
+  DayPickerProps,
   ...props
 }: FieldDateProps) {
   const localePattern = `d MMM yyyy${showTime && mode == 'single' ? ' hh:mmaa' : ''}`
@@ -146,10 +149,11 @@ export function FieldDate({
         <div className="flex">
           <Calendar 
             // Calendar actually accepts an array of dates, but the type is not typed correctly
-            {...{ mode: mode, value: dates as any, numberOfMonths: numberOfMonths, month: month }} 
+            {...{ mode: mode, value: dates as any, numberOfMonths: numberOfMonths, month: month }}
+            {...DayPickerProps}
             preserveTime={!!showTime} 
             onChange={onCalendarChange} 
-            className="pt-1 pb-2  px-3" 
+            className="pt-1 pb-2 px-3" 
           />
           {!!showTime && mode == 'single' && <TimePicker date={dates?.[0]} onChange={onCalendarChange} />}
         </div>

package/components/partials/styleguide.tsx

@@ -18,6 +18,7 @@ type StyleguideProps = {
   className?: string
   elements?: { Button?: typeof ButtonNitro }
   children?: React.ReactNode
+  currencies?: { [key: string]: { name: string, symbol: string, digits: number } }
 }
 
 type QuoteExample = {
@@ -29,7 +30,7 @@ type QuoteExample = {
   status: string
 }
 
-export function Styleguide({ className, elements, children }: StyleguideProps) {
+export function Styleguide({ className, elements, children, currencies }: StyleguideProps) {
   const Button = elements?.Button || ButtonNitro
   const [, setStore] = useTracked()
   const [customerSearch, setCustomerSearch] = useState('')
@@ -40,7 +41,7 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
     brandColor: '#F3CA5F',
     colorsMulti: ['blue', 'green'],
     country: 'nz',
-    currency: 'nzd', // can be commented too
+    currency: 'nzd',
     date: Date.now(),
     'date-range': [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 33],
     'date-time': Date.now(),
@@ -351,7 +352,7 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
             name="country" 
             mode="country"
             state={state} 
-            options={useMemo(() => getCountryOptions(injectedConfig.countries), [])} 
+            options={useMemo(() => [{ value: 'nz', label: 'New Zealand' }, { value: 'au', label: 'Australia' }], [])} 
             onChange={(e) => onChange(setState, e)}
           />
         </div>
@@ -384,11 +385,11 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
           />
         </div>
         <div>
-          <label for="currency">Currencies (Error)</label>
+          <label for="currency">Currencies</label>
           <Select 
             name="currency"
             state={state} 
-            options={useMemo(() => getCurrencyOptions(injectedConfig.currencies), [])} 
+            options={useMemo(() => (currencies ? getCurrencyOptions(currencies) : [{ value: 'nzd', label: 'New Zealand Dollar' }, { value: 'aud', label: 'Australian Dollar' }]), [])} 
             onChange={(e) => onChange(setState, e)}
           />
         </div>
@@ -433,8 +434,12 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
         </div>
         <div>
           <label for="amount">Amount ({state.amount})</label>
-          <Field name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={(e) => onChange(setState, e)} 
-            config={injectedConfig} />
+          <Field 
+            name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={(e) => onChange(setState, e)} 
+            // Example of using a custom format and currencies, e.g. 
+            format={'¤#,##0.00'} 
+            currencies={currencies} 
+          />
         </div>
       </div>
 
@@ -445,8 +450,18 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
           <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={(e) => onChange(setState, e)} />
+          <label for="date-range">Date range (with prefix & disabled days)</label>
+          <Field 
+            name="date-range" 
+            type="date" 
+            mode="range" 
+            prefix="Date:" 
+            state={state} 
+            onChange={(e) => onChange(setState, e)} 
+            DayPickerProps={{
+              disabled: { after: new Date(Date.now() + 1000 * 60 * 60 * 24 * 45) }
+            }} 
+          />
         </div>
         <div>
           <label for="date">Date multi-select (right aligned)</label>

package/package.json

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

@@ -1,5 +1,5 @@
 /**
- * Returns an address monastery schema which Google autocomplete should return
+ * Returns a monastery schema which matches the Google autocomplete output
  */
 export function addressSchema(): {
     city: {

package/types.ts

@@ -3,8 +3,6 @@
 type InjectedConfig = {
   awsUrl?: string
   clientUrl: string
-  countries: { [key: string]: { name: string, numberFormats: { currency: string } } } // for input-currency.tsx
-  currencies: { [key: string]: { name: string, symbol: string, digits: number } } // for input-currency.tsx
   env: string
   googleMapsApiKey?: string
   isDemo: boolean // implicitly defined by webpack
@@ -59,6 +57,24 @@ export type Store = {
   user?: User,
 }
 
+// util.addressSchema
+export type Address = {
+  city?: string
+  country?: string
+  full?: string
+  line1?: string
+  line2?: string
+  number?: string
+  postcode?: string
+  suburb?: string
+  unit?: string
+  area?: {
+    bottomLeft?: [number, number]
+    topRight?: [number, number]
+  }
+  location?: [number, number]
+}
+
 export type Svg = React.FC<React.SVGProps<SVGElement>>
 
 /*

package/util.js

@@ -35,7 +35,7 @@ let scrollbarCache
 let axiosNonce
 
 /**
- * Returns an address monastery schema which Google autocomplete should return
+ * Returns a monastery schema which matches the Google autocomplete output
  */
 export function addressSchema () {
   // Google autocomplete should return the following object