Feat/add use theme context

packages/button/src/__stories__/Button.story.js

@@ -2,6 +2,7 @@ import React from "react";
 import { ArgsTable, Primary, Stories } from "@storybook/addon-docs";
 import { Settings16, Settings24 } from "@weave-design/icons";
 
+import { useThemeContext } from "@weave-design/theme-context";
 import Button from "../index";
 import Readme from "../../README.md";
 import { targets, types, widths } from "../constants";
@@ -59,6 +60,11 @@ const Template = (args, context) => {
     context.globals.density === "Medium density" ? Settings24 : Settings16;
   const iconProp =
     context.story === "Button with icon" ? { icon: <Icon /> } : {};
+  // eslint-disable-next-line no-console
+  console.log(useThemeContext);
+  const test = useThemeContext();
+  // eslint-disable-next-line no-console
+  console.log("useThemeContext", test);
   return <Button {...args} {...iconProp} />;
 };
 

packages/theme-context/src/ThemeContext/BaseContext.js

@@ -2,5 +2,6 @@ import { createContext } from "react";
 import defaultTheme from "@weave-design/theme-data/build/json/lightGrayMediumDensityTheme/theme.json";
 
 const { Provider, Consumer } = createContext(defaultTheme);
+// const useThemeContext = () => useContext({Provider, Consumer});
 
 export { Provider, Consumer };

packages/theme-context/src/ThemeContext/Consumer.js

@@ -9,7 +9,8 @@ const Consumer = (props) => (
     {(theme) => {
       const isDebugging = process.env.NODE_ENV !== "production";
       const result = isDebugging ? createThemeProxy(theme) : theme;
-
+      // eslint-disable-next-line no-console
+      console.log("isDebugging", isDebugging);
       return props.children(result);
     }}
   </BaseConsumer>

packages/theme-context/src/ThemeContext/index.js

@@ -1,5 +1,8 @@
 import { Provider } from "./BaseContext";
 import Consumer from "./Consumer";
+// import useThemeContext from "./useThemeContext";
 
+// console.log('theme context', useThemeContext);
 export { Provider, Consumer };
+// export {default as useThemeContext} from "./useThemeContext";
 export default { Provider, Consumer };

packages/theme-context/src/ThemeContext/useThemeContext.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+
+import * as BaseContext from "./BaseContext";
+
+// console.log('BaseContext', BaseContext);
+const useThemeContext = () => useContext(BaseContext);
+// console.log('useThemeContext', useThemeContext);
+
+export default useThemeContext;

packages/theme-context/src/index.js

@@ -1,2 +1,3 @@
 export { default as ThemeContext } from "./ThemeContext";
 export { default } from "./ThemeContext";
+export { default as useThemeContext } from "./ThemeContext/useThemeContext";