@oicl/openbridge-webcomponents 0.0.20260324133556 β†’ 0.0.20260325090235

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +63 -106
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,150 +1,107 @@
1
- # Openbridge Web Components
1
+ # @oicl/openbridge-webcomponents
2
2
 
3
- [![discord, join chat](https://img.shields.io/badge/discord-join_chat-brightgreen.svg?logo=discord&labelColor=white&style=flat&color=%235865F2)](https://discord.gg/wSCPxPH3RJ)
3
+ The core library of the OpenBridge design system, implemented as Lit-based web components.
4
4
 
5
- Welcome to the Openbridge Web Components! This readme file provides an overview of the project and its components.
5
+ [![Slack, join chat](https://img.shields.io/badge/Slack-4A154B?style=flat&logo=slack&logoColor=white)](https://join.slack.com/t/openbridgegroup/shared_invite/zt-2e4clvl6s-uZLkN5L3g8O~c1UZCN1reQ)
6
6
 
7
- # πŸŽ‰ We are preparing to release OpenBridge 6.0 in March 2026 πŸŽ‰
7
+ ## πŸ—οΈ Project Status
8
8
 
9
- We are currently developing the code in a joint industry project, with funding from industry partners.
10
- The code is only available for the partners until the release in March 2026. It is possible to get access to the code in active development by joining the project.
9
+ This library is currently in active development. We are gearing up for our first stable release in **Q2 2026**.
11
10
 
12
- [πŸ‘‰ Click here to read more about the project.](https://docs.google.com/document/d/18ytBiUrfQrMYOPPz-hd7pgPjnG8ZBG-zr9xYl5Y2TTs/edit?tab=t.0)
11
+ [πŸ‘‰ Click here to read more about the project and the JIP.](https://join.slack.com/t/openbridgegroup/shared_invite/zt-2e4clvl6s-uZLkN5L3g8O~c1UZCN1reQ)
13
12
 
14
- [πŸ‘‰ Click here to register your interest in the form. (Note: Registering is not a commitment but will enroll you in our process.)](https://docs.google.com/forms/d/e/1FAIpQLSd2H7bbL_duBTMhHzjw7W52H9XXAiJ9A3sL7PsrfCTW_bNUhw/viewform)
13
+ ## πŸ“š Storybook & Demo
15
14
 
16
- > **❗Caution❗** This repository is currently in early development and may not be stable. Please use with caution.
15
+ - **[Storybook](https://openbridge-jip-storybook.web.app)**: Browse components and view their different states.
16
+ - **[Live Demo](https://openbridge-jip-demo.web.app/)**: See the components in action.
17
17
 
18
- # Discord server
18
+ ## πŸ’Ύ Installation
19
19
 
20
- Join our discord server to get the latest updates and to ask questions. [Join here.](https://discord.gg/wSCPxPH3RJ)
20
+ To use the components in your project, install the package from npm:
21
21
 
22
- # Introduction video
23
-
24
- We have made a short introduction to the library. You can watch it [here](https://www.youtube.com/watch?v=5DiEA4voqzI)
25
-
26
- <a href="http://www.youtube.com/watch?feature=player_embedded&v=5DiEA4voqzI" target="_blank">
27
- <img src="https://img.youtube.com/vi/5DiEA4voqzI/0.jpg" alt="Watch the video" width="480" height="360" />
28
- </a>
29
-
30
- ## Table of Contents
31
-
32
- - [Storybook](#storybook)
33
- - [Demo](#demo)
34
- - [CSS file for palettes](#css-file-for-palettes)
35
- - [Installation](#installation)
36
- - [Bundle Version (Browser Only)](#bundle-version-browser-only)
37
- - [Contributing](#contributing)
38
-
39
- ## Storybook
40
-
41
- [Storybook](https://storybook.js.org/) 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.
42
-
43
- To access the Storybook for this project, click [here](https://openbridge-jip-storybook.web.app).
44
-
45
- ## Demo
22
+ ```bash
23
+ npm install @oicl/openbridge-webcomponents
24
+ ```
46
25
 
47
- 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.
26
+ > **Note:** If you are using Vue, React, Angular, or Svelte, we recommend using our [wrapper packages](#-framework-wrappers) for a better developer experience.
48
27
 
49
- To access the demo, click [here](https://openbridge-jip-demo.web.app/).
28
+ ## πŸš€ Quick Setup
50
29
 
51
- ## CSS file for palettes
30
+ ### 1. Include CSS Palettes
52
31
 
53
- The CSS file for the palettes is located at [packages/openbridge-webcomponents/dist/openbridge.css](packages/openbridge-webcomponents/dist/openbridge.css) or by importing it directly from the package:
32
+ Import the global OpenBridge CSS file in your main entry point:
54
33
 
55
34
  ```javascript
56
35
  import '@oicl/openbridge-webcomponents/dist/openbridge.css';
57
36
  ```
58
37
 
59
- The file is called `variables.css` and contains all the openbridge palette (bright, day, dusk, night).
60
- It can be used to set the color theme of components.
61
- To select the palette, set the `data-obc-theme` attribute on the `html` tag:
38
+ ### 2. Set the Theme
39
+
40
+ Select the palette by setting the `data-obc-theme` attribute on the `html` tag (`bright`, `day`, `dusk`, or `night`):
62
41
 
63
42
  ```html
64
43
  <html lang="en" data-obc-theme="day"></html>
65
44
  ```
66
45
 
67
- ## Installation
46
+ ### 3. Set Component Size
68
47
 
69
- If you want to use the components in a Vue.js or React project we suggest that you use the wrapper packages [@oicl/openbridge-webcomponents-vue](https://www.npmjs.com/package/@oicl/openbridge-webcomponents-vue) or [@oicl/openbridge-webcomponents-react](https://www.npmjs.com/package/@oicl/openbridge-webcomponents-react) respectively.
48
+ Select the global component size by setting a class on the `body` tag (`obc-component-size-regular`, `medium`, `large`, or `xl`):
70
49
 
71
- To use the components in your project, you can install the package from npm:
72
-
73
- ```bash
74
- npm install @oicl/openbridge-webcomponents
50
+ ```html
51
+ <body class="obc-component-size-regular"></body>
75
52
  ```
76
53
 
77
- ### Setup
54
+ ### 4. Font Setup
55
+
56
+ The library uses **Noto Sans**. You should ensure it is available in your project.
78
57
 
79
- 1. Add the css file to your project:
80
- ```javascript
81
- import '@oicl/openbridge-webcomponents/dist/openbridge.css';
82
- ```
83
- 2. Select the palette by setting the `data-obc-theme` attribute on the `html` tag:
84
- ```html
85
- <html lang="en" data-obc-theme="day"></html>
86
- ```
87
- 3. Install the Noto Sans font by using the attached `NotoSans.ttf` file. Add the following to your css:
58
+ ```css
59
+ @font-face {
60
+ font-family: 'Noto Sans';
61
+ src: url('path/to/NotoSans.ttf');
62
+ }
88
63
 
89
- ```css
90
- @font-face {
91
- font-family: 'Noto Sans';
92
- src: url('path/to/NotoSans.ttf');
93
- }
64
+ * {
65
+ font-family: 'Noto Sans', sans-serif;
66
+ }
67
+ ```
94
68
 
95
- * {
96
- font-family: Noto Sans;
97
- }
98
- ```
69
+ ## 🧩 Usage
99
70
 
100
- 4. Import the desired components in your project, for instance:
71
+ ### Standard Web Components
101
72
 
102
- ```javascript
103
- import '@oicl/openbridge-webcomponents/dist/components/top-bar/top-bar.js';
104
- ```
73
+ Import the components you need:
105
74
 
106
- 5. Use the components in your project:
107
- ```html
108
- <obc-top-bar></obc-top-bar>
109
- ```
75
+ ```javascript
76
+ import '@oicl/openbridge-webcomponents/dist/components/top-bar/top-bar.js';
77
+ ```
110
78
 
111
- ## Bundle Version (Browser Only)
79
+ Use them in your HTML:
112
80
 
113
- For quick prototyping or simple projects, we provide a bundled version that includes all components in a single file. This can be imported directly in the browser without a build system.
81
+ ```html
82
+ <obc-top-bar></obc-top-bar>
83
+ ```
114
84
 
115
- **Note:** The bundle is ~9 MB uncompressed (~1 MB gzipped) and includes all dependencies. For production use, we recommend the modular version above for better performance.
85
+ ### Bundle Version (CDN / Prototyping)
116
86
 
117
- ### Usage
87
+ For quick prototyping, you can use the bundled version:
118
88
 
119
89
  ```html
120
- <!DOCTYPE html>
121
- <html lang="en" data-obc-theme="day">
122
- <head>
123
- <meta charset="UTF-8" />
124
- <title>OpenBridge Components</title>
125
-
126
- <!-- Import CSS -->
127
- <link rel="stylesheet" href="path/to/openbridge.css" />
128
-
129
- <!-- Import bundle -->
130
- <script
131
- type="module"
132
- src="path/to/openbridge-webcomponents.bundle.js"
133
- ></script>
134
- </head>
135
- <body>
136
- <!-- All components are now available -->
137
- <obc-button>Click Me</obc-button>
138
- <obc-card>
139
- <div slot="header">Card Header</div>
140
- <div slot="content">Card content</div>
141
- </obc-card>
142
- </body>
143
- </html>
90
+ <script
91
+ type="module"
92
+ src="node_modules/@oicl/openbridge-webcomponents/dist/openbridge-webcomponents.bundle.js"
93
+ ></script>
144
94
  ```
145
95
 
146
- For more details, see [BUNDLE_USAGE.md](BUNDLE_USAGE.md).
96
+ ## πŸ“¦ Framework Wrappers
97
+
98
+ For the best experience in your framework of choice, use our auto-generated wrappers:
99
+
100
+ - [`@oicl/openbridge-webcomponents-vue`](../openbridge-webcomponents-vue)
101
+ - [`@oicl/openbridge-webcomponents-react`](../openbridge-webcomponents-react)
102
+ - [`@oicl/openbridge-webcomponents-ng`](../openbridge-webcomponents-ng)
103
+ - [`@oicl/openbridge-webcomponents-svelte`](../openbridge-webcomponents-svelte)
147
104
 
148
- ## Contributing
105
+ ## πŸ‘« Contributing
149
106
 
150
- Contributions are welcome!
107
+ Contributions are welcome! Please see the [root README](../../README.md) and [CONTRIBUTING.md](../../CONTRIBUTING.md) for development instructions.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oicl/openbridge-webcomponents",
3
- "version": "0.0.20260324133556",
3
+ "version": "0.0.20260325090235",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
@@ -41,7 +41,7 @@
41
41
  "test:browser": "vitest --config=vitest.browser.config.ts",
42
42
  "πŸ“¦_WRAPPERS__________________________________________________": "echo _____",
43
43
  "wrappers": "npm run wrappers:clean && npm run wrappers:generate && npm run wrappers:post-fix",
44
- "wrappers:clean": "git clean -fdx ../openbridge-webcomponents-*",
44
+ "wrappers:clean": "git clean -fdx -e README.md ../openbridge-webcomponents-*",
45
45
  "wrappers:generate": "lit labs gen --framework=vue --framework=react --framework=angular --framework=svelte --out=..",
46
46
  "wrappers:post-fix": "node fix-generated.cjs",
47
47
  "πŸ“œ_SCRIPTS___________________________________________________": "echo _____",