nitro-web 0.0.10 → 0.0.12

package/components/partials/element/{message.jsx → message.tsx}

@@ -1,22 +1,18 @@
 // Todo: show correct message type, e.g. error, warning, info, success `${store.message.type || 'success'}`
-import { isObject, isString, queryObject } from '../../../util.js'
+import { isObject, isString, queryObject } from 'nitro-web/util'
 import { Transition } from '@headlessui/react'
 import { CheckCircleIcon } from '@heroicons/react/24/outline'
 import { XMarkIcon } from '@heroicons/react/20/solid'
+import { MessageObject } from 'types'
 
+/**
+ * Shows a message
+ * Triggered by navigating to a link with a valid query string, or
+ * by setting store.message to a string or more explicitly, to an object
+ **/
 export function Message() {
-  /**
-   * Shows a message
-   * Triggered by navigating to a link with a valid query string, or
-   * by setting store.message to a string or more explicitly, to an object:
-   * {
-   *   text: {string|JSX} - Text to be shown
-   *   type: <string> - 'warning', 'error', 'info', 'success' (default)
-   *   timeout: <integer> - Seconds to automatically close the message, 0 = never, (default 9s)
-   * }
-   */
   const devDontHide = false
-  const [store, setStore] = sharedStore.useTracked()
+  const [store, setStore] = useTracked()
   const [visible, setVisible] = useState(false)
   const location = useLocation()
   const messageQueryMap = {
@@ -39,11 +35,12 @@ export function Message() {
   useEffect(() => {
     // Finds a message in a query string and show it
     let message
-    let query = queryObject(location.search, true)
-    for (let key in query) {
+    const query = queryObject(location.search, true)
+    for (const key in query) {
       if (!query.hasOwnProperty(key)) continue
-      for (let key2 in messageQueryMap) {
+      for (const key2 in messageQueryMap) {
         if (key != key2) continue
+        // @ts-expect-error
         message = { ...messageQueryMap[key] }
         if (query[key] !== true) message.text = decodeURIComponent(query[key])
       }
@@ -53,20 +50,21 @@ export function Message() {
 
   useEffect(() => {
     // Message detection and autohiding
-    let now = new Date().getTime()
+    const now = new Date().getTime()
+    const messageObject = store.message as MessageObject
 
     if (!store.message) {
       return
     // Convert a string into a message object
     } else if (isString(store.message)) {
-      setStore(s => ({ ...s, message: { type: 'success', text: store.message, date: now }}))
+      setStore(s => ({ ...s, message: { type: 'success', text: store.message as string, date: now }}))
     // Add a date to the message
-    } else if (!store.message.date) {
-      setStore(s => ({ ...s, message: { ...store.message, date: now }}))
+    } else if (!messageObject.date) {
+      setStore(s => ({ ...s, message: { ...messageObject, date: now }}))
     // Show message and hide it again after some time. Send back cleanup if store.message changes
-    } else if (store.message && now - 500 < store.message.date) {
-      let timeout1 = setTimeout(() => setVisible(true), 50)
-      if (store.message.timeout !== 0 && !devDontHide) var timeout2 = setTimeout(hide, store.message.timeout || 5000)
+    } else if (messageObject && now - 500 < messageObject.date) {
+      const timeout1 = setTimeout(() => setVisible(true), 50)
+      if (messageObject.timeout !== 0 && !devDontHide) var timeout2 = setTimeout(hide, messageObject.timeout || 5000)
       return () => {
         clearTimeout(timeout1)
         clearTimeout(timeout2)
@@ -99,7 +97,8 @@ export function Message() {
                     <CheckCircleIcon aria-hidden="true" className="size-6 text-green-400" />
                   </div>
                   <div className="ml-3 flex-1 pt-0.5">
-                    <p className="text-sm font-medium text-gray-900">{store.message?.text}</p>
+                    <p className="text-sm font-medium text-gray-900">{typeof store.message === 'object' && store.message?.text}
+                    </p>
                     {/* <p className="mt-1 text-sm text-gray-500">{store.message.text}</p> */}
                   </div>
                   <div className="ml-4 flex shrink-0">

package/components/partials/element/{modal.jsx → modal.tsx}

@@ -1,7 +1,8 @@
+// @ts-nocheck
 // todo: finish tailwind conversion
 import { css } from 'twin.macro'
-import { IsFirstRender } from '../is-first-render.js'
-import SvgX1 from '../../../client/imgs/icons/x1.svg'
+import { IsFirstRender } from 'nitro-web'
+import SvgX1 from 'nitro-web/client/imgs/icons/x1.svg'
 
 export function Modal({ show, setShow, children, className, maxWidth, minHeight, dismissable = true }) {
   const [state, setState] = useState()
@@ -113,7 +114,7 @@ export function Modal({ show, setShow, children, className, maxWidth, minHeight,
   )
 }
 
-const style = () => css`
+const style = css`
   /* Modal structure */
   & {
     position: fixed;

package/components/partials/element/{sidebar.jsx → sidebar.tsx}

@@ -1,6 +1,6 @@
 // Component: https://tailwindui.com/components/application-ui/application-shells/sidebar#component-a69d85b6237ea2ad506c00ef1cd39a38
 import { Dialog, DialogBackdrop, DialogPanel, TransitionChild } from '@headlessui/react'
-import avatarImg from '../../../client/imgs/avatar.jpg'
+import avatarImg from 'nitro-web/client/imgs/avatar.jpg'
 import {
   Bars3Icon,
   HomeIcon,
@@ -12,11 +12,17 @@ import {
 
 const sidebarWidth = 'lg:w-80'
 
-function classNames(...classes) {
+export type SidebarProps = {
+  Logo: React.FC<{ width?: string, height?: string, alt?: string }>;
+  menu?: { name: string; to: string; Icon: React.FC<{ className?: string }> }[]
+  links?: { name: string; to: string; initial: string }[]
+}
+
+function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(' ')
 }
 
-export function Sidebar({ Logo, menu, links }) {
+export function Sidebar({ Logo, menu, links }: SidebarProps) {
   const [sidebarOpen, setSidebarOpen] = useState(false)
   return (
     <>
@@ -65,11 +71,12 @@ export function Sidebar({ Logo, menu, links }) {
   )
 }
 
-function SidebarContents ({ Logo, menu, links }) {
+function SidebarContents ({ Logo, menu, links }: SidebarProps) {
   const location = useLocation()
-  const [{ user }] = sharedStore.useTracked()
-
-  function isActive(path) {
+  const [store] = useTracked()
+  const user = store.user
+  
+  function isActive(path: string) {
     if (path == '/' && location.pathname == path) return 'is-active'
     else if (path != '/' && location.pathname.match(`^${path}`)) return 'is-active'
     else return ''

package/components/partials/element/{tooltip.jsx → tooltip.tsx}

@@ -1,11 +1,19 @@
 // todo: finish tailwind conversion
 import { css } from 'twin.macro'
 
-export function Tooltip({ text, children, className, classNamePopup, isSmall }) {
+type TooltipProps = {
+  children: React.ReactNode
+  className?: string
+  classNamePopup?: string
+  isSmall?: boolean
+  text?: React.ReactNode
+}
+
+export function Tooltip({ text, children, className, classNamePopup, isSmall }: TooltipProps) {
   return (
     <div class={`${className} relative inline-block align-middle`} css={style}>
       {
-        text?.length || text?.props
+        text
         ? <>
             <div class="tooltip-trigger ">{children}</div>
             <div class={`tooltip-popup ${classNamePopup||''} ${isSmall ? 'is-small' : ''}`}>{text}</div>
@@ -16,7 +24,7 @@ export function Tooltip({ text, children, className, classNamePopup, isSmall })
   )
 }
 
-const style = () => css`
+const style = css`
   .tooltip-popup {
     position: absolute;
     display: block;

package/components/partials/element/{topbar.jsx → topbar.tsx}

@@ -1,10 +1,12 @@
-export function Topbar({ title, subtitle, submenu, btns, className }) {
-  /**
-   * @param {string|JSX} title
-   * @param {string|JSX} <subtitle>
-   * @param {string|JSX} <submenu>
-   * @param {url|function} <plusIconAction>
-   */
+type TopbarProps = {
+  title: React.ReactNode
+  subtitle?: React.ReactNode
+  submenu?: React.ReactNode
+  btns?: React.ReactNode
+  className?: string
+}
+
+export function Topbar({ title, subtitle, submenu, btns, className }: TopbarProps) {
   return (
     <div class={`flex justify-between items-end mb-6 ${className||''}`}>
       <div class="flex flex-col min-h-12">

package/components/partials/form/{checkbox.jsx → checkbox.tsx}

@@ -1,17 +1,17 @@
+type CheckboxProps = {  
+  name: string
+  /** The id of the checkbox (used for radios) **/
+  id?: string 
+  size?: 'md' | 'sm'
+  subtext?: string|React.ReactNode
+  text?: string|React.ReactNode
+  type?: 'checkbox' | 'radio' | 'toggle'
+  [key: string]: unknown
+}
 
-/**
- * Checkbox/radio/toggle component
- * @param {string} name - The name of the checkbox
- * @param {string} [id] - The id of the checkbox (used for radios)
- * @param {'sm' | 'md'} [size='sm'] - The size of the toggle
- * @param {string} [subtext] 
- * @param {string} [text] 
- * @param {'checkbox' | 'radio' | 'toggle'} [type='checkbox']
- * @param {object} [props] - input props
- * 
- * @link https://tailwindui.com/components/application-ui/forms/checkboxes#component-744ed4fa65ba36b925701eb4da5c6e31
- */
-export function Checkbox({ name, id, size='sm', subtext, text, type='checkbox', ...props }) {
+export function Checkbox({ name, id, size='sm', subtext, text, type='checkbox', ...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
   return (

package/components/partials/form/drop-handler.tsx

@@ -0,0 +1,68 @@
+type DropHandlerProps = {
+  onDrop: (files: FileList) => void
+  children: React.ReactNode
+  className?: string
+}
+
+export const DropHandler = ({ onDrop, children, className }: DropHandlerProps) => {
+  const dropRef = useRef<HTMLDivElement>(null)
+  let dragCounter = useRef(0).current
+  const [dragging, setDragging] = useState(false)
+
+  useEffect(() => {
+    const div = dropRef.current
+    div?.addEventListener('dragenter', handleDragIn)
+    div?.addEventListener('dragleave', handleDragOut)
+    div?.addEventListener('dragover', handleDragOver)
+    div?.addEventListener('drop', handleDrop)
+    return () => {
+      div?.removeEventListener('dragenter', handleDragIn)
+      div?.removeEventListener('dragleave', handleDragOut)
+      div?.removeEventListener('dragover', handleDragOver)
+      div?.removeEventListener('drop', handleDrop)
+    }
+  }, [])
+
+  const handleDragIn = (e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    dragCounter++
+    if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) {
+      setDragging(true)
+    }
+  }
+
+  const handleDragOut = (e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    dragCounter--
+    if (dragCounter === 0) {
+      setDragging(false)
+    }
+  }
+
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setDragging(false)
+    if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
+      onDrop(e.dataTransfer.files)
+      // e.dataTransfer.clearData() // causes an error in firefox
+      dragCounter = 0
+    }
+  }
+
+  return (
+    <div 
+      ref={dropRef}
+      class={`${className} relative w-full p-[20px] border-2 border-dashed border-input-border rounded-md ${dragging ? 'border-primary before:content-[""] before:absolute before:inset-0 before:bg-primary before:opacity-5' : ''}`}
+    >
+      {children}
+    </div>
+  )
+}

package/components/partials/form/{drop.jsx → drop.tsx}

@@ -1,44 +1,62 @@
-import { isRegex, deepFind, s3Image } from '../../../util.js'
-import { DropHandler } from './drop-handler.jsx'
-import noImage from '../../../client/imgs/no-image.svg'
+// @ts-nocheck
+import { isRegex, deepFind, s3Image } from 'nitro-web/util'
+import { DropHandler } from 'nitro-web'
+import noImage from 'nitro-web/client/imgs/no-image.svg'
+import { Errors, MonasteryImage } from 'types'
 
-export function Drop({ awsUrl, className, id, name, onChange, multiple, state, ...props }) {
-  /**
-   * @param {string} name - field name or path on state (used to match errors), e.g. 'avatar', 'company.avatar'
-   * @param {string} <id> - not required, name used if not provided
-   * @param {function} onChange({ target: { id: <{name}|errors>, value } }) - gets called on success/error
-   * @param {object} state - State object to get the value, and check errors against
-   */
+type DropProps = {
+  awsUrl?: string
+  className?: string
+  /** Optional ID for the input element. Defaults to name if not provided */
+  id?: string
+  /** Field name or path on state (used to match errors), e.g. 'avatar', 'company.avatar' */
+  name: string
+  /** Called when file is selected or dropped */
+  onChange?: any // (event: { target: { id: string, value: File|FileList } }) => void
+  /** Whether to allow multiple file selection */
+  multiple?: boolean
+  /** State object to get the value and check errors against */
+  state?: {
+    errors?: Errors
+    [key: string]: unknown
+  }
+  /** Props to pass to the input element */
+  [key: string]: unknown
+}
+
+type Image = File | FileList | MonasteryImage | null
+
+export function Drop({ awsUrl, className, id, name, onChange, multiple, state, ...props }: DropProps) {
   if (!name) throw new Error('Drop component requires a `name` prop')
+  let value: Image = null
+  let error: Error | unknown
   const inputId = id ||name
-  const stateRef = useRef()
   const [urls, setUrls] = useState([])
+  const stateRef = useRef(state)
   stateRef.current = state
 
   // Input is always controlled if state is passed in
-  if (props.value) {
-    var value = props.value
-  } else if (typeof state == 'object') {
-    value = deepFind(state, name)
-    if (typeof value == 'undefined') value = null
-  }
+  if (props.value) value = props.value as Image
+  else if (typeof state == 'object') value = deepFind(state, name) as Image
+  if (typeof value == 'undefined') value = null
 
   // An error matches this input path
-  for (let item of (state?.errors || [])) {
-    if (isRegex(name) && (item.title||'').match(name)) var error = item
+  for (const item of (state?.errors as Errors[] || [])) {
+    if (isRegex(name) && (item.title||'').match(name)) error = item
     else if (item.title == name) error = item
   }
 
   useEffect(() => {
-    (async () => setUrls(await getUrls(value)))()
+    (async () => setUrls(await getUrls(value as File | FileList | MonasteryImage | null)))()
   }, [value])
 
-  function tryAgain (e) {
+  function tryAgain (e: { preventDefault: Function }) {
     e.preventDefault()
     // clear file input to allow reupload
-    document.getElementById(name).value = ''
+    const input = document.getElementById(name) as HTMLInputElement
+    if (input) input.value = ''
     if (onChange) {
-      const errors = (stateRef.errors||[]).filter(e => e.title != name)
+      const errors = (stateRef?.current?.errors || []).filter((e: Errors[]) => e?.title != name)
       onChange({
         // remove file from state
         target: { id: name, value: null },
@@ -48,28 +66,28 @@ export function Drop({ awsUrl, className, id, name, onChange, multiple, state, .
     }
   }
 
-  async function onFileAttach (files=[]) { 
+  async function onFileAttach (files: FileList) { 
     // files is a FileList object
     if (onChange) onChange({ target: { id: name, value: multiple ? files : files[0] } })
   }
 
-  async function getUrls(objectOrFileListItem) {
+  async function getUrls(objectOrFileListItem: File | FileList | MonasteryImage | null) {
     /**
      * @param {object|FileList} objectOrFileListItem - FileList object or monastery image object
      * @returns {Promise} - Resolves to an array of image URLs
      */
     // Make sure FileLists are converted to a real array
     if (!objectOrFileListItem) return []
-    const array = objectOrFileListItem.length ? Array.from(objectOrFileListItem) : [objectOrFileListItem]
-    return Promise.all(array.map((file) => {
+    const array = 'length' in objectOrFileListItem ? Array.from(objectOrFileListItem) : [objectOrFileListItem]
+    return Promise.all(array.map((item) => {
       return new Promise((resolve, reject) => {
-        if (file.lastModified) {
+        if ('lastModified' in item) {
           const reader = new FileReader()
           reader.onload = () => resolve(reader.result)
           reader.onerror = reject
-          reader.readAsDataURL(file)
+          reader.readAsDataURL(item)
         } else {
-          resolve(s3Image(awsUrl, file))
+          resolve(s3Image(awsUrl, item))
         }
       })
     }))
@@ -86,12 +104,12 @@ export function Drop({ awsUrl, className, id, name, onChange, multiple, state, .
         {...props}
         id={inputId}
         type="file"
-        onChange={(e) => onFileAttach(e.target.files)}
+        onChange={(e) => onFileAttach(e.target.files as FileList)}
         hidden
       />
       <DropHandler 
         onDrop={onFileAttach} 
-        class="flex flex-column justify-center items-center text-center gap-2 text-grey-300 text-sm px-8 min-h-[300px]"
+        className="flex flex-column justify-center items-center text-center gap-2 text-grey-300 text-sm px-8 min-h-[300px]"
       >
         {
           !value &&
@@ -104,7 +122,7 @@ export function Drop({ awsUrl, className, id, name, onChange, multiple, state, .
           </>
         }
         {
-          value &&
+          !!value &&
           <>
             {
               urls.map((url, i) => (

package/components/partials/form/form-error.tsx

@@ -0,0 +1,27 @@
+import { Errors } from 'nitro-web/types'
+
+type FormError = {
+  state: { errors: Errors },
+  // display all errors except these field titles, e.g. ['name', 'address']
+  fields?: Array<string>,
+  className?: string,
+}
+
+export function FormError({ state, fields, className }: FormError) {
+  // A catch all error element that should be placed next to the submit button
+  let error: { title: string, detail: string } | undefined
+  for (const item of state.errors || []) {
+    if (!item.title || item.title.match(/^(error|invalid)$/i) || (fields && !fields.includes(item.title))) {
+      error = item
+    }
+  }
+  return (
+    <>
+      {error ? (
+        <div class={`text-danger mt-1 text-sm ${className||''}`}>
+          {error.detail}
+        </div>
+      ) : null}
+    </>
+  )
+}

package/components/partials/form/{input-color.jsx → input-color.tsx}

@@ -1,28 +1,38 @@
 import { css } from 'twin.macro'
-import { hsvaToHex, hexToHsva, validHex } from '@uiw/color-convert'
+import { hsvaToHex, hexToHsva, validHex, HsvaColor } from '@uiw/color-convert'
 import Saturation from '@uiw/react-color-saturation'
 import Hue from '@uiw/react-color-hue'
-import { Dropdown } from '../element/dropdown.jsx'
-import { throttle } from '../../../util.js'
+import { Dropdown, util } from 'nitro-web'
+import React from 'react'
 
-export function InputColor({ className, defaultColor='#333', iconEl, id, onChange, value, ...props }) {
+type InputColorProps = {
+  className?: string
+  defaultColor?: string
+  iconEl?: React.ReactNode
+  id?: string
+  onChange?: (e: { target: { id: string, value: string } }) => void
+  value?: string
+  [key: string]: unknown
+}
+
+export function InputColor({ className, defaultColor='#333', iconEl, id, onChange, value, ...props }: InputColorProps) {
   const [lastChanged, setLastChanged] = useState(() => `ic-${Date.now()}`)
   const isInvalid = className?.includes('is-invalid') ? 'is-invalid' : ''
 
-  function onInputChange(e) {
+  function onInputChange(e: { target: { id: string, value: string } }) {
     setLastChanged(`ic-${Date.now()}`)
     if (onChange) onChange(e)
   }
 
   return (
-    <Dropdown
-      css={style}
+    <Dropdown 
+      dir="bottom-left"
       menuToggles={false}
       menuChildren={
         <ColorPicker key={lastChanged} defaultColor={defaultColor} id={id} value={value} onChange={onChange} />
       }
     >
-      <div className="grid grid-cols-1">
+      <div className="grid grid-cols-1" css={style}>
         {iconEl}
         <input 
           {...props} 
@@ -30,7 +40,7 @@ export function InputColor({ className, defaultColor='#333', iconEl, id, onChang
           id={id} 
           value={value} 
           onChange={onInputChange}
-          onBlur={() => !validHex(value) && onInputChange({ target: { id: id, value: '' }})}
+          onBlur={() => !validHex(value||'') && onInputChange({ target: { id: id || '', value: '' }})}
           autoComplete="off" 
         />
       </div>
@@ -38,17 +48,18 @@ export function InputColor({ className, defaultColor='#333', iconEl, id, onChang
   )
 }
 
-function ColorPicker({ id, onChange, value, defaultColor }) {
+function ColorPicker({ id='', onChange, value='', defaultColor='' }: InputColorProps) {
   const [hsva, setHsva] = useState(() => hexToHsva(validHex(value) ? value : defaultColor))
-  const [debounce] = useState(() => throttle(callOnChange, 50))
+  const [debounce] = useState(() => util.throttle(callOnChange, 50))
 
-  function callOnChange(newHsva) {
-    onChange({ target: { id: id, value: hsvaToHex(newHsva) }})
+  function callOnChange(newHsva: HsvaColor) {
+    if (onChange) onChange({ target: { id: id, value: hsvaToHex(newHsva) }})
   }
 
   return (
     <>
       <Saturation
+        css={style}
         hsva={hsva}
         onChange={(newHsva) => {
           setHsva(newHsva)
@@ -56,6 +67,7 @@ function ColorPicker({ id, onChange, value, defaultColor }) {
         }}
       />
       <Hue
+        css={style}
         hue={hsva.h}
         onChange={(newHue) => {
           setHsva({ ...hsva, ...newHue })
@@ -66,8 +78,8 @@ function ColorPicker({ id, onChange, value, defaultColor }) {
   )
 }
 
-const style = () => css`
-  text-indent: 0 !important; // since is-color is on dropdown
+const style = css`
+  /////////////////////
   .w-color-interactive {
     width: 100% !important;
     height: 150px !important;