nitro-web 0.0.108 → 0.0.109

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/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.108",
+  "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.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