@northlight/ui 2.41.0 → 2.41.1

package/lib/components/transitions/types.ts

@@ -0,0 +1,37 @@
+import {
+  CollapseProps as ChakraCollapseProps,
+  FadeProps as ChakraFadeProps,
+  ScaleFadeProps as ChakraScaleFadeProps,
+  SlideFadeProps as ChakraSlideFadeProps,
+  SlideProps as ChakraSlideProps,
+} from '@chakra-ui/react'
+
+export type DurationType = number | null
+export type OffsetType = number | string
+export type ChildrenType = React.ReactNode | React.ReactNode[]
+export type TransitionDirection = 'right' | 'bottom' | 'left' | 'top' | null
+
+/** For fade component */
+export interface FadeProps extends ChakraFadeProps {
+  /** Sets both enterDuration and exitDuration at same time to same value */
+  duration?: DurationType
+  enterDuration?: DurationType
+  exitDuration?: DurationType
+  /** Makes the element not focusable when not visible */
+  disableFocus?: boolean
+  /** Will remove the component from DOM tree if in is false */
+  hideDisplay?: boolean
+  enterDelay?: number
+  exitDelay?: number
+  onTransitionComplete?: (isHidden: boolean) => void
+}
+
+export interface ScaleFadeProps extends FadeProps, Omit<ChakraScaleFadeProps, 'delay'> {}
+
+export interface SlideProps extends FadeProps, Omit<ChakraSlideProps, 'delay'> {}
+export interface SlideFadeProps extends FadeProps, Omit<ChakraSlideFadeProps, 'delay'> {
+  direction?: TransitionDirection
+  offset?: number
+}
+
+export interface CollapseProps extends FadeProps, Omit<ChakraCollapseProps, 'delay'> {}

package/lib/components/transitions/utils.ts

@@ -0,0 +1,103 @@
+import { useEffect, useState } from 'react'
+import { identity } from 'ramda'
+import { getChildrenWithProps } from '../../utils'
+import {
+  ChildrenType,
+  DurationType,
+  OffsetType,
+  TransitionDirection,
+} from './types'
+import { defaultFadeDelay, defaultOffset } from './constants'
+
+const unFocusStyles = { tabIndex: '-1' }
+export const getChildrenWithFocus = (
+  children: ChildrenType,
+  disableFocus: boolean,
+  show: boolean
+) =>
+  (show
+    ? children
+    : disableFocus
+      ? getChildrenWithProps(children, unFocusStyles)
+      : children)
+
+export const getDuration = (
+  enterDuration: DurationType,
+  exitDuration: DurationType,
+  duration: DurationType
+) => {
+  const inDuration = enterDuration || duration || defaultFadeDelay
+  const outDuration = exitDuration || duration || defaultFadeDelay
+  const transition = {
+    enter: {
+      duration: inDuration / 1000,
+    },
+    exit: {
+      duration: outDuration / 1000,
+    },
+  }
+  return transition
+}
+
+export const getOffsets = (
+  direction: TransitionDirection,
+  offset: OffsetType,
+  offsetX: OffsetType,
+  offsetY: OffsetType
+) => {
+  if (offsetX || offsetY) {
+    return { offsetX, offsetY }
+  }
+  if (direction) {
+    const delta = offset || defaultOffset
+    switch (direction) {
+      case 'right':
+        return { offsetX: delta, offsetY: 0 }
+      case 'left':
+        return { offsetX: -delta, offsetY: 0 }
+      case 'top':
+        return { offsetX: 0, offsetY: -delta }
+      case 'bottom':
+        return { offsetX: 0, offsetY: delta }
+      default:
+        break
+    }
+  }
+  return { offsetX: defaultOffset, offsetY: defaultOffset }
+}
+
+export const useDelay = (
+  show: boolean,
+  enterDelay: number,
+  exitDelay: number
+) => {
+  const [ showWithDelay, setShowWithDelay ] = useState(false)
+  useEffect(() => {
+    const ref = setTimeout(
+      () => setShowWithDelay(show),
+      show ? enterDelay : exitDelay
+    )
+    return () => clearTimeout(ref)
+  }, [ show ])
+  return showWithDelay
+}
+
+export const useHiddenDisplay = (
+  anchor = false,
+  exitDelay = 0,
+  exitDuration: DurationType = 0,
+  duration: DurationType = 0,
+  onTransitionComplete: (hidden: boolean) => void = identity
+) => {
+  const [ hidden, setHidden ] = useState(anchor)
+
+  useEffect(() => {
+    const ref = setTimeout(() => {
+      setHidden(anchor)
+      onTransitionComplete(anchor)
+    }, exitDelay + (exitDuration || duration || 0))
+    return () => clearTimeout(ref)
+  }, [ anchor ])
+
+  return hidden
+}

package/lib/components/types/color/index.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/components/types/index.ts

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

package/lib/components/types/toastIconMap/index.ts

@@ -0,0 +1,20 @@
+import {
+  AlertCircleSolid,
+  AlertTriangleSolid,
+  BellSolid,
+  BrightnessSolid,
+  CheckCircleSolid,
+  HelpCircleSolid,
+} from '@northlight/icons'
+import { AlertVariants } from '../../alert/types'
+
+export const toastIconMap: Record<AlertVariants, any> = {
+  success: CheckCircleSolid,
+  warning: AlertTriangleSolid,
+  error: AlertCircleSolid,
+  danger: AlertCircleSolid,
+  info: BellSolid,
+  ai: BrightnessSolid,
+  default: HelpCircleSolid,
+  ghost: HelpCircleSolid,
+}

package/lib/components/types/tooltipIconMap/index.ts

@@ -0,0 +1,21 @@
+import {
+  AlertCircleSolid,
+  AlertOctagonSolid,
+  AlertTriangleSolid,
+  BrightnessSolid,
+  CheckCircleSolid,
+  HelpCircleSolid,
+  InfoSolid,
+} from '@northlight/icons'
+import { AlertVariants } from '../../alert/types'
+
+export const tooltipIconMap: Record<AlertVariants, any> = {
+  success: CheckCircleSolid,
+  warning: AlertTriangleSolid,
+  error: AlertCircleSolid,
+  danger: AlertOctagonSolid,
+  info: InfoSolid,
+  ai: BrightnessSolid,
+  default: HelpCircleSolid,
+  ghost: HelpCircleSolid,
+}

package/lib/components/typography/body/index.ts

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

package/lib/components/typography/body/p.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react'
+import { Text as ChakraText, useStyleConfig } from '@chakra-ui/react'
+import { PProps } from './types'
+
+/**
+ * @see {@link https://northlight.dev/reference/p}
+ * @example
+ * (?
+ * <P>Body text</P>
+ * ?)
+ *
+ */
+export const P = forwardRef<HTMLParagraphElement, PProps>(({
+  children,
+  variant = '16',
+  sx = {},
+  ...rest
+}, ref) => {
+  const styles = useStyleConfig('P', { variant, sx })
+
+  return (
+    <ChakraText
+      variant={ variant }
+      sx={ styles }
+      ref={ ref }
+      { ...rest }
+    >
+      { children }
+    </ChakraText>
+  )
+})

package/lib/components/typography/body/types.ts

@@ -0,0 +1,5 @@
+import { TextProps as ChakraTextProps } from '@chakra-ui/react'
+
+export interface PProps extends ChakraTextProps {
+  variant?: '14' | '16'
+}

package/lib/components/typography/headings/h1.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react'
+import { Heading, useStyleConfig } from '@chakra-ui/react'
+import { HeadingProps } from './types'
+
+/**
+ * @see {@link https://northlight.dev/reference/h1}
+ * @example (Example)
+ * (?
+ * <H1>Heading 1</H1>
+ * ?)
+ */
+export const H1 = forwardRef<HTMLHeadingElement, HeadingProps>(({
+  children,
+  sx = {},
+  ...rest
+}, ref) => {
+  const styles = useStyleConfig('H1', { sx })
+
+  return (
+    <Heading
+      as="h1"
+      sx={ styles }
+      ref={ ref }
+      { ...rest }
+    >
+      { children }
+    </Heading>
+  )
+})

package/lib/components/typography/headings/h2.tsx

@@ -0,0 +1,30 @@
+import React, { forwardRef } from 'react'
+import { Heading, useStyleConfig } from '@chakra-ui/react'
+import { HeadingProps } from './types'
+
+/**
+ * @see {@link https://northlight.dev/reference/h2}
+ * @example (Example)
+ * (?
+ * <H2>Heading 2</H2>
+ * ?)
+ *
+ */
+export const H2 = forwardRef<HTMLHeadingElement, HeadingProps>(({
+  children,
+  sx = {},
+  ...rest
+}, ref) => {
+  const styles = useStyleConfig('H2', { sx })
+
+  return (
+    <Heading
+      as="h2"
+      sx={ styles }
+      ref={ ref }
+      { ...rest }
+    >
+      { children }
+    </Heading>
+  )
+})

package/lib/components/typography/headings/h3.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react'
+import { Heading, useStyleConfig } from '@chakra-ui/react'
+import { HeadingProps } from './types'
+
+/**
+ * @see {@link https://northlight.dev/reference/h3}
+ * @example (Example)
+ * (?
+ * <H3>Heading 3</H3>
+ * ?)
+ */
+export const H3 = forwardRef<HTMLHeadingElement, HeadingProps>(({
+  children,
+  sx = {},
+  ...rest
+}, ref) => {
+  const styles = useStyleConfig('H3', { sx })
+
+  return (
+    <Heading
+      as="h3"
+      sx={ styles }
+      ref={ ref }
+      { ...rest }
+    >
+      { children }
+    </Heading>
+  )
+})

package/lib/components/typography/headings/h4.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react'
+import { Heading, useStyleConfig } from '@chakra-ui/react'
+import { HeadingProps } from './types'
+
+/**
+ * @see {@link https://northlight.dev/reference/h4}
+ * @example (Example)
+ * (?
+ * <H4>Heading 4</H4>
+ * ?)
+ */
+export const H4 = forwardRef<HTMLHeadingElement, HeadingProps>(({
+  children,
+  sx = {},
+  ...rest
+}, ref) => {
+  const styles = useStyleConfig('H4', { sx })
+
+  return (
+    <Heading
+      as="h4"
+      sx={ styles }
+      ref={ ref }
+      { ...rest }
+    >
+      { children }
+    </Heading>
+  )
+})

package/lib/components/typography/headings/h5.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react'
+import { Heading, useStyleConfig } from '@chakra-ui/react'
+import { HeadingProps } from './types'
+
+/**
+ * @see {@link https://northlight.dev/reference/h5}
+ * @example (Example)
+ * (?
+ * <H5>Heading 5</H5>
+ * ?)
+ */
+export const H5 = forwardRef<HTMLHeadingElement, HeadingProps>(({
+  children,
+  sx = {},
+  ...rest
+}, ref) => {
+  const styles = useStyleConfig('H5', { sx })
+
+  return (
+    <Heading
+      as="h5"
+      sx={ styles }
+      ref={ ref }
+      { ...rest }
+    >
+      { children }
+    </Heading>
+  )
+})

package/lib/components/typography/headings/h6.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react'
+import { Heading, useStyleConfig } from '@chakra-ui/react'
+import { HeadingProps } from './types'
+
+/**
+ * @see {@link https://northlight.dev/reference/h6}
+ * @example (Example)
+ * (?
+ * <H6>Heading 6</H6>
+ * ?)
+ */
+export const H6 = forwardRef<HTMLHeadingElement, HeadingProps>(({
+  children,
+  sx = {},
+  ...rest
+}, ref) => {
+  const styles = useStyleConfig('H6', { sx })
+
+  return (
+    <Heading
+      as="h6"
+      sx={ styles }
+      ref={ ref }
+      { ...rest }
+    >
+      { children }
+    </Heading>
+  )
+})

package/lib/components/typography/headings/index.ts

@@ -0,0 +1,7 @@
+export * from './h1'
+export * from './h2'
+export * from './h3'
+export * from './h4'
+export * from './h5'
+export * from './h6'
+export * from './types'

package/lib/components/typography/headings/types.ts

@@ -0,0 +1,3 @@
+import { HeadingProps as ChakraHeadingProps } from '@chakra-ui/react'
+
+export interface HeadingProps extends ChakraHeadingProps {}

package/lib/components/typography/index.ts

@@ -0,0 +1,6 @@
+export * from './headings'
+export * from './body'
+export * from './stylized'
+export * from './labels'
+export * from './types'
+export * from './numvals'

package/lib/components/typography/labels/index.ts

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

package/lib/components/typography/labels/label.tsx

@@ -0,0 +1,39 @@
+import React, { forwardRef } from 'react'
+import { FormLabel, VisuallyHidden, useStyleConfig } from '@chakra-ui/react'
+import { LabelProps } from './types'
+
+/**
+ * One of the stylized typography components
+ * @see Blockquote
+ * @see Lead
+ * @see Small
+ * @see Tiny
+ * @see {@link https://northlight.dev/reference/label }
+ *
+ * @example
+ * (?
+ * <Label sx={{color: 'brand.500' }} size="lg">Brand</Label>
+ * ?)
+ * (_Note, all other css properties not listed
+ * under the props tab to right should be passed down via **sx**_)
+ *
+ */
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(({
+  children,
+  size = 'sm',
+  sx = {},
+  ...rest
+}, ref) => {
+  const styles = useStyleConfig('Label', { sx, size })
+
+  return (
+    <FormLabel
+      sx={ styles }
+      requiredIndicator={ <VisuallyHidden /> }
+      ref={ ref }
+      { ...rest }
+    >
+      { children }
+    </FormLabel>
+  )
+})

package/lib/components/typography/labels/types.ts

@@ -0,0 +1,6 @@
+import { FormLabelProps } from '@chakra-ui/react'
+
+export type LabelSizes = '2xs' | 'xs' | 'sm' | 'md' | 'lg'
+export interface LabelProps extends FormLabelProps {
+  size?: LabelSizes
+}

package/lib/components/typography/numvals/index.ts

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

package/lib/components/typography/numvals/numval.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef } from 'react'
+import {
+  Text as ChakraText,
+  TextProps,
+  useStyleConfig,
+} from '@chakra-ui/react'
+
+/**
+ * @see {@link https://northlight.dev/reference/label }
+ *
+ * @example
+ * (?
+ * <NumVal sx={{color: 'brand' }} size="lg">270 000 000</NumVal>
+ * ?)
+ * (_Note, all other css properties not listed
+ *
+ */
+export const NumVal = forwardRef<HTMLLabelElement, TextProps>(
+  ({ children, size = 'sm', sx = {}, ...rest }, ref) => {
+    const styles = useStyleConfig('NumVal', { sx, size })
+
+    return (
+      <ChakraText
+        as="span"
+        sx={ styles }
+        ref={ ref }
+        { ...rest }
+      >
+        { children }
+      </ChakraText>
+    )
+  }
+)

package/lib/components/typography/stylized/blockquote.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react'
+import { Text as ChakraText, TextProps, useStyleConfig } from '@chakra-ui/react'
+
+/**
+ * One of the stylized typography components
+ * @see Capitalized
+ * @see Lead
+ * @see Small
+ * @see Tiny
+ * @see {@link https://northlight.dev/reference/blockquote }
+ *
+ * @example (Example)
+ * (?
+ * <Blockquote sx={{color: 'green.500' }}>Success</Blockquote>
+ * ?)
+ * (_Note, all other css properties not listed under the
+ * props tab to right should be passed down via **sx**_)
+ *
+ *
+ *
+ */
+export const Blockquote = forwardRef<HTMLParagraphElement, TextProps>(
+  ({ children, sx = {}, ...rest }, ref) => {
+    const styles = useStyleConfig('Blockquote', { sx })
+
+    return (
+      <ChakraText as="span" sx={ styles } ref={ ref } { ...rest }>
+        { children }
+      </ChakraText>
+    )
+  }
+)

package/lib/components/typography/stylized/capitalized.tsx

@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react'
+import { Text as ChakraText, TextProps, useStyleConfig } from '@chakra-ui/react'
+
+/**
+ * One of the stylized typography components
+ * @see Blockquote
+ * @see Lead
+ * @see Small
+ * @see Tiny
+ * @see {@link https://northlight.dev/reference/capitalized }
+ *
+ * @example (Example)
+ * (?
+ * <Capitalized sx={{color: 'red.500' }}>Error</Capitalized>
+ * ?)
+ * (_Note, all other css properties not listed
+ * under the props tab to right should be passed down via **sx**_)
+ *
+ */
+export const Capitalized = forwardRef<HTMLParagraphElement, TextProps>(({
+  children,
+  sx = {},
+  ...rest
+}, ref) => {
+  const styles = useStyleConfig('Capitalized', { sx })
+
+  return (
+    <ChakraText
+      as="span"
+      sx={ styles }
+      ref={ ref }
+      { ...rest }
+    >
+      { children }
+    </ChakraText>
+  )
+})

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

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

package/lib/components/typography/stylized/lead.tsx

@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react'
+import { Text as ChakraText, TextProps, useStyleConfig } from '@chakra-ui/react'
+
+/**
+ * One of the stylized typography components
+ * @see Blockquote
+ * @see Lead
+ * @see Small
+ * @see Tiny
+ * @see {@link https://northlight.dev/reference/lead }
+ *
+ * @example
+ * (?
+ * <Lead>Lead</Lead>
+ * ?)
+ * (_Note, all other css properties not listed
+ * under the props tab to right should be passed down via **sx**_)
+ *
+ */
+export const Lead = forwardRef<HTMLParagraphElement, TextProps>(({
+  children,
+  sx = {},
+  ...rest
+}, ref) => {
+  const styles = useStyleConfig('Lead', { sx })
+
+  return (
+    <ChakraText
+      as="span"
+      sx={ styles }
+      ref={ ref }
+      { ...rest }
+    >
+      { children }
+    </ChakraText>
+  )
+})