tango-react-components

TODO Table of Contents

• Prerequisites
• Setup
  • Manual steps

Documentation

• Building UI Component with this Template: https://ebpp.atlassian.net/wiki/x/0QT-Bg
• Atlas UI App Shell and App Template documentation: https://ebpp.atlassian.net/l/c/mdXtbfLv

Prerequisites

• The name of the tenant, e.g. Atlas or Tango, under which you want to publish your UI component

Setup

• Create repository from template
  • See documentation: https://ebpp.atlassian.net/wiki/x/-YHMBQ
  • Read instructions under "Repository from a Template"
• Clone down new repo and cd into it
• Search the project for 'TODO'. There are places to fill in:
  • your tenant name
  • your package name
  • a short description for the component
  • the name of the main output file
• Run npm install

Atlas UI Component Template

Description

This purpose of this project is to provide a scaffolding for developers to quickly create a standalone UI Component and publish it as an internal NPM Package.

Test Built Package Locally

If you only need to test your component, just run:

 npm start

You can install the package locally like this:

# in this directory
npm run build
npm pack
# copy path to .tgz output by npm pack
# in the project in which you want to install it, the first time:
npm install "your/path/to/tgz/here.tgz"
# if you make updates to package, repeat build & pack, then:
npm install @tenant-ui/package-name

AVOID USING LINK METHOD, THIS IS JUST HERE FOR NOTES, THIS LIKELY WONT WORK AS EXPECTED

If you need to test the integration between the shell and a project using it, you can setup symbolic links as follows:

• In the root of this project run this line. It will setup a global npm package pointed at this project with the name "@tenant-ui/package-name"

  npm link
  

• In the root of the template project that is using the app shell, run this. It will add a reference to the global link (setup in step 1) directly to node_modules in the template project

  npm link @tenant-ui/package-name
  

• Then back in this project, we need to make sure we dont reference react twice, so we use the template's version of react. This assumes the shell project folder and the template project folder are siblings in the file system (hense ../)

  npm link ../atlas-ui-app-template/node_modules/react
  

Contributing

To deploy a new version of this package, push a commit to the master branch. We are using an action to automatically bump the version. The "version": "0.0.0" in package.json is just a placeholder that is replaced during the deployment.

• To increment the major or minor version, manually update the package-version environment variable in .github/workflows/deployment.yml.