nitro-web 0.0.39 → 0.0.41

package/client/app.tsx

@@ -1,7 +1,6 @@
 import { createBrowserRouter, createHashRouter, redirect, useParams, RouterProvider } from 'react-router-dom' 
 import { Fragment, ReactNode } from 'react'
 import ReactDOM from 'react-dom/client'
-import { AxiosRequestConfig } from '@hokify/axios'
 import { axios, camelCase, pick, toArray, setTimeoutPromise } from 'nitro-web/util'
 import { injectedConfig, preloadedStoreData, exposedStoreData } from './index'
 import { Config, Store } from 'nitro-web/types'
@@ -27,11 +26,16 @@ type Settings = {
 
 type Route = {
   component: React.FC<{ route?: Route; params?: object; location?: object; config?: Config }>
-  meta?: { title?: string }
   middleware: string[]
   name: string
   path: string
   redirect?: string
+  meta?: { title?: string; layout?: number }
+}
+
+type RouteWithPolicies = Route & {
+  // Route policies, e.g. { 'get /signin' : ['isUser'] }
+  [key: string]: true | string | (string | true)[]
 }
 
 export async function setupApp(config: Config, storeContainer: StoreContainer, layouts: React.FC<LayoutProps>[]) {
@@ -137,7 +141,7 @@ function getRouter({ settings, config }: { settings: Settings, config: Config })
     for (const key in file) {
       const isReactFnComponentOrFnRef = typeof file[key] === 'function' || !!file[key]?.render
       if (!file.hasOwnProperty(key) || key.match(/route/i) || !isReactFnComponentOrFnRef) continue
-      const componentRoutes = toArray(file[key].route || file.route || file.Route)
+      const componentRoutes = toArray(file[key].route || file.route || file.Route) as RouteWithPolicies[]
       const componentName = key || camelCase(key.replace(/^.*[\\\/]|\.jsx$/g, '')) as string // eslint-disable-line
       // console.log(file)
       // Todo: need to retrieve the original function name for default exports during minification.
@@ -153,13 +157,13 @@ function getRouter({ settings, config }: { settings: Settings, config: Config })
         const routePaths = Object.keys(pick(route, /^(get\s+)?\/|^\*$/))
         
         for (const routePath of routePaths) {
-          const layoutNum = (route.meta?.layout || 1) - 1
+          const layoutNum = (parseInt(String(route.meta?.layout || '1')) || 1) - 1
 
           // get the routes middleware
-          const middleware = toArray(route[routePath]).filter(o => {
-            if (o === true) return // ignore true
-            else if (settings.middleware[o]) return true
-            else console.error(`No middleware named '${o}' defined under config.middleware, skipping..`)
+          const middleware = toArray(route[routePath]).filter((policyNameOrTrue) => {
+            if (policyNameOrTrue === true) return // ignore true
+            else if (policyNameOrTrue in settings.middleware) return true
+            else console.error(`No middleware named '${policyNameOrTrue}' defined under config.middleware, skipping..`)
           })
 
           // Push route to layout
@@ -171,7 +175,7 @@ function getRouter({ settings, config }: { settings: Settings, config: Config })
               layout: layoutNum,
               title: `${route.meta?.title ? `${route.meta.title}${settings.titleSeparator || ' - '}` : ''}${settings.name}`,
             },
-            middleware: middleware,
+            middleware: middleware as string[],
             name: componentName,
             path: routePath,
             redirect: route.redirect,
@@ -203,7 +207,10 @@ function getRouter({ settings, config }: { settings: Settings, config: Config })
           path: route.path,
           loader: async () => { // request
             // wait for container/exposedStoreData to be setup
-            if (!nonce) nonce = true && await setTimeoutPromise(() => {}, 0) // eslint-disable-line
+            if (!nonce) {
+              nonce = true 
+              await setTimeoutPromise(() => {}, 0)
+            }
             for (const key of route.middleware) {
               const error = settings.middleware[key](route, exposedStoreData || {})
               if (error && error.redirect) {
@@ -278,7 +285,7 @@ async function beforeApp(config: Config) {
     //   delete window.prehot
     // }
     if (!config.isStatic) {
-      storeData = (await axios().get('/api/store', { 'axios-retry': { retries: 3 }, timeout: 4000 } as AxiosRequestConfig)).data
+      storeData = (await axios().get('/api/store', { 'axios-retry': { retries: 3 }, timeout: 4000 })).data
       apiAvailable = true
     }
   } catch (err) {

package/client/store.ts

@@ -40,6 +40,8 @@ function beforeUpdate<T extends Store>(newStore: T) {
   }
 
   // E.g. Cookie matching handy for rare issues, e.g. signout > signin (to a different user on another tab)
-  axios().defaults.headers.authid = newStore?.user?._id
+  if (newStore?.user?._id) {
+    axios().defaults.headers.authid = newStore?.user?._id
+  }
   return newStore
 }

package/components/auth/auth.api.js

@@ -34,9 +34,9 @@ export default {
 function setup(middleware, _config) {
   // Setup is called automatically when the server starts
   // Set config values
-  const configKeys = ['clientUrl', 'emailFrom', 'env', 'mailgunDomain', 'mailgunKey', 'masterPassword', 'name']
+  const configKeys = ['clientUrl', 'emailFrom', 'env', 'name', 'mailgunDomain', 'mailgunKey', 'masterPassword']
   config = pick(_config, configKeys)
-  for (const key of configKeys) {
+  for (const key of ['clientUrl', 'emailFrom', 'env', 'name']) {
     if (!config[key]) throw new Error(`Missing config value for: config.${key}`)
   }
 

package/components/auth/signin.tsx

@@ -17,7 +17,7 @@ export function Signin() {
   useEffect(() => {
     // Autofill the email input from ?email=
     const query = util.queryObject(location.search, true)
-    if (query.email) setState({ ...state, email: query.email })
+    if (query.email) setState({ ...state, email: query.email as string })
   }, [location.search])
 
   useEffect(() => {

package/components/partials/element/avatar.tsx

@@ -1,6 +1,5 @@
 import { Initials } from 'nitro-web'
 import { s3Image } from 'nitro-web/util'
-import noImage from 'nitro-web/client/imgs/no-image.svg'
 import avatarImg from 'nitro-web/client/imgs/avatar.jpg'
 import { User } from 'nitro-web/types'
 
@@ -32,7 +31,7 @@ export function Avatar({ awsUrl, isRound, user, showPlaceholderImage, className
 
   return (
     user.avatar 
-    ? <img class={classes} src={s3Image(awsUrl, user.avatar, 'small') || noImage} /> 
+    ? <img class={classes} src={s3Image(awsUrl, user.avatar, 'small')} /> 
     : showPlaceholderImage ? <img class={classes} src={avatarImg} width="30px" /> 
     : <Initials className={classes} icon={{ initials: getInitials(user), hex: getHex(user) }} isRound={isRound} isMedium={true} />
   )

package/components/partials/element/dropdown.tsx

@@ -1,6 +1,5 @@
 import { css } from 'twin.macro'
 import { forwardRef, cloneElement } from 'react'
-import { toArray } from 'nitro-web/util'
 import { getSelectStyle } from 'nitro-web'
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
 
@@ -99,7 +98,7 @@ export const Dropdown = forwardRef(function Dropdown({
       css={style}
     >
       {
-        toArray(children).map((el, key) => {
+        (Array.isArray(children) ? children : [children]).map((el, key) => {
           const onKeyDown = onMouseDown 
           if (!el.type) throw new Error('Dropdown component requires a valid child element')
           return cloneElement(el, { key, onMouseDown, onKeyDown }) // adds onClick

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

@@ -17,6 +17,7 @@ export type FieldDateProps = React.InputHTMLAttributes<HTMLInputElement> & {
   value?: null|number|string|(null|number|string)[]
   numberOfMonths?: number
   Icon?: React.ReactNode
+  dir?: 'bottom-left'|'bottom-right'|'top-left'|'top-right'
 }
 
 type TimePickerProps = {
@@ -24,7 +25,9 @@ type TimePickerProps = {
   onChange: (mode: Mode, value: number|null) => void
 }
 
-export function FieldDate({ mode='single', onChange, prefix='', value, numberOfMonths, Icon, showTime, ...props }: FieldDateProps) {
+export function FieldDate({ 
+  mode='single', onChange, prefix='', value, numberOfMonths, Icon, showTime, dir = 'bottom-left', ...props 
+}: FieldDateProps) {
   const localePattern = `d MMM yyyy${showTime && mode == 'single' ? ' hh:mmaa' : ''}`
   const [prefixWidth, setPrefixWidth] = useState(0)
   const dropdownRef = useRef<DropdownRef>(null)
@@ -100,6 +103,7 @@ export function FieldDate({ mode='single', onChange, prefix='', value, numberOfM
           {!!showTime && mode == 'single' && <TimePicker date={dates?.[0]} onChange={onCalendarChange} />}
         </div>
       }
+      dir={dir}
     > 
       <div className="grid grid-cols-1">
         {Icon}

package/components/partials/form/field.tsx

@@ -57,7 +57,10 @@ export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
   
   // Value: Input is always controlled if state is passed in
   if (props.value) value = props.value as string
-  else if (typeof state == 'object') value = util.deepFind(state, props.name) ?? ''
+  else if (typeof state == 'object') {
+    const v = util.deepFind(state, props.name) as string | undefined
+    value = v ?? ''
+  }
 
   // Errors: find any that match this field path
   for (const item of (state?.errors || [])) {

package/components/partials/styleguide.tsx

@@ -266,8 +266,8 @@ export function Styleguide() {
           <Field name="date-range" type="date" mode="range" prefix="Date:" state={state} onChange={onInputChange} />
         </div>
         <div>
-          <label for="date">Date</label>
-          <Field name="date" type="date" state={state} onChange={onInputChange} />
+          <label for="date">Date (right aligned)</label>
+          <Field name="date" type="date" state={state} onChange={onInputChange} dir="bottom-right" />
         </div>
       </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "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 🚀",
@@ -29,12 +29,13 @@
   },
   "dependencies": {
     "@hokify/axios": "^0.19.1",
+    "axios": "^1.9.0",
     "axios-retry": "^3.3.1",
     "bcrypt": "^5.0.0",
     "body-parser": "^1.19.0",
     "compression": "^1.7.4",
     "date-fns": "^3.6.0",
-    "dateformat": "^3.0.3",
+    "dateformat": "^5.0.3",
     "dotenv": "^14.3.2",
     "express": "^4.17.1",
     "express-fileupload": "^1.1.6",
@@ -49,6 +50,9 @@
     "sort-route-addresses-nodeps": "0.0.4",
     "standard-version": "^9.5.0"
   },
+  "devDependencies": {
+    "@types/dateformat": "^5.0.3"
+  },
   "peerDependencies": {
     "@stripe/stripe-js": "^1.34.0",
     "monastery": "^3.5.2",