nitro-web 0.0.116 → 0.0.118

package/client/css/components.css

@@ -95,4 +95,16 @@
 .loading-dots::after {
   content: "";
   animation: dots 2s steps(1, end) infinite;
+}
+
+/* ---- Scrollbar -------------------- */
+
+.sm-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+.sm-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(0,0,0,0.3);
+}
+.sm-scrollbar::-webkit-scrollbar-track {
+  background: rgba(0,0,0,0.05);
 }

package/client/index.ts

@@ -45,6 +45,7 @@ export { Field, isFieldCached, type FieldProps } from '../components/partials/fo
 export { FieldColor, type FieldColorProps } from '../components/partials/form/field-color'
 export { FieldCurrency, type FieldCurrencyProps } from '../components/partials/form/field-currency'
 export { FieldDate, type FieldDateProps } from '../components/partials/form/field-date'
+export { FieldTime, type FieldTimeProps } from '../components/partials/form/field-time'
 export { Location } from '../components/partials/form/location'
 export { Select, getSelectStyle, type SelectProps } from '../components/partials/form/select'
 

package/components/partials/element/calendar.tsx

@@ -16,7 +16,7 @@ export type DayPickerProps = Omit<DayPickerPropsBase,
 
 export type CalendarProps = DayPickerProps & {
   mode?: Mode
-  onChange?: (mode: Mode, value: null|number|(null|number)[]) => void
+  onChange?: (value: null|number|(null|number)[]) => void
   value?: null|number|string|(null|number|string)[]
   numberOfMonths?: number
   month?: number // the value may be updated from an outside source, thus the month may have changed
@@ -48,17 +48,17 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
       case 'single': {
         const date = newDate as ModeSelection<'single'>
         preserveTimeFn(date)
-        onChange?.(mode, date?.getTime() ?? null)
+        onChange?.(date?.getTime() ?? null)
         break
       }
       case 'range': {
         const { from, to } = (newDate ?? {}) as ModeSelection<'range'>
-        onChange?.(mode, from ? [from.getTime() || null, to?.getTime() || null] : null)
+        onChange?.(from ? [from.getTime() || null, to?.getTime() || null] : null)
         break
       }
       case 'multiple': {
         const dates = (newDate as ModeSelection<'multiple'>)?.filter(Boolean) ?? []
-        onChange?.(mode, dates.map((d) => d.getTime()))
+        onChange?.(dates.map((d) => d.getTime()))
         break
       }
     }

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

@@ -2,7 +2,8 @@
 import { format, isValid, parse } from 'date-fns'
 import { getPrefixWidth } from 'nitro-web/util'
 import { Calendar, Dropdown } from 'nitro-web'
-import { dayButtonClassName, DayPickerProps } from '../element/calendar'
+import { DayPickerProps } from '../element/calendar'
+import { TimePicker } from './field-time'
 
 type Mode = 'single' | 'multiple' | 'range'
 type DropdownRef = {
@@ -42,11 +43,6 @@ export type FieldDateProps = (
     })
 )
 
-type TimePickerProps = {
-  date: Date|null
-  onChange: (mode: Mode, value: number|null) => void
-}
-
 export function FieldDate({
   dir = 'bottom-left',
   Icon,
@@ -59,6 +55,8 @@ export function FieldDate({
   DayPickerProps,
   ...props
 }: FieldDateProps) {
+  // Currently this displays the dates in local timezone and saves in utc. We should allow the user to display the dates in a 
+  // different timezone.
   const localePattern = `d MMM yyyy${showTime && mode == 'single' ? ' hh:mmaa' : ''}`
   const [prefixWidth, setPrefixWidth] = useState(0)
   const dropdownRef = useRef<DropdownRef>(null)
@@ -72,7 +70,7 @@ export function FieldDate({
   const onChange = onChangeProp ?? ((e: { target: { name: string, value: any } }) => setInternalValue(e.target.value))
     
   // Convert the value to an array of valid* dates
-  const dates = useMemo(() => {
+  const validDates = useMemo(() => {
     const arrOfNumbers = typeof value === 'string' 
       ? value.split(/\s*,\s*/g).map(o => parseFloat(o)) 
       : Array.isArray(value) ? value : [value]
@@ -81,19 +79,19 @@ export function FieldDate({
   }, [value])
 
   // Hold the input value in state
-  const [inputValue, setInputValue] = useState(() => getInputValue(dates))
+  const [inputValue, setInputValue] = useState(() => getInputValue(validDates))
 
   // Update the date's inputValue (text) when the value changes outside of the component
   useEffect(() => {
-    if (new Date().getTime() > lastUpdated + 100) setInputValue(getInputValue(dates))
-  }, [dates])
+    if (new Date().getTime() > lastUpdated + 100) setInputValue(getInputValue(validDates))
+  }, [validDates])
 
   // Get the prefix content width
   useEffect(() => {
     setPrefixWidth(getPrefixWidth(prefix, 4))
   }, [prefix])
 
-  function onCalendarChange(mode: Mode, value: null|number|(null|number)[]) {
+  function onCalendarChange(value: null|number|(null|number)[]) {
     if (mode == 'single' && !showTime) dropdownRef.current?.setIsActive(false) // Close the dropdown
     setInputValue(getInputValue(value))
     // Update the value
@@ -102,6 +100,7 @@ export function FieldDate({
   }
 
   function onInputChange(e: React.ChangeEvent<HTMLInputElement>) {
+    // Calls onChange (should update state, thus updating the value) with "raw" values
     setInputValue(e.target.value) // keep the input value in sync
 
     let split = e.target.value.split(/-|,/).map(o => {
@@ -132,7 +131,7 @@ export function FieldDate({
     const _dates = Array.isArray(value) ? value : [value]
     return _dates.map(o => o ? format(o, localePattern) : '').join(mode == 'range' ? ' - ' : ', ')
   }
-
+  
   function getOutputValue(value: Date|number|null|(Date|number|null)[]): any {
     // console.log(value)
     return value
@@ -149,13 +148,13 @@ export function FieldDate({
         <div className="flex">
           <Calendar 
             // Calendar actually accepts an array of dates, but the type is not typed correctly
-            {...{ mode: mode, value: dates as any, numberOfMonths: numberOfMonths, month: month }}
+            {...{ mode: mode, value: validDates as any, numberOfMonths: numberOfMonths, month: month }}
             {...DayPickerProps}
             preserveTime={!!showTime} 
             onChange={onCalendarChange} 
             className="pt-1 pb-2 px-3" 
           />
-          {!!showTime && mode == 'single' && <TimePicker date={dates?.[0]} onChange={onCalendarChange} />}
+          {!!showTime && mode == 'single' && <TimePicker date={validDates?.[0] ?? undefined} onChange={onCalendarChange} />}
         </div>
       }
       dir={dir}
@@ -175,7 +174,7 @@ export function FieldDate({
           id={id}
           autoComplete="off" 
           className={(props.className||'')}// + props.className?.includes('is-invalid') ? ' is-invalid' : ''} 
-          onBlur={() => setInputValue(getInputValue(dates))}
+          onBlur={() => setInputValue(getInputValue(validDates))} // onChange should of updated the value -> validValue by this point
           onChange={onInputChange}
           style={{ textIndent: prefixWidth + 'px' }}
           type="text"
@@ -185,72 +184,3 @@ export function FieldDate({
     </Dropdown>
   )
 }
-
-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={
-                    `${dayButtonClassName} rounded-full flex justify-center items-center group-hover:bg-gray-100 `
-                    + (item === currentValue ? '!bg-input-border-focus text-white' : '')
-                  }
-                  onClick={() => handleTimeChange(type, item)}
-                >
-                  {item.toString().padStart(2, '0').toLowerCase()}
-                </button>
-              </div>
-            ))}
-          </div>
-        </div>
-      )
-    })
-  )
-}

package/components/partials/form/field-time.tsx

@@ -0,0 +1,197 @@
+import { format, parse } from 'date-fns'
+import { Button, Dropdown } from 'nitro-web'
+import { dayButtonClassName } from '../element/calendar'
+
+type Timestamp = number // timestamp on epoch day
+type DropdownRef = {
+  setIsActive: (value: boolean) => void
+}
+export type FieldTimeProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  name: string
+  id?: string 
+  onChange?: (e: { target: { name: string, value: null|number } }) => void
+  value?: string | Timestamp;
+  Icon?: React.ReactNode
+  dir?: 'bottom-left'|'bottom-right'|'top-left'|'top-right'
+  // tz?: string
+}
+type TimePickerProps = {
+  date?: Date
+  onChange: (value: Timestamp) => void
+  // tz?: string
+}
+
+export function FieldTime({ onChange, value, Icon, dir = 'bottom-left', ...props }: FieldTimeProps) {
+  // time is viewed and set in local timezone, and saved as timestamp on epoch day. 
+  // Note: timestamp is better than saving seconds so we can easily view this in a particular timezone
+  const localePattern = 'hh:mmaa'
+  const dropdownRef = useRef<DropdownRef>(null)
+  const id = props.id || props.name
+
+  // Convert the value to a valid time value
+  const validValue = useMemo(() => {
+    const num = typeof value === 'string' ? parseInt(value) : value
+    console.log(11, num)
+    return typeof num === 'number' && !isNaN(num) ? num : new Date(0).getTime()
+  }, [value])
+
+  // Hold the input value in state
+  const [inputValue, setInputValue] = useState(() => getInputValue(validValue))
+
+  function onTimePickerChange(value: Timestamp) {
+    setInputValue(getInputValue(value))
+    if (onChange) onChange({ target: { name: props.name, value: value }})
+  }
+
+  function getInputValue(timestamp: Timestamp) {
+    // Get the input-value in local timezone
+    return typeof timestamp === 'number' ? format(new Date(timestamp), localePattern) : '' 
+  }
+
+  function onInputChange(e: React.ChangeEvent<HTMLInputElement>) {
+    // Assume the string is in local timezone, and calls onChange with "raw" values (should update state, thus updating the value). 
+    setInputValue(e.target.value) // keep the input value in sync
+    const [, _hour, _minute, _second, _period] = e.target.value.match(/(\d{1,2}):(\d{2})(:\d{2})?\s*(am|pm)/i) || []
+    if (!_hour || !_minute) return
+    const hour24 = parseInt(_hour) < 12 && _period.match(/pm/i) ? parseInt(_hour) + 12 : parseInt(_hour)
+    const minute = parseInt(_minute)
+
+    // Assume the time string is in the local timezone, and convert to UTC date from epoch
+    const localDate = new Date(0)
+    localDate.setHours(hour24, minute, _second ? parseInt(_second) : 0, 0)
+    const value = localDate.getTime()
+    if (onChange) onChange({ target: { name: props.name, value: value }})
+  }
+
+  function onNowClick() {
+    const epochDay = new Date(0)
+    const now = new Date()
+    // now set hours, minutes, seconds to now but on epoch day
+    epochDay.setHours(now.getHours(), now.getMinutes(), now.getSeconds(), 0)
+    onTimePickerChange(epochDay.getTime())
+  }
+
+  return (
+    <Dropdown
+      ref={dropdownRef}
+      menuToggles={false}
+      // animate={false}
+      // menuIsOpen={true}
+      minWidth={0}
+      dir={dir}
+      menuContent={
+        <div>
+          <div className="flex justify-center h-[250px]">
+            <TimePicker date={new Date(validValue)} onChange={onTimePickerChange} />
+          </div>
+          <div className="flex justify-between p-2 border-t border-gray-100">
+            <Button color="secondary" size="xs" onClick={() => onNowClick()}>Now</Button>
+            <Button color="primary" size="xs" onClick={() => dropdownRef.current?.setIsActive(false)}>Done</Button>
+          </div>
+        </div>
+      }
+    > 
+      <div className="grid grid-cols-1">
+        {Icon}
+        <input 
+          {...props}
+          id={id}
+          autoComplete="off"
+          className={(props.className||'')}// + props.className?.includes('is-invalid') ? ' is-invalid' : ''} 
+          value={inputValue}
+          onChange={onInputChange}
+          onBlur={() => setInputValue(getInputValue(validValue))} // onChange should of updated the value -> validValue by this point
+          type="text"
+        />
+      </div>
+    </Dropdown>
+  )
+}
+
+export function TimePicker({ date, onChange }: TimePickerProps) {
+  const lists = [
+    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // hours
+    [
+      0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 
+      27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 
+      51, 52, 53, 54, 55, 56, 57, 58, 59,
+    ], // 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) => {
+    // Creates a new date object in the local timezone, and calls onChange with the timestamp
+    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(newDate.getTime())
+  }
+
+  function scrollIntoView(type: 'hour' | 'minute' | 'period', value: string | number, element: HTMLElement) {
+    const container = element?.parentElement?.parentElement
+    if (element && container) {
+      const topContainerPadding = 0
+      const scrollTop = element.offsetTop - container.offsetTop - topContainerPadding
+      container.scrollTo({ top: scrollTop, behavior: 'smooth' })
+    }
+  }
+
+  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-2 relative overflow-hidden hover:overflow-y-auto border-l border-gray-100 sm-scrollbar first:border-l-0"
+        >
+          <div className="w-[60px] absolute flex flex-col items-center">
+            {/* using absolute since the scrollbar takes up space  */}
+            {list.map(item => (
+              <div 
+                className="py-[1px] flex group cursor-pointer"
+                key={item}
+                onClick={(e) => {
+                  handleTimeChange(type, item)
+                  scrollIntoView(type, item, e.currentTarget)
+                }}
+              >
+                <button 
+                  key={item}
+                  className={
+                    `${dayButtonClassName} rounded-full flex justify-center items-center group-hover:bg-gray-100 `
+                    + (item === currentValue ? '!bg-input-border-focus text-white' : '')
+                  }
+                >
+                  {item.toString().padStart(2, '0').toLowerCase()}
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )
+    })
+  )
+}

package/components/partials/form/field.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // fill-current tw class for lucide icons (https://github.com/lucide-icons/lucide/discussions/458)
 import { css } from 'twin.macro'
-import { FieldCurrency, FieldCurrencyProps, FieldColor, FieldColorProps, FieldDate, FieldDateProps } from 'nitro-web'
+import { FieldCurrency, FieldCurrencyProps, FieldColor, FieldColorProps, FieldDate, FieldDateProps, FieldTime, 
+  FieldTimeProps } from 'nitro-web'
 import { twMerge, getErrorFromState, deepFind } from 'nitro-web/util'
 import { Errors, type Error } from 'nitro-web/types'
-import { MailIcon, CalendarIcon, FunnelIcon, SearchIcon, EyeIcon, EyeOffIcon } from 'lucide-react'
+import { MailIcon, CalendarIcon, FunnelIcon, SearchIcon, EyeIcon, EyeOffIcon, ClockIcon } from 'lucide-react'
 import { memo } from 'react'
 
-type FieldType = 'text' | 'number' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color'
+type FieldType = 'text' | 'number' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color' | 'time'
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 type FieldExtraProps = {
@@ -40,6 +41,8 @@ export type FieldProps = (
   | ({ type: 'currency' } & FieldCurrencyProps & FieldExtraProps)
   | ({ type: 'color' } & FieldColorProps & FieldExtraProps)
   | ({ type: 'date' } & FieldDateProps & FieldExtraProps)
+  | ({ type: 'time' } & FieldTimeProps & FieldExtraProps)
+  // | ({ type: 'time2' } & FieldTimeProps2 & FieldExtraProps)
 )
 type IsFieldCachedProps = {
   name: string
@@ -95,6 +98,8 @@ function FieldBase({ state, icon, iconPos: ip, errorTitle, ...props }: FieldProp
     Icon = <IconWrapper iconPos={iconPos} icon={icon || <ColorSvg hex={value}/>} className="size-[17px]" />
   } else if (type == 'date') {
     Icon = <IconWrapper iconPos={iconPos} icon={icon || <CalendarIcon />} className="size-[14px] size-input-icon" />
+  } else if (type == 'time') {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <ClockIcon />} className="size-[14px] size-input-icon" /> 
   } else if (icon) {
     Icon = <IconWrapper iconPos={iconPos} icon={icon} className="size-[14px] size-input-icon" />
   }
@@ -134,7 +139,20 @@ function FieldBase({ state, icon, iconPos: ip, errorTitle, ...props }: FieldProp
         <FieldDate {...props} {...commonProps} Icon={Icon} />
       </FieldContainer>
     )
-  }
+  } else if (type == 'time') {
+    return (
+      <FieldContainer error={error} className={props.className}>
+        <FieldTime {...props} {...commonProps} Icon={Icon} />
+      </FieldContainer>
+    )
+  } 
+  // else if (type == 'time2') {
+  //   return (
+  //     <FieldContainer error={error} className={props.className}>
+  //       <FieldTime2 {...props} {...commonProps} Icon={Icon} />
+  //     </FieldContainer>
+  //   )
+  // }
 }
 
 function FieldContainer({ children, className, error }: { children: React.ReactNode, className?: string, error?: Error }) {

package/components/partials/form/select.tsx

@@ -224,7 +224,7 @@ function Option(props: OptionProps) {
 const DropdownIndicator = (props: DropdownIndicatorProps) => {
   return (
     <components.DropdownIndicator {...props}>
-      <ChevronsUpDownIcon size={15} className="text-gray-400 -my-0.5 -mx-[1px]" />
+      <ChevronsUpDownIcon size={15} className="text-[#b6b8be] text-input-icon -my-0.5 -mx-[1px]" />
     </components.DropdownIndicator>
   )
 }

package/components/partials/styleguide.tsx

@@ -45,6 +45,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
     date: Date.now(),
     'date-range': [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 33],
     'date-time': Date.now(),
+    time: null,
     calendar: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 8],
     firstName: 'Bruce',
     tableFilter: '',
@@ -471,6 +472,10 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
           <label for="date">Date multi-select (right aligned)</label>
           <Field name="date" type="date" mode="multiple" state={state} onChange={(e) => onChange(setState, e)} dir="bottom-right" />
         </div>
+        <div>
+          <label for="time">Time</label>
+          <Field name="time" type="time" state={state} onChange={(e) => onChange(setState, e)}  />
+        </div>
       </div>
 
       <h2 class="h3">File Inputs & Calendar</h2>
@@ -482,7 +487,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
         <div>
           <label for="calendar">Calendar</label>
           <Calendar mode="range" value={state.calendar} numberOfMonths={1} 
-            onChange={(mode, value) => {
+            onChange={(value) => {
               onChange(setState, { target: { name: 'calendar', value: value } })
             }} 
           />

package/package.json

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