@telesign/boreal-react 0.1.0-alpha.1 → 0.1.0-alpha.3

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 (6) hide show
  1. package/README.md +77 -1
  2. package/dist/components/components.js +0 -8
  3. package/dist/components/components.js.map +1 -1
  4. package/dist/types/components/components.d.ts +0 -3
  5. package/lib/components/components.ts +0 -12
  6. package/package.json +10 -10
package/README.md CHANGED
@@ -1 +1,77 @@
1
- #BorealDS react
1
+ # React Wrapper for Boreal DS
2
+
3
+ A lightweight utility that wraps Boreal DS web components so they can be used as native React components.
4
+
5
+ ## Overview
6
+
7
+ React and custom elements don't integrate cleanly out of the box. Two key limitations apply:
8
+
9
+ **Data passing** — React passes all data to custom elements as HTML attributes. This works for primitive values, but breaks for objects and arrays, which get serialised as `[object Object]`.
10
+
11
+ **Event handling** — React uses a synthetic event system that cannot listen for DOM events emitted by custom elements without manual `addEventListener` calls and refs.
12
+
13
+ This wrapper solves both problems by mapping props and events onto the underlying custom element automatically.
14
+
15
+ ## Installation
16
+
17
+ > [!TIP]
18
+ > Refer to the official Boreal DS documentation at [Boreal DS Storybook](https://release-current--69b1eb61625aa69a7886f854.chromatic.com/) for more details.
19
+
20
+ ```sh
21
+ npm install @telesign/boreal-react
22
+ ```
23
+
24
+ > [!NOTE]
25
+ > `@telesign/boreal-web-components` is a dependency of this package and will be installed automatically. You do not need to install it separately.
26
+
27
+ ## Setup
28
+
29
+ ### Styles
30
+
31
+ Import the Boreal DS stylesheet in your application entry file:
32
+
33
+ ```tsx
34
+ // main.tsx
35
+ import '@telesign/boreal-react/css/boreal.css';
36
+ ```
37
+
38
+ ### Icon font
39
+
40
+ Add the Boreal DS icon font to the `<head>` of your `index.html`:
41
+
42
+ ```html
43
+ <link
44
+ rel="stylesheet"
45
+ href="https://resources-borealds.s3.us-east-1.amazonaws.com/icons/current/boreal-styles.css"
46
+ />
47
+ ```
48
+
49
+ ### Theming
50
+
51
+ Set the `data-theme` attribute on the `<body>` element to activate a brand theme:
52
+
53
+ ```html
54
+ <body data-theme="proximus">
55
+ ```
56
+
57
+ Available values: `connect` | `engage` | `protect` | `proximus`
58
+
59
+ ## Usage
60
+
61
+ ```tsx
62
+ import { BdsBanner } from '@telesign/boreal-react';
63
+
64
+ function App() {
65
+ const handleClose = () => {
66
+ console.log('Banner closed');
67
+ };
68
+
69
+ return (
70
+ <BdsBanner variant="info" enableClose onClose={handleClose}>
71
+ Welcome to Boreal DS
72
+ </BdsBanner>
73
+ );
74
+ }
75
+
76
+ export default App;
77
+ ```
package/dist/components/components.js CHANGED
@@ -2,7 +2,6 @@
2
2
  import { createComponent } from '@stencil/react-output-target/runtime';
3
3
  import { BdsBanner as BdsBannerElement, defineCustomElement as defineBdsBanner } from "@telesign/boreal-web-components/components/bds-banner.js";
4
4
  import { BdsTypography as BdsTypographyElement, defineCustomElement as defineBdsTypography } from "@telesign/boreal-web-components/components/bds-typography.js";
5
- import { MyComponent as MyComponentElement, defineCustomElement as defineMyComponent } from "@telesign/boreal-web-components/components/my-component.js";
6
5
  import React from 'react';
7
6
  export const BdsBanner = createComponent({
8
7
  tagName: 'bds-banner',
@@ -18,11 +17,4 @@ export const BdsTypography = createComponent({
18
17
  events: {},
19
18
  defineCustomElement: defineBdsTypography
20
19
  });
21
- export const MyComponent = createComponent({
22
- tagName: 'my-component',
23
- elementClass: MyComponentElement,
24
- react: React,
25
- events: {},
26
- defineCustomElement: defineMyComponent
27
- });
28
20
  //# sourceMappingURL=components.js.map
package/dist/components/components.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"components.js","sourceRoot":"","sources":["../../lib/components/components.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAUb,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAEvE,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,mBAAmB,IAAI,eAAe,EAAE,MAAM,0DAA0D,CAAC;AACjJ,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,mBAAmB,IAAI,mBAAmB,EAAE,MAAM,8DAA8D,CAAC;AACjK,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,mBAAmB,IAAI,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AACzJ,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,MAAM,SAAS,GAA2E,eAAe,CAAoC;IAChJ,OAAO,EAAE,YAAY;IACrB,YAAY,EAAE,gBAAgB;IAE9B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,EAAqB;IAC/C,mBAAmB,EAAE,eAAe;CACvC,CAAC,CAAC;AAIH,MAAM,CAAC,MAAM,aAAa,GAAmF,eAAe,CAA4C;IACpK,OAAO,EAAE,gBAAgB;IACzB,YAAY,EAAE,oBAAoB;IAElC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAyB;IACjC,mBAAmB,EAAE,mBAAmB;CAC3C,CAAC,CAAC;AAIH,MAAM,CAAC,MAAM,WAAW,GAA+E,eAAe,CAAwC;IAC1J,OAAO,EAAE,cAAc;IACvB,YAAY,EAAE,kBAAkB;IAEhC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAuB;IAC/B,mBAAmB,EAAE,iBAAiB;CACzC,CAAC,CAAC"}
1
+ {"version":3,"file":"components.js","sourceRoot":"","sources":["../../lib/components/components.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAUb,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAEvE,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,mBAAmB,IAAI,eAAe,EAAE,MAAM,0DAA0D,CAAC;AACjJ,OAAO,EAAE,aAAa,IAAI,oBAAoB,EAAE,mBAAmB,IAAI,mBAAmB,EAAE,MAAM,8DAA8D,CAAC;AACjK,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,MAAM,SAAS,GAA2E,eAAe,CAAoC;IAChJ,OAAO,EAAE,YAAY;IACrB,YAAY,EAAE,gBAAgB;IAE9B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,EAAqB;IAC/C,mBAAmB,EAAE,eAAe;CACvC,CAAC,CAAC;AAIH,MAAM,CAAC,MAAM,aAAa,GAAmF,eAAe,CAA4C;IACpK,OAAO,EAAE,gBAAgB;IACzB,YAAY,EAAE,oBAAoB;IAElC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAyB;IACjC,mBAAmB,EAAE,mBAAmB;CAC3C,CAAC,CAAC"}
package/dist/types/components/components.d.ts CHANGED
@@ -2,12 +2,9 @@ import type { EventName, StencilReactComponent } from '@stencil/react-output-tar
2
2
  import { type BdsBannerCustomEvent } from "@telesign/boreal-web-components";
3
3
  import { BdsBanner as BdsBannerElement } from "@telesign/boreal-web-components/components/bds-banner.js";
4
4
  import { BdsTypography as BdsTypographyElement } from "@telesign/boreal-web-components/components/bds-typography.js";
5
- import { MyComponent as MyComponentElement } from "@telesign/boreal-web-components/components/my-component.js";
6
5
  export type BdsBannerEvents = {
7
6
  onClose: EventName<BdsBannerCustomEvent<void>>;
8
7
  };
9
8
  export declare const BdsBanner: StencilReactComponent<BdsBannerElement, BdsBannerEvents>;
10
9
  export type BdsTypographyEvents = NonNullable<unknown>;
11
10
  export declare const BdsTypography: StencilReactComponent<BdsTypographyElement, BdsTypographyEvents>;
12
- export type MyComponentEvents = NonNullable<unknown>;
13
- export declare const MyComponent: StencilReactComponent<MyComponentElement, MyComponentEvents>;
package/lib/components/components.ts CHANGED
@@ -12,7 +12,6 @@ import { createComponent } from '@stencil/react-output-target/runtime';
12
12
  import { type BdsBannerCustomEvent } from "@telesign/boreal-web-components";
13
13
  import { BdsBanner as BdsBannerElement, defineCustomElement as defineBdsBanner } from "@telesign/boreal-web-components/components/bds-banner.js";
14
14
  import { BdsTypography as BdsTypographyElement, defineCustomElement as defineBdsTypography } from "@telesign/boreal-web-components/components/bds-typography.js";
15
- import { MyComponent as MyComponentElement, defineCustomElement as defineMyComponent } from "@telesign/boreal-web-components/components/my-component.js";
16
15
  import React from 'react';
17
16
 
18
17
  export type BdsBannerEvents = { onClose: EventName<BdsBannerCustomEvent<void>> };
@@ -36,14 +35,3 @@ export const BdsTypography: StencilReactComponent<BdsTypographyElement, BdsTypog
36
35
  events: {} as BdsTypographyEvents,
37
36
  defineCustomElement: defineBdsTypography
38
37
  });
39
-
40
- export type MyComponentEvents = NonNullable<unknown>;
41
-
42
- export const MyComponent: StencilReactComponent<MyComponentElement, MyComponentEvents> = /*@__PURE__*/ createComponent<MyComponentElement, MyComponentEvents>({
43
- tagName: 'my-component',
44
- elementClass: MyComponentElement,
45
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
46
- react: React,
47
- events: {} as MyComponentEvents,
48
- defineCustomElement: defineMyComponent
49
- });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telesign/boreal-react",
3
- "version": "0.1.0-alpha.1",
3
+ "version": "0.1.0-alpha.3",
4
4
  "description": "Wrapper for React BorealDS",
5
5
  "keywords": [
6
6
  "Boreal",
@@ -28,12 +28,6 @@
28
28
  "./css/*": "./dist/css/*",
29
29
  "./scss/*": "./dist/scss/*"
30
30
  },
31
- "scripts": {
32
- "release": "release-it",
33
- "test": "echo 'No tests configured'",
34
- "build": "pnpm run tsc && boreal-copy-styles",
35
- "tsc": "tsc -p . --outDir ./dist"
36
- },
37
31
  "files": [
38
32
  "dist",
39
33
  "./lib/*"
@@ -48,7 +42,13 @@
48
42
  "access": "public"
49
43
  },
50
44
  "dependencies": {
51
- "@telesign/boreal-web-components": "workspace:*",
52
- "@stencil/react-output-target": "^1.2.0"
45
+ "@stencil/react-output-target": "^1.2.0",
46
+ "@telesign/boreal-web-components": "0.1.0-alpha.1"
47
+ },
48
+ "scripts": {
49
+ "release": "release-it",
50
+ "test": "echo 'No tests configured'",
51
+ "build": "pnpm run tsc && boreal-copy-styles",
52
+ "tsc": "tsc -p . --outDir ./dist"
53
53
  }
54
- }
54
+ }