Opsramp-design-system NPM

OpsRamp Design System provides User Interface principles, guidelines and recommendations in order to ensure that all applications designed can offer the same consistent experience to the user across all products. The library is meant for UX designers / UI designers and frontend developers who would like to design a user interface for a new application as well as designers or developers who want to port an existing application to the OpsRamp UI.

Setup

Start Opsramp Design System locally

To develop for the library, clone the project and install dependencies.

git clone https://git01-rc.opsramp.net/opsramp/opsramp-design-system.git

cd opsramp-design-system

npm install

Then check out developing guide

npm run storybook

Useful commands

npm run storybook - starts our application locally at http://localhost:6006
npm run build-tailwind - build configured tailwind and output to /lib
npm run build - build components to use in the library entry
npm run build-storybook - build static storybook and ready to deploy
npm run test - unit test

Use Bootstrap style

In src/styles/index.scss, import related Bootstrap scss files requested by Bootstrap components.

...
/* BootStrap style */
@import '../../node_modules/bootstrap/scss/bootstrap-grid.scss';
@import '../../node_modules/bootstrap/scss/bootstrap-reboot.scss';
@import '../../node_modules/bootstrap/scss/bootstrap.scss';
@import '../../node_modules/bootstrap/scss/mixins/_buttons.scss';
@import '../../node_modules/bootstrap/scss/_buttons.scss';
@import '../../node_modules/bootstrap/scss/_nav.scss';
@import '../../node_modules/bootstrap/scss/_navbar.scss';
@import '../../node_modules/bootstrap/scss/mixins/_nav-divider.scss';

...

Uage OpsRamp Design System as a Dependency

Install and Basic Usage

To use the library, first install the library with npm

Install by versions through tag:

npm install git+ssh://git@git01-rc.opsramp.net:opsramp/opsramp-design-system.git#<current version>

Install by branch:

npm install git+ssh://git@git01-rc.opsramp.net:opsramp/opsramp-design-system.git#<branch name>

Install by master:

npm install git+ssh://git@git01-rc.opsramp.net:opsramp/opsramp-design-system.git

Import Opsramp Design System

Import opsramp-design-system.css and tailwind.css files in index.tsx

import 'opsramp-design-system/lib/opsramp-design-system.css'
import 'opsramp-design-system/lib/tailwind.css'

...

And then import Design System components as needed in your App.tsx

import * as React from 'react'
import { Button } from 'opsramp-design-system'

const App: React.FC = () => {
  return (
    <div>
      <h3>Welcome to Everest!</h3>
      <Button variant="primary">Click Me</Button>
    </div>
  );
}

export default App

Use npm-link for Local Test in Your Project

npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed. See More

In OpsRamp Design System

npm link

In your workspace

npm link opsramp-design-system

NOTICE: If return error message with Duplicate React

If these react imports resolve to two different exports objects, you will see this warning. This may happen if you accidentally end up with two copies of the react package.

This problem can also come up when you use npm link or an equivalent. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.

In OpsRamp Design System

npm link ../myapp/node_modules/react

More Details