showcase-rails 0.1.1 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +76 -7
- data/app/assets/builds/showcase.css +78 -78
- data/app/controllers/showcase/engine_controller.rb +12 -0
- data/app/controllers/showcase/pages_controller.rb +1 -4
- data/app/controllers/showcase/previews_controller.rb +5 -0
- data/app/models/showcase/{page/options.rb → options.rb} +1 -1
- data/app/models/showcase/path.rb +49 -12
- data/app/models/showcase/preview.rb +94 -0
- data/app/models/showcase/{page/sample.rb → sample.rb} +10 -6
- data/app/views/layouts/showcase.html.erb +3 -3
- data/app/views/showcase/engine/_javascripts.html.erb +1 -0
- data/app/views/showcase/engine/_options.html.erb +29 -0
- data/app/views/showcase/engine/_preview.html.erb +26 -0
- data/app/views/showcase/engine/_root.html.erb +13 -0
- data/app/views/showcase/engine/_sample.html.erb +37 -0
- data/app/views/showcase/engine/_stylesheets.html.erb +1 -0
- data/app/views/showcase/engine/index.html.erb +33 -0
- data/app/views/showcase/engine/path/_path.html.erb +3 -0
- data/app/views/showcase/engine/path/_tree.html.erb +4 -0
- data/app/views/showcase/engine/show.html.erb +1 -0
- data/config/routes.rb +2 -2
- data/config/tailwind.config.js +1 -0
- data/lib/showcase/integration_test.rb +23 -0
- data/lib/showcase/route_helper.rb +8 -0
- data/lib/showcase/version.rb +1 -1
- data/lib/showcase.rb +14 -10
- data/lib/tasks/showcase_tasks.rake +30 -4
- metadata +20 -14
- data/app/controllers/showcase/application_controller.rb +0 -3
- data/app/models/showcase/page.rb +0 -45
- data/app/views/showcase/_root.html.erb +0 -13
- data/app/views/showcase/pages/_options.html.erb +0 -27
- data/app/views/showcase/pages/_page.html.erb +0 -26
- data/app/views/showcase/pages/_sample.html.erb +0 -37
- data/app/views/showcase/pages/index.html.erb +0 -33
- data/app/views/showcase/pages/show.html.erb +0 -1
- data/app/views/showcase/path/_tree.html.erb +0 -9
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
class Showcase::
|
|
1
|
+
class Showcase::Sample
|
|
2
2
|
attr_reader :name, :id, :events, :details
|
|
3
3
|
attr_reader :source
|
|
4
4
|
|
|
@@ -15,8 +15,12 @@ class Showcase::Page::Sample
|
|
|
15
15
|
end
|
|
16
16
|
|
|
17
17
|
def collect(&block)
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
if block.arity.zero?
|
|
19
|
+
preview(&block)
|
|
20
|
+
extract(&block)
|
|
21
|
+
else
|
|
22
|
+
@view_context.capture(self, &block)
|
|
23
|
+
end
|
|
20
24
|
end
|
|
21
25
|
|
|
22
26
|
def preview(&block)
|
|
@@ -24,8 +28,8 @@ class Showcase::Page::Sample
|
|
|
24
28
|
end
|
|
25
29
|
|
|
26
30
|
def extract(&block)
|
|
27
|
-
|
|
28
|
-
|
|
31
|
+
lines = extract_block_lines_via_matched_indentation_from(*block.source_location)
|
|
32
|
+
@source = @view_context.instance_exec(lines, &Showcase.sample_renderer)
|
|
29
33
|
end
|
|
30
34
|
|
|
31
35
|
private
|
|
@@ -33,7 +37,7 @@ class Showcase::Page::Sample
|
|
|
33
37
|
def extract_block_lines_via_matched_indentation_from(file, starting_index)
|
|
34
38
|
first_line, *lines = File.readlines(file).from(starting_index - 1)
|
|
35
39
|
|
|
36
|
-
indentation = first_line.match(/^\s+(
|
|
40
|
+
indentation = first_line.match(/^\s+(?=\b)/).to_s
|
|
37
41
|
matcher = /^#{indentation}\S/
|
|
38
42
|
|
|
39
43
|
index = lines.index { _1.match?(matcher) }
|
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
<title>Showcase</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
6
|
|
|
7
|
-
<%=
|
|
8
|
-
<%=
|
|
7
|
+
<%= render "stylesheets" %>
|
|
8
|
+
<%= render "javascripts" %>
|
|
9
9
|
</head>
|
|
10
10
|
|
|
11
11
|
<body>
|
|
12
|
-
<%= render "showcase/root" %>
|
|
12
|
+
<%= render "showcase/engine/root" %>
|
|
13
13
|
</body>
|
|
14
14
|
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<%= javascript_include_tag "application", "showcase" %>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<section class="sc-w-full sc-overflow-x-auto">
|
|
2
|
+
<h2 class="sc-text-xl sc-font-semibold sc-mb-2">Options</h2>
|
|
3
|
+
|
|
4
|
+
<table class="sc-table sc-border-collapse sc-border sc-border-gray-200">
|
|
5
|
+
<thead>
|
|
6
|
+
<tr class="sc-bg-slate-50">
|
|
7
|
+
<% options.headers.each do |header| %>
|
|
8
|
+
<th class="sc-px-4 sc-py-2"><%= header.to_s.humanize %></th>
|
|
9
|
+
<% end %>
|
|
10
|
+
</tr>
|
|
11
|
+
</thead>
|
|
12
|
+
|
|
13
|
+
<tbody>
|
|
14
|
+
<% options.each do |option| %>
|
|
15
|
+
<tr class="sc-border-t sc-border-gray-200">
|
|
16
|
+
<% option.each do |key, value| %>
|
|
17
|
+
<% if key == :required %>
|
|
18
|
+
<td class="sc-p-4">
|
|
19
|
+
<%= tag.input type: :checkbox, checked: value, disabled: true if value%>
|
|
20
|
+
</td>
|
|
21
|
+
<% else %>
|
|
22
|
+
<td class="sc-p-4"><%= tag.pre value %></td>
|
|
23
|
+
<% end %>
|
|
24
|
+
<% end %>
|
|
25
|
+
</tr>
|
|
26
|
+
<% end %>
|
|
27
|
+
</tbody>
|
|
28
|
+
</table>
|
|
29
|
+
</section>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<div class="sc-space-y-8">
|
|
2
|
+
<section>
|
|
3
|
+
<% if preview.title %>
|
|
4
|
+
<div class="sc-flex sc-items-center sc-space-x-2 sc-mb-2">
|
|
5
|
+
<h2 class="sc-font-semibold sc-text-3xl"><%= preview.title %></h2>
|
|
6
|
+
|
|
7
|
+
<%# TODO: Insert default badge support here. %>
|
|
8
|
+
</div>
|
|
9
|
+
<% end %>
|
|
10
|
+
|
|
11
|
+
<% if preview.description %>
|
|
12
|
+
<p class="sc-font-normal sc-text-base"><%= preview.description %></p>
|
|
13
|
+
<% end %>
|
|
14
|
+
</section>
|
|
15
|
+
|
|
16
|
+
<% if preview.samples.any? %>
|
|
17
|
+
<section>
|
|
18
|
+
<h2 class="sc-font-semibold sc-text-xl sc-mb-2">Samples</h2>
|
|
19
|
+
<%= render partial: "showcase/engine/sample", collection: preview.samples %>
|
|
20
|
+
</section>
|
|
21
|
+
<% end %>
|
|
22
|
+
|
|
23
|
+
<% if options = preview.options.presence %>
|
|
24
|
+
<%= render "showcase/engine/options", options: options %>
|
|
25
|
+
<% end %>
|
|
26
|
+
</div>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<main class="sc-flex sc-flex-wrap" aria-labelledby="showcase_main_title">
|
|
2
|
+
<section class="sc-grid sc-grid-cols-12 sc-w-full">
|
|
3
|
+
<nav class="sc-col-span-3 xl:sc-col-span-2 sc-py-5 sc-h-full sc-border-r">
|
|
4
|
+
<h1 id="showcase_main_title" class="sc-font-black sc-text-2xl sc-py-2 sc-pl-4 sc-cursor-pointer"><%= link_to "Showcase", root_url %></h1>
|
|
5
|
+
|
|
6
|
+
<%= render Showcase::Path.tree %>
|
|
7
|
+
</nav>
|
|
8
|
+
|
|
9
|
+
<section class="sc-col-span-9 xl:sc-col-span-10 sc-w-full sc-min-h-screen sc-p-12 sc-pt-7">
|
|
10
|
+
<%= yield %>
|
|
11
|
+
</section>
|
|
12
|
+
</section>
|
|
13
|
+
</main>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<section class="sc-mb-4 sc-border sc-border-gray-200 sc-rounded-md" aria-labelledby="showcase_<%= sample.id %>_title">
|
|
2
|
+
<showcase-sample id="<%= sample.id %>" events="<%= sample.events %>">
|
|
3
|
+
<header class="sc-bg-slate-100/50">
|
|
4
|
+
<h3 id="showcase_<%= sample.id %>_title" class="sc-px-4 sc-py-2 sc-font-medium sc-text-base md:sc-text-lg sc-leading-snug sc-truncate"><%= link_to sample.name, "##{sample.id}" %></h3>
|
|
5
|
+
|
|
6
|
+
<% if sample.description %>
|
|
7
|
+
<p class="sc-px-4 sc-py-2 sc-text-base"><%= sample.description %></p>
|
|
8
|
+
<% end %>
|
|
9
|
+
</header>
|
|
10
|
+
|
|
11
|
+
<% if sample.preview %>
|
|
12
|
+
<section class="sc-px-4 sc-py-2 sc-border sc-border-gray-200 sc-border-0 sc-border-b">
|
|
13
|
+
<%= sample.preview %>
|
|
14
|
+
</section>
|
|
15
|
+
<% end %>
|
|
16
|
+
|
|
17
|
+
<% if sample.source %>
|
|
18
|
+
<details>
|
|
19
|
+
<summary class="sc-px-4 sc-py-2 hover:sc-bg-indigo-50 sc-cursor-pointer sc-select-none">View Source</summary>
|
|
20
|
+
|
|
21
|
+
<section class="sc-px-4 sc-py-2 sc-relative sc-overflow-y-auto hover:sc-select-all">
|
|
22
|
+
<%= sample.source %>
|
|
23
|
+
</section>
|
|
24
|
+
</details>
|
|
25
|
+
<% end %>
|
|
26
|
+
|
|
27
|
+
<% if sample.events.any? %>
|
|
28
|
+
<section class="sc-px-4 sc-py-2 sc-font-small sc-bg-slate-50" aria-labelledby="showcase_<%= sample.id %>_javascript_events_title">
|
|
29
|
+
<h4 id="showcase_<%= sample.id %>_javascript_events_title" class="sc-mb-2 sc-font-medium sc-text-base">JavaScript Events</h4>
|
|
30
|
+
|
|
31
|
+
<div class="sc-overflow-scroll sc-max-h-20">
|
|
32
|
+
<pre data-showcase-sample-target="relay"></pre>
|
|
33
|
+
</div>
|
|
34
|
+
</section>
|
|
35
|
+
<% end %>
|
|
36
|
+
</showcase-sample>
|
|
37
|
+
</section>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<%= stylesheet_link_tag "application", "showcase" %>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<article class="sc-space-y-4 sc-font-normal sc-text-base" aria-labelledby="showcase_article_title">
|
|
2
|
+
<p id="showcase_article_title" class="sc-font-normal sc-text-xl">👋 Welcome to <span class="sc-italic">Showcase</span> — your UI Pattern Library!</p>
|
|
3
|
+
|
|
4
|
+
<section class="sc-space-y-4">
|
|
5
|
+
<h2 class="sc-font-semibold sc-text-2xl">What is this thing?</h2>
|
|
6
|
+
<p>This resource is intended to be a hub for all-things UI for your developers, with the goal of <span class="italic font-semibold">sharing knowledge</span>, <span class="italic font-semibold">promoting reuse of existing code</span>, and <span class="italic font-semibold">ensuring consistency</span> across your application.</p>
|
|
7
|
+
</section>
|
|
8
|
+
|
|
9
|
+
<section class="sc-space-y-4">
|
|
10
|
+
<h2 class="sc-font-semibold sc-text-2xl">How do I use it?</h2>
|
|
11
|
+
<p>On each preview, you can add a series of usage examples for each component, style, or pattern. In the samples blocks, you'll see a live preview, as well as the source used to produce the example.</p>
|
|
12
|
+
<p>At the bottom of most previews, you will see a table, listing any options for configuring the partial or component.</p>
|
|
13
|
+
</section>
|
|
14
|
+
|
|
15
|
+
<section class="sc-space-y-4">
|
|
16
|
+
<h2 class="sc-font-semibold sc-text-2xl">But I don't see the thing I need 🤔</h2>
|
|
17
|
+
<p>If you don't see the pattern or component here, that doesn't mean it doesn't aleady exist or can't be created with some combination of existing building blocks.</p>
|
|
18
|
+
</section>
|
|
19
|
+
|
|
20
|
+
<section class="sc-space-y-4">
|
|
21
|
+
<h2 class="sc-font-semibold sc-text-2xl">I have questions, who do I reach out to?</h2>
|
|
22
|
+
<p>If you need help or have questions, please reach out to <%#= Showcase.links.support %>.</p>
|
|
23
|
+
</section>
|
|
24
|
+
|
|
25
|
+
<section class="sc-space-y-4">
|
|
26
|
+
<h2 class="sc-font-semibold sc-text-2xl">Additional resources</h2>
|
|
27
|
+
<ul class="sc-list-none">
|
|
28
|
+
<li>
|
|
29
|
+
<%= link_to "Bullet Train field partials documentation", "https://bullettrain.co/docs/field-partials", target: "_blank" %>
|
|
30
|
+
</li>
|
|
31
|
+
</ul>
|
|
32
|
+
</section>
|
|
33
|
+
</article>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<details open class="sc-flex sc-flex-col <%= "sc-pl-4" unless tree.root? %>">
|
|
2
|
+
<%= tag.summary tree.name.titleize, class: "hover:sc-bg-indigo-50 sc-font-medium sc-text-black sc-text-base sc-py-2 sc-pl-4 sc-cursor-pointer" %>
|
|
3
|
+
<%= render tree.ordered_children %>
|
|
4
|
+
</details>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<%= render "showcase/engine/preview", preview: @preview %>
|
data/config/routes.rb
CHANGED
data/config/tailwind.config.js
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
class Showcase::IntegrationTest < ActionDispatch::IntegrationTest
|
|
2
|
+
def self.inherited(test_class)
|
|
3
|
+
super
|
|
4
|
+
|
|
5
|
+
tree = Showcase::Path.tree
|
|
6
|
+
tree.flat_map(&:ordered_paths).each do |path|
|
|
7
|
+
test_class.test "Showcase: GET showcase/previews/#{path.id} renders successfully" do
|
|
8
|
+
get showcase.preview_path(path.id)
|
|
9
|
+
|
|
10
|
+
assert_response :ok
|
|
11
|
+
assert_showcase_preview(path.id)
|
|
12
|
+
end
|
|
13
|
+
end
|
|
14
|
+
|
|
15
|
+
test_class.test "Showcase: isn't empty" do
|
|
16
|
+
assert_not_empty tree, "Showcase couldn't find any samples to generate tests for"
|
|
17
|
+
end
|
|
18
|
+
end
|
|
19
|
+
|
|
20
|
+
# Override `assert_showcase_preview` to add custom assertions.
|
|
21
|
+
def assert_showcase_preview(id)
|
|
22
|
+
end
|
|
23
|
+
end
|
data/lib/showcase/version.rb
CHANGED
data/lib/showcase.rb
CHANGED
|
@@ -1,16 +1,20 @@
|
|
|
1
|
-
require "
|
|
2
|
-
|
|
1
|
+
require "zeitwerk"
|
|
2
|
+
loader = Zeitwerk::Loader.for_gem
|
|
3
|
+
loader.ignore("#{__dir__}/showcase-rails.rb")
|
|
4
|
+
loader.setup
|
|
3
5
|
|
|
4
6
|
module Showcase
|
|
5
|
-
singleton_class.attr_accessor :
|
|
6
|
-
@
|
|
7
|
-
@sample_renderer = ->(lines) { lines.join }
|
|
7
|
+
singleton_class.attr_accessor :sample_renderer
|
|
8
|
+
@sample_renderer = ->(lines) { tag.pre lines.join.strip_heredoc }
|
|
8
9
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
end
|
|
10
|
+
singleton_class.attr_reader :previews_path
|
|
11
|
+
@previews_path = "showcase/previews"
|
|
12
12
|
|
|
13
|
-
def self.
|
|
14
|
-
|
|
13
|
+
def self.previews
|
|
14
|
+
Showcase::EngineController.view_paths.map(&:path).flat_map do |root|
|
|
15
|
+
Dir.glob("**/*.*", base: File.join(root, previews_path))
|
|
16
|
+
end.uniq
|
|
15
17
|
end
|
|
16
18
|
end
|
|
19
|
+
|
|
20
|
+
require "showcase/engine" if defined?(Rails::Engine)
|
|
@@ -1,4 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
namespace :showcase do
|
|
2
|
+
namespace :install do
|
|
3
|
+
INTEGRATION_TEST_PATH = "test/integration/showcase_test.rb"
|
|
4
|
+
|
|
5
|
+
desc "Install Showcase smokescreen testing in #{INTEGRATION_TEST_PATH}"
|
|
6
|
+
task :smokescreen_test do
|
|
7
|
+
mkdir_p INTEGRATION_TEST_PATH
|
|
8
|
+
File.write INTEGRATION_TEST_PATH, <<~RUBY
|
|
9
|
+
require "test_helper"
|
|
10
|
+
|
|
11
|
+
class ShowcaseTest < Showcase::IntegrationTest
|
|
12
|
+
def assert_showcase_preview(id)
|
|
13
|
+
# Add any custom preview response body assertions here.
|
|
14
|
+
end
|
|
15
|
+
end
|
|
16
|
+
RUBY
|
|
17
|
+
end
|
|
18
|
+
end
|
|
19
|
+
|
|
20
|
+
# desc "Pass a directory relative to app/views to copy over"
|
|
21
|
+
# task :copy do |t, directory|
|
|
22
|
+
# prefix = "app/views/#{directory}"
|
|
23
|
+
#
|
|
24
|
+
# Dir.glob(File.join(Dir.pwd, prefix, "**/*.*")).each do |filename|
|
|
25
|
+
# new_filename = filename.sub(directory, Showcase.templates_path).sub(/\/_/, "/")
|
|
26
|
+
# mkdir_p File.dirname(new_filename)
|
|
27
|
+
# copy_file filename, new_filename
|
|
28
|
+
# end
|
|
29
|
+
# end
|
|
30
|
+
end
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: showcase-rails
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.2.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Daniel Pence
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date:
|
|
12
|
+
date: 2023-02-06 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: rails
|
|
@@ -52,25 +52,31 @@ files:
|
|
|
52
52
|
- app/assets/builds/showcase.css
|
|
53
53
|
- app/assets/config/showcase_manifest.js
|
|
54
54
|
- app/assets/javascripts/showcase.js
|
|
55
|
-
- app/controllers/showcase/
|
|
55
|
+
- app/controllers/showcase/engine_controller.rb
|
|
56
56
|
- app/controllers/showcase/pages_controller.rb
|
|
57
|
-
- app/
|
|
58
|
-
- app/models/showcase/
|
|
59
|
-
- app/models/showcase/page/sample.rb
|
|
57
|
+
- app/controllers/showcase/previews_controller.rb
|
|
58
|
+
- app/models/showcase/options.rb
|
|
60
59
|
- app/models/showcase/path.rb
|
|
60
|
+
- app/models/showcase/preview.rb
|
|
61
|
+
- app/models/showcase/sample.rb
|
|
61
62
|
- app/views/layouts/showcase.html.erb
|
|
62
|
-
- app/views/showcase/
|
|
63
|
-
- app/views/showcase/
|
|
64
|
-
- app/views/showcase/
|
|
65
|
-
- app/views/showcase/
|
|
66
|
-
- app/views/showcase/
|
|
67
|
-
- app/views/showcase/
|
|
68
|
-
- app/views/showcase/
|
|
63
|
+
- app/views/showcase/engine/_javascripts.html.erb
|
|
64
|
+
- app/views/showcase/engine/_options.html.erb
|
|
65
|
+
- app/views/showcase/engine/_preview.html.erb
|
|
66
|
+
- app/views/showcase/engine/_root.html.erb
|
|
67
|
+
- app/views/showcase/engine/_sample.html.erb
|
|
68
|
+
- app/views/showcase/engine/_stylesheets.html.erb
|
|
69
|
+
- app/views/showcase/engine/index.html.erb
|
|
70
|
+
- app/views/showcase/engine/path/_path.html.erb
|
|
71
|
+
- app/views/showcase/engine/path/_tree.html.erb
|
|
72
|
+
- app/views/showcase/engine/show.html.erb
|
|
69
73
|
- config/routes.rb
|
|
70
74
|
- config/tailwind.config.js
|
|
71
75
|
- lib/showcase-rails.rb
|
|
72
76
|
- lib/showcase.rb
|
|
73
77
|
- lib/showcase/engine.rb
|
|
78
|
+
- lib/showcase/integration_test.rb
|
|
79
|
+
- lib/showcase/route_helper.rb
|
|
74
80
|
- lib/showcase/version.rb
|
|
75
81
|
- lib/tasks/showcase_tasks.rake
|
|
76
82
|
homepage: https://github.com/kaspth/showcase
|
|
@@ -95,7 +101,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
95
101
|
- !ruby/object:Gem::Version
|
|
96
102
|
version: '0'
|
|
97
103
|
requirements: []
|
|
98
|
-
rubygems_version: 3.
|
|
104
|
+
rubygems_version: 3.4.1
|
|
99
105
|
signing_key:
|
|
100
106
|
specification_version: 4
|
|
101
107
|
summary: Showcase helps you show off and document your partials, components, view
|
data/app/models/showcase/page.rb
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
class Showcase::Page
|
|
2
|
-
autoload :Sample, "showcase/page/sample"
|
|
3
|
-
autoload :Options, "showcase/page/options"
|
|
4
|
-
|
|
5
|
-
attr_reader :id, :badges, :samples
|
|
6
|
-
|
|
7
|
-
def initialize(view_context, id:, title: nil)
|
|
8
|
-
@view_context, @id = view_context, id
|
|
9
|
-
@badges, @samples = [], []
|
|
10
|
-
title title
|
|
11
|
-
end
|
|
12
|
-
|
|
13
|
-
def title(content = nil)
|
|
14
|
-
@title = content if content
|
|
15
|
-
@title
|
|
16
|
-
end
|
|
17
|
-
|
|
18
|
-
def description(content = nil, &block)
|
|
19
|
-
@description = content || @view_context.capture(&block) if content || block_given?
|
|
20
|
-
@description
|
|
21
|
-
end
|
|
22
|
-
|
|
23
|
-
def badge(*badges)
|
|
24
|
-
@badges.concat badges
|
|
25
|
-
end
|
|
26
|
-
|
|
27
|
-
def sample(name, **options, &block)
|
|
28
|
-
@samples << sample = Sample.new(@view_context, name, **options)
|
|
29
|
-
|
|
30
|
-
if block.arity.zero?
|
|
31
|
-
sample.collect(&block)
|
|
32
|
-
else
|
|
33
|
-
@view_context.capture(sample, &block)
|
|
34
|
-
end
|
|
35
|
-
end
|
|
36
|
-
|
|
37
|
-
def options
|
|
38
|
-
@options ||= Options.new(@view_context).tap { yield _1 if block_given? }
|
|
39
|
-
end
|
|
40
|
-
|
|
41
|
-
def render_template
|
|
42
|
-
@view_context.render template: id, prefixes: [Showcase.templates_path], locals: { showcase: self }
|
|
43
|
-
nil
|
|
44
|
-
end
|
|
45
|
-
end
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<main class="flex flex-wrap">
|
|
2
|
-
<section class="grid grid-cols-12 w-full">
|
|
3
|
-
<nav class="col-span-3 xl:col-span-2 py-5 h-full border-r">
|
|
4
|
-
<h1 class="font-black text-2xl py-2 pl-4 cursor-pointer"><%= link_to "Showcase", root_url %></h1>
|
|
5
|
-
|
|
6
|
-
<%= render partial: "showcase/path/tree", collection: Showcase::Path.tree %>
|
|
7
|
-
</nav>
|
|
8
|
-
|
|
9
|
-
<section class="col-span-9 xl:col-span-10 w-full min-h-screen p-12 pt-7">
|
|
10
|
-
<%= yield %>
|
|
11
|
-
</section>
|
|
12
|
-
</section>
|
|
13
|
-
</main>
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
<section class="w-full overflow-x-auto">
|
|
2
|
-
<h2 class="text-xl font-semibold mb-2">Options</h2>
|
|
3
|
-
|
|
4
|
-
<table class="table border-collapse border border-gray-200">
|
|
5
|
-
<thead>
|
|
6
|
-
<tr class="bg-slate-50">
|
|
7
|
-
<% options.headers.each do |header| %>
|
|
8
|
-
<th class="px-4 py-2"><%= header.to_s.humanize %></th>
|
|
9
|
-
<% end %>
|
|
10
|
-
</tr>
|
|
11
|
-
</thead>
|
|
12
|
-
|
|
13
|
-
<tbody>
|
|
14
|
-
<% options.each do |option| %>
|
|
15
|
-
<tr class="border-t border-gray-200">
|
|
16
|
-
<% option.each do |key, value| %>
|
|
17
|
-
<% if key == :required %>
|
|
18
|
-
<td class="p-4"><%= tag.input type: :checkbox, checked: value, disabled: true if value %></td>
|
|
19
|
-
<% else %>
|
|
20
|
-
<td class="p-4"><%= tag.pre value %></td>
|
|
21
|
-
<% end %>
|
|
22
|
-
<% end %>
|
|
23
|
-
</tr>
|
|
24
|
-
<% end %>
|
|
25
|
-
</tbody>
|
|
26
|
-
</table>
|
|
27
|
-
</section>
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
<div class="space-y-8">
|
|
2
|
-
<section>
|
|
3
|
-
<% if page.title %>
|
|
4
|
-
<div class="flex items-center space-x-2 mb-2">
|
|
5
|
-
<h2 class="font-semibold text-3xl"><%= page.title %></h2>
|
|
6
|
-
|
|
7
|
-
<%# TODO: Insert default badge support here. %>
|
|
8
|
-
</div>
|
|
9
|
-
<% end %>
|
|
10
|
-
|
|
11
|
-
<% if page.description %>
|
|
12
|
-
<p class="font-normal text-base"><%= page.description %></p>
|
|
13
|
-
<% end %>
|
|
14
|
-
</section>
|
|
15
|
-
|
|
16
|
-
<% if page.samples.any? %>
|
|
17
|
-
<section>
|
|
18
|
-
<h2 class="font-semibold text-xl mb-2">Samples</h2>
|
|
19
|
-
<%= render partial: "showcase/pages/sample", collection: page.samples %>
|
|
20
|
-
</section>
|
|
21
|
-
<% end %>
|
|
22
|
-
|
|
23
|
-
<% if options = page.options.presence %>
|
|
24
|
-
<%= render "showcase/pages/options", options: options %>
|
|
25
|
-
<% end %>
|
|
26
|
-
</div>
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
<section class="mb-4 border border-gray-200 rounded-md">
|
|
2
|
-
<showcase-sample id="<%= sample.id %>" events="<%= sample.events %>">
|
|
3
|
-
<header class="bg-slate-100/50">
|
|
4
|
-
<h3 class="px-4 py-2 font-medium text-base md:text-lg leading-snug truncate"><%= link_to sample.name, "##{sample.id}" %></h3>
|
|
5
|
-
|
|
6
|
-
<% if sample.description %>
|
|
7
|
-
<p class="px-4 py-2 text-base"><%= sample.description %></p>
|
|
8
|
-
<% end %>
|
|
9
|
-
</header>
|
|
10
|
-
|
|
11
|
-
<% if sample.preview %>
|
|
12
|
-
<section class="px-4 py-2 border border-gray-200 border-0 border-b">
|
|
13
|
-
<%= sample.preview %>
|
|
14
|
-
</section>
|
|
15
|
-
<% end %>
|
|
16
|
-
|
|
17
|
-
<% if sample.source %>
|
|
18
|
-
<details>
|
|
19
|
-
<summary class="px-4 py-2 hover:bg-indigo-50 cursor-pointer select-none">View Source</summary>
|
|
20
|
-
|
|
21
|
-
<section class="px-4 py-2 relative overflow-hidden hover:select-all">
|
|
22
|
-
<%= sample.source %>
|
|
23
|
-
</section>
|
|
24
|
-
</details>
|
|
25
|
-
<% end %>
|
|
26
|
-
|
|
27
|
-
<% if sample.events.any? %>
|
|
28
|
-
<section class="px-4 py-2 font-small bg-slate-50">
|
|
29
|
-
<h4 class="mb-2 font-medium text-base">JavaScript Events</h4>
|
|
30
|
-
|
|
31
|
-
<div class="overflow-scroll max-h-20">
|
|
32
|
-
<pre data-showcase-sample-target="relay"></pre>
|
|
33
|
-
</div>
|
|
34
|
-
</section>
|
|
35
|
-
<% end %>
|
|
36
|
-
</showcase-sample>
|
|
37
|
-
</section>
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
<article class="space-y-4 font-normal text-base">
|
|
2
|
-
<p class="font-normal text-xl">👋 Welcome to <span class="italic">Showcase</span> — the UI Pattern Library!</p>
|
|
3
|
-
|
|
4
|
-
<section class="space-y-4">
|
|
5
|
-
<h2 class="font-semibold text-2xl">What is this thing?</h2>
|
|
6
|
-
<p>This resource is intended to be a hub for all-things UI for your developers, with the goal of <span class="italic font-semibold">sharing knowledge</span>, <span class="italic font-semibold">promoting reuse of existing code</span>, and <span class="italic font-semibold">ensuring consistency</span> across your application.</p>
|
|
7
|
-
</section>
|
|
8
|
-
|
|
9
|
-
<section class="space-y-4">
|
|
10
|
-
<h2 class="font-semibold text-2xl">How do I use it?</h2>
|
|
11
|
-
<p>On each page, you can add a series of usage examples for each component, style, or pattern. In the samples blocks, you'll see a live preview, as well as the source used to produce the example.</p>
|
|
12
|
-
<p>At the bottom of most pages, you will see a table, listing any options for configuring the partial or component.</p>
|
|
13
|
-
</section>
|
|
14
|
-
|
|
15
|
-
<section class="space-y-4">
|
|
16
|
-
<h2 class="font-semibold text-2xl">But I don't see the thing I need 🤔</h2>
|
|
17
|
-
<p>If you don't see the pattern or component here, that doesn't mean it doesn't aleady exist or can't be created with some combination of existing building blocks.</p>
|
|
18
|
-
</section>
|
|
19
|
-
|
|
20
|
-
<section class="space-y-4">
|
|
21
|
-
<h2 class="font-semibold text-2xl">I have questions, who do I reach out to?</h2>
|
|
22
|
-
<p>If you need help or have questions, please reach out to <%#= Showcase.links.support %>.</p>
|
|
23
|
-
</section>
|
|
24
|
-
|
|
25
|
-
<section class="space-y-4">
|
|
26
|
-
<h2 class="font-semibold text-2xl">Additional resources</h2>
|
|
27
|
-
<ul class="list-none">
|
|
28
|
-
<li>
|
|
29
|
-
<%= link_to "Bullet Train field partials documentation", "https://bullettrain.co/docs/field-partials", target: "_blank" %>
|
|
30
|
-
</li>
|
|
31
|
-
</ul>
|
|
32
|
-
</section>
|
|
33
|
-
</article>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<%= render "showcase/pages/page", page: @page %>
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
<details open class="flex flex-col">
|
|
2
|
-
<%= tag.summary tree.name.titleize, class: "hover:bg-indigo-50 font-medium text-black text-base py-2 pl-4 cursor-pointer" %>
|
|
3
|
-
|
|
4
|
-
<% tree.paths.each do |path| %>
|
|
5
|
-
<article class="hover:bg-indigo-50 <%= "bg-indigo-50" if path.id == params[:id] %>">
|
|
6
|
-
<%= link_to path.basename.titleize, page_path(path.id), class: "inline-block py-2 px-8 w-full" %>
|
|
7
|
-
</article>
|
|
8
|
-
<% end %>
|
|
9
|
-
</details>
|