@northlight/ui 2.41.0 → 2.41.1

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import { AccordionButtonProps, AccordionButton as ChakraAccordionButton } from '@chakra-ui/react'
+
+/**
+ * The button that toggles the expand/collapse state of the accordion item.
+ * This button must be wrapped in an element with role heading.
+ * @see Accordion
+ * @see AcordionItem
+ * @see {@link https://northlight.dev/reference/accordion-button}
+ * @example
+ * (Needs to be wrapped around AccordionItem and
+ * Accordion context)
+ * (?
+ * <Accordion>
+ * <AccordionItem>
+ * <AccordionButton>Content</AccordionButton>
+ * </AccordionItem>
+ * </Accordion>
+ * ?)
+ */
+export const AccordionButton = (props: AccordionButtonProps) => (
+  <ChakraAccordionButton { ...props } />
+)

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

@@ -0,0 +1,9 @@
+import React from 'react'
+import {
+  AccordionItemProps,
+  AccordionItem as ChakraAccordionItem,
+} from '@chakra-ui/react'
+
+export const AccordionItem = (props: AccordionItemProps) => (
+  <ChakraAccordionItem { ...props } />
+)

package/lib/components/accordion/accordion-panel.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import {
+  AccordionPanelProps,
+  AccordionPanel as ChakraAccordionPanel,
+} from '@chakra-ui/react'
+
+/**
+ * The container for the details to be revealed.
+ * @see {@link htpts://northlight.dev/reference/accordion-panel}
+ */
+export const AccordionPanel = (props: AccordionPanelProps) => (
+  <ChakraAccordionPanel { ...props } />
+)

package/lib/components/accordion/accordion.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { AccordionProps, Accordion as ChakraAccordion } from '@chakra-ui/react'
+
+/**
+ * The wrapper that uses cloneElement to pass props to AccordionItem children.
+ * @see {@link https::/northlight.dev/reference/accordion}
+ *
+ * @example
+ * (?
+ * <Accordion>
+  <AccordionItem>
+    <H2>
+      <AccordionButton>
+        <Box as="span" flex='1' textAlign='left'>
+          Section 1 title
+        </Box>
+        <AccordionIcon />
+      </AccordionButton>
+    </H2>
+    <AccordionPanel pb={4}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat.
+    </AccordionPanel>
+  </AccordionItem>
+
+  <AccordionItem>
+    <H2>
+      <AccordionButton>
+        <Box as="span" flex='1' textAlign='left'>
+          Section 2 title
+        </Box>
+        <AccordionIcon />
+      </AccordionButton>
+    </H2>
+    <AccordionPanel pb={4}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat.
+    </AccordionPanel>
+  </AccordionItem>
+</Accordion>
+ * ?)
+ */
+export const Accordion = (props: AccordionProps) => (
+  <ChakraAccordion { ...props } />
+)

package/lib/components/accordion/index.ts

@@ -0,0 +1,13 @@
+export { AccordionIcon } from '@chakra-ui/react'
+export * from './accordion'
+export * from './accordion-button'
+export * from './accordion-panel'
+export * from './accordion-item'
+
+export type {
+  AccordionProps,
+  AccordionButtonProps,
+  AccordionIconProps,
+  AccordionItemProps,
+  AccordionPanelProps,
+} from '@chakra-ui/react'

package/lib/components/alert/alert.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { Alert as ChakraAlert } from '@chakra-ui/react'
+import { AlertProps } from './types'
+
+/**
+ * @example (Example)
+ * ## Usage
+ * <br />
+ * Northlight exports 4 alert related components: <br />
+ * <br />
+ * `Alert`: The wrapper for alert components. <br />
+ * `AlertIcon`: The visual icon for the alert that changes based on the status prop. <br />
+ * `AlertTitle`: The title of the alert to be announced by screen readers. <br />
+ * `AlertDescription`: The description of the alert to be announced by screen readers. <br />
+ * <br />
+ * (?
+ * +
+ * const toastIconMap = {
+ *   success: CheckCircleSolid,
+ *   warning: AlertTriangleSolid,
+ *   error: AlertCircleSolid,
+ *   danger: AlertCircleSolid,
+ *   info: BellSolid,
+ *   ai: BrightnessSolid,
+ *   default: HelpCircleSolid,
+ *   ghost: HelpCircleSolid,
+ * }
+ *
+ * const variants = [
+ *   "default",
+ *   "success",
+ *   "warning",
+ *   "error",
+ *   "info",
+ *   "ai",
+ *   "ghost",
+ * ]
+ *
+ * const Example = () => (
+ *   <SimpleGrid columns={2} columnGap="2" rowGap="4">
+ *
+ *     {variants.map((variant) => (
+ *       <Alert variant={variant}>
+ *         <AlertIcon as={toastIconMap[variant]} />
+ *         <AlertTitle>Title</AlertTitle>
+ *         <AlertDescription>Description</AlertDescription>
+ *       </Alert>
+ *     ))}
+ *   </SimpleGrid>
+ * )
+ * render(<Example />)
+
+ * ?)
+ */
+
+export const Alert = ({
+  variant = 'success',
+  children,
+  ...rest
+}: AlertProps) => (
+  <ChakraAlert variant={ variant } { ...rest }>
+    { children }
+  </ChakraAlert>
+)

package/lib/components/alert/index.ts

@@ -0,0 +1,7 @@
+export {
+  AlertIcon,
+  AlertTitle,
+  AlertDescription,
+} from '@chakra-ui/react'
+export * from './alert'
+export * from './types'

package/lib/components/alert/types.ts

@@ -0,0 +1,7 @@
+import { AlertProps as ChakraAlertProps } from '@chakra-ui/react'
+
+export type AlertVariants = 'success' | 'warning' | 'error' | 'info' | 'danger' | 'ai' | 'default' | 'ghost'
+
+export interface AlertProps extends ChakraAlertProps {
+  variant?: AlertVariants
+}

package/lib/components/alert-dialog/index.ts

@@ -0,0 +1,9 @@
+export {
+  AlertDialog,
+  AlertDialogHeader,
+  AlertDialogBody,
+  AlertDialogFooter,
+  AlertDialogOverlay,
+  AlertDialogContent,
+  AlertDialogCloseButton,
+} from '@chakra-ui/react'

package/lib/components/aspect-ratio/aspect-ratio.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { AspectRatioProps, AspectRatio as ChakraAspectRatio } from '@chakra-ui/react'
+
+/**
+ * Meant to restrict child by specific ratio
+ * @see {@link https://northlight.dev/aspect-ratio}
+ * @example
+ * (?
+ <AspectRatio maxW='400px' ratio={4 / 3}>
+   <Image src='https://bit.ly/naruto-sage' alt='naruto' objectFit='cover' />
+</AspectRatio>
+?)
+ *
+ * */
+export const AspectRatio = (props: AspectRatioProps) => (
+  <ChakraAspectRatio { ...props } />
+)

package/lib/components/aspect-ratio/index.ts

@@ -0,0 +1,2 @@
+export * from './aspect-ratio'
+export type { AspectRatioProps } from '@chakra-ui/react'

package/lib/components/async-error/async-error.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import {
+  AlertDescription,
+  AlertTitle,
+  Alert as ChakraAlert,
+} from '@chakra-ui/react'
+import { toastIconMap } from '../types'
+import { Icon } from '../icon'
+import { VStack } from '../stack'
+import { AsyncErrorProps } from './types'
+
+/**
+ * @see {@link https://northlight.dev/reference/async-error}
+ * @example
+ * (?
+ * <AsyncError />
+ * ?)
+ *
+ */
+export const AsyncError = ({
+  message = '',
+  ...rest
+}: AsyncErrorProps) => (
+  <ChakraAlert backgroundColor="background.default" color="text.default" width="100%" { ...rest }>
+    <VStack w="full">
+      <Icon as={ toastIconMap.error } color="icon.toast.error" boxSize={ 6 } />
+      <AlertTitle> Error </AlertTitle>
+      { message && (
+      <AlertDescription>{ message }</AlertDescription>
+      ) }
+    </VStack>
+  </ChakraAlert>
+)

package/lib/components/async-error/index.ts

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

package/lib/components/async-error/types.ts

@@ -0,0 +1,5 @@
+import { AlertProps } from '../alert'
+
+export interface AsyncErrorProps extends AlertProps {
+  message?: string
+}

package/lib/components/avatar/avatar-badge.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { chakra, useMultiStyleConfig } from '@chakra-ui/react'
+import { AvatarBadgeProps } from './types'
+
+/**
+ * Specific component meant to be used with <Avatar /> to display notification
+ * @see Avatar
+ * @see {@link https://northlight.dev/reference/avatar}
+ *
+ * @example (Example)
+ * Examle:
+ * (?
+ * <Avatar notificationCount={4} />
+ * ?)
+ *
+ */
+export const AvatarBadge = ({
+  notificationCount = 0,
+}: AvatarBadgeProps) => {
+  const { badge } = useMultiStyleConfig('Avatar')
+  return (
+    <chakra.span sx={ badge }>
+      { notificationCount > 999 ? '999+' : notificationCount }
+    </chakra.span>
+  )
+}

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

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import { HStack } from '../stack'
+import { AvatarGroupProps } from './types'
+import { Small } from '../typography'
+import { OverflowGroup } from '../overflow-group'
+import { getChildrenWithProps } from '../../utils'
+
+/**
+ * Used to display a group of users
+ * @see Avatar
+ * @see {@link https://northlight.dev/reference/avatar-group}
+ *
+ * @example (Example)
+ * (?
+ * <AvatarGroup max={ 3 }>
+  {[1, 2, 3, 4, 5].map((i) => (
+    <Avatar
+      name="Darth Vader"
+      image="/vader.png"
+      size="sm"
+      variant="rounded"
+      key={ i }
+    />
+  )) }
+</AvatarGroup>
+ * ?)
+ *
+ */
+export const AvatarGroup = ({
+  children,
+  max = Infinity,
+  spacing = '-4',
+  ...rest
+}: AvatarGroupProps) => {
+  const [ nbrRemainingAvatars, setNbrRemainingAvatars ] = useState(0)
+  const childrenWithMargin = getChildrenWithProps(
+    children,
+    { ml: spacing },
+    (_child, idx) => idx > 0
+  )
+
+  return (
+    <HStack bgColor="background.default" { ...rest }>
+      <HStack spacing={ 0 }>
+        <OverflowGroup max={ max } onChange={ setNbrRemainingAvatars }>
+          { childrenWithMargin }
+        </OverflowGroup>
+      </HStack>
+      { nbrRemainingAvatars > 0 && (
+        <Small sx={ { color: 'brand' } }>
+          +{ nbrRemainingAvatars }
+        </Small>
+      ) }
+    </HStack>
+  )
+}

package/lib/components/avatar/avatar.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { chakra, useMultiStyleConfig } from '@chakra-ui/react'
+import { BusinessContactDuo, UserSquareDuo } from '@northlight/icons'
+import { Icon } from '../icon'
+import { Box } from '../box'
+import { getInitials } from '../../utils'
+import { AvatarProps } from './types'
+import { AvatarBadge } from './avatar-badge'
+
+/**
+ * @see AvatarGroup
+ * @see {@link https://northlight.dev/reference/avatar}
+ *
+ * @example (Example)
+ * Avatar takes a name and image
+ * (?
+ * <Avatar name="Darth Vader" image='/vader.png' />
+ * ?)
+ *
+ * <br />
+ * If there is no image, it will render the initials of the name along with a random bg color.
+ * (?
+ * <Avatar name="Darth Vader" />
+ * ?)
+ *
+ * <br />
+ *
+ * If the name also is undefined, it will render a fallback icon
+ * (?
+ * <Avatar />
+ * ?)
+ */
+export const Avatar = ({
+  variant = 'square',
+  notificationCount = 0,
+  name,
+  image,
+  size,
+  bgColor,
+  ...rest
+}: AvatarProps) => {
+  const { container, text, userImage, icon } = useMultiStyleConfig('Avatar', {
+    variant,
+    image,
+    size,
+    name,
+    bgColor,
+  })
+
+  return (
+    <Box __css={ container } data-testid="avatar-test-id" { ...rest }>
+      { image
+        ? (
+          <chakra.img
+            alt={ name }
+            src={ image }
+            sx={ userImage }
+          />
+        ) : name
+          ? (
+            <chakra.span sx={ text }>
+              { getInitials(name) }
+            </chakra.span>
+          )
+          : (
+            <Icon
+              as={ variant === 'square' ? UserSquareDuo : BusinessContactDuo }
+              sx={ icon }
+              aria-label="user-avatar"
+            />
+          ) }
+      { notificationCount > 0 && (
+        <AvatarBadge notificationCount={ notificationCount } />
+      ) }
+    </Box>
+  )
+}

package/lib/components/avatar/index.ts

@@ -0,0 +1,3 @@
+export * from './avatar'
+export * from './avatar-group'
+export * from './types'

package/lib/components/avatar/types.ts

@@ -0,0 +1,34 @@
+import React from 'react'
+import { AvatarProps as ChakraAvatarProps, StackProps } from '@chakra-ui/react'
+
+export interface AvatarProps
+  extends Omit<
+  ChakraAvatarProps,
+  | 'src'
+  | 'srcSet'
+  | 'getInitials'
+  | 'onError'
+  | 'loading'
+  | 'icon'
+  | 'referrerPolicy'
+  | 'showBorder'
+  | 'iconLabel'
+  | 'ignoreFallback'
+  > {
+  name?: string
+  image?: string
+  /** This will render a badge in the corner of the avatar  */
+  notificationCount?: number
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg'
+  variant?: 'square' | 'rounded'
+}
+export interface AvatarBadgeProps {
+  notificationCount?: number
+}
+
+export interface AvatarGroupProps extends StackProps {
+  max: number
+  spacing?: number | string
+  /** The children should be avatar components */
+  children: JSX.Element[] | React.ReactNode[]
+}

package/lib/components/badge/badge.tsx

@@ -0,0 +1,69 @@
+import React, { forwardRef } from 'react'
+import { Badge as ChakraBadge } from '@chakra-ui/react'
+import { MediatoolLogoSolid } from '@northlight/icons'
+import * as NorthlightIcons from '@northlight/icons'
+import { useCurrentTheme } from '../../utils'
+import { BadgeProps } from './types'
+import { Flex } from '../flex'
+import { Icon } from '../icon'
+
+/**
+ * Badges are used to highlight an item's status for quick recognition.
+ * @see Tag
+ * @see {@link https://northlight.dev/reference/badge}
+ *
+ * @example
+ * (?
+ * +
+ * const colors = ["gray", "mediatoolBlue", "blue", "red", "green",
+ * "orange", "yellow", "teal", "purple", "pink"]
+ * const variants = ["solid", "outline", "subtle", "ghost"]
+ *
+ * const Example = () => (
+ *   <Stack>
+ *     {colors.map((color, i) => (
+ *       <HStack spacing={4} key={i}>
+ *         {variants.map((variant) => (
+ *           <Badge
+ *             colorScheme={color}
+ *             variant={variant}
+ *             iconPosition="left"
+ *             withIcon
+ *           >
+ *             {variant} Badge
+ *           </Badge>
+ *         ))}
+ *       </HStack>
+ *     ))}
+ *   </Stack>
+ * )
+ * render(<Example />)
+ * ?)
+ */
+
+export const Badge = forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {
+  const {
+    children,
+    withIcon,
+    iconPosition = 'left',
+    iconAs,
+    ...rest
+  } = props
+
+  const IconComponent = iconAs ? NorthlightIcons[iconAs] : MediatoolLogoSolid
+  const currentTheme = useCurrentTheme()
+
+  return (
+    <ChakraBadge ref={ ref } currentTheme={ currentTheme } { ...rest }>
+      <Flex align="center" gap="1">
+        { withIcon && iconPosition === 'left' && IconComponent && (
+          <Icon as={ IconComponent } boxSize="3" />
+        ) }
+        { children }
+        { withIcon && iconPosition === 'right' && IconComponent && (
+          <Icon as={ IconComponent } boxSize="3" />
+        ) }
+      </Flex>
+    </ChakraBadge>
+  )
+})

package/lib/components/badge/index.ts

@@ -0,0 +1,2 @@
+export * from './badge'
+export type { BadgeProps } from '@chakra-ui/react'

package/lib/components/badge/types.ts

@@ -0,0 +1,15 @@
+import { BadgeProps as ChakraBadgeProps, ThemingProps } from '@chakra-ui/react'
+import * as NorthlightIcons from '@northlight/icons'
+
+type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
+type BadgeVariant = 'solid' | 'outline' | 'subtle' | 'ghost'
+type ColorScheme = ThemingProps['colorScheme']
+
+export interface BadgeProps extends Omit<ChakraBadgeProps, 'size' | 'variant' > {
+  size?: BadgeSize
+  variant?: BadgeVariant
+  colorScheme?: ColorScheme
+  withIcon?: boolean
+  iconPosition?: 'left' | 'right'
+  iconAs?: keyof typeof NorthlightIcons
+}

package/lib/components/blinker/blinker.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { useStyleConfig } from '@chakra-ui/react'
+import { Box } from '../box'
+import { BlinkerProps } from './types'
+
+/**
+ * Status indicator of some sorts
+ * @see {@link https://northlight.dev/reference/blinker}
+ *
+ * @example (Example)
+ * (?
+ * <Box p="4">
+  * <Blinker color="bg.brand.default" />
+ * </Box>
+ * ?)
+ */
+export const Blinker = ({
+  color = '',
+  size,
+  isBlinking = true,
+  ...rest
+}: BlinkerProps) => {
+  const styles = useStyleConfig('Blinker', { color, size, isBlinking })
+
+  return <Box sx={ styles } data-testid="blinker-test-id" { ...rest } />
+}

package/lib/components/blinker/index.ts

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

package/lib/components/blinker/types.ts

@@ -0,0 +1,5 @@
+export interface BlinkerProps {
+  color?: string
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg'
+  isBlinking?: boolean
+}

package/lib/components/box/index.ts

@@ -0,0 +1,2 @@
+export { Box } from '@chakra-ui/react'
+export type { BoxProps } from '@chakra-ui/react'

package/lib/components/breadcrumb/index.ts

@@ -0,0 +1,6 @@
+export {
+  Breadcrumb as Breadcrumbs,
+  BreadcrumbItem as Breadcrumb,
+  BreadcrumbLink,
+  BreadcrumbSeparator,
+} from '@chakra-ui/react'