Openbridge Web Components

Welcome to the Openbridge Web Components! This readme file provides an overview of the project and its components.

❗Caution❗ This repository is currently in early development and may not be stable. Please use with caution.

Slack Channel

Join our slack channel to get the latest updates and to ask questions. Click here to join the slack workspace, and join the #openbridge-webcomponents channel.

Introduction video

We have made an short introduction to the library. You can watch it here

Storybook
Demo
CSS file for palettes
Components
Installation
Getting Started Developing
Contributing

Storybook

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components in isolation.

To access the Storybook for this project, click here.

Demo

The demo showcases the project's functionality using Vue.js. It provides a live demonstration of the project's features and allows you to interact with the application.

To access the demo, click here.

CSS file for palettes

The CSS file for the palettes is located at packages/openbridge-webcomponents/src/palettes/variables.css. The file is called variables.css and contains all the openbridge pallets (bright, day, dusk, night). It can be used to set the color theme of components. To select the pallet, set the data-obc-theme attribute on the html tag:

<html lang="en" data-obc-theme="day">

Components

The components for this project are implemented in the package/openbridge-webcomponents folder.

Installation

To use the components in your project, you can install the package from npm:

npm install @oicl/openbridge-webcomponents

To use the components in your Vue.js project, you can install the package from npm:

npm install @oicl/openbridge-webcomponents-vue

Setup

Add the css file to your project:

import '@oicl/openbridge-webcomponents/src/palettes/variables.css'

Select the pallet by setting the data-obc-theme attribute on the html tag:
```
<html lang="en" data-obc-theme="day">
```

Install the Noto Sans font by using the attached NotoSans.tff file. Add the following to your css:

@font-face {
font-family: 'Noto Sans';
src: url('path/to/NotoSans.tff');
}

* {
   font-family: Noto Sans;
}

Import the desired components in your project, for instance:

import '@oicl/openbridge-webcomponents/dist/components/top-bar/top-bar.js'

or with vue wrapper:

import ObcTopBar from '@oicl/openbridge-webcomponents-vue/components/top-bar/ObcTopBar'

Use the components in your project:
```
<obc-top-bar></obc-top-bar>
```
or with vue wrapper:
```
<ObcTopBar></ObcTopBar>
```

Getting Started Developing

With VS Code Dev Container (recommended)

To get started with the project, follow these steps:

Clone the repository.
Install visual studio code
Install Docker (requires license for large organizations)
Open visual studio code
Open the command palette (Ctrl+Shift+P)
Run the command Dev Container: Open Workspace in Container Select the openbridge-webcomponents.code-workspace file in the root folder of the repository. This will open the project in a containerized environment with all the necessary dependencies installed.
Optional: Go to the package/openbridge-webcomponents folder and run yarn storbook to start the Storybook development environment.
Optional: Go to the package/vue-demo folder and run yarn dev to run the Vue.js demo application.

Without VS Code devcontainer, not recommended

Clone the repository.
Install Node.js (version 20) and Yarn.
Run yarn install in the root folder to install the dependencies.
Run yarn run build:lib to build all libraries.
Optional: Go to the package/openbridge-webcomponents folder and run yarn storbook to start the Storybook development environment.
Optional: Go to the package/vue-demo folder and run yarn dev to run the Vue.js demo application.

Packages:

This mono-repo contains the following packages:

openbridge-webcomponents: The main package containing the web components.
openbridge-webcomponents-vue: A wrapper for the web components to be used in Vue.js projects. It is autogenerated from the openbridge-webcomponents package.
vue-demo: A demo application showcasing the web components in a Vue.js project.

Steps in the development process:

Formatting:

Run yarn format:all to format the code using Prettier.

Testing:

We use snapshot testing of the components through storybook. To run the test:

Ensure that storybook is running. If it is not running, go to the package/openbridge-webcomponents folder and run yarn storybook to start storybook.
Run yarn test-storybook in the package/openbridge-webcomponents folder to run the tests.

Use the yarn test-storybook --watch command to watch for changes and re-run the tests. Use the yarn test-storybook -u command to update the snapshots.

Contributing

See the CONTRIBUTING.md file for details on how to contribute to this project.

hrobeers/openbridge-webcomponents