nitro-web 0.0.17 → 0.0.18

package/components/partials/element/calendar.tsx

@@ -17,9 +17,10 @@ export type CalendarProps = {
   numberOfMonths?: number
   month?: number // the value may be updated from an outside source, thus the month may have changed
   className?: string
+  preserveTime?: boolean
 }
 
-export function Calendar({ mode='single', onChange, value, numberOfMonths, month: monthProp, className }: CalendarProps) {
+export function Calendar({ mode='single', onChange, value, numberOfMonths, month: monthProp, className, preserveTime }: CalendarProps) {
   const isFirstRender = IsFirstRender()
   const isRange = mode == 'range'
 
@@ -41,6 +42,7 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
     switch (mode as T) {
       case 'single': {
         const date = newDate as ModeSelection<'single'>
+        preserveTimeFn(date)
         onChange?.(mode, date?.getTime() ?? null)
         break
       }
@@ -56,6 +58,19 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
       }
     }
   }
+
+  function preserveTimeFn(date?: Date) {      
+    // Preserve time from the original date if needed
+    if (preserveTime && dates[0] && date) {
+      const originalDate = dates[0]
+      date.setHours(
+        originalDate.getHours(),
+        originalDate.getMinutes(),
+        originalDate.getSeconds(),
+        originalDate.getMilliseconds()
+      )
+    }
+  }
   
   const d = getDefaultClassNames()
   const common = {

package/components/partials/element/dropdown.tsx

@@ -104,7 +104,7 @@ export const Dropdown = forwardRef(function Dropdown({
           return cloneElement(el, { key, onMouseDown, onKeyDown }) // adds onClick
         })
       }
-      <ul 
+      <ul
         style={{ minWidth }}
         class={`${menuStyle} absolute invisible opacity-0 select-none min-w-full z-[1]`}
       >
@@ -132,7 +132,9 @@ export const Dropdown = forwardRef(function Dropdown({
 
 const style = css`
   ul {
-    transition: transform 0.15s ease, opacity 0.15s ease, visibility 0s 0.15s ease;
+    transition: transform 0.15s ease, opacity 0.15s ease, visibility 0s 0.15s ease, max-width 0s 0.15s ease, max-height 0s 0.15s ease;
+    max-width: 0; // handy if the dropdown ul exceeds the viewport width
+    max-height: 0; // handy if the dropdown ul exceeds the viewport height
   }
   &.is-bottom-right,
   &.is-top-right {
@@ -166,6 +168,8 @@ const style = css`
       opacity: 1;
       visibility: visible;
       transition: transform 0.15s ease, opacity 0.15s ease;
+      max-width: 1000px;
+      max-height: 1000px;
     }
     &.is-bottom-left > ul,
     &.is-bottom-right > ul {

package/components/partials/form/input-date.tsx

@@ -10,6 +10,7 @@ export type FieldDateProps = React.InputHTMLAttributes<HTMLInputElement> & {
   name: string
   id?: string 
   mode?: Mode
+  showTime?: boolean
   // an array is returned for non-single modes
   onChange?: (e: { target: { id: string, value: null|number|(null|number)[] } }) => void
   prefix?: string
@@ -18,8 +19,8 @@ export type FieldDateProps = React.InputHTMLAttributes<HTMLInputElement> & {
   Icon?: React.ReactNode
 }
 
-export function FieldDate({ mode='single', onChange, prefix='', value, numberOfMonths, Icon, ...props }: FieldDateProps) {
-  const localePattern = 'd MMM yyyy'
+export function FieldDate({ mode='single', onChange, prefix='', value, numberOfMonths, Icon, showTime, ...props }: FieldDateProps) {
+  const localePattern = `d MMM yyyy${showTime && mode == 'single' ? ' HH:mm aa' : ''}`
   const [prefixWidth, setPrefixWidth] = useState(0)
   const dropdownRef = useRef<DropdownRef>(null)
   const id = props.id || props.name
@@ -40,7 +41,7 @@ export function FieldDate({ mode='single', onChange, prefix='', value, numberOfM
   }, [prefix])
 
   function onCalendarChange(mode: Mode, value: null|number|(null|number)[]) {
-    if (mode == 'single') dropdownRef.current?.setIsActive(false) // Close the dropdown
+    if (mode == 'single' && !showTime) dropdownRef.current?.setIsActive(false) // Close the dropdown
     setInputValue(getInputValue(value))
     if (onChange) onChange({ target: { id: id, value: value }})
   }
@@ -80,11 +81,19 @@ export function FieldDate({ mode='single', onChange, prefix='', value, numberOfM
     <Dropdown
       ref={dropdownRef}
       menuToggles={false}
-      animate={false}
+      // animate={false}
       // menuIsOpen={true}
       minWidth={0}
       menuChildren={
-        <Calendar {...{ mode, value, numberOfMonths, month }} onChange={onCalendarChange} className="px-3 pt-1 pb-2" />
+        <div className="flex">
+          <Calendar 
+            {...{ mode, value, numberOfMonths, month }} 
+            preserveTime={!!showTime} 
+            onChange={onCalendarChange} 
+            className="pt-1 pb-2  px-3" 
+          />
+          {!!showTime && mode == 'single' && <TimePicker date={dates?.[0]} onChange={onCalendarChange} />}
+        </div>
       }
     > 
       <div className="grid grid-cols-1">
@@ -110,3 +119,77 @@ export function FieldDate({ mode='single', onChange, prefix='', value, numberOfM
     </Dropdown>
   )
 }
+
+type TimePickerProps = {
+  date: Date|null
+  onChange: (mode: Mode, value: number|null) => void
+}
+
+function TimePicker({ date, onChange }: TimePickerProps) {
+  const lists = [
+    [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], // hours
+    [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55], // minutes
+    ['AM', 'PM'], // AM/PM
+  ]
+  
+  // Get current values from date or use defaults
+  const hour = date ? parseInt(format(date, 'h')) : undefined
+  const minute = date ? parseInt(format(date, 'm')) : undefined
+  const period = date ? format(date, 'a') : undefined
+  
+  const handleTimeChange = (type: 'hour' | 'minute' | 'period', value: string | number) => {
+    // Create a new date object from the current date or current time
+    const newDate = new Date(date || new Date())
+    
+    if (type === 'hour') {
+      // Parse the time with the new hour value
+      const timeString = `${value}:${format(newDate, 'mm')} ${format(newDate, 'a')}`
+      const updatedDate = parse(timeString, 'h:mm a', newDate)
+      newDate.setHours(updatedDate.getHours(), updatedDate.getMinutes())
+    } else if (type === 'minute') {
+      // Parse the time with the new minute value
+      const timeString = `${format(newDate, 'h')}:${value} ${format(newDate, 'a')}`
+      const updatedDate = parse(timeString, 'h:mm a', newDate)
+      newDate.setMinutes(updatedDate.getMinutes())
+    } else if (type === 'period') {
+      // Parse the time with the new period value
+      const timeString = `${format(newDate, 'h')}:${format(newDate, 'mm')} ${value}`
+      const updatedDate = parse(timeString, 'h:mm a', newDate)
+      newDate.setHours(updatedDate.getHours())
+    }
+    
+    onChange('single', newDate.getTime())
+  }
+
+  return (
+    lists.map((list, i) => {
+      const type = i === 0 ? 'hour' : i === 1 ? 'minute' : 'period'
+      const currentValue = i === 0 ? hour : i === 1 ? minute : period
+
+      return (
+        <div key={i} className="w-[60px] py-1 relative overflow-hidden hover:overflow-y-auto border-l border-gray-100">
+          <div className="w-[60px] absolute flex flex-col items-center">
+            {list.map(item => (
+              <div 
+                className="py-1 flex group cursor-pointer"
+                key={item}
+                onClick={() => handleTimeChange(type, item)}
+              >
+                <button 
+                  key={item}
+                  className={
+                    'size-[33px] rounded-full flex justify-center items-center group-hover:bg-gray-100 '
+                    + (item === currentValue ? '!bg-primary-dark text-white' : '')
+                  }
+                  onClick={() => handleTimeChange(type, item)}
+                >
+                  {item.toString().padStart(2, '0').toLowerCase()}
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )
+    })
+  )
+}

package/components/partials/styleguide.tsx

@@ -14,6 +14,7 @@ export function Styleguide({ config }: { config: Config }) {
     currency: 'nzd', // can be commented too
     date: Date.now(),
     'date-range': [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 33],
+    'date-time': Date.now(),
     calendar: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 8],
     firstName: 'Bruce',
     errors: [
@@ -251,15 +252,19 @@ export function Styleguide({ config }: { config: Config }) {
       </div>
 
       <h2 class="h3">Date Inputs</h2>
-      <div class="grid grid-cols-3 gap-x-6 mb-4">
+      <div class="grid grid-cols-1 gap-x-6 mb-4 sm:grid-cols-3">
         <div>
-          <label for="date">Date</label>
-          <Field name="date" type="date" state={state} onChange={onInputChange} />
+          <label for="date">Date with time</label>
+          <Field name="date-time" type="date" showTime={true} state={state} onChange={onInputChange} />
         </div>
         <div>
           <label for="date-range">Date range with prefix</label>
           <Field name="date-range" type="date" mode="range" prefix="Date:" state={state} onChange={onInputChange} />
         </div>
+        <div>
+          <label for="date">Date</label>
+          <Field name="date" type="date" state={state} onChange={onInputChange} />
+        </div>
       </div>
 
       <h2 class="h3">File Inputs & Calendar</h2>

package/package.json

@@ -3,7 +3,7 @@
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "./client/index.ts",
   "type": "module",
   "keywords": [
@@ -88,7 +88,7 @@
     "twin.macro": "^3.4.1"
   },
   "engines": {
-    "node": "^18"
+    "node": ">=18"
   },
   "standard-version": {
     "releaseCommitMessageFormat": "{{currentTag}}",

package/readme.md

@@ -11,7 +11,7 @@ npm i nitro-web
 ### Install
 
 1. Copy ./_example into your project
-2. In package.json, replace `"nitro-web": "file:.."` with `"nitro-web": "~0.0.17"`
+2. In package.json, replace `"nitro-web": "file:.."` with `"nitro-web": "~0.0.18"`
 3. In package.json, replace `"../.eslintrc.json"` with `"./node_modules/nitro-web/.eslintrc.json"`
 4. Run `npm i`