README
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 codemessages.js
: component translationsimages
: 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:
- ESLint: ensures that JS code matches the Airbnb style guide
- Stylelint: ensures that CSS code matches recommended conventions
- Prettier: formats the code to make it easy to read and maintain
- Unit tests: ensures that tests are passing