A library of Web Components
- Works with all frameworks 💡
- First-class React support 👔
- Dark theme enabled 🌙
- Bundled with Vite ⚡
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>
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>
// index.html
<ex-button type="primary" flavor="branded">Hello Web Components!</ex-button>
Web components are wrapped with a react wrapper
npm i @boomi/exosphere --save
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"
}
}
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;
npm i @boomi/exosphere --save
// src/main.js
import "@boomi/exosphere/dist/styles.css";
import "@boomi/exosphere";
// src/App.vue
<template>
<ex-button type="primary" flavor="branded" @click="doSomething">Hello Vue!<ex-button>
</template>
npm i @boomi/exosphere --save
// 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";
// app.component.html
<div>
<ex-button (click)="doSomething()" type="primary" flavor="branded">Hello Angular!</ex-button>
</div>
Node v16+
Install all dependencies
npm install
Adds git hooks to run unit tests when code is committed
npm run prestart
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
Create javascript and styles bundle. Also, wraps web components for React usage
npm run build
- 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.
Runs unit tests
npm test
Generates code coverate report in coverage/ folder
npm run coverage
Generates scaffolding of a new component
npm run create-component
you need to export the newly created component in the index.ts file under src/components.
Chrome, Edge, Safari