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

package/src/hooks/useSelectable/SelectableStrategy.ts

@@ -1,143 +0,0 @@
-import get from 'utils/toolset/get'
-
-import type {
-  Selectable,
-  SelectableAdapter,
-  SelectableKeyType,
-  SelectableState,
-  SelectableStrategy,
-} from './useSelectable.types'
-
-export type SelectableStrategyContext<T extends Selectable> = {
-  getAdapter: (type?: string) => SelectableAdapter<T>
-}
-
-const GenericAdapter: SelectableAdapter<unknown> = {
-  getKey(o): string {
-    return get(o, 'value')!
-  },
-}
-
-function createSelectionStrategy<T extends Selectable>(props: {
-  multiple?: boolean
-  adapters: Record<string, SelectableAdapter<T>>
-}): SelectableStrategy<T> {
-  const { adapters, multiple } = props
-
-  const context: SelectableStrategyContext<T> = {
-    getAdapter(type?: string) {
-      if (type == null) {
-        return GenericAdapter
-      }
-
-      return adapters[type] || GenericAdapter
-    },
-  }
-
-  if (multiple) {
-    return MultipleSelectionStrategy(context)
-  }
-
-  return SingleSelectionStrategy(context)
-}
-
-export function SingleSelectionStrategy<T extends Selectable>(
-  context: SelectableStrategyContext<T>
-): SelectableStrategy<T> {
-  return {
-    type() {
-      return 'single'
-    },
-    init(items: T[]) {
-      return this.select(items, new Map())
-    },
-    select(items: T[]) {
-      const newSelection = new Map<SelectableKeyType, T>()
-
-      for (let i = 0; i < items.slice(0, 1).length; i++) {
-        const adapter = context.getAdapter(items[i]._type)
-        newSelection.set(adapter.getKey(items[i]), items[i])
-      }
-
-      return newSelection
-    },
-    unselect(keys: SelectableKeyType[], selection: SelectableState<T>) {
-      const newSelection = new Map<SelectableKeyType, T>(selection)
-
-      for (let i = 0; i < keys.length; i++) {
-        newSelection.delete(keys[i])
-      }
-
-      return newSelection
-    },
-    toggle(items: T[], selection: SelectableState<T>) {
-      const newSelection = new Map<SelectableKeyType, T>()
-
-      for (let i = 0; i < items.slice(0, 1).length; i++) {
-        const adapter = context.getAdapter(items[i]._type)
-
-        if (!selection.has(adapter.getKey(items[i]))) {
-          newSelection.set(adapter.getKey(items[i]), items[i])
-        }
-      }
-
-      return newSelection
-    },
-    clear() {
-      return new Map<SelectableKeyType, T>()
-    },
-  }
-}
-
-export function MultipleSelectionStrategy<T extends Selectable>(
-  context: SelectableStrategyContext<T>
-): SelectableStrategy<T> {
-  return {
-    type() {
-      return 'multiple'
-    },
-    init(items: T[]) {
-      return this.select(items, new Map<SelectableKeyType, T>())
-    },
-    select(items: T[], selection: SelectableState<T>) {
-      const newSelection = new Map<SelectableKeyType, T>(selection)
-
-      for (let i = 0; i < items.length; i++) {
-        const adapter = context.getAdapter(items[i]._type)
-        newSelection.set(adapter.getKey(items[i]), items[i])
-      }
-
-      return newSelection
-    },
-    unselect(keys: SelectableKeyType[], selection: SelectableState<T>) {
-      const newSelection = new Map<SelectableKeyType, T>(selection)
-
-      for (let i = 0; i < keys.length; i++) {
-        newSelection.delete(keys[i])
-      }
-
-      return newSelection
-    },
-    toggle(items: T[], selection: SelectableState<T>) {
-      const newSelection = new Map<SelectableKeyType, T>(selection)
-
-      for (let i = 0; i < items.length; i++) {
-        const adapter = context.getAdapter(items[i]._type)
-        const key = adapter.getKey(items[i])
-
-        if (!selection.has(key)) {
-          newSelection.set(key, items[i])
-        } else {
-          newSelection.delete(key)
-        }
-      }
-
-      return newSelection
-    },
-    clear() {
-      return new Map<SelectableKeyType, T>()
-    },
-  }
-}
-
-export default createSelectionStrategy

package/src/hooks/useSelectable/index.ts

@@ -1,8 +0,0 @@
-export { createSelectable } from './useSelectable'
-export type {
-  Selectable,
-  SelectableAdapter,
-  SelectableKeyType,
-  SelectableType,
-  SelectableState,
-} from './useSelectable.types'

package/src/hooks/useSelectable/useSelectable.test.ts

@@ -1,221 +0,0 @@
-import { renderHook, act } from '@testing-library/react-hooks'
-
-import { createSelectable } from './useSelectable'
-import generator from '../../tests/generator'
-
-import type { Selectable, SelectableAdapter, SelectableKeyType } from './useSelectable.types'
-
-interface TestSelectable extends Selectable {
-  id: string
-  name: string
-}
-
-const adapter = {
-  getKey(o: TestSelectable): string {
-    return o.id
-  },
-}
-
-const adapters: Record<string, SelectableAdapter<TestSelectable>> = {
-  test: adapter,
-}
-
-describe('createSelectable', () => {
-  const { SelectableContext, useSelectable } = createSelectable<TestSelectable>()
-
-  it('returns a context and a useSelectable hook', () => {
-    expect(SelectableContext.Provider).not.toBeNull()
-    expect(SelectableContext.Consumer).not.toBeNull()
-
-    expect(useSelectable).not.toBeNull()
-    expect(typeof useSelectable).toBe('function')
-  })
-
-  describe('useSelectable', () => {
-    it('returns select, unselect, toggle, clear functions', () => {
-      const props = {
-        selected: [],
-        adapters,
-      }
-
-      const { result } = renderHook(() => useSelectable(props))
-
-      expect(typeof result.current.select).toBe('function')
-      expect(typeof result.current.unselect).toBe('function')
-      expect(typeof result.current.toggle).toBe('function')
-      expect(typeof result.current.clear).toBe('function')
-    })
-
-    it('returns empty selected, when empty selected is initially provided', () => {
-      const props = {
-        selected: [],
-        adapters,
-      }
-      const { result } = renderHook(() => useSelectable(props))
-      const expectedSelected = new Map<SelectableKeyType, TestSelectable>()
-
-      expect(result.current.selected).toEqual(expectedSelected)
-    })
-
-    it('returns selected correctly when selected is initially provided', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const props = {
-        selected: [item],
-        adapters,
-      }
-      const { result } = renderHook(() => useSelectable(props))
-
-      const expectedSelected = new Map<SelectableKeyType, TestSelectable>().set(
-        adapter.getKey(item),
-        item
-      )
-
-      expect(result.current.selected).toEqual(expectedSelected)
-    })
-
-    it('update selected correctly when the provided selected changes', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const { result, rerender } = renderHook((props) => useSelectable(props), {
-        initialProps: {
-          selected: [item],
-          adapters,
-        },
-      })
-
-      const initialExpectedSelected = new Map<SelectableKeyType, TestSelectable>().set(
-        adapter.getKey(item),
-        item
-      )
-
-      expect(result.current.selected).toEqual(initialExpectedSelected)
-
-      const otherItem = {
-        _type: 'test',
-        id: 'sure-it-is-another-id',
-        name: generator.name(),
-      }
-
-      rerender({
-        selected: [otherItem],
-        adapters,
-      })
-
-      const expectedSelected = new Map<SelectableKeyType, TestSelectable>().set(
-        adapter.getKey(otherItem),
-        otherItem
-      )
-
-      expect(result.current.selected).toEqual(expectedSelected)
-    })
-
-    it('calls onChange prop when select is called', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const props = {
-        selected: [],
-        adapters,
-        onChange: jest.fn(),
-      }
-
-      const { result } = renderHook(() => useSelectable(props))
-
-      const expectedSelected = new Map<SelectableKeyType, TestSelectable>().set(
-        adapter.getKey(item),
-        item
-      )
-
-      act(() => {
-        result.current.select(item)
-      })
-
-      expect(props.onChange).toHaveBeenCalledWith(expectedSelected)
-    })
-
-    it('calls onChange prop when unselect is called', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const props = {
-        selected: [item],
-        adapters,
-        onChange: jest.fn(),
-      }
-
-      const { result } = renderHook(() => useSelectable(props))
-
-      act(() => {
-        result.current.unselect(item.id)
-      })
-
-      const expectedSelected = new Map<SelectableKeyType, TestSelectable>()
-      expect(props.onChange).toHaveBeenCalledWith(expectedSelected)
-    })
-
-    it('calls onChange prop when toggle is called', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const props = {
-        selected: [],
-        adapters,
-        onChange: jest.fn(),
-      }
-
-      const { result } = renderHook(() => useSelectable(props))
-
-      const expectedSelected = new Map<SelectableKeyType, TestSelectable>().set(
-        adapter.getKey(item),
-        item
-      )
-
-      act(() => {
-        result.current.toggle(item)
-      })
-
-      expect(props.onChange).toHaveBeenCalledWith(expectedSelected)
-    })
-
-    it('calls onChange prop when clear is called', () => {
-      const item = {
-        _type: 'test',
-        id: generator.id(),
-        name: generator.name(),
-      }
-
-      const props = {
-        selected: [item],
-        adapters,
-        onChange: jest.fn(),
-      }
-
-      const { rerender, result } = renderHook(() => useSelectable(props))
-
-      act(() => {
-        result.current.clear()
-      })
-
-      const expectedSelected = new Map<SelectableKeyType, TestSelectable>()
-      expect(props.onChange).toHaveBeenCalledWith(expectedSelected)
-    })
-  })
-})

package/src/hooks/useSelectable/useSelectable.ts

@@ -1,156 +0,0 @@
-import { createContext, useEffect, useMemo, useReducer, useRef } from 'react'
-import { identity } from '@loadsmart/utils-function'
-
-import { useDidMount } from 'hooks/useDidMount'
-import createSelectionStrategy from './SelectableStrategy'
-import toArray from 'utils/toolset/toArray'
-import useFingerprint from 'hooks/useFingerprint'
-
-import type { Context } from 'react'
-import type {
-  Selectable,
-  SelectableAction,
-  SelectableKeyType,
-  SelectableState,
-  SelectableStrategy,
-  useSelectableProps,
-  useSelectableReturn,
-} from './useSelectable.types'
-
-const DEFAULT_ADAPTERS = {}
-
-/**
- * Create a generic manager for collection selection.
- * @returns
- */
-function createUseSelectable<T extends Selectable>() {
-  return function useSelectable(props: useSelectableProps<T>): useSelectableReturn<T> {
-    const { adapters, multiple, onChange } = props
-
-    const didMount = useDidMount()
-
-    const strategy = useMemo<SelectableStrategy<T>>(() => {
-      return createSelectionStrategy<T>({
-        adapters: adapters || DEFAULT_ADAPTERS,
-        multiple: Boolean(multiple),
-      })
-    }, [adapters, multiple])
-
-    function reducer(state: SelectableState<T>, action: SelectableAction<T>) {
-      switch (action.type) {
-        case 'select':
-          return strategy.select(action.payload, state)
-        case 'unselect':
-          return strategy.unselect(action.payload, state)
-        case 'toggle':
-          return strategy.toggle(action.payload, state)
-        case 'clear':
-          return strategy.clear(state)
-        case 'reset':
-          return action.payload
-      }
-    }
-
-    function initializer() {
-      return strategy.init(toArray(props.selected))
-    }
-
-    const [selected, dispatch] = useReducer(reducer, new Map<SelectableKeyType, T>(), initializer)
-    const { resetFingerprint, hasSameFingerprint } = useFingerprint<string>(
-      identity,
-      [...selected.keys()].map(String)
-    )
-    const propagateChangeRef = useRef(false)
-
-    function type() {
-      return strategy.type()
-    }
-
-    function select(items: T | T[]) {
-      propagateChangeRef.current = true
-
-      dispatch({
-        type: 'select',
-        payload: toArray(items),
-      })
-    }
-
-    function unselect(keys: SelectableKeyType | SelectableKeyType[]) {
-      propagateChangeRef.current = true
-
-      dispatch({
-        type: 'unselect',
-        payload: toArray(keys),
-      })
-    }
-
-    function toggle(items: T | T[]) {
-      propagateChangeRef.current = true
-
-      dispatch({
-        type: 'toggle',
-        payload: toArray(items),
-      })
-    }
-
-    function clear() {
-      propagateChangeRef.current = true
-
-      dispatch({
-        type: 'clear',
-      })
-    }
-
-    useEffect(
-      function handleChange() {
-        if (didMount && propagateChangeRef.current) {
-          onChange?.(selected)
-        }
-
-        propagateChangeRef.current = false
-      },
-      /**
-       * We don't want to update when didMount or the onChange callback changes, because we're only interested
-       * in changes to the selected state.
-       */
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [selected]
-    )
-
-    useEffect(
-      function updateOnSelectedPropChange() {
-        const newSelected = initializer()
-        const keys = [...newSelected.keys()].map(String)
-
-        if (hasSameFingerprint(keys)) {
-          return
-        }
-
-        propagateChangeRef.current = false
-
-        resetFingerprint(keys)
-        dispatch({
-          type: 'reset',
-          payload: newSelected,
-        })
-      },
-      /**
-       * initializer is not relevant for our changes, that's why its ommitted.
-       */
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [props.selected, hasSameFingerprint, resetFingerprint]
-    )
-
-    return { type, selected, select, unselect, toggle, clear }
-  }
-}
-
-export function createSelectable<T extends Selectable>(): {
-  SelectableContext: Context<useSelectableReturn<T>>
-  useSelectable: (props: useSelectableProps<T>) => useSelectableReturn<T>
-} {
-  const SelectableContext = createContext<useSelectableReturn<T>>({} as useSelectableReturn<T>)
-  const useSelectable = createUseSelectable<T>()
-
-  return { SelectableContext, useSelectable }
-}

package/src/hooks/useSelectable/useSelectable.types.ts

@@ -1,45 +0,0 @@
-export type SelectableKeyType = string | number | boolean
-
-export interface Selectable {
-  _type?: string
-}
-
-export interface SelectableAdapter<T> {
-  getKey: (o: T) => SelectableKeyType
-}
-
-export type SelectableState<T extends Selectable> = Map<SelectableKeyType, T>
-
-export type SelectableType = 'single' | 'multiple'
-
-export type SelectableStrategy<T extends Selectable> = {
-  type: () => SelectableType
-  init: (items: T[]) => SelectableState<T>
-  select: (items: T[], selection: SelectableState<T>) => SelectableState<T>
-  unselect: (keys: SelectableKeyType[], selection: SelectableState<T>) => SelectableState<T>
-  toggle: (items: T[], selection: SelectableState<T>) => SelectableState<T>
-  clear: (selection: SelectableState<T>) => SelectableState<T>
-}
-
-export type SelectableAction<T extends Selectable> =
-  | { type: 'select'; payload: T[] }
-  | { type: 'unselect'; payload: SelectableKeyType[] }
-  | { type: 'toggle'; payload: T[] }
-  | { type: 'clear' }
-  | { type: 'reset'; payload: SelectableState<T> }
-
-export interface useSelectableReturn<T extends Selectable> {
-  type: () => SelectableType
-  selected: SelectableState<T>
-  select: (items: T | T[]) => void
-  unselect: (keys: SelectableKeyType | SelectableKeyType[]) => void
-  toggle: (items: T | T[]) => void
-  clear: () => void
-}
-
-export interface useSelectableProps<T extends Selectable> {
-  selected: T | T[]
-  multiple?: boolean
-  onChange?: (selected: SelectableState<T>) => void
-  adapters?: Record<string, SelectableAdapter<T>>
-}

package/src/hooks/useWindowResize/index.ts

@@ -1 +0,0 @@
-export { default } from './useWindowResize'

package/src/hooks/useWindowResize/useWindowResize.ts

@@ -1,27 +0,0 @@
-import { useState, useEffect } from 'react'
-
-function useWindowSize() {
-  const [windowSize, setWindowSize] = useState<{
-    width: number
-    height: number
-  }>({
-    width: window.innerWidth,
-    height: window.innerHeight,
-  })
-
-  useEffect(() => {
-    function handleResize() {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      })
-    }
-
-    window.addEventListener('resize', handleResize)
-
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
-  return windowSize
-}
-
-export default useWindowSize