Internal Apps React Components

Collection of shared React components for internal apps

noc-app-menu

Applications menu for internal apps

noc-installed-devices-label

Installed devices label with tooltip

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).