@tamagui/config-v5 0.0.0-bootstrap.0 → 3.0.0-beta.643.1

package/src/create-theme/createTheme.tsx

@@ -0,0 +1,126 @@
+import type {
+  CreateThemeOptions,
+  CreateThemePalette,
+  GenericTheme,
+  ThemeMask,
+} from './createThemeTypes'
+import { isMinusZero } from './isMinusZero'
+import { setThemeInfo } from './themeInfo'
+
+const identityCache = new Map()
+
+export function createThemeWithPalettes<
+  Definition extends ThemeMask,
+  Extras extends GenericTheme = {},
+>(
+  palettes: Record<string, CreateThemePalette>,
+  defaultPalette: string,
+  definition: Definition,
+  options?: CreateThemeOptions,
+  name?: string,
+  skipCache = false
+): {
+  [key in keyof Definition | keyof Extras]: string
+} {
+  if (!palettes[defaultPalette]) {
+    throw new Error(`No palette: ${defaultPalette}`)
+  }
+  const newDef = { ...definition }
+  for (const key in definition) {
+    let val = definition[key]
+    if (typeof val === 'string') {
+      const [altPaletteName, altPaletteIndex] = val.split('.')
+      const parentName = defaultPalette.split('_')[0]
+      const altPalette =
+        palettes[altPaletteName] || palettes[`${parentName}_${altPaletteName}`]
+
+      if (altPalette && /^-?\d+$/.test(altPaletteIndex)) {
+        const next = getValue(altPalette, +altPaletteIndex)
+        if (typeof next !== 'undefined') {
+          newDef[key] = next as any
+        }
+      }
+    }
+  }
+
+  return createTheme(palettes[defaultPalette], newDef, options, name, skipCache)
+}
+
+export function createTheme<
+  Definition extends ThemeMask,
+  Extras extends GenericTheme = {},
+>(
+  palette: CreateThemePalette,
+  definition: Definition,
+  options?: CreateThemeOptions,
+  name?: string,
+  skipCache = false
+): {
+  [key in keyof Definition | keyof Extras]: string
+} {
+  const cacheKey = skipCache ? '' : JSON.stringify([name, palette, definition, options])
+  if (!skipCache) {
+    if (identityCache.has(cacheKey)) {
+      return identityCache.get(cacheKey)
+    }
+  }
+
+  const theme = {
+    ...(Object.fromEntries(
+      Object.entries(definition).map(([key, offset]) => {
+        return [key, getValue(palette, offset)]
+      })
+    ) as any),
+    ...options?.nonInheritedValues,
+  }
+
+  setThemeInfo(theme, { palette, definition, options, name })
+
+  if (cacheKey) {
+    identityCache.set(cacheKey, theme)
+  }
+
+  return theme
+}
+
+const getValue = (palette: CreateThemePalette, value: string | number) => {
+  if (!palette) {
+    throw new Error(`No palette!`)
+  }
+  if (typeof value === 'string') {
+    return value
+  }
+  const max = palette.length - 1
+  const isPositive = value === 0 ? !isMinusZero(value) : value >= 0
+  const next = isPositive ? value : max + value
+  const index = Math.min(Math.max(0, next), max)
+  return palette[index]
+}
+
+type SubThemeKeys<ParentKeys, ChildKeys> = `${ParentKeys extends string
+  ? ParentKeys
+  : never}_${ChildKeys extends string ? ChildKeys : never}`
+
+type ChildGetter<Name extends string | number | symbol, Theme extends GenericTheme> = (
+  name: Name,
+  theme: Theme
+) => { [key: string]: Theme }
+
+export function addChildren<
+  Themes extends { [key: string]: GenericTheme },
+  GetChildren extends ChildGetter<keyof Themes, Themes[keyof Themes]>,
+>(
+  themes: Themes,
+  getChildren: GetChildren
+): Themes & {
+  [key in SubThemeKeys<keyof Themes, keyof ReturnType<GetChildren>>]: Themes[keyof Themes]
+} {
+  const out = { ...themes }
+  for (const key in themes) {
+    const subThemes = getChildren(key, themes[key])
+    for (const sKey in subThemes) {
+      out[`${key}_${sKey}`] = subThemes[sKey] as any
+    }
+  }
+  return out as any
+}

package/src/create-theme/createThemeTypes.tsx

@@ -0,0 +1,85 @@
+import type { Variable } from '@tamagui/web'
+
+export type CreateThemePalette = (string | Variable)[]
+
+export type ThemeMask = Record<string, string | number>
+
+export type MaskOptions = {
+  palette?: CreateThemePalette
+  override?: Partial<ThemeMask>
+  overrideStrategy?: 'shift' | 'swap'
+  overrideSwap?: Partial<ThemeMask>
+  overrideShift?: Partial<ThemeMask>
+  skip?: Partial<ThemeMask>
+  strength?: number
+  max?: number
+  min?: number
+  parentName?: string
+}
+
+export type GenericTheme = { [key: string]: string | Variable }
+
+export type MaskFunction = <A extends ThemeMask>(template: A, options: MaskOptions) => A
+
+export type CreateMask = {
+  name: string
+  mask: MaskFunction
+}
+
+export type CreateThemeOptions = {
+  nonInheritedValues?: GenericTheme
+}
+
+export type Palette = string[]
+
+export type Template = {
+  [key: string]: number | string
+}
+
+export type ThemeUsingMask<Masks = string> = MaskOptions & {
+  mask: Masks
+  avoidNestingWithin?: string[]
+  childOptions?: MaskOptions & {
+    mask?: Masks
+  }
+}
+
+export type ThemeUsingTemplate = CreateThemeOptions & {
+  palette?: string
+  template: string
+}
+
+type ThemePreDefined = {
+  theme: { [key: string]: string }
+}
+
+export type Theme<Masks = string> =
+  | ThemePreDefined
+  | ThemeUsingTemplate
+  | ThemeUsingMask<Masks>
+
+export type ThemeWithParent<Masks = string> = Theme<Masks> & {
+  parent: string
+}
+
+export type PaletteDefinitions = {
+  [key: string]: Palette
+}
+
+export type ThemeDefinition<Masks extends string = string> =
+  | Theme<Masks>
+  | ThemeWithParent<Masks>[]
+
+type UnionableString = string & {}
+
+export type ThemeDefinitions<Masks extends string = string> = {
+  [key: string]: ThemeDefinition<Masks | UnionableString>
+}
+
+export type TemplateDefinitions = {
+  [key: string]: Template
+}
+
+export type MaskDefinitions = {
+  [key: string]: CreateMask | CreateMask['mask']
+}

package/src/create-theme/helpers.tsx

@@ -0,0 +1,44 @@
+type ObjectType = Record<PropertyKey, unknown>
+
+type PickByValue<OBJ_T, VALUE_T> = // From https://stackoverflow.com/a/55153000
+  Pick<OBJ_T, { [K in keyof OBJ_T]: OBJ_T[K] extends VALUE_T ? K : never }[keyof OBJ_T]>
+
+type ObjectEntries<OBJ_T> = // From https://stackoverflow.com/a/60142095
+  { [K in keyof OBJ_T]: [keyof PickByValue<OBJ_T, OBJ_T[K]>, OBJ_T[K]] }[keyof OBJ_T][]
+
+export const objectKeys = <O extends object>(obj: O) => Object.keys(obj) as Array<keyof O>
+
+export function objectEntries<OBJ_T extends ObjectType>(
+  obj: OBJ_T
+): ObjectEntries<OBJ_T> {
+  return Object.entries(obj) as ObjectEntries<OBJ_T>
+}
+
+type EntriesType =
+  | [PropertyKey, unknown][]
+  | ReadonlyArray<readonly [PropertyKey, unknown]>
+
+// Existing Utils
+type DeepWritable<OBJ_T> = { -readonly [P in keyof OBJ_T]: DeepWritable<OBJ_T[P]> }
+type UnionToIntersection<UNION_T> = // From https://stackoverflow.com/a/50375286
+  (UNION_T extends any ? (k: UNION_T) => void : never) extends (k: infer I) => void
+    ? I
+    : never
+
+// New Utils
+type UnionObjectFromArrayOfPairs<ARR_T extends EntriesType> =
+  DeepWritable<ARR_T> extends (infer R)[]
+    ? R extends [infer key, infer val]
+      ? { [prop in key & PropertyKey]: val }
+      : never
+    : never
+type MergeIntersectingObjects<ObjT> = { [key in keyof ObjT]: ObjT[key] }
+type EntriesToObject<ARR_T extends EntriesType> = MergeIntersectingObjects<
+  UnionToIntersection<UnionObjectFromArrayOfPairs<ARR_T>>
+>
+
+export function objectFromEntries<ARR_T extends EntriesType>(
+  arr: ARR_T
+): EntriesToObject<ARR_T> {
+  return Object.fromEntries(arr) as EntriesToObject<ARR_T>
+}

package/src/create-theme/index.ts

@@ -0,0 +1,6 @@
+export * from './createTheme'
+export * from './masks'
+export * from './combineMasks'
+export * from './applyMask'
+export * from './createThemeTypes'
+export * from './helpers'

package/src/create-theme/isMinusZero.tsx

@@ -0,0 +1,3 @@
+export function isMinusZero(value: number): boolean {
+  return 1 / value === Number.NEGATIVE_INFINITY
+}

package/src/create-theme/masks.tsx

@@ -0,0 +1,137 @@
+import type { CreateMask, MaskFunction, MaskOptions } from './createThemeTypes'
+import { objectEntries, objectFromEntries } from './helpers'
+import { isMinusZero } from './isMinusZero'
+
+export const createMask = <C extends CreateMask | MaskFunction>(
+  createMask: C
+): CreateMask =>
+  typeof createMask === 'function'
+    ? { name: createMask.name || 'unnamed', mask: createMask }
+    : createMask
+
+export const skipMask: CreateMask = {
+  name: 'skip-mask',
+  mask: (template, opts) => {
+    const { skip } = opts
+    const result = Object.fromEntries(
+      Object.entries(template)
+        .filter(([k]) => !skip || !(k in skip))
+        .map(([k, v]) => [k, applyOverrides(k, v, opts)])
+    ) as typeof template
+
+    return result
+  },
+}
+
+function applyOverrides(key: string, value: number | string, opts: MaskOptions) {
+  let override: string | number | undefined
+  let strategy = opts.overrideStrategy
+
+  const overrideSwap = opts.overrideSwap?.[key]
+  if (typeof overrideSwap !== 'undefined') {
+    override = overrideSwap
+    strategy = 'swap'
+  } else {
+    const overrideShift = opts.overrideShift?.[key]
+    if (typeof overrideShift !== 'undefined') {
+      override = overrideShift
+      strategy = 'shift'
+    } else {
+      const overrideDefault = opts.override?.[key]
+      if (typeof overrideDefault !== 'undefined') {
+        override = overrideDefault
+        strategy = opts.overrideStrategy
+      }
+    }
+  }
+
+  if (typeof override === 'undefined') return value
+  if (typeof override === 'string') return value
+
+  if (strategy === 'swap') {
+    return override
+  }
+
+  return value
+}
+
+export const createIdentityMask = (): CreateMask => ({
+  name: 'identity-mask',
+  mask: (template, opts) => skipMask.mask(template, opts),
+})
+
+export const createInverseMask = (): CreateMask => {
+  const mask: CreateMask = {
+    name: 'inverse-mask',
+    mask: (template, opts) => {
+      const inversed = objectFromEntries(
+        objectEntries(template).map(([k, v]) => [k, -v])
+      ) as any
+      return skipMask.mask(inversed, opts)
+    },
+  }
+  return mask
+}
+
+type ShiftMaskOptions = { inverse?: boolean }
+
+export const createShiftMask = (
+  { inverse }: ShiftMaskOptions = {},
+  defaultOptions?: MaskOptions
+): CreateMask => {
+  const mask: CreateMask = {
+    name: 'shift-mask',
+    mask: (template, opts) => {
+      const {
+        override,
+        overrideStrategy = 'shift',
+        max: maxIn,
+        palette,
+        min = 0,
+        strength = 1,
+      } = { ...defaultOptions, ...opts }
+      const values = Object.entries(template)
+      const max =
+        maxIn ?? (palette ? Object.values(palette).length - 1 : Number.POSITIVE_INFINITY)
+      const out = {}
+      for (const [key, value] of values) {
+        if (typeof value === 'string') continue
+        if (typeof override?.[key] === 'number') {
+          const overrideVal = override[key] as number
+          out[key] = overrideStrategy === 'shift' ? value + overrideVal : overrideVal
+          continue
+        }
+        if (typeof override?.[key] === 'string') {
+          out[key] = override[key]
+          continue
+        }
+        const isPositive = value === 0 ? !isMinusZero(value) : value >= 0
+        const direction = isPositive ? 1 : -1
+        const invert = inverse ? -1 : 1
+        const next = value + strength * direction * invert
+        const clamped = isPositive
+          ? Math.max(min, Math.min(max, next))
+          : Math.min(-min, Math.max(-max, next))
+
+        out[key] = clamped
+      }
+
+      const skipped = skipMask.mask(out, opts) as typeof template
+      return skipped
+    },
+  }
+  return mask
+}
+
+export const createWeakenMask = (defaultOptions?: MaskOptions): CreateMask => ({
+  name: 'soften-mask',
+  mask: createShiftMask({}, defaultOptions).mask,
+})
+
+export const createSoftenMask: (defaultOptions?: MaskOptions) => CreateMask =
+  createWeakenMask
+
+export const createStrengthenMask = (defaultOptions?: MaskOptions): CreateMask => ({
+  name: 'strengthen-mask',
+  mask: createShiftMask({ inverse: true }, defaultOptions).mask,
+})

package/src/create-theme/tests.tsx

@@ -0,0 +1,28 @@
+import { applyMask } from './applyMask'
+import { createTheme } from './createTheme'
+import { createStrengthenMask, createWeakenMask } from './masks'
+
+// --- tests ---
+if (process.env.NODE_ENV === 'development') {
+  const palette = ['0', '1', '2', '3', '-3', '-2', '-1', '-0']
+  const template = { bg: 1, fg: -1 }
+
+  const stongerMask = createStrengthenMask()
+  const weakerMask = createWeakenMask()
+
+  const theme = createTheme(palette, template)
+  if (theme.bg !== '1') throw `❌`
+  if (theme.fg !== '-1') throw `❌`
+
+  const str = applyMask(theme, stongerMask)
+  if (str.bg !== '0') throw `❌`
+  if (str.fg !== '-0') throw `❌`
+
+  const weak = applyMask(theme, weakerMask)
+  if (weak.bg !== '2') throw `❌`
+  if (weak.fg !== '-2') throw `❌`
+
+  const weak2 = applyMask(theme, weakerMask, { strength: 2 })
+  if (weak2.bg !== '3') throw `❌`
+  if (weak2.fg !== '-3') throw `❌`
+}

package/src/create-theme/themeInfo.tsx

@@ -0,0 +1,36 @@
+import type {
+  CreateThemeOptions,
+  CreateThemePalette,
+  GenericTheme,
+  ThemeMask,
+} from './createThemeTypes'
+
+export type ThemeInfo = {
+  palette: CreateThemePalette
+  definition: ThemeMask
+  options?: CreateThemeOptions
+  cache: Map<any, any>
+}
+
+const THEME_INFO = new Map<string, ThemeInfo>()
+
+export const getThemeInfo = (
+  theme: GenericTheme | ThemeMask,
+  name?: string
+): ThemeInfo | undefined => {
+  return THEME_INFO.get(name || JSON.stringify(theme))
+}
+
+export const setThemeInfo = (
+  theme: GenericTheme | ThemeMask,
+  info: Pick<ThemeInfo, 'palette' | 'definition' | 'options'> & {
+    name?: string
+  }
+): void => {
+  const next = {
+    ...info,
+    cache: new Map(),
+  }
+  THEME_INFO.set(info.name || JSON.stringify(theme), next)
+  THEME_INFO.set(JSON.stringify(info.definition), next)
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './theme-builder'
+export * from './v5/v5-subtle-builder'