@codeleap/web 3.21.1 → 3.21.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.21.1",
+  "version": "3.21.3",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/components/TextEditor/index.tsx

@@ -1,9 +1,9 @@
-import { useCallback, useDefaultComponentStyle } from '@codeleap/common'
+import React from 'react'
+import { onUpdate, useCallback, useDefaultComponentStyle, useState, useValidate } from '@codeleap/common'
 import { BubbleMenu, FloatingMenu, EditorContent } from '@tiptap/react'
-import { FileInput, View } from '../components'
+import { FileInput, Text, View } from '../components'
 import { TextEditorProps } from './types'
 import { TextEditorPresets } from './styles'
-
 export * from './styles'
 export * from './types'
 
@@ -19,13 +19,43 @@ export const TextEditor = (props: TextEditorProps) => {
     floatingMenuProps,
     toolbarComponent,
     fileInputRef,
+    _error,
+    validate,
   } = props
+
+  const [_isFocused, setIsFocused] = useState(false)
+  const validation = useValidate(editor?.getText() ?? '', validate)
+
+  const hasError = !validation.isValid || _error
+  const errorMessage = validation.message || _error
+  const isDisabled = !editor?.isEditable ?? null
+
   const variantStyles = useDefaultComponentStyle<'u:TextEditor', typeof TextEditorPresets>('u:TextEditor', {
     variants,
     styles,
     responsiveVariants,
   })
 
+  const handleBlur = React.useCallback(() => {
+    validation?.onInputBlurred()
+    setIsFocused(false)
+  }, [validation?.onInputBlurred])
+
+  const handleFocus = React.useCallback(() => {
+    validation?.onInputFocused()
+    setIsFocused(true)
+  }, [validation?.onInputFocused])
+
+  onUpdate(() => {
+    editor?.on('blur', handleBlur)
+    editor?.on('focus', handleFocus)
+
+    return () => {
+      editor?.off('blur', handleBlur)
+      editor?.off('focus', handleFocus)
+    }
+  }, [editor, handleBlur, handleFocus])
+
   const _BubbleMenu = useCallback(() => {
     return (
       <BubbleMenu css={[variantStyles.bubbleMenu]} {...bubbleMenuProps} editor={editor}>
@@ -46,14 +76,30 @@ export const TextEditor = (props: TextEditorProps) => {
     )
   }, [editor])
 
+  const editorStyles = [
+    variantStyles.editor,
+    hasError && variantStyles['editor:error'],
+    isDisabled && variantStyles['editor:disabled'],
+  ]
+
   if (!editor) return null
   return (
-    <View style={{ ...variantStyles.wrapper, ...style }}>
+    <View
+      css={[
+        variantStyles.wrapper,
+        hasError && variantStyles['wrapper:error'],
+        {
+          '.tiptap': editorStyles,
+        },
+        style,
+      ]}
+    >
       {toolbarComponent}
       {children}
-      <_BubbleMenu/>
-      <_FloatingMenu/>
-      <EditorContent editor={editor}/>
+      <_BubbleMenu />
+      <_FloatingMenu />
+      <EditorContent editor={editor} />
+      {hasError ? <Text text={errorMessage} css={variantStyles['errorMessage:error']} /> : null}
       <FileInput
         ref={fileInputRef}
       />

package/src/components/TextEditor/styles.ts

@@ -1,7 +1,12 @@
 import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
-export type TextEditorComposition = 'wrapper' | 'floatingMenu' | 'bubbleMenu' | 'bubbleMenuInnerWrapper' | 'floatingMenuInnerWrapper'
+export type TextEditorStates = 'error' | 'disabled'
+export type TextEditorParts = 'wrapper' | 'editor' | 'floatingMenu' | 'bubbleMenu' | 'bubbleMenuInnerWrapper' | 'floatingMenuInnerWrapper' | 'errorMessage'
+
+export type TextEditorComposition = `${TextEditorParts}:${TextEditorStates}` | TextEditorParts
 
 const createTextEditorStyle = createDefaultVariantFactory<TextEditorComposition>()
 
-export const TextEditorPresets = includePresets((styles) => createTextEditorStyle(() => ({ wrapper: styles })))
+export const TextEditorPresets = includePresets((styles) => createTextEditorStyle(() => ({
+  wrapper: styles,
+})))

package/src/components/TextEditor/types.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react'
-import { ComponentVariants, StylesOf } from '@codeleap/common'
+import { ComponentVariants, FormTypes, StylesOf, yup } from '@codeleap/common'
 import { BubbleMenuProps, Editor, FloatingMenuProps } from '@tiptap/react'
 import { FileInputRef } from '../FileInput'
 import { TextEditorComposition, TextEditorPresets } from './styles'
@@ -8,8 +8,10 @@ export type TextEditorProps = React.PropsWithChildren<{
   editor: Editor
   styles?: StylesOf<TextEditorComposition>
   style?: React.CSSProperties
-  bubbleMenuProps?: BubbleMenuProps & {renderContent: React.ReactNode}
-  floatingMenuProps?: FloatingMenuProps & {renderContent: React.ReactNode}
+  bubbleMenuProps?: BubbleMenuProps & { renderContent: React.ReactNode }
+  floatingMenuProps?: FloatingMenuProps & { renderContent: React.ReactNode }
   toolbarComponent?: JSX.Element
   fileInputRef?: RefObject<FileInputRef>
+  _error?: boolean
+  validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
 } & ComponentVariants<typeof TextEditorPresets>>

package/src/lib/hooks.ts

@@ -1,7 +1,8 @@
-import { AnyFunction, onMount, onUpdate, range, useUncontrolled } from '@codeleap/common'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { AnyFunction, onMount, onUpdate, range, TypeGuards, useUncontrolled } from '@codeleap/common'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { v4 } from 'uuid'
 import { easeInOut, EasingFunction, AnimationProps, useAnimate, useAnimation, animate } from 'framer-motion'
+import { globalHistory } from '@reach/router'
 
 export function useWindowSize() {
   const [size, setSize] = useState([])
@@ -352,3 +353,76 @@ export function useAnimatedVariantStyles<T extends Record<string|number|symbol,
 
   return animated
 }
+
+type UseWindowFocusOptions = {
+  onFocus?: AnyFunction
+  onBlur?: AnyFunction
+}
+
+export const useWindowFocus = (options: UseWindowFocusOptions = {}, deps: Array<any> = []): boolean => {
+  const [focused, setFocused] = useState(true)
+
+  const onFocus = () => {
+    setFocused(true)
+    if (TypeGuards.isFunction(options?.onFocus)) options?.onFocus() 
+  }
+  
+  const onBlur = () => {
+    setFocused(false)
+    if (TypeGuards.isFunction(options?.onBlur)) options?.onBlur() 
+  }
+
+  useEffect(() => {
+    window.addEventListener('focus', onFocus)
+    window.addEventListener('blur', onBlur)
+    
+    return () => {
+      window.removeEventListener('focus', onFocus)
+      window.removeEventListener('blur', onBlur)
+    }
+  }, deps)
+
+  return focused
+}
+
+export const usePageExitBlocker = (
+  handler: (willLeavePage: boolean) => void,
+  deps: Array<any> = [],
+  message: string = 'Are you sure you want to leave?'
+) => {
+  const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+    if (!event) return null
+
+    event?.preventDefault()
+    event.returnValue = ''
+    return
+  }
+
+  React.useEffect(() => {
+    if (!window) return null
+
+    window.addEventListener('beforeunload', handleBeforeUnload)
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload)
+    }
+  }, deps)
+
+  React.useEffect(() => {
+    return globalHistory.listen((args) => {
+      if (!window) return null
+
+      const historyPathname = args?.location?.pathname
+      const windowPathname = window?.location?.pathname
+
+      const isPopAction = args?.action === 'POP'
+      const isLeaveAction = args?.action === 'PUSH' && !historyPathname?.includes(windowPathname)
+
+      if (isLeaveAction || isPopAction) {
+        const willLeavePage = window.confirm(message)
+
+        handler?.(willLeavePage)
+      }
+    })
+  }, deps)
+}