nitro-web 0.0.86 → 0.0.87

package/components/partials/element/calendar.tsx

@@ -1,125 +0,0 @@
-import { DayPicker, getDefaultClassNames } from 'react-day-picker'
-import { isValid } from 'date-fns'
-import 'react-day-picker/style.css'
-import { IsFirstRender } from 'nitro-web'
-
-export const dayButtonClassName = 'size-[33px] text-sm'
-
-type Mode = 'single'|'multiple'|'range'
-type ModeSelection<T extends Mode> = (
-  T extends 'single' ? Date | undefined
-  : T extends 'multiple' ? Date[]
-  : { from?: Date; to?: Date }
-)
-
-export type CalendarProps = {
-  mode?: Mode
-  onChange?: (mode: Mode, 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
-  className?: string
-  preserveTime?: boolean // just for single mode
-}
-
-export function Calendar({ mode='single', onChange, value, numberOfMonths, month: monthProp, className, preserveTime }: CalendarProps) {
-  const isFirstRender = IsFirstRender()
-  const isRange = mode == 'range'
-
-  // Convert the value to an array of valid* dates
-  const dates = useMemo(() => {
-    const _dates = Array.isArray(value) ? value : [value]
-    return _dates.map(date => isValid(date) ? new Date(date as number) : undefined) ////change to null
-  }, [value])
-
-  // Hold the month in state to control the calendar when the input changes
-  const [month, setMonth] = useState(dates[0])
-
-  // Update the month if its changed from an outside source
-  useEffect(() => {
-    if (!isFirstRender && monthProp) setMonth(new Date(monthProp))
-  }, [monthProp])
-
-  function handleDayPickerSelect<T extends Mode>(newDate: ModeSelection<T>) {
-    switch (mode as T) {
-      case 'single': {
-        const date = newDate as ModeSelection<'single'>
-        preserveTimeFn(date)
-        onChange?.(mode, date?.getTime() ?? null)
-        break
-      }
-      case 'range': {
-        const { from, to } = (newDate ?? {}) as ModeSelection<'range'>
-        onChange?.(mode, 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()))
-        break
-      }
-    }
-  }
-
-  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 = {
-    month: month,
-    onMonthChange: setMonth,
-    onSelect: handleDayPickerSelect,
-    numberOfMonths: numberOfMonths || (isRange ? 2 : 1),
-    modifiersClassNames: {
-      // Add a class without _, TW seems to replace this with a space in the css definition, e.g. &:not(.range middle)
-      range_middle: `${d.range_middle} rangemiddle`,
-    },
-    classNames: {
-      root: `${d.root} flex nitro-calendar`,
-      months: `${d.months} flex-nowrap`,
-      month_caption: `${d.month_caption} text-2xs pl-2`,
-      caption_label: `${d.caption_label} z-auto`,
-      button_previous: `${d.button_previous} size-8`,// [&:hover>svg]:fill-input-border-focus`,
-      button_next: `${d.button_next} size-8`,// [&:hover>svg]:fill-input-border-focus`,
-      chevron: `${d.chevron} fill-black size-[18px]`,
-
-      // Days
-      weekday: `${d.weekday} text-[11px] font-bold uppercase`,
-      day: `${d.day} size-[33px]`,
-      day_button: `${d.day_button} ${dayButtonClassName}`,
-
-      // States
-      focused: `${d.focused} [&>button]:bg-gray-200 [&>button]:border-gray-200`,
-      range_start: `${d.range_start} [&>button]:!bg-input-border-focus [&>button]:!border-input-border-focus`,
-      range_end: `${d.range_end} [&>button]:!bg-input-border-focus [&>button]:!border-input-border-focus`,
-      selected: `${d.selected} font-normal `
-        + '[&:not(.rangemiddle)>button]:!text-white '
-        + '[&:not(.rangemiddle)>button]:!bg-input-border-focus '
-        + '[&:not(.rangemiddle)>button]:!border-input-border-focus ',
-    },
-  }
-
-  return (
-    <div>
-      {
-        mode === 'single' ? (
-          <DayPicker mode="single" selected={dates[0]} {...common} className={className} />
-        ) : mode === 'range' ? (
-          <DayPicker mode="range" selected={{ from: dates[0], to: dates[1] }} {...common} className={className} />
-        ) : (
-          <DayPicker mode="multiple" selected={dates.filter((d) => !!d)} {...common} className={className} />
-        )
-      }
-    </div>
-  )
-}

package/components/partials/element/dropdown.tsx

@@ -1,248 +0,0 @@
-import { css } from 'twin.macro'
-import { forwardRef, cloneElement } from 'react'
-import { getSelectStyle, twMerge } from 'nitro-web'
-import { CheckCircleIcon } from '@heroicons/react/24/solid'
-
-type DropdownProps = {
-  allowOverflow?: boolean
-  animate?: boolean
-  children?: React.ReactNode
-  className?: string
-  css?: string
-  /** The direction of the menu **/
-  dir?: 'bottom-left'|'bottom-right'|'top-left'|'top-right'
-  options?: { label: string|React.ReactNode, onClick?: Function, isSelected?: boolean, icon?: React.ReactNode, className?: string }[]
-  /** Whether the dropdown is hoverable **/
-  isHoverable?: boolean
-  /** The content to render inside the top of the dropdown **/
-  menuContent?: React.ReactNode
-  menuClassName?: string
-  menuOptionClassName?: string
-  menuIsOpen?: boolean
-  menuToggles?: boolean
-  /** The minimum width of the menu **/
-  minWidth?: number | string
-  toggleCallback?: (isActive: boolean) => void
-}
-
-export const Dropdown = forwardRef(function Dropdown({
-  allowOverflow=false,
-  animate=true,
-  children, 
-  className,
-  dir='bottom-left', 
-  options, 
-  isHoverable,
-  menuClassName,
-  menuOptionClassName,
-  menuContent, 
-  menuIsOpen, 
-  menuToggles=true,
-  minWidth,
-  toggleCallback,
-}: DropdownProps, ref) {
-  // https://letsbuildui.dev/articles/building-a-dropdown-menu-component-with-react-hooks
-  isHoverable = isHoverable && !menuIsOpen
-  const dropdownRef = useRef<HTMLDivElement|null>(null)
-  const [isActive, setIsActive] = useState(!!menuIsOpen)
-  const menuStyle = getSelectStyle({ name: 'menu' })
-  const [direction, setDirection] = useState<null | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'>(null)
-  const [ready, setReady] = useState(false)
-
-  // Expose the setIsActive function to the parent component
-  useImperativeHandle(ref, () => ({ setIsActive }))
-
-  useEffect(() => {
-    const pageClick = (event: MouseEvent | FocusEvent) => {
-      try {
-        // If the active element exists and is clicked outside of the dropdown, toggle the dropdown
-        if (dropdownRef.current !== null && !dropdownRef.current.contains(event.target as Node)) setIsActive(!isActive)
-      } catch (_e) {
-        // Errors throw for contains() when the user clicks off the webpage when open
-        setIsActive(!isActive)
-      }
-    }
-    if (isActive && !menuIsOpen) {
-      // Wait for the next event loop in the case of mousedown'ing the dropdown, while loosing click focus from a checkbox  
-      setTimeout(() => {
-        window.addEventListener('mousedown', pageClick)
-        window.addEventListener('focus', pageClick, true) // true needed to capture focus events
-      }, 0)
-    }
-    return () => {
-      window.removeEventListener('mousedown', pageClick)
-      window.removeEventListener('focus', pageClick, true) // true needed to capture focus events
-    }
-  }, [isActive, dropdownRef])
-
-  useEffect(() => {
-    if (toggleCallback) toggleCallback(isActive)
-  }, [isActive])
-
-  useEffect(() => {
-    setReady(false)
-    if (!isActive || !dropdownRef.current) return
-    
-    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
-  
-    ul.style.maxHeight = 'none'
-    ul.style.visibility = 'hidden'
-    ul.style.opacity = '0'
-    ul.style.pointerEvents = 'none'
-  
-    const dropdownHeight = ul.getBoundingClientRect().height
-  
-    // Revert styles
-    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 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}`
-  
-    setDirection(newDirection as 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right')
-  
-    requestAnimationFrame(() => {
-      setReady(true)
-    })
-  }, [isActive, dir])
-
-  function onMouseDown(e: { key: string, preventDefault: Function }) {
-    if (e.key && e.key != 'Enter') return
-    if (e.key) e.preventDefault() // for button, stops buttons firing twice
-    if (!isHoverable && !menuIsOpen && ((menuToggles || e.key) || !isActive)) setIsActive(!isActive)
-  }
-
-  function onClick(option: { onClick?: Function }, e: React.MouseEvent) {
-    if (option.onClick) option.onClick(e)
-    if (!menuIsOpen) setIsActive(!isActive)
-  }
-
-  return (
-    <div 
-      class={
-        `relative is-${direction || dir}` + // until hovered, show the original direction to prevent scrollbars
-        (isHoverable ? ' is-hoverable' : '') +
-        (isActive ? ' is-active' : '') +
-        (!animate ? ' no-animation' : '') +
-        (allowOverflow ? ' is-allowOverflow' : '') +
-        ' nitro-dropdown' +
-        (className ? ` ${className}` : '')
-      }
-      onClick={(e) => e.stopPropagation()} // required for dropdowns inside row links
-      ref={dropdownRef} 
-      css={style}
-    >
-      {
-        (Array.isArray(children) ? children : [children]).map((el, key) => {
-          const onKeyDown = onMouseDown 
-          if (!el.type) throw new Error('Dropdown component requires a valid child element')
-          return cloneElement(el, { key, onMouseDown, onKeyDown }) // adds onClick
-        })
-      }
-      <ul
-        style={{ minWidth }}
-        class={
-          twMerge(`${menuStyle} ${ready ? 'is-ready' : ''} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName||''}`)}
-      >
-        {menuContent}
-        {
-          options && options.map((option, i) => {
-            const optionStyle = getSelectStyle({ name: 'option', usePrefixes: true, isSelected: option.isSelected })
-            return (
-              <li 
-                key={i} 
-                className={twMerge(`${optionStyle} ${option.className} ${menuOptionClassName}`)}
-                onClick={(e: React.MouseEvent) => onClick(option, e)}
-              >
-                <span class="flex-auto">{option.label}</span>
-                { !!option.icon && option.icon }
-                { option.isSelected && <CheckCircleIcon className="size-[22px] text-primary -my-1 -mx-0.5" /> }
-              </li>
-            )
-          })
-        }
-      </ul>
-    </div>
-  )
-})
-
-const style = css`
-  &>ul {
-    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
-    pointer-events: none;
-  }
-  &.is-bottom-right,
-  &.is-top-right {
-    ul {
-      left: auto;
-      right: 0;
-    }
-  }
-  &.is-bottom-left,
-  &.is-bottom-right {
-    &>ul {
-      top: 100%;
-      transform: translateY(6px);
-    }
-  }
-  &.is-top-left,
-  &.is-top-right {
-    &>ul {
-      bottom: 100%;
-      transform: translateY(-10px);
-    }
-  }
-  // active submenu
-  &.is-hoverable:hover,
-  &:focus,
-  &.is-active,
-  &>ul>li:hover,
-  &>ul>li:focus,
-  &>ul>li.is-active {
-    &>ul.is-ready {
-      opacity: 1;
-      visibility: visible;
-      transition: transform 0.15s ease, opacity 0.15s ease;
-      max-width: 1000px;
-      max-height: 1000px;
-      pointer-events: auto;
-    }
-    &.is-allowOverflow > ul {
-      overflow: visible;
-    }
-    &.is-bottom-left > ul,
-    &.is-bottom-right > ul {
-      transform: translateY(3px) !important;
-    }
-    &.is-top-left > ul,
-    &.is-top-right > ul {
-      transform: translateY(-7px) !important;
-    }
-  }
-  // no animation
-  &.no-animation {
-    &>ul {
-      transition: none;
-    }
-  }
-`
-
-

package/components/partials/element/filters.tsx

@@ -1,194 +0,0 @@
-import { forwardRef, Dispatch, SetStateAction, useRef, useEffect, useImperativeHandle } from 'react'
-import { Button, Dropdown, Field, Select, type FieldProps, type SelectProps } from 'nitro-web'
-import { camelCaseToTitle, debounce, omit, queryString, queryObject, twMerge } from 'nitro-web/util'
-import { ListFilterIcon } from 'lucide-react'
-
-type CommonProps = {
-  label?: string
-  rowClassName?: string
-}
-export type FilterType = (
-  | FieldProps & CommonProps
-  | ({ type: 'select' } & SelectProps & CommonProps)
-)
-
-type FilterState = {
-  [key: string]: string | true
-}
-
-type FiltersProps = {
-  state?: FilterState
-  setState?: Dispatch<SetStateAction<FilterState>>
-  filters?: FilterType[]
-  elements?: {
-    Button?: typeof Button
-    Dropdown?: typeof Dropdown
-    Field?: typeof Field
-    Select?: typeof Select
-    FilterIcon?: typeof ListFilterIcon
-  }
-  buttonProps?: Partial<React.ComponentProps<typeof Button>>
-  buttonText?: string
-  buttonCounterClassName?: string
-  dropdownProps?: Partial<React.ComponentProps<typeof Dropdown>>
-  dropdownFiltersClassName?: string
-}
-
-export type FiltersHandleType = {
-  submit: (includePagination?: boolean) => void
-}
-
-const debounceTime = 250
-
-export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({ 
-  filters, 
-  setState: setState2,
-  state: state2,
-  buttonProps,
-  buttonCounterClassName,
-  buttonText, 
-  dropdownProps, 
-  dropdownFiltersClassName,
-  elements,
-}, ref) => {
-  const location = useLocation()
-  const navigate = useNavigate()
-  const [lastUpdated, setLastUpdated] = useState(0)
-  const [debouncedSubmit] = useState(() => debounce(submit, debounceTime))
-  const [state3, setState3] = useState(() => ({ ...queryObject(location.search) }))
-  const [state, setState] = [state2 || state3, setState2 || setState3]
-  const stateRef = useRef(state)
-  const count = useMemo(() => Object.keys(state).filter((k) => state[k] && filters?.some((f) => f.name === k)).length, [state, filters])
-
-  const Elements = {
-    Button: elements?.Button || Button,
-    Dropdown: elements?.Dropdown || Dropdown,
-    Field: elements?.Field || Field,
-    Select: elements?.Select || Select,
-    FilterIcon: elements?.FilterIcon || ListFilterIcon,
-  }
-
-  useImperativeHandle(ref, () => ({
-    submit: debouncedSubmit,
-  }))
-  
-  useEffect(() => {
-    return () => debouncedSubmit.cancel()
-  }, [])
-  
-  useEffect(() => {
-    stateRef.current = state
-  }, [state])
-
-  useEffect(() => {
-    // Only update the state if the filters haven't been input changed in the last 500ms
-    if (Date.now() - lastUpdated > (debounceTime + 250)) {
-      setState(() => ({
-        ...queryObject(location.search),
-      }))
-    }
-  }, [location.search])
-
-  function reset(e: React.MouseEvent<HTMLAnchorElement>, filter: FilterType) {
-    e.preventDefault()
-    setState((s) => omit(s, [filter.name]) as FilterState)
-    onAfterChange()
-  }
-
-  function resetAll(e: React.MouseEvent<HTMLButtonElement>) {
-    e.preventDefault()
-    setState((s) => omit(s, filters?.map((f) => f.name) || []) as FilterState)
-    onAfterChange()
-  }
-
-  async function onInputChange(e: {target: {name: string, value: unknown}}) {
-    // basic name and value (keeping deep paths intact e.g. 'jobCache.location': '10')
-    setState((s) => ({ ...s, [e.target.name]: e.target.value as string })) 
-    onAfterChange()
-  }
-
-  function onAfterChange() {
-    setLastUpdated(Date.now())
-    debouncedSubmit()
-  }
-
-  // Update the URL by replacing the current entry in the history stack
-  function submit(includePagination?: boolean) {
-    const queryStr = queryString(omit(stateRef.current, includePagination ? [] : ['page']))
-    navigate(location.pathname + queryStr, { replace: true })
-  }
-
-  return (
-    <Elements.Dropdown 
-      // menuIsOpen={true}
-      dir="bottom-right"
-      allowOverflow={true}
-      {...dropdownProps}
-      menuClassName={twMerge(`min-w-[330px] ${dropdownProps?.menuClassName || ''}`)}
-      menuContent={
-        <div>
-          <div class="flex justify-between items-center border-b p-4 py-3.5">
-            <div class="text-lg font-semibold">Filters</div>
-            <Button color="clear" size="sm" onClick={resetAll}>Reset All</Button>
-          </div>
-          {/* <div class="w-[1330px] bg-red-500 absolute">
-            This div shouldnt produce a page scrollbar when the dropdown is closed.
-            But should be visibile if allowedOverflow is true.
-          </div> */}
-          <div class={twMerge(`flex flex-wrap gap-4 px-4 py-4 pb-6 ${dropdownFiltersClassName || ''}`)}>
-            {
-              filters?.map(({label, rowClassName, ...filter}, i) => (
-                <div key={i} class={twMerge(`w-full ${rowClassName||''}`)}>
-                  <div class="flex justify-between"> 
-                    <label for={filter.id || filter.name}>{label || camelCaseToTitle(filter.name)}</label>
-                    <a href="#" class="label font-normal text-secondary underline" onClick={(e) => reset(e, filter)}>Reset</a>
-                  </div>
-                  {
-                    filter.type === 'select' && 
-                    <Elements.Select
-                      {...filter}
-                      class="!mb-0"
-                      value={state[filter.name] || ''}
-                      onChange={onInputChange}
-                      type={undefined}
-                    />
-                  }
-                  {
-                    filter.type !== 'select' && 
-                    <Elements.Field 
-                      {...filter}
-                      class="!mb-0"
-                      value={(state[filter.name] as string) || ''}
-                      onChange={onInputChange}
-                    />
-                  }
-                </div>
-              ))
-            }
-          </div>
-        </div>
-      }
-    >
-      <Elements.Button 
-        color="white" 
-        IconLeft={<Elements.FilterIcon size={16} />} 
-        {...buttonProps}
-        className={twMerge(`flex gap-x-2.5 ${buttonProps?.className || ''}`)}
-      >
-        <span class="flex items-center gap-x-2.5">
-          { buttonText || 'Filter By' }
-          {
-            !!count && 
-            <span 
-              class={twMerge(`inline-flex items-center justify-center rounded-full text-white bg-primary box-content w-[1em] h-[1em] p-[2px] ${buttonCounterClassName || ''}`)}
-            >
-              <span class="text-xs">{count}</span>
-            </span>
-          }
-        </span>
-      </Elements.Button>
-    </Elements.Dropdown>
-  )
-})
-
-Filters.displayName = 'Filters'

package/components/partials/element/github-link.tsx

@@ -1,16 +0,0 @@
-import GithubIcon from 'nitro-web/client/imgs/github.svg'
-
-export function GithubLink({ filename }: { filename: string }) {
-  const base = 'https://github.com/boycce/nitro-web/blob/master/packages/'
-  // Filenames are relative to the webpack start directory
-  // 1. Remove ../ from filename (i.e. for _example build)
-  // 2. Remove node_modules/nitro-web/ from filename (i.e. for packages using nitro-web)
-  const link = base + filename.replace(/^(\.\.\/|.*node_modules\/nitro-web\/)/, '')
-  
-  return (
-    // <a href={link}>Go to Github</a>
-    <a href={link} className="fixed top-0 right-0 nitro-github">
-      <GithubIcon />
-    </a>
-  )
-}

package/components/partials/element/initials.tsx

@@ -1,66 +0,0 @@
-import { css } from 'twin.macro'
-
-type InitialsProps = {
-  icon?: { initials: string, hex: string }
-  isBig?: boolean
-  isMedium?: boolean
-  isSmall?: boolean
-  isRound?: boolean
-  className?: string
-}
-
-export function Initials({ icon, isBig, isMedium, isSmall, isRound, className }: InitialsProps) {
-  return (
-    <span 
-      css={style} 
-      class={
-        'initials-square' +
-        (isBig ? ' is-big' : '') + 
-        (isMedium ? ' is-medium' : '') + 
-        (isSmall ? ' is-small' : '') + 
-        (isRound ? ' is-round' : '') + 
-        (icon ? '' : ' is-empty') + 
-        ' nitro-initials' +
-        (className ? ' ' + className : '')
-      }
-      style={icon ? {backgroundColor: icon?.hex + '15', color: icon?.hex} : {}}
-    >
-      {icon?.initials}
-    </span>
-  )
-}
-
-const style = css`
-  // seen in input.jsx
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 5px;
-  font-weight: 700;
-  font-size: 11px;
-  width: 24px;
-  height: 24px;
-  // new
-  &.is-medium {
-    width: 30px;
-    height: 30px;
-    font-size: 12px;
-  }
-  // seen in select.jsx
-  &.is-small {
-    width: 22px;
-    height: 22px;
-    font-size: 11px;
-  }
-  &.is-big {
-    width: 48px;
-    height: 48px;
-    font-size: 14px;
-  }
-  &.is-round {
-    border-radius: 50%;
-  }
-  &.is-empty {
-    width: 0;
-  }
-`