@northlight/ui 2.41.0 → 2.41.1

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

@@ -0,0 +1,165 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Button, InputRightElement, useDisclosure } from '@chakra-ui/react'
+import { is } from 'ramda'
+import { ComboPickerOption, ComboPickerProps, ComboPickerValue } from './types'
+import { Select, SingleValue } from '../select'
+import { Box } from '../box'
+import { FormattedNumberInput } from '../text-field'
+
+/**
+ * @see ComboPickerField
+ * @see {@link https://northlight.dev/reference/combo-picker}
+ */
+export const ComboPicker = ({
+  onChange,
+  options,
+  size,
+  value: valueProp,
+  placeholder,
+  precision,
+  formatPreset,
+  isDisabled,
+  isReadOnly,
+  defaultToZeroIfEmpty = true,
+  max = Infinity,
+  min = -Infinity,
+  ...rest
+}: ComboPickerProps) => {
+  const { isOpen, onToggle, onClose } = useDisclosure()
+  const [ inputValue, setInputValue ] = useState(valueProp?.input)
+  const [ selectOption, setSelectOption ] = useState(valueProp?.option)
+  const [ enableSelectInput, setEnableSelectInput ] = useState(false)
+
+  const buttonRef = useRef<any>()
+  const selectRef = useRef<any>()
+
+  const getNewValue = (option?: ComboPickerOption, input?: number): ComboPickerValue => {
+    const newValueOption = option ?? options[0]
+
+    return (is(Number, input))
+      ? { input: Number(input), option: newValueOption }
+      : { option: newValueOption }
+  }
+
+  const handleInputChange = (newInputvalue?: number) => {
+    const newValue = getNewValue(valueProp?.option, newInputvalue)
+
+    onChange?.(newValue)
+  }
+
+  const handleSelectClose = () => {
+    if (buttonRef.current) {
+      buttonRef.current.focus()
+      setEnableSelectInput(false)
+    }
+
+    onClose()
+  }
+
+  const handleSelectChange = (selectedOption: SingleValue<ComboPickerOption>) => {
+    if (selectedOption) {
+      onChange?.(getNewValue(selectedOption, valueProp?.input))
+
+      if (isOpen) {
+        handleSelectClose()
+      }
+    }
+  }
+
+  const handleSelectToggle = () => {
+    if (!isOpen) {
+      setEnableSelectInput(true)
+    }
+
+    onToggle()
+  }
+
+  useEffect(() => {
+    if (enableSelectInput) {
+      selectRef.current.focus()
+    }
+  }, [ enableSelectInput ])
+
+  useEffect(() => {
+    const option = valueProp?.option ?? options[0]
+    const input = defaultToZeroIfEmpty ? valueProp?.input ?? 0 : valueProp?.input
+
+    setSelectOption(option)
+    setInputValue(input)
+
+    onChange?.(getNewValue(option, input))
+  }, [ valueProp?.input, valueProp?.option, defaultToZeroIfEmpty, options ])
+
+  const buttonWidth = (buttonRef.current?.offsetWidth ?? 0)
+
+  return (
+    <>
+      <FormattedNumberInput
+        width="100%"
+        onChange={ (values) => handleInputChange(values.floatValue) }
+        value={ inputValue }
+        placeholder={ placeholder }
+        size={ size }
+        numberOfDecimals={ precision }
+        preset={ formatPreset }
+        disabled={ isDisabled }
+        readOnly={ isReadOnly }
+        min={ min }
+        max={ max }
+        { ...rest }
+        pr={ `${buttonWidth >= 0 ? buttonWidth + 10 : 0}px` }
+        inputRightElement={ (
+          <InputRightElement
+            width="auto"
+            display="flex"
+            justifyContent="flex-end"
+            py={ 2 }
+            mr={ 2 }
+          >
+            <Button
+              ref={ buttonRef }
+              isDisabled={ isDisabled }
+              onClick={ handleSelectToggle }
+              flexShrink="0"
+              height="100%"
+              data-testid="combo-picker-button"
+            >
+              { selectOption?.label ?? '' }
+            </Button>
+          </InputRightElement>
+    ) }
+      />
+      {
+        isOpen && (
+          <Box position="absolute" width="100%" top={ 0 }>
+            <Select
+              ref={ selectRef }
+              chakraStyles={ { container: (provided) => ({
+                ...provided,
+                position: 'absolute',
+                visibility: 'hidden',
+                right: '0',
+              }),
+              input: (provided) => ({
+                ...provided,
+                pointerEvents: 'none',
+                color: 'transparent',
+                display: enableSelectInput ? 'block' : 'none',
+              }),
+              menu: (provided) => ({
+                ...provided,
+                width: 'auto',
+                right: '0',
+              }) } }
+              options={ options }
+              value={ selectOption ? selectOption.value : undefined }
+              onChange={ handleSelectChange }
+              onBlur={ handleSelectClose }
+              menuIsOpen={ isOpen }
+            />
+          </Box>
+        )
+      }
+    </>
+  )
+}

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

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

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

@@ -0,0 +1,35 @@
+import { RegisterOptions } from 'react-hook-form'
+import { StackDirection } from '@chakra-ui/react'
+import { FormattedNumberInputPreset, FormattedNumberInputProps } from '../text-field'
+
+export type ComboPickerValue = {
+  input?: number
+  option: ComboPickerOption
+}
+
+export type ComboPickerOption = {
+  label: string
+  value: string
+}
+
+export interface ComboPickerProps extends Omit<FormattedNumberInputProps, | 'value' | 'onChange'> {
+  options: ComboPickerOption[]
+  value?: ComboPickerValue
+  onChange?: (value: ComboPickerValue) => void
+  defaultOption?: ComboPickerOption
+  precision?: number
+  formatPreset?: FormattedNumberInputPreset
+  isDisabled?: boolean
+  isReadOnly?: boolean
+  defaultToZeroIfEmpty?: boolean
+}
+
+export interface ComboPickerFieldProps extends ComboPickerProps {
+  name: string
+  label: string
+  validate?: RegisterOptions
+  isRequired?: boolean
+  direction?: StackDirection
+  labelPlacement?: 'left' | 'right'
+  labelSize?: '2xs' | 'xs' | 'sm' | 'md' | 'lg'
+}

package/lib/components/container/index.ts

@@ -0,0 +1,5 @@
+export {
+  Container,
+} from '@chakra-ui/react'
+
+export type { ContainerProps } from '@chakra-ui/react'

package/lib/components/createable-select-dropdown/createable-select-dropdown.tsx

@@ -0,0 +1,282 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import {
+  ActionMeta,
+  CreatableProps,
+  CreatableSelect,
+  GroupBase,
+  SingleValue,
+} from 'chakra-react-select'
+import { PlusSolid } from '@northlight/icons'
+import { Box, Icon, theme } from '@chakra-ui/react'
+import { any, isEmpty, prop, toLower, trim } from 'ramda'
+import { uniqBy } from 'yafu'
+import { customSelectStyles } from '../../theme/components/select/custom-select'
+import type {
+  CreatableSelectDropdownProps,
+  CreationOption,
+  CreationOptionValue,
+} from './types'
+import { getCustomComponents } from './custom-components'
+import { EditableText } from '../editable-text'
+import type { Option } from '../select/types'
+
+/**
+ * A dropdown component that allows users to select a value from given options
+ * or create a new one if it doesn't exist.
+ * @see {@link https://northlight.dev/reference/creatable-select-dropdown}
+ *
+ * @example (Example)
+ * (?
+ * () => {
+ *   const [artist, setArtist] = useState(null);
+ *   const [element, setElement] = useState({ label: 'Technique', value: 'technique' })
+ *   const someOptions = [
+ *     { label: 'Scooter', value: 'scooter' },
+ *     { label: 'Snoop Doggy Dogg', value: 'snoop-dogg' },
+ *   ];
+ *
+ *   const someOtherOptions = [
+ *     { label: 'Vision', value: 'vision' },
+ *     { label: 'Technique', value: 'technique' },
+ *     { label: 'Expression', value: 'expression' }
+ *   ];
+ *
+ *   return (
+ *     <VStack gap={10} alignItems={"flex-start"}>
+ *       <Box align="left">
+ *         <H1>Basic example</H1>
+ *         <H3>Select the best artist</H3>
+ *         <CreatableSelectDropdown
+ *           standardOptions={someOptions}
+ *           onOptionChange={setArtist}
+ *           width="300px"
+ *           value={artist ? artist.value : undefined}
+ *         />
+ *         {artist && artist.value !== 'Add option...' && (
+ *           <H3 py={8}>The best artist is: {artist.label}</H3>
+ *         )}
+ *       </Box>
+ *       <Box align="left">
+ *         <H1>Pre-selected option</H1>
+ *         <H3>What is the quintessential element of an exceptional artisan?</H3>
+ *         <CreatableSelectDropdown
+ *           standardOptions={someOtherOptions}
+ *           onOptionChange={setElement}
+ *           width="300px"
+ *           value={element ? element.value : undefined}
+ *         />
+ *         {element && element.value !== 'Add option...' && (
+ *           <H3 py={8}>
+ *             {element.value === 'vision' && (
+ *               'The artist\'s vision shapes their creative world.'
+ *             )}
+ *             {element.value === 'technique' && (
+ *               'Technique is the legacy\'s bedrock.'
+ *             )}
+ *             {element.value === 'expression' && (
+ *               'Expression communicates the artist\'s inner voice.'
+ *             )}
+ *             {element.value !== 'vision' &&
+ *                element.value !== 'technique' &&
+ *                element.value !== 'expression' && (
+ *               'Absent the selection of legitimate alternatives.'
+ *              )}
+ *           </H3>
+ *         )}
+ *       </Box>
+ *     </VStack>
+ *   );
+ * }
+ * ?)
+ */
+
+const CREATION_OPTION_VALUE: CreationOptionValue = 'add_field'
+
+export const CreatableSelectDropdown = <T extends string = string>({
+  standardOptions,
+  initialPlaceholder = 'Select or create...',
+  addOptionPlaceholder = 'Select or create...',
+  creationOption = {
+    label: 'Add field',
+    value: CREATION_OPTION_VALUE,
+    isCreation: true,
+  },
+  onOptionChange,
+  variant = 'outline',
+  defaultValue,
+  value,
+  menuPlacement = 'bottom',
+  ...restProps
+}: CreatableSelectDropdownProps<T>) => {
+  const [ selectedOption, setSelectedOption ] =
+  useState<Option<T | CreationOptionValue > | null>(() => {
+    const targetValue = value ?? defaultValue ?? null
+    return targetValue
+      ? standardOptions.find((option) => option.value === targetValue) ?? null
+      : null
+  })
+
+  const [ newOptionPlaceholder, setNewOptionPlaceholder ] =
+    useState(initialPlaceholder)
+  const [ createdOptions, setCreatedOptions ] = useState<Option<T>[]>([])
+  const [ createNewOption, setCreateNewOption ] = useState<boolean>(false)
+  const [ addFieldInputValue, setAddFieldInputValue ] = useState<string>('')
+
+  function isCreationOption (option: any): option is CreationOption {
+    return option && typeof option.isCreation === 'boolean'
+  }
+
+  const ref = useRef<HTMLDivElement>(null)
+
+  const checkIfNewOptionTextExistsInOptions = (
+    string: string,
+    options: Option[]
+  ) => any((option) => toLower(option.value) === string, options)
+
+  const handleCreateOption = (newOptionTextString: T) => {
+    setCreateNewOption(true)
+
+    if (isEmpty(trim(newOptionTextString))) {
+      return
+    }
+
+    const newOptionTextLower = toLower(newOptionTextString)
+
+    const newOptionExistsInStandardOptions =
+      checkIfNewOptionTextExistsInOptions(newOptionTextLower, standardOptions)
+
+    const newOptionExistsInCreatedOptions = checkIfNewOptionTextExistsInOptions(
+      newOptionTextLower,
+      createdOptions
+    )
+
+    if (!newOptionExistsInCreatedOptions && !newOptionExistsInStandardOptions) {
+      const newOption = {
+        label: newOptionTextString,
+        value: newOptionTextString,
+      }
+      setCreatedOptions((currentCreatedOptions) => [
+        ...currentCreatedOptions,
+        newOption,
+      ])
+      setSelectedOption(newOption)
+      onOptionChange(newOption)
+    }
+    setNewOptionPlaceholder(initialPlaceholder)
+  }
+
+  const handleChange = (
+    newValue: SingleValue<Option<T | CreationOptionValue>>,
+    _actionMeta: ActionMeta<Option<T | CreationOptionValue>>
+  ) => {
+    const option = newValue
+
+    if (newValue?.isCreation) {
+      setCreateNewOption(true)
+    }
+
+    if (option == null) {
+      return
+    }
+
+    if (isCreationOption(option)) {
+      setNewOptionPlaceholder(addOptionPlaceholder)
+    } else {
+      setNewOptionPlaceholder(initialPlaceholder)
+    }
+    if (option.value !== CREATION_OPTION_VALUE) {
+      setSelectedOption(option)
+      onOptionChange(option)
+    }
+  }
+
+  const combinedOptions = useMemo(
+    (): Option<T>[] => uniqBy(prop('value'), [ ...standardOptions, ...createdOptions ]),
+    [ standardOptions, createdOptions ]
+  )
+
+  const customOptions: Option<T | CreationOptionValue>[] = [
+    {
+      ...creationOption,
+      icon: <Icon as={ PlusSolid } color="brand" />,
+    },
+    ...combinedOptions,
+  ]
+
+  useEffect(() => {
+    const newSelectedOption =
+      combinedOptions.find((option) => option.value === value) ?? null
+    if (selectedOption?.value !== newSelectedOption?.value) {
+      setSelectedOption(newSelectedOption)
+    }
+  }, [ value, combinedOptions ])
+
+  return (
+    <Box
+      ref={ ref }
+      w="full"
+      borderRadius="none"
+    >
+      { createNewOption && (
+        <EditableText
+          value={ addFieldInputValue }
+          startWithEditView={ true }
+          onChange={ (v) => {
+            setAddFieldInputValue(v)
+          } }
+          submitOnBlur={ false }
+          onCancel={ () => {
+            setAddFieldInputValue('')
+            setCreateNewOption(false)
+          } }
+          onSubmit={ (v) => {
+            handleCreateOption(v as T)
+            setCreateNewOption(false)
+          } }
+          variant="brand"
+          sx={ {
+            minWidth: '100%',
+            width: '100%',
+          } }
+        />
+      ) }
+      { !createNewOption && (
+        <CreatableSelect<Option<T | CreationOptionValue>, false,
+        GroupBase<Option<T | CreationOptionValue>>>
+          menuPlacement={ menuPlacement }
+          chakraStyles={ {
+            ...customSelectStyles,
+            container: (provided) => ({
+              ...provided,
+              width: '100%',
+            }),
+            option: (provided, { isSelected }) => ({
+              ...provided,
+              ...(isSelected && {
+                color: 'black',
+              }),
+            }),
+          } }
+          components={ getCustomComponents<T | CreationOptionValue>() }
+          options={ customOptions }
+          menuPortalTarget={ document.body }
+          styles={ { menuPortal: (base) => ({ ...base, zIndex: theme.zIndices.popover }) } }
+          value={ selectedOption }
+          onChange={ handleChange }
+          isMulti={ false }
+          onCreateOption={ (v) => {
+            setCreateNewOption(true)
+            setAddFieldInputValue(v)
+          } }
+          placeholder={ newOptionPlaceholder }
+          useBasicStyles={ true }
+          variant={ variant }
+          { ...(restProps as CreatableProps<
+          Option<T | CreationOptionValue>, false,
+          GroupBase<Option<T | CreationOptionValue>>>
+          ) }
+        />
+      ) }
+    </Box>
+  )
+}

package/lib/components/createable-select-dropdown/custom-components.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import {
+  GroupBase,
+  SelectComponentsConfig,
+  chakraComponents,
+} from 'chakra-react-select'
+import { PlusSolid } from '@northlight/icons'
+import { Icon } from '../icon'
+import { Box } from '../box'
+import { Flex } from '../flex'
+import { Text } from '../text'
+import { Option } from '../select'
+
+const { Option: ChakraOption } = chakraComponents
+
+type CustomComponents<T extends string> =
+SelectComponentsConfig<Option<T>, false, GroupBase<Option<T>>>
+
+export const getCustomComponents = <T extends string = string>(): CustomComponents<T> => (
+  {
+    Option: ({ children, ...props }) => (
+      <ChakraOption { ...props }>
+        { props.data.isCreation && (
+          <Flex
+            mr={ 3 }
+            width={ 1.5 }
+            mb={ 0.5 }
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Icon as={ PlusSolid } color="brand" />
+          </Flex>
+        ) }
+        { !props.data.isCreation && <Box mr={ 3 } width={ 1.5 } /> }
+        <Text
+          color={ props.data.isCreation ? 'text.brand' : 'text.default' }
+          fontWeight={ props.data.isCreation ? 'semibold' : 'normal' }
+        >
+          { children }
+        </Text>
+      </ChakraOption>
+    ),
+  }
+)

package/lib/components/createable-select-dropdown/index.ts

@@ -0,0 +1 @@
+export * from './createable-select-dropdown'

package/lib/components/createable-select-dropdown/types.ts

@@ -0,0 +1,76 @@
+import { Variant } from 'chakra-react-select/dist/types/types'
+import { ComponentProps } from 'react'
+import { CreatableSelectComponent } from 'chakra-react-select'
+import { Option } from '../select'
+
+export interface CreationOption <T extends string = string> extends Option<T> {
+  isCreation: boolean
+}
+
+export type CreationOptionValue = 'add_field'
+
+export interface CreatableSelectDropdownProps<T extends string = string>
+  extends ComponentProps<CreatableSelectComponent> {
+  /**
+   * An array of "Option" objects that represents the initial options available in the dropdown.
+   * Each "Option" object must have a "label" and a "value" property (both strings).
+   */
+  standardOptions: Option<T>[]
+
+  /**
+   * A callback function that is called whenever the selected option changes.
+   * This function receives the newly selected "Option" object as its only argument.
+   */
+  onOptionChange: (option: Option<T | CreationOptionValue>) => void
+
+  /**
+   * Optional placeholder text displayed when no option is selected and the dropdown is not focused.
+   * Defaults to 'Select or create...' if not provided.
+   */
+  initialPlaceholder?: string
+
+  /**
+   * Optional placeholder text displayed when the dropdown is
+   * focused and the user is prompted to create a new option.
+   * Defaults to 'Enter text...' if not provided.
+   */
+  addOptionPlaceholder?: string
+
+  /**
+   * Optional "Option" object representing the option to create a new item within the dropdown.
+   * This option is typically displayed at the top of the dropdown list.
+   * Defaults to "{ label: 'Add option...', value: 'Add option...' }" if not provided.
+   */
+  creationOption?: CreationOption<CreationOptionValue>
+
+  /**
+   * Optional CSS width property value for the dropdown container.
+   * Specify the width of the dropdown. Defaults to '100%' if not provided.
+   */
+  width?: string
+
+  /**
+   * An optional string that determines the overall styling of the select field.
+   * Accepted values are 'outline', 'filled', 'flushed', or 'unstyled'.
+   * The default value is 'outline'.
+   *
+  */
+  variant?: Variant
+
+  /**
+   * Value of the initially selected option.
+   */
+  defaultValue?: T
+
+  /**
+   * Selected value.
+   */
+  value?: T
+
+  /**
+   *
+    Default placement of the menu in relation to the control. 'auto'
+    will flip when there isn't enough space below the control. Defaults to "bottom".
+   */
+  menuPlacement?: 'top' | 'bottom' | 'auto'
+}

package/lib/components/date-picker/components/calendar/calendar.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { GregorianCalendar } from '@internationalized/date'
+import { useMultiStyleConfig } from '@chakra-ui/react'
+import { useLocale } from '@react-aria/i18n'
+import { useCalendarState } from '@react-stately/calendar'
+import { useCalendar } from '@react-aria/calendar'
+import { ChevronLeftSolid, ChevronRightSolid } from '@northlight/icons'
+import { Flex } from '../../../flex'
+import { Box } from '../../../box'
+import { CalendarGrid, MonthButton } from './components'
+import { HStack, Stack } from '../../../stack'
+import { Icon } from '../../../icon'
+import { YearSelectCalendar } from './date-select'
+import { CalendarProps } from './types'
+
+export const Calendar = (props: CalendarProps) => {
+  const { firstDayOfWeek } = props
+  const { locale } = useLocale()
+  const { container } = useMultiStyleConfig('Calendar')
+
+  const state = useCalendarState({
+    ...props,
+    locale,
+    createCalendar: () => new GregorianCalendar(),
+  })
+
+  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(
+    props,
+    state
+  )
+
+  return (
+    <Box { ...calendarProps } __css={ container }>
+      <Stack>
+        <Flex justifyContent="space-between">
+          <Box paddingInlineStart="2">
+            <YearSelectCalendar state={ state } />
+          </Box>
+          <HStack spacing={ 2 }>
+            <MonthButton { ...prevButtonProps }>
+              <Icon as={ ChevronLeftSolid } boxSize={ 4 } />
+            </MonthButton>
+            <MonthButton { ...nextButtonProps }>
+              <Icon as={ ChevronRightSolid } boxSize={ 4 } />
+            </MonthButton>
+          </HStack>
+        </Flex>
+        <CalendarGrid
+          state={ state }
+          locale={ locale }
+          firstDayOfWeek={ firstDayOfWeek }
+        />
+      </Stack>
+    </Box>
+  )
+}