@draftbit/theme 50.5.2-f391f6.2 → 50.5.3-22879.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/DefaultTheme.js +1 -1
- package/lib/commonjs/Provider.js +1 -1
- package/lib/commonjs/createThemeValuesProxy.js +1 -1
- package/lib/commonjs/types.js +1 -0
- package/lib/commonjs/validators.js +1 -1
- package/lib/typescript/src/DefaultTheme.js +38 -38
- package/lib/typescript/src/DefaultTheme.js.map +1 -1
- package/lib/typescript/src/Provider.js +38 -10
- package/lib/typescript/src/Provider.js.map +1 -1
- package/lib/typescript/src/createThemeValuesProxy.js +23 -19
- package/lib/typescript/src/createThemeValuesProxy.js.map +1 -1
- package/lib/typescript/src/types.d.ts +30 -2
- package/lib/typescript/src/validators.d.ts +2 -1
- package/lib/typescript/src/validators.js +62 -42
- package/lib/typescript/src/validators.js.map +1 -1
- package/lib/typescript/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/src/DefaultTheme.js +38 -38
- package/src/DefaultTheme.js.map +1 -1
- package/src/DefaultTheme.ts +38 -38
- package/src/Provider.js +38 -10
- package/src/Provider.js.map +1 -1
- package/src/Provider.tsx +60 -36
- package/src/createThemeValuesProxy.js +23 -19
- package/src/createThemeValuesProxy.js.map +1 -1
- package/src/createThemeValuesProxy.ts +32 -23
- package/src/types.ts +33 -2
- package/src/validators.js +62 -42
- package/src/validators.js.map +1 -1
- package/src/validators.ts +82 -46
package/src/validators.js
CHANGED
|
@@ -1,52 +1,72 @@
|
|
|
1
|
+
import { z } from "zod";
|
|
2
|
+
const PaletteSchema = z.record(z.string(), z.record(z.string(), z.string()));
|
|
3
|
+
const BreakpointSchema = z.record(z.string(), z.number());
|
|
4
|
+
const TextStyleSchema = z.union([
|
|
5
|
+
z.object({
|
|
6
|
+
fontSize: z.number(),
|
|
7
|
+
}),
|
|
8
|
+
z.object({
|
|
9
|
+
fontFamily: z.string(),
|
|
10
|
+
}),
|
|
11
|
+
z.object({
|
|
12
|
+
letterSpacing: z.number(),
|
|
13
|
+
}),
|
|
14
|
+
z.object({
|
|
15
|
+
lineHeight: z.number(),
|
|
16
|
+
}),
|
|
17
|
+
]);
|
|
18
|
+
const ThemeValuesSchema = z.record(z.string(), z.lazy(() => z.union([z.string(), z.number(), TextStyleSchema, ThemeValuesSchema])));
|
|
19
|
+
const TextStyleOrThemeValuesSchema = z.union([TextStyleSchema, ThemeValuesSchema]);
|
|
20
|
+
const ThemeSchema = z.object({
|
|
21
|
+
name: z.string(),
|
|
22
|
+
colors: z.object({
|
|
23
|
+
branding: ThemeValuesSchema.optional(),
|
|
24
|
+
text: ThemeValuesSchema.optional(),
|
|
25
|
+
background: ThemeValuesSchema.optional(),
|
|
26
|
+
foreground: ThemeValuesSchema.optional(),
|
|
27
|
+
border: ThemeValuesSchema.optional(),
|
|
28
|
+
}),
|
|
29
|
+
typography: z.object({
|
|
30
|
+
body1: TextStyleOrThemeValuesSchema.optional(),
|
|
31
|
+
body2: TextStyleOrThemeValuesSchema.optional(),
|
|
32
|
+
button: TextStyleOrThemeValuesSchema.optional(),
|
|
33
|
+
caption: TextStyleOrThemeValuesSchema.optional(),
|
|
34
|
+
headline1: TextStyleOrThemeValuesSchema.optional(),
|
|
35
|
+
headline2: TextStyleOrThemeValuesSchema.optional(),
|
|
36
|
+
headline3: TextStyleOrThemeValuesSchema.optional(),
|
|
37
|
+
headline4: TextStyleOrThemeValuesSchema.optional(),
|
|
38
|
+
headline5: TextStyleOrThemeValuesSchema.optional(),
|
|
39
|
+
headline6: TextStyleOrThemeValuesSchema.optional(),
|
|
40
|
+
overline: TextStyleOrThemeValuesSchema.optional(),
|
|
41
|
+
subtitle1: TextStyleOrThemeValuesSchema.optional(),
|
|
42
|
+
subtitle2: TextStyleOrThemeValuesSchema.optional(),
|
|
43
|
+
}),
|
|
44
|
+
});
|
|
1
45
|
export function validatePalettes(palettes) {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}
|
|
6
|
-
for (const [innerKey, value] of Object.entries(palettes[key])) {
|
|
7
|
-
if (typeof innerKey !== "string") {
|
|
8
|
-
throw new Error(`Invalid palette color key, ${innerKey} is not a string`);
|
|
9
|
-
}
|
|
10
|
-
if (typeof value !== "string") {
|
|
11
|
-
throw new Error(`Invalid palette color value, ${value} is not a string`);
|
|
12
|
-
}
|
|
13
|
-
}
|
|
46
|
+
const result = PaletteSchema.safeParse(palettes);
|
|
47
|
+
if (!result.success) {
|
|
48
|
+
throw new Error("Invalid palettes object: " + result.error.message);
|
|
14
49
|
}
|
|
15
50
|
}
|
|
16
51
|
export function validateBreakpoints(breakpoints) {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
21
|
-
if (typeof value !== "number") {
|
|
22
|
-
throw new Error(`Invalid breakpoint value, ${value} is not a number`);
|
|
23
|
-
}
|
|
52
|
+
const result = BreakpointSchema.safeParse(breakpoints);
|
|
53
|
+
if (!result.success) {
|
|
54
|
+
throw new Error("Invalid breakpoints object: " + result.error.message);
|
|
24
55
|
}
|
|
25
56
|
}
|
|
26
57
|
export function validateTheme(theme) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
31
|
-
for (const [key, value] of Object.entries(themeValue)) {
|
|
32
|
-
if (typeof key !== "string") {
|
|
33
|
-
throw new Error(`Invalid theme key, ${key} is not a string`);
|
|
34
|
-
}
|
|
35
|
-
if (value === undefined || value === null) {
|
|
36
|
-
continue;
|
|
37
|
-
}
|
|
38
|
-
else if (typeof value === "object") {
|
|
39
|
-
validateThemeValues(value);
|
|
40
|
-
}
|
|
41
|
-
else if (typeof value !== "string" && typeof value !== "number") {
|
|
42
|
-
throw new Error(`Invalid theme value, ${value} is not a string, number, or object`);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
58
|
+
const result = ThemeSchema.safeParse(theme);
|
|
59
|
+
if (!result.success) {
|
|
60
|
+
throw new Error("Invalid theme object: " + result.error.message);
|
|
45
61
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
62
|
+
}
|
|
63
|
+
export function asThemeValuesObject(value) {
|
|
64
|
+
var _a;
|
|
65
|
+
// Text style matches the shape of ThemeValues, but we don't want to treat it as a ThemeValues
|
|
66
|
+
const isTextStyle = TextStyleSchema.safeParse(value).success;
|
|
67
|
+
if (isTextStyle) {
|
|
68
|
+
return null;
|
|
69
|
+
}
|
|
70
|
+
return (_a = ThemeValuesSchema.safeParse(value).data) !== null && _a !== void 0 ? _a : null;
|
|
51
71
|
}
|
|
52
72
|
//# sourceMappingURL=validators.js.map
|
package/src/validators.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"validators.js","sourceRoot":"","sources":["validators.ts"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"file":"validators.js","sourceRoot":"","sources":["validators.ts"],"names":[],"mappings":"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"}
|
package/src/validators.ts
CHANGED
|
@@ -1,59 +1,95 @@
|
|
|
1
1
|
import { ColorPalettes, Breakpoints, Theme, ThemeValues } from "./types";
|
|
2
|
+
import { TextStyle } from "react-native";
|
|
3
|
+
import { z } from "zod";
|
|
4
|
+
|
|
5
|
+
const PaletteSchema: z.ZodType<ColorPalettes> = z.record(
|
|
6
|
+
z.string(),
|
|
7
|
+
z.record(z.string(), z.string())
|
|
8
|
+
);
|
|
9
|
+
|
|
10
|
+
const BreakpointSchema: z.ZodType<Breakpoints> = z.record(
|
|
11
|
+
z.string(),
|
|
12
|
+
z.number()
|
|
13
|
+
);
|
|
14
|
+
|
|
15
|
+
const TextStyleSchema: z.ZodType<TextStyle> = z.union([
|
|
16
|
+
z.object({
|
|
17
|
+
fontSize: z.number(),
|
|
18
|
+
}),
|
|
19
|
+
z.object({
|
|
20
|
+
fontFamily: z.string(),
|
|
21
|
+
}),
|
|
22
|
+
z.object({
|
|
23
|
+
letterSpacing: z.number(),
|
|
24
|
+
}),
|
|
25
|
+
z.object({
|
|
26
|
+
lineHeight: z.number(),
|
|
27
|
+
}),
|
|
28
|
+
]);
|
|
29
|
+
|
|
30
|
+
const ThemeValuesSchema: z.ZodType<ThemeValues> = z.record(
|
|
31
|
+
z.string(),
|
|
32
|
+
z.lazy(() =>
|
|
33
|
+
z.union([z.string(), z.number(), TextStyleSchema, ThemeValuesSchema])
|
|
34
|
+
)
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
const TextStyleOrThemeValuesSchema: z.ZodType<ThemeValues | TextStyle> =
|
|
38
|
+
z.union([TextStyleSchema, ThemeValuesSchema]);
|
|
39
|
+
|
|
40
|
+
const ThemeSchema: z.ZodType<Theme> = z.object({
|
|
41
|
+
name: z.string(),
|
|
42
|
+
colors: z.object({
|
|
43
|
+
branding: ThemeValuesSchema.optional(),
|
|
44
|
+
text: ThemeValuesSchema.optional(),
|
|
45
|
+
background: ThemeValuesSchema.optional(),
|
|
46
|
+
foreground: ThemeValuesSchema.optional(),
|
|
47
|
+
border: ThemeValuesSchema.optional(),
|
|
48
|
+
}),
|
|
49
|
+
typography: z.object({
|
|
50
|
+
body1: TextStyleOrThemeValuesSchema.optional(),
|
|
51
|
+
body2: TextStyleOrThemeValuesSchema.optional(),
|
|
52
|
+
button: TextStyleOrThemeValuesSchema.optional(),
|
|
53
|
+
caption: TextStyleOrThemeValuesSchema.optional(),
|
|
54
|
+
headline1: TextStyleOrThemeValuesSchema.optional(),
|
|
55
|
+
headline2: TextStyleOrThemeValuesSchema.optional(),
|
|
56
|
+
headline3: TextStyleOrThemeValuesSchema.optional(),
|
|
57
|
+
headline4: TextStyleOrThemeValuesSchema.optional(),
|
|
58
|
+
headline5: TextStyleOrThemeValuesSchema.optional(),
|
|
59
|
+
headline6: TextStyleOrThemeValuesSchema.optional(),
|
|
60
|
+
overline: TextStyleOrThemeValuesSchema.optional(),
|
|
61
|
+
subtitle1: TextStyleOrThemeValuesSchema.optional(),
|
|
62
|
+
subtitle2: TextStyleOrThemeValuesSchema.optional(),
|
|
63
|
+
}),
|
|
64
|
+
});
|
|
2
65
|
|
|
3
66
|
export function validatePalettes(palettes: ColorPalettes) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
for (const [innerKey, value] of Object.entries(palettes[key])) {
|
|
9
|
-
if (typeof innerKey !== "string") {
|
|
10
|
-
throw new Error(
|
|
11
|
-
`Invalid palette color key, ${innerKey} is not a string`
|
|
12
|
-
);
|
|
13
|
-
}
|
|
14
|
-
if (typeof value !== "string") {
|
|
15
|
-
throw new Error(
|
|
16
|
-
`Invalid palette color value, ${value} is not a string`
|
|
17
|
-
);
|
|
18
|
-
}
|
|
19
|
-
}
|
|
67
|
+
const result = PaletteSchema.safeParse(palettes);
|
|
68
|
+
if (!result.success) {
|
|
69
|
+
throw new Error("Invalid palettes object: " + result.error.message);
|
|
20
70
|
}
|
|
21
71
|
}
|
|
22
72
|
|
|
23
73
|
export function validateBreakpoints(breakpoints: Breakpoints) {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
28
|
-
if (typeof value !== "number") {
|
|
29
|
-
throw new Error(`Invalid breakpoint value, ${value} is not a number`);
|
|
30
|
-
}
|
|
74
|
+
const result = BreakpointSchema.safeParse(breakpoints);
|
|
75
|
+
if (!result.success) {
|
|
76
|
+
throw new Error("Invalid breakpoints object: " + result.error.message);
|
|
31
77
|
}
|
|
32
78
|
}
|
|
33
79
|
|
|
34
80
|
export function validateTheme(theme: Theme) {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
for (const [key, value] of Object.entries(themeValue)) {
|
|
40
|
-
if (typeof key !== "string") {
|
|
41
|
-
throw new Error(`Invalid theme key, ${key} is not a string`);
|
|
42
|
-
}
|
|
43
|
-
if (value === undefined || value === null) {
|
|
44
|
-
continue;
|
|
45
|
-
} else if (typeof value === "object") {
|
|
46
|
-
validateThemeValues(value);
|
|
47
|
-
} else if (typeof value !== "string" && typeof value !== "number") {
|
|
48
|
-
throw new Error(
|
|
49
|
-
`Invalid theme value, ${value} is not a string, number, or object`
|
|
50
|
-
);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
81
|
+
const result = ThemeSchema.safeParse(theme);
|
|
82
|
+
if (!result.success) {
|
|
83
|
+
throw new Error("Invalid theme object: " + result.error.message);
|
|
53
84
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
export function asThemeValuesObject(value: any): ThemeValues | null {
|
|
88
|
+
// Text style matches the shape of ThemeValues, but we don't want to treat it as a ThemeValues
|
|
89
|
+
const isTextStyle = TextStyleSchema.safeParse(value).success;
|
|
90
|
+
if (isTextStyle) {
|
|
91
|
+
return null;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
return ThemeValuesSchema.safeParse(value).data ?? null;
|
|
59
95
|
}
|