nitro-web 0.0.1

package/components/partials/element/message.jsx

@@ -0,0 +1,124 @@
+// Todo: show correct message type, e.g. error, warning, info, success `${store.message.type || 'success'}`
+import { isObject, isString, queryObject } from '../../../util.js'
+import { Transition } from '@headlessui/react'
+import { CheckCircleIcon } from '@heroicons/react/24/outline'
+import { XMarkIcon } from '@heroicons/react/20/solid'
+
+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 [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' },
+  }
+
+  useEffect(() => {
+    return () => {
+      setStore(s => ({ ...s, 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) {
+      if (!query.hasOwnProperty(key)) continue
+      for (let key2 in messageQueryMap) {
+        if (key != key2) continue
+        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
+    let now = new Date().getTime()
+
+    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 }}))
+    // Add a date to the message
+    } else if (!store.message.date) {
+      setStore(s => ({ ...s, message: { ...store.message, 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)
+      return () => {
+        clearTimeout(timeout1)
+        clearTimeout(timeout2)
+      }
+    }
+  }, [JSON.stringify(store.message)])
+
+  function hide() {
+    setVisible(false)
+    setTimeout(() => setStore(s => ({ ...s, message: null })), 250)
+  }
+
+  return (
+    <>
+      {/* Global notification live region, render this permanently at the end of the document */}
+      <div
+        aria-live="assertive"
+        className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-20"
+      >
+        <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
+          {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
+          <Transition show={isObject(store.message) && visible}> 
+            <div className="pointer-events-auto max-w-[350px] overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black/5 
+              transition data-[closed]:data-[enter]:translate-y-2 data-[enter]:transform data-[closed]:opacity-0 data-[enter]:duration-300 
+              data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in data-[closed]:data-[enter]:sm:translate-x-2 
+              data-[closed]:data-[enter]:sm:translate-y-0">
+              <div className="p-4">
+                <div className="flex items-start">
+                  <div className="shrink-0">
+                    <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="mt-1 text-sm text-gray-500">{store.message.text}</p> */}
+                  </div>
+                  <div className="ml-4 flex shrink-0">
+                    <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>
+                      <XMarkIcon aria-hidden="true" className="size-5" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </div>
+    </>
+  )
+}

package/components/partials/element/modal.jsx

@@ -0,0 +1,229 @@
+// todo: finish tailwind conversion
+import { css } from 'twin.macro'
+import { IsFirstRender } from '../is-first-render.js'
+import SvgX1 from '../../../client/imgs/icons/x1.svg'
+
+export function Modal({ show, setShow, children, className, maxWidth, minHeight, dismissable = true }) {
+  const [state, setState] = useState()
+  const containerEl = useRef()
+  const isFirst = IsFirstRender()
+
+  useEffect(() => {
+    createScrollbarClasses()
+    return () => {
+      elementWithScrollbar().classList.remove('scrollbarPadding')
+    } // cleanup
+  }, [])
+
+  useEffect(() => {
+    if (show) {
+      elementWithScrollbar().classList.add('scrollbarPadding')
+      setState('modal-open')
+    } else if (!isFirst) {
+      // Dont close if first render (forgot what use case this was needed for)
+      setTimeout(() => {
+        // If another modal is being opened, force close the container for a smoother transition
+        if (document.getElementsByClassName('modal-open').length > 1) {
+          setState('modal-close-immediately')
+        } else {
+          setState('')
+          elementWithScrollbar().classList.remove('scrollbarPadding')
+        }
+      }, 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 elementWithScrollbar() {
+    // this needs to be non-body element otherwise the Modal.jsx doesn't open/close smoothly
+    //document.getElementsByTagName('body')[0] // document.getElementsByClassName('page')[0]
+    return document.getElementById('app')
+  }
+  
+  function onClick(e) {
+    let clickedOnContainer = containerEl.current && containerEl.current.contains(e.target)
+    if (!clickedOnContainer && dismissable) {
+      setShow(false)
+    }
+  }
+
+  function createScrollbarClasses() {
+    /**
+     *  Creates reusable margin and padding classes containing the scrollbar width and
+     *  sets window.scrollbarWidth
+     *  @return width
+     */
+    if (typeof window.scrollbarWidth !== 'undefined') return
+
+    var outer = document.createElement('div')
+    outer.style.visibility = 'hidden'
+    outer.style.width = '100px'
+    outer.style.margin = '0px'
+    outer.style.padding = '0px'
+    outer.style.border = '0'
+    document.body.appendChild(outer)
+
+    var widthNoScroll = outer.offsetWidth
+    // force scrollbars
+    outer.style.overflow = 'scroll'
+
+    // add innerdiv
+    var inner = document.createElement('div')
+    inner.style.width = '100%'
+    outer.appendChild(inner)
+
+    var widthWithScroll = inner.offsetWidth
+
+    // Remove divs
+    outer.parentNode.removeChild(outer)
+    let width = (window.scrollbarWidth = widthNoScroll - widthWithScroll)
+
+    // Create new inline stylesheet and append to the head
+    let style = document.createElement('style')
+    let css = (
+      '.scrollbarPadding {padding-right:' + width + 'px !important; overflow:hidden !important;}' +
+      '.scrollbarMargin {margin-right:' + width + 'px !important; overflow:hidden !important;}'
+    )
+    style.type = 'text/css'
+    if (style.styleSheet) style.styleSheet.cssText = css //<=IE8
+    else style.appendChild(document.createTextNode(css))
+    document.getElementsByTagName('head')[0].appendChild(style)
+
+    return width
+  }
+
+  return (
+    <div css={style} class={`${state}`} onClick={(e) => e.stopPropagation()}>
+      <div class="modal-bg wrapper scrollbarPadding"></div>
+      <div class="modal-container">
+        {/* we also need to be able to scroll without closing */}
+        <div onMouseDown={onClick}> 
+          <div 
+            ref={containerEl} 
+            style={{ maxWidth: maxWidth || '740px', minHeight: typeof minHeight == 'undefined' ? '487px' : minHeight }} 
+            class={`modal1 ${className}`}
+          >
+            <div class="modal-close" onClick={() => { if (dismissable) { setShow(false) }}}><SvgX1 /></div>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const style = () => css`
+  /* Modal structure */
+  & {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: calc(100vh);
+    z-index: 699;
+    .modal-bg {
+      position: absolute !important;
+      display: flex;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      box-sizing: content-box;
+      &:before {
+        content: '';
+        display: block;
+        flex: 1;
+        background: rgba(255, 255, 255, 0.82);
+        /* backdrop-filter: blur(1px);
+        -webkit-backdrop-filter: blur(1px); */
+      }
+    }
+    .modal-container {
+      position: relative;
+      height: calc(100vh);
+      // horisontal centering
+      > div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100%;
+        // vertical centering
+        > div {
+          margin: 30px 20px 90px;
+          width: 100%;
+        }
+      }
+    }
+    &.modal-close-immediately {
+      .modal-container > div > div {
+        transition: none !important;
+      }
+    }
+  }
+
+  /* Animation */
+
+  & {
+    left: -100%;
+    transition: left 0s 0.2s;
+  }
+  .modal-bg {
+    opacity: 0;
+    transition: opacity 0.15s ease, transform 0.15s ease;
+  }
+  .modal-container {
+    /*overflow: hidden;*/
+    overflow-y: scroll;
+    overflow-x: auto;
+  }
+  .modal-container > div > div {
+    opacity: 0;
+    transform: scale(0.97);
+    transition: opacity 0.15s ease, transform 0.15s ease;
+  }
+  &.modal-open {
+    left: 0;
+    transition: none;
+    .modal-bg {
+      opacity: 1;
+      transition: opacity 0.2s ease, transform 0.2s ease;
+    }
+    .modal-container {
+      overflow-y: scroll;
+      overflow-x: auto;
+    }
+    .modal-container > div > div {
+      opacity: 1;
+      transform: scale(1);
+      transition: opacity 0.2s ease, transform 0.2s ease;
+    }
+  }
+
+  /* Modal customisations */
+
+  .modal1 {
+    background: white;
+    border: 2px solid #27242C;
+    box-shadow: 0px 1px 29px rgba(31, 29, 36, 0.07);
+    border-radius: 8px;
+    .subtitle {
+      margin-bottom: 34px; // same as form pages
+    }
+    .modal-close {
+      position: absolute;
+      margin: 10px;
+      padding: 15px 20px;
+      top: 0;
+      right: 0;
+      cursor: pointer;
+      line {
+        transition: all 0.1s;
+      }
+      &:hover {
+        line {
+          stroke: ${theme('colors.primary-dark')};
+        }
+      }
+    }
+  }
+`

package/components/partials/element/sidebar.jsx

@@ -0,0 +1,166 @@
+// Component: https://tailwindui.com/components/application-ui/application-shells/sidebar#component-a69d85b6237ea2ad506c00ef1cd39a38
+import { Dialog, DialogBackdrop, DialogPanel, TransitionChild } from '@headlessui/react'
+import {
+  Bars3Icon,
+  HomeIcon,
+  UsersIcon,
+  XMarkIcon,
+  ArrowLeftCircleIcon,
+  PaintBrushIcon,
+} from '@heroicons/react/24/outline'
+
+const sidebarWidth = 'lg:w-80'
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export function Sidebar({ Logo }) {
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+  return (
+    <>
+      {/* mobile sidebar opened */}
+      <Dialog open={sidebarOpen} onClose={setSidebarOpen} className="relative z-50 lg:hidden">
+        <DialogBackdrop
+          transition
+          className="fixed inset-0 bg-gray-900/80 transition-opacity duration-300 ease-linear data-[closed]:opacity-0"
+        />
+        <div className="fixed inset-0 flex">
+          <DialogPanel
+            transition
+            className="relative mr-16 flex w-full max-w-xs flex-1 transform transition duration-300 ease-in-out 
+            data-[closed]:-translate-x-full"
+          >
+            <TransitionChild>
+              <div className="absolute left-full top-0 flex w-16 justify-center pt-5 duration-300 ease-in-out data-[closed]:opacity-0">
+                <button type="button" onClick={() => setSidebarOpen(false)} className="-m-2.5 p-2.5">
+                  <XMarkIcon aria-hidden="true" className="size-6 text-white" />
+                </button>
+              </div>
+            </TransitionChild>
+            <SidebarContents Logo={Logo} />
+          </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} />
+      </div>
+      
+      {/* mobile sidebar closed */}
+      <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="/assets/imgs/user.jpg" className="size-8 rounded-full bg-gray-50" />
+        </Link>
+      </div>
+      
+      <div class={`${sidebarWidth}`} />
+    </>
+  )
+}
+
+function SidebarContents ({ Logo }) {
+  const location = useLocation()
+  const [{ user }] = sharedStore.useTracked()
+
+  function isActive(path) {
+    if (path == '/' && location.pathname == path) return 'is-active'
+    else if (path != '/' && location.pathname.match(`^${path}`)) return 'is-active'
+    else return ''
+  }
+
+  const navigation = [
+    { name: 'Dashboard', href: '/', icon: HomeIcon },
+    { name: 'Pricing (example)', href: '/pricing', icon: UsersIcon },
+    { name: 'Styleguide', href: '/styleguide', icon: PaintBrushIcon },
+    { name: 'Signout', href: '/signout', icon: ArrowLeftCircleIcon },
+  ]
+
+  const teams = [
+    { id: 1, name: 'Team 1', href: '#', initial: 'T' },
+    { id: 2, name: 'Team 2', href: '#', initial: 'H' },
+  ]
+
+  // 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">
+      <div className="flex h-16 shrink-0 items-center">
+        <Logo alt="Nitro" width="70" />
+      </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">
+              {navigation.map((item) => (
+                <li key={item.name}>
+                  <Link
+                    to={item.href}
+                    className={classNames(
+                      isActive(item.href)
+                        ? '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-sm/6 font-semibold'
+                    )}
+                  >
+                    <item.icon
+                      className={classNames(
+                        isActive(item.href) ? '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">Your teams</div>
+            <ul role="list" className="-mx-2 mt-2 space-y-1">
+              {teams.map((team) => (
+                <li key={team.name}>
+                  <Link
+                    to={team.href}
+                    className={classNames(
+                      isActive(team.href)
+                        ? '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-sm/6 font-semibold'
+                    )}
+                  >
+                    <span
+                      className={classNames(
+                        isActive(team.href)
+                          ? '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="/assets/imgs/user.jpg" className="size-8 rounded-full bg-gray-50" />
+              <span aria-hidden="true" class="truncate1">{user?.name || 'Guest'}</span>
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  )
+}

package/components/partials/element/tooltip.jsx

@@ -0,0 +1,146 @@
+// todo: finish tailwind conversion
+import { css } from 'twin.macro'
+
+export function Tooltip({ text, children, className, classNamePopup, isSmall }) {
+  return (
+    <div class={`${className} relative inline-block align-middle`} css={style}>
+      {
+        text?.length || text?.props
+        ? <>
+            <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.jsx

@@ -0,0 +1,25 @@
+export function Topbar({ title, subtitle, submenu, btns, className }) {
+  /**
+   * @param {string|JSX} title
+   * @param {string|JSX} <subtitle>
+   * @param {string|JSX} <submenu>
+   * @param {url|function} <plusIconAction>
+   */
+  return (
+    <div class={`flex justify-between items-end mb-6 ${className||''}`}>
+      <div class="flex flex-col min-h-12">
+        { subtitle && <div class="py-2 text-sm">{subtitle}</div>}
+        <div class="flex items-center py-2">
+          <h1 class="h1 mb-0">{title}</h1>
+        </div>
+        { 
+          submenu && 
+          <div class="pt-2 text-large weight-500">{submenu}</div>
+        }
+      </div>
+      <div class="">
+        {btns}
+      </div>
+    </div>
+  )
+}