@br-fe/cclib

Common components library to be used with Valtech´s FE Boilerplate

Install and config

1) Install it as a dependency in your project

npm install @valtech-br/cclib

# or

yarn add @valtech-br/cclib

2) Import the library into your main.js file and pass it into your Vue instance, as below:

import cclib from '@valtech-br/cclib'

(...)

const root = new Vue({
  components: {
    ...components,
    ...cclib
  },
  (...)
})

3) Import library stylesheet at the top of your project's main.scss file

@import './node_modules/@valtech-br/cclib/dist/css/cclib';

And that's all!

Usage

1) Import the component. There are three ways of doing this.

   a) Directly using chosen component's tag into hbs file.

   b) Copy the components folder from node_modules/@valtech-br/cclib/prototype/components into your Fractal's project.

   c) Import the component directly into Vue files, as folow:

# import the library into the .vue file, at the top of the script tag:
import cclib from '@valtech-br/cclib'

(...)

# import the desired component in the components section:
components: {
  componentName: cclib.componentName
}

(...)

# Use the component tag in the template area:
<component-name class="component-name--styling-class">

3) Apply and/or customize component's styling classes (details on component documentation). All class customization can be made directly in your project's src/styles .scss files.

Development

If you want to create new components, or change the existing ones, just run the server, do your stuff, and the build the package for distribution.

npm run dev # starts Fractal's UI at port 3004 and and watch for changes

# or

yarn dev # starts Fractal's UI at port 3004 and and watch for changes

yarn build # build for distribution

Component development good practices

• Never use !important in sass variables
• ...

Todo's

• [ ] Finish development good practices
• [ ] ...