ariadne_view_components 0.0.3 → 0.0.6
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +8 -7
- data/app/assets/builds/ariadne_view_components.css +1874 -0
- data/app/assets/config/manifest.js +2 -0
- data/app/assets/javascripts/ariadne.d.ts +1 -0
- data/app/assets/javascripts/ariadne_view_components.js +1 -1
- data/app/assets/javascripts/ariadne_view_components.js.map +1 -1
- data/app/assets/javascripts/clipboard-copy-component.d.ts +4 -0
- data/app/assets/javascripts/slideover-component.d.ts +9 -0
- data/app/assets/javascripts/time_ago_component.d.ts +1 -0
- data/app/assets/javascripts/tooltip-component.d.ts +24 -0
- data/app/assets/stylesheets/application.ariadne_view_components.css +5 -0
- data/app/assets/stylesheets/tooltip-component.css +37 -0
- data/app/components/ariadne/ariadne.d.ts +1 -0
- data/app/components/ariadne/ariadne.js +9 -0
- data/app/components/ariadne/ariadne.ts +8 -9
- data/app/components/ariadne/base_button.rb +10 -8
- data/app/components/ariadne/blankslate_component.html.erb +26 -0
- data/app/components/ariadne/blankslate_component.rb +151 -0
- data/app/components/ariadne/body_component.rb +30 -0
- data/app/components/ariadne/button_component.html.erb +1 -1
- data/app/components/ariadne/button_component.rb +9 -11
- data/app/components/ariadne/clipboard-copy-component.d.ts +4 -0
- data/app/components/ariadne/clipboard-copy-component.js +18 -0
- data/app/components/ariadne/{clipboard_copy_component.ts → clipboard-copy-component.ts} +0 -0
- data/app/components/ariadne/clipboard_copy_component.d.ts +4 -0
- data/app/components/ariadne/clipboard_copy_component.html.erb +2 -2
- data/app/components/ariadne/clipboard_copy_component.js +18 -0
- data/app/components/ariadne/clipboard_copy_component.rb +45 -5
- data/app/components/ariadne/comment_component.html.erb +25 -0
- data/app/components/ariadne/comment_component.rb +45 -0
- data/app/components/ariadne/component.rb +6 -1
- data/app/components/ariadne/container_component.html.erb +3 -0
- data/app/components/ariadne/container_component.rb +25 -0
- data/app/components/ariadne/flash_component.rb +9 -9
- data/app/components/ariadne/flex_component.rb +51 -0
- data/app/components/ariadne/footer_component.html.erb +7 -0
- data/app/components/ariadne/footer_component.rb +23 -0
- data/app/components/ariadne/grid_component.html.erb +26 -0
- data/app/components/ariadne/grid_component.rb +66 -0
- data/app/components/ariadne/header_component.html.erb +29 -0
- data/app/components/ariadne/header_component.rb +114 -0
- data/app/components/ariadne/heading_component.rb +3 -3
- data/app/components/ariadne/heroicon_component.html.erb +2 -5
- data/app/components/ariadne/heroicon_component.rb +20 -7
- data/app/components/ariadne/image_component.rb +5 -3
- data/app/components/ariadne/inline_flex_component.html.erb +5 -0
- data/app/components/ariadne/inline_flex_component.rb +65 -0
- data/app/components/ariadne/link_component.rb +65 -0
- data/app/components/ariadne/list_component.html.erb +15 -0
- data/app/components/ariadne/list_component.rb +67 -0
- data/app/components/ariadne/main_component.rb +32 -0
- data/app/components/ariadne/pill_component.html.erb +3 -0
- data/app/components/ariadne/pill_component.rb +30 -0
- data/app/components/ariadne/slideover-component.d.ts +9 -0
- data/app/components/ariadne/slideover-component.js +20 -0
- data/app/components/ariadne/slideover-component.ts +26 -0
- data/app/components/ariadne/slideover_component.d.ts +9 -0
- data/app/components/ariadne/slideover_component.html.erb +11 -0
- data/app/components/ariadne/slideover_component.js +19 -0
- data/app/components/ariadne/slideover_component.rb +81 -0
- data/app/components/ariadne/time_ago_component.d.ts +1 -0
- data/app/components/ariadne/time_ago_component.js +1 -0
- data/app/components/ariadne/time_ago_component.rb +56 -0
- data/app/components/ariadne/time_ago_component.ts +1 -0
- data/app/components/ariadne/timeline_component.html.erb +19 -0
- data/app/components/ariadne/timeline_component.rb +34 -0
- data/app/components/ariadne/tooltip-component.d.ts +24 -0
- data/app/components/ariadne/tooltip-component.js +42 -0
- data/app/components/ariadne/tooltip-component.ts +57 -0
- data/app/components/ariadne/tooltip_component.html.erb +4 -0
- data/app/components/ariadne/tooltip_component.rb +34 -31
- data/app/lib/ariadne/action_view_extensions/form_helper.rb +23 -0
- data/app/lib/ariadne/form_builder.rb +71 -0
- data/lib/ariadne/classify.rb +4 -90
- data/lib/ariadne/view_components/engine.rb +8 -0
- data/lib/ariadne/view_components/version.rb +1 -1
- data/lib/ariadne/view_components.rb +31 -29
- data/lib/rubocop/cop/ariadne/ariadne_heroicon.rb +2 -2
- data/lib/tasks/docs.rake +52 -58
- data/static/arguments.yml +290 -17
- data/static/audited_at.json +18 -0
- data/static/classes.yml +189 -1
- data/static/constants.json +173 -30
- data/static/statuses.json +18 -0
- metadata +77 -9
- data/app/assets/stylesheets/application.tailwind.css +0 -3
- data/lib/tasks/tailwind.rake +0 -31
@@ -24,82 +24,85 @@ module Ariadne
|
|
24
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
25
|
# This type is usually only appropriate for an icon-only control.
|
26
26
|
class TooltipComponent < Ariadne::Component
|
27
|
-
|
28
|
-
|
27
|
+
DEFAULT_TAG = :tooltip
|
28
|
+
DEFAULT_PLACEMENT = :top
|
29
|
+
VALID_PLACEMENTS = [DEFAULT_PLACEMENT, :right, :bottom, :left].freeze
|
30
|
+
|
31
|
+
DEFAULT_CLASSES = "invisible absolute bg-slate-900 text-white font-semibold max-w-xs py-1 px-2 rounded z-max"
|
32
|
+
|
33
|
+
DATA_CONTROLLER = "tooltip-component"
|
34
|
+
DATA_ACTION = "mouseover->tooltip-component#show mouseout->tooltip-component#hide"
|
29
35
|
|
30
36
|
TYPE_DEFAULT = :description
|
31
37
|
TYPE_OPTIONS = [: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
|
+
|
32
45
|
# @example As a description for an icon-only button
|
33
46
|
# @description
|
34
47
|
# If the tooltip content provides supplementary description, set `type: :description` to establish an `aria-describedby` relationship.
|
35
48
|
# The trigger element should also have a _concise_ accessible label via `aria-label`.
|
36
49
|
# @code
|
37
50
|
# <%= render(Ariadne::HeroiconComponent.new(icon: :moon, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, attributes: { id: "bold-button-0" })) %>
|
38
|
-
# <%= render(Ariadne::TooltipComponent.new(
|
51
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "bold-button-0", type: :description, text: "Add bold text", direction: :top)) %>
|
39
52
|
# @example As a label for an icon-only button
|
40
53
|
# @description
|
41
54
|
# If the tooltip labels the icon-only button, set `type: :label`. This tooltip content becomes the accessible name for the button.
|
42
55
|
# @code
|
43
|
-
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "like-button"})) { "👍" } %>
|
44
|
-
# <%= render(Ariadne::TooltipComponent.new(
|
56
|
+
# <%= render(Ariadne::ButtonComponent.new(attributes: { id: "like-button" })) { "👍" } %>
|
57
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "like-button", type: :label, text: "Like", direction: :top)) %>
|
45
58
|
#
|
46
59
|
# @example As a description for a button with visible label
|
47
60
|
# @description
|
48
61
|
# If the button already has visible label text, the tooltip content is likely supplementary so set `type: :description`.
|
49
62
|
# @code
|
50
63
|
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "save-button"}, scheme: :success)) { "Save" } %>
|
51
|
-
# <%= render(Ariadne::TooltipComponent.new(
|
64
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "save-button", type: :description, text: "This will immediately impact all organization members", direction: :right)) %>
|
52
65
|
# @example With direction
|
53
66
|
# @description
|
54
67
|
# Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
|
55
68
|
# @code
|
56
69
|
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "North", m: 2})) { "North" } %>
|
57
|
-
# <%= render(Ariadne::TooltipComponent.new(
|
70
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "North", type: :description, text: "This is a North-facing tooltip, and is responsive.", direction: :top)) %>
|
58
71
|
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "South", m: 2})) { "South" } %>
|
59
|
-
# <%= render(Ariadne::TooltipComponent.new(
|
72
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "South", type: :description, text: "This is a South-facing tooltip and is responsive.", direction: :bottom)) %>
|
60
73
|
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "East", m: 2})) { "East" } %>
|
61
|
-
# <%= render(Ariadne::TooltipComponent.new(
|
74
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "East", type: :description, text: "This is a East-facing tooltip and is responsive.", direction: :right)) %>
|
62
75
|
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "West", m: 2})) { "West" } %>
|
63
|
-
# <%= render(Ariadne::TooltipComponent.new(
|
64
|
-
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "Northeast", m: 2})) { "Northeast" } %>
|
65
|
-
# <%= render(Ariadne::TooltipComponent.new(attributes: { for: "Northeast"}, type: :description, text: "This is a Northeast-facing tooltip and is responsive.", direction: :ne)) %>
|
66
|
-
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "Southeast", m: 2})) { "Southeast" } %>
|
67
|
-
# <%= render(Ariadne::TooltipComponent.new(attributes: { for: "Southeast"}, type: :description, text: "This is a Southeast-facing tooltip and is responsive.", direction: :se)) %>
|
68
|
-
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "Northwest", m: 2})) { "Northwest" } %>
|
69
|
-
# <%= render(Ariadne::TooltipComponent.new(attributes: { for: "Northwest"}, type: :description, text: "This is a Northwest-facing tooltip and is responsive.", direction: :nw)) %>
|
70
|
-
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "Southwest", m: 2})) { "Southwest" } %>
|
71
|
-
# <%= render(Ariadne::TooltipComponent.new(attributes: { for: "Southwest"}, type: :description, text: "This is a Southwest-facing tooltip and is responsive.", direction: :sw)) %>
|
76
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "West""", type: :description, text: "This is a West-facing tooltip and is responsive.", direction: :left)) %>
|
72
77
|
# @example With relative parent
|
73
78
|
# @description
|
74
79
|
# When the tooltip and trigger element have a parent container with `relative: position`, it should not affect width of the tooltip.
|
75
80
|
# @code
|
76
81
|
# <span style="position: relative;">
|
77
82
|
# <%= render(Ariadne::ButtonComponent.new(attributes: {id: "test-button"}, scheme: :info)) { "Test" } %>
|
78
|
-
# <%= render(Ariadne::TooltipComponent.new(
|
83
|
+
# <%= render(Ariadne::TooltipComponent.new(for_id: "test-button", type: :description, text: "This tooltip should take up the full width", direction: :bottom)) %>
|
79
84
|
# </span>
|
80
85
|
# @param tag [Symbol, String] The rendered tag name
|
81
|
-
# @param
|
86
|
+
# @param for_id [String] The ID of the element that the tooltip should be attached to.
|
82
87
|
# @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
|
83
|
-
# @param
|
88
|
+
# @param type [Symbol] <%= one_of(Ariadne::TooltipComponent::TYPE_OPTIONS) %>
|
89
|
+
# @param direction [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_PLACEMENTS) %>
|
84
90
|
# @param classes [String] <%= link_to_classes_docs %>
|
85
91
|
# @param attributes [Hash] <%= link_to_attributes_docs %>
|
86
|
-
def initialize(tag:
|
92
|
+
def initialize(tag: DEFAULT_TAG, for_id:, text:, type: TYPE_DEFAULT, direction: DEFAULT_PLACEMENT, classes: "", attributes: {})
|
87
93
|
raise TypeError, "tooltip text must be a string" unless text.is_a?(String)
|
88
94
|
|
89
|
-
@tag = check_incoming_tag(
|
95
|
+
@tag = check_incoming_tag(DEFAULT_TAG, tag)
|
90
96
|
|
91
97
|
@text = text
|
92
|
-
@classes = classes
|
98
|
+
@classes = class_names(DEFAULT_CLASSES, classes)
|
93
99
|
|
94
100
|
@attributes = attributes
|
95
|
-
@attributes[:
|
96
|
-
@attributes[:visible] ||= false
|
97
|
-
@attributes[:"data-direction"] = fetch_or_raise(DIRECTION_OPTIONS, direction)
|
98
|
-
@attributes[:"data-type"] = fetch_or_raise(TYPE_OPTIONS, type)
|
99
|
-
end
|
101
|
+
@attributes[:for] = for_id
|
100
102
|
|
101
|
-
|
102
|
-
|
103
|
+
@attributes[:"data-tooltip-component-placement"] = fetch_or_raise(VALID_PLACEMENTS, direction)
|
104
|
+
@attributes[:"data-type"] = fetch_or_raise(TYPE_OPTIONS, type)
|
105
|
+
@attributes[:"data-tooltip-component-target"] = "tooltip"
|
103
106
|
end
|
104
107
|
end
|
105
108
|
end
|
@@ -0,0 +1,23 @@
|
|
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 = "space-y-8 divide-y divide-gray-200 sm:space-y-5"
|
10
|
+
def ariadne_form_with(model: nil, scope: nil, url: nil, format: nil, classes: {}, attributes: {}, **options, &block)
|
11
|
+
options[:class] = class_names(DEFAULT_FORM_CLASSES, options[:class])
|
12
|
+
options[:builder] ||= Ariadne::FormBuilder
|
13
|
+
options[:html] ||= {}
|
14
|
+
options = options.merge(attributes)
|
15
|
+
form_with(model: model, scope: scope, url: url, format: format, **options, &block)
|
16
|
+
end
|
17
|
+
end
|
18
|
+
end
|
19
|
+
end
|
20
|
+
|
21
|
+
ActiveSupport.on_load(:action_view) do
|
22
|
+
include Ariadne::ActionViewExtensions::FormHelper
|
23
|
+
end
|
@@ -0,0 +1,71 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Ariadne
|
4
|
+
# :nodoc:
|
5
|
+
class FormBuilder < ActionView::Helpers::FormBuilder
|
6
|
+
include ClassNameHelper
|
7
|
+
|
8
|
+
DEFAULT_SECTION_CLASSES = "pt-8 space-y-6 sm:pt-10 sm:space-y-5"
|
9
|
+
def section(classes: "", attributes: {}, &block)
|
10
|
+
actual_classes = class_names(DEFAULT_SECTION_CLASSES, classes)
|
11
|
+
options = { class: actual_classes, **attributes }
|
12
|
+
@template.content_tag(:div, **options, &block)
|
13
|
+
end
|
14
|
+
|
15
|
+
DEFAULT_SECTION_HEADING_CLASSES = "text-lg leading-6 font-medium text-gray-900"
|
16
|
+
def heading(tag: :h3, classes: "", attributes: {}, &block)
|
17
|
+
actual_classes = class_names(DEFAULT_SECTION_HEADING_CLASSES, classes)
|
18
|
+
options = { class: actual_classes, **attributes }
|
19
|
+
@template.content_tag(tag, **options, &block)
|
20
|
+
end
|
21
|
+
|
22
|
+
DEFAULT_SECTION_SUBHEADING_CLASSES = "mt-1 max-w-2xl text-sm text-gray-500"
|
23
|
+
def subheading(classes: "", attributes: {}, &block)
|
24
|
+
actual_classes = class_names(DEFAULT_SECTION_SUBHEADING_CLASSES, classes)
|
25
|
+
options = { class: actual_classes, **attributes }
|
26
|
+
@template.content_tag(:p, **options, &block)
|
27
|
+
end
|
28
|
+
|
29
|
+
DEFAULT_LABEL_CLASSES = "block text-sm font-medium text-gray-700 pl-2"
|
30
|
+
def label(object_name, content, ptions = {}, &block)
|
31
|
+
options[:class] = class_names(DEFAULT_LABEL_CLASSES, options.delete(:classes))
|
32
|
+
super(object_name, content, options, &block)
|
33
|
+
end
|
34
|
+
|
35
|
+
DEFAULT_TEXT_CLASSES = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
36
|
+
def text_field(method, options = {})
|
37
|
+
options[:class] = class_names(DEFAULT_TEXT_CLASSES, options.delete(:classes))
|
38
|
+
super(method, **options)
|
39
|
+
end
|
40
|
+
|
41
|
+
DEFAULT_CHECKBOX_CLASSES = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
42
|
+
def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
|
43
|
+
options[:class] = class_names(DEFAULT_CHECKBOX_CLASSES, options.delete(:classes))
|
44
|
+
super(method, options, checked_value, unchecked_value)
|
45
|
+
end
|
46
|
+
|
47
|
+
DEFAULT_RADIO_CLASSES = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
48
|
+
def radio_button(method, tag_value, options = {})
|
49
|
+
options[:class] = class_names(DEFAULT_RADIO_CLASSES, options.delete(:classes))
|
50
|
+
super(method, tag_value, **options)
|
51
|
+
end
|
52
|
+
|
53
|
+
DEFAULT_TEXTAREA_CLASSES = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md"
|
54
|
+
def text_area(method, options = {})
|
55
|
+
options[:class] = class_names(DEFAULT_TEXTAREA_CLASSES, options.delete(:classes))
|
56
|
+
super(method, **options)
|
57
|
+
end
|
58
|
+
|
59
|
+
DEFAULT_EMAIL_CLASSES = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
60
|
+
def email_field(method, options = {})
|
61
|
+
options[:class] = class_names(DEFAULT_EMAIL_CLASSES, options.delete(:classes))
|
62
|
+
super(method, **options)
|
63
|
+
end
|
64
|
+
|
65
|
+
DEFAULT_PASSWORD_CLASSES = "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
66
|
+
def password_field(method, options = {})
|
67
|
+
options[:class] = class_names(DEFAULT_PASSWORD_CLASSES, options.delete(:classes))
|
68
|
+
super(method, **options)
|
69
|
+
end
|
70
|
+
end
|
71
|
+
end
|
data/lib/ariadne/classify.rb
CHANGED
@@ -3,6 +3,8 @@
|
|
3
3
|
require_relative "classify/utilities"
|
4
4
|
require_relative "classify/validation"
|
5
5
|
|
6
|
+
require "tailwind_merge"
|
7
|
+
|
6
8
|
module Ariadne
|
7
9
|
# :nodoc:
|
8
10
|
class Classify
|
@@ -110,96 +112,8 @@ module Ariadne
|
|
110
112
|
private def validated_class_names(classes)
|
111
113
|
return if classes.blank?
|
112
114
|
|
113
|
-
|
114
|
-
|
115
|
-
if raise_on_invalid_options? && !ENV["ARIADNE_WARNINGS_DISABLED"]
|
116
|
-
invalid_class_names =
|
117
|
-
corrected_classes.each_with_object([]) do |class_name, memo|
|
118
|
-
memo << class_name if Ariadne::Classify::Validation.invalid?(class_name)
|
119
|
-
end
|
120
|
-
|
121
|
-
# TODO: implement this
|
122
|
-
if invalid_class_names.any?
|
123
|
-
# raise ArgumentError, <<~MSG
|
124
|
-
# Use Tailwind CSS class names instead of your own #{"name".pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}.
|
125
|
-
# Set ARIADNE_WARNINGS_DISABLED=1 to disable this warning.
|
126
|
-
# MSG
|
127
|
-
end
|
128
|
-
end
|
129
|
-
|
130
|
-
corrected_classes.join(" ")
|
131
|
-
end
|
132
|
-
|
133
|
-
# TODO: automate this, ugh. peek at utilities.yml
|
134
|
-
BG_PREFIX = /^bg-/.freeze
|
135
|
-
BG_PSEUDO_PREFIX = /^\S+:bg-/.freeze
|
136
|
-
BORDER_PREFIX = /^border-/.freeze
|
137
|
-
BORDER_PSEUDO_PREFIX = /^\S+:border-/.freeze
|
138
|
-
TEXT_ASPECT_PREFIX = /^text-\S+-/.freeze
|
139
|
-
TEXT_ASPECT_PSEUDO_PREFIX = /^\S+:text-\S+-/.freeze
|
140
|
-
TEXT_PREFIX = /^text-/.freeze
|
141
|
-
TEXT_PSEUDO_PREFIX = /^\S+:text-/.freeze
|
142
|
-
|
143
|
-
# TODO: TEST!
|
144
|
-
private def correct_classes(classes)
|
145
|
-
matched_bg = ""
|
146
|
-
matched_bg_pseudo = {}
|
147
|
-
matched_border = ""
|
148
|
-
matched_border_pseudo = {}
|
149
|
-
matched_text_aspect = {}
|
150
|
-
matched_text_aspect_pseudo = {}
|
151
|
-
matched_text = ""
|
152
|
-
matched_text_pseudo = {}
|
153
|
-
|
154
|
-
classes.split(" ").reverse.each_with_object([]) do |c, memo|
|
155
|
-
next if c.blank?
|
156
|
-
|
157
|
-
class_name = c.strip
|
158
|
-
|
159
|
-
if class_name.match(BG_PREFIX)
|
160
|
-
next if matched_bg.present?
|
161
|
-
|
162
|
-
memo << matched_bg = class_name
|
163
|
-
elsif class_name.match(BG_PSEUDO_PREFIX)
|
164
|
-
next if matched_bg_pseudo.keys.any? { |m| m.start_with?(class_name.split(":").first) }
|
165
|
-
|
166
|
-
matched_bg_pseudo[class_name] = true
|
167
|
-
memo << class_name
|
168
|
-
|
169
|
-
elsif class_name.match(BORDER_PREFIX)
|
170
|
-
next if matched_border.present?
|
171
|
-
|
172
|
-
memo << matched_border = class_name
|
173
|
-
elsif class_name.match(BORDER_PSEUDO_PREFIX)
|
174
|
-
next if matched_border_pseudo.keys.any? { |m| m.start_with?(class_name.split(":").first) }
|
175
|
-
|
176
|
-
matched_border_pseudo[class_name] = true
|
177
|
-
memo << class_name
|
178
|
-
|
179
|
-
elsif class_name.match(TEXT_ASPECT_PREFIX)
|
180
|
-
next if matched_text_aspect.keys.any? { |m| m.start_with?(class_name.split(":").first) }
|
181
|
-
|
182
|
-
matched_text_aspect[class_name] = true
|
183
|
-
memo << class_name
|
184
|
-
elsif class_name.match(TEXT_ASPECT_PSEUDO_PREFIX)
|
185
|
-
next if matched_text_aspect_pseudo.keys.any? { |m| m.start_with?(class_name.split(":").first) }
|
186
|
-
|
187
|
-
matched_text_aspect_pseudo[class_name] = true
|
188
|
-
memo << class_name
|
189
|
-
|
190
|
-
elsif class_name.match(TEXT_PREFIX)
|
191
|
-
next if matched_text.present?
|
192
|
-
|
193
|
-
memo << matched_text = class_name
|
194
|
-
elsif class_name.match(TEXT_PSEUDO_PREFIX)
|
195
|
-
next if matched_text_pseudo.keys.any? { |m| m.start_with?(class_name.split(":").first) }
|
196
|
-
|
197
|
-
matched_text_pseudo[class_name] = true
|
198
|
-
memo << class_name
|
199
|
-
else
|
200
|
-
memo << class_name
|
201
|
-
end
|
202
|
-
end.uniq
|
115
|
+
# TODO: obviously instantiate this
|
116
|
+
TailwindMerge::Merger.new.merge(classes)
|
203
117
|
end
|
204
118
|
|
205
119
|
private def raise_on_invalid_options?
|
@@ -1,6 +1,8 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
require "rails/engine"
|
4
|
+
|
5
|
+
require "view_component"
|
4
6
|
require "ariadne/classify/utilities"
|
5
7
|
|
6
8
|
module Ariadne
|
@@ -22,6 +24,12 @@ module Ariadne
|
|
22
24
|
app.config.assets.precompile += ["ariadne_view_components"] if app.config.respond_to?(:assets)
|
23
25
|
end
|
24
26
|
|
27
|
+
initializer "ariadne_view_components.importmap", before: "importmap" do |app|
|
28
|
+
if Rails.application.respond_to?(:importmap)
|
29
|
+
app.config.importmap.paths << Engine.root.join("config/importmap.rb")
|
30
|
+
end
|
31
|
+
end
|
32
|
+
|
25
33
|
config.after_initialize do |app|
|
26
34
|
::Ariadne::Classify::Utilities.validate_class_names = app.config.ariadne_view_components.delete(:validate_class_names)
|
27
35
|
end
|
@@ -15,45 +15,47 @@ module Ariadne
|
|
15
15
|
audited_at: "audited_at.json",
|
16
16
|
}.freeze
|
17
17
|
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
18
|
+
class << self
|
19
|
+
# generate_statuses returns a hash mapping component name to
|
20
|
+
# the component's status sorted alphabetically by the component name.
|
21
|
+
def generate_statuses
|
22
|
+
Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
|
23
|
+
mem[component.to_s] = component.status.to_s
|
24
|
+
end
|
23
25
|
end
|
24
|
-
end
|
25
26
|
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
27
|
+
# generate_audited_at returns a hash mapping component name to
|
28
|
+
# the day the component has passed an accessibility audit.
|
29
|
+
def generate_audited_at
|
30
|
+
Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
|
31
|
+
mem[component.to_s] = component.audited_at.to_s
|
32
|
+
end
|
31
33
|
end
|
32
|
-
end
|
33
34
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
35
|
+
# generate_constants returns a hash mapping component name to
|
36
|
+
# all of its constants.
|
37
|
+
def generate_constants
|
38
|
+
Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
|
39
|
+
mem[component.to_s] = component.constants(false).sort.each_with_object({}) do |constant, h|
|
40
|
+
h[constant] = component.const_get(constant)
|
41
|
+
end
|
40
42
|
end
|
41
43
|
end
|
42
|
-
end
|
43
44
|
|
44
|
-
|
45
|
-
|
46
|
-
|
45
|
+
# dump generates the requested stat hash and outputs it to a file.
|
46
|
+
def dump(stats)
|
47
|
+
require "json"
|
47
48
|
|
48
|
-
|
49
|
-
|
50
|
-
|
49
|
+
File.open(File.join(DEFAULT_STATIC_PATH, FILE_NAMES[stats]), "w") do |f|
|
50
|
+
f.write(JSON.pretty_generate(send("generate_#{stats}")))
|
51
|
+
f.write($INPUT_RECORD_SEPARATOR)
|
52
|
+
end
|
51
53
|
end
|
52
|
-
end
|
53
54
|
|
54
|
-
|
55
|
-
|
56
|
-
|
55
|
+
# read returns a JSON string matching the output of the corresponding stat.
|
56
|
+
def read(stats)
|
57
|
+
File.read(File.join(DEFAULT_STATIC_PATH, FILE_NAMES[stats]))
|
58
|
+
end
|
57
59
|
end
|
58
60
|
end
|
59
61
|
end
|
@@ -113,7 +113,7 @@ module RuboCop
|
|
113
113
|
if size.between?(10, 16)
|
114
114
|
""
|
115
115
|
elsif size.between?(22, 26)
|
116
|
-
|
116
|
+
:md
|
117
117
|
else
|
118
118
|
size
|
119
119
|
end
|
@@ -209,7 +209,7 @@ module RuboCop
|
|
209
209
|
# No arguments if they map to the default size
|
210
210
|
return if size_attributes.blank? || size_attributes.values.all?(&:blank?)
|
211
211
|
# Return mapped argument to `size`
|
212
|
-
return "size: :
|
212
|
+
return "size: :md" if size_attributes.values.any?(:md)
|
213
213
|
|
214
214
|
size_attributes.map do |key, value|
|
215
215
|
"#{key}: #{value}"
|
data/lib/tasks/docs.rake
CHANGED
@@ -32,6 +32,12 @@ namespace :docs do
|
|
32
32
|
sleep
|
33
33
|
end
|
34
34
|
|
35
|
+
# for classes in hashes
|
36
|
+
CLASS_MAPPINGS = '(?:\\S+|:\\"[\\S-]+\\"): \\"([\\S -]+)\\"'
|
37
|
+
# for classes in constants
|
38
|
+
CLASS_CONSTANT = '[A-Z_]+ = \\"([\\S -]+)\\"'
|
39
|
+
CLASS_REGEX = Regexp.new("(?:#{CLASS_MAPPINGS}|#{CLASS_CONSTANT})")
|
40
|
+
|
35
41
|
desc "Generate the documentation."
|
36
42
|
task :build do
|
37
43
|
registry = generate_yard_registry
|
@@ -41,76 +47,37 @@ namespace :docs do
|
|
41
47
|
# Rails controller for rendering arbitrary ERB
|
42
48
|
view_context = ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context
|
43
49
|
components = [
|
44
|
-
|
50
|
+
Ariadne::FlexComponent,
|
51
|
+
Ariadne::CommentComponent,
|
52
|
+
Ariadne::BodyComponent,
|
53
|
+
Ariadne::BlankslateComponent,
|
45
54
|
Ariadne::BaseButton,
|
46
55
|
Ariadne::ButtonComponent,
|
47
|
-
|
48
|
-
# Ariadne::HellipButton,
|
49
|
-
# Ariadne::BorderBox::Header,
|
50
|
-
# Ariadne::IconButton,
|
51
|
-
# Ariadne::Beta::AutoComplete,
|
52
|
-
# Ariadne::Beta::AutoComplete::Item,
|
53
|
-
# Ariadne::Beta::Avatar,
|
54
|
-
# Ariadne::Beta::AvatarStack,
|
55
|
-
# Ariadne::Beta::Blankslate,
|
56
|
-
# Ariadne::BorderBoxComponent,
|
57
|
-
# Ariadne::BoxComponent,
|
58
|
-
# Ariadne::Beta::Breadcrumbs,
|
59
|
-
# Ariadne::ButtonGroup,
|
60
|
-
# Ariadne::Alpha::ButtonMarketing,
|
56
|
+
Ariadne::ContainerComponent,
|
61
57
|
Ariadne::ClipboardCopyComponent,
|
62
|
-
# Ariadne::CloseButton,
|
63
58
|
Ariadne::CounterComponent,
|
64
|
-
|
65
|
-
# Ariadne::Dropdown,
|
66
|
-
# Ariadne::DropdownMenuComponent,
|
59
|
+
Ariadne::GridComponent,
|
67
60
|
Ariadne::FlashComponent,
|
68
|
-
|
69
|
-
|
61
|
+
Ariadne::FooterComponent,
|
62
|
+
Ariadne::HeaderComponent,
|
70
63
|
Ariadne::HeadingComponent,
|
71
|
-
# Ariadne::HiddenTextExpander,
|
72
|
-
# Ariadne::LabelComponent,
|
73
|
-
# Ariadne::LayoutComponent,
|
74
|
-
# Ariadne::LinkComponent,
|
75
|
-
# Ariadne::Markdown,
|
76
|
-
# Ariadne::MenuComponent,
|
77
|
-
# Ariadne::Navigation::TabComponent,
|
78
64
|
Ariadne::HeroiconComponent,
|
79
|
-
# Ariadne::LocalTime,
|
80
65
|
Ariadne::ImageComponent,
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
# Ariadne::TabContainerComponent,
|
66
|
+
Ariadne::InlineFlexComponent,
|
67
|
+
Ariadne::LinkComponent,
|
68
|
+
Ariadne::ListComponent,
|
69
|
+
Ariadne::MainComponent,
|
70
|
+
Ariadne::PillComponent,
|
71
|
+
Ariadne::SlideoverComponent,
|
88
72
|
Ariadne::Text,
|
89
|
-
|
90
|
-
|
91
|
-
# Ariadne::TooltipComponent,
|
92
|
-
# Ariadne::Truncate,
|
93
|
-
# Ariadne::Beta::Truncate,
|
94
|
-
# Ariadne::Alpha::UnderlineNav,
|
95
|
-
# Ariadne::Alpha::UnderlinePanels,
|
96
|
-
# Ariadne::Alpha::TabNav,
|
97
|
-
# Ariadne::Alpha::TabPanels,
|
73
|
+
Ariadne::TimeAgoComponent,
|
74
|
+
Ariadne::TimelineComponent,
|
98
75
|
Ariadne::TooltipComponent,
|
99
76
|
]
|
100
77
|
|
101
78
|
js_components = [
|
102
|
-
# Ariadne::Dropdown,
|
103
|
-
# Ariadne::LocalTime,
|
104
|
-
# Ariadne::ImageCrop,
|
105
|
-
# Ariadne::Beta::AutoComplete,
|
106
79
|
Ariadne::ClipboardCopyComponent,
|
107
|
-
|
108
|
-
# Ariadne::TimeAgoComponent,
|
109
|
-
# Ariadne::Alpha::UnderlinePanels,
|
110
|
-
# Ariadne::Alpha::TabPanels,
|
111
|
-
# Ariadne::TooltipComponent,
|
112
|
-
# Ariadne::ButtonComponent,
|
113
|
-
# Ariadne::LinkComponent,
|
80
|
+
Ariadne::TimeAgoComponent,
|
114
81
|
]
|
115
82
|
|
116
83
|
all_components = Ariadne::Component.descendants - [Ariadne::BaseComponent, Ariadne::Content] # TODO: why is `Ariadne::Content` not picked up?
|
@@ -263,7 +230,7 @@ namespace :docs do
|
|
263
230
|
f.puts
|
264
231
|
html = view_context.render(inline: code)
|
265
232
|
html.scan(/class="([^"]*)"/) do |classnames|
|
266
|
-
classes_found_in_examples.concat(classnames[0].split.reject { |c| c.starts_with?("heroicon", "js"
|
233
|
+
classes_found_in_examples.concat(classnames[0].split.reject { |c| c.starts_with?("heroicon", "js") }.map { ".#{_1}" })
|
267
234
|
end
|
268
235
|
f.puts("<Example src=\"#{html.tr('"', "\'").delete("\n")}\" />")
|
269
236
|
f.puts
|
@@ -286,8 +253,35 @@ namespace :docs do
|
|
286
253
|
raise
|
287
254
|
end
|
288
255
|
|
256
|
+
additional_classes = []
|
257
|
+
|
258
|
+
tailwind_utility_prefixes = ["bg-", "border-", "fill-", "stroke-", "text-"]
|
259
|
+
|
260
|
+
additional_color_classes = [
|
261
|
+
"billy-purple",
|
262
|
+
"state-closed",
|
263
|
+
"state-open",
|
264
|
+
]
|
265
|
+
|
266
|
+
additional_color_classes.each do |color_class|
|
267
|
+
tailwind_utility_prefixes.each do |prefix|
|
268
|
+
additional_classes.concat([".#{prefix}#{color_class}"])
|
269
|
+
end
|
270
|
+
end
|
271
|
+
|
272
|
+
Dir.glob("./app/components/**/*.rb") do |rb_filename|
|
273
|
+
content = File.read(rb_filename)
|
274
|
+
matches = content.scan(CLASS_REGEX)
|
275
|
+
|
276
|
+
if matches.present?
|
277
|
+
result = matches.flatten.compact.map { |c| c.split(" ") }.flatten.select { |r| r =~ /\A[0-9a-z:\-]+\z/ }.uniq
|
278
|
+
additional_classes.concat(result.map { |r| ".#{r}" }) if result.present?
|
279
|
+
end
|
280
|
+
end
|
281
|
+
|
282
|
+
final_list_of_classes = classes_found_in_examples.concat(additional_classes).uniq.sort
|
289
283
|
File.open("static/classes.yml", "w") do |f|
|
290
|
-
f.puts YAML.dump(
|
284
|
+
f.puts YAML.dump(final_list_of_classes)
|
291
285
|
end
|
292
286
|
|
293
287
|
File.open("static/arguments.yml", "w") do |f|
|