@northlight/ui 2.41.0 → 2.41.1

package/lib/internal-components/input-group-wrapper/input-group-wrapper.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { all, isNil, not } from 'ramda'
+import { InputGroup } from '../../components/input'
+import { InputGroupWrapperProps } from './types'
+
+export const InputGroupWrapper = ({
+  inputLeftElement,
+  inputRightElement,
+  children,
+  ...rest
+}: InputGroupWrapperProps) => {
+  const containsInputGroupElement =
+  not(all(isNil, [ inputLeftElement, inputRightElement ]))
+
+  return containsInputGroupElement
+    ? (
+      <InputGroup { ...rest }>
+        { inputLeftElement }
+        { children }
+        { inputRightElement }
+      </InputGroup>
+    )
+    : <>{ children }</>
+}

package/lib/internal-components/input-group-wrapper/types.ts

@@ -0,0 +1,4 @@
+import { InputGroupProps } from '@chakra-ui/react'
+import { InputFieldProps } from '../../types'
+
+export interface InputGroupWrapperProps extends InputFieldProps, InputGroupProps {}

package/lib/theme/components/alert/index.ts

@@ -0,0 +1,94 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const Alert: ComponentMultiStyleConfig = {
+  parts: [ 'container', 'title', 'description', 'icon' ],
+  baseStyle: ({ theme: {
+    radii: borderRadius,
+    colors: color,
+    space: coreSpacing,
+  } }) => ({
+    container: {
+      borderRadius: borderRadius.toast.default,
+      color: color.text.default,
+      paddingEnd: coreSpacing[8],
+      width: 'auto',
+      display: 'flex',
+    },
+    title: {
+      lineHeight: '1.25',
+      overflowWrap: 'break-word',
+    },
+    description: {
+      lineHeight: '1.25',
+      overflowWrap: 'break-word',
+    },
+    icon: {
+      boxSize: 6,
+    },
+  }),
+  variants: {
+    success: ({ theme: { colors: color } }) => ({
+      container: {
+        bgColor: color.background.toast.success,
+      },
+      icon: {
+        color: color.icon.toast.success,
+      },
+    }),
+    warning: ({ theme: { colors: color } }) => ({
+      container: {
+        bgColor: color.background.toast.warning,
+      },
+      icon: {
+        color: color.icon.toast.warning,
+      },
+    }),
+    info: ({ theme: { colors: color } }) => ({
+      container: {
+        bgColor: color.background.toast.info,
+      },
+      icon: {
+        color: color.icon.toast.info,
+      },
+    }),
+    error: ({ theme: { colors: color } }) => ({
+      container: {
+        bgColor: color.background.toast.error,
+        color: color.text.toast.error,
+      },
+      icon: {
+        color: color.icon.toast.error,
+      },
+    }),
+    ai: ({ theme: { colors: color } }) => ({
+      container: {
+        bgColor: color.bg.ai.default,
+        color: color.text.inverted,
+      },
+      icon: {
+        color: color.icon.toast.ai,
+      },
+    }),
+    default: ({ theme: { colors: color } }) => ({
+      container: {
+        bgColor: color.bg.layer,
+        color: color.text.default,
+      },
+      icon: {
+        color: color.icon.toast.default,
+      },
+    }),
+    ghost: ({ theme: { colors: color } }) => ({
+      container: {
+        bgColor: color.bg.base,
+        color: color.text.default,
+        borderWidth: 'xs',
+        borderColor: color.border.default,
+        borderStyle: 'solid',
+      },
+      icon: {
+        color: color.icon.toast.ghost,
+      },
+    }),
+  },
+}

package/lib/theme/components/avatar/get-avatar-bg-color.ts

@@ -0,0 +1,11 @@
+import { randomColor } from '@chakra-ui/theme-tools'
+import { getShades } from '../../../utils'
+
+const possibleBgColors = getShades(400, 600)
+
+export const getAvatarBgColor = (image: string, name: string, color: any) => {
+  if (image) return color.background.avatar.image
+  if (name) return randomColor({ string: name, colors: possibleBgColors })
+
+  return color.background.avatar.default
+}

package/lib/theme/components/avatar/index.ts

@@ -0,0 +1,158 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+import { getContrastColor } from '../../../utils'
+import { getAvatarBgColor } from './get-avatar-bg-color'
+
+export const Avatar: ComponentMultiStyleConfig = {
+  parts: [ 'container', 'text', 'badge', 'icon' ],
+  sizes: {
+    '2xs': ({ theme: { sizes: sizing } }) => ({
+      container: {
+        width: sizing.avatar['2xs'],
+        height: sizing.avatar['2xs'],
+      },
+      text: {
+        lineHeight: sizing.avatar['2xs'],
+        fontSize: '3xs',
+      },
+    }),
+    xs: ({ theme: { sizes: sizing } }) => ({
+      container: {
+        width: sizing.avatar.xs,
+        height: sizing.avatar.xs,
+      },
+      text: {
+        lineHeight: sizing.avatar.xs,
+        fontSize: 'xs',
+      },
+    }),
+    sm: ({ theme: { sizes: sizing } }) => ({
+      container: {
+        width: sizing.avatar.sm,
+        height: sizing.avatar.sm,
+      },
+      text: {
+        lineHeight: sizing.avatar.sm,
+        fontSize: 'sm',
+      },
+      icon: {
+        boxSize: sizing.avatar.sm,
+      },
+    }),
+    md: ({ theme: { sizes: sizing } }) => ({
+      container: {
+        width: sizing.avatar.md,
+        height: sizing.avatar.md,
+      },
+      text: {
+        lineHeight: sizing.avatar.md,
+        fontSize: 'md',
+      },
+      icon: {
+        boxSize: sizing.avatar.md,
+      },
+    }),
+    lg: ({ theme: { sizes: sizing } }) => ({
+      container: {
+        width: sizing.avatar.lg,
+        height: sizing.avatar.lg,
+      },
+      text: {
+        lineHeight: sizing.avatar.lg,
+        fontSize: 'lg',
+      },
+      icon: {
+        boxSize: sizing.avatar.lg,
+      },
+    }),
+    xl: ({ theme: { sizes: sizing } }) => ({
+      container: {
+        width: sizing.avatar.xl,
+        height: sizing.avatar.xl,
+      },
+      text: {
+        lineHeight: sizing.avatar.xl,
+        fontSize: '2xl',
+      },
+    }),
+    '2xl': ({ theme: { sizes: sizing } }) => ({
+      container: {
+        width: sizing.avatar['2xl'],
+        height: sizing.avatar['2xl'],
+      },
+      text: {
+        lineHeight: sizing.avatar['2xl'],
+        fontSize: '4xl',
+      },
+    }),
+
+  },
+  baseStyle: ({ theme: {
+    colors: color,
+    sizes: sizing,
+    radii: borderRadius,
+  }, image, name, bgColor }) => {
+    const avatarBgColor = bgColor || getAvatarBgColor(image, name, color)
+
+    return {
+      container: {
+        bgColor: avatarBgColor,
+        color: getContrastColor(avatarBgColor),
+        display: 'grid',
+        placeItems: 'center',
+        objectFit: 'cover',
+        position: 'relative',
+      },
+      userImage: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+      },
+      badge: {
+        position: 'absolute',
+        bottom: `-${sizing['1']}`,
+        right: `-${sizing['1']}`,
+        minWidth: sizing['5'],
+        height: sizing['5'],
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: 'xs',
+        fontWeight: 'semibold',
+        padding: sizing['0a'],
+        bgColor: color.destructive,
+        color: color.text.inverted,
+        borderRadius: borderRadius.avatar.square,
+        border: 'none',
+      },
+
+    }
+  },
+  variants: {
+    square: ({ theme: { radii: borderRadius } }) => ({
+      container: {
+        aspectRatio: '1 / 1',
+        borderRadius: borderRadius.avatar.square,
+        '> img': {
+          borderRadius: borderRadius.avatar.square,
+          aspectRatio: '1 / 1',
+        },
+      },
+      badge: {
+        borderRadius: borderRadius.avatar.square,
+      },
+    }),
+    rounded: ({ theme: { radii: borderRadius } }) => ({
+      container: {
+        aspectRatio: '1 / 1',
+        borderRadius: borderRadius.avatar.rounded,
+        '> img': {
+          borderRadius: borderRadius.avatar.rounded,
+          aspectRatio: '1 / 1',
+        },
+      },
+      badge: {
+        borderRadius: borderRadius.avatar.rounded,
+      },
+    }),
+  },
+}

package/lib/theme/components/badge/index.ts

@@ -0,0 +1,80 @@
+import { ComponentSingleStyleConfig, useToken } from '@chakra-ui/react'
+import { getContrastColor } from '../../../utils'
+import { processColorSchemeBasedOnTheme } from '../../process-color-scheme-based-on-theme'
+
+export const Badge: ComponentSingleStyleConfig = {
+  baseStyle: ({ colorScheme, theme: { colors }, currentTheme }) => {
+    const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme })
+
+    const bgColor = processedColorScheme === 'mediatoolBlue'
+      ? colors[processedColorScheme][100]
+      : colors[processedColorScheme] && colors[processedColorScheme][100]
+    const textColor = processedColorScheme === 'mediatoolBlue'
+      ? colors[processedColorScheme][800]
+      : colors[processedColorScheme] && colors[processedColorScheme][800]
+
+    return {
+      bgColor,
+      color: textColor,
+    }
+  },
+  variants: {
+    solid: ({ colorScheme, theme: { colors }, currentTheme, bg, bgColor }) => {
+      const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme })
+
+      const finalBg =
+    bg ??
+    bgColor ??
+    (processedColorScheme === 'mediatoolBlue'
+      ? colors[processedColorScheme][500]
+      : colors[processedColorScheme] && colors[processedColorScheme][500])
+
+      return {
+        bgColor: finalBg,
+        color: getContrastColor(finalBg ?? useToken('colors', processedColorScheme)),
+      }
+    },
+    outline: ({ colorScheme, theme: { colors }, currentTheme }) => {
+      const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme })
+
+      const textColor = processedColorScheme === 'mediatoolBlue'
+        ? colors[processedColorScheme][500]
+        : colors[processedColorScheme] && colors[processedColorScheme][700]
+
+      return {
+        bgColor: 'mono.transparent',
+        color: textColor,
+      }
+    },
+    ghost: ({ colorScheme, theme: { colors }, currentTheme }) => {
+      const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme })
+
+      const textColor = processedColorScheme === 'mediatoolBlue'
+        ? colors[processedColorScheme][500]
+        : colors[processedColorScheme] && colors[processedColorScheme][700]
+
+      return {
+        bgColor: 'mono.transparent',
+        color: textColor,
+      }
+    },
+  },
+  sizes: {
+    xs: {
+      fontSize: '2xs',
+    },
+    sm: {
+      fontSize: 'xs',
+    },
+    md: {
+      fontSize: 'sm',
+    },
+    lg: {
+      fontSize: 'md',
+    },
+  },
+  defaultProps: {
+    size: 'sm',
+    variant: 'solid',
+  },
+}

package/lib/theme/components/blinker/index.ts

@@ -0,0 +1,67 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { keyframes } from '@emotion/react'
+
+const pulseRing = keyframes`
+0% {
+  transform: scale(0.33);
+}
+30% {
+  transform: scale(0.66);
+},
+40%,
+50% {
+  opacity: 0;
+}
+100% {
+  opacity: 0;
+}
+`
+
+export const Blinker: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme: { colors: palette }, color, isBlinking }) => ({
+    position: 'relative',
+    borderRadius: '50%',
+    bgColor: color === '' ? palette.blue['500'] : color,
+    _before: isBlinking
+      ? {
+        content: "''",
+        position: 'absolute',
+        display: 'block',
+        width: '300%',
+        height: '300%',
+        marginLeft: '-100%',
+        marginTop: '-100%',
+        borderRadius: '50%',
+        bgColor: color === '' ? 'blue.500' : color,
+        animation: `2.25s ${pulseRing} cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite`,
+        zIndex: 'base',
+      }
+      : {},
+  }),
+  sizes: {
+    '2xs': ({ theme: { sizes: sizing } }) => ({
+      height: sizing.blinker['2xs'],
+      width: sizing.blinker['2xs'],
+    }),
+    xs: ({ theme: { sizes: sizing } }) => ({
+      height: sizing.blinker.xs,
+      width: sizing.blinker.xs,
+    }),
+    sm: ({ theme: { sizes: sizing } }) => ({
+      height: sizing.blinker.sm,
+      width: sizing.blinker.sm,
+    }),
+    md: ({ theme: { sizes: sizing } }) => ({
+      height: sizing.blinker.md,
+      width: sizing.blinker.md,
+    }),
+    lg: ({ theme: { sizes: sizing } }) => ({
+      height: sizing.blinker.lg,
+      width: sizing.blinker.lg,
+    }),
+  },
+  defaultProps: {
+    size: 'md',
+    color: 'blue.500',
+  },
+}

package/lib/theme/components/breadcrumb/index.ts

@@ -0,0 +1,22 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const Breadcrumb: ComponentMultiStyleConfig = {
+  parts: [ 'link', 'separator' ],
+  baseStyle: {
+    link: {
+      padding: [ 0.5, 1 ],
+      color: 'text.default',
+      fontWeight: 'semibold',
+      fontSize: 'md',
+      _hover: {
+        bg: 'brand-alt',
+        borderRadius: 'base',
+        textDecor: 'none',
+      },
+    },
+    separator: {
+      color: 'subdued',
+      fontSize: 'sm',
+    },
+  },
+}

package/lib/theme/components/button/index.ts

@@ -0,0 +1,205 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+
+export const Button: ComponentSingleStyleConfig = {
+  sizes: {
+    xs: ({ theme: { sizes: sizing, space: spacing } }) => ({
+      height: sizing.button.xs,
+      minWidth: sizing.button.xs,
+      paddingInlineStart: spacing['padding-inline'].button.xs,
+      paddingInlineEnd: spacing['padding-inline'].button.xs,
+    }),
+    sm: ({ theme: { sizes: sizing, space: spacing } }) => ({
+      height: sizing.button.sm,
+      minWidth: sizing.button.sm,
+      paddingInlineStart: spacing['padding-inline'].button.md,
+      paddingInlineEnd: spacing['padding-inline'].button.md,
+    }),
+    md: ({ theme: { sizes: sizing, space: spacing } }) => ({
+      height: sizing.button.md,
+      minWidth: sizing.button.md,
+      paddingInlineStart: spacing['padding-inline'].button.md,
+      paddingInlineEnd: spacing['padding-inline'].button.md,
+    }),
+    lg: ({ theme: { sizes: sizing, space: spacing } }) => ({
+      height: sizing.button.lg,
+      minWidth: sizing.button.lg,
+      paddingInlineStart: spacing['padding-inline'].button.lg,
+      paddingInlineEnd: spacing['padding-inline'].button.lg,
+    }),
+  },
+  baseStyle: ({ theme: { colors: color, radii: borderRadius } }) => ({
+    color: color.text.default,
+    borderRadius: borderRadius.button.default,
+    _focusVisible: {
+      ring: '2px',
+      ringColor: color.border.wcag,
+      ringOffset: '1px',
+    },
+  }),
+  variants: {
+    default: ({ theme: { colors: color } }) => ({
+      bgColor: color.background.button.default,
+      color: color.text.button.default,
+      _hover: {
+        bgColor: color.background.button['default-hover'],
+      },
+      _active: {
+        bgColor: color.background.button['default-active'],
+      },
+    }),
+    danger: ({ theme: { colors: color } }) => ({
+      bgColor: color.background.button.danger,
+      color: color.text.button.danger,
+      _hover: {
+        bg: color.background.button['danger-hover'],
+        _disabled: {
+          bgColor: color.background.button.danger,
+        },
+      },
+      _active: {
+        bgColor: color.background.button['danger-active'],
+      },
+    }),
+    success: ({ theme: { colors: color } }) => ({
+      bgColor: color.background.button.success,
+      color: color.text.button.success,
+      _hover: {
+        bg: color.background.button['success-hover'],
+        _disabled: {
+          bgColor: color.background.button.success,
+        },
+      },
+      _active: {
+        bgColor: color.background.button['success-active'],
+      },
+    }),
+    brand: ({ theme: { colors: color } }) => ({
+      color: color.text.inverted,
+      bgColor: color.background.button.brand,
+      _hover: {
+        bg: color.background.button['brand-hover'],
+        _disabled: {
+          bgColor: color.background.button.brand,
+        },
+      },
+      _active: {
+        bgColor: color.background.button['brand-active'],
+      },
+    }),
+    brandSubdued: ({ theme: { colors: color } }) => ({
+      color: color.text.button.brandSubdued,
+      bgColor: color.background.button.ghost,
+      _hover: {
+        bg: color.background.button.brand,
+        color: color.text.inverted,
+        _disabled: {
+          bgColor: color.background.button.ghost,
+          color: color.text.button.brandSubdued,
+        },
+      },
+      _active: {
+        bg: color.background.button['brand-hover'],
+        color: color.text.inverted,
+      },
+    }),
+    link: ({ theme: { colors: color } }) => ({
+      textDecoration: 'underline',
+      color: color.text.button.link,
+      bgColor: color.background.button.link,
+      _hover: {
+        color: color.text.button['link-hover'],
+        bgColor: color.background.button['link-hover'],
+      },
+      _active: {
+        color: color.text.button['link-hover'],
+        bgColor: color.background.button['link-active'],
+      },
+    }),
+    outline: ({ theme: { colors: color } }) => ({
+      color: color.text.default,
+      _hover: {
+        bg: color.background.button['ghost-hover'],
+      },
+      _active: {
+        bg: color.background.button['ghost-active'],
+      },
+    }),
+    ghost: ({ theme: { colors: color } }) => ({
+      color: color.text.default,
+      bgColor: color.background.button.ghost,
+      _hover: {
+        bg: color.background.button['ghost-hover'],
+        _disabled: {
+          bgColor: color.background.button.ghost,
+        },
+      },
+      _active: {
+        bgColor: color.background.button['ghost-active'],
+      },
+    }),
+    ai: ({ theme: { colors: color } }) => ({
+      color: color.text.inverted,
+      bgColor: color.bg.ai.default,
+      _hover: {
+        bgColor: color.bg.ai.hover,
+        _disabled: {
+          bgColor: color.bg.ai.default,
+        },
+      },
+      _active: {
+        bgColor: color.bg.ai.active,
+      },
+    }),
+    aiSubdued: ({ theme: { colors: color } }) => ({
+      color: color.ai,
+      bgColor: color.background.button.ghost,
+      _hover: {
+        bg: color.bg.ai.default,
+        color: color.text.inverted,
+        _disabled: {
+          bgColor: color.background.button.ghost,
+          color: color.ai,
+        },
+      },
+      _active: {
+        bg: color.bg.ai.hover,
+        color: color.text.inverted,
+      },
+    }),
+    accent: ({ theme: { colors: color } }) => ({
+      color: color.text.button.accent,
+      bgColor: color.background.button.ghost,
+      _hover: {
+        bg: color.background.button['ghost-active'],
+        color: color.text.button.accent,
+        _disabled: {
+          bgColor: color.background.button.ghost,
+          color: color.text.button.accent,
+        },
+      },
+      _active: {
+        bg: color.background.button['ghost-active'],
+        color: color.text.button.accent,
+      },
+    }),
+    sidebar: ({ theme: { colors: color } }) => ({
+      color: color.text.button.sidebar,
+      bgColor: color.background.button.sidebar,
+      _hover: {
+        bg: color.background.button['sidebar-hover'],
+        color: color.text.button.sidebar,
+        _disabled: {
+          bgColor: color.background.button.ghost,
+          color: color.text.button.sidebar,
+        },
+      },
+      _active: {
+        bg: color.background.button['sidebar-active'],
+        color: color.text.button['sidebar-active'],
+      },
+    }),
+  },
+  defaultProps: {
+    size: 'md',
+  },
+}