Giter Club home page Giter Club logo

goponents's Introduction

Goponents

Currently v1.5.7

This project houses a set of UI components for Angular 7+ and designed around the 'Go' design system.

Getting Started

  1. Take a look at our code of conduct

  2. Read through our contribution guidelines

  3. Install the latest version of npm

    npm install -g npm@latest

    or if you are using nvm you can alternatively run:

    nvm install-latest-npm

    We try to stay as up to date a possible.

  4. Install all of the node modules

    npm install
  5. Start a development test server:

    npm run tester
    # This will serve the go-tester directory at localhost:4200

    or

    npm run style_guide
    # This will serve the go-style-guide directory at localhost:4200
  6. In a separate tab, start the tests for the go-lib components:

    ng test go-lib

    Test will continue to run anytime a file is saved. This will help ensure that breaking changes aren't introduced when changes are introduced.

Directory structure

The project is separated up into four project directories.

go-lib

projects/go-lib is where all of our production components, services, and other items are built out. If you are adding that you would like to distribute, this is where you will do that work.

The components are located here:

projects/go-lib/src/lib/components

The styles are located here:

projects/go-lib/src/lib/styles

You can build this project by running npm run build_lib

go-style-guide

projects/go-style-guide is separate app contains all of the documentation for the styles and usage of all the components and available styles in the go-lib project.

The base style guide app is located here;

projects/go-style-guide/src/app

You can start this project by running npm run style_guide

go-tester

projects/go-tester is separate app that allows us to test the implementation of our components as we build them out. If you want to test to make sure your go-lib components work as expected in a more real world setting, this is where you will do that work.

The base tester app is located here;

projects/go-tester/src/app

You can start this project by running npm run tester

go-tester-e2e

projects/go-tester-e2e will eventually be where we will write all of our end to end testing for our go-tester app. We have not yet done this, but we would welcome any contributions.

Other Useful Things

Code scaffolding

Run ng generate lib/components/component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Publishing to npm

To build and pack the library locally run:

npm run package

To build and pack the library locally and publish that package to npm run:

npm run publish

Properly Exposing Files for Importing

The projects/go-lib/src/public_api.ts file exposes files to the root of the node module. This allows for importing like:

import { GoTableConfig } from '@tangoe/goponents';

To do this properly, you must export each individual file within the public_api.ts file.

Components Available

Component Notes
accordion Available
action sheet Available
app drawer Available
badge Available
button Available
card Available
checkbox Available
checkbox group Available
copy button Available
datepicker Available
file upload Available
footer Available
header Available
header bar Available
hint Available
icon Available
icon button Available
input Available
layout Available
loader Available
modal Available
off-canvas Available
pill Available
radio Available
radio group Available
select Available
search Available
side nav Available
switch toggle Available
table Available
tabs Available
textarea Available
toaster Available
toasts Available
---------------- ----------------------------------------
masked input Idea
tooltip Idea
timepicker Idea
wysiwyg Idea

goponents's People

Contributors

grahamhency avatar stevenulmer avatar patrick-lewandowski avatar jaredami avatar alexoverbeck avatar mwagz avatar devchris avatar deotte avatar akfernun avatar eligolding avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.