Terminus UI Library

:rotating_light: ATTENTION: THIS REPO HAS MOVED :rotating_light:

We have moved to separately published packages from a monorepo.

This will:

• provide caching to vastly improve build time
• provide better dependency management between packages (requiring less downloads for some users)
• provide an easier debugging environment
• give us the option to support multiple frameworks (such as React or WebComponents)
• give us a mature toolset that we don't have to maintain
• allow consumers to update various UI components without opting in to all changes across all components at once

Please update any bookmarks to point to the new repo: https://github.com/GetTerminus/terminus-oss

Tips on migrating to the new packages can be found here: Migration guide.

New API docs location: https://github.com/GetTerminus/terminus-ui

:rotating_light:

The library of UI components used for Terminus applications.

Table of Contents

• Library Purpose
• Documentation
  • Versioned Documentation and Demos
• Available Features
  • Components
  • Pipes
  • Services
  • Available Validators
  • Constants
  • Style Helpers
• Installation
  • Fonts and Typefaces
  • Global Styles
• SCSS Helpers
• Contributing
• Contributors
• Project Resources

Library Purpose

This library was created to assist Terminus engineers in maintaining a consistent experience across applications while following a unified design language.

The library is open source with the hopes that others may find solutions and ideas here, as we have done while browsing so many other repositories. While we want to make decisions that are best for everyone, in the end, the needs of the Terminus engineering team must come first.

If a deviation makes sense for the feature itself, but not for Terminus, we support (and will assist in) abstracting the functionality out for generalization.

This library is heavily based on Material Design currently. This provides us a way to rely on very well thought out usability and accessibility decisions for areas we have not yet addressed internally. While we hold Material in high regard, we do not believe that all of their decisions are best for the Terminus UI specifically.

Documentation

The available features table contains links for functional and usage documentation for each feature.

Versioned Documentation and Demos

• latest
  • Latest TypeScript Documentation
  • Latest Demos

Available Features

• :hammer: started
• :white_check_mark: available
• :hankey: deprecated

Components

Pipes

:books: Pipes Documentation
:circus_tent: Pipes Demo

Services

Available Validators

Constants

Style Helpers

Installation

Install the library and required dependencies:

# Primary dependencies:
$ yarn add @terminus/ui @terminus/ngx-tools

# Peer dependencies that will need to be installed (needed by UI and tools libraries):
$ yarn add @angular/cdk @angular/material @angular/flex-layout@9.0.0-beta.29 date-fns ngx-perfect-scrollbar \
  @ngrx/effects @ngrx/store popper.js text-mask-core text-mask-addons

# Optional dependencies (needed if using `TsChartComponent`):
$ yarn add @amcharts/amcharts4 @amcharts/amcharts4-geodata

NOTE: @angular/* & @ngrx/* require 9.0.0 or greater.

Fonts and Typefaces

Add the following links to install the body fonts and icon fonts used by the library:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Global Styles

To use the global styles, import the CSS file into your stylesheets:

@import '~@terminus/ui/terminus-ui.css';

SCSS Helpers

To use the provided SCSS helper methods/variables/mixins, import the helpers file from @terminus/ui:

@import '~@terminus/ui/helpers';

Contributing

View the contribution documentation and the development documentation.

Contributors

Thanks goes to these wonderful people (emoji key):

Benjamin Charity 💻 📖 ⚠️ 🎨 🤔 👀 🔧	coreyterminator 💻 📖 ⚠️	Wendy 🐛 💻 📖 🤔 🚧 👀 ⚠️	Brian Malinconico 🐛 🤔	David Harkness 💻	kal93 🐛	divyameher 🐛
Devon Peet 🎨 🤔	dean jones 💻 🤔 ⚠️ 🎨 🐛	shani-terminus 🐛 💻 📖 💡 👀 ⚠️ 🤔 🚧 🔧	edwin-terminus 🐛 💻 📖 💡 ⚠️	Irina Ershova 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!

Project Resources

• Semantic Release - Automatically release versioned release to NPM and generate a changelog in the Github tag.
• Commitizen - Interactive cli for enforcing commit message format.
• Commitizen VSCode Plugin - VSCode plugin for commitizen.
• Doctoc - Generate documentation table of contents.
• CodeCov - Code coverage reporting.