Main Library Functionality of useGlobalState

.eslintrc.json

@@ -0,0 +1,27 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true,
+        "jest": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "jest"
+    ],
+    "rules": {}
+}

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+*.swp
+*.swp
+dist/

.npmignore

@@ -0,0 +1,9 @@
+coverage
+fixtures
+__test__
+.*
+*.log
+docs/
+examples/
+rollup.config.js
+jest.config.js

README.md

@@ -1,2 +1,118 @@
-# use-globals-state
-Simple State Management from react to react powered by React Hook.
+# `@evilfactory/global-state`
+
+⚛️ Simple State Management from react to react powered by React Hook.
+
+# Install
+
+- [Yarn](https://yarnpkg.com/en/)
+
+```bash
+$ yarn add -E @evilfactory/global-state
+```
+
+- [NPM](https://www.npmjs.com/)
+
+```bash
+$ npm i @evilfactory/global-state 
+```
+
+## Usage
+
+- [Example CodeSandbox](https://codesandbox.io/s/evilfactoryglobal-state-example-rc4b4)
+
+<!-- Please Do not add something after # API -->
+
+# Features
+
+- [x] Zero configuration ✅.
+- [x] React hooks based API ✅.
+- [x] React Native supported ✅.
+- [x] Global State & shareable ✅.
+- [ ] Redux Dev Tools supported 🙏.
+
+# API
+
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+### Table of Contents
+
+- [StateProvider](#stateprovider)
+    -   [Parameters](#parameters)
+    -   [Properties](#properties)
+    -   [Examples](#examples)
+- [useGlobalState](#useglobalstate)
+    -   [Parameters](#parameters-1)
+    -   [Examples](#examples-1)
+
+## StateProvider
+
+**<StateProvider/>** as Wrapper of your `React` Application.
+
+### Parameters
+
+- `props` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
+    -   `props.reducer`  
+    -   `props.initialState`  
+    -   `props.children`  
+
+### Properties
+
+- `reducer` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** **[| useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer)**
+- `initialState` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** 
+- `children` **[Element](https://developer.mozilla.org/docs/Web/API/Element)** **[| createElement](https://reactjs.org/docs/react-api.html#createelement)**
+
+### Examples
+
+Example Use of `<StateProvider/>`.
+
+
+```javascript
+import React from 'react'
+import App from './you-app.js'
+import {StateProvider} from 'evilfactorylabs/global-state'
+
+const initialState = { todo: [] } 
+
+function todoReducer(state, action) {
+ switch (action.type) {
+   case "ADD_TODO":
+     return {
+       ...state,
+       todo: [...state.todo, action.todo]
+     };
+   default:
+     return state;
+ }
+}
+
+ReactDOM.render(
+   <StateProvider reducer={todoReducer} initialState={initialState}>
+     <App/>
+   </StateProvider>
+, document.getElementById('root'))
+```
+
+## useGlobalState
+
+### Parameters
+
+- `newAction` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)?** [optional]
+
+### Examples
+
+```javascript
+import {useGlobalState} from '@evilfactorylabs/global-state'
+
+...
+const createTodo = (state, action, todo) => {
+ return action({
+   type: 'ADD_TODO',
+   data: todo,
+ })
+} 
+
+const [,addTodo] = useGlobalState(createTodo)
+
+addTodo({title: 'New Task'})
+...
+```

__tests__/index.js

@@ -0,0 +1,2 @@
+    test.todo('StateProvider')
+    test.todo('useGlobalState')

jest.config.js

@@ -0,0 +1,28 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+    bail:true,
+  automock: true,
+  browser: true,
+  clearMocks: true,
+  coverageDirectory: "coverage",
+  coveragePathIgnorePatterns: [
+    "/node_modules/"
+  ],
+  testEnvironment: "jest-environment-jsdom",
+    "transform": {
+  "^.+\\.[t|j]sx?$": "babel-jest"
+},
+  testMatch: [
+    "**/__tests__/**/*.js?(x)",
+    "**/?(*.)+(spec|test).js?(x)"
+  ],
+  testPathIgnorePatterns: [
+    "/node_modules/"
+  ],
+  transformIgnorePatterns: [
+    "/node_modules/"
+  ],
+  verbose: true,
+};

lib/index.js

@@ -0,0 +1,88 @@
+/**
+ * @ignore 
+ * Main Function of useGlobalState
+ *
+ * https://github.com/evilfactorylabs/useGlobalState
+ *
+ * @version 1.0.0
+ */
+import {
+    createElement,
+    createContext,
+    useContext,
+    useReducer,
+} from 'react'
+
+
+/**
+ * @ignore
+ * @var {createContext} StateContext  
+ */
+const StateContext = createContext()
+
+/**
+ * @name <StateProvider/>
+ * @param {Object} props
+ * @property {Function} reducer **{@link https://reactjs.org/docs/hooks-reference.html#usereducer | useReducer}**
+ * @property {Object} initialState
+ * @property {Element} children **{@link https://reactjs.org/docs/react-api.html#createelement | createElement}**
+ * @description 
+ *  **<StateProvider/>** as Wrapper of your `React` Application.
+ *
+ * @example <caption>Example Use of `<StateProvider/>`.</caption>
+ * import React from 'react'
+ * import App from './you-app.js'
+ * import {StateProvider} from 'evilfactorylabs/global-state'
+ *
+ * const initialState = { todo: [] } 
+ *
+ * function todoReducer(state, action) {
+ *  switch (action.type) {
+ *    case "ADD_TODO":
+ *      return {
+ *        ...state,
+ *        todo: [...state.todo, action.todo]
+ *      };
+ *    default:
+ *      return state;
+ *  }
+ * }
+ *
+ * ReactDOM.render(
+ *    <StateProvider reducer={todoReducer} initialState={initialState}>
+ *      <App/>
+ *    </StateProvider>
+ * , document.getElementById('root'))
+ *
+ */
+export const StateProvider = ({reducer, initialState, children }) => createElement(StateContext.Provider, {
+    value: useReducer(reducer, initialState)
+}, children)
+
+
+/**
+ * @function useGlobalState 
+ * @name useGlobalState
+ * @param {Function=} newAction [optional]
+ * @example 
+ * import {useGlobalState} from '@evilfactorylabs/global-state'
+ *
+ * ...
+ * const createTodo = (state, action, todo) => {
+ *  return action({
+ *    type: 'ADD_TODO',
+ *    data: todo,
+ *  })
+ * } 
+ *
+ * const [,addTodo] = useGlobalState(createTodo)
+ *
+ * addTodo({title: 'New Task'})
+ * ...
+ */
+
+export const useGlobalState = (newAction) => {
+    const [state, action] = useContext(StateContext)
+    // newAction is action injector
+    return [state, newAction ? newAction.bind(null, state, action) : action ]
+}

package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@evilfactory/global-state",
+  "version": "0.0.1",
+  "description": "⚛️ Simple State Management from react to react powered by React Hook.",
+  "repository": "git@github.com:evilfactorylabs/useGlobalState.git",
+  "author": "ri7nz <ri7nz.labs@gmail.com>",
+  "license": "MIT",
+  "private": false,
+  "peerDependencies": {
+    "react": "^16.8.6"
+  },
+  "files": [
+    "lib",
+    "dist",
+    "README.md"
+  ],
+  "babel": {
+    "presets": [
+      [
+        "@babel/preset-env",
+        {
+          "targets": {
+            "node": true
+          }
+        }
+      ]
+    ],
+    "plugins": []
+  },
+  "source": "lib/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.m.js",
+  "unpkg": "dist/index.umd.js",
+  "scripts": {
+    "build": "npm-run-all --silent -p build:* -s size",
+    "build:microbundle": "microbundle",
+    "size": "strip-json-comments --no-whitespace dist/*.js | gzip-size ",
+    "build:docs": "documentation readme lib/*.js -q --section API && yarn fixreadme",
+    "dev": "microbundle --watch",
+    "lint": "eslint ./lib --fix",
+    "prepare": "rm -rf dist && yarn test && yarn build",
+    "release": "yarn -s prepare && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish",
+    "test": "jest --config jest.config.js",
+    "test:watch": "jest --watch",
+    "fixreadme": "node -e 'var fs=require(\"fs\");fs.writeFileSync(\"README.md\", fs.readFileSync(\"README.md\", \"utf8\").replace(/^-   /gm, \"- \"))'",
+    "docs": "documentation readme lib/*.js -q --section API && yarn fixreadme"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.5.5",
+    "@babel/preset-env": "7.5.5",
+    "babel-jest": "24.8.0",
+    "documentation": "12.0.3",
+    "eslint": "6.1.0",
+    "eslint-plugin-jest": "22.14.0",
+    "eslint-plugin-react": "7.14.3",
+    "gzip-size-cli": "3.0.0",
+    "jest": "24.8.0",
+    "microbundle": "0.11.0",
+    "npm-run-all": "4.1.5",
+    "strip-json-comments-cli": "1.0.1"
+  }
+}