@tamagui/core 1.0.0-alpha.0

package/src/views/Stack.tsx

@@ -0,0 +1,21 @@
+import { stackDefaultStyles } from '../constants/constants'
+import { createComponent } from '../createComponent'
+import { StackProps } from '../types'
+
+export const Stack = createComponent<StackProps>({
+  defaultProps: {
+    ...stackDefaultStyles,
+    flexDirection: 'column',
+  },
+})
+
+// test types
+// export const YStack = styled(Stack, {
+//   flexDirection: 'column',
+// })
+// // test types
+// const x00 = <Stack missing={0} /> // should err
+// const x0 = <YStack missing={0} /> // should err
+// const x1 = (props: StackProps) => <YStack {...props} />
+// type ys = typeof YStack
+// type ysv = ys extends StaticComponent<any, infer V> ? V : unknown

package/src/views/Text.tsx

@@ -0,0 +1,66 @@
+import { isWeb } from '../constants/platform'
+import { createComponent } from '../createComponent'
+import { stylePropsTextOnly, validStyles } from '../static'
+import { TextProps } from '../types'
+
+const ellipseStyle = {
+  maxWidth: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+}
+
+export const Text = createComponent<TextProps>({
+  isText: true,
+  defaultProps: {
+    display: isWeb ? 'inline' : 'inline-flex',
+    boxSizing: 'border-box',
+    fontFamily: 'System',
+    wordWrap: 'break-word',
+  },
+  variants: {
+    numberOfLines: {
+      1: ellipseStyle,
+      // TODO imply fn, test 1, could do types `>1` `<2`
+      '[number]': (lines) => (lines > 1 ? { WebkitLineClamp: 1 } : null),
+    },
+
+    selectable: {
+      true: {
+        userSelect: 'text',
+      },
+      false: {
+        userSelect: 'none',
+      },
+    },
+
+    pressable: {
+      true: {
+        cursor: 'pointer',
+      },
+    },
+
+    ellipse: {
+      true: isWeb
+        ? ellipseStyle
+        : {
+            numberOfLines: 1,
+            lineBreakMode: 'clip',
+          },
+    },
+  },
+  // TODO document
+  deoptProps: new Set(isWeb ? [] : ['ellipse']),
+  validStyles: {
+    ...validStyles,
+    ...stylePropsTextOnly,
+    ...(isWeb && {
+      userSelect: true,
+      textOverflow: true,
+      whiteSpace: true,
+      wordWrap: true,
+      selectable: true,
+      cursor: true,
+    }),
+  },
+})

package/src/views/TextAncestorContext.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+import { rnw } from '../constants/rnw'
+
+export const TextAncestorContext = rnw?.TextAncestorContext
+
+export const TextAncestorProvider = (props) => {
+  if (TextAncestorContext) {
+    return <TextAncestorContext.Provider value={false}>{props.children}</TextAncestorContext.Provider>
+  }
+  return props.children
+}

package/src/views/Theme.tsx

@@ -0,0 +1,73 @@
+import React, { useContext, useState } from 'react'
+
+import { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
+import { getThemeParentClassName } from '../createTamagui'
+import { useConstant } from '../hooks/useConstant'
+import { ThemeName, Themes } from '../types'
+import { ThemeContext } from './ThemeContext'
+import { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'
+
+export type ThemeProps = {
+  disableThemeClass?: boolean
+  name: ThemeName | null
+  children?: any
+}
+
+export const Theme = (props: ThemeProps) => {
+  const parent = useContext(ThemeManagerContext)
+  const themes = useContext(ThemeContext)
+  const [parentName, setParentName] = useState(parent.name || 'light')
+  if (!themes) {
+    console.warn('no themes???', props)
+    return props.children
+  }
+  const name = props.name as string
+  const theme = themes[name] || themes[`${name}-${parentName}`]
+  const themeManager = useConstant<ThemeManager>(() => {
+    const manager = new ThemeManager()
+    if (name) {
+      manager.setActiveTheme(name, themes[name])
+    }
+    return manager
+  })
+
+  useIsomorphicLayoutEffect(() => {
+    themeManager.setActiveTheme(name, theme)
+    return parent.onChangeTheme((next) => {
+      if (next) {
+        themeManager.setActiveTheme(next, themes[next])
+        setParentName(next)
+      }
+    })
+  }, [themes, name])
+
+  if (!name) {
+    return props.children
+  }
+
+  const contents = themeManager ? (
+    <ThemeManagerContext.Provider value={themeManager}>
+      {props.children}
+    </ThemeManagerContext.Provider>
+  ) : (
+    props.children
+  )
+
+  if (isWeb) {
+    if (props.disableThemeClass) {
+      return contents
+    }
+    const color = themes[name]?.['color']?.['variable']
+    return (
+      <div
+        className={getThemeParentClassName(name)}
+        // in order to provide currentColor, set color by default
+        style={{ display: 'contents', color }}
+      >
+        {contents}
+      </div>
+    )
+  }
+
+  return contents
+}

package/src/views/ThemeContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+import { Themes } from '../types'
+
+export const ThemeContext = createContext<Themes>(null as any)

package/src/views/ThemeInverse.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { useDefaultThemeName, useThemeName } from '../hooks/useTheme'
+import { Theme } from './Theme'
+
+type StringRecord = { [key: string]: string }
+
+let inversions: StringRecord = {
+  light: 'dark',
+  dark: 'light',
+}
+
+export function setThemeInversions(next: StringRecord) {
+  inversions = next
+}
+
+export const ThemeInverse = (props: { children: any }) => {
+  const themeName = useThemeName()
+  const defaultTheme = useDefaultThemeName()
+  const name = inversions[themeName] || inversions[defaultTheme] || null
+  console.log('todo fixme invert', { themeName, defaultTheme, next: name })
+  return <Theme name={name}>{props.children}</Theme>
+}

package/src/views/ThemeManagerContext.tsx

@@ -0,0 +1,50 @@
+import { createContext } from 'react'
+
+export class ThemeManager {
+  name: string | null = 'light'
+  keys = new Map<any, Set<string>>()
+  listeners = new Map<any, Function>()
+  callbacks = new Set<Function>()
+  theme = null
+
+  setActiveTheme(name: string | null, theme?: any) {
+    if (name === this.name) return
+    this.name = name
+    this.theme = theme
+    this.update()
+  }
+
+  track(uuid: any, keys: Set<string>) {
+    if (!this.name) return
+    this.keys.set(uuid, keys)
+  }
+
+  update() {
+    if (!this.name) {
+      this.keys.clear()
+    }
+    for (const [uuid, keys] of this.keys.entries()) {
+      if (keys.size) {
+        this.listeners.get(uuid)?.()
+      }
+    }
+    this.callbacks.forEach((cb) => cb(this.name))
+  }
+
+  onChangeTheme(cb: (name: string | null) => void) {
+    this.callbacks.add(cb)
+    return () => {
+      this.callbacks.delete(cb)
+    }
+  }
+
+  onUpdate(uuid: any, cb: Function) {
+    this.listeners.set(uuid, cb)
+    return () => {
+      this.listeners.delete(uuid)
+      this.keys.delete(uuid)
+    }
+  }
+}
+
+export const ThemeManagerContext = createContext<ThemeManager>(new ThemeManager())

package/src/views/ThemeProvider.tsx

@@ -0,0 +1,52 @@
+import React, { useMemo } from 'react'
+
+import { useIsomorphicLayoutEffect } from '../constants/platform'
+import { getHasConfigured, getThemeParentClassName } from '../createTamagui'
+import { Theme } from './Theme'
+import { ThemeContext } from './ThemeContext'
+
+export type ThemeProviderProps = {
+  themes: any
+  defaultTheme: string
+  disableRootThemeClass?: boolean
+  children?: any
+}
+
+export const GET_DEFAULT_THEME = '___TGUI'
+
+export const ThemeProvider = (props: ThemeProviderProps) => {
+  if (!getHasConfigured()) {
+    throw new Error(`Missing configureThemes() call, add to your root file`)
+  }
+
+  // ensure theme is attached to root body node as well to work with modals by default
+  useIsomorphicLayoutEffect(() => {
+    if (props.disableRootThemeClass) {
+      return
+    }
+    if (typeof document !== 'undefined') {
+      const cns = getThemeParentClassName(`${props.defaultTheme}`).split(' ')
+      cns.forEach((cn) => document.body.classList.add(cn))
+      return () => {
+        cns.forEach((cn) => document.body.classList.remove(cn))
+      }
+    }
+  }, [])
+
+  const themeContext = useMemo(() => {
+    return new Proxy(props.themes, {
+      get(target, key) {
+        if (key === GET_DEFAULT_THEME) return props.defaultTheme
+        return Reflect.get(target, key)
+      },
+    })
+  }, [props.themes])
+
+  return (
+    <ThemeContext.Provider value={themeContext}>
+      <Theme name={props.defaultTheme} disableThemeClass={props.disableRootThemeClass}>
+        {props.children}
+      </Theme>
+    </ThemeContext.Provider>
+  )
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "rootDir": "../..",
+    "jsx": "preserve"
+  },
+  "include": ["src"]
+}