vident-view_component 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: 5590c317d217331de001e42e69cf50f15b0423fb7d3e82ae2a504cc9c3432222
4
+ data.tar.gz: 6e402b5447b169422a2a4f545a03153f978cc6af6ebd3b839c1aee07e4f4e5e9
5
+ SHA512:
6
+ metadata.gz: d6a127daebc5279eae2c0e956463a41c044b45b9d70befbcb22081f942bc0ef45f727b30bb0b8bcb00dcc68304d847477629641925d78859dad0493abaa695f0
7
+ data.tar.gz: 63fd79022fec01b0ab59c62fa95097acd17ed97ba0a6a23f65c55ef25d2678876cf03e3e6089ddfd0fd7fa53909f3eadc4b12b975da73bd40ae63716b7f4e7e6
data/README.md ADDED
@@ -0,0 +1,165 @@
1
+ # Vident::ViewComponent
2
+ Short description and motivation.
3
+
4
+
5
+
6
+ # Examples
7
+
8
+ Before we dive into a specific example note that there are some components implemented in the `test/dummy/app/components`.
9
+
10
+ Try them out by starting Rails:
11
+
12
+ ```bash
13
+ cd test/dummy
14
+ bundle install
15
+ rails assets:precompile
16
+ rails s
17
+ ```
18
+
19
+ and visiting http://localhost:3000
20
+
21
+
22
+ ## A Vident component example (without Stimulus)
23
+
24
+ First is an example component that uses `Vident::ViewComponent::Base` but no Stimulus features.
25
+
26
+ 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.
27
+
28
+ ```ruby
29
+ class AvatarComponent < ::Vident::ViewComponent::Base
30
+ include ::Vident::Tailwind
31
+ include ::Vident::ViewComponent::Caching
32
+
33
+ no_stimulus_controller
34
+ with_cache_key :attributes
35
+
36
+ attribute :url, allow_nil: true
37
+ attribute :initials, allow_nil: false
38
+
39
+ attribute :shape, default: :circle
40
+
41
+ attribute :border, default: false
42
+
43
+ attribute :size, default: :normal
44
+
45
+ private
46
+
47
+ def default_html_options
48
+ if image_avatar?
49
+ { class: "inline-block object-contain", src: url, alt: t(".image") }
50
+ else
51
+ { class: "inline-flex items-center justify-center bg-gray-500" }
52
+ end
53
+ end
54
+
55
+ def element_classes
56
+ [size_classes, shape_class, border? ? "border" : ""]
57
+ end
58
+
59
+ alias_method :image_avatar?, :url?
60
+
61
+ def shape_class
62
+ (shape == :circle) ? "rounded-full" : "rounded-md"
63
+ end
64
+
65
+ def size_classes
66
+ case size
67
+ when :tiny
68
+ "w-6 h-6"
69
+ when :small
70
+ "w-8 h-8"
71
+ when :medium
72
+ "w-12 h-12"
73
+ when :large
74
+ "w-14 h-14"
75
+ when :x_large
76
+ "sm:w-24 sm:h-24 w-16 h-16"
77
+ when :xx_large
78
+ "sm:w-32 sm:h-32 w-24 h-24"
79
+ else
80
+ "w-10 h-10"
81
+ end
82
+ end
83
+
84
+ def text_size_class
85
+ case size
86
+ when :tiny
87
+ "text-xs"
88
+ when :small
89
+ "text-xs"
90
+ when :medium
91
+ "text-lg"
92
+ when :large
93
+ "sm:text-xl text-lg"
94
+ when :extra_large
95
+ "sm:text-2xl text-xl"
96
+ else
97
+ "text-medium"
98
+ end
99
+ end
100
+ end
101
+ ```
102
+
103
+ ```erb
104
+ <%= render root(
105
+ element_tag: image_avatar? ? :img : :div,
106
+ html_options: default_html_options
107
+ ) do %>
108
+ <% unless image_avatar? %>
109
+ <span class="<%= text_size_class %> font-medium leading-none text-white"><%= initials %></span>
110
+ <% end %>
111
+ <% end %>
112
+ ```
113
+
114
+ Example usages:
115
+
116
+ ```erb
117
+ <%= render AvatarComponent.new(url: "https://someurl.com/avatar.jpg", initials: "AB" size: :large) %>
118
+ <%= render AvatarComponent.new(url: "https://someurl.com/avatar.jpg", html_options: {alt: "My alt text", class: "object-scale-down"}) %>
119
+ <%= render AvatarComponent.new(initials: "SG", size: :small) %>
120
+ <%= render AvatarComponent.new(initials: "SG", size: :large, html_options: {class: "border-2 border-red-600"}) %>
121
+ ```
122
+
123
+ The following is rendered when used `render AvatarComponent.new(initials: "SG", size: :small, border: true)`:
124
+
125
+ ```html
126
+ <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">
127
+ <span class="text-xs font-medium leading-none text-white">SG</span>
128
+ </div>
129
+ ```
130
+
131
+ 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"})`:
132
+
133
+ ```html
134
+ <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">
135
+ ```
136
+
137
+ ----
138
+
139
+ ![Example](examples/avatar.png)
140
+
141
+ ## Usage
142
+ How to use my plugin.
143
+
144
+ ## Installation
145
+ Add this line to your application's Gemfile:
146
+
147
+ ```ruby
148
+ gem "vident-view_component"
149
+ ```
150
+
151
+ And then execute:
152
+ ```bash
153
+ $ bundle
154
+ ```
155
+
156
+ Or install it yourself as:
157
+ ```bash
158
+ $ gem install vident-view_component
159
+ ```
160
+
161
+ ## Contributing
162
+ Contribution directions go here.
163
+
164
+ ## License
165
+ The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
data/Rakefile ADDED
@@ -0,0 +1,8 @@
1
+ require "bundler/setup"
2
+
3
+ APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
4
+ load "rails/tasks/engine.rake"
5
+
6
+ load "rails/tasks/statistics.rake"
7
+
8
+ require "bundler/gem_tasks"
@@ -0,0 +1,4 @@
1
+ # desc "Explaining what the task does"
2
+ # task :vident_view_component do
3
+ # # Task goes here
4
+ # end
@@ -0,0 +1,13 @@
1
+ module Vident
2
+ module ViewComponent
3
+ class Base < ::ViewComponent::Base
4
+ include ::Vident::Component
5
+
6
+ # Helper to create the main element
7
+ def parent_element(**options)
8
+ @parent_element ||= RootComponent.new(**parent_element_attributes(options))
9
+ end
10
+ alias_method :root, :parent_element
11
+ end
12
+ end
13
+ end
@@ -0,0 +1,17 @@
1
+ module Vident
2
+ module ViewComponent
3
+ class Engine < ::Rails::Engine
4
+ lib_path = File.expand_path("../../../../lib/", __FILE__)
5
+ config.autoload_paths << lib_path
6
+ config.eager_load_paths << lib_path
7
+
8
+ config.before_initialize do
9
+ Rails.autoloaders.each do |autoloader|
10
+ autoloader.inflector.inflect(
11
+ "version" => "VERSION"
12
+ )
13
+ end
14
+ end
15
+ end
16
+ end
17
+ end
@@ -0,0 +1,52 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Vident
4
+ module ViewComponent
5
+ class RootComponent < ::ViewComponent::Base
6
+ include ::Vident::RootComponent
7
+
8
+ if Gem.loaded_specs.has_key? "better_html"
9
+ begin
10
+ include ::Vident::BetterHtml::RootComponent
11
+ rescue
12
+ raise "if `better_html`` is being used you must install `vident-better_html"
13
+ end
14
+ end
15
+
16
+ SELF_CLOSING_TAGS = Set[:area, :base, :br, :col, :embed, :hr, :img, :input, :link, :meta, :param, :source, :track, :wbr].freeze
17
+
18
+ def target_tag(tag_name, targets, **options, &block)
19
+ parsed = parse_targets(Array.wrap(targets))
20
+ options[:data] ||= {}
21
+ options[:data].merge!(build_target_data_attributes(parsed))
22
+ content = view_context.capture(&block) if block
23
+ view_context.content_tag(tag_name, content, options)
24
+ end
25
+
26
+ def call
27
+ # Generate outer tag options and render
28
+ tag_type = content_tag_type
29
+ options = content_tag_options
30
+ if SELF_CLOSING_TAGS.include?(tag_type)
31
+ view_context.tag(tag_type, options)
32
+ else
33
+ view_context.content_tag(tag_type, content, options)
34
+ end
35
+ end
36
+
37
+ private
38
+
39
+ def content_tag_options
40
+ options = @html_options&.dup || {}
41
+ data_attrs = tag_data_attributes
42
+ options[:data] = options[:data].present? ? data_attrs.merge(options[:data]) : data_attrs
43
+ return options unless @id
44
+ options.merge(id: @id)
45
+ end
46
+
47
+ def content_tag_type
48
+ @element_tag.presence || :div
49
+ end
50
+ end
51
+ end
52
+ end
@@ -0,0 +1,5 @@
1
+ module Vident
2
+ module ViewComponent
3
+ VERSION = "0.1.0"
4
+ end
5
+ end
@@ -0,0 +1,7 @@
1
+ require "vident/view_component/version"
2
+ require "vident/view_component/engine"
3
+
4
+ module Vident
5
+ module ViewComponent
6
+ end
7
+ end
metadata ADDED
@@ -0,0 +1,114 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: vident-view_component
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.0
5
+ platform: ruby
6
+ authors:
7
+ - Stephen Ierodiaconou
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2023-04-01 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: rails
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ">="
18
+ - !ruby/object:Gem::Version
19
+ version: '7'
20
+ - - "<"
21
+ - !ruby/object:Gem::Version
22
+ version: '8'
23
+ type: :runtime
24
+ prerelease: false
25
+ version_requirements: !ruby/object:Gem::Requirement
26
+ requirements:
27
+ - - ">="
28
+ - !ruby/object:Gem::Version
29
+ version: '7'
30
+ - - "<"
31
+ - !ruby/object:Gem::Version
32
+ version: '8'
33
+ - !ruby/object:Gem::Dependency
34
+ name: vident
35
+ requirement: !ruby/object:Gem::Requirement
36
+ requirements:
37
+ - - ">="
38
+ - !ruby/object:Gem::Version
39
+ version: 0.8.0
40
+ - - "<"
41
+ - !ruby/object:Gem::Version
42
+ version: '1'
43
+ type: :runtime
44
+ prerelease: false
45
+ version_requirements: !ruby/object:Gem::Requirement
46
+ requirements:
47
+ - - ">="
48
+ - !ruby/object:Gem::Version
49
+ version: 0.8.0
50
+ - - "<"
51
+ - !ruby/object:Gem::Version
52
+ version: '1'
53
+ - !ruby/object:Gem::Dependency
54
+ name: view_component
55
+ requirement: !ruby/object:Gem::Requirement
56
+ requirements:
57
+ - - ">="
58
+ - !ruby/object:Gem::Version
59
+ version: 2.74.1
60
+ - - "<"
61
+ - !ruby/object:Gem::Version
62
+ version: '4'
63
+ type: :runtime
64
+ prerelease: false
65
+ version_requirements: !ruby/object:Gem::Requirement
66
+ requirements:
67
+ - - ">="
68
+ - !ruby/object:Gem::Version
69
+ version: 2.74.1
70
+ - - "<"
71
+ - !ruby/object:Gem::Version
72
+ version: '4'
73
+ description: Vident with ViewComponent
74
+ email:
75
+ - stevegeek@gmail.com
76
+ executables: []
77
+ extensions: []
78
+ extra_rdoc_files: []
79
+ files:
80
+ - README.md
81
+ - Rakefile
82
+ - lib/tasks/vident/view_component_tasks.rake
83
+ - lib/vident/view_component.rb
84
+ - lib/vident/view_component/base.rb
85
+ - lib/vident/view_component/engine.rb
86
+ - lib/vident/view_component/root_component.rb
87
+ - lib/vident/view_component/version.rb
88
+ homepage: https://github.com/stevegeek/vident-view_component
89
+ licenses:
90
+ - MIT
91
+ metadata:
92
+ homepage_uri: https://github.com/stevegeek/vident-view_component
93
+ source_code_uri: https://github.com/stevegeek/vident-view_component
94
+ changelog_uri: https://github.com/stevegeek/vident-view_component/blob/main/CHANGELOG.md
95
+ post_install_message:
96
+ rdoc_options: []
97
+ require_paths:
98
+ - lib
99
+ required_ruby_version: !ruby/object:Gem::Requirement
100
+ requirements:
101
+ - - ">="
102
+ - !ruby/object:Gem::Version
103
+ version: '0'
104
+ required_rubygems_version: !ruby/object:Gem::Requirement
105
+ requirements:
106
+ - - ">="
107
+ - !ruby/object:Gem::Version
108
+ version: '0'
109
+ requirements: []
110
+ rubygems_version: 3.4.6
111
+ signing_key:
112
+ specification_version: 4
113
+ summary: Vident with ViewComponent
114
+ test_files: []