showcase-rails 0.3.2 → 0.4.1

data/app/assets/stylesheets/showcase.tailwind.css

@@ -0,0 +1,44 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  /*
+  ! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
+  */
+
+  /*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+  */
+
+  * {
+    box-sizing: border-box;
+  }
+
+  html {
+    line-height: 1.5;
+    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";
+  }
+
+  body {
+    margin: 0;
+  }
+
+  pre {
+    margin: 0;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-size: 1em;
+  }
+}
+
+@layer components {
+  .sc-link {
+    color: inherit !important;
+    text-decoration-line: none;
+  }
+
+  .sc-link:hover {
+    text-decoration-line: underline;
+  }
+}

data/app/models/showcase/path.rb

@@ -13,6 +13,10 @@ class Showcase::Path
       id == "." ? "Previews" : id
     end
 
+    def open?
+      Showcase.tree_opens.call(self)
+    end
+
     def ordered_children
       children.partition { !_1.is_a?(Tree) }.flatten
     end

data/app/models/showcase/preview.rb

@@ -43,7 +43,7 @@ class Showcase::Preview
   #   <%= showcase.link_to id: "extra-large" %>
   #   # => <a href="components/button#extra-large"><showcase components/button#extra-large></a>
   def link_to(preview_id = id, id: nil)
-    @view_context.link_to @view_context.preview_path(preview_id, anchor: id), class: "sc-font-mono sc-text-sm" do
+    @view_context.link_to @view_context.preview_path(preview_id, anchor: id), class: "sc-link sc-font-mono sc-text-sm" do
       "<showcase #{[preview_id, id].compact.join("#").squish}>"
     end
   end

data/app/views/showcase/engine/_options.html.erb

@@ -1,7 +1,7 @@
 <section class="sc-w-full sc-overflow-x-auto">
-  <h2 class="sc-text-xl sc-font-semibold sc-mb-2">Options</h2>
+  <h2 class="sc-text-xl sc-font-semibold sc-m-0 sc-mb-2">Options</h2>
 
-  <table class="sc-table sc-border-collapse sc-border sc-border-gray-200">
+  <table class="sc-table sc-border-collapse sc-border sc-border-solid sc-border-gray-200">
     <thead>
       <tr class="sc-bg-slate-50 dark:sc-bg-neutral-800">
         <% options.headers.each do |header| %>
@@ -12,7 +12,7 @@
 
     <tbody>
       <% options.each do |option| %>
-        <tr class="sc-border-t sc-border-gray-200">
+        <tr class="sc-border-0 sc-border-t sc-border-solid sc-border-gray-200">
           <% option.each do |key, value| %>
             <% if key == :required %>
               <td class="sc-p-4">

data/app/views/showcase/engine/_preview.html.erb

@@ -2,22 +2,22 @@
   <section>
     <% if preview.title %>
       <div class="sc-flex sc-items-center sc-space-x-2 sc-mb-2">
-        <h2 class="sc-font-semibold sc-text-3xl"><%= preview.title %></h2>
+        <h2 class="sc-font-semibold sc-text-3xl sc-m-0"><%= preview.title %></h2>
 
         <% preview.badges.each do |badge| %>
-          <span class="sc-border-2 sc-border-indigo-300 sc-rounded-full sc-px-2 sc-mt-1"><%= badge.to_s.titleize %></span>
+          <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>
         <% end %>
       </div>
     <% end %>
 
     <% if preview.description %>
-      <p class="sc-font-normal sc-text-base"><%= preview.description %></p>
+      <div class="sc-font-normal sc-text-base"><%= preview.description %></div>
     <% end %>
   </section>
 
   <% if preview.samples.any? %>
     <section>
-      <h2 class="sc-font-semibold sc-text-xl sc-mb-2">Samples</h2>
+      <h2 class="sc-font-semibold sc-text-xl sc-m-0 sc-mb-2">Samples</h2>
       <%= render partial: "showcase/engine/sample", collection: preview.samples %>
     </section>
   <% end %>

data/app/views/showcase/engine/_root.html.erb

@@ -1,8 +1,8 @@
 <main class="sc-flex sc-flex-wrap dark:sc-bg-neutral-900 dark:sc-text-white" aria-labelledby="showcase_main_title">
   <section class="sc-grid sc-grid-cols-12 sc-w-full">
-    <nav class="sc-col-span-3 xl:sc-col-span-2 sc-py-5 sc-h-full sc-border-r">
-      <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, class: "!sc-text-inherit hover:sc-underline" %>
+    <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">
+      <h1 id="showcase_main_title" class="sc-font-black sc-text-2xl sc-m-0">
+        <%= link_to "Showcase", root_url, class: "sc-link sc-block sc-pt-5 sc-pb-2 sc-pl-4" %>
       </h1>
 
       <%= render Showcase::Path.tree %>

data/app/views/showcase/engine/_sample.html.erb

@@ -1,9 +1,9 @@
-<section class="sc-mb-4 sc-border sc-border-gray-200 sc-rounded-md sc-overflow-clip" aria-labelledby="showcase_<%= sample.id %>_title">
+<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">
   <showcase-sample id="<%= sample.id %>" events="<%= sample.events %>">
     <header class="sc-bg-slate-100/50 dark:sc-bg-neutral-700/50">
       <div class="sc-flex sc-justify-between">
-        <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}", class: "!sc-text-inherit" %>
+        <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">
+          <%= link_to sample.name, "##{sample.id}", class: "sc-link" %>
         </h3>
 
         <% if event = sample.instrumented %>
@@ -15,7 +15,7 @@
       </div>
 
       <% if sample.description %>
-        <p class="sc-px-4 sc-py-2 sc-text-base"><%= sample.description %></p>
+        <div class="sc-px-4 sc-pb-2 sc-text-base"><%= sample.description %></div>
       <% end %>
     </header>
 
@@ -27,7 +27,7 @@
 
     <% if sample.source %>
       <details>
-        <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>
+        <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>
 
         <section class="sc-highlight sc-px-4 sc-py-2 sc-relative sc-overflow-y-auto hover:sc-select-all">
           <pre><%= sample.source %></pre>
@@ -37,7 +37,7 @@
 
     <% if sample.events.any? %>
       <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">
-        <h4 id="showcase_<%= sample.id %>_javascript_events_title" class="sc-mb-2 sc-font-medium sc-text-base">JavaScript Events</h4>
+        <h4 id="showcase_<%= sample.id %>_javascript_events_title" class="sc-m-0 sc-mb-2 sc-font-medium sc-text-base">JavaScript Events</h4>
 
         <div class="sc-overflow-scroll sc-max-h-48">
           <pre data-showcase-sample-target="relay"></pre>

data/app/views/showcase/engine/index.html.erb

@@ -1,35 +1,35 @@
-<article class="sc-space-y-4 sc-font-normal sc-text-base" aria-labelledby="showcase_article_title">
-  <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>
+<article class="sc-font-normal sc-text-base" aria-labelledby="showcase_article_title">
+  <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>
 
-  <section class="sc-space-y-4">
+  <section>
     <h2 class="sc-font-semibold sc-text-2xl">What is this thing?</h2>
     <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>
   </section>
 
-  <section class="sc-space-y-4">
+  <section>
     <h2 class="sc-font-semibold sc-text-2xl">How do I use it?</h2>
     <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>
     <p>At the bottom of most previews, you will see a table, listing any options for configuring the partial or component.</p>
   </section>
 
-  <section class="sc-space-y-4">
+  <section>
     <h2 class="sc-font-semibold sc-text-2xl">But I don't see the thing I need 🤔</h2>
     <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>
   </section>
 
-  <section class="sc-space-y-4">
+  <section>
     <h2 class="sc-font-semibold sc-text-2xl">I have questions, who do I reach out to?</h2>
     <p>If you need help or have questions, please reach out to <%#= Showcase.links.support %>.</p>
   </section>
 
-  <section class="sc-space-y-4">
+  <section>
     <h2 class="sc-font-semibold sc-text-2xl">Additional resources</h2>
-    <ul class="sc-list-none">
+    <ul class="sc-list-none sc-p-0">
       <li>
-        <%= link_to "Showcase documentation", "https://github.com/bullet-train-co/showcase", target: "_blank" %>
+        <%= link_to "Showcase documentation", "https://github.com/bullet-train-co/showcase", target: "_blank", class: "sc-link" %>
       </li>
       <li>
-        <%= link_to "Bullet Train field partials documentation", "https://bullettrain.co/docs/field-partials", target: "_blank" %>
+        <%= link_to "Bullet Train field partials documentation", "https://bullettrain.co/docs/field-partials", target: "_blank", class: "sc-link" %>
       </li>
     </ul>
   </section>

data/app/views/showcase/engine/path/_tree.html.erb

@@ -1,4 +1,4 @@
-<details open class="sc-flex sc-flex-col <%= "sc-pl-4" unless tree.root? %>">
-  <%= 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" %>
+<%= tag.details open: tree.open?, class: ["sc-flex sc-flex-col", "sc-pl-4" => !tree.root?] do %>
+  <%= 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" %>
   <%= render tree.ordered_children %>
-</details>
+<% end %>

data/config/tailwind.config.js

@@ -15,9 +15,8 @@ module.exports = {
       },
     },
   },
-  plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/aspect-ratio'),
-    require('@tailwindcss/typography'),
-  ]
+  corePlugins: {
+    preflight: false,
+  },
+  plugins: []
 }

data/lib/showcase/version.rb

@@ -1,3 +1,3 @@
 module Showcase
-  VERSION = "0.3.2"
+  VERSION = "0.4.1"
 end

data/lib/showcase.rb

@@ -12,6 +12,17 @@ module Showcase
   autoload :RouteHelper,  "showcase/route_helper"
   autoload :Options,      "showcase/options"
 
+  class << self
+    attr_reader :tree_opens
+
+    def tree_opens=(opens)
+      @tree_opens = opens.respond_to?(:call) ? opens : proc { opens }
+    end
+  end
+  self.tree_opens = true # All open by default
+  # self.tree_opens = false # All closed by default
+  # self.tree_opens = ->(tree) { tree.root? } # Just keep the root-level trees open.
+
   singleton_class.attr_accessor :sample_renderer
   @sample_renderer = proc { _1 }
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: showcase-rails
 version: !ruby/object:Gem::Version
-  version: 0.3.2
+  version: 0.4.1
 platform: ruby
 authors:
 - Daniel Pence
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-27 00:00:00.000000000 Z
+date: 2023-03-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -53,6 +53,7 @@ files:
 - app/assets/builds/showcase.highlights.css
 - app/assets/config/showcase_manifest.js
 - app/assets/javascripts/showcase.js
+- app/assets/stylesheets/showcase.tailwind.css
 - app/controllers/showcase/engine_controller.rb
 - app/controllers/showcase/previews_controller.rb
 - app/models/showcase/path.rb