@northlight/ui 2.41.0 → 2.41.1

package/lib/components/intent-button/intent-button.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { TrashDuo } from '@northlight/icons'
+import { Tooltip } from '../tooltip'
+import { Center } from '../center'
+import { Icon } from '../icon'
+import { IntentButtonProps } from './types'
+import { TimeoutProgressCircle } from './timeout-progress-circle'
+import { IconButton } from '../icon-button'
+
+/**
+ * @see {@link https://northlight.dev/reference/intent-button}
+ *
+ * Hold in to confirm delete
+ *
+ * @example
+ * (?
+ * +
+ *
+ * const Example = () => {
+ * const [isShowing, setIsShowing] = useState(true)
+ *
+ * const handleDelete = () => {
+ * setIsShowing(false)
+ * }
+ *
+ * return (
+ * <>
+ * {isShowing && (
+ * <IntentButton onTimeout={handleDelete} />
+ * )}
+ * </>
+ * )
+ *
+ * }
+ * render(<Example />)
+ *?)
+ *
+ */
+export const IntentButton = ({
+  icon = TrashDuo,
+  timeout = 1000,
+  ringColor = 'border.error',
+  onTimeout = () => {},
+  tooltipText = 'Hold to Delete',
+  'aria-label': ariaLabel = 'confirm delete',
+  ...rest
+}: IntentButtonProps) => {
+  const [ progress, setProgress ] = useState(0)
+  const [ isHovering, setIsHovering ] = useState(false)
+  const timerRef = useRef<number | undefined>(undefined)
+
+  const clearTimer = () => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current)
+      timerRef.current = undefined
+    }
+    setProgress(0)
+  }
+
+  useEffect(() => clearTimer, [])
+
+  const startTimer = () => {
+    clearTimer()
+
+    const startTime = Date.now()
+    timerRef.current = setInterval(() => {
+      const elapsedTime = Date.now() - startTime
+      const updatedProgress = (elapsedTime / timeout) * 100
+      if (updatedProgress >= 100) {
+        clearInterval(timerRef.current)
+        onTimeout()
+      } else {
+        setProgress(updatedProgress)
+      }
+    }, 10)
+  }
+
+  const handleMouseEnter = () => {
+    setIsHovering(true)
+  }
+
+  const handleMouseLeave = () => {
+    setIsHovering(false)
+    clearTimer()
+  }
+
+  return (
+    <Tooltip label={ tooltipText } placement="top">
+      <Center
+        position="relative"
+        cursor="pointer"
+        onMouseDown={ startTimer }
+        onMouseUp={ clearTimer }
+        onMouseLeave={ handleMouseLeave }
+        onMouseEnter={ handleMouseEnter }
+        boxSize="50px"
+        opacity={ `${(100 - progress) / 100}` }
+        { ...rest }
+      >
+        <IconButton
+          icon={ <Icon as={ icon } /> }
+          size="md"
+          aria-label={ ariaLabel }
+          variant="ghost"
+        />
+        { isHovering && (
+          <TimeoutProgressCircle
+            ringColor={ ringColor }
+            progress={ progress }
+            position="absolute"
+            top="0"
+            left="0"
+          />
+        ) }
+      </Center>
+    </Tooltip>
+  )
+}

package/lib/components/intent-button/timeout-progress-circle.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { Circle } from '@chakra-ui/react'
+import { chakra } from '@chakra-ui/system'
+import { TimeoutProgressCircleProps } from './types'
+
+export const TimeoutProgressCircle = ({
+  progress,
+  ringColor = 'border.error',
+  ...rest
+}: TimeoutProgressCircleProps) => {
+  const RADIUS = 22
+  const STROKE_WIDTH = 3
+  const SVG_SIZE = 2 * (RADIUS + STROKE_WIDTH)
+  const CIRCUMFERENCE = 2 * Math.PI * RADIUS
+  const strokeDashoffset = CIRCUMFERENCE - (progress / 100) * CIRCUMFERENCE
+
+  return (
+    <Circle
+      as="svg"
+      size={ `${SVG_SIZE}px` }
+      viewBox={ `0 0 ${SVG_SIZE} ${SVG_SIZE}` }
+      sx={ {
+        transform: 'rotate(-90deg)',
+      } }
+      { ...rest }
+    >
+      <chakra.circle
+        cx={ SVG_SIZE / 2 }
+        cy={ SVG_SIZE / 2 }
+        r={ RADIUS }
+        fill="transparent"
+        stroke="border.hover"
+        strokeWidth={ STROKE_WIDTH }
+      />
+      <chakra.circle
+        cx={ SVG_SIZE / 2 }
+        cy={ SVG_SIZE / 2 }
+        r={ RADIUS }
+        fill="transparent"
+        stroke={ ringColor }
+        strokeWidth={ STROKE_WIDTH }
+        strokeDasharray={ CIRCUMFERENCE }
+        strokeDashoffset={ strokeDashoffset }
+        strokeLinecap="round"
+      />
+    </Circle>
+  )
+}

package/lib/components/intent-button/types.ts

@@ -0,0 +1,16 @@
+import { CenterProps, StackProps } from '@chakra-ui/react'
+import { ComponentType } from 'react'
+
+export interface IntentButtonProps extends CenterProps {
+  icon?: ComponentType<any>
+  timeout?: number
+  onTimeout?: () => void
+  tooltipText?: string
+  'aria-label'?: string
+  ringColor?: string
+}
+
+export interface TimeoutProgressCircleProps extends StackProps {
+  progress: number
+  ringColor: string
+}

package/lib/components/kbd/index.ts

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

package/lib/components/keyframes/index.ts

@@ -0,0 +1,3 @@
+export {
+  keyframes,
+} from '@emotion/react'

package/lib/components/link/index.ts

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

package/lib/components/link-overlay/index.ts

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

package/lib/components/list/index.ts

@@ -0,0 +1,7 @@
+export {
+  List,
+  ListItem,
+  ListIcon,
+  OrderedList,
+  UnorderedList,
+} from '@chakra-ui/react'

package/lib/components/mark/index.ts

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

package/lib/components/mediatool-theme-provider/index.ts

@@ -0,0 +1,2 @@
+export * from './mediatool-theme-provider'
+export * from './types'

package/lib/components/mediatool-theme-provider/mediatool-theme-provider.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { ChakraProvider } from '@chakra-ui/react'
+import { theme as webappTheme } from '../../theme'
+import { MediatoolThemeProviderProps } from './types'
+import { CustomTheme } from '../../utils/use-current-theme'
+
+/**
+ * Should be at the root of you project, wraps the app in the theme context
+ * @see {@link https://northlight.dev/reference/mediatool-theme-provider}
+ *
+ * @example
+ * Should pass down a theme from northlight/ui, currently exports two themes:
+ * * theme - light mode
+ * * tottTheme - dark mode
+ *
+ *
+ */
+export const MediatoolThemeProvider = ({
+  children,
+  theme = webappTheme,
+  themeName = 'webappTheme',
+}: MediatoolThemeProviderProps) => (
+  <ChakraProvider resetCSS={ true } theme={ theme }>
+    <CustomTheme.Provider value={ themeName }>
+      { children }
+    </CustomTheme.Provider>
+  </ChakraProvider>
+)

package/lib/components/mediatool-theme-provider/types.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+import { CurrentTheme } from '../../utils'
+
+export interface MediatoolThemeProviderProps {
+  children: ReactNode
+  theme?: Record<string, any>
+  themeName?: CurrentTheme
+}

package/lib/components/menu/index.ts

@@ -0,0 +1,13 @@
+export {
+  MenuList,
+  MenuButton,
+  MenuItem,
+  MenuIcon,
+  MenuGroup,
+  MenuDivider,
+  MenuOptionGroup,
+  MenuItemOption,
+  MenuCommand,
+} from '@chakra-ui/react'
+export * from './menu'
+export * from './types'

package/lib/components/menu/menu.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import { Menu as ChakraMenu } from '@chakra-ui/react'
+import { MenuProps } from './types'
+
+/**
+ * @see {@link https://northlight.dev/reference/menu}
+ *
+ * @example (Example)
+ * ##Clean menu with different options
+ * The menu can be `relaxed` for primary menus, and `compact` for secodnary menus.
+ * <br />
+ * (?
+ * +
+ * const MyMenuComponent = () => {
+ * const [selectedLabel, setSelectedLabel] = useState('Compare periods');
+ *
+ *   const menuOptions = {
+ *     '1': 'No Comparison',
+ *     '2': 'Report date range',
+ *     '3': 'Previous week',
+ *     '4': 'Previous quarter',
+ *     '5': 'Previous month',
+ *     '6': 'Previous year',
+ *     '7': 'Previous period',
+ *
+ *   }
+ *
+ *   const handleMenuItemClick = (value) => {
+ *     setSelectedLabel(menuOptions[value] || 'Compare periods');
+ *   }
+ *
+ *  return (
+ * <Menu variant="relaxed" closeOnSelect={false}>
+ * <MenuButton
+ * as={Button}
+ * leftIcon={<VersionsDuo /> }
+ * variant="brand"
+ * rightIcon={<ChevronDownDuo />}
+ * >
+ *  { selectedLabel }
+ * </MenuButton>
+ * <MenuList>
+ * <MenuOptionGroup onChange={ handleMenuItemClick } defaultValue="1" type="radio">
+  * <MenuItemOption value="1">No Comparison</MenuItemOption>
+  * <MenuDivider />
+  * <MenuItemOption isDisabled={true} value="2">
+  * <Box>
+    * <Text>Report date range</Text>
+    * <Text fontSize="xs" color="text.subdued">
+    * 12-12-2022 01-01-23
+    * </Text>
+  * </Box>
+  * </MenuItemOption>
+  * <MenuDivider />
+  * <MenuItemOption value="3">Previous week</MenuItemOption>
+  * <MenuItemOption value="4">Previous quarter</MenuItemOption>
+  * <MenuItemOption value="5">Previous month</MenuItemOption>
+  * <MenuItemOption value="6">Previous year</MenuItemOption>
+  * <MenuItemOption value="7">Previous period</MenuItemOption>
+  * </MenuOptionGroup>
+  *<MenuDivider />
+  * <MenuItem sx={ { placeContent: 'space-between' } }>
+  * Custom Date
+  * <Icon as={ ChevronRightDuo } aligh="right" />
+  * </MenuItem>
+ * </MenuList>
+* </Menu>
+* )
+*
+* }
+*
+* render(<MyMenuComponent/>)
+* ?)
+*
+* @example (Example)
+* ##Menu with Group titles
+* To group related MenuItems, use the MenuGroup component and pass it a title for the group name
+* <br />
+* (?
+ * <Menu closeOnSelect={false}>
+ * <MenuButton as={Button} rightIcon={<ChevronDownDuo />}>
+  * Actions
+ * </MenuButton>
+ * <MenuList minWidth='240px'>
+    * <MenuOptionGroup defaultValue='asc' title='Order' type='radio'>
+    * <MenuItemOption value='asc'>Ascending</MenuItemOption>
+    * <MenuItemOption value='desc'>Descending</MenuItemOption>
+  * </MenuOptionGroup>
+  * <MenuDivider />
+  * <MenuOptionGroup title='Country' type='checkbox'>
+    * <MenuItemOption value='email'>Email</MenuItemOption>
+    * <MenuItemOption value='phone'>Phone</MenuItemOption>
+    * <MenuItemOption value='country'>Country</MenuItemOption>
+  * </MenuOptionGroup>
+ * </MenuList>
+* </Menu>
+* ?)
+*
+*/
+
+export const Menu = ({ variant = 'relaxed', ...props }: MenuProps) => (
+  <ChakraMenu variant={ variant } { ...props } />
+)

package/lib/components/menu/types.ts

@@ -0,0 +1,7 @@
+import { MenuProps as ChakraMenuProps } from '@chakra-ui/react'
+
+export type MenuVariants = 'compact' | 'relaxed'
+
+export interface MenuProps extends ChakraMenuProps {
+  variant?: MenuVariants
+}

package/lib/components/modal/index.ts

@@ -0,0 +1,12 @@
+export {
+  Modal as ChakraModal,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalCloseButton,
+} from '@chakra-ui/react'
+
+export * from './modal'
+export * from './types'
+export * from './modal-body'
+export * from './modal-base'

package/lib/components/modal/modal-base.tsx

@@ -0,0 +1,22 @@
+import { Modal as ChakraModal, ModalCloseButton, ModalContent, ModalOverlay } from '@chakra-ui/react'
+import React from 'react'
+import { ModalProps } from './types'
+
+export const ModalBase = ({
+  isCentered = true,
+  children,
+  ...rest
+}: ModalProps) => (
+  <ChakraModal
+    isCentered={ isCentered }
+    scrollBehavior="inside"
+    motionPreset="slideInBottom"
+    { ...rest }
+  >
+    <ModalOverlay />
+    <ModalContent data-testid="modal-test-id">
+      <ModalCloseButton data-testid="modal-test-button-id" />
+      { children }
+    </ModalContent>
+  </ChakraModal>
+)

package/lib/components/modal/modal-body.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { ModalBody as ChakraModalBody, ModalBodyProps } from '@chakra-ui/react'
+
+export const ModalBody = (props: ModalBodyProps) => (
+  <ChakraModalBody minH={ props.h } maxH={ props.h } { ...props } />
+)

package/lib/components/modal/modal.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { ModalProps } from './types'
+import { ModalBase } from './modal-base'
+
+/**
+ * @see {@link https://northlight.dev/reference/modal}
+ *
+ * */
+
+export const Modal = ({
+  stayMountedOnClose = false,
+  isOpen,
+  ...rest
+}: ModalProps) => (
+  <>
+    { (stayMountedOnClose || isOpen) && <ModalBase isOpen={ isOpen } { ...rest } /> }
+  </>
+)

package/lib/components/modal/types.ts

@@ -0,0 +1,9 @@
+import { ModalProps as ChakraModalProps, ResponsiveValue } from '@chakra-ui/react'
+
+export type ModalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full' | 'huge'
+export interface ModalProps extends ChakraModalProps {
+  size?: ResponsiveValue<ModalSizes>
+  /** If true then the modal will never unmount but only hide when closing,
+   * stayMountedOnClose is false by default */
+  stayMountedOnClose?: boolean
+}

package/lib/components/notification-icon-button/index.ts

@@ -0,0 +1,2 @@
+export * from './notification-icon-button'
+export * from './types'

package/lib/components/notification-icon-button/notification-icon-button.tsx

@@ -0,0 +1,57 @@
+import React, { forwardRef, useState } from 'react'
+import { Box, useMultiStyleConfig } from '@chakra-ui/react'
+import { Blinker } from '../blinker'
+import { IconButton } from '../icon-button'
+import { NotificationIconButtonProps } from './types'
+
+/**
+ * A custom component that composes the IconButton and Blinker components.
+ *  The notification blinker blinks on hover.
+ * @see {@link https://northlight.dev/reference/notification-icon-button}
+ *
+ * @example
+ * (?
+ * <Box w="min-content">
+<NotificationIconButton
+  variant="brand"
+  aria-label="conversations"
+  icon={ <Icon as={ ConversationDuo } /> }
+  hasNotification={ true }
+  size="lg"
+/>
+</Box>
+ * ?)
+ */
+export const NotificationIconButton = forwardRef(({
+  variant = 'ghost',
+  icon,
+  'aria-label': ariaLabel,
+  hasNotification = false,
+  blinkerColor = 'green.500',
+  size,
+  ...rest
+}: NotificationIconButtonProps, ref: any) => {
+  const [ isBlinking, setIsBlinking ] = useState(false)
+  const { container, notifier } = useMultiStyleConfig('NotificationIconButton', { size, variant })
+  return (
+    <Box
+      onMouseEnter={ () => setIsBlinking(true) }
+      onMouseLeave={ () => setIsBlinking(false) }
+      sx={ container }
+    >
+      { hasNotification && (
+        <Box sx={ notifier }>
+          <Blinker isBlinking={ isBlinking } color={ blinkerColor } size="2xs" />
+        </Box>
+      ) }
+      <IconButton
+        variant={ variant }
+        icon={ icon }
+        aria-label={ ariaLabel }
+        ref={ ref }
+        size={ size }
+        { ...rest }
+      />
+    </Box>
+  )
+})

package/lib/components/notification-icon-button/types.ts

@@ -0,0 +1,8 @@
+import { IconButtonProps } from '@chakra-ui/react'
+import { ButtonVariants } from '../button/types'
+
+export interface NotificationIconButtonProps extends IconButtonProps {
+  variant?: ButtonVariants
+  blinkerColor?: string
+  hasNotification?: boolean
+}

package/lib/components/number-input/advanced-parse-float.ts

@@ -0,0 +1,30 @@
+import { head, isNil, last, length, match, split } from 'ramda'
+
+const regex = /(9{13,}|0{13,})(\d)*$/gm
+
+export const advancedParseFloat = (value: number | string) => {
+  if (isNil(value) || Number.isNaN(parseFloat(value as string))) {
+    return value
+  }
+
+  const splitValue = split('.', `${value}`)
+  const intPart = head(splitValue)
+  const decimalPart = last(splitValue)
+
+  if (isNil(decimalPart)) {
+    return value
+  }
+
+  const roundingError = match(regex, decimalPart)
+  if (isNil(roundingError)) {
+    return value
+  }
+
+  const decimalsErrorLength = length(head(roundingError) as string)
+  const correctDecimalsLength = decimalPart.length - decimalsErrorLength
+
+  return parseFloat(
+    parseFloat(`${intPart}.${decimalPart}`)
+      .toFixed(correctDecimalsLength)
+  )
+}

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

@@ -0,0 +1,9 @@
+export {
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+  useNumberInput,
+} from '@chakra-ui/react'
+export * from './number-input'
+export * from './number-input-field'
+export * from './advanced-parse-float'
+export * from './types'

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

@@ -0,0 +1,74 @@
+import React, { forwardRef, useState } from 'react'
+import { identity, isNil } from 'ramda'
+import { NumberInputFieldProps } from './types'
+import { Field } from '../form'
+import { NumberInput } from './number-input'
+import { advancedParseFloat } from './advanced-parse-float'
+import { InputGroupWrapper } from '../../internal-components/input-group-wrapper/input-group-wrapper'
+
+/**
+ * The number input component wrapped in a <Field />
+ * meant to be used only inside <Form />
+ * @see NumberInput
+ * @see {@link https://northlight.dev/reference/number-input-field}
+ *
+ */
+export const NumberInputField = forwardRef<HTMLDivElement, NumberInputFieldProps>(({
+  name,
+  label,
+  direction,
+  isRequired,
+  validate,
+  onChange: onChangeCallback = identity,
+  onlyAcceptPercentage = false,
+  inputLeftElement,
+  inputRightElement,
+  ...rest
+}, ref) => {
+  const formatNumber = (value: number, factor: number) => (
+    onlyAcceptPercentage
+      ? advancedParseFloat(value * factor)
+      : value
+  )
+
+  return (
+    <Field
+      name={ name }
+      label={ label }
+      direction={ direction }
+      isRequired={ isRequired }
+      validate={ validate }
+      ref={ ref }
+    >
+      { ({ onChange, value }) => {
+        const initialValue = isNil(value) || Number.isNaN(parseFloat(value))
+          ? ''
+          : formatNumber(value, 100)
+
+        const [ displayValue, setDisplayValue ] = useState(initialValue)
+
+        return (
+          <InputGroupWrapper
+            inputLeftElement={ inputLeftElement }
+            inputRightElement={ inputRightElement }
+          >
+            <NumberInput
+              name={ name }
+              data-testid="number-input-field-test-id"
+              onInputChange={ (v) => {
+                setDisplayValue(v)
+                const parsed = formatNumber(parseFloat(v), 0.01)
+
+                onChange(parsed)
+                onChangeCallback(parsed)
+              } }
+              value={ displayValue }
+              onlyAcceptPercentage={ onlyAcceptPercentage }
+              { ...rest }
+            />
+          </InputGroupWrapper>
+        )
+      } }
+    </Field>
+  )
+})