diff --git a/.babelrc b/.babelrc index 87316ba..1b16a9c 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,29 @@ { "presets": [ - "./.babelrc.js" - ] -} \ No newline at end of file + [ + "@babel/preset-env", + { + "targets": { + "browsers": [ + "last 2 versions", + "not ie 11", + "not ie_mob 11", + "not op_mini all", + "not dead" + ] + }, + "exclude": [ + "transform-typeof-symbol", + "es6.object.assign", + "es6.object.keys", + "es6.array.iterator", + "web.dom.iterable" + ], + "loose": true + } + ], + "@babel/preset-react", + "@babel/preset-flow" + ], + "plugins": ["@babel/plugin-proposal-class-properties"] +} diff --git a/.babelrc.js b/.babelrc.js deleted file mode 100644 index 35a76a8..0000000 --- a/.babelrc.js +++ /dev/null @@ -1,23 +0,0 @@ -'use strict'; - -const target = process.env.BABEL_TARGET; -const modules = target === 'rollup' ? false : 'commonjs'; - -const options = { - presets: [ - ['env', { modules }], - 'react', - 'stage-2', - 'flow', - ], - plugins: [ - 'transform-object-rest-spread', - 'transform-class-properties', - ], -}; - -if (target === 'rollup') { - options.plugins.push('external-helpers'); -} - -module.exports = options; \ No newline at end of file diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..00ea7f3 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +node_modules/ +examples/ +lib/ diff --git a/.eslintrc b/.eslintrc index 48c6068..2e7d72d 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,7 +1,5 @@ { - "extends": "callstack-io", - "rules": { - "react/forbid-prop-types": 0, - "flowtype/no-weak-types": 0 - } -} \ No newline at end of file + 'extends': '@callstack/eslint-config', + + 'rules': { 'flowtype/no-weak-types': 'off' }, +} diff --git a/.flowconfig b/.flowconfig index 0fcb520..7c011e5 100644 --- a/.flowconfig +++ b/.flowconfig @@ -1,7 +1,5 @@ [ignore] -.*/dist/.* -.*/examples/.* -lib/.* +.*/lib/.* [include] @@ -10,25 +8,9 @@ lib/.* [options] emoji=true -module.system=haste - munge_underscores=true -module.name_mapper='^expo$' -> 'emptyObject' -module.name_mapper='^react-navigation$' -> 'emptyObject' - -module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' - -suppress_type=$FlowIssue -suppress_type=$FlowFixMe -suppress_type=$FlowFixMeProps -suppress_type=$FlowFixMeState -suppress_type=$FixMe - -suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) -suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ -suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy -suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError +module.name_mapper='^@callstack/react-theme-provider' -> '/src' [version] -^0.65.0 \ No newline at end of file +^0.94.0 diff --git a/.gitignore b/.gitignore index f050532..dd03311 100644 --- a/.gitignore +++ b/.gitignore @@ -7,7 +7,6 @@ lib/ # VSCode # .vscode/ -tsconfig.json jsconfig.json # node.js diff --git a/README.md b/README.md index c550986..5ebbce3 100644 --- a/README.md +++ b/README.md @@ -8,83 +8,80 @@ [![Version][version-badge]][package] [![MIT License][license-badge]][license] -## About +## About + `@callstack/react-theme-provider` is a set of utilities that help you create your own theming system in few easy steps. You can use it to customize colors, fonts, etc. ## Features - - works in **React** and **React Native** - - `ThemeProvider` - component - - `withTheme` - Higher Order Component - - `createTheming(defaultTheme)` - factory returns `ThemeProvider` component and `withTheme` HOC with default theme injected. + +- Works in **React** and **React Native** +- `createTheming(defaultTheme)` - factory returns: + - `ThemeProvider` - component + - `withTheme` - Higher Order Component + - `useTheme` - React Hook ## Examples - - buildin example for web react - ['/examples/web'](/examples/web) - - [![Edit v6o562k6l7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/v6o562k6l7) + +- built-in example for web react - ['/examples/web'](/examples/web) +- [![Edit v6o562k6l7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/v6o562k6l7) ## Getting started -### Instalation -``` + +### Installation + +```sh npm install --save @callstack/react-theme-provider ``` + or using yarn -``` + +```sh yarn add @callstack/react-theme-provider ``` ### Usage -To use, simply wrap your code into `ThemeProvider` component and pass your theme as a `theme` prop. + +Import `createTheming` from the library to create a theming object. ```js - +import { createTheming } from '@callstack/theme-provider'; + +const { ThemeProvider, withTheme, useTheme } = createTheming(defaultTheme); +``` + +Then wrap your code in `ThemeProvider` component to make it available to all components. + +```js + ``` -You could access theme data inside every component by wraping it into `withTheme` HOC. Just like this: +You can access the theme data in your components by wrapping it in `withTheme` HOC: ```js class App extends React.Component { render() { - return ( -
- Hello -
- ); + return
Hello
; } } export default withTheme(App); ``` -## `ThemeProvider` -**type:** -```js -type ThemeProviderType = React.ComponentType<{ - children?: any, - theme: T, -}> -``` - -Component you have to use to provide the theme to any component wrapped in `withTheme` HOC. - -### props - -`theme` - your theme object +You can also use the [hooks](https://reactjs.org/docs/hooks-intro.html) based API: -## `withTheme` -**type:** ```js -type WithThemeType = >( - Comp: C -) => C & - React.ComponentType< - $Diff, { theme: T }> & { theme?: S } - >; +function App() { + const theme = useTheme(); + + return
Hello
; +} ``` -Classic Higher Order Component which takes your component as an argument and injects `theme` prop into it. +### Usage -### Example of usage ```js const App = ({ theme }) => (
@@ -96,32 +93,37 @@ export withTheme(App); ``` ### Injected props + It will inject the following props to the component: - - `theme` - our theme object. - - `getWrappedInstance` - exposed by some HOCs like react-redux's `connect`. - Use it to get the ref of the underlying element. + +- `theme` - our theme object. +- `getWrappedInstance` - exposed by some HOCs like react-redux's `connect`. + Use it to get the ref of the underlying element. ### Injecting theme by a direct prop + You can also override `theme` provided by `ThemeProvider` by setting `theme` prop on the component wrapped in `withTheme` HOC. Just like this: + ```js const Button = withTheme(({ theme }) => ( -
- Click me -
+
Click me
)); const App = () => ( -