@oicl/openbridge-webcomponents-react 0.0.20260324133556 → 0.0.20260325091702
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.
- package/README.md +70 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# @oicl/openbridge-webcomponents-react
|
|
2
|
+
|
|
3
|
+
React wrappers for the OpenBridge design system.
|
|
4
|
+
|
|
5
|
+
[](https://join.slack.com/t/openbridgegroup/shared_invite/zt-2e4clvl6s-uZLkN5L3g8O~c1UZCN1reQ)
|
|
6
|
+
|
|
7
|
+
This package provides **React wrappers** for the [@oicl/openbridge-webcomponents](https://www.npmjs.com/package/@oicl/openbridge-webcomponents) core library. It allows you to use OpenBridge components as native React components with full IDE support, props, and event handling.
|
|
8
|
+
|
|
9
|
+
## ⚠️ Autogenerated
|
|
10
|
+
|
|
11
|
+
This package is **automatically generated** from the core library.
|
|
12
|
+
|
|
13
|
+
**Do not edit this package directly.** All changes should be made in the core library, and the wrappers should be updated by running the wrapper generation script.
|
|
14
|
+
|
|
15
|
+
## 🏗️ Project Status
|
|
16
|
+
|
|
17
|
+
This library is currently in active development. We are gearing up for our first stable release in **Q2 2026**.
|
|
18
|
+
|
|
19
|
+
## 📚 Storybook & Demo
|
|
20
|
+
|
|
21
|
+
- **[Storybook](https://openbridge-jip-storybook.web.app)**: Browse components and view their different states.
|
|
22
|
+
- **[Live Demo](https://openbridge-jip-demo.web.app/)**: See the components in action.
|
|
23
|
+
|
|
24
|
+
## 💾 Installation
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install @oicl/openbridge-webcomponents-react
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## 🚀 Quick Setup
|
|
31
|
+
|
|
32
|
+
### 1. Include CSS Palettes
|
|
33
|
+
|
|
34
|
+
Import the global OpenBridge CSS file in your main entry point (e.g., `index.js` or `App.js`):
|
|
35
|
+
|
|
36
|
+
```javascript
|
|
37
|
+
import "@oicl/openbridge-webcomponents/dist/openbridge.css";
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### 2. Set the Theme
|
|
41
|
+
|
|
42
|
+
Select the palette by setting the `data-obc-theme` attribute on the `html` tag (`bright`, `day`, `dusk`, or `night`):
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<html lang="en" data-obc-theme="day"></html>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### 3. Font Setup
|
|
49
|
+
|
|
50
|
+
Ensure **Noto Sans** is available in your project.
|
|
51
|
+
|
|
52
|
+
## 🧩 Usage
|
|
53
|
+
|
|
54
|
+
Import the desired components and use them in your React components:
|
|
55
|
+
|
|
56
|
+
```jsx
|
|
57
|
+
import { ObcTopBar } from "@oicl/openbridge-webcomponents-react";
|
|
58
|
+
|
|
59
|
+
function App() {
|
|
60
|
+
return (
|
|
61
|
+
<ObcTopBar />
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
For a more complete example, check the [React Demo](https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents-jip/tree/main/packages/react-demo).
|
|
67
|
+
|
|
68
|
+
## 👫 Contributing
|
|
69
|
+
|
|
70
|
+
Contributions are welcome! Please see the [root README](../../README.md) and [CONTRIBUTING.md](../../CONTRIBUTING.md) for development instructions.
|
package/package.json
CHANGED
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
"build": "tsc",
|
|
6
6
|
"build:watch": "tsc --watch"
|
|
7
7
|
},
|
|
8
|
-
"version": "0.0.
|
|
8
|
+
"version": "0.0.20260325091702",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@oicl/openbridge-webcomponents": "^0.0.
|
|
10
|
+
"@oicl/openbridge-webcomponents": "^0.0.20260325091702",
|
|
11
11
|
"@lit/react": "^1.0.0"
|
|
12
12
|
},
|
|
13
13
|
"peerDependencies": {
|