nitro-web 0.0.16 → 0.0.18

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.16",
+  "version": "0.0.18",
   "main": "./client/index.ts",
   "type": "module",
   "keywords": [
@@ -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",
@@ -88,7 +88,7 @@
     "twin.macro": "^3.4.1"
   },
   "engines": {
-    "node": "^18"
+    "node": ">=18"
   },
   "standard-version": {
     "releaseCommitMessageFormat": "{{currentTag}}",
@@ -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.16"`
+2. In package.json, replace `"nitro-web": "file:.."` with `"nitro-web": "~0.0.18"`
 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/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++) {