@oicl/openbridge-webcomponents-react 0.0.4 → 0.0.5
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/package.json +8 -3
- package/readme.md +67 -0
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.5",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@oicl/openbridge-webcomponents": "^0.0.
|
|
10
|
+
"@oicl/openbridge-webcomponents": "^0.0.5",
|
|
11
11
|
"@lit/react": "^1.0.0"
|
|
12
12
|
},
|
|
13
13
|
"peerDependencies": {
|
|
@@ -589,5 +589,10 @@
|
|
|
589
589
|
"dist/navigation-instruments/azimuth-thruster/azimuth-thruster.{js,js.map,d.ts,d.ts.map}",
|
|
590
590
|
"dist/navigation-instruments/thruster/thruster.{js,js.map,d.ts,d.ts.map}",
|
|
591
591
|
"dist/navigation-instruments/watch/watch.{js,js.map,d.ts,d.ts.map}"
|
|
592
|
-
]
|
|
592
|
+
],
|
|
593
|
+
"repository": {
|
|
594
|
+
"type": "git",
|
|
595
|
+
"url": "https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents.git",
|
|
596
|
+
"directory": "packages/openbridge-webcomponents-react"
|
|
597
|
+
}
|
|
593
598
|
}
|
package/readme.md
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# Openbridge Web Components React
|
|
2
|
+
|
|
3
|
+
Welcome to the react wrapper of Openbridge Web Components!
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
> **❗Caution❗** This repository is currently in early development and may not be stable. Please use with caution.
|
|
7
|
+
|
|
8
|
+
## Table of Contents
|
|
9
|
+
|
|
10
|
+
- [Storybook](#storybook)
|
|
11
|
+
- [Demo](#demo)
|
|
12
|
+
- [Installation](#installation)
|
|
13
|
+
- [Contributing](#contributing)
|
|
14
|
+
|
|
15
|
+
## Storybook
|
|
16
|
+
|
|
17
|
+
[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.
|
|
18
|
+
|
|
19
|
+
To access the Storybook for this project, click [here](https://openbridge-storybook.web.app).
|
|
20
|
+
|
|
21
|
+
## Demo
|
|
22
|
+
|
|
23
|
+
The demo showcases the project's functionality using react. It provides a live demonstration of the project's features and allows you to interact with the application.
|
|
24
|
+
|
|
25
|
+
To access the demo, click [here](https://openbridge-demo.web.app/).
|
|
26
|
+
|
|
27
|
+
## Installation
|
|
28
|
+
To use the components in your project, you can install the package from npm:
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm install @oicl/openbridge-webcomponents-react
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Setup
|
|
35
|
+
1. Add the css file to your project:
|
|
36
|
+
```javascript
|
|
37
|
+
import '@oicl/openbridge-webcomponents/src/palettes/variables.css'
|
|
38
|
+
```
|
|
39
|
+
2. Select the pallet by setting the `data-obc-theme` attribute on the `html` tag:
|
|
40
|
+
```html
|
|
41
|
+
<html lang="en" data-obc-theme="day">
|
|
42
|
+
```
|
|
43
|
+
3. Install the Noto Sans font by using the attached `NotoSans.tff` file. Add the following to your css:
|
|
44
|
+
```css
|
|
45
|
+
@font-face {
|
|
46
|
+
font-family: 'Noto Sans';
|
|
47
|
+
src: url('path/to/NotoSans.tff');
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
* {
|
|
51
|
+
font-family: Noto Sans;
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
4. Import the desired components in your project, for instance:
|
|
55
|
+
```javascript
|
|
56
|
+
import ObcTopBar from '@oicl/openbridge-webcomponents-react/components/top-bar/ObcTopBar'
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
5. Use the components in your project:
|
|
60
|
+
```html
|
|
61
|
+
<ObcTopBar></ObcTopBar>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Contributing
|
|
65
|
+
|
|
66
|
+
Contributions are welcome!
|
|
67
|
+
|