@draftbit/theme 50.6.2-531e17.2 → 50.6.2-8430ca.2

package/src/createThemeValuesProxy.ts

@@ -1,5 +1,5 @@
 import { ThemeValues, Breakpoints } from "./types";
-import { Platform, TextStyle } from "react-native";
+import { Platform } from "react-native";
 import { isObject } from "lodash";
 
 /**
@@ -23,20 +23,16 @@ export default function createThemeValuesProxy(
     get: (
       target: ThemeValues,
       key: string
-    ): string | number | ThemeValues | TextStyle | undefined => {
+    ): string | number | ThemeValues | undefined => {
       const currentValue = target[key];
-
-      const valueAsThemeValues = isObject(currentValue)
-        ? (currentValue as ThemeValues)
-        : undefined;
-
-      if (valueAsThemeValues) {
+      if (!isObject(currentValue)) {
+        return currentValue;
+      } else {
         const platformKeys = ["ios", "android", "web", "macos", "windows"];
         const breakpointKeys = Object.keys(breakpoints);
         const lightDarkKeys = ["light", "dark"];
-
         const keysType = getKeysType(
-          valueAsThemeValues,
+          currentValue,
           platformKeys,
           breakpointKeys,
           lightDarkKeys
@@ -44,7 +40,7 @@ export default function createThemeValuesProxy(
 
         if (keysType === "default") {
           return createThemeValuesProxy(
-            valueAsThemeValues,
+            currentValue,
             breakpoints,
             deviceWidth,
             devicePlatform,
@@ -52,7 +48,7 @@ export default function createThemeValuesProxy(
           );
         } else if (keysType === "platform") {
           return getPlatformValue(
-            valueAsThemeValues,
+            currentValue,
             breakpoints,
             deviceWidth,
             devicePlatform,
@@ -60,7 +56,7 @@ export default function createThemeValuesProxy(
           );
         } else if (keysType === "breakpoint") {
           return getBreakpointValue(
-            valueAsThemeValues,
+            currentValue,
             breakpoints,
             deviceWidth,
             devicePlatform,
@@ -68,7 +64,7 @@ export default function createThemeValuesProxy(
           );
         } else if (keysType === "lightDark") {
           return getLightDarkValue(
-            valueAsThemeValues,
+            currentValue,
             breakpoints,
             deviceWidth,
             devicePlatform,
@@ -77,8 +73,6 @@ export default function createThemeValuesProxy(
         } else {
           return undefined;
         }
-      } else {
-        return currentValue;
       }
     },
     set: () => {
@@ -146,40 +140,36 @@ function allFalse(a: boolean, b: boolean, c: boolean, d: boolean) {
 }
 
 function getPlatformValue(
-  value: ThemeValues | undefined,
+  value: ThemeValues,
   breakpoints: Breakpoints,
   deviceWidth: number,
   devicePlatform: typeof Platform.OS,
   currentLightDarkSelection: "light" | "dark"
 ) {
-  const currentPlatformValue = value?.[devicePlatform] ?? value?.default;
-  const valueAsThemeValues = isObject(currentPlatformValue)
-    ? (currentPlatformValue as ThemeValues)
-    : undefined;
-
-  if (valueAsThemeValues) {
+  const currentPlatformValue = value[devicePlatform] ?? value.default;
+  if (!isObject(currentPlatformValue)) {
+    return currentPlatformValue;
+  } else {
     return createThemeValuesProxy(
-      valueAsThemeValues,
+      currentPlatformValue,
       breakpoints,
       deviceWidth,
       devicePlatform,
       currentLightDarkSelection
     );
-  } else {
-    return currentPlatformValue;
   }
 }
 
 function getBreakpointValue(
-  value: ThemeValues | undefined,
+  value: ThemeValues,
   breakpoints: Breakpoints,
   deviceWidth: number,
   devicePlatform: typeof Platform.OS,
   currentLightDarkSelection: "light" | "dark"
 ) {
-  const keysToBreakpointValue: [string, number][] = Object.keys(
-    value ?? {}
-  ).map((key) => [key, breakpoints[key]]);
+  const keysToBreakpointValue: [string, number][] = Object.keys(value).map(
+    (key) => [key, breakpoints[key]]
+  );
   const orderedBreakpoints = keysToBreakpointValue.sort(([_, val]) => val);
   let currentBreakpointKey = "";
   for (const [breakpointKey, breakpointValue] of orderedBreakpoints) {
@@ -187,47 +177,39 @@ function getBreakpointValue(
       currentBreakpointKey = breakpointKey;
     }
   }
-  const currentBreakpointValue =
-    value?.[currentBreakpointKey] ?? value?.default;
-  const valueAsThemeValues = isObject(currentBreakpointKey)
-    ? (currentBreakpointKey as ThemeValues)
-    : undefined;
-
-  if (valueAsThemeValues) {
+  const currentBreakpointValue = value[currentBreakpointKey] ?? value.default;
+  if (!isObject(currentBreakpointValue)) {
+    return currentBreakpointValue;
+  } else {
     return createThemeValuesProxy(
-      valueAsThemeValues,
+      currentBreakpointValue,
       breakpoints,
       deviceWidth,
       devicePlatform,
       currentLightDarkSelection
     );
-  } else {
-    return currentBreakpointValue;
   }
 }
 
 function getLightDarkValue(
-  value: ThemeValues | undefined,
+  value: ThemeValues,
   breakpoints: Breakpoints,
   deviceWidth: number,
   devicePlatform: typeof Platform.OS,
   currentLightDarkSelection: "light" | "dark"
 ) {
   const currentLightDarkValue =
-    value?.[currentLightDarkSelection] ?? value?.default;
-  const valueAsThemeValues = isObject(currentLightDarkSelection)
-    ? (currentLightDarkSelection as ThemeValues)
-    : undefined;
+    value[currentLightDarkSelection] ?? value.default;
 
-  if (valueAsThemeValues) {
+  if (!isObject(currentLightDarkValue)) {
+    return currentLightDarkValue;
+  } else {
     return createThemeValuesProxy(
-      valueAsThemeValues,
+      currentLightDarkValue,
       breakpoints,
       deviceWidth,
       devicePlatform,
       currentLightDarkSelection
     );
-  } else {
-    return currentLightDarkValue;
   }
 }

package/src/types.ts

@@ -1,7 +1,5 @@
-import { TextStyle } from "react-native";
-
 export type ThemeValues = {
-  [key: string]: string | number | TextStyle | ThemeValues;
+  [key: string]: string | number | ThemeValues;
 };
 
 export type Theme = {
@@ -13,21 +11,7 @@ export type Theme = {
     foreground?: ThemeValues;
     border?: ThemeValues;
   };
-  typography: {
-    body1?: ThemeValues | TextStyle;
-    body2?: ThemeValues | TextStyle;
-    button?: ThemeValues | TextStyle;
-    caption?: ThemeValues | TextStyle;
-    headline1?: ThemeValues | TextStyle;
-    headline2?: ThemeValues | TextStyle;
-    headline3?: ThemeValues | TextStyle;
-    headline4?: ThemeValues | TextStyle;
-    headline5?: ThemeValues | TextStyle;
-    headline6?: ThemeValues | TextStyle;
-    overline?: ThemeValues | TextStyle;
-    subtitle1?: ThemeValues | TextStyle;
-    subtitle2?: ThemeValues | TextStyle;
-  };
+  typography: { [key: string]: any }; //TODO: Update theme to support typography. Left as 'any' for legacy support until updated and migrated
 };
 
 export type ValidatedTheme = Theme & {
@@ -42,21 +26,6 @@ export type ReadTheme = Theme & {
     foreground?: any;
     border?: any;
   };
-  typography: {
-    body1?: any;
-    body2?: any;
-    button?: any;
-    caption?: any;
-    headline1?: any;
-    headline2?: any;
-    headline3?: any;
-    headline4?: any;
-    headline5?: any;
-    headline6?: any;
-    overline?: any;
-    subtitle1?: any;
-    subtitle2?: any;
-  };
 };
 
 export type ColorPaletteValues = {

package/src/validators.js

@@ -1,17 +1,52 @@
 export function validatePalettes(palettes) {
-    palettes;
+    for (const key of Object.keys(palettes)) {
+        if (typeof key !== "string") {
+            throw new Error(`Invalid palettes object, ${key} is not a string`);
+        }
+        for (const [innerKey, value] of Object.entries(palettes[key])) {
+            if (typeof innerKey !== "string") {
+                throw new Error(`Invalid palette color key, ${innerKey} is not a string`);
+            }
+            if (typeof value !== "string") {
+                throw new Error(`Invalid palette color value, ${value} is not a string`);
+            }
+        }
+    }
 }
 export function validateBreakpoints(breakpoints) {
-    breakpoints;
+    for (const [key, value] of Object.entries(breakpoints)) {
+        if (typeof key !== "string") {
+            throw new Error(`Invalid breakpoint key, ${key} is not a string`);
+        }
+        if (typeof value !== "number") {
+            throw new Error(`Invalid breakpoint value, ${value} is not a number`);
+        }
+    }
 }
 export function validateTheme(theme) {
-    theme;
-}
-export function isTextStyleObject(value) {
-    value;
-    return true;
-}
-export function asThemeValuesObject(value) {
-    return value;
+    function validateThemeValues(themeValue) {
+        if (themeValue === undefined || themeValue === null) {
+            return;
+        }
+        for (const [key, value] of Object.entries(themeValue)) {
+            if (typeof key !== "string") {
+                throw new Error(`Invalid theme key, ${key} is not a string`);
+            }
+            if (value === undefined || value === null) {
+                continue;
+            }
+            else if (typeof value === "object") {
+                validateThemeValues(value);
+            }
+            else if (typeof value !== "string" && typeof value !== "number") {
+                throw new Error(`Invalid theme value, ${value} is not a string, number, or object`);
+            }
+        }
+    }
+    validateThemeValues(theme.colors.branding);
+    validateThemeValues(theme.colors.text);
+    validateThemeValues(theme.colors.foreground);
+    validateThemeValues(theme.colors.background);
+    validateThemeValues(theme.colors.border);
 }
 //# sourceMappingURL=validators.js.map

package/src/validators.js.map

@@ -1 +1 @@
-{"version":3,"file":"validators.js","sourceRoot":"","sources":["validators.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,gBAAgB,CAAC,QAAuB;IACtD,QAAQ,CAAC;AACX,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,WAAwB;IAC1D,WAAW,CAAC;AACd,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,KAAY;IACxC,KAAK,CAAC;AACR,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,KAAU;IAC1C,KAAK,CAAC;IACN,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,KAAU;IAC5C,OAAO,KAAK,CAAC;AACf,CAAC"}
+{"version":3,"file":"validators.js","sourceRoot":"","sources":["validators.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,gBAAgB,CAAC,QAAuB;IACtD,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;QACvC,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;YAC3B,MAAM,IAAI,KAAK,CAAC,4BAA4B,GAAG,kBAAkB,CAAC,CAAC;SACpE;QACD,KAAK,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE;YAC7D,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;gBAChC,MAAM,IAAI,KAAK,CACb,8BAA8B,QAAQ,kBAAkB,CACzD,CAAC;aACH;YACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBAC7B,MAAM,IAAI,KAAK,CACb,gCAAgC,KAAK,kBAAkB,CACxD,CAAC;aACH;SACF;KACF;AACH,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,WAAwB;IAC1D,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;QACtD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;YAC3B,MAAM,IAAI,KAAK,CAAC,2BAA2B,GAAG,kBAAkB,CAAC,CAAC;SACnE;QACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,MAAM,IAAI,KAAK,CAAC,6BAA6B,KAAK,kBAAkB,CAAC,CAAC;SACvE;KACF;AACH,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,KAAY;IACxC,SAAS,mBAAmB,CAAC,UAAwB;QACnD,IAAI,UAAU,KAAK,SAAS,IAAI,UAAU,KAAK,IAAI,EAAE;YACnD,OAAO;SACR;QACD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YACrD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;gBAC3B,MAAM,IAAI,KAAK,CAAC,sBAAsB,GAAG,kBAAkB,CAAC,CAAC;aAC9D;YACD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;gBACzC,SAAS;aACV;iBAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBACpC,mBAAmB,CAAC,KAAK,CAAC,CAAC;aAC5B;iBAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBACjE,MAAM,IAAI,KAAK,CACb,wBAAwB,KAAK,qCAAqC,CACnE,CAAC;aACH;SACF;IACH,CAAC;IACD,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC3C,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACvC,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC7C,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC7C,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AAC3C,CAAC"}

package/src/validators.ts

@@ -1,22 +1,59 @@
 import { ColorPalettes, Breakpoints, Theme, ThemeValues } from "./types";
 
 export function validatePalettes(palettes: ColorPalettes) {
-  palettes;
+  for (const key of Object.keys(palettes)) {
+    if (typeof key !== "string") {
+      throw new Error(`Invalid palettes object, ${key} is not a string`);
+    }
+    for (const [innerKey, value] of Object.entries(palettes[key])) {
+      if (typeof innerKey !== "string") {
+        throw new Error(
+          `Invalid palette color key, ${innerKey} is not a string`
+        );
+      }
+      if (typeof value !== "string") {
+        throw new Error(
+          `Invalid palette color value, ${value} is not a string`
+        );
+      }
+    }
+  }
 }
 
 export function validateBreakpoints(breakpoints: Breakpoints) {
-  breakpoints;
+  for (const [key, value] of Object.entries(breakpoints)) {
+    if (typeof key !== "string") {
+      throw new Error(`Invalid breakpoint key, ${key} is not a string`);
+    }
+    if (typeof value !== "number") {
+      throw new Error(`Invalid breakpoint value, ${value} is not a number`);
+    }
+  }
 }
 
 export function validateTheme(theme: Theme) {
-  theme;
-}
-
-export function isTextStyleObject(value: any): boolean {
-  value;
-  return true;
-}
-
-export function asThemeValuesObject(value: any): ThemeValues | null {
-  return value;
+  function validateThemeValues(themeValue?: ThemeValues) {
+    if (themeValue === undefined || themeValue === null) {
+      return;
+    }
+    for (const [key, value] of Object.entries(themeValue)) {
+      if (typeof key !== "string") {
+        throw new Error(`Invalid theme key, ${key} is not a string`);
+      }
+      if (value === undefined || value === null) {
+        continue;
+      } else if (typeof value === "object") {
+        validateThemeValues(value);
+      } else if (typeof value !== "string" && typeof value !== "number") {
+        throw new Error(
+          `Invalid theme value, ${value} is not a string, number, or object`
+        );
+      }
+    }
+  }
+  validateThemeValues(theme.colors.branding);
+  validateThemeValues(theme.colors.text);
+  validateThemeValues(theme.colors.foreground);
+  validateThemeValues(theme.colors.background);
+  validateThemeValues(theme.colors.border);
 }