feat: Add theme method (#47)

README.md

@@ -81,18 +81,21 @@ const Button = styled.button`
 -   [prop](#prop)
     -   [Parameters](#parameters)
     -   [Examples](#examples)
--   [ifProp](#ifprop)
+-   [theme](#theme)
     -   [Parameters](#parameters-1)
     -   [Examples](#examples-1)
--   [ifNotProp](#ifnotprop)
+-   [ifProp](#ifprop)
     -   [Parameters](#parameters-2)
     -   [Examples](#examples-2)
--   [withProp](#withprop)
+-   [ifNotProp](#ifnotprop)
     -   [Parameters](#parameters-3)
     -   [Examples](#examples-3)
--   [switchProp](#switchprop)
+-   [withProp](#withprop)
     -   [Parameters](#parameters-4)
     -   [Examples](#examples-4)
+-   [switchProp](#switchprop)
+    -   [Parameters](#parameters-5)
+    -   [Examples](#examples-5)
 -   [Types](#types)
     -   [Needle](#needle)
 
@@ -115,6 +118,26 @@ const Button = styled.button`
 
 Returns **PropsFn** 
 
+### theme
+
+Same as `prop`, except that it returns `props.theme[path]` instead of
+`props[path]`.
+
+#### Parameters
+
+-   `path` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 
+-   `defaultValue` **any** 
+
+#### Examples
+
+```javascript
+const Button = styled.button`
+ color: ${theme("button.color", "red")};
+`;
+```
+
+Returns **PropsWithThemeFn** 
+
 ### ifProp
 
 Returns `pass` if prop is truthy. Otherwise returns `fail`

documentation.yml

@@ -1,5 +1,6 @@
 toc:
   - prop
+  - theme
   - ifProp
   - ifNotProp
   - withProp

package.json

@@ -49,31 +49,31 @@
     "babel-cli": "^6.18.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.6",
-    "babel-jest": "^23.4.0",
+    "babel-jest": "^23.4.2",
     "babel-plugin-transform-flow-strip-types": "^6.21.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-1": "^6.24.1",
     "benchmark": "^2.1.4",
     "cross-env": "^5.2.0",
-    "documentation": "^8.0.0",
-    "eslint": "^5.1.0",
-    "eslint-config-airbnb-base": "^13.0.0",
-    "eslint-config-prettier": "^2.9.0",
+    "documentation": "^8.1.1",
+    "eslint": "^5.4.0",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-config-prettier": "^3.0.1",
     "eslint-plugin-flowtype": "^2.50.0",
     "eslint-plugin-flowtype-errors": "^3.6.0",
-    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-prettier": "^2.6.2",
-    "flow-bin": "^0.76.0",
+    "flow-bin": "^0.79.1",
     "flow-typed": "^2.5.1",
-    "jest-cli": "^23.4.1",
+    "jest-cli": "^23.5.0",
     "opn-cli": "^3.1.0",
-    "prettier": "^1.13.7",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
+    "prettier": "^1.14.2",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
     "rimraf": "^2.6.2",
     "standard-version": "^4.4.0",
-    "styled-components": "^3.3.3",
-    "styled-tools": "^1.0.0",
+    "styled-components": "^3.4.2",
+    "styled-tools": "^1.2.0",
     "typescript": "^3.0.1"
   }
 }

src/index.js

@@ -2,4 +2,5 @@ export ifNotProp from "./ifNotProp";
 export ifProp from "./ifProp";
 export prop from "./prop";
 export switchProp from "./switchProp";
+export theme from "./theme";
 export withProp from "./withProp";

src/theme.js

@@ -0,0 +1,21 @@
+// @flow
+import prop from "./prop";
+
+type PropsWithThemeFn = (props: { theme: any }) => any;
+
+/**
+ * Same as `prop`, except that it returns `props.theme[path]` instead of
+ * `props[path]`.
+ * @example
+ * const Button = styled.button`
+ *  color: ${theme("button.color", "red")};
+ * `;
+ */
+const theme = (path: string, defaultValue?: any): PropsWithThemeFn => props => {
+  if (typeof props.theme[path] !== "undefined") {
+    return props.theme[path];
+  }
+  return prop(path, defaultValue)(props.theme);
+};
+
+export default theme;

test/theme.test.js

@@ -0,0 +1,18 @@
+import theme from "../src/theme";
+
+test("string argument", () => {
+  expect(theme("color")({ theme: {} })).toBeUndefined();
+  expect(theme("color")({ theme: { color: "red" } })).toBe("red");
+});
+
+test("deep string argument", () => {
+  expect(theme("color.primary")({ theme: { color: {} } })).toBeUndefined();
+  expect(theme("color.primary")({ theme: { color: { primary: "red" } } })).toBe(
+    "red"
+  );
+});
+
+test("defaultValue", () => {
+  expect(theme("color", "red")({ theme: { color: "blue" } })).toBe("blue");
+  expect(theme("color.primary", "red")({ theme: { color: {} } })).toBe("red");
+});

types/index.d.ts

@@ -2,6 +2,10 @@ type Dictionary<T = any> = { [key: string]: T };
 type PropsFn<ReturnType = any> = (props?: Dictionary) => ReturnType;
 type Needle = string | PropsFn;
 
+type PropsWithThemeFn<ReturnType = any> = (
+  props: Dictionary & { theme: Dictionary }
+) => ReturnType;
+
 export function ifProp<Pass = string, Fail = string>(
   test: Needle | Needle[] | Dictionary,
   pass?: Pass,
@@ -22,6 +26,8 @@ export function switchProp<T = any, DefaultCase = undefined>(
   defaultCase?: DefaultCase
 ): PropsFn<T | DefaultCase>;
 
+export function theme(path: string, defaultValue?: any): PropsWithThemeFn;
+
 export function withProp<T = any>(
   needle: Needle | Needle[],
   fn: (...props: any[]) => T

types/tests.ts

@@ -1,4 +1,4 @@
-import { ifProp, ifNotProp, prop, switchProp, withProp } from "..";
+import { ifProp, ifNotProp, prop, switchProp, withProp, theme } from "..";
 
 ifProp("a", true)({ a: true });
 ifProp("a", true, false)({ a: true });
@@ -16,5 +16,8 @@ switchProp("a", { a: true, b: "c" })({ a: true });
 switchProp("a", { a: true, b: "c" }, 1)({ a: true });
 switchProp("a", { a: true, b: "c" }, 1)({ a: "a" });
 
+theme("a")({ theme: { a: true } })
+theme("a", "b")({ theme: { a: true } })
+
 withProp("a", (a: boolean) => a)({ a: false });
 withProp(["a", "b"], (a: number, b: string) => b)({ a: false });