nitro-web 0.0.39 → 0.0.40

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-time.tsx

@@ -0,0 +1,163 @@
+import React, { useState, useMemo, useCallback, JSX, useEffect } from 'react'
+import { css, theme } from 'twin.macro'
+import { Dropdown } from 'nitro-web'
+import ClockIcon from '../icons/clock'
+
+export interface FieldTimeProps {
+  className?: string;
+  placeholder?: string;
+  id?: string;
+  onChange: (values: { id: string; value: number; isFalse: boolean }) => void;
+  value: string;
+  isFull?: boolean;
+  Icon?: JSX.Element;
+  required?: boolean;
+  onFalseCondition?: (id: string, time: number) => boolean
+}
+
+export function FieldTime({
+  className, placeholder = '', id = '', onChange, value, isFull = true, Icon = <ClockIcon />, required = false, onFalseCondition, ...rest
+}: FieldTimeProps) {
+
+  // Parse the incoming time value
+  const [time, setTime] = useState(() => Number(value) || 0)
+
+  const handleTimeChange = useCallback((isHour: boolean, e: React.ChangeEvent<HTMLSelectElement>) => {
+    const timeStr = e.target.value
+    const number = parseInt(timeStr)
+    const hours = Math.floor(time / (60 * 60 * 1000))
+    const minutes = Math.floor((time % (60 * 60 * 1000)) / (60 * 1000))
+    const newTime = isHour ? (number * 60 * 60 * 1000) + (minutes * 60 * 1000) : (hours * 60 * 60 * 1000) + (number * 60 * 1000)
+
+    const isFalse = onFalseCondition ? onFalseCondition(id, newTime) : false // if false, not update
+
+    if (!isFalse) setTime(newTime)
+
+    if (onChange) onChange({ id: id, value: newTime, isFalse: isFalse })
+
+  }, [time, id, onChange, onFalseCondition])
+
+  const hoursTime = useMemo(() => Math.floor(time / (60 * 60 * 1000)), [time])
+
+  const minutesTime = useMemo(() => Math.floor((time % (60 * 60 * 1000)) / (60 * 1000)), [time])
+
+  const [displayTime, setDisplayTime] = useState('00:00')
+
+  const secondOptions = useMemo(() => {
+    const [_hours, minutes] = displayTime.split(':').map(Number)
+    return [...new Set([minutes, 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55])]
+  }, [displayTime])
+
+  useEffect(() => {
+    setDisplayTime(`${String(hoursTime).padStart(2, '0')}:${String(minutesTime).padStart(2, '0')}`)
+  }, [hoursTime, minutesTime])
+
+  return (
+    <Dropdown
+      className={isFull ? 'w-full' : 'w-auto'}
+      // @ts-ignore
+      css={style}
+      menuToggles={false}
+      animate={false}
+      menuChildren={
+        <div className="time-picker-container">
+          <div className="time-picker-selectors">
+            <select
+              className="time-select"
+              value={hoursTime}
+              onChange={(e) => handleTimeChange(true, e)}
+            >
+              {[...Array(24).keys()].map(i => (
+                <option key={i} value={i}>{String(i).padStart(2, '0')}</option>
+              ))}
+            </select>
+            <span className="time-separator">:</span>
+            <select
+              className="time-select"
+              value={minutesTime}
+              onChange={(e) => handleTimeChange(false, e)}
+            >
+              {secondOptions.map(option => (
+                <option key={option} value={option}>{String(option).padStart(2, '0')}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+      }
+    >
+      <div className="grid grid-cols-1">
+        {Icon}
+        <input
+          {...rest}
+          key={id}
+          id={id}
+          autoComplete="off"
+          className={`hide-time-icon font-medium text-sm placeholder-font-medium placeholder-sm ${className}`}
+          value={displayTime}
+          onChange={(e) => {
+            const newStr = e.target.value
+            const isValid = /^[0-9]{2}:[0-9]{2}$/.test(newStr)
+            if (!isValid) {
+              setDisplayTime(newStr)
+              return
+            }
+            const [hours, minutes] = newStr.split(':').map(Number)
+            const newNum = (hours * 60 + minutes) * 60 * 1000
+
+            setTime(newNum)
+            setDisplayTime(newStr)
+          }}
+          placeholder={placeholder}
+          required={required}
+        />
+      </div>
+    </Dropdown>
+  )
+}
+
+export default FieldTime
+
+const style = css`
+  .time-picker-container {
+    padding: 15px;
+    font-size: 14px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+
+  .time-picker-selectors {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .time-separator {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .time-select {
+    width: 60px;
+    padding: 8px;
+    font-size: 14px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+  .time-confirm-btn {
+    padding: 8px 16px;
+    font-size: 16px;
+    background-color: ${theme`colors.primary`};
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 10px;
+  }
+
+  .time-confirm-btn:hover {
+    background-color: ${theme`colors.primary`};
+  }
+`

package/components/partials/form/field.tsx

@@ -11,6 +11,8 @@ import {
   EyeSlashIcon,
 } from '@heroicons/react/20/solid'
 // Maybe use fill-current tw class for lucide icons (https://github.com/lucide-icons/lucide/discussions/458)
+import FieldTime, { FieldTimeProps } from './field-time'
+import ClockIcon from '../icons/clock'
 
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
@@ -20,7 +22,7 @@ type FieldExtraProps = {
   id?: string
   // state object to get the value, and check errors against
   state?: { errors?: Errors, [key: string]: unknown }
-  type?: 'text' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color'
+  type?: 'text' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'time' | 'color'
   icon?: React.ReactNode
   iconPos?: 'left' | 'right'
 }
@@ -36,6 +38,7 @@ export type FieldProps = (
   | ({ type: 'currency' } & FieldCurrencyProps & FieldExtraProps)
   | ({ type: 'color' } & FieldColorProps & FieldExtraProps)
   | ({ type: 'date' } & FieldDateProps & FieldExtraProps)
+  | ({ type: 'time' } & FieldTimeProps & FieldExtraProps)
 )
 
 export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
@@ -57,7 +60,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 || [])) {
@@ -83,6 +89,8 @@ export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
     Icon = <IconWrapper iconPos={iconPos} icon={icon || <ColorSvg hex={value}/>} className="size-[17px]" />
   } else if (type == 'date') {
     Icon = <IconWrapper iconPos={iconPos} icon={icon || <CalendarIcon />} className="size-4" />
+  } else if (type == 'time') {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <ClockIcon />} className="size-4" />
   } else {
     Icon = <IconWrapper iconPos={iconPos} icon={icon} />
   }
@@ -122,6 +130,12 @@ export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
         <FieldDate {...props} {...commonProps} Icon={Icon} />
       </FieldContainer>
     )
+  } else if (type == 'time') {
+    return (
+      <FieldContainer error={error} className={props.className}>
+        <FieldTime {...props} {...commonProps} Icon={Icon} />
+      </FieldContainer>
+    )
   }
 }
 

package/components/partials/icons/clock.tsx

@@ -0,0 +1,18 @@
+import { theme } from 'twin.macro'
+
+const ClockIcon = () => {
+    return (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g opacity="0.5" clipPath="url(#clip0_12681_10783)">
+                <path d="M8.00016 3.99998V7.99998L10.6668 9.33331M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z" stroke={theme`colors.input`} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            </g>
+            <defs>
+                <clipPath id="clip0_12681_10783">
+                    <rect width="16" height="16" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    )
+}
+
+export default ClockIcon

package/components/partials/styleguide.tsx

@@ -14,6 +14,7 @@ export function Styleguide() {
     date: Date.now(),
     'date-range': [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 33],
     'date-time': Date.now(),
+    time: '0',
     calendar: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 8],
     firstName: 'Bruce',
     errors: [
@@ -39,13 +40,30 @@ export function Styleguide() {
   ]
 
   function onInputChange (e: { target: { id: string, value: unknown } }) {
-    if ((e.target.id == 'customer' || e.target.id == 'customer2') && e.target.value == '') {
+    const {id} = e.target
+    let {value} = e.target
+    if ((id == 'customer' || id == 'customer2') && value == '') {
       setCustomerSearch('')
-      e.target.value = null // clear the selected value
+      value = null // clear the selected value
     }
-    setState(s => ({ ...s, [e.target.id]: e.target.value }))
+    const newValue = value
+    console.dir('newValue')
+    console.dir(newValue)
+    setState(s => ({ ...s, [id]: newValue }))
   }
 
+    /**
+   * handleTimeChange
+   */
+    const handleTimeChange = () => ({ id, value }: { id: string, value: number | number[] }) => {
+      if (Array.isArray(value)) return
+
+      setState((state) => ({
+        ...state,
+        [id]: value,
+      }))
+    }
+
   function onCustomerSearch (search: string) {
     setCustomerSearch(search || '')
   }
@@ -266,8 +284,12 @@ 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>
+          <label for="time">Time</label>
+          <Field name="time" type="time" state={state} value={state.time} onChange={handleTimeChange} />
         </div>
       </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "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",