@codeleap/web 2.4.7 → 3.0.2

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,155 @@
+/** @jsx jsx */
+import { CSSObject, jsx } from '@emotion/react'
+import {
+  ComponentVariants,
+  useBooleanToggle,
+  useDefaultComponentStyle,
+  useDebounce,
+} from '@codeleap/common'
+import { ReactNode } from 'react'
+import { View } from '../View'
+
+import { StylesOf } from '../../types/utility'
+import { Touchable } from '../Touchable'
+import { useClickOutside } from '../../lib/hooks'
+import { TooltipComposition, TooltipPresets } from './styles'
+
+type TooltipPosition = 'left' | 'top' | 'bottom' | 'right'
+
+const arrowPositionStyles = {
+  left: {
+    right: `100%`,
+    top: '50%',
+    transform: 'translate(50%,-50%)',
+    borderRight: 'none',
+    borderTop: 'none',
+  },
+  right: {
+    left: `100%`,
+    top: '50%',
+    transform: 'translate(-50%,-50%)',
+    borderLeft: 'none',
+    borderBottom: 'none',
+  },
+  bottom: {
+    left: '50%',
+    top: `100%`,
+    transform: 'translate(-50%,-50%)',
+    borderTop: 'none',
+    borderLeft: 'none',
+  },
+  top: {
+    left: '50%',
+    bottom: `100%`,
+    transform: 'translate(-50%,50%)',
+    borderBottom: 'none',
+    borderRight: 'none',
+  },
+}
+
+const tooltipPositionStyles = {
+  left: (arrow = 0, visible = false) => ({
+    right: `calc(100% + ${arrow}px)`,
+    top: '50%',
+    transform: `translate(0%,-50%) scale(${visible ? '1' : '0'})`,
+  }),
+  right: (arrow = 0, visible = false) => ({
+    left: `calc(100% + ${arrow}px)`,
+    top: '50%',
+    transform: `translate(0%,-50%) scale(${visible ? '1' : '0'})`,
+  }),
+  bottom: (arrow = 0, visible = false) => ({
+    left: '50%',
+    top: `calc(100% + ${arrow}px)`,
+    transform: `translate(-50%,0%) scale(${visible ? '1' : '0'})`,
+  }),
+  top: (arrow = 0, visible = false) => ({
+    left: '50%',
+    bottom: `calc(100% + ${arrow}px)`,
+    transform: `translate(-50%,0%) scale(${visible ? '1' : '0'})`,
+  }),
+}
+
+export type TooltipProps = React.PropsWithChildren<{
+  position: TooltipPosition
+  styles?: StylesOf<TooltipComposition>
+  showOn?: 'click' | 'hover'
+  content?: string | ReactNode
+} & ComponentVariants<typeof TooltipPresets>
+>
+const invert = (pos) => {
+  switch (pos) {
+    case 'left':
+      return 'right'
+    case 'right':
+      return 'left'
+    case 'top':
+      return 'bottom'
+    case 'bottom':
+      return 'top'
+  }
+}
+
+export const Tooltip: React.FC<TooltipProps> = (props) => {
+  const {
+    children,
+    position = 'top',
+    styles,
+    variants,
+    responsiveVariants,
+    showOn,
+    content,
+  } = props
+
+  const [isVisible, setVisible] = useBooleanToggle(false)
+
+  const [debouncedVisible] = useDebounce(isVisible, 100)
+  const arrowPos = arrowPositionStyles[invert(position)]
+
+  const variantStyles = useDefaultComponentStyle('Tooltip', {
+    responsiveVariants,
+    variants,
+    styles,
+  })
+
+  const style = {
+    transition: 'transform 0.2s ease',
+    '&:after': {
+      ...variantStyles.arrow,
+      ...arrowPos,
+      transform: arrowPos.transform + ' rotate(45deg)',
+    },
+    ...tooltipPositionStyles[position](10, debouncedVisible),
+    ...variantStyles.bubble,
+  } as CSSObject
+
+  const wrapperRef = useClickOutside(
+    () => {
+      if (isVisible) {
+        setVisible(false)
+      }
+    },
+  )
+
+  if (showOn === 'click') {
+    return (
+      <Touchable
+        onPress={() => setVisible()}
+        ref={wrapperRef}
+        css={variantStyles.wrapper}
+      >
+        <View css={style}>{content}</View>
+        {children}
+      </Touchable>
+    )
+  }
+
+  return (
+    <View onHover={setVisible} ref={wrapperRef} css={variantStyles.wrapper}>
+      <View css={style}>{content}</View>
+      {children}
+    </View>
+  )
+}
+
+export * from './styles'

package/src/components/Tooltip/styles.ts

@@ -0,0 +1,9 @@
+import { createDefaultVariantFactory, includePresets } from "@codeleap/common"
+
+export type TooltipComposition = "wrapper" | "arrow" | "bubble"
+
+const createTooltipStyle = createDefaultVariantFactory<TooltipComposition>()
+
+export const TooltipPresets = includePresets((styles) => createTooltipStyle(() => ({
+  wrapper: styles,
+})) )

package/src/components/Touchable/index.tsx

@@ -0,0 +1,72 @@
+/** @jsx jsx */
+import { AnyFunction, useCodeleapContext } from '@codeleap/common'
+import { jsx, CSSObject } from '@emotion/react'
+
+import React, { ComponentPropsWithRef, ElementType, forwardRef, ReactElement } from 'react'
+import { stopPropagation } from '../../lib'
+import { View } from '../View'
+import { TouchableComposition } from './styles'
+import { StylesOf } from '../../types'
+
+
+export * from './styles'
+
+export type TouchableProps<T extends ElementType = 'button'> = ComponentPropsWithRef<T> & {
+  css?: CSSObject
+  component?: T
+  disabled?: boolean
+  propagate?: boolean
+  onPress?: AnyFunction
+  debugComponent?: string
+  debugName?: string
+  styles?: StylesOf<TouchableComposition>
+}
+
+export const TouchableCP = <T extends ElementType = typeof View>(
+  touchableProps: TouchableProps<T>,
+  ref,
+) => {
+  const {
+    children,
+    propagate = true,
+    component: Component = View,
+    disabled,
+    onPress,
+    onClick,
+    debugComponent,
+    debugName,
+    ...props
+  } = touchableProps
+
+  const { logger } = useCodeleapContext()
+
+  const handleClick = (event: React.MouseEvent<T>) => {
+    if (disabled) return
+
+    if (!propagate) stopPropagation(event)
+
+    if (!onPress) { 
+      logger.warn('No onPress passed to touchable', touchableProps)
+      return
+     }
+
+    logger.log(
+      `<${debugComponent || 'Touchable'}/>  pressed`,
+      { debugName, debugComponent },
+      'User interaction',
+    )
+    onClick?.()
+    onPress && onPress()
+    // logger.log('Touchable pressed', JSON.stringify(touchableProps, null, 2)  ,'Component')
+  }
+
+  return (
+    <View component={Component || 'div'} {...props} onClick={handleClick} ref={ref}>
+      {children}
+    </View>
+  )
+}
+
+export const Touchable = forwardRef(TouchableCP) as <T extends ElementType = typeof View>(
+  touchableProps: TouchableProps<T>
+) => ReactElement

package/src/components/Touchable/styles.ts

@@ -0,0 +1,11 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { StylesOf } from '../../types'
+
+export type TouchableComposition = 'wrapper'
+
+const createTouchableStyle = createDefaultVariantFactory<
+  TouchableComposition
+>()
+
+export const TouchablePresets = includePresets((styles) => createTouchableStyle(() => ({ wrapper: styles })))
+

package/src/components/View/index.tsx

@@ -0,0 +1,94 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  useCodeleapContext,
+  BaseViewProps,
+  useMemo
+} from '@codeleap/common'
+import {
+  ComponentPropsWithRef,
+  ElementType,
+  forwardRef,
+  ReactElement,
+  ReactNode,
+  Ref,
+} from 'react'
+import { ViewPresets } from './styles'
+import { useMediaQuery } from '../../lib/hooks'
+
+export * from './styles'
+
+export type ViewProps<T extends ElementType> = ComponentPropsWithRef<T> &
+  ComponentVariants<typeof ViewPresets> & {
+    component?: T
+    children?: ReactNode
+    css?: any
+    scroll?: boolean
+    debug?: boolean
+  } & BaseViewProps
+
+export const ViewCP = <T extends ElementType = 'div'>(
+  viewProps: ViewProps<T>,
+  ref: Ref<any>,
+) => {
+  const {
+    responsiveVariants = {},
+    variants = [],
+    component: Component = 'div',
+    children,
+    is,
+    not,
+    up,
+    onHover,
+    styles,
+    down,
+    css: cssProp,
+    scroll = false,
+    debug = false,
+    ...props
+  } = viewProps
+  const variantStyles = useDefaultComponentStyle('View', {
+    responsiveVariants,
+    variants,
+    styles,
+  })
+  const { Theme, logger } = useCodeleapContext()
+
+  function handleHover(isMouseOverElement: boolean) {
+    onHover && onHover(isMouseOverElement)
+  }
+
+  const platformMediaQuery = useMemo(() => {
+    return Theme.media.renderToPlatformQuery({
+      is,
+      not,
+      up,
+      down,
+    })
+  }, [is, not, up, down])
+
+  const matches = useMediaQuery(platformMediaQuery)
+
+  if(debug){
+    logger.log('View', {variantStyles, platformMediaQuery, matches})
+  }
+
+  return (
+    <Component
+      // className={cx(css([variantStyles.wrapper, scroll && {overflowY: 'scroll'}, platformMediaQuery]), cssProp)}
+      css={[variantStyles.wrapper, scroll && { overflowY: 'scroll' }, matches && { display: 'none' }]}
+      ref={ref}
+      onMouseEnter={() => handleHover(true)}
+      onMouseLeave={() => handleHover(false)}
+      {...props}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export const View = forwardRef(ViewCP) as <T extends ElementType = 'div'>(
+  props: ViewProps<T>
+) => ReactElement

package/src/components/View/styles.ts

@@ -0,0 +1,8 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type ViewComposition = 'wrapper'
+
+const createViewStyle = createDefaultVariantFactory<ViewComposition>()
+
+export const ViewPresets = includePresets((styles) => createViewStyle(() => ({ wrapper: styles })))
+

package/src/components/components.ts

@@ -0,0 +1,29 @@
+export * from './View'
+export * from './Icon'
+export * from './Touchable'
+export * from './Text'
+export * from './Slider'
+export * from './Scroll'
+export * from './List'
+export * from './ActivityIndicator'
+export * from './Button'
+export * from './Modal'
+export * from './ActionIcon'
+export * from './Checkbox'
+export * from './Collapse'
+export * from './Drawer'
+export * from './Overlay'
+export * from './TextInput'
+export * from './RadioInput'
+export * from './Select'
+export * from './FileInput'
+export * from './Slider'
+export * from './Tooltip'
+export * from './List'
+export * from './Link'
+export * from './LoadingOverlay'
+export * from './InputBase'
+export * from './Switch'
+export * from './NumberIncrement'
+
+export * from './defaultStyles'

package/src/components/defaultStyles.ts

@@ -0,0 +1,51 @@
+import { ViewPresets } from './View/styles'
+import { IconPresets } from './Icon/styles'
+import { TouchablePresets } from './Touchable/styles'
+import { TextPresets } from './Text/styles'
+import { ScrollPresets } from './Scroll/styles'
+import { ActivityIndicatorPresets } from './ActivityIndicator/styles'
+import { ButtonPresets } from './Button/styles'
+import { ActionIconPresets } from './ActionIcon/styles'
+import { ModalPresets } from './Modal/styles'
+import { CheckboxPresets } from './Checkbox/styles'
+import { CollapsePresets } from './Collapse/styles'
+import { DrawerPresets } from './Drawer/styles'
+import { OverlayPresets } from './Overlay/styles'
+import { TextInputPresets } from './TextInput/styles'
+import { RadioInputPresets } from './RadioInput/styles'
+import { SelectPresets } from './Select/styles'
+import { TooltipPresets } from './Tooltip/styles'
+import { ListPresets } from './List/styles'
+import { LinkPresets } from './Link/styles'
+import { SliderPresets } from './Slider/styles'
+import { LoadingOverlayPresets } from './LoadingOverlay/styles'
+import { InputBasePresets } from './InputBase'
+import { SwitchPresets } from './Switch/styles'
+import { NumberIncrementPresets } from './NumberIncrement/styles'
+
+export const defaultStyles = {
+  View: ViewPresets,
+  Icon: IconPresets,
+  Touchable: TouchablePresets,
+  Text: TextPresets,
+  ActivityIndicator: ActivityIndicatorPresets,
+  ActionIcon: ActionIconPresets,
+  Scroll: ScrollPresets,
+  Link: LinkPresets,
+  Button: ButtonPresets,
+  Modal: ModalPresets,
+  Checkbox: CheckboxPresets,
+  Collapse: CollapsePresets,
+  Drawer: DrawerPresets,
+  Overlay: OverlayPresets,
+  TextInput: TextInputPresets,
+  RadioInput: RadioInputPresets,
+  Select: SelectPresets,
+  Tooltip: TooltipPresets,
+  List: ListPresets,
+  Slider: SliderPresets,
+  LoadingOverlay: LoadingOverlayPresets,
+  InputBase: InputBasePresets,
+  Switch: SwitchPresets,
+  NumberIncrement: NumberIncrementPresets
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './components/components'
+export * from './lib/hooks'
+export * from './lib/utils'
+export * from './types/utility'
+export { default as Toast } from './lib/Toast'
+export { CreateOSAlert } from './lib/OSAlert'

package/src/lib/OSAlert.tsx

@@ -0,0 +1,190 @@
+import { AnyFunction, onMount, onUpdate, StyleContextProps, StyleProvider, useBooleanToggle, usePrevious } from '@codeleap/common'
+import { Modal, Text, Button } from '../components/components'
+import ReactDOM from 'react-dom'
+
+type AlertButton = {
+    text: string
+    onPress: AnyFunction
+    variants?: any[]
+}
+
+type OSAlertArgs = {
+  title: string
+  body?: string
+  options?: AlertButton[]
+}
+type AlertEvent = AlertButton['onPress']
+// type OSAlertType = 'info' | 'error' | 'warn' | 'ask'
+type NamedEvents<E extends string> = Partial<Record<E, AlertEvent>>
+type AlertContext = StyleContextProps<any, any>
+function RenderModal(props: {args:OSAlertArgs; contextProps:AlertContext ; removeSelf:AnyFunction}) {
+  const [visible, toggle] = useBooleanToggle(false)
+
+  const previousVisible = usePrevious(visible)
+
+  const { title, body, options = [] } = props.args
+
+  onMount(() => {
+    toggle()
+  })
+
+  onUpdate(() => {
+    if (!visible && previousVisible) {
+      setTimeout(props.removeSelf, 1000)
+    }
+  }, [visible])
+
+  return <StyleProvider {...props.contextProps}>
+    <Modal
+      visible={visible}
+      toggle={toggle}
+      title={title}
+      showClose={false}
+      closable={false}
+      
+      footer={<>
+        {
+          options.map((o, idx) => <Button key={idx} {...o} onPress={() => {
+            o.onPress?.()
+            toggle()
+
+          }}/>)
+        }
+      </>}
+    >
+      <Text text={body || ''} />
+
+    </Modal>
+  </StyleProvider>
+}
+
+const MODAL_ID = '__CODELEAP_MODAL__'
+
+function OSAlert(props:OSAlertArgs & {context: AlertContext}) {
+  if (!document) return
+  let modalDiv = document.getElementById(MODAL_ID)
+  const remove = () => {
+    ReactDOM.unmountComponentAtNode(modalDiv)
+  }
+
+  if (!modalDiv) {
+    modalDiv = document.createElement('div')
+
+    modalDiv.setAttribute('id', MODAL_ID)
+
+    document.body.appendChild(modalDiv)
+  } else {
+    remove()
+  }
+
+  ReactDOM.render(
+    <RenderModal
+      contextProps={props.context}
+      removeSelf={remove}
+      args={props}
+    />, modalDiv,
+  )
+}
+
+export function CreateOSAlert(context: AlertContext) {
+  function ask({ title, body, options }: OSAlertArgs) {
+    if (!title) {
+      title = 'Quick quetion'
+    }
+    OSAlert({
+      context,
+      title,
+      body,
+      options,
+    })
+  }
+
+  function OSError(args: OSAlertArgs & NamedEvents<'onDismiss'>) {
+    let {
+      title,
+      body,
+    } = args
+
+    if (!title) {
+      title = 'Whoops!'
+    }
+    if (!body) {
+      body = 'Something went wrong'
+    }
+    OSAlert({
+      title,
+      context,
+      body,
+      options: [
+        {
+          text: 'OK',
+          onPress: () => {
+
+            args?.onDismiss?.()
+          },
+        },
+      ],
+    })
+  }
+
+  function warn(args: OSAlertArgs & NamedEvents<'onReject' | 'onAccept'>) {
+    const {
+      title = 'Hang on',
+      body = 'Are you sure?',
+      onAccept,
+      onReject = () => null,
+    } = args
+
+    OSAlert({
+      context,
+      title,
+      body,
+      options: [
+        {
+          text: 'Cancel',
+          onPress: () => {
+
+            onReject()
+          },
+        },
+        {
+          text: 'OK',
+          onPress: () => {
+
+            onAccept?.()
+          },
+        },
+      ],
+    })
+  }
+
+  function info(args: OSAlertArgs & NamedEvents<'onDismiss'>) {
+
+    const {
+      title = 'FYI',
+      body,
+      onDismiss = () => null,
+    } = args
+
+    OSAlert({
+      context,
+      title,
+      body,
+      options: [
+        {
+          text: 'OK',
+          onPress: () => {
+
+            onDismiss?.()
+          },
+        },
+      ],
+    })
+  }
+  return {
+    ask,
+    warn,
+    info,
+    error: OSError,
+  }
+}

package/src/lib/Toast.ts

@@ -0,0 +1,23 @@
+import { toast } from 'react-toastify'
+
+type ToastArgs = {
+  title:string
+} &Parameters<typeof toast.info>[1]
+
+function info({ title, ...others }:ToastArgs) {
+  toast.info(title, others)
+}
+
+function success({ title, ...others }:ToastArgs) {
+  toast.success(title, others)
+}
+
+function error({ title, ...others }:ToastArgs) {
+  toast.error(title, others)
+}
+
+export default {
+  info,
+  success,
+  error,
+}