@northlight/ui 2.41.0 → 2.41.1

package/lib/components/flip-button/flip-button-group.tsx

@@ -0,0 +1,70 @@
+import React, { Children, cloneElement, isValidElement } from 'react'
+import { useMultiStyleConfig } from '@chakra-ui/react'
+import { omit } from 'ramda'
+import { Stack } from '../stack'
+import { FlipButtonGroupProps } from './types'
+import { FlipButtonContext, useFlipButton } from './utils'
+
+/**
+ * Provides context to FlipButton
+ * @see FlipButton
+ * @see {@link https://northlight.dev/reference/flip-button-group}
+ */
+export const FlipButtonGroup = (props: FlipButtonGroupProps) => {
+  const {
+    isMulti = false,
+    name,
+    children,
+    direction = 'row',
+    isDisabled = false,
+    iconPlacement = 'left',
+    size,
+    variant,
+    icon,
+    sx = {},
+    ...rest
+  } = props
+
+  const { state, flipButtonGroupProps } = useFlipButton(props, isMulti)
+
+  const numberOfButtons = Children.count(children)
+
+  const childrenWithProps = (Children.toArray(children)).map((child: React.ReactNode) =>
+    (isValidElement(child)
+      ? cloneElement(child, {
+        key: child.props.value,
+        isMulti,
+        variant,
+        isDisabled,
+        iconPlacement,
+        icon,
+        size,
+        ...child.props,
+      })
+      : child)
+  )
+
+  const { container } = useMultiStyleConfig('FlipButton', {
+    size,
+    variant,
+    numberOfButtons,
+    sx,
+  })
+
+  const restWithoutOnChange = omit([ 'onChange' ], rest)
+
+  return (
+    <Stack
+      { ...flipButtonGroupProps }
+      direction={ direction }
+      id={ name }
+      spacing={ 0 }
+      sx={ container }
+      { ...restWithoutOnChange }
+    >
+      <FlipButtonContext.Provider value={ state }>
+        { childrenWithProps }
+      </FlipButtonContext.Provider>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,185 @@
+import React, { forwardRef, useContext, useRef } from 'react'
+import { CheckSolid } from '@northlight/icons'
+import { useCheckboxGroupItem } from '@react-aria/checkbox'
+import { SlideFade, useMultiStyleConfig } from '@chakra-ui/react'
+import { useRadio } from '@react-aria/radio'
+import { useFocusRing } from '@react-aria/focus'
+import { mergeAll, omit } from 'ramda'
+import { CheckboxGroupState } from '@react-stately/checkbox'
+import { RadioGroupState } from '@react-stately/radio'
+import { mergeProps } from '@react-aria/utils'
+import { FlipButtonContext } from './utils'
+import { HStack } from '../stack'
+import { Icon } from '../icon'
+import { Text } from '../text'
+import { CustomContainerPropsType, CustomFlipButtonPropsType, FlipButtonProps } from './types'
+
+/**
+ * Meant to act as a middleman to turn any component into
+ * either a radio or checkbox input
+ * where the user can choose between multiple options
+ * @see CheckboxGroup
+ * @see RadioGroup
+ * @see FlipButtonGroup
+ * @see {@link https://northlight.dev/reference/flip-button}
+ *
+ * @example (Example)
+ * ### It must always be wrapped in a group
+ * (?
+ * <FlipButton />
+ * ?)
+ * Or it will throw an error
+ *
+ *
+ * @example (Example)
+ * ### As a radio button group
+ * (?
+  *<FlipButtonGroup isMulti={ false } size="sm">
+  <FlipButton value="one" icon={AgencyDuo}>One</FlipButton>
+  <FlipButton value="two" icon={StagesDuo}>Two</FlipButton>
+  <FlipButton value="three" icon={Flag04Duo}>Three</FlipButton>
+</FlipButtonGroup>
+ * ?)
+ *
+ * @example (Example)
+ * ### As a checkbox button group
+ * (?
+  *<FlipButtonGroup isMulti={ true } size="sm">
+  <FlipButton value="one" icon={TagsStackDuo}>One</FlipButton>
+  <FlipButton value="two" icon={Image03Duo}>Two</FlipButton>
+  <FlipButton value="three" icon={TagDuo }>Three</FlipButton>
+</FlipButtonGroup>
+ * ?)
+ *
+ * @example (Example)
+ * ###Custom Flip Button
+ * (?
+ * +
+ * const customElement = ({
+  flipButtonProps,
+  containerProps,
+  isSelected,
+  label,
+  value,
+}) => (
+  <HStack
+    { ...containerProps }
+    spacing="4"
+    _checked={ { bgColor: 'blue.500', color: 'text.inverted' } }
+    borderRadius="md"
+    p="2"
+  >
+    <input { ...flipButtonProps } />
+    <Icon as={ UsersDuo } />
+    <Stack spacing="0">
+      <Text>{ label }</Text>
+      <Text color={ isSelected ? 'text.inverted' : 'gray.200' }>
+        { value === 'public'
+          ? 'Everyone can view and edit the plan'
+          : 'The plan is only visible to you'
+        }
+      </Text>
+    </Stack>
+  </HStack>
+)
+
+const MyComponent = () => (
+<FlipButtonGroup direction="column" sx={{bgColor: 'transparent'}}>
+  <FlipButton value="public" label="Public">
+    { customElement }
+  </FlipButton>
+  <FlipButton value="private" label="Private">
+    { customElement }
+  </FlipButton>
+</FlipButtonGroup>
+
+)
+render(<MyComponent/>)
+ *
+ * ?)
+ *
+ */
+export const FlipButton = forwardRef<HTMLDivElement, FlipButtonProps>((props, wrapperRef) => {
+  const {
+    children,
+    size,
+    variant,
+    isMulti,
+    isDisabled = false,
+    icon,
+    value,
+    iconPlacement = 'left',
+    ...rest
+  } = props
+  const state = useContext(FlipButtonContext)
+  const ref = useRef(null)
+
+  const propsWithoutChildren = omit([ 'children' ], { ...props, 'aria-label': `${isMulti ? 'Checkbox' : 'Radio'}-input for ${value}` })
+  const { inputProps } = isMulti
+    ? useCheckboxGroupItem(propsWithoutChildren, state as CheckboxGroupState, ref)
+    : useRadio(propsWithoutChildren, state as RadioGroupState, ref)
+
+  const { button, buttonIcon } = useMultiStyleConfig('FlipButton', { size, variant })
+  const { focusProps, isFocusVisible: isFocused } = useFocusRing()
+  const focusStyles = {
+    outline: 'none',
+    ring: '2px',
+    ringColor: 'border.wcag',
+    ringOffset: '1px',
+  }
+  const focusRing = isFocused ? focusStyles : {}
+
+  const isSelected = isMulti
+    ? (state as CheckboxGroupState).isSelected(value)
+    : (state as RadioGroupState).selectedValue === value
+
+  const flipButtonProps: CustomFlipButtonPropsType = {
+    ...mergeProps(inputProps, focusProps),
+    ref,
+    style: { opacity: '0', width: '0', height: '0' },
+    'aria-label': isMulti ? 'Checkbox-input' : 'Radio-input',
+  }
+
+  const containerProps: CustomContainerPropsType = {
+    'aria-checked': isSelected,
+    'aria-disabled': isDisabled,
+    sx: focusRing,
+    as: 'label',
+    cursor: 'pointer',
+  }
+
+  return typeof children === 'function'
+    ? children({
+      state,
+      containerProps,
+      flipButtonProps,
+      isFocused,
+      isSelected,
+      isDisabled,
+      isMulti: isMulti || false,
+      focusRing,
+      value,
+      ...rest,
+    })
+    : (
+      <HStack
+        spacing={ (isSelected && iconPlacement !== 'none') || icon ? 2 : 0 }
+        sx={ mergeAll([ button, isFocused ? focusStyles : {}, { flexDirection: iconPlacement === 'left' ? 'row' : 'row-reverse' } ]) }
+        aria-checked={ isSelected }
+        aria-disabled={ isDisabled }
+        as="label"
+        ref={ wrapperRef }
+      >
+        <input { ...flipButtonProps } />
+        { icon && iconPlacement !== 'none'
+          ? (
+            <Icon as={ icon || CheckSolid } sx={ buttonIcon } />
+          ) : isSelected && iconPlacement !== 'none' && (
+            <SlideFade in={ isSelected }>
+              <Icon as={ icon || CheckSolid } sx={ buttonIcon } />
+            </SlideFade>
+          ) }
+        <Text textAlign="center">{ children }</Text>
+      </HStack>
+    )
+})

package/lib/components/flip-button/index.ts

@@ -0,0 +1,4 @@
+export * from './flip-button'
+export * from './flip-button-group'
+export * from './flip-button-group-field'
+export * from './types'

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

@@ -0,0 +1,100 @@
+import React, { ComponentType, InputHTMLAttributes } from 'react'
+import { StackDirection } from '@chakra-ui/react'
+import { RegisterOptions } from 'react-hook-form'
+import { CheckboxGroupState } from '@react-stately/checkbox'
+import { RadioGroupState } from '@react-stately/radio'
+import { CSSObject } from '@emotion/react'
+
+type FlipButtonSize = 'xs' | 'sm' | 'md' | 'lg'
+type FlipButtonVariant = 'default' | 'brand' | 'light'
+
+type StyleType = {
+  opacity: '0'
+  width: '0'
+  height: '0'
+}
+
+type InputPropsType = InputHTMLAttributes<HTMLInputElement>
+type FocusPropsType = React.DOMAttributes<Element>
+
+type UnionToIntersection<U> = (
+  U extends any
+    ? (k: U) => void
+    : never
+) extends (k: infer I) => void
+  ? I
+  : never
+
+type TupleTypes<T> = {
+  [P in keyof T]: T[P];
+} extends {
+  [key: number]: infer V
+} ? V : never
+
+type MergedFocusAndInputProps = UnionToIntersection<TupleTypes<[InputPropsType, FocusPropsType]>>
+
+export interface CustomFlipButtonPropsType
+  extends MergedFocusAndInputProps {
+  ref: React.MutableRefObject<null>
+  style: StyleType
+  'aria-label': string
+}
+
+type FocusRingType = {
+  outline?: string
+  ring?: string
+  ringColor?: string
+  ringOffset?: string
+}
+
+export type CustomContainerPropsType = {
+  'aria-checked': boolean
+  'aria-disabled': boolean
+  sx: FocusRingType
+  as: 'label'
+  cursor: 'pointer'
+}
+export interface CustomFlipButtonProps {
+  state: CheckboxGroupState | RadioGroupState | null
+  flipButtonProps: CustomFlipButtonPropsType
+  containerProps: CustomContainerPropsType
+  isFocused: boolean
+  isSelected: boolean
+  isDisabled: boolean
+  isMulti: boolean
+  focusRing: FocusRingType
+  label?: string
+  value: string
+}
+export interface FlipButtonProps {
+  size?: FlipButtonSize
+  variant?: FlipButtonVariant
+  isMulti?: boolean
+  isDisabled?: boolean
+  icon?: ComponentType<any>
+  value: string
+  label?: string
+  iconPlacement?: 'left' | 'right' | 'none'
+  children?: ((props: CustomFlipButtonProps) => JSX.Element) | string
+}
+
+export interface FlipButtonGroupProps
+  extends Omit<FlipButtonProps, 'value' | 'children' | 'label'> {
+  onChange?: (val: string | string[]) => void
+  direction?: StackDirection
+  children?: React.ReactNode[] | React.ReactNode
+  name?: string
+  value?: string | string[]
+  iconPlacement?: 'left' | 'right' | 'none'
+  /** This enables passing styles directly to the div closes to the flip buttons */
+  sx?: CSSObject
+}
+
+export interface FlipButtonGroupFieldProps extends FlipButtonGroupProps {
+  name: string
+  label: string
+  isRequired?: boolean
+  validate?: RegisterOptions
+  value?: string | string[]
+  iconPlacement?: 'left' | 'right' | 'none'
+}

package/lib/components/flip-button/utils.ts

@@ -0,0 +1,45 @@
+import { DOMAttributes, createContext } from 'react'
+import { RadioGroupProps, RadioGroupState, useRadioGroupState } from '@react-stately/radio'
+import { CheckboxGroupProps, CheckboxGroupState, useCheckboxGroupState } from '@react-stately/checkbox'
+import { AriaCheckboxGroupProps, useCheckboxGroup } from '@react-aria/checkbox'
+import { AriaRadioGroupProps, useRadioGroup } from '@react-aria/radio'
+import { FlipButtonGroupProps } from './types'
+
+export const FlipButtonContext = createContext<CheckboxGroupState | RadioGroupState | null>(null)
+
+export const useFlipButtonState = (
+  props: FlipButtonGroupProps,
+  isMulti: boolean
+) => (
+  isMulti
+    ? useCheckboxGroupState(props as CheckboxGroupProps)
+    : useRadioGroupState(props as RadioGroupProps)
+)
+
+export const useFlipButtonGroup = (
+  props: FlipButtonGroupProps,
+  state: CheckboxGroupState | RadioGroupState,
+  isMulti: boolean
+): DOMAttributes<Element> => {
+  const propsWithLabel = {
+    ...props,
+    'aria-label': `${isMulti ? 'Checkbox' : 'Radio'}-button-group`,
+  }
+
+  return (isMulti
+    ? useCheckboxGroup(
+      propsWithLabel as AriaCheckboxGroupProps,
+      state as CheckboxGroupState
+    ).groupProps
+    : useRadioGroup(
+      propsWithLabel as AriaRadioGroupProps,
+      state as RadioGroupState
+    ).radioGroupProps
+  )
+}
+
+export const useFlipButton = (props: FlipButtonGroupProps, isMulti: boolean) => {
+  const state = useFlipButtonState(props, isMulti)
+  const flipButtonGroupProps = useFlipButtonGroup(props, state, isMulti)
+  return { state, flipButtonGroupProps }
+}

package/lib/components/form/field.tsx

@@ -0,0 +1,147 @@
+import React, { forwardRef } from 'react'
+import { Controller, FieldPath, FieldValues } from 'react-hook-form'
+import { FormControl, FormErrorMessage, FormLabel } from '../form-control'
+import { Stack } from '../stack'
+import { FieldProps } from './types'
+import { useFormContext } from '../../hooks'
+import { getFieldError } from '../../utils'
+
+/**
+ * Wraps children under form context
+ * @see TextField
+ * @see Form
+ * @see {@link https://northlight.dev/reference/field}
+ *
+ * @example (Example)
+ * ## Input example
+ * (?
+ * <Form initialValues={{name: ''}}>
+ * <Box p="2">
+ * <Field name="name" label="Input name">
+ * {({value, onChange}) => (
+ * <Input value={value} onChange={onChange} />
+ * )}
+ * </Field>
+ * </Box>
+ *
+ * </Form>
+ * ?)
+ * <br />
+ * As you can see the field component acts as a middleman to connect
+ * any component to the form context, via a controlled value and onChange prop.
+ *  Most of the common use cases for field,
+ *  such as text input have been abstracted into their own components, for example _TextField_
+ *
+ * @example (Example)
+ * ## Example with validation and form submition
+ * (?
+ * () => {
+ * const toast = useToast()
+ * const handleSubmit =(v) => {
+ *  toast({title: 'Sent Message', description: `"${v.message}"`})
+ * }
+ * return (
+ * <Form initialValues={{message: ''}} onSubmit={handleSubmit}>
+ * <Stack p="2">
+ * <Field
+ * name="message"
+ * label="Write email"
+ * isRequired={true}
+ * validate={{maxLength: {message: 'Message must be under 30 characters', value: 30}}}
+ * >
+ * {({value, onChange}) => (
+ * <Textarea value={value} onChange={onChange} />
+ * )}
+ * </Field>
+ * <Button type="submit" variant="brand">Send Message</Button>
+ * </Stack>
+ *
+ * </Form>
+ * )
+ * }
+ * ?)
+ *
+ * @example (Example)
+ * ## Type-safety
+ * There are multiple ways to provide types for
+ * the field callback values. To ensure that each
+ * component within the field receives the correct
+ * value, it's essential to make the field aware
+ * of the form state values. When the Field component
+ * does not receive any types, the "value" callback
+ * argument will have the type of "any".
+ * <br /><br />
+ * ### Passing down the control prop (Recommended)
+ * (?
+ * <Form initialValues={{username: 'Alex'}}>
+ * {
+ * ({ control }) => {
+ * <Box p="2">
+ * <Field name="username" label="Input name" control={ control }>
+ * {({value, onChange}) => ( // "value" has type of "string"
+ * <Input value={value} onChange={onChange} />
+ * )}
+ * </Field>
+ * </Box>
+ * }
+ * }
+ * </Form>
+ * ?)
+ * <br /><br />
+ * ### Specifying generic arguments
+ * You can also specify generic arguments on the Field
+ * component to ensure that "value" has a valid type.
+ * The passed generic type combined with the valid
+ * "name" property ensures that "value" has the expected
+ * type received from the generic type:
+ * `<Field<MyFormBody> name="username">...</Field>`
+ */
+
+const BaseField = <
+  FormValues extends FieldValues = FieldValues,
+  FieldName extends FieldPath<FormValues> = FieldPath<FormValues>
+> ({
+    name,
+    label,
+    children,
+    direction = 'column',
+    isRequired = false,
+    noLabelConnection = false,
+    validate,
+    control: passedControl,
+    ...rest
+  }: FieldProps<FormValues, FieldName>, ref: React.Ref<HTMLDivElement>) => {
+  const methods = useFormContext<FormValues>()
+  const { formState: { errors } } = methods
+  const control = passedControl ?? methods.control
+
+  const fieldError = getFieldError<FormValues>(name, errors)
+
+  return (
+    <FormControl isInvalid={ !!fieldError } isRequired={ isRequired } ref={ ref }>
+      <Stack
+        spacing="auto"
+        direction={ direction }
+        alignItems={ direction === 'column' ? 'stretch' : 'center' }
+        { ...rest }
+      >
+        { label && (
+          <FormLabel htmlFor={ noLabelConnection ? undefined : name } mb={ 1 }>
+            { label }
+          </FormLabel>
+        ) }
+        <Controller
+          name={ name }
+          control={ control }
+          rules={ validate }
+          render={ ({ field }) => children(field, methods) }
+        />
+      </Stack>
+      <FormErrorMessage>
+        { fieldError && (fieldError?.message as string) }
+      </FormErrorMessage>
+    </FormControl>
+  )
+}
+
+export const Field = forwardRef(BaseField)