npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@terminus/ui

v18.6.1

Published

The Terminus UI Library

Downloads

1,810

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

bmalinconico-terminusbmalinconico-terminusatlwendyatlwendyterminus_devopsterminus_devops

Keywords

Readme

Terminus UI Library

The library of UI components used for Terminus applications.

CircleCI codecov DavidDM DavidDM Dev semantic-release Renovate MIT License ZenHub NPM version Github release Library size components pipes services style helpers validators

Table of Contents

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

Available Features

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

Components

| Feature | Notes | Status | Demo | Docs | Usage | |--------------------------------------------|-----------------------------------------------------------|:------------------:|---------------------------------|--------------------------------|----------------------------------| | autocomplete | Deprecated. See selection-list | :hankey: | Demo | Docs | Usage | | autofocus | Focus a focusable element on load | :white_check_mark: | Demo | Docs | Usage | | badge | See chip | :white_check_mark: | Demo | | | | button | | :white_check_mark: | Demo | Docs | | | card | Presentational card | :white_check_mark: | Demo | Docs | Usage | | chart | Charts, graphs etc | :white_check_mark: | Demo | Docs | Usage | | chip | Chip | :white_check_mark: | Demo | Docs | Usage | | checkbox | | :white_check_mark: | Demo | Docs | Usage | | cohort-date-range | CohortDateRange | :white_check_mark: | Demo | Docs | Usage | | confirmation | Add a confirmation step to any ts-button | :white_check_mark: | Demo | Docs | Usage | | copy | Component to easily copy string values | :white_check_mark: | Demo | Docs | Usage | | csv entry | Manually enter CSV values | :white_check_mark: | Demo | Docs | Usage | | datepicker | See TsInputComponent | :white_check_mark: | Demo | Docs | Usage | | date-range | Dual inputs with calendar pop-ups | :white_check_mark: | Demo | Docs | Usage | | drawer | Slide-out drawer panel | :white_check_mark: | Demo | Docs | Usage | | expansion-panel | Expansion panel with accordion & stepper functionality | :white_check_mark: | Demo | Docs | Usage | | file-upload | File upload with drag and drop | :white_check_mark: | Demo | Docs | Usage | | icon | Supported icons: https://material.io/icons | :white_check_mark: | Demo | Docs | Usage | | icon-button | Icon only button | :white_check_mark: | Demo | Docs | Usage | | input | Input with masking, datepicker, etc | :white_check_mark: | Demo | Docs | Usage | | link | | :white_check_mark: | Demo | Docs | Usage | | loading overlay | Overlay with loading spinner | :white_check_mark: | Demo | Docs | | | login form | Email/password with 'remember me' checkbox | :white_check_mark: | Demo | Docs | Usage | | logo | Variations of the official logo, certain colors available | :white_check_mark: | Demo | Docs | Usage | | menu | | :white_check_mark: | Demo | Docs | Usage | | navigation | Global navigation menu | :white_check_mark: | Demo | Docs | Usage | | paginator | Paging controls for collections | :white_check_mark: | Demo | Docs | Usage | | pipes | A collection of pipes for Angular | :white_check_mark: | Demo | Docs | | | popover | Popover with templates | :white_check_mark: | Demo | Docs | Usage | | radio-group | | :white_check_mark: | Demo | Docs | Usage | | scrollbars | Custom scrollbars for both axis' | :white_check_mark: | Demo | Docs | Usage | | search | Input with search capabilities | :white_check_mark: | Demo | Docs | | | select | Deprecated. See selection-list | :hankey: | Demo | Docs | Usage | | selection-list | Classic select dropdown / autocomplete | :white_check_mark: | Demo | Docs | Usage | | spacing | Helpers for consistent spacing | :white_check_mark: | Demo | Docs | | | sort | Used by table for column sorting | :white_check_mark: | (see table demo) | Docs | Usage | | table | | :white_check_mark: | Demo | Docs | Usage | | tabs | Horizontal tab interface | :white_check_mark: | Demo | Docs | Usage | | textarea | See input | :white_check_mark: | (see input demo) | | | | toggle | Toggle switch | :white_check_mark: | Demo | Docs | Usage | | tooltip | Simple tooltip | :white_check_mark: | Demo | Docs | |

Pipes

:books: Pipes Documentation :circus_tent: Pipes Demo

| Pipe | Notes | Status | |---------------------------------------------------|---------------------------------------------|:------------------:| | tsAbbreviateNumber| Abbreviate a number | :white_check_mark: | | tsDate | short, medium, extended, timestamp | :white_check_mark: | | tsRoundNumber | Round a number to a specific precision | :white_check_mark: | | tsSentenceCase | Convert string casing to sentence-case | :white_check_mark: | | tsTimeAgo | Human-readable time span | :white_check_mark: | | tsTitleCase | Title Case A String | :white_check_mark: | | tsTruncateAt | Truncate a string, start, middle, end | :white_check_mark: |

Services

| Feature | Notes | Status | Demo | Docs | Usage | |------------------------------|-----------------------------------------------------|:------------------:|-------------------------|-------------------------|---------------------------| | Validators | Expose custom validation methods for reactive forms | :white_check_mark: | Demo | Docs | Usage |

Available Validators

| Name | Purpose | Status | |------------------|---------------------------------------------------------------|:------------------:| | creditCard | A credit card number must be valid | :white_check_mark: | | domain | A domain must be valid | :white_check_mark: | | email | An email address must be valid | :white_check_mark: | | equalToControl | A control's value must be equal to another control's value | :white_check_mark: | | greaterThan | A number must be greater than another value | :white_check_mark: | | inCollection | A value must be found in a collection | :white_check_mark: | | isInRange | A number must be between two numbers | :white_check_mark: | | lessThan | A number must be less than another value | :white_check_mark: | | lowercase | A value must contain a minimum amount of lowercase characters | :white_check_mark: | | maxDate | A date must be before a maximum date | :white_check_mark: | | minDate | A date must be after a minimum date | :white_check_mark: | | numbers | A value must contain a minimum amount of numbers | :white_check_mark: | | password | A password must meet certain requirements | :white_check_mark: | | uppercase | A value must contain a minimum amount of uppercase characters | :white_check_mark: | | url | A URL must be valid | :white_check_mark: |

Constants

| Feature | Notes | Status | Demo | Docs | Usage | |--------------|----------------------------------------|:------------------:|-------------------------------|------|-------| | TS_SPACING | Expose our spacing sizes in TypeScript | :white_check_mark: | Demo | | |

Style Helpers

| Feature | Notes | Status | Docs | |--------------------|-------------------------------------|:------------------:|---------------------------| | a11y | Accessibility helpers | :white_check_mark: | | | animation | | :hammer: | | | breakpoints | Media query breakpoints | :white_check_mark: | Docs | | colors | Base colors | :white_check_mark: | Docs | | cursors | | :white_check_mark: | Docs | | input-placeholder | | :white_check_mark: | | | layout | | :white_check_mark: | Docs | | opposite-direction | Reverse a direction | :white_check_mark: | | | shadows | Shadow functions & mixins | :white_check_mark: | Docs | | spacing | Control vertical/horizontal spacing | :white_check_mark: | Docs | | triangle | Create a triangle using CSS | :white_check_mark: | | | typography | Typography styles | :white_check_mark: | Docs | | z-index | z-index helper | :white_check_mark: | Docs |

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/[email protected] 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):

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

Project Resources