# FComponents

A library to share essential frontend components among applications.

## Installation

Add this line to your application's Gemfile:

```ruby
gem 'f_components', git: 'git@gitlab.com:fretadao/libs/f_components.git'
```

And then execute:

```bash
$ bundle
```

This will allow the application to have access to view components classes and helpers.

Add this line to dependencies in your package.json file:

```ruby
"f_components": "git+ssh://git@gitlab.com:fretadao/libs/f_components.git",
```

And then execute:

```bash
$ yarn
```

This will allow the application to apply the packed stylesheets and JavaScript from the library into your application. It's up to you chose whether it is convenient to be imported by sprockets or Webpacker.

### Sprockets

#### Sass

If you're using sprockets as the main asset packing system, you may create a file sass with the following configurations:

`app/assets/stylesheets/f_components.scss`:

```scss
$fc-clr-primary: <app primary color>;
$fc-clr-primary--dk: <app primary color dark>;
$fc-clr-secondary: <app secondary color>;
$fc-clr-secondary--dk: <app secondary color dark>;

$fc-clr-text: <app primary text color>;
$fc-clr-text-secondary: <app secondary text color>;

$fc-clr-success: <app success color>;
$fc-clr-warning: <app warning color>;
$fc-clr-error: <app error color>;

$fc-clr-disabled: <app disabled color>;
$fc-clr-border: <app border color>;

$fc-clr-background: <app background color>;

@import 'f_components/app/frontend/f_components/stylesheets/f_components';
```

After creating the file you may import it in your `app/assets/stylesheets/application.scss` :

```scss
@import 'f_components';
```

### Webpacker

#### Sass

If you're using webpacker as the main asset packing system, you may create a file sass with the following configurations:

`app/javascripts/stylesheets/f_components.scss`:

```scss
$fc-clr-primary: <app-primary-color>;
$fc-clr-primary--dk: <app-primary-color-dark>;
$fc-clr-secondary: <app-secondary-color>;
$fc-clr-secondary--dk: <app-secondary-color-dark>;

$fc-clr-text: <app-primary-text-color>;
$fc-clr-text-secondary: <app-secondary-text-color>;

$fc-clr-success: <app-success-color>;
$fc-clr-warning: <app-warning-color>;
$fc-clr-error: <app-error-color>;

$fc-clr-disabled: <app-disabled-color>;
$fc-clr-border: <app-border-color>;

$fc-clr-background: <app-background-color>;

@import 'f_components/app/frontend/f_components/stylesheets/f_components';
```

After creating the file you may import it in your `app/javascripts/packs/application.js` :

```javascript
import '../stylesheets/f_components';
```

Some components have Stimulus controllers, so you'll have to import them too:

```javascript
import {Application} from 'stimulus';
import {TableComponentController} from 'f_components'; // Import controllers

const application = Application.start();

// Register the controllers. Please, keep the same naming. Otherwise, components won't work!
application.register('f-table-component', TableComponentController);

export {application};
```

## Development

### Previews

To preview components access the dummy app:

```bash
$ cd fretadao
```

Run the servers (using docker):

```bash
$ rake docker:dev:f_components
```

Run the tests (using docker):

```bash
$ rake docker:bash:f_components

# inside the container:
$ rspec
```

Now just access `localhost:3030/previews` and see the components.