Add yarn tsd test step + small theme type tweaks (#1387)

* Intentionally break type in index.d.ts

* Add tests for Theme.components.<Component>.baseStyle type

* Revert intentional breakage of type, also baseStyle should probably be a Partial to match appearances/sizes types

* Widen Color type to allow string arrays

.github/workflows/ci.yml

@@ -5,8 +5,7 @@ on:
     branches:
       - master
   push:
-    branches:
-      - master
+    branches: ['*']
 
 jobs:
   test:

index.d.ts

@@ -309,7 +309,7 @@ export type ComponentStyles<T extends Components = Components> = {
 }
 
 export interface Theme<TComponents extends Components = Components> {
-  colors: { [color: string]: Color<string | { [group: string]: Color }> }
+  colors: { [color: string]: Color<string | string[] | { [group: string]: Color }> }
   fills: { [fill: string]: Fill }
   intents: { [intent: string]: Intent }
   fontFamilies: FontFamilies
@@ -323,7 +323,7 @@ export interface Theme<TComponents extends Components = Components> {
   components: Partial<ComponentStyles<TComponents>>
 }
 
-export type Color<T extends string | { [group: string]: Color } = string> = T
+export type Color<T extends string | string[] | { [group: string]: Color } = string> = T
 export interface Fill {
   backgroundColor: string
   color: string
@@ -380,7 +380,7 @@ export interface DefaultTheme extends Theme {
   intents: { [intent in DefaultThemeIntent]: Intent }
   components: {
     [Component in Components]: {
-      baseStyle: StyleProps<Component>
+      baseStyle: Partial<StyleProps<Component>>
       appearances: Record<string & ComponentAppearances<Component>, Partial<StyleProps<Component>>>
       sizes: Record<Size & ComponentSizes<Component>, Partial<StyleProps<Component>>>
     }

index.test-d.ts

@@ -1,7 +1,10 @@
 import { expectAssignable, expectType, expectError } from 'tsd'
-import { defaultTheme, mergeTheme, StyleProps, Intent, Theme, Fill, Partial, Pick } from '.'
+import { defaultTheme, mergeTheme, StyleProps, Intent, Theme, Fill, Partial, Pick, Color } from '.'
 
-interface ThemeOverrides extends Partial<Pick<Theme, 'fills' | 'components'>> {
+interface ThemeOverrides extends Partial<Pick<Theme, 'colors' | 'fills' | 'components'>> {
+  colors: {
+    speakers: Color<string[]>
+  }
   fills: {
     awesomeBlue: Fill
   }
@@ -16,6 +19,9 @@ interface ThemeOverrides extends Partial<Pick<Theme, 'fills' | 'components'>> {
 }
 
 const themeOverridesOrAdditions: ThemeOverrides = {
+  colors: {
+    speakers: ['#0f4880', '#1d781d', '#db0a5b', '#8d6708', '#d43900']
+  },
   fills: {
     awesomeBlue: {
       color: '#3492eb',
@@ -50,6 +56,13 @@ expectType<Fill>(defaultTheme.fills.neutral)
 expectType<string>(defaultTheme.fills.neutral.color)
 expectType<string>(defaultTheme.fills.neutral.backgroundColor)
 expectType<Intent>(defaultTheme.intents.info)
+expectType<Intent>(defaultTheme.intents.danger)
+expectType<Intent>(defaultTheme.intents.warning)
+expectType<Intent>(defaultTheme.intents.success)
+expectType<Partial<StyleProps<'Button'>>>(defaultTheme.components.Button.baseStyle)
+expectType<Partial<StyleProps<'Button'>>>(defaultTheme.components.Button.sizes.small)
+expectType<Partial<StyleProps<'Button'>>>(defaultTheme.components.Button.sizes.medium)
+expectType<Partial<StyleProps<'Button'>>>(defaultTheme.components.Button.sizes.large)
 expectType<Partial<StyleProps<'Button'>>>(defaultTheme.components.Button.appearances.minimal)
 expectType<Partial<StyleProps<'Button'>>>(defaultTheme.components.Button.appearances.default)
 expectType<Partial<StyleProps<'Button'>>>(defaultTheme.components.Button.appearances.destructive)
@@ -76,13 +89,22 @@ expectType<Fill>(customTheme.fills.neutral)
 expectType<string>(customTheme.fills.neutral.color)
 expectType<string>(customTheme.fills.neutral.backgroundColor)
 expectType<Intent>(customTheme.intents.info)
+expectType<Intent>(customTheme.intents.danger)
+expectType<Intent>(customTheme.intents.warning)
+expectType<Intent>(customTheme.intents.success)
+expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.baseStyle)
+expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.sizes.small)
+expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.sizes.medium)
+expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.sizes.large)
 expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.appearances.minimal)
 expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.appearances.default)
 expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.appearances.destructive)
 expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.appearances.primary)
+expectType<Partial<StyleProps<'Text'>>>(customTheme.components.Text.sizes[300])
 
 // Ensure new values are strongly typed
 expectAssignable<Fill>(customTheme.fills.awesomeBlue)
+expectType<string[]>(customTheme.colors.speakers)
 
 // Negative case - attempting to reference pseudoselector not defined in index.d.ts
 const themeWithNonExistentPseudoSelector = {
@@ -97,3 +119,9 @@ const themeWithNonExistentPseudoSelector = {
   }
 }
 expectError(mergeTheme(defaultTheme, themeWithNonExistentPseudoSelector))
+
+// Negative case - attempting to assign colors property to string[] (should at least have a key wrapping it)
+const themeWithTopLevelColorsArray = {
+  colors: ['#0f4880', '#1d781d', '#db0a5b', '#8d6708', '#d43900']
+}
+expectError(mergeTheme(defaultTheme, themeWithTopLevelColorsArray))

package.json

@@ -31,7 +31,7 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "test": "yarn lint && yarn jest",
+    "test": "yarn lint && yarn tsd && yarn jest",
     "test:watch": "yarn run test -- --watch",
     "lint": "eslint \"src/**/*.js\" --cache",
     "prepublishOnly": "rm -rf esm commonjs umd && yarn build",