nitro-web 0.0.86 → 0.0.87

package/components/partials/element/message.tsx

@@ -1,141 +0,0 @@
-// Todo: show correct message type, e.g. error, warning, info, success `${store.message.type || 'success'}`
-import { isObject, isString, queryObject } from 'nitro-web/util'
-import { X, CircleCheck } from 'lucide-react'
-import { MessageObject } from 'nitro-web/types'
-import { twMerge } from 'nitro-web'
-
-type MessageProps = {
-  className?: string
-  classNameWrapper?: string
-  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
-}
-/**
- * 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({ className, classNameWrapper, position='top-right' }: MessageProps) {
-  const devDontHide = false
-  const [store, setStore] = useTracked()
-  const [visible, setVisible] = useState(false)
-  const location = useLocation()
-  const messageQueryMap = {
-    'added': { type: 'success', text: 'Added successfully 👍️' },
-    'created': { type: 'success', text: 'Created successfully 👍️' },
-    'error': { type: 'error', text: 'Sorry, there was an error' },
-    'oauth-error': { type: 'error', text: 'There was an error trying to signin, please try again' },
-    'removed': { type: 'success', text: 'Removed' },
-    'signin': { type: 'error', text: 'Please sign in to access this page' },
-    'updated': { type: 'success', text: 'Updated successfully' },
-    'unauth': { type: 'error', text: 'You are unauthorised' },
-  }
-  const colorMap = {
-    'error': 'text-danger',
-    'warning': 'text-warning',
-    'info': 'text-info',
-    'success': 'text-success',
-  }
-  const positionMap = {
-    'top-left': ['sm:items-start sm:justify-start', 'sm:translate-y-0  sm:translate-x-[-0.5rem]'],
-    'top-center': ['sm:items-start sm:justify-center', 'sm:translate-y-[-0.5rem]'],
-    'top-right': ['sm:items-start sm:justify-end', 'sm:translate-y-0 sm:translate-x-1'],
-    'bottom-left': ['sm:items-end sm:justify-start', 'sm:translate-y-0  sm:translate-x-[-0.5rem]'],
-    'bottom-center': ['sm:items-end sm:justify-center', 'sm:translate-y-1'],
-    'bottom-right': ['sm:items-end sm:justify-end', 'sm:translate-y-0 sm:translate-x-1'],
-  }
-  const color = colorMap[(store.message as MessageObject)?.type || 'success']
-  const positionArr = positionMap[(position as keyof typeof positionMap)]
-
-  useEffect(() => {
-    return () => {
-      setStore(s => ({ ...s, message: '' }))
-    }
-  }, [])
-
-  useEffect(() => {
-    // Finds a message in a query string and show it
-    let message
-    const query = queryObject(location.search, true)
-    for (const key in query) {
-      if (!query.hasOwnProperty(key)) continue
-      for (const key2 in messageQueryMap) {
-        if (key != key2) continue
-        // @ts-expect-error
-        message = { ...messageQueryMap[key] }
-        if (query[key] !== true) message.text = decodeURIComponent(query[key])
-      }
-    }
-    if (message) setStore(s => ({ ...s, message: message }))
-  }, [location.search])
-
-  useEffect(() => {
-    // Message detection and autohiding
-    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 as string, date: now }}))
-    // Add a date to the message
-    } 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 (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)
-      }
-    }
-  }, [JSON.stringify(store.message)])
-
-  function hide() {
-    setVisible(false)
-    setTimeout(() => setStore(s => ({ ...s, message: undefined })), 250)
-  }
-
-  return (
-    <>
-      {/* Global notification live region, render this permanently at the end of the document */}
-      <div
-        aria-live="assertive"
-        className={`${twMerge(`pointer-events-none items-end justify-center fixed inset-0 flex px-4 py-6 sm:p-6 z-[101] nitro-message ${positionArr[0]} ${classNameWrapper || ''}`)}`}
-      >
-        <div className="flex flex-col items-center space-y-4">
-          {isObject(store.message) && (
-            <div className={twMerge(
-              'overflow-hidden translate-y-[0.5rem] opacity-0 pointer-events-auto max-w-[350px] rounded-md bg-white shadow-lg ring-1 ring-black/5 transition text-sm font-medium text-gray-900',
-              positionArr[1],
-              (visible ? 'translate-x-0 translate-y-0 sm:translate-x-0 sm:translate-y-0 opacity-100' : ''),
-              className
-            )}>
-              <div className="p-3">
-                <div className="flex items-start gap-3 leading-[1.4em]">
-                  <div className="flex items-center shrink-0 min-h-[1.4em]">
-                    <CircleCheck aria-hidden="true" size={19} className={`${color}`} />
-                  </div>
-                  <div className="flex flex-1 items-center min-h-[1.4em]">
-                    <p>{typeof store.message === 'object' && store.message?.text}</p>
-                  </div>
-                  <div className="flex items-center shrink-0 min-h-[1.4em]">
-                    <button
-                      type="button"
-                      onClick={hide}
-                      className="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 
-                        focus:ring-indigo-500 focus:ring-offset-2"
-                    >
-                      <span className="sr-only">Close</span>
-                      <X aria-hidden="true" size={19} />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  )
-}

package/components/partials/element/modal.tsx

@@ -1,90 +0,0 @@
-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

@@ -1,195 +0,0 @@
-// 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

@@ -1,154 +0,0 @@
-// 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

@@ -1,15 +0,0 @@
-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>
-  )
-}