@tamagui/core 1.0.0-alpha.7 → 1.0.0-beta.0

package/src/helpers/extendStaticConfig.ts

@@ -1,68 +0,0 @@
-import React from 'react'
-
-import { StaticComponent, StaticConfig, StaticConfigParsed } from '../types'
-import { createPropMapper } from './createPropMapper'
-
-export function extendStaticConfig(
-  // can be undefined when loading with @tamagui/fake-react-native
-  // could be fixed a bit cleaner
-  Component?: StaticComponent | React.Component<any>,
-  config: StaticConfig = {}
-): StaticConfigParsed | null {
-  const parent = (Component || {}) as any
-  if (!parent.staticConfig) {
-    // if no static config, we are extending an external component
-    parent.staticConfig = {
-      Component,
-    }
-  }
-
-  const variants = {
-    ...parent.staticConfig.variants,
-  }
-
-  // merge variants without clobbering previous... can we tho (typed??
-  if (config.variants) {
-    for (const key in config.variants) {
-      if (variants[key]) {
-        variants[key] = {
-          ...variants[key],
-          ...config.variants[key],
-        }
-      } else {
-        variants[key] = config.variants[key]
-      }
-    }
-  }
-
-  return parseStaticConfig({
-    ...parent.staticConfig,
-    isZStack: config.isZStack || parent.staticConfig.isZStack,
-    variants,
-    isText: config.isText || parent.staticConfig.isText || false,
-    neverFlatten: config.neverFlatten ?? parent.staticConfig.neverFlatten,
-    ensureOverriddenProp: config.ensureOverriddenProp ?? parent.staticConfig.ensureOverriddenProp,
-    validStyles: config.validStyles
-      ? {
-          ...parent.staticConfig.validStyles,
-          ...config.validStyles,
-        }
-      : parent.staticConfig.validStyles,
-    validPropsExtra: {
-      ...parent.staticConfig.validPropsExtra,
-      ...config.validPropsExtra,
-    },
-    defaultProps: {
-      ...parent.staticConfig.defaultProps,
-      ...config.defaultProps,
-    },
-  })
-}
-
-export const parseStaticConfig = (config: StaticConfig): StaticConfigParsed => {
-  return {
-    ...config,
-    parsed: true,
-    propMapper: createPropMapper(config),
-  }
-}

package/src/helpers/fixNativeShadow.native.tsx

@@ -1,27 +0,0 @@
-const matchRgba =
-  /rgba\(\s*([\d\.]{1,})\s*,\s*([\d\.]{1,})\s*,\s*([\d\.]{1,})\s*,\s*([\d\.]{1,})\s*\)$/
-
-export function fixNativeShadow(props: any) {
-  if (props.shadowColor) {
-    if (!!!('shadowOffset' in props)) {
-      // fixes some broken shadows
-      props.shadowOffset = {
-        width: 0,
-        height: 0,
-      }
-    }
-    if (!!!('shadowOpacity' in props)) {
-      const c = `${props.shadowColor}`
-      // react native has issues sometimes with rgba()
-      if (c[0] === 'r' && c[3] === 'a') {
-        const [_, r, g, b, a] = c.match(matchRgba) || []
-        if (typeof a !== 'string') {
-          console.warn('non valid rgba', c)
-          return props
-        }
-        props.shadowColor = `rgb(${r},${g},${b})`
-        props.shadowOpacity = +a
-      }
-    }
-  }
-}

package/src/helpers/fixNativeShadow.tsx

@@ -1,2 +0,0 @@
-// only native of course
-export const fixNativeShadow = (a: any) => {}

package/src/helpers/getSplitStyles.tsx

@@ -1,197 +0,0 @@
-import {
-  AllRules,
-  stylePropsText,
-  stylePropsTransform,
-  validStyles,
-  validStylesPseudo,
-} from '@tamagui/helpers'
-import { ViewStyle } from 'react-native'
-
-import { isWeb } from '../constants/platform'
-import { mediaQueryConfig } from '../hooks/useMedia'
-import { StaticConfigParsed, ThemeObject } from '../types'
-import { createMediaStyle } from './createMediaStyle'
-import { fixNativeShadow } from './fixNativeShadow'
-import { getStylesAtomic } from './getStylesAtomic'
-import { insertStyleRule } from './insertStyleRule'
-
-export type SplitStyles = ReturnType<typeof getSplitStyles>
-
-// TODO run over this, should be able to cut it down quite a bit
-
-export const getSplitStyles = (
-  props: { [key: string]: any },
-  staticConfig: StaticConfigParsed,
-  theme: ThemeObject,
-  isSplittingDefaultProps?: boolean
-) => {
-  const validStyleProps = staticConfig.isText ? stylePropsText : validStyles
-  const viewProps: Record<string, any> = {}
-  const style: any[] = []
-
-  let pseudos: { hoverStyle?: ViewStyle; pressStyle?: ViewStyle } | null = null
-  let cur: ViewStyle | null = null
-  let classNames: string[] | null = null
-
-  for (const keyInit in props) {
-    // be sure to sync next few lines below to getSubStyle (*1)
-    const valInit = props[keyInit]
-
-    // media
-    if (keyInit[0] === '$') {
-      const mediaKey = keyInit.slice(1)
-
-      if (!mediaQueryConfig[mediaKey]) {
-        // this isn't a media key, pass through
-        viewProps[keyInit] = valInit
-        continue
-      }
-
-      // dont check if media is active, we just apply *all* media styles
-      // we combine the media props on top regular props, could proxy this
-      // TODO test proxy here instead of merge
-      const mediaProps = { ...props, ...valInit }
-      // TODO media + hover
-      const mediaStyle = getSubStyle(valInit, staticConfig, theme, props)
-      const mediaStyles = getStylesAtomic(mediaStyle)
-      if (process.env.NODE_ENV === 'development') {
-        if (props['debug']) {
-          console.log('mediaStyles', keyInit, { mediaProps, mediaStyle, mediaStyles })
-        }
-      }
-      for (const style of mediaStyles) {
-        if (isWeb) {
-          const out = createMediaStyle(style, mediaKey, mediaQueryConfig)
-          classNames = classNames || []
-          classNames.push(out.identifier)
-          AllRules.add(out.styleRule)
-          insertStyleRule(out.styleRule)
-          if (process.env.NODE_ENV === 'development' && props['debug']) {
-            console.log('mediaProp', style.identifier, out, mediaProps, mediaStyle, mediaStyles)
-          }
-        } else {
-          console.log('TODO native media style logic')
-        }
-      }
-      continue
-    }
-
-    // pseudo
-    if (validStylesPseudo[keyInit]) {
-      if (!valInit) continue
-      pseudos = pseudos || {}
-      pseudos[keyInit] = getSubStyle(valInit, staticConfig, theme, props)
-      continue
-    }
-
-    const out = staticConfig.propMapper(keyInit, valInit, theme, props)
-
-    const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out)
-
-    for (const [key, val] of expanded) {
-      // const val = valueMap(valInit) ?? valInit
-      const keyFirstChar = key[0]
-      if (key === 'style' || (keyFirstChar === '_' && key.startsWith('_style'))) {
-        if (cur) {
-          // process last
-          fixNativeShadow(cur)
-          style.push(cur)
-          cur = null
-        }
-        fixNativeShadow(val)
-        style.push(val)
-        continue
-      }
-      // expand flex so it merged with flexShrink etc properly
-      // TODO this shouldn't be here...
-      if (key === 'flex') {
-        cur = cur || {}
-        // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex
-        // TODO this fixed a behavior but need to find / document / test
-        Object.assign(cur, {
-          flexGrow: val,
-          flexShrink: 1,
-        })
-        continue
-      }
-      if (!isWeb && key === 'pointerEvents') {
-        viewProps[key] = val
-        continue
-      }
-      if (validStyleProps[key]) {
-        // transforms
-        if (key in stylePropsTransform) {
-          cur = cur || {}
-          mergeTransform(cur, key, val)
-          continue
-        }
-        cur = cur || {}
-        cur[key] = val
-        continue
-      }
-
-      // pass to view props
-      if (!staticConfig.variants || !(key in staticConfig.variants)) {
-        viewProps[key] = val
-      }
-    }
-  }
-  // push last style
-  if (cur) {
-    fixNativeShadow(cur)
-    style.push(cur)
-  }
-
-  if (process.env.NODE_ENV === 'development') {
-    if (props['debug']) {
-      console.log(' 🥚 splitProps:', { props, viewProps, style })
-    }
-  }
-
-  return {
-    viewProps,
-    style,
-    pseudos,
-    classNames,
-  }
-}
-
-const getSubStyle = (
-  styleIn: Object,
-  staticConfig: StaticConfigParsed,
-  theme: ThemeObject,
-  props: any
-): ViewStyle => {
-  const styleOut: ViewStyle = {}
-  for (const key in styleIn) {
-    // be sure to sync next few lines below to loop above (*1)
-    const val = styleIn[key]
-    const out = staticConfig.propMapper(key, val, theme, props)
-    const expanded = out === true || !out ? [[key, val]] : Object.entries(out)
-    for (const [skey, sval] of expanded) {
-      // const sval = valueMap(valInit)
-      if (skey in stylePropsTransform) {
-        mergeTransform(styleOut, skey, sval)
-      } else {
-        styleOut[skey] = sval
-      }
-    }
-  }
-  fixNativeShadow(styleOut)
-  return styleOut
-}
-
-const mapTransformKeys = {
-  x: 'translateX',
-  y: 'translateY',
-}
-
-const mergeTransform = (obj: ViewStyle, key: string, val: any) => {
-  const transform: any[] = obj.transform
-    ? Array.isArray(obj.transform)
-      ? obj.transform
-      : [obj.transform]
-    : []
-  transform.push({ [mapTransformKeys[key] || key]: val })
-  obj.transform = transform
-}

package/src/helpers/getStylesAtomic.native.ts

@@ -1,3 +0,0 @@
-export function getStylesAtomic() {
-  console.warn('no-op native')
-}

package/src/helpers/getStylesAtomic.ts

@@ -1,103 +0,0 @@
-import { AllRules, StyleObject } from '@tamagui/helpers'
-import { ViewStyle } from 'react-native'
-
-import { pseudos } from '../constants/pseudos'
-import { rnw } from '../constants/rnw'
-
-const generateStyle = (style: any) => {
-  const { atomic, createCompileableStyle, createReactDOMStyle, i18Style } = rnw
-  return {
-    ...atomic(createCompileableStyle(createReactDOMStyle(i18Style(style)))),
-  }
-}
-
-const borderDefaults = {
-  borderWidth: 'borderStyle',
-  borderBottomWidth: 'borderBottomStyle',
-  borderTopWidth: 'borderTopStyle',
-  borderLeftWidth: 'borderLeftStyle',
-  borderRightWidth: 'borderRightStyle',
-}
-
-export function getStylesAtomic(style: any, avoidCollection = false) {
-  const styles: { [key: string]: ViewStyle } = {
-    base: {},
-  }
-  // split pseudos
-  for (const key in style) {
-    if (!!pseudos[key]) {
-      styles[key] = style[key]
-    } else {
-      styles.base[key] = style[key]
-    }
-  }
-  return Object.keys(styles)
-    .map((key) => {
-      return getAtomicStyle(styles[key], pseudos[key], avoidCollection)
-    })
-    .flat()
-}
-
-const importantRegex = /\!important*/g
-
-function getAtomicStyle(
-  style: ViewStyle,
-  pseudo?: { name: string; priority: number },
-  avoidCollection?: boolean
-): StyleObject[] {
-  if (style == null || typeof style !== 'object') {
-    throw new Error(`Wrong style type: "${typeof style}": ${style}`)
-  }
-
-  // why is this diff from react-native-web!? need to figure out
-  for (const key in borderDefaults) {
-    if (key in style) {
-      style[borderDefaults[key]] = style[borderDefaults[key]] ?? 'solid'
-    }
-  }
-
-  const all = generateStyle(style)
-  return Object.keys(all).map((key) => {
-    const val = all[key]
-    const hash = val.identifier.slice(`${val.identifier}`.lastIndexOf('-') + 1)
-    // pseudos have a `--` to be easier to find with concatClassNames
-    const psuedoPrefix = pseudo ? `-${pseudo.name}-` : ''
-    const identifier = `_${val.property}-${psuedoPrefix}${hash}`
-    const className = `.${identifier}`
-    const rules = val.rules.map((rule) => {
-      if (pseudo) {
-        const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ':root').join('') + ' '
-        let res = rule
-          .replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`)
-          .replace('{', `:${pseudo.name}{`)
-
-        if (pseudo.name === 'hover') {
-          // hover styles need to be conditional
-          // perhaps this can be generalized but for now lets just shortcut
-          // and hardcode for hover styles, if we need to later we can
-          // WEIRD SYNTAX, SEE:
-          //   https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover
-          res = `@media not all and (hover: none) { ${res} }`
-        }
-        return res
-      }
-      return rule.replace(`.${val.identifier}`, className).replace(importantRegex, '')
-    })
-
-    if (!avoidCollection) {
-      if (rules.length > 1) {
-        console.warn('have never seen more than one, verifying')
-      }
-      AllRules.add(rules[0])
-    }
-
-    const result: StyleObject = {
-      property: val.property,
-      value: val.value,
-      identifier,
-      className,
-      rules,
-    }
-    return result
-  })
-}

package/src/helpers/insertStyleRule.tsx

@@ -1,18 +0,0 @@
-import { isWeb } from '../constants/platform'
-
-export function insertStyleRule(rule: string) {
-  if (typeof window === 'undefined') {
-    return
-  }
-  if (process.env.NODE_ENV === 'development') {
-    if (!isWeb) {
-      console.warn('non web platform, dont use this')
-      return
-    }
-  }
-  const sheet = window.document.styleSheets[0]
-  if (!sheet) {
-    return
-  }
-  sheet.insertRule(rule, sheet.cssRules.length)
-}

package/src/helpers/isObj.ts

@@ -1 +0,0 @@
-export const isObj = (x: any) => x && !Array.isArray(x) && typeof x === 'object'

package/src/helpers/isTamaguiElement.tsx

@@ -1,5 +0,0 @@
-import React, { isValidElement } from 'react'
-
-export const isTamaguiElement = (child: any): child is React.ReactElement => {
-  return isValidElement(child) && !!child.type['staticConfig']?.parsed
-}

package/src/helpers/matchMedia.native.ts

@@ -1,3 +0,0 @@
-import MediaQueryList from '@expo/match-media/build/MediaQueryList.js'
-
-export const matchMedia = (media: string) => new MediaQueryList(media)

package/src/helpers/matchMedia.ts

@@ -1,9 +0,0 @@
-export const matchMedia =
-  (typeof window !== 'undefined' && window.matchMedia) ||
-  (function matchMediaFallback(query: string) {
-    return {
-      addListener() {},
-      removeListener() {},
-      matches: false,
-    }
-  } as any)

package/src/helpers/themeable.tsx

@@ -1,42 +0,0 @@
-import React, { ReactElement, forwardRef } from 'react'
-
-import { Theme } from '../views/Theme'
-import { ThemeInverse } from '../views/ThemeInverse'
-
-export type ThemeableProps = {
-  theme?: string | null
-  themeInverse?: boolean
-}
-
-export const themeable: ThemeableHOC = function graphql<
-  R extends ReactElement<any, any> | null,
-  P extends ThemeableProps = {}
->(component: (props: P) => R) {
-  const withThemeComponent = forwardRef(function WithTheme({ themeInverse, ...rest }: P, ref) {
-    const el = React.createElement(component, { ...rest, ref } as any) as R
-    if (themeInverse) {
-      return (<ThemeInverse>{el}</ThemeInverse>) as R
-    }
-    if (rest.theme) {
-      return (<Theme name={rest.theme || null}>{el}</Theme>) as R
-    }
-    return el
-  })
-
-  const withTheme: {
-    (props: P): R
-    displayName: string
-  } = withThemeComponent as any
-
-  withTheme.displayName = `Themed(${
-    (component as any)?.displayName || (component as any)?.name || 'Anonymous'
-  })`
-
-  return withTheme
-}
-
-export interface ThemeableHOC {
-  <R extends ReactElement<any, any> | null, P extends ThemeableProps = {}>(
-    component: (props: P) => R
-  ): (props: P) => R
-}

package/src/helpers/validate.ts

@@ -1,59 +0,0 @@
-// published a patched version that works on native
-import ow from '@tamagui/ow'
-
-export const validateConfig = (conf: any) => {
-  if (!conf) {
-    console.warn('no conf?')
-    return
-  }
-  try {
-    ow(conf, validConfig)
-  } catch (err: any) {
-    console.log('Given config:\n', JSON.stringify(conf, null, 2))
-    throw err
-  }
-}
-
-const validConfig = ow.object.exactShape({
-  defaultTheme: ow.optional.string,
-  disableRootThemeClass: ow.optional.boolean,
-  shorthands: ow.optional.object.valuesOfType(ow.string),
-  themes: ow.object.valuesOfType(ow.object),
-  tokens: ow.object.valuesOfType(ow.object),
-  media: ow.object.valuesOfType(ow.object),
-})
-
-const validFont = ow.object.exactShape({
-  family: ow.string,
-  size: ow.object.nonEmpty.valuesOfType(ow.number),
-  lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
-  weight: ow.object.nonEmpty.valuesOfType(ow.string),
-  letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number),
-})
-
-const validTokens = ow.object.exactShape({
-  font: ow.object.valuesOfType(validFont),
-  size: ow.object.nonEmpty.valuesOfType(ow.number),
-  space: ow.object.nonEmpty.valuesOfType(ow.number),
-  zIndex: ow.object.nonEmpty.valuesOfType(ow.number),
-  radius: ow.object.nonEmpty.valuesOfType(ow.number),
-  color: ow.object.nonEmpty.valuesOfType(ow.string),
-})
-
-export const validateTokens = (tokens: any) => {
-  try {
-    ow(tokens, validTokens)
-  } catch (err: any) {
-    console.log('Given tokens:\n', JSON.stringify(tokens, null, 2))
-    throw err
-  }
-}
-
-export const validateFont = (font: any) => {
-  try {
-    ow(font, validFont)
-  } catch (err: any) {
-    console.log('Given font:\n', JSON.stringify(font, null, 2))
-    throw err
-  }
-}

package/src/hooks/useConstant.tsx

@@ -1,10 +0,0 @@
-import { useRef } from 'react'
-
-type ResultBox<T> = { v: T }
-export function useConstant<T>(fn: () => T): T {
-  const ref = useRef<ResultBox<T>>()
-  if (!ref.current) {
-    ref.current = { v: fn() }
-  }
-  return ref.current.v
-}

package/src/hooks/useFeatures.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-
-import { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
-import { addMediaQueryListener, removeMediaQueryListener } from './useMedia'
-
-// only needed on native
-// dynamic loading of features to avoid heavy views
-
-const createDefinition = ({ Component, propNames }: { Component; propNames: string[] }) => ({
-  isEnabled: (props: any) => propNames.some((name) => !!props[name]),
-  Component,
-})
-
-const mediaQueryPropNames = [
-  '$xs',
-  '$sm',
-  '$md',
-  '$lg',
-  '$xl',
-  '$xxl',
-  '$pointerCoarse',
-  '$hoverNone',
-  '$tall',
-  '$short',
-  '$gtSm',
-  '$notXs',
-  '$gtMd',
-  '$gtLg',
-]
-
-const featureDefinitions = {
-  measureLayout: createDefinition({
-    Component: (props) => {
-      console.log('measure', props)
-      return null
-    },
-    propNames: ['onLayout'],
-  }),
-
-  // will update the parent whenever media query changes
-  mediaQuery: createDefinition({
-    Component: (props) => {
-      if (isWeb) {
-        // no need for media queries are inserted and run in css
-        return
-      }
-
-      const keys = mediaQueryPropNames.flatMap((x) => (x in props ? x.slice(1) : []))
-      useIsomorphicLayoutEffect(() => {
-        for (const key of keys) {
-          addMediaQueryListener(key, props._utils.forceUpdate)
-        }
-        return () => {
-          for (const key of keys) {
-            removeMediaQueryListener(key, props._utils.forceUpdate)
-          }
-        }
-      }, [keys.join(',')])
-      return null
-    },
-    propNames: mediaQueryPropNames,
-  }),
-}
-
-const featureNames = Object.keys(featureDefinitions)
-const numFeatures = featureNames.length
-
-export const useFeatures = (props: any, utils?: { forceUpdate?: Function }) => {
-  const features: JSX.Element[] = []
-  for (let i = 0; i < numFeatures; i++) {
-    const name = featureNames[i]
-    const { isEnabled, Component } = featureDefinitions[name] as any //FeatureDefinition
-    if (isEnabled(props) && Component) {
-      features.push(<Component key={name} {...props} _utils={utils} />)
-    }
-  }
-  return features
-}