@carbon-labs/react-ui-shell 0.15.0 → 0.16.0
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 +79 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,5 +1,84 @@
|
|
|
1
1
|
# @carbon-labs/react-ui-shell
|
|
2
2
|
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
The `@carbon-labs/react-ui-shell` package extends UI Shell components from
|
|
7
|
+
`@carbon/react`, providing additional enhancements while maintaining
|
|
8
|
+
compatibility.
|
|
9
|
+
|
|
10
|
+
## 📦 Getting started
|
|
11
|
+
|
|
12
|
+
To install `@carbon-labs/react-ui-shell` in your project, you will need to run
|
|
13
|
+
the following command using [npm](https://www.npmjs.com/):
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install -S @carbon-labs/react-ui-shell @carbon/react
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
|
|
20
|
+
instead:
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
yarn add @carbon-labs/react-ui-shell @carbon/react
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## ⚡ Usage
|
|
27
|
+
|
|
28
|
+
To use this package you will need to import components from both `@carbon/react`
|
|
29
|
+
and `@carbon-labs/react-ui-shell`o compose the UI Shell. The following
|
|
30
|
+
components are provided by `@carbon-labs/react-ui-shell`:
|
|
31
|
+
|
|
32
|
+
- `SideNav`
|
|
33
|
+
- `SideNavItems`
|
|
34
|
+
- `SideNavMenu`
|
|
35
|
+
- `SideNavMenuItem`
|
|
36
|
+
- `HeaderPanel`
|
|
37
|
+
|
|
38
|
+
```jsx
|
|
39
|
+
import { SideNav } from '@carbon-labs/react-ui-shell/es/index';
|
|
40
|
+
import { Header } from '@carbon/react';
|
|
41
|
+
|
|
42
|
+
function MyComponent() {
|
|
43
|
+
return (
|
|
44
|
+
<Header>
|
|
45
|
+
<SideNav>...</SideNav>>
|
|
46
|
+
</Header>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### SCSS
|
|
52
|
+
|
|
53
|
+
Import the styles from `@carbon/react` and `@carbon-labs/react-ui-shell` in your
|
|
54
|
+
stylesheet:
|
|
55
|
+
|
|
56
|
+
```scss
|
|
57
|
+
@use '@carbon/react' with (
|
|
58
|
+
$font-path: '@ibm/plex'
|
|
59
|
+
);
|
|
60
|
+
@use '@carbon-labs/react-ui-shell/scss/ui-shell';
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Storybook
|
|
64
|
+
|
|
65
|
+
You can explore the available components, see different configuration options,
|
|
66
|
+
and learn how to compose them in
|
|
67
|
+
[Storybook](https://labs.carbondesignsystem.com/?path=/docs/react_components-uishell--overview).
|
|
68
|
+
|
|
69
|
+
## 🙌 Contributing
|
|
70
|
+
|
|
71
|
+
Want to contribute to `@carbon-labs`? Read through the Carbon Labs
|
|
72
|
+
[contribution section](https://pages.github.ibm.com/carbon/ibm-products/contributing/carbon-labs/#carbon-labs-in-code)
|
|
73
|
+
before diving into our developer guide:
|
|
74
|
+
|
|
75
|
+
- [Developer Guide](https://github.com/carbon-design-system/carbon-labs/blob/main/docs/developing.md)
|
|
76
|
+
|
|
77
|
+
## 📝 License
|
|
78
|
+
|
|
79
|
+
Licensed under the
|
|
80
|
+
[Apache 2.0 License](https://github.com/carbon-design-system/carbon-labs/blob/main/LICENSE).
|
|
81
|
+
|
|
3
82
|
## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
|
|
4
83
|
|
|
5
84
|
This package uses IBM Telemetry to collect de-identified and anonymized metrics
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon-labs/react-ui-shell",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public",
|
|
6
6
|
"provenance": true
|
|
@@ -33,5 +33,5 @@
|
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@ibm/telemetry-js": "^1.9.1"
|
|
35
35
|
},
|
|
36
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "7643e53c72a3bd556f5ac4c721e0de5156a19906"
|
|
37
37
|
}
|