@northlight/ui 2.41.0 → 2.41.1

package/lib/components/progress/utils.ts

@@ -0,0 +1,17 @@
+export const formattedTime = (seconds: number) => {
+  let baseString = ''
+  const hours = Math.floor(seconds / 3600)
+  if (hours > 0) {
+    baseString += ` ${hours}h`
+  }
+  const minutes = Math.floor((seconds - hours * 3600) / 60)
+  if (minutes > 0) {
+    baseString += ` ${minutes}min`
+  }
+  const newSeconds = Math.floor(seconds - hours * 3600 - minutes * 60)
+  if (newSeconds > 0) {
+    baseString += ` ${newSeconds}s`
+  }
+
+  return baseString
+}

package/lib/components/radio/index.ts

@@ -0,0 +1,8 @@
+export {
+  useRadio,
+  useRadioGroup,
+} from '@chakra-ui/react'
+export * from './radio'
+export * from './radio-group'
+export * from './radio-group-field'
+export * from './types'

package/lib/components/radio/radio-group-field.tsx

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react'
+import { identity } from 'ramda'
+import { RadioFieldGroupProps } from './types'
+import { Field } from '../form'
+import { RadioGroup } from './radio-group'
+import { Box } from '../box'
+
+/**
+ * The radio group component wrapped in a <Field />
+ * meant to be used only inside <Form />
+ * @see RadioGroup
+ * @see Radio
+ * @see {@link https://northlight.dev/reference/radio-group-field}
+ *
+ */
+export const RadioGroupField = forwardRef<HTMLDivElement, RadioFieldGroupProps>(({
+  name,
+  label,
+  children,
+  direction,
+  isRequired,
+  validate,
+  onChange: onChangeCallback = identity,
+  ...rest
+}, ref) => (
+  <Box w={ label ? 'full' : 'fit-content' }>
+    <Field
+      name={ name }
+      label={ label }
+      direction={ direction }
+      isRequired={ isRequired }
+      validate={ validate }
+      ref={ ref }
+    >
+      { ({ onChange, value }) => (
+        <RadioGroup
+          name={ name }
+          onChange={ (e) => { onChange(e); onChangeCallback(e) } }
+          direction={ direction }
+          value={ value }
+          data-testid="radio-group-field-test-id"
+          { ...rest }
+        >
+          { children }
+        </RadioGroup>
+      ) }
+    </Field>
+  </Box>
+))

package/lib/components/radio/radio-group.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { RadioGroup as ChakraRadioGroup } from '@chakra-ui/react'
+import { RadioGroupProps } from './types'
+import { Stack } from '../stack'
+
+/**
+ * Wrapper to select one of multiple options
+ * @see {@link https://northlight.dev/reference/radio-group}
+ * @example
+ * (?
+      <RadioGroup>
+        <HStack>
+          <Radio value="1" />
+          <Radio value="2" />
+          <Radio value="3" />
+        </HStack>
+      </RadioGroup>
+ * ?)
+ *
+ */
+export const RadioGroup = ({
+  direction = 'row',
+  children,
+  name,
+  ...rest
+}: RadioGroupProps) => (
+  <ChakraRadioGroup name={ name } id={ name } { ...rest }>
+    <Stack direction={ direction }>{ children }</Stack>
+  </ChakraRadioGroup>
+)

package/lib/components/radio/radio.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Radio as ChakraRadio } from '@chakra-ui/react'
+import { RadioProps } from './types'
+
+/**
+ * @see RadioGroup
+ * @see {@link https://northlight.dev/reference/radio}
+ */
+export const Radio = ({
+  size = 'md',
+  onChange,
+  name,
+  value,
+  ...rest
+}: RadioProps) => (
+  <ChakraRadio
+    size={ size }
+    id={ name }
+    onChange={ onChange }
+    value={ value }
+    { ...rest }
+  />
+)

package/lib/components/radio/types.ts

@@ -0,0 +1,33 @@
+import { RadioGroupProps as ChakraRadioGroupProps, RadioProps as ChakraRadioProps, StackDirection } from '@chakra-ui/react'
+import { ChangeEvent } from 'react'
+import { RegisterOptions } from 'react-hook-form'
+
+export type RadioProps =
+  ChakraRadioProps
+  & {
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void
+    value?: string
+  }
+
+export type RadioFieldProps =
+  ChakraRadioProps
+  & {
+    value: string
+  }
+
+export type RadioGroupProps =
+    ChakraRadioGroupProps
+    & {
+      direction?: StackDirection
+    }
+
+export type RadioFieldGroupProps =
+    ChakraRadioGroupProps
+    & {
+      direction?: StackDirection
+      name: string
+      label: string
+      validate?: RegisterOptions
+      isRequired?: boolean
+      value?: string
+    }

package/lib/components/range-slider/index.ts

@@ -0,0 +1,7 @@
+export {
+  RangeSlider,
+  RangeSliderTrack,
+  RangeSliderFilledTrack,
+  RangeSliderThumb,
+  RangeSliderMark,
+} from '@chakra-ui/react'

package/lib/components/resize-handle/index.ts

@@ -0,0 +1 @@
+export * from './resize-handle'

package/lib/components/resize-handle/resize-handle.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from 'react'
+import { Box, BoxProps } from '../box'
+import { theme } from '../../theme'
+
+const hoverAndActiveStyles = {
+  borderLeftColor: theme.colors.border['pane-divider'].hover,
+}
+
+export const ResizeHandle = forwardRef<HTMLDivElement, BoxProps>(
+  ({ color, ...rest }, ref) => (
+    <Box
+      ref={ ref }
+      cursor="col-resize"
+      _hover={ hoverAndActiveStyles }
+      _active={ hoverAndActiveStyles }
+      transition="border 250ms linear"
+      h="inherit"
+      w="1"
+      borderLeftWidth="lg"
+      borderLeftStyle="solid"
+      borderColor={ color ?? 'transparent' }
+      zIndex="docked"
+      { ...rest }
+    />
+  )
+)

package/lib/components/search-bar/get-components.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import {
+  ControlProps,
+  DropdownIndicatorProps,
+  GroupBase,
+  MenuProps,
+  MultiValueGenericProps,
+  OptionProps,
+  chakraComponents,
+} from 'chakra-react-select'
+import { merge } from 'ramda'
+import { Box } from '../box'
+import { HStack } from '../stack'
+import { Icon } from '../icon'
+import { SearchBarOptionType } from './types'
+
+export function getComponents<T extends SearchBarOptionType> (
+  components?: Record<string, any>
+) {
+  return merge(
+    {
+      Menu: (props: MenuProps<T>) => (
+        <Box data-testid="select-menu-wrapper-test-id">
+          <chakraComponents.Menu { ...props }>
+            { props.children }
+          </chakraComponents.Menu>
+        </Box>
+      ),
+      DropdownIndicator: (props: DropdownIndicatorProps<T>) =>
+        (props.selectProps.icon ? (
+          <chakraComponents.DropdownIndicator { ...props }>
+            <Icon as={ props.selectProps.icon } />
+          </chakraComponents.DropdownIndicator>
+        ) : (
+          <chakraComponents.DropdownIndicator { ...props } />
+        )),
+      Option: (props: OptionProps<T>) =>
+        (props.selectProps.customOption ? (
+          <chakraComponents.Option { ...props }>
+            { props.selectProps.customOption(props.data) }
+          </chakraComponents.Option>
+        ) : (
+          <chakraComponents.Option { ...props } />
+        )),
+      MultiValueContainer: (
+        props: MultiValueGenericProps<T, boolean, GroupBase<T>>
+      ) =>
+        (props.selectProps.customTag ? (
+          <chakraComponents.MultiValueContainer { ...props }>
+            { props.selectProps.customTag(props.data) }
+          </chakraComponents.MultiValueContainer>
+        ) : (
+          <chakraComponents.MultiValueContainer { ...props } />
+        )),
+      Control: ({
+        children,
+        ...props
+      }: ControlProps<T, boolean, GroupBase<T>>) =>
+        (props.selectProps.leftComponent ? (
+          <chakraComponents.Control { ...props }>
+            <HStack w="full" pl="2">
+              { props.selectProps.leftComponent }
+              <HStack w="full" justify="space-between">
+                { children }
+              </HStack>
+            </HStack>
+          </chakraComponents.Control>
+        ) : (
+          <chakraComponents.Control { ...props }>
+            { children }
+          </chakraComponents.Control>
+        )),
+    },
+    components || {}
+  )
+}

package/lib/components/search-bar/index.ts

@@ -0,0 +1,3 @@
+export * from './search-bar'
+export * from './search-bar-field'
+export * from './types'

package/lib/components/search-bar/search-bar-field.tsx

@@ -0,0 +1,70 @@
+import React, { forwardRef } from 'react'
+import { FieldValues } from 'react-hook-form'
+import { XCloseSolid } from '@northlight/icons'
+import { identity, isEmpty } from 'ramda'
+import { SearchBarFieldProps, SearchBarOptionType } from './types'
+import { Field } from '../form'
+import { SearchBar } from './search-bar'
+import { HStack } from '../stack'
+import { IconButton } from '../icon-button'
+import { Icon } from '../icon'
+import { InputGroupWrapper } from '../../internal-components/input-group-wrapper/input-group-wrapper'
+
+const BaseSearchBarField = <T extends SearchBarOptionType, K extends boolean = false> ({
+  name,
+  label,
+  direction = 'column',
+  isMulti,
+  isRequired,
+  validate,
+  isClearable = true,
+  onChange: onChangeCallback = identity,
+  inputLeftElement,
+  inputRightElement,
+  ...rest
+}: SearchBarFieldProps<T, K>, ref: React.Ref<HTMLDivElement>) => (
+  <Field
+    name={ name }
+    label={ label }
+    direction={ direction }
+    isRequired={ isRequired }
+    noLabelConnection={ true }
+    validate={ validate }
+    ref={ ref }
+  >
+    { ({ value, onChange }) => (
+      <HStack w="full">
+        <InputGroupWrapper
+          inputLeftElement={ inputLeftElement }
+          inputRightElement={ inputRightElement }
+        >
+          <SearchBar
+            name={ name }
+            isMulti={ isMulti }
+            onChange={ (values: FieldValues, event) => {
+              onChange(
+                isMulti
+                  ? values
+                  : values.value
+              )
+              onChangeCallback(values as T | T[], event)
+            } }
+            value={ value }
+            { ...rest }
+          />
+        </InputGroupWrapper>
+        <IconButton
+          aria-label={ `${name}-close-button` }
+          variant="danger"
+          size="lg"
+          fontSize="sm"
+          hidden={ isEmpty(value) || !isClearable }
+          onClick={ () => onChange([]) }
+          icon={ <Icon as={ XCloseSolid } /> }
+        />
+      </HStack>
+    ) }
+  </Field>
+  )
+
+export const SearchBarField = forwardRef(BaseSearchBarField)

package/lib/components/search-bar/search-bar.tsx

@@ -0,0 +1,127 @@
+import React, { forwardRef, useMemo, useState } from 'react'
+import {
+  AsyncSelect,
+  GroupBase,
+  InputActionMeta,
+  SelectInstance,
+} from 'chakra-react-select'
+import { filter, identity, is, test, toLower } from 'ramda'
+import { SearchDuo } from '@northlight/icons'
+import { createDebounceFunctionInstance } from '../../utils'
+import { searchBarStyles } from './styles'
+import { useSelectCallbacks } from '../../hooks'
+import { Box } from '../box'
+import { SearchBarOptionType, SearchBarProps } from './types'
+import { getComponents } from './get-components'
+
+export const SearchBar = forwardRef(
+  <T extends SearchBarOptionType, K extends boolean = false>({
+    defaultOptions = [],
+    isMulti,
+    customOption = null,
+    customTag = null,
+    sx = {},
+    debouncedWaitTime = 200,
+    loadOptions: getCustomOptions = null,
+    clearInputOnSelect = true,
+    closeMenuOnSelect = false,
+    onChange = identity,
+    onAdd = identity,
+    onRemove = identity,
+    'data-testid': testId,
+    value,
+    onSearchInputChange = identity,
+    icon = SearchDuo,
+    ...rest
+  }: SearchBarProps<T, K>,
+    ref: React.Ref<SelectInstance<T, K, GroupBase<T>>>
+  ) => {
+    const [ filtered, setFiltered ] = useState(defaultOptions)
+    const [ filterInput, setFilterInput ] = useState('')
+    const debounceFunction = useMemo(
+      () => createDebounceFunctionInstance(debouncedWaitTime),
+      [ debouncedWaitTime ]
+    )
+    const handleChange = useSelectCallbacks<T, K>({
+      onChange,
+      onAdd,
+      onRemove,
+      isMulti,
+      value: is(Array, value) ? value as T[] : [],
+    })
+
+    const customComponents = useMemo(
+      () => getComponents<T>(),
+      []
+    )
+
+    const simpleFilter = (query: string) => {
+      if (typeof defaultOptions === 'boolean') return []
+      return filter(
+        (option: T) =>
+          test(new RegExp(toLower(query), 'g'), toLower(option.label)),
+        defaultOptions
+      )
+    }
+    const getOptions = async (query: string) => {
+      const newOptions = getCustomOptions
+        ? await getCustomOptions(query)
+        : simpleFilter(query)
+      setFiltered((prev) => {
+        // If default value is a boolean we want default value to persist to it's initial value
+        // this is to allow pre-fetching of values on first render
+        if (typeof prev === 'boolean') return prev
+        return newOptions
+      })
+
+      return newOptions
+    }
+
+    const loadOptions = debounceFunction(async (
+      query: string,
+      callback: (options: T[]) => void
+    ) => {
+      const newOptions = await getOptions(query)
+      callback(newOptions)
+      return []
+    })
+
+    const resetFiltered = (v: string, { action }: InputActionMeta) => {
+      if (clearInputOnSelect || action !== 'set-value') {
+        setFilterInput(v)
+        onSearchInputChange(v)
+        if (v === '') {
+          setFiltered(defaultOptions)
+        }
+      }
+    }
+
+    return (
+      <Box w="full" data-testid={ testId }>
+        <AsyncSelect<T, K>
+          cacheOptions={ true }
+          defaultOptions={ filtered }
+          loadOptions={ loadOptions }
+          onChange={ handleChange }
+          placeholder="Search..."
+          chakraStyles={ searchBarStyles(sx) }
+          isMulti={ isMulti }
+          useBasicStyles={ true }
+          selectedOptionStyle="check"
+          hideSelectedOptions={ false }
+          closeMenuOnSelect={ closeMenuOnSelect }
+          isClearable={ false }
+          onInputChange={ resetFiltered }
+          inputValue={ filterInput }
+          customOption={ customOption }
+          customTag={ customTag }
+          icon={ icon }
+          components={ customComponents }
+          ref={ ref }
+          value={ value }
+          { ...rest }
+        />
+      </Box>
+    )
+  }
+)

package/lib/components/search-bar/styles.ts

@@ -0,0 +1,49 @@
+import { ChakraStylesConfig } from 'chakra-react-select'
+import { merge } from 'ramda'
+import { getContrastColor } from '../../utils'
+
+export const searchBarStyles = (
+  sx: ChakraStylesConfig<any>
+): ChakraStylesConfig<any> =>
+  merge({
+    container: (provided) => ({
+      ...provided,
+      width: '100%',
+      color: 'text.default',
+      alignSelf: 'center',
+    }),
+    option: (provided, state) => ({
+      ...provided,
+      background: state.isFocused && 'background.select.option-focus',
+      _active: {
+        background: 'background.select.option-active',
+      },
+    }),
+    valueContainer: (provided) => ({
+      ...provided,
+      paddingInlineStart: 'padding-inline.select.default',
+    }),
+    downChevron: (provided) => ({
+      ...provided,
+      color: 'icon.select.default',
+    }),
+    placeholder: (provided) => ({
+      ...provided,
+      color: 'text.select.placeholder',
+    }),
+    multiValue: (provided, state) => {
+      const background = state.data.isFixed
+        ? 'background.select.option-disabled'
+        : state.data.color ?? provided.bgColor
+      return {
+        ...provided,
+        bgColor: background,
+        color: getContrastColor(background),
+        ...sx.multiValue,
+      }
+    },
+    menuList: (provided) => ({
+      ...provided,
+      bgColor: 'background.default',
+    }),
+  } as ChakraStylesConfig<any>, sx)

package/lib/components/search-bar/types.ts

@@ -0,0 +1,53 @@
+import { ComponentType } from 'react'
+import { StackDirection } from '@chakra-ui/react'
+import {
+  ActionMeta,
+  Props as ChakraReactSelectProps,
+  ChakraStylesConfig,
+  GroupBase,
+} from 'chakra-react-select'
+import { RegisterOptions } from 'react-hook-form'
+import { InputFieldProps } from '../../types'
+
+type Size = 'sm' | 'md' | 'lg'
+export interface SearchBarOptionType {
+  label: string
+  value: any
+}
+
+export type CustomElementType<T extends SearchBarOptionType> = ((
+  props: T
+) => JSX.Element)
+| null
+export interface SearchBarProps<T extends SearchBarOptionType, K extends boolean = false>
+  extends Omit<
+  ChakraReactSelectProps<T, boolean, GroupBase<T>>,
+  'onChange' | 'value'
+  > {
+  value?: T | T[]
+  onChange?: (val: any, event: ActionMeta<T>) => void
+  onAdd?: (val: unknown) => void
+  onRemove?: (val: unknown) => void
+  size?: Size
+  'data-testid'?: string
+  debouncedWaitTime?: number
+  clearInputOnSelect?: boolean
+  closeMenuonSelect?: boolean
+  defaultOptions?: T[] | boolean
+  sx?: ChakraStylesConfig<any>
+  isMulti?: K
+  customOption?: CustomElementType<T>
+  customTag?: CustomElementType<T>
+  loadOptions?: ((query: string) => Promise<T[]>) | null
+  onSearchInputChange?: (input: string) => void
+  icon?: ComponentType<any>
+}
+
+export interface SearchBarFieldProps<T extends SearchBarOptionType, K extends boolean = false> extends Omit<SearchBarProps<T, K>, 'onChange'>, InputFieldProps {
+  onChange?: (val: T | T[], event: ActionMeta<T>) => void
+  direction?: StackDirection
+  name: string
+  label: string
+  validate?: RegisterOptions
+  isRequired?: boolean
+}

package/lib/components/select/get-matching-value.ts

@@ -0,0 +1,23 @@
+import { filter, find, is, length, propEq } from 'ramda'
+import { Option, SelectProps } from './types'
+
+const isStringArray = (value: any): value is string[] =>
+  is(Array, value) && length(value) > 0 && typeof value[0] === 'string'
+
+export const getMatchingValue = <T extends Option, K extends boolean>(
+  value: SelectProps<T, K>['value'],
+  options: SelectProps<T, K>['options']
+): T | T[] | undefined => {
+  if (typeof value === 'string') {
+    return find(propEq('value', value), options as T[])
+  }
+
+  if (isStringArray(value)) {
+    return filter(
+      (option) => (value).includes(option.value),
+      options as T[]
+    )
+  }
+
+  return value as K extends true ? T[] : T
+}

package/lib/components/select/index.ts

@@ -0,0 +1,13 @@
+export {
+  Select as ChakraReactSelect,
+  AsyncCreatableSelect,
+  AsyncSelect,
+  CreatableSelect,
+  chakraComponents as selectChakraComponents,
+} from 'chakra-react-select'
+
+export * from './select'
+export * from './select-field'
+export * from './sortable-select'
+export * from './types'
+export * from './get-matching-value'