cozy-bar 33.3.2 → 33.3.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.
- package/README.md +34 -68
- package/dist/components/BarComponent.js +3 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,22 +1,21 @@
|
|
|
1
|
-
[](https://travis-ci.org/cozy/cozy-bar)
|
|
2
1
|
[](https://www.npmjs.com/package/cozy-bar)
|
|
3
|
-
[](https://github.com/cozy/cozy-
|
|
2
|
+
[](https://github.com/cozy/cozy-libs/blob/main/packages/cozy-bar/LICENSE)
|
|
4
3
|
|
|
5
|
-
#
|
|
4
|
+
# Cozy Bar
|
|
6
5
|
|
|
7
6
|
## What's Cozy?
|
|
8
7
|
|
|
9
8
|
|
|
10
9
|
|
|
11
|
-
|
|
10
|
+
[Cozy](https://cozy.io/) is a platform that brings all your web services in the same private space. With it, your webapps and your devices can share data easily, providing you with a new experience. You can install Cozy on your own hardware where no one's tracking you.
|
|
12
11
|
|
|
13
|
-
## What's
|
|
12
|
+
## What's Cozy Bar?
|
|
14
13
|
|
|
15
|
-
The
|
|
14
|
+
The Cozy Bar is a banner at the top of your application, responsible for cross-apps navigation, user facilities, intents, etc. This is a React component.
|
|
16
15
|
|
|
17
16
|
## Getting started
|
|
18
17
|
|
|
19
|
-
The library requires your markup to contain an element with `role=application`. The DOM
|
|
18
|
+
The library requires your markup to contain an element with `role=application`. The bar DOM will be inserted before this element.
|
|
20
19
|
|
|
21
20
|
### Installation
|
|
22
21
|
|
|
@@ -32,9 +31,9 @@ yarn add cozy-bar
|
|
|
32
31
|
import 'cozy-bar/dist/stylesheet.css'
|
|
33
32
|
```
|
|
34
33
|
|
|
35
|
-
###
|
|
34
|
+
### Usage
|
|
36
35
|
|
|
37
|
-
|
|
36
|
+
Place the `BarComponent` in your React tree:
|
|
38
37
|
|
|
39
38
|
```jsx
|
|
40
39
|
import { BarComponent } from 'cozy-bar'
|
|
@@ -42,40 +41,39 @@ import { BarComponent } from 'cozy-bar'
|
|
|
42
41
|
<BarComponent />
|
|
43
42
|
```
|
|
44
43
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
- `appName`: The name of the app.
|
|
48
|
-
- `appNamePrefix`: The prefix of the app. Originally used for apps maintained by Cozy Cloud teams.
|
|
49
|
-
- `appSlug`: The slug of the app.
|
|
50
|
-
- `iconPath`: The path to the app icon. Defaults to a blank GIF
|
|
51
|
-
|
|
52
|
-
There is also other parameter to adapt the bar to your app:
|
|
53
|
-
|
|
54
|
-
- `isPublic`: To show the public version of the Bar
|
|
55
|
-
- `onLogout`: A callback to react to the logout of the user
|
|
56
|
-
- `appIcon`: To change the app icon
|
|
57
|
-
- `appTextIcon`: To change the app text next to the app icon
|
|
58
|
-
- `searchOptions`: To pass some props to the search engine
|
|
44
|
+
`BarComponent` reads default configuration from the `data-cozy` attribute on the `[role=application]` element.
|
|
59
45
|
|
|
60
46
|
## Customizing the content of the bar
|
|
61
47
|
|
|
62
|
-
From within your app, you can
|
|
48
|
+
From within your app, you can take over certain areas of the cozy-bar. This is especially useful on mobile where the area it occupies is valuable — we generally don't recommend this on larger screen resolutions.
|
|
63
49
|
|
|
64
|
-
The bar is divided in 4 areas that you can control individually
|
|
50
|
+
The bar is divided in 4 areas that you can control individually: left, center, search and right.
|
|
65
51
|
|
|
66
52
|
|
|
67
53
|
|
|
68
|
-
|
|
54
|
+
First wrap your app in a `BarProvider`, then use the slot components:
|
|
69
55
|
|
|
70
56
|
```jsx
|
|
71
|
-
import { BarLeft, BarCenter, BarRight, BarSearch } from 'cozy-bar'
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<BarLeft>
|
|
75
|
-
|
|
76
|
-
</BarLeft>
|
|
57
|
+
import { BarProvider, BarLeft, BarCenter, BarRight, BarSearch, BarComponent } from 'cozy-bar'
|
|
58
|
+
|
|
59
|
+
<BarProvider>
|
|
60
|
+
<BarLeft>
|
|
61
|
+
<div>My custom content</div>
|
|
62
|
+
</BarLeft>
|
|
63
|
+
<BarRight>
|
|
64
|
+
<button>Menu</button>
|
|
65
|
+
</BarRight>
|
|
66
|
+
<BarComponent />
|
|
67
|
+
</BarProvider>
|
|
77
68
|
```
|
|
78
69
|
|
|
70
|
+
Available slots:
|
|
71
|
+
|
|
72
|
+
- `<BarLeft>` — Replaces the default app title and home button
|
|
73
|
+
- `<BarCenter>` — Inserts content in the center of the bar
|
|
74
|
+
- `<BarSearch>` — Replaces the default search / AI assistant area
|
|
75
|
+
- `<BarRight>` — Replaces the default help link, apps menu and user menu
|
|
76
|
+
|
|
79
77
|
## Search and AI assistant
|
|
80
78
|
|
|
81
79
|
Search and AI assistant is now proposed by the cozy-bar. They are enabled by default so you need to:
|
|
@@ -96,49 +94,17 @@ These routes allow to display the search and AI assistant dialogs.
|
|
|
96
94
|
import { BarRoutes } from 'cozy-bar'
|
|
97
95
|
|
|
98
96
|
<Routes>
|
|
99
|
-
|
|
100
|
-
// ...
|
|
101
|
-
|
|
97
|
+
{/* Your app routes */}
|
|
102
98
|
{BarRoutes.map(BarRoute => BarRoute)}
|
|
103
99
|
</Routes>
|
|
104
100
|
```
|
|
105
101
|
|
|
106
|
-
|
|
102
|
+
To disable search:
|
|
107
103
|
|
|
108
104
|
```jsx
|
|
109
105
|
<BarComponent searchOptions={{ enabled: false }} />
|
|
110
106
|
```
|
|
111
107
|
|
|
112
|
-
##
|
|
113
|
-
|
|
114
|
-
It's possible to update theme on the cozy-bar with `setTheme` function using the bar context
|
|
115
|
-
|
|
116
|
-
```jsx
|
|
117
|
-
import { useBarContext } from 'cozy-bar'
|
|
118
|
-
|
|
119
|
-
const { setTheme } = useBarContext()
|
|
120
|
-
|
|
121
|
-
setTheme('default')
|
|
122
|
-
setTheme('primary')
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
## Debugging
|
|
126
|
-
|
|
127
|
-
It is possible to activate the logger from the bar by activating the flag 'bar.debug'.
|
|
128
|
-
Then you have to reload the page.
|
|
129
|
-
|
|
130
|
-
```
|
|
131
|
-
flag(bar.debug, true)
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
## Development mode
|
|
135
|
-
|
|
136
|
-
- Then, follow these steps:
|
|
137
|
-
|
|
138
|
-
`$ yarn link` // in cozy-bar
|
|
139
|
-
|
|
140
|
-
`$ rlink cozy-bar` // in the cozy-app
|
|
141
|
-
|
|
142
|
-
`$ yarn start` // in cozy-bar
|
|
108
|
+
## License
|
|
143
109
|
|
|
144
|
-
|
|
110
|
+
Cozy Bar is distributed under the MIT license.
|
|
@@ -135,12 +135,13 @@ var BarComponent = function BarComponent(_ref2) {
|
|
|
135
135
|
wrapperElement.dataset.visible = visible;
|
|
136
136
|
}
|
|
137
137
|
};
|
|
138
|
+
var cozyThemeProps = (componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.CozyTheme) || {};
|
|
138
139
|
return /*#__PURE__*/_react.default.createElement(ReactPortal, {
|
|
139
140
|
wrapperElement: wrapperElement,
|
|
140
141
|
setWrapperElement: setWrapperElement
|
|
141
|
-
}, /*#__PURE__*/_react.default.createElement(_CozyTheme.default, {
|
|
142
|
+
}, /*#__PURE__*/_react.default.createElement(_CozyTheme.default, (0, _extends2.default)({}, cozyThemeProps, {
|
|
142
143
|
ignoreCozySettings: options.isPublic
|
|
143
|
-
}, /*#__PURE__*/_react.default.createElement(_Bar.default, (0, _extends2.default)({}, options, {
|
|
144
|
+
}), /*#__PURE__*/_react.default.createElement(_Bar.default, (0, _extends2.default)({}, options, {
|
|
144
145
|
barSearch: barSearch,
|
|
145
146
|
barLeft: barLeft,
|
|
146
147
|
barCenter: barCenter,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cozy-bar",
|
|
3
|
-
"version": "33.3.
|
|
3
|
+
"version": "33.3.3",
|
|
4
4
|
"description": "cozy-bar.js library, a small lib provided by cozy-stack to inject the Cozy-bar component into each app",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"author": "Cozy Cloud <contact@cozycloud.cc> (https://cozy.io/)",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"cozy-realtime": "^4.0.5",
|
|
44
44
|
"cozy-search": "^0.24.0",
|
|
45
45
|
"cozy-ui": "^138.1.0",
|
|
46
|
-
"cozy-ui-plus": "^8.0.
|
|
46
|
+
"cozy-ui-plus": "^8.0.1",
|
|
47
47
|
"identity-obj-proxy": "3.0.0",
|
|
48
48
|
"jest": "30.3.0",
|
|
49
49
|
"react": "18.0.0",
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"react-router-dom": ">=6.14.2",
|
|
74
74
|
"twake-i18n": ">=0.3.0"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "3a31e61d3085f7e5fbbc1ee6fb4e210c13e0c2ed"
|
|
77
77
|
}
|