@vincentrtm/shared-ui

Shared UI

Usage no npm install needed!

<script type="module">
  import vincentrtmSharedUi from 'https://cdn.skypack.dev/@vincentrtm/shared-ui';
</script>

README

DESCRIPTION

B2B Aurora Extensions is a React component library for TM1 app development. Components from this library will be built using the Ticketmaster Aurora design system, and should be importable into any React application being developed for the TM1 Platform.

CATALOG is a reference guide used to display working versions of the components in this library. Documentation for components built in this project will be accessible through Catalog.

IMPORTING B2B EXTENSION COMPONENTS

B2B Aurora Extensions relies on react, prop-types, styled-components, and @ticketmaster/aurora dependency packages to already be installed and integrated in your project.

Install B2B Aurora Extensions from the npm registry by running the following command in your terminal, or add via package.json

$ npm install @ticketmaster/b2b-aurora-extensions

Then import each component you want to use in your app:

import React from "react";
import ReactDOM from "react-dom";
import { Header } from "@ticketmaster/b2b-aurora-extensions";

ReactDOM.render(
  <Header>Hello, world!</Header>,
  document.getElementById("root")
);

GIT REPO

https://git.tmaws.io/tm360/b2b-aurora-extensions

DEVELOPMENT GUIDELINES

To build new components and add them to the B2B Aurora Extensions Library and Catalog, please follow the following DEVELOPMENT GUIDELINES:

## Component File Hierarchy: ##

src /
└─ components /
    └─ ComponentName /
        ├─ __tests__ /
        │   ├─ __snapshots__ /
        │   │  └─ index.spec.js.map
        │   └─ index.spec.js
        ├─ index.js
        └─ index.md

###

I. Checkout and branch from DEVELOP.

II. Name your feature branch after the JIRA TICKET NUMBER.

  • (e.g. TM1P-XXX).

III. COMPONENTS should be created in a subfolder in the /src/components/ folder.

  • Name the folder after the component CamelCase -- (e.g. DropDownList).
  • Variant specific to an App should be named after the convention: { COMPONENT NAME } - { APP } -- (e.g. DropDownList-Reports)
  • Components should be built using already existing AURORA Components. whenever possible. -- Details about what Aurora Components to be used should be detailed in the JIRA Ticket.

IV. DOCUMENTION should be written detailing component functionality.

  • Include DEPENDENCIES, PROPS, STATES, and OUTPUTS. in the documentation
  • Documentation should be saved as: index.md in the same folder as the component: index.js

V. UNIT TESTS should be written, and tests must pass both locally and on the GITLAB-CI Pipeline.

  • Tests should be saved in the __tests__ as: index.spec.js
  • Snapshots (if required) should be saved in a __snapshots__ folder as: index.spec.js.map
  • To run tests locally run cmd: $ npm run tests
  • Unit Tests are run on gitlab-ci pipeline when branch is pushed to origin.

VI. LINTERS must pass both locally and on the GITLAB-CI Pipeline.

  • Run Linter Locally by cmd: $ npm run lint
  • Linter is run on gitlab-ci pipeline when branch is pushed to origin.

VII. When ready to merge please SQUASH your commits and SUBMIT A MERGE REQUEST.

  • Merge request of your feature branch should be to DEVELOP branch
  • Reference the JIRA TICKET in the Merge Request.

SET UP LOCAL DEV ENVIRONMENT

Pre-Requisites:

The following will need to be installed in your computer before the project Catalog will work locally:

  1. Node / NPM - https://nodejs.org
### RUN CATALOG LOCALLY ###

$ npm install
$ npm run catalog-start

// You will see prompt saying:
Catalog is running at http://tmone-local.tm.tmcs:4000/

###

NOTE: Add HOST tmone-local.tm.tmcs to your ~/.bash_profile, pointed to localhost

DEPENDENCY MANAGEMENT

Project Dependencies are managed through NPM and configured in package.json file in project root folder. Run $ npm run clean after making modificatons to clear out /node-modules and package-lock.json files, then run $ npm install to install new package dependencies

DEPLOYMENT / PACKAGING / PUBLISHING

Catalog is deployed to the following environments via GITLAB-CI Pipeline:

  • Merges to DEVELOP branch will be deployed to NON-PROD / INTDEV102
  • Merges to RELEASE branch will be deployed to PRE-PROD / IJASH
  • Merges to MASTER branch will be deployed to PROD

B2B Components are packaged and published to NPM when a new tag is created from MASTER

  • Checkout Master Branch: $ git checkout master
  • Create new release version: $ npm version [major | minor | patch] -- e.g. npm version major = 1.0.0 -- e.g. npm version minor = 1.1.0 -- e.g. npm version patch = 1.0.1
  • Push newly created tag to origin: $ git push origin --tags
  • Manually Trigger NPM publish on successful completion of Gitlab-CI pipeline. -- Gitlab Pipeline: https://git.tmaws.io/tm360/b2b-aurora-extensions/pipelines

MORE INFO

Aurora: https://code.ticketmaster.com/aurora

TM1 Gadget / App Generator: https://git.tmaws.io/tm360/generator-tm1gadget