@genesislcap/foundation-zero 14.179.0 → 14.180.1
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 +88 -12
- package/package.json +12 -12
package/README.md
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
[](https://lerna.js.org/)
|
|
2
|
+
[](https://www.typescriptlang.org/)
|
|
3
|
+
|
|
4
|
+
# Genesis Zero Design System
|
|
2
5
|
|
|
3
|
-
|
|
6
|
+
This package is a Design System (Zero). It is built on top of the `foundation-ui` and provides a set of components that are ready to use without any additional configuration.
|
|
7
|
+
|
|
8
|
+
## [API Docs](./docs/api/index.md)
|
|
4
9
|
|
|
5
|
-
|
|
10
|
+
## [Module Federation Details](https://webpack.js.org/concepts/module-federation):
|
|
6
11
|
|
|
7
12
|
| Remote Name | Port |
|
|
8
13
|
| --------------------- | ----- |
|
|
9
14
|
| foundationZero | 4020 |
|
|
10
15
|
|
|
11
|
-
[](https://lerna.js.org/)
|
|
12
|
-
[](https://www.typescriptlang.org/)
|
|
13
|
-
|
|
14
|
-
|
|
15
16
|
## Installation
|
|
16
17
|
|
|
17
18
|
To enable this module in your application, follow the steps below.
|
|
@@ -20,21 +21,96 @@ To enable this module in your application, follow the steps below.
|
|
|
20
21
|
|
|
21
22
|
```json
|
|
22
23
|
{
|
|
23
|
-
...
|
|
24
24
|
"dependencies": {
|
|
25
|
-
...
|
|
26
25
|
"@genesislcap/foundation-zero": "latest"
|
|
27
|
-
...
|
|
28
26
|
},
|
|
29
|
-
...
|
|
30
27
|
}
|
|
31
28
|
```
|
|
32
29
|
|
|
33
|
-
##
|
|
30
|
+
## Setting Up the Design System
|
|
31
|
+
|
|
32
|
+
The setup involves providing and registering Design System components from `foundation-zero` or other places. Here's how you can do it:
|
|
33
|
+
|
|
34
|
+
### Providing the Design System & Registering All Components
|
|
35
|
+
|
|
36
|
+
Tipically, in the `components.ts` file (or your entry-point for app-level setups), you provide the design system using `provideDesignSystem` and register components against that design system. Here's an example:
|
|
37
|
+
|
|
38
|
+
```typescript
|
|
39
|
+
import { baseComponents, provideDesignSystem } from '@genesislcap/foundation-zero';
|
|
40
|
+
|
|
41
|
+
provideDesignSystem().register(baseComponents);
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
In the example above, `baseComponents` is a collection of components that are part of the same Design System. You can also register additional components if needed (even from other Design Systems, which will be prefixed with `zero-` in this case).
|
|
45
|
+
|
|
46
|
+
### Registering Specific Components
|
|
47
|
+
|
|
48
|
+
If you want to register specific components, you can do so by importing them from the design system and registering them. Here's an example:
|
|
49
|
+
|
|
50
|
+
```typescript
|
|
51
|
+
import { zeroButton, zeroDesignSystemProvider, provideDesignSystem } from '@genesislcap/foundation-zero';
|
|
52
|
+
|
|
53
|
+
provideDesignSystem().register(
|
|
54
|
+
/**
|
|
55
|
+
* Design system provider element used to declaratively apply zero config to every dom node in the host tree.
|
|
56
|
+
*/
|
|
57
|
+
zeroDesignSystemProvider(),
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Button component
|
|
61
|
+
*/
|
|
62
|
+
zeroButton()
|
|
63
|
+
);
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
In the example above, `zero-button` will be the only component registered in the Zero Design System. YOu can also register multiple components at once:
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
import { provideDesignSystem, zeroButton, zeroCard, zeroDesignSystemProvider, zeronModal } from '@genesislcap/foundation-zero';
|
|
70
|
+
|
|
71
|
+
provideDesignSystem().register(
|
|
72
|
+
/**
|
|
73
|
+
* Design system provider element used to declaratively apply zero config to every dom node in the host tree.
|
|
74
|
+
*/
|
|
75
|
+
zeroDesignSystemProvider(),
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Components that will be registered in the Zero Design System
|
|
79
|
+
*/
|
|
80
|
+
zeroButton(),
|
|
81
|
+
zeroCard(),
|
|
82
|
+
zeroModal()
|
|
83
|
+
);
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Registering Third-Party Components
|
|
87
|
+
|
|
88
|
+
We provide a few "third-party" components that are not part of the Design System package. These can be registered in the same way as the other Design System components. Here's an example:
|
|
89
|
+
|
|
90
|
+
```typescript
|
|
91
|
+
import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
|
|
92
|
+
import { baseComponents, provideDesignSystem } from '@genesislcap/foundation-zero';
|
|
93
|
+
import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
|
|
94
|
+
import { gridComponents } from '@genesislcap/grid-pro';
|
|
95
|
+
|
|
96
|
+
provideDesignSystem().register(
|
|
97
|
+
baseComponents,
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* Third-party components
|
|
101
|
+
*/
|
|
102
|
+
foundationLayoutComponents,
|
|
103
|
+
g2plotChartsComponents,
|
|
104
|
+
gridComponents
|
|
105
|
+
);
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
The example above registers Zero UI components from the Zero Design System, Foundation Layout, G2Plot Charts, and Grid Pro.
|
|
34
109
|
|
|
35
110
|
## License
|
|
36
111
|
|
|
37
112
|
Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.
|
|
38
113
|
|
|
39
114
|
### Licensed components
|
|
115
|
+
|
|
40
116
|
Genesis low-code platform
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/foundation-zero",
|
|
3
3
|
"description": "Genesis Foundation Zero Design System",
|
|
4
|
-
"version": "14.
|
|
4
|
+
"version": "14.180.1",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "SEE LICENSE IN license.txt",
|
|
7
7
|
"main": "dist/esm/index.js",
|
|
@@ -67,12 +67,12 @@
|
|
|
67
67
|
},
|
|
68
68
|
"devDependencies": {
|
|
69
69
|
"@genesiscommunitysuccess/analyzer-import-alias-plugin": "^4.0.0",
|
|
70
|
-
"@genesislcap/genx": "14.
|
|
71
|
-
"@genesislcap/rollup-builder": "14.
|
|
72
|
-
"@genesislcap/ts-builder": "14.
|
|
73
|
-
"@genesislcap/uvu-playwright-builder": "14.
|
|
74
|
-
"@genesislcap/vite-builder": "14.
|
|
75
|
-
"@genesislcap/webpack-builder": "14.
|
|
70
|
+
"@genesislcap/genx": "14.180.1",
|
|
71
|
+
"@genesislcap/rollup-builder": "14.180.1",
|
|
72
|
+
"@genesislcap/ts-builder": "14.180.1",
|
|
73
|
+
"@genesislcap/uvu-playwright-builder": "14.180.1",
|
|
74
|
+
"@genesislcap/vite-builder": "14.180.1",
|
|
75
|
+
"@genesislcap/webpack-builder": "14.180.1",
|
|
76
76
|
"@storybook/addon-coverage": "^1.0.1",
|
|
77
77
|
"@storybook/addon-essentials": "^8.0.0",
|
|
78
78
|
"@storybook/addon-links": "^8.0.0",
|
|
@@ -89,10 +89,10 @@
|
|
|
89
89
|
"storybook": "^8.0.0"
|
|
90
90
|
},
|
|
91
91
|
"dependencies": {
|
|
92
|
-
"@genesislcap/foundation-comms": "14.
|
|
93
|
-
"@genesislcap/foundation-logger": "14.
|
|
94
|
-
"@genesislcap/foundation-ui": "14.
|
|
95
|
-
"@genesislcap/foundation-utils": "14.
|
|
92
|
+
"@genesislcap/foundation-comms": "14.180.1",
|
|
93
|
+
"@genesislcap/foundation-logger": "14.180.1",
|
|
94
|
+
"@genesislcap/foundation-ui": "14.180.1",
|
|
95
|
+
"@genesislcap/foundation-utils": "14.180.1",
|
|
96
96
|
"@microsoft/fast-colors": "^5.3.1",
|
|
97
97
|
"@microsoft/fast-components": "^2.30.6",
|
|
98
98
|
"@microsoft/fast-element": "^1.12.0",
|
|
@@ -109,5 +109,5 @@
|
|
|
109
109
|
"access": "public"
|
|
110
110
|
},
|
|
111
111
|
"customElements": "dist/custom-elements.json",
|
|
112
|
-
"gitHead": "
|
|
112
|
+
"gitHead": "ea64c8fdf01822c686617271eb721b448c82f8c0"
|
|
113
113
|
}
|