nitro-web 0.0.75 → 0.0.77

package/components/auth/auth.api.js

@@ -6,7 +6,7 @@ import { Strategy as JwtStrategy, ExtractJwt } from 'passport-jwt'
 import db from 'monastery'
 import jsonwebtoken from 'jsonwebtoken'
 import { sendEmail } from 'nitro-web/server'
-import { isArray, pick, isString, ucFirst, fullNameSplit } from 'nitro-web/util'
+import { isArray, pick, ucFirst, fullNameSplit } from 'nitro-web/util'
 
 let authConfig = null
 const JWT_SECRET = process.env.JWT_SECRET || 'replace_this_with_secure_env_secret'

package/components/partials/element/dropdown.tsx

@@ -81,51 +81,45 @@ export const Dropdown = forwardRef(function Dropdown({
 
   useEffect(() => {
     setReady(false)
-    console.log(1111, isActive, dropdownRef.current)
     if (!isActive || !dropdownRef.current) return
     
-    // const ul = dropdownRef.current.querySelector('&>ul') as HTMLElement
-    // if (!ul) return
-    // console.log(1111)
+    const ul = dropdownRef.current.querySelector('ul') as HTMLElement
+    if (!ul) return
   
     // Temporarily show the ul for measurement
-    // const originalMaxHeight = ul.style.maxHeight
-    // const originalVisibility = ul.style.visibility
-    // const originalOpacity = ul.style.opacity
-    // const originalPointerEvents = ul.style.pointerEvents
+    const originalMaxHeight = ul.style.maxHeight
+    const originalVisibility = ul.style.visibility
+    const originalOpacity = ul.style.opacity
+    const originalPointerEvents = ul.style.pointerEvents
   
-    // ul.style.maxHeight = 'none'
-    // ul.style.visibility = 'hidden'
-    // ul.style.opacity = '0'
-    // ul.style.pointerEvents = 'none'
+    ul.style.maxHeight = 'none'
+    ul.style.visibility = 'hidden'
+    ul.style.opacity = '0'
+    ul.style.pointerEvents = 'none'
   
-    // const dropdownHeight = ul.getBoundingClientRect().height
+    const dropdownHeight = ul.getBoundingClientRect().height
   
     // Revert styles
-    // ul.style.maxHeight = originalMaxHeight
-    // ul.style.visibility = originalVisibility
-    // ul.style.opacity = originalOpacity
-    // ul.style.pointerEvents = originalPointerEvents
+    ul.style.maxHeight = originalMaxHeight
+    ul.style.visibility = originalVisibility
+    ul.style.opacity = originalOpacity
+    ul.style.pointerEvents = originalPointerEvents
   
+    const rect = dropdownRef.current.getBoundingClientRect()
+    const spaceBelow = window.innerHeight - rect.bottom
+    const spaceAbove = rect.top
   
-    // const rect = dropdownRef.current.getBoundingClientRect()
-    // const spaceBelow = window.innerHeight - rect.bottom
-    // const spaceAbove = rect.top
+    const side = dir.endsWith('right') ? 'right' : 'left'
   
-    // const side = dir.endsWith('right') ? 'right' : 'left'
+    const newDirection = dir.startsWith('bottom')
+      ? `${spaceBelow < dropdownHeight && spaceAbove > dropdownHeight ? 'top' : 'bottom'}-${side}`
+      : `${spaceAbove < dropdownHeight && spaceBelow > dropdownHeight ? 'bottom' : 'top'}-${side}`
   
-    // const newDirection = dir.startsWith('bottom')
-    //   ? `${1 < 1 && 1 > 1 ? 'top' : 'bottom'}-${side}`
-    //   : `${1 < 1 && 1 > 1 ? 'bottom' : 'top'}-${side}`
+    setDirection(newDirection as 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right')
   
-    // setDirection(dir as 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right')
-  
-    // requestAnimationFrame(() => {
-    //   // console.log('ul', originalOpacity)
-    //   setReady(true)
-    // })
-    setDirection(dir)
-    setReady(true)
+    requestAnimationFrame(() => {
+      setReady(true)
+    })
   }, [isActive, dir])
 
   function onMouseDown(e: { key: string, preventDefault: Function }) {
@@ -138,12 +132,13 @@ export const Dropdown = forwardRef(function Dropdown({
     if (option.onClick) option.onClick(e)
     if (!menuIsOpen) setIsActive(!isActive)
   }
+  var ready2
 
   return (
     <div 
       class={
         `relative is-${direction || dir}` + // until hovered, show the original direction to prevent scrollbars
-        (ready ? ' is-ready' : '') +
+        (ready2 ? ' is-ready' : '') +
         (isHoverable ? ' is-hoverable' : '') +
         (isActive ? ' is-active' : '') +
         (!animate ? ' no-animation' : '') +
@@ -165,7 +160,7 @@ export const Dropdown = forwardRef(function Dropdown({
       <ul
         style={{ minWidth }}
         class={
-          twMerge(`${menuStyle} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName||''}`)}
+          twMerge(`${menuStyle} ${ready ? 'is-ready' : ''} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName||''}`)}
       >
         {menuContent}
         {
@@ -198,7 +193,7 @@ const style = css`
   }
   &.is-bottom-right,
   &.is-top-right {
-    &>ul {
+    ul {
       left: auto;
       right: 0;
     }
@@ -218,14 +213,13 @@ const style = css`
     }
   }
   // active submenu
-  &./////////////
   &.is-hoverable:hover,
   &:focus,
   &.is-active,
   &>ul>li:hover,
   &>ul>li:focus,
   &>ul>li.is-active {
-    &>ul {
+    &>ul.is-ready {
       opacity: 1;
       visibility: visible;
       transition: transform 0.15s ease, opacity 0.15s ease;

package/components/partials/element/filters.tsx

@@ -119,10 +119,9 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
   
   return (
     <Elements.Dropdown 
-      // menuIsOpen={true}
-      className='ddddddddd'
       dir="bottom-right"
       allowOverflow={true}
+      // menuIsOpen={true}
       {...dropdownProps}
       menuClassName={twMerge(`min-w-[330px] ${dropdownProps?.menuClassName || ''}`)}
       menuContent={

package/components/partials/form/checkbox.tsx

@@ -54,6 +54,7 @@ export function Checkbox({
                 ? <>
                     <input
                       {...props}
+                      id={id}
                       type={type}
                       style={{ width: checkboxSize, height: checkboxSize }}
                       checked={value}
@@ -106,6 +107,7 @@ export function Checkbox({
                 : <>
                     <input 
                       {...props}
+                      id={id}
                       type="checkbox" 
                       className="sr-only peer"
                       checked={value}

package/components/partials/styleguide.tsx

@@ -200,22 +200,22 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
         <div><Button size="xs" IconCenter={<FileEditIcon size={14}/>}></Button></div>
       </div>
 
-      <h2 class="h3">Checkboxes</h2>
+      <h2 class="h3">Varients</h2>
       <div class="grid grid-cols-3 gap-x-6 mb-4">
         <div>
-          <label for="input2">Label</label>
+          <label for="input2">Toggles</label>
           <Checkbox name="input2" type="toggle" text="Toggle sm" subtext="some additional text here." class="!mb-0" 
             state={state} onChange={(e) => onChange(setState, e)} />
           <Checkbox name="input3" type="toggle" text="Toggle 22px" subtext="some additional text here." size={22} />
         </div>
         <div>
-          <label for="input1">Label</label>
+          <label for="input1">Radios</label>
           <Checkbox name="input1" type="radio" text="Radio" subtext="some additional text here 1." id="input1-1" class="!mb-0" 
             defaultChecked />
           <Checkbox name="input1" type="radio" text="Radio 16px" subtext="some additional text here 2." id="input1-2"  size={16} />
         </div>
         <div>
-          <label for="input0">Label</label>
+          <label for="input0">Checkboxes</label>
           <Checkbox name="input0" type="checkbox" text="Checkbox" subtext="some additional text here."  class="!mb-0" defaultChecked />
           <Checkbox name="input0.1" type="checkbox" text="Checkbox 16px" size={16}
             subtext="some additional text here which is a bit longer that will be line-wrap to the next line." />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.75",
+  "version": "0.0.77",
   "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 🚀",

package/server/email/reset-password.html

@@ -1,6 +1,6 @@
 <!-- 
-  - You can view templates at http://localhost:3001/email/reset-password
-  - To modify the css, add your own /server/email/partials/email.css file
+  - You can view templates at http://localhost:3000/email/reset-password
+  - To modify the css, add your own ./server/email/partials/email.css file
   - You can copy any nitro email .swig/html template to your project, and modify it
 -->
   

package/server/email/welcome.html

@@ -1,6 +1,6 @@
 <!-- 
-  - You can view templates at http://localhost:3001/email/welcome
-  - To modify the css, add your own /server/email/partials/email.css file
+  - You can view templates at http://localhost:3000/email/welcome
+  - To modify the css, add your own ./server/email/partials/email.css file
   - You can copy any nitro email .swig/html template to your project, and modify it
 -->
 

package/server/router.js

@@ -98,7 +98,8 @@ export async function setupRouter (config) {
   let indexExists = !!fs.existsSync(distDir + 'index.html')
 
   // Register email routes for development
-  // E.g. http://localhost:3001/email/welcome
+  // E.g. http://localhost:3001/email/welcome Or
+  // E.g. http://localhost:3000/email/welcome (with webpack-dev-server proxy)
   if (env == 'development') {
     expressApp.get('/email/partials/email.css', (req, res) => {
       // first check if there is a custom email.css in the emailTemplateDir