feat: initial release

BREAKING CHANGE: initial release

Author: jedmao

.editorconfig

@@ -0,0 +1,20 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 3
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf
+
+[*.md]
+trim_trailing_whitespace = false
+
+[{*.json,*.md,*.yml}]
+indent_style = space
+indent_size = 2
+
+[src/__generated__/**/*.ts]
+indent_style = space
+indent_size = 4

.eslintrc.json

@@ -0,0 +1,47 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true,
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "impliedStrict": true
+    },
+    "ecmaVersion": 6,
+    "project": "./tsconfig.json",
+    "sourceType": "module",
+    "tsconfigRootDir": "."
+  },
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "eslint:recommended",
+    "prettier",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    // Possible Errors
+    "no-async-promise-executor": "error",
+    "no-await-in-loop": "error",
+    "no-misleading-character-class": "error",
+    "no-template-curly-in-string": "error",
+
+    // TypeScript-ESLint (Prettier)
+    "@typescript-eslint/member-delimiter-style": "off",
+
+    // TypeScript-ESLint
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/indent": "off",
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-object-literal-type-assertion": "off",
+    "@typescript-eslint/no-this-alias": [
+      "error",
+      {
+        "allowDestructuring": true
+      }
+    ],
+    "@typescript-eslint/no-use-before-define": "off"
+  }
+}

.gitignore

@@ -1,61 +1,12 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
+# dependencies
+node_modules
 
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
+# testing
+/coverage
 
-# Dependency directories
-node_modules/
-jspm_packages/
+# production
+/dist
 
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# next.js build output
-.next
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.markdownlint.json

@@ -0,0 +1,8 @@
+{
+  "list-marker-space": {
+    "ol_multi": 2,
+    "ol_single": 2,
+    "ul_multi": 2,
+    "ul_single": 2
+  }
+}

.travis.yml

@@ -0,0 +1,28 @@
+language: node_js
+
+node_js:
+  - 'lts/*'
+
+cache: npm
+
+branches:
+  only:
+    - master
+
+script:
+  - npx npm-install-peers
+  - npm run cover
+
+after_success:
+  - npx codecov -f coverage/lcov.info
+  - echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc
+
+deploy:
+  - provider: script
+    script:
+      npx semantic-release -r
+      https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git
+    skip_cleanup: true
+    keep_history: true
+    on:
+      branch: master

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig",
+    "esbenp.prettier-vscode",
+    "orta.vscode-jest"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "editor.formatOnSave": true,
+  "files.associations": {
+    ".eslintrc.json": "jsonc"
+  },
+  "search.exclude": {
+    "**/coverge": true,
+    "**/dist": true,
+    "**/node_modules": true
+  }
+}

.vscode/tasks.json

@@ -0,0 +1,26 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "build",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "group": {
+        "kind": "test",
+        "isDefault": true
+      }
+    },
+    {
+      "type": "npm",
+      "script": "check-types",
+      "problemMatcher": ["$tsc"]
+    }
+  ]
+}

README.md

@@ -1,2 +1,138 @@
-# react-theme-utils
-Utilities for theming and theme switching via React 16.8 hooks and CSS custom properties.
+# react-theme-context
+
+[![Travis Build Status](https://img.shields.io/travis/com/jedmao/react-theme-context.svg?style=popout-square&logo=travis)](https://travis-ci.com/jedmao/react-theme-context)
+[![codecov](https://img.shields.io/codecov/c/gh/jedmao/react-theme-context.svg?style=popout-square&token=202a1ea4-a048-44a2-8bd8-527f6effec6a)](https://codecov.io/gh/jedmao/react-theme-context)
+[![npm version](https://img.shields.io/npm/v/react-theme-context/latest.svg?style=popout-square&logo=npm)](https://www.npmjs.com/package/react-theme-context)
+
+Provides theme [context](https://reactjs.org/docs/context.html) and
+[hooks](https://reactjs.org/docs/hooks-reference.html). Supports theme switching
+via
+[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*).
+
+## Usage
+
+_The following example uses [TypeScript](http://www.typescriptlang.org/)._
+
+- You only want to create a single theme context and reuse it throughout your
+  application.
+- You can create as many themes as you want.
+- A `Theme` is expected to be of type:
+  `Record<string, string | number | boolean>`.
+
+### themeContext.tsx
+
+```tsx
+import ThemeContext from 'react-theme-context'
+
+const defaultTheme = { primaryColor: 'red' }
+
+export default new ThemeContext(defaultTheme)
+```
+
+### App.tsx
+
+```tsx
+import React, { FC } from 'react'
+
+import themeContext from './themeContext'
+
+const App: FC = () => {
+  themeContext.useLayoutEffect()
+  const [theme, setTheme] = themeContext.use()
+  return (
+    <div style={`background: ${themeContext.prop('primaryColor')}`}>
+      <button
+        onClick={() => {
+          setTheme({ primaryColor: 'blue' })
+        }}
+      >
+        {theme.primaryColor}
+      </button>
+    </div>
+  )
+}
+
+export default App
+```
+
+### index.tsx
+
+```tsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import themeContext from './themeContext'
+import App from './App'
+
+const renderApp = () =>
+  ReactDOM.render(
+    <themeContext.Provider>
+      <App />
+    </themeContext.Provider>,
+    document.getElementById('root'),
+  )
+
+renderApp()
+```
+
+## ThemeContext API
+
+### `#Provider`
+
+_See:
+[React Docs | Context Provider](https://reactjs.org/docs/context.html#contextprovider)_
+
+### `#prop(property: keyof Theme): string`
+
+Converts `property` into
+[CSS custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
+syntax. In TypeScript, it also prevents you from using a theme property that is
+not defined.
+
+#### Example
+
+```ts
+themeContext.prop('primaryColor')
+// 'var(--primary-color)'
+```
+
+### `#useLayoutEffect(element = document.documentElement)`
+
+_Returns: `[T, Dispatch<SetStateAction<T>>]`_
+
+Sets theme properties as
+[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) on
+the provided `element` or the root `documentElement` by default. If the theme is
+updated, these props are updated too. This enables live theme switching!
+
+_See:
+[React Hooks API Reference | useLayoutEffect](https://reactjs.org/docs/hooks-reference.html#uselayouteffect)_
+
+### `#use()`
+
+_Returns: the result of
+[`React.useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext)_
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm test`
+
+Launches the [Jest][https://jestjs.io/] test runner in the interactive
+[watch](https://jestjs.io/docs/en/cli#watch) mode.
+
+For a coverage report, run `npm test -- --coverage`.
+
+### `npm run lint`
+
+Runs [ESLint](https://eslint.org/).
+
+### `npm run commit`
+
+Runs [commitizen](https://www.npmjs.com/package/commitizen), prompting you to
+fill out any required commit fields at commit time.
+
+### `npm run build`
+
+Builds the library for [npm](https://www.npmjs.com/) into the `dist` folder.