@tamagui/core 1.0.0-alpha.0

package/src/types.tsx

@@ -0,0 +1,561 @@
+import React, { RefObject } from 'react'
+import { TextProps as ReactTextProps, TextStyle } from 'react-native'
+import { GestureResponderEvent, View, ViewProps, ViewStyle } from 'react-native'
+
+import { Variable } from './createVariable'
+import { ThemeProviderProps } from './views/ThemeProvider'
+
+// to prevent things from going circular, hoisting some types in this file
+// to generally order them as building up towards TamaguiConfig
+
+export interface CreateTokens<Val extends number | string | Variable = number | string | Variable> {
+  font: { [key: string]: GenericFont }
+  color: { [key: string]: Val }
+  space: { [key: string]: Val }
+  size: { [key: string]: Val }
+  radius: { [key: string]: Val }
+  zIndex: { [key: string]: Val }
+}
+
+type GenericTokens = CreateTokens
+type GenericThemes = {
+  [key: string]: {
+    // defined for our tamagui kit , we could do this inside `tamagui`
+    // but maybe helpful to have some sort of universally shared things +
+    // + enforce if they want their own, redefine in their design sys
+    bg: string | Variable
+    bg2: string | Variable
+    bg3: string | Variable
+    bg4: string | Variable
+    color: string | Variable
+    color2: string | Variable
+    color3: string | Variable
+    color4: string | Variable
+    borderColor: string | Variable
+    borderColor2: string | Variable
+    shadowColor: string | Variable
+    shadowColor2: string | Variable
+  }
+}
+type GenericShorthands = {}
+type GenericMedia<K extends string = string> = {
+  // name => media shorthand name (camelCase) => value
+  [key in K]: {
+    [key: string]: number | string
+  }
+}
+
+// this is the "main" typed object, which users re-define
+// (internal) keep all types directly on this object and reference them from elsewhere
+//
+// const config = createTamagui(...)
+// type MyConfig = typeof config
+// declare module 'tamagui' {
+//   export interface TamaguiCustomConfig extends MyConfig {}
+// }
+// now your whole app/kit should be typed correctly
+//
+export interface TamaguiCustomConfig {}
+
+export interface TamaguiConfig
+  extends Omit<GenericTamaguiConfig, keyof TamaguiCustomConfig>,
+    TamaguiCustomConfig {}
+
+export type CreateTamaguiConfig<
+  A extends GenericTokens,
+  B extends GenericThemes,
+  C extends GenericShorthands,
+  D extends GenericMedia
+> = Partial<Pick<ThemeProviderProps, 'defaultTheme' | 'disableRootThemeClass'>> & {
+  tokens: A
+  themes: B
+  shorthands: C
+  media: D
+}
+
+// for use in creation functions so it doesnt get overwrtitten
+export type GenericTamaguiConfig = CreateTamaguiConfig<
+  GenericTokens,
+  GenericThemes,
+  GenericShorthands,
+  GenericMedia
+>
+
+// since TamaguiConfig will be re-declared, these will all be typed globally
+export type ThemeObject = TamaguiConfig['themes'][keyof TamaguiConfig['themes']]
+export type Tokens = TamaguiConfig['tokens']
+export type Shorthands = TamaguiConfig['shorthands']
+export type Media = TamaguiConfig['media']
+export type Themes = TamaguiConfig['themes']
+// themes
+export type ThemeName = keyof Themes extends `${infer Prefix}-light`
+  ? Prefix | keyof Themes
+  : keyof Themes
+export type ThemeKeys = keyof ThemeObject
+export type ThemeKeyVariables = `$${ThemeKeys}`
+// export type Spaces = TamaguiConfig['tokens']['spaces'][keyof TamaguiConfig['tokens']['spaces']]
+// export type FontSizes = TamaguiConfig['tokens']['fontSizes'][keyof TamaguiConfig['tokens']['fontSizes']]
+// export type Colors = TamaguiConfig['tokens']['colors'][keyof TamaguiConfig['tokens']['colors']]
+
+// this is the config generated via createTamagui()
+export type TamaguiInternalConfig<
+  A extends GenericTokens = GenericTokens,
+  B extends GenericThemes = GenericThemes,
+  C extends GenericShorthands = GenericShorthands,
+  D extends GenericMedia = GenericMedia
+> = CreateTamaguiConfig<A, B, C, D> & {
+  Provider: (props: TamaguiProviderProps) => any
+  // with $ prefixes for fast lookups (one time cost at startup vs every render)
+  themeParsed: { [key: string]: Variable }
+  tokensParsed: CreateTokens<Variable>
+  themeConfig: any
+  getCSS: () => string
+}
+
+// prevents const intersections from being clobbered into string, keeping the consts
+export type UnionableString = string & {}
+export type UnionableNumber = number & {}
+export type PropTypes<A extends StaticComponent> = A extends React.FunctionComponent<infer Props>
+  ? Props
+  : unknown
+
+export type GenericFont = {
+  size: { [key: string | number]: number | Variable }
+  lineHeight: { [key: string | number]: number | Variable }
+  letterSpacing: { [key: string | number]: number | Variable }
+  weight: { [key: string | number]: string | Variable }
+  family: string | Variable
+}
+
+// media
+export type MediaKeys = keyof Media
+export type MediaQueryObject = { [key: string]: string | number | string }
+export type MediaQueryState = {
+  [key in string]: boolean
+}
+export type MediaQueryKey = keyof Media
+export type MediaProps<A> = {
+  [key in `$${MediaQueryKey}`]?: A
+}
+export type MediaQueries = {
+  [key in MediaQueryKey]: MediaQueryObject
+}
+export type ConfigureMediaQueryOptions = {
+  queries?: MediaQueries
+  defaultActive?: MediaQueryKey[]
+}
+
+export type TransformStyleProps = {
+  x?: number
+  y?: number
+  perspective?: number
+  scale?: number
+  scaleX?: number
+  scaleY?: number
+  skewX?: string
+  skewY?: string
+  matrix?: number[]
+  rotate?: string
+  rotateY?: string
+  rotateX?: string
+  rotateZ?: string
+}
+
+// createComponent props helpers
+
+//
+// base props that are accepted by createComponent (additional to react-native-web)
+//
+type ComponentPropsBase = {
+  className?: string
+  tag?: string
+  animated?: boolean
+  onHoverIn?: (e: MouseEvent) => any
+  onHoverOut?: (e: MouseEvent) => any
+  onPress?: (e: GestureResponderEvent) => any
+  onPressIn?: (e: GestureResponderEvent) => any
+  onPressOut?: (e: GestureResponderEvent) => any
+  // WEB ONLY
+  onMouseEnter?: (e: GestureResponderEvent) => any
+  // WEB ONLY
+  onMouseLeave?: (e: GestureResponderEvent) => any
+  space?: Tokens['space'][keyof Tokens['space']] | boolean | string | number
+  pointerEvents?: string
+}
+
+type GetTokenFontKeysFor<A extends 'size' | 'weight' | 'letterSpacing' | 'family' | 'lineHeight'> =
+  keyof Tokens['font'][keyof Tokens['font']][A]
+
+export type SpaceTokens = `$${keyof Tokens['space']}`
+
+//
+// adds in theme short values to relevant props
+//
+type ThemeValue<A> = Omit<A, string> | UnionableString | Variable
+export type WithThemeValues<T extends object> = {
+  [K in keyof T]:
+    | ThemeValue<T[K]>
+    | (K extends ColorableKeys
+        ? ThemeKeyVariables
+        : K extends SizeKeys
+        ? `$${keyof Tokens['size']}`
+        : K extends FontKeys
+        ? `$${keyof Tokens['font']}`
+        : K extends FontSizeKeys
+        ? `$${GetTokenFontKeysFor<'size'>}`
+        : K extends SpaceKeys
+        ? `$${keyof Tokens['space']}`
+        : K extends ColorKeys
+        ? `$${keyof Tokens['color']}`
+        : K extends ZIndexKeys
+        ? `$${keyof Tokens['zIndex']}`
+        : K extends LineHeightKeys
+        ? `$${GetTokenFontKeysFor<'lineHeight'>}`
+        : K extends FontWeightKeys
+        ? `$${GetTokenFontKeysFor<'weight'>}`
+        : K extends FontLetterSpacingKeys
+        ? `$${GetTokenFontKeysFor<'letterSpacing'>}`
+        : {})
+}
+
+//
+// adds in shorthand props
+//
+type WithShorthands<StyleProps> = {
+  [Key in keyof Shorthands]?: Shorthands[Key] extends keyof StyleProps
+    ? StyleProps[Shorthands[Key]] | null
+    : {}
+}
+
+//
+// add both theme and shorthands
+//
+type WithThemeAndShorthands<A extends object> = WithThemeValues<A> &
+  WithShorthands<WithThemeValues<A>>
+
+//
+// adds theme and shorthands + pseudo styles with both
+//
+type WithThemeShorthandsAndPseudos<A extends object> = WithThemeAndShorthands<A> & {
+  hoverStyle?: WithThemeAndShorthands<A> | null
+  pressStyle?: WithThemeAndShorthands<A> | null
+}
+
+//
+// adds theme, shorthands, psuedos, then all the previous to media queries
+//
+type WithThemeShorthandsPseudosAndMedia<A extends object> = WithThemeShorthandsAndPseudos<A> &
+  MediaProps<WithThemeShorthandsAndPseudos<A>>
+
+//
+// Stack
+//
+
+type WebOnlyStyleProps = {
+  // WEB ONLY
+  cursor?: string
+  // WEB ONLY
+  contain?: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'paint' | string
+  // WEB ONLY values: inherit, inline, block, content
+  display?: 'inherit' | 'none' | 'inline' | 'block' | 'contents' | 'flex' | 'inline-flex'
+  // WEB ONLY pointerEvents can be a style prop
+  pointerEvents?: ViewProps['pointerEvents']
+}
+
+type StackStyleProps = WithThemeShorthandsPseudosAndMedia<
+  Omit<ViewStyle, 'display' | 'backfaceVisibility' | 'elevation'> &
+    TransformStyleProps &
+    WebOnlyStyleProps
+>
+
+export type StackProps = Omit<RNWInternalProps, 'children'> &
+  Omit<ViewProps, 'display' | 'children'> &
+  StackStyleProps &
+  ComponentPropsBase & {
+    ref?: RefObject<View | HTMLElement> | ((node: View | HTMLElement) => any)
+    children?: any | any[]
+  }
+
+//
+// Text props
+//
+
+// type EnhancedTextStyleProps = WithThemeValues<
+//   Omit<TextStyle, 'display' | 'backfaceVisibility'> & TransformStyleProps
+// >
+// export type TextStylePropsBase = EnhancedTextStyleProps
+// export type TextStyleProps<S = TextStylePropsBase> = S & {
+//   hoverStyle?: S | null
+//   pressStyle?: S | null
+// }
+
+type TextStyleProps = WithThemeShorthandsPseudosAndMedia<
+  Omit<TextStyle, 'display' | 'backfaceVisibility'> & TransformStyleProps & WebOnlyStyleProps
+>
+
+export type TextProps = Omit<ReactTextProps, 'style'> &
+  TextStyleProps &
+  ComponentPropsBase & {
+    ellipse?: boolean
+    selectable?: boolean
+    textDecorationDistance?: number
+  }
+
+//
+// StaticComponent
+//
+
+export type StaticComponent<
+  Props = any,
+  VariantProps = any,
+  StaticConfParsed = StaticConfigParsed,
+  ParentVariantProps = any
+> = React.FunctionComponent<Props> & {
+  staticConfig: StaticConfParsed
+  variantProps?: VariantProps
+
+  /*
+   * Only needed for more complex components
+   * If you create a styled frame component this is a HoC to extract
+   * styles from all parents.
+   */
+  extractable: <X>(a: X) => X
+}
+
+export type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>> & {
+  initialWindowMetrics?: any
+  fallback?: any
+  children?: any
+}
+
+export type RNWInternalProps = {
+  accessibilityState?: {
+    busy?: boolean
+    checked?: boolean | 'mixed'
+    disabled?: boolean
+    expanded?: boolean
+    grabbed?: boolean
+    hidden?: boolean
+    invalid?: boolean
+    modal?: boolean
+    pressed?: boolean
+    readonly?: boolean
+    required?: boolean
+    selected?: boolean
+  }
+  accessibilityValue?: {
+    max?: number
+    min?: number
+    now?: number
+    text?: string
+  }
+  children?: any
+  focusable?: boolean
+  nativeID?: string
+  onBlur?: (e: any) => void
+  onClick?: (e: any) => void
+  onClickCapture?: (e: any) => void
+  onContextMenu?: (e: any) => void
+  onFocus?: (e: any) => void
+  onKeyDown?: (e: any) => void
+  onKeyUp?: (e: any) => void
+  onMoveShouldSetResponder?: (e: any) => boolean
+  onMoveShouldSetResponderCapture?: (e: any) => boolean
+  onResponderEnd?: (e: any) => void
+  onResponderGrant?: (e: any) => void
+  onResponderMove?: (e: any) => void
+  onResponderReject?: (e: any) => void
+  onResponderRelease?: (e: any) => void
+  onResponderStart?: (e: any) => void
+  onResponderTerminate?: (e: any) => void
+  onResponderTerminationRequest?: (e: any) => boolean
+  onScrollShouldSetResponder?: (e: any) => boolean
+  onScrollShouldSetResponderCapture?: (e: any) => boolean
+  onSelectionChangeShouldSetResponder?: (e: any) => boolean
+  onSelectionChangeShouldSetResponderCapture?: (e: any) => boolean
+  onStartShouldSetResponder?: (e: any) => boolean
+  onStartShouldSetResponderCapture?: (e: any) => boolean
+  pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto'
+  testID?: string
+  // unstable
+  dataSet?: Object
+  onMouseDown?: (e: any) => void
+  onMouseEnter?: (e: any) => void
+  onMouseLeave?: (e: any) => void
+  onMouseMove?: (e: any) => void
+  onMouseOver?: (e: any) => void
+  onMouseOut?: (e: any) => void
+  onMouseUp?: (e: any) => void
+  onScroll?: (e: any) => void
+  onTouchCancel?: (e: any) => void
+  onTouchCancelCapture?: (e: any) => void
+  onTouchEnd?: (e: any) => void
+  onTouchEndCapture?: (e: any) => void
+  onTouchMove?: (e: any) => void
+  onTouchMoveCapture?: (e: any) => void
+  onTouchStart?: (e: any) => void
+  onTouchStartCapture?: (e: any) => void
+  onWheel?: (e: any) => void
+  href?: string
+  hrefAttrs?: { download?: boolean; rel?: string; target?: string }
+}
+
+export type StaticConfigParsed = StaticConfig & {
+  parsed: true
+  propMapper: (
+    key: string,
+    value: any,
+    theme: ThemeObject,
+    props: any
+  ) => undefined | boolean | { [key: string]: any }
+  variantsParsed?: {
+    [key: string]: {
+      [key: string]: any
+    }
+  }
+}
+
+export type StaticConfig = {
+  Component?: StaticComponent
+
+  variants?: {
+    [key: string]: {
+      [key: string]:
+        | ((a: any, b: any) => any)
+        | {
+            [key: string]: any
+          }
+    }
+  }
+
+  /*
+   * If you need to pass context or something, prevents from ever
+   * flattening. The 'jsx' option means it will never flatten. if you
+   * pass JSX as a children (if its purely string, it will still flatten).
+   */
+  neverFlatten?: boolean | 'jsx'
+
+  /*
+   * Determines ultimate output tag (Text vs View)
+   */
+  isText?: boolean
+
+  /*
+   * Which style keys are allowed to be extracted.
+   */
+  validStyles?: { [key: string]: boolean }
+
+  /*
+   * Allows for defining extra valid props to be extracted beyond
+   * the default ones.
+   */
+  validPropsExtra?: { [key: string]: any }
+
+  /*
+   * Same as React.defaultProps, be sure to sync
+   */
+  defaultProps?: any
+
+  /*
+   * If this prop is encountered, bail on all optimization.
+   */
+  deoptProps?: Set<string>
+
+  /*
+   * A bit odd, only for more advanced heirarchies.
+   * Indicates that the component will set this prop so the
+   * static extraction can ensure it sets them to ={undefined}
+   * so they get overriddent. In the future, this can be smarter.
+   */
+  ensureOverriddenProp?: { [key: string]: boolean }
+
+  /*
+   * We need to wrap children
+   */
+  isZStack?: boolean
+}
+
+type ColorableKeys =
+  | 'color'
+  | 'backgroundColor'
+  | 'borderColor'
+  | 'borderTopColor'
+  | 'borderBottomColor'
+  | 'borderLeftColor'
+  | 'borderRightColor'
+  | 'shadowColor'
+
+type SizeKeys = 'width' | 'height' | 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight'
+
+type FontKeys = 'fontFamily'
+
+type FontSizeKeys = 'fontSize'
+
+type FontWeightKeys = 'fontWeight'
+
+type FontLetterSpacingKeys = 'letterSpacing'
+
+type LineHeightKeys = 'lineHeight'
+
+type ZIndexKeys = 'zIndex'
+
+type ColorKeys =
+  | 'color'
+  | 'backgroundColor'
+  | 'borderColor'
+  | 'borderBottomColor'
+  | 'borderTopColor'
+  | 'borderLeftColor'
+  | 'borderRightColor'
+
+type SpaceKeys =
+  | 'padding'
+  | 'paddingHorizontal'
+  | 'paddingVertical'
+  | 'paddingLeft'
+  | 'paddingTop'
+  | 'paddingBottom'
+  | 'paddingLeft'
+  | 'paddingRight'
+  | 'paddingEnd'
+  | 'paddingStart'
+  | 'margin'
+  | 'marginHorizontal'
+  | 'marginVertical'
+  | 'marginLeft'
+  | 'marginTop'
+  | 'marginBottom'
+  | 'marginLeft'
+  | 'marginRight'
+  | 'marginEnd'
+  | 'marginStart'
+  | 'x'
+  | 'y'
+  | 'scale'
+  | 'scaleX'
+  | 'scaleY'
+  | 'borderTopEndRadius'
+  | 'borderTopLeftRadius'
+  | 'borderTopRightRadius'
+  | 'borderTopStartRadius'
+  | 'borderBottomEndRadius'
+  | 'borderBottomLeftRadius'
+  | 'borderBottomRightRadius'
+  | 'borderBottomStartRadius'
+  | 'borderBottomWidth'
+  | 'borderLeftWidth'
+  | 'borderRadius'
+  | 'borderRightWidth'
+  | 'borderTopEndRadius'
+  | 'borderTopLeftRadius'
+  | 'borderTopRightRadius'
+  | 'borderEndWidth'
+  | 'borderStartWidth'
+  | 'borderTopStartRadius'
+  | 'borderTopWidth'
+  | 'borderWidth'
+  | 'left'
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'shadowOffset'

package/src/views/Animated.tsx

@@ -0,0 +1,121 @@
+import React, { useMemo } from 'react'
+import {
+  Animated,
+  PerpectiveTransform,
+  RotateTransform,
+  RotateXTransform,
+  RotateYTransform,
+  RotateZTransform,
+  ScaleTransform,
+  ScaleXTransform,
+  ScaleYTransform,
+  SkewXTransform,
+  SkewYTransform,
+  TranslateXTransform,
+  TranslateYTransform,
+} from 'react-native'
+
+import { useIsomorphicLayoutEffect } from '../constants/platform'
+import { useConstant } from '../hooks/useConstant'
+import { StackProps } from '../types'
+import { Stack } from './Stack'
+
+const defaultAnimation = {
+  from: {
+    opacity: 0,
+    translateY: 12,
+  },
+  to: {
+    opacity: 1,
+    translateY: 0,
+  },
+}
+
+type AnimatableProps = Partial<
+  Pick<StackProps, 'backgroundColor' | 'borderColor' | 'opacity'> &
+    PerpectiveTransform &
+    RotateTransform &
+    RotateXTransform &
+    RotateYTransform &
+    RotateZTransform &
+    ScaleTransform &
+    ScaleXTransform &
+    ScaleYTransform &
+    TranslateXTransform &
+    TranslateYTransform &
+    SkewXTransform &
+    SkewYTransform
+>
+
+const styleKeys = {
+  opacity: true,
+  backgroundColor: true,
+  borderColor: true,
+}
+
+export type AnimatedStackProps = StackProps & {
+  animateState?: 'in' | 'out'
+  velocity?: number
+  animation?: {
+    from: AnimatableProps
+    to: AnimatableProps
+  }
+}
+
+export const AnimatedStack = ({
+  animateState = 'in',
+  animation = defaultAnimation,
+  velocity = 6,
+  children,
+  animated,
+  ...props
+}: AnimatedStackProps) => {
+  const driver = useConstant(() => {
+    return new Animated.Value(0)
+  })
+
+  const animatedProps = useMemo(() => {
+    if (!animated) {
+      return null
+    }
+
+    const styleProps = {}
+    const transform: any = []
+
+    for (const key in animation.from) {
+      const fromVal = animation.from[key]
+      const toVal = animation.to[key]
+      const interpolatedVal = driver.interpolate({
+        inputRange: [0, 1],
+        outputRange: [fromVal, toVal],
+      })
+      if (styleKeys[key]) {
+        styleProps[key] = interpolatedVal
+      } else {
+        transform.push({
+          [key]: interpolatedVal,
+        })
+      }
+    }
+    return { transform, ...styleProps }
+  }, [animated, animateState])
+
+  useIsomorphicLayoutEffect(() => {
+    if (!animated) {
+      return
+    }
+    Animated.spring(driver, {
+      useNativeDriver: true,
+      velocity,
+      toValue: animateState === 'in' ? 1 : 0,
+    }).start()
+  }, [animated, animateState])
+
+  const childrenMemo = useMemo(() => children, [children])
+
+  return (
+    <Stack animated={animated} {...props} {...animatedProps}>
+      {childrenMemo}
+    </Stack>
+  )
+}

package/src/views/SafeAreaProvider.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Platform } from 'react-native'
+import {
+  Metrics,
+  SafeAreaProvider as RNSafeAreaProvider,
+  initialWindowMetrics as defaultInitialWindowMetrics,
+} from 'react-native-safe-area-context'
+
+let defaultMetrics: Metrics | null = null
+
+export const SafeAreaProvider = ({
+  initialWindowMetrics,
+  children,
+}: {
+  children?: any
+  initialWindowMetrics?: any
+}) => {
+  if (!initialWindowMetrics && !defaultMetrics) {
+    defaultMetrics = Platform.select({
+      web: {
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      },
+      default: defaultInitialWindowMetrics,
+    })
+  }
+
+  return (
+    <RNSafeAreaProvider initialMetrics={initialWindowMetrics ?? defaultMetrics}>
+      {children}
+    </RNSafeAreaProvider>
+  )
+}