cwb-react

This is a shared library that can be used to provide consistent experience and styling across new CWB products.

Branches

Like AgentPortal, Features and bugs are worked on in branches that are based on the development branch. This branch only allows merges through Pull Requests. Features and bugs can be merged into development as they are developed, but should be reviewed before merges are approved. master should always be a clean, build ready version of the code.

API Mocking

Many API endpoints for CWB are included in /src/api/ in files called *.api.js and split up roughly by use case.

There is also a parallel set of files in /src/api/ named *.mocked.js which include a mocked JSON response for the same endpoints. These mocked responses can be substituted in place of the real ones (e.g. when stubbing responses while creating automated tests). This can be done by passing the mock path when instantiating src/apiClient/index.js, like the following example from the AgentPortal project:

let apiPromise = import(`cwb-react/dist/${CWB_API_FILE}`)
let api = await apiPromise
const myClient = new CWBAPI(api.default, CWB_API_ENV, CWB_USE_MOCK_ENV);

Where CWB_API_ENV is provided in Webpack in the following plugin:

new webpack.DefinePlugin({
  'CWB_USE_MOCK_ENV': env.mock,
  'CWB_API_FILE': env.mock ? JSON.stringify('mocked.js') : JSON.stringify('api.js'),
  'CWB_API_ENV': JSON.stringify(apiEnv[env.api]),
}),

Essentially, when instantiating the API client, you provide the API files you want to include, so that the client can know whether to use the stubbed responses or the real API calls.

Font

This library has a font pack of icons that can be used across CWB. This font pack is generated using icomoon to turn our SVGs into a single font file to reduce the number of requests and asset size.

Build process and size

In order to make this library usable by many projects at CWB, we have created a webpack config that produces individual component files as output. This allows the projects that use this library to import just the few components they need in the following way:

const CWBAudioPlayerFooter = require('cwb-react/dist/components/CWBAudioPlayerFooter').default;

In this way, if a project needs just a button styling, or API endpoints, it doesn't have to include all components and their dependencies.

If a project does heavily use cwb-react, then it can import components and helpers directly using the normal method:

import { CWBAudioPlayerFooter } from 'cwb-react';

Which will pull in all modules by default.

Build any changes for local development for my-project

1. make any changes your file under cwb-react
2. Run npm run build under cwb-react
3. Copy the dist folder form cwb-react and paste it to the ~/my-project/node-modules/cwb-react
4. Restart the my-project using npm run start
5. If the changes are good to go push cwb-react changes to master branch
6. Run npm install cwb-react into my-project

Localization

This project use i18next-scanner for localization. Steps to implements localization are as follows:

1. npm install react-i18next and npm install i18next.
2. Add i18next-scanner.config.js to your development folder. Find this file inside any project AgentPortal/ TeamShare/ VoiceDoubles
3. Create a new i18n.js file and add it to the src folder. Find this file inside any project AgentPortal/ TeamShare/ VoiceDoubles
4. import './i18n' into your index.js file.
5. Use the hook i18next() into your component

  import {withI18n} from 'react-i18next';
  class MyComponent{
    render() {
      const {t} = this.props;
      return <div>{t("Localize")}</div>
    }
  }
  export default withI18n() (MyComponent)

6. Use Trans keyword to translate a JSX tree in one translation

  <Trans>Welcome to <strong>React</strong></Trans>
  // the translation in this case should be
  "Welcome to <1>React</1>": "Welcome to <1>React and react-i18next</1>"

  // For Singular/plural translation
  <Trans i18nKey="userMessagesUnread" count={count}>
    Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
  </Trans>
  // the translation in this case should be
  "userMessagesUnread": "Hello <1>{{name}}</1>, you have {{count}} unread message. <5>Go to message</5>.",
  "userMessagesUnread_plural": "Hello <1>{{name}}</1>, you have {{count}} unread messages.  <5>Go to messages</5>.",

7. For translation inside any model

  import i18next from 'i18next'
  i18next.t("translate string")

8. run i18next-scanner under your development directory will create the translation files.

Steps for adding a new SVG into the cwb font

1. Visit https://icomoon.io/app/#/select
2. Drag and drop selection.json from cwb-react/src/icomoon/ into the site
3. Press “Yes” to load all of the settings stored in the file
4. Name your new SVG files on your machine in the format cwb-. For example, cwb-print, cwb-thumbs-down.
5. Drag and drop your new SVGs into the site
6. Press “Generate Font” in the bottom right
7. Press “Continue” if there is a popup
8. Hover over your new icons and press “Get Code”
9. Copy the new CSS to the top of src/styles/fonts.scss
10. Press “Download” in the bottom right
11. Extract the files.
12. Rename the files in fonts/ to be ‘cwb’ instead of ‘icomoon’. For example, cwb.svg instead of icomoon.svg
13. Copy the renamed files into cwb-react/src/fonts/
14. Rebuild cwb-react.
15. Install cwb-react into your project to get the latest changes.