Bar next version

config/webpack.config.base.js

@@ -13,13 +13,13 @@ module.exports = {
     libraryTarget: 'umd',
     umdNamedDefine: true
   },
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM'
+  },
   resolve: {
     extensions: ['.js', '.json', '.yaml', '.jsx'],
-    modules: [SRC_DIR, 'node_modules'],
-    alias: {
-      react: path.resolve(__dirname, 'aliases/globalReact'),
-      'react-dom': path.resolve(__dirname, 'aliases/globalReactDOM')
-    }
+    modules: [SRC_DIR, 'node_modules']
   },
   devtool: '#source-map',
   module: {

config/webpack.config.styles.js

@@ -13,37 +13,11 @@ module.exports = ({ production }) => ({
         exclude: /cozy-ui\/react/,
         use: [
           {
-            loader: 'css-loader',
-            options: { importLoaders: 2, sourceMap: true }
+            loader: 'style-loader'
           },
-          {
-            loader: 'postcss-loader',
-            options: {
-              config: {
-                ctx: {
-                  env: production ? 'production' : 'development'
-                }
-              },
-              sourceMap: true
-            }
-          },
-          {
-            loader: 'stylus-loader'
-          }
-        ]
-      },
-      {
-        test: /\.styl$/,
-        include: /cozy-ui\/react/,
-        use: [
           {
             loader: 'css-loader',
-            options: {
-              importLoaders: 2,
-              sourceMap: true,
-              modules: true,
-              localIdentName: 'cozy-ui-bar-[local]--[hash:base64:5]'
-            }
+            options: { importLoaders: 2, sourceMap: true }
           },
           {
             loader: 'postcss-loader',

examples/Procfile

@@ -1,3 +1,3 @@
 build-bar: yarn watch
 serve-bar: cd dist; python3 -m http.server 8000
-serve-example: yarn parcel examples/index.html --port 1234
+serve-example: yarn parcel examples/index.html --no-cache --port 1234

examples/index.html

@@ -3,5 +3,4 @@
 <!-- First thing is to configure minilog so that it is bound to window -->
 <script src='./logs.js'></script>
 <!-- Serves the bar from a server so that it is not processed by parcel -->
-<script src='http://localhost:8000/cozy-bar.mobile.js'></script>
 <script src='./index.jsx'></script>

examples/index.jsx

@@ -1,13 +1,14 @@
 /* global cozy */
 
-import React from 'react'
+import React, * as reactExports from 'react'
 import ReactDOM from 'react-dom'
 import { Layout, Main } from 'cozy-ui/transpiled/react/Layout'
 import CozyClient, { CozyProvider, withClient } from 'cozy-client'
 import { Route, hashHistory } from 'react-router'
 import { MobileRouter } from 'cozy-authentication'
 import 'cozy-ui/transpiled/react/stylesheet.css'
 import appIcon from './icon.png'
+import { Sprite as IconSprite } from 'cozy-ui/transpiled/react/Icon'
 
 const minilog = window.minilog
 minilog.enable()
@@ -46,6 +47,7 @@ const Index = withClient(({ client }) => {
           Client options: <pre>{JSON.stringify(client.options, null, 2)}</pre>
         </div>
       </Main>
+      <IconSprite />
     </Layout>
   )
 })
@@ -69,23 +71,33 @@ const client = new CozyClient({
   }
 })
 
+const loadBar = async () => {
+  // TODO can we avoid this ?
+  window.React = React
+  Object.assign(React, reactExports)
+  window.ReactDOM = ReactDOM
+  await import('http://localhost:8000/cozy-bar.js')
+  return window.cozy.bar
+}
+
 // TODO bar: should only need a correctly configured client
-client.on('login', () => {
+client.on('login', async () => {
   const oldOptions = {
     token: client.stackClient.token.accessToken,
     cozyURL: client.stackClient.uri
   }
   const newOptions = {
     cozyClient: client
   }
-  cozy.bar.init({
+
+  const bar = await loadBar()
+  bar.init({
     appNamePrefix: 'Cozy',
     appName: appInfo.name,
     appEditor: appInfo.editor,
     appSlug: appInfo.slug,
     iconPath: appIcon,
     lang: 'en',
-    replaceTitleOnMobile: true,
     ...(isInitializedWithCozyClient() ? newOptions : oldOptions),
     // This should be done automatically
     onLogOut: async () => {

package.json

@@ -88,7 +88,7 @@
     "cozy-device-helper": "1.8.0",
     "cozy-interapp": "0.4.9",
     "cozy-realtime": "3.2.1",
-    "cozy-ui": "35.22.0",
+    "cozy-ui": "38.2.0",
     "hammerjs": "2.0.8",
     "lerna-changelog": "0.8.2",
     "localforage": "1.7.3",
@@ -134,8 +134,6 @@
     },
     "moduleNameMapper": {
       "^config/(.*)": "<rootDir>/src/config/$1",
-      "^react$": "<rootDir>/config/aliases/globalReact",
-      "^(react-dom|react-dom/(.*))$": "<rootDir>/config/aliases/globalReactDOM",
       "\\.(png|gif|jpe?g|svg)$": "<rootDir>/test/__mocks__/fileMock.js",
       "\\.styl$": "identity-obj-proxy"
     },

src/components/Apps/AppItem.jsx

@@ -3,8 +3,8 @@ import get from 'lodash/get'
 import { appShape } from 'proptypes/index'
 import { models } from 'cozy-client'
 
-import AppIcon from 'cozy-ui/react/AppIcon'
-import AppLinker from 'cozy-ui/react/AppLinker'
+import AppIcon from 'cozy-ui/transpiled/react/AppIcon'
+import AppLinker from 'cozy-ui/transpiled/react/AppLinker'
 import HomeIcon from 'components/Apps/IconCozyHome'
 import stack from 'lib/stack'
 import PropTypes from 'prop-types'

src/components/Apps/AppNavButtons.jsx

@@ -3,8 +3,8 @@ import { connect } from 'react-redux'
 
 import { getHomeApp } from 'lib/reducers'
 
-import { translate } from 'cozy-ui/react/I18n'
-import Icon from 'cozy-ui/react/Icon'
+import { translate } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import HomeIcon from 'components/Apps/IconCozyHome'
 import { isFetchingApps } from 'lib/reducers'
 

src/components/Apps/AppsContent.jsx

@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import Proptypes from 'prop-types'
 
-import { translate } from 'cozy-ui/react/I18n'
-import withBreakpoints from 'cozy-ui/react/helpers/withBreakpoints'
+import { translate } from 'cozy-ui/transpiled/react/I18n'
+import withBreakpoints from 'cozy-ui/transpiled/react/helpers/withBreakpoints'
 import { getApps, getHomeApp, isFetchingApps } from 'lib/reducers'
 
 import AppItem from 'components/Apps/AppItem'

src/components/Apps/IconCozyHome.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 
-import AppIcon from 'cozy-ui/react/AppIcon'
+import AppIcon from 'cozy-ui/transpiled/react/AppIcon'
 
 import stack from 'lib/stack'
 import homeIcon from 'assets/sprites/icon-cozy-home.svg'

src/components/Apps/index.jsx

@@ -40,7 +40,6 @@ class Apps extends Component {
   // data-tutorial attribute allows to be targeted in an application tutorial
   render() {
     const {
-      replaceTitleOnMobile,
       appName,
       appNamePrefix,
       appSlug,
@@ -50,9 +49,7 @@ class Apps extends Component {
     const { opened } = this.state
     return (
       <nav
-        className={`coz-nav coz-nav-apps${
-          replaceTitleOnMobile ? ' coz-bar-hide-sm' : ''
-        }`}
+        className='coz-nav coz-nav-apps'
         ref={ref => {
           this.rootRef = ref
         }}

src/components/Banner.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
-import { ButtonLink } from 'cozy-ui/react/Button'
-import { translate } from 'cozy-ui/react/I18n'
+import { ButtonLink } from 'cozy-ui/transpiled/react/Button'
+import { translate } from 'cozy-ui/transpiled/react/I18n'
 
 class Banner extends Component {
   constructor(props) {

src/components/Bar.jsx

@@ -3,13 +3,13 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
-import { translate } from 'cozy-ui/react/I18n'
-import Icon from 'cozy-ui/react/Icon'
+import { translate } from 'cozy-ui/transpiled/react/I18n'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import {
   shouldEnableTracking,
   getTracker,
   configureTracker
-} from 'cozy-ui/react/helpers/tracker'
+} from 'cozy-ui/transpiled/react/helpers/tracker'
 import { isMobileApp } from 'cozy-device-helper'
 
 import Banner from 'components/Banner'
@@ -140,21 +140,13 @@ export class Bar extends Component {
   }
 
   renderCenter() {
-    const {
-      appName,
-      appNamePrefix,
-      appSlug,
-      iconPath,
-      replaceTitleOnMobile,
-      isPublic
-    } = this.props
+    const { appName, appNamePrefix, appSlug, iconPath, isPublic } = this.props
     return (
       <Apps
         appName={appName}
         appNamePrefix={appNamePrefix}
         appSlug={appSlug}
         iconPath={iconPath}
-        replaceTitleOnMobile={replaceTitleOnMobile}
         isPublic={isPublic}
       />
     )

src/components/Drawer.spec.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Provider } from 'react-redux'
 
-import I18n from 'cozy-ui/react/I18n'
+import I18n from 'cozy-ui/transpiled/react/I18n'
 import { createStore } from 'lib/store'
 import enLocale from 'locales/en.json'
 import { render, screen, fireEvent, act } from '@testing-library/react'

src/components/SearchBar.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { translate } from 'cozy-ui/react/I18n'
+import { translate } from 'cozy-ui/transpiled/react/I18n'
 import Autosuggest from 'react-autosuggest'
 import debounce from 'lodash.debounce'
 import { fetchRawIntent } from 'lib/intents'