@northlight/ui 2.41.0 → 2.41.1

package/lib/components/form/form.tsx

@@ -0,0 +1,210 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
+import {
+  DefaultValues,
+  FieldValues,
+  FormProvider,
+  Resolver,
+  UseFormReturn,
+  useForm,
+} from 'react-hook-form'
+import { always, equals } from 'ramda'
+import { joiResolver } from '@hookform/resolvers/joi'
+import { FormProps } from './types'
+import { trimFormValues } from './trim-form-values'
+
+/**
+ * The context provider for handling state of components wrapped in field
+ * @see Field
+ * @see {@link https://northlight.dev/reference/form}
+ *
+ * @example (Example)
+ * ## Basic
+ * (?
+ * <Form initialValues={{name: ''}} onSubmit={console.log}>
+ * <TextField name="name" label="What is your name" />
+ * </Form>
+ * ?)
+ *
+ * @example (Example)
+ * ## With form methods
+ * The form context provider passes down a lot of methods for handling state
+ * (?
+ * <Form initialValues={{name: ''}}>
+ * {({watch, reset }) => (
+ * <Stack>
+ * <TextField name="name" label="What is your name?"/>
+ * <Button variant="danger" onClick={() => reset({})}>Reset</Button>
+ * <Code>{JSON.stringify(watch(), null, 2)}</Code>
+ * </Stack>
+ * )}
+ *
+ * </Form>
+ * ?)
+ * You can view more form methods on the **<a href="https://react-hook-form.com/api/useform/" target="_blank">react hook form docs</a>**
+ *  (everything that the useForm hooks returns)
+ *
+ * @example (Example)
+ * ## Validation with joi
+ *
+ * You can pass on validation either by using a custom validate
+ * function, by passing html validation directly on a field, or by
+ * using joi schema. joi schema is recommended when possible.
+ *
+ * (?
+ * +
+
+const joiSchema = Joi.object({
+  username: Joi.string().alphanum().min(3).max(30).required(),
+  password: Joi.string().pattern(new RegExp('^[a-zA-Z0-9]{3,30}$')).required(),
+});
+
+ * const MyForm = () => (
+  <Form initialValues={{name: ''}} joiSchema={joiSchema}>
+  <Stack>
+    <TextField name="username" label="User Name"/>
+    <TextField name="password" label="Password" />
+  </Stack>
+  </Form>
+  )
+ *
+ * render(<MyForm />)
+ * ?)
+ *
+ * @example (Example)
+ * ## Moving the form state outside of Form
+ * (?
+
+//This code could live in the backend
+const submitValuesToBackend = (values) => {
+  console.log({values})
+  if(values.firstName !== 'Steve') {
+    throw Error('We only allow people named Steve \;\)')
+  }
+}
+const MyForm = () => (
+<Form
+  initialValues={ { firstName: '' } }
+  onSubmit={ async (values, methods) => {
+      try {
+        await submitValuesToBackend(values)
+      }
+      catch (err) {
+        methods.setError('firstName', { message: err.message })
+      }
+  } }
+>
+  <HStack alignItems="end" p="3">
+    <TextField
+      name="firstName"
+      label="First Name"
+      isRequired={ true }
+    />
+    <Button type="submit" variant="success">Validate</Button>
+  </HStack>
+</Form>
+
+  )
+
+render(<MyForm />)
+
+ * ?)
+
+@example (Example)
+## Using a ref
+You can move up the form state using a ref as well
+(?
+() => {
+  const methods = useRef(null)
+
+  return (
+    <Stack>
+    <Form
+    ref={methods}
+    initialValues={{name: ''}}
+    >
+    <TextField name="name" label="What is your name?" />
+    </Form>
+  <Button onClick={() => methods.current.reset({name: (Math.round(Math.random() * 100))})}>
+  Get random number
+  </Button>
+    </Stack>
+
+  )
+
+}
+?)
+
+ */
+export const Form = forwardRef(<FormValues extends FieldValues>({
+  initialValues,
+  onSubmit,
+  children,
+  validate,
+  formSettings = { mode: 'onChange' },
+  methods = undefined,
+  enableReinitialize = false,
+  shouldTrim = true,
+  innerFormStyle = {},
+  joiSchema,
+  ...rest
+}: FormProps<FormValues>, ref: React.Ref<UseFormReturn<FormValues>>) => {
+  const customResolver: Resolver<FormValues, any> = (
+    values,
+    _context,
+    _options
+  ) => ({
+    values,
+    errors: validate(values),
+  })
+
+  const getResolver = () => {
+    if (validate) return customResolver
+    if (joiSchema) return joiResolver(joiSchema)
+    return undefined
+  }
+
+  const newMethods =
+    methods ||
+    useForm<FormValues>({
+      defaultValues: initialValues as DefaultValues<FormValues>,
+      resolver: getResolver(),
+      ...formSettings,
+    })
+
+  useImperativeHandle(ref, always(newMethods), [])
+
+  if (enableReinitialize) {
+    const initalValuesImage = useRef({})
+    useEffect(() => {
+      if (!equals(initalValuesImage.current, initialValues)) {
+        newMethods?.reset(initialValues)
+        initalValuesImage.current = initialValues
+      }
+    }, [ initialValues ])
+  }
+
+  const formatValues = (values: FormValues) => {
+    if (!shouldTrim) {
+      return values
+    }
+
+    return trimFormValues<FormValues>(values)
+  }
+
+  const handleSubmit = newMethods.formState.isValid
+    ? newMethods.handleSubmit((values) =>
+      onSubmit(formatValues(values), newMethods)
+    )
+    : (e: React.FormEvent<HTMLFormElement>) => {
+      newMethods.trigger()
+      e.preventDefault()
+    }
+
+  return (
+    <FormProvider { ...newMethods } { ...rest }>
+      <form style={ { width: '100%', ...innerFormStyle } } onSubmit={ handleSubmit }>
+        { typeof children === 'function' ? children(newMethods) : children }
+      </form>
+    </FormProvider>
+  )
+})

package/lib/components/form/index.ts

@@ -0,0 +1,5 @@
+export * from './form'
+export * from './field'
+export * from './use-set-value-refreshed'
+export * from './types'
+export * from './trim-form-values'

package/lib/components/form/trim-form-values.ts

@@ -0,0 +1,20 @@
+import { forEach, identity, is, keys, trim, values } from 'ramda'
+import { FieldValues } from 'react-hook-form'
+
+const shouldTrim = (value: any): ((object: FieldValues) => FieldValues) =>
+  (is(Array, value) ? values : identity)
+
+export const trimFormValues = <T extends FieldValues>(obj: FieldValues) => {
+  const newObj: FieldValues = obj
+  forEach((property) => {
+    const value = obj[property]
+    if (is(Object, value)) {
+      const format = shouldTrim(value)
+      newObj[property] = format(trimFormValues(value as FieldValues))
+    }
+    if (is(String, value)) {
+      newObj[property] = trim(value as string)
+    }
+  }, keys(obj))
+  return newObj as T
+}

package/lib/components/form/types.ts

@@ -0,0 +1,99 @@
+import { ReactNode } from 'react'
+import {
+  Control,
+  ControllerRenderProps,
+  FieldError,
+  FieldErrorsImpl,
+  FieldPath,
+  FieldValues,
+  Merge,
+  UseFormReturn as RHFUseFormReturn,
+  RegisterOptions,
+  SetValueConfig,
+  UseFormProps,
+} from 'react-hook-form'
+import { StackDirection, StackProps } from '@chakra-ui/react'
+import { Schema } from 'joi'
+
+export type UseFormReturn<T extends FieldValues> = RHFUseFormReturn<T>
+
+type Maybe<T> = T | undefined
+
+type CustomSubmitHandler<TFieldValues extends FieldValues> = (
+  data: TFieldValues,
+  event: UseFormReturn<TFieldValues>
+) => any | Promise<any>
+
+export type SetValueOptionsType = Maybe<SetValueConfig>
+
+export interface FieldProps<
+  FormValues extends FieldValues = FieldValues,
+  FieldName extends FieldPath<FormValues> = FieldPath<FormValues>
+> extends Omit<StackProps, 'children'> {
+  name: FieldName
+  /** Label displayed as text beside or under/over
+   * (depending on direction prop) over children. Recommended for accesibility */
+  label?: string
+  /** The input and label will be rendered inside a stack,
+   *  this determines whether to put the label above/below/left/right of the input */
+  direction?: StackDirection
+  isRequired?: boolean
+  /** In rare cases the htmlFor attribute can mess up the markup,
+   *  if this prop is true then htmlFor on the label will be undefined */
+  noLabelConnection?: boolean
+  /** Inline validation, in most cases validation should be handled in the form component itself,
+   *  but you can pass down simple validation like
+   * validate={{maxLength: {message: 'Max 40 characters', value: 40}}}
+   * for more information view https://react-hook-form.com/api/useform/register/ docs. (Whatever you put into the validate object will be put as the second options arguments on the react hook form register method)
+   * */
+  validate?: RegisterOptions
+  /**
+  * The value is taken from the formContext by default,
+  * but may be manually specified to ensure field type inference.
+  * */
+  control?: Control<FormValues>
+  children: (
+    field: ControllerRenderProps<FormValues, FieldName>,
+    methods: UseFormReturn<FormValues>
+  ) => JSX.Element
+}
+
+export interface FormProps<FormValues extends FieldValues> {
+  /** This should contain an object with the name of the fields and their default values. */
+  initialValues: FormValues
+  /** This prop will reset the form if the initial values change */
+  enableReinitialize?: boolean
+  onSubmit: CustomSubmitHandler<FormValues>
+  /** You can define your own form methods outside of the form component using the useForm hook and passing down via methods prop:  https://react-hook-form.com/api/useform/ */
+  methods?: UseFormReturn<FormValues>
+  /** Every option that can be passed to useForm hook kan be passed here,
+   *  for example formSettings={{mode: 'onChange'}}
+   * (will trigger validation function on every change in form state */
+  formSettings?: UseFormProps<FormValues>
+  /** A functtion that takes in the current form values, and returns an object,
+   *  where the keys are the name of the fields and the values are object
+   * with a message key of what error occured.
+   * ex: validate ={(formValues) => {
+   * let errors = {}
+   * if(formValues.name === 'DROP TABLE;') {
+   * errors.name = {message: 'Nice try'}
+   * }
+   * return errors
+   * }}
+   * */
+  validate?: any
+  /** This will recursively trim all values strings inside the form values,
+   *  no matter how nesteed they are */
+  shouldTrim?: boolean
+  /** Enter a JSON schema using Joi.object and pass it down here to be used for validation */
+  joiSchema?: Schema
+  children:
+  | ((methods: UseFormReturn<FormValues>) => ReactNode)
+  | ReactNode
+  innerFormStyle?: any
+}
+
+export type FieldErrorType<T extends FieldValues> =
+  | FieldError
+  | Merge<FieldError, FieldErrorsImpl<T>>
+  | undefined

package/lib/components/form/use-set-value-refreshed.ts

@@ -0,0 +1,12 @@
+import { useFormContext } from '../../hooks'
+import { SetValueOptionsType } from './types'
+
+export const useSetValueRefreshed = () => {
+  const { setValue, watch } = useFormContext()
+
+  const setValueRefreshed = (name: any, value: any, options: SetValueOptionsType) => {
+    watch(name)
+    setValue(name, value, options)
+  }
+  return setValueRefreshed
+}

package/lib/components/form-control/form-label.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react'
+import { FormLabelProps } from './types'
+import { Label } from '../typography'
+
+/**
+ * Renders a label, meant to be used alongside a field component
+ * @see Field
+ * @see {@link https://northlight.dev/reference/form-label}
+ *
+ */
+export const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps >(({
+  children: label,
+  ...rest
+}, ref) => (
+  <Label
+    size="sm"
+    sx={ {
+      width: '80%',
+      maxWidth: '45ch',
+      marginBottom: 1,
+      marginInlineEnd: 3,
+    } }
+    requiredIndicator={ undefined }
+    { ...rest }
+    ref={ ref }
+  >
+    { label }
+  </Label>
+))

package/lib/components/form-control/index.ts

@@ -0,0 +1,7 @@
+export {
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+} from '@chakra-ui/react'
+export * from './form-label'
+export * from './types'

package/lib/components/form-control/types.ts

@@ -0,0 +1,5 @@
+import { LabelProps, LabelSizes } from '../typography'
+
+export interface FormLabelProps extends LabelProps {
+  size?: LabelSizes
+}

package/lib/components/grid/index.ts

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

package/lib/components/heading/index.ts

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

package/lib/components/highlight/index.ts

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

package/lib/components/icon/icon.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import {
+  Icon as ChakraIcon,
+  forwardRef,
+  useStyleConfig,
+} from '@chakra-ui/react'
+import { IconProps } from './types'
+
+/**
+ * Pass down any icon from northlight/icons via as prop
+ * @see IconButton
+ * @see {@link https://northlight.dev/reference/icon}
+ *
+ * @example
+ * (?
+ * <Icon as={SmileyDuo} size="lg" />
+ * ?)
+ */
+export const Icon = forwardRef(({
+  as: As,
+  size,
+  color,
+  boxSize,
+  ...rest
+}: IconProps, ref: any) => {
+  const CustomIcon = As ?? (() => <ChakraIcon />)
+  const styles = useStyleConfig('Icon', { size, color, boxSize })
+
+  return (
+    <ChakraIcon
+      ref={ ref }
+      sx={ styles }
+      { ...rest }
+    >
+      <CustomIcon />
+    </ChakraIcon>
+  )
+})

package/lib/components/icon/index.ts

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

package/lib/components/icon/types.ts

@@ -0,0 +1,7 @@
+import { ComponentType } from 'react'
+import { IconProps as ChakraIconProps } from '@chakra-ui/react'
+
+export interface IconProps extends ChakraIconProps {
+  as?: ComponentType<any>
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+}

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

@@ -0,0 +1,45 @@
+import React, { cloneElement, forwardRef } from 'react'
+import { IconButton as ChakraIconButton } from '@chakra-ui/react'
+import { IconButtonProps } from './types'
+
+/**
+ * A normal button but renders an icon instead of text
+ * @see Button
+ * @see Icon
+ * @see {@link https://northlight.dev/reference/icon-button}
+ *
+ * @example (Example)
+ * (?
+ * <IconButton variant='brand' icon={<Icon as={UsersDuo} />} onClick={console.log}/>
+ * ?)
+ *
+ * @example (Example)
+ * (?
+        <IconButton
+          isRound={ true }
+          aria-label="create"
+          variant="success"
+          icon={ <Icon as={ PlusSolid } /> }
+        />
+ * ?)
+ *
+ */
+export const IconButton = forwardRef(({
+  variant = 'default',
+  icon,
+  'aria-label': ariaLabel,
+  children,
+  ...rest
+}: IconButtonProps, ref: any) => {
+  const IconComponent = icon ?? children as JSX.Element
+  const IconWithSize = cloneElement(IconComponent, { size: IconComponent.props.size ?? rest.size })
+  return (
+    <ChakraIconButton
+      variant={ variant }
+      icon={ IconWithSize }
+      aria-label={ ariaLabel }
+      ref={ ref }
+      { ...rest }
+    />
+  )
+})

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

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

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

@@ -0,0 +1,6 @@
+import { IconButtonProps as ChakraIconButtonProps } from '@chakra-ui/react'
+import { ButtonVariants } from '../button/types'
+
+export interface IconButtonProps extends ChakraIconButtonProps {
+  variant?: ButtonVariants
+}

package/lib/components/image/index.ts

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

package/lib/components/index.ts

@@ -0,0 +1,94 @@
+export * from './accordion'
+export * from './tags-input'
+export * from './organization-logo'
+export * from './alert'
+export * from './alert-dialog'
+export * from './aspect-ratio'
+export * from './avatar'
+export * from './badge'
+export * from './box'
+export * from './breadcrumb'
+export * from './blinker'
+export * from './button'
+export * from './card'
+export * from './center'
+export * from './checkbox'
+export * from './color-picker'
+export * from './circle'
+export * from './flip-button'
+export * from './resize-handle'
+export * from './mark'
+export * from './circular-progress'
+export * from './date-picker'
+export * from './intent-button'
+export * from './close-button'
+export * from './code'
+export * from './toolbox'
+export * from './container'
+export * from './carousel'
+export * from './search-bar'
+export * from './divider'
+export * from './drag-and-drop'
+export * from './drawer'
+export * from './editable'
+export * from './flex'
+export * from './form-control'
+export * from './fast-list'
+export * from './fast-grid'
+export * from './grid'
+export * from './heading'
+export * from './icon'
+export * from './icon-button'
+export * from './input'
+export * from './image'
+export * from './file-picker'
+export * from './kbd'
+export * from './keyframes'
+export * from './link'
+export * from './link-overlay'
+export * from './overflow-group'
+export * from './list'
+export * from './mediatool-theme-provider'
+export * from './menu'
+export * from './number-input'
+export * from './notification-icon-button'
+export * from './pin-input'
+export * from './popover'
+export * from './portal'
+export * from './progress'
+export * from './radio'
+export * from './range-slider'
+export * from './select'
+export * from './simple-grid'
+export * from './skeleton'
+export * from './slider'
+export * from './spinner'
+export * from './stack'
+export * from './stat'
+export * from './switch'
+export * from './table'
+export * from './tabs'
+export * from './tag'
+export * from './text'
+export * from './textarea'
+export * from './text-field'
+export * from './toast'
+export * from './tooltip'
+export * from './transitions'
+export * from './visually-hidden'
+export * from './wrap'
+export * from './status-pin'
+export * from './async-error'
+export * from './modal'
+export * from './form'
+export * from './steps'
+export * from './clipboard-input'
+export * from './typography'
+export * from './clickable'
+export * from './highlight'
+export * from './split-pane'
+export * from './editable-text'
+export * from './step-stack'
+export * from './show'
+export * from './createable-select-dropdown'
+export * from './combo-picker'

package/lib/components/input/index.ts

@@ -0,0 +1,19 @@
+import {
+  Input,
+  InputAddon,
+  InputGroup,
+  InputLeftAddon,
+  InputLeftElement,
+  InputRightAddon,
+  InputRightElement,
+} from '@chakra-ui/react'
+
+export {
+  Input,
+  InputGroup,
+  InputAddon,
+  InputLeftAddon,
+  InputRightAddon,
+  InputLeftElement,
+  InputRightElement,
+}

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

@@ -0,0 +1 @@
+export * from './intent-button'