ariadne_view_components 0.0.43-x86_64-linux → 0.0.45-x86_64-linux
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +13 -0
- data/app/components/ariadne/ariadne-form.d.ts +22 -0
- data/app/components/ariadne/ariadne-form.js +85 -0
- data/app/components/ariadne/ariadne-form.ts +96 -0
- data/app/components/ariadne/ariadne.d.ts +2 -0
- data/app/components/ariadne/ariadne.js +16 -0
- data/app/components/ariadne/ariadne.ts +21 -0
- data/app/components/ariadne/avatar_component.rb +81 -0
- data/app/components/ariadne/avatar_stack_component/avatar_stack_component.html.erb +12 -0
- data/app/components/ariadne/avatar_stack_component.rb +75 -0
- data/app/components/ariadne/base_button.rb +70 -0
- data/app/components/ariadne/base_component.rb +37 -0
- data/app/components/ariadne/blankslate_component/blankslate_component.html.erb +26 -0
- data/app/components/ariadne/blankslate_component.rb +148 -0
- data/app/components/ariadne/body_component.rb +30 -0
- data/app/components/ariadne/button_component/button_component.html.erb +4 -0
- data/app/components/ariadne/button_component.rb +165 -0
- data/app/components/ariadne/clipboard_copy_component/clipboard-copy-component.d.ts +4 -0
- data/app/components/ariadne/clipboard_copy_component/clipboard-copy-component.js +18 -0
- data/app/components/ariadne/clipboard_copy_component/clipboard-copy-component.ts +19 -0
- data/app/components/ariadne/clipboard_copy_component/clipboard_copy_component.html.erb +9 -0
- data/app/components/ariadne/clipboard_copy_component.rb +90 -0
- data/app/components/ariadne/comment_component/comment_component.html.erb +37 -0
- data/app/components/ariadne/comment_component.rb +71 -0
- data/app/components/ariadne/component.rb +127 -0
- data/app/components/ariadne/container_component/container_component.html.erb +3 -0
- data/app/components/ariadne/container_component.rb +25 -0
- data/app/components/ariadne/content.rb +12 -0
- data/app/components/ariadne/counter_component.rb +100 -0
- data/app/components/ariadne/details_component/details_component.html.erb +4 -0
- data/app/components/ariadne/details_component.rb +81 -0
- data/app/components/ariadne/dropdown/menu_component.html.erb +20 -0
- data/app/components/ariadne/dropdown/menu_component.rb +101 -0
- data/app/components/ariadne/dropdown/menu_component.ts +1 -0
- data/app/components/ariadne/dropdown_component/dropdown_component.html.erb +8 -0
- data/app/components/ariadne/dropdown_component.rb +172 -0
- data/app/components/ariadne/flash_component/flash_component.html.erb +31 -0
- data/app/components/ariadne/flash_component.rb +128 -0
- data/app/components/ariadne/flex_component/flex_component.html.erb +5 -0
- data/app/components/ariadne/flex_component.rb +56 -0
- data/app/components/ariadne/footer_component/footer_component.html.erb +7 -0
- data/app/components/ariadne/footer_component.rb +23 -0
- data/app/components/ariadne/grid_component/grid_component.html.erb +26 -0
- data/app/components/ariadne/grid_component.rb +67 -0
- data/app/components/ariadne/header_component/header_component.html.erb +29 -0
- data/app/components/ariadne/header_component.rb +111 -0
- data/app/components/ariadne/heading_component.rb +49 -0
- data/app/components/ariadne/heroicon_component/heroicon_component.html.erb +4 -0
- data/app/components/ariadne/heroicon_component.rb +166 -0
- data/app/components/ariadne/image_component.rb +53 -0
- data/app/components/ariadne/inline_flex_component/inline_flex_component.html.erb +6 -0
- data/app/components/ariadne/inline_flex_component.rb +72 -0
- data/app/components/ariadne/link_component.rb +65 -0
- data/app/components/ariadne/list_component/list_component.html.erb +6 -0
- data/app/components/ariadne/list_component.rb +70 -0
- data/app/components/ariadne/narrow_container_component/narrow_container_component.html.erb +3 -0
- data/app/components/ariadne/narrow_container_component.rb +30 -0
- data/app/components/ariadne/panel_bar_component/panel_bar_component.html.erb +20 -0
- data/app/components/ariadne/panel_bar_component.rb +80 -0
- data/app/components/ariadne/pill_component/pill_component.html.erb +3 -0
- data/app/components/ariadne/pill_component.rb +44 -0
- data/app/components/ariadne/rich_text_area_component/rich-text-area-component.d.ts +6 -0
- data/app/components/ariadne/rich_text_area_component/rich-text-area-component.js +38 -0
- data/app/components/ariadne/rich_text_area_component/rich-text-area-component.ts +47 -0
- data/app/components/ariadne/rich_text_area_component/rich_text_area_component.html.erb +6 -0
- data/app/components/ariadne/rich_text_area_component.rb +35 -0
- data/app/components/ariadne/slideover_component/slideover-component.d.ts +9 -0
- data/app/components/ariadne/slideover_component/slideover-component.js +11 -0
- data/app/components/ariadne/slideover_component/slideover-component.ts +17 -0
- data/app/components/ariadne/slideover_component/slideover_component.html.erb +9 -0
- data/app/components/ariadne/slideover_component.rb +66 -0
- data/app/components/ariadne/tab_component/tab_component.html.erb +3 -0
- data/app/components/ariadne/tab_component.rb +98 -0
- data/app/components/ariadne/tab_container_component/tab-container-component.d.ts +1 -0
- data/app/components/ariadne/tab_container_component/tab-container-component.js +23 -0
- data/app/components/ariadne/tab_container_component/tab-container-component.ts +24 -0
- data/app/components/ariadne/tab_container_component.erb +10 -0
- data/app/components/ariadne/tab_container_component.rb +68 -0
- data/app/components/ariadne/tab_nav_component/tab-nav-component.d.ts +9 -0
- data/app/components/ariadne/tab_nav_component/tab-nav-component.js +33 -0
- data/app/components/ariadne/tab_nav_component/tab-nav-component.ts +34 -0
- data/app/components/ariadne/tab_nav_component/tab_nav_component.html.erb +7 -0
- data/app/components/ariadne/tab_nav_component.rb +72 -0
- data/app/components/ariadne/table_nav_component/table_nav_component.html.erb +52 -0
- data/app/components/ariadne/table_nav_component.rb +338 -0
- data/app/components/ariadne/text.rb +25 -0
- data/app/components/ariadne/time_ago_component/time-ago-component.d.ts +1 -0
- data/app/components/ariadne/time_ago_component/time-ago-component.js +1 -0
- data/app/components/ariadne/time_ago_component/time-ago-component.ts +1 -0
- data/app/components/ariadne/time_ago_component.rb +56 -0
- data/app/components/ariadne/timeline_component/timeline_component.html.erb +19 -0
- data/app/components/ariadne/timeline_component.rb +34 -0
- data/app/components/ariadne/tooltip_component/tooltip-component.d.ts +24 -0
- data/app/components/ariadne/tooltip_component/tooltip-component.js +43 -0
- data/app/components/ariadne/tooltip_component/tooltip-component.ts +57 -0
- data/app/components/ariadne/tooltip_component/tooltip_component.html.erb +4 -0
- data/app/components/ariadne/tooltip_component.rb +108 -0
- data/app/lib/ariadne/action_view_extensions/form_helper.rb +30 -0
- data/app/lib/ariadne/audited/dsl.rb +32 -0
- data/app/lib/ariadne/class_name_helper.rb +22 -0
- data/app/lib/ariadne/fetch_or_fallback_helper.rb +110 -0
- data/app/lib/ariadne/form_builder.rb +74 -0
- data/app/lib/ariadne/icon_helper.rb +51 -0
- data/app/lib/ariadne/logger_helper.rb +23 -0
- data/app/lib/ariadne/status/dsl.rb +41 -0
- data/app/lib/ariadne/view_helper.rb +22 -0
- data/lib/ariadne/view_components/engine.rb +0 -22
- data/lib/ariadne/view_components/version.rb +1 -1
- data/tailwind.config.js +10 -15
- metadata +107 -2
@@ -0,0 +1,108 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Ariadne
|
4
|
+
# `Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text.
|
5
|
+
# Use tooltips sparingly and as a last resort.
|
6
|
+
#
|
7
|
+
# When using a tooltip, follow the provided guidelines to avoid accessibility issues.
|
8
|
+
#
|
9
|
+
# - Tooltip text should be brief and to the point. The tooltip content must be a string.
|
10
|
+
# - Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never
|
11
|
+
# use tooltips to convey critical information.
|
12
|
+
#
|
13
|
+
# @accessibility
|
14
|
+
# - **Never set tooltips on static elements.** Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only users
|
15
|
+
# and screen reader users.
|
16
|
+
# - Place `Tooltip` adjacent after its trigger element in the DOM. This allows screen reader users to navigate to and copy the tooltip
|
17
|
+
# content.
|
18
|
+
# ### Which `type` should I set?
|
19
|
+
# Setting `:description` establishes an `aria-describedby` relationship, while `:label` establishes an `aria-labelledby` relationship between the trigger element and the tooltip,
|
20
|
+
#
|
21
|
+
# The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:
|
22
|
+
# - When there is already a visible label text on the trigger element, the tooltip is likely intended to supplement the existing text, so set `type: :description`.
|
23
|
+
# The majority of tooltips will fall under this category.
|
24
|
+
# - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.
|
25
|
+
# This type is usually only appropriate for an icon-only control.
|
26
|
+
class TooltipComponent < Ariadne::Component
|
27
|
+
DEFAULT_TAG = :tooltip
|
28
|
+
DEFAULT_PLACEMENT = :top
|
29
|
+
VALID_PLACEMENTS = [DEFAULT_PLACEMENT, :right, :bottom, :left].freeze
|
30
|
+
|
31
|
+
DEFAULT_CLASSES = "ariadne-invisible ariadne-absolute ariadne-bg-slate-900 ariadne-text-white ariadne-font-semibold ariadne-max-w-xs ariadne-py-1 ariadne-px-2 ariadne-rounded ariadne-z-max"
|
32
|
+
|
33
|
+
DATA_CONTROLLER = "tooltip-component"
|
34
|
+
DATA_ACTION = "mouseover->tooltip-component#show mouseout->tooltip-component#hide"
|
35
|
+
|
36
|
+
TYPE_DEFAULT = :description
|
37
|
+
VALID_TYPES = [:label, TYPE_DEFAULT].freeze
|
38
|
+
|
39
|
+
# DEFAULT_DATA_ATTRIBUTES = {
|
40
|
+
# "data-controller": DATA_CONTROLLER,
|
41
|
+
# "data-action": "mouseover->tooltip-component#show mouseout->tooltip-component#hide",
|
42
|
+
# "data-tooltip-component-placement": DEFAULT_PLACEMENT,
|
43
|
+
# }
|
44
|
+
|
45
|
+
# @example As a description for an icon-only button
|
46
|
+
# @description
|
47
|
+
# If the tooltip content provides supplementary description, set `type: :description` to establish an `aria-describedby` relationship.
|
48
|
+
# The trigger element should also have a _concise_ accessible label via `aria-label`.
|
49
|
+
# @code
|
50
|
+
# <%= render(Ariadne::HeroiconComponent.new(icon: :moon, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, attributes: { id: "bold-button-0" })) %>
|
51
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "bold-button-0", type: :description, text: "Add bold text", direction: :top)) %>
|
52
|
+
# @example As a label for an icon-only button
|
53
|
+
# @description
|
54
|
+
# If the tooltip labels the icon-only button, set `type: :label`. This tooltip content becomes the accessible name for the button.
|
55
|
+
# @code
|
56
|
+
# <%= render(Ariadne::ButtonComponent.new(attributes: { id: "like-button" })) { "👍" } %>
|
57
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "like-button", type: :label, text: "Like", direction: :top)) %>
|
58
|
+
#
|
59
|
+
# @example As a description for a button with visible label
|
60
|
+
# @description
|
61
|
+
# If the button already has visible label text, the tooltip content is likely supplementary so set `type: :description`.
|
62
|
+
# @code
|
63
|
+
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "save-button"}, scheme: :success)) { "Save" } %>
|
64
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "save-button", type: :description, text: "This will immediately impact all organization members", direction: :right)) %>
|
65
|
+
# @example With direction
|
66
|
+
# @description
|
67
|
+
# Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
|
68
|
+
# @code
|
69
|
+
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "North", m: 2})) { "North" } %>
|
70
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "North", type: :description, text: "This is a North-facing tooltip, and is responsive.", direction: :top)) %>
|
71
|
+
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "South", m: 2})) { "South" } %>
|
72
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "South", type: :description, text: "This is a South-facing tooltip and is responsive.", direction: :bottom)) %>
|
73
|
+
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "East", m: 2})) { "East" } %>
|
74
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "East", type: :description, text: "This is a East-facing tooltip and is responsive.", direction: :right)) %>
|
75
|
+
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "West", m: 2})) { "West" } %>
|
76
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "West""", type: :description, text: "This is a West-facing tooltip and is responsive.", direction: :left)) %>
|
77
|
+
# @example With relative parent
|
78
|
+
# @description
|
79
|
+
# When the tooltip and trigger element have a parent container with `relative: position`, it should not affect width of the tooltip.
|
80
|
+
# @code
|
81
|
+
# <span style="position: relative;">
|
82
|
+
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "test-button"}, scheme: :info)) { "Test" } %>
|
83
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "test-button", type: :description, text: "This tooltip should take up the full width", direction: :bottom)) %>
|
84
|
+
# </span>
|
85
|
+
# @param tag [Symbol, String] The rendered tag name
|
86
|
+
# @param for_id [String] The ID of the element that the tooltip should be attached to.
|
87
|
+
# @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
|
88
|
+
# @param type [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_TYPES) %>
|
89
|
+
# @param direction [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_PLACEMENTS) %>
|
90
|
+
# @param classes [String] <%= link_to_classes_docs %>
|
91
|
+
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
92
|
+
def initialize(tag: DEFAULT_TAG, for_id:, text:, type: TYPE_DEFAULT, direction: DEFAULT_PLACEMENT, classes: "", attributes: {})
|
93
|
+
raise TypeError, "tooltip text must be a string" unless text.is_a?(String)
|
94
|
+
|
95
|
+
@tag = check_incoming_tag(DEFAULT_TAG, tag)
|
96
|
+
|
97
|
+
@text = text
|
98
|
+
@classes = merge_class_names(DEFAULT_CLASSES, classes)
|
99
|
+
|
100
|
+
@attributes = attributes
|
101
|
+
@attributes[:for] = for_id
|
102
|
+
|
103
|
+
@attributes[:"data-tooltip-component-placement"] = fetch_or_raise(VALID_PLACEMENTS, direction)
|
104
|
+
@attributes[:"data-type"] = fetch_or_raise(VALID_TYPES, type)
|
105
|
+
@attributes[:"data-tooltip-component-target"] = "tooltip"
|
106
|
+
end
|
107
|
+
end
|
108
|
+
end
|
@@ -0,0 +1,30 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Ariadne
|
4
|
+
module ActionViewExtensions
|
5
|
+
# :nodoc:
|
6
|
+
module FormHelper
|
7
|
+
include ClassNameHelper
|
8
|
+
|
9
|
+
DEFAULT_FORM_CLASSES = "ariadne-space-y-8 sm:ariadne-space-y-5"
|
10
|
+
def ariadne_form_with(model: nil, scope: nil, url: nil, format: nil, classes: "", attributes: {}, **options, &block)
|
11
|
+
options[:class] = merge_class_names(DEFAULT_FORM_CLASSES, options[:class])
|
12
|
+
options[:builder] ||= Ariadne::FormBuilder
|
13
|
+
options[:html] = attributes
|
14
|
+
|
15
|
+
data_controller = options[:html].fetch(:"data-controller", "")
|
16
|
+
options[:html][:"data-controller"] = if data_controller.present?
|
17
|
+
"#{data_controller} ariadne-form"
|
18
|
+
else
|
19
|
+
"ariadne-form"
|
20
|
+
end
|
21
|
+
|
22
|
+
form_with(model: model, scope: scope, url: url, format: format, **options, &block)
|
23
|
+
end
|
24
|
+
end
|
25
|
+
end
|
26
|
+
end
|
27
|
+
|
28
|
+
ActiveSupport.on_load(:action_view) do
|
29
|
+
include Ariadne::ActionViewExtensions::FormHelper
|
30
|
+
end
|
@@ -0,0 +1,32 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
require "active_support/concern"
|
4
|
+
|
5
|
+
module Ariadne
|
6
|
+
# :nodoc:
|
7
|
+
module Audited
|
8
|
+
# DSL to register when a component has passed an accessibility audit.
|
9
|
+
#
|
10
|
+
# Example:
|
11
|
+
#
|
12
|
+
# class MyComponent < ViewComponent::Base
|
13
|
+
# include Ariadne::Audited::Dsl
|
14
|
+
# audited_at 'YYYY-MM-DD'
|
15
|
+
# end
|
16
|
+
module Dsl
|
17
|
+
extend ActiveSupport::Concern
|
18
|
+
|
19
|
+
included do
|
20
|
+
class_attribute :audit_date, instance_writer: false
|
21
|
+
end
|
22
|
+
|
23
|
+
class_methods do
|
24
|
+
def audited_at(date = nil)
|
25
|
+
return audit_date if date.nil?
|
26
|
+
|
27
|
+
self.audit_date = date
|
28
|
+
end
|
29
|
+
end
|
30
|
+
end
|
31
|
+
end
|
32
|
+
end
|
@@ -0,0 +1,22 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
# Helps build a list of conditional class names
|
4
|
+
module Ariadne
|
5
|
+
# :nodoc:
|
6
|
+
module ClassNameHelper
|
7
|
+
def merge_class_names(*args)
|
8
|
+
[].tap do |classes|
|
9
|
+
args.each do |class_name|
|
10
|
+
next if class_name.blank?
|
11
|
+
|
12
|
+
case class_name
|
13
|
+
when String
|
14
|
+
classes << class_name
|
15
|
+
else
|
16
|
+
raise ArgumentError, "Expected String class name, got #{class_name.class}"
|
17
|
+
end
|
18
|
+
end
|
19
|
+
end.join(" ")
|
20
|
+
end
|
21
|
+
end
|
22
|
+
end
|
@@ -0,0 +1,110 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
# Ariadne::FetchOrFallbackHelper
|
4
|
+
# A little helper to enable graceful fallbacks
|
5
|
+
#
|
6
|
+
# Use this helper to quietly ensure a value is
|
7
|
+
# one that you expect:
|
8
|
+
#
|
9
|
+
# allowed_values - allowed options for *value*
|
10
|
+
# given_value - input being coerced
|
11
|
+
# fallback - returned if *given_value* is not included in *allowed_values*
|
12
|
+
#
|
13
|
+
# fetch_or_raise([1,2,3], 5) => 2
|
14
|
+
# fetch_or_raise([1,2,3], 1) => 1
|
15
|
+
# fetch_or_raise([1,2,3], nil) => 2
|
16
|
+
module Ariadne
|
17
|
+
# :nodoc:
|
18
|
+
module FetchOrFallbackHelper
|
19
|
+
include LoggerHelper
|
20
|
+
|
21
|
+
mattr_accessor :fallback_raises, default: true
|
22
|
+
|
23
|
+
InvalidValueError = Class.new(StandardError)
|
24
|
+
|
25
|
+
TRUE_OR_FALSE = Set.new([true, false]).freeze
|
26
|
+
|
27
|
+
INTEGER_TYPES = Set.new(["Integer"]).freeze
|
28
|
+
|
29
|
+
def fetch_or_raise(allowed_values, given_value, against: nil)
|
30
|
+
if !allowed_values.is_a?(Array) && !allowed_values.is_a?(Set)
|
31
|
+
raise ArgumentError, "allowed_values must be an array or a set; it was #{allowed_values.class}"
|
32
|
+
end
|
33
|
+
|
34
|
+
check_against_given_value = against || given_value
|
35
|
+
if allowed_values.include?(check_against_given_value)
|
36
|
+
given_value
|
37
|
+
else
|
38
|
+
raise InvalidValueError, <<~MSG
|
39
|
+
fetch_or_raise was called with an invalid value.
|
40
|
+
|
41
|
+
Expected one of: #{allowed_values.inspect}
|
42
|
+
Got: #{given_value.inspect}
|
43
|
+
MSG
|
44
|
+
end
|
45
|
+
end
|
46
|
+
|
47
|
+
# TODO: use these two more
|
48
|
+
def fetch_or_raise_boolean(given_value)
|
49
|
+
fetch_or_raise(TRUE_OR_FALSE, given_value)
|
50
|
+
end
|
51
|
+
|
52
|
+
def fetch_or_raise_integer(given_value)
|
53
|
+
fetch_or_raise(INTEGER_TYPES, given_value, against: given_value.class.name)
|
54
|
+
end
|
55
|
+
|
56
|
+
# TODO: test this
|
57
|
+
def check_incoming_tag(preferred_tag, given_tag)
|
58
|
+
return preferred_tag if given_tag.blank? || preferred_tag == given_tag
|
59
|
+
|
60
|
+
unless silence_warnings?
|
61
|
+
message = <<~MSG
|
62
|
+
Ariadne: note that `#{preferred_tag}` is the preferred tag here;
|
63
|
+
you passed `#{given_tag}` (which will still be used)
|
64
|
+
MSG
|
65
|
+
|
66
|
+
logger.warn(message)
|
67
|
+
end
|
68
|
+
|
69
|
+
given_tag
|
70
|
+
end
|
71
|
+
|
72
|
+
# TODO: test this
|
73
|
+
def check_incoming_attribute(preferred_attribute, given_attribute)
|
74
|
+
return preferred_attribute if given_attribute.blank? || preferred_attribute != given_attribute
|
75
|
+
|
76
|
+
unless silence_warnings?
|
77
|
+
message = <<~MSG
|
78
|
+
Ariadne: note that `#{preferred_attribute}` is the preferred attribute here;
|
79
|
+
you passed `#{given_attribute}` (which will still be used)
|
80
|
+
MSG
|
81
|
+
|
82
|
+
logger.warn(message)
|
83
|
+
end
|
84
|
+
|
85
|
+
given_attribute
|
86
|
+
end
|
87
|
+
|
88
|
+
# TODO: test this
|
89
|
+
def check_incoming_value(preferred_value, given_pair)
|
90
|
+
return preferred_value if given_pair.blank? || !given_pair.is_a?(Hash)
|
91
|
+
|
92
|
+
given_key = given_pair.keys.first
|
93
|
+
given_value = given_pair.values.first
|
94
|
+
|
95
|
+
return preferred_value if given_value.blank?
|
96
|
+
|
97
|
+
unless silence_warnings?
|
98
|
+
|
99
|
+
message = <<~MSG
|
100
|
+
Ariadne: note that `#{preferred_value}` is the preferred value for `#{given_key}` here;
|
101
|
+
you passed `#{given_value}` (which will still be used)
|
102
|
+
MSG
|
103
|
+
|
104
|
+
logger.warn(message)
|
105
|
+
end
|
106
|
+
|
107
|
+
given_value
|
108
|
+
end
|
109
|
+
end
|
110
|
+
end
|
@@ -0,0 +1,74 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Ariadne
|
4
|
+
# :nodoc:
|
5
|
+
# Many of the form methods simply call out to the corresponding ActionView::Helpers::FormBuilder methods,
|
6
|
+
# documented at https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html, with
|
7
|
+
# default Tailwind classes applied.
|
8
|
+
class FormBuilder < ActionView::Helpers::FormBuilder
|
9
|
+
include ClassNameHelper
|
10
|
+
|
11
|
+
DEFAULT_SECTION_CLASSES = "ariadne-space-y-6 ariadne-px-4"
|
12
|
+
def section(classes: "", attributes: {}, &block)
|
13
|
+
actual_classes = merge_class_names(DEFAULT_SECTION_CLASSES, classes)
|
14
|
+
options = { class: actual_classes, **attributes }
|
15
|
+
@template.content_tag(:div, **options, &block)
|
16
|
+
end
|
17
|
+
|
18
|
+
DEFAULT_SECTION_HEADING_CLASSES = "ariadne-text-lg ariadne-leading-6 ariadne-py-4 ariadne-font-medium ariadne-text-gray-900"
|
19
|
+
def heading(tag: :h3, classes: "", attributes: {}, &block)
|
20
|
+
actual_classes = merge_class_names(DEFAULT_SECTION_HEADING_CLASSES, classes)
|
21
|
+
options = { class: actual_classes, **attributes }
|
22
|
+
@template.content_tag(tag, **options, &block)
|
23
|
+
end
|
24
|
+
|
25
|
+
DEFAULT_SECTION_SUBHEADING_CLASSES = "ariadne-mt-1 ariadne-max-w-2xl ariadne-text-sm ariadne-text-gray-500"
|
26
|
+
def subheading(classes: "", attributes: {}, &block)
|
27
|
+
actual_classes = merge_class_names(DEFAULT_SECTION_SUBHEADING_CLASSES, classes)
|
28
|
+
options = { class: actual_classes, **attributes }
|
29
|
+
@template.content_tag(:p, **options, &block)
|
30
|
+
end
|
31
|
+
|
32
|
+
DEFAULT_LABEL_CLASSES = "ariadne-block ariadne-text-sm ariadne-font-medium ariadne-text-gray-700 ariadne-pl-2"
|
33
|
+
def label(method, text = nil, options = {}, &block)
|
34
|
+
options[:class] = merge_class_names(DEFAULT_LABEL_CLASSES, options.delete(:classes))
|
35
|
+
super(method, text, options, &block)
|
36
|
+
end
|
37
|
+
|
38
|
+
DEFAULT_TEXT_CLASSES = "ariadne-shadow-sm focus:ariadne-ring-slate-500 focus:ariadne-border-slate-500 ariadne-block ariadne-w-full sm:ariadne-text-sm ariadne-border-gray-300 ariadne-rounded-md"
|
39
|
+
def text_field(method, options = {})
|
40
|
+
options[:class] = merge_class_names(DEFAULT_TEXT_CLASSES, options.delete(:classes))
|
41
|
+
super(method, **options)
|
42
|
+
end
|
43
|
+
|
44
|
+
DEFAULT_CHECKBOX_CLASSES = "focus:ariadne-ring-slate-500 ariadne-h-4 ariadne-w-4 ariadne-text-slate-600 ariadne-border-slate-300 ariadne-rounded"
|
45
|
+
def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
|
46
|
+
options[:class] = merge_class_names(DEFAULT_CHECKBOX_CLASSES, options.delete(:classes))
|
47
|
+
super(method, options, checked_value, unchecked_value)
|
48
|
+
end
|
49
|
+
|
50
|
+
DEFAULT_RADIO_CLASSES = "focus:ariadne-ring-slate-500 ariadne-h-4 ariadne-w-4 ariadne-text-slate-600 ariadne-border-gray-300 ariadne-rounded"
|
51
|
+
def radio_button(method, tag_value, options = {})
|
52
|
+
options[:class] = merge_class_names(DEFAULT_RADIO_CLASSES, options.delete(:classes))
|
53
|
+
super(method, tag_value, **options)
|
54
|
+
end
|
55
|
+
|
56
|
+
DEFAULT_TEXTAREA_CLASSES = "ariadne-shadow-sm focus:ariadne-ring-slate-500 focus:ariadne-border-slate-500 ariadne-block ariadne-w-full sm:ariadne-text-sm ariadne-border ariadne-border-gray-300 ariadne-rounded-md"
|
57
|
+
def text_area(method, options = {})
|
58
|
+
options[:class] = merge_class_names(DEFAULT_TEXTAREA_CLASSES, options.delete(:classes))
|
59
|
+
super(method, **options)
|
60
|
+
end
|
61
|
+
|
62
|
+
DEFAULT_EMAIL_CLASSES = "ariadne-shadow-sm focus:ariadne-ring-slate-500 focus:ariadne-border-slate-500 ariadne-block ariadne-w-full sm:ariadne-text-sm ariadne-border-gray-300 ariadne-rounded-md"
|
63
|
+
def email_field(method, options = {})
|
64
|
+
options[:class] = merge_class_names(DEFAULT_EMAIL_CLASSES, options.delete(:classes))
|
65
|
+
super(method, **options)
|
66
|
+
end
|
67
|
+
|
68
|
+
DEFAULT_PASSWORD_CLASSES = "ariadne-appearance-none ariadne-block ariadne-w-full ariadne-px-3 ariadne-py-2 ariadne-border ariadne-border-gray-300 ariadne-rounded-md ariadne-shadow-sm ariadne-placeholder-gray-400 focus:ariadne-outline-none focus:ariadne-ring-slate-500 focus:ariadne-border-slate-500 sm:ariadne-text-sm"
|
69
|
+
def password_field(method, options = {})
|
70
|
+
options[:class] = merge_class_names(DEFAULT_PASSWORD_CLASSES, options.delete(:classes))
|
71
|
+
super(method, **options)
|
72
|
+
end
|
73
|
+
end
|
74
|
+
end
|
@@ -0,0 +1,51 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
# Ariadne::IconHelper
|
4
|
+
# A helper that insists on certain values when
|
5
|
+
# checking herocions and their varients.
|
6
|
+
#
|
7
|
+
# Use this helper to loudly ensure a value is
|
8
|
+
# one that you expect.
|
9
|
+
module Ariadne
|
10
|
+
# :nodoc:
|
11
|
+
module IconHelper
|
12
|
+
include FetchOrFallbackHelper
|
13
|
+
|
14
|
+
def check_icon_presence!(icon, variant)
|
15
|
+
return true unless has_partial_icon?(icon, variant)
|
16
|
+
|
17
|
+
icon_presence!(icon, variant)
|
18
|
+
variant_presence!(icon, variant)
|
19
|
+
ensure_valid_variant(variant)
|
20
|
+
|
21
|
+
true
|
22
|
+
end
|
23
|
+
|
24
|
+
def ensure_valid_variant(variant)
|
25
|
+
check_variant = if variant.blank? || !variant.respond_to?(:to_s)
|
26
|
+
""
|
27
|
+
else
|
28
|
+
variant.to_s
|
29
|
+
end
|
30
|
+
|
31
|
+
fetch_or_raise(HeroiconsHelper::Icon::VALID_VARIANTS, check_variant)
|
32
|
+
end
|
33
|
+
module_function :ensure_valid_variant
|
34
|
+
|
35
|
+
def has_partial_icon?(icon, variant)
|
36
|
+
icon.present? || variant.present?
|
37
|
+
end
|
38
|
+
|
39
|
+
def icon_presence!(icon, variant)
|
40
|
+
raise(ArgumentError, "You must provide an `icon` when providing a `variant`.") if icon.blank? && variant.present?
|
41
|
+
|
42
|
+
true
|
43
|
+
end
|
44
|
+
|
45
|
+
def variant_presence!(icon, variant)
|
46
|
+
raise(ArgumentError, "You must provide a `variant` when providing an `icon`.") if icon.present? && variant.blank?
|
47
|
+
|
48
|
+
true
|
49
|
+
end
|
50
|
+
end
|
51
|
+
end
|
@@ -0,0 +1,23 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Ariadne
|
4
|
+
# :nodoc:
|
5
|
+
module LoggerHelper
|
6
|
+
def logger
|
7
|
+
return Rails.logger if defined?(Rails) && Rails.logger
|
8
|
+
|
9
|
+
require "logger"
|
10
|
+
Logger.new($stderr)
|
11
|
+
end
|
12
|
+
|
13
|
+
# TODO: test
|
14
|
+
def silence_deprecations?
|
15
|
+
Rails.application.config.ariadne_view_components.silence_deprecations
|
16
|
+
end
|
17
|
+
|
18
|
+
# TODO: test
|
19
|
+
def silence_warnings?
|
20
|
+
Rails.application.config.ariadne_view_components.silence_warnings
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|
@@ -0,0 +1,41 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
require "active_support/concern"
|
4
|
+
|
5
|
+
module Ariadne
|
6
|
+
# :nodoc:
|
7
|
+
module Status
|
8
|
+
# DSL to allow components to register their status.
|
9
|
+
#
|
10
|
+
# Example:
|
11
|
+
#
|
12
|
+
# class MyComponent < ViewComponent::Base
|
13
|
+
# include Ariadne::Status::Dsl
|
14
|
+
# status :experimental
|
15
|
+
# end
|
16
|
+
module Dsl
|
17
|
+
extend ActiveSupport::Concern
|
18
|
+
|
19
|
+
STATUSES = {
|
20
|
+
experimental: :experimental,
|
21
|
+
stable: :stable,
|
22
|
+
}.freeze
|
23
|
+
|
24
|
+
class UnknownStatusError < StandardError; end
|
25
|
+
|
26
|
+
included do
|
27
|
+
class_attribute :component_status, instance_writer: false, default: STATUSES[:stable]
|
28
|
+
end
|
29
|
+
|
30
|
+
class_methods do
|
31
|
+
def status(status = nil)
|
32
|
+
return component_status if status.nil?
|
33
|
+
|
34
|
+
raise UnknownStatusError, "status #{status} does not exist" if STATUSES[status].nil?
|
35
|
+
|
36
|
+
self.component_status = STATUSES[status]
|
37
|
+
end
|
38
|
+
end
|
39
|
+
end
|
40
|
+
end
|
41
|
+
end
|
@@ -0,0 +1,22 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
# :nocov:
|
4
|
+
module Ariadne
|
5
|
+
# Module to allow shorthand calls for Ariadne components
|
6
|
+
module ViewHelper
|
7
|
+
class ViewHelperNotFound < StandardError; end
|
8
|
+
|
9
|
+
HELPERS = {
|
10
|
+
heroicon: "Ariadne::HeroiconComponent",
|
11
|
+
heading: "Ariadne::HeadingComponent",
|
12
|
+
time_ago: "Ariadne::TimeAgoComponent",
|
13
|
+
image: "Ariadne::ImageComponent",
|
14
|
+
}.freeze
|
15
|
+
|
16
|
+
HELPERS.each do |name, component|
|
17
|
+
define_method "ariadne_#{name}" do |*args, **kwargs, &block|
|
18
|
+
render component.constantize.new(*args, **kwargs), &block
|
19
|
+
end
|
20
|
+
end
|
21
|
+
end
|
22
|
+
end
|
@@ -46,28 +46,6 @@ module Ariadne
|
|
46
46
|
end
|
47
47
|
|
48
48
|
config.after_initialize do |_app|
|
49
|
-
# TODO: is any of this necessary???
|
50
|
-
ActionView::Base.field_error_proc = proc do |html_tag, instance_tag|
|
51
|
-
fragment = Nokogiri::HTML.fragment(html_tag)
|
52
|
-
field = fragment.at("input,select,textarea")
|
53
|
-
|
54
|
-
model = instance_tag.object
|
55
|
-
error_message = model.errors.full_messages.join(", ")
|
56
|
-
|
57
|
-
html = if field
|
58
|
-
field["class"] = "#{field["class"]} invalid"
|
59
|
-
html = <<-HTML
|
60
|
-
#{fragment}
|
61
|
-
<p class="error">#{error_message}</p>
|
62
|
-
HTML
|
63
|
-
html
|
64
|
-
else
|
65
|
-
html_tag
|
66
|
-
end
|
67
|
-
|
68
|
-
html.html_safe # rubocop:disable Rails/OutputSafety
|
69
|
-
end
|
70
|
-
|
71
49
|
Ariadne::ViewComponents.tailwind_merger = TailwindMerge::Merger.new
|
72
50
|
end
|
73
51
|
end
|
data/tailwind.config.js
CHANGED
@@ -19,7 +19,7 @@ module.exports = {
|
|
19
19
|
resolve(__dirname, 'app/components/**/*.erb'),
|
20
20
|
resolve(__dirname, 'app/components/**/*.rb'),
|
21
21
|
resolve(__dirname, 'app/lib/ariadne'),
|
22
|
-
resolve(__dirname, 'static/classes.yml')
|
22
|
+
resolve(__dirname, 'static/classes.yml'),
|
23
23
|
],
|
24
24
|
extract: {
|
25
25
|
yml: content => {
|
@@ -38,15 +38,10 @@ module.exports = {
|
|
38
38
|
return rez
|
39
39
|
}
|
40
40
|
return []
|
41
|
-
}
|
42
|
-
}
|
41
|
+
},
|
42
|
+
},
|
43
43
|
},
|
44
|
-
plugins: [
|
45
|
-
require('@tailwindcss/aspect-ratio'),
|
46
|
-
require('@tailwindcss/line-clamp'),
|
47
|
-
require('@tailwindcss/forms'),
|
48
|
-
require('@tailwindcss/typography')
|
49
|
-
],
|
44
|
+
plugins: [require('@tailwindcss/aspect-ratio'), require('@tailwindcss/forms'), require('@tailwindcss/typography')],
|
50
45
|
theme: {
|
51
46
|
extend: {
|
52
47
|
colors: {
|
@@ -62,14 +57,14 @@ module.exports = {
|
|
62
57
|
'internal-message': colors.amber['100'],
|
63
58
|
|
64
59
|
'state-closed': '#da1e28',
|
65
|
-
'state-open': '#198038'
|
60
|
+
'state-open': '#198038',
|
66
61
|
},
|
67
62
|
fontFamily: {
|
68
|
-
sans: ['Inter var', ...defaultTheme.fontFamily.sans]
|
63
|
+
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
|
69
64
|
},
|
70
65
|
flexBasis: {
|
71
|
-
160: '40rem'
|
72
|
-
}
|
73
|
-
}
|
74
|
-
}
|
66
|
+
160: '40rem',
|
67
|
+
},
|
68
|
+
},
|
69
|
+
},
|
75
70
|
}
|