@codeleap/web 3.20.3 → 3.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.20.3",
+  "version": "3.21.0",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
@@ -23,11 +23,13 @@
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-slider": "1.1.1",
     "@radix-ui/react-tooltip": "^1.0.6",
+    "@tiptap/react": "2.1.16",
     "framer-motion": "^10.10.0",
     "js-cookie": "^3.0.1",
     "masonic": "^3.7.0",
     "rc-slider": "^9.7.5",
     "react-autosize-textarea": "^7.1.0",
+    "react-colorful": "^5.6.1",
     "react-datepicker": "^4.20.0",
     "react-circular-progressbar": "^2.1.0",
     "react-dropzone": "^14.2.3",

package/src/components/ColorPicker/index.tsx

@@ -0,0 +1,93 @@
+/* eslint-disable max-len */
+import React, { useCallback } from 'react'
+import { ActionIcon, Collapse, ColorPickerPresets, View } from '../components'
+import { HexColorPicker } from 'react-colorful'
+import { useBooleanToggle, useDefaultComponentStyle, useState } from '@codeleap/common'
+import { ColorPickerProps, ColorTypes } from './types'
+
+export * from './styles'
+export * from './types'
+
+const defaultProps = {
+  pickerComponent: (props) => <HexColorPicker {...props}/>,
+  icon: 'edit',
+  clearIcon: 'trash',
+  confirmIcon: 'check',
+  showFooter: true,
+}
+
+export const ColorPicker = (props: ColorPickerProps) => {
+  const {
+    isPlain = false,
+    initialColor,
+    showFooter,
+    icon,
+    clearIcon,
+    confirmIcon,
+    variants = [],
+    styles = {},
+    responsiveVariants = {},
+    onConfirm,
+    onClear,
+    closeOnConfirm = true,
+    pickerComponent: PickerComponent,
+    openPickerComponent: OpenPickerComponent,
+    footerComponent: FooterComponent = null,
+    openPickerProps,
+  } = props
+  const [visible, toggle] = useBooleanToggle(false)
+  const [color, setColor] = useState<ColorTypes>(initialColor)
+
+  const variantStyles = useDefaultComponentStyle<'u:ColorPicker', typeof ColorPickerPresets>('u:ColorPicker', {
+    variants,
+    styles,
+    responsiveVariants,
+  })
+
+  const handleConfirmation = useCallback(() => {
+    onConfirm?.(color)
+    closeOnConfirm && toggle(false)
+  }, [color])
+
+  const handleClear = useCallback(() => {
+    setColor(initialColor)
+    onClear?.()
+  }, [initialColor])
+
+  const Footer = useCallback(() => (
+    <View style={variantStyles.footerWrapper}>
+      <ActionIcon debugName='ColorPicker footer trash' name={clearIcon} onPress={handleClear} styles={variantStyles.footerButton} />
+      <ActionIcon debugName='ColorPicker footer check' name={confirmIcon} onPress={handleConfirmation} styles={variantStyles.footerButton} />
+    </View>
+  ), [clearIcon, confirmIcon, handleClear, handleConfirmation])
+
+  // Dragging to change the color in any other way does not seem to work for some reason.
+  const picker = <View style={variantStyles.picker}><PickerComponent color={color} onChange={setColor} /></View>
+
+  const _footer = !!showFooter && FooterComponent ? <FooterComponent color={color} handleConfirmation={handleConfirmation} handleClear={handleClear}/> : <Footer/>
+  const openColorPickerBtn = !!OpenPickerComponent ? <OpenPickerComponent color={color} visible={visible} toggle={toggle}/> : <ActionIcon onPress={toggle} icon={icon} {...openPickerProps}/>
+
+  return (
+    <View style={variantStyles.wrapper}>
+      {isPlain ? picker : (
+        <>
+          {openColorPickerBtn}
+          <Collapse
+            open={visible}
+            styles={{ wrapper: [
+              variantStyles.dropdown,
+              visible && variantStyles['dropdown:open'],
+            ] }}
+          >
+            <View style={variantStyles.dropdownInnerWrapper}>
+              {picker}
+              {_footer}
+            </View>
+          </Collapse>
+        </>
+      )}
+    </View>
+  )
+}
+
+ColorPicker.defaultProps = defaultProps

package/src/components/ColorPicker/styles.ts

@@ -0,0 +1,13 @@
+import { PartialComponentStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ActionIconComposition } from '../ActionIcon'
+
+type ColorPickerState = 'open'
+export type ColorPickerParts = 'wrapper' | 'picker' | 'dropdown' | `dropdown:${ColorPickerState}` | 'dropdownInnerWrapper' | 'footerWrapper'
+
+export type ColorPickerComposition = {
+  footerButton?: PartialComponentStyle<ActionIconComposition, any>
+} & {[x in ColorPickerParts]?: any}
+
+const createColorPickerStyle = createDefaultVariantFactory<'', ColorPickerComposition>()
+
+export const ColorPickerPresets = includePresets((styles) => createColorPickerStyle(() => ({ wrapper: styles })))

package/src/components/ColorPicker/types.ts

@@ -0,0 +1,25 @@
+import React from 'react'
+import { ActionIconProps, IconProps } from '../components'
+import { RgbColor, RgbaColor, HslColor, HsvColor, HslaColor, HsvaColor } from 'react-colorful'
+import { ComponentVariants } from '@codeleap/common'
+import { ColorPickerComposition, ColorPickerPresets } from './styles'
+
+export type ColorTypes = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor | string
+
+export type ColorPickerProps = React.PropsWithChildren<{
+  styles?: ColorPickerComposition
+  style?: React.CSSProperties
+  isPlain?: boolean
+  closeOnConfirm?: boolean
+  initialColor?: ColorTypes
+  showFooter?: boolean
+  icon?: IconProps['name']
+  clearIcon?: IconProps['name']
+  confirmIcon?: IconProps['name']
+  openPickerProps?: ActionIconProps
+  onConfirm?: (color: ColorTypes) => void
+  onClear?: () => void
+  openPickerComponent?: (props: { color: ColorTypes; visible: boolean; toggle: (v?: boolean) => void }) => JSX.Element
+  pickerComponent?: (props: any) => JSX.Element
+  footerComponent?: (props: {color: string | RgbColor | RgbColor; handleConfirmation: () => void; handleClear: () => void}) => JSX.Element
+} & ComponentVariants<typeof ColorPickerPresets>>

package/src/components/TextEditor/index.tsx

@@ -0,0 +1,62 @@
+import { useCallback, useDefaultComponentStyle } from '@codeleap/common'
+import { BubbleMenu, FloatingMenu, EditorContent } from '@tiptap/react'
+import { FileInput, View } from '../components'
+import { TextEditorProps } from './types'
+import { TextEditorPresets } from './styles'
+
+export * from './styles'
+export * from './types'
+
+export const TextEditor = (props: TextEditorProps) => {
+  const {
+    children,
+    editor,
+    variants = [],
+    styles = {},
+    responsiveVariants = {},
+    style = {},
+    bubbleMenuProps,
+    floatingMenuProps,
+    toolbarComponent,
+    fileInputRef,
+  } = props
+  const variantStyles = useDefaultComponentStyle<'u:TextEditor', typeof TextEditorPresets>('u:TextEditor', {
+    variants,
+    styles,
+    responsiveVariants,
+  })
+
+  const _BubbleMenu = useCallback(() => {
+    return (
+      <BubbleMenu css={[variantStyles.bubbleMenu]} {...bubbleMenuProps} editor={editor}>
+        <View style={variantStyles.bubbleMenuInnerWrapper}>
+          {bubbleMenuProps?.renderContent}
+        </View>
+      </BubbleMenu>
+    )
+  }, [editor])
+
+  const _FloatingMenu = useCallback(() => {
+    return (
+      <FloatingMenu css={[variantStyles.floatingMenu]} {...floatingMenuProps} editor={editor}>
+        <View style={variantStyles.floatingMenuInnerWrapper}>
+          {floatingMenuProps?.renderContent}
+        </View>
+      </FloatingMenu>
+    )
+  }, [editor])
+
+  if (!editor) return null
+  return (
+    <View style={{ ...variantStyles.wrapper, ...style }}>
+      {toolbarComponent}
+      {children}
+      <_BubbleMenu/>
+      <_FloatingMenu/>
+      <EditorContent editor={editor}/>
+      <FileInput
+        ref={fileInputRef}
+      />
+    </View>
+  )
+}

package/src/components/TextEditor/styles.ts

@@ -0,0 +1,7 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type TextEditorComposition = 'wrapper' | 'floatingMenu' | 'bubbleMenu' | 'bubbleMenuInnerWrapper' | 'floatingMenuInnerWrapper'
+
+const createTextEditorStyle = createDefaultVariantFactory<TextEditorComposition>()
+
+export const TextEditorPresets = includePresets((styles) => createTextEditorStyle(() => ({ wrapper: styles })))

package/src/components/TextEditor/types.ts

@@ -0,0 +1,15 @@
+import { RefObject } from 'react'
+import { ComponentVariants, StylesOf } from '@codeleap/common'
+import { BubbleMenuProps, Editor, FloatingMenuProps } from '@tiptap/react'
+import { FileInputRef } from '../FileInput'
+import { TextEditorComposition, TextEditorPresets } from './styles'
+
+export type TextEditorProps = React.PropsWithChildren<{
+  editor: Editor
+  styles?: StylesOf<TextEditorComposition>
+  style?: React.CSSProperties
+  bubbleMenuProps?: BubbleMenuProps & {renderContent: React.ReactNode}
+  floatingMenuProps?: FloatingMenuProps & {renderContent: React.ReactNode}
+  toolbarComponent?: JSX.Element
+  fileInputRef?: RefObject<FileInputRef>
+} & ComponentVariants<typeof TextEditorPresets>>

package/src/components/components.ts

@@ -35,5 +35,7 @@ export * from './DatePicker'
 export * from './Dropzone'
 export * from './Progress'
 export * from './Tag'
+export * from './TextEditor'
+export * from './ColorPicker'
 
 export * from './defaultStyles'