organism-ui 0.2.1
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 +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +28 -0
- data/Rakefile +35 -0
- data/app/assets/config/ui_manifest.js +1 -0
- data/app/assets/stylesheets/ui/application.css +15 -0
- data/app/controllers/ui/application_controller.rb +7 -0
- data/app/controllers/ui/style_guide_controller.rb +8 -0
- data/app/helpers/ui/application_helper.rb +4 -0
- data/app/javascript/ui/application.js +1 -0
- data/app/jobs/ui/application_job.rb +4 -0
- data/app/mailers/ui/application_mailer.rb +6 -0
- data/app/models/ui/application_record.rb +5 -0
- data/app/views/ui/style_guide/show.html.erb +1035 -0
- data/config/routes.rb +3 -0
- data/lib/tasks/ui_tasks.rake +4 -0
- data/lib/ui.rb +64 -0
- data/lib/ui/actionable.rb +19 -0
- data/lib/ui/breadcrumbs.rb +31 -0
- data/lib/ui/breadcrumbs/breadcrumb.rb +36 -0
- data/lib/ui/breadcrumbs/crumb.rb +15 -0
- data/lib/ui/buttons/base.rb +146 -0
- data/lib/ui/buttons/primary.rb +11 -0
- data/lib/ui/buttons/secondary.rb +11 -0
- data/lib/ui/buttons/tertiary.rb +11 -0
- data/lib/ui/card.rb +36 -0
- data/lib/ui/card/show.erb +16 -0
- data/lib/ui/collapse.rb +24 -0
- data/lib/ui/collapse/panel.rb +37 -0
- data/lib/ui/collapse/panel/show.erb +16 -0
- data/lib/ui/component.rb +23 -0
- data/lib/ui/descriptive_list.rb +50 -0
- data/lib/ui/descriptive_list/item.rb +24 -0
- data/lib/ui/descriptive_list/show.erb +7 -0
- data/lib/ui/dropdown.rb +22 -0
- data/lib/ui/dropdown/show.erb +13 -0
- data/lib/ui/empty.rb +36 -0
- data/lib/ui/empty/show.erb +11 -0
- data/lib/ui/engine.rb +13 -0
- data/lib/ui/list.rb +77 -0
- data/lib/ui/list/item.rb +9 -0
- data/lib/ui/list/show.erb +5 -0
- data/lib/ui/menu.rb +29 -0
- data/lib/ui/menu/callable.rb +11 -0
- data/lib/ui/menu/item.rb +39 -0
- data/lib/ui/menu/show.erb +4 -0
- data/lib/ui/menu/submenu.rb +55 -0
- data/lib/ui/notification.rb +37 -0
- data/lib/ui/notification/show.erb +19 -0
- data/lib/ui/page_header.rb +29 -0
- data/lib/ui/page_header/show.erb +18 -0
- data/lib/ui/pagination.rb +105 -0
- data/lib/ui/pagination/page_link.rb +24 -0
- data/lib/ui/pagination/show.erb +11 -0
- data/lib/ui/pagination/window.rb +85 -0
- data/lib/ui/step.rb +57 -0
- data/lib/ui/step/show.erb +13 -0
- data/lib/ui/steps.rb +67 -0
- data/lib/ui/steps/show.erb +5 -0
- data/lib/ui/stylable.rb +21 -0
- data/lib/ui/table.rb +162 -0
- data/lib/ui/table/header.rb +20 -0
- data/lib/ui/table/row.rb +25 -0
- data/lib/ui/table/select.rb +16 -0
- data/lib/ui/table/select/many.rb +38 -0
- data/lib/ui/table/select/one.rb +38 -0
- data/lib/ui/table/select_all.rb +36 -0
- data/lib/ui/table/show.erb +5 -0
- data/lib/ui/table/sort.rb +19 -0
- data/lib/ui/tooltip.rb +35 -0
- data/lib/ui/tooltip/show.erb +14 -0
- data/lib/ui/types.rb +7 -0
- data/lib/ui/value.rb +4 -0
- data/lib/ui/version.rb +3 -0
- data/lib/ui/wizard.rb +87 -0
- data/lib/ui/wizard/content.rb +20 -0
- data/lib/ui/wizard/show.erb +10 -0
- metadata +265 -0
@@ -0,0 +1,37 @@
|
|
1
|
+
module Ui
|
2
|
+
class Collapse < Component
|
3
|
+
class Panel < Component
|
4
|
+
def show
|
5
|
+
render
|
6
|
+
end
|
7
|
+
|
8
|
+
private
|
9
|
+
|
10
|
+
def collapse_icon
|
11
|
+
content_tag(
|
12
|
+
:div,
|
13
|
+
icon('fas fa-chevron-down'),
|
14
|
+
data: {
|
15
|
+
"collapsable-target": "icon"
|
16
|
+
}
|
17
|
+
)
|
18
|
+
end
|
19
|
+
|
20
|
+
def header
|
21
|
+
content_tag(:p, display(model[0]))
|
22
|
+
end
|
23
|
+
|
24
|
+
def content
|
25
|
+
content_tag(:p, display(model[1]))
|
26
|
+
end
|
27
|
+
|
28
|
+
def display(item)
|
29
|
+
if item.is_a?(Proc)
|
30
|
+
item.call
|
31
|
+
else
|
32
|
+
item
|
33
|
+
end
|
34
|
+
end
|
35
|
+
end
|
36
|
+
end
|
37
|
+
end
|
@@ -0,0 +1,16 @@
|
|
1
|
+
<article
|
2
|
+
class="ui-collapse-panel"
|
3
|
+
data-controller="collapsable"
|
4
|
+
data-collapsable-collapsed-value="false"
|
5
|
+
data-collapsable-hidden-class="hidden"
|
6
|
+
data-collapsable-collapsed-class="ui-collapsed">
|
7
|
+
|
8
|
+
<header data-action="click->collapsable#toggle">
|
9
|
+
<%= collapse_icon %>
|
10
|
+
<%= header %>
|
11
|
+
</header>
|
12
|
+
|
13
|
+
<div data-collapsable-target="content" class="ui-collapse-panel__content">
|
14
|
+
<%= content %>
|
15
|
+
</div>
|
16
|
+
</article>
|
data/lib/ui/component.rb
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
module Ui
|
2
|
+
class Component < ::Cell::ViewModel
|
3
|
+
include Layout::External
|
4
|
+
include ActionView::Helpers::FormHelper
|
5
|
+
include ActionView::Helpers::TagHelper
|
6
|
+
include ActionView::Context
|
7
|
+
|
8
|
+
VIEWPATH = Pathname.new(__FILE__).join("../..")
|
9
|
+
self.view_paths = [VIEWPATH]
|
10
|
+
|
11
|
+
def capture(*args)
|
12
|
+
yield(*args).html_safe
|
13
|
+
end
|
14
|
+
|
15
|
+
def render_group(items)
|
16
|
+
items.compact.join(' ').html_safe
|
17
|
+
end
|
18
|
+
|
19
|
+
def icon(style)
|
20
|
+
content_tag(:i, nil, class: style)
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|
@@ -0,0 +1,50 @@
|
|
1
|
+
module Ui
|
2
|
+
class DescriptiveList < Component
|
3
|
+
include Actionable
|
4
|
+
include Stylable
|
5
|
+
|
6
|
+
Directions = Types::String.enum(
|
7
|
+
'horizontal',
|
8
|
+
'vertical'
|
9
|
+
)
|
10
|
+
|
11
|
+
def show
|
12
|
+
render
|
13
|
+
end
|
14
|
+
|
15
|
+
private
|
16
|
+
|
17
|
+
def list_items
|
18
|
+
cell(
|
19
|
+
Ui::DescriptiveList::Item,
|
20
|
+
collection: items
|
21
|
+
)
|
22
|
+
end
|
23
|
+
|
24
|
+
def header
|
25
|
+
content_tag(
|
26
|
+
:header,
|
27
|
+
render_group([
|
28
|
+
content_tag(:h2, title),
|
29
|
+
content_tag(:nav, actions)
|
30
|
+
])
|
31
|
+
) if title || has_actions?
|
32
|
+
end
|
33
|
+
|
34
|
+
def title
|
35
|
+
options[:title]
|
36
|
+
end
|
37
|
+
|
38
|
+
def items
|
39
|
+
model
|
40
|
+
end
|
41
|
+
|
42
|
+
def direction
|
43
|
+
Directions[options.fetch(:direction, 'horizontal')]
|
44
|
+
end
|
45
|
+
|
46
|
+
def component_style
|
47
|
+
"ui-descriptive-list ui-descriptive-list--#{direction}"
|
48
|
+
end
|
49
|
+
end
|
50
|
+
end
|
@@ -0,0 +1,24 @@
|
|
1
|
+
module Ui
|
2
|
+
class DescriptiveList < Component
|
3
|
+
class Item < Component
|
4
|
+
def show
|
5
|
+
content_tag(
|
6
|
+
:div,
|
7
|
+
render_group([
|
8
|
+
content_tag(:dt, title),
|
9
|
+
content_tag(:dd, value.html_safe)
|
10
|
+
]),
|
11
|
+
class: 'ui-descriptive-list__item'
|
12
|
+
)
|
13
|
+
end
|
14
|
+
|
15
|
+
def title
|
16
|
+
model[0]
|
17
|
+
end
|
18
|
+
|
19
|
+
def value
|
20
|
+
model[1].try(:call) || model[1]
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|
24
|
+
end
|
data/lib/ui/dropdown.rb
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
module Ui
|
2
|
+
class Dropdown < Component
|
3
|
+
Modes = Types::String.enum(
|
4
|
+
'click',
|
5
|
+
'hover'
|
6
|
+
)
|
7
|
+
|
8
|
+
def show(&block)
|
9
|
+
render(&block)
|
10
|
+
end
|
11
|
+
|
12
|
+
private
|
13
|
+
|
14
|
+
def overlay
|
15
|
+
model
|
16
|
+
end
|
17
|
+
|
18
|
+
def mode
|
19
|
+
Modes[options.fetch(:mode, 'click')]
|
20
|
+
end
|
21
|
+
end
|
22
|
+
end
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<div
|
2
|
+
data-controller="dropdown"
|
3
|
+
data-dropdown-hidden-class="hidden"
|
4
|
+
data-dropdown-expanded-value="false"
|
5
|
+
data-dropdown-mode-value="<%= mode %>"
|
6
|
+
data-action="click->dropdown#toggle"
|
7
|
+
class="ui-dropdown">
|
8
|
+
<%= yield %>
|
9
|
+
|
10
|
+
<div data-dropdown-target="expandable" class="ui-dropdown__expandable">
|
11
|
+
<%= overlay %>
|
12
|
+
</div>
|
13
|
+
</div>
|
data/lib/ui/empty.rb
ADDED
@@ -0,0 +1,36 @@
|
|
1
|
+
module Ui
|
2
|
+
class Empty < Component
|
3
|
+
include Stylable
|
4
|
+
include Actionable
|
5
|
+
|
6
|
+
def show
|
7
|
+
render
|
8
|
+
end
|
9
|
+
|
10
|
+
private
|
11
|
+
|
12
|
+
def image
|
13
|
+
image_tag options[:image] if options[:image]
|
14
|
+
end
|
15
|
+
|
16
|
+
def display_icon
|
17
|
+
icon(options.fetch(:icon, default_icon)) if options[:image].nil?
|
18
|
+
end
|
19
|
+
|
20
|
+
def default_icon
|
21
|
+
"fas fa-inbox fa-5x"
|
22
|
+
end
|
23
|
+
|
24
|
+
def caption
|
25
|
+
options.fetch(:caption, default_caption)
|
26
|
+
end
|
27
|
+
|
28
|
+
def default_caption
|
29
|
+
content_tag(:p, 'No data')
|
30
|
+
end
|
31
|
+
|
32
|
+
def component_style
|
33
|
+
"ui-empty"
|
34
|
+
end
|
35
|
+
end
|
36
|
+
end
|
data/lib/ui/engine.rb
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
module Ui
|
2
|
+
class Engine < ::Rails::Engine
|
3
|
+
isolate_namespace Ui
|
4
|
+
|
5
|
+
config.generators do |g|
|
6
|
+
g.test_framework :rspec, fixture: false
|
7
|
+
g.fixture_replacement :factory_bot
|
8
|
+
g.factory_bot dir: 'spec/factories'
|
9
|
+
g.assets false
|
10
|
+
g.helper false
|
11
|
+
end
|
12
|
+
end
|
13
|
+
end
|
data/lib/ui/list.rb
ADDED
@@ -0,0 +1,77 @@
|
|
1
|
+
module Ui
|
2
|
+
class List < Component
|
3
|
+
include Stylable
|
4
|
+
include Actionable
|
5
|
+
|
6
|
+
Renderable = Types.Interface(:call)
|
7
|
+
|
8
|
+
def show
|
9
|
+
render
|
10
|
+
end
|
11
|
+
|
12
|
+
private
|
13
|
+
|
14
|
+
def list
|
15
|
+
content_tag(:ul, list_items)
|
16
|
+
end
|
17
|
+
|
18
|
+
def list_items
|
19
|
+
if list_data.any?
|
20
|
+
render_group(list_data)
|
21
|
+
else
|
22
|
+
render_empty
|
23
|
+
end
|
24
|
+
end
|
25
|
+
|
26
|
+
def list_data
|
27
|
+
model.map do |item|
|
28
|
+
renderable.call(item)
|
29
|
+
end
|
30
|
+
end
|
31
|
+
|
32
|
+
def header
|
33
|
+
content_tag(
|
34
|
+
:header,
|
35
|
+
render_group([
|
36
|
+
options[:header],
|
37
|
+
actions
|
38
|
+
])
|
39
|
+
) if options[:header] || has_actions?
|
40
|
+
end
|
41
|
+
|
42
|
+
def footer
|
43
|
+
content_tag(
|
44
|
+
:footer,
|
45
|
+
options[:footer]
|
46
|
+
) if options[:footer]
|
47
|
+
end
|
48
|
+
|
49
|
+
def renderable
|
50
|
+
Renderable[options.fetch(:renderable, default_renderable)]
|
51
|
+
end
|
52
|
+
|
53
|
+
def default_renderable
|
54
|
+
->(item) {
|
55
|
+
cell(
|
56
|
+
Ui::List::Item,
|
57
|
+
item
|
58
|
+
).()
|
59
|
+
}
|
60
|
+
end
|
61
|
+
|
62
|
+
def component_style
|
63
|
+
'ui-list'
|
64
|
+
end
|
65
|
+
|
66
|
+
def render_empty
|
67
|
+
content_tag(:li, empty)
|
68
|
+
end
|
69
|
+
|
70
|
+
def empty
|
71
|
+
cell(
|
72
|
+
Ui::Empty,
|
73
|
+
nil
|
74
|
+
).()
|
75
|
+
end
|
76
|
+
end
|
77
|
+
end
|
data/lib/ui/list/item.rb
ADDED
data/lib/ui/menu.rb
ADDED
@@ -0,0 +1,29 @@
|
|
1
|
+
module Ui
|
2
|
+
class Menu < Component
|
3
|
+
include Stylable
|
4
|
+
|
5
|
+
def show
|
6
|
+
render
|
7
|
+
end
|
8
|
+
|
9
|
+
private
|
10
|
+
|
11
|
+
def header
|
12
|
+
content_tag(:header, options[:header]) if options[:header]
|
13
|
+
end
|
14
|
+
|
15
|
+
def items
|
16
|
+
content_tag(
|
17
|
+
:ul,
|
18
|
+
cell(
|
19
|
+
Ui::Menu::Item,
|
20
|
+
collection: model
|
21
|
+
).()
|
22
|
+
)
|
23
|
+
end
|
24
|
+
|
25
|
+
def component_style
|
26
|
+
'ui-menu'
|
27
|
+
end
|
28
|
+
end
|
29
|
+
end
|
data/lib/ui/menu/item.rb
ADDED
@@ -0,0 +1,39 @@
|
|
1
|
+
module Ui
|
2
|
+
class Menu < Component
|
3
|
+
class Item < Component
|
4
|
+
include ::Cell::Builder
|
5
|
+
|
6
|
+
builds do |item, options|
|
7
|
+
if item.is_a? Proc
|
8
|
+
Ui::Menu::Callable
|
9
|
+
elsif item.is_a? Array
|
10
|
+
Ui::Menu::Submenu
|
11
|
+
else
|
12
|
+
self
|
13
|
+
end
|
14
|
+
end
|
15
|
+
|
16
|
+
def show
|
17
|
+
content_tag(
|
18
|
+
:li,
|
19
|
+
render_item,
|
20
|
+
class: style
|
21
|
+
)
|
22
|
+
end
|
23
|
+
|
24
|
+
private
|
25
|
+
|
26
|
+
def render_item
|
27
|
+
model.html_safe
|
28
|
+
end
|
29
|
+
|
30
|
+
def depth
|
31
|
+
options[:depth] || 0
|
32
|
+
end
|
33
|
+
|
34
|
+
def style
|
35
|
+
"ui-menu__item ui-menu__item--depth-#{depth}"
|
36
|
+
end
|
37
|
+
end
|
38
|
+
end
|
39
|
+
end
|