nitro-web 0.0.73 → 0.0.74

package/client/app.tsx

@@ -1,4 +1,4 @@
-import { createBrowserRouter, createHashRouter, redirect, useParams, RouterProvider } from 'react-router-dom' 
+import { createBrowserRouter, createHashRouter, redirect, RouterProvider } from 'react-router-dom' 
 import { Fragment, ReactNode } from 'react'
 import ReactDOM from 'react-dom/client'
 import { axios, camelCase, pick, toArray, setTimeoutPromise } from 'nitro-web/util'
@@ -25,7 +25,7 @@ type Settings = {
 }
 
 type Route = {
-  component: React.FC<{ route?: Route; params?: object; location?: object; config?: Config }>
+  component: React.FC<{ route?: Route; config?: Config }>
   middleware: string[]
   name: string
   path: string
@@ -70,9 +70,7 @@ export function updateJwt(token?: string | null) {
 }
 
 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'
+  const router = useMemo(() => getRouter({ settings, config }), [])
 
   useEffect(() => {
     /**
@@ -97,10 +95,8 @@ function App({ settings, config, storeContainer }: { settings: Settings, config:
 
   return (
     <storeContainer.Provider>
-      {/* <ThemeProvider theme={themeNormalised}> */}
-      { router && <RouterProvider router={router} /> }
+      { router && <RouterProvider router={router}/> }
       <AfterApp settings={settings} />
-      {/* </ThemeProvider> */}
     </storeContainer.Provider>
   )
 }
@@ -206,7 +202,7 @@ function getRouter({ settings, config }: { settings: Settings, config: Config })
           ),
           path: route.path,
           loader: async () => { // request
-            // wait for container/exposedStoreData to be setup
+            // wait for container/exposedStoreData to be setup (note that this causes ReactRouter to re-render, but not the page)
             if (!nonce) {
               nonce = true 
               await setTimeoutPromise(() => {}, 0)
@@ -255,11 +251,9 @@ function RestoreScroll() {
 
 function RouteComponent({ route, config }: { route: Route, config: Config }) {
   const Component = route.component
-  const params = useParams()
-  const location = useLocation()
   document.title = route.meta?.title || ''
   return (
-    <Component route={route} params={params} location={location} config={config} />
+    <Component route={route} config={config} />
   )
 }
 

package/components/partials/element/dropdown.tsx

@@ -14,14 +14,14 @@ type DropdownProps = {
   options?: { label: string|React.ReactNode, onClick?: Function, isSelected?: boolean, icon?: React.ReactNode, className?: string }[]
   /** Whether the dropdown is hoverable **/
   isHoverable?: boolean
-  /** The minimum width of the menu **/
-  minWidth?: number | string
   /** The content to render inside the top of the dropdown **/
   menuContent?: React.ReactNode
   menuClassName?: string
   menuOptionClassName?: string
   menuIsOpen?: boolean
   menuToggles?: boolean
+  /** The minimum width of the menu **/
+  minWidth?: number | string
   toggleCallback?: (isActive: boolean) => void
 }
 
@@ -30,15 +30,15 @@ export const Dropdown = forwardRef(function Dropdown({
   animate=true,
   children, 
   className,
-  dir, 
+  dir='bottom-left', 
   options, 
   isHoverable,
-  minWidth, // remove in favour of menuClassName
   menuClassName,
   menuOptionClassName,
   menuContent, 
   menuIsOpen, 
   menuToggles=true,
+  minWidth,
   toggleCallback,
 }: DropdownProps, ref) {
   // https://letsbuildui.dev/articles/building-a-dropdown-menu-component-with-react-hooks
@@ -46,6 +46,8 @@ export const Dropdown = forwardRef(function Dropdown({
   const dropdownRef = useRef<HTMLDivElement|null>(null)
   const [isActive, setIsActive] = useState(!!menuIsOpen)
   const menuStyle = getSelectStyle({ name: 'menu' })
+  const [direction, setDirection] = useState<null | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'>(null)
+  const [ready, setReady] = useState(false)
 
   // Expose the setIsActive function to the parent component
   useImperativeHandle(ref, () => ({ setIsActive }))
@@ -76,7 +78,50 @@ export const Dropdown = forwardRef(function Dropdown({
   useEffect(() => {
     if (toggleCallback) toggleCallback(isActive)
   }, [isActive])
+
+  useEffect(() => {
+    setReady(false)
+    if (!isActive || !dropdownRef.current) return
+    
+    const ul = dropdownRef.current.querySelector('ul') as HTMLElement
+    if (!ul) return
+  
+    // Temporarily show the ul for measurement
+    const originalMaxHeight = ul.style.maxHeight
+    const originalVisibility = ul.style.visibility
+    const originalOpacity = ul.style.opacity
+    const originalPointerEvents = ul.style.pointerEvents
+  
+    ul.style.maxHeight = 'none'
+    ul.style.visibility = 'hidden'
+    ul.style.opacity = '0'
+    ul.style.pointerEvents = 'none'
   
+    const dropdownHeight = ul.getBoundingClientRect().height
+  
+    // Revert styles
+    ul.style.maxHeight = originalMaxHeight
+    ul.style.visibility = originalVisibility
+    ul.style.opacity = originalOpacity
+    ul.style.pointerEvents = originalPointerEvents
+  
+    const rect = dropdownRef.current.getBoundingClientRect()
+    const spaceBelow = window.innerHeight - rect.bottom
+    const spaceAbove = rect.top
+  
+    const side = dir.endsWith('right') ? 'right' : 'left'
+  
+    const newDirection = dir.startsWith('bottom')
+      ? `${spaceBelow < dropdownHeight && spaceAbove > dropdownHeight ? 'top' : 'bottom'}-${side}`
+      : `${spaceAbove < dropdownHeight && spaceBelow > dropdownHeight ? 'bottom' : 'top'}-${side}`
+  
+    setDirection(newDirection as 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right')
+  
+    requestAnimationFrame(() => {
+      setReady(true)
+    })
+  }, [isActive, dir])
+
   function onMouseDown(e: { key: string, preventDefault: Function }) {
     if (e.key && e.key != 'Enter') return
     if (e.key) e.preventDefault() // for button, stops buttons firing twice
@@ -87,12 +132,13 @@ export const Dropdown = forwardRef(function Dropdown({
     if (option.onClick) option.onClick(e)
     if (!menuIsOpen) setIsActive(!isActive)
   }
+  var ready2
 
   return (
     <div 
       class={
-        'relative' + 
-        (dir ? ` is-${dir}` : ' is-bottom-left') +
+        `relative is-${direction || dir}` + // until hovered, show the original direction to prevent scrollbars
+        (ready2 ? ' is-ready' : '') +
         (isHoverable ? ' is-hoverable' : '') +
         (isActive ? ' is-active' : '') +
         (!animate ? ' no-animation' : '') +
@@ -113,7 +159,8 @@ export const Dropdown = forwardRef(function Dropdown({
       }
       <ul
         style={{ minWidth }}
-        class={twMerge(`${menuStyle} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName}`)}
+        class={
+          twMerge(`${menuStyle} ${ready ? 'is-ready' : ''} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName||''}`)}
       >
         {menuContent}
         {
@@ -172,7 +219,7 @@ const style = css`
   &>ul>li:hover,
   &>ul>li:focus,
   &>ul>li.is-active {
-    &>ul {
+    &>ul.is-ready {
       opacity: 1;
       visibility: visible;
       transition: transform 0.15s ease, opacity 0.15s ease;

package/components/partials/element/github-link.tsx

@@ -1,7 +1,7 @@
 import GithubIcon from 'nitro-web/client/imgs/github.svg'
 
 export function GithubLink({ filename }: { filename: string }) {
-  const base = 'https://github.com/boycce/nitro-web/blob/master/'
+  const base = 'https://github.com/boycce/nitro-web/blob/master/packages/'
   // Filenames are relative to the webpack start directory
   // 1. Remove ../ from filename (i.e. for _example build)
   // 2. Remove node_modules/nitro-web/ from filename (i.e. for packages using nitro-web)

package/components/partials/form/checkbox.tsx

@@ -1,121 +1,146 @@
-import { twMerge } from 'nitro-web/util'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { twMerge, deepFind, getErrorFromState } from 'nitro-web/util'
+import { Errors, type Error } from 'nitro-web/types'
 
-type CheckboxProps = {  
+type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {  
+  /** field name or path on state (used to match errors), e.g. 'date', 'company.email' */
   name: string
-  /** name is applied if not provided. Used for radios */
+  /** name is applied if id is not provided. Used for radios */
   id?: string 
-  size?: 'md' | 'sm'
+  /** state object to get the value, and check errors against */
+  state?: { errors?: Errors, [key: string]: any }
+  size?: number
   subtext?: string|React.ReactNode
   text?: string|React.ReactNode
   type?: 'checkbox' | 'radio' | 'toggle'
-  [key: string]: unknown
+  checkboxClassName?: string
+  svgClassName?: string
+  labelClassName?: string
 }
 
-export function Checkbox({ name, id, size='sm', subtext, text, type='checkbox', ...props }: CheckboxProps) {
+export function Checkbox({ 
+  state, size, subtext, text, type='checkbox', className, checkboxClassName, svgClassName, labelClassName, ...props 
+}: CheckboxProps) {
   // Checkbox/radio/toggle component
-  // https://tailwindui.com/components/application-ui/forms/checkboxes#component-744ed4fa65ba36b925701eb4da5c6e31
-  if (!name) throw new Error('Checkbox requires a `name` prop')
-  id = id || name
+  let value!: boolean
+  const error = getErrorFromState(state, props.name)
+  const id = props.id || props.name
 
-  const sizeMap = {
-    sm: {
-      checkbox: 'size-[14px]',
-      toggleWidth: 'w-[32px]', // 4px border + (toggleAfterSize * 2)
-      toggleHeight: 'h-[18px]',
-      toggleAfterSize: 'after:size-[14px]', // account for 2px border
-    },
-    md: {
-      checkbox: 'size-[16px]',
-      toggleWidth: 'w-[40px]', // 4px border + (toggleAfterSize * 2)
-      toggleHeight: 'h-[22px]',
-      toggleAfterSize: 'after:size-[18px]', // account for 2px border
-    },
+  if (!props.name) throw new Error('Checkbox requires a `name` prop')
+  
+  // Value: Input is always controlled if state is passed in
+  if (typeof props.checked !== 'undefined') value = props.checked
+  else if (typeof state == 'object') {
+    const v = deepFind(state, props.name) as boolean | undefined
+    value = v ?? false
   }
-  const _size = sizeMap[size]
+
+  const BORDER = 2
+  const checkboxSize = size ?? 14
+  const toggleHeight = size ?? 18
+  const toggleWidth = toggleHeight * 2 - BORDER * 2
+  const toggleAfterSize = toggleHeight - BORDER * 2
 
   return (
-    <div className={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after flex gap-3 nitro-checkbox ${props.className || ''}`)}>
-      <div className="flex shrink-0 mt-[2px]">
-        {
-          type !== 'toggle'
-            ? <div className={`group grid ${_size.checkbox} grid-cols-1`}>
-                <input
-                  {...props}
-                  id={id}
-                  name={name}
-                  type={type}
-                  className={
-                    `${type === 'radio' ? 'rounded-full' : 'rounded'} col-start-1 row-start-1 appearance-none border border-gray-300 bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto ` + 
-                    // Default
-                    'checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-blue-600 ' +
-                    // Variable-selected color defined?
-                    'checked:!border-variable-selected checked:!bg-variable-selected indeterminate:!border-variable-selected indeterminate:!bg-variable-selected focus-visible:!outline-variable-selected'
-                  }
-                />
-                <svg
-                  fill="none"
-                  viewBox="0 0 14 14"
-                  className={`pointer-events-none col-start-1 row-start-1 ${_size.checkbox} self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25`}
-                >
-                  {
-                    type === 'radio'
-                      ? <circle
-                          // cx={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 2}
-                          // cy={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 2}
-                          // r={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 6}
-                          cx={7}
-                          cy={7}
-                          r={2.5}
-                          className="fill-white opacity-0 group-has-[:checked]:opacity-100"
-                        />
-                      : <>
-                          <path
-                            d="M4 8L6 10L10 4.5"
-                            strokeWidth={2}
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            className="opacity-0 group-has-[:checked]:opacity-100"
-                          />
-                          <path
-                            d="M4 7H10"
-                            strokeWidth={2}
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            className="opacity-0 group-has-[:indeterminate]:opacity-100"
-                          />
-                        </>
-                  }
-                </svg>
-              </div>
-            : <div className="group grid grid-cols-1">
-                <input 
-                  {...props}
-                  id={id}
-                  name={name}
-                  type="checkbox" 
-                  class="sr-only peer"
-                />
-                <label 
-                  for={id}
-                  className={
-                    `col-start-1 row-start-1 relative ${_size.toggleWidth} ${_size.toggleHeight} bg-gray-200 peer-focus-visible:outline-none peer-focus-visible:ring-4 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full ${_size.toggleAfterSize} after:transition-all ` +
-                    // Default
-                    'peer-focus-visible:ring-blue-300 peer-checked:bg-blue-600 ' +
-                    // Variable-selected color defined?
-                    'peer-focus-visible:!ring-variable-selected peer-checked:!bg-variable-selected '
-                    // Dark mode not used yet...
-                    // 'dark:peer-focus-visible:ring-blue-800 dark:bg-gray-700 dark:border-gray-600 '
-                  }
-                />
-              </div>
+    <div 
+      className={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after text-sm nitro-checkbox ${className}`)}
+    >
+      <div className="flex gap-3 items-baseline">
+        <div className="shrink-0 flex items-center">
+          <div className="w-0">&nbsp;</div>
+          <div className="group relative">
+            {
+              type !== 'toggle'
+                ? <>
+                    <input
+                      {...props}
+                      type={type}
+                      style={{ width: checkboxSize, height: checkboxSize }}
+                      checked={value}
+                      className={
+                        twMerge(
+                          `${type === 'radio' ? 'rounded-full' : 'rounded'} appearance-none border border-gray-300 bg-white forced-colors:appearance-auto disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ` + 
+                          // Variable-selected theme colors (was .*-blue-600)
+                          'checked:border-variable-selected checked:bg-variable-selected indeterminate:border-variable-selected indeterminate:bg-variable-selected focus-visible:outline-variable-selected ' +
+                          // Dark mode not used yet... dark:focus-visible:outline-blue-800
+                          checkboxClassName
+                        )
+                      }
+                    />
+                    <svg
+                      fill="none"
+                      viewBox="0 0 14 14"
+                      style={{ width: checkboxSize, height: checkboxSize }}
+                      className={twMerge('absolute top-0 left-0 pointer-events-none justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25', svgClassName)}
+                    >
+                      {
+                        type === 'radio'
+                          ? <circle
+                              // cx={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 2}
+                              // cy={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 2}
+                              // r={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 6}
+                              cx={7}
+                              cy={7}
+                              r={2.5}
+                              className="fill-white opacity-0 group-has-[:checked]:opacity-100"
+                            />
+                          : <>
+                              <path
+                                d="M4 8L6 10L10 4.5"
+                                strokeWidth={2}
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                className="opacity-0 group-has-[:checked]:opacity-100"
+                              />
+                              <path
+                                d="M4 7H10"
+                                strokeWidth={2}
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                className="opacity-0 group-has-[:indeterminate]:opacity-100"
+                              />
+                            </>
+                      }
+                    </svg>
+                  </>
+                : <>
+                    <input 
+                      {...props}
+                      type="checkbox" 
+                      className="sr-only peer"
+                      checked={value}
+                    />
+                    <label
+                      for={id}
+                      style={{ width: toggleWidth, height: toggleHeight }}
+                      className={
+                        twMerge(
+                          'block bg-gray-200 rounded-full transition-colors peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 ' +
+                          // Variable-selected theme colors (was .*-blue-600)
+                          'peer-checked:bg-variable-selected peer-focus-visible:outline-variable-selected ' +
+                          labelClassName
+                        )
+                      }
+                    >
+                      <span
+                        style={{ width: toggleAfterSize, height: toggleAfterSize }}
+                        className={
+                          'absolute top-[2px] start-[2px] bg-white border-gray-300 border rounded-full transition-all group-has-[:checked]:border-white group-has-[:checked]:translate-x-full '
+                        }
+                      />
+                    </label>
+                  </>
+            }
+          </div>
+        </div>
+        {text && 
+          <label for={id} className="text-[length:inherit] leading-[inherit] select-none">
+            <span className="text-gray-900">{text}</span>
+            <span className="ml-2 text-gray-500">{subtext}</span>
+          </label>
         }
       </div>
-      {text && 
-        <label for={id} className="self-center text-sm select-none">
-          <span className="text-gray-900">{text}</span>
-          <span className="ml-2 text-gray-500">{subtext}</span>
-        </label>
-      }
+      {error && <div class="mt-1.5 text-xs text-danger-foreground nitro-error">{error.detail}</div>}
     </div>
   )
 }

package/components/partials/form/field.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-// Maybe use fill-current tw class for lucide icons (https://github.com/lucide-icons/lucide/discussions/458)
+// fill-current tw class for lucide icons (https://github.com/lucide-icons/lucide/discussions/458)
 import { css } from 'twin.macro'
 import { FieldCurrency, FieldCurrencyProps, FieldColor, FieldColorProps, FieldDate, FieldDateProps } from 'nitro-web'
 import { twMerge, getErrorFromState, deepFind } from 'nitro-web/util'

package/components/partials/styleguide.tsx

@@ -204,18 +204,21 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
       <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." />
+          <Checkbox name="input2" type="toggle" text="Toggle sm" subtext="some additional text here." class="!mb-0" 
+            state={state} onChange={(e) => onChange(setState, e)} />
+          <Checkbox name="input3" type="toggle" text="Toggle 22px" subtext="some additional text here." size={22} />
         </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" 
+          <Checkbox name="input1" type="radio" text="Radio" 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" />
+          <Checkbox name="input1" type="radio" text="Radio 16px" subtext="some additional text here 2." id="input1-2"  size={16} />
         </div>
         <div>
           <label for="input0">Label</label>
-          <Checkbox name="input0" type="checkbox" text="Checkbox" subtext="some additional text here." defaultChecked />
+          <Checkbox name="input0" type="checkbox" text="Checkbox" subtext="some additional text here."  class="!mb-0" defaultChecked />
+          <Checkbox name="input0.1" type="checkbox" text="Checkbox 16px" size={16}
+            subtext="some additional text here which is a bit longer that will be line-wrap to the next line." />
         </div>
       </div>
 

package/package.json

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