f_components 0.2.1

data/app/frontend/f_components/stylesheets/blocks/_button.scss

@@ -0,0 +1,189 @@
+$button-colors: (
+  "black": (
+    "base": $fc-clr-text,
+    "dark": #000,
+  ),
+  "primary": (
+    "base": $fc-clr-primary,
+    "dark": $fc-clr-primary--dk,
+  ),
+  "success": (
+    "base": $fc-clr-success,
+  ),
+  "secondary": (
+    "base": $fc-clr-secondary,
+    "dark": $fc-clr-secondary--dk,
+  ),
+  "error": (
+    "base": $fc-clr-error,
+  ),
+  "white": (
+    "base": #fff,
+    "dark": $fc-clr-border,
+    "text": $fc-clr-text,
+  ),
+  "warning": (
+    "base": $fc-clr-warning,
+    "text": $fc-clr-text,
+  ),
+) !default;
+
+$button-sizes: (
+  "smr": (
+    "width": 90px,
+    "height": 30px,
+  ),
+  "sm": (
+    "width": 190px,
+    "height": 40px,
+  ),
+  "base": (
+    "width": 284px,
+    "height": 40px,
+  ),
+  "lg": (
+    "width": 308px,
+    "height": 40px,
+  ),
+  "fullWidth": (
+    "width": 100%,
+    "height": 40px,
+  ),
+) !default;
+
+@mixin outlined($color) {
+  &.bt--outlined {
+    background-color: white;
+    color: $color;
+    border: solid 1px $color;
+
+    &-active,
+    &:hover {
+      background-color: rgba($color, $fc-opacity-button-hover);
+    }
+  }
+}
+
+// NOTE: Both min/max functions were added due to
+// the lack of them in the rubysass implementation
+//
+// More info:
+// https://github.com/sass/libsass/issues/2701
+// https://github.com/sass/sass/issues/2378#issuecomment-433868712
+@function f-max($numbers...) {
+  @return calc(min(#{$numbers}));
+}
+
+@function f-min($numbers...) {
+  @return calc(min(#{$numbers}));
+}
+
+@mixin generate-color-variants() {
+  @each $name, $colors in $button-colors {
+    $base: map-get($colors, "base");
+    $dark: map-get($colors, "dark") or darken($base, 10%);
+    $text: map-get($colors, "text") or white;
+
+    @include generate-color-variant($name, $base, $dark, $text);
+  }
+}
+
+@mixin generate-size-modifiers() {
+  @each $name, $sizes in $button-sizes {
+    $width: map-get($sizes, "width");
+    $height: map-get($sizes, "height");
+
+    &--#{$name} {
+      width: f-min($width, 100%);
+      max-width: f-min($width, 100%);
+      min-height: $height;
+      line-height: $height;
+    }
+  }
+}
+
+@mixin generate-color-variant($name, $color, $color--dk, $text-color) {
+  &--#{$name} {
+    background-color: $color;
+    color: $text-color;
+
+    &:hover {
+      background: $color--dk;
+    }
+
+    &:active,
+    &:hover,
+    &:visited {
+      color: $text-color;
+    }
+
+    @include outlined($color);
+  }
+}
+
+.bt {
+  text-decoration: none;
+  background: $fc-clr-primary;
+  border-radius: 2px;
+  color: white;
+  cursor: pointer;
+  display: block;
+  min-height: 40px;
+  line-height: 40px;
+  padding: 0 20px;
+  text-align: center;
+
+  @include generate-color-variants();
+  @include generate-size-modifiers();
+
+  &:hover {
+    background: $fc-clr-primary--dk;
+    text-decoration: none;
+  }
+
+  &--tertiary {
+    background-color: white;
+    color: $fc-clr-text-secondary;
+    border: 1px solid $fc-clr-text-secondary;
+
+    &:hover {
+      background-color: rgba($fc-clr-text-secondary, $fc-opacity-button-hover);
+    }
+
+    &:active {
+      background-color: rgba($fc-clr-primary, $fc-opacity-button-hover);
+      color: $fc-clr-primary;
+      border-color: $fc-clr-primary;
+    }
+  }
+
+  &--disabled,
+  &:disabled {
+    color: $fc-clr-text-secondary;
+    background-color: $fc-clr-disabled;
+    cursor: not-allowed !important;
+    border: none;
+
+    &:hover {
+      color: $fc-clr-text-secondary;
+      background-color: $fc-clr-disabled;
+    }
+  }
+
+  &--round {
+    border-radius: 40px;
+  }
+
+  &--icon {
+    padding: 0 15px;
+  }
+
+  &--rounded {
+    border-radius: 5px;
+    height: 40px;
+  }
+
+  &--fullWidth {
+    width: 100%;
+  }
+}

data/app/frontend/f_components/stylesheets/f_components.scss

@@ -0,0 +1,12 @@
+// variables
+@import "./variables/breakpoints";
+@import "./variables/colors";
+
+// blocks
+@import  "./blocks/button";
+
+// components
+@import  "../../../components/f_components/avatar/component";
+@import  "../../../components/f_components/button/component";
+@import  "../../../components/f_components/collapsible/component";
+@import  "../../../components/f_components/dropdown/component";

data/app/frontend/f_components/stylesheets/variables/_breakpoints.scss

@@ -0,0 +1,3 @@
+$fc-desktop-width: 1170px !default;
+$fc-tablet-width: 970px !default;
+$fc-mobile-width: 750px !default;

data/app/frontend/f_components/stylesheets/variables/_colors.scss

@@ -0,0 +1,19 @@
+$fc-clr-primary: #9c27b0 !default;
+$fc-clr-primary--dk: #6a0080 !default;
+$fc-clr-secondary: #f50057 !default;
+$fc-clr-secondary--dk: #bb002f !default;
+
+$fc-clr-text: #443344 !default;
+$fc-clr-text-secondary: #6f5d6f !default;
+
+$fc-clr-success: #33691e !default;
+$fc-clr-warning: #c6a700 !default;
+$fc-clr-error: #ab000d !default;
+
+$fc-clr-disabled: #a4a4a4 !default;
+
+$fc-clr-border: #ccc !default;
+
+$fc-clr-background: #fafafa !default;
+
+$fc-opacity-button-hover: 0.2 !default;

data/app/helpers/f_components/application_helper.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require 'webpacker/helper'
+
+module FComponents
+  module ApplicationHelper
+    include ::Webpacker::Helper
+
+    def current_webpacker_instance
+      FComponents.webpacker
+    end
+  end
+end

data/app/helpers/f_components/components_helper.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module FComponents
+  module ComponentsHelper
+    # Shorthand for rendering view_components from FComponents
+    #
+    # Usage:
+    #
+    #   <%= fcomponent :section, title: 'Greeting', classes: 'my--1' do %>
+    #     <p class="Txt--center">Hello world</p>
+    #   <% end %>
+    def fcomponent(name, *args, &block)
+      component_class = "FC::#{name.to_s.camelcase}::Component".constantize
+
+      render(component_class.new(*args), &block)
+    end
+    ruby2_keywords :fcomponent
+
+    # Shorthand for rendering view_components from your application
+    #
+    # Usage:
+    #
+    #   <%= component :card, classes: 'my--1' do %>
+    #     <p class="Txt--center">Hello world</p>
+    #   <% end %>
+    def component(name, *args, &block)
+      component_class = "#{name.to_s.camelcase}::Component".constantize
+
+      render(component_class.new(*args), &block)
+    end
+    ruby2_keywords :component
+  end
+end

data/app/helpers/f_components/icons_helper.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module FComponents
+  module IconsHelper
+    # Public: Creates a icon tag
+    # Examples:
+    #
+    # fa_icon('eye')
+    # #=> <i class="fas fa-eye"></i>
+    #
+    # fa_icon('eye', prefix: 'far')
+    # <i class="far fa-eye"></i>
+    #
+    # fa_icon('eye', class: 'strong space-x-2')
+    # #=> <i class="fas fa-eye strong space-x-2"></i>
+    #
+    # fa_icon('eye', class: 'strong space-x-2', text: 'my text')
+    # #=> <i class="fas fa-eye strong space-x-2"></i> my text
+    def fa_icon(name, options = {})
+      fa_prefix = options.delete(:prefix) { 'fas' }
+      icon_name = "fa-#{name}"
+      custom_classes = options[:class].presence
+      options[:class] = [fa_prefix, icon_name, custom_classes].compact.join(' ')
+      f_icon(options)
+    end
+
+    def f_icon(options)
+      text = options.delete(:text)
+      tag = content_tag(:i, nil, options)
+      tag << " #{text}" if text.present?
+      tag
+    end
+  end
+end

data/config/webpack/development.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
+const environment = require('./environment');
+
+module.exports = environment.toWebpackConfig();

data/config/webpack/environment.js

@@ -0,0 +1,3 @@
+const {environment} = require('@rails/webpacker');
+
+module.exports = environment;

data/config/webpack/production.js

@@ -0,0 +1,7 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'production'
+
+const environment = require('./environment')
+
+console.log('environment: ', environment)
+
+module.exports = environment.toWebpackConfig()

data/config/webpacker.yml

@@ -0,0 +1,89 @@
+default: &default
+  source_path: app/frontend/f_components
+  source_entry_path: packs
+  public_root_path: public
+  public_output_path: f-components-packs
+  resolved_paths: ['app/components/f_components']
+  webpack_compile_output: true
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
+  # Extract and emit a css file
+  extract_css: false
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
+  extensions:
+    - .mjs
+    - .js
+    - .sass
+    - .scss
+    - .css
+    - .module.sass
+    - .module.scss
+    - .module.css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+  compile: true
+
+  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
+  check_yarn_integrity: true
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
+  dev_server:
+    env_prefix: 'f_components'
+    https: false
+    host: 0.0.0.0
+    port: 3999
+    public: 0.0.0.0:3999
+    hmr: true
+    # Inline should be set to true if using HMR
+    inline: true
+    overlay: true
+    compress: true
+    disable_host_check: true
+    use_local_ip: false
+    quiet: false
+    pretty: false
+    headers:
+      'Access-Control-Allow-Origin': '*'
+    watch_options:
+      ignored: '**/node_modules/**'
+
+test:
+  <<: *default
+  compile: true
+
+  # Compile test packs to a separate directory
+  public_output_path: packs-test
+
+production:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: true
+
+  # Extract and emit a css file
+  extract_css: true
+
+  # Cache manifest.json for performance
+  cache_manifest: true

data/lib/f_components/engine.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module FComponents
+  class Engine < ::Rails::Engine
+    isolate_namespace FComponents
+
+    config.autoload_once_paths << "#{root}/app/helpers" if Rails.version.start_with?('7')
+
+    config.app_middleware.use(
+      Rack::Static,
+      urls: ['/f-components-packs'], root: FComponents::Engine.root.join('public')
+    )
+
+    initializer 'webpacker.proxy' do |app|
+      next if FComponents.webpacker&.config&.dev_server&.blank?
+
+      app.middleware.insert_before(
+        0, Webpacker::DevServerProxy, # "Webpacker::DevServerProxy" if Rails version < 5
+        ssl_verify_none: true,
+        webpacker: FComponents.webpacker
+      )
+    end
+
+    config.generators do |g|
+      g.test_framework :rspec
+    end
+  end
+end

data/lib/f_components/railtie.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module FComponents
+  class Railtie < ::Rails::Railtie
+    initializer 'f-components.view_helpers' do
+      ActiveSupport.on_load(:action_view) do
+        include FComponents::ComponentsHelper
+        include FComponents::IconsHelper
+      end
+    end
+  end
+end

data/lib/f_components/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module FComponents
+  VERSION = '0.2.1'
+end

data/lib/f_components.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+require 'f_components/version'
+require 'f_components/engine'
+require 'f_components/railtie' if defined?(Rails::Railtie)
+
+module FComponents
+  class << self
+    def webpacker
+      @webpacker ||= ::Webpacker::Instance.new(
+        root_path: FComponents::Engine.root,
+        config_path: FComponents::Engine.root.join('config', 'webpacker.yml')
+      )
+    end
+  end
+end
+
+FC = FComponents

metadata

@@ -0,0 +1,158 @@
+--- !ruby/object:Gem::Specification
+name: f_components
+version: !ruby/object:Gem::Version
+  version: 0.2.1
+platform: ruby
+authors:
+- Fretadao tech
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2023-07-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6'
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sass-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: view_component
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.27'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.27'
+- !ruby/object:Gem::Dependency
+  name: webpacker
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.3'
+description: Library of view_components
+email:
+- tech@fretadao.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- Rakefile
+- app/components/f_components/avatar/component.html.erb
+- app/components/f_components/avatar/component.rb
+- app/components/f_components/avatar/component.scss
+- app/components/f_components/base.rb
+- app/components/f_components/button/component.html.erb
+- app/components/f_components/button/component.rb
+- app/components/f_components/button/component.scss
+- app/components/f_components/collapsible/component.html.erb
+- app/components/f_components/collapsible/component.rb
+- app/components/f_components/collapsible/component.scss
+- app/components/f_components/dropdown/component.html.erb
+- app/components/f_components/dropdown/component.rb
+- app/components/f_components/dropdown/component.scss
+- app/components/f_components/form_field/component.html.erb
+- app/components/f_components/form_field/component.rb
+- app/components/f_components/resource_table/component.html.erb
+- app/components/f_components/resource_table/component.rb
+- app/components/f_components/table/component.html.erb
+- app/components/f_components/table/component.rb
+- app/components/f_components/table/component_controller.js
+- app/components/f_components/table/desktop/component.html.erb
+- app/components/f_components/table/desktop/component.rb
+- app/components/f_components/table/mobile/component.html.erb
+- app/components/f_components/table/mobile/component.rb
+- app/frontend/f_components/stylesheets/blocks/_button.scss
+- app/frontend/f_components/stylesheets/f_components.scss
+- app/frontend/f_components/stylesheets/variables/_breakpoints.scss
+- app/frontend/f_components/stylesheets/variables/_colors.scss
+- app/helpers/f_components/application_helper.rb
+- app/helpers/f_components/components_helper.rb
+- app/helpers/f_components/icons_helper.rb
+- config/webpack/development.js
+- config/webpack/environment.js
+- config/webpack/production.js
+- config/webpacker.yml
+- lib/f_components.rb
+- lib/f_components/engine.rb
+- lib/f_components/railtie.rb
+- lib/f_components/version.rb
+homepage: https://gitlab.com/fretadao/libs/f_components
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://gitlab.com/fretadao/libs/f_components
+  source_code_uri: https://gitlab.com/fretadao/libs/f_components
+  changelog_uri: https://gitlab.com/fretadao/libs/f_components
+  rubygems_mfa_required: 'false'
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.7.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.1.2
+signing_key: 
+specification_version: 4
+summary: Library of view_components
+test_files: []