Repository: brainhubeu/react-permissible
Branch: master
Commit: f9122aa4c945
Files: 55
Total size: 79.7 KB
Directory structure:
gitextract_wgril_c7/
├── .babelrc
├── .circleci/
│ └── config.yml
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── .npmrc
├── LICENSE.md
├── README.md
├── docs/
│ ├── examples/
│ │ ├── callback.md
│ │ ├── oneMatch.md
│ │ ├── permissionsMatch.md
│ │ └── renderOtherwise.md
│ ├── getting-started/
│ │ ├── installation.md
│ │ └── overview.md
│ └── usage/
│ ├── basic.md
│ └── hoc.md
├── docs-www/
│ ├── .gitignore
│ ├── LICENSE
│ ├── README.md
│ ├── gatsby-config.js
│ ├── gatsby-docs-kit.yml
│ ├── package.json
│ ├── src/
│ │ ├── globalReferences.js
│ │ ├── layouts/
│ │ │ └── .gitkeep
│ │ ├── pages/
│ │ │ ├── 404.js
│ │ │ ├── landing.js
│ │ │ ├── landing.module.scss
│ │ │ └── variables.scss
│ │ └── templates/
│ │ └── .gitkeep
│ └── tools/
│ ├── deploy-github.sh
│ ├── seed/
│ │ └── example.md
│ └── seed.sh
├── lib/
│ └── react-permissible.js
├── package.json
├── renovate.json
├── src/
│ ├── components/
│ │ ├── permissible.js
│ │ └── permissibleRender.js
│ └── index.js
├── test/
│ ├── .eslintrc
│ ├── accessible.component.js
│ ├── permissible.test.js
│ └── permissibleRender.test.js
├── tools/
│ ├── build.js
│ └── testSetup.js
├── types/
│ ├── .eslintrc
│ ├── react-permissible.d.ts
│ └── tests/
│ ├── .gitignore
│ ├── .npmrc
│ ├── Permissible.test.tsx
│ ├── PermissibleRender.test.tsx
│ ├── package.json
│ └── tsconfig.json
└── webpack.config.prod.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": [
"env",
"react",
"stage-1"
],
"plugins": [
"transform-decorators-legacy"
],
"env": {
"production": {
"plugins": [
"transform-react-constant-elements",
"transform-react-remove-prop-types"
]
}
}
}
================================================
FILE: .circleci/config.yml
================================================
version: 2.1
executors:
node-executor:
docker:
- image: circleci/node:14.4.0
working_directory: ~/app
jobs:
check_branch_name:
docker:
- image: circleci/node:14.4.0
working_directory: ~/app
steps:
- run:
name: fail if the branch name does not start with a valid prefix
command: |
branch=$CIRCLE_BRANCH
if [[ "$branch" =~ ^(dependabot|fix|feature|breaking)/ || "$branch" == 'master' ]]
then
echo $branch is a valid name
else
echo $branch is not valid because the branch name must match '^(dependabot|fix|feature|breaking)/' or be master
exit 1
fi
build:
working_directory: ~/app
docker:
- image: circleci/node:14.4.0
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package.json" }}
- run:
name: Install npm dependencies
command: npm install --production=false
- save_cache:
key: dependency-cache-{{ checksum "package.json" }}
paths:
- node_modules
test:
executor: node-executor
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package.json" }}
- run:
name: Install npm dependencies
command: npm install --production=false
- save_cache:
key: dependency-cache-{{ checksum "package.json" }}
paths:
- node_modules
- run:
name: Test
command: npm run test:coverage:ci
- persist_to_workspace:
root: ~/app
paths:
- .git
- node_modules
- coverage
lint:
docker:
- image: circleci/node:14.4.0
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package.json" }}
- run:
name: Install npm dependencies
command: npm install --production=false
- save_cache:
key: dependency-cache-{{ checksum "package.json" }}
paths:
- node_modules
- run:
name: Lint
command: npm run lint
compile:
docker:
- image: circleci/node:14.4.0
steps:
- checkout
- restore_cache:
key: dependency-cache-{{ checksum "package.json" }}
- run:
name: Install npm dependencies
command: npm install --production=false
- save_cache:
key: dependency-cache-{{ checksum "package.json" }}
paths:
- node_modules
- run:
name: Compile
command: npm run build
publish_package:
executor: node-executor
steps:
- attach_workspace:
at: ~/app
- run: git checkout .
- run:
name: Generate coveralls config
command: "echo repo_token: $REPO_TOKEN > ./.coveralls.yml"
- run:
name: Upload coverage to coveralls
command: cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
- run:
name: configure GitHub user
command: |
git config --global user.email "devops@brainhub.pl"
git config --global user.name "DevOps Brainhub"
git remote -v
git remote remove origin
git remote add origin https://$GIT_TOKEN@github.com/brainhubeu/react-permissible
git remote -v
- run:
name: bump NPM version
command: |
branch=`git log --oneline | grep '[0-9a-f]\{6,40\} Merge pull request #[0-9]\+ from brainhubeu/' | head -1 | sed 's@.* from brainhubeu/@@g' || true`
echo branch=$branch
if [[ "$branch" =~ ^(dependabot)/ ]]; then
npm version patch -m "%s [ci skip]"
elif [[ "$branch" =~ ^(fix)/ ]]; then
npm version patch -m "%s [ci skip]"
elif [[ "$branch" =~ ^(feature)/ ]]; then
npm version minor -m "%s [ci skip]"
elif [[ "$branch" =~ ^(breaking)/ ]]; then
npm version major -m "%s [ci skip]"
else
echo $branch is not valid because the branch name must match '^(dependabot|fix|feature|breaking)/'
exit 1
fi
- run: git pull --no-edit origin $CIRCLE_BRANCH
- run: git push origin $CIRCLE_BRANCH
- run:
name: npm publish
command: |
echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc
npm publish
workflows:
version: 2
build_and_test:
jobs:
- check_branch_name
- build:
requires:
- check_branch_name
- test:
requires:
- build
- lint:
requires:
- build
- compile:
requires:
- build
- publish_package:
requires:
- test
- lint
- compile
filters:
branches:
only:
- master
================================================
FILE: .editorconfig
================================================
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .eslintignore
================================================
/lib/**/*.js
================================================
FILE: .eslintrc
================================================
{
"root": true,
"extends": [
"brainhub"
],
"settings": {
"import/resolve": {
"moduleDirectory": ["node_modules", "src"]
}
}
}
================================================
FILE: .gitignore
================================================
dist
# Logs
logs
*.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
reports
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
# IDEA/Webstorm project files
.idea
*.iml
#VSCode metadata
.vscode
# Mac files
.DS_Store
# Debug files
selenium-debug.log
.npm.debug
# Merge conflicts
*.orig
================================================
FILE: .npmignore
================================================
.babelrc
.circleci/
.coveralls.yml
.dockerignore
.editorconfig
.eslintignore
.eslintrc
.git/
.github/
.gitignore
.istanbul.yml
.npmignore
.npmrc
.nvmrc
Dockerfile.e2e
coverage/
cypress.json
docker-compose.e2e.yml
docs-www/
docs/
jest.config.js
jest.setup.js
renovate.json
test/
tools/
types/
webpack.config.prod.js
================================================
FILE: .npmrc
================================================
engine-strict=true
================================================
FILE: LICENSE.md
================================================
The MIT License (MIT)
Copyright (c) 2017-2020 [Brainhub](https://brainhub.eu/?utm_source=github)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<br/>
<h1 align="center">
react-permissible
</h1>
<p align="center">
Making the permission management for React components easier.
</p>
<p align="center">
<strong>
<a href="https://brainhubeu.github.io/react-permissible/">Live code demo</a> |
<a href="https://brainhub.eu/contact/">Hire us</a>
</strong>
</p>
<div align="center">
[](https://circleci.com/gh/brainhubeu/react-permissible)
[](https://github.com/brainhubeu/react-permissible/commits/master)
[](https://github.com/brainhubeu/react-permissible/blob/master/LICENSE.md)
[](http://makeapullrequest.com)
[](https://renovatebot.com/)
[](https://coveralls.io/github/brainhubeu/react-permissible?branch=master)
[](https://www.npmjs.com/package/@brainhubeu/react-permissible)
[](https://www.npmjs.com/package/@brainhubeu/react-permissible)
[](https://www.npmjs.com/package/@brainhubeu/react-permissible)
[](https://github.com/brainhubeu/react-permissible/graphs/contributors)
</div>
`react-permissible` is a React Component allowing to:
* manage visibility of particular components depending on users permissions
* replace particular component when the user isn't permitted to see it
* manage accessability to particular view depending on users permissions
* fire a callback when the user isn't allowed to go to access the component/route
## Why?
Currently there's no permission management in React. The existing components are either over-engineered (full ACL support etc.), or limited to role-based management. `react-permissible` is simple at its core and solves only one problem. Access the Component if the permissions match, do something otherwise.
## Live demo/ docs
You can access live demo/ docs at https://brainhubeu.github.io/react-permissible/.
## Installation
```
npm i @brainhubeu/react-permissible
```
## Usage
```javascript
import { PermissibleRender } from '@brainhubeu/react-permissible';
...
render() {
return (
<PermissibleRender
userPermissions={permissions}
requiredPermissions={requiredPermissions}
>
<RestrictedComponent/>
</PermissibleRender>
);
}
```
Where:
* `userPermissions` is an **array** of permissions set for current user
* `requiredPermissions` is an **array** of required permissions
More detailed documentation with several use cases covered is available [here](http://brainhubeu.github.io/react-permissible).
## Running tests
```
npm test
```
## Roadmap
* Passing a callback function as a prop for `PermissibleRender` component
## License
React-permissible is copyright © 2017-2020 [Brainhub](https://brainhub.eu/?utm_source=github) It is free software, and may be redistributed under the terms specified in the [license](LICENSE.md).
## About
`react-permissible` is maintained by [@kkoscielniak](https://github.com/kkoscielniak), [@adam-golab](https://github.com/adam-golab), [@Lukasz-pluszczewski](https://github.com/Lukasz-pluszczewski/) and the Brainhub development team. It is funded by Brainhub and the names and logos for Brainhub are trademarks of Brainhub Sp. z o.o.. You can check other open-source projects supported/developed by our teammates [here](https://brainhub.eu/?utm_source=github).
[](https://brainhub.eu/?utm_source=github)
We love open-source JavaScript software! See our other projects or hire us to build your next web, desktop and mobile application with JavaScript.
================================================
FILE: docs/examples/callback.md
================================================
# Callback function
Callback function passed to a `Permissible` Higher Order Component will be called whenever the permissions do not match. This might be combined with the `oneperm` parameter. **Open the Console** to see a callback message.
```javascript
import { Permissible } from '@brainhubeu/react-permissible';
const callbackFunction = ({ userPermissions, requiredPermissions }) => {
console.log(`
react-permissible: Access Denied
userPermissions: ${userPermissions}
requiredPermissions: ${requiredPermissions}
`);
};
const CallbackComponent = Permissible(
AccessGranted,
['ACCESS_DASHBOARD'], // userPermissions
['ACCESS_ADMIN'], // requiredPermissions
callbackFunction,
);
```
```jsx render
<CallbackComponent />
```
================================================
FILE: docs/examples/oneMatch.md
================================================
# Render a component when one of the permissions matches
If at least one permission from the `userPermissions` array exists in the `requiredPermissions` array, the component is rendered.
```jsx render
<PermissibleRender
userPermissions={['ACCESS_ADMIN']}
requiredPermissions={['ACCESS_DASHBOARD', 'ACCESS_ADMIN']}
oneperm
>
<AccessGranted/>
</PermissibleRender>
```
================================================
FILE: docs/examples/permissionsMatch.md
================================================
# Render a component when all the permissions match
If all the permissions in the `userPermissions` array match the `requiredPermissions`, the component is rendered.
```jsx render
<PermissibleRender
userPermissions={['ACCESS_DASHBOARD', 'ACCESS_ADMIN']}
requiredPermissions={['ACCESS_DASHBOARD', 'ACCESS_ADMIN']}
>
<AccessGranted/>
</PermissibleRender>
```
================================================
FILE: docs/examples/renderOtherwise.md
================================================
# Render another component if the permissions do not match
If permissions in the `userPermissions` do not match the `requiredPermissions`, the component is not rendered, and another one is rendered instead.
```jsx render
<PermissibleRender
userPermissions={['ACCESS_DASHBOARD']}
requiredPermissions={['ACCESS_ADMIN']}
renderOtherwise={<AccessDenied/>}
>
<AccessGranted/>
</PermissibleRender>
```
================================================
FILE: docs/getting-started/installation.md
================================================
# Installation
**react-permissible** is designed as an npm package. Installation is as simple as with every package out there:
`npm i @brainhubeu/react-permissible`
or if you use Yarn:
`yarn add @brainhubeu/react-permissible`.
================================================
FILE: docs/getting-started/overview.md
================================================
# react-permissible
#### Making the permission management for components easier.
**react-permissible** is a React Component allowing you to:
* manage visibility of particular components depending on user's permissions.
* replacing a particular component when the user isn't permitted to see it.
* manage access to particular view depending on user's permissions.
* firing a callback when the user isn't allowed to access the component/route.
## Why
Currently there's a lack of simple permission management components for React. The existing components are either over-engineered (full ACL support etc.), or limited to role-based management. **react-permissible** is simple at it's core and solves only one problem - accessing the particular component if the necessary permissions are met, hide or render another component otherwise.
================================================
FILE: docs/usage/basic.md
================================================
# Usage
You can use react-permissible in two ways: as an ordinary component or as a Higher Order Component. Each approach allows you to solve the permission-based rendering a little bit differently.
## Use as an ordinary component with props:
```javascript
import { PermissibleRender } from '@brainhubeu/react-permissible';
...
render() {
return (
<PermissibleRender
userPermissions={permissions}
requiredPermissions={requiredPermissions}
renderOtherwise={AnotherComponent} // optional
oneperm // optional
>
<RestrictedComponent/>
</PermissibleRender>
);
}
```
Where:
* `userPermissions`: array of permissions set for current user
* `requiredPermissions`: array of required permissions
* `RestrictedComponent`: component to render
There are also optional props available:
* `oneperm`: boolean determining that only one of required permissions will be necessary (boolean)
* `renderOtherwise`: another component to be rendered if the permissions do not match (the user isn't permitted).
================================================
FILE: docs/usage/hoc.md
================================================
# Usage
You can use react-permissible in two ways: as an ordinary component or as a Higher Order Component. Each approach allows you to solve the permission-based rendering a little bit differently.
## Usage as a Higher Order Component:
```javascript
import { Permissible } from '@brainhubeu/react-permissible';
...
function callbackFunction({ userPermissions, requiredPermissions }) {
// do something
}
const RestrictedComponent = (
<p>Restricted component</p>
);
const PermissibleComponent = Permissible(
RestrictedComponent,
userPermissions,
requiredPermissions,
callbackFunction,
oneperm,
);
render() {
<PermissibleComponent />
}
```
Where:
* `RestrictedComponent`: a component to render
* `userPermissions`: an array of permissions set for current user
* `requiredPermissions`: an array of required permissions
* `oneperm`: boolean determining that only one of required permissions will be necessary instead of requiring all passed permissions (optional)
================================================
FILE: docs-www/.gitignore
================================================
# Logs
logs
*.log*
# node-waf configuration
.lock-wscript
# Dependency directory
node_modules
# IDEA/Webstorm project files
.idea
*.iml
#VSCode metadata
.vscode
# Mac files
.DS_Store
# Gatsby
.cache
public
================================================
FILE: docs-www/LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2017-2020 Brainhub
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: docs-www/README.md
================================================
# Gatsby Docs Kit Starter
The default Brainhub static docs starter.
## Try it out
Ensure you have the latest version of [Node](https://nodejs.org/en/download/) installed. We also recommend you install [Yarn](https://yarnpkg.com/en/docs/install) as well.
Then run:
```bash
yarn install
```
Seed documentation (if you don't have any yet):
```bash
yarn seed
```
Run the local webserver via `yarn develop`;
The example site is available at http://localhost:8000. You should see the example site loaded in your web browser.
Also visit http://localhost:8000/___graphql to explore your site's GraphiQL data and schema.
Then go to `../docs` to edit and write awesome docs!.
## Deploy
Ready to go? Want to deploy documentation to github pages? Run:
```bash
yarn deploy:gh
```
================================================
FILE: docs-www/gatsby-config.js
================================================
'use strict';
const path = require('path');
const pluginConfigFactory = require('@brainhubeu/gatsby-docs-kit/plugins');
module.exports = {
siteMetadata: {
title: 'react-permissible Docs',
description: 'Making the permission management for React components easier',
image: 'https://cdn-images-1.medium.com/max/1200/1*CLUFZFaXF6NG27NA3d_JkQ.jpeg',
url: 'https://brainhubeu.github.io/react-permissible',
type: 'article',
siteName: 'react-permissible Docs',
githubUrl: 'https://github.com/brainhubeu',
},
// URL prefix on production environment. For more info see https://www.gatsbyjs.org/docs/path-prefix/
pathPrefix: process.env.PATH_PREFIX || ' ',
plugins: [
...pluginConfigFactory({
config: `${__dirname}/gatsby-docs-kit.yml`,
resources: path.resolve(__dirname, '../docs'),
}),
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: 'UA-62818184-6',
head: false,
anonymize: true,
respectDNT: true,
pageTransitionDelay: 0,
cookieDomain: 'brainhubeu.github.io',
},
],
};
================================================
FILE: docs-www/gatsby-docs-kit.yml
================================================
- title: Home
dir: ./src
url: /
file: pages/landing.js
- title: Docs
dir: ../docs
url: docs
sidemenu:
- title: Getting Started
dir: getting-started
items:
- title: Overview
file: overview.md
- title: Installation
file: installation.md
- title: Usage
dir: usage
items:
- title: As an ordinary component
file: basic.md
- title: As Higher Order Component
file: hoc.md
- title: Examples
dir: examples
items:
- title: Render component when all the permissions match
file: permissionsMatch.md
- title: Render component when one of the permissions match
file: oneMatch.md
- title: Render another component if the permissions do not match
file: renderOtherwise.md
- title: Callback function
file: callback.md
================================================
FILE: docs-www/package.json
================================================
{
"name": "@brainhubeu/gatsby-docs-kit-start",
"description": "Gatsby-Docs-Kit starter repository",
"version": "0.0.32",
"author": "Brainhub",
"license": "MIT",
"scripts": {
"build": "rm -rf .cache && rm -rf public && gatsby build --prefix-paths",
"deploy:gh": "bash tools/deploy-github.sh",
"develop": "rm -rf .cache && gatsby develop",
"seed": "bash tools/seed.sh",
"serve": "gatsby serve",
"lint": "eslint --ext .jsx,.js .",
"lint:autofix": "eslint --ext .jsx,.js . --fix"
},
"dependencies": {
"@brainhubeu/gatsby-docs-kit": "1.0.10",
"@brainhubeu/react-permissible": "^1.9.13",
"gatsby": "1.9.279"
},
"devDependencies": {
"eslint": "^7.3.1",
"eslint-config-brainhub": "^1.13.0",
"gh-pages": "^3.1.0",
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
================================================
FILE: docs-www/src/globalReferences.js
================================================
import React from 'react';
import { Permissible, PermissibleRender } from '@brainhubeu/react-permissible';
const boxStyle = {
height: 130,
width: 130,
display: 'flex',
margin: '0 auto',
textAlign: 'center',
backgroundColor: '#b5ffb5',
justifyContent: 'center',
flexDirection: 'column',
};
const notAllowedBoxStyle = {
...boxStyle,
backgroundColor: '#ffb5b5',
};
const AccessGranted = () => (
<div style={boxStyle}>
Access Granted
</div>
);
const AccessDenied = () => (
<div style={notAllowedBoxStyle}>
Access Denied
</div>
);
const callbackFunction = ({ userPermissions, requiredPermissions }) => {
console.log(`
react-permissible: Access Denied;
userPermissions: ${userPermissions}
requiredPermissions: ${requiredPermissions}
`);
};
const CallbackComponent = Permissible(
AccessGranted,
['ACCESS_DASHBOARD'], // userPermissions
['ACCESS_ADMIN'], // requiredPermissions
callbackFunction, // no callback
false, // all permissions have to match
);
export {
Permissible,
PermissibleRender,
AccessGranted,
AccessDenied,
CallbackComponent,
};
================================================
FILE: docs-www/src/layouts/.gitkeep
================================================
================================================
FILE: docs-www/src/pages/404.js
================================================
import React from 'react';
const NotFoundPage = () => (
<div>
<h1>NOT FOUND</h1>
<p>You just hit a route that doesn't exist... the sadness.</p>
</div>
);
export default NotFoundPage;
================================================
FILE: docs-www/src/pages/landing.js
================================================
import React from 'react';
import Link from 'gatsby-link';
import styles from './landing.module.scss';
const LandingPage = () => (
<div className={styles.landing}>
<div>
<h1 className={styles.landing__header}>react-permissible</h1>
<p className={styles.landing__subheader}>Making the permission management for components easier.</p>
<div className={styles.btn__wrapper}>
<Link to="/docs/getting-started/overview" className={styles.landing__btn}>
<span>Get started!</span>
</Link>
</div>
</div>
</div>
);
export default LandingPage;
================================================
FILE: docs-www/src/pages/landing.module.scss
================================================
@import './variables.scss';
.landing {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 2*#{$mainNavHeight} - 64px);
}
.landing__header {
text-transform: uppercase;
font-size: 3rem;
letter-spacing: 2px;
margin-bottom: 1rem;
margin-top: 0;
}
.btn__wrapper {
display: flex;
justify-content: center;
}
.landing__btn {
display: inline-block;
background-color: $colorBHBg;
text-decoration: none;
color: $white;
padding: 1rem 2rem;
margin: 2rem;
position: relative;
overflow: hidden;
span {
position: relative;
z-index: 1;
}
&:after,
&:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 50%;
background-color: $colorBHMain;
transition: width .3s ease-out;
}
&:after {
left: 0;
}
&:before {
right: 0;
}
&:hover {
color: $white;
&:after,
&:before {
width: 0;
}
}
}
.landing__btn--alt {
composes: landing__btn;
background-color: transparent;
color: rgba($colorBHBg, .7);
transition: color .3s;
&:after,
&:before {
background-color: transparent;
border-style: solid;
border-color: $colorBHMain;
}
&:after {
border-width: 1px 0 1px 1px;
}
&:before {
border-width: 1px 1px 1px 0;
}
&:hover {
color: $colorBHMain;
}
}
================================================
FILE: docs-www/src/pages/variables.scss
================================================
$colorBHBg: #150940;
$colorBHMain: #7b59ff;
$white: #ffffff;
$mainNavHeight: 80px;
================================================
FILE: docs-www/src/templates/.gitkeep
================================================
================================================
FILE: docs-www/tools/deploy-github.sh
================================================
#!/bin/bash
GITHUB_REPO_NAME=$(basename -s .git `git config --get remote.origin.url`);
PATH_PREFIX="/$GITHUB_REPO_NAME" npm run build
# deploy to github pags
node ./node_modules/.bin/gh-pages -d public
================================================
FILE: docs-www/tools/seed/example.md
================================================
# CLI Commands
### Running an app
1. running an application on locally
```bash
npm run develop # or yarn develop
```
Gatsby will start a hot-reloading development environment accessible at [http://localhost:8000](http://localhost:8000)
2. preparing optimized production build
```bash
npm run build
```
3. serving locally production build
```bash
npm run serve
```
> Note that your site by default will be available on [http://localhost:9000](http://localhost:9000)
4. deploying to github pages
```bash
npm run deploy:gh
```
> See more [HERE](../getting-started/publishing.md)
================================================
FILE: docs-www/tools/seed.sh
================================================
#!/bin/bash
CONFIG_FILE="gatsby-docs-kit.yml"
DIR_NAME="docs"
# Create docs directory
if [ -d "../${DIR_NAME}" ]; then
echo '"docs" directory already exists. Can not seed it. Remove it and try again.'
exit 1;
fi
mkdir -p "../${DIR_NAME}"
# Create gastsby docs kit config file if do not exists
if [ ! -f "./${CONFIG_FILE}" ]; then
echo "" > $CONFIG_FILE;
fi
# Create example Mk
cp ./tools/seed/example.md ../${DIR_NAME}/example.md
# Seeding gastsby docs kit config file
echo "- title: Home
dir: ../docs
url: docs
file: example.md" >> $CONFIG_FILE;
# Done
echo "Done!"
================================================
FILE: lib/react-permissible.js
================================================
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define("react-permissible",["react"],e):"object"==typeof exports?exports["react-permissible"]=e(require("react")):t["react-permissible"]=e(t.React)}("undefined"!=typeof self?self:this,function(t){return function(t){function e(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var r={};return e.m=t,e.c=r,e.d=function(t,r,n){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=8)}([function(t,e){function r(){throw new Error("setTimeout has not been defined")}function n(){throw new Error("clearTimeout has not been defined")}function o(t){if(s===setTimeout)return setTimeout(t,0);if((s===r||!s)&&setTimeout)return s=setTimeout,setTimeout(t,0);try{return s(t,0)}catch(e){try{return s.call(null,t,0)}catch(e){return s.call(this,t,0)}}}function i(t){if(l===clearTimeout)return clearTimeout(t);if((l===n||!l)&&clearTimeout)return l=clearTimeout,clearTimeout(t);try{return l(t)}catch(e){try{return l.call(null,t)}catch(e){return l.call(this,t)}}}function u(){h&&y&&(h=!1,y.length?d=y.concat(d):v=-1,d.length&&a())}function a(){if(!h){var t=o(u);h=!0;for(var e=d.length;e;){for(y=d,d=[];++v<e;)y&&y[v].run();v=-1,e=d.length}y=null,h=!1,i(t)}}function c(t,e){this.fun=t,this.array=e}function f(){}var s,l,p=t.exports={};!function(){try{s="function"==typeof setTimeout?setTimeout:r}catch(t){s=r}try{l="function"==typeof clearTimeout?clearTimeout:n}catch(t){l=n}}();var y,d=[],h=!1,v=-1;p.nextTick=function(t){var e=new Array(arguments.length-1);if(arguments.length>1)for(var r=1;r<arguments.length;r++)e[r-1]=arguments[r];d.push(new c(t,e)),1!==d.length||h||o(a)},c.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=f,p.addListener=f,p.once=f,p.off=f,p.removeListener=f,p.removeAllListeners=f,p.emit=f,p.prependListener=f,p.prependOnceListener=f,p.listeners=function(t){return[]},p.binding=function(t){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(t){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},function(t,e,r){"use strict";t.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,r){e.exports=t},function(t,e,r){(function(e){if("production"!==e.env.NODE_ENV){var n=r(4);t.exports=r(12)(n.isElement,!0)}else t.exports=r(15)()}).call(e,r(0))},function(t,e,r){"use strict";(function(e){"production"===e.env.NODE_ENV?t.exports=r(10):t.exports=r(11)}).call(e,r(0))},function(t,e,r){(function(e){function r(t,e,r){switch(r.length){case 0:return t.call(e);case 1:return t.call(e,r[0]);case 2:return t.call(e,r[0],r[1]);case 3:return t.call(e,r[0],r[1],r[2])}return t.apply(e,r)}function n(t,e){return!!(t?t.length:0)&&a(t,e,0)>-1}function o(t,e,r){for(var n=-1,o=t?t.length:0;++n<o;)if(r(e,t[n]))return!0;return!1}function i(t,e){for(var r=-1,n=t?t.length:0,o=Array(n);++r<n;)o[r]=e(t[r],r,t);return o}function u(t,e,r,n){for(var o=t.length,i=r+(n?1:-1);n?i--:++i<o;)if(e(t[i],i,t))return i;return-1}function a(t,e,r){if(e!==e)return u(t,c,r);for(var n=r-1,o=t.length;++n<o;)if(t[n]===e)return n;return-1}function c(t){return t!==t}function f(t){return function(e){return t(e)}}function s(t,e){return t.has(e)}function l(t,e){return null==t?void 0:t[e]}function p(t){var e=!1;if(null!=t&&"function"!=typeof t.toString)try{e=!!(t+"")}catch(t){}return e}function y(t){var e=-1,r=t?t.length:0;for(this.clear();++e<r;){var n=t[e];this.set(n[0],n[1])}}function d(){this.__data__=_t?_t(null):{}}function h(t){return this.has(t)&&delete this.__data__[t]}function v(t){var e=this.__data__;if(_t){var r=e[t];return r===K?void 0:r}return lt.call(e,t)?e[t]:void 0}function b(t){var e=this.__data__;return _t?void 0!==e[t]:lt.call(e,t)}function _(t,e){return this.__data__[t]=_t&&void 0===e?K:e,this}function m(t){var e=-1,r=t?t.length:0;for(this.clear();++e<r;){var n=t[e];this.set(n[0],n[1])}}function g(){this.__data__=[]}function w(t){var e=this.__data__,r=M(e,t);return!(r<0)&&(r==e.length-1?e.pop():dt.call(e,r,1),!0)}function O(t){var e=this.__data__,r=M(e,t);return r<0?void 0:e[r][1]}function j(t){return M(this.__data__,t)>-1}function P(t,e){var r=this.__data__,n=M(r,t);return n<0?r.push([t,e]):r[n][1]=e,this}function E(t){var e=-1,r=t?t.length:0;for(this.clear();++e<r;){var n=t[e];this.set(n[0],n[1])}}function S(){this.__data__={hash:new y,map:new(bt||m),string:new y}}function x(t){return V(this,t).delete(t)}function T(t){return V(this,t).get(t)}function $(t){return V(this,t).has(t)}function k(t,e){return V(this,t).set(t,e),this}function C(t){var e=-1,r=t?t.length:0;for(this.__data__=new E;++e<r;)this.add(t[e])}function A(t){return this.__data__.set(t,K),this}function R(t){return this.__data__.has(t)}function M(t,e){for(var r=t.length;r--;)if(z(t[r][0],e))return r;return-1}function I(t,e,r){for(var u=r?o:n,a=t[0].length,c=t.length,l=c,p=Array(c),y=1/0,d=[];l--;){var h=t[l];l&&e&&(h=i(h,f(e))),y=vt(h.length,y),p[l]=!r&&(e||a>=120&&h.length>=120)?new C(l&&h):void 0}h=t[0];var v=-1,b=p[0];t:for(;++v<a&&d.length<y;){var _=h[v],m=e?e(_):_;if(_=r||0!==_?_:0,!(b?s(b,m):u(d,m,r))){for(l=c;--l;){var g=p[l];if(!(g?s(g,m):u(t[l],m,r)))continue t}b&&b.push(m),d.push(_)}}return d}function N(t){return!(!G(t)||L(t))&&(J(t)||p(t)?yt:et).test(W(t))}function F(t){return Y(t)?t:[]}function V(t,e){var r=t.__data__;return q(e)?r["string"==typeof e?"string":"hash"]:r.map}function D(t,e){var r=l(t,e);return N(r)?r:void 0}function q(t){var e=typeof t;return"string"==e||"number"==e||"symbol"==e||"boolean"==e?"__proto__"!==t:null===t}function L(t){return!!ft&&ft in t}function W(t){if(null!=t){try{return st.call(t)}catch(t){}try{return t+""}catch(t){}}return""}function z(t,e){return t===e||t!==t&&e!==e}function U(t){return null!=t&&B(t.length)&&!J(t)}function Y(t){return H(t)&&U(t)}function J(t){var e=G(t)?pt.call(t):"";return e==X||e==Z}function B(t){return"number"==typeof t&&t>-1&&t%1==0&&t<=Q}function G(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function H(t){return!!t&&"object"==typeof t}var K="__lodash_hash_undefined__",Q=9007199254740991,X="[object Function]",Z="[object GeneratorFunction]",tt=/[\\^$.*+?()[\]{}|]/g,et=/^\[object .+?Constructor\]$/,rt="object"==typeof e&&e&&e.Object===Object&&e,nt="object"==typeof self&&self&&self.Object===Object&&self,ot=rt||nt||Function("return this")(),it=Array.prototype,ut=Function.prototype,at=Object.prototype,ct=ot["__core-js_shared__"],ft=function(){var t=/[^.]+$/.exec(ct&&ct.keys&&ct.keys.IE_PROTO||"");return t?"Symbol(src)_1."+t:""}(),st=ut.toString,lt=at.hasOwnProperty,pt=at.toString,yt=RegExp("^"+st.call(lt).replace(tt,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),dt=it.splice,ht=Math.max,vt=Math.min,bt=D(ot,"Map"),_t=D(Object,"create");y.prototype.clear=d,y.prototype.delete=h,y.prototype.get=v,y.prototype.has=b,y.prototype.set=_,m.prototype.clear=g,m.prototype.delete=w,m.prototype.get=O,m.prototype.has=j,m.prototype.set=P,E.prototype.clear=S,E.prototype.delete=x,E.prototype.get=T,E.prototype.has=$,E.prototype.set=k,C.prototype.add=C.prototype.push=A,C.prototype.has=R;var mt=function(t,e){return e=ht(void 0===e?t.length-1:e,0),function(){for(var n=arguments,o=-1,i=ht(n.length-e,0),u=Array(i);++o<i;)u[o]=n[e+o];o=-1;for(var a=Array(e+1);++o<e;)a[o]=n[o];return a[e]=u,r(t,this,a)}}(function(t){var e=i(t,F);return e.length&&e[0]===t[0]?I(e):[]});t.exports=mt}).call(e,r(6))},function(t,e){var r;r=function(){return this}();try{r=r||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(r=window)}t.exports=r},function(t,e,r){(function(e){function r(t,e,r){switch(r.length){case 0:return t.call(e);case 1:return t.call(e,r[0]);case 2:return t.call(e,r[0],r[1]);case 3:return t.call(e,r[0],r[1],r[2])}return t.apply(e,r)}function n(t,e){return!!(t?t.length:0)&&c(t,e,0)>-1}function o(t,e,r){for(var n=-1,o=t?t.length:0;++n<o;)if(r(e,t[n]))return!0;return!1}function i(t,e){for(var r=-1,n=t?t.length:0,o=Array(n);++r<n;)o[r]=e(t[r],r,t);return o}function u(t,e){for(var r=-1,n=e.length,o=t.length;++r<n;)t[o+r]=e[r];return t}function a(t,e,r,n){for(var o=t.length,i=r+(n?1:-1);n?i--:++i<o;)if(e(t[i],i,t))return i;return-1}function c(t,e,r){if(e!==e)return a(t,f,r);for(var n=r-1,o=t.length;++n<o;)if(t[n]===e)return n;return-1}function f(t){return t!==t}function s(t){return function(e){return t(e)}}function l(t,e){return t.has(e)}function p(t,e){return null==t?void 0:t[e]}function y(t){var e=!1;if(null!=t&&"function"!=typeof t.toString)try{e=!!(t+"")}catch(t){}return e}function d(t){var e=-1,r=t?t.length:0;for(this.clear();++e<r;){var n=t[e];this.set(n[0],n[1])}}function h(){this.__data__=Et?Et(null):{}}function v(t){return this.has(t)&&delete this.__data__[t]}function b(t){var e=this.__data__;if(Et){var r=e[t];return r===tt?void 0:r}return vt.call(e,t)?e[t]:void 0}function _(t){var e=this.__data__;return Et?void 0!==e[t]:vt.call(e,t)}function m(t,e){return this.__data__[t]=Et&&void 0===e?tt:e,this}function g(t){var e=-1,r=t?t.length:0;for(this.clear();++e<r;){var n=t[e];this.set(n[0],n[1])}}function w(){this.__data__=[]}function O(t){var e=this.__data__,r=I(e,t);return!(r<0)&&(r==e.length-1?e.pop():wt.call(e,r,1),!0)}function j(t){var e=this.__data__,r=I(e,t);return r<0?void 0:e[r][1]}function P(t){return I(this.__data__,t)>-1}function E(t,e){var r=this.__data__,n=I(r,t);return n<0?r.push([t,e]):r[n][1]=e,this}function S(t){var e=-1,r=t?t.length:0;for(this.clear();++e<r;){var n=t[e];this.set(n[0],n[1])}}function x(){this.__data__={hash:new d,map:new(Pt||g),string:new d}}function T(t){return D(this,t).delete(t)}function $(t){return D(this,t).get(t)}function k(t){return D(this,t).has(t)}function C(t,e){return D(this,t).set(t,e),this}function A(t){var e=-1,r=t?t.length:0;for(this.__data__=new S;++e<r;)this.add(t[e])}function R(t){return this.__data__.set(t,tt),this}function M(t){return this.__data__.has(t)}function I(t,e){for(var r=t.length;r--;)if(Y(t[r][0],e))return r;return-1}function N(t,e,r,u){var a=-1,c=n,f=!0,p=t.length,y=[],d=e.length;if(!p)return y;r&&(e=i(e,s(r))),u?(c=o,f=!1):e.length>=Z&&(c=l,f=!1,e=new A(e));t:for(;++a<p;){var h=t[a],v=r?r(h):h;if(h=u||0!==h?h:0,f&&v===v){for(var b=d;b--;)if(e[b]===v)continue t;y.push(h)}else c(e,v,u)||y.push(h)}return y}function F(t,e,r,n,o){var i=-1,a=t.length;for(r||(r=L),o||(o=[]);++i<a;){var c=t[i];e>0&&r(c)?e>1?F(c,e-1,r,n,o):u(o,c):n||(o[o.length]=c)}return o}function V(t){return!(!Q(t)||z(t))&&(H(t)||y(t)?_t:ut).test(U(t))}function D(t,e){var r=t.__data__;return W(e)?r["string"==typeof e?"string":"hash"]:r.map}function q(t,e){var r=p(t,e);return V(r)?r:void 0}function L(t){return xt(t)||J(t)||!!(Ot&&t&&t[Ot])}function W(t){var e=typeof t;return"string"==e||"number"==e||"symbol"==e||"boolean"==e?"__proto__"!==t:null===t}function z(t){return!!dt&&dt in t}function U(t){if(null!=t){try{return ht.call(t)}catch(t){}try{return t+""}catch(t){}}return""}function Y(t,e){return t===e||t!==t&&e!==e}function J(t){return G(t)&&vt.call(t,"callee")&&(!gt.call(t,"callee")||bt.call(t)==rt)}function B(t){return null!=t&&K(t.length)&&!H(t)}function G(t){return X(t)&&B(t)}function H(t){var e=Q(t)?bt.call(t):"";return e==nt||e==ot}function K(t){return"number"==typeof t&&t>-1&&t%1==0&&t<=et}function Q(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function X(t){return!!t&&"object"==typeof t}var Z=200,tt="__lodash_hash_undefined__",et=9007199254740991,rt="[object Arguments]",nt="[object Function]",ot="[object GeneratorFunction]",it=/[\\^$.*+?()[\]{}|]/g,ut=/^\[object .+?Constructor\]$/,at="object"==typeof e&&e&&e.Object===Object&&e,ct="object"==typeof self&&self&&self.Object===Object&&self,ft=at||ct||Function("return this")(),st=Array.prototype,lt=Function.prototype,pt=Object.prototype,yt=ft["__core-js_shared__"],dt=function(){var t=/[^.]+$/.exec(yt&&yt.keys&&yt.keys.IE_PROTO||"");return t?"Symbol(src)_1."+t:""}(),ht=lt.toString,vt=pt.hasOwnProperty,bt=pt.toString,_t=RegExp("^"+ht.call(vt).replace(it,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),mt=ft.Symbol,gt=pt.propertyIsEnumerable,wt=st.splice,Ot=mt?mt.isConcatSpreadable:void 0,jt=Math.max,Pt=q(ft,"Map"),Et=q(Object,"create");d.prototype.clear=h,d.prototype.delete=v,d.prototype.get=b,d.prototype.has=_,d.prototype.set=m,g.prototype.clear=w,g.prototype.delete=O,g.prototype.get=j,g.prototype.has=P,g.prototype.set=E,S.prototype.clear=x,S.prototype.delete=T,S.prototype.get=$,S.prototype.has=k,S.prototype.set=C,A.prototype.add=A.prototype.push=R,A.prototype.has=M;var St=function(t,e){return e=jt(void 0===e?t.length-1:e,0),function(){for(var n=arguments,o=-1,i=jt(n.length-e,0),u=Array(i);++o<i;)u[o]=n[e+o];o=-1;for(var a=Array(e+1);++o<e;)a[o]=n[o];return a[e]=u,r(t,this,a)}}(function(t,e){return G(t)?N(t,F(e,1,G,!0)):[]}),xt=Array.isArray;t.exports=St}).call(e,r(6))},function(t,e,r){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.PermissibleRender=e.Permissible=void 0;var n=r(9),o=r(16);e.Permissible=n.Permissible,e.PermissibleRender=o.PermissibleRender},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function a(t,e,r,n,a){var l=a?(0,y.default)(e,r).length:0===(0,h.default)(r,e).length;return function(a){function f(t){o(this,f);var e=i(this,(f.__proto__||Object.getPrototypeOf(f)).call(this,t));return l||e.runCallback(),e}return u(f,a),c(f,[{key:"runCallback",value:function(){if(n)return n({userPermissions:e,requiredPermissions:r},this.props.history)}},{key:"render",value:function(){return l?s.default.createElement(t,this.props):null}}]),f}(f.Component)}Object.defineProperty(e,"__esModule",{value:!0});var c=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}}();e.Permissible=a;var f=r(2),s=n(f),l=r(3),p=(n(l),r(5)),y=n(p),d=r(7),h=n(d)},function(t,e,r){"use strict";function n(t){if("object"==typeof t&&null!==t){var e=t.$$typeof;switch(e){case u:switch(t=t.type){case y:case d:case c:case s:case f:case v:return t;default:switch(t=t&&t.$$typeof){case p:case h:case l:return t;default:return e}}case _:case b:case a:return e}}}function o(t){return n(t)===d}/** @license React v16.8.6
* react-is.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
Object.defineProperty(e,"__esModule",{value:!0});var i="function"==typeof Symbol&&Symbol.for,u=i?Symbol.for("react.element"):60103,a=i?Symbol.for("react.portal"):60106,c=i?Symbol.for("react.fragment"):60107,f=i?Symbol.for("react.strict_mode"):60108,s=i?Symbol.for("react.profiler"):60114,l=i?Symbol.for("react.provider"):60109,p=i?Symbol.for("react.context"):60110,y=i?Symbol.for("react.async_mode"):60111,d=i?Symbol.for("react.concurrent_mode"):60111,h=i?Symbol.for("react.forward_ref"):60112,v=i?Symbol.for("react.suspense"):60113,b=i?Symbol.for("react.memo"):60115,_=i?Symbol.for("react.lazy"):60116;e.typeOf=n,e.AsyncMode=y,e.ConcurrentMode=d,e.ContextConsumer=p,e.ContextProvider=l,e.Element=u,e.ForwardRef=h,e.Fragment=c,e.Lazy=_,e.Memo=b,e.Portal=a,e.Profiler=s,e.StrictMode=f,e.Suspense=v,e.isValidElementType=function(t){return"string"==typeof t||"function"==typeof t||t===c||t===d||t===s||t===f||t===v||"object"==typeof t&&null!==t&&(t.$$typeof===_||t.$$typeof===b||t.$$typeof===l||t.$$typeof===p||t.$$typeof===h)},e.isAsyncMode=function(t){return o(t)||n(t)===y},e.isConcurrentMode=o,e.isContextConsumer=function(t){return n(t)===p},e.isContextProvider=function(t){return n(t)===l},e.isElement=function(t){return"object"==typeof t&&null!==t&&t.$$typeof===u},e.isForwardRef=function(t){return n(t)===h},e.isFragment=function(t){return n(t)===c},e.isLazy=function(t){return n(t)===_},e.isMemo=function(t){return n(t)===b},e.isPortal=function(t){return n(t)===a},e.isProfiler=function(t){return n(t)===s},e.isStrictMode=function(t){return n(t)===f},e.isSuspense=function(t){return n(t)===v}},function(t,e,r){"use strict";(function(t){/** @license React v16.8.6
* react-is.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
"production"!==t.env.NODE_ENV&&function(){function t(t){return"string"==typeof t||"function"==typeof t||t===m||t===E||t===w||t===g||t===x||"object"==typeof t&&null!==t&&(t.$$typeof===$||t.$$typeof===T||t.$$typeof===O||t.$$typeof===j||t.$$typeof===S)}function r(t){if("object"==typeof t&&null!==t){var e=t.$$typeof;switch(e){case b:var r=t.type;switch(r){case P:case E:case m:case w:case g:case x:return r;default:var n=r&&r.$$typeof;switch(n){case j:case S:case O:return n;default:return e}}case $:case T:case _:return e}}}function n(t){return J||(J=!0,A(!1,"The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")),o(t)||r(t)===P}function o(t){return r(t)===E}function i(t){return r(t)===j}function u(t){return r(t)===O}function a(t){return"object"==typeof t&&null!==t&&t.$$typeof===b}function c(t){return r(t)===S}function f(t){return r(t)===m}function s(t){return r(t)===$}function l(t){return r(t)===T}function p(t){return r(t)===_}function y(t){return r(t)===w}function d(t){return r(t)===g}function h(t){return r(t)===x}Object.defineProperty(e,"__esModule",{value:!0});var v="function"==typeof Symbol&&Symbol.for,b=v?Symbol.for("react.element"):60103,_=v?Symbol.for("react.portal"):60106,m=v?Symbol.for("react.fragment"):60107,g=v?Symbol.for("react.strict_mode"):60108,w=v?Symbol.for("react.profiler"):60114,O=v?Symbol.for("react.provider"):60109,j=v?Symbol.for("react.context"):60110,P=v?Symbol.for("react.async_mode"):60111,E=v?Symbol.for("react.concurrent_mode"):60111,S=v?Symbol.for("react.forward_ref"):60112,x=v?Symbol.for("react.suspense"):60113,T=v?Symbol.for("react.memo"):60115,$=v?Symbol.for("react.lazy"):60116,k=function(){},C=function(t){for(var e=arguments.length,r=Array(e>1?e-1:0),n=1;n<e;n++)r[n-1]=arguments[n];var o=0,i="Warning: "+t.replace(/%s/g,function(){return r[o++]});"undefined"!=typeof console&&console.warn(i);try{throw new Error(i)}catch(t){}};k=function(t,e){if(void 0===e)throw new Error("`lowPriorityWarning(condition, format, ...args)` requires a warning message argument");if(!t){for(var r=arguments.length,n=Array(r>2?r-2:0),o=2;o<r;o++)n[o-2]=arguments[o];C.apply(void 0,[e].concat(n))}};var A=k,R=P,M=E,I=j,N=O,F=b,V=S,D=m,q=$,L=T,W=_,z=w,U=g,Y=x,J=!1;e.typeOf=r,e.AsyncMode=R,e.ConcurrentMode=M,e.ContextConsumer=I,e.ContextProvider=N,e.Element=F,e.ForwardRef=V,e.Fragment=D,e.Lazy=q,e.Memo=L,e.Portal=W,e.Profiler=z,e.StrictMode=U,e.Suspense=Y,e.isValidElementType=t,e.isAsyncMode=n,e.isConcurrentMode=o,e.isContextConsumer=i,e.isContextProvider=u,e.isElement=a,e.isForwardRef=c,e.isFragment=f,e.isLazy=s,e.isMemo=l,e.isPortal=p,e.isProfiler=y,e.isStrictMode=d,e.isSuspense=h}()}).call(e,r(0))},function(t,e,r){"use strict";(function(e){function n(){return null}var o=r(4),i=r(13),u=r(1),a=r(14),c=Function.call.bind(Object.prototype.hasOwnProperty),f=function(){};"production"!==e.env.NODE_ENV&&(f=function(t){var e="Warning: "+t;"undefined"!=typeof console&&console.error(e);try{throw new Error(e)}catch(t){}}),t.exports=function(t,r){function s(t){var e=t&&(T&&t[T]||t[$]);if("function"==typeof e)return e}function l(t,e){return t===e?0!==t||1/t==1/e:t!==t&&e!==e}function p(t){this.message=t,this.stack=""}function y(t){function n(n,a,c,s,l,y,d){if(s=s||k,y=y||c,d!==u){if(r){var h=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");throw h.name="Invariant Violation",h}if("production"!==e.env.NODE_ENV&&"undefined"!=typeof console){var v=s+":"+c;!o[v]&&i<3&&(f("You are manually calling a React.PropTypes validation function for the `"+y+"` prop on `"+s+"`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."),o[v]=!0,i++)}}return null==a[c]?n?new p(null===a[c]?"The "+l+" `"+y+"` is marked as required in `"+s+"`, but its value is `null`.":"The "+l+" `"+y+"` is marked as required in `"+s+"`, but its value is `undefined`."):null:t(a,c,s,l,y)}if("production"!==e.env.NODE_ENV)var o={},i=0;var a=n.bind(null,!1);return a.isRequired=n.bind(null,!0),a}function d(t){function e(e,r,n,o,i,u){var a=e[r];if(P(a)!==t)return new p("Invalid "+o+" `"+i+"` of type `"+E(a)+"` supplied to `"+n+"`, expected `"+t+"`.");return null}return y(e)}function h(t){function e(e,r,n,o,i){if("function"!=typeof t)return new p("Property `"+i+"` of component `"+n+"` has invalid PropType notation inside arrayOf.");var a=e[r];if(!Array.isArray(a)){return new p("Invalid "+o+" `"+i+"` of type `"+P(a)+"` supplied to `"+n+"`, expected an array.")}for(var c=0;c<a.length;c++){var f=t(a,c,n,o,i+"["+c+"]",u);if(f instanceof Error)return f}return null}return y(e)}function v(t){function e(e,r,n,o,i){if(!(e[r]instanceof t)){var u=t.name||k;return new p("Invalid "+o+" `"+i+"` of type `"+x(e[r])+"` supplied to `"+n+"`, expected instance of `"+u+"`.")}return null}return y(e)}function b(t){function r(e,r,n,o,i){for(var u=e[r],a=0;a<t.length;a++)if(l(u,t[a]))return null;var c=JSON.stringify(t,function(t,e){return"symbol"===E(e)?String(e):e});return new p("Invalid "+o+" `"+i+"` of value `"+String(u)+"` supplied to `"+n+"`, expected one of "+c+".")}return Array.isArray(t)?y(r):("production"!==e.env.NODE_ENV&&f(arguments.length>1?"Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).":"Invalid argument supplied to oneOf, expected an array."),n)}function _(t){function e(e,r,n,o,i){if("function"!=typeof t)return new p("Property `"+i+"` of component `"+n+"` has invalid PropType notation inside objectOf.");var a=e[r],f=P(a);if("object"!==f)return new p("Invalid "+o+" `"+i+"` of type `"+f+"` supplied to `"+n+"`, expected an object.");for(var s in a)if(c(a,s)){var l=t(a,s,n,o,i+"."+s,u);if(l instanceof Error)return l}return null}return y(e)}function m(t){function r(e,r,n,o,i){for(var a=0;a<t.length;a++){if(null==(0,t[a])(e,r,n,o,i,u))return null}return new p("Invalid "+o+" `"+i+"` supplied to `"+n+"`.")}if(!Array.isArray(t))return"production"!==e.env.NODE_ENV&&f("Invalid argument supplied to oneOfType, expected an instance of array."),n;for(var o=0;o<t.length;o++){var i=t[o];if("function"!=typeof i)return f("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+S(i)+" at index "+o+"."),n}return y(r)}function g(t){function e(e,r,n,o,i){var a=e[r],c=P(a);if("object"!==c)return new p("Invalid "+o+" `"+i+"` of type `"+c+"` supplied to `"+n+"`, expected `object`.");for(var f in t){var s=t[f];if(s){var l=s(a,f,n,o,i+"."+f,u);if(l)return l}}return null}return y(e)}function w(t){function e(e,r,n,o,a){var c=e[r],f=P(c);if("object"!==f)return new p("Invalid "+o+" `"+a+"` of type `"+f+"` supplied to `"+n+"`, expected `object`.");var s=i({},e[r],t);for(var l in s){var y=t[l];if(!y)return new p("Invalid "+o+" `"+a+"` key `"+l+"` supplied to `"+n+"`.\nBad object: "+JSON.stringify(e[r],null," ")+"\nValid keys: "+JSON.stringify(Object.keys(t),null," "));var d=y(c,l,n,o,a+"."+l,u);if(d)return d}return null}return y(e)}function O(e){switch(typeof e){case"number":case"string":case"undefined":return!0;case"boolean":return!e;case"object":if(Array.isArray(e))return e.every(O);if(null===e||t(e))return!0;var r=s(e);if(!r)return!1;var n,o=r.call(e);if(r!==e.entries){for(;!(n=o.next()).done;)if(!O(n.value))return!1}else for(;!(n=o.next()).done;){var i=n.value;if(i&&!O(i[1]))return!1}return!0;default:return!1}}function j(t,e){return"symbol"===t||!!e&&("Symbol"===e["@@toStringTag"]||"function"==typeof Symbol&&e instanceof Symbol)}function P(t){var e=typeof t;return Array.isArray(t)?"array":t instanceof RegExp?"object":j(e,t)?"symbol":e}function E(t){if(void 0===t||null===t)return""+t;var e=P(t);if("object"===e){if(t instanceof Date)return"date";if(t instanceof RegExp)return"regexp"}return e}function S(t){var e=E(t);switch(e){case"array":case"object":return"an "+e;case"boolean":case"date":case"regexp":return"a "+e;default:return e}}function x(t){return t.constructor&&t.constructor.name?t.constructor.name:k}var T="function"==typeof Symbol&&Symbol.iterator,$="@@iterator",k="<<anonymous>>",C={array:d("array"),bool:d("boolean"),func:d("function"),number:d("number"),object:d("object"),string:d("string"),symbol:d("symbol"),any:function(){return y(n)}(),arrayOf:h,element:function(){function e(e,r,n,o,i){var u=e[r];if(!t(u)){return new p("Invalid "+o+" `"+i+"` of type `"+P(u)+"` supplied to `"+n+"`, expected a single ReactElement.")}return null}return y(e)}(),elementType:function(){function t(t,e,r,n,i){var u=t[e];if(!o.isValidElementType(u)){return new p("Invalid "+n+" `"+i+"` of type `"+P(u)+"` supplied to `"+r+"`, expected a single ReactElement type.")}return null}return y(t)}(),instanceOf:v,node:function(){function t(t,e,r,n,o){return O(t[e])?null:new p("Invalid "+n+" `"+o+"` supplied to `"+r+"`, expected a ReactNode.")}return y(t)}(),objectOf:_,oneOf:b,oneOfType:m,shape:g,exact:w};return p.prototype=Error.prototype,C.checkPropTypes=a,C.resetWarningCache=a.resetWarningCache,C.PropTypes=C,C}}).call(e,r(0))},function(t,e,r){"use strict";function n(t){if(null===t||void 0===t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}/*
object-assign
(c) Sindre Sorhus
@license MIT
*/
var o=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;t.exports=function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},r=0;r<10;r++)e["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(e).map(function(t){return e[t]}).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach(function(t){n[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(t){return!1}}()?Object.assign:function(t,e){for(var r,a,c=n(t),f=1;f<arguments.length;f++){r=Object(arguments[f]);for(var s in r)i.call(r,s)&&(c[s]=r[s]);if(o){a=o(r);for(var l=0;l<a.length;l++)u.call(r,a[l])&&(c[a[l]]=r[a[l]])}}return c}},function(t,e,r){"use strict";(function(e){function n(t,r,n,c,f){if("production"!==e.env.NODE_ENV)for(var s in t)if(a(t,s)){var l;try{if("function"!=typeof t[s]){var p=Error((c||"React class")+": "+n+" type `"+s+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof t[s]+"`.");throw p.name="Invariant Violation",p}l=t[s](r,s,c,n,null,i)}catch(t){l=t}if(!l||l instanceof Error||o((c||"React class")+": type specification of "+n+" `"+s+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof l+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),l instanceof Error&&!(l.message in u)){u[l.message]=!0;var y=f?f():"";o("Failed "+n+" type: "+l.message+(null!=y?y:""))}}}var o=function(){};if("production"!==e.env.NODE_ENV){var i=r(1),u={},a=Function.call.bind(Object.prototype.hasOwnProperty);o=function(t){var e="Warning: "+t;"undefined"!=typeof console&&console.error(e);try{throw new Error(e)}catch(t){}}}n.resetWarningCache=function(){"production"!==e.env.NODE_ENV&&(u={})},t.exports=n}).call(e,r(0))},function(t,e,r){"use strict";function n(){}function o(){}var i=r(1);o.resetWarningCache=n,t.exports=function(){function t(t,e,r,n,o,u){if(u!==i){var a=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw a.name="Invariant Violation",a}}function e(){return t}t.isRequired=t;var r={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,elementType:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e,checkPropTypes:o,resetWarningCache:n};return r.PropTypes=r,r}},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0}),e.PermissibleRender=void 0;var a=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}}(),c=r(2),f=r(3),s=(n(f),r(5)),l=n(s),p=r(7),y=n(p);e.PermissibleRender=function(t){function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),a(e,[{key:"checkPermissions",value:function(){var t=this.props,e=t.userPermissions,r=t.requiredPermissions;return t.oneperm?(0,l.default)(e,r).length:0===(0,y.default)(r,e).length}},{key:"render",value:function(){var t=this.props,e=t.children,r=t.userPermissions,n=t.requiredPermissions,o=t.renderOtherwise;return e&&r&&n?this.checkPermissions()?e:o||null:null}}]),e}(c.Component)}])});
================================================
FILE: package.json
================================================
{
"name": "@brainhubeu/react-permissible",
"version": "1.9.16",
"description": "Permission management component for React",
"engines": {
"npm": ">=6.14.5"
},
"scripts": {
"lint": "esw webpack.config.* src tools test --color",
"lint:types": "esw 'types/*.{ts,tsx}' 'types/tests/*.{ts,tsx}' --ext ts,tsx --color --format codeframe --config ./types/.eslintrc",
"lint:types:watch": "npm run --silent lint:types -- --watch",
"lint:types:fix": "npm run --silent lint:types -- --fix",
"clean-dist": "rm -rf ./lib && mkdir lib",
"prebuild": "npm run clean-dist",
"build": "node tools/build.js",
"test": "mocha tools/testSetup.js \"./test/**/*.js\"",
"test:coverage": "NODE_PATH=example babel-node ./node_modules/.bin/isparta cover _mocha -- --require ./tools/testSetup.js \"./test/**/*.js\" && open coverage/lcov-report/index.html",
"test:coverage:ci": "NODE_PATH=example babel-node ./node_modules/.bin/isparta cover _mocha --report lcovonly -- --require ./tools/testSetup.js \"./test/**/*.js\"",
"test:typescript": "cd ./types/tests && npm install-test --no-audit",
"precommit": "npm run lint && npm run lint:types"
},
"author": "Krystian Kościelniak",
"license": "MIT",
"dependencies": {
"gatsby-plugin-google-analytics": "2.3.2",
"lodash.difference": "^4.5.0",
"lodash.intersection": "^4.4.0"
},
"devDependencies": {
"autoprefixer": "^9.8.4",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-react-display-name": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-transform-react-constant-elements": "^6.23.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-1": "^6.24.1",
"babel-register": "^6.26.0",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"chai-enzyme": "^1.0.0-beta.1",
"chalk": "^4.1.0",
"coveralls": "^3.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^7.3.1",
"eslint-config-brainhub": "^1.13.0",
"eslint-plugin-typescript": "^0.14.0",
"eslint-watch": "^7.0.0",
"html-webpack-plugin": "^4.3.0",
"husky": "^4.2.5",
"isparta": "^4.1.1",
"jsdom": "^16.2.2",
"mocha": "^8.0.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-test-renderer": "^16.13.1",
"sinon": "^9.0.2",
"sinon-chai": "^3.5.0",
"typescript": "^3.9.6",
"typescript-eslint-parser": "^21.0.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.43.0"
},
"peerDependencies": {
"react": ">0.14.0 || >15.0.0",
"react-dom": ">0.14.0 || >15.0.0"
},
"keywords": [
"react",
"react-permissions",
"permissions",
"permission-manager",
"props",
"callback",
"users",
"authentication",
"optional-props",
"authorization",
"access-control"
],
"repository": {
"type": "git",
"url": "https://github.com/brainhubeu/react-permissible"
},
"main": "./lib/react-permissible.js",
"types": "./types/react-permissible.d.ts"
}
================================================
FILE: renovate.json
================================================
{
"bumpVersion": "patch",
"commitMessagePrefix": "[renovate] ",
"groupName": "NPM dependencies",
"labels": ["renovate"],
"rangeStrategy": "bump",
"branchPrefix": "fix/renovate/",
"docker": {
"major": {
"enabled": true
}
},
"packageRules": [
{
"groupName": "Docker dependencies",
"managers": [
"circleci"
]
},
{
"groupName": "gatsby",
"managerBranchPrefix": "gatsby",
"packagePatterns": [
"gatsby"
],
"rangeStrategy": "pin"
}
],
"schedule": [
"before 3am on the first day of the month"
]
}
================================================
FILE: src/components/permissible.js
================================================
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import intersection from 'lodash.intersection';
import difference from 'lodash.difference';
export function Permissible(
RestrictedComponent,
userPermissions,
requiredPermissions,
callbackFunction,
oneperm,
) {
const permissionsStatus = oneperm
? intersection(userPermissions, requiredPermissions).length
: difference(requiredPermissions, userPermissions).length === 0;
class PermissibleHOC extends Component {
static propTypes = {
oneperm: PropTypes.bool,
history: PropTypes.object, // eslint-disable-line react/forbid-prop-types
};
constructor(props) {
super(props);
if (!permissionsStatus) {
this.runCallback();
}
}
runCallback() {
if (callbackFunction) {
return callbackFunction({
userPermissions,
requiredPermissions,
},
this.props.history);
}
return;
}
render() {
if (permissionsStatus) {
return <RestrictedComponent {...this.props}/>;
}
return null;
}
}
return PermissibleHOC;
}
================================================
FILE: src/components/permissibleRender.js
================================================
import { Component } from 'react';
import PropTypes from 'prop-types';
import intersection from 'lodash.intersection';
import difference from 'lodash.difference';
export class PermissibleRender extends Component {
static propTypes = {
oneperm: PropTypes.bool,
userPermissions: PropTypes.arrayOf(PropTypes.string).isRequired,
requiredPermissions: PropTypes.arrayOf(PropTypes.string).isRequired,
children: PropTypes.element.isRequired,
renderOtherwise: PropTypes.element,
};
checkPermissions() {
const { userPermissions, requiredPermissions, oneperm } = this.props;
if (oneperm) {
return intersection(userPermissions, requiredPermissions).length;
}
return difference(requiredPermissions, userPermissions).length === 0;
}
render() {
const { children, userPermissions, requiredPermissions, renderOtherwise } = this.props;
if (!children || !userPermissions || !requiredPermissions) {
return null;
}
if (this.checkPermissions()) {
return children;
} else if (renderOtherwise) {
return renderOtherwise;
}
return null;
}
}
================================================
FILE: src/index.js
================================================
import { Permissible } from './components/permissible';
import { PermissibleRender } from './components/permissibleRender';
export {
Permissible,
PermissibleRender,
};
================================================
FILE: test/.eslintrc
================================================
{
env: {
es6: true,
browser: true,
node: true,
mocha: true,
},
}
================================================
FILE: test/accessible.component.js
================================================
import React from 'react';
import PropTypes from 'prop-types';
const Accessible = ({ permission, oneperm }) => (
<div className="accessible-component">
<p>
{oneperm ? 'One of' : 'Whole set of'} <code>{permission}</code> is necessary to see this component.
</p>
</div>
);
Accessible.propTypes = {
permission: PropTypes.string,
oneperm: PropTypes.bool,
};
export default Accessible;
================================================
FILE: test/permissible.test.js
================================================
import React from 'react';
import { shallow } from 'enzyme';
import chai from 'chai';
import chaiEnzyme from 'chai-enzyme';
import { JSDOM } from 'jsdom';
import { Permissible } from '../src/components/permissible';
import AccessedComponent from './accessible.component';
const { document } = (new JSDOM('')).window;
global.document = document;
global.window = document.defaultView;
chai.use(chaiEnzyme());
chai.should();
describe('Permissible HOC', () => {
it('doesn\'t run a callback function if the permissions are right', done => {
let err = null;
const AccessibleRoute = Permissible(
() => <AccessedComponent />,
['MATCHING_PERMISSIONS'],
['MATCHING_PERMISSIONS'],
() => {
err = new Error('Callback function called.');
},
);
shallow(
<AccessibleRoute />,
);
done(err);
});
it('doesn\'t run a callback function if `requiredPermissions` and `userPermissions` are both empty', done => {
let err = null;
const AccessibleRoute = Permissible(
() => <AccessedComponent />,
[],
[],
() => {
err = new Error('Callback function called.');
},
);
shallow(
<AccessibleRoute />,
);
done(err);
});
it('doesn\'t run a callback function if only `requiredPermissions` are empty', done => {
let err = null;
const AccessibleRoute = Permissible(
() => <AccessedComponent />,
['SOME_PERMISSION'],
[],
() => {
err = new Error('Callback function called.');
},
);
shallow(
<AccessibleRoute />,
);
done(err);
});
it('runs a callback function if the permissions don\'t match', done => {
const AccessibleRoute = Permissible(
() => <AccessedComponent />,
['MATCHING_PERMISSIONS'],
['UNMATCHING_PERMISSIONS'],
() => {
done();
},
);
shallow(
<AccessibleRoute/>,
);
});
it('doesn\'t run a callback function if the user has one of necessary permissions and `oneperm` is `true`', done => {
let err = null;
const AccessibleRoute = Permissible(
() => <AccessedComponent/>,
['REQUIRED_PERMISSION'],
['REQUIRED_PERMISSION', 'ANOTHER_PERMISSION'],
() => {
err = new Error('Callback function called.');
},
true,
);
shallow(
<AccessibleRoute />,
);
done(err);
});
it('runs a callback function if the user has one of necessary permissions and `oneperm` is `false`', done => {
const AccessibleRoute = Permissible(
() => <AccessedComponent />,
['REQUIRED_PERMISSION'],
['REQUIRED_PERMISSION', 'ANOTHER_PERMISSION'],
() => {
done();
},
false,
);
shallow(
<AccessibleRoute />,
);
});
it('doesn\'t run a callback function if it is not defined', done => {
const AccessibleRoute = Permissible(
() => <AccessedComponent />,
['REQUIRED_PERMISSION'],
['REQUIRED_PERMISSION', 'ANOTHER_PERMISSION'],
null,
false,
);
shallow(
<AccessibleRoute />,
);
done();
});
});
================================================
FILE: test/permissibleRender.test.js
================================================
import React from 'react';
import { mount } from 'enzyme';
import chai from 'chai';
import chaiEnzyme from 'chai-enzyme';
import { JSDOM } from 'jsdom';
import { PermissibleRender } from '../src/components/permissibleRender';
const should = chai.should();
const { document } = (new JSDOM('')).window;
global.document = document;
global.window = document.defaultView;
chai.use(chaiEnzyme());
chai.should();
describe('PermissibleRender', () => {
const ChildComponent = () => (
<div>
Child component
</div>
);
const NotAllowedComponent = () => (
<div>
Not allowed component
</div>
);
it('doesn\'t render a <ChildComponent /> if `userPermissions` prop is not set', () => {
const props = {
requiredPermissions: [],
};
const mountedComponent = mount(
<PermissibleRender {...props}>
<ChildComponent />
</PermissibleRender>,
);
const searchedElement = mountedComponent.find('ChildComponent');
searchedElement.length.should.be.equal(0);
});
it('doesn\'t render a <ChildComponent /> if `requiredPermissions` prop is not set', () => {
const props = {
userPermissions: [],
};
const mountedComponent = mount(
<PermissibleRender {...props}>
<ChildComponent />
</PermissibleRender>,
);
const searchedElement = mountedComponent.find('ChildComponent');
searchedElement.length.should.be.equal(0);
});
it('renders nothing if `children` prop is not set', () => {
const props = {
userPermissions: [],
};
const mountedComponent = mount(
<PermissibleRender {...props} />,
);
should.not.exist(mountedComponent.find('PermissibleRender').html());
});
it('renders a <ChildComponent /> if user permissions and required permissions are both empty', () => {
const props = {
userPermissions: [],
requiredPermissions: [],
};
const mountedComponent = mount(
<PermissibleRender {...props}>
<ChildComponent />
</PermissibleRender>,
);
const searchedElement = mountedComponent.find('ChildComponent');
searchedElement.length.should.be.equal(1);
});
it('renders a <ChildComponent /> if only required permissions are empty', () => {
const props = {
userPermissions: ['SOME_PERMISSION'],
requiredPermissions: [],
};
const mountedComponent = mount(
<PermissibleRender {...props}>
<ChildComponent />
</PermissibleRender>,
);
const searchedElement = mountedComponent.find('ChildComponent');
searchedElement.length.should.be.equal(1);
});
it('doesn\'t render a <ChildComponent /> if there is a permission mismatch', () => {
const props = {
userPermissions: ['REQUIRED_PERMISSION'],
requiredPermissions: ['ANOTHER_PERMISSION'],
};
const mountedComponent = mount(
<PermissibleRender {...props}>
<ChildComponent />
</PermissibleRender>,
);
const searchedElement = mountedComponent.find('ChildComponent');
searchedElement.length.should.be.equal(0);
});
it('renders a <ChildComponent /> if the user has required permission', () => {
const props = {
userPermissions: ['REQUIRED_PERMISSION'],
requiredPermissions: ['REQUIRED_PERMISSION'],
};
const mountedComponent = mount(
<PermissibleRender {...props}>
<ChildComponent />
</PermissibleRender>,
);
const searchedElement = mountedComponent.find('ChildComponent');
searchedElement.length.should.be.greaterThan(0);
});
it('renders a <NotAllowedComponent /> if the user doesn\'t have required permissions and renderOtherwise is given', () => {
const props = {
userPermissions: ['REQUIRED_PERMISSION'],
requiredPermissions: ['NOT_REQUIRED_PERMISSION'],
renderOtherwise: <NotAllowedComponent />,
};
const mountedComponent = mount(
<PermissibleRender {...props}>
<NotAllowedComponent />
</PermissibleRender>,
);
const searchedElement = mountedComponent.find('NotAllowedComponent');
searchedElement.length.should.be.greaterThan(0);
});
it('renders a <ChildComponent /> if the user has one of necessary conditions when `oneperm` prop is defined', () => {
const props = {
userPermissions: ['ANOTHER_PERMISSION'],
requiredPermissions: ['REQUIRED_PERMISSION', 'ANOTHER_PERMISSION'],
oneperm: true,
};
const mountedComponent = mount(
<PermissibleRender {...props}>
<ChildComponent />
</PermissibleRender>,
);
const searchedElement = mountedComponent.find('ChildComponent');
searchedElement.length.should.be.greaterThan(0);
});
it('doesn\'t render a <ChildComponent /> if the user doesn\'t have all of necessary permissions when `oneperm` prop is explicitly set to false', () => {
const props = {
userPermissions: ['REQUIRED_PERMISSION'],
requiredPermissions: ['REQUIRED_PERMISSION', 'ANOTHER_PERMISSION'],
oneperm: false,
};
const mountedComponent = mount(
<PermissibleRender {...props}>
<ChildComponent />
</PermissibleRender>,
);
const searchedElement = mountedComponent.find('ChildComponent');
searchedElement.length.should.be.equal(0);
});
});
================================================
FILE: tools/build.js
================================================
// More info on Webpack's Node API here: https://webpack.github.io/docs/node.js-api.html
// Allowing console calls below since this is a build file.
/* eslint-disable no-console */
const chalk = require('chalk');
const webpack = require('webpack');
const config = require('../webpack.config.prod');
const chalkConfig = {
chalkError: chalk.red,
chalkSuccess: chalk.green,
chalkWarning: chalk.yellow,
chalkProcessing: chalk.blue,
};
const { chalkError, chalkSuccess, chalkWarning, chalkProcessing } = chalkConfig;
process.env.NODE_ENV = 'production'; // this assures React is built in prod mode and that the Babel dev config doesn't apply.
console.log(chalkProcessing('Generating minified bundle. This will take a moment...'));
webpack(config).run((error, stats) => {
if (error) { // so a fatal error occurred. Stop here.
console.log(chalkError(error));
return 1;
}
const jsonStats = stats.toJson();
if (jsonStats.hasErrors) {
return jsonStats.errors.map(error => console.log(chalkError(error)));
}
if (jsonStats.hasWarnings) {
console.log(chalkWarning('Webpack generated the following warnings: '));
jsonStats.warnings.map(warning => console.log(chalkWarning(warning)));
}
console.log(`Webpack stats: ${stats}`);
// if we got this far, the build succeeded.
console.log(chalkSuccess('Your app is compiled in production mode in /dist. It\'s ready to roll!'));
return 0;
});
================================================
FILE: tools/testSetup.js
================================================
process.env.NODE_ENV = 'test';
// Disable webpack-specific features for tests since
// Mocha doesn't know what to do with them.
/* istanbul ignore next */
['.css', '.scss', '.png', '.jpg'].forEach(ext => {
require.extensions[ext] = () => null;
});
// add required globals
/* eslint-disable no-empty-function */
/* istanbul ignore next */
global.logger = function() {};
/* istanbul ignore next */
global.logger.info = function() {};
/* istanbul ignore next */
global.logger.apiSuccess = function() {};
/* istanbul ignore next */
global.logger.apiError = function() {};
/* istanbul ignore next */
global.logger.warn = function() {};
/* eslint-enable */
// Register babel so that it will transpile ES6 to ES5
// before our tests run.
require('babel-register')();
require('babel-polyfill');
const chai = require('chai');
const sinonChai = require('sinon-chai');
const chaiAsPromised = require('chai-as-promised');
const enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
enzyme.configure({ adapter: new Adapter() });
chai.use(sinonChai);
chai.use(chaiAsPromised);
================================================
FILE: types/.eslintrc
================================================
{
"parser": "typescript-eslint-parser",
"plugins": ["eslint-plugin-typescript"],
"extends": "../.eslintrc",
"rules": {
"comma-dangle":"off",
"no-unused-vars": "off",
"import/no-namespace": "off",
"typescript/no-unused-vars": "error"
}
}
================================================
FILE: types/react-permissible.d.ts
================================================
import { Component, ComponentState, ComponentType, ReactNode, ReactNodeArray, StaticLifecycle, ValidationMap, } from 'react';
declare module '@brainhubeu/react-permissible' {
type Permissions = string[];
type Children = ReactNode | ReactNodeArray;
export interface UserAndRequiredPermissions {
userPermissions: Permissions
requiredPermissions: Permissions
}
export interface PermissibleRenderProps extends UserAndRequiredPermissions {
oneperm?: boolean
children: Children
renderOtherwise?: Children
}
export class PermissibleRender extends Component<PermissibleRenderProps> {
checkPermissions(): boolean
}
export function Permissible<Props extends object, State extends object>(
RestrictedComponent: ComponentType<Props>,
userPermissions: Permissions,
requiredPermissions: Permissions,
callbackFunction?: ({ userPermissions, requiredPermissions, }: UserAndRequiredPermissions) => void,
oneperm?: boolean,
): PermissibleHOC<Props, State, { runCallback(): void }>
interface PermissibleHOC<Props = object, State = ComponentState, TE = object> extends StaticLifecycle<Props, State> {
new (props: Props, context?: any): Component<Props, State> & TE
propTypes?: ValidationMap<Props>
contextTypes?: ValidationMap<any>
childContextTypes?: ValidationMap<any>
defaultProps?: Partial<Props>
displayName?: string
}
}
================================================
FILE: types/tests/.gitignore
================================================
brainhubeu-react-permissible-*.tgz
node_modules/
================================================
FILE: types/tests/.npmrc
================================================
update-notifier=false
audit=false
prefer-offline=true
================================================
FILE: types/tests/Permissible.test.tsx
================================================
import * as React from 'react';
import { render } from 'react-dom';
// eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies, /* this is what we're testing */
import { Permissible, UserAndRequiredPermissions } from '@brainhubeu/react-permissible';
function callbackFunction({ userPermissions, requiredPermissions }: UserAndRequiredPermissions) {
// eslint-disable-next-line no-console
console.info(`
react-permissible: Access Denied
userPermissions: ${userPermissions}
requiredPermissions: ${requiredPermissions}
`);
}
const AccessGranted = ({ message }: { message: string, }) => <>AccessGranted {message}</>;
const RestrictedComponentWithCallback = Permissible(
AccessGranted,
['ACCESS_DASHBOARD'], // userPermissions
['ACCESS_ADMIN'], // requiredPermissions
callbackFunction,
);
render(<RestrictedComponentWithCallback {...{ message: 'test' }} />, document.createElement('div'));
================================================
FILE: types/tests/PermissibleRender.test.tsx
================================================
import * as React from 'react';
import { render } from 'react-dom';
// eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies, /* this is what we're testing */
import { PermissibleRender, PermissibleRenderProps } from '@brainhubeu/react-permissible';
const VIEW_PERMISSION = 'VIEW';
const permissibleRenderTestProps: PermissibleRenderProps = {
oneperm: false,
children: 'restricted content',
userPermissions: [VIEW_PERMISSION],
requiredPermissions: [VIEW_PERMISSION],
renderOtherwise: 'ACCESS DENIED',
};
render(<PermissibleRender {...permissibleRenderTestProps} />, document.createElement('div'));
================================================
FILE: types/tests/package.json
================================================
{
"name": "react-permissible-typescript-tests",
"version": "1.0.27",
"description": "Test publishing the typings of react-permissible package",
"scripts": {
"clean:packed-package": "rm ./brainhubeu-react-permissible-*.tgz",
"clean:node-modules": "rm -rf ./node_modules/",
"preinstall": "npm run clean:packed-package && npm run clean:node-modules",
"pack-parent-package-get-filename": "npm pack ../.. | grep \\.tgz",
"postinstall": "npm install --no-save --no-audit `npm run --silent pack-parent-package-get-filename`",
"test": "tsc --project .",
"posttest": "echo 'TypeScript typings successfuly compiled!'"
},
"repository": {
"type": "git",
"url": "https://github.com/brainhubeu/react-permissible"
},
"author": "Nick Ribal <elektronik2k5@gmail.com> (https://about.me/nickribal)",
"license": "MIT",
"dependencies": {
"@types/react": "^16.9.41",
"@types/react-dom": "^16.9.8",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"typescript": "^3.9.6"
}
}
================================================
FILE: types/tests/tsconfig.json
================================================
{
"compilerOptions": {
"target": "es6",
"module": "es2015",
"noEmit": true,
"jsx": "react",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node"
}
}
================================================
FILE: webpack.config.prod.js
================================================
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
externals: [
{
'react-dom': {
root: 'ReactDOM',
commonjs2: 'react-dom',
commonjs: 'react-dom',
amd: 'react-dom',
},
},
{
react: {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react',
},
},
],
resolve: {
extensions: ['.js', '.jsx', '.json'],
modules: [
'node_modules',
path.join(__dirname, 'src'),
],
},
devtool: 'source-map',
entry: './src/index.js',
output: {
filename: 'react-permissible.js',
library: 'react-permissible',
libraryTarget: 'umd',
path: path.resolve(__dirname, 'lib'),
umdNamedDefine: true,
},
optimization: {
minimizer: [
new UglifyJsPlugin({
sourceMap: false,
}),
],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
},
};
gitextract_wgril_c7/ ├── .babelrc ├── .circleci/ │ └── config.yml ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmignore ├── .npmrc ├── LICENSE.md ├── README.md ├── docs/ │ ├── examples/ │ │ ├── callback.md │ │ ├── oneMatch.md │ │ ├── permissionsMatch.md │ │ └── renderOtherwise.md │ ├── getting-started/ │ │ ├── installation.md │ │ └── overview.md │ └── usage/ │ ├── basic.md │ └── hoc.md ├── docs-www/ │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── gatsby-config.js │ ├── gatsby-docs-kit.yml │ ├── package.json │ ├── src/ │ │ ├── globalReferences.js │ │ ├── layouts/ │ │ │ └── .gitkeep │ │ ├── pages/ │ │ │ ├── 404.js │ │ │ ├── landing.js │ │ │ ├── landing.module.scss │ │ │ └── variables.scss │ │ └── templates/ │ │ └── .gitkeep │ └── tools/ │ ├── deploy-github.sh │ ├── seed/ │ │ └── example.md │ └── seed.sh ├── lib/ │ └── react-permissible.js ├── package.json ├── renovate.json ├── src/ │ ├── components/ │ │ ├── permissible.js │ │ └── permissibleRender.js │ └── index.js ├── test/ │ ├── .eslintrc │ ├── accessible.component.js │ ├── permissible.test.js │ └── permissibleRender.test.js ├── tools/ │ ├── build.js │ └── testSetup.js ├── types/ │ ├── .eslintrc │ ├── react-permissible.d.ts │ └── tests/ │ ├── .gitignore │ ├── .npmrc │ ├── Permissible.test.tsx │ ├── PermissibleRender.test.tsx │ ├── package.json │ └── tsconfig.json └── webpack.config.prod.js
SYMBOL INDEX (177 symbols across 6 files)
FILE: lib/react-permissible.js
function e (line 1) | function e(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{...
function r (line 1) | function r(){throw new Error("setTimeout has not been defined")}
function n (line 1) | function n(){throw new Error("clearTimeout has not been defined")}
function o (line 1) | function o(t){if(s===setTimeout)return setTimeout(t,0);if((s===r||!s)&&s...
function i (line 1) | function i(t){if(l===clearTimeout)return clearTimeout(t);if((l===n||!l)&...
function u (line 1) | function u(){h&&y&&(h=!1,y.length?d=y.concat(d):v=-1,d.length&&a())}
function a (line 1) | function a(){if(!h){var t=o(u);h=!0;for(var e=d.length;e;){for(y=d,d=[];...
function c (line 1) | function c(t,e){this.fun=t,this.array=e}
function f (line 1) | function f(){}
function r (line 1) | function r(t,e,r){switch(r.length){case 0:return t.call(e);case 1:return...
function n (line 1) | function n(t,e){return!!(t?t.length:0)&&a(t,e,0)>-1}
function o (line 1) | function o(t,e,r){for(var n=-1,o=t?t.length:0;++n<o;)if(r(e,t[n]))return...
function i (line 1) | function i(t,e){for(var r=-1,n=t?t.length:0,o=Array(n);++r<n;)o[r]=e(t[r...
function u (line 1) | function u(t,e,r,n){for(var o=t.length,i=r+(n?1:-1);n?i--:++i<o;)if(e(t[...
function a (line 1) | function a(t,e,r){if(e!==e)return u(t,c,r);for(var n=r-1,o=t.length;++n<...
function c (line 1) | function c(t){return t!==t}
function f (line 1) | function f(t){return function(e){return t(e)}}
function s (line 1) | function s(t,e){return t.has(e)}
function l (line 1) | function l(t,e){return null==t?void 0:t[e]}
function p (line 1) | function p(t){var e=!1;if(null!=t&&"function"!=typeof t.toString)try{e=!...
function y (line 1) | function y(t){var e=-1,r=t?t.length:0;for(this.clear();++e<r;){var n=t[e...
function d (line 1) | function d(){this.__data__=_t?_t(null):{}}
function h (line 1) | function h(t){return this.has(t)&&delete this.__data__[t]}
function v (line 1) | function v(t){var e=this.__data__;if(_t){var r=e[t];return r===K?void 0:...
function b (line 1) | function b(t){var e=this.__data__;return _t?void 0!==e[t]:lt.call(e,t)}
function _ (line 1) | function _(t,e){return this.__data__[t]=_t&&void 0===e?K:e,this}
function m (line 1) | function m(t){var e=-1,r=t?t.length:0;for(this.clear();++e<r;){var n=t[e...
function g (line 1) | function g(){this.__data__=[]}
function w (line 1) | function w(t){var e=this.__data__,r=M(e,t);return!(r<0)&&(r==e.length-1?...
function O (line 1) | function O(t){var e=this.__data__,r=M(e,t);return r<0?void 0:e[r][1]}
function j (line 1) | function j(t){return M(this.__data__,t)>-1}
function P (line 1) | function P(t,e){var r=this.__data__,n=M(r,t);return n<0?r.push([t,e]):r[...
function E (line 1) | function E(t){var e=-1,r=t?t.length:0;for(this.clear();++e<r;){var n=t[e...
function S (line 1) | function S(){this.__data__={hash:new y,map:new(bt||m),string:new y}}
function x (line 1) | function x(t){return V(this,t).delete(t)}
function T (line 1) | function T(t){return V(this,t).get(t)}
function $ (line 1) | function $(t){return V(this,t).has(t)}
function k (line 1) | function k(t,e){return V(this,t).set(t,e),this}
function C (line 1) | function C(t){var e=-1,r=t?t.length:0;for(this.__data__=new E;++e<r;)thi...
function A (line 1) | function A(t){return this.__data__.set(t,K),this}
function R (line 1) | function R(t){return this.__data__.has(t)}
function M (line 1) | function M(t,e){for(var r=t.length;r--;)if(z(t[r][0],e))return r;return-1}
function I (line 1) | function I(t,e,r){for(var u=r?o:n,a=t[0].length,c=t.length,l=c,p=Array(c...
function N (line 1) | function N(t){return!(!G(t)||L(t))&&(J(t)||p(t)?yt:et).test(W(t))}
function F (line 1) | function F(t){return Y(t)?t:[]}
function V (line 1) | function V(t,e){var r=t.__data__;return q(e)?r["string"==typeof e?"strin...
function D (line 1) | function D(t,e){var r=l(t,e);return N(r)?r:void 0}
function q (line 1) | function q(t){var e=typeof t;return"string"==e||"number"==e||"symbol"==e...
function L (line 1) | function L(t){return!!ft&&ft in t}
function W (line 1) | function W(t){if(null!=t){try{return st.call(t)}catch(t){}try{return t+"...
function z (line 1) | function z(t,e){return t===e||t!==t&&e!==e}
function U (line 1) | function U(t){return null!=t&&B(t.length)&&!J(t)}
function Y (line 1) | function Y(t){return H(t)&&U(t)}
function J (line 1) | function J(t){var e=G(t)?pt.call(t):"";return e==X||e==Z}
function B (line 1) | function B(t){return"number"==typeof t&&t>-1&&t%1==0&&t<=Q}
function G (line 1) | function G(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}
function H (line 1) | function H(t){return!!t&&"object"==typeof t}
function r (line 1) | function r(t,e,r){switch(r.length){case 0:return t.call(e);case 1:return...
function n (line 1) | function n(t,e){return!!(t?t.length:0)&&c(t,e,0)>-1}
function o (line 1) | function o(t,e,r){for(var n=-1,o=t?t.length:0;++n<o;)if(r(e,t[n]))return...
function i (line 1) | function i(t,e){for(var r=-1,n=t?t.length:0,o=Array(n);++r<n;)o[r]=e(t[r...
function u (line 1) | function u(t,e){for(var r=-1,n=e.length,o=t.length;++r<n;)t[o+r]=e[r];re...
function a (line 1) | function a(t,e,r,n){for(var o=t.length,i=r+(n?1:-1);n?i--:++i<o;)if(e(t[...
function c (line 1) | function c(t,e,r){if(e!==e)return a(t,f,r);for(var n=r-1,o=t.length;++n<...
function f (line 1) | function f(t){return t!==t}
function s (line 1) | function s(t){return function(e){return t(e)}}
function l (line 1) | function l(t,e){return t.has(e)}
function p (line 1) | function p(t,e){return null==t?void 0:t[e]}
function y (line 1) | function y(t){var e=!1;if(null!=t&&"function"!=typeof t.toString)try{e=!...
function d (line 1) | function d(t){var e=-1,r=t?t.length:0;for(this.clear();++e<r;){var n=t[e...
function h (line 1) | function h(){this.__data__=Et?Et(null):{}}
function v (line 1) | function v(t){return this.has(t)&&delete this.__data__[t]}
function b (line 1) | function b(t){var e=this.__data__;if(Et){var r=e[t];return r===tt?void 0...
function _ (line 1) | function _(t){var e=this.__data__;return Et?void 0!==e[t]:vt.call(e,t)}
function m (line 1) | function m(t,e){return this.__data__[t]=Et&&void 0===e?tt:e,this}
function g (line 1) | function g(t){var e=-1,r=t?t.length:0;for(this.clear();++e<r;){var n=t[e...
function w (line 1) | function w(){this.__data__=[]}
function O (line 1) | function O(t){var e=this.__data__,r=I(e,t);return!(r<0)&&(r==e.length-1?...
function j (line 1) | function j(t){var e=this.__data__,r=I(e,t);return r<0?void 0:e[r][1]}
function P (line 1) | function P(t){return I(this.__data__,t)>-1}
function E (line 1) | function E(t,e){var r=this.__data__,n=I(r,t);return n<0?r.push([t,e]):r[...
function S (line 1) | function S(t){var e=-1,r=t?t.length:0;for(this.clear();++e<r;){var n=t[e...
function x (line 1) | function x(){this.__data__={hash:new d,map:new(Pt||g),string:new d}}
function T (line 1) | function T(t){return D(this,t).delete(t)}
function $ (line 1) | function $(t){return D(this,t).get(t)}
function k (line 1) | function k(t){return D(this,t).has(t)}
function C (line 1) | function C(t,e){return D(this,t).set(t,e),this}
function A (line 1) | function A(t){var e=-1,r=t?t.length:0;for(this.__data__=new S;++e<r;)thi...
function R (line 1) | function R(t){return this.__data__.set(t,tt),this}
function M (line 1) | function M(t){return this.__data__.has(t)}
function I (line 1) | function I(t,e){for(var r=t.length;r--;)if(Y(t[r][0],e))return r;return-1}
function N (line 1) | function N(t,e,r,u){var a=-1,c=n,f=!0,p=t.length,y=[],d=e.length;if(!p)r...
function F (line 1) | function F(t,e,r,n,o){var i=-1,a=t.length;for(r||(r=L),o||(o=[]);++i<a;)...
function V (line 1) | function V(t){return!(!Q(t)||z(t))&&(H(t)||y(t)?_t:ut).test(U(t))}
function D (line 1) | function D(t,e){var r=t.__data__;return W(e)?r["string"==typeof e?"strin...
function q (line 1) | function q(t,e){var r=p(t,e);return V(r)?r:void 0}
function L (line 1) | function L(t){return xt(t)||J(t)||!!(Ot&&t&&t[Ot])}
function W (line 1) | function W(t){var e=typeof t;return"string"==e||"number"==e||"symbol"==e...
function z (line 1) | function z(t){return!!dt&&dt in t}
function U (line 1) | function U(t){if(null!=t){try{return ht.call(t)}catch(t){}try{return t+"...
function Y (line 1) | function Y(t,e){return t===e||t!==t&&e!==e}
function J (line 1) | function J(t){return G(t)&&vt.call(t,"callee")&&(!gt.call(t,"callee")||b...
function B (line 1) | function B(t){return null!=t&&K(t.length)&&!H(t)}
function G (line 1) | function G(t){return X(t)&&B(t)}
function H (line 1) | function H(t){var e=Q(t)?bt.call(t):"";return e==nt||e==ot}
function K (line 1) | function K(t){return"number"==typeof t&&t>-1&&t%1==0&&t<=et}
function Q (line 1) | function Q(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}
function X (line 1) | function X(t){return!!t&&"object"==typeof t}
function n (line 1) | function n(t){return t&&t.__esModule?t:{default:t}}
function o (line 1) | function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a ...
function i (line 1) | function i(t,e){if(!t)throw new ReferenceError("this hasn't been initial...
function u (line 1) | function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("S...
function a (line 1) | function a(t,e,r,n,a){var l=a?(0,y.default)(e,r).length:0===(0,h.default...
function t (line 1) | function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.en...
function n (line 1) | function n(t){if("object"==typeof t&&null!==t){var e=t.$$typeof;switch(e...
function o (line 1) | function o(t){return n(t)===d}
function t (line 17) | function t(t){return"string"==typeof t||"function"==typeof t||t===m||t==...
function r (line 17) | function r(t){if("object"==typeof t&&null!==t){var e=t.$$typeof;switch(e...
function n (line 17) | function n(t){return J||(J=!0,A(!1,"The ReactIs.isAsyncMode() alias has ...
function o (line 17) | function o(t){return r(t)===E}
function i (line 17) | function i(t){return r(t)===j}
function u (line 17) | function u(t){return r(t)===O}
function a (line 17) | function a(t){return"object"==typeof t&&null!==t&&t.$$typeof===b}
function c (line 17) | function c(t){return r(t)===S}
function f (line 17) | function f(t){return r(t)===m}
function s (line 17) | function s(t){return r(t)===$}
function l (line 17) | function l(t){return r(t)===T}
function p (line 17) | function p(t){return r(t)===_}
function y (line 17) | function y(t){return r(t)===w}
function d (line 17) | function d(t){return r(t)===g}
function h (line 17) | function h(t){return r(t)===x}
function n (line 17) | function n(){return null}
function s (line 17) | function s(t){var e=t&&(T&&t[T]||t[$]);if("function"==typeof e)return e}
function l (line 17) | function l(t,e){return t===e?0!==t||1/t==1/e:t!==t&&e!==e}
function p (line 17) | function p(t){this.message=t,this.stack=""}
function y (line 17) | function y(t){function n(n,a,c,s,l,y,d){if(s=s||k,y=y||c,d!==u){if(r){va...
function d (line 17) | function d(t){function e(e,r,n,o,i,u){var a=e[r];if(P(a)!==t)return new ...
function h (line 17) | function h(t){function e(e,r,n,o,i){if("function"!=typeof t)return new p...
function v (line 17) | function v(t){function e(e,r,n,o,i){if(!(e[r]instanceof t)){var u=t.name...
function b (line 17) | function b(t){function r(e,r,n,o,i){for(var u=e[r],a=0;a<t.length;a++)if...
function _ (line 17) | function _(t){function e(e,r,n,o,i){if("function"!=typeof t)return new p...
function m (line 17) | function m(t){function r(e,r,n,o,i){for(var a=0;a<t.length;a++){if(null=...
function g (line 17) | function g(t){function e(e,r,n,o,i){var a=e[r],c=P(a);if("object"!==c)re...
function w (line 17) | function w(t){function e(e,r,n,o,a){var c=e[r],f=P(c);if("object"!==f)re...
function O (line 17) | function O(e){switch(typeof e){case"number":case"string":case"undefined"...
function j (line 17) | function j(t,e){return"symbol"===t||!!e&&("Symbol"===e["@@toStringTag"]|...
function P (line 17) | function P(t){var e=typeof t;return Array.isArray(t)?"array":t instanceo...
function E (line 17) | function E(t){if(void 0===t||null===t)return""+t;var e=P(t);if("object"=...
function S (line 17) | function S(t){var e=E(t);switch(e){case"array":case"object":return"an "+...
function x (line 17) | function x(t){return t.constructor&&t.constructor.name?t.constructor.nam...
function e (line 17) | function e(e,r,n,o,i){var u=e[r];if(!t(u)){return new p("Invalid "+o+" `...
function t (line 17) | function t(t,e,r,n,i){var u=t[e];if(!o.isValidElementType(u)){return new...
function t (line 17) | function t(t,e,r,n,o){return O(t[e])?null:new p("Invalid "+n+" `"+o+"` s...
function n (line 17) | function n(t){if(null===t||void 0===t)throw new TypeError("Object.assign...
function n (line 22) | function n(t,r,n,c,f){if("production"!==e.env.NODE_ENV)for(var s in t)if...
function n (line 22) | function n(){}
function o (line 22) | function o(){}
function t (line 22) | function t(t,e,r,n,o,u){if(u!==i){var a=new Error("Calling PropTypes val...
function e (line 22) | function e(){return t}
function n (line 22) | function n(t){return t&&t.__esModule?t:{default:t}}
function o (line 22) | function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a ...
function i (line 22) | function i(t,e){if(!t)throw new ReferenceError("this hasn't been initial...
function u (line 22) | function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("S...
function t (line 22) | function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.en...
function e (line 22) | function e(){return o(this,e),i(this,(e.__proto__||Object.getPrototypeOf...
FILE: src/components/permissible.js
function Permissible (line 6) | function Permissible(
FILE: src/components/permissibleRender.js
class PermissibleRender (line 6) | class PermissibleRender extends Component {
method checkPermissions (line 15) | checkPermissions() {
method render (line 25) | render() {
FILE: types/react-permissible.d.ts
type Permissions (line 4) | type Permissions = string[];
type Children (line 6) | type Children = ReactNode | ReactNodeArray;
type UserAndRequiredPermissions (line 8) | interface UserAndRequiredPermissions {
type PermissibleRenderProps (line 13) | interface PermissibleRenderProps extends UserAndRequiredPermissions {
class PermissibleRender (line 19) | class PermissibleRender extends Component<PermissibleRenderProps> {
type PermissibleHOC (line 31) | interface PermissibleHOC<Props = object, State = ComponentState, TE = ob...
FILE: types/tests/Permissible.test.tsx
function callbackFunction (line 6) | function callbackFunction({ userPermissions, requiredPermissions }: User...
FILE: types/tests/PermissibleRender.test.tsx
constant VIEW_PERMISSION (line 6) | const VIEW_PERMISSION = 'VIEW';
Condensed preview — 55 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (88K chars).
[
{
"path": ".babelrc",
"chars": 273,
"preview": "{\n \"presets\": [\n \"env\",\n \"react\",\n \"stage-1\"\n ],\n \"plugins\": [\n \"transform-decorators-legacy\"\n ],\n \"env"
},
{
"path": ".circleci/config.yml",
"chars": 5051,
"preview": "version: 2.1\nexecutors:\n node-executor:\n docker:\n - image: circleci/node:14.4.0\n working_directory: ~/app\n\nj"
},
{
"path": ".editorconfig",
"chars": 188,
"preview": "root = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ni"
},
{
"path": ".eslintignore",
"chars": 13,
"preview": "/lib/**/*.js\n"
},
{
"path": ".eslintrc",
"chars": 154,
"preview": "{\n \"root\": true,\n \"extends\": [\n \"brainhub\"\n ],\n \"settings\": {\n \"import/resolve\": {\n \"moduleDirectory\": [\""
},
{
"path": ".gitignore",
"chars": 704,
"preview": "dist\n\n# Logs\nlogs\n*.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscoverage/JS"
},
{
"path": ".npmignore",
"chars": 315,
"preview": ".babelrc\n.circleci/\n.coveralls.yml\n.dockerignore\n.editorconfig\n.eslintignore\n.eslintrc\n.git/\n.github/\n.gitignore\n.istanb"
},
{
"path": ".npmrc",
"chars": 19,
"preview": "engine-strict=true\n"
},
{
"path": "LICENSE.md",
"chars": 1123,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2017-2020 [Brainhub](https://brainhub.eu/?utm_source=github)\n\nPermission is hereby "
},
{
"path": "README.md",
"chars": 4264,
"preview": "<br/>\n<h1 align=\"center\">\n react-permissible\n</h1>\n\n<p align=\"center\">\n Making the permission management for React com"
},
{
"path": "docs/examples/callback.md",
"chars": 755,
"preview": "# Callback function\n\nCallback function passed to a `Permissible` Higher Order Component will be called whenever the perm"
},
{
"path": "docs/examples/oneMatch.md",
"chars": 376,
"preview": "# Render a component when one of the permissions matches\n\nIf at least one permission from the `userPermissions` array ex"
},
{
"path": "docs/examples/permissionsMatch.md",
"chars": 365,
"preview": "# Render a component when all the permissions match\n\nIf all the permissions in the `userPermissions` array match the `re"
},
{
"path": "docs/examples/renderOtherwise.md",
"chars": 407,
"preview": "# Render another component if the permissions do not match\n\nIf permissions in the `userPermissions` do not match the `re"
},
{
"path": "docs/getting-started/installation.md",
"chars": 233,
"preview": "# Installation\n\n**react-permissible** is designed as an npm package. Installation is as simple as with every package out"
},
{
"path": "docs/getting-started/overview.md",
"chars": 836,
"preview": "# react-permissible\n\n#### Making the permission management for components easier.\n\n**react-permissible** is a React Comp"
},
{
"path": "docs/usage/basic.md",
"chars": 1043,
"preview": "# Usage\n\nYou can use react-permissible in two ways: as an ordinary component or as a Higher Order Component. Each approa"
},
{
"path": "docs/usage/hoc.md",
"chars": 986,
"preview": "# Usage\n\nYou can use react-permissible in two ways: as an ordinary component or as a Higher Order Component. Each approa"
},
{
"path": "docs-www/.gitignore",
"chars": 212,
"preview": "# Logs\nlogs\n*.log*\n\n# node-waf configuration\n.lock-wscript\n\n# Dependency directory\nnode_modules\n\n# IDEA/Webstorm project"
},
{
"path": "docs-www/LICENSE",
"chars": 1081,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2017-2020 Brainhub\n\nPermission is hereby granted, free of charge, to any person obt"
},
{
"path": "docs-www/README.md",
"chars": 778,
"preview": "# Gatsby Docs Kit Starter\nThe default Brainhub static docs starter.\n\n## Try it out\n\nEnsure you have the latest version o"
},
{
"path": "docs-www/gatsby-config.js",
"chars": 1116,
"preview": "'use strict';\n\nconst path = require('path');\nconst pluginConfigFactory = require('@brainhubeu/gatsby-docs-kit/plugins');"
},
{
"path": "docs-www/gatsby-docs-kit.yml",
"chars": 906,
"preview": "- title: Home\n dir: ./src\n url: /\n file: pages/landing.js\n\n- title: Docs\n dir: ../docs\n url: docs\n sidemenu:\n -"
},
{
"path": "docs-www/package.json",
"chars": 836,
"preview": "{\n \"name\": \"@brainhubeu/gatsby-docs-kit-start\",\n \"description\": \"Gatsby-Docs-Kit starter repository\",\n \"version\": \"0."
},
{
"path": "docs-www/src/globalReferences.js",
"chars": 1105,
"preview": "import React from 'react';\nimport { Permissible, PermissibleRender } from '@brainhubeu/react-permissible';\n\nconst boxSty"
},
{
"path": "docs-www/src/layouts/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "docs-www/src/pages/404.js",
"chars": 201,
"preview": "import React from 'react';\n\nconst NotFoundPage = () => (\n <div>\n <h1>NOT FOUND</h1>\n <p>You just hit a route that"
},
{
"path": "docs-www/src/pages/landing.js",
"chars": 597,
"preview": "import React from 'react';\nimport Link from 'gatsby-link';\n\nimport styles from './landing.module.scss';\n\nconst LandingPa"
},
{
"path": "docs-www/src/pages/landing.module.scss",
"chars": 1372,
"preview": "@import './variables.scss';\n\n.landing {\n text-align: center;\n display: flex;\n align-items: center;\n justify-content:"
},
{
"path": "docs-www/src/pages/variables.scss",
"chars": 84,
"preview": "$colorBHBg: #150940;\n$colorBHMain: #7b59ff;\n$white: #ffffff;\n\n$mainNavHeight: 80px;\n"
},
{
"path": "docs-www/src/templates/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "docs-www/tools/deploy-github.sh",
"chars": 205,
"preview": "#!/bin/bash\n\nGITHUB_REPO_NAME=$(basename -s .git `git config --get remote.origin.url`);\n\nPATH_PREFIX=\"/$GITHUB_REPO_NAME"
},
{
"path": "docs-www/tools/seed/example.md",
"chars": 644,
"preview": "# CLI Commands\n\n### Running an app\n1. running an application on locally\n ```bash\n npm run develop # or yarn develo"
},
{
"path": "docs-www/tools/seed.sh",
"chars": 585,
"preview": "#!/bin/bash\n\nCONFIG_FILE=\"gatsby-docs-kit.yml\"\nDIR_NAME=\"docs\"\n\n# Create docs directory\nif [ -d \"../${DIR_NAME}\" ]; then"
},
{
"path": "lib/react-permissible.js",
"chars": 31137,
"preview": "!function(t,e){\"object\"==typeof exports&&\"object\"==typeof module?module.exports=e(require(\"react\")):\"function\"==typeof d"
},
{
"path": "package.json",
"chars": 3395,
"preview": "{\n \"name\": \"@brainhubeu/react-permissible\",\n \"version\": \"1.9.16\",\n \"description\": \"Permission management component fo"
},
{
"path": "renovate.json",
"chars": 611,
"preview": "{\n \"bumpVersion\": \"patch\",\n \"commitMessagePrefix\": \"[renovate] \",\n \"groupName\": \"NPM dependencies\",\n \"labels\": [\"ren"
},
{
"path": "src/components/permissible.js",
"chars": 1154,
"preview": "import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport intersection from 'lodash.intersect"
},
{
"path": "src/components/permissibleRender.js",
"chars": 1122,
"preview": "import { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport intersection from 'lodash.intersection';\ni"
},
{
"path": "src/index.js",
"chars": 173,
"preview": "import { Permissible } from './components/permissible';\nimport { PermissibleRender } from './components/permissibleRende"
},
{
"path": "test/.eslintrc",
"chars": 85,
"preview": "{\n env: {\n es6: true,\n browser: true,\n node: true,\n mocha: true,\n },\n}\n"
},
{
"path": "test/accessible.component.js",
"chars": 406,
"preview": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Accessible = ({ permission, oneperm }) => (\n <div"
},
{
"path": "test/permissible.test.js",
"chars": 3130,
"preview": "import React from 'react';\nimport { shallow } from 'enzyme';\nimport chai from 'chai';\nimport chaiEnzyme from 'chai-enzym"
},
{
"path": "test/permissibleRender.test.js",
"chars": 5289,
"preview": "import React from 'react';\nimport { mount } from 'enzyme';\nimport chai from 'chai';\nimport chaiEnzyme from 'chai-enzyme'"
},
{
"path": "tools/build.js",
"chars": 1433,
"preview": "// More info on Webpack's Node API here: https://webpack.github.io/docs/node.js-api.html\n// Allowing console calls below"
},
{
"path": "tools/testSetup.js",
"chars": 1097,
"preview": "process.env.NODE_ENV = 'test';\n\n// Disable webpack-specific features for tests since\n// Mocha doesn't know what to do wi"
},
{
"path": "types/.eslintrc",
"chars": 263,
"preview": "{\n \"parser\": \"typescript-eslint-parser\",\n \"plugins\": [\"eslint-plugin-typescript\"],\n \"extends\": \"../.eslintrc\",\n \"rul"
},
{
"path": "types/react-permissible.d.ts",
"chars": 1404,
"preview": "import { Component, ComponentState, ComponentType, ReactNode, ReactNodeArray, StaticLifecycle, ValidationMap, } from 're"
},
{
"path": "types/tests/.gitignore",
"chars": 49,
"preview": "brainhubeu-react-permissible-*.tgz\nnode_modules/\n"
},
{
"path": "types/tests/.npmrc",
"chars": 54,
"preview": "update-notifier=false\naudit=false\nprefer-offline=true\n"
},
{
"path": "types/tests/Permissible.test.tsx",
"chars": 939,
"preview": "import * as React from 'react';\nimport { render } from 'react-dom';\n// eslint-disable-next-line import/no-unresolved, im"
},
{
"path": "types/tests/PermissibleRender.test.tsx",
"chars": 638,
"preview": "import * as React from 'react';\nimport { render } from 'react-dom';\n// eslint-disable-next-line import/no-unresolved, im"
},
{
"path": "types/tests/package.json",
"chars": 1027,
"preview": "{\n \"name\": \"react-permissible-typescript-tests\",\n \"version\": \"1.0.27\",\n \"description\": \"Test publishing the typings o"
},
{
"path": "types/tests/tsconfig.json",
"chars": 298,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es6\",\n \"module\": \"es2015\",\n \"noEmit\": true,\n \"jsx\": \"react\",\n \"stric"
},
{
"path": "webpack.config.prod.js",
"chars": 1055,
"preview": "const path = require('path');\n\nconst UglifyJsPlugin = require('uglifyjs-webpack-plugin');\n\nmodule.exports = {\n external"
}
]
About this extraction
This page contains the full source code of the brainhubeu/react-permissible GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 55 files (79.7 KB), approximately 24.5k tokens, and a symbol index with 177 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.