stavros-tomas/chameleon

Components library for VUE used by the Ebury online team

Chameleon Components

Chameleon Components is Ebury's vue.js 3.X components library. The library is being used for our Vue projects at Ebury, and more components are added regularly.

Also, check out the latest version deployed in Storybook.

1. Vision
2. Contributing
3. Code Owners
4. Installation
5. Usage
6. Theming
7. I18n
8. References

Installation

If you'd like to contribute to the library then you must do the following to set up your local environment:

1. Clone chameleon-components repo

2. Install all dependencies with:

npm install

3. Run Storybook with:

npm start

That's it! By now, you should be up and running. You can check the existing components or create new ones.

Contributing

We love collaborating with other teams and welcome contributions!

See the contributing docs for more info on code style, formatting, testing, and troubleshooting. Or if you want to report a problem or request some change.

Usage

Install the library in your project

Install @ebury/chameleon-components in your project with npm:

npm install @ebury/chameleon-components --save

Import component/s

All of our components are exported by name from @ebury/chameleon-components, so you can import them with:

import { ComponentName } from '@ebury/chameleon-components';

NOTE! If you are going to use ec-phone-number-input, you must host icons from node_modules/svg-country-flags/png100px/ in your project.

For example icon with path node_modules/svg-country-flags/png100px/gb.png should be available in your project by url [your static prefix]icons/country-flags/100/gb.png. Static prefix could be change by setting up respective iconsStaticPrefix property in src/config.js.

Theming

The components can use a custom theme. There are four color palettes used by the CSS, two of them can be adjusted via CSS variables, e.g. the default blue color is defined as --ec-key-color-level-4 and can be configured via --ec-theme-key-color-level-4.

Check out the list of possible variables in the storybook colors story.

A few examples of a theme can be found in the src/styles/themes/ folder.

I18n

Some components, e.g. ec-amount-input or ec-donut require Intl API to format values properly or to detect what is the decimal/grouping separator for a current locale. They both do that via Intl.NumberFormat which might have issues in some browsers for not having all locales set up properly. See the issues we discovered in this PR. If you need to support every single locale on the planet, we recommend to polyfill the Intl API using formatjs.io packages so it's consistent across all browsers.

References

Vue.js

Vue

Vite

Storybook

Storybook

Testing

Vitest

Vue Test Utils

Cypress

Linting

ESLint

Stylelint

CSS

PostCSS

TailwindCSS

Bootstrap Grid

Dependencies

flatpickr

focus-trap

floating-vue

mitt

svg-country-flags