@northlight/ui 2.41.0 → 2.41.1

package/lib/components/number-input/number-input-stepper.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import {
+  NumberInputStepper as ChakraNumberInputStepper,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+} from '@chakra-ui/react'
+import { ChevronDownSolid, ChevronUpSolid } from '@northlight/icons'
+import { Icon } from '../icon'
+import { HStack } from '../stack'
+import { Divider } from '../divider'
+import { P } from '../typography'
+import { Center } from '../center'
+import { NumberInputStepperProps } from './types'
+
+export const NumberInputStepper = ({
+  includePercentage = false,
+  enableStepperArrows = false,
+}: NumberInputStepperProps) => (
+  <ChakraNumberInputStepper>
+    <HStack alignItems="center" h="full">
+      { includePercentage && (
+        <Center bgColor="bg.layer" borderRadius="md" boxSize="6">
+          <P>%</P>
+        </Center>
+      ) }
+      { enableStepperArrows && (
+        <HStack alignItems="center" h="full">
+          <Divider orientation="vertical" h="50%" />
+          <NumberIncrementStepper border="none">
+            <Icon
+              as={ ChevronUpSolid }
+              color="icon.input-stepper.default"
+              boxSize={ 4 }
+            />
+          </NumberIncrementStepper>
+          <NumberDecrementStepper>
+            <Icon
+              as={ ChevronDownSolid }
+              color="icon.input-stepper.default"
+              boxSize={ 4 }
+            />
+          </NumberDecrementStepper>
+        </HStack>
+      ) }
+    </HStack>
+  </ChakraNumberInputStepper>
+)

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

@@ -0,0 +1,67 @@
+import React, { ChangeEvent } from 'react'
+import {
+  NumberInput as ChakraNumberInput,
+  NumberInputField,
+} from '@chakra-ui/react'
+import { defaultTo, identity, path } from 'ramda'
+import { NumberInputStepper } from './number-input-stepper'
+import { NumberInputProps } from './types'
+import { advancedParseFloat } from './advanced-parse-float'
+
+/**
+ * Basic accessible input that only allows numbers, with support for arrow keys,
+ *  min max values and percentages
+ *
+ * @example
+ * (?
+ * <Box p="3">
+ * <NumberInput max={100} min={0} step={3} onlyAcceptPercentage={true} enableStepperArrows={true}/>
+ * </Box>
+ * ?)
+ *
+ */
+export const NumberInput = ({
+  variant = 'default',
+  size = 'md',
+  onChange = identity,
+  onInputChange = identity,
+  enableStepperArrows = false,
+  name,
+  onlyAcceptPercentage = false,
+  ...rest
+}: NumberInputProps) => {
+  const percentageProps = onlyAcceptPercentage && {
+    step: 0.1,
+  }
+
+  const percentageFactor = onlyAcceptPercentage ? 0.01 : 1
+  const handleChange = (e: ChangeEvent<HTMLInputElement> | string) => {
+    const input = defaultTo(e, path([ 'target', 'value' ], e)) as string
+    onInputChange(input)
+
+    const value = advancedParseFloat(parseFloat(input) * percentageFactor)
+
+    const filteredNaN = Number.isNaN(value)
+      ? ''
+      : value
+
+    onChange(`${filteredNaN}`)
+  }
+
+  return (
+    <ChakraNumberInput
+      variant={ variant }
+      size={ size }
+      onChange={ handleChange }
+      id={ name }
+      { ...percentageProps }
+      { ...rest }
+    >
+      <NumberInputField onChange={ handleChange } />
+      <NumberInputStepper
+        includePercentage={ onlyAcceptPercentage }
+        enableStepperArrows={ enableStepperArrows }
+      />
+    </ChakraNumberInput>
+  )
+}

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

@@ -0,0 +1,37 @@
+import { NumberInputProps as ChakraNumberInputProps, StackDirection } from '@chakra-ui/react'
+import { RegisterOptions } from 'react-hook-form'
+import { InputFieldProps } from '../../types'
+
+export type NumberInputSizeProps = 'sm' | 'md' | 'lg'
+
+export interface NumberInputProps extends ChakraNumberInputProps {
+  size?: NumberInputSizeProps
+  onChange?: (...event: any[]) => void
+  onlyAcceptPercentage?: boolean
+  onInputChange?: (input: string) => void
+  /** If true it will show arrows on far right of number input that when clicked can
+   * increment and decrement the number value.
+   */
+  enableStepperArrows?: boolean
+}
+
+export type NumberInputFieldProps =
+  Omit<NumberInputProps, 'onChange'>
+  & InputFieldProps
+  & {
+    name: string
+    label: string
+    validate?: RegisterOptions
+    size?: NumberInputSizeProps
+    isRequired?: boolean
+    unit?: string
+    direction?: StackDirection
+    onChange?: (e: number | string) => void
+    inputLeftElement?: React.ReactNode
+    inputRightElement?: React.ReactNode
+  }
+
+export interface NumberInputStepperProps {
+  includePercentage?: boolean
+  enableStepperArrows?: boolean
+}

package/lib/components/organization-logo/index.ts

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

package/lib/components/organization-logo/organization-logo.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { chakra, useMultiStyleConfig } from '@chakra-ui/react'
+import { OrganizationLogoProps } from './types'
+
+/**
+ * @see {@link https://northlight.dev/reference/organization-logo}
+ *
+ * @example
+ * (?
+ * <OrganizationLogo name="mediatool" />
+ * ?)
+ *
+ */
+export const OrganizationLogo = ({
+  name,
+  image,
+  variant = 'square',
+  ...rest
+}: OrganizationLogoProps) => {
+  const getInitials = (orgName: string) => orgName[0].toUpperCase()
+  const {
+    container,
+    text,
+  } = useMultiStyleConfig('Avatar', { variant, image, ...rest })
+
+  return (
+    <chakra.div
+      __css={ container }
+      data-testid="organization-logo-test-id"
+      { ...rest }
+    >
+      { image ? (
+        <chakra.img
+          alt={ name }
+          src={ image }
+        />
+      )
+        : (
+          <chakra.span __css={ text }>
+            { getInitials(name) }
+          </chakra.span>
+        )
+      }
+    </chakra.div>
+  )
+}

package/lib/components/organization-logo/types.ts

@@ -0,0 +1,8 @@
+import {
+  AvatarProps,
+} from '@chakra-ui/react'
+
+export interface OrganizationLogoProps extends AvatarProps {
+  name: string
+  image?: string
+}

package/lib/components/overflow-group/index.ts

@@ -0,0 +1,3 @@
+export * from './types'
+export * from './overflow-group'
+export * from './use-overflow-group'

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

@@ -0,0 +1,189 @@
+import React, { Children, useEffect, useRef, useState } from 'react'
+import { always, dec, defaultTo, gt, identity, ifElse, inc, isNil, take } from 'ramda'
+import { OverflowGroupProps } from './types'
+import { getChildrenWithProps } from '../../utils'
+
+const positiveOrZero = ifElse(gt(0), always(0), identity)
+const EMPTY_RECT = {
+  clientWidht: 0,
+  clientHeight: 0,
+}
+const EMPTY_WINDOW = {
+  innerWidth: 0,
+  innerHeight: 0,
+}
+
+/**
+ * Util wrapper for lists by only rendering as many items as fit per the specification
+ * @see {@link https://northlight.dev/reference/overflow-group}
+ * @example
+ * (?
+ * +
+ *
+const CustomSlider = ({ onChange }) => (
+  <Slider min={ 100 } max={ 300 } step={ 1 } onChange={ onChange }>
+    <SliderTrack>
+      <SliderFilledTrack />
+    </SliderTrack>
+    <SliderThumb />
+  </Slider>
+)
+ *
+
+const arrayWithLength = (n) => {
+  let buffer = []
+  for(let i = 0; i < n; i++) {
+    buffer.push(i)
+  }
+  return buffer
+}
+ * const MyComponent =  () => {
+ *   const [ n, setN ] = useState(5)
+  const [ max, setMax ] = useState(10)
+  const [ width, setWidth ] = useState(200)
+  const [ height, setHeight ] = useState(200)
+  const { containerRef, rect } = useOverflowGroup()
+  const [ nbrRemainingItems, setNbrRemainingItems ] = useState(0)
+ * return (
+ *   <Stack mb={ 4 } spacing={ 4 } w="40%">
+          <Stack h="300px">
+            <Wrap
+              w={ width }
+              h={ height }
+              ref={ containerRef }
+              borderWidth="2px"
+              borderColor="gray.200"
+              borderStyle="solid"
+              p="2"
+              borderRadius="md"
+            >
+              <OverflowGroup
+                max={ max }
+                rect={ rect }
+                onChange={ setNbrRemainingItems }
+              >
+                { arrayWithLength(n).map((i) => (
+                  <Badge key={ i } h="max-content">
+                    Item { i }
+                  </Badge>
+                )) }
+              </OverflowGroup>
+              { nbrRemainingItems > 0 && (
+                <Tag w="fit-content">+{ nbrRemainingItems }</Tag>
+              ) }
+            </Wrap>
+          </Stack>
+          <Stack bgColor="gray.50" p="2" borderRadius="md">
+            <HStack>
+              <Label>Height</Label>
+              <CustomSlider onChange={ setHeight } />
+            </HStack>
+            <HStack>
+              <Label>Width</Label>
+              <CustomSlider onChange={ setWidth } />
+            </HStack>
+            <HStack>
+              <Label>Number of items </Label>
+              <NumberInput onChange={ (v) => setN(Number(v)) } value={ n } />
+            </HStack>
+            <HStack>
+              <Label>Render max </Label>
+              <NumberInput onChange={ (v) => setMax(Number(v)) } value={ max } />
+            </HStack>
+          </Stack>
+        </Stack>
+ * )}
+render(<MyComponent/>)
+ * ?)
+<br />
+The overflow group requires either a max prop for a set limit, or a rect prop,
+ for a dynamic, responsive layouts. The rect prop can be received via the useOverflowGroup hook,
+  along with a containerRef that needs to be set on the wrapper around the overflow group.
+<br />
+<br />
+The overflow group is ambiguous in the styling of the children and does not pose any premade layout;
+ instead the wrapper parent container determines the layout.
+ One could for example use a <Stack /> <HStack /> or <Grid> and all would work.
+  The overflow group only checks if the children don't fit within the height/width
+   of it's container via the containerRef.
+
+ *
+ */
+export const OverflowGroup = ({
+  children,
+  max: initMax = 0,
+  childrenProps,
+  onChange = identity,
+  rect,
+}: OverflowGroupProps) => {
+  const [ max, setMax ] = useState(isNil(rect) ? initMax : 0)
+  const [ windowState, setWindowState ] = useState(EMPTY_WINDOW)
+  const isLocked = useRef(false)
+  const nbrChildren = Children.count(children)
+
+  const updateMax = () => {
+    if (!rect) return
+
+    if (
+      rect.scrollHeight <= rect.clientHeight &&
+      rect.scrollWidth <= rect.clientWidth &&
+      max < nbrChildren &&
+      !isLocked.current &&
+      max < initMax
+    ) {
+      setMax(inc)
+    }
+
+    if (
+      rect.scrollHeight > rect.clientHeight ||
+      rect.scrollWidth > rect.clientWidth
+    ) {
+      setMax(dec)
+      isLocked.current = true
+    }
+  }
+
+  const rectDependency = defaultTo(EMPTY_RECT, rect) as HTMLElement
+  useEffect(updateMax, [
+    rectDependency.clientWidth,
+    rectDependency.clientHeight,
+    nbrChildren,
+    max,
+    windowState.innerHeight,
+    windowState.innerHeight,
+    initMax,
+  ])
+
+  useEffect(() => {
+    isLocked.current = false
+  }, [ rectDependency.clientHeight, rectDependency.clientWidth ])
+
+  const handleResize = () => {
+    setTimeout(() => {
+      isLocked.current = false
+      setWindowState({
+        innerWidth: window.innerWidth,
+        innerHeight: window.innerHeight,
+      })
+    }, 200)
+  }
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  useEffect(() => {
+    const nbrRemainingChildren = positiveOrZero(nbrChildren - max)
+    onChange(nbrRemainingChildren)
+  }, [ max, nbrChildren ])
+
+  const shownChildren = take(
+    max,
+    getChildrenWithProps(children, defaultTo({}, childrenProps))
+  )
+
+  return <>{ shownChildren }</>
+}

package/lib/components/overflow-group/types.ts

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export interface OverflowGroupProps {
+  childrenProps?: Record<string, any>
+  max?: number
+  children: JSX.Element[] | React.ReactNode[]
+  onChange?: (nbrRemainingChildren: number) => void
+  /** Should be used together with the userOverflowGroup hook to fit by parent element */
+  rect?: HTMLElement | null
+}

package/lib/components/overflow-group/use-overflow-group.ts

@@ -0,0 +1,12 @@
+import { useState } from 'react'
+
+export const useOverflowGroup = () => {
+  const [ rect, setRect ] = useState<HTMLDivElement | null>(null)
+  const containerRef = (node: any) => {
+    if (node) {
+      setRect(node)
+    }
+  }
+
+  return { rect, containerRef }
+}

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

@@ -0,0 +1,5 @@
+export {
+  PinInputField,
+} from '@chakra-ui/react'
+export * from './pin-input'
+export * from './types'

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import { PinInput as ChakraPinInput } from '@chakra-ui/react'
+import { PinInputProps } from './types'
+
+/**
+ * For entering numbers in ex two factor authentication
+ * @see {@link https://northlight.dev/reference/pin-input}
+ * @example
+ * (?
+  <HStack p="1">
+    <PinInput>
+      <PinInputField />
+      <PinInputField />
+      <PinInputField />
+      <PinInputField />
+    </PinInput>
+  </HStack>
+ * ?)
+ *
+ *
+ */
+export const PinInput = ({
+  variant = 'outline',
+  hidden,
+  children,
+  ...rest
+}: PinInputProps) => (
+  <ChakraPinInput { ...rest } variant={ variant } placeholder="●" mask={ hidden }>
+    { children }
+  </ChakraPinInput>
+)

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

@@ -0,0 +1,10 @@
+import { PinInputProps as ChakraPinInputProps } from '@chakra-ui/react'
+
+export type PinVariant = 'green' | 'running' | 'yellow' | 'inProgress' | 'gray' | 'notExecuted' | 'red' | 'rejected'
+export type PinSize = 'sm' | 'md' | 'lg'
+export type PinSizeTuple = [ number, number ]
+
+export interface PinInputProps extends ChakraPinInputProps {
+  size?: PinSize
+  hidden?: boolean
+}

package/lib/components/popover/index.ts

@@ -0,0 +1,11 @@
+export {
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeader,
+  PopoverFooter,
+  PopoverBody,
+  PopoverArrow,
+  PopoverAnchor,
+  PopoverCloseButton,
+} from '@chakra-ui/react'
+export * from './popover'

package/lib/components/popover/popover.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Popover as ChakraPopover, PopoverProps } from '@chakra-ui/react'
+
+export const Popover = (props: PopoverProps) => (
+  <ChakraPopover isLazy={ true } { ...props } />
+)

package/lib/components/portal/index.ts

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

package/lib/components/portal/render-in-portal.tsx

@@ -0,0 +1,17 @@
+import { Portal, PortalProps } from '@chakra-ui/react'
+import React from 'react'
+
+interface RenderInPortalProps extends PortalProps {
+  shouldRenderInPortal: boolean
+  children: JSX.Element
+}
+
+export const RenderInPortal =
+    ({ shouldRenderInPortal, children, ...rest }: RenderInPortalProps) => {
+      if (!shouldRenderInPortal) return children
+      return (
+        <Portal { ...rest }>
+          { children }
+        </Portal>
+      )
+    }

package/lib/components/progress/constants.ts

@@ -0,0 +1,2 @@
+export const updateTimeThreshold = 0.5
+export const animationSlideTime = 250

package/lib/components/progress/index.ts

@@ -0,0 +1,2 @@
+export * from './loading-bar'
+export * from './progress-bar'

package/lib/components/progress/loading-bar.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { ProgressBar } from './progress-bar'
+import { VStack } from '../stack'
+import { Small } from '../typography'
+import { formattedTime } from './utils'
+import { Fade } from '../transitions'
+import { LoadingBarProps } from './types'
+import { animationSlideTime, updateTimeThreshold } from './constants'
+
+/**
+ * @see {@link https:/northlight/reference/loading-bar}
+ *
+ * @example
+ * (?
+ * () => {
+  const [ progress, setProgress ] = useState(0)
+  if (progress > 1 && buffer) {
+    clearInterval(buffer)
+    buffer = null
+  }
+
+  const handleClick = () => {
+    setProgress(0)
+    buffer = setInterval(
+      () => setProgress((prev) => prev + Math.random() * 0.1),
+      Math.random() * 300 + 200
+    )
+  }
+  return (
+    <Stack>
+    <LoadingBar loaded={ progress } hideDisplay={true}/>
+    <Button onClick={ handleClick }>Start Loading</Button>
+    </Stack>
+  )
+ * }
+ * ?)
+ *
+ */
+export const LoadingBar = ({
+  loaded,
+  onLoadEnd = () => {},
+  hideDisplay = true,
+  ...rest
+}: LoadingBarProps) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const timeRef = useRef<number>(0)
+  const progress = Math.max(0, Math.min(loaded, 1))
+  const [ timeLeft, setTimeLeft ] = useState(0)
+
+  useEffect(() => {
+    if (ref.current) {
+      (ref.current.children[0] as HTMLDivElement).style.width = `${progress * 100}%`
+    }
+
+    if (timeRef.current) {
+      const deltaTime = timeRef.current
+        ? (Date.now() - timeRef.current) / 1000
+        : 0
+      if (deltaTime > updateTimeThreshold) {
+        const newEstimate = progress !== 0 ? deltaTime / progress : 0
+        setTimeLeft(Math.round(newEstimate - deltaTime))
+      }
+    } else if (progress > 0) {
+      timeRef.current = Date.now()
+    }
+  }, [ progress ])
+
+  return (
+    <Fade
+      in={ progress < 1 }
+      enterDuration={ 1 }
+      exitDelay={ 250 }
+      exitDuration={ 1000 }
+      hideDisplay={ hideDisplay }
+      onTransitionComplete={ () => {
+        if (progress >= 1) {
+          onLoadEnd()
+        }
+      } }
+    >
+      <VStack { ...rest }>
+        <Small>
+          { Math.round(progress * 100) }%{ ' ' }
+          { !!timeLeft && `· ${formattedTime(timeLeft)} left` }
+        </Small>
+        <ProgressBar
+          ref={ ref }
+          animationSlideTimeMs={ animationSlideTime }
+        />
+      </VStack>
+    </Fade>
+  )
+}

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

@@ -0,0 +1,36 @@
+import React, { forwardRef } from 'react'
+import {
+  Progress as ChakraProgress,
+  ProgressProps as ChakraProgressProps,
+} from '@chakra-ui/react'
+import { animationSlideTime } from './constants'
+
+export interface ProgressBarProps extends ChakraProgressProps {
+  animationSlideTimeMs?: number
+}
+
+/**
+ * @see {@link https:/northlight/reference/progress-bar}
+ *
+ * @example
+ * (?
+ * <ProgressBar value={40} />
+ * ?)
+ */
+export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
+  ({ animationSlideTimeMs = animationSlideTime, sx, ...props }, ref) => (
+    <ChakraProgress
+      ref={ ref }
+      width="full"
+      height="1a"
+      borderRadius="full"
+      sx={ {
+        '>[role="progressbar"]': {
+          transition: `width ${animationSlideTimeMs}ms ease-out`,
+        },
+        ...sx,
+      } }
+      { ...props }
+    />
+  )
+)

package/lib/components/progress/types.ts

@@ -0,0 +1,8 @@
+import { StackProps } from '@chakra-ui/react'
+
+export interface LoadingBarProps extends StackProps {
+  loaded: number
+  /** Whether to remove the progress bar from the DOM tree once finnished loading */
+  hideDisplay?: boolean
+  onLoadEnd?: () => void
+}