cozy-bar 0.0.0-development

package/src/components/__snapshots__/Bar.spec.jsx.snap

@@ -0,0 +1,302 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Bar should change allow theme overrides 1`] = `
+<div
+  className="coz-bar-wrapper coz-theme-primary"
+  style={
+    Object {
+      "--cozBarThemePrimaryColor": "red",
+    }
+  }
+>
+  <div
+    id="cozy-bar-modal-dom-place"
+  />
+  <div
+    className="coz-bar-container"
+  >
+    <button
+      className="coz-bar-btn coz-bar-burger"
+      data-tutorial="apps-mobile"
+      onClick={[Function]}
+      type="button"
+    >
+      <Icon
+        color="currentColor"
+        height={16}
+        icon={[Function]}
+        spin={false}
+        width={16}
+      />
+      <span
+        className="coz-bar-hidden"
+      >
+        drawer
+      </span>
+    </button>
+    <Apps />
+    <div
+      className="u-flex-grow"
+    />
+    <withI18n(Connect(Settings))
+      toggleSupport={[Function]}
+    />
+    <Connect(Drawer)
+      drawerListener={[Function]}
+      isClaudyLoading={false}
+      onClaudy={false}
+      onClose={[Function]}
+      toggleSupport={[Function]}
+      visible={false}
+    />
+  </div>
+</div>
+`;
+
+exports[`Bar should change theme 1`] = `
+<div
+  className="coz-bar-wrapper coz-theme-primary"
+  style={Object {}}
+>
+  <div
+    id="cozy-bar-modal-dom-place"
+  />
+  <div
+    className="coz-bar-container"
+  >
+    <button
+      className="coz-bar-btn coz-bar-burger"
+      data-tutorial="apps-mobile"
+      onClick={[Function]}
+      type="button"
+    >
+      <Icon
+        color="currentColor"
+        height={16}
+        icon={[Function]}
+        spin={false}
+        width={16}
+      />
+      <span
+        className="coz-bar-hidden"
+      >
+        drawer
+      </span>
+    </button>
+    <Apps />
+    <div
+      className="u-flex-grow"
+    />
+    <withI18n(Connect(Settings))
+      toggleSupport={[Function]}
+    />
+    <Connect(Drawer)
+      drawerListener={[Function]}
+      isClaudyLoading={false}
+      onClaudy={false}
+      onClose={[Function]}
+      toggleSupport={[Function]}
+      visible={false}
+    />
+  </div>
+</div>
+`;
+
+exports[`Bar should display the Searchbar 1`] = `
+<div
+  className="coz-bar-wrapper coz-theme-default"
+  style={Object {}}
+>
+  <div
+    id="cozy-bar-modal-dom-place"
+  />
+  <div
+    className="coz-bar-container"
+  >
+    <button
+      className="coz-bar-btn coz-bar-burger"
+      data-tutorial="apps-mobile"
+      onClick={[Function]}
+      type="button"
+    >
+      <Icon
+        color="currentColor"
+        height={16}
+        icon={[Function]}
+        spin={false}
+        width={16}
+      />
+      <span
+        className="coz-bar-hidden"
+      >
+        drawer
+      </span>
+    </button>
+    <Apps
+      isPublic={false}
+    />
+    <div
+      className="u-flex-grow"
+    >
+      <withI18n(SearchBar) />
+    </div>
+    <withI18n(Connect(Settings))
+      toggleSupport={[Function]}
+    />
+    <Connect(Drawer)
+      drawerListener={[Function]}
+      isClaudyLoading={false}
+      onClaudy={false}
+      onClose={[Function]}
+      toggleSupport={[Function]}
+      visible={false}
+    />
+  </div>
+</div>
+`;
+
+exports[`Bar should have correct dispatch props provided by the store 1`] = `
+Object {
+  "fetchApps": [Function],
+  "fetchContext": [Function],
+  "fetchSettingsData": [Function],
+}
+`;
+
+exports[`Bar should have correct state props provided by the store with the initial state 1`] = `
+Object {
+  "barCenter": undefined,
+  "barLeft": undefined,
+  "barRight": undefined,
+  "barSearch": undefined,
+  "claudyEnabled": false,
+  "hasFetchedApps": false,
+  "isDrive": false,
+  "theme": "default",
+  "themeOverrides": Object {},
+  "webviewContext": undefined,
+}
+`;
+
+exports[`Bar should not display searchbar if we are not on  a public page 1`] = `
+<div
+  className="coz-bar-wrapper coz-theme-default"
+  style={Object {}}
+>
+  <div
+    id="cozy-bar-modal-dom-place"
+  />
+  <div
+    className="coz-bar-container"
+  >
+    <Apps
+      isPublic={true}
+    />
+    <div
+      className="u-flex-grow"
+    />
+  </div>
+</div>
+`;
+
+exports[`Bar should not display searchbar if we are not on Cozy Drive 1`] = `
+<div
+  className="coz-bar-wrapper coz-theme-default"
+  style={Object {}}
+>
+  <div
+    id="cozy-bar-modal-dom-place"
+  />
+  <div
+    className="coz-bar-container"
+  >
+    <button
+      className="coz-bar-btn coz-bar-burger"
+      data-tutorial="apps-mobile"
+      onClick={[Function]}
+      type="button"
+    >
+      <Icon
+        color="currentColor"
+        height={16}
+        icon={[Function]}
+        spin={false}
+        width={16}
+      />
+      <span
+        className="coz-bar-hidden"
+      >
+        drawer
+      </span>
+    </button>
+    <Apps
+      isPublic={false}
+    />
+    <div
+      className="u-flex-grow"
+    />
+    <withI18n(Connect(Settings))
+      toggleSupport={[Function]}
+    />
+    <Connect(Drawer)
+      drawerListener={[Function]}
+      isClaudyLoading={false}
+      onClaudy={false}
+      onClose={[Function]}
+      toggleSupport={[Function]}
+      visible={false}
+    />
+  </div>
+</div>
+`;
+
+exports[`Bar should not display searchbar if we are on mobile 1`] = `
+<div
+  className="coz-bar-wrapper coz-theme-default"
+  style={Object {}}
+>
+  <div
+    id="cozy-bar-modal-dom-place"
+  />
+  <div
+    className="coz-bar-container"
+  >
+    <button
+      className="coz-bar-btn coz-bar-burger"
+      data-tutorial="apps-mobile"
+      onClick={[Function]}
+      type="button"
+    >
+      <Icon
+        color="currentColor"
+        height={16}
+        icon={[Function]}
+        spin={false}
+        width={16}
+      />
+      <span
+        className="coz-bar-hidden"
+      >
+        drawer
+      </span>
+    </button>
+    <Apps
+      isPublic={false}
+    />
+    <div
+      className="u-flex-grow"
+    />
+    <withI18n(Connect(Settings))
+      toggleSupport={[Function]}
+    />
+    <Connect(Drawer)
+      drawerListener={[Function]}
+      isClaudyLoading={false}
+      onClaudy={false}
+      onClose={[Function]}
+      toggleSupport={[Function]}
+      visible={false}
+    />
+  </div>
+</div>
+`;

package/src/config/claudyActions.json

@@ -0,0 +1,20 @@
+{
+  "desktop": {
+    "icon": "icon-laptop.svg",
+    "link": {
+      "type": "external"
+    }
+  },
+  "mobile": {
+    "icon": "icon-phone.svg",
+    "link": {
+      "type": "external"
+    }
+  },
+  "support": {
+    "icon": "icon-question-mark.svg",
+    "link": {
+      "type": "external"
+    }
+  }
+}

package/src/config/persistWhitelist.json

@@ -0,0 +1,4 @@
+[
+  "apps",
+  "context"
+]

package/src/dom.js

@@ -0,0 +1,80 @@
+const APP_SELECTOR = '[role=application]'
+
+// return an empty object by default to avoid checking existance
+const getAppNodeDataSet = () => {
+  const appNode = document.querySelector(APP_SELECTOR)
+  if (!appNode || !appNode.dataset) return {}
+  return appNode.dataset
+}
+
+const getDefaultStackURL = isPublic => {
+  const data = getAppNodeDataSet()
+  if (!data.cozyDomain) {
+    if (!isPublic) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Cozy-bar can't discover the cozy's URL, and will probably fail to initialize the connection with the stack.`
+      )
+    }
+    return ''
+  }
+
+  const protocol = window.location.protocol
+  return `${protocol}//${data.cozyDomain}`
+}
+
+const getDefaultToken = isPublic => {
+  const data = getAppNodeDataSet()
+  if (!data.cozyToken) {
+    if (!isPublic) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Cozy-bar can't discover the app's token, and will probably fail to initialize the connection with the stack.`
+      )
+    }
+    return ''
+  }
+  return data.cozyToken
+}
+
+const getDefaultIcon = () => {
+  const linkNode = document.querySelector('link[rel="icon"][sizes^="32"]')
+  if (linkNode !== null) {
+    return linkNode.getAttribute('href')
+  } else {
+    return 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+  }
+}
+
+const getAppNamePrefix = () => {
+  const data = getAppNodeDataSet()
+  return data.cozyAppNamePrefix || null
+}
+
+const getAppSlug = () => {
+  const data = getAppNodeDataSet()
+  return data.cozyAppSlug || null
+}
+
+const getUserActionRequired = () => {
+  const meta = document.querySelector('meta[name=user-action-required]')
+  const data = meta && meta.dataset
+  if (data) {
+    const { title, code, detail, links } = data
+    if (code) {
+      // we suppose that at least code will always exist
+      return { title, code, detail, links }
+    }
+  }
+  return undefined
+}
+
+export {
+  getDefaultStackURL,
+  getDefaultToken,
+  getDefaultIcon,
+  getAppNamePrefix,
+  getAppSlug,
+  getUserActionRequired,
+  APP_SELECTOR
+}

package/src/index.jsx

@@ -0,0 +1,242 @@
+/* global __VERSION__ */
+
+import { isMobileApp } from 'cozy-device-helper'
+
+import stack from 'lib/stack'
+import {
+  getLocale,
+  onRealtimeCreate,
+  onRealtimeDelete,
+  setLocale,
+  setInfos
+} from 'lib/reducers'
+
+import { createBarAPI, createBarProxiedAPI } from 'lib/api'
+
+import {
+  getAppNamePrefix,
+  getAppSlug,
+  getDefaultIcon,
+  getDefaultStackURL,
+  getDefaultToken,
+  getUserActionRequired,
+  APP_SELECTOR
+} from './dom'
+
+import enLocale from 'locales/en.json'
+import frLocale from 'locales/fr.json'
+import esLocale from 'locales/es.json'
+
+const locales = {
+  en: enLocale,
+  fr: frLocale,
+  es: esLocale
+}
+
+const createBarElement = () => {
+  const targetName = isMobileApp() ? 'mobile' : 'browser'
+  const barNode = document.createElement('div')
+  barNode.setAttribute('id', 'coz-bar')
+  barNode.setAttribute('role', 'banner')
+  barNode.classList.add(`coz-target--${targetName}`)
+  return barNode
+}
+
+const injectBarInDOM = data => {
+  if (document.getElementById('coz-bar') !== null) {
+    return
+  }
+
+  const barNode = createBarElement()
+  const appNode = document.querySelector(APP_SELECTOR)
+  if (!appNode) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Cozy-bar is looking for a "${APP_SELECTOR}" tag that contains your application and can't find it :'(… The BAR is now disabled`
+    )
+    return null
+  }
+
+  document.body.insertBefore(barNode, appNode)
+
+  // method to put cozy-bar z-index on the top when Drawer visible and vice versa
+  data.onDrawer = visible => {
+    barNode.dataset.drawerVisible = visible
+  }
+
+  // specific layout behaviour if banner displayed
+  if (data.userActionRequired) {
+    document.body.classList.add('has-banner')
+  }
+
+  return barNode
+}
+
+const renderBar = (barNode, options) => {
+  // import React related modules on init only
+  const React = require('react')
+  const { render } = require('react-dom')
+  const { connect, Provider } = require('react-redux')
+  const I18n = require('cozy-ui/react/I18n').default
+  const Bar = require('components/Bar').default
+  const CozyProvider = require('cozy-client').CozyProvider
+
+  const { cozyClient } = options
+
+  // we connect the I18n component to the store to listen
+  // locale change from the api setLocale()
+  const EnhancedI18n = connect(state => ({
+    lang: getLocale(state)
+  }))(I18n)
+
+  const barComponent = (
+    <Provider store={options.reduxStore}>
+      <EnhancedI18n dictRequire={lang => locales[lang]}>
+        {cozyClient ? (
+          <CozyProvider client={cozyClient}>
+            <Bar {...options} />
+          </CozyProvider>
+        ) : (
+          <Bar {...options} />
+        )}
+      </EnhancedI18n>
+    </Provider>
+  )
+
+  render(barComponent, barNode)
+  // for testing only
+  return barComponent
+}
+
+const makeCozyClientAutomatically = ({ cozyURL, token, isPublic }) => {
+  const ccURI = cozyURL || getDefaultStackURL(isPublic)
+  const ccToken = token || getDefaultToken(isPublic)
+  const ccOptions = {
+    uri: ccURI,
+    token: ccToken
+  }
+
+  const CozyClient = require('cozy-client').default
+
+  // eslint-disable-next-line no-console
+  console.warn('Automatically made cozyClient. Options: ', ccOptions)
+  return new CozyClient(ccOptions)
+}
+
+let exposedAPI = {}
+
+/**
+ * Initializes the cozy bar
+ *
+ * It can be initialized either with a cozyClient instance
+ * or a { cozyURL, ssl, token } tupple.
+ *
+ * @function
+ * @param {Object}  options
+ * @param {string}  options.appName    - App name to be displayed in the bar
+ * @param {string}  options.appNamePrefix
+ * @param {string}  options.lang       - Language for the bar
+ * @param {string}  options.iconPath   -
+ * @param {Object}  options.cozyClient - a cozy client instance
+ * @param {string}  options.cozyURL    - URL or domain of the stack
+ * @param {boolean} options.ssl        - Tells if we should use a secure
+ *                                   protocol required if cozyURL does
+ *                                   not have a protocol
+ * @param {string}  arg.token      - Access token for the stack
+ * @param {boolean} arg.isPublic
+ * @param {Function} arg.onLogout
+ */
+const init = async ({
+  appName,
+  appNamePrefix = getAppNamePrefix(),
+  appSlug = getAppSlug(),
+  lang,
+  iconPath = getDefaultIcon(),
+  cozyClient,
+  cozyURL,
+  token,
+  replaceTitleOnMobile = false,
+  isPublic = false,
+  onLogOut
+} = {}) => {
+  // Force public mode in `/public` URLs
+  if (!isPublic && /^\/public/.test(window.location.pathname)) {
+    isPublic = true
+  }
+
+  if (!cozyClient) {
+    cozyClient = makeCozyClientAutomatically({ cozyURL, token, isPublic })
+  }
+
+  // store
+  const getOrCreateStore = require('lib/store').default
+  const reduxStore = getOrCreateStore()
+
+  reduxStore.dispatch(setInfos(appName, appNamePrefix, appSlug))
+  stack.init({
+    cozyClient,
+    onCreate: data => reduxStore.dispatch(onRealtimeCreate(data)),
+    onDelete: data => reduxStore.dispatch(onRealtimeDelete(data))
+  })
+  if (lang) {
+    reduxStore.dispatch(setLocale(lang))
+  }
+
+  // Assign all api methods to the bar object
+  const apiMethods = createBarAPI(reduxStore)
+  Object.assign(exposedAPI, apiMethods)
+
+  const options = {
+    appName,
+    appNamePrefix,
+    appSlug,
+    cozyClient,
+    iconPath,
+    replaceTitleOnMobile,
+    isPublic,
+    onLogOut,
+    userActionRequired: getUserActionRequired(),
+    reduxStore
+  }
+
+  const barNode = injectBarInDOM(options)
+  renderBar(barNode, options)
+}
+
+const updateAccessToken = accessToken => {
+  stack.updateAccessToken(accessToken)
+}
+
+const proxiedAPI = createBarProxiedAPI(exposedAPI)
+
+const {
+  setBarCenter,
+  setBarLeft,
+  setBarRight,
+  setBarSearch,
+  BarCenter,
+  BarRight,
+  BarLeft,
+  BarSearch,
+  setTheme,
+  setWebviewContext
+} = proxiedAPI
+
+const version = __VERSION__
+
+export {
+  init,
+  version,
+  setBarCenter,
+  setBarLeft,
+  setBarRight,
+  setBarSearch,
+  BarLeft,
+  BarRight,
+  BarCenter,
+  BarSearch,
+  setTheme,
+  setWebviewContext,
+  setLocale,
+  updateAccessToken
+}

package/src/index.spec.jsx

@@ -0,0 +1,34 @@
+import CozyClient from 'cozy-client'
+import jestFetchMock from 'jest-fetch-mock'
+
+import * as cozyBar from './index'
+
+describe('init', () => {
+  beforeAll(() => {
+    global.fetch = jestFetchMock
+  })
+
+  beforeEach(() => {
+    jest.spyOn(console, 'error')
+    const div = document.createElement('div')
+    div.setAttribute('role', 'application')
+    document.body.appendChild(div)
+  })
+
+  afterEach(() => {
+    // eslint-disable-next-line no-console
+    console.error.mockRestore()
+  })
+
+  it('should init the bar', () => {
+    const client = new CozyClient({})
+    cozyBar.init({
+      appName: 'App',
+      cozyClient: client,
+      lang: 'fr'
+    })
+    cozyBar.setBarCenter('Page title')
+    // eslint-disable-next-line no-console
+    expect(console.error).not.toHaveBeenCalled()
+  })
+})

package/src/lib/api/helpers.js

@@ -0,0 +1,13 @@
+export const locations = ['left', 'center', 'right', 'search']
+
+const upperFirstLetter = val => {
+  return val[0].toUpperCase() + val.slice(1)
+}
+
+export const getJsApiName = location => {
+  return `setBar${upperFirstLetter(location)}`
+}
+
+export const getReactApiName = location => {
+  return `Bar${upperFirstLetter(location)}`
+}