f_components 0.2.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 23b88d28e2e9948702351020207b6aff6fddbd01e54e9f4ebfdb0532e08eee06
+  data.tar.gz: 90a0556f1bd62124ba52d0643cdd8274e6512f23e65bbabbdab239126f67d65c
+SHA512:
+  metadata.gz: db56d7fc4a18a99bac2bc3d70b650f1eb49df41dfd4305de745fa3f285c13673ac14a482db220349eee6d2e7820f31d5fbc016b539946befd67235210f1c3568
+  data.tar.gz: 7a0d5d29de3e02f3ca7478477480fa65ea8ee68cc146d368a7e8d7f01fd3135bdba968e5846c1e340b328dc46ebfbfab6bf9d6c2fc31f56055fd3b8d0a06749f

data/README.md

@@ -0,0 +1,144 @@
+# 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.

data/Rakefile

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+require 'bundler/setup'
+
+APP_RAKEFILE = File.expand_path('spec/dummy/Rakefile', __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/components/f_components/avatar/component.html.erb

@@ -0,0 +1 @@
+<%= tag.img(src: image_url, class: class_names('Avatar', @class), loading: :lazy, width: size, height: size) %>

data/app/components/f_components/avatar/component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module FComponents
+  module Avatar
+    class Component < Base
+      def initialize(opts = {})
+        @class = opts.delete(:class) { '' }
+        @opts = opts
+      end
+
+      private
+
+      def image_url
+        "https://ui-avatars.com/api/?#{params}"
+      end
+
+      def params
+        default_options.merge(@opts).to_query
+      end
+
+      def size
+        @opts.fetch(:size, 64)
+      end
+
+      def default_options
+        { bold: true }
+      end
+    end
+  end
+end

data/app/components/f_components/avatar/component.scss

@@ -0,0 +1,3 @@
+.Avatar {
+  border-radius: 9999px;
+}

data/app/components/f_components/base.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module FComponents
+  class Base < ViewComponent::Base
+    extend FSupport::Attributes
+    include ComponentsHelper
+
+    delegate :fa_icon, to: :helpers
+
+    def self.call(...)
+      new(...)
+    end
+  end
+end

data/app/components/f_components/button/component.html.erb

@@ -0,0 +1,5 @@
+<% if button_tag? %>
+  <%= button_tag(title, class: classes, **options) %>
+<% else %>
+  <%= link_to(title, href, class: classes, **options) %>
+<% end %>

data/app/components/f_components/button/component.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+module FComponents
+  module Button
+    class Component < FComponents::Base
+      TYPE_CLASSES = {
+        primary: 'bt--primary',
+        secondary: 'bt--primary bt--outlined',
+        tertiary: 'bt--tertiary',
+        custom: ''
+      }.freeze
+
+      MODIFIERS = {
+        success: 'bt--success',
+        secondary: 'bt--secondary',
+        error: 'bt--error',
+        white: 'bt--white',
+        warning: 'bt--warning',
+        fit: 'w--fit max-w--fit',
+        full: 'bt--full',
+        outlined: 'bt--outlined',
+        small: 'bt--smr',
+        large: 'bt--lg',
+        centered: 'mx--auto'
+      }.freeze
+
+      MODS = MODIFIERS.to_h.deep_dup
+      MODS.default_proc = proc { |_hash, key| "bt--#{key}" }
+
+      attr_reader :href, :options
+
+      def initialize(title, href = nil, **options)
+        @title     = title
+        @href      = href || 'javascript: void(0);'
+        @modifiers = options.delete(:mods)
+        @type      = options.delete(:type) || :primary
+        @tag       = options.delete(:tag) || :a
+        @class     = options.delete(:class) || ''
+        @left_icon = options.delete(:left_icon)
+        @options   = options
+      end
+
+      private
+
+      def button_tag?
+        @tag == :button
+      end
+
+      def title
+        @left_icon.present? ? fa_icon(@left_icon, class: 'bt-leftIcon', text: @title) : @title
+      end
+
+      def classes
+        "bt bt--round #{button_type_class} #{modifiers} #{@class}"
+      end
+
+      def button_type_class
+        raise 'Unkown button type' unless TYPE_CLASSES.has_key?(@type)
+
+        TYPE_CLASSES[@type]
+      end
+
+      def modifiers
+        MODS.values_at(*@modifiers).compact.join(' ')
+      end
+    end
+  end
+end

data/app/components/f_components/button/component.scss

@@ -0,0 +1,9 @@
+.bt {
+  &--full {
+    width: 100%;
+  }
+
+  &-leftIcon {
+    margin-right: 10px;
+  }
+}

data/app/components/f_components/collapsible/component.html.erb

@@ -0,0 +1,6 @@
+<details class="Collapsible p-5 <%= @class %>">
+  <summary class="flex justify-between items-center cursor-pointer">
+    <%== formatted_summary %>
+  </summary>
+  <div><%= content %></div>
+</details>

data/app/components/f_components/collapsible/component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module FComponents
+  module Collapsible
+    class Component < Base
+      attributes :summary, class: nil
+
+      private
+
+      def formatted_summary
+        tag.div(class: 'flex space-x-5 justify-start items-center max-w-full') { summary }
+      end
+    end
+  end
+end

data/app/components/f_components/collapsible/component.scss

@@ -0,0 +1,19 @@
+.Collapsible > summary {
+  list-style-type: none;
+}
+
+.Collapsible > summary::-webkit-details-marker {
+  display: none;
+}
+
+.Collapsible > summary::after {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content: "\f078";
+}
+
+.Collapsible[open] > summary::after {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content: "\f077";
+}

data/app/components/f_components/dropdown/component.html.erb

@@ -0,0 +1,10 @@
+<details class="Dropdown h-10 w-full bg-white rounded border-2 border-gray-lt open:border-primary <%= @class %>">
+  <summary class="Dropdown-label px-5 h-full flex items-center cursor-pointer <%= @label_class %>">
+    <%= icon %>
+    <%= label %>
+  </summary>
+
+  <div class="relative shadow-md rounded bg-white z-10 mt-1 md:inset-auto <%= padding_class %> <%= content_class %>">
+    <%= content %>
+  </div>
+</details>

data/app/components/f_components/dropdown/component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module FComponents
+  module Dropdown
+    class Component < Base
+      attributes :label, icon: nil, class: nil, label_class: nil, content_class: nil, padding: true
+
+      private
+
+      def icon
+        @icon ? fa_icon(@icon, class: 'mr-5') : nil
+      end
+
+      def padding_class
+        'p-5' if padding
+      end
+    end
+  end
+end

data/app/components/f_components/dropdown/component.scss

@@ -0,0 +1,10 @@
+.Dropdown {
+  &-label {
+    list-style: none;
+
+    &::marker {
+      display: none;
+    }
+  }
+}
+

data/app/components/f_components/form_field/component.html.erb

@@ -0,0 +1,25 @@
+<%= tag.div(**container_options) do %>
+  <% if label? %>
+    <%= form.label @attribute_name, sanitize(label_options.delete(:text)), class: label_options[:class] %>
+  <% end %>
+  <% if icon? %>
+    <%= fa_icon icon_position_options[:icon], **icon_position_options.except(:icon) %>
+  <% end %>
+  <% if select_field? %>
+    <%=
+      form.select(
+        @attribute_name,
+        options_for_select(select_options[:collection], select_options[:selected]),
+        select_options.except(:collection, :selected),
+        **field_options
+      )
+    %>
+  <% else %>
+    <%= form.text_field @attribute_name, **field_options %>
+  <% end %>
+  <% if field_with_error? %>
+    <% field_errors.each do |field_error| %>
+      <span class="Form-errorMessage"><%= field_error %></span>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/f_components/form_field/component.rb

@@ -0,0 +1,124 @@
+# frozen_string_literal: true
+
+module FComponents
+  module FormField
+    class Component < Base
+      attr_reader :attribute_name, :options, :form
+
+      def initialize(form, attribute_name, **options)
+        @form = form
+        @attribute_name = attribute_name
+        @options = options
+
+        define_elements_classes
+      end
+
+      private
+
+      def define_elements_classes
+        define_container_classes
+        define_label_classes
+        define_field_classes
+        define_icon_classes
+      end
+
+      def define_container_classes
+        container_classes = %w[Form-inputGroup w-full]
+        container_classes << container_options[:class]
+
+        container_options[:class] = container_classes.compact.join(' ')
+      end
+
+      def define_label_classes
+        label_classes = %w[Form-label w-full]
+        label_classes << label_options[:class]
+
+        label_options[:class] = label_classes.compact.join(' ')
+      end
+
+      def define_field_classes
+        field_classes = %w[Form-input w-full]
+
+        field_classes << input_icon_position_class if icon?
+        field_classes << 'Form-input--error' if field_with_error?
+        field_classes << field_options[:class]
+
+        field_options[:class] = field_classes.compact.join(' ')
+      end
+
+      def define_icon_classes
+        return unless icon?
+
+        icon_classes = ['Form-icon', icon_position_class, icon_position_options[:class]]
+
+        icon_position_options[:class] = icon_classes.compact.join(' ')
+      end
+
+      def icon_position_options
+        return @icon_position_options if defined? @icon_position_options
+
+        @icon_position_options = icon_options[:leading_icon] || icon_options[:trailing_icon]
+      end
+
+      def container_options
+        @container_options ||= options[:container_options].to_h
+      end
+
+      def label_options
+        @label_options ||= options[:label_options].to_h
+      end
+
+      def field_options
+        @field_options ||= options[:field_options].to_h
+      end
+
+      def icon_options
+        @icon_options ||= options[:icon_options].to_h
+      end
+
+      def select_options
+        return @select_options if defined?(@select_options)
+
+        @select_options = field_options.delete(:select_options).to_h
+      end
+
+      def field_errors
+        return [] if @form.object.nil?
+
+        @field_errors = @form.object.errors[@attribute_name]
+      end
+
+      def input_icon_position_class
+        leading_icon? ? 'Form-input--withLeftIcon' : 'Form-input--withRightIcon'
+      end
+
+      def icon_position_class
+        leading_icon? ? 'Form-iconLeft' : 'Form-iconRight'
+      end
+
+      def icon?
+        icon_position_options.present?
+      end
+
+      def label?
+        label_options[:text] != false
+      end
+
+      def leading_icon?
+        icon_options[:leading_icon].present?
+      end
+
+      def trailing_icon?
+        icon_options[:trailing_icon].present?
+      end
+
+      def field_with_error?
+        field_errors.any?
+      end
+
+      def select_field?
+        select_options.present?
+      end
+    end
+  end
+end

data/app/components/f_components/resource_table/component.html.erb

@@ -0,0 +1,17 @@
+<table class="w-full hidden <%= table_layout %> <%= @class %>">
+  <%= table_header %>
+  <tbody class="text-sm">
+    <% resources.each do |resource| %>
+      <%= table_row(resource, class: 'even:bg-gray-ltr') %>
+    <% end %>
+  </tbody>
+</table>
+
+<div class="md:hidden <%= @class %>">
+  <% resources.each_with_index do |resource| %>
+    <%= mobile_header(resource, class: 'bg-white border-b border-gray-lt') do %>
+      <%= mobile_rows(resource, class: 'flex flex-col space-y-5 mt-5') %>
+      <%= link_to_resource(resource, display_as: :button) %>
+    <% end %>
+  <% end %>
+</div>