Skip to content

Cisco Collab UI framework for ReactJs applications

License

Notifications You must be signed in to change notification settings

samwi/collab-ui-react

Repository files navigation

Collab UI React

Collab UI React is a resuable, component based, flexible React library available as npm module. It provides set of UI components and utilities based on the Symphony UX design and patterns.

The git repo can be cloned from collab-ui-react at https://wwwin-github.cisco.com/collab-ui/collab-ui-react.

Checkout the living demo for documentation and live examples.

Goals

  • Independent — pick and use only the components you need.
  • Styled — override styles of components by className and style properties.
  • Customizable — properties allow many different config options to suit your app.
  • Performant - high performance guaranteed with use of CSS3 Flexbox and non-bloated architecture.
  • Reliable — each component is rigorously tested.

Collab UI React is a UI framework for ReactJs applications. It provides set of UI components and utilities based on the Symphony UX design and patterns.

Getting Started

Source of collab-ui-react is available here. To use collab-ui-react in your aplication follow below steps:

Step 1 - Add collab-ui npm registry to .npmrc/.yarnrc

For npm

Add following registry url to your .npmrc file inside your application root folder.

registry=http://engci-maven-master.cisco.com/artifactory/api/npm/collab-ui-npm-group

For yarn

Add following registry url to your .yarnrc file inside your application root folder.

registry "http://engci-maven-master.cisco.com/artifactory/api/npm/collab-ui-npm-group/"

Step 2 - Install and add collab-ui-react to your npm package dependencies

Using npm

npm i -S collab-ui-react

Using yarn

yarn install -S collab-ui-react

Step 3. Import Collab UI React components in your app

Use ES6 import statement to import the component that you want to use:

import { Button } from '@collab-ui/react';
// or
import Button from from '@collab-ui/react/button';
...
...

<div className="container">
  <Button name="primary" size="large">Welcome to Collab UI React !</Button>
</div>

Tools & Frameworks

Package manager

  • yarn - BSD-2-Clause

Base framework

Symphony Look & Feel

ES6 Minifier

ES6 Lint

CSS/SCSS Lint

CSS Utility Tool

JsUnit Testing framework

Living Application & Styleguide

Contribution

Want to contribute? Why not go through Developer's Guide to understand more technical details about the project and contribution guidelines to be adhered.

Changelog

The changelog can be found on the Releases page.

Frequently Asked Questions

FAQ can be found here

Copyright

Copyright (c) 2017 Cisco Systems

About

Cisco Collab UI framework for ReactJs applications

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages