# internal-apps-react-components

> Collection of shared React components for internal apps

Latest version **1.0.0** (published 2020-01-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install internal-apps-react-components
pnpm add internal-apps-react-components
yarn add internal-apps-react-components
bun add internal-apps-react-components
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-01-18 |
| First published | 2020-01-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 833.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | joeljameswatson |

## Links

- npm: https://www.npmjs.com/package/internal-apps-react-components
- npm.io page: https://npm.io/package/internal-apps-react-components

## Recent versions

- 1.0.0 (latest) — 2020-01-18

## README

# Internal Apps React Components

Collection of shared React components for internal apps

## noc-app-menu

Applications menu for internal apps

![Sidebar menu](noc-app-menu/sidebar-menu.png)

## noc-installed-devices-label

Installed devices label with tooltip

![Label with tooltip](noc-installed-devices-label/label-with-tooltip.png)


## Development

### Creating a new component

Duplicate the `boilerplate` folder.

Update the `package.json` and `README.md` with your new component details.

Install NPM development dependencies for this new component:

```
cd your-component-folder
npm i
```

Start Webpack to build the component and watch files changes:
```
npm run watch
```

Build the component:
```
npm run build
```

The build will be created inside the `dist` folder in your component root directory.

Publish to NPM **(make sure the `package.json` has been updated with your component name before publishing)**:
```
npm publish
```

#### Assets

The boilerplate supports:
- Javascript
- Typescript
- CSS files
- PNG files
- SVG fonts

If your component uses unsupported file types, please update the `webpack.config.js` to add an appropriate loader and/or the `src/custom.d.ts` to allow support of different file types.

#### Dependencies

By default, the boilerplate relies on React & Ant. 
Those dependencies **MUST NOT** be included in the **dependencies** section of the `package.json`. 
Instead, they have to be listed under `peerDependencies`. 
By doing this, NPM will uses the dependency package (eg. React) from the host project instead of duplicating it in your component `node_modules` folder.

### Troubleshooting

#### Error: Invalid hook call. Hooks can only be called inside of the body of a function component

Make sure you did not include React in the **dependencies** of your component. 
Also, when testing a component, you should link the React module from your host project inside the component folder:

```
npm link ~/your-other-project/node_modules/react
```
 
https://reactjs.org/warnings/invalid-hook-call-warning.html

#### Error: Failed to minify the code from this file

If this error occurs when using the new component in an host project, it is possible that the component uses newer Javascript features not supported by the current version of the host project: https://create-react-app.dev/docs/troubleshooting/#npm-run-build-fails-to-minify

#### ERROR in [PACKAGE_FILE] Module parse failed: Unexpected token (LINE) You may need an appropriate loader to handle this file type

Make sure that the compiler **target** option from the component is also supported by the compiler **lib** option of the host project (`tsconfig.json`/`jsconfig.json`).

---
_Source: https://npm.io/package/internal-apps-react-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._