@northlight/ui 2.41.0 → 2.41.1

package/lib/components/tabs/tabs.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { Tabs as ChakraTabs } from '@chakra-ui/react'
+import { TabsProps } from './types'
+
+/**
+ * Tabs are used for secondary navigation between groups on the page of the same context.
+ * @see TabList
+ * @see TabPanels
+ * @see {@link https://northlight.dev/reference/tabs}
+ * @example
+ * ## Structure
+ * <br />
+ * - **Tabs**: Context provider and state manager for tab components.
+ * - **TabList**: Container for Tab items.
+ * - **Tab**: Interactive label for displaying a TabPanel.
+ * - **TabPanels**: Group wrapper for TabPanel items.
+ * - **TabPanel**: Content area for a Tab.
+ * <br />
+ * <br />
+ * You can render any element within `Tabs`, but `TabList` should only have `Tab` as children,
+ * and `TabPanels` should have `TabPanel` as children. <br />
+ * <br />
+ * `Tabs` expects `TabList` and `TabPanels` as children. The order doesn't matter,
+ * you can have `TabList` at the top, at the bottom, or both.
+ * <br />
+ * <br />
+ *
+ *  ## Usage
+ * <br />
+ * **Tabs** have three main variatns:
+ * `rounded` (default) or no variant, `soft-rounded` and `line`. <br />
+ * Also there are multiple sub-variants: `ai`, `enclosed`,
+ * `enclosed-colored`, `unstyled` and `piped`.
+ * <br />
+ * <br />
+ * tip: `enclosed` and `enclosed-colored` can be combined with the `colorScheme=""` prop.
+ * <br />
+ * <br />
+ * (?
+    <Tabs>
+    <Stack spacing="2">
+      <TabList>
+        <Tab><Icon as={ MediatoolLogoDuo } mr="2" />One</Tab>
+        <Tab><Icon as={ MediatoolLogoDuo } mr="2" />Two</Tab>
+        <Tab><Icon as={ MediatoolLogoDuo } mr="2" />Three</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <P>one!</P>
+        </TabPanel>
+        <TabPanel>
+          <P>two!</P>
+        </TabPanel>
+        <TabPanel>
+          <P>three!</P>
+        </TabPanel>
+      </TabPanels>
+      </Stack>
+    </Tabs>
+ * ?)
+ *
+ */
+export const Tabs = (({
+  children,
+  variant = 'rounded',
+  isManual = true,
+  ...rest
+}: TabsProps) => (
+  <ChakraTabs
+    isManual={ isManual }
+    variant={ variant }
+    { ...rest }
+  >
+    { children }
+  </ChakraTabs>
+))

package/lib/components/tabs/types.ts

@@ -0,0 +1,12 @@
+import {
+  TabPanelProps as ChakraTabPanelProps,
+  TabProps as ChakraTabProps,
+  TabsProps as ChakraTabsProps,
+} from '@chakra-ui/react'
+
+export interface TabsProps extends ChakraTabsProps {}
+export interface TabPanelProps extends ChakraTabPanelProps {}
+export interface TabProps extends ChakraTabProps {
+  /** Custom color for the indicator element (used with 'piped' variant) */
+  elementColor?: string
+}

package/lib/components/tag/index.ts

@@ -0,0 +1,9 @@
+export {
+  TagLabel,
+  TagLeftIcon,
+  TagRightIcon,
+  TagCloseButton,
+} from '@chakra-ui/react'
+export * from './tag'
+export * from './tag-group'
+export * from './types'

package/lib/components/tag/overflow-indicator.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { OverflowIndicatorProps } from './types'
+import { Tag } from './tag'
+
+export const OverflowIndicator = ({
+  nbrRemainingTags,
+}: OverflowIndicatorProps) => (
+  <Tag variant="subtle" minW="max-content">
+    +{ nbrRemainingTags }
+  </Tag>
+)

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

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+import { HStack } from '../stack'
+import { OverflowGroup, useOverflowGroup } from '../overflow-group'
+import { TagGroupProps } from './types'
+import { OverflowIndicator as DefaultOverflowIndicator } from './overflow-indicator'
+
+/**
+ * Used when rending multiple tags in limited container for responsive layout
+ * @see Tag
+ * @see {@link https://northlight.dev/reference/tag-group}
+ *
+ * @example
+ * ##Try resizing the window!
+ * (?
+  <TagGroup w="full"
+  borderWidth="sm"
+  borderColor="border.default"
+  borderStyle="solid"
+  p="2"
+  borderRadius="md"
+  >
+    { Array.from({length: 20}, (_, i) => i).map((i) => (
+      <Tag w="max-content" key={ i }>Brand-{ i }</Tag>
+    )) }
+  </TagGroup>
+ * ?)
+ *
+ *
+ */
+export const TagGroup = ({
+  children,
+  max = Infinity,
+  spacing = '2',
+  OverflowIndicator = DefaultOverflowIndicator,
+  ...rest
+}: TagGroupProps) => {
+  const [ nbrRemainingTags, setNbrRemainingTags ] = useState(0)
+  const { rect, containerRef } = useOverflowGroup()
+
+  return (
+    <HStack
+      bgColor="background.default"
+      ref={ containerRef }
+      overflow="hidden"
+      { ...rest }
+    >
+      <HStack spacing={ spacing }>
+        <OverflowGroup max={ max } onChange={ setNbrRemainingTags } rect={ rect }>
+          { children }
+        </OverflowGroup>
+      </HStack>
+      { nbrRemainingTags > 0 && (
+        <OverflowIndicator nbrRemainingTags={ nbrRemainingTags } />
+      ) }
+    </HStack>
+  )
+}

package/lib/components/tag/tag.tsx

@@ -0,0 +1,97 @@
+import React, { forwardRef } from 'react'
+import { Tag as ChakraTag } from '@chakra-ui/react'
+import { useCurrentTheme } from '../../utils'
+import { TagProps } from './types'
+
+/**
+ * Tag component is used for items that need to be labeled,
+ * categorized, or organized using keywords that describe them.
+ * @see TagGroup
+ * @see {@link https://northlight.dev/reference/tag}
+ *
+ * @example
+ * (?
+ * <Tag>Hello</Tag>
+ * ?)
+ *
+ * @example
+ * (?
+ * +
+ * const colors = ["mediatoolBlue", "blue", "gray", "red", "green",
+ * "orange", "yellow", "teal", "purple", "pink"]
+ * const variants = ["solid", "subtle"]
+ * const Example = () =>  {
+ *    return <Stack>
+ *        { colors.map((color) => (
+ *    <HStack spacing={ 4 }>
+ *        {
+ *      variants.map((variant) => (
+ *      <HStack spacing={ 4 }>
+ *                 <Tag size="sm" variant={variant} colorScheme={color}>
+ *                    <TagLeftIcon size="xs">
+*                       <Icon as={ MediatoolLogoDuo } />
+ *                    </TagLeftIcon>
+ *                    <TagLabel>
+ *                      Hello
+ *                    </TagLabel>
+ *                    <TagRightIcon size="xs">
+ *                      <Icon as={ MediatoolLogoDuo } />
+ *                    </TagRightIcon>
+ *                  </Tag>
+ *                  <Tag size="md" variant={variant} colorScheme={color}>
+ *                    <TagLeftIcon size="md">
+ *                       <Icon as={ MediatoolLogoDuo } />
+ *                    </TagLeftIcon>
+ *                    <TagLabel>
+ *                      Hello
+ *                    </TagLabel>
+ *                    <TagRightIcon size="md">
+ *                      <Icon as={ MediatoolLogoDuo } />
+ *                    </TagRightIcon>
+ *                  </Tag>
+ *                  <Tag size="lg" variant={variant} colorScheme={color}>
+ *                    <TagLeftIcon size="lg">
+ *                       <Icon as={ MediatoolLogoDuo } />
+ *                    </TagLeftIcon>
+ *                    <TagLabel>
+ *                      Hello
+ *                    </TagLabel>
+ *                    <TagRightIcon size="lg">
+ *                      <Icon as={ MediatoolLogoDuo } />
+ *                    </TagRightIcon>
+ *                  </Tag>
+ *         </HStack>
+ *      ))
+ *      }
+ *       </HStack>
+ *    ))
+ *    }
+ *    </Stack>
+ * }
+ *  render(<Example/>)
+ * ?)
+ *
+ *
+*/
+export const Tag = forwardRef<HTMLSpanElement, TagProps>(({
+  children,
+  variant = 'solid',
+  bgColor,
+  colorScheme,
+  ...rest
+}, ref) => {
+  const currentTheme = useCurrentTheme()
+
+  return (
+    <ChakraTag
+      bgColor={ bgColor }
+      colorScheme={ colorScheme }
+      ref={ ref }
+      variant={ variant }
+      currentTheme={ currentTheme }
+      { ...rest }
+    >
+      { children }
+    </ChakraTag>
+  )
+})

package/lib/components/tag/types.ts

@@ -0,0 +1,15 @@
+import { TagProps as ChakraTagProps, StackProps } from '@chakra-ui/react'
+
+export interface TagProps extends ChakraTagProps {
+  bgColor?: string
+  variant?: 'solid' | 'subtle'
+}
+export interface OverflowIndicatorProps {
+  nbrRemainingTags: number
+}
+export interface TagGroupProps extends StackProps {
+  max?: number
+  spacing?: number | string
+  children: JSX.Element[] | React.ReactNode[]
+  OverflowIndicator?: (props: OverflowIndicatorProps) => JSX.Element
+}

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

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

package/lib/components/tags-input/tags-input-styles.ts

@@ -0,0 +1,35 @@
+import { ChakraStylesConfig } from 'chakra-react-select'
+import { customSelectStyles } from '../../theme/components/select/custom-select'
+
+export const tagsInputStyles = (
+  isFocused: boolean,
+  borderColor: string
+): ChakraStylesConfig<any> => ({
+  ...customSelectStyles,
+  container: (provided) => ({
+    ...provided,
+    w: 'full',
+    height: '100%',
+    resize: 'vertical',
+    overflow: 'auto',
+    minHeight: '20',
+    borderColor: 'select.default',
+    borderRadius: 'select.default',
+    transitionDuration: 'normal',
+    transitionProperty: 'box-shadow',
+    color: 'text.default',
+    boxShadow: isFocused ? `0 0 0 1px ${borderColor}` : 'none',
+  }),
+  control: (provided) => ({
+    ...provided,
+    minHeight: '20',
+    height: '100%',
+    alignItems: 'start',
+  }),
+  valueContainer: (provided) => ({
+    ...provided,
+    paddingInlineStart: 'padding-inline.select.default',
+    overflowY: 'auto',
+    maxH: '100%',
+  }),
+})

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

@@ -0,0 +1,147 @@
+import React, {
+  FunctionComponent,
+  KeyboardEvent,
+  useEffect,
+  useState,
+} from 'react'
+import {
+  ActionMeta,
+  CreatableSelect,
+  MultiValue,
+} from 'chakra-react-select'
+import { any, identity, isEmpty } from 'ramda'
+import { Box } from '../box'
+import { useToken } from '../../hooks'
+import { TagsInputProps } from './types'
+import { Option } from '../select'
+import { tagsInputStyles } from './tags-input-styles'
+import { theme } from '../../theme'
+/**
+ * Tags Input, based of react creatable select, is meant to select
+ * multiple tags. Follows styling of textarea and is resizable.
+ *
+ * @see {@link https://northlight.dev/reference/tags-input}
+ * @example (Example)
+ * ## Simple
+ * (?
+ * <TagsInput />
+ * ?)
+ *
+ * @example (Example)
+ * ## With suggestions
+ * (?
+ * <TagsInput options={[{ label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }]}/>
+ * ?)
+ *
+ */
+export function TagsInput<T extends Option> ({
+  options,
+  onChange = identity,
+  isLoading,
+  loadingList = () => null,
+  'data-testid': testId,
+  value = [],
+  onError,
+  ...rest
+}: TagsInputProps<T>) {
+  const [ borderColor ] = useToken('border.select', [ 'focus' ])
+  const [ menuIsOpen, setMenuIsOpen ] = useState(false)
+  const [ inputValue, setInputValue ] = useState('')
+  const [ selectedOptions, setSelectedOptions ] = useState<MultiValue<T>>(value)
+  const [ isFocused, setIsFocused ] = useState(false)
+
+  useEffect(() => {
+    setSelectedOptions(value)
+  }, [ value.length ])
+
+  const CustomSelect = CreatableSelect as FunctionComponent<TagsInputProps<T>>
+
+  const handleChange = (values: MultiValue<T>, actionMeta: ActionMeta<T>) => {
+    setSelectedOptions(values)
+    onChange(values, actionMeta)
+  }
+
+  const isValidNewOption = (input: string, availableOptions: MultiValue<T>) => !any(
+    (option) => option.value === input,
+    availableOptions
+  )
+
+  const addNewOption = (newOption: T) => {
+    const updatedOptions = [ ...selectedOptions, newOption ]
+    onChange(updatedOptions, { action: 'select-option', option: newOption })
+    setSelectedOptions(updatedOptions)
+  }
+
+  const clearInput = () => {
+    setInputValue('')
+  }
+
+  const handleInputChange = (newInput: string) => {
+    if (newInput === ',') return
+
+    setInputValue(newInput)
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const shouldAddOption = event.key === 'Enter' || event.key === 'Tab' || event.key === ','
+
+    if (!shouldAddOption || isEmpty(inputValue)) return
+
+    const trimmedInputValue = inputValue.trim()
+
+    if (isValidNewOption(trimmedInputValue, selectedOptions)) {
+      const newOption: Option = { value: trimmedInputValue, label: trimmedInputValue }
+      addNewOption(newOption as T)
+    } else {
+      onError?.('Tag already exists')
+    }
+
+    clearInput()
+  }
+
+  const handleFocus = () => {
+    setIsFocused(true)
+    if (options && options.length > 0) {
+      setMenuIsOpen(true)
+    }
+  }
+
+  return (
+    <Box w="full" data-testid={ testId }>
+      <CustomSelect
+        isMulti={ true }
+        menuPortalTarget={ document.body }
+        placeholder="Type something and press Enter or comma..."
+        options={ options }
+        useBasicStyles={ true }
+        closeMenuOnSelect={ false }
+        hideSelectedOptions={ false }
+        isClearable={ false }
+        onChange={ handleChange }
+        onInputChange={ handleInputChange }
+        onKeyDown={ handleKeyDown }
+        inputValue={ inputValue }
+        selectedOptionStyle="check"
+        chakraStyles={ tagsInputStyles(isFocused, borderColor) }
+        onFocus={ handleFocus }
+        isValidNewOption={ isValidNewOption }
+        onBlur={ () => {
+          setMenuIsOpen(false)
+          setIsFocused(false)
+        } }
+        menuIsOpen={ menuIsOpen }
+        isLoading={ isLoading }
+        { ...(isLoading && { components: { MenuList: loadingList } }) }
+        value={ selectedOptions }
+        components={ {
+          DropdownIndicator: () => null,
+        } }
+        styles={ { menuPortal: (base) => ({ ...base, zIndex: theme.zIndices.popover }) } }
+        formatCreateLabel={ (textInputValue: string) =>
+          `Add tag "${textInputValue}"`
+          }
+        { ...rest }
+      />
+    </Box>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { MultiValue } from 'chakra-react-select'
+import { SelectProps } from '../select'
+
+export interface TagsInputProps<T>
+  extends Omit<
+  SelectProps<T, true>,
+  | 'value'
+  | 'formatCreateLabel'
+  | 'isValidNewOption'
+  | 'onAdd'
+  | 'onRemove'
+  | 'leftIcon'
+  | 'icon'
+  | 'customOption'
+  > {
+  value?: MultiValue<T>
+  formatCreateLabel?: (textInputValue: string) => string
+  isValidNewOption?: (option: string, selectOptions: MultiValue<T>) => boolean
+  onError?: (message: string) => void
+}

package/lib/components/text/index.ts

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

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

@@ -0,0 +1,54 @@
+import React, { forwardRef } from 'react'
+import { identity } from 'ramda'
+import { FormattedNumberInputFieldProps } from './types'
+import { Field } from '../form'
+import { FormattedNumberInput } from './formatted-number-input'
+
+/**
+ * The formatted number input component wrapped in a <Field />
+ * meant to be used only inside <Form />
+ * @see FormattedNumberInput
+ * @see {@link https://northlight.dev/reference/formatted-number-input-field}
+ * @example (Example)
+ * (?
+ * <Form initialValues={{money: ''}}>
+ *  <FormattedNumberInputField
+ *   name="money"
+ *   label="How much money is currently on your account"
+ *   labelPosition="left"
+ *  />
+ * </Form>
+ * ?)
+ *
+ */
+export const FormattedNumberInputField =
+forwardRef<HTMLDivElement, FormattedNumberInputFieldProps>(({
+  name,
+  label,
+  isRequired,
+  validate,
+  onChange: onChangeCallback = identity,
+  direction = 'row',
+  ...rest
+}, ref) => (
+  <Field
+    name={ name }
+    label={ label }
+    isRequired={ isRequired }
+    direction={ direction }
+    validate={ validate }
+    ref={ ref }
+  >
+    { ({ onChange, value }) => (
+      <FormattedNumberInput
+        name={ name }
+        onChange={ (values, sourceInfo) => {
+          onChange(values.floatValue)
+          onChangeCallback(values, sourceInfo)
+        } }
+        value={ value }
+        { ...rest }
+      />
+    ) }
+  </Field>
+))