@northlight/ui 2.41.0 → 2.41.1

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

@@ -0,0 +1,96 @@
+import React, { PointerEvent, cloneElement, isValidElement, useRef } from 'react'
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { Box } from '../box'
+import { DragItem } from './drag-item'
+import { ring } from '../../utils'
+import { SortableItemProps } from './types'
+
+/**
+ * Renders a draggable item under sortable context
+ * @see SortableList
+ * @see MultiSort
+ * @see {@link https://northlight.dev/reference/sortable-item}
+ *
+ * @example
+ * (? <SortableItem id="sortable-1"/> ?)
+ * */
+export const SortableItem = ({
+  itemLabel = 'Drag me',
+  dblClickThreshold = 300,
+  children,
+  disableDrag = false,
+  'data-testid': dataTestId,
+  ...rest
+}: SortableItemProps) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+    ...props
+  } = useSortable({ ...rest })
+  if (!listeners) {
+    return (
+      <DragItem itemLabel={ itemLabel } />
+    )
+  }
+
+  const timeStampSnapchot = useRef(0)
+  const inEditMode = useRef(false)
+  const { onPointerDown, onKeyDown } = listeners
+  const handlePointerDown = (e: PointerEvent<Element>) => {
+    const elapsedTime = e.timeStamp - timeStampSnapchot.current
+    if (elapsedTime > dblClickThreshold) {
+      inEditMode.current = true
+      onPointerDown(e)
+    } else {
+      inEditMode.current = false
+    }
+    timeStampSnapchot.current = e.timeStamp
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<Element>) => {
+    if (inEditMode.current) {
+      onKeyDown(e)
+    }
+  }
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+  }
+
+  const childrenWithDragCursor = isValidElement(children)
+    ? cloneElement(children as JSX.Element, {
+      cursor: isDragging ? 'grabbing' : 'grab',
+    })
+    : children
+
+  const dragEventListeners = !disableDrag && {
+    onPointerDown: handlePointerDown,
+    onKeyDown: handleKeyDown,
+  }
+
+  return (
+    <Box
+      ref={ setNodeRef }
+      sx={ style }
+      { ...attributes }
+      _focusVisible={ ring }
+      tabIndex={ disableDrag ? -1 : 0 }
+      borderRadius="tag.default"
+      data-testid={ dataTestId }
+      { ...dragEventListeners }
+    >
+      { (
+        typeof childrenWithDragCursor === 'function'
+          ? childrenWithDragCursor(listeners, props)
+          : childrenWithDragCursor
+      ) || <DragItem isDragging={ isDragging } itemLabel={ itemLabel } />
+      }
+    </Box>
+  )
+}

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

@@ -0,0 +1,163 @@
+import React, { useMemo, useState } from 'react'
+import {
+  DragOverEvent,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  UniqueIdentifier,
+  rectIntersection,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core'
+import {
+  arrayMove,
+  rectSortingStrategy,
+  sortableKeyboardCoordinates,
+} from '@dnd-kit/sortable'
+import { identity, indexOf, map } from 'ramda'
+import { DragAndDrop } from './drag-and-drop'
+import { Sortable } from './sortable'
+import { SortableItem } from './sortable-item'
+import { DragItem } from './drag-item'
+import { SortableListProps } from './types'
+
+/**
+ * Util component to render sortable items under sortable context
+ * @see SortableItem
+ * @see Sortable
+ * @see {@link https://northlight.dev/reference/sortable-list}
+ *
+ * @example (Example)
+ * ## You can render any layout of sortable components, for example grid:
+ * (?
+ * () => {
+ * const [items, setItems] = useState(Array.from({length: 100}, (_, i) => i))
+ * return (
+ * <Stack>
+<SimpleGrid minChildWidth="50px" spacing={ 4 }>
+    <SortableList
+        items={ items }
+        onChange={ (items) => setItems(items) }
+    />
+</SimpleGrid>
+          <Code p={ 2 } borderRadius={ 4 }>
+            { JSON.stringify(items, null, 2) }
+          </Code>
+          </Stack>
+ * )}
+ * ?)
+ *
+ * @example (Example)
+ * ### With custom component
+ * (?
+ * () => {
+ * const [items, setItems] = useState([ { name: 'item1' }, { name: 'item2' }, { name: 'item3' } ])
+ * return (
+ * <Stack>
+ *
+ * <SortableList
+  items={ items }
+  createKey={ (item) => item.name }
+  disableDrag={ true }
+  onChange={setItems}
+>
+  { ({ name }, listeners, { isOver }) => (
+    <HStack>
+      <DragHandle { ...listeners } isDragging={ isOver } />
+      <Input defaultValue={ name } />
+    </HStack>
+  ) }
+</SortableList>
+</Stack>
+  )}
+ * ?)
+<br />
+If disableDrag=false, then when the user double clicks it will trigger
+the default behaviour of the rendered component instead of the dragging,
+ you can adjust the threshold with dblClickThreshold, default is 300ms
+ *
+ *
+ */
+export function SortableList<T> ({
+  children,
+  items,
+  collisionDetection,
+  createKey = identity as (t: T) => UniqueIdentifier,
+  strategy,
+  onChange = () => {},
+  onMovedItem = identity,
+  displayOverlay = false,
+  sensors,
+  dblClickThreshold = 300,
+  disableDrag = false,
+  modifiers,
+}: SortableListProps<T>) {
+  const [ activeItem, setActiveItem ] = useState<UniqueIdentifier | null>(null)
+
+  const identifierItems = useMemo(() => map(createKey, items), [ items ])
+
+  const customSensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  )
+
+  const handleDragStart = (event: DragOverEvent) => {
+    const {
+      active: { id },
+    } = event
+    setActiveItem(id)
+  }
+
+  const handleDragEnd = (event: DragOverEvent) => {
+    const { active, over } = event
+    if (active && over && active.id !== over.id) {
+      const prevIds = map(createKey, items)
+      const oldIndex = indexOf(active.id, prevIds)
+      const newIndex = indexOf(over.id, prevIds)
+      onMovedItem({ item: items[oldIndex], oldIndex, newIndex })
+      const newItems = arrayMove(items, oldIndex, newIndex)
+      onChange(newItems)
+    }
+  }
+
+  return (
+    <DragAndDrop
+      sensors={ sensors || customSensors }
+      collisionDetection={ collisionDetection || rectIntersection }
+      onDragStart={ handleDragStart }
+      onDragEnd={ handleDragEnd }
+      modifiers={ modifiers }
+    >
+      <Sortable
+        items={ identifierItems }
+        strategy={ strategy || rectSortingStrategy }
+      >
+        { items.map((item, index) => {
+          const id = createKey(item)
+          return (
+            <SortableItem
+              key={ id }
+              id={ id }
+              itemLabel={ id }
+              dblClickThreshold={ dblClickThreshold }
+              disableDrag={ disableDrag }
+            >
+              { (listeners, props) =>
+                (typeof children === 'function'
+                  ? children(item, listeners, props, index)
+                  : children)
+              }
+            </SortableItem>
+          )
+        }) }
+      </Sortable>
+      { displayOverlay && (
+        <DragOverlay>
+          { activeItem ? <DragItem itemLabel={ activeItem } /> : null }
+        </DragOverlay>
+      ) }
+    </DragAndDrop>
+  )
+}

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import { SortableContext, SortableContextProps } from '@dnd-kit/sortable'
+
+/**
+ * Wrapper that provides context for sortable elements using DnD-kit
+ * @see DragAndDrop
+ * @see SortableList
+ * @see MultiSort
+ * @see {@link https://northlight.dev}
+ * @see {@link https://docs.dndkit.com/presets/sortable/sortable-context}
+ * @example
+ * **<a href="https://docs.dndkit.com/presets/sortable/sortable-context" target="_blank">Read more on dnd-docs</a>**
+ * */
+export const Sortable = (props: SortableContextProps) => (
+  <SortableContext { ...props } />
+)

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

@@ -0,0 +1,105 @@
+import { ComponentType } from 'react'
+import {
+  CollisionDetection,
+  Modifiers,
+  SensorDescriptor,
+  SensorOptions,
+  UniqueIdentifier,
+  UseDraggableArguments,
+  UseDroppableArguments,
+} from '@dnd-kit/core'
+import { SortingStrategy, UseSortableArguments } from '@dnd-kit/sortable'
+import { IconProps, SystemStyleObject, TagProps } from '@chakra-ui/react'
+import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'
+
+export type ListenersType = SyntheticListenerMap
+
+type ChildrenType<PropType=any, PropTypeTwo=any> =
+  | ((
+    props: PropType,
+    secondProp: PropTypeTwo,
+    thirdProp?: any,
+    fourthProp?: number
+  ) => JSX.Element | JSX.Element[] | undefined)
+  | (JSX.Element | JSX.Element[])
+
+export type MultiItemType<itemKeys extends string | number | symbol> = Record<itemKeys, string[]>
+export interface DroppableProps extends UseDroppableArguments {
+  children?: ((props: any) => JSX.Element | JSX.Element[]) | (JSX.Element | JSX.Element[])
+  'data-testid'?: string
+}
+export interface DraggableProps extends UseDraggableArguments {
+  itemLabel?: string
+  children?: ChildrenType<ListenersType>
+  disableDrag?: boolean
+  'data-testid'?: string
+}
+
+export interface SortableItemProps extends UseSortableArguments {
+  children?: ChildrenType<ListenersType>
+  itemLabel?: UniqueIdentifier
+  dblClickThreshold?: number
+  disableDrag?: boolean
+  'data-testid'?: string
+}
+
+type MovedItemType<T> = {
+  item: T
+  oldIndex: number
+  newIndex: number
+}
+export interface SortableListProps<T> {
+  children?: ChildrenType<T, ListenersType>
+  items: T[]
+  /** Play around with this in case the sortable items don't land where
+   *  supposed to. See: https://docs.dndkit.com/api-documentation/context-provider/collision-detection-algorithms */
+  collisionDetection?: CollisionDetection
+  /** Used to optimize rendering, see: https://docs.dndkit.com/presets/sortable#sorting-strategies  */
+  strategy?: SortingStrategy
+  onChange?: (items: T[]) => void
+  createKey?: (item: T) => UniqueIdentifier
+  /** You can add an overlay, which can make it more accessible in use
+   *  cases where it can be hard to see for the user where their item will land on drop */
+
+  displayOverlay?: boolean
+  /** In case you want to adjust the input methods, see: https://docs.dndkit.com/api-documentation/sensors */
+  sensors?: SensorDescriptor<SensorOptions>[]
+  dblClickThreshold?: number
+  disableDrag?: boolean
+  /** callback, passes the dragged item and it's old / new index after a drag, */
+  onMovedItem?: ({ item, oldIndex, newIndex }: MovedItemType<T>) => void
+  /** Read: https://docs.dndkit.com/api-documentation/modifiers#restricting-motion-to-an-axis */
+  modifiers?: Modifiers
+}
+
+export interface MultiSortProps<itemKeys extends string | number | symbol> {
+  children?: ChildrenType
+  items: MultiItemType<itemKeys>
+  /** https://docs.dndkit.com/api-documentation/context-provider/collision-detection-algorithms */
+  collisionDetection?: CollisionDetection
+  onChange?: (items: MultiItemType<itemKeys>) => void
+  /** https://docs.dndkit.com/api-documentation/sensors */
+  sensors?: SensorDescriptor<SensorOptions>[]
+}
+
+export interface DragItemProps extends Omit<TagProps, 'variant'> {
+  isDragging?: boolean
+  itemLabel?: UniqueIdentifier
+  bgColor?: string
+}
+
+export interface DragHandleProps extends IconProps {
+  isDragging?: boolean
+  icon?: ComponentType<any>
+}
+
+export interface DropZoneProps {
+  sx?: SystemStyleObject
+  name: UniqueIdentifier
+  children?: JSX.Element
+}
+export interface SortableContainerProps {
+  items: UniqueIdentifier[]
+  strategy?: SortingStrategy
+  children?: (id: UniqueIdentifier) => JSX.Element
+}

package/lib/components/drawer/index.ts

@@ -0,0 +1,9 @@
+export {
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+} from '@chakra-ui/react'

package/lib/components/editable/index.ts

@@ -0,0 +1,8 @@
+export {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  useEditable,
+  useEditableControls,
+  useEditableState,
+} from '@chakra-ui/react'

package/lib/components/editable-text/editable-controls.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { CheckDuo, EditDuo, XCloseSolid } from '@northlight/icons'
+import {
+  HStack,
+  useEditableControls,
+  useEditableState,
+  useMultiStyleConfig,
+} from '@chakra-ui/react'
+import { IconButton } from '../icon-button'
+import { Icon } from '../icon'
+import { EditableControlsProps } from './types'
+import { ButtonVariants } from '../button/types'
+
+type MapVariantTypes = Record<EditableControlsProps['variant'], ButtonVariants>
+
+const mapEditableVariantsToButtonSubmitVariants: MapVariantTypes = {
+  brand: 'brand',
+  default: 'success',
+}
+
+const mapEditableVariantsToButtonCancelVariants: MapVariantTypes = {
+  brand: 'ghost',
+  default: 'danger',
+}
+
+export const EditableControls = ({ size, variant = 'default' }: EditableControlsProps) => {
+  const {
+    getSubmitButtonProps,
+    getCancelButtonProps,
+  } = useEditableControls()
+
+  const { onEdit, isEditing } = useEditableState()
+
+  const { button, icon, controls } = useMultiStyleConfig('EditableText', { size, isEditing })
+
+  return (
+    <HStack spacing={ 1 } sx={ controls }>
+      { isEditing
+        ? (
+          <>
+            <IconButton
+              aria-label="Cancel"
+              sx={ button }
+              variant={ mapEditableVariantsToButtonCancelVariants[variant] }
+              { ...getCancelButtonProps() }
+            >
+              <Icon sx={ icon } as={ XCloseSolid } />
+            </IconButton>
+            <IconButton
+              aria-label="Save"
+              sx={ button }
+              variant={ mapEditableVariantsToButtonSubmitVariants[variant] }
+              { ...getSubmitButtonProps() }
+            >
+              <Icon sx={ icon } as={ CheckDuo } />
+            </IconButton>
+          </>
+        )
+        : (
+          <IconButton
+            aria-label="Edit"
+            variant="ghost"
+            sx={ button }
+            onClick={ onEdit }
+          >
+            <Icon sx={ icon } as={ EditDuo } />
+          </IconButton>
+        )
+      }
+    </HStack>
+  )
+}

package/lib/components/editable-text/editable-text.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react'
+import { useMultiStyleConfig } from '@chakra-ui/react'
+import { Input, InputGroup, InputLeftElement, InputRightElement } from '../input'
+import { EditableInput as ChakraEditableInput, Editable, EditablePreview } from '../editable'
+import { EditableProps } from './types'
+import { EditableControls } from './editable-controls'
+
+/**
+ * Used to safely modify text with default or previousely set value
+ * @see {@link https://northlight.dev/reference/editable-text}
+ *
+ * @example (Example)
+ * ##Edit password
+ * (?
+ * () => {
+ * const [v, setV] = useState('123456789')
+ * return (
+ * <Box p="2">
+ * <EditableText value={v} onSubmit={setV} leftItem={<Icon as={LockDuo} />}/>
+ * </Box>
+ * )
+ * }
+ * ?)
+ *
+ * @example (Example)
+ * ## Other notes
+        <p>
+          Pressing <b>ESC</b> or clicking on the
+          <b> red icon</b> will delete the changes and go back to the original state
+        </p>
+        <p>
+          Pressing <b>ENTER</b> or clicking on the
+          <b> green icon</b> will save the changes internally and fire the{ ' ' }
+          <Code>onSubmit</Code> callback.
+        </p>
+ *
+ */
+export const EditableText = ({
+  size = 'md',
+  value: inputValue,
+  onSubmit,
+  leftItem,
+  variant = 'default',
+  ...rest
+}: EditableProps) => {
+  const [ value, setValue ] = useState(inputValue)
+  const { input, preview } = useMultiStyleConfig('EditableText', { size, value })
+
+  useEffect(() => {
+    setValue(inputValue)
+  }, [ inputValue ])
+
+  return (
+    <Editable
+      isPreviewFocusable={ true }
+      selectAllOnFocus={ false }
+      value={ value }
+      onChange={ (newValue) => setValue(newValue) }
+      onSubmit={ onSubmit }
+      { ...rest }
+    >
+      <InputGroup size={ size }>
+        { leftItem && (
+          <InputLeftElement>
+            { leftItem }
+          </InputLeftElement>
+        ) }
+        <Input
+          as={ EditablePreview }
+          sx={ preview }
+        />
+        <Input
+          as={ ChakraEditableInput }
+          size={ size }
+          sx={ input }
+        />
+        <InputRightElement sx={ { width: 'min-content' } }>
+          <EditableControls size={ size } variant={ variant } />
+        </InputRightElement>
+      </InputGroup>
+    </Editable>
+  )
+}

package/lib/components/editable-text/index.ts

@@ -0,0 +1,2 @@
+export * from './editable-text'
+export * from './types'

package/lib/components/editable-text/types.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react'
+import { EditableProps as ChakraEditableProps } from '@chakra-ui/react'
+
+export type EditableSizes = 'sm' | 'md' | 'lg'
+
+export type EditableVariant = 'brand' | 'default'
+
+export interface EditableProps extends ChakraEditableProps {
+  value?: string
+  size?: EditableSizes
+  leftItem? : ReactElement
+  variant?: EditableVariant
+}
+export interface EditableControlsProps {
+  size: EditableSizes
+  variant: EditableVariant
+}

package/lib/components/fast-grid/fast-grid.tsx

@@ -0,0 +1,123 @@
+import React, { LegacyRef, forwardRef } from 'react'
+import { VariableSizeGrid } from 'react-window'
+import AutoSizer from 'react-virtualized-auto-sizer'
+import { FastGridProps } from './types'
+
+/**
+ * Wrapper that renders children in a virtualized html grid layout
+ * @see FastList
+ * @see {@link https://northlight.dev/reference/fast-grid}
+ *
+ * @example (Example)
+ * ## Simple example
+ * (?
+ *       <Box h="500px" w="full" border="1px solid gray" p={ 4 } borderRadius={ 4 }>
+        <FastGrid
+          columns={ 10000 }
+          rows={ 10000 }
+          rowSize={ 100 }
+          columnSize={ 100 }
+          overscanRowCount={ 10 }
+          overscanColumnCount={ 1 }
+        >
+          { (rowIndex, columnIndex) => `[${rowIndex}, ${columnIndex}]` }
+        </FastGrid>
+      </Box>
+ *
+ * ?)
+ *
+ * @example (Example)
+ * ## Spreadsheet example
+ * (?
+ * +
+ *
+const getCell = (rowIndex, columnIndex) => {
+  if (rowIndex === 0 && columnIndex === 0) return ''
+  if (rowIndex === 0) {
+    return (
+      <Lead w="full">
+        { ' ' }
+        Col { columnIndex }
+      </Lead>
+    )
+  }
+  if (columnIndex === 0) {
+    return (
+      <Lead w="full">
+        { ' ' }
+        Row { rowIndex }
+      </Lead>
+    )
+  }
+  return (
+    <TextField name={ `${rowIndex}-${columnIndex}` } />
+  )
+}
+ *
+ * const MyGrid = () => {
+ * const [values, setValues ] = useState({})
+ * return(
+ * <Form initialValues={{}}>
+ * {({getValues}) => (
+ * <Stack>
+ * <Box h="500px" w="500p" border="1px solid gray" p={ 4 } borderRadius={ 4 }>
+    <FastGrid
+        columns={ 10000 }
+        rows={ 10000 }
+        rowSize={ 50 }
+        columnSize={ 100 }
+        overscanRowCount={ 10 }
+        overscanColumnCount={ 1 }
+    >
+    {getCell}
+    </FastGrid>
+</Box>
+<Button onClick={() => setValues(getValues())} variant="success">Save</Button>
+<Code> <pre>{JSON.stringify(values, null, 2)}</pre></Code>
+</Stack>
+ * )}
+    </Form>
+ * )}
+
+render(<MyGrid />)
+ *
+ *
+ * ?)
+ * **(Note, FastGrid must be wrapped in a parent element with set height and width!)**
+ *
+*/
+export const FastGrid = forwardRef(({
+  columns,
+  rows,
+  columnSize,
+  rowSize,
+  children,
+  width,
+  height,
+  overscanRowCount = 0,
+  overscanColumnCount = 0,
+  ...rest
+}: FastGridProps, ref: LegacyRef<VariableSizeGrid<any>>) => (
+  <AutoSizer>
+    { ({ width: autoWidth, height: autoHeight }) => (
+      <VariableSizeGrid
+        rowCount={ rows }
+        columnCount={ columns }
+        columnWidth={ typeof columnSize === 'number' ? (_index) => columnSize : columnSize }
+        rowHeight={ typeof rowSize === 'number' ? (_index) => rowSize : rowSize }
+        height={ height ?? autoHeight }
+        width={ width ?? autoWidth }
+        overscanRowCount={ overscanRowCount }
+        overscanColumnCount={ overscanColumnCount }
+        ref={ ref }
+        { ...rest }
+      >
+        { ({ style, rowIndex, columnIndex }) => (
+          <div style={ style }>
+            { typeof children === 'function' ? children(rowIndex, columnIndex) : children }
+          </div>
+        ) }
+      </VariableSizeGrid>
+    ) }
+  </AutoSizer>
+))