showcase-rails 0.3.2 → 0.4.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 +4 -4
- data/README.md +254 -84
- data/app/assets/builds/showcase.css +47 -580
- data/app/assets/stylesheets/showcase.tailwind.css +44 -0
- data/app/models/showcase/path.rb +4 -0
- data/app/models/showcase/preview.rb +1 -1
- data/app/views/showcase/engine/_options.html.erb +3 -3
- data/app/views/showcase/engine/_preview.html.erb +4 -4
- data/app/views/showcase/engine/_root.html.erb +3 -3
- data/app/views/showcase/engine/_sample.html.erb +6 -6
- data/app/views/showcase/engine/index.html.erb +10 -10
- data/app/views/showcase/engine/path/_tree.html.erb +3 -3
- data/config/tailwind.config.js +4 -5
- data/lib/showcase/version.rb +1 -1
- data/lib/showcase.rb +11 -0
- metadata +3 -2
@@ -0,0 +1,44 @@
|
|
1
|
+
@tailwind base;
|
2
|
+
@tailwind components;
|
3
|
+
@tailwind utilities;
|
4
|
+
|
5
|
+
@layer base {
|
6
|
+
/*
|
7
|
+
! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
|
8
|
+
*/
|
9
|
+
|
10
|
+
/*
|
11
|
+
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
12
|
+
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
13
|
+
*/
|
14
|
+
|
15
|
+
* {
|
16
|
+
box-sizing: border-box;
|
17
|
+
}
|
18
|
+
|
19
|
+
html {
|
20
|
+
line-height: 1.5;
|
21
|
+
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
22
|
+
}
|
23
|
+
|
24
|
+
body {
|
25
|
+
margin: 0;
|
26
|
+
}
|
27
|
+
|
28
|
+
pre {
|
29
|
+
margin: 0;
|
30
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
31
|
+
font-size: 1em;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
@layer components {
|
36
|
+
.sc-link {
|
37
|
+
color: inherit !important;
|
38
|
+
text-decoration-line: none;
|
39
|
+
}
|
40
|
+
|
41
|
+
.sc-link:hover {
|
42
|
+
text-decoration-line: underline;
|
43
|
+
}
|
44
|
+
}
|
data/app/models/showcase/path.rb
CHANGED
@@ -43,7 +43,7 @@ class Showcase::Preview
|
|
43
43
|
# <%= showcase.link_to id: "extra-large" %>
|
44
44
|
# # => <a href="components/button#extra-large"><showcase components/button#extra-large></a>
|
45
45
|
def link_to(preview_id = id, id: nil)
|
46
|
-
@view_context.link_to @view_context.preview_path(preview_id, anchor: id), class: "sc-font-mono sc-text-sm" do
|
46
|
+
@view_context.link_to @view_context.preview_path(preview_id, anchor: id), class: "sc-link sc-font-mono sc-text-sm" do
|
47
47
|
"<showcase #{[preview_id, id].compact.join("#").squish}>"
|
48
48
|
end
|
49
49
|
end
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<section class="sc-w-full sc-overflow-x-auto">
|
2
|
-
<h2 class="sc-text-xl sc-font-semibold sc-mb-2">Options</h2>
|
2
|
+
<h2 class="sc-text-xl sc-font-semibold sc-m-0 sc-mb-2">Options</h2>
|
3
3
|
|
4
|
-
<table class="sc-table sc-border-collapse sc-border sc-border-gray-200">
|
4
|
+
<table class="sc-table sc-border-collapse sc-border sc-border-solid sc-border-gray-200">
|
5
5
|
<thead>
|
6
6
|
<tr class="sc-bg-slate-50 dark:sc-bg-neutral-800">
|
7
7
|
<% options.headers.each do |header| %>
|
@@ -12,7 +12,7 @@
|
|
12
12
|
|
13
13
|
<tbody>
|
14
14
|
<% options.each do |option| %>
|
15
|
-
<tr class="sc-border-t sc-border-gray-200">
|
15
|
+
<tr class="sc-border-0 sc-border-t sc-border-solid sc-border-gray-200">
|
16
16
|
<% option.each do |key, value| %>
|
17
17
|
<% if key == :required %>
|
18
18
|
<td class="sc-p-4">
|
@@ -2,22 +2,22 @@
|
|
2
2
|
<section>
|
3
3
|
<% if preview.title %>
|
4
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>
|
5
|
+
<h2 class="sc-font-semibold sc-text-3xl sc-m-0"><%= preview.title %></h2>
|
6
6
|
|
7
7
|
<% preview.badges.each do |badge| %>
|
8
|
-
<span class="sc-border-2 sc-border-indigo-300 sc-rounded-full sc-px-2 sc-mt-1"><%= badge.to_s.titleize %></span>
|
8
|
+
<span class="sc-border-0 sc-border-2 sc-border-solid sc-border-indigo-300 sc-rounded-full sc-px-2 sc-mt-1"><%= badge.to_s.titleize %></span>
|
9
9
|
<% end %>
|
10
10
|
</div>
|
11
11
|
<% end %>
|
12
12
|
|
13
13
|
<% if preview.description %>
|
14
|
-
<
|
14
|
+
<div class="sc-font-normal sc-text-base"><%= preview.description %></div>
|
15
15
|
<% end %>
|
16
16
|
</section>
|
17
17
|
|
18
18
|
<% if preview.samples.any? %>
|
19
19
|
<section>
|
20
|
-
<h2 class="sc-font-semibold sc-text-xl sc-mb-2">Samples</h2>
|
20
|
+
<h2 class="sc-font-semibold sc-text-xl sc-m-0 sc-mb-2">Samples</h2>
|
21
21
|
<%= render partial: "showcase/engine/sample", collection: preview.samples %>
|
22
22
|
</section>
|
23
23
|
<% end %>
|
@@ -1,8 +1,8 @@
|
|
1
1
|
<main class="sc-flex sc-flex-wrap dark:sc-bg-neutral-900 dark:sc-text-white" aria-labelledby="showcase_main_title">
|
2
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-
|
4
|
-
<h1 id="showcase_main_title" class="sc-font-black sc-text-2xl sc-
|
5
|
-
<%= link_to "Showcase", root_url, class: "
|
3
|
+
<nav class="sc-col-span-3 xl:sc-col-span-2 sc-h-full sc-border-0 sc-border-r sc-border-solid sc-border-gray-200">
|
4
|
+
<h1 id="showcase_main_title" class="sc-font-black sc-text-2xl sc-m-0">
|
5
|
+
<%= link_to "Showcase", root_url, class: "sc-link sc-block sc-pt-5 sc-pb-2 sc-pl-4" %>
|
6
6
|
</h1>
|
7
7
|
|
8
8
|
<%= render Showcase::Path.tree %>
|
@@ -1,9 +1,9 @@
|
|
1
|
-
<section class="sc-mb-4 sc-border sc-border-gray-200 sc-rounded-md sc-overflow-clip" aria-labelledby="showcase_<%= sample.id %>_title">
|
1
|
+
<section class="sc-mb-4 sc-border sc-border-solid sc-border-gray-200 sc-rounded-md sc-overflow-clip" aria-labelledby="showcase_<%= sample.id %>_title">
|
2
2
|
<showcase-sample id="<%= sample.id %>" events="<%= sample.events %>">
|
3
3
|
<header class="sc-bg-slate-100/50 dark:sc-bg-neutral-700/50">
|
4
4
|
<div class="sc-flex sc-justify-between">
|
5
|
-
<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">
|
6
|
-
<%= link_to sample.name, "##{sample.id}", class: "
|
5
|
+
<h3 id="showcase_<%= sample.id %>_title" class="sc-m-0 sc-px-4 sc-py-2 sc-font-medium sc-text-base md:sc-text-lg sc-leading-snug sc-truncate">
|
6
|
+
<%= link_to sample.name, "##{sample.id}", class: "sc-link" %>
|
7
7
|
</h3>
|
8
8
|
|
9
9
|
<% if event = sample.instrumented %>
|
@@ -15,7 +15,7 @@
|
|
15
15
|
</div>
|
16
16
|
|
17
17
|
<% if sample.description %>
|
18
|
-
<
|
18
|
+
<div class="sc-px-4 sc-pb-2 sc-text-base"><%= sample.description %></div>
|
19
19
|
<% end %>
|
20
20
|
</header>
|
21
21
|
|
@@ -27,7 +27,7 @@
|
|
27
27
|
|
28
28
|
<% if sample.source %>
|
29
29
|
<details>
|
30
|
-
<summary class="sc-px-4 sc-py-2 hover:sc-bg-indigo-50 dark:hover:sc-bg-neutral-700/50 sc-cursor-pointer sc-select-none">View Source</summary>
|
30
|
+
<summary class="sc-list-item sc-px-4 sc-py-2 hover:sc-bg-indigo-50 dark:hover:sc-bg-neutral-700/50 sc-cursor-pointer sc-select-none">View Source</summary>
|
31
31
|
|
32
32
|
<section class="sc-highlight sc-px-4 sc-py-2 sc-relative sc-overflow-y-auto hover:sc-select-all">
|
33
33
|
<pre><%= sample.source %></pre>
|
@@ -37,7 +37,7 @@
|
|
37
37
|
|
38
38
|
<% if sample.events.any? %>
|
39
39
|
<section class="sc-px-4 sc-py-2 sc-font-small sc-bg-slate-50 dark:sc-bg-neutral-800 sc-rounded-b-md" aria-labelledby="showcase_<%= sample.id %>_javascript_events_title">
|
40
|
-
<h4 id="showcase_<%= sample.id %>_javascript_events_title" class="sc-mb-2 sc-font-medium sc-text-base">JavaScript Events</h4>
|
40
|
+
<h4 id="showcase_<%= sample.id %>_javascript_events_title" class="sc-m-0 sc-mb-2 sc-font-medium sc-text-base">JavaScript Events</h4>
|
41
41
|
|
42
42
|
<div class="sc-overflow-scroll sc-max-h-48">
|
43
43
|
<pre data-showcase-sample-target="relay"></pre>
|
@@ -1,35 +1,35 @@
|
|
1
|
-
<article class="sc-
|
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>
|
1
|
+
<article class="sc-font-normal sc-text-base" aria-labelledby="showcase_article_title">
|
2
|
+
<p id="showcase_article_title" class="sc-m-0 sc-font-normal sc-text-xl">👋 Welcome to <span class="sc-italic">Showcase</span> — your UI Pattern Library!</p>
|
3
3
|
|
4
|
-
<section
|
4
|
+
<section>
|
5
5
|
<h2 class="sc-font-semibold sc-text-2xl">What is this thing?</h2>
|
6
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
7
|
</section>
|
8
8
|
|
9
|
-
<section
|
9
|
+
<section>
|
10
10
|
<h2 class="sc-font-semibold sc-text-2xl">How do I use it?</h2>
|
11
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
12
|
<p>At the bottom of most previews, you will see a table, listing any options for configuring the partial or component.</p>
|
13
13
|
</section>
|
14
14
|
|
15
|
-
<section
|
15
|
+
<section>
|
16
16
|
<h2 class="sc-font-semibold sc-text-2xl">But I don't see the thing I need 🤔</h2>
|
17
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
18
|
</section>
|
19
19
|
|
20
|
-
<section
|
20
|
+
<section>
|
21
21
|
<h2 class="sc-font-semibold sc-text-2xl">I have questions, who do I reach out to?</h2>
|
22
22
|
<p>If you need help or have questions, please reach out to <%#= Showcase.links.support %>.</p>
|
23
23
|
</section>
|
24
24
|
|
25
|
-
<section
|
25
|
+
<section>
|
26
26
|
<h2 class="sc-font-semibold sc-text-2xl">Additional resources</h2>
|
27
|
-
<ul class="sc-list-none">
|
27
|
+
<ul class="sc-list-none sc-p-0">
|
28
28
|
<li>
|
29
|
-
<%= link_to "Showcase documentation", "https://github.com/bullet-train-co/showcase", target: "_blank" %>
|
29
|
+
<%= link_to "Showcase documentation", "https://github.com/bullet-train-co/showcase", target: "_blank", class: "sc-link" %>
|
30
30
|
</li>
|
31
31
|
<li>
|
32
|
-
<%= link_to "Bullet Train field partials documentation", "https://bullettrain.co/docs/field-partials", target: "_blank" %>
|
32
|
+
<%= link_to "Bullet Train field partials documentation", "https://bullettrain.co/docs/field-partials", target: "_blank", class: "sc-link" %>
|
33
33
|
</li>
|
34
34
|
</ul>
|
35
35
|
</section>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
|
2
|
-
<%= tag.summary tree.name.titleize, class: "hover:sc-bg-indigo-50 dark:hover:sc-bg-neutral-700/50 sc-font-medium sc-text-base sc-py-2 sc-pl-4 sc-cursor-pointer" %>
|
1
|
+
<%= tag.details open: tree.open?, class: ["sc-flex sc-flex-col", "sc-pl-4" => !tree.root?] do %>
|
2
|
+
<%= tag.summary tree.name.titleize, class: "sc-list-item hover:sc-bg-indigo-50 dark:hover:sc-bg-neutral-700/50 sc-font-medium sc-text-base sc-py-2 sc-pl-4 sc-cursor-pointer" %>
|
3
3
|
<%= render tree.ordered_children %>
|
4
|
-
|
4
|
+
<% end %>
|
data/config/tailwind.config.js
CHANGED
data/lib/showcase/version.rb
CHANGED
data/lib/showcase.rb
CHANGED
@@ -12,6 +12,17 @@ module Showcase
|
|
12
12
|
autoload :RouteHelper, "showcase/route_helper"
|
13
13
|
autoload :Options, "showcase/options"
|
14
14
|
|
15
|
+
class << self
|
16
|
+
attr_reader :tree_opens
|
17
|
+
|
18
|
+
def tree_opens=(opens)
|
19
|
+
@tree_opens = opens.respond_to?(:call) ? opens : proc { opens }
|
20
|
+
end
|
21
|
+
end
|
22
|
+
self.tree_opens = true # All open by default
|
23
|
+
# self.tree_opens = false # All closed by default
|
24
|
+
# self.tree_opens = ->(tree) { tree.root? } # Just keep the root-level trees open.
|
25
|
+
|
15
26
|
singleton_class.attr_accessor :sample_renderer
|
16
27
|
@sample_renderer = proc { _1 }
|
17
28
|
|
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.4.1
|
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: 2023-03-
|
12
|
+
date: 2023-03-29 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: rails
|
@@ -53,6 +53,7 @@ files:
|
|
53
53
|
- app/assets/builds/showcase.highlights.css
|
54
54
|
- app/assets/config/showcase_manifest.js
|
55
55
|
- app/assets/javascripts/showcase.js
|
56
|
+
- app/assets/stylesheets/showcase.tailwind.css
|
56
57
|
- app/controllers/showcase/engine_controller.rb
|
57
58
|
- app/controllers/showcase/previews_controller.rb
|
58
59
|
- app/models/showcase/path.rb
|