@nova-design-system/nova-react 3.0.0-beta.17
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/LICENSE.MD +157 -0
- package/README.md +92 -0
- package/dist/generated/components.js +195 -0
- package/dist/index.js +2 -0
- package/dist/types/generated/components.d.ts +100 -0
- package/dist/types/index.d.ts +2 -0
- package/package.json +42 -0
package/LICENSE.MD
ADDED
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
# End-User License Agreement: Nova Design System
|
|
2
|
+
|
|
3
|
+
This End-User License Agreement ("Agreement") is entered into between:
|
|
4
|
+
|
|
5
|
+
1. **Elia Group NV**
|
|
6
|
+
|
|
7
|
+
Located at Keizerslaan 20, 1000 Brussel, registered at the Crossroads Bank for Enterprises in Belgium under number 0476.388.378 (hereafter: “Licensor”, “Elia”, “We”, “Our” or “Us”), and
|
|
8
|
+
|
|
9
|
+
2. **Subsidiaries, Partners, or Affiliates**
|
|
10
|
+
|
|
11
|
+
Collectively referred to as the "Licensee".
|
|
12
|
+
|
|
13
|
+
**Licensor** and **Licensee** may both be referred to as a “Party” and jointly as the “Parties”.
|
|
14
|
+
|
|
15
|
+
This Agreement can only be entered into by a party which qualifies as the “Licensee”. Any attempt by Third Parties to claim rights or licenses under this Agreement shall be considered null and void, as the Agreement is strictly limited to the Licensee, as defined herein.
|
|
16
|
+
|
|
17
|
+
## Article 1: Definitions
|
|
18
|
+
|
|
19
|
+
### 1.1 Affiliate
|
|
20
|
+
|
|
21
|
+
A business entity related to Elia through ownership, control, or shared interests, as per Article 1:15 of the Belgian Code of Companies and Associations.
|
|
22
|
+
|
|
23
|
+
### 1.2 Effective Date
|
|
24
|
+
|
|
25
|
+
The date from which the Licensee accesses and downloads the Works.
|
|
26
|
+
|
|
27
|
+
### 1.3 Elia Projects
|
|
28
|
+
|
|
29
|
+
Initiatives, projects, or tasks directly relating to Elia’s business operations or those of Subsidiaries, Affiliates, or Partners, including development, execution, or management of services or products.
|
|
30
|
+
|
|
31
|
+
### 1.4 Intellectual Property Rights
|
|
32
|
+
|
|
33
|
+
Any intellectual property rights, including copyrights, trademarks, patents, and related rights worldwide.
|
|
34
|
+
|
|
35
|
+
### 1.5 License
|
|
36
|
+
|
|
37
|
+
As described in Article 2.1.
|
|
38
|
+
|
|
39
|
+
### 1.6 Partner
|
|
40
|
+
|
|
41
|
+
A business partner, subcontractor, or service provider of Elia engaged in Elia Projects.
|
|
42
|
+
|
|
43
|
+
### 1.7 Subsidiary
|
|
44
|
+
|
|
45
|
+
An entity directly or indirectly controlled by the Licensee, per Article 1:14 of the Belgian Code of Companies and Associations.
|
|
46
|
+
|
|
47
|
+
### 1.8 Territory
|
|
48
|
+
|
|
49
|
+
The entire world.
|
|
50
|
+
|
|
51
|
+
### 1.9 Third Party
|
|
52
|
+
|
|
53
|
+
A person or entity not defined as a Party, Subsidiary, Affiliate, or Partner of the Licensor.
|
|
54
|
+
|
|
55
|
+
### 1.10 Works
|
|
56
|
+
|
|
57
|
+
All elements and visuals in the UI library of the "Nova Design System", including source code and associated materials.
|
|
58
|
+
|
|
59
|
+
## Article 2: Grant of License
|
|
60
|
+
|
|
61
|
+
### 2.1 License Grant
|
|
62
|
+
|
|
63
|
+
The **Licensor** grants the **Licensee** a non-exclusive, revocable, sublicensable, and non-transferable right to use the Works worldwide solely for Elia Projects.
|
|
64
|
+
|
|
65
|
+
### 2.2 Usage Rights
|
|
66
|
+
|
|
67
|
+
The usage rights include reproduction, translation, and public communication, provided the Licensee complies with the Agreement.
|
|
68
|
+
|
|
69
|
+
### 2.3 Reporting Infringements
|
|
70
|
+
|
|
71
|
+
Licensee must inform Licensor of any Intellectual Property infringement.
|
|
72
|
+
|
|
73
|
+
## Article 3: Ownership of Intellectual Property Rights
|
|
74
|
+
|
|
75
|
+
### 3.1 Ownership Retained
|
|
76
|
+
|
|
77
|
+
The **Licensor** retains all ownership rights to the Intellectual Property related to the Works.
|
|
78
|
+
|
|
79
|
+
### 3.2 Updates
|
|
80
|
+
|
|
81
|
+
Updates may be implemented by the Licensor without prior notice. Licensee may choose whether to implement updates.
|
|
82
|
+
|
|
83
|
+
## Article 4: Permitted Use and Restrictions
|
|
84
|
+
|
|
85
|
+
### 4.1 Permitted Use
|
|
86
|
+
|
|
87
|
+
- The Works may only be used by employees or contractors of the Licensee in Elia Projects.
|
|
88
|
+
|
|
89
|
+
- Installation is restricted to devices owned or controlled by the Licensee.
|
|
90
|
+
|
|
91
|
+
### 4.2 Restrictions
|
|
92
|
+
|
|
93
|
+
The Works must not be:
|
|
94
|
+
|
|
95
|
+
- Shared, sublicensed, or otherwise transferred to Third Parties.
|
|
96
|
+
|
|
97
|
+
- Reverse-engineered, decompiled, or disassembled.
|
|
98
|
+
|
|
99
|
+
## Article 5: Liability and Disclaimer of Warranties
|
|
100
|
+
|
|
101
|
+
### 5.1 Disclaimer
|
|
102
|
+
|
|
103
|
+
The Works are provided "as is", without warranty of any kind. The **Licensor** disclaims all implied warranties.
|
|
104
|
+
|
|
105
|
+
### 5.2 Limitation of Liability
|
|
106
|
+
|
|
107
|
+
The **Licensor** limits its liability to €1,000. The Licensee assumes all risks related to the use of the Works.
|
|
108
|
+
|
|
109
|
+
## Article 6: Term and Termination
|
|
110
|
+
|
|
111
|
+
### 6.1 Initial Term
|
|
112
|
+
|
|
113
|
+
The Agreement is effective indefinitely from the Effective Date unless terminated.
|
|
114
|
+
|
|
115
|
+
### 6.2 Termination by Notice
|
|
116
|
+
|
|
117
|
+
Either Party may terminate with one month's written notice.
|
|
118
|
+
|
|
119
|
+
### 6.3 Automatic Termination
|
|
120
|
+
|
|
121
|
+
Termination occurs automatically upon:
|
|
122
|
+
|
|
123
|
+
- Changes in control, ownership, or project participation.
|
|
124
|
+
|
|
125
|
+
- Breach of material terms by the Licensee, following written notice.
|
|
126
|
+
|
|
127
|
+
### 6.4 Post-Termination Obligations
|
|
128
|
+
|
|
129
|
+
Upon termination, the **Licensee** must cease using and destroy all copies of the Works.
|
|
130
|
+
|
|
131
|
+
## Article 7: Miscellaneous
|
|
132
|
+
|
|
133
|
+
### 7.1 Waiver
|
|
134
|
+
|
|
135
|
+
Waivers must be in writing and do not constitute ongoing waivers of similar rights.
|
|
136
|
+
|
|
137
|
+
### 7.2 Costs
|
|
138
|
+
|
|
139
|
+
Each Party bears its own implementation costs.
|
|
140
|
+
|
|
141
|
+
### 7.3 Assignment
|
|
142
|
+
|
|
143
|
+
The Agreement may not be assigned without prior consent from the **Licensor**.
|
|
144
|
+
|
|
145
|
+
### 7.4 Severability
|
|
146
|
+
|
|
147
|
+
Invalid provisions will not affect the remainder of the Agreement.
|
|
148
|
+
|
|
149
|
+
## Article 8: Governing Law and Jurisdiction
|
|
150
|
+
|
|
151
|
+
### 8.1 Governing Law
|
|
152
|
+
|
|
153
|
+
This Agreement is governed by Belgian law.
|
|
154
|
+
|
|
155
|
+
### 8.2 Jurisdiction
|
|
156
|
+
|
|
157
|
+
The Dutch-speaking courts of Brussels have exclusive jurisdiction for disputes.
|
package/README.md
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# Nova Components React
|
|
2
|
+
|
|
3
|
+
**Nova Components React** is a lightweight wrapper for React that allows you to use the native UI elements from the Nova UI package seamlessly within your React applications.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
To get started, install the necessary packages using your package manager of choice:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-react
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
or
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-react
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
**Yarn Peer Dependency**
|
|
20
|
+
|
|
21
|
+
If you’re using Yarn, note that it **does not automatically** install peer dependencies. You will need to install the following peer dependency manually:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
yarn add @stencil/react-output-target
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Setup
|
|
28
|
+
|
|
29
|
+
After installing the packages, you'll need to include the Nova UI CSS and define the custom elements in your `main.tsx` or `index.tsx` file:
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import '@nova-design-system/nova-base/dist/css/nova-utils.css';
|
|
33
|
+
import '@nova-design-system/nova-base/assets/nova-fonts.css';
|
|
34
|
+
import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
|
|
35
|
+
import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
|
|
36
|
+
|
|
37
|
+
defineCustomElements();
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
This setup ensures that all the necessary Nova web-components are available in your application.
|
|
41
|
+
|
|
42
|
+
## Nova Font Pro Integration
|
|
43
|
+
|
|
44
|
+
To use Nova fonts in your React application, you'll need to contact the Nova team via Teams, email, or check the [Nova Wiki](https://dev.azure.com/elia-digitization/Nova/_wiki/wikis/Nova.wiki/30245/Nova-Font-Pro) to obtain the full CDN URL. Once you have the URL, you can integrate it using any of these methods:
|
|
45
|
+
|
|
46
|
+
### Option 1: Import in Global CSS (Recommended)
|
|
47
|
+
In your main CSS file (e.g., `src/index.css` or `src/App.css`):
|
|
48
|
+
|
|
49
|
+
```css
|
|
50
|
+
@import url('https://novaassets.azureedge.net/fonts/nova-fonts-pro.css');
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Option 2: HTML Integration
|
|
54
|
+
In your `public/index.html`:
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<!DOCTYPE html>
|
|
58
|
+
<html>
|
|
59
|
+
<head>
|
|
60
|
+
<link rel="stylesheet" href="https://novaassets.azureedge.net/fonts/nova-fonts-pro.css">
|
|
61
|
+
</head>
|
|
62
|
+
<body>
|
|
63
|
+
<div id="root"></div>
|
|
64
|
+
</body>
|
|
65
|
+
</html>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
The `nova-fonts-pro.css` file includes both font definitions and the `font-family` rule for the `body`, automatically applying the fonts across your React application.
|
|
69
|
+
|
|
70
|
+
## Usage
|
|
71
|
+
|
|
72
|
+
With everything set up, you can start using Nova components in your React application. Here's a quick example:
|
|
73
|
+
|
|
74
|
+
```typescript
|
|
75
|
+
import { NvButton } from '@nova-design-system/nova-react';
|
|
76
|
+
|
|
77
|
+
const MyComponent = () => {
|
|
78
|
+
const [count, setCount] = useState(0);
|
|
79
|
+
|
|
80
|
+
return (
|
|
81
|
+
<NvButton danger onClick={() => setCount(count + 1)}>
|
|
82
|
+
count is {count}
|
|
83
|
+
</NvButton>
|
|
84
|
+
);
|
|
85
|
+
};
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
In this example, the `NvButton` component is imported and used just like any other React component. The `danger` prop and `onClick` handler are passed to customize its behavior.
|
|
89
|
+
|
|
90
|
+
## Conclusion
|
|
91
|
+
|
|
92
|
+
Nova Components React provides an easy way to integrate Nova's native web components into your React projects, enabling you to leverage the power of Nova UI with the flexibility of React. For more detailed documentation and examples, refer to the official Nova documentation.
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { NvAlert as NvAlertElement, defineCustomElement as defineNvAlert } from "@nova-design-system/nova-webcomponents/dist/components/nv-alert.js";
|
|
3
|
+
import { NvAvatar as NvAvatarElement, defineCustomElement as defineNvAvatar } from "@nova-design-system/nova-webcomponents/dist/components/nv-avatar.js";
|
|
4
|
+
import { NvBadge as NvBadgeElement, defineCustomElement as defineNvBadge } from "@nova-design-system/nova-webcomponents/dist/components/nv-badge.js";
|
|
5
|
+
import { NvBase as NvBaseElement, defineCustomElement as defineNvBase } from "@nova-design-system/nova-webcomponents/dist/components/nv-base.js";
|
|
6
|
+
import { NvButton as NvButtonElement, defineCustomElement as defineNvButton } from "@nova-design-system/nova-webcomponents/dist/components/nv-button.js";
|
|
7
|
+
import { NvCol as NvColElement, defineCustomElement as defineNvCol } from "@nova-design-system/nova-webcomponents/dist/components/nv-col.js";
|
|
8
|
+
import { NvFieldcheckbox as NvFieldcheckboxElement, defineCustomElement as defineNvFieldcheckbox } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldcheckbox.js";
|
|
9
|
+
import { NvFieldnumber as NvFieldnumberElement, defineCustomElement as defineNvFieldnumber } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldnumber.js";
|
|
10
|
+
import { NvFieldpassword as NvFieldpasswordElement, defineCustomElement as defineNvFieldpassword } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldpassword.js";
|
|
11
|
+
import { NvFieldradio as NvFieldradioElement, defineCustomElement as defineNvFieldradio } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldradio.js";
|
|
12
|
+
import { NvFieldselect as NvFieldselectElement, defineCustomElement as defineNvFieldselect } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldselect.js";
|
|
13
|
+
import { NvFieldtext as NvFieldtextElement, defineCustomElement as defineNvFieldtext } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtext.js";
|
|
14
|
+
import { NvFieldtextarea as NvFieldtextareaElement, defineCustomElement as defineNvFieldtextarea } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtextarea.js";
|
|
15
|
+
import { NvFieldtoggle as NvFieldtoggleElement, defineCustomElement as defineNvFieldtoggle } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtoggle.js";
|
|
16
|
+
import { NvIcon as NvIconElement, defineCustomElement as defineNvIcon } from "@nova-design-system/nova-webcomponents/dist/components/nv-icon.js";
|
|
17
|
+
import { NvIconbutton as NvIconbuttonElement, defineCustomElement as defineNvIconbutton } from "@nova-design-system/nova-webcomponents/dist/components/nv-iconbutton.js";
|
|
18
|
+
import { NvLoader as NvLoaderElement, defineCustomElement as defineNvLoader } from "@nova-design-system/nova-webcomponents/dist/components/nv-loader.js";
|
|
19
|
+
import { NvMenu as NvMenuElement, defineCustomElement as defineNvMenu } from "@nova-design-system/nova-webcomponents/dist/components/nv-menu.js";
|
|
20
|
+
import { NvMenuitem as NvMenuitemElement, defineCustomElement as defineNvMenuitem } from "@nova-design-system/nova-webcomponents/dist/components/nv-menuitem.js";
|
|
21
|
+
import { NvPopover as NvPopoverElement, defineCustomElement as defineNvPopover } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
|
|
22
|
+
import { NvRow as NvRowElement, defineCustomElement as defineNvRow } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
|
|
23
|
+
import { NvStack as NvStackElement, defineCustomElement as defineNvStack } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
|
|
24
|
+
import { NvTooltip as NvTooltipElement, defineCustomElement as defineNvTooltip } from "@nova-design-system/nova-webcomponents/dist/components/nv-tooltip.js";
|
|
25
|
+
import { createComponent } from '@stencil/react-output-target/runtime';
|
|
26
|
+
import React from 'react';
|
|
27
|
+
export const NvAlert = createComponent({
|
|
28
|
+
tagName: 'nv-alert',
|
|
29
|
+
elementClass: NvAlertElement,
|
|
30
|
+
react: React,
|
|
31
|
+
events: {
|
|
32
|
+
onHiddenChanged: 'hiddenChanged',
|
|
33
|
+
onHiddenChangedComplete: 'hiddenChangedComplete',
|
|
34
|
+
onCloseClicked: 'closeClicked'
|
|
35
|
+
},
|
|
36
|
+
defineCustomElement: defineNvAlert
|
|
37
|
+
});
|
|
38
|
+
export const NvAvatar = createComponent({
|
|
39
|
+
tagName: 'nv-avatar',
|
|
40
|
+
elementClass: NvAvatarElement,
|
|
41
|
+
react: React,
|
|
42
|
+
events: {},
|
|
43
|
+
defineCustomElement: defineNvAvatar
|
|
44
|
+
});
|
|
45
|
+
export const NvBadge = createComponent({
|
|
46
|
+
tagName: 'nv-badge',
|
|
47
|
+
elementClass: NvBadgeElement,
|
|
48
|
+
react: React,
|
|
49
|
+
events: {
|
|
50
|
+
onCloseClicked: 'closeClicked',
|
|
51
|
+
onHiddenChanged: 'hiddenChanged',
|
|
52
|
+
onHiddenChangedComplete: 'hiddenChangedComplete'
|
|
53
|
+
},
|
|
54
|
+
defineCustomElement: defineNvBadge
|
|
55
|
+
});
|
|
56
|
+
export const NvBase = createComponent({
|
|
57
|
+
tagName: 'nv-base',
|
|
58
|
+
elementClass: NvBaseElement,
|
|
59
|
+
react: React,
|
|
60
|
+
events: {},
|
|
61
|
+
defineCustomElement: defineNvBase
|
|
62
|
+
});
|
|
63
|
+
export const NvButton = createComponent({
|
|
64
|
+
tagName: 'nv-button',
|
|
65
|
+
elementClass: NvButtonElement,
|
|
66
|
+
react: React,
|
|
67
|
+
events: {},
|
|
68
|
+
defineCustomElement: defineNvButton
|
|
69
|
+
});
|
|
70
|
+
export const NvCol = createComponent({
|
|
71
|
+
tagName: 'nv-col',
|
|
72
|
+
elementClass: NvColElement,
|
|
73
|
+
react: React,
|
|
74
|
+
events: {},
|
|
75
|
+
defineCustomElement: defineNvCol
|
|
76
|
+
});
|
|
77
|
+
export const NvFieldcheckbox = createComponent({
|
|
78
|
+
tagName: 'nv-fieldcheckbox',
|
|
79
|
+
elementClass: NvFieldcheckboxElement,
|
|
80
|
+
react: React,
|
|
81
|
+
events: { onCheckedChanged: 'checkedChanged' },
|
|
82
|
+
defineCustomElement: defineNvFieldcheckbox
|
|
83
|
+
});
|
|
84
|
+
export const NvFieldnumber = createComponent({
|
|
85
|
+
tagName: 'nv-fieldnumber',
|
|
86
|
+
elementClass: NvFieldnumberElement,
|
|
87
|
+
react: React,
|
|
88
|
+
events: { onValueChanged: 'valueChanged' },
|
|
89
|
+
defineCustomElement: defineNvFieldnumber
|
|
90
|
+
});
|
|
91
|
+
export const NvFieldpassword = createComponent({
|
|
92
|
+
tagName: 'nv-fieldpassword',
|
|
93
|
+
elementClass: NvFieldpasswordElement,
|
|
94
|
+
react: React,
|
|
95
|
+
events: { onValueChanged: 'valueChanged' },
|
|
96
|
+
defineCustomElement: defineNvFieldpassword
|
|
97
|
+
});
|
|
98
|
+
export const NvFieldradio = createComponent({
|
|
99
|
+
tagName: 'nv-fieldradio',
|
|
100
|
+
elementClass: NvFieldradioElement,
|
|
101
|
+
react: React,
|
|
102
|
+
events: { onCheckedChanged: 'checkedChanged' },
|
|
103
|
+
defineCustomElement: defineNvFieldradio
|
|
104
|
+
});
|
|
105
|
+
export const NvFieldselect = createComponent({
|
|
106
|
+
tagName: 'nv-fieldselect',
|
|
107
|
+
elementClass: NvFieldselectElement,
|
|
108
|
+
react: React,
|
|
109
|
+
events: { onValueChanged: 'valueChanged' },
|
|
110
|
+
defineCustomElement: defineNvFieldselect
|
|
111
|
+
});
|
|
112
|
+
export const NvFieldtext = createComponent({
|
|
113
|
+
tagName: 'nv-fieldtext',
|
|
114
|
+
elementClass: NvFieldtextElement,
|
|
115
|
+
react: React,
|
|
116
|
+
events: { onValueChanged: 'valueChanged' },
|
|
117
|
+
defineCustomElement: defineNvFieldtext
|
|
118
|
+
});
|
|
119
|
+
export const NvFieldtextarea = createComponent({
|
|
120
|
+
tagName: 'nv-fieldtextarea',
|
|
121
|
+
elementClass: NvFieldtextareaElement,
|
|
122
|
+
react: React,
|
|
123
|
+
events: { onValueChanged: 'valueChanged' },
|
|
124
|
+
defineCustomElement: defineNvFieldtextarea
|
|
125
|
+
});
|
|
126
|
+
export const NvFieldtoggle = createComponent({
|
|
127
|
+
tagName: 'nv-fieldtoggle',
|
|
128
|
+
elementClass: NvFieldtoggleElement,
|
|
129
|
+
react: React,
|
|
130
|
+
events: { onCheckedChanged: 'checkedChanged' },
|
|
131
|
+
defineCustomElement: defineNvFieldtoggle
|
|
132
|
+
});
|
|
133
|
+
export const NvIcon = createComponent({
|
|
134
|
+
tagName: 'nv-icon',
|
|
135
|
+
elementClass: NvIconElement,
|
|
136
|
+
react: React,
|
|
137
|
+
events: {},
|
|
138
|
+
defineCustomElement: defineNvIcon
|
|
139
|
+
});
|
|
140
|
+
export const NvIconbutton = createComponent({
|
|
141
|
+
tagName: 'nv-iconbutton',
|
|
142
|
+
elementClass: NvIconbuttonElement,
|
|
143
|
+
react: React,
|
|
144
|
+
events: {},
|
|
145
|
+
defineCustomElement: defineNvIconbutton
|
|
146
|
+
});
|
|
147
|
+
export const NvLoader = createComponent({
|
|
148
|
+
tagName: 'nv-loader',
|
|
149
|
+
elementClass: NvLoaderElement,
|
|
150
|
+
react: React,
|
|
151
|
+
events: {},
|
|
152
|
+
defineCustomElement: defineNvLoader
|
|
153
|
+
});
|
|
154
|
+
export const NvMenu = createComponent({
|
|
155
|
+
tagName: 'nv-menu',
|
|
156
|
+
elementClass: NvMenuElement,
|
|
157
|
+
react: React,
|
|
158
|
+
events: { onMenuitemSelected: 'menuitemSelected' },
|
|
159
|
+
defineCustomElement: defineNvMenu
|
|
160
|
+
});
|
|
161
|
+
export const NvMenuitem = createComponent({
|
|
162
|
+
tagName: 'nv-menuitem',
|
|
163
|
+
elementClass: NvMenuitemElement,
|
|
164
|
+
react: React,
|
|
165
|
+
events: {},
|
|
166
|
+
defineCustomElement: defineNvMenuitem
|
|
167
|
+
});
|
|
168
|
+
export const NvPopover = createComponent({
|
|
169
|
+
tagName: 'nv-popover',
|
|
170
|
+
elementClass: NvPopoverElement,
|
|
171
|
+
react: React,
|
|
172
|
+
events: { onOpenChanged: 'openChanged' },
|
|
173
|
+
defineCustomElement: defineNvPopover
|
|
174
|
+
});
|
|
175
|
+
export const NvRow = createComponent({
|
|
176
|
+
tagName: 'nv-row',
|
|
177
|
+
elementClass: NvRowElement,
|
|
178
|
+
react: React,
|
|
179
|
+
events: {},
|
|
180
|
+
defineCustomElement: defineNvRow
|
|
181
|
+
});
|
|
182
|
+
export const NvStack = createComponent({
|
|
183
|
+
tagName: 'nv-stack',
|
|
184
|
+
elementClass: NvStackElement,
|
|
185
|
+
react: React,
|
|
186
|
+
events: {},
|
|
187
|
+
defineCustomElement: defineNvStack
|
|
188
|
+
});
|
|
189
|
+
export const NvTooltip = createComponent({
|
|
190
|
+
tagName: 'nv-tooltip',
|
|
191
|
+
elementClass: NvTooltipElement,
|
|
192
|
+
react: React,
|
|
193
|
+
events: {},
|
|
194
|
+
defineCustomElement: defineNvTooltip
|
|
195
|
+
});
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { type MenuitemSelectedEventDetail, type NvAlertCustomEvent, type NvBadgeCustomEvent, type NvMenuCustomEvent } from "@nova-design-system/nova-webcomponents";
|
|
2
|
+
import { NvAlert as NvAlertElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-alert.js";
|
|
3
|
+
import { NvAvatar as NvAvatarElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-avatar.js";
|
|
4
|
+
import { NvBadge as NvBadgeElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-badge.js";
|
|
5
|
+
import { NvBase as NvBaseElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-base.js";
|
|
6
|
+
import { NvButton as NvButtonElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-button.js";
|
|
7
|
+
import { NvCol as NvColElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-col.js";
|
|
8
|
+
import { NvFieldcheckbox as NvFieldcheckboxElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldcheckbox.js";
|
|
9
|
+
import { NvFieldnumber as NvFieldnumberElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldnumber.js";
|
|
10
|
+
import { NvFieldpassword as NvFieldpasswordElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldpassword.js";
|
|
11
|
+
import { NvFieldradio as NvFieldradioElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldradio.js";
|
|
12
|
+
import { NvFieldselect as NvFieldselectElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldselect.js";
|
|
13
|
+
import { NvFieldtext as NvFieldtextElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtext.js";
|
|
14
|
+
import { NvFieldtextarea as NvFieldtextareaElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtextarea.js";
|
|
15
|
+
import { NvFieldtoggle as NvFieldtoggleElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-fieldtoggle.js";
|
|
16
|
+
import { NvIcon as NvIconElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-icon.js";
|
|
17
|
+
import { NvIconbutton as NvIconbuttonElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-iconbutton.js";
|
|
18
|
+
import { NvLoader as NvLoaderElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-loader.js";
|
|
19
|
+
import { NvMenu as NvMenuElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menu.js";
|
|
20
|
+
import { NvMenuitem as NvMenuitemElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-menuitem.js";
|
|
21
|
+
import { NvPopover as NvPopoverElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-popover.js";
|
|
22
|
+
import { NvRow as NvRowElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-row.js";
|
|
23
|
+
import { NvStack as NvStackElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-stack.js";
|
|
24
|
+
import { NvTooltip as NvTooltipElement } from "@nova-design-system/nova-webcomponents/dist/components/nv-tooltip.js";
|
|
25
|
+
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
|
|
26
|
+
type NvAlertEvents = {
|
|
27
|
+
onHiddenChanged: EventName<CustomEvent<boolean>>;
|
|
28
|
+
onHiddenChangedComplete: EventName<CustomEvent<boolean>>;
|
|
29
|
+
onCloseClicked: EventName<NvAlertCustomEvent<MouseEvent>>;
|
|
30
|
+
};
|
|
31
|
+
export declare const NvAlert: StencilReactComponent<NvAlertElement, NvAlertEvents>;
|
|
32
|
+
type NvAvatarEvents = NonNullable<unknown>;
|
|
33
|
+
export declare const NvAvatar: StencilReactComponent<NvAvatarElement, NvAvatarEvents>;
|
|
34
|
+
type NvBadgeEvents = {
|
|
35
|
+
onCloseClicked: EventName<NvBadgeCustomEvent<MouseEvent>>;
|
|
36
|
+
onHiddenChanged: EventName<CustomEvent<boolean>>;
|
|
37
|
+
onHiddenChangedComplete: EventName<CustomEvent<boolean>>;
|
|
38
|
+
};
|
|
39
|
+
export declare const NvBadge: StencilReactComponent<NvBadgeElement, NvBadgeEvents>;
|
|
40
|
+
type NvBaseEvents = NonNullable<unknown>;
|
|
41
|
+
export declare const NvBase: StencilReactComponent<NvBaseElement, NvBaseEvents>;
|
|
42
|
+
type NvButtonEvents = NonNullable<unknown>;
|
|
43
|
+
export declare const NvButton: StencilReactComponent<NvButtonElement, NvButtonEvents>;
|
|
44
|
+
type NvColEvents = NonNullable<unknown>;
|
|
45
|
+
export declare const NvCol: StencilReactComponent<NvColElement, NvColEvents>;
|
|
46
|
+
type NvFieldcheckboxEvents = {
|
|
47
|
+
onCheckedChanged: EventName<CustomEvent<boolean>>;
|
|
48
|
+
};
|
|
49
|
+
export declare const NvFieldcheckbox: StencilReactComponent<NvFieldcheckboxElement, NvFieldcheckboxEvents>;
|
|
50
|
+
type NvFieldnumberEvents = {
|
|
51
|
+
onValueChanged: EventName<CustomEvent<number>>;
|
|
52
|
+
};
|
|
53
|
+
export declare const NvFieldnumber: StencilReactComponent<NvFieldnumberElement, NvFieldnumberEvents>;
|
|
54
|
+
type NvFieldpasswordEvents = {
|
|
55
|
+
onValueChanged: EventName<CustomEvent<string>>;
|
|
56
|
+
};
|
|
57
|
+
export declare const NvFieldpassword: StencilReactComponent<NvFieldpasswordElement, NvFieldpasswordEvents>;
|
|
58
|
+
type NvFieldradioEvents = {
|
|
59
|
+
onCheckedChanged: EventName<CustomEvent<boolean>>;
|
|
60
|
+
};
|
|
61
|
+
export declare const NvFieldradio: StencilReactComponent<NvFieldradioElement, NvFieldradioEvents>;
|
|
62
|
+
type NvFieldselectEvents = {
|
|
63
|
+
onValueChanged: EventName<CustomEvent<string>>;
|
|
64
|
+
};
|
|
65
|
+
export declare const NvFieldselect: StencilReactComponent<NvFieldselectElement, NvFieldselectEvents>;
|
|
66
|
+
type NvFieldtextEvents = {
|
|
67
|
+
onValueChanged: EventName<CustomEvent<string>>;
|
|
68
|
+
};
|
|
69
|
+
export declare const NvFieldtext: StencilReactComponent<NvFieldtextElement, NvFieldtextEvents>;
|
|
70
|
+
type NvFieldtextareaEvents = {
|
|
71
|
+
onValueChanged: EventName<CustomEvent<string>>;
|
|
72
|
+
};
|
|
73
|
+
export declare const NvFieldtextarea: StencilReactComponent<NvFieldtextareaElement, NvFieldtextareaEvents>;
|
|
74
|
+
type NvFieldtoggleEvents = {
|
|
75
|
+
onCheckedChanged: EventName<CustomEvent<boolean>>;
|
|
76
|
+
};
|
|
77
|
+
export declare const NvFieldtoggle: StencilReactComponent<NvFieldtoggleElement, NvFieldtoggleEvents>;
|
|
78
|
+
type NvIconEvents = NonNullable<unknown>;
|
|
79
|
+
export declare const NvIcon: StencilReactComponent<NvIconElement, NvIconEvents>;
|
|
80
|
+
type NvIconbuttonEvents = NonNullable<unknown>;
|
|
81
|
+
export declare const NvIconbutton: StencilReactComponent<NvIconbuttonElement, NvIconbuttonEvents>;
|
|
82
|
+
type NvLoaderEvents = NonNullable<unknown>;
|
|
83
|
+
export declare const NvLoader: StencilReactComponent<NvLoaderElement, NvLoaderEvents>;
|
|
84
|
+
type NvMenuEvents = {
|
|
85
|
+
onMenuitemSelected: EventName<NvMenuCustomEvent<MenuitemSelectedEventDetail>>;
|
|
86
|
+
};
|
|
87
|
+
export declare const NvMenu: StencilReactComponent<NvMenuElement, NvMenuEvents>;
|
|
88
|
+
type NvMenuitemEvents = NonNullable<unknown>;
|
|
89
|
+
export declare const NvMenuitem: StencilReactComponent<NvMenuitemElement, NvMenuitemEvents>;
|
|
90
|
+
type NvPopoverEvents = {
|
|
91
|
+
onOpenChanged: EventName<CustomEvent<boolean>>;
|
|
92
|
+
};
|
|
93
|
+
export declare const NvPopover: StencilReactComponent<NvPopoverElement, NvPopoverEvents>;
|
|
94
|
+
type NvRowEvents = NonNullable<unknown>;
|
|
95
|
+
export declare const NvRow: StencilReactComponent<NvRowElement, NvRowEvents>;
|
|
96
|
+
type NvStackEvents = NonNullable<unknown>;
|
|
97
|
+
export declare const NvStack: StencilReactComponent<NvStackElement, NvStackEvents>;
|
|
98
|
+
type NvTooltipEvents = NonNullable<unknown>;
|
|
99
|
+
export declare const NvTooltip: StencilReactComponent<NvTooltipElement, NvTooltipEvents>;
|
|
100
|
+
export {};
|
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nova-design-system/nova-react",
|
|
3
|
+
"version": "3.0.0-beta.17",
|
|
4
|
+
"description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
|
|
5
|
+
"author": "Elia Group",
|
|
6
|
+
"homepage": "https://nova.eliagroup.io",
|
|
7
|
+
"license": "SEE LICENSE IN LICENSE.MD",
|
|
8
|
+
"main": "dist/index.js",
|
|
9
|
+
"module": "dist/index.js",
|
|
10
|
+
"types": "dist/types/index.d.ts",
|
|
11
|
+
"directories": {
|
|
12
|
+
"lib": "lib",
|
|
13
|
+
"stories": "stories"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
18
|
+
"publishConfig": {
|
|
19
|
+
"registry": "http://registry.npmjs.org/",
|
|
20
|
+
"access": "public"
|
|
21
|
+
},
|
|
22
|
+
"scripts": {
|
|
23
|
+
"build": "npm run tsc",
|
|
24
|
+
"tsc": "tsc -p . --outDir ./dist",
|
|
25
|
+
"storybook": "storybook dev -p 6006",
|
|
26
|
+
"storybook.build": "storybook build -o ../../storybook-static/react",
|
|
27
|
+
"clean": "rimraf dist lib/generated lib/stories",
|
|
28
|
+
"typecheck": "tsc --emitDeclarationOnly false --noEmit"
|
|
29
|
+
},
|
|
30
|
+
"devDependencies": {
|
|
31
|
+
"react": "^18.3.1",
|
|
32
|
+
"react-dom": "^18.3.1",
|
|
33
|
+
"@storybook/react": "8.2.8",
|
|
34
|
+
"@storybook/react-vite": "8.2.8",
|
|
35
|
+
"nova-storybook-utils": "*",
|
|
36
|
+
"@nova-design-system/nova-webcomponents": "*"
|
|
37
|
+
},
|
|
38
|
+
"peerDependencies": {
|
|
39
|
+
"@nova-design-system/nova-webcomponents": ">=3.0.0-beta.0",
|
|
40
|
+
"@stencil/react-output-target": "^0.7.1"
|
|
41
|
+
}
|
|
42
|
+
}
|