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.
@@ -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
+ }
@@ -13,6 +13,10 @@ class Showcase::Path
13
13
  id == "." ? "Previews" : id
14
14
  end
15
15
 
16
+ def open?
17
+ Showcase.tree_opens.call(self)
18
+ end
19
+
16
20
  def ordered_children
17
21
  children.partition { !_1.is_a?(Tree) }.flatten
18
22
  end
@@ -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
- <p class="sc-font-normal sc-text-base"><%= preview.description %></p>
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-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">
5
- <%= link_to "Showcase", root_url, class: "!sc-text-inherit hover:sc-underline" %>
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: "!sc-text-inherit" %>
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
- <p class="sc-px-4 sc-py-2 sc-text-base"><%= sample.description %></p>
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-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>
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 class="sc-space-y-4">
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 class="sc-space-y-4">
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 class="sc-space-y-4">
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 class="sc-space-y-4">
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 class="sc-space-y-4">
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
- <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 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
- </details>
4
+ <% end %>
@@ -15,9 +15,8 @@ module.exports = {
15
15
  },
16
16
  },
17
17
  },
18
- plugins: [
19
- require('@tailwindcss/forms'),
20
- require('@tailwindcss/aspect-ratio'),
21
- require('@tailwindcss/typography'),
22
- ]
18
+ corePlugins: {
19
+ preflight: false,
20
+ },
21
+ plugins: []
23
22
  }
@@ -1,3 +1,3 @@
1
1
  module Showcase
2
- VERSION = "0.3.2"
2
+ VERSION = "0.4.1"
3
3
  end
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.3.2
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-27 00:00:00.000000000 Z
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