ec-toolbox

Introduction

Euroconsumers Toolbox is a React components library that allows code reuse and visual consistency across the Euroconsumers brands.

It also features Storybook, an isolated development environment and UI showcase that allows efficient component development and components discoverability.

Stack components

• Storybook
• React
• React Intl
• Styled Components
• Polished
• Babel (ES6/7)
• Webpack
• Jest + Enzyme
• ESLint + Airbnb styleguide
• Stylelint
• Prettier

Scripts

• Run in development mode: yarn start
• Build storybook: yarn build:storybook
• Build toolbox: yarn build:toolbox
• Lint JS: yarn lint:js
• Lint CSS: yarn lint:css
• Run unit tests: yarn test
• Run unit tests in watch mode: yarn test:watch
• Generate test coverage report: yarn test:coverage

Project structure & conventions

Components folder

The src/components folder contains one folder per component. Ex: src/components/Button.

Colocation

Place related assets in the same folder. Ex, in src/components/Button:

• index.jsx: component code
• messages.js: component translations
• images: images related to the component
• [componentName].stories.jsx: component stories
• [componentName].test.jsx: component unit tests

Naming conventions

• Use Pascal case for component folder name (ex: src/components/DatePicker)
• Name the component file index.jsx so it can be easily imported (ex: import Button from 'src/components/Button')
• The files with .stories.jsx and .test.jsx extensions are automatically ran by Storybook and Jest, respectively

Code conventions

Code conventions are automatically enforced via ESLint using the Airbnb Style Guide for JavaScript and Stylelint for CSS.

Theming

The components can be styled according to Euroconsumers brands requirements. This is configured by using the <ThemeProvider> wrapper of Styled Components at the root of your application:

<ThemeProvider theme={testAchatsTheme}>
  <App />
</ThemeProvider>

To import a specific theme: import { testAchatsTheme } from 'ec-toolbox'.

If your application also uses a theme, you can merge the two using mergeThemes from ec-toolbox.

To prevent conflicts, a ecToolbox reserved prefix is used.

i18n & l10n

The components support internationalization and localization. This is configured by using the <IntlProvider> wrapper of React Intl at the root of your application:

<IntlProvider locale="pt-BR" messages={ptBrMessages}>
  <App />
</IntlProvider>

To import translations for a specific language: import { ptBrMessages } from 'ec-toolbox'.

If your application also uses translations, you can merge the two using mergeMessages from ec-toolbox.

To prevent conflicts, a ecToolbox reserved prefix is used.

Git pre-commit hook

To ensure that the codebase stays high quality, a pre-commit hook will run before every commit to perform 4 quality checks on the changeset:

1. ESLint: ensures that JS code matches the Airbnb style guide
2. Stylelint: ensures that CSS code matches recommended conventions
3. Prettier: formats the code to make it easy to read and maintain
4. Unit tests: ensures that tests are passing