fluxbit_view_components 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 16de56192c4f954e22b5391bbd8e94970a8345ede43ffaf8866050222a8d486a
+  data.tar.gz: fb3a6c03297fc0836ee3c61005e530cc32640e0c97dbc872945b661e6e2b95c6
+SHA512:
+  metadata.gz: 9127a488dc9bec5cc886886855edb7649e62a9ce36406e0c9aef4f956eb392fd9f21f42473459885eeb9758f19528c3185bd8729398852d91e17a27168a6cb40
+  data.tar.gz: 3bced6391398780c7877563c35f406ede7c4dc838c2ac9e410c99db815c1c58686d79aa034eff979c561010f191701329a7daa9c857ed06b521b6441ff9c502d

data/LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright 2021 Dan Gamble
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,86 @@
+# Fluxbit ViewComponents
+
+Fluxbit ViewComponents is an implementation of the Fluxbit Design System using [ViewComponent](https://github.com/github/view_component).
+
+<div style="text-align: center;">
+  <img src="docs/fluxbit.png" alt="Fluxbit ViewComponents" width="300" />
+</div>
+
+## Preview
+
+I don't have a site to host the lookbook. Sorry.
+
+## Usage
+
+Render Fluxbit ViewComponents:
+
+```erb
+<%= fx_card(title: "Title") do %>
+  <p>Card example</p>
+<% end %>
+```
+
+## Dependencies
+
+- [Anyicon](https://github.com/arthurmolina/anyicon)
+
+## Installation
+
+Add `fluxbit_view_components` to your Gemfile:
+
+```bash
+bundle add fluxbit_view_components
+```
+
+Run installer:
+```bash
+bin/rails fluxbit_view_components:install
+```
+
+## Development
+
+To get started:
+
+1. Run: `bundle install`
+2. Run: `yarn install`
+3. Run: `bin/dev`
+
+It will open demo app with component previews on `localhost:3000`. You can change components and they will be updated on page reload. Component previews located in `demo/test/components/previews`.
+
+![Lookbook](/docs/lookbook.png)
+
+To run tests:
+
+```bash
+rake
+```
+
+## Releases
+
+The library follows [semantic versioning](https://semver.org/). To draft a new release you need to run `bin/release` with a new version number:
+
+```bash
+bin/release VERSION
+```
+
+Where the VERSION is the version number you want to release. This script will update the version in the gem and push it to GitHub and Rubygems automatically.
+
+To release a new version of npm package update the package.json file with the new version number and run:
+
+```bash
+npm run release
+```
+
+After that make sure to commit changes in package.json.
+
+## Documentation
+
+For more information, check out the following resources:
+
+- [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md): Guidelines for contributing to this project and fostering a welcoming community.
+- [CONTRIBUTING.md](CONTRIBUTING.md): Instructions on how to contribute to the project, including setting up your environment and submitting changes.
+- [PULL_REQUEST_TEMPLATE.md](PULL_REQUEST_TEMPLATE.md): Template for submitting pull requests to ensure consistency and quality.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/components/fluxbit/alert_component.rb

@@ -0,0 +1,126 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::AlertComponent` is a customizable alert component that extends `Fluxbit::Component`.
+# It provides various options to display alert messages with different styles, icons, and behaviors
+# such as close functionality and animations.
+#
+# Example usage:
+#   = render Fluxbit::AlertComponent.new(color: :success, icon: "check").with_content("Alert message")
+#
+class Fluxbit::AlertComponent < Fluxbit::Component
+  include Fluxbit::Config::AlertComponent
+
+  ##
+  # Initializes the alert component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the alert.
+  # @option props [Symbol, String] :color (:info) The color style of the alert.
+  # @option props [Symbol, String, Boolean] :icon (:default) The icon to display in the alert or `false` to omit.
+  # @option props [String] :class_icon ('') Additional CSS classes for the icon.
+  # @option props [Boolean] :can_close (true) Determines if the alert can be closed.
+  # @option props [String] :remove_class ('') Classes to remove from the default class list.
+  # @option props [Integer] :dismiss_timeout (3000) The timeout in milliseconds before the alert dismisses itself.
+  # @option props [Boolean] :fade_in_animation (true) Determines if the alert should fade in.
+  # @option props [Symbol] :out_animation (:fade_out) The type of fade out/dismiss animation.
+  # @option props [Boolean] :all_rounded (true) Determines if the alert has rounded corners.
+  # @option props [Hash] **props Remaining options declared as HTML attributes.
+  #
+  # @return [Fluxbit::AlertComponent]
+  #
+  # @example
+  #   = render Fluxbit::AlertComponent.new(color: :success, icon: "check").with_content("Alert message")
+  #
+  def initialize(**props)
+    super
+    @props = props
+    @color = define_color(@props.delete(:color) || @@color)
+    @icon = define_icon(@props.delete(:icon) || :default, @props.delete(:class_icon) || "")
+    @can_close = @props[:can_close].nil? ? @@can_close : @props.delete(:can_close)
+    @all_rounded = @props[:all_rounded].nil? ? @@all_rounded : @props.delete(:all_rounded)
+    @props["id"] = fx_id if @props["id"].nil?
+    @props[:role] = "alert"
+    prop_fade_in_automation = @props.delete(:fade_in_animation)
+
+    animation_props(
+      dismiss_timeout: [ (@props.delete(:dismiss_timeout) || @@dismiss_timeout).to_i, 0 ].max,
+      fade_in_animation: prop_fade_in_automation.nil? ? @@fade_in_animation : prop_fade_in_automation,
+      out_animation: @props.delete(:out_animation) || @@out_animation
+    )
+    declare_classes
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+  end
+
+  def animation_props(dismiss_timeout:, fade_in_animation:, out_animation:)
+    return if [ :dont_remove, nil ].include?(out_animation) || dismiss_timeout.to_i == 0
+
+    @props["data-controller"] = "notification"
+    @props["data-action"] = "notification#hide"
+    @props["data-notification-delay-value"] = dismiss_timeout.to_s
+
+    add(to: @props, class: "transition transform duration-1000 hidden")
+
+    if fade_in_animation
+      @props["data-transition-enter-from"] = "opacity-0"
+      @props["data-transition-enter-to"] = "opacity-100"
+    else
+      @props["data-transition-enter-from"] = "opacity-100"
+      @props["data-transition-enter-to"] = "opacity-100"
+    end
+
+    @props["data-transition-leave-from"] = styles[:animations][out_animation.to_sym][:from]
+    @props["data-transition-leave-to"] = styles[:animations][out_animation.to_sym][:to]
+  end
+
+  def call
+    content_tag :div, @props do
+      concat @icon
+      concat content_tag(:div, content, class: "ml-3 text-sm font-medium")
+      concat close_button
+    end
+  end
+
+  private
+
+  def declare_classes
+    add to: @props,
+        first_element: true,
+        class: [
+          styles[:colors][@color],
+          styles[:all_rounded][@all_rounded ? :on : :off],
+          styles[:base]
+        ]
+  end
+
+  def define_color(color)
+    case color.to_sym
+    when :timedout, :alert then :danger
+    when *styles[:colors].keys then color
+    else @@color # :notice included
+    end
+  end
+
+  def define_icon(icon, class_icon = "")
+    return "" if icon == false
+    icon = icon || @@icon
+    return anyicon(icon: icon, class: class_icon) if icon != :default
+
+    anyicon(icon: "heroicons_solid:#{styles[:default_icons][@color]}", class: class_icon + " w-4 h-4")
+  end
+
+  def close_button
+    return "" unless @can_close
+
+    b_props = {
+      "aria-label" => "Close",
+      "data-dismiss-target" => "##{@props["id"]}",
+      type: "button"
+    }
+
+    add to: b_props, class: [ styles[:close_button][:base], styles[:close_button][:colors][@color] ]
+    content_tag :button, b_props do
+      concat content_tag(:span, "Dismiss", class: "sr-only")
+      concat anyicon(icon: "heroicons_outline:x-mark", class: "w-5 h-5")
+    end
+  end
+end

data/app/components/fluxbit/avatar_component.rb

@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+
+# The `Fluxbit::AvatarComponent` is a component for rendering customizable avatars.
+# It extends `Fluxbit::Component` and provides options for configuring the avatar's
+# appearance and behavior. You can control the avatar's color, placeholder initials,
+# status, size, and other attributes. The avatar can display an image or a placeholder
+# icon if no image is provided.
+class Fluxbit::AvatarComponent < Fluxbit::Component
+  include Fluxbit::Config::AvatarComponent
+
+  # Initializes the avatar component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the avatar.
+  # @option props [String] :color The color of the avatar border.
+  # @option props [String] :placeholder_initials The initials to display as a placeholder.
+  # @option props [Symbol] :status The status of the avatar (:online, :busy, :offline, :away).
+  # @option props [String] :status_position The position of the status indicator.
+  # @option props [Boolean] :rounded Whether the avatar should have rounded corners.
+  # @option props [Symbol, String] :size The size of the avatar.
+  # @option props [String] :src The source URL of the avatar image.
+  # @option props [String] :remove_class Classes to be removed from the default avatar class list.
+  # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the avatar container.
+  def initialize(**props)
+    super
+    @props = props
+    @color = @props.delete(:color) || @@color
+    @placeholder_initials = @props.delete(:placeholder_initials) || @@placeholder_initials
+    @status = @props[:status].nil? ? @@status : @props.delete(:status) # online, busy, offline, away
+    @status_position = (@props.delete(:status_position) || @@status_position).to_s.split("_").map(&:to_sym)
+    @rounded = @props[:rounded].nil? ? @@rounded : @props.delete(:rounded)
+    @size = @props.delete(:size) || @@size
+    @src = @props[:src]
+    declare_color
+    declare_classes
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+  end
+
+  def declare_color
+    return unless @color.present?
+    add to: @props,
+        first_element: true,
+        class: "#{styles[:bordered]} #{@color.in?(styles[:color].keys) ? styles[:color][@color] : styles[:color][:info]}"
+  end
+
+  def declare_classes
+    add to: @props,
+        first_element: true,
+        class: [
+          (!@placeholder_initials && @src.nil? ? styles[:placeholder_icon][:base] : ""),
+          @placeholder_initials ? styles[:initials][:base] : "",
+          styles[@rounded ? :rounded : :not_rounded][:base],
+          (@size.in?(styles[:size].keys) ? styles[:size][@size] : styles[:size][:md])
+        ].join(" ")
+  end
+
+  def avatar_itself
+    return content_tag(:img, "", @props) unless @src.nil? || @placeholder_initials
+
+    content_tag :div, @props do
+      if @placeholder_initials
+        content_tag :span, @placeholder_initials, class: styles[:initials][:text]
+      else
+        placeholder_icon
+      end
+    end
+  end
+
+  def placeholder_icon
+    svg_attributes = {
+      class: [ "absolute", "text-gray-400", "-left-1", placeholder_size ].join(" "),
+      fill: "currentColor",
+      viewBox: "0 0 20 20",
+      xmlns: "http://www.w3.org/2000/svg"
+    }
+
+    path_attributes = {
+      "fill-rule": "evenodd",
+      d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
+      "clip-rule": "evenodd"
+    }
+
+    content_tag(:svg, svg_attributes) do
+      content_tag(:path, "", path_attributes)
+    end
+  end
+
+  def placeholder_size
+    return styles[:placeholder_icon][:size][@size] if @size.in?(styles[:placeholder_icon][:size].keys)
+
+    styles[:size][:md]
+  end
+
+  def dot_indicator
+    content_tag :span,
+                "",
+                class: [
+                  styles[:status][:base],
+                  styles[:status][:options][@status],
+                  styles[@rounded ? :rounded : :not_rounded][:status_position][@status_position[0]],
+                  styles[@rounded ? :rounded : :not_rounded][:status_position][@status_position[1]][@size]
+                ].join(" ")
+  end
+
+  def call
+    return avatar_itself unless @status
+
+    content_tag :div, class: "relative" do
+      concat avatar_itself
+      concat dot_indicator
+    end
+  end
+end

data/app/components/fluxbit/avatar_group_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::AvatarGroupComponent` is a component for rendering a group of avatars.
+# It extends `Fluxbit::Component` and provides options for configuring the appearance
+# and behavior of the avatar group. You can control the avatars and gravatars displayed
+# within the group. The component supports rendering multiple avatars and gravatars,
+# each of which can be styled or customized through various properties.
+class Fluxbit::AvatarGroupComponent < Fluxbit::Component
+  include Fluxbit::Config::AvatarComponent
+  renders_many :avatars, Fluxbit::AvatarComponent
+  renders_many :gravatars, Fluxbit::GravatarComponent
+
+  def call
+    content_tag :div, class: styles[:group] do
+      avatars.each do |avatar|
+        concat render(avatar)
+      end
+      gravatars.each do |gravatar|
+        concat render(gravatar)
+      end
+    end
+  end
+end

data/app/components/fluxbit/badge_component.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::BadgeComponent` is a customizable badge component that extends `Fluxbit::Component`.
+# It allows you to create badges with different colors, sizes, borders, and shapes (pill).
+class Fluxbit::BadgeComponent < Fluxbit::Component
+  include Fluxbit::Config::BadgeComponent
+  renders_one :popover, lambda { |**props, &block|
+    @popover_props = props
+    @popover_text = block.call
+  }
+  renders_one :tooltip, lambda { |**props, &block|
+    @tooltip_props = props
+    @tooltip_text = block.call
+  }
+
+  ##
+  # Initializes the badge component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the badge.
+  # @option props [Symbol, String] :color The color style of the badge.
+  # @option props [Boolean] :pill (false) Determines if the badge is pill-shaped.
+  # @option props [Symbol, Integer] :size The size of the badge (e.g., `0` to `1`).
+  # @option props [Symbol, String] :perfect_rounded (:none) Define if the bage is a perfect rounded with size (e.g., `0` to `5`).
+  # @option props [Symbol, String] :as The HTML tag to use for the badge (e.g., `:span`, `:div`).
+  # @option props [String] :remove_class ('') Classes to remove from the default class list.
+  # @option props [String] :popover_text (nil) Popover text (from Fluxbit::Component).
+  # @option props [Symbol] :popover_placement (:right) Popover placement (e.g., `:right`, `:left`, `:top`, `:bottom`) (from Fluxbit::Component).
+  # @option props [Symbol] :popover_trigger (:hover) Popover trigger (e.g., `:hover`, `:click`) (from Fluxbit::Component).
+  # @option props [String] :tooltip_text (nil) Tooltip text (from Fluxbit::Component).
+  # @option props [Symbol] :tooltip_placement (:right) Tooltip placement (e.g., `:right`, `:left`, `:top`, `:bottom`) (from Fluxbit::Component).
+  # @option props [Symbol] :tooltip_trigger (:hover) Tooltip trigger (e.g., `:hover`, `:click`) (from Fluxbit::Component).
+  # @option props [Hash] **props Remaining options declared as HTML attributes.
+  #
+  # @return [Fluxbit::BadgeComponent]
+  def initialize(**props)
+    super
+    @props = props
+    @color = @props.delete(:color) || @@color
+    @pill = @props.delete(:pill) || @@pill
+    @size = @props.delete(:size) || @@size
+    @perfect_rounded = @props.delete(:perfect_rounded) || @@perfect_rounded
+    @notification = @props.delete(:notification) || @@notification
+    @as = @props.delete(:as) || @@as
+    add(class: badge_classes, to: @props, first_element: true)
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+  end
+
+  def before_render
+    add_popover_or_tooltip
+  end
+
+  def call
+    concat(content_tag(@as, content, @props) + render_popover_or_tooltip.to_s)
+  end
+
+  private
+
+  def badge_classes
+    @badge_classes ||= begin
+      base_classes = [
+        styles[:base],
+        styles[:colors][@color.to_sym],
+        styles[:sizes][@size.to_i],
+        styles[:perfect_rounded][@perfect_rounded.to_i],
+        notification_classes
+      ]
+      base_classes << "rounded-full" if @pill
+      base_classes.join(" ")
+    end
+  end
+
+  def notification_classes
+    return "" unless @notification.present?
+    ([ styles[:notification][:default] ] + @notification.split(" ").map do |position|
+      styles[:notification][:positions][position.to_sym]
+    end).join(" ")
+  end
+end

data/app/components/fluxbit/button_component.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::ButtonComponent` is a customizable button component that extends `Fluxbit::Component`.
+# It allows you to create buttons with various styles, sizes, colors, and supports additional
+# features like popovers and tooltips.
+class Fluxbit::ButtonComponent < Fluxbit::Component
+  include Fluxbit::Config::ButtonComponent
+  renders_one :popover, lambda { |**props, &block|
+    @popover_props = props
+    @popover_text = block.call
+  }
+  renders_one :tooltip, lambda { |**props, &block|
+    @tooltip_props = props
+    @tooltip_text = block.call
+  }
+
+  ##
+  # Initializes the button component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the button.
+  # @option props [Object] :form (nil) The form object associated with the button.
+  # @option props [Symbol, String] :as The HTML tag to use for the button (e.g., `:button`, `:a`).
+  # @option props [Boolean] :pill (false) Determines if the button has pill-shaped edges.
+  # @option props [Symbol, String] :color The color style of the button.
+  # @option props [Symbol, String] :size The size of the button (e.g., `0` to `4`).
+  # @option props [Boolean] :disabled (false) Sets the button to a disabled state.
+  # @option props [String] :remove_class ('') Classes to remove from the default class list.
+  # @option props [String] :popover_text (nil) Popover text (from Fluxbit::Component).
+  # @option props [Symbol] :popover_placement (:right) Popover placement (e.g., `:right`, `:left`, `:top`, `:bottom`) (from Fluxbit::Component).
+  # @option props [Symbol] :popover_trigger (:hover) Popover trigger (e.g., `:hover`, `:click`) (from Fluxbit::Component).
+  # @option props [String] :tooltip_text (nil) Tooltip text (from Fluxbit::Component).
+  # @option props [Symbol] :tooltip_placement (:right) Tooltip placement (e.g., `:right`, `:left`, `:top`, `:bottom`) (from Fluxbit::Component).
+  # @option props [Symbol] :tooltip_trigger (:hover) Tooltip trigger (e.g., `:hover`, `:click`) (from Fluxbit::Component).
+  # @option props [Hash] **props Remaining options declared as HTML attributes.
+  #
+  # @return [Fluxbit::ButtonComponent]
+  def initialize(**props)
+    super
+    @props = props
+    @form = @props.delete(:form)
+    @as = @props.delete(:as) || @@as
+    @pill = @props.delete(:pill) || @@pill
+    @color = @props.delete(:color) || @@color
+    @grouped = @props.delete(:grouped) || false
+    @first_button = @props.delete(:first_button) || false
+    @last_button = @props.delete(:last_button) || false
+    @outline = @color.end_with?("_outline")
+    declare_size(@props.delete(:size) || @@size)
+    declare_disabled
+    declare_classes
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+  end
+
+  def declare_size(size)
+    return if size.blank?
+
+    add(
+      class: (styles[:size][size.to_i]),
+      to: @props,
+      first_element: true
+    )
+  end
+
+  def declare_classes
+    add(class: styles[:pill][@pill ? :on : :off], to: @props, first_element: true) unless @outline
+    add(class: styles[:outline][:pill][@pill ? :on : :off], to: @props, first_element: true) if @outline
+    add(class: styles[:outline][@outline ? :on : :off], to: @props, first_element: true)
+    add(class: styles[:base], to: @props, first_element: true)
+    add(
+      class: (@color.in?(styles[:colors].keys) ? styles[:colors][@color] : styles[:colors][:info]),
+      to: @props,
+      first_element: true
+    )
+    add(class: styles[:inner][:base], to: @props) if @grouped
+    add(class: styles[:inner][:position][:start], to: @props) if @grouped && @first_button
+    add(class: styles[:inner][:position][:end], to: @props) if @grouped && @last_button
+    add(class: styles[:inner][:position][:middle], to: @props) if @grouped && !@last_button && !@first_button
+  end
+
+  def declare_disabled
+    return unless @props[:disabled].present? && @props[:disabled] == true
+
+    add(class: styles[:disabled], to: @props, first_element: true)
+  end
+
+  def before_render
+    add_popover_or_tooltip
+  end
+
+  def call
+    concat(
+      (@form.nil? ? content_tag(@as, content, @props) : @form.submit(**@props)) +
+      render_popover_or_tooltip.to_s
+    )
+  end
+end

data/app/components/fluxbit/button_group_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::ButtonGroupComponent` is a component for rendering a group of buttons.
+# It extends `Fluxbit::Component` and provides options for configuring the appearance
+# and behavior of the button group. You can control the buttons displayed
+# within the group. The component supports rendering multiple buttons,
+# each of which can be styled or customized through various properties.
+class Fluxbit::ButtonGroupComponent < Fluxbit::Component
+  attr_accessor :buttons_group
+  include Fluxbit::Config::ButtonComponent
+  # renders_many :buttons, Fluxbit::ButtonComponent
+
+  renders_many :buttons, lambda { |**props, &block|
+    @buttons_group << ComponentObj.new(props, view_context.capture(&block))
+  }
+
+  # Initializes the button group component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the button group.
+  # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the button group container.
+  def initialize(**props)
+    super
+    @props = props
+    @buttons_group = []
+    add class: styles[:group], to: @props
+  end
+
+  def call
+    buttons
+    content_tag :div, **@props do
+      @buttons_group.each_with_index do |button, index|
+        button_props = button.props || {}
+        button_content = button.content
+
+        button_props[:grouped] = true
+        button_props[:first_button] = true if index == 0
+        button_props[:last_button] = true if index == @buttons_group.size - 1
+
+        concat Fluxbit::ButtonComponent.new(**button_props).with_content(button_content).render_in(view_context)
+      end
+    end
+  end
+end