@draftbit/theme 54.0.7 → 54.0.8-6e4257.2

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@draftbit/theme",
-  "version": "54.0.7",
+  "version": "54.0.8-6e4257.2+6e4257f",
   "description": "Draftbit's themeing system",
-  "main": "lib/commonjs/index.js",
+  "main": "./src/index.ts",
+  "react-native": "./src/index.ts",
   "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
@@ -14,8 +15,7 @@
   "scripts": {
     "clean": "rimraf lib",
     "clean:modules": "rimraf node_modules",
-    "build:commonjs": "../../node_modules/.bin/babel src --out-dir lib/commonjs --extensions .tsx,.ts,.js,.jsx",
-    "build": "yarn clean && yarn build:commonjs  && yarn tsc",
+    "build": "yarn clean && yarn tsc",
     "test": "jest",
     "test:coverage": "jest --coverage"
   },
@@ -63,5 +63,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "9d2231245f05d8b42699f98248f2dead6b1188ee"
+  "gitHead": "6e4257f84664265097353e1889a939a833ceb560"
 }

package/lib/commonjs/DefaultTheme.js

@@ -1 +0,0 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _reactNativeTypography=require("react-native-typography");var _createTheme=_interopRequireDefault(require("./createTheme"));var palettes={draftbit:{primary:"rgb(90, 69, 255)",secondary:"rgb(59, 201, 234)",tertiary:"rgb(90,69,255)",background:"rgba(251, 252, 253, 1)",error:"rgba(255, 69, 100, 1)",divider:"rgba(200, 200, 200, 1)",strong:"rgba(18, 20, 44, 1)",medium:"rgba(70, 78, 88, 1)",light:"rgba(165, 173, 183, 1)",text:"#000",success:"#22bb33",warning:"#f0ad4e",info:"#aaaaaa"}};var DraftbitTheme=(0,_createTheme.default)({breakpoints:{},palettes:palettes,theme:{name:"Draftbit",colors:{branding:{primary:palettes.draftbit.primary,secondary:palettes.draftbit.secondary,tertiary:palettes.draftbit.tertiary,accent:palettes.draftbit.secondary},text:{strong:palettes.draftbit.strong,medium:palettes.draftbit.medium,normal:palettes.draftbit.text,light:palettes.draftbit.light,success:palettes.draftbit.success,warning:palettes.draftbit.warning,danger:palettes.draftbit.error},background:{base:palettes.draftbit.background,brand:palettes.draftbit.background,info:palettes.draftbit.info,success:palettes.draftbit.success,warning:palettes.draftbit.warning,danger:palettes.draftbit.error},foreground:{base:palettes.draftbit.light,brand:palettes.draftbit.light,info:palettes.draftbit.strong,success:palettes.draftbit.light,warning:palettes.draftbit.light,danger:palettes.draftbit.light},border:{base:palettes.draftbit.divider,brand:palettes.draftbit.divider,info:palettes.draftbit.divider,success:palettes.draftbit.divider,warning:palettes.draftbit.divider,danger:palettes.draftbit.divider}},typography:{body1:Object.assign({},_reactNativeTypography.systemWeights.regular,{fontSize:16,letterSpacing:0,lineHeight:26}),body2:Object.assign({},_reactNativeTypography.systemWeights.regular,{fontSize:14,letterSpacing:0,lineHeight:22}),button:Object.assign({},_reactNativeTypography.systemWeights.bold,{fontSize:14,letterSpacing:0,lineHeight:16}),caption:Object.assign({},_reactNativeTypography.systemWeights.regular,{fontSize:12,letterSpacing:0,lineHeight:16}),headline1:Object.assign({},_reactNativeTypography.systemWeights.bold,{fontSize:60,letterSpacing:0,lineHeight:71}),headline2:Object.assign({},_reactNativeTypography.systemWeights.bold,{fontSize:48,letterSpacing:0,lineHeight:58}),headline3:Object.assign({},_reactNativeTypography.systemWeights.bold,{fontSize:34,letterSpacing:0,lineHeight:40}),headline4:Object.assign({},_reactNativeTypography.systemWeights.bold,{fontSize:24,letterSpacing:0,lineHeight:34}),headline5:Object.assign({},_reactNativeTypography.systemWeights.bold,{fontSize:20,letterSpacing:0,lineHeight:26}),headline6:Object.assign({},_reactNativeTypography.systemWeights.bold,{fontSize:16,letterSpacing:0,lineHeight:24}),overline:Object.assign({},_reactNativeTypography.systemWeights.regular,{fontSize:12,letterSpacing:2,lineHeight:16}),subtitle1:Object.assign({},_reactNativeTypography.systemWeights.regular,{fontSize:16,letterSpacing:0,lineHeight:26}),subtitle2:Object.assign({},_reactNativeTypography.systemWeights.regular,{fontSize:14,letterSpacing:0,lineHeight:22})}}});var _default=exports.default=DraftbitTheme;

package/lib/commonjs/Provider.js

@@ -1 +0,0 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.withTheme=exports.useTheme=exports.useChangeTheme=exports.Provider=void 0;var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _asyncStorage=_interopRequireDefault(require("@react-native-async-storage/async-storage"));var _createThemeValuesProxy=_interopRequireDefault(require("./createThemeValuesProxy"));var _DefaultTheme=_interopRequireDefault(require("./DefaultTheme"));var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/home/runner/work/react-native-jigsaw/react-native-jigsaw/packages/theme/src/Provider.tsx";var SAVED_SELECTED_THEME_KEY="saved_selected_theme";var ThemeContext=_react.default.createContext({theme:_DefaultTheme.default,changeTheme:function changeTheme(){}});var Provider=exports.Provider=function Provider(_ref){var _themes$find;var themes=_ref.themes,breakpoints=_ref.breakpoints,initialThemeName=_ref.initialThemeName,children=_ref.children;var initialTheme=(_themes$find=themes.find(function(theme){return theme.name===initialThemeName;}))!=null?_themes$find:_DefaultTheme.default;var _React$useState=_react.default.useState(initialTheme),_React$useState2=(0,_slicedToArray2.default)(_React$useState,2),currentTheme=_React$useState2[0],setCurrentTheme=_React$useState2[1];var _React$useState3=_react.default.useState(_reactNative.Dimensions.get("window").width),_React$useState4=(0,_slicedToArray2.default)(_React$useState3,2),deviceWidth=_React$useState4[0],setDeviceWidth=_React$useState4[1];var colorScheme=(0,_reactNative.useColorScheme)();var lightDarkSelection=colorScheme!=null?colorScheme:"light";var changeTheme=_react.default.useCallback(function(themeName,options){var theme=themes.find(function(t){return t.name===themeName;});if(!theme){console.warn("Theme with name",themeName,"not found. Make sure it's passed into the top level ThemeProvider");return;}setCurrentTheme(theme);if((options==null?void 0:options.persistent)===true){_asyncStorage.default.setItem(SAVED_SELECTED_THEME_KEY,themeName).catch(function(e){console.warn("Failed to persist selected theme",e);});}},[themes,setCurrentTheme]);var proxiedTheme=_react.default.useMemo(function(){var createProxiedThemeValue=function createProxiedThemeValue(value){return(0,_createThemeValuesProxy.default)({value:value,breakpoints:breakpoints,deviceWidth:deviceWidth,devicePlatform:_reactNative.Platform.OS,currentLightDarkSelection:lightDarkSelection});};return Object.assign({},currentTheme,{colors:{branding:createProxiedThemeValue(currentTheme.colors.branding),text:createProxiedThemeValue(currentTheme.colors.text),background:createProxiedThemeValue(currentTheme.colors.background),foreground:createProxiedThemeValue(currentTheme.colors.foreground),border:createProxiedThemeValue(currentTheme.colors.border)},typography:createProxiedThemeValue(currentTheme.typography)});},[currentTheme,deviceWidth,breakpoints,lightDarkSelection]);_react.default.useEffect(function(){var listener=_reactNative.Dimensions.addEventListener("change",function(_ref2){var window=_ref2.window;return setDeviceWidth(window.width);});return function(){listener.remove();};});_react.default.useEffect(function(){var run=function(){var _ref3=(0,_asyncToGenerator2.default)(function*(){var savedSelectedThemeName=yield _asyncStorage.default.getItem(SAVED_SELECTED_THEME_KEY);var themeExists=themes.some(function(t){return t.name===savedSelectedThemeName;});if(savedSelectedThemeName){if(themeExists){changeTheme(savedSelectedThemeName);}else{_asyncStorage.default.removeItem(SAVED_SELECTED_THEME_KEY).catch(function(e){console.warn("Failed to reset persisted selected theme",e);});}}});return function run(){return _ref3.apply(this,arguments);};}();run();},[]);return(0,_jsxRuntime.jsx)(ThemeContext.Provider,{value:{theme:proxiedTheme,changeTheme:changeTheme},children:children});};var useTheme=exports.useTheme=function useTheme(){var _React$useContext=_react.default.useContext(ThemeContext),theme=_React$useContext.theme;return theme;};var useChangeTheme=exports.useChangeTheme=function useChangeTheme(){var _React$useContext2=_react.default.useContext(ThemeContext),changeTheme=_React$useContext2.changeTheme;return changeTheme;};var withTheme=exports.withTheme=function withTheme(Component){return _react.default.forwardRef(function(props,ref){var _React$useContext3=_react.default.useContext(ThemeContext),theme=_React$useContext3.theme;return(0,_jsxRuntime.jsx)(Component,Object.assign({},props,{theme:theme,ref:ref}));});};

package/lib/commonjs/createTheme.js

@@ -1 +0,0 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.default=createTheme;var _deepmergeTs=require("deepmerge-ts");var _validators=require("./validators");var _utils=require("./utils");var themeMerge=(0,_deepmergeTs.deepmergeCustom)({enableImplicitDefaultMerging:true,mergeRecords:function mergeRecords(values,utils,meta){var firstValue=values[0];if((0,_utils.isTextStyleObject)(firstValue)){return utils.defaultMergeFunctions.mergeRecords(values.slice(1),utils,meta);}return utils.defaultMergeFunctions.mergeRecords(values,utils,meta);}});function createTheme(_ref){var breakpoints=_ref.breakpoints,palettes=_ref.palettes,theme=_ref.theme,baseTheme=_ref.baseTheme;(0,_validators.validateBreakpoints)(breakpoints);(0,_validators.validatePalettes)(palettes);(0,_validators.validateTheme)(theme);var resultTheme=theme;if(baseTheme){(0,_validators.validateTheme)(baseTheme);resultTheme=themeMerge(baseTheme,theme);}return Object.assign({},resultTheme,{validated:true});}

package/lib/commonjs/createThemeValuesProxy.js

@@ -1 +0,0 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=createThemeValuesProxy;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _utils=require("./utils");function createThemeValuesProxy(_ref){var value=_ref.value,breakpoints=_ref.breakpoints,deviceWidth=_ref.deviceWidth,devicePlatform=_ref.devicePlatform,currentLightDarkSelection=_ref.currentLightDarkSelection;if(value===undefined||value===null){return undefined;}return new Proxy(value,{get:function get(target,key){var currentValue=target[key];var valueAsThemeValues=(0,_utils.asThemeValuesObject)(currentValue);if(valueAsThemeValues){var platformKeys=["ios","android","web","macos","windows"];var breakpointKeys=Object.keys(breakpoints);var lightDarkKeys=["light","dark"];var keysType=getKeysType(valueAsThemeValues,platformKeys,breakpointKeys,lightDarkKeys);var input={value:valueAsThemeValues,breakpoints:breakpoints,deviceWidth:deviceWidth,devicePlatform:devicePlatform,currentLightDarkSelection:currentLightDarkSelection};if(keysType==="default"){return createThemeValuesProxy(input);}else if(keysType==="platform"){return getPlatformValue(input);}else if(keysType==="breakpoint"){return getBreakpointValue(input);}else if(keysType==="lightDark"){return getLightDarkValue(input);}else{return undefined;}}else{return currentValue;}},set:function set(){throw new Error("Theme is read only, cannot be modified at runtime");}});}function getKeysType(value,platformKeys,breakpointKeys,lightDarkKeys){var hasPlatformKeys=platformKeys.some(function(key){return value[key]!==undefined;});var hasBreakpointKeys=breakpointKeys.some(function(key){return value[key]!==undefined;});var hasLightDarkKeys=lightDarkKeys.some(function(key){return value[key]!==undefined;});var hasUserDefinedKeys=Object.keys(value).some(function(key){return!platformKeys.includes(key)&&!breakpointKeys.includes(key)&&!lightDarkKeys.includes(key)&&key!=="default";});if(!onlyOneTrue(hasPlatformKeys,hasBreakpointKeys,hasUserDefinedKeys,hasLightDarkKeys)&&!allFalse(hasPlatformKeys,hasBreakpointKeys,hasUserDefinedKeys,hasLightDarkKeys)){throw new Error("Cannot mix usage of platform keys, breakpoint keys, light/dark keys, and custom defined keys on the same level"+`\nKeys: ${Object.keys(value).join(", ")}`);}else if(hasPlatformKeys){return"platform";}else if(hasBreakpointKeys){return"breakpoint";}else if(hasLightDarkKeys){return"lightDark";}else{return"default";}}function onlyOneTrue(a,b,c,d){return[a,b,c,d].filter(function(x){return x;}).length===1;}function allFalse(a,b,c,d){return[a,b,c,d].filter(function(x){return x;}).length===0;}function getPlatformValue(input){var _value$devicePlatform;var value=input.value,devicePlatform=input.devicePlatform;var currentPlatformValue=(_value$devicePlatform=value==null?void 0:value[devicePlatform])!=null?_value$devicePlatform:value==null?void 0:value.default;var valueAsThemeValues=(0,_utils.asThemeValuesObject)(currentPlatformValue);if(valueAsThemeValues){return createThemeValuesProxy(Object.assign({},input,{value:valueAsThemeValues}));}else{return currentPlatformValue;}}function getBreakpointValue(input){var _value$currentBreakpo;var value=input.value,breakpoints=input.breakpoints,deviceWidth=input.deviceWidth;var keysToBreakpointValue=Object.keys(value!=null?value:{}).map(function(key){return[key,breakpoints[key]];});var orderedBreakpoints=keysToBreakpointValue.sort(function(_ref2){var _ref3=(0,_slicedToArray2.default)(_ref2,2),_=_ref3[0],val=_ref3[1];return val;});var currentBreakpointKey="";for(var _ref4 of orderedBreakpoints){var _ref5=(0,_slicedToArray2.default)(_ref4,2);var breakpointKey=_ref5[0];var breakpointValue=_ref5[1];if(deviceWidth>=breakpointValue){currentBreakpointKey=breakpointKey;}}var currentBreakpointValue=(_value$currentBreakpo=value==null?void 0:value[currentBreakpointKey])!=null?_value$currentBreakpo:value==null?void 0:value.default;var valueAsThemeValues=(0,_utils.asThemeValuesObject)(currentBreakpointValue);if(valueAsThemeValues){return createThemeValuesProxy(Object.assign({},input,{value:valueAsThemeValues}));}else{return currentBreakpointValue;}}function getLightDarkValue(input){var _value$currentLightDa;var value=input.value,currentLightDarkSelection=input.currentLightDarkSelection;var currentLightDarkValue=(_value$currentLightDa=value==null?void 0:value[currentLightDarkSelection])!=null?_value$currentLightDa:value==null?void 0:value.default;var valueAsThemeValues=(0,_utils.asThemeValuesObject)(currentLightDarkValue);if(valueAsThemeValues){return createThemeValuesProxy(Object.assign({},input,{value:valueAsThemeValues}));}else{return currentLightDarkValue;}}

package/lib/commonjs/index.js

@@ -1 +0,0 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"DefaultTheme",{enumerable:true,get:function get(){return _DefaultTheme.default;}});Object.defineProperty(exports,"ThemeProvider",{enumerable:true,get:function get(){return _Provider.Provider;}});Object.defineProperty(exports,"createTheme",{enumerable:true,get:function get(){return _createTheme.default;}});Object.defineProperty(exports,"useChangeTheme",{enumerable:true,get:function get(){return _Provider.useChangeTheme;}});Object.defineProperty(exports,"useTheme",{enumerable:true,get:function get(){return _Provider.useTheme;}});Object.defineProperty(exports,"withTheme",{enumerable:true,get:function get(){return _Provider.withTheme;}});var _DefaultTheme=_interopRequireDefault(require("./DefaultTheme"));var _createTheme=_interopRequireDefault(require("./createTheme"));var _Provider=require("./Provider");

package/lib/commonjs/types.js

@@ -1 +0,0 @@
-Object.defineProperty(exports,"__esModule",{value:true});

package/lib/commonjs/utils.js

@@ -1 +0,0 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.asThemeValuesObject=asThemeValuesObject;exports.isTextStyleObject=isTextStyleObject;var _lodash=require("lodash");function isTextStyleObject(value){try{return Object.keys(value).some(function(key){return["fontFamily","fontWeight","fontSize","fontStyle","lineHeight","letterSpacing"].includes(key);});}catch(_){return false;}}function asThemeValuesObject(value){return!isTextStyleObject(value)&&(0,_lodash.isObject)(value)?value:null;}

package/lib/commonjs/validators.js

@@ -1 +0,0 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.validateBreakpoints=validateBreakpoints;exports.validatePalettes=validatePalettes;exports.validateTheme=validateTheme;var _zod=require("zod");var PaletteSchema=_zod.z.record(_zod.z.string(),_zod.z.record(_zod.z.string(),_zod.z.string()));var BreakpointSchema=_zod.z.record(_zod.z.string(),_zod.z.number());var TextStyleSchema=_zod.z.union([_zod.z.object({fontSize:_zod.z.number()}),_zod.z.object({fontFamily:_zod.z.string()}),_zod.z.object({fontWeight:_zod.z.enum(["normal","bold","100","200","300","400","500","600","700","800","900"])}),_zod.z.object({fontStyle:_zod.z.enum(["normal","italic"])}),_zod.z.object({letterSpacing:_zod.z.number()}),_zod.z.object({lineHeight:_zod.z.number()})]);var ThemeValuesSchema=_zod.z.record(_zod.z.string(),_zod.z.lazy(function(){return _zod.z.union([_zod.z.string(),_zod.z.number(),TextStyleSchema,ThemeValuesSchema]);}));var TextStyleOrThemeValuesSchema=_zod.z.union([TextStyleSchema,ThemeValuesSchema]);var ThemeSchema=_zod.z.object({name:_zod.z.string(),colors:_zod.z.object({branding:ThemeValuesSchema.optional(),text:ThemeValuesSchema.optional(),background:ThemeValuesSchema.optional(),foreground:ThemeValuesSchema.optional(),border:ThemeValuesSchema.optional()}),typography:_zod.z.object({body1:TextStyleOrThemeValuesSchema.optional(),body2:TextStyleOrThemeValuesSchema.optional(),button:TextStyleOrThemeValuesSchema.optional(),caption:TextStyleOrThemeValuesSchema.optional(),headline1:TextStyleOrThemeValuesSchema.optional(),headline2:TextStyleOrThemeValuesSchema.optional(),headline3:TextStyleOrThemeValuesSchema.optional(),headline4:TextStyleOrThemeValuesSchema.optional(),headline5:TextStyleOrThemeValuesSchema.optional(),headline6:TextStyleOrThemeValuesSchema.optional(),overline:TextStyleOrThemeValuesSchema.optional(),subtitle1:TextStyleOrThemeValuesSchema.optional(),subtitle2:TextStyleOrThemeValuesSchema.optional()})});function validatePalettes(palettes){var result=PaletteSchema.safeParse(palettes);if(!result.success){throw new Error("Invalid palettes object: "+result.error.message);}}function validateBreakpoints(breakpoints){var result=BreakpointSchema.safeParse(breakpoints);if(!result.success){throw new Error("Invalid breakpoints object: "+result.error.message);}}function validateTheme(theme){var result=ThemeSchema.safeParse(theme);if(!result.success){throw new Error("Invalid theme object: "+result.error.message);}}