# @vincentrtm/shared-ui

> Shared UI

Latest version **1.2.7** (published 2019-03-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vincentrtm/shared-ui
pnpm add @vincentrtm/shared-ui
yarn add @vincentrtm/shared-ui
bun add @vincentrtm/shared-ui
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.7 |
| Published | 2019-03-21 |
| First published | 2019-03-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 69.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | vincent |
| Maintainers | vincentrtm |
| Keywords | vincentr |

## Links

- npm: https://www.npmjs.com/package/@vincentrtm/shared-ui
- Repository: https://git.tmaws.io/vincentromero/b2b-shared-components
- npm.io page: https://npm.io/package/@vincentrtm/shared-ui

## Recent versions

- 1.2.7 (latest) — 2019-03-21
- 1.1.0 (stable@1.1.0) — 2019-03-01
- 1.0.2 (@vincentrtm/shared-ui@1.0.3) — 2019-03-01
- 1.0.0 (stable) — 2019-03-01
- 1.2.0 — 2019-03-01

## 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

```code
### 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

###

---
_Source: https://npm.io/package/@vincentrtm/shared-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._