nitro-web 0.0.15 → 0.0.17

package/components/partials/styleguide.tsx

@@ -1,21 +1,23 @@
-import { Drop, Dropdown, Input, Select, Button, Checkbox, GithubLink } from 'nitro-web'
+import { Drop, Dropdown, Field, Select, Button, Checkbox, GithubLink, isDemo, Modal, Calendar } from 'nitro-web'
 import { getCountryOptions, getCurrencyOptions, ucFirst } from 'nitro-web/util'
 import { CheckIcon } from '@heroicons/react/20/solid'
 import { Config } from 'types'
 
 export function Styleguide({ config }: { config: Config }) {
   const [customerSearch, setCustomerSearch] = useState('')
+  const [showModal1, setShowModal1] = useState(false)
   const [state, setState] = useState({
     address: '',
-    country: 'us',
-    currency: 'nzd', // can be commented too
     amount: 100,
     brandColor: '#F3CA5F',
-    firstName: 'Bruce',
+    country: 'us',
+    currency: 'nzd', // can be commented too
     date: Date.now(),
+    'date-range': [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 33],
+    calendar: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 8],
+    firstName: 'Bruce',
     errors: [
       { title: 'address', detail: 'Address is required' },
-      { title: 'currency', detail: 'Currency is required' },
     ],
   })
 
@@ -52,7 +54,7 @@ export function Styleguide({ config }: { config: Config }) {
     <div class="mb-10 text-left max-w-[1100px]">
       <GithubLink filename={__filename} />
       <div class="mb-7">
-        <h1 class="h1">Styleguide</h1>
+        <h1 class="h1">{isDemo ? 'Design System' : 'Style Guide'}</h1>
         <p>
           Components are styled using&nbsp;
           <a href="https://v3.tailwindcss.com/docs/configuration" class="underline" target="_blank" rel="noreferrer">TailwindCSS</a>. 
@@ -60,33 +62,19 @@ export function Styleguide({ config }: { config: Config }) {
       </div>
 
       <h2 class="h3">Links</h2>
-      <div class="mb-8">
+      <div class="mb-10">
         <a class="mr-2" href="#">Default</a>
         <a class="underline1 is-active mr-2" href="#">Underline1</a>
         <a class="underline2 is-active mr-2" href="#">Underline2</a>
       </div>
 
-      <h2 class="h3">Checkboxes</h2>
-      <div class="grid grid-cols-3 gap-x-6">
-        <div>
-          <label for="input0">Label</label>
-          <Checkbox name="input0" type="checkbox" text="Checkbox" subtext="some additional text here." defaultChecked />
-        </div>
-        <div>
-          <label for="input1">Label</label>
-          <Checkbox name="input1" type="radio" text="Radio 1" subtext="some additional text here 1." id="input1-1" class="!mb-0" 
-            defaultChecked />
-          <Checkbox name="input1" type="radio" text="Radio 2" subtext="some additional text here 2." id="input1-2" class="!mt-0" />
-        </div>
-        <div>
-          <label for="input2">Label</label>
-          <Checkbox name="input2" type="toggle" text="Toggle sm" subtext="some additional text here." class="!mb-0"  defaultChecked />
-          <Checkbox name="input3" type="toggle" text="Toggle md" size="md" subtext="some additional text here." />
-        </div>
+      <h2 class="h3">Modals</h2>
+      <div class="flex flex-wrap gap-x-6 gap-y-4 mb-10">
+        <div><Button color="primary" onClick={() => setShowModal1(true)}>Modal (default)</Button></div>
       </div>
 
       <h2 class="h3">Dropdowns</h2>
-      <div class="flex flex-wrap gap-x-6 gap-y-4 mb-8">
+      <div class="flex flex-wrap gap-x-6 gap-y-4 mb-10">
         <div>
           <Dropdown options={options} minWidth="250px">
             <Button IconRight="v" class="gap-x-3">Dropdown</Button>
@@ -110,7 +98,7 @@ export function Styleguide({ config }: { config: Config }) {
       </div>
 
       <h2 class="h3">Buttons</h2>
-      <div class="flex flex-wrap gap-x-6 gap-y-4 mb-8">
+      <div class="flex flex-wrap gap-x-6 gap-y-4 mb-10">
         <div><Button color="primary">primary (default)</Button></div>
         <div><Button color="secondary">secondary button</Button></div>
         <div><Button color="white">white button</Button></div>
@@ -124,8 +112,27 @@ export function Styleguide({ config }: { config: Config }) {
         <div><Button color="primary" IconRight="v" isLoading>primary isLoading</Button></div>
       </div>
 
+      <h2 class="h3">Checkboxes</h2>
+      <div class="grid grid-cols-3 gap-x-6 mb-4">
+        <div>
+          <label for="input2">Label</label>
+          <Checkbox name="input2" type="toggle" text="Toggle sm" subtext="some additional text here." class="!mb-0"  defaultChecked />
+          <Checkbox name="input3" type="toggle" text="Toggle md" size="md" subtext="some additional text here." />
+        </div>
+        <div>
+          <label for="input1">Label</label>
+          <Checkbox name="input1" type="radio" text="Radio 1" subtext="some additional text here 1." id="input1-1" class="!mb-0" 
+            defaultChecked />
+          <Checkbox name="input1" type="radio" text="Radio 2" subtext="some additional text here 2." id="input1-2" class="!mt-0" />
+        </div>
+        <div>
+          <label for="input0">Label</label>
+          <Checkbox name="input0" type="checkbox" text="Checkbox" subtext="some additional text here." defaultChecked />
+        </div>
+      </div>
+
       <h2 class="h3">Selects</h2>
-      <div class="grid grid-cols-3 lg:grid-cols-3 gap-x-6">
+      <div class="grid grid-cols-3 lg:grid-cols-3 gap-x-6 mb-4">
         <div>
           <label for="action">Default</label>
           <Select 
@@ -204,53 +211,88 @@ export function Styleguide({ config }: { config: Config }) {
       <div class="grid grid-cols-3 gap-x-6 mb-4">
         <div>
           <label for="firstName">First Name</label>
-          <Input name="firstName" state={state} onChange={onInputChange} />
+          <Field name="firstName" state={state} onChange={onInputChange} />
         </div>
         <div>
           <label for="email">Email Address</label>
-          <Input name="email" type="email" placeholder="Your email address..."/>
+          <Field name="email" type="email" placeholder="Your email address..."/>
         </div>
         <div>
           <div class="flex justify-between"> 
             <label for="password">Password</label>
             <a href="#" class="label">Forgot?</a>
           </div>
-          <Input name="password" type="password"/>
+          <Field name="password" type="password"/>
         </div>
         <div>
           <label for="search">Search</label>
-          <Input name="search" type="search" placeholder="Search..."/>
+          <Field name="search" type="search" placeholder="Search..." />
         </div>
         <div>
-          <label for="filter">Filter</label>
-          <Input name="filter" type="filter" />
+          <label for="filter">Filter by Code</label>
+          <Field name="filter" type="filter" iconPos="left"  />
         </div>
         <div>
           <label for="address">Input Error</label>
-          <Input name="address" type="address" placeholder="Address..." state={state} onChange={onInputChange} />
+          <Field name="address" placeholder="Address..." state={state} onChange={onInputChange} />
         </div>
-        {/* <div>
-          <label for="date">Date</label>
-          <Input name="date" type="date" prefix="Date:" state={state} onChange={onInputChange} />
-        </div> */}
         <div>
-          <label for="brandColor">Brand Color</label>
-          <Input name="brandColor" type="color" state={state} onChange={onInputChange} />
+          <label for="description">Description</label>
+          <Field name="description" type="textarea" rows={2} />
         </div>
         <div>
-          <label for="description">Description</label>
-          <Input name="description" type="textarea" />
+          <label for="brandColor">Brand Color</label>
+          <Field name="brandColor" type="color" state={state} iconPos="left" onChange={onInputChange} />
         </div>
         <div>
           <label for="amount">Amount ({state.amount})</label>
-          <Input name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={onInputChange} config={config} />
+          <Field name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={onInputChange} config={config} />
+        </div>
+      </div>
+
+      <h2 class="h3">Date Inputs</h2>
+      <div class="grid grid-cols-3 gap-x-6 mb-4">
+        <div>
+          <label for="date">Date</label>
+          <Field name="date" type="date" state={state} onChange={onInputChange} />
         </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} />
+        </div>
+      </div>
+
+      <h2 class="h3">File Inputs & Calendar</h2>
+      <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={config.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 } })
+          }} />
+        </div>
       </div>
 
+      <Modal show={showModal1} setShow={setShowModal1} class="p-9">
+        <h3 class="h3">Edit Profile</h3>
+        <p class="mb-5">An example modal containing a basic form for editing profiles.</p>
+        <form class="mb-8 text-left">
+          <div>
+            <label for="firstName2">First Name</label>
+            <Field name="firstName2" state={state} onChange={onInputChange} />
+          </div>
+          <div>
+            <label for="email2">Email Address</label>
+            <Field name="email2" type="email" placeholder="Your email address..."/>
+          </div>
+        </form>
+        <div class="flex justify-end">
+          <Button color="primary" onClick={() => setShowModal1(false)}>Save</Button>
+        </div>
+      </Modal>
     </div>
   )
 }

package/components/settings/settings-account.tsx

@@ -2,7 +2,7 @@
 // todo: finish tailwind conversion
 import * as util from 'nitro-web/util'
 import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
-import { Button, FormError, Input, Modal, Topbar, Tabbar } from 'nitro-web'
+import { Button, FormError, Field, Modal, Topbar, Tabbar } from 'nitro-web'
 
 export function SettingsAccount() {
   const isLoading = useState('')
@@ -48,21 +48,21 @@ export function SettingsAccount() {
           <div class="cols cols-6 cols-gap-3">
             <div class="col">
               <label for="firstName">First Name(s)</label>
-              <Input name="firstName" placeholder="E.g. Bruce" state={state} onChange={onChange(setState)} />
+              <Field name="firstName" placeholder="E.g. Bruce" state={state} onChange={onChange.bind(setState)} />
             </div>
             <div class="col">
               <label for="lastName">Last Name</label>
-              <Input name="lastName" placeholder="E.g. Wayne" state={state} onChange={onChange(setState)} />
+              <Field name="lastName" placeholder="E.g. Wayne" state={state} onChange={onChange.bind(setState)} />
             </div>
             <div class="col">
               <label for="email">Email Address</label>
-              <Input name="email" type="email" placeholder="Your email address..." state={state} 
-                onChange={onChange(setState)} />
+              <Field name="email" type="email" placeholder="Your email address..." state={state} 
+                onChange={onChange.bind(setState)} />
             </div>
             <div class="col">
               <Link to="/reset" class="label-right link2 underline2 is-active">Reset Password?</Link>
               <label for="password">Password</label>
-              <Input name="password" placeholder="•••••••••••" disabled={true} />
+              <Field name="password" placeholder="•••••••••••" disabled={true} />
             </div>
           </div>
           

package/components/settings/settings-business.tsx

@@ -1,10 +1,10 @@
-// @ts-nocheck
+//@ts-nocheck
 // todo: finish tailwind conversio
 
 ////// look at the select type error below
 import * as util from 'nitro-web/util'
 import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
-import { Button, Input, Select, Topbar, Tabbar } from 'nitro-web'
+import { Button, Field, Select, Topbar, Tabbar } from 'nitro-web'
 
 export function SettingsBusiness({ config }) {
   const isLoading = useState('')
@@ -65,7 +65,7 @@ export function SettingsBusiness({ config }) {
                 type="country" 
                 state={state} 
                 options={useMemo(() => util.getCountryOptions(config.countries), [])} 
-                onChange={onChange(setState)}
+                onChange={onChange.bind(setState)}
               />
             </div>
             <div class="col">
@@ -75,37 +75,37 @@ export function SettingsBusiness({ config }) {
                 type="country" 
                 state={state} 
                 options={useMemo(() => util.getCurrencyOptions(config.currencies), [])}
-                onChange={onChange(setState)}
+                onChange={onChange.bind(setState)}
               />
             </div>
             <div class="col">
               <label for="business.name">Trading Name</label>
-              <Input name="business.name" placeholder="E.g. Wayne Enterprises" state={state} onChange={onChange(setState)} />
+              <Field name="business.name" placeholder="E.g. Wayne Enterprises" state={state} onChange={onChange.bind(setState)} />
             </div>
             <div class="col">
               <Link to="#" class="label-right link2 underline2 is-active">Custom Address</Link>
               <label for="business.address">Address (Start Typing...)</label>
-              <Input name="business.address.full" placeholder="" state={state} onChange={onChange(setState)} />
+              <Field name="business.address.full" placeholder="" state={state} onChange={onChange.bind(setState)} />
             </div>
             <div class="col">
               <label for="business.website">Website</label>
-              <Input name="business.website" placeholder="https://" state={state} onChange={onChange(setState)} />
+              <Field name="business.website" placeholder="https://" state={state} onChange={onChange.bind(setState)} />
             </div>
             <div class="col">
               <label for="business.phone">Mobile Number</label>
-              <Input name="business.phone" placeholder="" state={state} onChange={onChange(setState)} />
+              <Field name="business.phone" placeholder="" state={state} onChange={onChange.bind(setState)} />
             </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>
-              <Input class="mb-0" name="tax.number" placeholder="Appears on your documents" state={state} 
-                onChange={onChange(setState)} />
+              <Field class="mb-0" name="tax.number" placeholder="Appears on your documents" state={state} 
+                onChange={onChange.bind(setState)} />
             </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>
-              <Input class="mb-0" name="business.number" placeholder="Appears on your documents" state={state} 
-                onChange={onChange(setState)} />
+              <Field class="mb-0" name="business.number" type="text" rows="23" placeholder="Appears on your documents" state={state} 
+                onChange={onChange.bind(setState)} />
             </div>
           </div>
         </form>

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

@@ -1,6 +1,6 @@
 // @ts-nocheck
 // todo: finish tailwind conversion
-import { Button, FormError, Input, Modal, Select } from 'nitro-web'
+import { Button, FormError, Field, Modal, Select } from 'nitro-web'
 import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
 
 export function SettingsTeamMember ({ showModal, setShowModal }) {
@@ -38,7 +38,7 @@ export function SettingsTeamMember ({ showModal, setShowModal }) {
               name="role"
               isSearchable={false}
               placeholder="Select a role"
-              onChange={onChange(setState)} 
+              onChange={onChange.bind(setState)} 
               state={state}
               minMenuWidth={460}
               options={[
@@ -65,26 +65,26 @@ export function SettingsTeamMember ({ showModal, setShowModal }) {
           </div>
           <div class="col">
             <label for="email">Email Address</label>
-            <Input 
+            <Field 
               name="email" type="email" placeholder="Your email address..." state={state} 
-              onChange={onChange(setState)} 
+              onChange={onChange.bind(setState)} 
             />
           </div>
           <div class="col">
             <label for="firstName">First Name</label>
-            <Input name="firstName" placeholder="E.g. Bruce" state={state} onChange={onChange(setState)} />
+            <Field name="firstName" placeholder="E.g. Bruce" state={state} onChange={onChange.bind(setState)} />
           </div>
           <div class="col">
             <label for="lastName">Last Name</label>
-            <Input name="lastName" placeholder="E.g. Wayne" state={state} onChange={onChange(setState)} />
+            <Field name="lastName" placeholder="E.g. Wayne" state={state} onChange={onChange.bind(setState)} />
           </div>
           <div class="col-12">
             <label for="message">Invitation Message</label>
-            <Input 
+            <Field 
               name="message" 
               type="textarea" 
               placeholder={`${user.firstName} is inviting you to collaborate on Nitro.`} 
-              state={state} onChange={onChange(setState)} 
+              state={state} onChange={onChange.bind(setState)} 
             />
           </div>
         </div>

package/package.json

@@ -3,7 +3,7 @@
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "main": "./client/index.ts",
   "type": "module",
   "keywords": [
@@ -35,10 +35,10 @@
   },
   "scripts": {
     "dev": "npm run dev -w example",
-    "dev:client": "npm run dev:client -w example",
-    "dev:client-only": "isStatic=true npm run dev:client -w example",
+    "dev:client": "isDemo=true npm run dev:client -w example",
+    "dev:client-only": "isDemo=true isStatic=true npm run dev:client -w example",
     "dev:server": "npm run dev:server -w example",
-    "build": "isStatic=true npm run build -w example",
+    "build": "isDemo=true isStatic=true npm run build -w example",
     "major": "npm run types && standard-version --release-as major && npm publish",
     "minor": "npm run types && standard-version --release-as minor && npm publish",
     "patch": "npm run types && standard-version --release-as patch && npm publish",
@@ -67,7 +67,7 @@
     "passport": "^0.4.1",
     "passport-local": "^1.0.0",
     "react-currency-input-field": "^3.8.0",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "^9.6.4",
     "react-number-format": "^5.4.0",
     "react-router-dom": "6.24.1",
     "react-select": "^5.9.0",
@@ -107,5 +107,9 @@
     ]
   },
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "@types/lodash": "^4.17.15",
+    "lodash": "^4.17.21"
+  }
 }

package/readme.md

@@ -11,7 +11,7 @@ npm i nitro-web
 ### Install
 
 1. Copy ./_example into your project
-2. In package.json, replace `"nitro-web": "file:.."` with `"nitro-web": "~0.0.15"`
+2. In package.json, replace `"nitro-web": "file:.."` with `"nitro-web": "~0.0.17"`
 3. In package.json, replace `"../.eslintrc.json"` with `"./node_modules/nitro-web/.eslintrc.json"`
 4. Run `npm i`
 
@@ -31,21 +31,25 @@ const server = await setupRouter(config)
 server.listen(3001, '0.0.0.0')
 ```
 
-### Running in development
+### Run
 
 ```bash
+# Running in development (watching for changes)
 npm run dev:server # run and watch the nodemon server
 npm run dev:client # run and watch the webpack dev server
-npm run dev # or, run and watch both server and client
-```
-
-### Building for production
+npm run dev # or run and watch both the server and client
 
-```bash
+# Building for production
 npm run build
 npm run start
 ```
 
+### Nitro Development
+
+The same run commands can be used in ./ which are actually executed in ./example/ via npm workspaces (`-w` flag).
+
+If util.js is updated, you must run `npm run types` to update the types file.
+
 ### Versions
 
 - Express `^4.17`

package/types/required-globals.d.ts

@@ -7,6 +7,7 @@ import { CSSInterpolation } from '@emotion/serialize'
 declare global {
   /** Webpack injected config variables */
   const INJECTED: Record<string, string|boolean|object>
+  const ISDEMO: boolean
   /** Webpack svg loader */
   module '*.svg' {
     const content: React.FC<React.SVGProps<SVGElement>>

package/types/util.d.ts

@@ -78,7 +78,13 @@ export function getCurrencyOptions(currencies: any): {
     value: string;
     label: any;
 }[];
-export function getCurrencyPrefixWidth(prefix: any, paddingRight?: number): number;
+/**
+ * Get the width of a prefix
+ * @param {string} prefix
+ * @param {number} paddingRight
+ * @returns {number}
+ */
+export function getPrefixWidth(prefix: string, paddingRight?: number): number;
 export function getDirectories(path: any, pwd: any): {
     clientDir: any;
     componentsDir: any;
@@ -99,7 +105,12 @@ export function isEmpty(obj: any, truthyValuesOnly: any): boolean;
 export function isFunction(variable: any): boolean;
 export function isHex24(value: any): boolean;
 export function isNumber(variable: any): boolean;
-export function isObject(variable: any): boolean;
+/**
+ * Checks if a variable is an object
+ * @param {unknown} variable
+ * @returns {boolean}
+ */
+export function isObject(variable: unknown): boolean;
 export function isRegex(variable: any): boolean;
 export function isString(variable: any): boolean;
 export function lcFirst(string: any): any;
@@ -135,16 +146,14 @@ export function objectMap(object: any, fn: any): {};
 export function omit(obj: any, fields: any): any;
 /**
  * Updates state from an input event, you can also update deep state properties
- * @param {Function} setState
- * @param {Empty | Event | Array[{string}, {string|number|fn}]}
- *   {Empty} - pass undefined to return a reusable function, e.g. const _onChange = onChange(setState)
- *   {Event} - pass the event object,                        e.g. <input onChange={_onChange}>
- *   {Array} - pass an array with [path, value],             e.g. <input onChange={() => _onChange(['name', 'Joe'])}>
+ * @param {Event|Array[{string},{string|number|fn}]}
+ *   {Event} - pass the event object            e.g. <input onChange={(e) => onChange.call(setState, e)}>
+ *   {Array} - pass an array with [path, value] e.g. <input onChange={(e) => onChange.call(setState, e, ['name', 'Joe'])}>
  * @param {Function} [beforeSetState] - optional function to run before setting the state
- *
- * @return {Function | Promise({state, chunks, target})}
+ * @this {Function} setState
+ * @return {Promise({state, chunks, target})}
  */
-export function onChange(setState: Function, event: any, beforeSetState?: Function): Function | Promise<any>;
+export function onChange(this: Function, event: any, beforeSetState?: Function): Promise<any>;
 export function pad(num: any, padLeft: any, fixedRight: any): any;
 export function pick(obj: any, keys: any): {};
 export function queryObject(search: any, assignTrue: any): any;

package/types/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../util.js"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BC;AAED,6DAaC;AAED,4DAQC;AAED,iFAaC;AAED,0EAIC;AAED,gDAEC;AAED,0CAEC;AAED,qFAQC;AAED,uDAIC;AAED,iEAoBC;AAED;;;;EAgIC;AAED,wCASC;AAED,mDAYC;AAED,+DAyBC;AAED,iEAeC;AAED,kFA2BC;AAED,gEAIC;AAED,6CASC;AAED,qEAsEC;AAED,8CAGC;AAED,kDAQC;AAED;;;;IAOC;AAED;;;IAOC;AAED,mFAUC;AAED;;;;;;;EAUC;AAED,sDAYC;AAED,uEAEC;AAED,kDAsBC;AAED,+DAaC;AAED,0DAEC;AAED,+CAEC;AAED,kDAEC;AAED,6CAIC;AAED,kEAOC;AAED,mDAEC;AAED,6CAiBC;AAED,iDAEC;AAED,iDAGC;AAED,gDAEC;AAED,iDAEC;AAED,0CAEC;AAED,yEAWC;AAED,mFAwCC;AAED;;;;;;;;;;;;;;;;;;;;;;;;EA0CC;AAED,uEAmBC;AAED,oDAKC;AAED,iDAOC;AAED;;;;;;;;;;GAUG;AAEH,qFAHY,uBAAkB,CA4C7B;AAED,kEAQC;AAED,8CAeC;AAED,+DAiCC;AAED,8CAcC;AAED,yFAiDC;AAED,oDAYC;AAED,4EAmBC;AAED,kDAUC;AAED,mFAiDC;AAED,oEAaC;AAED,8EAIC;AAED,0DAQC;AAED,uDAMC;AAED,mFAwBC;AAED;;;;EAyBC;AAED,8CAIC;AAED,uCAGC;AAED,0CAGC;AAhoCD,6BAAoC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../util.js"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BC;AAED,6DAaC;AAED,4DAQC;AAED,iFAaC;AAED,0EAIC;AAED,gDAEC;AAED,0CAEC;AAED,qFAQC;AAED,uDAIC;AAED,iEAoBC;AAED;;;;EAgIC;AAED,wCASC;AAED,mDAYC;AAED,+DAyBC;AAED,iEAeC;AAED,kFA2BC;AAED,gEAIC;AAED,6CASC;AAED,qEAsEC;AAED,8CAGC;AAED,kDAQC;AAED;;;;IAOC;AAED;;;IAOC;AAED;;;;;GAKG;AACH,uCAJW,MAAM,iBACN,MAAM,GACJ,MAAM,CAYlB;AAED;;;;;;;EAUC;AAED,sDAYC;AAED,uEAEC;AAED,kDAsBC;AAED,+DAaC;AAED,0DAEC;AAED,+CAEC;AAED,kDAEC;AAED,6CAIC;AAED,kEAOC;AAED,mDAEC;AAED,6CAiBC;AAED,iDAEC;AAED;;;;GAIG;AACH,mCAHW,OAAO,GACL,OAAO,CAKnB;AAED,gDAEC;AAED,iDAEC;AAED,0CAEC;AAED,yEAWC;AAED,mFAwCC;AAED;;;;;;;;;;;;;;;;;;;;;;;;EA0CC;AAED,uEAmBC;AAED,oDAKC;AAED,iDAOC;AAED;;;;;;;;GAQG;AACH,8FAyCC;AAED,kEAQC;AAED,8CAeC;AAED,+DAiCC;AAED,8CAcC;AAED,yFAiDC;AAED,oDAYC;AAED,4EAmBC;AAED,kDAUC;AAED,mFAiDC;AAED,oEAaC;AAED,8EAIC;AAED,0DAQC;AAED,uDAMC;AAED,mFAwBC;AAED;;;;EAyBC;AAED,8CAIC;AAED,uCAGC;AAED,0CAGC;AAxoCD,6BAAoC"}

package/types.ts

@@ -3,8 +3,9 @@ export type Config = {
   clientUrl: string
   env: string
   awsUrl?: string
-  currencies?: object
-  countries?: object
+  // needed for input-currency.tsx
+  currencies: { [key: string]: { symbol: string, digits: number } }
+  countries: { [key: string]: { numberFormats: { currency: string } } }
   googleMapsApiKey?: string
   isStatic?: boolean
   placeholderEmail?: string
@@ -22,7 +23,8 @@ export type User = {
   avatar?: MonasteryImage
 }
 
-export type Errors = Array<{ title: string, detail: string }> | null
+export type Error = { title: string, detail: string }
+export type Errors = Array<Error> | null
 
 export type MonasteryImage = {
   url: string

package/util.js

@@ -479,8 +479,14 @@ export function getCurrencyOptions (currencies) {
   return output
 }
 
-export function getCurrencyPrefixWidth (prefix, paddingRight=0) {
-  if (!prefix) return
+/**
+ * Get the width of a prefix
+ * @param {string} prefix
+ * @param {number} paddingRight
+ * @returns {number}
+ */
+export function getPrefixWidth (prefix, paddingRight=0) {
+  if (!prefix) return 0
   const span = document.createElement('span')
   span.classList.add('input-prefix')
   span.style.visibility = 'hidden'
@@ -614,6 +620,11 @@ export function isNumber (variable) {
   return !isNaN(parseFloat(variable)) && isFinite(variable)
 }
 
+/**
+ * Checks if a variable is an object
+ * @param {unknown} variable
+ * @returns {boolean}
+ */
 export function isObject (variable) {
   // Excludes null and array's
   return variable !== null && typeof variable === 'object' && !(variable instanceof Array) ? true : false
@@ -769,19 +780,16 @@ export function omit (obj, fields) {
 
 /**
  * Updates state from an input event, you can also update deep state properties
- * @param {Function} setState
- * @param {Empty | Event | Array[{string}, {string|number|fn}]}
- *   {Empty} - pass undefined to return a reusable function, e.g. const _onChange = onChange(setState)
- *   {Event} - pass the event object,                        e.g. <input onChange={_onChange}>
- *   {Array} - pass an array with [path, value],             e.g. <input onChange={() => _onChange(['name', 'Joe'])}>
+ * @param {Event|Array[{string},{string|number|fn}]}
+ *   {Event} - pass the event object            e.g. <input onChange={(e) => onChange.call(setState, e)}>
+ *   {Array} - pass an array with [path, value] e.g. <input onChange={(e) => onChange.call(setState, e, ['name', 'Joe'])}>
  * @param {Function} [beforeSetState] - optional function to run before setting the state
- * 
- * @return {Function | Promise({state, chunks, target})}
+ * @this {Function} setState
+ * @return {Promise({state, chunks, target})}
  */
-/////////////////////////////////////////////////////////////////////convert to bind
-export function onChange (setState, event, beforeSetState) {
-  if (typeof event === 'undefined') {
-    return onChange.bind(this, setState)
+export function onChange (event, beforeSetState) {
+  if (!isFunction(this)) {
+    throw new Error('Missing setState, please either call or bind setState to the function. E.g. onChange.call(setState, e)')
   }
   let elem = event.target ? event.target : { id: event[0], value: event[1] }
   let chunks = (elem.id || elem.name).split('.')
@@ -800,7 +808,7 @@ export function onChange (setState, event, beforeSetState) {
 
   // Update state
   return new Promise((resolve) => {
-    setState((state) => {
+    this((state) => {
       const newState = { ...state, ...(elem.files ? { hasFiles: true } : {}) }
       let target = newState
       for (var i = 0, l = chunks.length; i < l; i++) {

package/webpack.config.js

@@ -161,11 +161,6 @@ export const getConfig = (config) => {
             replace: 'if (false && unsafePseudoClasses',
           },
         },
-        {
-          test: /styleguide\.html$/i,
-          exclude: [/\/server\/email/],
-          loader: 'html-loader',
-        },
         {
           test: /\.csv$/,
           use: [
@@ -278,6 +273,7 @@ export const getConfig = (config) => {
         ],
       }),
       new webpack.DefinePlugin({
+        ISDEMO: !!process.env.isDemo,
         INJECTED: JSON.stringify({
           ...pick(config, config.inject ? config.inject.split(' ') : []),
         }),