@tamagui/core 1.0.1-beta.19 → 1.0.1-beta.190

package/src/index.ts

@@ -0,0 +1,83 @@
+export * from './Tamagui'
+export * from './createComponent'
+export * from './createShorthands'
+export * from './createTheme'
+export * from './createTamagui'
+export * from './createFont'
+export * from './createTokens'
+export * from './createVariable'
+export * from './createVariables'
+export * from './insertFont'
+export * from './addTheme'
+export * from './updateTheme'
+export * from './styled'
+export * from './types'
+
+// for type portability
+export type { RNWTextProps, RNWViewProps } from './types-rnw'
+export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './config'
+
+export * from './constants/constants'
+export { createDOMProps } from '@tamagui/rnw'
+
+export * from './helpers/calc'
+export * from './helpers/useShallowSetState'
+export * from './helpers/getStackSize'
+export * from './helpers/getVariantExtras'
+export * from './helpers/getAnimationDriver'
+export * from './helpers/getExpandedShorthands'
+export * from './helpers/getSize'
+export * from './helpers/getSplitStyles'
+export * from './helpers/getStylesAtomic'
+export * from './helpers/pseudoDescriptors'
+export * from './helpers/mergeProps'
+export * from './helpers/expandStyles'
+export * from './helpers/getFont'
+export * from './helpers/isObj'
+export * from './helpers/isTamaguiElement'
+export * from './helpers/isTamaguiComponent'
+export * from './helpers/matchMedia'
+export * from './helpers/startTransition'
+export * from './helpers/themeable'
+export * from './helpers/withStaticProperties'
+
+export * from './contexts/ButtonInsideButtonContext'
+
+export * from './hooks/useConstant'
+export * from './hooks/useId'
+export * from './hooks/useIsMounted'
+export * from './hooks/useIsTouchDevice'
+
+export {
+  configureMedia,
+  getMedia,
+  mediaState,
+  useMedia,
+  useMediaPropsActive,
+  mediaObjectToString,
+  addMediaQueryListener,
+  removeMediaQueryListener,
+  mediaQueryConfig,
+} from './hooks/useMedia'
+export * from './hooks/usePressable'
+export * from './hooks/useTheme'
+export * from './hooks/useUnmountEffect'
+export * from './hooks/useSafeRef'
+
+export * from './views/Slot'
+export * from './views/Stack'
+export * from './views/Text'
+export { TextAncestorProvider, TextAncestorContext } from './contexts/TextAncestorContext'
+export * from './views/Theme'
+export * from './views/ThemeInverse'
+export * from './views/ThemeProvider'
+export * from './views/ThemeReset'
+export * from './views/FontLanguage'
+export * from './views/TamaguiProvider'
+
+export * from '@tamagui/use-force-update'
+export * from '@tamagui/use-did-finish-ssr'
+export * from '@tamagui/use-event'
+export * from '@tamagui/compose-refs'
+export * from '@tamagui/helpers'
+export * from '@tamagui/constants'

package/src/injectStyles.ts

@@ -0,0 +1,20 @@
+// for vite dev mode
+
+const stylesheets: Record<string, HTMLElement> = {}
+
+interface InjectStylesOptions {
+  filePath: string
+  css: string
+}
+
+export const injectStyles = ({ filePath, css }: InjectStylesOptions) => {
+  let stylesheet = stylesheets[filePath]
+  if (!stylesheet) {
+    const styleEl = document.createElement('style')
+    styleEl.setAttribute('data-file', filePath)
+    styleEl.setAttribute('type', 'text/css')
+    stylesheet = stylesheets[filePath] = styleEl
+    document.head.appendChild(styleEl)
+  }
+  stylesheet.innerHTML = css
+}

package/src/insertFont.ts

@@ -0,0 +1,70 @@
+import { setConfigFont } from './config'
+import { createFont } from './createFont'
+import { Variable } from './createVariable'
+import { DeepVariableObject, createVariables } from './createVariables'
+import { registerCSSVariable, variableToCSS } from './helpers/registerCSSVariable'
+import { GenericFont } from './types'
+
+/**
+ * Runtime dynamic insert font
+ */
+export function insertFont<A extends GenericFont>(name: string, fontIn: A): DeepVariableObject<A> {
+  const font = createFont(fontIn)
+  const tokened = createVariables(font, name) as GenericFont
+  const parsed = parseFont(tokened) as DeepVariableObject<A>
+  if (process.env.TAMAGUI_TARGET === 'web' && typeof document !== 'undefined') {
+    const fontVars = registerFontVariables(parsed)
+    const style = document.createElement('style')
+    style.innerText = `:root .font_${name} {${fontVars.join(';')}}`
+    style.setAttribute('data-tamagui-font', name)
+    document.head.appendChild(style)
+  }
+  setConfigFont(name, tokened, parsed)
+  return parsed
+}
+
+export function parseFont<A extends GenericFont>(definition: A): DeepVariableObject<A> {
+  const parsed: any = {}
+  for (const attrKey in definition) {
+    const attr = definition[attrKey]
+    if (attrKey === 'family' || attrKey === 'face') {
+      parsed[attrKey] = attr
+      continue
+    }
+    parsed[attrKey] = {}
+    for (const key in attr) {
+      let val = attr[key] as any
+      // is a theme reference
+      if (val.val?.[0] === '$') {
+        val = val.val
+      }
+      parsed[attrKey][`$${key}`] = val
+    }
+  }
+  return parsed
+}
+
+export function registerFontVariables(parsedFont: any) {
+  const response: string[] = []
+
+  for (const fkey in parsedFont) {
+    if (fkey === 'face') continue
+    if (fkey === 'family') {
+      const val = parsedFont[fkey] as Variable
+      registerCSSVariable(val)
+      response.push(variableToCSS(val))
+    } else {
+      for (const fskey in parsedFont[fkey]) {
+        const fval = parsedFont[fkey][fskey]
+        if (typeof fval === 'string') {
+          // no need to add its a theme reference like "$borderColor"
+        } else {
+          const val = parsedFont[fkey][fskey] as Variable
+          registerCSSVariable(val)
+          response.push(variableToCSS(val))
+        }
+      }
+    }
+  }
+  return response
+}

package/src/static.ts

@@ -0,0 +1,15 @@
+// only stuff that gets extracted or needed by tamagui-static
+
+export * from './index'
+
+// for static
+
+export {
+  createDOMProps,
+  useElementLayout,
+  useMergeRefs,
+  usePlatformMethods,
+  useResponderEvents,
+} from '@tamagui/rnw'
+
+export * from './helpers/proxyThemeVariables'

package/src/styled.tsx

@@ -0,0 +1,198 @@
+import { Image, Text, TextInput } from 'react-native'
+
+import { createComponent } from './createComponent'
+import { TamaguiReactElement, isTamaguiElement } from './helpers/isTamaguiElement'
+import { RNComponents } from './helpers/RNComponents'
+import {
+  GetProps,
+  GetVariantValues,
+  MediaProps,
+  PseudoProps,
+  StaticConfig,
+  StylableComponent,
+  TamaguiComponent,
+  TamaguiElement,
+  VariantDefinitions,
+  VariantSpreadFunction,
+} from './types'
+
+// TODO may be able to use this in the options?: arg below directly
+export type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {
+  name?: string
+  variants?: VariantDefinitions<ParentComponent> | undefined
+  defaultVariants?: { [key: string]: any }
+}
+
+// can't infer from styled(<YStack />) which would be nice
+// * excessively deep type instantiation
+
+type GetBaseProps<A extends StylableComponent> =
+  // A extends TamaguiReactElement
+  //   ? GetBaseProps<A['type']> :
+  A extends TamaguiComponent<any, any, infer P> ? P : GetProps<A>
+
+type GetVariantProps<A extends StylableComponent> =
+  // A extends TamaguiReactElement
+  //   ? GetVariantProps<A['type']>
+  //   :
+  A extends TamaguiComponent<any, any, any, infer V> ? V : {}
+
+export function styled<
+  ParentComponent extends StylableComponent,
+  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void
+>(
+  Component: ParentComponent,
+  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues
+  options?: GetProps<ParentComponent> & {
+    name?: string
+    variants?: Variants | undefined
+    // thought i had this typed, but can't get it linked
+    defaultVariants?: { [key: string]: any }
+    acceptsClassName?: boolean
+  },
+  staticExtractionOptions?: Partial<StaticConfig>
+) {
+  // * excessively deep type instantiation
+  // if (isTamaguiElement(Component)) {
+  //   const props = Component.props
+  //   // @ts-ignore
+  //   Component = Component.type
+  //   options = options ? { ...props, ...options } : props
+  // }
+
+  const staticConfigProps = (() => {
+    const parentStaticConfig =
+      'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null
+
+    if (process.env.NODE_ENV === 'development') {
+      if (parentStaticConfig?.isHOC) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `Warning: Parent component is a functional component, not a Tamagui styled() component. Extending with styled() will break and lead to incorrect styles.`
+        )
+      }
+    }
+
+    if (options) {
+      const {
+        variants,
+        name,
+        defaultVariants,
+        acceptsClassName: acceptsClassNameProp,
+        ...defaultProps
+      } = options
+      if (defaultVariants) {
+        Object.assign(defaultProps, defaultVariants)
+      }
+      let isReactNativeWeb = parentStaticConfig?.isReactNativeWeb || RNComponents.has(Component)
+      // this can happen due to smart-ness in fake-react-native, rough heuristic here to ensure we match (could be better..)
+      if (!('staticConfig' in Component) && !isReactNativeWeb) {
+        if (RNComponents.has(Component['displayName'])) {
+          RNComponents.add(Component)
+          isReactNativeWeb = true
+        } else {
+          // assuming some sort of non-tamagui non-rn view, will always use style={}
+        }
+      }
+      const reactNativeWebComponent = isReactNativeWeb
+        ? parentStaticConfig?.reactNativeWebComponent || Component
+        : null
+      const isTamagui = !isReactNativeWeb && !!parentStaticConfig
+      const Comp = reactNativeWebComponent || (Component as any)
+      const isImage = Boolean(
+        staticExtractionOptions?.isImage || parentStaticConfig?.isImage || Comp === Image
+      )
+      const isInput = Boolean(
+        staticExtractionOptions?.isInput || parentStaticConfig?.isInput || Comp === TextInput
+      )
+      const isText = Boolean(
+        isInput || staticExtractionOptions?.isText || parentStaticConfig?.isText || Comp === Text
+      )
+
+      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNativeWeb)
+
+      const conf: Partial<StaticConfig> = {
+        ...staticExtractionOptions,
+        ...(!isTamagui && {
+          Component: Comp,
+        }),
+        isTamagui,
+        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above
+        // take away the Partial<> and it's fine
+        variants,
+        defaultProps,
+        defaultVariants,
+        componentName: name,
+        isReactNativeWeb,
+        // for nesting multiple levels of rnw styled() need keep use the OG component
+        reactNativeWebComponent,
+        isInput,
+        isText,
+        isImage,
+        acceptsClassName,
+      }
+
+      // TODO compiler doesn't have logic to include children, de-opt (see EnsureFlexed for test usage)
+      // bail on non className views as well
+      if (defaultProps.children || !acceptsClassName) {
+        conf.neverFlatten = true
+      }
+
+      return conf
+    }
+    return {}
+  })()
+
+  const component = createComponent(staticConfigProps, Component)
+
+  // get parent props without pseudos and medias so we can rebuild both with new variants
+  // get parent props without pseudos and medias so we can rebuild both with new variants
+  type ParentPropsBase = GetBaseProps<ParentComponent>
+  type ParentVariants = GetVariantProps<ParentComponent>
+
+  type OurVariants = Variants extends void
+    ? {}
+    : {
+        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>
+          ? Val
+          : GetVariantValues<keyof Variants[Key]>
+      }
+
+  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants
+  type OurPropsBase = ParentPropsBase & VariantProps
+
+  type Props = Variants extends void
+    ? GetProps<ParentComponent>
+    : // start with base props
+      OurPropsBase &
+        // add in media (+ pseudos nested)
+        MediaProps<Partial<OurPropsBase>> &
+        // add in pseudos
+        PseudoProps<Partial<OurPropsBase>>
+
+  return component as TamaguiComponent<
+    Props,
+    TamaguiElement,
+    ParentPropsBase,
+    ParentVariants & OurVariants
+  >
+}
+
+// import { Stack } from './views/Stack'
+// const X = styled(Stack, {
+//   variants: {
+//     size: {
+//       '...size': (val) => {
+//         return {}
+//       }
+//     },
+//     disabled: {
+//       true: {
+//         opacity: 0.5,
+//         pointerEvents: 'none',
+//       },
+//     },
+//   } as const
+// })
+// type variants = GetStyledVariants<typeof X>
+// const y = <X disabled size="$10" />

package/src/types-rnw.tsx

@@ -0,0 +1,162 @@
+// The following list is sourced from:
+// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/types/styles.js#L76
+type RNWCursorValue =
+  | 'alias'
+  | 'all-scroll'
+  | 'auto'
+  | 'cell'
+  | 'context-menu'
+  | 'copy'
+  | 'crosshair'
+  | 'default'
+  | 'grab'
+  | 'grabbing'
+  | 'help'
+  | 'pointer'
+  | 'progress'
+  | 'wait'
+  | 'text'
+  | 'vertical-text'
+  | 'move'
+  | 'none'
+  | 'no-drop'
+  | 'not-allowed'
+  | 'zoom-in'
+  | 'zoom-out'
+  | 'col-resize'
+  | 'e-resize'
+  | 'ew-resize'
+  | 'n-resize'
+  | 'ne-resize'
+  | 'ns-resize'
+  | 'nw-resize'
+  | 'row-resize'
+  | 's-resize'
+  | 'se-resize'
+  | 'sw-resize'
+  | 'w-resize'
+  | 'nesw-resize'
+  | 'nwse-resize'
+
+// This list is the combination of the following two lists:
+// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js#L10
+// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L12
+// Plus the single hard-coded value "label" from here:
+// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L36
+type RNWWebAccessibilityRole =
+  | 'adjustable'
+  | 'article'
+  | 'banner'
+  | 'blockquote'
+  | 'button'
+  | 'code'
+  | 'complementary'
+  | 'contentinfo'
+  | 'deletion'
+  | 'emphasis'
+  | 'figure'
+  | 'form'
+  | 'header'
+  | 'image'
+  | 'imagebutton'
+  | 'insertion'
+  | 'keyboardkey'
+  | 'label'
+  | 'link'
+  | 'list'
+  | 'listitem'
+  | 'main'
+  | 'navigation'
+  | 'none'
+  | 'region'
+  | 'search'
+  | 'strong'
+  | 'summary'
+  | 'text'
+
+export interface RNWViewProps {
+  // our internal hack to pass className down (until styleq transition)
+  dataSet?: any
+
+  // TODO get proper types:
+  target?: any
+  rel?: any
+  download?: any
+
+  accessibilityRole?: RNWWebAccessibilityRole
+  href?: string
+  hrefAttrs?: {
+    target?: '_blank' | '_self' | '_top' | 'blank' | 'self' | 'top'
+    rel?: string
+    download?: boolean
+  }
+  onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onMouseUp?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void
+  onScroll?: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void
+  // For compatibility with RNW internals
+  onScrollShouldSetResponder?: unknown
+  onScrollShouldSetResponderCapture?: unknown
+  onSelectionChangeShouldSetResponder?: unknown
+  onSelectionChangeShouldSetResponderCapture?: unknown
+}
+
+export interface RNWTextProps {
+  dir?: 'ltr' | 'rtl' | 'auto'
+  focusable?: boolean
+  accessibilityRole?: RNWWebAccessibilityRole
+  accessibilityState?: {
+    busy?: boolean
+    checked?: boolean | 'mixed'
+    disabled?: boolean
+    expanded?: boolean
+    grabbed?: boolean
+    hidden?: boolean
+    invalid?: boolean
+    pressed?: boolean
+    readonly?: boolean
+    required?: boolean
+    selected?: boolean
+  }
+  href?: string
+  // TODO hrefAttrs or come up with proper html escape hatch
+  // hrefAttrs?: {
+  //   target?: '_blank' | '_self' | '_top' | 'blank' | 'self' | 'top'
+  //   rel?: string
+  //   download?: boolean
+  // }
+  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void
+  // For compatibility with RNW internals
+  onMoveShouldSetResponder?: unknown
+  onMoveShouldSetResponderCapture?: unknown
+  onResponderEnd?: unknown
+  onResponderGrant?: unknown
+  onResponderMove?: unknown
+  onResponderReject?: unknown
+  onResponderRelease?: unknown
+  onResponderStart?: unknown
+  onResponderTerminate?: unknown
+  onResponderTerminationRequest?: unknown
+  onScrollShouldSetResponder?: unknown
+  onScrollShouldSetResponderCapture?: unknown
+  onSelectionChangeShouldSetResponder?: unknown
+  onSelectionChangeShouldSetResponderCapture?: unknown
+  onStartShouldSetResponder?: unknown
+  onStartShouldSetResponderCapture?: unknown
+}
+
+export interface RNWViewStyle {
+  cursor?: RNWCursorValue
+  transitionProperty?: string
+  display?: 'flex' | 'inline-flex' | 'none'
+}
+
+export interface RNWTextStyle {
+  // The following list is sourced from:
+  // - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/types/styles.js#L128
+  userSelect?: 'all' | 'auto' | 'contain' | 'none' | 'text'
+}