FComponents

A library to share essential frontend components among applications.

Installation

Add this line to your application's Gemfile:

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

And then execute:

$ 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:

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

And then execute:

$ 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:

$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 :

@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:

$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 :

import '../stylesheets/f_components';

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

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:

$ cd fretadao

Run the servers (using docker):

$ rake docker:dev:f_components

Run the tests (using docker):

$ rake docker:bash:f_components

# inside the container:
$ rspec

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