@boomi/exosphere NPM

ExoSphere

A library of Web Components

Works with all frameworks 💡
First-class React support 👔
Dark theme enabled 🌙
Bundled with Vite ⚡

Usage

Web Components

CDN

Add the following code to your HTML for Web Components via CDN

<link rel="stylesheet" href="https://unpkg.com/@boomi/exosphere@0.2.0/dist/styles.css">
<script type="module" src="https://unpkg.com/@boomi/exosphere@0.2.0/dist/index.mjs"></script>

Local installation

Add styles and javascript file to the <head> section of your HTML markup

<link rel="stylesheet" href="/dist/styles.css">
<script type="module" src="/dist/index.mjs"></script>

Usage

// index.html

<ex-button type="primary" flavor="branded">Hello Web Components!</ex-button>

React

Web components are wrapped with a react wrapper

Installation

npm i @boomi/exosphere --save

Configuration

Import CSS in a global file such as index.(js|ts|tsx) or App.(js|ts|tsx)

import "@boomi/exosphere/dist/styles.css";

For Jest, you need to add the following entry in your package.json

// package.json

"jest" : {
      "transformIgnorePatterns": [ "<roodDir>/node_modules/(?!@boomi/exosphere/)" ],
      "moduleNameMapper": {
            "^@boomi/exosphere": "<rootDir>/node_modules/@boomi/exosphere/dist/react/index.mjs"
      }
}

Usage

Start using Exosphere React components. Example:

// src/App.(js|ts|tsx)

import {ExButton} from '@boomi/exosphere';

function App() {
  return (
    <div>
        <ExButton flavor="base" type="primary"> Hello from ExoSphere!</ExButton>
    </div>
  );
}

export default App;

Vue

Installation

npm i @boomi/exosphere --save

Configuration

// src/main.js

import "@boomi/exosphere/dist/styles.css";
import "@boomi/exosphere";

Usage

// src/App.vue
<template>
    <ex-button type="primary" flavor="branded" @click="doSomething">Hello Vue!<ex-button>
</template>

Angular

Installation

npm i @boomi/exosphere --save

Configuration

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

Import Exosphere & it's styles

// app.component.ts

import "@boomi/exosphere/dist/styles.css";
import "@boomi/exosphere";

Usage

// app.component.html

<div>
  <ex-button (click)="doSomething()" type="primary" flavor="branded">Hello Angular!</ex-button>
</div>

Requirements

Node v16+

Install

Install all dependencies

npm install

Pre start (only once)

Adds git hooks to run unit tests when code is committed

npm run prestart

Storybook

Runs storybook in watch mode on http://localhost:6006/ with hot module replacement for development. Changes in code can be previewed instantly.

npm run storybook

Build

Create javascript and styles bundle. Also, wraps web components for React usage

npm run build

Feature Testing

Prerequisite

Git CLI
Node
Bitbucket Access to the Exosphere Repo
Exosphere Repo local clone

Builds and host the storybook build files locally. Currently, the default branch is set to develop.

npm run build-storybook:host

use --branch flag to build and host the respective branch i.e.

npm run build-storybook:host --branch=<FEATURE_BRANCH>

Examples:
npm run build-storybook:host --branch=UU-127
npm run build-storybook:host --branch=develop

Note: Make sure that feature branch has been pushed to the bitbucket origin by developer.