🎉 initial commit

Author: w01fgang

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+lib

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: [
+    '@typescript-eslint',
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+};

.github/workflows/jest.yml

@@ -0,0 +1,15 @@
+name: CI
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Install modules
+      run: yarn
+    - name: Run tests
+      run: yarn jest --json --outputFile=result.json --testLocationInResults
+    - uses: tanmen/jest-reporter@v1
+      if: always()
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/npm-publish.yml

@@ -0,0 +1,22 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Publish package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org
+      - run: npm i
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+lib
+coverage

.npmignore

@@ -0,0 +1 @@
+__test__

Readme.md

@@ -0,0 +1,87 @@
+# React permission gate
+inspired by https://isamatov.com/react-permissions-and-roles/
+
+Easily render or hide pieces of UI relative to the user's access role.
+
+### Supports Typescript and Flow type
+
+
+### Example
+full example [here](example)
+```javascript
+import { FeatureGateProvider } from 'feature-gate';
+
+// define or get from api features and freeze them
+const features = Object.freeze({
+  feature1: 'true',
+  ABtest: 'A',
+});
+
+function MyApp() {
+  const featureFlags = {}; // get from user api
+
+  return (
+    <FeatureGateProvider featureFlags={featureFlags} features={features}>
+      <App />
+    </FeatureGateProvider>
+  )
+}
+```
+then anywhere in the app use names of features defined in the features map
+
+```javascript
+import { FeatureGate } from 'feature-gate';
+
+<FeatureGate name="feature1">
+  <div>Component available for authorized user</div>
+</FeatureGate>
+
+```
+```javascript
+import { FeatureSwitch } from 'feature-gate';
+
+<FeatureSwitch name="ABtest" fallback={<div>B test</div>}>
+  <div>A test</div>
+</FeatureSwitch>
+
+```
+or use hook
+```javascript
+import { useFeature } from 'feature-gate';
+...
+
+const { enabled: showFeature1 } = useFeature('feature1');
+// feature status for the current user
+...
+{showFeature1 && <div>Component available for authorized user</div>}
+```
+### Advanced usage
+A validator function can be provided
+```javascript
+import { FeatureGateProvider } from 'feature-gate';
+...
+
+// define or get from api rules and freeze them
+const features = Object.freeze({
+  feature1: 'true',
+  ABtest: 'A',
+});
+
+function validator({ featureFlags, features, name }) {
+  // default validator implementation
+  const feature = featureFlags[name];
+  if (!feature) return false;
+
+  return features[name] === feature;
+}
+
+function MyApp() {
+  const featureFlags = {}; // get from user api
+
+  return (
+    <FeatureGateProvider featureFlags={featureFlags} features={features} validator={validator}>
+      <App />
+    </FeatureGateProvider>
+  )
+}
+```

example/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "next"
+}

example/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

example/README.md

@@ -0,0 +1,15 @@
+# TypeScript Next.js example
+
+This is an example of using react-feature-gate
+
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/w01fgang/react-feature-gate/tree/main/example)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/w01fgang/react-feature-gate/tree/main/example&project-name=react-feature-gate&repository-name=react-feature-gate)