@northlight/ui 2.41.0 → 2.41.1

package/lib/components/button/button.tsx

@@ -0,0 +1,111 @@
+import React, { forwardRef } from 'react'
+import { Button as ChakraButton } from '@chakra-ui/react'
+import { Spinner } from '../spinner'
+import { ButtonProps } from './types'
+
+const SpinnerSizeMap = {
+  xs: 'xs',
+  sm: 'sm',
+  md: 'sm',
+  lg: 'md',
+}
+
+/**
+ * @see {@link https://northlight.dev/reference/button}
+ *
+ * @example
+ * (?
+        <Button
+          variant="success"
+          leftIcon={ <Icon as={ FolderCheckDuo } /> }
+          rightIcon={ <Icon as={ PlusDuo } /> }
+        >
+          Create folder
+        </Button>
+ * ?)
+ *
+ * @example
+ * ### Use the `isLoading` prop to show a loading spinner
+ * (?
+        <Button
+            variant="success"
+            isLoading={ true }
+            loadingText="Creating folder..."
+        >
+          Create folder
+        </Button>
+ * ?)
+ *
+ * @example
+ * ### Also use the `spinner` prop to show a custom spinner
+ * (?
+        <Button
+            variant="success"
+            isLoading={ true }
+            loadingText="Creating folder..."
+            spinner={ <Spinner color="text.success" /> }
+        >
+          Creating folder
+        </Button>
+ * ?)
+ *
+ * @example (Example)
+ * (?
+ * +
+ * const variants = ['link', 'success', 'default', 'danger', 'brand', 'accent',
+ *  'ghost', 'ai', 'outline', 'brandSubdued', 'solid']
+ *
+ * const ExampleButton = () => {
+ *  const [currentVariant, setCurrentVariant ] = useState(0)
+ *  const [ isLoading, setIsLoading ] = useState(false)
+ *
+ * const handleClick = () => {
+ * setIsLoading(true)
+ * setTimeout(() => {
+ * setCurrentVariant((prev) => prev === variants.length - 1 ? 0 : prev + 1)
+ * setIsLoading(false)
+ * }, 300)
+ *
+ * }
+ *
+ *  return (
+ * <Button variant={variants[currentVariant]}
+ * isLoading={isLoading} onClick={handleClick} loadingText="Saving...">
+ * Save changes
+ * </Button>
+ * )
+ *
+ * }
+ *
+ * render(<ExampleButton/>)
+ * ?)
+ *
+ * @example (Example)
+ * Use LinkOverlay to turn the button into a link
+ *
+ * (?
+ * <LinkBox>
+  * <LinkOverlay as={NavLink} to="/" />
+  * <Button variant="link">Go to home page</Button>
+  * </LinkBox>
+ * ?)
+ */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>((
+  { variant = 'default', children, size = 'md', ...rest },
+  ref
+) => (
+  <ChakraButton
+    variant={ variant }
+    ref={ ref }
+    size={ size }
+    spinner={ (
+      <Spinner
+        size={ SpinnerSizeMap[size] }
+      />
+        ) }
+    { ...rest }
+  >
+    { children }
+  </ChakraButton>
+)
+)

package/lib/components/button/index.ts

@@ -0,0 +1,5 @@
+export {
+  ButtonGroup,
+} from '@chakra-ui/react'
+export * from './button'
+export * from './types'

package/lib/components/button/types.ts

@@ -0,0 +1,20 @@
+import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react'
+
+export type ButtonVariants =
+  | 'default'
+  | 'danger'
+  | 'success'
+  | 'brand'
+  | 'brandSubdued'
+  | 'link'
+  | 'ghost'
+  | 'ai'
+  | 'outline'
+  | 'solid'
+  | 'accent'
+  | 'sidebar'
+
+export type ButtonProps = Omit<ChakraButtonProps, 'as' | 'size'> & {
+  variant?: ButtonVariants
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+}

package/lib/components/card/index.ts

@@ -0,0 +1,6 @@
+export {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+} from '@chakra-ui/react'

package/lib/components/carousel/carousel-arrow.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { ChevronLeftSolid, ChevronRightSolid } from '@northlight/icons'
+import { useMultiStyleConfig } from '@chakra-ui/react'
+import { Center } from '../center'
+import { IconButton } from '../icon-button'
+import { Icon } from '../icon'
+import { CarouselArrowProps } from './types'
+
+export const CarouselArrow = ({
+  onClick,
+  direction,
+  ...rest
+}: CarouselArrowProps) => {
+  const { arrow } = useMultiStyleConfig('Carousel', {})
+
+  return (
+    <Center
+      sx={ arrow }
+      onClick={ onClick }
+      { ...rest }
+    >
+      <IconButton aria-label={ `move carousel to ${direction}` } variant="ghost" size="lg">
+        <Icon as={ direction === 'right' ? ChevronRightSolid : ChevronLeftSolid } />
+      </IconButton>
+    </Center>
+  )
+}

package/lib/components/carousel/carousel-item.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { motion } from 'framer-motion'
+import { Center } from '../center'
+import { carouselItemWidth } from './constants'
+import { CarouselItemProps } from './types'
+
+const variants = {
+  active: { scale: 1.15, opacity: 1 },
+  inActive: { scale: 0.95, opacity: 0.7 },
+}
+
+export const CarouselItem = ({
+  children,
+  isActive = false,
+  itemWidth = carouselItemWidth,
+  itemHeight = carouselItemWidth,
+}: CarouselItemProps) => (
+  <motion.div animate={ isActive ? 'active' : 'inActive' } variants={ variants }>
+    <Center minW={ `${itemWidth}px` } h={ `${itemHeight}px ` }>
+      { children }
+    </Center>
+  </motion.div>
+)

package/lib/components/carousel/carousel.tsx

@@ -0,0 +1,223 @@
+import React, { Children, useEffect, useRef, useState } from 'react'
+import { animate, motion, useMotionValue } from 'framer-motion'
+import { identity } from 'ramda'
+import { useMultiStyleConfig } from '@chakra-ui/react'
+import { Box } from '../box'
+import { HStack } from '../stack'
+import { Radio, RadioGroup } from '../radio'
+import { CarouselItem } from './carousel-item'
+import { CarouselArrow } from './carousel-arrow'
+import { carouselItemSpacing, carouselItemWidth } from './constants'
+import { CarouselProps } from './types'
+
+/**
+ * Easiely one of the fanciest components, horizontal carousel wrapper for anything
+ *
+ * @see {@link https://northlight.dev/reference/carousel}
+ *
+ * @example (Example)
+ * The carousel takes up 100% of its parents container width and height.
+ *  It then renders all children div into a draggable div using framer-motion
+
+ * (?
+ * +
+ *const Item = ({ name, ...rest }) => (
+  <Center color="white" bg="teal.500" rounded="md" w="full" h="full" { ...rest }>
+    { name }
+  </Center>
+)
+
+const MyCarousel = () => (
+<Box h="300px">
+  <Carousel>
+    <Item name="Item 1" />
+    <Item name="Item 2" />
+    <Item name="Item 3" />
+  </Carousel>
+</Box>
+
+)
+
+render(<MyCarousel />)
+ *
+ * ?)
+ *
+ * @example (Example)
+ * ##Controling the carousel state
+ * The carousel takes an **onChange** and value
+ * (which is the index of the current active element), meaning it can be controlled.
+ *
+ * (?
+ * +
+ * const Item = ({ name, ...rest }) => (
+  <Center color="white" bg="teal.500" rounded="md" w="full" h="full" { ...rest }>
+    { name }
+  </Center>
+)
+
+const MyCarousel = () => {
+  const [index, setIndex ] = useState(0)
+  return (
+
+    <VStack
+    borderColor="border.default"
+    borderWidth="sm" borderStyle="solid" p="2" borderRadius="lg">
+      <Box w="full" h="sm">
+        <Carousel
+          showArrows={ false }
+          showRadio={ false }
+          value={ index }
+          onChange={ (v) => setIndex(v) }
+        >
+          <Item name="Item 1" />
+          <Item name="Item 2" />
+          <Item name="Item 3" />
+        </Carousel>
+      </Box>
+      <FlipButtonGroup
+        onChange={ (v) => setIndex(parseInt(v, 10)) }
+        value={ `${index}` }
+        variant="brand"
+      >
+        <FlipButton value="0">One</FlipButton>
+        <FlipButton value="1">Two</FlipButton>
+        <FlipButton value="2">Three</FlipButton>
+      </FlipButtonGroup>
+    </VStack>
+  )
+}
+*
+render(<MyCarousel/>)
+ * ?)
+ *(You can also hide the default
+            navigational arrows and radio button using <b>showArrows</b> and
+            <b>showRadio</b> as in example)
+ */
+export const Carousel = ({
+  children,
+  showArrows = true,
+  showRadio = true,
+  value: controlledIndex = 0,
+  onChange = identity,
+  itemWidth = carouselItemWidth,
+  itemHeight = carouselItemWidth,
+  spacing = carouselItemSpacing,
+  carouselStyles = {},
+  ...rest
+}: CarouselProps) => {
+  const [ dragging, setDragging ] = useState(false)
+  const [ containerWidth, setContainerWidth ] = useState(0)
+  const [ activeIndex, setActiveIndex ] = useState(0)
+  const x = useMotionValue(0)
+  const { radio, container } = useMultiStyleConfig('Carousel', {})
+
+  const childrenAsArray = Children.toArray(children) as JSX.Element[]
+  const numberOfChildren = Children.count(children)
+  const carouselTotalWidth = itemWidth + spacing
+  const totalWidth = carouselTotalWidth * numberOfChildren
+
+  const containerRef = useRef<any>(null)
+
+  useEffect(() => {
+    setContainerWidth(containerRef.current.clientWidth)
+  }, [])
+
+  const getNewX = () => -(activeIndex * carouselTotalWidth)
+
+  const updateActiveIndex = () => {
+    setActiveIndex(Math.abs(Math.round(x.get() / carouselTotalWidth)))
+  }
+
+  useEffect(() => {
+    animate(x, getNewX())
+    onChange(activeIndex)
+  }, [ activeIndex ])
+
+  useEffect(() => {
+    setActiveIndex(controlledIndex)
+  }, [ controlledIndex ])
+
+  const handleRightArrowClick = () => {
+    setActiveIndex((prev) =>
+      (activeIndex === numberOfChildren - 1 ? 0 : prev + 1)
+    )
+  }
+
+  const handleLeftArrowClick = () => {
+    setActiveIndex((prev) =>
+      (activeIndex === 0 ? numberOfChildren - 1 : prev - 1)
+    )
+  }
+
+  return (
+    <Box
+      cursor={ dragging ? 'grabbing' : 'grab' }
+      onMouseDown={ () => setDragging(true) }
+      onMouseUp={ () => setDragging(false) }
+      ref={ containerRef }
+      pl={ `${(containerWidth - itemWidth) / 2}px` }
+      sx={ container }
+      { ...rest }
+    >
+      <motion.div
+        drag="x"
+        style={ {
+          width: `${totalWidth}px`,
+          height: '100%',
+          x,
+        } }
+        dragConstraints={ { right: 0, left: -(totalWidth - itemWidth) } }
+        onDragEnd={ updateActiveIndex }
+      >
+        <HStack
+          spacing={ `${spacing}px` }
+          width={ `${totalWidth}px` }
+          h="full"
+          { ...carouselStyles }
+        >
+          { childrenAsArray.map((child, index) => (
+            <CarouselItem
+              isActive={ index === activeIndex }
+              itemWidth={ itemWidth }
+              itemHeight={ itemHeight }
+              key={ `carousel-item-${index as number}` }
+            >
+              { child }
+            </CarouselItem>
+          )) }
+        </HStack>
+      </motion.div>
+      { showRadio && (
+        <RadioGroup
+          onChange={ (val) => setActiveIndex(parseInt(val, 10)) }
+          value={ `${activeIndex}` }
+          sx={ radio }
+        >
+          <HStack>
+            { childrenAsArray.map((_child, i) => (
+              <Radio
+                value={ `${i}` }
+                size="lg"
+                key={ `carousel-radio-${i as number}` }
+              />
+            )) }
+          </HStack>
+        </RadioGroup>
+      ) }
+      { showArrows && (
+        <>
+          <CarouselArrow
+            direction="left"
+            onClick={ handleLeftArrowClick }
+            left="2"
+          />
+          <CarouselArrow
+            direction="right"
+            onClick={ handleRightArrowClick }
+            right="2"
+          />
+        </>
+      ) }
+    </Box>
+  )
+}

package/lib/components/carousel/constants.ts

@@ -0,0 +1,2 @@
+export const carouselItemWidth = 150
+export const carouselItemSpacing = 60

package/lib/components/carousel/index.ts

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

package/lib/components/carousel/types.ts

@@ -0,0 +1,32 @@
+import { BoxProps, CenterProps, StackProps } from '@chakra-ui/react'
+
+export interface CarouselArrowProps extends CenterProps {
+  direction: 'right' | 'left'
+}
+
+export interface CarouselItemProps {
+  children: JSX.Element
+  isActive: boolean
+  itemWidth?: number
+  itemHeight?: number
+}
+
+export interface CarouselProps extends Omit<BoxProps, 'onChange'> {
+  children: JSX.Element[]
+  /** Whether to show default navigational arrows on sides */
+  showArrows?: boolean
+  /** Whether to show default navigational radio button on bottom  */
+  showRadio?: boolean
+  /** This is the width of the container that each seperate child component is rendered within  */
+  itemWidth?: number
+  /** This is the height of the container that each seperate child component is rendered within  */
+  itemHeight?: number
+  spacing?: number
+  /** A number, representing the index of the number
+   * that is currently centered/focused in the carousel */
+  value?: number
+  /** callback function that passes the current centered item in the carousel */
+  onChange?: (value: number) => void
+  /** Custom styles to apply directly on closes wrapper to children */
+  carouselStyles?: StackProps
+}

package/lib/components/center/index.ts

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

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

@@ -0,0 +1,75 @@
+import React, { forwardRef } from 'react'
+import { identity } from 'ramda'
+import { CheckboxFieldProps } from './types'
+import { Field } from '../form'
+import { Checkbox } from './checkbox'
+import { Box } from '../box'
+import { Label } from '../typography'
+import { Flex } from '../flex'
+
+/**
+ * The checkbox component wrapped in a <Field />
+ * meant to be used only inside <Form />
+ * @see Checkbox
+ * @see {@link https://northlight.dev/reference/checkbox-field}
+ * @example (Example)
+ * ## Basic
+ * (?
+ * <Form initialValues={{name: ''}}>
+ *  <CheckboxField
+ *   name="terms"
+ *   label="I agree to the Terms & Conditions"
+ *   labelPlacement="left"
+ *   labelSize="md"
+ *  />
+ * </Form>
+ * ?)
+ *
+ */
+
+export const CheckboxField = forwardRef<HTMLDivElement, CheckboxFieldProps>(({
+  name,
+  label,
+  variant,
+  isRequired,
+  validate,
+  onChange: onChangeCallback = identity,
+  direction = 'row',
+  labelPlacement = 'left',
+  labelSize = 'md',
+  ...rest
+}, ref) => (
+  <Box
+    w={ label ? 'full' : 'fit-content' }
+    display="inline-flex"
+  >
+    <Field
+      name={ name }
+      label=""
+      isRequired={ isRequired }
+      direction={ direction }
+      validate={ validate }
+      ref={ ref }
+    >
+      { ({ onChange, value }) => (
+        <Flex
+          gap={ 2 }
+          direction={ labelPlacement === 'left' ? 'row-reverse' : 'row' }
+        >
+          <Checkbox
+            name={ name }
+            onChange={ (e) => {
+              onChange(e)
+              onChangeCallback(e)
+            } }
+            value={ value }
+            variant={ variant }
+            data-testid="checkbox-field-test-id"
+            { ...rest }
+          />
+          <Label htmlFor={ name } sx={ { fontWeight: 'normal' } } size={ labelSize }>{ label }</Label>
+        </Flex>
+      ) }
+    </Field>
+  </Box>
+))

package/lib/components/checkbox/checkbox-group-field.tsx

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react'
+import { identity } from 'ramda'
+import { CheckboxGroup } from '@chakra-ui/react'
+import { Field } from '../form'
+import { Box } from '../box'
+import { CheckboxFieldGroupProps } from './types'
+
+/**
+ * The checkbox group component wrapped in a <Field />
+ * meant to be used only inside <Form /> together with Checkbox
+ * @see Checkbox
+ * @see {@link https://northlight.dev/reference/checkbox-group-field}
+ *
+ */
+export const CheckboxGroupField = forwardRef<HTMLDivElement, CheckboxFieldGroupProps>(({
+  name,
+  label,
+  children,
+  isRequired,
+  direction,
+  validate,
+  onChange: onChangeCallback = identity,
+  ...rest
+}, ref) => (
+  <Box w={ label ? 'full' : 'fit-content' }>
+    <Field
+      name={ name }
+      label={ label }
+      isRequired={ isRequired }
+      validate={ validate }
+      direction={ direction }
+      ref={ ref }
+    >
+      { ({ onChange, value }) => (
+        <CheckboxGroup
+          onChange={ (e) => {
+            onChange(e)
+            onChangeCallback(e)
+          } }
+          value={ value }
+          data-testid="checkbox-group-field-test-id"
+          { ...rest }
+        >
+          { children }
+        </CheckboxGroup>
+      ) }
+    </Field>
+  </Box>
+))

package/lib/components/checkbox/checkbox.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Checkbox as ChakraCheckbox } from '@chakra-ui/react'
+import { CheckboxProps } from './types'
+
+/**
+ * @see CheckboxField
+ * @see {@link https://northlight.dev/reference/checkbox}
+ *
+ * @example (Example)
+ * Mainly used for forms, however this component is controlled by
+ *  a value prop and an onChange callback
+ *
+ * (?
+ * +
+ * const MyForm = () => {
+ * const [ isVegan, setIsVegan ] = useState(false)
+ *
+ * return (
+ * <Stack p="2">
+ * <Label size="sm" htmlFor="vegan-checkbox">Are you vegan</Label>
+ * <Checkbox name="vegan-checkbox" onChange={() => setIsVegan((prev) => !prev)} value={isVegan} />
+ * </Stack>
+ *
+ * )
+ * }
+ *
+ * render(<MyForm />)
+ *
+ * ?)
+ *
+ */
+export const Checkbox = ({
+  value,
+  onChange,
+  name,
+  size = 'md',
+  variant = 'default',
+  ...rest
+}: CheckboxProps) => {
+  const controlledValue = typeof value === 'boolean'
+    ? { isChecked: value }
+    : { value }
+
+  return (
+    <ChakraCheckbox
+      size={ size }
+      id={ name }
+      onChange={ onChange }
+      variant={ variant }
+      { ...controlledValue }
+      { ...rest }
+    />
+  )
+}

package/lib/components/checkbox/index.ts

@@ -0,0 +1,7 @@
+export {
+  CheckboxGroup,
+} from '@chakra-ui/react'
+export * from './checkbox'
+export * from './checkbox-field'
+export * from './checkbox-group-field'
+export * from './types'

package/lib/components/checkbox/types.ts

@@ -0,0 +1,31 @@
+import { CheckboxProps as ChakraCheckboxProps, CheckboxGroupProps, StackDirection } from '@chakra-ui/react'
+import { ChangeEvent } from 'react'
+import { RegisterOptions } from 'react-hook-form'
+
+export type CheckboxVariants = 'default' | 'rounded'
+
+export interface CheckboxProps extends Omit<ChakraCheckboxProps, 'value'> {
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
+  value?: boolean | string | number
+  variant?: CheckboxVariants
+}
+
+export interface CheckboxFieldProps extends ChakraCheckboxProps {
+  name: string
+  label: string
+  validate?: RegisterOptions
+  isRequired?: boolean
+  variant?: CheckboxVariants
+  direction?: StackDirection
+  labelPlacement?: 'left' | 'right'
+  labelSize?: '2xs' | 'xs' | 'sm' | 'md' | 'lg'
+}
+
+export interface CheckboxFieldGroupProps extends CheckboxGroupProps {
+  direction?: StackDirection
+  name: string
+  label: string
+  validate?: RegisterOptions
+  isRequired?: boolean
+  value?: string[]
+}

package/lib/components/circle/index.ts

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