From eabfaa19869def4e9b790162239c6a992c54981e Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Mon, 11 Jan 2021 20:56:03 +0000 Subject: [PATCH] feat(use theme): implement react hook to get the current theme) --- README.md | 26 +++++++++++++++++++++++++ lib/index.ts | 4 ++-- lib/styl.test.tsx | 14 +++++++++++++- lib/styl.ts | 13 ++++++++++++- package-lock.json | 49 ++++++++++++++++++++++++++++++++++------------- package.json | 1 + tsconfig.json | 2 +- 7 files changed, 91 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 96d1d1b..d84efb7 100644 --- a/README.md +++ b/README.md @@ -98,6 +98,32 @@ const ThemeColorText = styl(Text)(({ theme }) => ({ +
+useTheme: + +The `useTheme` hook let you access the currently active theme. + +```jsx +import { useTheme, Provider as StyleProvider } from "react-native-styl" + +const Main = ({ children }) => { + const theme = useTheme() + + return Foo +} + +const App = () => { + + return ( + +
+ + ) +} +``` + +
+
Extends: diff --git a/lib/index.ts b/lib/index.ts index 5750e68..099b8d5 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -1,4 +1,4 @@ -import { styl, Provider, DefaultTheme } from './styl' +import { styl, Provider, DefaultTheme, useTheme } from './styl' -export { styl, Provider, DefaultTheme } +export { styl, Provider, DefaultTheme, useTheme } export default styl diff --git a/lib/styl.test.tsx b/lib/styl.test.tsx index 31e812a..8090b41 100644 --- a/lib/styl.test.tsx +++ b/lib/styl.test.tsx @@ -1,8 +1,9 @@ import React, { useRef } from 'react' import { Text, TouchableWithoutFeedback } from 'react-native' import renderer from 'react-test-renderer' +import { renderHook } from '@testing-library/react-hooks' -import { styl, Provider } from '.' +import { styl, Provider, useTheme } from '.' describe('styl', () => { describe('render', () => { @@ -164,6 +165,17 @@ describe('styl', () => { expect(render?.props.style.color).toBe(GOAL) expect(render).toMatchSnapshot() }) + + it('useTheme', () => { + const theme = { color: 'red' } + const wrapper: React.FC = ({ children }) => ( + {children} + ) + + const { result } = renderHook(() => useTheme(), { wrapper }) + + expect((result.current as typeof theme).color).toBe(theme.color) + }) }) describe('ref', () => { diff --git a/lib/styl.ts b/lib/styl.ts index 8fa5892..512b153 100644 --- a/lib/styl.ts +++ b/lib/styl.ts @@ -77,6 +77,17 @@ const Context = createContext({ theme: {} }) const Provider: React.FC<{ theme: DefaultTheme }> = ({ children, theme }) => createElement(Context.Provider, { value: { theme }, children }) +/** + * useTheme + * + * Expose the `theme` as a React hook + */ +const useTheme = (): DefaultTheme => { + const { theme } = useContext(Context) + + return theme +} + /** * styl * @@ -124,4 +135,4 @@ const styl = >(Component: Comp) => < ) } -export { styl, Provider } +export { styl, Provider, useTheme } diff --git a/package-lock.json b/package-lock.json index 3065741..b2aa229 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3551,6 +3551,28 @@ "@sinonjs/commons": "^1.7.0" } }, + "@testing-library/react-hooks": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-4.0.0.tgz", + "integrity": "sha512-AWIR4M1Fz4dYzuKytkWtabcrwpevq7zj9dImuBOcmrpl3VkjOBDa7Q/62fwK/M30ae5XI25mDSpQ29vzC7A5Lw==", + "dev": true, + "requires": { + "@babel/runtime": "^7.12.5", + "@types/react": ">=16.9.0", + "@types/react-test-renderer": ">=16.9.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.12.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz", + "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==", + "dev": true, + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -7368,9 +7390,9 @@ "dev": true }, "ini": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", - "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, "inquirer": { @@ -13206,7 +13228,8 @@ }, "dot-prop": { "version": "4.2.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz", + "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==", "dev": true, "requires": { "is-obj": "^1.0.0" @@ -13913,9 +13936,9 @@ "dev": true }, "ini": { - "version": "1.3.5", - "resolved": false, - "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, "init-package-json": { @@ -14816,12 +14839,6 @@ "path-key": "^2.0.0" } }, - "npm-user-validate": { - "version": "1.0.0", - "resolved": false, - "integrity": "sha1-jOyg9c6gTU6TUZ73LQVXp1Ei6VE=", - "dev": true - }, "npmlog": { "version": "4.1.2", "resolved": false, @@ -16299,6 +16316,12 @@ "path-key": "^2.0.0" } }, + "npm-user-validate": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/npm-user-validate/-/npm-user-validate-1.0.1.tgz", + "integrity": "sha512-uQwcd/tY+h1jnEaze6cdX/LrhWhoBxfSknxentoqmIuStxUExxjWd3ULMLFPiFUrZKbOVMowH6Jq2FRWfmhcEw==", + "dev": true + }, "nullthrows": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz", diff --git a/package.json b/package.json index a5b6cfa..e650217 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@significa/eslint-config": "0.0.17", "@significa/prettier-config": "0.0.17", "@significa/tsconfig-config": "0.0.17", + "@testing-library/react-hooks": "^4.0.0", "@types/jest": "^25.2.2", "@types/react": "16.9.35", "@types/react-native": "0.62.9", diff --git a/tsconfig.json b/tsconfig.json index f6d83b4..2cde94a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,5 +12,5 @@ "isolatedModules": false, "removeComments": true }, - "exclude": ["node_modules", "examples"] + "exclude": ["node_modules", "examples", "jest.config.js", "commitlint.config.js"] }