@northlight/ui 2.41.0 → 2.41.1

package/lib/components/date-picker/types.ts

@@ -0,0 +1,108 @@
+import {
+  InputProps as ChakraInputProps,
+  StackDirection,
+} from '@chakra-ui/react'
+import { DateValue } from '@internationalized/date'
+import {
+  AriaDatePickerProps,
+  AriaDateRangePickerProps,
+} from '@react-aria/datepicker'
+import { RegisterOptions } from 'react-hook-form'
+import { InputFieldProps } from '../../types'
+
+export interface DateRange {
+  startDate: string
+  endDate: string
+}
+
+interface DatePickerSettings {
+  firstDayOfWeek: 'sunday' | 'monday'
+  resetDate: () => void
+  isInvalid?: boolean
+  /** The dateFormat is a string,
+   *  which acts as a template on how to display the date for the user, ex:
+   *  dateFormat="mm.dd.yyyy" */
+  dateFormat?: string
+  isClearable?: boolean
+  variant?: 'outline' | 'filled'
+}
+
+export interface DatePickerProps
+  extends Omit<AriaDatePickerProps<DateValue>, 'firstDayOfWeek'>,
+  DatePickerSettings {}
+
+export interface DateRangePickerProps
+  extends Omit<AriaDateRangePickerProps<DateValue>, 'firstDayOfWeek' | 'onChange' | 'value' | 'minValue' | 'maxValue'>,
+  DatePickerSettings {
+  /**
+   * Function to be called when the user changes the date, both in
+   * the modal and the input field.
+   */
+  onChange?: (date: null | DateRange) => void
+  /**
+   * Function to be called when the user saves the date change.
+   */
+  onSave?: () => void
+  value: DateRange | null
+  minValue?: string | undefined
+  maxValue?: string | undefined
+  fiscalStartMonth?: number
+  fiscalStartDay?: number
+  renderInPortal?: boolean
+  /**
+   * Label for the save button in the date range picker modal
+   */
+  buttonLabel?: string
+  /**
+   * The previously saved date range used for save/cancel functionality.
+   * When provided along with defaultDateRange, enables save and cancel buttons that appear
+   * when the current value differs from the saved value. The component will revert to this
+   * value when the popover is closed without saving or when cancel is clicked.
+   */
+  savedDateRange?: DateRange | null
+  /**
+   * The default date range to set when the input is cleared.
+   * When provided, the clear button will be shown next to the input field when
+   * modal is closed if the current value differs from the default value.
+   * If not provided, the clear button will always be shown when modal is closed.
+   */
+  defaultDateRange?: DateRange | null
+  /**
+   * Custom reset button to be shown next to the input field when modal is closed.
+   * If not provided, the default clear button will be shown.
+   */
+  CustomResetButton?: React.ReactNode
+  /**
+   * Custom label for the clear button in the date range picker modal
+   */
+  clearButtonLabel?: string
+  /**
+   * Function to be called when the user cancels the date change
+   */
+  onCancelChanges?: () => void
+  'data-testid'?: string
+}
+
+export interface DatePickerFieldProps
+  extends Omit<ChakraInputProps, 'onChange'>, InputFieldProps {
+  name: string
+  label: string
+  minValue?: string
+  maxValue?: string
+  validate?: RegisterOptions
+  firstDayOfWeek?: 'sunday' | 'monday'
+  direction?: StackDirection
+  dateFormat?: string
+  onChange?: (date: DateValue) => void
+  onSave?: () => void
+  isClearable?: boolean
+  fiscalStartMonth?: number
+  fiscalStartDay?: number
+}
+
+export interface DateRangePickerFieldProps extends Omit<DatePickerFieldProps, 'onChange'> {
+  onChange?: (date: null | DateRange) => void
+  buttonLabel?: string
+}
+
+export type FormBody = Record<string, DateRange>

package/lib/components/divider/index.ts

@@ -0,0 +1,3 @@
+export {
+  Divider,
+} from '@chakra-ui/react'

package/lib/components/drag-and-drop/drag-and-drop.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { DndContext, DndContextProps } from '@dnd-kit/core'
+
+/**
+ * Context used for all drag and drop components
+ * (Based on dnd-kit)
+ * @see Draggable
+ * @see Droppable
+ * @see {@link https://northlight.dev}
+ * @see {@link https://dndkit.com/}
+ *
+ */
+export const DragAndDrop = (props: DndContextProps) => (
+  <DndContext { ...props } />
+)

package/lib/components/drag-and-drop/drag-handle.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { DragDuo } from '@northlight/icons'
+import { Icon } from '../icon'
+import { DragHandleProps } from './types'
+
+/**
+ * Util component to display drag handle icon
+ * for draggable react components under DragAndDrop context
+ * @see DragAndDrop
+ * @see {@link https://northlight.dev/reference/drag-handle}
+ *
+ * @example (Example)
+ * (?
+ * <DragHandle />
+ * ?)
+ */
+export const DragHandle = ({ icon, isDragging, ...rest }: DragHandleProps) => (
+  <Icon
+    as={ icon || DragDuo }
+    cursor={ isDragging ? 'grabbing' : 'grab' }
+    { ...rest }
+  />
+)

package/lib/components/drag-and-drop/drag-item.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from 'react'
+import { DotsMatrixSolid } from '@northlight/icons'
+import { Tag, TagLabel, TagRightIcon } from '../tag'
+import { Icon } from '../icon'
+import { DragItemProps } from './types'
+
+/**
+ * Default draggable item none other provided in SortableList and MultiSort.
+ *  Renders a tag which can be used under the DragAndDrop context
+ * @see DragAndDrop
+ * @see SortableList
+ * @see MultiSort
+ * @see {@link https://northlight.dev/reference/drag-item}
+ *
+ * @example (Example)
+ * (?
+ * <DragItem itemLabel="Option 1" bgColor="bg.filled" />
+ * ?)
+ *
+ */
+export const DragItem = forwardRef<HTMLSpanElement, DragItemProps>(({
+  size = 'md',
+  isDragging,
+  itemLabel = 'Drag Me',
+  bgColor,
+  ...rest
+}, ref) => (
+  <Tag
+    ref={ ref }
+    cursor={ isDragging ? 'grabbing' : 'grab' }
+    bgColor={ bgColor || (isDragging ? 'blue.200' : undefined) }
+    size={ size }
+    minW="max-content"
+    { ...rest }
+  >
+    <TagLabel>{ itemLabel }</TagLabel>
+    <TagRightIcon>
+      <Icon as={ DotsMatrixSolid } />
+    </TagRightIcon>
+  </Tag>
+)
+)

package/lib/components/drag-and-drop/draggable.tsx

@@ -0,0 +1,94 @@
+import React, { cloneElement, isValidElement } from 'react'
+import { useDraggable } from '@dnd-kit/core'
+import { CSS } from '@dnd-kit/utilities'
+import { Box } from '../box'
+import { DraggableProps } from './types'
+import { DragItem } from './drag-item'
+import { ring } from '../../utils'
+
+/**
+ *  Will turn it's childen into a draggable component when under DragAndDrop context
+ * @see {@link https://northlight.dev/reference/draggable}
+ *
+ * @example (Example)
+ * ##Basic exapmle
+ * (?
+ * <DragAndDrop>
+ * <HStack>
+ * <Draggable id="random-id" />
+ * <Draggable />
+ * </HStack>
+ * </DragAndDrop>
+ * ?)
+ * <br />
+ * (Notice that the id prop is required)
+ *
+ * @example (Example)
+ * ## With custom children
+ *
+ * (?
+ * <DragAndDrop>
+ * <Box p="4">
+ * <Draggable id="random-id">
+ * <Center
+ * boxSize="3xs"
+ * boxShadow="xl"
+ * borderRadius="lg"
+ * bgColor="bg.overlayer"
+ * >I am draggable</Center>
+ * </Draggable>
+ * </Box>
+ *
+ * </DragAndDrop>
+ * ?)
+ *
+ *
+ */
+export const Draggable = ({
+  itemLabel,
+  children,
+  disableDrag = false,
+  'data-testid': dataTestId,
+  ...rest
+}: DraggableProps) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    isDragging,
+    ...props
+  } = useDraggable({ ...rest })
+  if (!listeners) {
+    return (
+      <DragItem itemLabel={ itemLabel } />
+    )
+  }
+
+  const childrenWithDragCursor = isValidElement(children)
+    ? cloneElement(children as JSX.Element, {
+      cursor: isDragging ? 'grabbing' : 'grab',
+    })
+    : children
+
+  const dragEventListeners = !disableDrag && listeners
+
+  return (
+    <Box
+      ref={ setNodeRef }
+      { ...attributes }
+      transform={ CSS.Translate.toString(transform) }
+      _focusVisible={ ring }
+      tabIndex={ disableDrag ? -1 : 0 }
+      w="max-content"
+      data-testid={ dataTestId }
+      { ...dragEventListeners }
+    >
+      { typeof childrenWithDragCursor === 'function'
+        ? childrenWithDragCursor(listeners, props)
+        : childrenWithDragCursor || (
+        <DragItem isDragging={ isDragging } itemLabel={ itemLabel } />
+        ) }
+    </Box>
+  )
+}

package/lib/components/drag-and-drop/drop-zone.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { useMultiStyleConfig } from '@chakra-ui/react'
+import { Stack } from '../stack'
+import { Droppable } from './droppable'
+import { DropZoneProps } from './types'
+
+/**
+ * Prestyled droppable area to drop draggable components,
+ *  you can override the styles of dropzone with sx prop
+ * @see Draggable
+ * @see Droppable
+ * @see DragAndDrop
+ * @see {@link https://northlight.dev/reference/drop-zone}
+ *
+ * @example (Example)
+ * ## You can drop draggable components
+ * (?
+ * <DragAndDrop>
+ * <DropZone name="random-id-2"><Draggable  id="test"/></DropZone>
+ * </DragAndDrop>
+ * ?)
+ */
+export const DropZone = ({ sx = {}, name, children, ...rest }: DropZoneProps) => {
+  const { dropZone } = useMultiStyleConfig('DragAndDrop', { sx })
+  return (
+    <Droppable id={ name }>
+      <Stack sx={ dropZone } { ...rest }>
+        { children }
+      </Stack>
+    </Droppable>
+  )
+}

package/lib/components/drag-and-drop/droppable.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { useDroppable } from '@dnd-kit/core'
+import { Box } from '../box'
+import { Center } from '../center'
+import { DroppableProps } from './types'
+
+/**
+ * Wrapper where you can style a container to place draggable elements
+ * @see DropZone
+ * @see Draggable
+ * @see DragAndDrop
+ * @see {@link https://northlight.dev/reference/droppable}
+ *
+ * @example (Example)
+ * ## Move the item into the container
+ * (?
+ * () => {
+ * const [ isDropped, setIsDropped ] = useState(false)
+ * const handleDragEnd = (e) => {
+ * setIsDropped(e.over && e.over.id === 'droppable')
+ * }
+ *
+ * return (
+ * <DragAndDrop onDragEnd={handleDragEnd}>
+ * <HStack>
+ * {!isDropped && <Draggable id="draggable" />}
+ * <Droppable id="droppable">
+ *  <Center bgColor="bg.filled" boxSize="3xs">
+ * {isDropped ? <Draggable id="draggable"/> :  <P>Drop here!</P>}
+ * </Center>
+ * </Droppable>
+ * </HStack>
+ *
+ * </DragAndDrop>
+ *
+ * )
+ *
+ *
+ * }
+ * ?)
+ *
+ */
+export const Droppable = ({
+  children,
+  'data-testid': testId,
+  ...rest
+}: DroppableProps) => {
+  const { setNodeRef, ...props } = useDroppable({
+    ...rest,
+  })
+  return (
+    <Box ref={ setNodeRef } data-testid={ testId }>
+      { typeof children === 'function'
+        ? children(props)
+        : children || <Center>Drop here</Center> }
+    </Box>
+  )
+}

package/lib/components/drag-and-drop/index.ts

@@ -0,0 +1,17 @@
+export * from './drag-and-drop'
+export * from './draggable'
+export * from './droppable'
+export * from './sortable'
+export * from './sortable-item'
+export * from './drag-item'
+export * from './drag-handle'
+export * from './drop-zone'
+export * from './multi-sort'
+export * from './sortable-list'
+export * from './sortable-container'
+export * from '@dnd-kit/core'
+export * from '@dnd-kit/utilities'
+export { useInterval as dndUseInterval } from '@dnd-kit/utilities'
+export * from '@dnd-kit/modifiers'
+export * from '@dnd-kit/sortable'
+export * from './types'

package/lib/components/drag-and-drop/multi-sort.tsx

@@ -0,0 +1,198 @@
+import React, { useState } from 'react'
+import {
+  DragOverEvent,
+  KeyboardSensor,
+  PointerSensor,
+  UniqueIdentifier,
+  rectIntersection,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core'
+import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable'
+import { indexOf, insert, keys, remove } from 'ramda'
+import { DragAndDrop } from './drag-and-drop'
+import { MultiSortProps } from './types'
+
+/**
+ * Util component for sorting items in two dimensions(container and order in container)
+ * @see SortableList
+ * @see DragAndDrop
+ * @see {@link https://northlight.dev/reference/multi-sort}
+ *
+ * @example
+ * (?
+ * () => {
+  const [ multiItems, setMultiItems ] = useState({
+    container1: [
+      'JavaScript',
+      'Python',
+      'Front end',
+      'Back end',
+    ],
+    container2: [ 'HTML', 'CSS' ],
+    container3: [ 'Chakra UI', 'Next.js', 'Tailwind UI' ],
+  })
+  return (
+    <Stack>
+          <MultiSort
+            items={ multiItems }
+            onChange={ (items) => setMultiItems(items) }
+          >
+            { (items, activeId) => (
+              <HStack alignItems="start">
+                <VStack>
+                  <Heading size="sm">I like</Heading>
+                  <DropZone name="container1">
+                    <SortableContainer items={ items.container1 } />
+                  </DropZone>
+                </VStack>
+                <VStack>
+                  <Heading size="sm">I don't like</Heading>
+                  <DropZone name="container2">
+                    <SortableContainer items={ items.container2 } />
+                  </DropZone>
+                </VStack>
+                <VStack>
+                  <Heading size="sm">Neutral</Heading>
+                  <DropZone name="container3">
+                    <SortableContainer items={ items.container3 } />
+                  </DropZone>
+                </VStack>
+                <DragOverlay>
+                  { activeId ? (
+                    <DragItem
+                      itemLabel={ activeId }
+                      isDragging={ true }
+                      bgColor="background.tag.default"
+                    />
+                  ) : null }
+                </DragOverlay>
+              </HStack>
+            ) }
+          </MultiSort>
+          <Text>Controlled output: </Text>
+          <Code p={ 2 } borderRadius={ 4 }>
+            <pre>{ JSON.stringify(multiItems, null, 2) }</pre>
+          </Code>
+</Stack>
+  )
+ * }
+ * ?)
+ * <br />
+ * Multisort abstracts logic away for setting up sortable items between multiple containers,
+ *  you can then separate, or create and style this containers as you want,
+ *  by putting them under <Droppable /> or a prestyled <Dropzone />
+
+SortableContainer is a wrapper for a <Sortable /> with a sortable item
+ * */
+export function MultiSort<itemKeys extends string | number | symbol> ({
+  items,
+  onChange = () => {},
+  children,
+  collisionDetection,
+  sensors,
+}: MultiSortProps<itemKeys>) {
+  const [ activeItem, setActiveItem ] = useState<UniqueIdentifier | null>(null)
+
+  const moveBetweenContainers = (
+    activeContainerName: itemKeys,
+    activeIndex: number,
+    overContainerName: itemKeys,
+    overIndex: number,
+    item: string
+  ) => ({
+    ...items,
+    [activeContainerName]: remove(activeIndex, 1, items[activeContainerName]),
+    [overContainerName]: insert(overIndex, item, items[overContainerName]),
+  })
+
+  const customSensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  )
+
+  const findContainer = (id: string) =>
+    (id in items ? id : keys(items).find((key) => items[key].includes(id)))
+
+  const getContainers = (e: DragOverEvent) => {
+    const { active, over } = e
+    if (!over) return {}
+    const { id } = active
+    const { id: overId } = over
+
+    const activeContainerName = findContainer(id as string) as itemKeys
+    const overContainerName = findContainer(overId as string) as itemKeys
+    return { activeContainerName, overContainerName, id, overId, active }
+  }
+
+  const handleDragStart = (e: DragOverEvent) => {
+    const {
+      active: { id },
+    } = e
+    setActiveItem(id)
+  }
+
+  const handleDragOver = (e: DragOverEvent) => {
+    const { activeContainerName, overContainerName, id, overId } = getContainers(e)
+
+    if (
+      !(
+        !activeContainerName ||
+        !overContainerName ||
+        activeContainerName === overContainerName
+      )
+    ) {
+      const activeIndex = indexOf(id, items[activeContainerName])
+      const overIndex = indexOf(overId, items[overContainerName])
+      onChange(moveBetweenContainers(
+        activeContainerName,
+        activeIndex,
+        overContainerName,
+        overIndex,
+        id as string
+      ))
+    }
+  }
+
+  const handleDragEnd = (e: DragOverEvent) => {
+    const { activeContainerName, overContainerName, id, overId, active } = getContainers(e)
+
+    if (!activeContainerName || !overContainerName) return
+
+    const activeIndex = indexOf(id, items[activeContainerName])
+    const overIndex = indexOf(overId, items[overContainerName])
+
+    if (activeContainerName === overContainerName) {
+      onChange({
+        ...items,
+        [overContainerName]: arrayMove(
+          items[overContainerName],
+          activeIndex,
+          overIndex
+        ),
+      })
+    } else {
+      onChange(moveBetweenContainers(
+        activeContainerName,
+        activeIndex,
+        overContainerName,
+        overIndex,
+        active?.id as string
+      ))
+    }
+  }
+
+  return (
+    <DragAndDrop
+      sensors={ sensors || customSensors }
+      onDragStart={ handleDragStart }
+      onDragOver={ handleDragOver }
+      onDragEnd={ handleDragEnd }
+      collisionDetection={ collisionDetection || rectIntersection }
+    >
+      { typeof children === 'function' ? children(items, activeItem) : children }
+    </DragAndDrop>
+  )
+}

package/lib/components/drag-and-drop/sortable-container.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { rectSortingStrategy } from '@dnd-kit/sortable'
+import { Sortable } from './sortable'
+import { SortableItem } from './sortable-item'
+import { SortableContainerProps } from './types'
+
+/**
+ * Used with multi sort to render a sortable list inside a droppable
+ * @see MultiSort
+ * @see {@link https://northlight.dev/reference/sortable-container}
+ *
+ * @example
+ * (?
+ * <SortableContainer items={['item 1', 'item 2', 'item 3']} />
+ * ?)
+ *
+ */
+export const SortableContainer = ({ children, items, strategy }: SortableContainerProps) => (
+  <Sortable items={ items } strategy={ strategy || rectSortingStrategy }>
+    { items.map((id) => (
+      <SortableItem key={ id } id={ id } itemLabel={ id }>
+        { typeof children === 'function' ? children(id) : children }
+      </SortableItem>
+    )) }
+  </Sortable>
+)