@northlight/ui 2.41.0 → 2.41.1

package/lib/components/toolbox/toolbox.tsx

@@ -0,0 +1,132 @@
+import React from 'react'
+import { useMultiStyleConfig, useToken } from '@chakra-ui/system'
+import { coreZIndex } from '@northlight/tokens'
+import { FocusScope } from '@react-aria/focus'
+import { useResizeWidth } from '../../hooks'
+import { Flex } from '../flex'
+import { Slide } from '../transitions'
+import { Box } from '../box'
+import { Portal } from '../portal'
+import { ToolboxProps } from './types'
+import { getChildrenWithProps } from '../../utils'
+import { ResizeHandle } from '../resize-handle'
+import { VStack } from '../stack'
+
+/**
+ * Controllable Sidebar drawer
+ * @see Slide
+ * @see {@link https://northlight.dev/reference/toolbox}
+ * @example
+ * (?
+ *() => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  return (
+    <Flex>
+      <Button onClick={ onOpen } w="full">
+        Open Toolbox
+      </Button>
+      <Toolbox
+      isOpen={ isOpen }
+      isResizable={ true }
+      onClose={ onClose }
+      size="sm"
+      resizeLimit="half"
+      >
+        <ToolboxHeader>Title</ToolboxHeader>
+        <ToolboxContent>
+          <Stack>
+            <Input />
+            <Input />
+          </Stack>
+        </ToolboxContent>
+        <ToolboxFooter justifyContent="end" gap="2">
+          <Button variant="ghost">Cancel</Button>
+          <Button variant="brand">Save</Button>
+        </ToolboxFooter>
+      </Toolbox>
+    </Flex>
+  )
+ }
+ * ?)
+ */
+export const Toolbox = ({
+  isResizable = false,
+  isOpen = false,
+  children,
+  direction = 'right',
+  shouldPush = false,
+  size = 'sm',
+  onClose,
+  autoFocus = true,
+  resizeLimit = 'full',
+  zIndex = coreZIndex.overlay,
+  slideProps,
+  ...rest
+}: ToolboxProps) => {
+  const { container } = useMultiStyleConfig('Toolbox', { size })
+  const newChildren = getChildrenWithProps(
+    children,
+    { onClose },
+    (_child, i) => i === 0
+  )
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.stopPropagation()
+      onClose?.()
+    }
+  }
+
+  const getPixelSize = (sizeToken: string) => {
+    const widthInRem = useToken('sizes', sizeToken)
+    return parseFloat(widthInRem) * 16
+  }
+
+  const defaultWidthPx = getPixelSize(size)
+  const minWidthPx = getPixelSize('sm')
+  const maxWidthPx =
+    resizeLimit === 'half' ? 0.5 * window.innerWidth : window.innerWidth
+
+  const { adjustableWidth, resizeProps } = useResizeWidth({
+    minWidthPx,
+    maxWidthPx,
+    defaultWidthPx,
+    stationaryEdge: direction,
+  })
+
+  return (
+    <Box
+      w={ adjustableWidth }
+      display={ isOpen && shouldPush ? 'initial' : 'none' }
+    >
+      <Portal>
+        <Slide
+          direction={ direction }
+          in={ isOpen }
+          style={ {
+            height: container.h as string,
+            width: adjustableWidth,
+            zIndex,
+          } }
+          { ...slideProps }
+        >
+          <Flex
+            sx={ { ...container, w: adjustableWidth } }
+            onKeyDown={ handleKeyDown }
+            position="relative"
+            overflow="hidden"
+            direction={ direction === 'left' ? 'row-reverse' : 'row' }
+            { ...rest }
+          >
+            { isResizable && <ResizeHandle { ...resizeProps } /> }
+            <FocusScope autoFocus={ autoFocus }>
+              <VStack w="full" h="full" alignItems="normal">
+                { newChildren }
+              </VStack>
+            </FocusScope>
+          </Flex>
+        </Slide>
+      </Portal>
+    </Box>
+  )
+}

package/lib/components/toolbox/types.ts

@@ -0,0 +1,34 @@
+import { FlexProps } from '@chakra-ui/react'
+import type { SlideProps } from '../transitions/types'
+
+export interface ToolboxProps extends Omit<FlexProps, 'direction' | 'zIndex'> {
+  isResizable?: boolean
+  isOpen: boolean
+  /** where the toolbox pops in from */
+  direction?: 'right' | 'left'
+  /** if true creates a statically positioned box element that takes up
+   *  width, causes layout change. */
+  shouldPush?: boolean
+  children: JSX.Element[] | JSX.Element
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  onClose: () => void
+  /** if true focuses on the first element in the toolboxcontent. */
+  autoFocus?: boolean
+  /** limit the sizing of the toolbox */
+  resizeLimit?: 'half' | 'full'
+  zIndex?: number
+  slideProps?: SlideProps
+}
+
+export interface ToolboxHeaderProps extends FlexProps {
+  onClose?: () => void
+  children: JSX.Element | string
+}
+
+export interface ToolboxContentProps extends FlexProps {
+  children: JSX.Element | string
+}
+
+export interface ToolboxFooterProps extends FlexProps {
+  children: JSX.Element | JSX.Element[] | string
+}

package/lib/components/tooltip/index.ts

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

package/lib/components/tooltip/tooltip.tsx

@@ -0,0 +1,207 @@
+import React from 'react'
+import {
+  Tooltip as ChakraTooltip,
+  HStack,
+  VStack,
+} from '@chakra-ui/react'
+import { Label, P } from '../typography'
+import { Icon } from '../icon'
+import { AlertVariants } from '../alert'
+import { tooltipIconMap } from '../types/tooltipIconMap'
+import { OurTooltipProps } from './types'
+
+/**
+ * A tooltip is a brief, informative message that appears when a user interacts with an element.
+ * @see {@link https://northlight.dev/reference/tooltip}
+ *
+ * @example
+ * (?
+ * <HStack>
+ *    <Tooltip
+ *      hasIcon={ true }
+ *      description="Here’s a regular tooltip with some with icon
+ *      inside of it that’s supposed to be substantially large.">
+ *      <Badge>ICON</Badge>
+ *    </Tooltip>
+ *    <Tooltip
+ *       description="Here’s a regular tooltip with some text without icon
+ *      inside of it that’s supposed to be substantially large."
+ *    >
+ *      <Badge>NOICON</Badge>
+ *    </Tooltip>
+ *    <Tooltip
+ *      description={
+ *        <Box>
+ *          <Text>
+ *            Some text
+ *          </Text>
+ *          <UnorderedList>
+ *            <ListItem>
+ *              List item 1
+ *            </ListItem>
+ *            <ListItem>
+ *              List item 2
+ *            </ListItem>
+ *            <ListItem>
+ *              List item 3
+ *            </ListItem>
+ *          </UnorderedList>
+ *        </Box>
+ *      }
+ *    >
+ *      <Badge>With JSX content</Badge>
+ *    </Tooltip>
+ * </HStack>
+ * ?)
+ *
+ *
+ * @example
+ * (?
+ * <HStack>
+ *     <VStack>
+ *        <Tooltip
+ *          hasIcon={ true }
+ *          variant="success"
+ *          description="This is a successful message"
+ *          >
+ *          <Badge colorScheme="green">Success</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          hasIcon={ true }
+ *          variant="success"
+ *          title="Please check fields"
+ *          description="This is a successful message with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *          <Badge colorScheme="green">Success</Badge>
+ *          </Tooltip>
+ *     </VStack>
+ *     <VStack>
+ *        <Tooltip
+ *          hasIcon={ true }
+ *          variant="info"
+ *          description="This is an informative text"
+ *          >
+ *          <Badge colorScheme="blue">Info</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          hasIcon={ true }
+ *          variant="info"
+ *          title="Please check fields"
+ *          description="This is an informative text with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *        <Badge colorScheme="blue">Info</Badge>
+ *        </Tooltip>
+ *     </VStack>
+ *     <VStack>
+ *        <Tooltip
+ *          hasIcon={ true }
+ *          variant="warning"
+ *          description="This is a warning"
+ *          >
+ *        <Badge colorScheme="yellow">Warning</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          hasIcon={ true }
+ *          variant="warning"
+ *          title="Please check fields"
+ *          description="This is a warning with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *          <Badge colorScheme="yellow">Warning</Badge>
+ *        </Tooltip>
+ *      </VStack>
+ *      <VStack>
+ *        <Tooltip
+ *          hasIcon={ true }
+ *          variant="danger"
+ *          description="This is an error message"
+ *          >
+ *        <Badge colorScheme="red">Error</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          hasIcon={ true }
+ *          variant="danger"
+ *          title="Please check fields"
+ *          description="This is an error message with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *          <Badge colorScheme="red">Error</Badge>
+ *        </Tooltip>
+ *      </VStack>
+ *      <VStack>
+ *        <Tooltip
+ *          hasIcon={ true }
+ *          variant="ai"
+ *          description="This is an AI message">
+ *        <Badge colorScheme="teal" variant="subtle">AI</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          hasIcon={ true }
+ *          variant="ai"
+ *          title="Please check fields"
+ *          description="This is an AI message with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *          <Badge colorScheme="teal" variant="subtle">AI</Badge>
+ *        </Tooltip>
+ *      </VStack>
+ *      <VStack>
+ *        <Tooltip
+ *          hasIcon={ true }
+ *          variant="ghost"
+ *          description="This is an clean message">
+ *        <Badge>Ghost</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          hasIcon={ true }
+ *          variant="ghost"
+ *          title="Please check fields"
+ *          description="This is an clean message with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *          <Badge>Ghost</Badge>
+ *        </Tooltip>
+ *      </VStack>
+ * </HStack>
+ * ?)
+ */
+
+export const Tooltip: React.FC<OurTooltipProps> = ({
+  variant = 'default',
+  hasArrow = true,
+  title = '',
+  description = '',
+  hasIcon = false,
+  ...rest
+}) => {
+  const iconVariant: AlertVariants = variant as AlertVariants
+  const icon = tooltipIconMap[iconVariant]
+
+  const TooltipContent = (
+    <HStack alignItems="flex-start">
+      { hasIcon && <Icon as={ icon } color={ `icon.toast.${iconVariant}` } /> }
+      <VStack spacing={ 0 } alignItems="flex-start">
+        <Label size="sm">{ title }</Label>
+        <P
+          variant="14"
+          sx={ {
+            color: !variant || variant === 'ai' ? 'text.inverted' : 'text.default',
+          } }
+        >
+          { description }
+        </P>
+      </VStack>
+    </HStack>
+  )
+  return (
+    <ChakraTooltip
+      hasArrow={ hasArrow }
+      hasIcon={ hasIcon }
+      label={ title || description ? TooltipContent : undefined }
+      variant={ variant }
+      { ...rest }
+    />
+  )
+}

package/lib/components/tooltip/types.ts

@@ -0,0 +1,9 @@
+import { TooltipProps as ChakraTooltipProps } from '@chakra-ui/react'
+
+export type TooltipVariants = 'success' | 'warning' | 'error' | 'info' | 'danger' | 'ai' | 'default' | 'ghost'
+
+export interface OurTooltipProps extends ChakraTooltipProps {
+  variant?: TooltipVariants
+  description?: React.ReactNode
+  hasIcon?: boolean
+}

package/lib/components/transitions/collapse.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { Collapse as ChakraCollapse } from '@chakra-ui/react'
+import { identity } from 'ramda'
+import { getChildrenWithFocus, getDuration, useDelay, useHiddenDisplay } from './utils'
+import { CollapseProps } from './types'
+
+/**
+ * Simple transition to hide/show content
+ * @see Fade
+ * @see ScaleFade
+ * @see SlideFade
+ * @see {@link https://northlight.dev/reference/collapse}
+ *
+ * @example (Example)
+ * ##View other options
+ * (?
+ *
+() => {
+  const [ show, setShow ] = useState(false)
+  const toggle = () => {
+    setShow((prev) => !prev)
+
+  }
+  return (
+    <>
+       <Button onClick={toggle}>Click Me</Button>
+  <Box borderRadius="sm"
+  borderWidth="sm" borderColor="border.default">
+            <Collapse in={ show}>
+  <HStack p="10" bg="bg.filled" rounded="md" >
+  <P>
+  Enable advanced mode
+  </P>
+
+  <Switch />
+  </HStack>
+            </Collapse>
+  </Box>
+    </>
+
+  )
+
+}
+
+ * ?)
+
+ *
+ */
+
+export const Collapse = ({
+  children,
+  enterDuration = null,
+  exitDuration = null,
+  duration = null,
+  in: show = false,
+  disableFocus = true,
+  hideDisplay = false,
+  enterDelay = 0,
+  exitDelay = 0,
+  onTransitionComplete = identity,
+  ...rest
+}: CollapseProps) => {
+  const transition = getDuration(enterDuration, exitDuration, duration)
+  const showWithDelay = useDelay(show, enterDelay, exitDelay)
+  const isHidden = useHiddenDisplay(show, exitDelay, exitDuration, duration, onTransitionComplete)
+  const childrenWithProps = getChildrenWithFocus(children, disableFocus, isHidden)
+
+  return (
+    <ChakraCollapse
+      in={ showWithDelay }
+      transition={ transition }
+      unmountOnExit={ hideDisplay }
+      { ...rest }
+    >
+      { childrenWithProps }
+    </ChakraCollapse>
+  )
+}

package/lib/components/transitions/constants.ts

@@ -0,0 +1,2 @@
+export const defaultFadeDelay = 250
+export const defaultOffset = 20

package/lib/components/transitions/fade.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { Fade as ChakraFade } from '@chakra-ui/react'
+import { identity } from 'ramda'
+import { getChildrenWithFocus, getDuration, useDelay, useHiddenDisplay } from './utils'
+import { FadeProps } from './types'
+/**
+ * Simple transition to hide/show content
+ * @see ScaleFade
+ * @see SlideFade
+ * @see {@link https://northlight.dev/reference/fade}
+ *
+ * @example (Example)
+ * ##View other options
+ * (?
+ *
+() => {
+  const [ show, setShow ] = useState(false)
+  const toggle = () => {
+    setShow((prev) => !prev)
+
+  }
+  return (
+    <>
+       <Button onClick={toggle}>Render random number</Button>
+  <Box borderRadius="sm"
+  borderWidth="sm" borderColor="border.default">
+            <Fade in={ show} exitDuration={1}>
+  <HStack p="10" bg="bg.filled" rounded="md" >
+  <H3>
+  {Math.round(Math.random() * 100)}
+  </H3>
+  </HStack>
+            </Fade>
+  </Box>
+    </>
+
+  )
+
+}
+
+ * ?)
+ *
+ */
+export const Fade = ({
+  children,
+  enterDuration = null,
+  exitDuration = null,
+  duration = null,
+  in: show = false,
+  disableFocus = true,
+  hideDisplay = false,
+  enterDelay = 0,
+  exitDelay = 0,
+  onTransitionComplete = identity,
+  ...rest
+}: FadeProps) => {
+  const transition = getDuration(enterDuration, exitDuration, duration)
+  const showWithDelay = useDelay(show, enterDelay, exitDelay)
+  const isHidden = useHiddenDisplay(show, exitDelay, exitDuration, duration, onTransitionComplete)
+  const childrenWithProps = getChildrenWithFocus(children, disableFocus, isHidden)
+
+  return (
+    <ChakraFade
+      in={ showWithDelay }
+      transition={ transition }
+      unmountOnExit={ hideDisplay }
+      { ...rest }
+    >
+      { childrenWithProps }
+    </ChakraFade>
+  )
+}

package/lib/components/transitions/index.ts

@@ -0,0 +1,6 @@
+export * from './fade'
+export * from './scale-fade'
+export * from './slide'
+export * from './slide-fade'
+export * from './collapse'
+export * from './types'

package/lib/components/transitions/scale-fade.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { ScaleFade as ChakraScaleFade } from '@chakra-ui/react'
+import { identity } from 'ramda'
+import { getChildrenWithFocus, getDuration, useDelay, useHiddenDisplay } from './utils'
+import { ScaleFadeProps } from './types'
+
+/**
+ * Simple transition to hide/show content
+ * @see Fade
+ * @see SlideFade
+ * @see {@link https://northlight.dev/reference/slide-fade}
+ *
+ * @example (Example)
+ * ##View other options
+ * (?
+ *
+() => {
+  const [ show, setShow ] = useState(false)
+  const toggle = () => {
+    setShow((prev) => !prev)
+
+  }
+  return (
+    <>
+       <Button onClick={toggle}>Render random number</Button>
+  <Box borderRadius="sm"
+  borderWidth="sm" borderColor="border.default">
+            <SlideFade in={ show} exitDuration={1}>
+  <HStack p="10" bg="bg.filled" rounded="md" >
+  <H3>
+  {Math.round(Math.random() * 100)}
+  </H3>
+  </HStack>
+            </SlideFade>
+  </Box>
+    </>
+  )
+}
+ * ?)
+ *
+ */
+export const ScaleFade = ({
+  children,
+  enterDuration = null,
+  exitDuration = null,
+  duration = null,
+  in: show = false,
+  disableFocus = true,
+  hideDisplay = false,
+  enterDelay = 0,
+  exitDelay = 0,
+  onTransitionComplete = identity,
+  ...rest
+}: ScaleFadeProps) => {
+  const transition = getDuration(enterDuration, exitDuration, duration)
+  const showWithDelay = useDelay(show, enterDelay, exitDelay)
+  const isHidden = useHiddenDisplay(show, exitDelay, exitDuration, duration, onTransitionComplete)
+  const childrenWithProps = getChildrenWithFocus(children, disableFocus, isHidden)
+
+  return (
+    <ChakraScaleFade
+      in={ showWithDelay }
+      transition={ transition }
+      unmountOnExit={ hideDisplay }
+      { ...rest }
+    >
+      { childrenWithProps }
+    </ChakraScaleFade>
+  )
+}

package/lib/components/transitions/slide-fade.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { SlideFade as ChakraSlideFade } from '@chakra-ui/react'
+import { identity } from 'ramda'
+import { getChildrenWithFocus, getDuration, getOffsets, useDelay, useHiddenDisplay } from './utils'
+import { SlideFadeProps } from './types'
+import { defaultOffset } from './constants'
+
+export const SlideFade = ({
+  children,
+  enterDuration = null,
+  exitDuration = null,
+  duration = null,
+  in: show = false,
+  disableFocus = true,
+  hideDisplay = false,
+  direction = 'bottom',
+  offset: delta = defaultOffset,
+  offsetX: deltaX = 0,
+  offsetY: deltaY = 0,
+  enterDelay = 0,
+  exitDelay = 0,
+  onTransitionComplete = identity,
+  ...rest
+}: SlideFadeProps) => {
+  const transition = getDuration(enterDuration, exitDuration, duration)
+  const { offsetX, offsetY } = getOffsets(direction, delta, deltaX, deltaY)
+  const showWithDelay = useDelay(show, enterDelay, exitDelay)
+  const isHidden = useHiddenDisplay(show, exitDelay, exitDuration, duration, onTransitionComplete)
+  const childrenWithProps = getChildrenWithFocus(children, disableFocus, isHidden)
+
+  return (
+    <ChakraSlideFade
+      in={ showWithDelay }
+      transition={ transition }
+      offsetX={ offsetX }
+      offsetY={ offsetY }
+      unmountOnExit={ hideDisplay }
+      { ...rest }
+    >
+      { childrenWithProps }
+    </ChakraSlideFade>
+  )
+}

package/lib/components/transitions/slide.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Slide as ChakraSlide } from '@chakra-ui/react'
+import { identity } from 'ramda'
+import { getChildrenWithFocus, getDuration, useDelay, useHiddenDisplay } from './utils'
+import { SlideProps } from './types'
+
+export const Slide = ({
+  children,
+  enterDuration = null,
+  exitDuration = null,
+  duration = null,
+  in: show = false,
+  disableFocus = true,
+  hideDisplay = false,
+  enterDelay = 0,
+  exitDelay = 0,
+  direction = 'bottom',
+  onTransitionComplete = identity,
+  ...rest
+}: SlideProps) => {
+  const transition = getDuration(enterDuration, exitDuration, duration)
+  const showWithDelay = useDelay(show, enterDelay, exitDelay)
+  const isHidden = useHiddenDisplay(show, exitDelay, exitDuration, duration, onTransitionComplete)
+  const childrenWithProps = getChildrenWithFocus(children, disableFocus, isHidden)
+
+  return (
+    <ChakraSlide
+      in={ showWithDelay }
+      transition={ transition }
+      direction={ direction }
+      unmountOnExit={ hideDisplay }
+      { ...rest }
+    >
+      { childrenWithProps }
+    </ChakraSlide>
+  )
+}