nitro-web 0.2.11 → 0.2.13

package/components/auth/auth.api.js

@@ -739,8 +739,9 @@ export function resolveBaseUrl(reqUrl, cfgUrl) {
   try {
     const reqHost = new URL(reqUrl).hostname
     const cfgHost = new URL(cfgUrl).hostname
-    const reqApex = getDomain(reqHost)
-    const cfgApex = getDomain(cfgHost)
+    // tldts treats "localhost" as an unknown suffix, so we add an override
+    const reqApex = /(^|\.)localhost$/.test(reqHost) ? 'localhost' : getDomain(reqHost)
+    const cfgApex = /(^|\.)localhost$/.test(cfgHost) ? 'localhost' : getDomain(cfgHost)
     const errorMessage = 'Nitro warning: auth.resolveBaseUrl: The request origin and the config baseUrl ' +
       'are not the same apex domain. Defaulting to the Cfg baseUrl. Req:'
 

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

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

package/components/partials/form/field.tsx

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

package/components/partials/styleguide.tsx

@@ -69,6 +69,7 @@ export function Styleguide({ className, elements, children, currencies, groups }
       colorsMulti: ['blue', 'green'],
       country: 'cd',
       currency: 'nzd',
+      percent: 1250,
       customer: '1',
       date: Date.now(),
       dateRange: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 33],
@@ -89,7 +90,8 @@ export function Styleguide({ className, elements, children, currencies, groups }
       brandColor: '#8656ED',
       colorsMulti: ['blue'],
       country: 'au',
-      currency: 'btc', 
+      currency: 'btc',
+      percent: 875,
       date: Date.now() + 1000 * 60 * 60 * 24 * 1.2,
       dateRange: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 5.2],
       dateMultiple: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 3.2],
@@ -223,7 +225,7 @@ export function Styleguide({ className, elements, children, currencies, groups }
             options={[
               { label: 'Set Status', onClick: () => { console.log('set', row._id) } }, 
               { label: 'Delete', onClick: () => { console.log('remove', row._id) } },
-            ]} 
+            ]}
             dir={rows.slice(0, perPage).length - 3 < i ? 'top-right' : 'bottom-right'} 
             minWidth={100}
           >
@@ -583,13 +585,20 @@ export function Styleguide({ className, elements, children, currencies, groups }
             <div>
               <label for="amount">Amount ({state.amount})</label>
               <Field 
-                name="amount" type="currency" state={state} currency={state.currency || 'nzd'} 
+                name="amount" 
+                type="currency" 
+                state={state} 
+                currency={state.currency || 'nzd'} 
                 // Example of using a custom format and currencies, e.g. 
                 format={'¤#,##0.00'} 
                 currencies={currencies}
                 onChange={(e) => onChange(e, setState)}
               />
             </div>
+            <div>
+              <label for="percent">Percent ({state.percent})</label>
+              <Field name="percent" type="percent" state={state} onChange={(e) => onChange(e, setState)} minDecimals={1} maxDecimals={4} />
+            </div>
             <div>
               <label for="firstName">First Name (disabled)</label>
               <Field name="firstName" state={state} onChange={(e) => onChange(e, setState)} disabled />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "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 🚀",
@@ -31,7 +31,7 @@
     "minor": "npm run types && standard-version -a --release-as minor && npm publish && cd ../webpack && npm publish",
     "patch": "npm run types && standard-version -a --release-as patch && npm publish && cd ../webpack && npm publish",
     "republish": "npm publish && cd ../webpack && npm publish",
-    "test": "node --test components/**/*.test.js",
+    "test": "node --test tests/",
     "types": "tsc util.js ./server/index.js --declaration --declarationMap --allowJs --emitDeclarationOnly --jsx react-jsx --esModuleInterop --skipLibCheck --outDir types && cd ../webpack && npm run types -w . && cd ../core"
   },
   "dependencies": {

package/server/email/index.js

@@ -26,8 +26,8 @@ export const optionalEmailConfigKeys = ['emailReplyTo', 'emailTestMode', 'mailgu
  * @param {string} opts.to - Recipient(s), e.g. "Bruce<bruce@wayneenterprises.com>,..."
  * @param {Config} opts.config - Config object
  * @param {string} [opts.bcc] - BCC, e.g. "Bruce<bruce@wayneenterprises.com>" (not sent in development)
- * @param {object} [opts.data] - template data shared across recipients
- * @param {object} [opts.swigData] - vars for Nunjucks/Swig render only (not sent to Mailgun)
+ * @param {object} [opts.data] - common template data shared across recipients
+ * @param {object} [opts.swigData] - vars for Nunjucks/Swig render only (not sent to Mailgun). Inherits data.
  * @param {string} [opts.from] - sender address, e.g. "Bruce<bruce@wayneenterprises.com>"
  * @param {string} [opts.replyTo] - reply-to address, e.g. "Bruce<bruce@wayneenterprises.com>"
  * @param {object} [opts.recipientVariables] - Mailgun recipient-variables for batch sending

package/{components/auth → tests}/auth.api.test.js

@@ -1,6 +1,6 @@
 import { test } from 'node:test'
 import assert from 'node:assert/strict'
-import { resolveBaseUrl } from './auth.api.js'
+import { resolveBaseUrl } from '../components/auth/auth.api.js'
 
 const cases = [
   // [cfgUrl, reqUrl, expected, description]
@@ -16,6 +16,7 @@ const cases = [
 
   ['http://localhost:3000',      'http://localhost:3001',           'http://localhost:3001',          'match: localhost: port (ignored)'],
   ['http://localhost:3000',      'http://app.localhost:3001',       'http://app.localhost:3001',      'match: localhost: nested'],
+  ['http://app.localhost:3000',  'http://app2.localhost:3001',      'http://app2.localhost:3001',     'match: localhost: sibling'],
   ['http://127.0.0.1:3000',      'http://127.0.0.1:3000',           'http://127.0.0.1:3000',          'match: IP exact'],
 
   // cfg: mismatch

package/types/components/auth/auth.api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auth.api.d.ts","sourceRoot":"","sources":["../../../components/auth/auth.api.js"],"names":[],"mappings":"AAqLA,qEAUC;AAED,qEAwEC;AAED,qEAGC;AAED,gEAMC;AAED,iEAgBC;AAED,oEAGC;AAED,oEA8BC;AAED,gEAgCC;AAID,qGAkDC;AAED;;;GAOC;AAED;;GAKC;AAID;;;;;;;;;GASG;AACH,8EAPG;IAA0B,QAAQ,GAA1B,MAAM;IACY,SAAS,GAA3B,MAAM;IACY,OAAO,GAAzB,MAAM;CACd,YAAQ,MAAM,+BACN,OAAO,GACL,OAAO,CAAC,MAAM,CAAC,CAqE3B;AAED,kFAiBC;AAED,mEAOC;AAED,+EAWC;AAED,sHAiBC;AAED;;;GAEC;AAED;;;GA0BC;AAED;;;;;;;;;GAmCC;AAED;;;;;;;;;;;;;;GAcG;AACH,mGAZG;IAAsD,IAAI,EAAlD,OAAO,GAAG,QAAQ,GAAG,eAAe;IACpB,EAAE,EAAlB,MAAM;IAKH,OAAO,EAJV;QACN,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;QACtB,CAAK,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB;IAC0B,YAAY;IACZ,eAAe;IACjB,OAAO,GAAxB,MAAM;CACd,GAAU,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;CAAC,CAAC,CAmEtE;AAED,0CAEC;AAED,8DA6BC;AAED,gFAKC;;;;;;;;;;;;;;;;;;;;AAzuBD;;;;;;;;;;;;;;;EAiBC;AA0ED,0DAEC;AAgCD,mDAEC;AAtBD,iDAkBC;AA5BD,2DAQC;AA0BD,2DAwBC;AAtID,0EAsEC"}
+{"version":3,"file":"auth.api.d.ts","sourceRoot":"","sources":["../../../components/auth/auth.api.js"],"names":[],"mappings":"AAqLA,qEAUC;AAED,qEAwEC;AAED,qEAGC;AAED,gEAMC;AAED,iEAgBC;AAED,oEAGC;AAED,oEA8BC;AAED,gEAgCC;AAID,qGAkDC;AAED;;;GAOC;AAED;;GAKC;AAID;;;;;;;;;GASG;AACH,8EAPG;IAA0B,QAAQ,GAA1B,MAAM;IACY,SAAS,GAA3B,MAAM;IACY,OAAO,GAAzB,MAAM;CACd,YAAQ,MAAM,+BACN,OAAO,GACL,OAAO,CAAC,MAAM,CAAC,CAqE3B;AAED,kFAiBC;AAED,mEAOC;AAED,+EAWC;AAED,sHAiBC;AAED;;;GAEC;AAED;;;GA0BC;AAED;;;;;;;;;GAmCC;AAED;;;;;;;;;;;;;;GAcG;AACH,mGAZG;IAAsD,IAAI,EAAlD,OAAO,GAAG,QAAQ,GAAG,eAAe;IACpB,EAAE,EAAlB,MAAM;IAKH,OAAO,EAJV;QACN,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;QACtB,CAAK,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB;IAC0B,YAAY;IACZ,eAAe;IACjB,OAAO,GAAxB,MAAM;CACd,GAAU,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;CAAC,CAAC,CAmEtE;AAED,0CAEC;AAED,8DA8BC;AAED,gFAKC;;;;;;;;;;;;;;;;;;;;AA1uBD;;;;;;;;;;;;;;;EAiBC;AA0ED,0DAEC;AAgCD,mDAEC;AAtBD,iDAkBC;AA5BD,2DAQC;AA0BD,2DAwBC;AAtID,0EAsEC"}

package/types/server/email/index.d.ts

@@ -7,8 +7,8 @@
  * @param {string} opts.to - Recipient(s), e.g. "Bruce<bruce@wayneenterprises.com>,..."
  * @param {Config} opts.config - Config object
  * @param {string} [opts.bcc] - BCC, e.g. "Bruce<bruce@wayneenterprises.com>" (not sent in development)
- * @param {object} [opts.data] - template data shared across recipients
- * @param {object} [opts.swigData] - vars for Nunjucks/Swig render only (not sent to Mailgun)
+ * @param {object} [opts.data] - common template data shared across recipients
+ * @param {object} [opts.swigData] - vars for Nunjucks/Swig render only (not sent to Mailgun). Inherits data.
  * @param {string} [opts.from] - sender address, e.g. "Bruce<bruce@wayneenterprises.com>"
  * @param {string} [opts.replyTo] - reply-to address, e.g. "Bruce<bruce@wayneenterprises.com>"
  * @param {object} [opts.recipientVariables] - Mailgun recipient-variables for batch sending