nitro-web 0.0.36 → 0.0.38

package/components/partials/element/button.tsx

@@ -1,5 +1,5 @@
 import { twMerge } from 'tailwind-merge'
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid'
+import { ChevronDown, ChevronUp } from 'lucide-react'
 
 type Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   color?: 'primary'|'secondary'|'black'|'white'
@@ -47,12 +47,12 @@ export function Button({
     lg: 'px-3.5 py-2.5 px-button-x-lg py-button-y-lg text-sm rounded-md',
   }
 
-  const contentLayout = `w-full gap-x-1.5 ${iconPosition == 'none' ? '' : 'inline-flex items-center justify-center'}`
+  const contentLayout = `gap-x-1.5 ${iconPosition == 'none' ? '' : 'inline-flex items-center justify-center'}`
   const loading = isLoading ? '[&>*]:opacity-0 text-opacity-0' : ''
 
   function getIcon(Icon: React.ReactNode | 'v') {
-    if (Icon == 'v' || Icon == 'down') return <ChevronDownIcon className="size-5 -my-6 -mx-1" />
-    if (Icon == '^' || Icon == 'up') return <ChevronUpIcon className="size-5 -my-6 -mx-1" />
+    if (Icon == 'v' || Icon == 'down') return <ChevronDown size={16.5} className="mt-[-1.4rem] mb-[-1.5rem] -mx-0.5" />
+    if (Icon == '^' || Icon == 'up') return <ChevronUp size={16.5} className="mt-[-1.4rem] mb-[-1.5rem] -mx-0.5" />
     else return Icon
   }
   

package/components/partials/element/message.tsx

@@ -1,8 +1,6 @@
 // Todo: show correct message type, e.g. error, warning, info, success `${store.message.type || 'success'}`
 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 { X, CircleCheck } from 'lucide-react'
 import { MessageObject } from 'nitro-web/types'
 
 /**
@@ -85,16 +83,15 @@ export function Message() {
         className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-20 nitro-message"
       >
         <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">
+          {isObject(store.message) && (
+            <div className={
+              'overflow-hidden pointer-events-auto max-w-[350px] rounded-md bg-white shadow-lg ring-1 ring-black/5 transition ' +
+              (visible ? 'translate-x-0 opacity-100' : 'translate-x-1 opacity-0')
+            }>
+              <div className="p-3">
                 <div className="flex items-start">
                   <div className="shrink-0">
-                    <CheckCircleIcon aria-hidden="true" className="size-6 text-green-400" />
+                    <CircleCheck aria-hidden="true" size={21} className="text-green-400 mt-0.5" />
                   </div>
                   <div className="ml-3 flex-1 pt-0.5">
                     <p className="text-sm font-medium text-gray-900">{typeof store.message === 'object' && store.message?.text}
@@ -105,17 +102,17 @@ export function Message() {
                     <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 
+                      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" />
+                      <X aria-hidden="true" size={19} className="mt-0.5" />
                     </button>
                   </div>
                 </div>
               </div>
             </div>
-          </Transition>
+          )}
         </div>
       </div>
     </>

package/components/partials/element/sidebar.tsx

@@ -1,14 +1,17 @@
 // 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,
+  XMarkIcon,
   ArrowLeftCircleIcon,
   PaintBrushIcon,
 } from '@heroicons/react/24/outline'
 
-const sidebarWidth = 'w-[19rem] lg:w-80'
+const sidebarWidth = 'w-80'
 
 export type SidebarProps = {
   Logo?: React.FC<{ width?: string, height?: string }>;
@@ -24,10 +27,52 @@ export function Sidebar({ Logo, menu, links }: SidebarProps) {
   const [sidebarOpen, setSidebarOpen] = useState(false)
   return (
     <>
-      {/* Static sidebar for desktop */}
-      <div className={`relative inset-y-0 z-50 flex flex-col ${sidebarWidth}`}>
+      {/* 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">
+            <XMarkIcon aria-hidden="true" className="size-6 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}`} />
     </>
   )
 }
@@ -56,13 +101,13 @@ function SidebarContents ({ Logo, menu, links }: SidebarProps) {
 
   // Sidebar component, swap this element with another sidebar if you like
   return (
-    <div className="flex grow flex-col gap-y-8 overflow-y-auto py-5 px-10 border-r bg-primary border-gray-200 text-white">
+    <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-200 font-semibold mt-4">{injectedConfig.version}</span>
+          <span className="text-[9px] text-gray-900 font-semibold mt-4">{injectedConfig.version}</span>
         </div>
       )}
       <nav className="flex flex-1 flex-col">
@@ -125,7 +170,7 @@ function SidebarContents ({ Logo, menu, links }: SidebarProps) {
             </ul>
           </li>
 
-          <li className="-mx-6 mt-auto block">
+          <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"
@@ -138,4 +183,13 @@ function SidebarContents ({ Logo, menu, links }: SidebarProps) {
       </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/form/field.tsx

@@ -10,6 +10,7 @@ import {
   EyeIcon,
   EyeSlashIcon,
 } from '@heroicons/react/20/solid'
+// Maybe use fill-current tw class for lucide icons (https://github.com/lucide-icons/lucide/discussions/458)
 
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
@@ -18,7 +19,7 @@ type FieldExtraProps = {
   name: string
   id?: string
   // state object to get the value, and check errors against
-  state?: { errors: Errors, [key: string]: unknown }
+  state?: { errors?: Errors, [key: string]: unknown }
   type?: 'text' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color'
   icon?: React.ReactNode
   iconPos?: 'left' | 'right'

package/components/partials/styleguide.tsx

@@ -1,6 +1,6 @@
 import { Drop, Dropdown, Field, Select, Button, Checkbox, GithubLink, Modal, Calendar, injectedConfig } from 'nitro-web'
 import { getCountryOptions, getCurrencyOptions, ucFirst } from 'nitro-web/util'
-import { CheckIcon } from '@heroicons/react/20/solid'
+import { Check } from 'lucide-react'
 
 export function Styleguide() {
   const [customerSearch, setCustomerSearch] = useState('')
@@ -106,9 +106,11 @@ export function Styleguide() {
         <div><Button color="primary" size="sm">*-sm button</Button></div>
         <div><Button color="primary">*-md (default)</Button></div>
         <div><Button color="primary" size="lg">*-lg button</Button></div>
-        <div><Button IconLeft={<CheckIcon class="size-5 -my-5 -mx-0.5" />}>IconLeft</Button></div>
-        <div><Button IconLeft={<CheckIcon class="size-5 -my-5 -mx-0.5" />} className="w-[160px]">IconLeft 160px</Button></div>
-        <div><Button IconLeftEnd={<CheckIcon class="size-5 -my-5 -mx-0.5" />} className="w-[190px]">IconLeftEnd 190px</Button></div>
+        <div><Button IconLeft={<Check size={19} className="-my-5 -mx-0.5" />}>IconLeft</Button></div>
+        <div><Button IconLeft={<Check size={19} className="-my-5 -mx-0.5" />} 
+          className="w-[160px]">IconLeft 160px</Button></div>
+        <div><Button IconLeftEnd={<Check size={19} className="-my-5 -mx-0.5" />} 
+          className="w-[190px]">IconLeftEnd 190px</Button></div>
         <div><Button IconRight="v">IconRight</Button></div>
         <div><Button IconRightEnd="v" className="w-[190px]">IconRightEnd 190px</Button></div>
         <div><Button color="primary" IconRight="v" isLoading>primary isLoading</Button></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",