@loadsmart/loadsmart-ui 7.6.0 → 7.7.0-beta.1

package/src/components/DatePicker/useDatePicker.ts

@@ -1,201 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-import { useDropdown } from 'components/Dropdown'
-import { TODAY, DateFormatHelper, DateHelper, useCalendar } from 'components/Calendar'
-
-import { getSelection } from '../Calendar/Calendar.helpers'
-
-import type { CalendarDate } from 'components/Calendar'
-import type { DatePickerProps } from './DatePicker.types'
-
-export const formatter = DateFormatHelper('MM/DD/YYYY')
-
-export function formatDate(date?: number | string | null): string {
-  if (!date || Number.isNaN(new Date(date).getTime())) {
-    return ''
-  }
-
-  return formatter.format(DateHelper(date))
-}
-
-export function getInitialCalendarSetup(
-  selection: number | string | null | [number | string | null, number | string | null]
-) {
-  const [selectionStart] = getSelection(selection)
-
-  if (!selectionStart) {
-    return {
-      month: TODAY.getMonth(),
-      year: TODAY.getYear(),
-    }
-  }
-
-  const startDate = DateHelper(selectionStart)
-
-  return {
-    month: startDate.getMonth(),
-    year: startDate.getYear(),
-  }
-}
-
-export function setInputValue(input: HTMLInputElement | null, value: string) {
-  if (input != null) {
-    input.value = value
-  }
-}
-
-export function getInputValue(input?: HTMLInputElement | null) {
-  if (input != null) {
-    return input.value
-  }
-
-  return null
-}
-
-function useDatePicker(props: DatePickerProps) {
-  const { constraints, disabled, id, name, onChange, value, ...rest } = props
-
-  const dropdown = useDropdown({ disabled })
-  const calendar = useCalendar({
-    mode: 'single',
-    constraints,
-    onSelect: handleDateSelect,
-  })
-
-  const inputRef = useRef<HTMLInputElement>()
-
-  function handleDateSelect(selection: [string | null, string | null]) {
-    if (!inputRef.current) {
-      return
-    }
-
-    const [formattedDate] = getSelection(selection).map(formatDate)
-
-    /**
-     * This check ensures we will keep the valid date the user typed as-is and, since we're using
-     * an uncontrolled input, ensures that the formatting that happens in `getFormattedSelection`
-     * will not interfere with cursor position when we set the input value.
-     * Bottom line is: if the input already contains the select date, no change is necessary.
-     */
-    if (formattedDate != formatDate(getInputValue(inputRef.current))) {
-      setInputValue(inputRef.current, formattedDate)
-    }
-
-    onChange?.({ target: { id, name, value: selection[0] } })
-  }
-
-  function handleDateInputChange(date: CalendarDate) {
-    if (date != null) {
-      const timestamp = date.getTime()
-
-      calendar.select([timestamp, timestamp])
-    } else {
-      calendar.clear()
-    }
-  }
-
-  function handleDateInputClick() {
-    if (!dropdown.expanded) {
-      calendar.set(getInitialCalendarSetup(calendar.selected))
-      dropdown.toggle()
-    }
-  }
-
-  function handleDayClick(timestamp: number) {
-    calendar.select([timestamp, timestamp])
-    dropdown.collapse()
-  }
-
-  function handleClearClick() {
-    calendar.clear()
-    inputRef.current?.focus()
-  }
-
-  function getDropdownProps() {
-    return {
-      disabled,
-      toggle: dropdown.toggle,
-      expanded: dropdown.expanded,
-      onBlur() {
-        if (!inputRef.current) {
-          return
-        }
-
-        const [currSelectedDate] = getSelection(calendar.selected).map(formatDate)
-        const currInputValue = getInputValue(inputRef.current)
-
-        if (currInputValue == currSelectedDate) {
-          return
-        }
-
-        if (!currInputValue) {
-          calendar.clear()
-        } else {
-          setInputValue(inputRef.current, currSelectedDate)
-        }
-      },
-    }
-  }
-
-  function getCalendarProps() {
-    return {
-      ...rest.getCalendarProps?.(),
-      calendar,
-      onDayClick: handleDayClick,
-    }
-  }
-
-  function getInputProps() {
-    return {
-      ...rest.getInputProps?.(),
-      id,
-      name,
-      disabled,
-      onChange: handleDateInputChange,
-      onClick: handleDateInputClick,
-      ref(node: HTMLInputElement | null) {
-        if (node != null) {
-          inputRef.current = node
-        }
-      },
-    }
-  }
-
-  function getClearProps() {
-    return {
-      onClick: handleClearClick,
-    }
-  }
-
-  useEffect(
-    function onValuePropChange() {
-      if (!inputRef.current) {
-        return
-      }
-
-      const [newSelection] = getSelection(value)
-      const [currSelection] = calendar.selected
-
-      if (newSelection != currSelection) {
-        setInputValue(inputRef.current, formatDate(newSelection))
-
-        calendar.select([newSelection, newSelection])
-        calendar.set(getInitialCalendarSetup([newSelection, newSelection]))
-      }
-    },
-    // we just intend to update the selection when the prop changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [value]
-  )
-
-  return {
-    value: getSelection(calendar.selected).map(formatDate),
-
-    getDropdownProps,
-    getInputProps,
-    getClearProps,
-    getCalendarProps,
-  }
-}
-
-export default useDatePicker

package/src/components/DatePicker/useDateRangePicker.ts

@@ -1,224 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-import { formatDate, getInitialCalendarSetup, getInputValue, setInputValue } from './useDatePicker'
-import { getSelection } from '../Calendar/Calendar.helpers'
-import { useCalendar } from 'components/Calendar'
-import { useDropdown } from 'components/Dropdown'
-
-import type { CalendarDate } from 'components/Calendar'
-import type { DateRangePickerProps } from './DatePicker.types'
-
-const AT_RANGE_START = 0
-const AT_RANGE_END = 1
-
-function useDateRangePicker(props: DateRangePickerProps) {
-  const { constraints, disabled, id, name, onChange, value, ...rest } = props
-
-  const dropdown = useDropdown({ disabled })
-  const calendar = useCalendar({
-    mode: 'range',
-    constraints,
-    onSelect: handleDateSelect,
-  })
-
-  const inputsRef = useRef<[HTMLInputElement | null, HTMLInputElement | null]>([null, null])
-  const currentlyPickingRef = useRef<'range-start' | 'range-end' | 'none'>('none')
-
-  function handleDateSelect(selected: [string | null, string | null]) {
-    ;[AT_RANGE_START, AT_RANGE_END].forEach((index) => {
-      const input = inputsRef.current[index]
-      const formattedDate = formatDate(selected[index])
-
-      /**
-       * This check ensures we will keep the valid date the user typed as-is and, since we're using
-       * an uncontrolled input, ensures that the formatting that happens in `formatDate`
-       * will not interfere with cursor position when we set the input value.
-       * Bottom line is: if the input already contains the select date, no change is necessary.
-       */
-      if (formattedDate != formatDate(getInputValue(input))) {
-        setInputValue(input, formattedDate)
-      }
-    })
-
-    onChange?.({ target: { id, name, value: selected } })
-  }
-
-  function getDateInputChangeHandler(index: number) {
-    return function handleDateInputChange(date: CalendarDate) {
-      if (date != null) {
-        const timestamp = date.getTime()
-
-        const newSelected: typeof calendar.selected = [...calendar.selected]
-        newSelected[index] = timestamp
-
-        calendar.select(newSelected)
-      } else {
-        calendar.clear()
-      }
-    }
-  }
-
-  function handleDateInputClick() {
-    if (!dropdown.expanded) {
-      calendar.set(getInitialCalendarSetup(calendar.selected))
-      dropdown.toggle()
-    }
-  }
-
-  function handleDayClick(timestamp: number) {
-    const [rangeStart, rangeEnd] = calendar.selected
-
-    if (currentlyPickingRef.current == 'range-start') {
-      if (rangeEnd != null) {
-        calendar.select([timestamp, rangeEnd].sort() as [number, number])
-        inputsRef.current[AT_RANGE_START]?.focus()
-      } else {
-        calendar.select([timestamp, rangeEnd])
-        inputsRef.current[AT_RANGE_END]?.focus()
-      }
-    } else if (currentlyPickingRef.current == 'range-end') {
-      if (rangeStart != null) {
-        calendar.select([rangeStart, timestamp].sort() as [number, number])
-      } else {
-        calendar.select([rangeStart, timestamp])
-      }
-
-      inputsRef.current[AT_RANGE_END]?.focus()
-    }
-  }
-
-  function handleClearClick() {
-    calendar.clear()
-    inputsRef.current[AT_RANGE_START]?.focus()
-  }
-
-  function handleDropdownBlur() {
-    currentlyPickingRef.current = 'none'
-
-    if ([AT_RANGE_START, AT_RANGE_END].some((index) => !inputsRef.current[index])) {
-      return
-    }
-
-    if ([AT_RANGE_START, AT_RANGE_END].every((index) => !getInputValue(inputsRef.current[index]))) {
-      calendar.clear()
-    } else {
-      const selected = getSelection(calendar.selected).map(formatDate)
-
-      ;[AT_RANGE_START, AT_RANGE_END].forEach((index) => {
-        setInputValue(inputsRef.current[index], selected[index])
-      })
-    }
-  }
-
-  function handleDoneClick() {
-    handleDropdownBlur()
-    dropdown.collapse()
-  }
-
-  function getDropdownProps() {
-    return {
-      disabled,
-      toggle: dropdown.toggle,
-      expanded: dropdown.expanded,
-      onBlur: handleDropdownBlur,
-    }
-  }
-
-  function getCalendarProps() {
-    return {
-      ...rest.getCalendarProps?.(),
-      calendar,
-      onDayClick: handleDayClick,
-    }
-  }
-
-  function getRangeStartInputProps() {
-    return {
-      ...rest.getRangeStartInputProps?.(),
-      id: id != null ? `${id}-start` : id,
-      name: name != null ? `${name}-start` : name,
-      disabled,
-      onChange: getDateInputChangeHandler(AT_RANGE_START),
-      onClick: handleDateInputClick,
-      onFocus() {
-        currentlyPickingRef.current = 'range-start'
-      },
-      ref(node: HTMLInputElement | null) {
-        if (node != null) {
-          inputsRef.current[AT_RANGE_START] = node
-        }
-      },
-    }
-  }
-
-  function getRangeEndInputProps() {
-    return {
-      ...rest.getRangeEndInputProps?.(),
-      id: id != null ? `${id}-end` : id,
-      name: name != null ? `${name}-end` : name,
-      disabled,
-      onChange: getDateInputChangeHandler(AT_RANGE_END),
-      onClick: handleDateInputClick,
-      onFocus() {
-        currentlyPickingRef.current = 'range-end'
-      },
-      ref(node: HTMLInputElement | null) {
-        if (node != null) {
-          inputsRef.current[AT_RANGE_END] = node
-        }
-      },
-    }
-  }
-
-  function getClearProps() {
-    return {
-      onClick: handleClearClick,
-    }
-  }
-
-  function getDoneProps() {
-    return {
-      onClick: handleDoneClick,
-    }
-  }
-
-  useEffect(
-    function onValuePropChange() {
-      if ([AT_RANGE_START, AT_RANGE_END].some((index) => !inputsRef.current[index])) {
-        return
-      }
-
-      const newSelected = getSelection(value)
-      const currSelected = calendar.selected
-
-      const hasChanged = [AT_RANGE_START, AT_RANGE_END].some((index) => {
-        return newSelected[index] != currSelected[index]
-      })
-
-      if (hasChanged) {
-        ;[AT_RANGE_START, AT_RANGE_END].forEach((index) => {
-          setInputValue(inputsRef.current[index], formatDate(newSelected[index]))
-        })
-
-        calendar.select(newSelected)
-        calendar.set(getInitialCalendarSetup(newSelected))
-      }
-    },
-    // we just intend to update the selection when the prop changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [value]
-  )
-
-  return {
-    value: getSelection(calendar.selected).map(formatDate),
-
-    getDropdownProps,
-    getRangeStartInputProps,
-    getRangeEndInputProps,
-    getClearProps,
-    getCalendarProps,
-    getDoneProps,
-  }
-}
-
-export default useDateRangePicker

package/src/components/Dialog/Dialog.stories.tsx

@@ -1,227 +0,0 @@
-import React, { ReactNode } from 'react'
-import type { Meta } from '@storybook/react'
-import Dialog from './Dialog'
-import useDialog from './useDialog'
-import type { DialogProps } from './Dialog'
-import { Button } from 'components/Button'
-import { Group } from 'components/Layout'
-
-interface ButtonWrapperProps {
-  onClick?: () => void
-  children?: ReactNode
-}
-
-const ButtonContainer = ({ onClick, children }: ButtonWrapperProps): JSX.Element => {
-  return (
-    <Group justify="center">
-      <Button onClick={onClick}>OPEN</Button>
-      {children}
-    </Group>
-  )
-}
-
-export default {
-  title: 'Components/Dialog',
-  component: Dialog,
-  argTypes: {
-    scale: {
-      control: {
-        type: 'select',
-        options: ['large', 'default', 'small'],
-      },
-    },
-    open: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    className: {
-      table: {
-        disable: true,
-      },
-    },
-    id: {
-      table: {
-        disable: true,
-      },
-    },
-    theme: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-} as Meta
-
-export function WithoutHeader(args: DialogProps): JSX.Element {
-  const { open, hide, show } = useDialog({ open: args.open })
-
-  return (
-    <ButtonContainer onClick={show}>
-      <Dialog {...args} open={open} onOverlayClick={hide}>
-        Dialog
-      </Dialog>
-    </ButtonContainer>
-  )
-}
-
-WithoutHeader.args = {
-  scale: 'default',
-  open: false,
-}
-
-export function WithHeader(args: DialogProps): JSX.Element {
-  const { open, hide, show } = useDialog({ open: args.open })
-
-  return (
-    <ButtonContainer onClick={show}>
-      <Dialog {...args} open={open} onOverlayClick={hide}>
-        <Dialog.Header>Dialog title</Dialog.Header>
-      </Dialog>
-    </ButtonContainer>
-  )
-}
-
-WithHeader.args = {
-  scale: 'default',
-  open: false,
-}
-
-export function WithHeaderAndBody(args: DialogProps): JSX.Element {
-  const { open, hide, show } = useDialog({ open: args.open })
-
-  return (
-    <ButtonContainer onClick={show}>
-      <Dialog {...args} open={open} onOverlayClick={hide}>
-        <Dialog.Header>Dialog title</Dialog.Header>
-        <Dialog.Body>Your message can grow on the vertical, but should keep the width </Dialog.Body>
-      </Dialog>
-    </ButtonContainer>
-  )
-}
-
-WithHeaderAndBody.args = {
-  scale: 'default',
-  open: false,
-}
-
-export function WithCloseButton(args: DialogProps): JSX.Element {
-  const { open, hide, show } = useDialog({ open: args.open })
-
-  return (
-    <ButtonContainer onClick={show}>
-      <Dialog {...args} open={open} onOverlayClick={hide}>
-        <Dialog.Close onClick={hide} />
-        <Dialog.Header>Dialog title</Dialog.Header>
-        <Dialog.Body>Your message can grow on the vertical, but should keep the width </Dialog.Body>
-
-        <Dialog.ActionConfirm onConfirm={hide} />
-        <Dialog.ActionCancel onCancel={hide} />
-      </Dialog>
-    </ButtonContainer>
-  )
-}
-
-WithCloseButton.args = {
-  scale: 'default',
-  open: false,
-}
-
-export function WithActionConfirm(args: DialogProps): JSX.Element {
-  const { open, hide, show } = useDialog({ open: args.open })
-
-  return (
-    <ButtonContainer onClick={show}>
-      <Dialog {...args} open={open} onOverlayClick={hide}>
-        <Dialog.Header>Dialog title</Dialog.Header>
-        <Dialog.Body>Your message can grow on the vertical, but should keep the width </Dialog.Body>
-        <Dialog.ActionConfirm onConfirm={hide} />
-      </Dialog>
-    </ButtonContainer>
-  )
-}
-
-WithActionConfirm.args = {
-  scale: 'default',
-  open: false,
-}
-
-export function WithCustomActionConfirmLabel(args: DialogProps): JSX.Element {
-  const { open, hide, show } = useDialog({ open: args.open })
-
-  return (
-    <ButtonContainer onClick={show}>
-      <Dialog {...args} open={open} onOverlayClick={hide}>
-        <Dialog.Header>Dialog title</Dialog.Header>
-        <Dialog.Body>Your message can grow on the vertical, but should keep the width </Dialog.Body>
-        <Dialog.ActionConfirm onConfirm={hide}>Let&apos;S do it!</Dialog.ActionConfirm>
-      </Dialog>
-    </ButtonContainer>
-  )
-}
-
-WithCustomActionConfirmLabel.args = {
-  scale: 'default',
-  open: false,
-}
-
-export function WithCustomActionCancelLabel(args: DialogProps): JSX.Element {
-  const { open, hide, show } = useDialog({ open: args.open })
-
-  return (
-    <ButtonContainer onClick={show}>
-      <Dialog {...args} open={open} onOverlayClick={hide}>
-        <Dialog.Header>Dialog title</Dialog.Header>
-        <Dialog.Body>Your message can grow on the vertical, but should keep the width </Dialog.Body>
-        <Dialog.ActionCancel onCancel={hide}>No, but thank you</Dialog.ActionCancel>
-      </Dialog>
-    </ButtonContainer>
-  )
-}
-
-WithCustomActionCancelLabel.args = {
-  scale: 'default',
-  open: false,
-}
-
-export function WithActionConfirmAndCancel(args: DialogProps): JSX.Element {
-  const { open, hide, show } = useDialog({ open: args.open })
-
-  return (
-    <ButtonContainer onClick={show}>
-      <Dialog {...args} open={open} onOverlayClick={hide}>
-        <Dialog.Header>Dialog title</Dialog.Header>
-        <Dialog.Body>Your message can grow on the vertical, but should keep the width</Dialog.Body>
-        <Dialog.ActionConfirm onConfirm={hide} />
-        <Dialog.ActionCancel onCancel={hide} />
-      </Dialog>
-    </ButtonContainer>
-  )
-}
-
-WithActionConfirmAndCancel.args = {
-  scale: 'default',
-  open: false,
-}
-
-export function WithInlineActions(args: DialogProps): JSX.Element {
-  const { open, hide, show } = useDialog({ open: args.open })
-
-  return (
-    <ButtonContainer onClick={show}>
-      <Dialog {...args} open={open} onOverlayClick={hide}>
-        <Dialog.Header>Dialog title</Dialog.Header>
-        <Dialog.Body>Your message can grow on the vertical, but should keep the width</Dialog.Body>
-        <Dialog.Actions direction="horizontal" scale={args.scale}>
-          <Dialog.ActionConfirm onConfirm={hide} />
-          <Dialog.ActionCancel onCancel={hide} />
-        </Dialog.Actions>
-      </Dialog>
-    </ButtonContainer>
-  )
-}
-
-WithInlineActions.args = {
-  scale: 'small',
-  open: false,
-}