showcase-rails 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +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>
|