@northlight/ui 2.41.0 → 2.41.1

package/lib/theme/components/typography/numvals/numval.ts

@@ -0,0 +1,95 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const NumVal: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme: { sizes: sizing }, sx }) =>
+    merge(
+      {
+        color: 'inherit',
+        width: '100%',
+        maxWidth: '100%',
+        marginBottom: sizing[0],
+        marginInlineStart: sizing[0],
+        marginEnd: sizing[0],
+        marginInlineEnd: sizing[0],
+      },
+      sx
+    ),
+  sizes: {
+    '2xs': ({ theme, sx }) => {
+      const { tinyMono } = theme.typography.numVal
+      return merge(
+        {
+          fontFamily: tinyMono.fontFamily,
+          fontWeight: tinyMono.fontWeight,
+          lineHeight: tinyMono.lineHeight,
+          fontSize: tinyMono.fontSize,
+          letterSpacing: tinyMono.letterSpacing,
+          textTransform: tinyMono.textCase,
+          textDecoration: tinyMono.textDecoration,
+        },
+        sx
+      )
+    },
+    xs: ({ theme, sx }) => {
+      const { xsMono } = theme.typography.numVal
+      return merge(
+        {
+          fontFamily: xsMono.fontFamily,
+          fontWeight: xsMono.fontWeight,
+          lineHeight: xsMono.lineHeight,
+          fontSize: xsMono.fontSize,
+          letterSpacing: xsMono.letterSpacing,
+          textTransform: xsMono.textCase,
+          textDecoration: xsMono.textDecoration,
+        },
+        sx
+      )
+    },
+    sm: ({ theme, sx }) => {
+      const { smMono } = theme.typography.numVal
+      return merge(
+        {
+          fontFamily: smMono.fontFamily,
+          fontWeight: smMono.fontWeight,
+          lineHeight: smMono.lineHeight,
+          fontSize: smMono.fontSize,
+          letterSpacing: smMono.letterSpacing,
+          textTransform: smMono.textCase,
+          textDecoration: smMono.textDecoration,
+        },
+        sx
+      )
+    },
+    md: ({ theme, sx }) => {
+      const { mdMono } = theme.typography.numVal
+      return merge(
+        {
+          fontFamily: mdMono.fontFamily,
+          fontWeight: mdMono.fontWeight,
+          lineHeight: mdMono.lineHeight,
+          fontSize: mdMono.fontSize,
+          letterSpacing: mdMono.letterSpacing,
+          textTransform: mdMono.textCase,
+          textDecoration: mdMono.textDecoration,
+        },
+        sx
+      )
+    },
+    lg: ({ theme, sx }) => {
+      const { lgMono } = theme.typography.numVal
+      return merge(
+        {
+          fontFamily: lgMono.fontFamily,
+          fontWeight: lgMono.fontWeight,
+          lineHeight: lgMono.lineHeight,
+          fontSize: lgMono.fontSize,
+          letterSpacing: lgMono.letterSpacing,
+          textTransform: lgMono.textCase,
+          textDecoration: lgMono.textDecoration,
+        },
+        sx
+      )
+    },
+  },
+}

package/lib/theme/components/typography/stylized/blockquote.ts

@@ -0,0 +1,17 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const Blockquote: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme, sx }) => {
+    const { blockquote } = theme.typography.stylized
+    return merge({
+      color: 'text.default',
+      fontFamily: blockquote.fontFamily,
+      fontWeight: blockquote.fontWeight,
+      lineHeight: blockquote.lineHeight,
+      fontSize: blockquote.fontSize,
+      letterSpacing: blockquote.letterSpacing,
+      textTransform: blockquote.textCase,
+    }, sx)
+  },
+}

package/lib/theme/components/typography/stylized/capitalized.ts

@@ -0,0 +1,17 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const Capitalized: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme, sx }) => {
+    const { CAPITALIZED } = theme.typography.stylized
+    return merge({
+      color: 'text.default',
+      fontFamily: CAPITALIZED.fontFamily,
+      fontWeight: CAPITALIZED.fontWeight,
+      lineHeight: CAPITALIZED.lineHeight,
+      fontSize: CAPITALIZED.fontSize,
+      letterSpacing: CAPITALIZED.letterSpacing,
+      textTransform: CAPITALIZED.textCase,
+    }, sx)
+  },
+}

package/lib/theme/components/typography/stylized/index.ts

@@ -0,0 +1,5 @@
+export * from './blockquote'
+export * from './tiny'
+export * from './capitalized'
+export * from './lead'
+export * from './small'

package/lib/theme/components/typography/stylized/lead.ts

@@ -0,0 +1,17 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const Lead: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme, sx }) => {
+    const { lead } = theme.typography.stylized
+    return merge({
+      color: 'text.default',
+      fontFamily: lead.fontFamily,
+      fontWeight: lead.fontWeight,
+      lineHeight: lead.lineHeight,
+      fontSize: lead.fontSize,
+      letterSpacing: lead.letterSpacing,
+      textTransform: lead.textCase,
+    }, sx)
+  },
+}

package/lib/theme/components/typography/stylized/small.ts

@@ -0,0 +1,17 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const Small: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme, sx }) => {
+    const { small } = theme.typography.stylized
+    return merge({
+      color: 'text.default',
+      fontFamily: small.fontFamily,
+      fontWeight: small.fontWeight,
+      lineHeight: small.lineHeight,
+      fontSize: small.fontSize,
+      letterSpacing: small.letterSpacing,
+      textTransform: small.textCase,
+    }, sx)
+  },
+}

package/lib/theme/components/typography/stylized/tiny.ts

@@ -0,0 +1,17 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const Tiny: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme, sx }) => {
+    const { tiny } = theme.typography.stylized
+    return merge({
+      color: 'text.default',
+      fontFamily: tiny.fontFamily,
+      fontWeight: tiny.fontWeight,
+      lineHeight: tiny.lineHeight,
+      fontSize: tiny.fontSize,
+      letterSpacing: tiny.letterSpacing,
+      textTransform: tiny.textCase,
+    }, sx)
+  },
+}

package/lib/theme/global/scrollbar.ts

@@ -0,0 +1,23 @@
+export const scrollbarStyles = {
+  '::-webkit-scrollbar': {
+    width: '8px',
+    height: '8px',
+  },
+  '::-webkit-scrollbar-track': {
+    background: 'background.scrollbar.track',
+  },
+  '::-webkit-scrollbar-thumb': {
+    borderRadius: 'scrollbar.thumb',
+    border: '2px solid',
+    borderColor: 'border.scrollbar.thumb',
+    backgroundClip: 'padding-box !important',
+    background: 'background.scrollbar.thumb',
+  },
+  '::-webkit-scrollbar-thumb:hover': {
+    borderRadius: 'scrollbar.thumb',
+    border: '1px solid ',
+    borderColor: 'border.scrollbar.thumb',
+    backgroundClip: 'padding-box !important',
+    background: 'background.scrollbar.thumb',
+  },
+}

package/lib/theme/index.ts

@@ -0,0 +1,67 @@
+import {
+  ThemeOverride,
+  extendTheme,
+} from '@chakra-ui/react'
+import {
+  coreBorderRadius,
+  coreBoxShadow,
+  coreFontSize,
+  coreFontWeight,
+  coreLineHeight,
+  coreSizing,
+  coreSpacing,
+  coreZIndex,
+  palette,
+} from '@northlight/tokens'
+import { scrollbarStyles } from './global/scrollbar'
+import * as components from './components'
+import { CamphouseLightSkin, TottSkin, WebappSkin } from './skins'
+
+const overrides: ThemeOverride = {
+  config: {
+    cssVarPrefix: '',
+  },
+  semanticTokens: {
+    colors: {
+      'chakra-body-text': {
+        _light: 'text.default',
+        _dark: 'text.inverted',
+      },
+    },
+  },
+  styles: {
+    global: {
+      html: {
+        scrollBehavior: 'smooth',
+      },
+      body: {
+        height: '100%',
+      },
+      '#app': {
+        height: '100%',
+      },
+      ...scrollbarStyles,
+    },
+  },
+  fonts: {
+    heading: 'Inter, sans-serif',
+    body: 'Inter, sans-serif',
+  },
+  components: { ...components },
+  colors: palette,
+  zIndices: coreZIndex,
+  sizes: coreSizing,
+  space: coreSpacing,
+  fontWeights: coreFontWeight,
+  shadows: coreBoxShadow,
+  fontSizes: coreFontSize,
+  lineHeights: coreLineHeight,
+  radii: coreBorderRadius,
+  borderWidths: WebappSkin.borders,
+}
+
+export const theme = extendTheme(overrides, WebappSkin)
+
+export const tottTheme = extendTheme(overrides, TottSkin)
+
+export const camphouseLightTheme = extendTheme(overrides, CamphouseLightSkin)

package/lib/theme/process-color-scheme-based-on-theme.ts

@@ -0,0 +1,24 @@
+import { path } from 'ramda'
+import type { CurrentTheme } from '../utils'
+
+const themeMap: Record<CurrentTheme, Record<string, string>> = {
+  camphouseLightTheme: {
+    green: 'moss',
+    pink: 'rose',
+    orange: 'coral',
+    gray: 'smoke',
+  },
+  webappTheme: {},
+  tottTheme: {},
+}
+
+export interface ProcessColorSchemeBasedOnThemeProps {
+  currentTheme: CurrentTheme
+  colorScheme: string
+}
+
+export const processColorSchemeBasedOnTheme = ({
+  currentTheme,
+  colorScheme,
+}: ProcessColorSchemeBasedOnThemeProps) =>
+  path<string>([ currentTheme, colorScheme ], themeMap) ?? colorScheme

package/lib/theme/skins/camphouse-light/index.ts

@@ -0,0 +1,34 @@
+import { ThemeOverride } from '@chakra-ui/react'
+import {
+  CamphouseLightComponentsTokensSet,
+  CamphouseLightSystemTokensSet,
+  typography,
+} from '@northlight/tokens'
+
+export const CamphouseLightSkin: ThemeOverride = {
+  colors: {
+    ...CamphouseLightSystemTokensSet.st.color,
+    ...CamphouseLightComponentsTokensSet.color,
+    text: {
+      ...CamphouseLightSystemTokensSet.st.color.text,
+      ...CamphouseLightComponentsTokensSet.color.text,
+    },
+    border: {
+      ...CamphouseLightSystemTokensSet.st.color.border,
+      ...CamphouseLightComponentsTokensSet.color.border,
+    },
+  },
+  sizes: CamphouseLightComponentsTokensSet.sizing,
+  space: CamphouseLightComponentsTokensSet.spacing,
+  radii: {
+    ...CamphouseLightSystemTokensSet.st.borderRadius,
+    ...CamphouseLightComponentsTokensSet.borderRadius,
+  },
+  borders: {
+    ...CamphouseLightSystemTokensSet.st.borderWidth,
+    ...CamphouseLightComponentsTokensSet.borderWidth,
+  },
+  opacity: CamphouseLightComponentsTokensSet.opacity,
+  typography,
+  shadows: { ...CamphouseLightSystemTokensSet.st.boxShadow },
+}

package/lib/theme/skins/index.ts

@@ -0,0 +1,3 @@
+export * from './webapp'
+export * from './tott'
+export * from './camphouse-light'

package/lib/theme/skins/tott/index.ts

@@ -0,0 +1,30 @@
+import { ThemeOverride } from '@chakra-ui/react'
+import {
+  TottComponentsTokensSet,
+  TottSystemTokensSet,
+  typography,
+} from '@northlight/tokens'
+
+export const TottSkin: ThemeOverride = {
+  colors: {
+    ...TottSystemTokensSet.st.color,
+    ...TottComponentsTokensSet.color,
+    border: {
+      ...TottSystemTokensSet.st.color.border,
+      ...TottComponentsTokensSet.color.border,
+    },
+  },
+  sizes: TottComponentsTokensSet.sizing,
+  space: TottComponentsTokensSet.spacing,
+  radii: {
+    ...TottSystemTokensSet.st.borderRadius,
+    ...TottComponentsTokensSet.borderRadius,
+  },
+  borders: {
+    ...TottSystemTokensSet.st.borderWidth,
+    ...TottComponentsTokensSet.borderWidth,
+  },
+  opacity: TottComponentsTokensSet.opacity,
+  typography,
+  shadows: { ...TottSystemTokensSet.st.boxShadow },
+}

package/lib/theme/skins/webapp/index.ts

@@ -0,0 +1,34 @@
+import { ThemeOverride } from '@chakra-ui/react'
+import {
+  WebappComponentsTokensSet,
+  WebappSystemTokensSet,
+  typography,
+} from '@northlight/tokens'
+
+export const WebappSkin: ThemeOverride = {
+  colors: {
+    ...WebappSystemTokensSet.st.color,
+    ...WebappComponentsTokensSet.color,
+    text: {
+      ...WebappSystemTokensSet.st.color.text,
+      ...WebappComponentsTokensSet.color.text,
+    },
+    border: {
+      ...WebappSystemTokensSet.st.color.border,
+      ...WebappComponentsTokensSet.color.border,
+    },
+  },
+  sizes: WebappComponentsTokensSet.sizing,
+  space: WebappComponentsTokensSet.spacing,
+  radii: {
+    ...WebappSystemTokensSet.st.borderRadius,
+    ...WebappComponentsTokensSet.borderRadius,
+  },
+  borders: {
+    ...WebappSystemTokensSet.st.borderWidth,
+    ...WebappComponentsTokensSet.borderWidth,
+  },
+  opacity: WebappComponentsTokensSet.opacity,
+  typography,
+  shadows: { ...WebappSystemTokensSet.st.boxShadow },
+}

package/lib/types/color/color.ts

@@ -0,0 +1,24 @@
+export type Color =
+  'blue'
+  | 'gray'
+  | 'red'
+  | 'pink'
+  | 'green'
+  | 'orange'
+  | 'purple'
+  | 'yellow'
+  | 'mediatoolBlue'
+
+export type ColorGrade =
+  50
+  | 100
+  | 200
+  | 300
+  | 400
+  | 500
+  | 600
+  | 700
+  | 800
+  | 900
+
+export type ColorShades = Record<ColorGrade, string>

package/lib/types/color/index.ts

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

package/lib/types/index.ts

@@ -0,0 +1,2 @@
+export * from './color'
+export * from './input-field'

package/lib/types/input-field/index.ts

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

package/lib/types/input-field/input-field.ts

@@ -0,0 +1,4 @@
+export interface InputFieldProps {
+  inputLeftElement?: React.ReactNode
+  inputRightElement?: React.ReactNode
+}

package/lib/utils/add-alpha/index.ts

@@ -0,0 +1,10 @@
+import { useToken } from '@chakra-ui/system'
+
+export const addAlpha = (color: string, alpha: number = 1) => {
+  const colorInHex = useToken('colors', color)
+
+  const limitAlpha = Math.min(Math.max(alpha, 0), 1)
+  const opacity = Math.round(limitAlpha * 255)
+
+  return `${colorInHex}${opacity.toString(16).toUpperCase()}`
+}

package/lib/utils/clamp/index.ts

@@ -0,0 +1,2 @@
+export const clamp = (minValue: number, maxValue: number, value: number) =>
+  Math.min(Math.max(value, minValue), maxValue)

package/lib/utils/debounce/create-debounce-function-instance.ts

@@ -0,0 +1,18 @@
+/** A debounce function to be used together with Async select in SearchBar.
+ * The reason to why the usual debounce hook does not work is because we
+ * don't control the loadOptions call ourselves.
+ *
+ * Important to note is that the timeout here needs to NOT be reinstantiated
+ * every render, otherwise it defeats the purpose as a new timeout will be
+ * created every time the component re-renders.
+*/
+export const createDebounceFunctionInstance = (delay: number) => {
+  let timeout: any
+
+  return (fn: any) => (...args: any) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      fn(...args)
+    }, delay)
+  }
+}

package/lib/utils/debounce/index.ts

@@ -0,0 +1 @@
+export { createDebounceFunctionInstance } from './create-debounce-function-instance'

package/lib/utils/get-children-with-props/index.ts

@@ -0,0 +1,17 @@
+import React, { Children } from 'react'
+import { T } from 'ramda'
+import { passPropsToChild } from './pass-props-to-child'
+
+export const getChildrenWithProps = (
+  children: React.ReactNode | React.ReactNode[],
+  styles: Record<string, any>,
+  predicate: (child: React.ReactNode, index: number) => boolean = T
+) => {
+  const childrenAsArr = Children.toArray(children)
+  const childrenWithoutFocus = childrenAsArr.map((child, i) => (
+    predicate(child, i)
+      ? passPropsToChild(child, { ...styles })
+      : child
+  ))
+  return childrenWithoutFocus
+}

package/lib/utils/get-children-with-props/pass-props-to-child.ts

@@ -0,0 +1,10 @@
+import React, { cloneElement, isValidElement } from 'react'
+import { CSSObject } from '@emotion/react'
+
+export const passPropsToChild = (child: React.ReactNode, styles: CSSObject) => (
+  isValidElement(child)
+    ? cloneElement(child, {
+      ...styles,
+    })
+    : child
+)

package/lib/utils/get-consistent-random-color-from-string/index.ts

@@ -0,0 +1,26 @@
+/* eslint-disable no-bitwise */
+import { keys, omit } from 'ramda'
+import { palette } from '@northlight/tokens'
+
+const availableColorSchemes = keys(omit([ 'mono' ], palette))
+
+const djb2Hash = (str: string, colors: string[]) => {
+  let hash = 5381
+
+  for (let i = 0; i < str.length; i += 1) {
+    const char = str.charCodeAt(i)
+    hash = (hash << 5) + hash + char
+
+    hash &= hash
+  }
+
+  return (Math.abs(hash) % colors.length)
+}
+
+export const getConsistentRandomColorFromString = (
+  str: string,
+  colors: string[] = availableColorSchemes
+) => {
+  const index = djb2Hash(str, colors)
+  return colors[index]
+}

package/lib/utils/get-contrast-color/index.ts

@@ -0,0 +1,34 @@
+import { useToken } from '@chakra-ui/system'
+import { luminosity } from '../luminosity'
+
+function safeUseToken (tokenOrValue: string): string {
+  try {
+    return useToken('colors', tokenOrValue)
+  } catch {
+    return tokenOrValue
+  }
+}
+
+export const getContrastColor = (color: string) => {
+  const textDefault = useToken('colors', 'text.default') // dark
+  const textInverted = useToken('colors', 'text.inverted') // light
+
+  const normalized = typeof color === 'string' ? color.trim() : (color as unknown as string)
+
+  // If a concrete hex is passed, use it directly; else try token resolution.
+  const isHex = /^#?[0-9a-f]{3}([0-9a-f]{3})?$/i.test(normalized)
+  const bgResolved = isHex
+    ? (normalized[0] === '#' ? normalized : `#${normalized}`)
+    : safeUseToken(normalized)
+
+  const lInverted = luminosity(textInverted)
+  const lDefault = luminosity(textDefault)
+  const threshold = (lInverted + lDefault) / 2
+  const brightColor = lInverted > lDefault ? textInverted : textDefault
+  const darkColor = lInverted > lDefault ? textDefault : textInverted
+
+  const lBg = luminosity(bgResolved)
+  if (Number.isNaN(lBg)) return undefined
+
+  return lBg >= threshold ? darkColor : brightColor
+}

package/lib/utils/get-field-error/index.ts

@@ -0,0 +1,12 @@
+import { path, replace, split } from 'ramda'
+import { FieldErrorsImpl, FieldValues } from 'react-hook-form'
+import { FieldErrorType } from '../../components/form/types'
+
+export function getFieldError<T extends FieldValues> (name: string, errors: FieldErrorsImpl<T>) {
+  const nameWithoutRightBracket = replace(/]/g, '', name)
+  const leftBracketAndDot = /[.[\]]/g
+  const fieldErrorPath = split(leftBracketAndDot, nameWithoutRightBracket)
+
+  const fieldError: FieldErrorType<T> = path(fieldErrorPath, errors)
+  return fieldError
+}

package/lib/utils/get-initials/index.ts

@@ -0,0 +1,6 @@
+export const getInitials = (name: string) => {
+  const [ firstName, lastName ] = name.toUpperCase().split(' ')
+  return firstName && lastName
+    ? `${firstName[0]}${lastName[0]}`
+    : firstName[0]
+}

package/lib/utils/get-shades/index.ts

@@ -0,0 +1,31 @@
+import { palette } from '@northlight/tokens'
+import { Color, ColorGrade } from '../../types'
+
+export const getShades = (startShade: number, endShade?: number) => {
+  let start: number
+  let end: number
+  if (!endShade) {
+    start = startShade
+    end = startShade
+  } else if (endShade > startShade) {
+    start = startShade
+    end = endShade
+  } else {
+    start = endShade
+    end = startShade
+  }
+
+  return (
+    Object.keys(palette).reduce((colors, color) => {
+      if (color === 'mono') return colors
+      return colors.concat(
+        Object.keys(palette[color as Color])
+          .filter((value) =>
+            parseInt(value, 10) >= start
+          && parseInt(value, 10) <= end
+          )
+          .map((shade) => palette[color as Color][shade as unknown as ColorGrade])
+      )
+    }, [] as string[])
+  )
+}

package/lib/utils/highlight/index.ts

@@ -0,0 +1,9 @@
+import { CSSObject } from '@emotion/react'
+
+export const highlight:CSSObject = {
+  px: '1',
+  py: '0.5',
+  rounded: '6',
+  bg: 'teal.100',
+  fontWeight: 'bold',
+}

package/lib/utils/index.ts

@@ -0,0 +1,13 @@
+export * from './get-contrast-color'
+export * from './luminosity'
+export * from './ring'
+export * from './highlight'
+export * from './get-shades'
+export * from './get-initials'
+export * from './get-field-error'
+export * from './get-children-with-props'
+export * from './add-alpha'
+export * from './debounce'
+export * from './use-current-theme'
+export * from './clamp'
+export * from './get-consistent-random-color-from-string'