/
component.types.ts
77 lines (65 loc) · 2.58 KB
/
component.types.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import { omit } from "@chakra-ui/object-utils"
import { SystemStyleObject } from "./system.types"
import { ThemeTypings } from "./theme.types"
import { ResponsiveValue } from "./utils"
/* -----------------------------------------------------------------------------
* Style Functions used in the theme
- Single part components: use SystemStyleObject or SystemStyleFunction
- Multi part components: use PartsStyleObject or PartsStyleFunction
* -----------------------------------------------------------------------------*/
export interface StyleConfig {
baseStyle?: SystemStyleObject | SystemStyleFunction
sizes?: { [size: string]: SystemStyleObject | SystemStyleFunction }
variants?: { [variant: string]: SystemStyleObject | SystemStyleFunction }
defaultProps?: {
size?: string
variant?: string
colorScheme?: string
}
}
export interface MultiStyleConfig<T extends Anatomy = Anatomy> {
baseStyle?: PartsStyleObject<T> | PartsStyleFunction<T>
sizes?: { [size: string]: PartsStyleObject<T> | PartsStyleFunction<T> }
variants?: { [variant: string]: PartsStyleObject<T> | PartsStyleFunction<T> }
defaultProps?: StyleConfig["defaultProps"]
}
export type StyleFunctionProps = {
colorScheme: string
colorMode: "light" | "dark"
orientation?: "horizontal" | "vertical"
theme: Record<string, any>
[key: string]: any
}
export type SystemStyleFunction = (
props: StyleFunctionProps,
) => SystemStyleObject
export type SystemStyleInterpolation = SystemStyleObject | SystemStyleFunction
// minimal representation of the anatomy object
type Anatomy = { __type: string }
export type PartsStyleObject<T extends Anatomy = Anatomy> = Partial<
Record<T["__type"], SystemStyleObject>
>
export type PartsStyleFunction<T extends Anatomy = Anatomy> = (
props: StyleFunctionProps,
) => PartsStyleObject<T>
export type PartsStyleInterpolation<T extends Anatomy = Anatomy> =
| PartsStyleObject<T>
| PartsStyleFunction<T>
export interface ThemingProps<ThemeComponent extends string = any> {
variant?: ResponsiveValue<
ThemeComponent extends keyof ThemeTypings["components"]
? ThemeTypings["components"][ThemeComponent]["variants"]
: string
>
size?: ResponsiveValue<
ThemeComponent extends keyof ThemeTypings["components"]
? ThemeTypings["components"][ThemeComponent]["sizes"]
: string
>
colorScheme?: ThemeTypings["colorSchemes"]
orientation?: "vertical" | "horizontal"
styleConfig?: Record<string, any>
}
export function omitThemingProps<T extends ThemingProps>(props: T) {
return omit(props, ["styleConfig", "size", "variant", "colorScheme"])
}