@northlight/ui 2.41.0 → 2.41.1

package/lib/components/circular-progress/index.ts

@@ -0,0 +1,4 @@
+export {
+  CircularProgress,
+  CircularProgressLabel,
+} from '@chakra-ui/react'

package/lib/components/clickable/clickable.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Link, chakra } from '@chakra-ui/react'
+import { Link as ReactRouterLink } from 'react-router-dom'
+import { useClickable } from '@chakra-ui/clickable'
+import { isNil } from 'ramda'
+import { ClickableProps } from './types'
+import { ring } from '../../utils'
+
+/**
+ * Wrapper component to make children interactive
+ * by taking care of focus/accessibility, will render
+ * either a link or button depending on if passing
+ * an href
+ * @see {@link https://northlight.dev/reference/clickable}
+ * @example (Example)
+ * ### Click to send notification
+ * (?
+ * () => {
+ * const [ count, setCount ] = useState(0)
+ * return (
+ *             <Clickable onClick={ () => setCount((prev) => prev + 1) }>
+              <Avatar name="anakin skywalker" variant="rounded" notificationCount={count}/>
+            </Clickable>
+ * )
+ * }
+ * ?)
+ * @example (Example)
+ * ### Rendering a link if passing href
+ * (?
+          <Clickable href="/reference/select">
+            <Center boxSize="3xs" bgColor="gray.50">
+              Link
+            </Center>
+          </Clickable>
+ * ?)
+ *
+ */
+export const Clickable = ({ href, linkProps, ...rest }: ClickableProps) => {
+  const clickable = useClickable(rest)
+
+  return (
+    <>
+      { !isNil(href) && (
+        <Link
+          as={ ReactRouterLink }
+          _focusVisible={ ring }
+          to={ href }
+          _hover={ { textDecoration: 'none' } }
+          { ...linkProps }
+          { ...clickable }
+        />
+      ) }
+      { isNil(href) && <chakra.button _focusVisible={ ring } { ...clickable } /> }
+    </>
+  )
+}

package/lib/components/clickable/index.ts

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

package/lib/components/clickable/types.ts

@@ -0,0 +1,7 @@
+import { UseClickableProps } from '@chakra-ui/clickable'
+import { LinkProps } from '@chakra-ui/react'
+
+export interface ClickableProps extends UseClickableProps {
+  href?: string
+  linkProps?: LinkProps
+}

package/lib/components/clipboard-input/clipboard-input.tsx

@@ -0,0 +1,65 @@
+import React, { forwardRef, useEffect } from 'react'
+import { useClipboard, useMultiStyleConfig } from '@chakra-ui/react'
+import { CheckDuo, CopyDuo } from '@northlight/icons'
+import { IconButton } from '../icon-button'
+import { Icon } from '../icon'
+import { Tooltip } from '../tooltip'
+import { Input, InputGroup, InputRightElement } from '../input'
+import { ClipboardInputProps } from './types'
+
+/**
+ * Meant to display non editable copiable text
+ * @see {@link https://northlight.dev/reference/clipboard-input}
+ *
+ * @example (Example)
+ * ## Your token
+ * (?
+ * <ClipboardInput value="8aa6d075-eae2-49b3-8f65-318ece801b3b" aria-label="Copy token" />
+ * ?)
+ *
+ */
+export const ClipboardInput = forwardRef<HTMLDivElement, ClipboardInputProps>(({
+  size = 'md',
+  value,
+  'aria-label': ariaLabel,
+  ...rest
+}, ref) => {
+  const { hasCopied, onCopy, setValue } = useClipboard(value)
+  const { button, icon, tooltip } = useMultiStyleConfig('ClipboardInput', { size })
+
+  useEffect(() => {
+    setValue(value)
+  }, [ value ])
+
+  return (
+    <InputGroup size={ size } data-testid="clipboard-input-test-id" ref={ ref }>
+      <Input
+        textOverflow="ellipsis"
+        aria-label={ `Value to copy: ${value}` }
+        isReadOnly={ true }
+        value={ value }
+        { ...rest }
+      />
+      <InputRightElement>
+        <Tooltip
+          label={ hasCopied ? 'Copied!' : 'Copy' }
+          placement="left"
+          closeOnClick={ false }
+          sx={ tooltip }
+        >
+          <IconButton
+            aria-label={ ariaLabel || 'Click to copy' }
+            onClick={ onCopy }
+            variant={ hasCopied ? 'success' : 'default' }
+            sx={ button }
+          >
+            <Icon
+              as={ hasCopied ? CheckDuo : CopyDuo }
+              sx={ icon }
+            />
+          </IconButton>
+        </Tooltip>
+      </InputRightElement>
+    </InputGroup>
+  )
+})

package/lib/components/clipboard-input/index.ts

@@ -0,0 +1,2 @@
+export * from './clipboard-input'
+export * from './types'

package/lib/components/clipboard-input/types.ts

@@ -0,0 +1,6 @@
+import { InputProps as ChakraInputProps } from '@chakra-ui/react'
+
+export interface ClipboardInputProps extends ChakraInputProps {
+  value: string
+  size?: 'sm' | 'md' | 'lg'
+}

package/lib/components/close-button/index.ts

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

package/lib/components/code/index.ts

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

package/lib/components/color-picker/color-button.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react'
+import { useMultiStyleConfig } from '@chakra-ui/react'
+import { CheckDuo } from '@northlight/icons'
+import { getContrastColor } from '../../utils'
+import { Icon } from '../icon'
+import { IconButton } from '../icon-button'
+import { Box } from '../box'
+import { ColorButtonProps } from './types'
+import { columns } from './constants'
+import { useArrowFocus } from '../../hooks'
+
+export const ColorButton = forwardRef(({
+  color,
+  onClick,
+  size,
+  selected = false,
+}: ColorButtonProps, ref: any) => {
+  if (!color) return <Box />
+  const { defaultArrows, focusPrevious, focusNext } = useArrowFocus(columns)
+
+  const onKeyDown = (e: any) => {
+    switch (e.key) {
+      case 'PageUp':
+        e.preventDefault()
+        focusPrevious({ wrap: false, repeat: columns * 5 })
+        break
+      case 'PageDown':
+        e.preventDefault()
+        focusNext({ wrap: false, repeat: columns * 5 })
+        break
+      default:
+        defaultArrows(e)
+        break
+    }
+  }
+
+  const { colorButton } = useMultiStyleConfig('ColorPicker', { size })
+
+  return (
+    <IconButton
+      bg={ color }
+      ref={ ref }
+      onKeyDown={ onKeyDown }
+      aria-label={ `select-${color}` }
+      onClick={ onClick }
+      sx={ colorButton }
+      icon={ <Icon as={ CheckDuo } boxSize={ selected ? undefined : '0' } /> }
+      color={ getContrastColor(color) }
+    />
+  )
+})

package/lib/components/color-picker/color-picker-field.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Field } from '../form'
+import { ColorPicker } from './color-picker'
+import { ColorPickerFieldProps } from './types'
+
+/**
+ * The <ColorPicker /> component wrapped in a <Field />
+ * meant to be used only inside <Form />
+ * @see ColorPicker
+ * @see {@link https://northlight.dev/reference/color-picker}
+ *
+ */
+export const ColorPickerField = ({
+  name,
+  label,
+  direction,
+  isRequired,
+  validate,
+  ...rest
+}: ColorPickerFieldProps) => (
+  <Field
+    name={ name }
+    label={ label }
+    direction={ direction }
+    isRequired={ isRequired }
+    validate={ validate }
+  >
+    { ({ onChange, value }) => (
+      <ColorPicker
+        name={ name }
+        onChange={ onChange }
+        value={ value }
+        { ...rest }
+      />
+    ) }
+  </Field>
+)

package/lib/components/color-picker/color-picker.tsx

@@ -0,0 +1,205 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { ColorsDuo } from '@northlight/icons'
+import { FocusScope } from '@react-aria/focus'
+import { useMultiStyleConfig, useToken } from '@chakra-ui/react'
+import { useBoolean, useDisclosure } from '../../hooks'
+import { SimpleGrid } from '../simple-grid'
+import { Stack } from '../stack'
+import { IconButton } from '../icon-button'
+import { Icon } from '../icon'
+import { Box } from '../box'
+import { ColorPickerProps } from './types'
+import { ColorButton } from './color-button'
+import { columns, defaultColors, paletteColors } from './constants'
+import {
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+} from '../popover'
+import { ColorsExpandButton } from './colors-expand-button'
+import { Button } from '../button'
+import { RenderInPortal } from '../portal/render-in-portal'
+
+/**
+ * Dropdown menu where user can select hex value
+ * from set colors
+ * @see {@link https://northlight.dev/reference/color-picker}
+ *
+ * @example (Example)
+ * ##Pick a color for this campaign
+ * (?
+ * () => {
+ * const [ color, setColor ] = useState(undefined)
+ * return (
+ * <HStack>
+ * <ColorPicker color={color} onChange={setColor}/>
+ *   <ClipboardInput value={ color } />
+
+ * </HStack>
+ * )
+ * }
+ *
+ * ?)
+ *
+ *
+ */
+export const ColorPicker = ({
+  onChange = () => {},
+  clearable = false,
+  colors = defaultColors,
+  expandedColors = paletteColors,
+  value = null,
+  name,
+  size = 'md',
+  shouldRenderInPortal = false,
+  popoverProps,
+  ...rest
+}: ColorPickerProps) => {
+  const { isOpen, onToggle, onClose } = useDisclosure()
+  const [ expanded, setExpanded ] = useBoolean()
+  const [ selectedColor, setSelectedColor ] = useState(value)
+  const [ visibleColors, setVisibleColors ] = useState(colors)
+  const initialFocusRef = useRef(null)
+  const {
+    trigger,
+    heading,
+  } = useMultiStyleConfig('ColorPicker', { selectedColor, size })
+  const parsedValue = value && useToken('colors', value)
+
+  const baseColors = [ ...colors ]
+  for (let i = 0; i < baseColors.length % columns; i += 1) {
+    baseColors.push('')
+  }
+
+  useEffect(() => {
+    if (value === '') {
+      setSelectedColor(null)
+    } else {
+      setSelectedColor(parsedValue)
+    }
+  }, [ value ])
+
+  useEffect(() => {
+    if (expanded) {
+      setVisibleColors((prev) => prev.concat(expandedColors))
+    } else {
+      setVisibleColors(baseColors)
+    }
+  }, [ expanded ])
+
+  const expandColors = () => {
+    setExpanded.toggle()
+  }
+
+  const getNumberOfColumns = () => {
+    if (expanded) return columns
+    if (colors.length < columns && colors.length > 2) {
+      return colors.length
+    }
+    if (colors.length < columns) {
+      return 3
+    }
+    return columns
+  }
+
+  const shouldBeFocused = (index: number) => (
+    selectedColor
+      ? index === visibleColors.findIndex((colorVal) => colorVal === selectedColor)
+      : index === 0
+  )
+
+  const handleSelect = (color: string) => {
+    onToggle()
+    setSelectedColor(color)
+    onChange(color)
+  }
+
+  const clearSelection = () => {
+    setSelectedColor(null)
+    onChange(null)
+  }
+
+  return (
+    <Box data-testid="color-picker-test-id">
+      <Popover
+        isOpen={ isOpen }
+        onClose={ onClose }
+        initialFocusRef={ initialFocusRef }
+        { ...popoverProps }
+      >
+        <PopoverTrigger>
+          <IconButton
+            onClick={ onToggle }
+            aria-label={ name || 'color picker' }
+            name={ name }
+            sx={ trigger }
+            size={ size }
+            icon={ <Icon as={ ColorsDuo } /> }
+            { ...rest }
+          />
+        </PopoverTrigger>
+        <RenderInPortal shouldRenderInPortal={ shouldRenderInPortal }>
+          <PopoverContent w="auto" boxShadow="md" p={ 2 } bgColor="background.default">
+            <Stack>
+              <PopoverHeader
+                color="text.default"
+                sx={ heading }
+                display="flex"
+                alignItems="center"
+                justifyContent="space-between"
+                width="full"
+              >
+                Pick a color
+                { clearable && trigger.color !== 'unset' && (
+                <Button
+                  size="sm"
+                  h="5"
+                  onClick={ clearSelection }
+                  variant="ghost"
+                >
+                  Clear
+                </Button>
+                ) }
+              </PopoverHeader>
+              <PopoverBody p={ 0 }>
+                <Stack alignItems="center" p={ 0 } spacing={ 0 }>
+                  <FocusScope>
+                    <SimpleGrid
+                      columns={ getNumberOfColumns() }
+                      spacing={ 2 }
+                      overflowY="scroll"
+                      maxH={ 72 }
+                      pr={ 2 }
+                      pl={ 4 }
+                      py={ 1 }
+                    >
+                      { visibleColors.map((color, index) => (
+                        <ColorButton
+                          color={ color }
+                          key={ `${color}-button-${index as number}` }
+                          selected={ color === selectedColor }
+                          ref={ shouldBeFocused(index) ? initialFocusRef : undefined }
+                          size={ size }
+                          onClick={ () => handleSelect(color) }
+                        />
+                      )) }
+                    </SimpleGrid>
+                    { expandedColors.length > 0 && (
+                    <ColorsExpandButton
+                      onClick={ expandColors }
+                      expanded={ expanded }
+                      size={ size }
+                    />
+                    ) }
+                  </FocusScope>
+                </Stack>
+              </PopoverBody>
+            </Stack>
+          </PopoverContent>
+        </RenderInPortal>
+      </Popover>
+    </Box>
+  )
+}

package/lib/components/color-picker/colors-expand-button.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { ChevronDownDuo, ChevronUpDuo } from '@northlight/icons'
+import { useMultiStyleConfig } from '@chakra-ui/react'
+import { IconButton } from '../icon-button'
+import { Icon } from '../icon'
+import { columns } from './constants'
+import { ColorsExpandButtonProps } from './types'
+import { useArrowFocus } from '../../hooks'
+
+export const ColorsExpandButton = ({
+  onClick,
+  size,
+  expanded,
+}: ColorsExpandButtonProps) => {
+  const { defaultArrows, focusPrevious, focusFirst } = useArrowFocus(columns)
+  const { colorButton } = useMultiStyleConfig('ColorPicker', { size })
+  const onKeyDown = (e: any) => {
+    switch (e.key) {
+      case 'Tab':
+        focusFirst()
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        focusPrevious({ wrap: true, repeat: 1 })
+        break
+      case 'PageUp':
+        e.preventDefault()
+        focusPrevious({ wrap: false, repeat: columns * 5 })
+        break
+      default:
+        defaultArrows(e)
+        break
+    }
+  }
+
+  return (
+    <IconButton
+      variant="ghost"
+      onKeyDown={ onKeyDown }
+      aria-label="display more colors"
+      onClick={ onClick }
+      sx={ colorButton }
+    >
+      <Icon as={ expanded ? ChevronUpDuo : ChevronDownDuo } />
+    </IconButton>
+  )
+}

package/lib/components/color-picker/constants.ts

@@ -0,0 +1,5 @@
+import { getShades } from '../../utils'
+
+export const columns = 5
+export const paletteColors = getShades(100, 500)
+export const defaultColors = getShades(500)

package/lib/components/color-picker/index.ts

@@ -0,0 +1,3 @@
+export * from './color-picker'
+export * from './color-picker-field'
+export * from './types'

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

@@ -0,0 +1,44 @@
+import { IconButtonProps, PopoverProps, StackDirection } from '@chakra-ui/react'
+import { RegisterOptions } from 'react-hook-form'
+
+type ColorPickerSize = 'sm' | 'md' | 'lg'
+
+export interface ColorPickerProps
+  extends Omit<
+  IconButtonProps,
+  'onChange' | 'value' | 'aria-label' | 'variant'
+  > {
+  onChange?: (value: string | null) => void
+  /** This are what color options the user can choose */
+  colors?: string[]
+  /** This are the extended color options  displayed when clicking the down caret */
+  expandedColors?: string[]
+  clearable?: boolean
+  value?: string | null
+  size?: ColorPickerSize
+  name?: string
+  popoverProps?: PopoverProps
+  shouldRenderInPortal?: boolean
+}
+
+export type ColorButtonProps = {
+  color: string
+  onClick: () => void
+  size?: ColorPickerSize
+  selected?: boolean
+}
+
+export type ColorsExpandButtonProps = {
+  onClick: () => void
+  size: ColorPickerSize
+  expanded: boolean
+}
+
+export type ColorPickerFieldProps = ColorPickerProps & {
+  name: string
+  label: string
+  validate?: RegisterOptions
+  size?: ColorPickerSize
+  isRequired?: boolean
+  direction?: StackDirection
+}

package/lib/components/combo-picker/combo-picker-field.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { ComboPickerFieldProps } from './types'
+import { ComboPicker } from './combo-picker'
+import { Field } from '../form'
+
+/**
+ * The <ComboPicker /> component wrapped in a <Field />
+ * meant to be used only inside <Form />
+ * @see ComboPicker
+ * @see {@link https://northlight.dev/reference/combo-picker}
+ *
+ * @example (Example)
+ * ##Default number format preset(EU) with default decimals(2):
+ * (?
+ * <Form initialValues={{"budget": {input: 123456789.123, option:{label: 'EUR', value: 'eur'}}}}>
+ * <ComboPickerField
+ *         label="Budget"
+ *         name="budget"
+ *         placeholder="Amount"
+ *         options={ [
+ *           { label: 'USD', value: 'usd' },
+ *           { label: 'EUR', value: 'eur' },
+ *           { label: 'SEK', value: 'sek' },
+ *        ] }
+ *      />
+ * </Form>
+ *
+ * ?)
+ * <br />
+  * ##US number format preset with three decimals as Disabled:
+ * (?
+ * <Form initialValues={{"budget": {input: 123456789.1234, option:{label: 'USD', value: 'usd'}}}}>
+ * <ComboPickerField
+ *         label="Budget"
+ *         name="budget"
+ *         precision={ 3 }
+ *         isDisabled={true}
+ *         formatPreset='us'
+ *         options={ [
+ *           { label: 'USD', value: 'usd' },
+ *           { label: 'EUR', value: 'eur' },
+ *           { label: 'SEK', value: 'sek' },
+ *        ] }
+ *      />
+ * </Form>
+ *
+ * ?)
+ * <br />
+ * ##NOR number format preset with four decimals as ReadOnly:
+ * (?
+ * <Form initialValues={{"budget": {input: 123456789.1234, option:{label: 'SEK', value: 'sek'}}}}>
+ * <ComboPickerField
+ *         label="Budget"
+ *         name="budget"
+ *         precision={ 4 }
+ *         isReadOnly={true}
+ *         formatPreset='nor'
+ *         options={ [
+ *           { label: 'USD', value: 'usd' },
+ *           { label: 'EUR', value: 'eur' },
+ *           { label: 'SEK', value: 'sek' },
+ *        ] }
+ *      />
+ * </Form>
+ *
+ * ?)
+ * <br />
+ */
+export const ComboPickerField = ({
+  name,
+  isRequired,
+  direction = 'column',
+  label,
+  validate,
+  onChange: onChangeCallback,
+  ...rest
+}: ComboPickerFieldProps) => (
+  <Field
+    name={ name }
+    label={ label }
+    direction={ direction }
+    isRequired={ isRequired }
+    validate={ validate }
+  >
+    { ({ value, onChange }) => (
+      <ComboPicker
+        data-testid="combo-picker-test-id"
+        aria-label={ label }
+        onChange={ (comboPickerValue) => {
+          onChange(comboPickerValue)
+          onChangeCallback?.(comboPickerValue)
+        } }
+        value={ value }
+        { ...rest }
+      />
+    ) }
+  </Field>
+
+)