@northlight/ui 2.41.0 → 2.41.1

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

@@ -0,0 +1,167 @@
+import React, { ComponentType, useEffect } from 'react'
+import { defaultTo, identity, isEmpty, isNil } from 'ramda'
+import {
+  InputAttributes,
+  NumberFormatValues,
+  NumericFormat,
+  SourceInfo,
+  numericFormatter,
+} from 'react-number-format'
+import { InputGroupWrapper } from '../../internal-components'
+import { Input } from '../input'
+import {
+  FormattedNumberInputPreset,
+  FormattedNumberInputProps,
+  PresetOptions,
+} from './types'
+import { roundToPrecision } from './round-to-precision'
+
+const presetMap: Record<FormattedNumberInputPreset, PresetOptions> = {
+  eu: {
+    thousandSeparator: ' ',
+    decimalSeparator: ',',
+  },
+  us: {
+    thousandSeparator: ',',
+    decimalSeparator: '.',
+  },
+  nor: {
+    thousandSeparator: '.',
+    decimalSeparator: ',',
+  },
+}
+
+/**
+ * @see {@link https://northlight.dev/reference/formatted-number-input-field}
+  @example (Example)
+ * The formatted number input is built uppon react-number-format
+ * It formats numbers by adjusting thousand and decimal separators
+ * ex : 22345351.34234 => 222 453 51,34234
+ * It comes with three presets: eu, us and nor.
+ * These have the following separators:
+  (?
+    <FormattedNumberInput
+      preset="us"
+      onChange={(values) => console.log(values.floatValue)}
+      isPercentage={true}
+      max={1E9}
+      min={0}
+    />
+  ?)
+
+  @example (Example)
+  ### Nor preset
+  (?
+    <FormattedNumberInput
+      preset="nor"
+      onChange={(values) => console.log(values.floatValue)}
+      value={320341345102.34134}
+      numberOfDecimals={5}
+    />
+  ?)
+
+  @example (Example)
+  ### Eu preset
+  (?
+    <FormattedNumberInput
+      preset="eu"
+      onChange={(values) => console.log(values.floatValue)}
+      value={320341345102.34134}
+      numberOfDecimals={5}
+    />
+  ?)
+
+ */
+export const FormattedNumberInput = ({
+  preset = 'eu',
+  isPercentage = false,
+  onChange = identity,
+  value: valueProp,
+  numberOfDecimals,
+  max = Infinity,
+  min = -Infinity,
+  inputLeftElement,
+  inputRightElement,
+  onBlur,
+  ...rest
+}: FormattedNumberInputProps) => {
+  const props = presetMap[preset]
+
+  const value = valueProp ?? ''
+
+  const defaultNumberOfDecimals = defaultTo(2, numberOfDecimals)
+
+  const getNumberFormatValues = (number: number) => ({
+    floatValue: number,
+    formattedValue: numericFormatter(number.toString(), props),
+    value: number.toString(),
+  })
+
+  const validateRange = () => {
+    if (isNil(value) || isEmpty(value)) return
+
+    const vNum = typeof value === 'string' ? parseFloat(value) : value
+
+    if (isNil(numberOfDecimals) && !isPercentage) {
+      onChange(getNumberFormatValues(vNum))
+      return
+    }
+
+    const factor = isPercentage ? 100 : 1
+    if (vNum * factor > max) {
+      const newValue = roundToPrecision(max / factor, defaultNumberOfDecimals)
+      onChange(getNumberFormatValues(newValue))
+    }
+    if (vNum * factor < min) {
+      const newValue = roundToPrecision(min / factor, defaultNumberOfDecimals)
+      onChange(getNumberFormatValues(newValue))
+    }
+  }
+
+  const onValueChangeHandler = (
+    values: NumberFormatValues,
+    sourceInfo: SourceInfo
+  ) => {
+    const newFloatValue =
+      values.floatValue && isPercentage
+        ? roundToPrecision(values.floatValue / 100, defaultNumberOfDecimals)
+        : values.floatValue
+    onChange(
+      {
+        ...values,
+        floatValue: newFloatValue,
+      },
+      sourceInfo
+    )
+  }
+
+  useEffect(() => {
+    validateRange()
+  }, [ value ])
+
+  return (
+    <InputGroupWrapper
+      inputLeftElement={ inputLeftElement }
+      inputRightElement={ inputRightElement }
+    >
+      <NumericFormat
+        allowLeadingZeros={ true }
+        customInput={ Input as ComponentType<InputAttributes> }
+        onBlur={ (e) => {
+          onBlur?.(e)
+          validateRange()
+        } }
+        onValueChange={ onValueChangeHandler }
+        decimalScale={ numberOfDecimals }
+        value={
+          isPercentage
+            ? roundToPrecision(parseFloat(`${value ?? 0}`) * 100, defaultNumberOfDecimals)
+            : value
+        }
+        suffix={ isPercentage ? '%' : '' }
+        { ...props }
+        { ...rest }
+      />
+    </InputGroupWrapper>
+  )
+}

package/lib/components/text-field/index.ts

@@ -0,0 +1,5 @@
+export * from './formatted-number-input'
+export * from './formatted-number-input-field'
+export * from './masked-text-input'
+export * from './text-field'
+export * from './types'

package/lib/components/text-field/masked-text-input.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import InputMask from 'react-input-mask'
+import { Input } from '../input'
+import { MaskedTextInputProps } from './types'
+
+//! Overload error in @types/react-input-mask, overwriting faulty types as unknown as any
+const CustomInput = InputMask as unknown as any
+
+export const MaskedTextInput = ({
+  mask,
+  maskPlaceholder,
+  alwaysShowMask,
+  name,
+  value,
+  placeholder,
+  onChange,
+  onBlur,
+  ...rest
+}: MaskedTextInputProps) => (
+  <CustomInput
+    mask={ mask }
+    maskPlaceholder={ maskPlaceholder }
+    alwaysShowMask={ alwaysShowMask }
+    name={ name }
+    value={ value }
+    onChange={ onChange }
+    onBlur={ onBlur }
+  >
+    { ({ name: nameProp }: any) => (
+      <Input
+        placeholder={ maskPlaceholder ?? placeholder }
+        name={ nameProp }
+        { ...rest }
+      />
+    ) }
+  </CustomInput>
+)

package/lib/components/text-field/round-to-precision.ts

@@ -0,0 +1,4 @@
+export const roundToPrecision = (
+  value: number,
+  numberOfDecimals: number
+): number => parseFloat(value.toFixed(numberOfDecimals))

package/lib/components/text-field/text-field.tsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from 'react'
+import { identity, isNil } from 'ramda'
+import { TextFieldProps } from './types'
+import { Input } from '../input'
+import { Field } from '../form'
+import { InputGroupWrapper } from '../../internal-components/input-group-wrapper'
+
+/**
+ * The Input component wrapped in <Field />
+ * Also supported formmated and musked input via as prop
+ * @see Input
+ * @see MaskedTextInput
+ * @see FormattedNumberInput
+ * @see {@link https://northlight.dev/reference/text-field}
+ *
+ *
+ */
+export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(({
+  name,
+  label,
+  as: As = Input,
+  isRequired,
+  validate,
+  direction = 'column',
+  onChange: onChangeCallback = identity,
+  inputLeftElement,
+  inputRightElement,
+  ...rest
+}, ref) => (
+  <Field
+    name={ name }
+    label={ label }
+    isRequired={ isRequired }
+    validate={
+      isNil(validate) && isRequired
+        ? { validate: (value: string) => !!value.trim() }
+        : validate
+    }
+    direction={ direction }
+    ref={ ref }
+  >
+    { ({ onChange, value }) => (
+      <InputGroupWrapper
+        inputLeftElement={ inputLeftElement }
+        inputRightElement={ inputRightElement }
+      >
+        <As
+          id={ name }
+          name={ name }
+          onChange={ (e: React.ChangeEvent<HTMLInputElement> | string) => {
+            onChange(e)
+            onChangeCallback(e)
+          } }
+          value={ value }
+          data-testid="text-field-test-id"
+          { ...rest }
+        />
+      </InputGroupWrapper>
+    ) }
+  </Field>
+))

package/lib/components/text-field/types.ts

@@ -0,0 +1,60 @@
+import { Props as InputMaskProps } from 'react-input-mask'
+import {
+  InputProps as ChakraInputProps,
+  StackDirection,
+} from '@chakra-ui/react'
+import { RegisterOptions } from 'react-hook-form'
+import { NumberFormatValues, NumericFormatProps, SourceInfo } from 'react-number-format'
+import React from 'react'
+import { InputFieldProps } from '../../types'
+
+export interface TextInputFormatter {
+  format: (value: string) => string
+  unFormat: (value: string) => string
+}
+
+export interface TextFieldProps
+  extends Omit<ChakraInputProps, 'onChange'>,
+  InputFieldProps {
+  name: string
+  label: string
+  mask?: string
+  formatter?: TextInputFormatter
+  validate?: RegisterOptions
+  direction?: StackDirection
+  onChange?: (e: React.ChangeEvent<HTMLInputElement> | string) => void
+}
+
+export type MaskedTextInputProps = ChakraInputProps &
+InputMaskProps & {
+  maskPlaceholder?: string
+}
+
+export type FormattedNumberInputPreset = 'eu' | 'us' | 'nor'
+export interface PresetOptions {
+  thousandSeparator: string
+  decimalSeparator: string
+}
+
+export interface FormattedNumberInputProps extends Omit<NumericFormatProps, 'onChange' | 'max' | 'min'>, Omit<ChakraInputProps, 'color' | 'defaultValue' | 'value' | 'height' | 'size' | 'type' | 'width' | 'values' | 'events' | 'onChange'> {
+  max?: number
+  min?: number
+  /** Changes thousand and decimal separators */
+  preset?: FormattedNumberInputPreset
+  /** Gives you back an object, see https://s-yadav.github.io/react-number-format/docs/quirks */
+  onChange?: (values: NumberFormatValues, sourceInfo?: SourceInfo) => void
+  /** Will format number UI as percentage, but return as decimal value */
+  isPercentage?: boolean
+  /** Will round up and restrict number of decimals */
+  numberOfDecimals?: number
+  inputLeftElement?: React.ReactNode
+  inputRightElement?: React.ReactNode
+}
+
+export interface FormattedNumberInputFieldProps extends FormattedNumberInputProps {
+  name: string
+  label: string
+  validate?: RegisterOptions
+  isRequired?: boolean
+  direction?: StackDirection
+}

package/lib/components/textarea/index.ts

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

package/lib/components/textarea/textarea-field.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef } from 'react'
+import { identity } from 'ramda'
+import { TextareaFieldProps } from './types'
+import { Field } from '../form'
+import { Textarea } from './textarea'
+
+export const TextareaField = forwardRef<HTMLDivElement, TextareaFieldProps>(({
+  name,
+  label,
+  isRequired,
+  validate,
+  direction,
+  onChange: onChangeCallback = identity,
+  ...rest
+}, ref) => (
+  <Field
+    name={ name }
+    label={ label }
+    isRequired={ isRequired }
+    validate={ validate }
+    direction={ direction }
+    ref={ ref }
+  >
+    { ({ onChange, value }) => (
+      <Textarea
+        name={ name }
+        data-testid="textarea-field-test-id"
+        onChange={ (e) => { onChange(e); onChangeCallback(e) } }
+        value={ value }
+        { ...rest }
+      />
+    ) }
+  </Field>
+))

package/lib/components/textarea/textarea.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Textarea as ChakraTextarea } from '@chakra-ui/react'
+import { TextareaProps } from './types'
+
+/**
+ * Text input for larger raw text
+ * @see Input
+ * @see {@link https://northlight.dev/reference/textarea}
+ *
+ * @example
+ * (? <Textarea /> ?)
+ */
+export const Textarea = ({
+  size = 'md',
+  onChange,
+  name,
+  value,
+  ...rest
+}: TextareaProps) => (
+  <ChakraTextarea
+    size={ size }
+    id={ name }
+    onChange={ onChange }
+    value={ value }
+    { ...rest }
+  />
+)

package/lib/components/textarea/types.ts

@@ -0,0 +1,22 @@
+import { TextareaProps as ChakraTextareaProps, StackDirection } from '@chakra-ui/react'
+import { ChangeEvent } from 'react'
+import { RegisterOptions } from 'react-hook-form'
+
+export type TextSizeProps = 'sm' | 'md'
+
+export interface TextareaProps extends ChakraTextareaProps {
+  onChange?: (...event: any[]) => void | ((e: ChangeEvent<HTMLInputElement>) => void)
+  value?: string
+  size?: TextSizeProps
+}
+
+export type TextareaFieldProps =
+  ChakraTextareaProps
+  & {
+    name: string
+    label: string
+    validate?: RegisterOptions
+    isRequired?: boolean
+    size?: TextSizeProps
+    direction?: StackDirection
+  }

package/lib/components/toast/index.ts

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

package/lib/components/toast/toast.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Alert as ChakraAlert } from '@chakra-ui/react'
+import { toastIconMap } from '../types'
+import { ToastProps } from './types'
+import { Icon } from '../icon'
+import { HStack, Stack } from '../stack'
+import { CloseButton } from '../close-button'
+import { Label, P } from '../typography'
+
+/**
+ * Toast is a modified alert meant for popup alerts
+ * @see useToast
+ * @see Alert
+ * @see {@link https://northlight.dev/reference/toast}
+ * @example
+ * (?
+ *
+        <HStack spacing={ 4 }>
+          <Toast variant="default" title="default" />
+          <Toast variant="success" title="success" />
+          <Toast variant="warning" title="warning" />
+          <Toast variant="error" title="error" />
+          <Toast variant="info" title="info" />
+          <Toast variant="ai" title="mtGPT" />
+        </HStack>
+ * ?)
+ *
+ */
+export const Toast = ({
+  variant = 'success',
+  title = '',
+  description = '',
+  onClose,
+  ...rest
+}: ToastProps) => {
+  const icon = toastIconMap[variant]
+
+  return (
+    <ChakraAlert
+      variant={ variant }
+      data-testid="toast-test"
+      { ...rest }
+    >
+      <HStack alignItems="flex-start">
+        { icon && (
+        <Icon
+          as={ icon }
+          color={ `icon.toast.${variant}` }
+          boxSize={ 6 }
+        />
+        ) }
+        <Stack spacing={ 0 } alignItems="flex-start">
+          { title && <Label size="md">{ title }</Label> }
+          { description && (
+          <P
+            sx={ {
+              color: variant === 'ai' ? 'color.text.inverted' : 'text.default',
+            } }
+          >
+            { description }
+          </P>
+          ) }
+        </Stack>
+
+        <CloseButton
+          size="sm"
+          onClick={ onClose }
+          position="absolute"
+          insetEnd={ 1 }
+          top={ 1 }
+        />
+      </HStack>
+    </ChakraAlert>
+  )
+}

package/lib/components/toast/types.ts

@@ -0,0 +1,16 @@
+import { UseToastOptions as UseChakraToastOptions } from '@chakra-ui/react'
+import { AlertProps, AlertVariants } from '../alert'
+
+export interface ToastProps extends AlertProps {
+  title?: string
+  variant?: AlertVariants
+  description?: string
+  onClose?: () => void
+}
+
+export interface UseToastOptions extends UseChakraToastOptions {
+  variant?: AlertVariants
+  title?: string
+  description?: string
+  replacePreviousToast?: boolean
+}

package/lib/components/toast/use-toast.tsx

@@ -0,0 +1,57 @@
+import React, { useRef } from 'react'
+import { ToastId, useToast as useChakraToast } from '@chakra-ui/react'
+import { Toast } from './toast'
+import { UseToastOptions } from './types'
+
+/**
+ * This hook returns a toast function that when called will popup a toast
+ * @see Toast
+ * @see {@link https://northlight.dev/reference/use-toast}
+ * @example
+ * (?
+ * () => {
+ * const toast = useToast()
+ * const handleClick = () => {
+ * toast({title: 'Success',
+ *  description: `${Math.random()}-string`,
+ *  replacePreviousToast: true })
+ * }
+ * return (
+ * <Button onClick={handleClick} variant="success">Save</Button>
+ * )}
+ * ?)
+ */
+export const useToast = (defaultOpts: UseToastOptions = {}) => {
+  const toast = useChakraToast(defaultOpts)
+  const toastIdRef = useRef<ToastId | null>(null)
+
+  return (opts: UseToastOptions = {}) => {
+    const toastProps: UseToastOptions = {
+      render: ({ onClose }: { onClose: () => void }) => {
+        const {
+          variant = 'success',
+          title = 'Success',
+          description = '',
+        } = opts
+
+        return (
+          <Toast
+            variant={ variant }
+            title={ title }
+            description={ description }
+            onClose={ onClose }
+          />
+        )
+      },
+      position: 'top',
+      ...opts,
+    }
+
+    const { replacePreviousToast = false } = opts
+    if (replacePreviousToast && toastIdRef && toastIdRef.current) {
+      toast.update(toastIdRef.current, toastProps)
+    } else {
+      toastIdRef.current = toast(toastProps)
+    }
+  }
+}

package/lib/components/toolbox/index.ts

@@ -0,0 +1,5 @@
+export * from './toolbox'
+export * from './toolbox-header'
+export * from './toolbox-content'
+export * from './toolbox-footer'
+export * from './types'

package/lib/components/toolbox/toolbox-content.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { useMultiStyleConfig } from '@chakra-ui/system'
+import { merge } from 'ramda'
+import { Flex } from '../flex'
+import { ToolboxContentProps } from './types'
+
+/**
+ * Main content of toolbox drawer
+ * @see Toolbox
+ * @see {@link https://northlight.dev/reference/toolbox-content}
+ */
+export const ToolboxContent = ({ sx = {}, children, ...rest }: ToolboxContentProps) => {
+  const { body } = useMultiStyleConfig('Toolbox', {})
+
+  return (
+    <Flex
+      sx={ merge(body, sx) }
+      { ...rest }
+    >
+      { children }
+    </Flex>
+  )
+}

package/lib/components/toolbox/toolbox-footer.tsx

@@ -0,0 +1,18 @@
+import { useMultiStyleConfig } from '@chakra-ui/system'
+import React from 'react'
+import { Flex } from '../flex'
+import { ToolboxFooterProps } from './types'
+
+/**
+ * @see Toolbox
+ * @see {@link https://northlight.dev/reference/toolbox-footer}
+ */
+export const ToolboxFooter = ({ children, ...rest }: ToolboxFooterProps) => {
+  const { footer } = useMultiStyleConfig('Toolbox', {})
+
+  return (
+    <Flex sx={ footer } { ...rest }>
+      { children }
+    </Flex>
+  )
+}

package/lib/components/toolbox/toolbox-header.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { useMultiStyleConfig } from '@chakra-ui/system'
+import { CloseButton } from '../close-button'
+import { Flex } from '../flex'
+import { ToolboxHeaderProps } from './types'
+import { H4 } from '../typography'
+
+/**
+ * @see Toolbox
+ * @see {@link https://northlight.dev/reference/toolbox-header}
+ *
+ */
+export const ToolboxHeader = ({
+  children,
+  onClose,
+  ...rest
+}: ToolboxHeaderProps) => {
+  const { header } = useMultiStyleConfig('Toolbox', {})
+
+  return (
+    <Flex sx={ header } { ...rest }>
+      { typeof children === 'string' ? <H4>{ children }</H4> : children }
+      <CloseButton
+        aria-label="Close toolbox"
+        position="fixed"
+        right={ 4 }
+        onClick={ onClose }
+      />
+    </Flex>
+  )
+}