@tamagui/core 1.0.1-beta.219 → 1.0.1-beta.221

package/src/createTokens.test.ts

@@ -0,0 +1,29 @@
+import { getDefaultTamaguiConfig } from '@tamagui/config-default-node'
+import { expect, test } from 'vitest'
+
+import { createTokens } from './createTokens'
+
+test('snapshot', () => {
+  expect(createTokens(getDefaultTamaguiConfig().tokens)).toMatchSnapshot()
+})
+
+test('color name no dot', () => {
+  expect(
+    // @ts-ignore partial
+    createTokens({
+      color: {
+        'yellow.10': 'yellow',
+      },
+    })
+  ).toMatchObject({
+    color: {
+      'yellow.10': {
+        isVar: true,
+        key: 'yellow101a',
+        name: 'color-1',
+        val: 'yellow',
+        variable: '',
+      },
+    },
+  })
+})

package/src/createTokens.ts

@@ -4,7 +4,7 @@ import { CreateTokens } from './types'
 
 // tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }
 export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {
-  return createVariables(tokens as any) as any
+  return createVariables(tokens) as any
 }
 
 // verbose but gives us nice types...

package/src/createVariable.test.ts

@@ -0,0 +1,7 @@
+import { expect, test } from 'vitest'
+
+import { createCSSVariable } from './createVariable'
+
+test('dots', () => {
+  expect(createCSSVariable('yellow.10')).toBe('var(--yellow101a)')
+})

package/src/createVariable.ts

@@ -8,7 +8,7 @@ import { getConfig } from './config'
  * Moving to objects for React Server Components support
  */
 
-const IS_VAR = '__isVar__'
+const IS_VAR = 'isVar'
 
 type VariableIn<A = any> = {
   val: A
@@ -23,25 +23,19 @@ export type Variable<A = any> = VariableIn<A> & {
 }
 
 export const createVariable = <A extends string | number = any>(props: VariableIn<A>) => {
-  if (isVariable(props)) {
-    return props
-  }
+  if (isVariable(props)) return props
   return {
     [IS_VAR]: true,
-    // @ts-ignore
     ...props,
     variable: isWeb ? createCSSVariable(props.name) : '',
   }
 }
 
-// on the client maybe we can change the prototype of variable object toString to keep backwards compat
 export function variableToString(vrble?: any, getValue = false) {
-  if (!vrble) return ''
   if (isVariable(vrble)) {
-    if (getValue) return `${vrble.val}`
-    return `${isWeb ? vrble.variable : vrble.val}`
+    return getValue ? `${vrble.val}` : `${isWeb ? vrble.variable : vrble.val}`
   }
-  return `${vrble}`
+  return `${vrble || ''}`
 }
 
 export function isVariable(v: Variable | any): v is Variable {

package/src/createVariables.ts

@@ -1,3 +1,5 @@
+import { simpleHash } from '@tamagui/helpers'
+
 import { Variable, createVariable, isVariable } from './createVariable'
 
 type DeepTokenObject<Val extends string | number = any> = {
@@ -21,22 +23,20 @@ export const createVariables = <A extends DeepTokenObject>(
   let i = 0
   for (const key in tokens) {
     i++
-    const variableName = isFont ? key.slice(0, 2) : i
     const val = tokens[key]
     if (isVariable(val)) {
       res[key] = val
       continue
     }
-    let name = parentPath ? `${parentPath}-${variableName}` : key
-    if (isFont && name.includes('_')) {
-      name = name.replace(/_[a-z0-9]+/i, '')
-    }
+    const niceKey = simpleHash(key)
+    let name = isFont ? niceKey.slice(0, 2) : i
+    name = parentPath ? `${parentPath}-${name}` : niceKey
     if (val && typeof val === 'object') {
       // recurse
-      res[key] = createVariables(tokens[key] as any, `${name}`)
+      res[key] = createVariables(tokens[key] as any, name)
       continue
     }
-    res[key] = isVariable(val) ? val : createVariable({ val, name, key })
+    res[key] = isVariable(val) ? val : createVariable({ val, name, key: niceKey })
   }
   return res
 }

package/src/helpers/ThemeManager.test.tsx

@@ -0,0 +1,480 @@
+import { getDefaultTamaguiConfig } from '@tamagui/config-default-node'
+import { beforeAll, describe, expect, test } from 'vitest'
+
+import { createTamagui } from '../createTamagui'
+import { ThemeManager } from './ThemeManager'
+
+const conf = getDefaultTamaguiConfig()
+
+describe('ThemeManager', () => {
+  beforeAll(() => {
+    createTamagui(conf)
+  })
+
+  test('Changes theme to dark', () => {
+    const manager = new ThemeManager(
+      {
+        name: 'dark',
+      },
+      'root'
+    )
+    expect(manager.state.name).toBe('dark')
+  })
+
+  test('Given parent theme "dark" and child theme "red" to return theme "dark_red"', () => {
+    const parent = new ThemeManager(
+      {
+        name: 'dark',
+      },
+      'root'
+    )
+    const child = new ThemeManager(
+      {
+        name: 'red',
+      },
+      parent
+    )
+    expect(parent.state.name).toBe('dark')
+    expect(child.state.name).toBe('dark_red')
+  })
+
+  test('Given parent theme "dark", child theme "red_alt2" and component "Button" returns "dark_red_alt2_Button"', () => {
+    const parent = new ThemeManager(
+      {
+        name: 'dark',
+      },
+      'root'
+    )
+    const child1 = new ThemeManager(
+      {
+        name: 'red',
+      },
+      parent
+    )
+    expect(child1.state.name).toBe('dark_red')
+    const child2 = new ThemeManager(
+      {
+        name: 'alt2',
+        componentName: 'Button',
+      },
+      child1
+    )
+    expect(child2.state.name).toBe('dark_red_alt2_Button')
+  })
+
+  test('Given parent theme "dark", child theme "red" and component "Button" returns "dark_red_Button"', () => {
+    const parent = new ThemeManager(
+      {
+        name: 'dark',
+      },
+      'root'
+    )
+    const child1 = new ThemeManager(
+      {
+        name: 'red',
+      },
+      parent
+    )
+    expect(child1.state.name).toBe('dark_red')
+    const child2 = new ThemeManager(
+      {
+        componentName: 'Button',
+      },
+      child1
+    )
+    expect(child2.state.name).toBe('dark_red_Button')
+  })
+
+  test('Given parent theme "dark", child theme "red" and missing component "Card" returns "dark_red"', () => {
+    const parent = new ThemeManager(
+      {
+        name: 'dark',
+      },
+      'root'
+    )
+    const child1 = new ThemeManager(
+      {
+        name: 'red',
+      },
+      parent
+    )
+    expect(child1.state.name).toBe('dark_red')
+    const child2 = new ThemeManager(
+      {
+        componentName: 'Card',
+      },
+      child1
+    )
+    expect(child2.state.name).toBe('dark_red')
+  })
+
+  test('Changes "light" to "dark"', () => {
+    const parent = new ThemeManager(
+      {
+        name: 'light',
+      },
+      'root'
+    )
+    const child = new ThemeManager(
+      {
+        name: 'dark',
+      },
+      parent
+    )
+    expect(parent.state.name).toBe('light')
+    expect(child.state.name).toBe('dark')
+  })
+
+  test('Inverts "light" to "dark"', () => {
+    const parent = new ThemeManager(
+      {
+        name: 'light',
+      },
+      'root'
+    )
+    const child1 = new ThemeManager(
+      {
+        inverse: true,
+      },
+      parent
+    )
+    expect(child1.state.name).toBe('dark')
+  })
+
+  test('Inverts "light_red" to "dark_red"', () => {
+    const parent = new ThemeManager(
+      {
+        name: 'light',
+      },
+      'root'
+    )
+    const child1 = new ThemeManager(
+      {
+        name: 'red',
+        inverse: true,
+      },
+      parent
+    )
+    expect(child1.state.name).toBe('dark_red')
+  })
+
+  test('Updates state', () => {
+    const parent = new ThemeManager(
+      {
+        name: 'light',
+      },
+      'root'
+    )
+    const newState = parent.updateState({
+      name: 'dark',
+    })
+    expect(newState).toMatchInlineSnapshot(`
+      {
+        "className": "t_dark",
+        "name": "dark",
+        "parentName": "",
+        "theme": {
+          "background": {
+            "isVar": true,
+            "key": "color-2",
+            "name": "background",
+            "val": "#000",
+            "variable": "",
+          },
+          "color": {
+            "isVar": true,
+            "key": "color-1",
+            "name": "color",
+            "val": "#fff",
+            "variable": "",
+          },
+        },
+      }
+    `)
+    expect(parent.state.name).toBe('dark')
+  })
+
+  test('Returns parent on empty', () => {
+    const parent = new ThemeManager(
+      {
+        name: 'light',
+      },
+      'root'
+    )
+    const child = new ThemeManager(
+      {
+        name: null,
+      },
+      parent
+    )
+    expect(child).toBe(parent)
+  })
+
+  test('Resets theme', () => {
+    const parent = new ThemeManager(
+      {
+        name: 'light',
+      },
+      'root'
+    )
+    const child = new ThemeManager(
+      {
+        name: 'dark',
+      },
+      parent
+    )
+    expect(child.state.name).toBe('dark')
+    expect(child.parentManager).toBe(parent)
+    const child2 = new ThemeManager(
+      {
+        reset: true,
+      },
+      child
+    )
+    expect(child2.parentManager).toBe(child)
+    expect(child2.state.name).toBe('light')
+  })
+
+  test('Nested invert and reset', () => {
+    const parent = new ThemeManager(
+      {
+        name: 'light',
+      },
+      'root'
+    )
+    const child = new ThemeManager(
+      {
+        name: 'dark',
+      },
+      parent
+    )
+    const child2 = new ThemeManager(
+      {
+        reset: true,
+      },
+      child
+    )
+    const child3 = new ThemeManager(
+      {
+        inverse: true,
+      },
+      child2
+    )
+    expect(child3.state.name).toBe('dark')
+  })
+
+  test('Updates from null the new theme nested 3 themes', () => {
+    const a = new ThemeManager(
+      {
+        name: 'dark',
+      },
+      'root'
+    )
+    const b = new ThemeManager(
+      {
+        name: 'red',
+      },
+      a
+    )
+    expect(b.state.name).toBe('dark_red')
+    const c = new ThemeManager(
+      {
+        name: 'alt2',
+      },
+      b
+    )
+    expect(c.state.name).toBe('dark_red_alt2')
+  })
+
+  test('Ignored dup themes', () => {
+    const a = new ThemeManager(
+      {
+        name: 'dark',
+      },
+      'root'
+    )
+    const b = new ThemeManager(
+      {
+        name: 'dark',
+      },
+      a
+    )
+    expect(b === a).toBe(true)
+  })
+
+  test('Nested component themes fallback to grandparents', () => {
+    const parent = new ThemeManager(
+      {
+        name: 'dark',
+      },
+      'root'
+    )
+    const child = new ThemeManager(
+      {
+        name: 'red',
+        componentName: 'Button',
+      },
+      parent
+    )
+    const child2 = new ThemeManager(
+      {
+        name: 'blue',
+      },
+      child
+    )
+    expect(child2.state.name).toBe('dark_blue')
+    const child3 = new ThemeManager(
+      {
+        componentName: 'Button',
+      },
+      child2
+    )
+    expect(child3.state.name).toBe('dark_blue_Button')
+  })
+
+  test(`Component theme with sub component that doesn't exist keeps same theme`, () => {
+    const parent = new ThemeManager(
+      {
+        name: 'dark',
+      },
+      'root'
+    )
+    const child = new ThemeManager(
+      {
+        name: 'red',
+        componentName: 'Button',
+      },
+      parent
+    )
+    const child2 = new ThemeManager(
+      {
+        componentName: 'Spacer',
+      },
+      child
+    )
+    expect(child2).toBe(child)
+  })
+
+  test(`Doesn't find invalid parent when only passing component`, () => {
+    expect(!!conf.themes['dark_Card']).toBeTruthy()
+
+    const parent = new ThemeManager(
+      {
+        name: 'dark_red',
+      },
+      'root'
+    )
+
+    const child = new ThemeManager(
+      {
+        componentName: 'Card',
+      },
+      parent
+    )
+
+    // dont find dark_Card because dark_red is highest it should climb
+    expect(child.state.name).toBe(parent.state.name)
+  })
+
+  test(`Finds sub-theme when componentName and name are passed but componentName doesn't exist`, () => {
+    const parent = new ThemeManager(
+      {
+        name: 'dark',
+      },
+      'root'
+    )
+
+    const child = new ThemeManager(
+      {
+        name: 'red',
+        componentName: 'Missing',
+      },
+      parent
+    )
+
+    // dont find dark_Card because dark_red is highest it should climb
+    expect(child.state.name).toBe('dark_red')
+  })
+
+  test(`Uses the full className without the light/dark prefix`, () => {
+    const parent = new ThemeManager(
+      {
+        name: 'dark',
+      },
+      'root'
+    )
+    const child = new ThemeManager(
+      {
+        name: 'red_alt2',
+      },
+      parent
+    )
+    expect(child.state.className).toBe('t_red_alt2')
+
+    const child2 = new ThemeManager(
+      {
+        name: 'red',
+      },
+      parent
+    )
+    const child3 = new ThemeManager(
+      {
+        name: 'alt2',
+      },
+      child2
+    )
+    expect(child3.state.className).toBe('t_red_alt2')
+  })
+
+  test(`Finds component dark_red + Button`, () => {
+    const parent = new ThemeManager(
+      {
+        name: 'dark_red',
+      },
+      'root'
+    )
+    const child = new ThemeManager(
+      {
+        name: 'dark_red',
+        componentName: 'Button',
+      },
+      parent
+    )
+    expect(child.state.className).toBe('t_red_Button')
+    expect(child.state.name).toBe('dark_red_Button')
+  })
+
+  test(`Drops componentName if only regular name found at stronger level`, () => {
+    const parent = new ThemeManager(
+      {
+        name: 'dark_red',
+      },
+      'root'
+    )
+    const child = new ThemeManager(
+      {
+        name: 'alt1',
+        componentName: 'Button',
+      },
+      parent
+    )
+    expect(child.state.name).toBe('dark_red_alt1')
+  })
+
+  test(`Component name + theme change when nested already`, () => {
+    const parent = new ThemeManager(
+      {
+        name: 'dark_red',
+      },
+      'root'
+    )
+    const child = new ThemeManager(
+      {
+        name: 'yellow',
+        componentName: 'Button',
+      },
+      parent
+    )
+    expect(child.state.name).toBe('dark_yellow_Button')
+  })
+})