v7.md

Migrate cozy-bar from v7 to v11

To migrate cozy-bar from v7 to v11, follow these steps:

1. Update the cozy-bar as a dependency instead of a devDependency in your project by running the following command:

   yarn remove cozy-bar --dev && yarn add [email protected]

You should also check whether the cozy-bar peerDeeps are filled in

2. In development mode, the cozy-scripts was injecting cozy-bar JS and CSS. In your package.json you need to disable this injection of files by adding the --barV7 false option to the build, start, and watch commands. Make sur your version of cozy-scripts is greater that 8.1.1

3. In production, the cozy-stack replace {{.CozyBar}} with the JavaScript code to inject the cozy-bar. Make sure you remove all instances of {{.CozyBar}} from your index.ejs file.

4. The fonts were imported by cozy-bar v7 as side effect. To ensure that the cozy fonts are imported, you must add the following lines to your index.ejs file:

   <% if (__STACK_ASSETS__) { %>
       {{.CozyFonts}}
   <% } else { %>
       <link rel="stylesheet" type="text/css" href="//{{.Domain}}/assets/fonts/fonts.css">
   <% } %>
   

5. You need to add the cozy-bar CSS import 'cozy-bar/dist/stylesheet.css' into your index or an other file

6. You can remove the bar initialization. Generally you can search for cozy.bar.init({

7. Add the BarComponent into your layout like the following code:

   import { BarComponent } from 'cozy-bar'
   
   const App = () => {
       return (
           <Layout>
               <BarComponent />
           </Layout>
       )
   }

8. If you were using customs elements, you need to wrap the BarComponent and your elements into a BarProvider. Generally you can add this into providers file:

   <BarProvider>
       <OtherProvider>
           {children}
       </OtherProvider>
   </BarProvider>

9. Then, replace { BarLeft } = cozy.bar with a direct import:

   import { BarLeft } from 'cozy-bar'
   
   const Title = ({ title }) => {
       const { isMobile } = useBreakpoints()
   
       if(isMobile) {
           return (
               <BarLeft>{title}</BarLeft>
           )
       }
       return (
           <h2>{title}</h2>
       )
   }

10. You no longer need to include the providers inside your custom bar element. Now, you can access all the providers that wrap the BarComponent directly within your custom element.

Note: Cozy Bar store and Cozy Client

If your app shares a custom store with cozy-client and you wan to use it inside your custom bar element, you need to include the bar reducer in it using the following approach:

import { barReducers } from 'cozy-bar'

const reducers = {
  ...baseReducers,
  ...barReducers,
  cozy: client.reducer()
}

const appReducer = combineReducers(reducers)

If you did not provide a custom store to cozy-client, you may need to add the store: true option when setting up your CozyClient to ensure that it has a store. This was previously done as a side effect in cozy-bar v7.

new CozyClient({
  store: true
})