vident-view_component 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 5590c317d217331de001e42e69cf50f15b0423fb7d3e82ae2a504cc9c3432222
+  data.tar.gz: 6e402b5447b169422a2a4f545a03153f978cc6af6ebd3b839c1aee07e4f4e5e9
+SHA512:
+  metadata.gz: d6a127daebc5279eae2c0e956463a41c044b45b9d70befbcb22081f942bc0ef45f727b30bb0b8bcb00dcc68304d847477629641925d78859dad0493abaa695f0
+  data.tar.gz: 63fd79022fec01b0ab59c62fa95097acd17ed97ba0a6a23f65c55ef25d2678876cf03e3e6089ddfd0fd7fa53909f3eadc4b12b975da73bd40ae63716b7f4e7e6

data/README.md

@@ -0,0 +1,165 @@
+# Vident::ViewComponent
+Short description and motivation.
+
+
+
+# Examples
+
+Before we dive into a specific example note that there are some components implemented in the `test/dummy/app/components`.
+
+Try them out by starting Rails:
+
+```bash
+cd test/dummy
+bundle install
+rails assets:precompile
+rails s
+```
+
+and visiting http://localhost:3000
+
+
+## A Vident component example (without Stimulus)
+
+First is an example component that uses `Vident::ViewComponent::Base` but no Stimulus features. 
+
+It is an avatar component that can either be displayed as an image or as initials. It supports numerous sizes and shapes and can optionally have a border. It also generates a cache key for use in fragment caching or etag generation.
+
+```ruby
+class AvatarComponent < ::Vident::ViewComponent::Base
+  include ::Vident::Tailwind
+  include ::Vident::ViewComponent::Caching
+
+  no_stimulus_controller
+  with_cache_key :attributes
+
+  attribute :url, allow_nil: true
+  attribute :initials, allow_nil: false
+
+  attribute :shape, default: :circle
+
+  attribute :border, default: false
+
+  attribute :size, default: :normal
+
+  private
+
+  def default_html_options
+    if image_avatar?
+      { class: "inline-block object-contain", src: url, alt: t(".image") }
+    else
+      { class: "inline-flex items-center justify-center bg-gray-500" }
+    end
+  end
+
+  def element_classes
+    [size_classes, shape_class, border? ? "border" : ""]
+  end
+
+  alias_method :image_avatar?, :url?
+
+  def shape_class
+    (shape == :circle) ? "rounded-full" : "rounded-md"
+  end
+
+  def size_classes
+    case size
+    when :tiny
+      "w-6 h-6"
+    when :small
+      "w-8 h-8"
+    when :medium
+      "w-12 h-12"
+    when :large
+      "w-14 h-14"
+    when :x_large
+      "sm:w-24 sm:h-24 w-16 h-16"
+    when :xx_large
+      "sm:w-32 sm:h-32 w-24 h-24"
+    else
+      "w-10 h-10"
+    end
+  end
+
+  def text_size_class
+    case size
+    when :tiny
+      "text-xs"
+    when :small
+      "text-xs"
+    when :medium
+      "text-lg"
+    when :large
+      "sm:text-xl text-lg"
+    when :extra_large
+      "sm:text-2xl text-xl"
+    else
+      "text-medium"
+    end
+  end
+end
+```
+
+```erb
+<%= render root(
+             element_tag: image_avatar? ? :img : :div,
+             html_options: default_html_options
+           ) do %>
+  <% unless image_avatar? %>
+    <span class="<%= text_size_class %> font-medium leading-none text-white"><%= initials %></span>
+  <% end %>
+<% end %>
+```
+
+Example usages:
+
+```erb
+<%= render AvatarComponent.new(url: "https://someurl.com/avatar.jpg", initials: "AB" size: :large) %>
+<%= render AvatarComponent.new(url: "https://someurl.com/avatar.jpg", html_options: {alt: "My alt text", class: "object-scale-down"}) %>
+<%= render AvatarComponent.new(initials: "SG", size: :small) %>
+<%= render AvatarComponent.new(initials: "SG", size: :large, html_options: {class: "border-2 border-red-600"}) %>
+```
+
+The following is rendered when used `render AvatarComponent.new(initials: "SG", size: :small, border: true)`:
+
+```html
+<div class="avatar-component w-8 h-8 rounded-full border inline-flex items-center justify-center bg-gray-500" id="avatar-component-9790427-12">
+  <span class="text-xs font-medium leading-none text-white">SG</span>
+</div>
+```
+
+The following is rendered when used `render AvatarComponent.new(url: "https://i.pravatar.cc/300", initials: "AB", html_options: {alt: "My alt text", class: "block"})`:
+
+```html
+<img src="https://i.pravatar.cc/300" alt="My alt text" class="avatar-component w-10 h-10 rounded-full object-contain block" id="avatar-component-7083941-11">
+```
+
+----
+
+![Example](examples/avatar.png)
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem "vident-view_component"
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install vident-view_component
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,8 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"

data/lib/tasks/vident/view_component_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :vident_view_component do
+#   # Task goes here
+# end

data/lib/vident/view_component/base.rb

@@ -0,0 +1,13 @@
+module Vident
+  module ViewComponent
+    class Base < ::ViewComponent::Base
+      include ::Vident::Component
+
+      # Helper to create the main element
+      def parent_element(**options)
+        @parent_element ||= RootComponent.new(**parent_element_attributes(options))
+      end
+      alias_method :root, :parent_element
+    end
+  end
+end

data/lib/vident/view_component/engine.rb

@@ -0,0 +1,17 @@
+module Vident
+  module ViewComponent
+    class Engine < ::Rails::Engine
+      lib_path = File.expand_path("../../../../lib/", __FILE__)
+      config.autoload_paths << lib_path
+      config.eager_load_paths << lib_path
+
+      config.before_initialize do
+        Rails.autoloaders.each do |autoloader|
+          autoloader.inflector.inflect(
+            "version" => "VERSION"
+          )
+        end
+      end
+    end
+  end
+end

data/lib/vident/view_component/root_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Vident
+  module ViewComponent
+    class RootComponent < ::ViewComponent::Base
+      include ::Vident::RootComponent
+
+      if Gem.loaded_specs.has_key? "better_html"
+        begin
+          include ::Vident::BetterHtml::RootComponent
+        rescue
+          raise "if `better_html`` is being used you must install `vident-better_html"
+        end
+      end
+
+      SELF_CLOSING_TAGS = Set[:area, :base, :br, :col, :embed, :hr, :img, :input, :link, :meta, :param, :source, :track, :wbr].freeze
+
+      def target_tag(tag_name, targets, **options, &block)
+        parsed = parse_targets(Array.wrap(targets))
+        options[:data] ||= {}
+        options[:data].merge!(build_target_data_attributes(parsed))
+        content = view_context.capture(&block) if block
+        view_context.content_tag(tag_name, content, options)
+      end
+
+      def call
+        # Generate outer tag options and render
+        tag_type = content_tag_type
+        options = content_tag_options
+        if SELF_CLOSING_TAGS.include?(tag_type)
+          view_context.tag(tag_type, options)
+        else
+          view_context.content_tag(tag_type, content, options)
+        end
+      end
+
+      private
+
+      def content_tag_options
+        options = @html_options&.dup || {}
+        data_attrs = tag_data_attributes
+        options[:data] = options[:data].present? ? data_attrs.merge(options[:data]) : data_attrs
+        return options unless @id
+        options.merge(id: @id)
+      end
+
+      def content_tag_type
+        @element_tag.presence || :div
+      end
+    end
+  end
+end

data/lib/vident/view_component/version.rb

@@ -0,0 +1,5 @@
+module Vident
+  module ViewComponent
+    VERSION = "0.1.0"
+  end
+end

data/lib/vident/view_component.rb

@@ -0,0 +1,7 @@
+require "vident/view_component/version"
+require "vident/view_component/engine"
+
+module Vident
+  module ViewComponent
+  end
+end

metadata

@@ -0,0 +1,114 @@
+--- !ruby/object:Gem::Specification
+name: vident-view_component
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Stephen Ierodiaconou
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2023-04-01 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '8'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '8'
+- !ruby/object:Gem::Dependency
+  name: vident
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.8.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.8.0
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '1'
+- !ruby/object:Gem::Dependency
+  name: view_component
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.74.1
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '4'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.74.1
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '4'
+description: Vident with ViewComponent
+email:
+- stevegeek@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- Rakefile
+- lib/tasks/vident/view_component_tasks.rake
+- lib/vident/view_component.rb
+- lib/vident/view_component/base.rb
+- lib/vident/view_component/engine.rb
+- lib/vident/view_component/root_component.rb
+- lib/vident/view_component/version.rb
+homepage: https://github.com/stevegeek/vident-view_component
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/stevegeek/vident-view_component
+  source_code_uri: https://github.com/stevegeek/vident-view_component
+  changelog_uri: https://github.com/stevegeek/vident-view_component/blob/main/CHANGELOG.md
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.4.6
+signing_key:
+specification_version: 4
+summary: Vident with ViewComponent
+test_files: []