open-index/open-npm huggingface dataset:
npm package: @monash/portal-auth
Description: Monash react components
Author: hmonsh
Latest version: 0.1.5-beta

# @monash/portal-auth

Monash react components

## Features

- ES6 syntax, managed with Prettier + Eslint and Stylelint
- Unit testing via Jest
- React 17

## Install

```sh
yarn add @monash/portal-auth
// or 
npm i @monash/portal-auth
```

### Requirements

- Node.js `v14.x` or later
- React 17
- Firebase


### Usage

```js
import { AuthContext } from '@monash/portal-auth';
import { App } from './app';
import * as ReactDOM from 'react-dom';

ReactDOM.render(
  <AuthContext>
    <App />
  </AuthContext>,
  document.getElementById('root')
);
```
npm package: @monastic.panic/component-playground
Description: A component for rendering React components with editable source and live preview
Author: Ken Wheeler
Latest version: 3.2.2

# component-playground
A component for rendering React components with editable source and live preview

![Component Playground]
(http://i.imgur.com/se3avpr.png)


###Installation

```
npm install @jquense/component-playground
```

### Set up

check the demos
npm package: @monastic.panic/gatsby-transformer-react-docgen
Description: Expose React component metadata and prop information as GraphQL types
Author: Jason Quense
Latest version: 5.0.3

# gatsby-transformer-react-docgen

Parses inline component-documentation using
[react-docgen](https://github.com/reactjs/react-docgen).

## Install

```
npm install --save gatsby-transformer-react-docgen
```

## Usage

Add a plugin-entry to your `gatsby-config.js`

```js
module.exports = {
  plugins: [`gatsby-transformer-react-docgen`],
}
```

For custom resolvers or handlers, all config options are passed directly to react-docgen.
In additiona any custom handlers are passed the component file `Node` object as their last
argument for more Gatsby specific handler behavior.

```js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-transformer-react-docgen",
      options: {
        resolver: require("./custom-resolver"),
      },
    },
  ],
}
```

### File parsing and babel configs

By default, your local `.babelrc` will be used to determine how to parse source files. Don't worry
if you don't have a local babel config and are using Gatsby's default settings! If there isn't any config react-docgen will
use it's own, permissive parsing options.

In the case of more complex sites with local custom configs, such as in a monorepo, you may have to tell babel (via react-docgen),
how to properly resolve your local babel config. See the [react-docgen documentation for more details](https://github.com/reactjs/react-docgen#options).

```js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-transformer-react-docgen",
      options: {
        babelrcRoots: ["../packages/*"],
      },
    },
  ],
}
```

You'll also need to include a source-plugin, such as
[gatsby-source-filesystem](https://www.npmjs.com/package/gatsby-source-filesystem),
so that the transformer has access to source data.

> Note: that at least one of your React Components must have PropTypes defined.

## How to query

An example _graphql_ query to get nodes:

```graphql
{
  allComponentMetadata {
    edges {
      node {
        displayName
        description
        props {
          name
          type
          required
        }
      }
    }
  }
}
```