nitro-web 0.0.27 → 0.0.29

package/client/app.tsx

@@ -2,10 +2,13 @@ import { createBrowserRouter, createHashRouter, redirect, useParams, RouterProvi
 import { Fragment, ReactNode } from 'react'
 import ReactDOM from 'react-dom/client'
 import { AxiosRequestConfig } from '@hokify/axios'
-import { beforeCreate, Provider, exposedData } from './store'
 import { axios, camelCase, pick, toArray, setTimeoutPromise } from 'nitro-web/util'
+import { injectedConfig, preloadedStoreData, exposedStoreData } from './index'
 import { Config, Store } from 'nitro-web/types'
-import { injectedConfig } from './index'
+
+type StoreContainer = { 
+  Provider: React.FC<{ children: ReactNode }> 
+}
 
 type LayoutProps = {
   config: Config;
@@ -14,7 +17,7 @@ type LayoutProps = {
 type Settings = {
   afterApp?: () => void
   beforeApp: (config: Config) => Promise<object>
-  beforeStoreUpdate: (prevStore: Store | null, newData: Store) => Store
+  // beforeStoreUpdate: (prevStore: Store | null, newData: Store) => Store
   isStatic?: boolean
   layouts: React.FC<LayoutProps>[]
   middleware: Record<string, (route: unknown, store: Store) => undefined | { redirect: string }>
@@ -31,11 +34,11 @@ type Route = {
   redirect?: string
 }
 
-export async function setupApp(config: Config, layouts: React.FC<LayoutProps>[]) {
+export async function setupApp(config: Config, storeContainer: StoreContainer, layouts: React.FC<LayoutProps>[]) {
+  if (!layouts) throw new Error('layouts are required')
   // Fetch state and init app
   const settings: Settings = {
     beforeApp: config.beforeApp || beforeApp,
-    beforeStoreUpdate: config.beforeStoreUpdate || beforeStoreUpdate,
     isStatic: config.isStatic,
     layouts: layouts,
     middleware: Object.assign(defaultMiddleware, config.middleware || {}),
@@ -46,12 +49,12 @@ export async function setupApp(config: Config, layouts: React.FC<LayoutProps>[])
   // Setup the jwt token
   updateJwt(localStorage.getItem(injectedConfig.jwtName))
 
-  if (!settings.layouts) throw new Error('layouts are required')
-  const initData = (await settings.beforeApp(config)) || {}
-  beforeCreate(initData, settings.beforeStoreUpdate)
+  // Fetch the store data, and make it available to the store
+  const data = await settings.beforeApp(config)
+  Object.assign(preloadedStoreData, data)
 
   const root = ReactDOM.createRoot(document.getElementById('app') as HTMLElement)
-  root.render(<App settings={settings} config={config} />)
+  root.render(<App settings={settings} config={config} storeContainer={storeContainer} />)
 }
 
 export function updateJwt(token?: string | null) {
@@ -62,7 +65,7 @@ export function updateJwt(token?: string | null) {
   else delete axios().defaults.headers.Authorization
 }
 
-function App({ settings, config }: { settings: Settings, config: Config }): ReactNode {
+function App({ settings, config, storeContainer }: { settings: Settings, config: Config, storeContainer: StoreContainer }): ReactNode {
   // const themeNormalised = theme
   const router = getRouter({ settings, config })
   // const theme = pick(themeNormalised, []) // e.g. 'topPanelHeight'
@@ -89,12 +92,12 @@ function App({ settings, config }: { settings: Settings, config: Config }): Reac
   }, [!!router])
 
   return (
-    <Provider>
+    <storeContainer.Provider>
       {/* <ThemeProvider theme={themeNormalised}> */}
         { router && <RouterProvider router={router} /> }
         <AfterApp settings={settings} />
       {/* </ThemeProvider> */}
-    </Provider>
+    </storeContainer.Provider>
   )
 }
 
@@ -199,10 +202,10 @@ function getRouter({ settings, config }: { settings: Settings, config: Config })
           ),
           path: route.path,
           loader: async () => { // request
-            // wait for container/exposedData to be setup
+            // wait for container/exposedStoreData to be setup
             if (!nonce) nonce = true && await setTimeoutPromise(() => {}, 0) // eslint-disable-line
             for (const key of route.middleware) {
-              const error = settings.middleware[key](route, exposedData || {})
+              const error = settings.middleware[key](route, exposedStoreData || {})
               if (error && error.redirect) {
                 return redirect(error.redirect)
               }
@@ -266,51 +269,23 @@ async function beforeApp(config: Config) {
    * Gets called once before React is initialised
    * @return {promise} - newStoreData which is used for sharedStore, later merged with the config.store() defaults
    */
-  let apiAvailable
-  let stateData
+  let apiAvailable = false
+  let storeData = {}
   try {
     // Unload prehot data
     // if (window.prehot) {
     //   sharedStoreCache = window.prehot.sharedStoreCache
     //   delete window.prehot
     // }
-    if (!exposedData && !config.isStatic) {
-      stateData = (await axios().get('/api/state', { 'axios-retry': { retries: 3 }, timeout: 4000 } as AxiosRequestConfig)).data
+    if (!config.isStatic) {
+      storeData = (await axios().get('/api/store', { 'axios-retry': { retries: 3 }, timeout: 4000 } as AxiosRequestConfig)).data
       apiAvailable = true
     }
   } catch (err) {
     console.error('We had trouble connecting to the API, please refresh')
     console.log(err)
   }
-  return { ...(stateData || exposedData), apiAvailable }
-}
-
-function beforeStoreUpdate(prevStore: Store | null, newData: Store) {
-  /**
-   * Get store object (called on signup/signin/signout/state)
-   * @param {object} store - existing store
-   * @param {object} <newStoreData> - pass to override store with /login or /state request data
-   * @return {object} store
-   */
-  if (!newData) return newData
-
-  // If newData.jwt is present, update the jwt token
-  if (newData.jwt) {
-    updateJwt(newData.jwt)
-    delete newData.jwt
-  }
-
-  const store = {
-    ...(prevStore || {
-      message: undefined,
-      user: undefined, // defined if user is signed in
-    }),
-    ...(newData || {}),
-  }
-
-  // E.g. Cookie matching handy for rare issues, e.g. signout > signin (to a different user on another tab)
-  axios().defaults.headers.authid = store?.user?._id
-  return store
+  return { ...storeData, apiAvailable }
 }
 
 const defaultMiddleware = {

package/client/globals.ts

@@ -1,13 +1,10 @@
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
 import { onChange } from 'nitro-web'
-import { useTracked } from './store'
 
 declare global {
   // Common application globals
   const onChange: typeof import('nitro-web').onChange
-  /** Global shared store, a react-tracked container initialized in `setupApp()` */
-  let useTracked: typeof import('./store').useTracked
 
   // Common aependency globals
   /** The public API for rendering a history-aware `<a>`. */
@@ -26,8 +23,6 @@ declare global {
 Object.assign(window, {
   // application globals
   onChange: onChange,
-  useTracked: useTracked,
-
   // dependency globals
   Link: Link,
   useCallback: useCallback,

package/client/index.ts

@@ -2,9 +2,14 @@
 import '../types/required-globals.d.ts'
 
 // export const pi = parseFloat(3.142)
-export * from './app'
+// Utility functions
 export * from '../util.js'
 export * as util from '../util.js'
+export * from '../types'
+
+// Main app functions
+export { setupApp, updateJwt } from './app'
+export { createStore, exposedStoreData, preloadedStoreData, setStoreWrapper } from './store'
 
 // Component Pages
 export { Signin } from '../components/auth/signin'

package/client/store.ts

@@ -1,30 +1,45 @@
 import { createContainer } from 'react-tracked'
+import { Dispatch, SetStateAction } from 'react'
+import { axios, isObject } from 'nitro-web/util'
+import { updateJwt } from 'nitro-web'
 import { Store } from 'nitro-web/types'
 
-export type BeforeUpdate = (prevStore: Store | null, newData: Store) => Store
+export const preloadedStoreData: Store = {}
+export let exposedStoreData: Store = preloadedStoreData
 
-let initData: Store
-let beforeUpdate: BeforeUpdate = (prevStore, newData) => newData
-
-const container = createContainer(() => {
-  const [store, setStore] = useState(() => beforeUpdate(null, initData || exposedData || {}))
+export function createStore<T extends Store>(store: T) {
+  const container = createContainer(() => {
+    // const [state, setState] = useState<T>(() => (initData || store || {}) as T)
+    const [state, setState] = useState<T>(() => beforeUpdate((preloadedStoreData || store || {}) as T))
+    exposedStoreData = state
+    return [state, setStoreWrapper(setState)]
+  })
+  return container
+}
 
-  // Wrap the setState function to always run beforeUpdate
-  const wrappedSetStore = (updater: (prevStore: Store) => Store) => {
-    if (typeof updater === 'function') {
-      setStore((prevStore: Store) => beforeUpdate(prevStore, updater(prevStore)))
-    } else {
-      setStore((prevStore: Store) => beforeUpdate(prevStore, updater))
-    }
+export function setStoreWrapper<T extends Store>(setState: Dispatch<SetStateAction<T>>, _beforeUpdate?: (newStore: T) => T) {
+  _beforeUpdate = _beforeUpdate || beforeUpdate
+  return (updater: SetStateAction<T>) => {
+    if (typeof updater === 'function') setState((prev: T) => beforeUpdate(updater(prev)))
+    else setState(() => beforeUpdate(updater))
   }
+}
 
-  exposedData = store
-  return [store, wrappedSetStore]
-})
+function beforeUpdate<T extends Store>(newStore: T) {
+  /**
+   * Get store object (called on signup/signin/signout/state)
+   * @param {object} <newData> - pass to override store with /login or /state request data
+   * @return {object} store
+   */
+  if (!newStore || !isObject(newStore)) return newStore
+
+  // If newData.jwt is present, update the jwt token
+  if (newStore?.jwt) {
+    updateJwt(newStore.jwt)
+    delete newStore.jwt
+  }
 
-export let exposedData: Store
-export const { Provider, useTracked } = container
-export function beforeCreate(_initData: Store, _beforeUpdate: BeforeUpdate) {
-  initData = _initData // normally provided from a /login or /state request data
-  beforeUpdate = _beforeUpdate
+  // 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
+  return newStore
 }

package/components/auth/auth.api.js

@@ -14,7 +14,7 @@ const JWT_SECRET = process.env.JWT_SECRET || 'replace_this_with_secure_env_secre
 export default {
 
   routes: {
-    'get     /api/state': ['state'],
+    'get     /api/store': ['store'],
     'get     /api/signout': ['signout'],
     'post    /api/signin': ['signin'],
     'post    /api/signup': ['signup'],
@@ -87,8 +87,8 @@ export default {
     })
   },
 
-  state: async function (req, res) {
-    res.json(await this._getState(req.user))
+  store: async function (req, res) {
+    res.json(await this._getStore(req.user))
   },
 
   signup: async function (req, res) {
@@ -208,10 +208,10 @@ export default {
 
   /* ---- Private fns ---------------- */
 
-  _getState: async function (user) {
-    // Initial state
+  _getStore: async function (user) {
+    // Initial store
     return {
-      user: user || null,
+      user: user || undefined,
     }
   },
 
@@ -220,8 +220,8 @@ export default {
     user.desktop = isDesktop
 
     const jwt = jsonwebtoken.sign({ _id: user._id }, JWT_SECRET, { expiresIn: '30d' })
-    const state = await this._getState(user)
-    return { ...state, jwt }
+    const store = await this._getStore(user)
+    return { ...store, jwt }
   },
 
   _tokenCreate: function (id) {

package/components/auth/reset.tsx

@@ -3,14 +3,14 @@ import { Errors } from 'nitro-web/types'
 
 export function ResetInstructions() {
   const navigate = useNavigate()
-  const isLoading = useState('')
+  const isLoading = useState()
   const [, setStore] = useTracked()
   const [state, setState] = useState({ email: '', errors: [] as Errors })
 
   async function onSubmit (event: React.FormEvent<HTMLFormElement>) {
     try {
-      await util.request(event, 'post /api/reset-instructions', state, isLoading)
-      setStore(s => ({ ...s, message: 'Done! Please check your email.' }))
+      await util.request('post /api/reset-instructions', state, event, isLoading)
+      setStore((s) => ({ ...s, message: 'Done! Please check your email.' }))
       navigate('/signin')
     } catch (e) {
       return setState({ ...state, errors: e as Errors })
@@ -32,7 +32,7 @@ export function ResetInstructions() {
           <FormError state={state} className="pt-2" />
         </div>
 
-        <Button className="w-full" isLoading={!!isLoading[0]} type="submit">Email me a reset password link</Button>
+        <Button className="w-full" isLoading={isLoading[0]} type="submit">Email me a reset password link</Button>
       </form>
     </div>
   )
@@ -41,7 +41,7 @@ export function ResetInstructions() {
 export function ResetPassword() {
   const navigate = useNavigate()
   const params = useParams()
-  const isLoading = useState('')
+  const isLoading = useState()
   const [, setStore] = useTracked()
   const [state, setState] = useState(() => ({
     password: '',
@@ -52,8 +52,8 @@ export function ResetPassword() {
 
   async function onSubmit (event: React.FormEvent<HTMLFormElement>) {
     try {
-      const data = await util.request(event, 'post /api/reset-password', state, isLoading)
-      setStore(() => data)
+      const data = await util.request('post /api/reset-password', state, event, isLoading)
+      setStore((s) => ({ ...s, ...data }))
       navigate('/')
     } catch (e) {
       return setState({ ...state, errors: e as Errors })
@@ -79,7 +79,7 @@ export function ResetPassword() {
           <FormError state={state} className="pt-2" />
         </div>
 
-        <Button class="w-full" isLoading={!!isLoading[0]} type="submit">Reset Password</Button>
+        <Button class="w-full" isLoading={isLoading[0]} type="submit">Reset Password</Button>
       </form>
     </div>
   )

package/components/auth/signin.tsx

@@ -5,8 +5,9 @@ export function Signin() {
   const navigate = useNavigate()
   const location = useLocation()
   const isSignout = location.pathname == '/signout'
-  const isLoading = useState(isSignout ? 'is-loading' : '')
+  const isLoading = useState(isSignout)
   const [, setStore] = useTracked()
+  
   const [state, setState] = useState({
     email: injectedConfig.env == 'development' ? (injectedConfig.placeholderEmail || '') : '',
     password: injectedConfig.env == 'development' ? '1234' : '',
@@ -21,21 +22,21 @@ export function Signin() {
 
   useEffect(() => {
     if (isSignout) {
-      setStore(() => ({ user: null }))
+      setStore((s) => ({ ...s, user: undefined }))
       // util.axios().get('/api/signout')
       Promise.resolve()
-        .then(() => isLoading[1](''))
+        .then(() => isLoading[1](false))
         .then(() => updateJwt())
         .then(() => navigate({ pathname: '/signin', search: location.search }, { replace: true }))
-        .catch(err => (console.error(err), isLoading[1]('')))
+        .catch(err => (console.error(err), isLoading[1](false)))
     }
   }, [isSignout])
 
   async function onSubmit (e: React.FormEvent<HTMLFormElement>) {
     try {
-      const data = await util.request(e, 'post /api/signin', state, isLoading)
-      isLoading[1]('is-loading')
-      setStore(() => data)
+      const data = await util.request('post /api/signin', state, e, isLoading)
+      isLoading[1](true)
+      setStore((s) => ({ ...s, ...data }))
       setTimeout(() => { // wait for setStore
         if (location.search.includes('redirect')) navigate(location.search.replace('?redirect=', ''))
         else navigate('/')
@@ -67,7 +68,7 @@ export function Signin() {
           <FormError state={state} className="pt-2" />
         </div>
 
-        <Button class="w-full" isLoading={!!isLoading[0]} type="submit">Sign In</Button>
+        <Button class="w-full" isLoading={isLoading[0]} type="submit">Sign In</Button>
       </form>
     </div>
   )

package/components/auth/signup.tsx

@@ -3,7 +3,7 @@ import { Errors } from 'nitro-web/types'
 
 export function Signup() {
   const navigate = useNavigate()
-  const isLoading = useState('')
+  const isLoading = useState(false)
   const [, setStore] = useTracked()
   const [state, setState] = useState({
     email: injectedConfig.env === 'development' ? (injectedConfig.placeholderEmail || '') : '',
@@ -15,9 +15,9 @@ export function Signup() {
 
   async function onSubmit (e: React.FormEvent<HTMLFormElement>) {
     try {
-      const data = await util.request(e, 'post /api/signup', state, isLoading)
-      isLoading[1]('is-loading')
-      setStore(() => data)
+      const data = await util.request('post /api/signup', state, e, isLoading)
+      isLoading[1](true)
+      setStore((s) => ({ ...s, ...data }))
       setTimeout(() => navigate('/'), 0) // wait for setStore
     } catch (e) {
       return setState({ ...state, errors: e as Errors })
@@ -53,7 +53,7 @@ export function Signup() {
           <FormError state={state} className="pt-2" />
         </div>
 
-        <Button class="w-full" isLoading={!!isLoading[0]} type="submit">Create Account</Button>
+        <Button class="w-full" isLoading={isLoading[0]} type="submit">Create Account</Button>
       </form>
     </div>
   )

package/components/partials/element/button.tsx

@@ -1,27 +1,43 @@
 import { twMerge } from 'tailwind-merge'
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid'
 
-type Props = {
-  color?: 'primary'|'secondary'|'white'
+type Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  color?: 'primary'|'secondary'|'black'|'white'
   size?: 'xs'|'sm'|'md'|'lg'
   className?: string
   isLoading?: boolean
   IconLeft?: React.ReactNode|'v'
+  IconLeftEnd?: React.ReactNode|'v'
   IconRight?: React.ReactNode|'v'
-  IconRight2?: React.ReactNode|'v'
+  IconRightEnd?: React.ReactNode|'v'
   children?: React.ReactNode|'v'
-  [key: string]: unknown
 }
 
-export function Button({ color='primary', size='md', className, isLoading, IconLeft, IconRight, IconRight2, children, ...props }: Props) {
+export function Button({ 
+  size='md', 
+  color='primary',
+  className, 
+  isLoading, 
+  IconLeft, 
+  IconLeftEnd, 
+  IconRight, 
+  IconRightEnd, 
+  children, 
+  ...props 
+}: Button) {
   // const size = (color.match(/xs|sm|md|lg/)?.[0] || 'md') as 'xs'|'sm'|'md'|'lg'
-  const iconPosition = IconLeft ? 'left' : IconRight ? 'right' : IconRight2 ? 'right2' : 'none'
-  const base = 'relative inline-block font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2'
+  const iconPosition = IconLeft ? 'left' : IconLeftEnd ? 'leftEnd' : IconRight ? 'right' : IconRightEnd ? 'rightEnd' : 'none'
+  const base = 
+    'relative inline-block text-center font-medium shadow-sm focus-visible:outline focus-visible:outline-2 ' +
+    'focus-visible:outline-offset-2 text-white'
 
-  // Button types
-  const primary = 'bg-primary text-white shadow-sm hover:bg-primary-hover focus-visible:outline-primary'
-  const secondary = 'bg-secondary text-white shadow-sm hover:bg-secondary-hover focus-visible:outline-secondary'
-  const white = 'bg-white text-gray-900 ring-1 ring-inset ring-gray-300 shadow-sm hover:bg-gray-50'
+  // Button colors, you can use custom colors by using className instead
+  const colors = {
+    primary: 'bg-primary hover:bg-primary-hover',
+    secondary: 'bg-secondary hover:bg-secondary-hover',
+    black: 'bg-black hover:bg-gray-700',
+    white: 'bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 [&>.loader]:border-black',
+  }
 
   // Button sizes
   const sizes = {
@@ -31,20 +47,7 @@ export function Button({ color='primary', size='md', className, isLoading, IconL
     lg: 'px-3.5 py-2.5 text-sm rounded-md',
   }
 
-  // Icon position
-  const contentLayouts = {
-    left: 'w-full inline-flex items-center gap-x-1.5',
-    right: 'w-full inline-flex items-center gap-x-1.5',
-    right2: 'w-full inline-flex items-center justify-between gap-x-1.5',
-    none: 'w-full gap-x-1.5',
-  }
-
-  let colorAndSize = ''
-  if (color.match(/primary/)) colorAndSize = `${primary} ${sizes[size]}`
-  else if (color.match(/secondary/)) colorAndSize = `${secondary} ${sizes[size]}`
-  else if (color.match(/white/)) colorAndSize = `${white} ${sizes[size]}`
-
-  const contentLayout = `${contentLayouts[iconPosition]}`
+  const contentLayout = `w-full gap-x-1.5 ${iconPosition == 'none' ? '' : 'inline-flex items-center justify-center'}`
   const loading = isLoading ? '[&>*]:opacity-0 text-opacity-0' : ''
 
   function getIcon(Icon: React.ReactNode | 'v') {
@@ -54,16 +57,18 @@ export function Button({ color='primary', size='md', className, isLoading, IconL
   }
   
   return (
-    <button class={twMerge(`${base} ${colorAndSize} ${contentLayout} ${loading} ${className||''}`)} {...props}>
+    <button class={twMerge(`${base} ${colors[color]} ${sizes[size]} ${contentLayout} ${loading} ${className||''}`)} {...props}>
       {IconLeft && getIcon(IconLeft)}
-      {children}
+      {IconLeftEnd && getIcon(IconLeftEnd)}
+      <span class={`${iconPosition == 'leftEnd' || iconPosition == 'rightEnd' ? 'flex-1' : ''}`}>{children}</span>
       {IconRight && getIcon(IconRight)}
-      {IconRight2 && getIcon(IconRight2)}
+      {IconRightEnd && getIcon(IconRightEnd)}
       {
-        isLoading && 
-        <span class="!opacity-100 absolute inset-0 flex items-center justify-center">
-          <span className="w-4 h-4 rounded-full animate-spin border-2 border-t-transparent border-white" />
-        </span>
+        isLoading &&
+        <span className={
+          'loader !opacity-100 absolute top-[50%] left-[50%] w-[1rem] h-[1rem] ml-[-0.5rem] mt-[-0.5rem] ' +
+          'rounded-full animate-spin border-2 !border-t-transparent border-white'
+        } />
       }
     </button>
   )

package/components/partials/element/message.tsx

@@ -74,7 +74,7 @@ export function Message() {
 
   function hide() {
     setVisible(false)
-    setTimeout(() => setStore(s => ({ ...s, message: null })), 250)
+    setTimeout(() => setStore(s => ({ ...s, message: undefined })), 250)
   }
 
   return (

package/components/partials/element/sidebar.tsx

@@ -16,14 +16,13 @@ export type SidebarProps = {
   Logo?: React.FC<{ width?: string, height?: string }>;
   menu?: { name: string; to: string; Icon: React.FC<{ className?: string }> }[]
   links?: { name: string; to: string; initial: string }[]
-  version?: string
 }
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(' ')
 }
 
-export function Sidebar({ Logo, menu, links, version }: SidebarProps) {
+export function Sidebar({ Logo, menu, links }: SidebarProps) {
   const [sidebarOpen, setSidebarOpen] = useState(false)
   return (
     <>
@@ -46,14 +45,14 @@ export function Sidebar({ Logo, menu, links, version }: SidebarProps) {
                 </button>
               </div>
             </TransitionChild>
-            <SidebarContents Logo={Logo} menu={menu} links={links} version={version} />
+            <SidebarContents Logo={Logo} menu={menu} links={links} />
           </DialogPanel>
         </div>
       </Dialog>
 
       {/* Static sidebar for desktop */}
       <div className={`hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:flex-col ${sidebarWidth}`}>
-        <SidebarContents Logo={Logo} menu={menu} links={links} version={version} />
+        <SidebarContents Logo={Logo} menu={menu} links={links} />
       </div>
       
       {/* mobile sidebar closed */}
@@ -72,7 +71,7 @@ export function Sidebar({ Logo, menu, links, version }: SidebarProps) {
   )
 }
 
-function SidebarContents ({ Logo, menu, links, version }: SidebarProps) {
+function SidebarContents ({ Logo, menu, links }: SidebarProps) {
   const location = useLocation()
   const [store] = useTracked()
   const user = store.user
@@ -102,7 +101,7 @@ function SidebarContents ({ Logo, menu, links, version }: SidebarProps) {
           <Link to="/">
             <Logo width="70" height={undefined} />
           </Link>
-          <span className="text-[9px] text-gray-900 font-semibold mt-4">{version}</span>
+          <span className="text-[9px] text-gray-900 font-semibold mt-4">{injectedConfig.version}</span>
         </div>
       )}
       <nav className="flex flex-1 flex-col">

package/components/partials/styleguide.tsx

@@ -88,12 +88,12 @@ export function Styleguide({ config }: { config: Config }) {
             minWidth="330px" 
             options={[{ label: <><b>New Customer</b> / Add <b>Bruce Lee</b></>, className: 'border-bottom-with-space' }, ...options]}
           >
-            <Button type="white" IconRight2="v" class="gap-x-3">Dropdown bottom-right</Button>
+            <Button color="white" IconRight="v" class="gap-x-3">Dropdown bottom-right</Button>
           </Dropdown>
         </div>
         <div>
           <Dropdown options={options} dir="top-left" minWidth="250px">
-            <Button type="white" IconRight2="v" class="gap-x-3">Dropdown top-left</Button>
+            <Button color="white" IconRight="v" class="gap-x-3">Dropdown top-left</Button>
           </Dropdown>
         </div>
       </div>
@@ -107,9 +107,11 @@ export function Styleguide({ config }: { config: Config }) {
         <div><Button color="primary" size="sm">*-sm button</Button></div>
         <div><Button color="primary">*-md (default)</Button></div>
         <div><Button color="primary" size="lg">*-lg button</Button></div>
-        <div><Button IconLeft={<CheckIcon class="size-5 -my-5 -mx-0.5" />}>IconLeft=Element</Button></div>
-        <div><Button IconRight="v">IconRight=&quot;v&quot;</Button></div>
-        <div><Button IconRight2="v" className="w-[200px]">IconRight2=&quot;v&quot;</Button></div>
+        <div><Button IconLeft={<CheckIcon class="size-5 -my-5 -mx-0.5" />}>IconLeft</Button></div>
+        <div><Button IconLeft={<CheckIcon class="size-5 -my-5 -mx-0.5" />} className="w-[160px]">IconLeft 160px</Button></div>
+        <div><Button IconLeftEnd={<CheckIcon class="size-5 -my-5 -mx-0.5" />} className="w-[190px]">IconLeftEnd 190px</Button></div>
+        <div><Button IconRight="v">IconRight</Button></div>
+        <div><Button IconRightEnd="v" className="w-[190px]">IconRightEnd 190px</Button></div>
         <div><Button color="primary" IconRight="v" isLoading>primary isLoading</Button></div>
       </div>
 

package/components/settings/settings-account.tsx

@@ -5,7 +5,7 @@ import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
 import { Button, FormError, Field, Modal, Topbar, Tabbar } from 'nitro-web'
 
 export function SettingsAccount() {
-  const isLoading = useState('')
+  const isLoading = useState(false)
   const [removeModal, setRemoveModal] = useState()
   const [{user}, setStore] = sharedStore.useTracked()
   const [state, setState] = useState({
@@ -17,7 +17,7 @@ export function SettingsAccount() {
 
   async function onSubmit (e) {
     try {
-      const res = await util.request(e, `put /api/user/${user._id}?files=true`, state, isLoading)
+      const res = await util.request(`put /api/user/${user._id}?files=true`, state, e, isLoading)
       setStore((s) => ({ ...s, user: { ...s.user, ...res }, message: 'Saved successfully 👍️' }))
     } catch (errors) {
       return setState({ ...state, errors })
@@ -92,7 +92,7 @@ export function RemoveModal ({ show, setShow }) {
 
   async function onSubmit (e) {
     try {
-      await util.request(e, `delete /api/account/${state._id}`, null, isLoading)
+      await util.request(`delete /api/account/${state._id}`, null, e, isLoading)
       close()
       setStore(o => ({ ...o, message: 'Data deleted successfully, Goodbye 👋...' }))
       setTimeout(() => navigate('/signout'), 6000) // wait for setStore

package/components/settings/settings-business.tsx

@@ -7,7 +7,7 @@ import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
 import { Button, Field, Select, Topbar, Tabbar } from 'nitro-web'
 
 export function SettingsBusiness({ config }) {
-  const isLoading = useState('')
+  const isLoading = useState(false)
   const [{ user }, setStore] = sharedStore.useTracked()
   const [state, setState] = useState(() => {
     const company = user.company
@@ -26,7 +26,7 @@ export function SettingsBusiness({ config }) {
 
   async function onSubmit (e) {
     try {
-      const company = await util.request(e, `put /api/company/${user.company._id}`, state, isLoading)
+      const company = await util.request(`put /api/company/${user.company._id}`, state, e, isLoading)
       setStore((s) => ({ ...s, user: { ...s.user, company }, message: 'Saved successfully 👍️' }))
     } catch (errors) {
       console.log(errors)

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

@@ -13,7 +13,7 @@ type SettingsTeamMemberProps = {
 export function SettingsTeamMember ({ showModal, setShowModal, config }: SettingsTeamMemberProps) {
   // @param {object} showModal - user
   const [{ user }] = sharedStore.useTracked()
-  const [isLoading] = useState('')
+  const [isLoading] = useState(false)
   const [state, setState] = useState({
     business: {
       name: '',

package/components/settings/settings-team.tsx

@@ -5,7 +5,7 @@ import SvgPlus from 'nitro-web/client/imgs/icons/plus.svg'
 import { Button, Table, Avatar, Tabbar, Topbar, SettingsTeamMember } from 'nitro-web'
 
 export function SettingsTeam({ config }) {
-  const isLoading = useState('')
+  const isLoading = useState(false)
   const [showModal, setShowModal] = useState()
   const [{ user }] = sharedStore.useTracked()
   const [state] = useState({

package/package.json

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

package/tsconfig.json

@@ -31,6 +31,7 @@
     "client",
     "components/**/*.tsx",
     "components/**/*.ts",
-    "types"
+    "types",
+    "./types/core-only-globals.d.ts"
   ]
 }

package/types/core-only-globals.d.ts

@@ -0,0 +1,9 @@
+import { Store } from 'nitro-web/types'
+import { Dispatch, SetStateAction } from 'react'
+
+// Core-only global, this global will be defined globally in the project (e.g. in ./client/index.ts)
+declare global { 
+  const useTracked: () => [Store, Dispatch<SetStateAction<Store>>]
+}
+
+export {}

package/types/util.d.ts

@@ -158,7 +158,7 @@ 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;
 export function queryString(obj: any): string;
-export function request(event: any, route: any, data: any, isLoading: any): Promise<any>;
+export function request(route: any, data: any, event: any, isLoading: any): Promise<any>;
 export function removeUndefined(variable: any): any;
 export function s3Image(awsUrl: any, image: any, size: string, i: any): any;
 export function sanitizeHTML(string: any): string;

package/types.ts

@@ -46,10 +46,10 @@ export type MessageObject = {
 }
 
 export type Store = {
-  message?: MessageObject | string | null
-  user?: User | null,
   apiAvailable?: boolean
   jwt?: string
+  message?: MessageObject | string
+  user?: User,
 }
 
 export type Svg = React.FC<React.SVGProps<SVGElement>>

package/util.js

@@ -908,12 +908,12 @@ export function queryString (obj) {
   return qs ? `?${qs}` : ''
 }
 
-export async function request (event, route, data, isLoading) {
+export async function request (route, data, event, isLoading) {
   /**
    * Axios request to the route
-   * @param {Event} event - event to prevent default
    * @param {string} route - e.g. 'post /api/user'
    * @param {object} <data> - payload
+   * @param {Event} <event> - event to prevent default
    * @param {array} <isLoading> - [isLoading, setIsLoading]
    * @return {promise}
    */
@@ -925,7 +925,7 @@ export async function request (event, route, data, isLoading) {
     // show loading
     if (isLoading) {
       if (isLoading[0]) return
-      else isLoading[1](' is-loading')
+      else isLoading[1](true)
     }
 
     // warning, not persisting through re-renders, but should be fine until loading is finished
@@ -950,7 +950,7 @@ export async function request (event, route, data, isLoading) {
     ])
 
     // success
-    if (isLoading) isLoading[1]('')
+    if (isLoading) isLoading[1](false)
     if (res.status == 'rejected') throw res.reason
     return res.value.data