cozy-bar 10.0.0 → 11.0.0-alpha.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.
Files changed (204) hide show
  1. package/README.md +27 -78
  2. package/dist/components/Apps/AppItem.js +101 -0
  3. package/dist/components/Apps/AppItemPlaceholder.js +27 -0
  4. package/dist/components/Apps/AppNavButtons.js +121 -0
  5. package/dist/components/Apps/AppsContent.js +125 -0
  6. package/dist/components/Apps/ButtonCozyHome.js +58 -0
  7. package/{transpiled → dist}/components/Apps/ButtonCozyHome.spec.jsx +10 -11
  8. package/dist/components/Apps/IconCozyHome.js +64 -0
  9. package/dist/components/Apps/index.js +89 -0
  10. package/dist/components/Banner.js +53 -0
  11. package/dist/components/Bar.js +230 -0
  12. package/dist/components/Bar.spec.jsx +123 -0
  13. package/dist/components/BarCenter.js +26 -0
  14. package/dist/components/BarComponent.js +172 -0
  15. package/dist/components/BarLeft.js +26 -0
  16. package/dist/components/BarProvider.js +86 -0
  17. package/dist/components/BarRight.js +26 -0
  18. package/dist/components/BarSearch.js +26 -0
  19. package/{transpiled → dist}/components/Drawer.js +85 -65
  20. package/{src → dist}/components/Drawer.spec.jsx +4 -18
  21. package/dist/components/Settings/SettingsContent.js +169 -0
  22. package/dist/components/Settings/StorageData.js +38 -0
  23. package/dist/components/Settings/helper.js +22 -0
  24. package/dist/components/Settings/index.js +192 -0
  25. package/dist/components/__snapshots__/Bar.spec.jsx.snap +49 -0
  26. package/dist/components/useI18n.js +25 -0
  27. package/{transpiled → dist}/dom.js +19 -1
  28. package/dist/index.js +64 -0
  29. package/dist/index.spec.jsx +53 -0
  30. package/{transpiled → dist}/lib/exceptions.js +53 -35
  31. package/{transpiled → dist}/lib/icon.js +16 -5
  32. package/dist/lib/logger.js +27 -0
  33. package/{transpiled → dist}/lib/realtime.js +20 -7
  34. package/{transpiled → dist}/lib/reducers/apps.js +78 -33
  35. package/{transpiled → dist}/lib/reducers/context.js +35 -15
  36. package/dist/lib/reducers/index.js +79 -0
  37. package/{transpiled → dist}/lib/reducers/settings.js +61 -29
  38. package/{transpiled → dist}/lib/reducers/theme.js +28 -7
  39. package/{transpiled → dist}/lib/stack-client.js +45 -27
  40. package/{transpiled → dist}/lib/stack.js +17 -5
  41. package/dist/lib/store/index.js +63 -0
  42. package/dist/proptypes/index.js +23 -0
  43. package/dist/queries/index.js +62 -0
  44. package/{src → dist}/styles/index.styl +1 -7
  45. package/dist/stylesheet.css +1470 -0
  46. package/package.json +12 -73
  47. package/CHANGELOG.md +0 -493
  48. package/dist/cozy-bar.min.js +0 -57
  49. package/dist/cozy-bar.min.js.map +0 -1
  50. package/src/components/Apps/AppItem.jsx +0 -123
  51. package/src/components/Apps/AppItemPlaceholder.jsx +0 -12
  52. package/src/components/Apps/AppNavButtons.jsx +0 -113
  53. package/src/components/Apps/AppsContent.jsx +0 -105
  54. package/src/components/Apps/ButtonCozyHome.jsx +0 -54
  55. package/src/components/Apps/ButtonCozyHome.spec.jsx +0 -60
  56. package/src/components/Apps/IconCozyHome.jsx +0 -48
  57. package/src/components/Apps/index.jsx +0 -90
  58. package/src/components/Banner.jsx +0 -41
  59. package/src/components/Bar.jsx +0 -235
  60. package/src/components/Bar.spec.jsx +0 -108
  61. package/src/components/Drawer.jsx +0 -228
  62. package/src/components/Settings/SettingsContent.jsx +0 -190
  63. package/src/components/Settings/StorageData.jsx +0 -29
  64. package/src/components/Settings/helper.js +0 -8
  65. package/src/components/Settings/index.jsx +0 -211
  66. package/src/components/__snapshots__/Bar.spec.jsx.snap +0 -115
  67. package/src/dom.js +0 -80
  68. package/src/index.jsx +0 -247
  69. package/src/index.spec.jsx +0 -34
  70. package/src/lib/api/helpers.js +0 -13
  71. package/src/lib/api/index.jsx +0 -145
  72. package/src/lib/exceptions.js +0 -89
  73. package/src/lib/expiringMemoize.js +0 -13
  74. package/src/lib/icon.js +0 -77
  75. package/src/lib/intents.js +0 -16
  76. package/src/lib/logger.js +0 -14
  77. package/src/lib/middlewares/appsI18n.js +0 -57
  78. package/src/lib/realtime.js +0 -43
  79. package/src/lib/reducers/apps.js +0 -160
  80. package/src/lib/reducers/content.js +0 -50
  81. package/src/lib/reducers/context.js +0 -62
  82. package/src/lib/reducers/index.js +0 -71
  83. package/src/lib/reducers/locale.js +0 -22
  84. package/src/lib/reducers/settings.js +0 -111
  85. package/src/lib/reducers/theme.js +0 -48
  86. package/src/lib/reducers/unserializable.js +0 -26
  87. package/src/lib/stack-client.js +0 -401
  88. package/src/lib/stack.js +0 -79
  89. package/src/lib/store/index.js +0 -44
  90. package/src/proptypes/index.js +0 -10
  91. package/src/queries/index.js +0 -16
  92. package/transpiled/assets/icons/16/icon-storage-16.svg +0 -3
  93. package/transpiled/assets/icons/24/icon-arrow-left.svg +0 -3
  94. package/transpiled/assets/icons/apps/icon-collect.svg +0 -25
  95. package/transpiled/assets/icons/apps/icon-drive.svg +0 -17
  96. package/transpiled/assets/icons/apps/icon-market-soon.svg +0 -25
  97. package/transpiled/assets/icons/apps/icon-photos.svg +0 -19
  98. package/transpiled/assets/icons/apps/icon-soon.svg +0 -21
  99. package/transpiled/assets/icons/apps/icon-store.svg +0 -19
  100. package/transpiled/assets/icons/comingsoon/icon-bank.svg +0 -12
  101. package/transpiled/assets/icons/comingsoon/icon-sante.svg +0 -12
  102. package/transpiled/assets/icons/comingsoon/icon-store.svg +0 -6
  103. package/transpiled/assets/icons/icon-cozy.svg +0 -3
  104. package/transpiled/assets/icons/icon-shield.svg +0 -3
  105. package/transpiled/assets/icons/spinner.svg +0 -4
  106. package/transpiled/assets/sprites/icon-apps.svg +0 -1
  107. package/transpiled/assets/sprites/icon-cozy-home.svg +0 -16
  108. package/transpiled/components/Apps/AppItem.js +0 -138
  109. package/transpiled/components/Apps/AppItemPlaceholder.js +0 -14
  110. package/transpiled/components/Apps/AppNavButtons.js +0 -128
  111. package/transpiled/components/Apps/AppsContent.js +0 -130
  112. package/transpiled/components/Apps/ButtonCozyHome.js +0 -41
  113. package/transpiled/components/Apps/IconCozyHome.js +0 -78
  114. package/transpiled/components/Apps/index.js +0 -115
  115. package/transpiled/components/Banner.js +0 -76
  116. package/transpiled/components/Bar.js +0 -259
  117. package/transpiled/components/Bar.spec.jsx +0 -108
  118. package/transpiled/components/Drawer.spec.jsx +0 -94
  119. package/transpiled/components/Settings/SettingsContent.js +0 -141
  120. package/transpiled/components/Settings/StorageData.js +0 -24
  121. package/transpiled/components/Settings/helper.js +0 -9
  122. package/transpiled/components/Settings/index.js +0 -214
  123. package/transpiled/components/__snapshots__/Bar.spec.jsx.snap +0 -115
  124. package/transpiled/config/persistWhitelist.json +0 -4
  125. package/transpiled/cozy-bar.css +0 -5867
  126. package/transpiled/index.js +0 -250
  127. package/transpiled/index.spec.jsx +0 -34
  128. package/transpiled/lib/api/helpers.js +0 -12
  129. package/transpiled/lib/api/index.js +0 -175
  130. package/transpiled/lib/expiringMemoize.js +0 -17
  131. package/transpiled/lib/intents.js +0 -17
  132. package/transpiled/lib/logger.js +0 -14
  133. package/transpiled/lib/middlewares/appsI18n.js +0 -64
  134. package/transpiled/lib/reducers/apps.spec.js +0 -48
  135. package/transpiled/lib/reducers/content.js +0 -68
  136. package/transpiled/lib/reducers/index.js +0 -57
  137. package/transpiled/lib/reducers/locale.js +0 -27
  138. package/transpiled/lib/reducers/unserializable.js +0 -31
  139. package/transpiled/lib/store/index.js +0 -42
  140. package/transpiled/locales/de.json +0 -45
  141. package/transpiled/locales/en.json +0 -47
  142. package/transpiled/locales/es.json +0 -45
  143. package/transpiled/locales/fr.json +0 -47
  144. package/transpiled/locales/it.json +0 -45
  145. package/transpiled/locales/ja.json +0 -45
  146. package/transpiled/locales/nl_NL.json +0 -45
  147. package/transpiled/locales/pl.json +0 -45
  148. package/transpiled/locales/ru.json +0 -45
  149. package/transpiled/locales/sq.json +0 -45
  150. package/transpiled/locales/zh_CN.json +0 -45
  151. package/transpiled/proptypes/index.js +0 -11
  152. package/transpiled/queries/index.js +0 -19
  153. package/transpiled/styles/apps.css +0 -265
  154. package/transpiled/styles/banner.css +0 -64
  155. package/transpiled/styles/bar.css +0 -106
  156. package/transpiled/styles/base.css +0 -21
  157. package/transpiled/styles/drawer.css +0 -126
  158. package/transpiled/styles/index.styl +0 -30
  159. package/transpiled/styles/indicators.css +0 -42
  160. package/transpiled/styles/nav.css +0 -81
  161. package/transpiled/styles/navigation_item.css +0 -34
  162. package/transpiled/styles/settings.css +0 -42
  163. package/transpiled/styles/storage.css +0 -22
  164. package/transpiled/styles/theme.styl +0 -25
  165. /package/{src → dist}/assets/icons/16/icon-storage-16.svg +0 -0
  166. /package/{src → dist}/assets/icons/24/icon-arrow-left.svg +0 -0
  167. /package/{src → dist}/assets/icons/apps/icon-collect.svg +0 -0
  168. /package/{src → dist}/assets/icons/apps/icon-drive.svg +0 -0
  169. /package/{src → dist}/assets/icons/apps/icon-market-soon.svg +0 -0
  170. /package/{src → dist}/assets/icons/apps/icon-photos.svg +0 -0
  171. /package/{src → dist}/assets/icons/apps/icon-soon.svg +0 -0
  172. /package/{src → dist}/assets/icons/apps/icon-store.svg +0 -0
  173. /package/{src → dist}/assets/icons/comingsoon/icon-bank.svg +0 -0
  174. /package/{src → dist}/assets/icons/comingsoon/icon-sante.svg +0 -0
  175. /package/{src → dist}/assets/icons/comingsoon/icon-store.svg +0 -0
  176. /package/{src → dist}/assets/icons/icon-cozy.svg +0 -0
  177. /package/{src → dist}/assets/icons/icon-shield.svg +0 -0
  178. /package/{src → dist}/assets/icons/spinner.svg +0 -0
  179. /package/{src → dist}/assets/sprites/icon-apps.svg +0 -0
  180. /package/{src → dist}/assets/sprites/icon-cozy-home.svg +0 -0
  181. /package/{src → dist}/config/persistWhitelist.json +0 -0
  182. /package/{src → dist}/lib/reducers/apps.spec.js +0 -0
  183. /package/{src → dist}/locales/de.json +0 -0
  184. /package/{src → dist}/locales/en.json +0 -0
  185. /package/{src → dist}/locales/es.json +0 -0
  186. /package/{src → dist}/locales/fr.json +0 -0
  187. /package/{src → dist}/locales/it.json +0 -0
  188. /package/{src → dist}/locales/ja.json +0 -0
  189. /package/{src → dist}/locales/nl_NL.json +0 -0
  190. /package/{src → dist}/locales/pl.json +0 -0
  191. /package/{src → dist}/locales/ru.json +0 -0
  192. /package/{src → dist}/locales/sq.json +0 -0
  193. /package/{src → dist}/locales/zh_CN.json +0 -0
  194. /package/{src → dist}/styles/apps.css +0 -0
  195. /package/{src → dist}/styles/banner.css +0 -0
  196. /package/{src → dist}/styles/bar.css +0 -0
  197. /package/{src → dist}/styles/base.css +0 -0
  198. /package/{src → dist}/styles/drawer.css +0 -0
  199. /package/{src → dist}/styles/indicators.css +0 -0
  200. /package/{src → dist}/styles/nav.css +0 -0
  201. /package/{src → dist}/styles/navigation_item.css +0 -0
  202. /package/{src → dist}/styles/settings.css +0 -0
  203. /package/{src → dist}/styles/storage.css +0 -0
  204. /package/{src → dist}/styles/theme.styl +0 -0
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- [![Travis build status shield](https://img.shields.io/travis/cozy/cozy-bar/master.svg)](https://travis-ci.org/cozy/cozy-bar)
1
+ [![Travis build status shield](https://img.shields.io/travis/com/cozy/cozy-bar)](https://travis-ci.org/cozy/cozy-bar)
2
2
  [![NPM release version shield](https://img.shields.io/npm/v/cozy-bar.svg)](https://www.npmjs.com/package/cozy-bar)
3
3
  [![NPM Licence shield](https://img.shields.io/npm/l/cozy-bar.svg)](https://github.com/cozy/cozy-bar/blob/master/LICENSE)
4
4
 
@@ -12,27 +12,28 @@
12
12
  [Cozy] 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.
13
13
 
14
14
 
15
- ## What's cozy-bar?
15
+ ## What's CozyBar ?
16
16
 
17
- `cozy-bar` is a javascript library made by Cozy. It enables the _CozyBar_ component in your application. This component is a banner on the top of your application, responsible of cross-apps navigation, user facilities, intents, etc.
17
+ The CozyBar is a banner on the top of your application, responsible of cross-apps navigation, user facilities, intents, etc. This is a React component.
18
18
 
19
19
 
20
- ## Use
20
+ ## Getting started
21
21
 
22
- `cozy-bar.js` is an asset directly served by the [cozy-stack](https://github.com/cozy/cozy-stack). To use it, simply add `<script src="/js/cozy-bar.js" defer></script>` in the `<head>` section of the `index.html` of your application. It exposes an API behind the `window.cozy.bar` namespace, that let you interact with the _CozyBar_ itself.
22
+ The library requires your markup to contain an element with `role=application`. The DOM of the banner will be added before this element.
23
23
 
24
- The library requires your markup to contain an element with `role=application` and attributes `data-cozy-domain` and `data-cozy-token`. The DOM of the banner will be added before this element.
24
+ ### Installation
25
+ ```sh
26
+ yarn add cozy-bar
27
+ ```
28
+
29
+ ### How to use
25
30
 
31
+ You need to include the `BarComponent` into your react tree :
26
32
 
27
- Once you have the library included in your application, starts by intialize it in your app bootstrap:
33
+ ```jsx
34
+ import { BarComponent } from 'cozy-bar'
28
35
 
29
- ```js
30
- window.cozy.bar.init({
31
- appName: MY_APP_NAME,
32
- appNamePrefix: MY_APP_NAME_PREFIX
33
- iconPath: PATH_TO_SVG_ICON,
34
- lang: LOCALE
35
- })
36
+ <BarComponent appName={MY_APP_NAME} appNamePrefix={MY_APP_NAME_PREFIX} iconPath={PATH_TO_SVG_ICON} lang={LOCALE} />
36
37
  ```
37
38
 
38
39
  `appName` param in hash is mandatory when `appNamePrefix`, `lang` and `iconPath` are optionals. If not passed, their values are detected into the DOM:
@@ -43,80 +44,42 @@ window.cozy.bar.init({
43
44
 
44
45
  To make the icon of Cozy(`icon-cozy-home.svg`) compatible with an inverted theme, please set the parameter `isInvertedTheme` to `true`
45
46
 
46
- ## Help link
47
-
48
- Help link is defined in your Cozy's [configuration file](https://github.com/cozy/cozy-stack/blob/master/docs/config.md#main-configuration-file), in the `context` section. See the `cozy.example.yaml` file [provided by the stack](https://github.com/cozy/cozy-stack/blob/master/cozy.example.yaml#L80).
49
-
50
- ## Coming Soon application
51
-
52
- Coming Soon applications (or apps) are defined in your Cozy's [configuration file](https://github.com/cozy/cozy-stack/blob/master/docs/config.md#main-configuration-file). See the `cozy.example.yaml` file [provided by the stack](https://github.com/cozy/cozy-stack/blob/master/cozy.example.yaml#L80).
53
-
54
47
  ## Customizing the content of the bar
55
48
 
56
49
  From within your app, you can decide to take over certain areas of the cozy-bar. This might especially be useful on mobile where the area it occupies is prime real estate — we generally don't recommend to use this option on larger screen resolutions.
57
50
 
58
- The bar is divided in 3 areas that you can control individually : left, center and right:
51
+ The bar is divided in 4 areas that you can control individually : left, center, search and right:
59
52
 
60
53
  ![cozy-bar-triplet](https://user-images.githubusercontent.com/2261445/33609298-de4d379e-d9c7-11e7-839d-f5ab6155c902.png)
61
54
 
62
- To do this, you need to call one of the 3 exposed functions like this:
63
-
64
- ```jsx
65
- const setBarLeft = cozy.bar.setBarLeft
66
- setBarLeft('<div>Hello!</div>')
67
- // there's also cozy.bar.setBarCenter and cozy.bar.setBarRight
68
- ```
69
-
70
- If you're using React, you can use the component form instead:
55
+ To do this, you need to wrap your `BarComponent` into an `BarProvider` after your can use component to modify component inside :
71
56
 
72
57
  ```jsx
73
- const { BarLeft, BarCenter, BarRight } = cozy.bar
58
+ import { BarLeft, BarCenter, BarRight, BarSearch } from 'cozy-bar'
74
59
 
75
- // then, somewhere in a render function
60
+ // then, somewhere in a render function below the BarProvider
76
61
  <BarLeft>
77
62
  <div>Hello!</div>
78
63
  </BarLeft>
79
64
  ```
80
65
 
81
- ### Using a context in the bar
82
-
83
- If you're using Redux or React Context and include a connected component or a Provider in the bar, it might not work as expected since inside `<BarLeft>` and friends, the redux store and context are different.
84
-
85
- ```jsx
86
- const MyConnectedComponent = connect(mapStateToProps, mapDispatchToProps, MyComponent)
87
-
88
- // … in a render function
89
- <BarLeft>
90
- <MyConnectedComponent /> // … you won't get the expected props from redux
91
- </BarLeft>
92
- ```
93
-
94
- Instead, you can do something like this (for Context you can pass the values as prop):
95
-
96
- ```jsx
97
- const MyWrappedComponent = (props) => (
98
- <BarLeft>
99
- <MyComponent {...props} />
100
- </BarLeft>
101
- )
102
-
103
- const MyConnectedComponent = connect(mapStateToProps, mapDispatchToProps, MyWrappedComponent)
104
-
105
- // …in a render function
106
- <MyConnectedComponent />
107
- ```
108
-
109
66
  ## Change theme bar
110
67
 
111
- It's possible to update theme on the cozy-bar with `setTheme` function.
68
+ It's possible to update theme on the cozy-bar with `setTheme` function using the bar context
112
69
 
113
70
  ```jsx
114
- const { setTheme } = cozy.bar
71
+ import { useBarContext } from 'cozy-bar'
72
+
73
+ const { setTheme } = useBarContext()
115
74
 
116
75
  setTheme('default')
117
76
  setTheme('primary')
118
77
  ```
119
78
 
79
+ ## Migrate from previous version
80
+
81
+ If you're migrating from v8 (or v9, v10, which is the same as v8), check out [the migration guide](/docs/upgrading/v8.md). If you're migrating from v7, check out [the migration guide for v7](/docs/upgrading/v7.md). If you need to find the code for v7, [it is on the v7-stable branch](https://github.com/cozy/cozy-bar/tree/v7-stable).
82
+
120
83
  ## Debugging
121
84
 
122
85
  It is possible to activate the logger from the bar by activating the flag 'bar.debug'.
@@ -129,11 +92,7 @@ flag(bar.debug, true)
129
92
  Development mode
130
93
  ----------
131
94
 
132
- In order to add new features to the cozy-bar v7 while working on another cozy-app:
133
95
 
134
- * Please ensure your app has the latest v7-stable `cozy-bar` version
135
-
136
- * Please ensure your app has at least the 6.3.4 `cozy-scripts` version
137
96
 
138
97
  * Then, follow these steps:
139
98
 
@@ -145,15 +104,6 @@ In order to add new features to the cozy-bar v7 while working on another cozy-ap
145
104
 
146
105
  `$ yarn start` // in the cozy-app
147
106
 
148
- ### How does it work?
149
-
150
- When Drive is building, the cozy-bar assets are defined dynamically if __STACK_ASSETS__ = true
151
- [inside the browser file](https://github.com/cozy/cozy-drive/blob/master/src/drive/targets/browser/index.ejs#L27-L32)
152
-
153
- In [dev mode on webpack, __STACK_ASSETS__ = false](https://github.com/cozy/create-cozy-app/blob/532dc9848526d48b749a8fd4fecdce1c9a6880c2/packages/cozy-scripts/config/webpack.environment.dev.js#L27)
154
-
155
- [In that case, the cozy-bar is injected](https://github.com/cozy/create-cozy-app/blob/532dc9848526d48b749a8fd4fecdce1c9a6880c2/packages/cozy-scripts/config/webpack.environment.dev.js#L35-L57)
156
-
157
107
  Contribute
158
108
  ----------
159
109
 
@@ -185,7 +135,6 @@ You can reach the Cozy Community by:
185
135
  cozy-bar is developed by Cozy Cloud and distributed under the [MIT].
186
136
 
187
137
 
188
-
189
138
  [cozy]: https://cozy.io "Cozy Cloud"
190
139
  [setup]: https://dev.cozy.io/#set-up-the-development-environment "Cozy dev docs: Set up the Development Environment"
191
140
  [doctypes]: https://dev.cozy.io/#main-document-types
package/dist/components/Apps/AppItem.js ADDED
@@ -0,0 +1,101 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
+
5
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.default = exports.AppItem = void 0;
11
+
12
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
+
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+
16
+ var _react = _interopRequireWildcard(require("react"));
17
+
18
+ var _get = _interopRequireDefault(require("lodash/get"));
19
+
20
+ var _propTypes = _interopRequireDefault(require("prop-types"));
21
+
22
+ var _cozyClient = require("cozy-client");
23
+
24
+ var _AppIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/AppIcon"));
25
+
26
+ var _AppLinker = _interopRequireDefault(require("cozy-ui/transpiled/react/AppLinker"));
27
+
28
+ var _IconCozyHome = _interopRequireDefault(require("./IconCozyHome"));
29
+
30
+ var _proptypes = require("../../proptypes");
31
+
32
+ var _stack = _interopRequireDefault(require("../../lib/stack"));
33
+
34
+ var getAppDisplayName = (0, _get.default)(_cozyClient.models, 'applications.getAppDisplayName', function (app) {
35
+ return app.namePrefix && app.namePrefix.toLowerCase() !== 'cozy' ? "".concat(app.namePrefix, " ").concat(app.name) : app.name;
36
+ });
37
+
38
+ var AppItem = function AppItem(_ref) {
39
+ var onAppSwitch = _ref.onAppSwitch,
40
+ useHomeIcon = _ref.useHomeIcon,
41
+ app = _ref.app,
42
+ isInvertedTheme = _ref.isInvertedTheme;
43
+
44
+ var _useState = (0, _react.useState)(),
45
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
46
+ switchTimeout = _useState2[0],
47
+ setSwitchTimeout = _useState2[1];
48
+
49
+ (0, _react.useEffect)(function () {
50
+ return function () {
51
+ if (switchTimeout) clearTimeout(switchTimeout);
52
+ };
53
+ }, [switchTimeout]);
54
+
55
+ var switchApp = function switchApp() {
56
+ if (typeof onAppSwitch === 'function') {
57
+ setSwitchTimeout(setTimeout(function () {
58
+ onAppSwitch();
59
+ }, 1000));
60
+ }
61
+ };
62
+
63
+ var dataIcon = app.slug ? "icon-".concat(app.slug) : '';
64
+ var appName = getAppDisplayName(app);
65
+ return /*#__PURE__*/_react.default.createElement(_AppLinker.default, {
66
+ onAppSwitch: switchApp,
67
+ href: app.href || '',
68
+ app: app
69
+ }, function (_ref2) {
70
+ var onClick = _ref2.onClick,
71
+ href = _ref2.href;
72
+ return /*#__PURE__*/_react.default.createElement("li", {
73
+ className: "coz-nav-apps-item".concat(app.isCurrentApp ? ' --current' : '')
74
+ }, /*#__PURE__*/_react.default.createElement("a", {
75
+ role: "menuitem",
76
+ href: href,
77
+ "data-icon": dataIcon,
78
+ title: appName,
79
+ onClick: onClick
80
+ }, useHomeIcon ? /*#__PURE__*/_react.default.createElement(_IconCozyHome.default, {
81
+ className: "coz-nav-apps-item-icon",
82
+ isInvertedTheme: isInvertedTheme
83
+ }) : /*#__PURE__*/_react.default.createElement(_AppIcon.default, (0, _extends2.default)({
84
+ app: app,
85
+ className: "coz-nav-apps-item-icon",
86
+ key: app.slug
87
+ }, _stack.default.get.iconProps())), /*#__PURE__*/_react.default.createElement("p", {
88
+ className: "coz-label"
89
+ }, appName)));
90
+ });
91
+ };
92
+
93
+ exports.AppItem = AppItem;
94
+ AppItem.propTypes = {
95
+ app: _proptypes.appShape.isRequired,
96
+ useHomeIcon: _propTypes.default.bool,
97
+ isInvertedTheme: _propTypes.default.bool,
98
+ onAppSwitch: _propTypes.default.func
99
+ };
100
+ var _default = AppItem;
101
+ exports.default = _default;
package/dist/components/Apps/AppItemPlaceholder.js ADDED
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = exports.AppItemPlaceholder = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var AppItemPlaceholder = function AppItemPlaceholder() {
13
+ return /*#__PURE__*/_react.default.createElement("li", {
14
+ className: "coz-nav-apps-item"
15
+ }, /*#__PURE__*/_react.default.createElement("span", {
16
+ role: "menuitem",
17
+ disabled: true
18
+ }, /*#__PURE__*/_react.default.createElement("div", {
19
+ className: "coz-nav-apps-item-icon coz-loading-placeholder"
20
+ }), /*#__PURE__*/_react.default.createElement("p", {
21
+ className: "coz-label coz-loading-placeholder"
22
+ })));
23
+ };
24
+
25
+ exports.AppItemPlaceholder = AppItemPlaceholder;
26
+ var _default = AppItemPlaceholder;
27
+ exports.default = _default;
package/dist/components/Apps/AppNavButtons.js ADDED
@@ -0,0 +1,121 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var _reactRedux = require("react-redux");
13
+
14
+ var _propTypes = _interopRequireDefault(require("prop-types"));
15
+
16
+ var _Bottom = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Bottom"));
17
+
18
+ var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
19
+
20
+ var _Top = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Top"));
21
+
22
+ var _ButtonCozyHome = require("./ButtonCozyHome");
23
+
24
+ var _reducers = require("../../lib/reducers");
25
+
26
+ var _useI18n2 = _interopRequireDefault(require("../useI18n"));
27
+
28
+ var AppNavButton = function AppNavButton(_ref) {
29
+ var homeApp = _ref.homeApp,
30
+ handleClick = _ref.handleClick,
31
+ appName = _ref.appName,
32
+ appNamePrefix = _ref.appNamePrefix,
33
+ appSlug = _ref.appSlug,
34
+ iconPath = _ref.iconPath,
35
+ isInvertedTheme = _ref.isInvertedTheme,
36
+ isFetchingApps = _ref.isFetchingApps,
37
+ isPublic = _ref.isPublic,
38
+ opened = _ref.opened;
39
+
40
+ var _useI18n = (0, _useI18n2.default)(),
41
+ t = _useI18n.t;
42
+
43
+ var isHomeApp = homeApp && homeApp.isCurrentApp;
44
+
45
+ if (!isPublic && isFetchingApps) {
46
+ return /*#__PURE__*/_react.default.createElement("div", {
47
+ className: "coz-nav-apps-btns --loading"
48
+ }, /*#__PURE__*/_react.default.createElement("div", {
49
+ className: "coz-nav-apps-btns-home coz-loading-placeholder"
50
+ }), /*#__PURE__*/_react.default.createElement("div", {
51
+ className: "coz-nav-apps-btns-main coz-loading-placeholder"
52
+ }));
53
+ }
54
+
55
+ var displayName = !isHomeApp && appNamePrefix ? [t("".concat(appSlug, ".name_prefix"), {
56
+ _: appNamePrefix
57
+ }), t("".concat(appSlug, ".name"), {
58
+ _: appName
59
+ })].join(' ') : t("".concat(appSlug, ".name"), {
60
+ _: appName
61
+ });
62
+ var homeHref = !isPublic && homeApp && homeApp.href;
63
+ return /*#__PURE__*/_react.default.createElement("div", {
64
+ className: "coz-nav-apps-btns".concat(isHomeApp ? ' --currentHome' : '')
65
+ }, /*#__PURE__*/_react.default.createElement(_ButtonCozyHome.ButtonCozyHome, {
66
+ homeHref: homeHref,
67
+ isInvertedTheme: isInvertedTheme
68
+ }), !isHomeApp && /*#__PURE__*/_react.default.createElement("span", {
69
+ className: "coz-nav-apps-btns-sep"
70
+ }), /*#__PURE__*/_react.default.createElement("button", {
71
+ type: "button",
72
+ onClick: isPublic ? null : handleClick,
73
+ className: "coz-nav-apps-btns-main",
74
+ "aria-controls": "coz-nav-pop--apps",
75
+ "data-tutorial": "apps",
76
+ disabled: isPublic
77
+ }, !isHomeApp && /*#__PURE__*/_react.default.createElement("img", {
78
+ className: "coz-bar-hide-sm",
79
+ src: iconPath,
80
+ width: "28",
81
+ alt: ""
82
+ }), /*#__PURE__*/_react.default.createElement("span", {
83
+ className: "coz-nav-app-name"
84
+ }, displayName), !isPublic && /*#__PURE__*/_react.default.createElement(_Icon.default, {
85
+ icon: opened ? _Top.default : _Bottom.default,
86
+ color: "#95999d",
87
+ size: "12"
88
+ })));
89
+ };
90
+
91
+ AppNavButton.propTypes = {
92
+ homeApp: _propTypes.default.shape({
93
+ isCurrentApp: _propTypes.default.bool,
94
+ slug: _propTypes.default.string,
95
+ href: _propTypes.default.string
96
+ }),
97
+ handleClick: _propTypes.default.func,
98
+ appName: _propTypes.default.string,
99
+ appNamePrefix: _propTypes.default.string,
100
+ appSlug: _propTypes.default.string,
101
+ iconPath: _propTypes.default.string,
102
+ isInvertedTheme: _propTypes.default.bool,
103
+ isFetchingApps: _propTypes.default.bool,
104
+ isPublic: _propTypes.default.bool,
105
+ opened: _propTypes.default.bool
106
+ };
107
+
108
+ var mapStateToProps = function mapStateToProps(state) {
109
+ return {
110
+ homeApp: (0, _reducers.getHomeApp)(state),
111
+ isFetchingApps: (0, _reducers.isFetchingApps)(state)
112
+ };
113
+ };
114
+
115
+ var mapDispatchToProps = function mapDispatchToProps() {
116
+ return {};
117
+ };
118
+
119
+ var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(AppNavButton);
120
+
121
+ exports.default = _default;
package/dist/components/Apps/AppsContent.js ADDED
@@ -0,0 +1,125 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = exports.AppsContent = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var _reactRedux = require("react-redux");
13
+
14
+ var _propTypes = _interopRequireDefault(require("prop-types"));
15
+
16
+ var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
17
+
18
+ var _Cloud = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Cloud"));
19
+
20
+ var _Breakpoints = _interopRequireDefault(require("cozy-ui/transpiled/react/providers/Breakpoints"));
21
+
22
+ var _reducers = require("../../lib/reducers");
23
+
24
+ var _AppItem = _interopRequireDefault(require("./AppItem"));
25
+
26
+ var _AppItemPlaceholder = _interopRequireDefault(require("./AppItemPlaceholder"));
27
+
28
+ var _useI18n2 = _interopRequireDefault(require("../useI18n"));
29
+
30
+ var sorter = function sorter(fn) {
31
+ return function (itemA, itemB) {
32
+ return fn(itemA) > fn(itemB);
33
+ };
34
+ };
35
+
36
+ var AppsContent = function AppsContent(_ref) {
37
+ var apps = _ref.apps,
38
+ homeApp = _ref.homeApp,
39
+ isFetchingApps = _ref.isFetchingApps,
40
+ onAppSwitch = _ref.onAppSwitch,
41
+ isInvertedTheme = _ref.isInvertedTheme;
42
+
43
+ var _useI18n = (0, _useI18n2.default)(),
44
+ t = _useI18n.t;
45
+
46
+ var _useBreakpoints = (0, _Breakpoints.default)(),
47
+ isMobile = _useBreakpoints.isMobile;
48
+
49
+ var translateAppWithLocales = translateApp(t);
50
+ var isHomeApp = homeApp && homeApp.isCurrentApp;
51
+ var homeSlug = homeApp && homeApp.slug;
52
+
53
+ if (!isFetchingApps && (!apps || !apps.length)) {
54
+ return /*#__PURE__*/_react.default.createElement("p", {
55
+ className: "coz-nav--error coz-nav-group"
56
+ }, t('no_apps'));
57
+ }
58
+
59
+ return /*#__PURE__*/_react.default.createElement("div", {
60
+ className: "coz-nav-pop-content"
61
+ }, /*#__PURE__*/_react.default.createElement("ul", {
62
+ className: "coz-nav-group"
63
+ }, isMobile && homeApp && /*#__PURE__*/_react.default.createElement(_AppItem.default, {
64
+ app: homeApp,
65
+ useHomeIcon: true,
66
+ onAppSwitch: onAppSwitch,
67
+ isInvertedTheme: isInvertedTheme
68
+ }), isFetchingApps ? new Array(3).fill({}).map(function (nothing, index) {
69
+ return /*#__PURE__*/_react.default.createElement(_AppItemPlaceholder.default, {
70
+ key: index
71
+ });
72
+ }) : apps.filter(function (app) {
73
+ return app.slug !== homeSlug;
74
+ }).sort(sorter(translateAppWithLocales)).map(function (app, index) {
75
+ return /*#__PURE__*/_react.default.createElement(_AppItem.default, {
76
+ app: app,
77
+ key: index,
78
+ onAppSwitch: onAppSwitch,
79
+ isInvertedTheme: isInvertedTheme
80
+ });
81
+ })), homeApp && !isMobile && !isHomeApp && /*#__PURE__*/_react.default.createElement("a", {
82
+ role: "menuitem",
83
+ href: homeApp.href,
84
+ className: "coz-apps-home-btn"
85
+ }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
86
+ icon: _Cloud.default
87
+ }), t('menu.home')));
88
+ };
89
+
90
+ exports.AppsContent = AppsContent;
91
+ AppsContent.propTypes = {
92
+ homeApp: _propTypes.default.shape({
93
+ isCurrentApp: _propTypes.default.bool,
94
+ slug: _propTypes.default.string,
95
+ href: _propTypes.default.string
96
+ }),
97
+ apps: _propTypes.default.array,
98
+ isFetchingApps: _propTypes.default.bool.isRequired,
99
+ onAppSwitch: _propTypes.default.func,
100
+ isInvertedTheme: _propTypes.default.bool
101
+ };
102
+
103
+ var translateApp = function translateApp(t) {
104
+ return function (app) {
105
+ var namePrefix = app.namePrefix ? t("".concat(app.slug, ".namePrefix"), {
106
+ _: app.namePrefix
107
+ }) : null;
108
+ var name = t("".concat(app.slug, ".name"), {
109
+ _: app.name
110
+ });
111
+ return namePrefix ? "".concat(namePrefix, " ").concat(name) : "".concat(name);
112
+ };
113
+ };
114
+
115
+ var mapStateToProps = function mapStateToProps(state) {
116
+ return {
117
+ apps: (0, _reducers.getApps)(state),
118
+ homeApp: (0, _reducers.getHomeApp)(state),
119
+ isFetchingApps: (0, _reducers.isFetchingApps)(state)
120
+ };
121
+ };
122
+
123
+ var _default = (0, _reactRedux.connect)(mapStateToProps)(AppsContent);
124
+
125
+ exports.default = _default;
package/dist/components/Apps/ButtonCozyHome.js ADDED
@@ -0,0 +1,58 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.ButtonCozyHome = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var _propTypes = _interopRequireDefault(require("prop-types"));
13
+
14
+ var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
15
+
16
+ var _cozyDeviceHelper = require("cozy-device-helper");
17
+
18
+ var _cozyIntent = require("cozy-intent");
19
+
20
+ var _IconCozyHome = _interopRequireDefault(require("./IconCozyHome"));
21
+
22
+ var ButtonCozyHome = function ButtonCozyHome(_ref) {
23
+ var homeHref = _ref.homeHref,
24
+ isInvertedTheme = _ref.isInvertedTheme;
25
+ var webviewIntent = (0, _cozyIntent.useWebviewIntent)();
26
+ if ((0, _cozyDeviceHelper.isFlagshipApp)() || (0, _cozyFlags.default)('flagship.debug')) return /*#__PURE__*/_react.default.createElement("a", {
27
+ onClick: function onClick() {
28
+ webviewIntent.call('backToHome');
29
+ },
30
+ className: "coz-nav-apps-btns-home --is-flagship"
31
+ }, /*#__PURE__*/_react.default.createElement(_IconCozyHome.default, {
32
+ className: "coz-nav-apps-btns-home-svg",
33
+ isInvertedTheme: isInvertedTheme
34
+ }));
35
+
36
+ if (homeHref) {
37
+ return /*#__PURE__*/_react.default.createElement("a", {
38
+ href: homeHref,
39
+ className: "coz-nav-apps-btns-home"
40
+ }, /*#__PURE__*/_react.default.createElement(_IconCozyHome.default, {
41
+ className: "coz-nav-apps-btns-home-svg",
42
+ isInvertedTheme: isInvertedTheme
43
+ }));
44
+ }
45
+
46
+ return /*#__PURE__*/_react.default.createElement("span", {
47
+ className: "coz-nav-apps-btns-home"
48
+ }, /*#__PURE__*/_react.default.createElement(_IconCozyHome.default, {
49
+ className: "coz-nav-apps-btns-home-svg",
50
+ isInvertedTheme: isInvertedTheme
51
+ }));
52
+ };
53
+
54
+ exports.ButtonCozyHome = ButtonCozyHome;
55
+ ButtonCozyHome.propTypes = {
56
+ homeHref: _propTypes.default.string,
57
+ isInvertedTheme: _propTypes.default.bool
58
+ };
package/{transpiled → dist}/components/Apps/ButtonCozyHome.spec.jsx RENAMED
@@ -2,14 +2,15 @@ import React from 'react'
2
2
  import { shallow } from 'enzyme'
3
3
  import { ButtonCozyHome } from './ButtonCozyHome'
4
4
  import { isFlagshipApp } from 'cozy-device-helper'
5
+ import { useWebviewIntent } from 'cozy-intent'
5
6
 
6
7
  jest.mock('cozy-device-helper')
8
+ jest.mock('cozy-intent', () => ({
9
+ useWebviewIntent: jest.fn(() => ({ call: jest.fn() }))
10
+ }))
7
11
 
8
12
  const homeHref = 'foo'
9
13
  const expectedCall = 'backToHome'
10
- const webviewContext = {
11
- call: jest.fn()
12
- }
13
14
 
14
15
  describe('ButtonCozyHome', () => {
15
16
  it('should render a span with no props', () => {
@@ -31,7 +32,7 @@ describe('ButtonCozyHome', () => {
31
32
 
32
33
  it('should render an anchor when isFlagshipApp', () => {
33
34
  isFlagshipApp.mockImplementation(() => true)
34
- const render = shallow(<ButtonCozyHome webviewContext={webviewContext} />)
35
+ const render = shallow(<ButtonCozyHome />)
35
36
  const element = render.getElement()
36
37
 
37
38
  expect(element.type).toBe('a')
@@ -39,9 +40,7 @@ describe('ButtonCozyHome', () => {
39
40
 
40
41
  it('should give priority to anchor if both isFlagshipApp and homeHref are present', () => {
41
42
  isFlagshipApp.mockImplementation(() => true)
42
- const render = shallow(
43
- <ButtonCozyHome homeHref={homeHref} webviewContext={webviewContext} />
44
- )
43
+ const render = shallow(<ButtonCozyHome homeHref={homeHref} />)
45
44
  const element = render.getElement()
46
45
 
47
46
  expect(element.type).toBe('a')
@@ -49,12 +48,12 @@ describe('ButtonCozyHome', () => {
49
48
 
50
49
  it('should call the correct context method on click', () => {
51
50
  isFlagshipApp.mockImplementation(() => true)
52
- const render = shallow(
53
- <ButtonCozyHome homeHref={homeHref} webviewContext={webviewContext} />
54
- )
51
+ const mockCall = jest.fn()
52
+ useWebviewIntent.mockImplementation(() => ({ call: mockCall }))
53
+ const render = shallow(<ButtonCozyHome homeHref={homeHref} />)
55
54
 
56
55
  render.simulate('click')
57
56
 
58
- expect(webviewContext.call).toBeCalledWith(expectedCall)
57
+ expect(mockCall).toBeCalledWith(expectedCall)
59
58
  })
60
59
  })