nitro-web 0.0.40 → 0.0.41

package/components/partials/form/field.tsx

@@ -11,8 +11,6 @@ import {
   EyeSlashIcon,
 } from '@heroicons/react/20/solid'
 // Maybe use fill-current tw class for lucide icons (https://github.com/lucide-icons/lucide/discussions/458)
-import FieldTime, { FieldTimeProps } from './field-time'
-import ClockIcon from '../icons/clock'
 
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
@@ -22,7 +20,7 @@ type FieldExtraProps = {
   id?: string
   // state object to get the value, and check errors against
   state?: { errors?: Errors, [key: string]: unknown }
-  type?: 'text' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'time' | 'color'
+  type?: 'text' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color'
   icon?: React.ReactNode
   iconPos?: 'left' | 'right'
 }
@@ -38,7 +36,6 @@ export type FieldProps = (
   | ({ type: 'currency' } & FieldCurrencyProps & FieldExtraProps)
   | ({ type: 'color' } & FieldColorProps & FieldExtraProps)
   | ({ type: 'date' } & FieldDateProps & FieldExtraProps)
-  | ({ type: 'time' } & FieldTimeProps & FieldExtraProps)
 )
 
 export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
@@ -89,8 +86,6 @@ export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
     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-4" />
-  } else if (type == 'time') {
-    Icon = <IconWrapper iconPos={iconPos} icon={icon || <ClockIcon />} className="size-4" />
   } else {
     Icon = <IconWrapper iconPos={iconPos} icon={icon} />
   }
@@ -130,12 +125,6 @@ export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
         <FieldDate {...props} {...commonProps} Icon={Icon} />
       </FieldContainer>
     )
-  } else if (type == 'time') {
-    return (
-      <FieldContainer error={error} className={props.className}>
-        <FieldTime {...props} {...commonProps} Icon={Icon} />
-      </FieldContainer>
-    )
   }
 }
 

package/components/partials/styleguide.tsx

@@ -14,7 +14,6 @@ export function Styleguide() {
     date: Date.now(),
     'date-range': [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 33],
     'date-time': Date.now(),
-    time: '0',
     calendar: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 8],
     firstName: 'Bruce',
     errors: [
@@ -40,30 +39,13 @@ export function Styleguide() {
   ]
 
   function onInputChange (e: { target: { id: string, value: unknown } }) {
-    const {id} = e.target
-    let {value} = e.target
-    if ((id == 'customer' || id == 'customer2') && value == '') {
+    if ((e.target.id == 'customer' || e.target.id == 'customer2') && e.target.value == '') {
       setCustomerSearch('')
-      value = null // clear the selected value
+      e.target.value = null // clear the selected value
     }
-    const newValue = value
-    console.dir('newValue')
-    console.dir(newValue)
-    setState(s => ({ ...s, [id]: newValue }))
+    setState(s => ({ ...s, [e.target.id]: e.target.value }))
   }
 
-    /**
-   * handleTimeChange
-   */
-    const handleTimeChange = () => ({ id, value }: { id: string, value: number | number[] }) => {
-      if (Array.isArray(value)) return
-
-      setState((state) => ({
-        ...state,
-        [id]: value,
-      }))
-    }
-
   function onCustomerSearch (search: string) {
     setCustomerSearch(search || '')
   }
@@ -287,10 +269,6 @@ export function Styleguide() {
           <label for="date">Date (right aligned)</label>
           <Field name="date" type="date" state={state} onChange={onInputChange} dir="bottom-right" />
         </div>
-        <div>
-          <label for="time">Time</label>
-          <Field name="time" type="time" state={state} value={state.time} onChange={handleTimeChange} />
-        </div>
       </div>
 
       <h2 class="h3">File Inputs & Calendar</h2>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "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/components/partials/form/field-time.tsx

@@ -1,163 +0,0 @@
-import React, { useState, useMemo, useCallback, JSX, useEffect } from 'react'
-import { css, theme } from 'twin.macro'
-import { Dropdown } from 'nitro-web'
-import ClockIcon from '../icons/clock'
-
-export interface FieldTimeProps {
-  className?: string;
-  placeholder?: string;
-  id?: string;
-  onChange: (values: { id: string; value: number; isFalse: boolean }) => void;
-  value: string;
-  isFull?: boolean;
-  Icon?: JSX.Element;
-  required?: boolean;
-  onFalseCondition?: (id: string, time: number) => boolean
-}
-
-export function FieldTime({
-  className, placeholder = '', id = '', onChange, value, isFull = true, Icon = <ClockIcon />, required = false, onFalseCondition, ...rest
-}: FieldTimeProps) {
-
-  // Parse the incoming time value
-  const [time, setTime] = useState(() => Number(value) || 0)
-
-  const handleTimeChange = useCallback((isHour: boolean, e: React.ChangeEvent<HTMLSelectElement>) => {
-    const timeStr = e.target.value
-    const number = parseInt(timeStr)
-    const hours = Math.floor(time / (60 * 60 * 1000))
-    const minutes = Math.floor((time % (60 * 60 * 1000)) / (60 * 1000))
-    const newTime = isHour ? (number * 60 * 60 * 1000) + (minutes * 60 * 1000) : (hours * 60 * 60 * 1000) + (number * 60 * 1000)
-
-    const isFalse = onFalseCondition ? onFalseCondition(id, newTime) : false // if false, not update
-
-    if (!isFalse) setTime(newTime)
-
-    if (onChange) onChange({ id: id, value: newTime, isFalse: isFalse })
-
-  }, [time, id, onChange, onFalseCondition])
-
-  const hoursTime = useMemo(() => Math.floor(time / (60 * 60 * 1000)), [time])
-
-  const minutesTime = useMemo(() => Math.floor((time % (60 * 60 * 1000)) / (60 * 1000)), [time])
-
-  const [displayTime, setDisplayTime] = useState('00:00')
-
-  const secondOptions = useMemo(() => {
-    const [_hours, minutes] = displayTime.split(':').map(Number)
-    return [...new Set([minutes, 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55])]
-  }, [displayTime])
-
-  useEffect(() => {
-    setDisplayTime(`${String(hoursTime).padStart(2, '0')}:${String(minutesTime).padStart(2, '0')}`)
-  }, [hoursTime, minutesTime])
-
-  return (
-    <Dropdown
-      className={isFull ? 'w-full' : 'w-auto'}
-      // @ts-ignore
-      css={style}
-      menuToggles={false}
-      animate={false}
-      menuChildren={
-        <div className="time-picker-container">
-          <div className="time-picker-selectors">
-            <select
-              className="time-select"
-              value={hoursTime}
-              onChange={(e) => handleTimeChange(true, e)}
-            >
-              {[...Array(24).keys()].map(i => (
-                <option key={i} value={i}>{String(i).padStart(2, '0')}</option>
-              ))}
-            </select>
-            <span className="time-separator">:</span>
-            <select
-              className="time-select"
-              value={minutesTime}
-              onChange={(e) => handleTimeChange(false, e)}
-            >
-              {secondOptions.map(option => (
-                <option key={option} value={option}>{String(option).padStart(2, '0')}</option>
-              ))}
-            </select>
-          </div>
-        </div>
-      }
-    >
-      <div className="grid grid-cols-1">
-        {Icon}
-        <input
-          {...rest}
-          key={id}
-          id={id}
-          autoComplete="off"
-          className={`hide-time-icon font-medium text-sm placeholder-font-medium placeholder-sm ${className}`}
-          value={displayTime}
-          onChange={(e) => {
-            const newStr = e.target.value
-            const isValid = /^[0-9]{2}:[0-9]{2}$/.test(newStr)
-            if (!isValid) {
-              setDisplayTime(newStr)
-              return
-            }
-            const [hours, minutes] = newStr.split(':').map(Number)
-            const newNum = (hours * 60 + minutes) * 60 * 1000
-
-            setTime(newNum)
-            setDisplayTime(newStr)
-          }}
-          placeholder={placeholder}
-          required={required}
-        />
-      </div>
-    </Dropdown>
-  )
-}
-
-export default FieldTime
-
-const style = css`
-  .time-picker-container {
-    padding: 15px;
-    font-size: 14px;
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  }
-
-  .time-picker-selectors {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 5px;
-  }
-
-  .time-separator {
-    font-size: 18px;
-    font-weight: bold;
-  }
-
-  .time-select {
-    width: 60px;
-    padding: 8px;
-    font-size: 14px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
-
-  .time-confirm-btn {
-    padding: 8px 16px;
-    font-size: 16px;
-    background-color: ${theme`colors.primary`};
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-top: 10px;
-  }
-
-  .time-confirm-btn:hover {
-    background-color: ${theme`colors.primary`};
-  }
-`

package/components/partials/icons/clock.tsx

@@ -1,18 +0,0 @@
-import { theme } from 'twin.macro'
-
-const ClockIcon = () => {
-    return (
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <g opacity="0.5" clipPath="url(#clip0_12681_10783)">
-                <path d="M8.00016 3.99998V7.99998L10.6668 9.33331M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z" stroke={theme`colors.input`} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-            </g>
-            <defs>
-                <clipPath id="clip0_12681_10783">
-                    <rect width="16" height="16" fill="white" />
-                </clipPath>
-            </defs>
-        </svg>
-    )
-}
-
-export default ClockIcon