/sg-orbit

Orbit UI, the design system for ShareGate web apps

Primary LanguageJavaScriptApache License 2.0Apache-2.0

ShareGate Orbit

Orbit UI, the design system for Sharegate web apps.

build

lerna yarn

Orbit UI is a design system develop by Sharegate to help create the best experience for our customers and drive consistency between all our web apps.

Documentation website

Netlify Status

The documentation website contains information about the foundation of Orbit UI and the React components.

https://sg-orbit.netlify.com

Storybook website

Netlify Status

The storybook website contains stories for Orbit UI custom React components.

Every components will contains a play and a specs directory. You should only use the play directory. The specs directory is for automated visual testing.

https://sg-storybook.netlify.com

Installation

Multiple npm packages compose Orbit UI. Based on which type of application you're building you'll choose a different composition of packages.

For a React application, the easiest way to use Orbit UI is by installing the @orbit-ui/react package.

To install the package with npm:

npm install @orbit-ui/react react-spring moment

Then import the components:

import { Button, ... } from "semantic-ui-react";
import { DateRangePicker, MultiSelect, ... } from "@orbit-ui/react-components";
import { ClearIcon, ... } from "@orbit-ui/icons";

and the styles:

@import "~@orbit-ui/react/[(apricot|overcast|desktop).css]";

If your app doesn't use React or you prefer to hand-pick a few packages, this is also possible.

Strict peerDependencies are defined in every packages to ensure that dependent packages are installed together. This means that if a required package is missing during the installation, a warning will be output by your package manager.

Before installing any React components packages, the core packages must be installed.

You can pick and choose the core packages to install but you should normally install all of them.

To install all the core packages with npm:

npm install @orbit-ui/fonts @orbit-ui/css-normalize @orbit-ui/icons @orbit-ui/foundation @orbit-ui/tachyons

Then, import the styles:

@import "~@orbit-ui/fonts";
@import "~@orbit-ui/css-normalize";
@import "~@orbit-ui/foundation[/(apricot|overcast|desktop).css]";
@import "~@orbit-ui/tachyons[/(apricot|overcast|desktop|legacy).css]";

Once the core packages are installed, you can optionally add React component packages.

A few options are available...

Only install the components from Semantic UI React

With npm:

npm install @orbit-ui/semantic-ui-theme semantic-ui-react

Install all the Orbit UI React components

With npm:

npm install @orbit-ui/semantic-ui-theme @orbit-ui/react-components semantic-ui-react react-spring styled-jsx moment lodash

Hand-pick a few Orbit UI React components to install

With npm:

npm install @orbit-ui/semantic-ui-theme @orbit-ui/react-* semantic-ui-react styled-jsx

Then, import the Semantic UI theme and the components:

import { Button, ... } from "semantic-ui-react";
import { DateRangePicker, MultiSelect, ... } from "@orbit-ui/react-components";

For more information about the React components, read the usage documentation.

npm packages

Core

Package Version Dependencies
@orbit-ui/css-normalize npm Dependency Status
@orbit-ui/fonts npm Dependency Status
@orbit-ui/icons npm Dependency Status
@orbit-ui/foundation npm Dependency Status
@orbit-ui/tachyons npm Dependency Status

React Components

Orbit UI components are built on top of Semantic UI and Semantic UI React.

When available, you should use a component from Semantic UI React. If a UI requirement cannot be achieved with the existing components, a custom one can be added to this repository.

Package Version Dependencies
@orbit-ui/react npm Dependency Status
@orbit-ui/semantic-ui-theme npm Dependency Status
@orbit-ui/react-components npm Dependency Status
@orbit-ui/react-date-picker npm Dependency Status
@orbit-ui/react-multi-select npm Dependency Status
@orbit-ui/react-search-input npm Dependency Status
@orbit-ui/react-popup npm Dependency Status
@orbit-ui/react-components-shared npm Dependency Status

Maintainers

View the contributors documentation.

License

Copyright © 2019, GSoft inc. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/gsoft-inc/gsoft-license/blob/master/LICENSE.