nitro-web 0.0.87 → 0.0.88

package/components/partials/element/modal.tsx

@@ -0,0 +1,90 @@
+import { IsFirstRender, twMerge } from 'nitro-web'
+import SvgX1 from 'nitro-web/client/imgs/icons/x1.svg'
+
+type ModalProps = {
+  show: boolean
+  setShow: (show: boolean) => void
+  children: React.ReactNode
+  className?: string
+  rootClassName?: string
+  dismissable?: boolean
+  maxWidth?: string
+  minHeight?: string
+  [key: string]: unknown
+}
+
+export function Modal({ show, setShow, children, maxWidth, minHeight, dismissable = true, className, rootClassName }: ModalProps) {
+  const [state, setState] = useState(show ? 'open' : 'close')
+  const containerEl = useRef<HTMLDivElement>(null)
+  const isFirst = IsFirstRender()
+
+  const states = {
+    'close': { 
+      root: 'left-[-100vw] transition-[left] duration-0 delay-200',
+      bg: 'opacity-0',
+      container: 'opacity-0 scale-[0.97]',
+    },
+    'close-now': { 
+      root: '',
+      bg: '',
+      container: 'opacity-0 !transition-none',
+    },
+    'open': { 
+      root: 'left-0 transition-none model-open',
+      bg: 'opacity-100 duration-200',
+      container: 'opacity-100 scale-[1] duration-200',
+    },
+  }
+  const stateObj = states[state as keyof typeof states]
+
+  useEffect(() => {
+    if (isFirst) return
+    if (show) {
+      setState('open')
+    } else {
+      setTimeout(() => {
+        // If another modal is being opened, force close the container for a smoother transition
+        if (document.getElementsByClassName('modal-open').length > 1) {
+          setState('close-now')
+        } else {
+          setState('close')
+        }
+      }, 10)
+    }
+  // There is a bug during hot-reloading where the modal does't open if we don't ensure 
+  // the same truthy/falsey type is used.
+  }, [!!show])
+  
+  function onClick(e: React.MouseEvent) {
+    const clickedOnModal = containerEl.current && containerEl.current.contains(e.target as Node)
+    if (!clickedOnModal && dismissable) {
+      setShow(false)
+    }
+  }
+
+  return (
+    <div 
+      onClick={(e) => e.stopPropagation()} 
+      class={`${twMerge(`fixed top-0 w-[100vw] h-[100vh] z-[100] ${stateObj.root} ${rootClassName||''}`)} nitro-modal`}
+    >
+      <div class={`!absolute inset-0 box-content bg-gray-500/70 transition-opacity ${stateObj.bg}`}></div>
+      <div class={`relative h-[100vh] overflow-y-auto transition-[opacity,transform] ${stateObj.container}`}>
+        <div class="flex items-center justify-center min-h-full" onMouseDown={onClick}> 
+          <div 
+            ref={containerEl} 
+            style={{ maxWidth: maxWidth || '550px', minHeight: minHeight }} 
+            class={`relative w-full mx-6 mt-4 mb-8 bg-white rounded-lg shadow-lg p-9 ${className||''}`}
+          >
+            <div 
+              class="absolute top-0 right-0 p-3 m-1 cursor-pointer" 
+              onClick={() => { if (dismissable) { setShow(false) }}}
+            >
+              <SvgX1 />
+            </div>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/components/partials/element/sidebar.tsx

@@ -0,0 +1,195 @@
+// Component: https://tailwindui.com/components/application-ui/application-shells/sidebar#component-a69d85b6237ea2ad506c00ef1cd39a38
+import { css } from 'twin.macro'
+import avatarImg from 'nitro-web/client/imgs/avatar.jpg'
+import { injectedConfig } from 'nitro-web'
+import {
+  Bars3Icon,
+  HomeIcon,
+  UsersIcon,
+  ArrowLeftCircleIcon,
+  PaintBrushIcon,
+} from '@heroicons/react/24/outline'
+import { XIcon } from 'lucide-react'
+
+const sidebarWidth = 'w-80'
+
+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 }[]
+}
+
+function classNames(...classes: string[]) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export function Sidebar({ Logo, menu, links }: SidebarProps) {
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+  return (
+    <>
+      {/* desktop sidebar */}
+      <div css={style} className={
+        'fixed inset-y-0 z-50 flex flex-col ease-in-out lg:left-0 lg:translate-x-0 lg:!delay-0 lg:!duration-0 ' +
+        (
+          sidebarOpen 
+            ? 'left-0 translate-x-[0px] sidebar-transition ' 
+            : 'left-[-100%] translate-x-[-100%]  sidebar-transition-delay '
+        ) + 
+        sidebarWidth
+      }>
+        <div className={
+          'absolute left-full top-0 flex w-16 justify-center pt-5 lg:hidden duration-300 ease ' +
+          (sidebarOpen ? 'opacity-100' : 'opacity-0')
+        }>
+          <button type="button" onClick={() => setSidebarOpen(false)} className="-m-2.5 p-2.5">
+            <XIcon aria-hidden="true" strokeWidth={1.5} size={24} className="text-white" />
+          </button>
+        </div>
+        <SidebarContents Logo={Logo} menu={menu} links={links} />
+      </div>
+
+      {/* mobile backdrop */}
+      <div 
+        css={style} 
+        onClick={() => setSidebarOpen(false)}
+        className={'fixed w-full z-[49] inset-0 bg-gray-900/70 ease-linear lg:hidden ' + 
+          (
+            sidebarOpen 
+              ? 'left-0 opacity-100 sidebar-transition ' 
+              : 'left-[-100%] opacity-0 sidebar-transition-delay '
+          )
+        }
+      />
+      
+      {/* mobile sidebar topbar */}
+      <div className="sticky top-0 z-40 flex items-center gap-x-6 bg-white px-4 py-4 shadow-sm sm:px-6 lg:hidden">
+        <button type="button" onClick={() => setSidebarOpen(true)} className="-m-2.5 p-2.5 text-gray-700 lg:hidden">
+          <Bars3Icon aria-hidden="true" className="size-6" />
+        </button>
+        <div className="flex-1 text-sm/6 font-semibold text-gray-900">Dashboard</div>
+        <Link to="#">
+          <img alt="" src={avatarImg} className="size-8 rounded-full bg-gray-50" />
+        </Link>
+      </div>
+      
+      <div class={`${sidebarWidth}`} />
+    </>
+  )
+}
+
+function SidebarContents ({ Logo, menu, links }: SidebarProps) {
+  const location = useLocation()
+  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 ''
+  }
+
+  const _menu = menu || [
+    { name: 'Dashboard', to: '/', Icon: HomeIcon },
+    { name: injectedConfig.isDemo ? 'Design System' : 'Style Guide', to: '/styleguide', Icon: PaintBrushIcon }, 
+    { name: 'Pricing', to: '/pricing', Icon: UsersIcon },
+    { name: 'Signout', to: '/signout', Icon: ArrowLeftCircleIcon },
+  ]
+
+  const _links = links || [
+    { name: 'Nitro on Github', to: 'https://github.com/boycce/nitro-web', initial: 'G' },
+  ]
+
+  // Sidebar component, swap this element with another sidebar if you like
+  return (
+    <div className="flex grow flex-col gap-y-8 overflow-y-auto bg-white py-5 px-10 lg:border-r lg:border-gray-200">
+      {Logo && (
+        <div className="flex h-16 shrink-0 items-center gap-2 justify-bedtween">
+          <Link to="/">
+            <Logo width="70" height={undefined} />
+          </Link>
+          <span className="text-[9px] text-gray-900 font-semibold mt-4">{injectedConfig.version}</span>
+        </div>
+      )}
+      <nav className="flex flex-1 flex-col">
+        <ul role="list" className="flex flex-1 flex-col gap-y-7">
+          <li>
+            <ul role="list" className="-mx-2 space-y-1">
+              {_menu.map((item) => (
+                <li key={item.name}>
+                  <Link
+                    to={item.to}
+                    className={classNames(
+                      isActive(item.to)
+                        ? 'bg-gray-50 text-indigo-600'
+                        : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600',
+                      'group flex gap-x-3 items-center rounded-md p-2 text-md/6 font-semibold'
+                    )}
+                  >
+                    { item.Icon && 
+                      <item.Icon
+                        className={classNames(
+                          isActive(item.to) ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-600',
+                          'size-5 shrink-0'
+                        )}
+                      />
+                    }
+                    {item.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </li>
+          <li>
+            <div className="text-xs/6 font-semibold text-gray-400">Other Links</div>
+            <ul role="list" className="-mx-2 mt-2 space-y-1">
+              {_links.map((team) => (
+                <li key={team.name}>
+                  <Link
+                    to={team.to}
+                    className={classNames(
+                      isActive(team.to)
+                        ? 'bg-gray-50 text-indigo-600'
+                        : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600',
+                      'group flex gap-x-3 rounded-md p-2 text-md/6 font-semibold'
+                    )}
+                  >
+                    <span
+                      className={classNames(
+                        isActive(team.to)
+                          ? 'border-indigo-600 text-indigo-600'
+                          : 'border-gray-200 text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600',
+                        'flex size-6 shrink-0 items-center justify-center rounded-lg border bg-white text-[0.625rem] font-medium'
+                      )}
+                    >
+                      {team.initial}
+                    </span>
+                    <span className="truncate">{team.name}</span>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </li>
+
+          <li className="-mx-6 mt-auto hidden lg:block">
+            <Link
+              to="#"
+              className="flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-50"
+            >
+              <img alt="" src={avatarImg} className="size-8 rounded-full bg-gray-50" />
+              <span aria-hidden="true" class="truncate1 flex-1">{user?.name || 'Guest'}</span>
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  )
+}
+
+const style = css`
+  &.sidebar-transition-delay {
+    transition: transform 300ms, opacity 300ms, left 0ms 300ms;
+  }
+  &.sidebar-transition {
+    transition: transform 300ms, opacity 300ms, left 0ms 0ms;
+  }
+`

package/components/partials/element/tooltip.tsx

@@ -0,0 +1,154 @@
+// todo: finish tailwind conversion
+import { css } from 'twin.macro'
+
+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 nitro-tooltip`} css={style}>
+      {
+        text
+          ? <>
+              <div class="tooltip-trigger ">{children}</div>
+              <div class={`tooltip-popup ${classNamePopup||''} ${isSmall ? 'is-small' : ''}`}>{text}</div>
+            </>
+          : children
+      }
+    </div>
+  )
+}
+
+const style = css`
+  .tooltip-popup {
+    position: absolute;
+    display: block;
+    margin-top: -10000px;
+    width: 200px;
+    padding: 14px;
+    font-weight: 400;
+    font-size: 11.5px;
+    line-height: 1.3;
+    letter-spacing: 0.5px;
+    text-align: center;
+    border-radius: 6px;
+    background: black;
+    color: white;
+    opacity: 0;
+    transition: opacity 0.15s ease, transform 0.15s ease, margin-top 0s 0.15s;
+    white-space: break-spaces;
+    overflow-wrap: break-word;
+    pointer-events: none;
+    z-index: 9999;
+    &:after {
+      content: '';
+      position: absolute;
+      border-width: 6px;
+      border-style: solid;
+    }
+    // Variation
+    &.is-small {
+      width: 160px;
+      padding: 10px;
+      font-size: 11px;
+    }
+    // Positions
+    &.is-top, 
+    &.is-top-left,
+    &:not(.is-top-left):not(.is-left):not(.is-right):not(.is-bottom):not(.is-bottom-left) {
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-15px);
+      &:after {
+        top: 100%;
+        left: 50%;
+        margin-left: -6px;
+        border-color: black transparent transparent transparent;
+      }
+      &.is-top-left {
+        left: 0px;
+        transform: translateX(0%) translateY(-15px);
+        &:after {
+          left: 28px;
+        }
+      }
+    }
+    &.is-bottom,
+    &.is-bottom-left {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%) translateY(15px) ;
+      &:after {
+        bottom: 100%;
+        left: 50%;
+        margin-left: -6px;
+        border-color: transparent transparent black transparent;
+      }
+      &.is-bottom-left {
+        left: 0px;
+        transform: translateX(0%) translateY(15px);
+        &:after {
+          left: 28px;
+        }
+      }
+    }
+    &.is-left  {
+      top: 50%;
+      right: 100%;
+      transform: translateX(-15px) translateY(-50%);
+      &:after {
+        top: 50%;
+        right: -12px;
+        margin-top: -6px;
+        border-color: transparent transparent transparent black;
+      }
+    }
+    &.is-right  {
+      top: 50%;
+      left: 100%;
+      transform: translateX(15px) translateY(-50%);
+      &:after {
+        top: 50%;
+        left: -12px;
+        margin-top: -6px;
+        border-color: transparent black transparent transparent;
+      }
+    }
+  }
+  .tooltip-trigger {
+    /* trigger can come before tooltip-popup or wrap it */
+    position: relative !important;
+    &:hover .tooltip-popup,
+    &:hover + .tooltip-popup,
+    .tooltip-popup.is-active,
+    & + .tooltip-popup.is-active {
+      opacity: 1;
+      margin-top: 0;
+      transition: opacity 0.15s ease, transform 0.15s ease, margin-top 0s 0s;
+      &.is-top,
+      &:not(.is-top-left):not(.is-left):not(.is-right):not(.is-bottom):not(.is-bottom-left) {
+        transform: translateX(-50%) translateY(-10px);
+      }
+      &.is-top-left {
+        transform: translateX(0%) translateY(-10px);
+      }
+      &.is-bottom {
+        transform: translateX(-50%) translateY(10px);
+      }
+      &.is-bottom-left {
+        transform: translateX(0%) translateY(10px);
+      }
+      &.is-left {
+        transform: translateX(-10px) translateY(-50%);
+      }
+      &.is-right {
+        transform: translateX(10px) translateY(-50%);
+      }
+    }
+  }
+`

package/components/partials/element/topbar.tsx

@@ -0,0 +1,15 @@
+type TopbarProps = {
+  title: React.ReactNode
+  subtitle?: React.ReactNode
+  className?: string
+}
+
+export function Topbar({ title, subtitle, className }: TopbarProps) {
+  return (
+    <div class={`flex flex-col min-h-12 gap-0.5 mb-6 nitro-topbar ${className||''}`}>
+      <div class="text-2xl font-bold">{title}</div>
+      { subtitle && <div class="text-sm text-muted-foreground">{subtitle}</div>}
+      {/* { submenu && <div class="pt-2 text-large weight-500">{submenu}</div> } */}
+    </div>
+  )
+}

package/components/partials/form/checkbox.tsx

@@ -0,0 +1,150 @@
+/* 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 = React.InputHTMLAttributes<HTMLInputElement> & {  
+  /** field name or path on state (used to match errors), e.g. 'date', 'company.email' */
+  name: string
+  /** name is applied if id is not provided. Used for radios */
+  id?: string 
+  /** 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'
+  checkboxClassName?: string
+  svgClassName?: string
+  labelClassName?: string
+  /** title used to find related error messages */
+  errorTitle?: string|RegExp
+}
+
+export function Checkbox({ 
+  state, size, subtext, text, type='checkbox', className, checkboxClassName, svgClassName, labelClassName, errorTitle, ...props 
+}: CheckboxProps) {
+  // Checkbox/radio/toggle component
+  let value!: boolean
+  const error = getErrorFromState(state, errorTitle || props.name)
+  const id = props.id || props.name
+
+  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 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 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}
+                      id={id}
+                      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}
+                      id={id}
+                      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>
+      {error && <div class="mt-1.5 text-xs text-danger-foreground nitro-error">{error.detail}</div>}
+    </div>
+  )
+}

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>
+  )
+}