@codeleap/web 3.1.1 → 3.2.1

package/src/components/Touchable/index.tsx

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

package/src/components/View/index.tsx

@@ -1,38 +1,45 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react'
+import { jsx, CSSObject } from '@emotion/react'
 import {
   ComponentVariants,
   useDefaultComponentStyle,
   useCodeleapContext,
+  useMemo,
+  BreakpointPlaceholder,
   BaseViewProps,
-  useMemo
+
+  TypeGuards,
 } from '@codeleap/common'
 import {
-  ComponentPropsWithRef,
-  ElementType,
   forwardRef,
-  ReactElement,
-  ReactNode,
   Ref,
 } from 'react'
 import { ViewPresets } from './styles'
 import { useMediaQuery } from '../../lib/hooks'
+import { HTMLProps, NativeHTMLElement } from '../../types'
 
 export * from './styles'
 
-export type ViewProps<T extends ElementType> = ComponentPropsWithRef<T> &
-  ComponentVariants<typeof ViewPresets> & {
+export type ViewProps<T extends NativeHTMLElement> =
+  HTMLProps<T> &
+  ComponentVariants<typeof ViewPresets> &
+   {
     component?: T
-    children?: ReactNode
-    css?: any
     scroll?: boolean
+    debugName?: string
     debug?: boolean
+    is?: BreakpointPlaceholder
+    not?: BreakpointPlaceholder
+    up?: BreakpointPlaceholder
+    down?: BreakpointPlaceholder
+    onHover?: (isMouseOverElement: boolean) => void
   } & BaseViewProps
 
-export const ViewCP = <T extends ElementType = 'div'>(
-  viewProps: ViewProps<T>,
+export const ViewCP = (
+  viewProps: ViewProps<'div'>,
   ref: Ref<any>,
 ) => {
+
   const {
     responsiveVariants = {},
     variants = [],
@@ -42,22 +49,26 @@ export const ViewCP = <T extends ElementType = 'div'>(
     not,
     up,
     onHover,
-    styles,
+    debugName,
     down,
-    css: cssProp,
     scroll = false,
     debug = false,
+    style,
+    css = [],
     ...props
   } = viewProps
-  const variantStyles = useDefaultComponentStyle('View', {
+
+  const variantStyles = useDefaultComponentStyle<'u:View', typeof ViewPresets>('u:View', {
     responsiveVariants,
     variants,
-    styles,
+    styles: { wrapper: style },
+    rootElement: 'wrapper',
   })
+
   const { Theme, logger } = useCodeleapContext()
 
   function handleHover(isMouseOverElement: boolean) {
-    onHover && onHover(isMouseOverElement)
+    onHover?.(isMouseOverElement)
   }
 
   const platformMediaQuery = useMemo(() => {
@@ -71,17 +82,30 @@ export const ViewCP = <T extends ElementType = 'div'>(
 
   const matches = useMediaQuery(platformMediaQuery)
 
-  if(debug){
-    logger.log('View', {variantStyles, platformMediaQuery, matches})
+  const componentStyles = useMemo(() => {
+    return [
+      variantStyles.wrapper,
+      scroll && { overflowY: 'scroll' },
+      matches && { display: 'none' },
+      style,
+      css,
+    ]
+  }, [scroll, matches, css])
+
+  const onHoverProps = TypeGuards.isFunction(onHover) && {
+    onMouseEnter: () => handleHover(true),
+    onMouseLeave: () => handleHover(false),
+  }
+
+  if (debug) {
+    logger.log(debugName, { componentStyles, platformMediaQuery, matches })
   }
 
   return (
     <Component
-      // className={cx(css([variantStyles.wrapper, scroll && {overflowY: 'scroll'}, platformMediaQuery]), cssProp)}
-      css={[variantStyles.wrapper, scroll && { overflowY: 'scroll' }, matches && { display: 'none' }]}
+      css={componentStyles}
       ref={ref}
-      onMouseEnter={() => handleHover(true)}
-      onMouseLeave={() => handleHover(false)}
+      {...onHoverProps}
       {...props}
     >
       {children}
@@ -89,6 +113,6 @@ export const ViewCP = <T extends ElementType = 'div'>(
   )
 }
 
-export const View = forwardRef(ViewCP) as <T extends ElementType = 'div'>(
+export const View = forwardRef(ViewCP) as unknown as <T extends NativeHTMLElement = 'div'>(
   props: ViewProps<T>
-) => ReactElement
+) => JSX.Element

package/src/components/View/styles.ts

@@ -5,4 +5,3 @@ export type ViewComposition = 'wrapper'
 const createViewStyle = createDefaultVariantFactory<ViewComposition>()
 
 export const ViewPresets = includePresets((styles) => createViewStyle(() => ({ wrapper: styles })))
-

package/src/components/components.ts

@@ -20,10 +20,10 @@ 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 './SegmentedControl'
+export * from './Pager'
 export * from './defaultStyles'

package/src/components/defaultStyles.ts

@@ -16,12 +16,13 @@ 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'
+import { SegmentedControlPresets } from './SegmentedControl/styles'
+import { PagerPresets } from './Pager/styles'
 
 export const defaultStyles = {
   View: ViewPresets,
@@ -31,7 +32,7 @@ export const defaultStyles = {
   ActivityIndicator: ActivityIndicatorPresets,
   ActionIcon: ActionIconPresets,
   Scroll: ScrollPresets,
-  Link: LinkPresets,
+
   Button: ButtonPresets,
   Modal: ModalPresets,
   Checkbox: CheckboxPresets,
@@ -47,5 +48,17 @@ export const defaultStyles = {
   LoadingOverlay: LoadingOverlayPresets,
   InputBase: InputBasePresets,
   Switch: SwitchPresets,
-  NumberIncrement: NumberIncrementPresets
+  NumberIncrement: NumberIncrementPresets,
+  SegmentedControlPresets: SegmentedControlPresets,
+  Pager: PagerPresets,
 }
+
+import createCache from '@emotion/cache'
+
+export const createCodeleapWebCache = () => {
+  return createCache({
+    key: 'codeleap-web',
+  })
+}
+
+export const codeleapWebCache = createCodeleapWebCache()

package/src/lib/OSAlert.tsx

@@ -44,7 +44,7 @@ function RenderModal(props: {args:OSAlertArgs; contextProps:AlertContext ; remov
       
       footer={<>
         {
-          options.map((o, idx) => <Button key={idx} {...o} onPress={() => {
+          options.map((o, idx) => <Button debugName={`OSAlert ${title}`} key={idx} {...o} onPress={() => {
             o.onPress?.()
             toggle()
 

package/src/types/utility.ts

@@ -1,3 +1,32 @@
-import { CSSInterpolation, CSSObject } from '@emotion/css'
+import React, { InputHTMLAttributes } from 'react'
+import { CSSInterpolation } from '@emotion/css'
+import { PropsOf } from '@codeleap/common'
 
-export type StylesOf<C extends string> = Partial<Record<C, CSSInterpolation | CSSInterpolation[]>>
+export type StylesOf<C extends string> = Partial<Record<C, CSSInterpolation>>
+
+type WithChildren<T> = T & { children?: React.ReactNode }
+
+// You're right, this is not standard or very clean. But for some reason all the types provided by ComponentPropsWithoutRef<T> become any when imported outside the package, while this keeps working.
+// It's important that the elements used are defined explicitly, otherwise typescript will throw JavascriptHeapOutOfMemory when building the package.
+export type ElementMap = {
+  'select': WithChildren<JSX.IntrinsicElements['select']>
+  'input': WithChildren<JSX.IntrinsicElements['input']>
+  'textarea': WithChildren<JSX.IntrinsicElements['textarea']>
+  'button': WithChildren<JSX.IntrinsicElements['button']>
+  'form': WithChildren<JSX.IntrinsicElements['form']>
+  'label': WithChildren<JSX.IntrinsicElements['label']>
+  'a': WithChildren<JSX.IntrinsicElements['a']>
+  'img': WithChildren<JSX.IntrinsicElements['img']>
+  'div': WithChildren<JSX.IntrinsicElements['div']>
+  'span': WithChildren<JSX.IntrinsicElements['span']>
+  'p': WithChildren<JSX.IntrinsicElements['p']>
+  'section': WithChildren<JSX.IntrinsicElements['section']>
+  'header': WithChildren<JSX.IntrinsicElements['header']>
+  'footer': WithChildren<JSX.IntrinsicElements['footer']>
+}
+
+export type NativeHTMLElement = keyof ElementMap
+
+export type HTMLProps<T extends NativeHTMLElement> = ElementMap[T]
+
+export type ComponentWithDefaultProps<P> = ((props: P) => JSX.Element) & { defaultProps?: Partial<P> }

package/src/components/Link/index.tsx

@@ -1,69 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-import { ComponentVariants, useCodeleapContext, useDefaultComponentStyle } from '@codeleap/common'
-import { ElementType } from 'react'
-import { scrollToElem } from '../../lib/utils/pollyfils/scroll'
-import { stopPropagation } from '../../lib/utils/stopPropagation'
-import { Text, TextProps } from '../Text'
-import { LinkComposition, LinkPresets } from './styles'
-import { StylesOf } from '../..'
-
-export type LinkProps<T extends ElementType> = TextProps<T> & {
-  openNewTab?: boolean
-  onScroll?: (to: string) => any
-  styles?: StylesOf<LinkComposition>
-} & ComponentVariants<typeof LinkPresets>
-
-export const Link = <T extends ElementType = 'a'>(linkProps: LinkProps<T>) => {
-  const { to, openNewTab, component = 'a', onScroll = null, responsiveVariants, variants, styles, ...props } = linkProps
-
-  const isExternal = ['http', 'tel', 'mailto'].some((start) => to.startsWith(start),
-  )
-
-  const Component = isExternal ? 'a' : component
-  const { logger } = useCodeleapContext()
-
-  function handleClick(event: React.MouseEvent) {
-    logger.log('Link pressed', { to, text: linkProps.text }, 'Component')
-    if (to) {
-      if (to.startsWith('#')) {
-        event.preventDefault()
-        stopPropagation(event)
-        if (onScroll) {
-          onScroll(to)
-          return
-        }
-        scrollToElem(to)
-      }
-      if (openNewTab) {
-        event.preventDefault()
-        window?.open?.(to, '_blank')
-        return false
-      }
-    }
-  }
-
-  const linkPropOverride = {
-    [isExternal ? 'href' : 'to']: to,
-  }
-
-  const variantStyles = useDefaultComponentStyle<'u:Link', typeof LinkPresets>('u:Link', {
-    responsiveVariants,
-    variants,
-    rootElement: 'text',
-    styles,
-    
-  })
-
-  return (
-    <Text
-      component={Component}
-      {...props}
-      {...linkPropOverride}
-      style={variantStyles.text}
-      onClick={handleClick}
-    />
-  )
-}
-
-export * from './styles'

package/src/components/Link/styles.ts

@@ -1,11 +0,0 @@
-import { createDefaultVariantFactory, includePresets } from "@codeleap/common"
-import { TextComposition } from "../Text"
-
-
-export type LinkComposition = TextComposition
-
-
-
-const createLinkStyle = createDefaultVariantFactory<LinkComposition>()
-
-export const LinkPresets = includePresets((styles) => createLinkStyle(() => ({ text: styles })))