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

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.

Name		Name	Last commit message	Last commit date
Latest commit History 225 Commits
.devcontainer		.devcontainer
.github		.github
.vscode		.vscode
.yarn/releases		.yarn/releases
packages		packages
.gitignore		.gitignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
IMPLEMENTATION_GUIDELINES.md		IMPLEMENTATION_GUIDELINES.md
LICENSE.TXT		LICENSE.TXT
openbridge-webcomponents.code-workspace		openbridge-webcomponents.code-workspace
package-lock.json		package-lock.json
package.json		package.json
readme.md		readme.md

License

Ocean-Industries-Concept-Lab/openbridge-webcomponents

Folders and files

Latest commit

History

Repository files navigation

Openbridge Web Components

Slack Channel

Introduction video

Table of Contents

Storybook

Demo

CSS file for palettes

Components

Installation

Setup

Getting Started Developing

With VS Code Dev Container (recommended)

Without VS Code devcontainer, not recommended

Packages:

Steps in the development process:

Formatting:

Testing:

Contributing

About

Resources

License

Code of conduct

Stars

Watchers

Forks

Languages