lookbook 0.2.4 → 0.3.0

data/lib/lookbook/preview_group.rb

@@ -0,0 +1,37 @@
+module Lookbook
+  class PreviewGroup
+    include Taggable
+
+    attr_reader :name, :examples
+
+    def initialize(name, preview, examples)
+      @name = name
+      @preview = preview
+      @examples = examples
+    end
+
+    def id
+      path.underscore.tr("_", "-")
+    end
+
+    def path
+      "#{@preview.lookbook_path}/#{name}"
+    end
+
+    def label
+      name.titleize
+    end
+
+    def type
+      :group
+    end
+
+    def matchers
+      [@preview.label, label].map { |m| m.gsub(/\s/, "").downcase }
+    end
+
+    def hierarchy_depth
+      @preview.lookbook_hierarchy_depth + 1
+    end
+  end
+end

data/lib/lookbook/taggable.rb

@@ -14,7 +14,11 @@ module Lookbook
       code_object.docstring.to_s.strip
     end
 
-    private
+    def lookbook_group
+      code_object&.group
+    end
+
+    # private
 
     def code_object
       @code_object ||= Lookbook::Engine.parser.get_code_object(taggable_object_path)

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "0.2.4"
+  VERSION = "0.3.0"
 end

data/lib/lookbook.rb

@@ -10,5 +10,6 @@ module Lookbook
   autoload :Preview, "lookbook/preview"
   autoload :PreviewController, "lookbook/preview_controller"
   autoload :PreviewExample, "lookbook/preview_example"
+  autoload :PreviewGroup, "lookbook/preview_group"
   autoload :Taggable, "lookbook/taggable"
 end

data/lib/tasks/lookbook_tasks.rake

@@ -6,7 +6,7 @@ namespace :lookbook do
     task :bump_version, [:version] do |t, args|
       filename = Lookbook::Engine.root.join("lib/lookbook/version.rb")
       current_version = Lookbook::VERSION.to_s
-      new_version = args[:version].sub("v", "")
+      new_version = args[:version].sub("v", "").gsub("-",".")
       file = File.open(filename)
       contents = file.read
       File.write(filename, contents.gsub(current_version, new_version))

data/public/lookbook-assets/app.css

@@ -806,6 +806,38 @@ pre[class*="language-"] {
   fill: none;
 }
 
+.min-h-fill {
+  min-height: -webkit-fill-available;
+  min-height: -moz-available;
+  min-height: fill-available;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  --tw-bg-opacity: 1;
+  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
+  -webkit-transition-property: background-color, border-color, color, fill, stroke;
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  border-radius: 6px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
+}
+
 .prose {
   color: #374151;
   max-width: 65ch;
@@ -1424,6 +1456,14 @@ pre[class*="language-"] {
   bottom: 0px;
 }
 
+.top-1\/2 {
+  top: 50%;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -1440,12 +1480,8 @@ pre[class*="language-"] {
   bottom: 0px;
 }
 
-.top-1\/2 {
-  top: 50%;
-}
-
-.right-2 {
-  right: 0.5rem;
+.left-4 {
+  left: 1rem;
 }
 
 .z-10 {
@@ -1457,9 +1493,12 @@ pre[class*="language-"] {
   margin-right: auto;
 }
 
-.-mx-px {
-  margin-left: -1px;
-  margin-right: -1px;
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
 }
 
 .mt-4 {
@@ -1474,86 +1513,94 @@ pre[class*="language-"] {
   margin-top: 0.5rem;
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
-}
-
-.ml-auto {
-  margin-left: auto;
+.mr-1\.5 {
+  margin-right: 0.375rem;
 }
 
-.-mb-px {
-  margin-bottom: -1px;
+.ml-\[3px\] {
+  margin-left: 3px;
 }
 
 .mr-1 {
   margin-right: 0.25rem;
 }
 
-.mr-1\.5 {
-  margin-right: 0.375rem;
+.mr-3 {
+  margin-right: 0.75rem;
 }
 
-.mb-1 {
-  margin-bottom: 0.25rem;
+.ml-auto {
+  margin-left: auto;
+}
+
+.-mb-px {
+  margin-bottom: -1px;
 }
 
 .block {
   display: block;
 }
 
-.flex {
-  display: flex;
+.inline-block {
+  display: inline-block;
 }
 
-.grid {
-  display: grid;
+.flex {
+  display: flex;
 }
 
 .hidden {
   display: none;
 }
 
-.h-screen {
-  height: 100vh;
+.h-full {
+  height: 100%;
 }
 
 .h-10 {
   height: 2.5rem;
 }
 
-.h-full {
-  height: 100%;
+.h-5 {
+  height: 1.25rem;
 }
 
 .h-3 {
   height: 0.75rem;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
 .h-\[11px\] {
   height: 11px;
 }
 
+.h-3\.5 {
+  height: 0.875rem;
+}
+
 .h-4 {
   height: 1rem;
 }
 
-.h-3\.5 {
-  height: 0.875rem;
+.w-5 {
+  width: 1.25rem;
 }
 
 .w-full {
   width: 100%;
 }
 
-.w-10 {
-  width: 2.5rem;
-}
-
 .w-3 {
   width: 0.75rem;
 }
 
+.w-10 {
+  width: 2.5rem;
+}
+
 .w-screen {
   width: 100vw;
 }
@@ -1562,20 +1609,16 @@ pre[class*="language-"] {
   width: 9px;
 }
 
-.w-4 {
-  width: 1rem;
-}
-
 .w-3\.5 {
   width: 0.875rem;
 }
 
-.max-w-xs {
-  max-width: 20rem;
+.w-4 {
+  width: 1rem;
 }
 
-.max-w-full {
-  max-width: 100%;
+.max-w-xs {
+  max-width: 20rem;
 }
 
 .flex-none {
@@ -1586,6 +1629,10 @@ pre[class*="language-"] {
   flex: 1 1 auto;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .-translate-y-1\/2 {
   --tw-translate-y: -50%;
   transform: var(--tw-transform);
@@ -1608,18 +1655,14 @@ pre[class*="language-"] {
   cursor: col-resize;
 }
 
-.cursor-\[ns-resize\] {
-  cursor: ns-resize;
+.cursor-pointer {
+  cursor: pointer;
 }
 
 .cursor-auto {
   cursor: auto;
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
 .select-none {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -1627,6 +1670,10 @@ pre[class*="language-"] {
           user-select: none;
 }
 
+.resize {
+  resize: both;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -1645,12 +1692,29 @@ pre[class*="language-"] {
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(2rem * var(--tw-space-x-reverse));
   margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
+.divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgba(209, 213, 219, var(--tw-divide-opacity));
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -1659,6 +1723,10 @@ pre[class*="language-"] {
   overflow: hidden;
 }
 
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1669,6 +1737,11 @@ pre[class*="language-"] {
   white-space: nowrap;
 }
 
+.rounded-b {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
 .rounded-bl-md {
   border-bottom-left-radius: 0.375rem;
 }
@@ -1677,6 +1750,10 @@ pre[class*="language-"] {
   border-width: 0px;
 }
 
+.border {
+  border-width: 1px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1697,6 +1774,10 @@ pre[class*="language-"] {
   border-bottom-width: 2px;
 }
 
+.border-t-0 {
+  border-top-width: 0px;
+}
+
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgba(209, 213, 219, var(--tw-border-opacity));
@@ -1721,15 +1802,15 @@ pre[class*="language-"] {
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
 }
 
-.bg-transparent {
-  background-color: transparent;
-}
-
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
@@ -1752,19 +1833,14 @@ pre[class*="language-"] {
   padding: 0.25rem;
 }
 
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+.py-\[5px\] {
+  padding-top: 5px;
+  padding-bottom: 5px;
 }
 
 .py-1 {
@@ -1772,24 +1848,38 @@ pre[class*="language-"] {
   padding-bottom: 0.25rem;
 }
 
-.py-\[4px\] {
-  padding-top: 4px;
-  padding-bottom: 4px;
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
-.py-\[3px\] {
-  padding-top: 3px;
-  padding-bottom: 3px;
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 
-.pr-4 {
-  padding-right: 1rem;
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
 
 .pr-3 {
   padding-right: 0.75rem;
 }
 
+.pt-10 {
+  padding-top: 2.5rem;
+}
+
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1798,17 +1888,12 @@ pre[class*="language-"] {
   text-align: center;
 }
 
-.font-monospace {
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-}
-
 .font-sans {
   font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
+.font-monospace {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 }
 
 .text-sm {
@@ -1821,22 +1906,32 @@ pre[class*="language-"] {
   line-height: 1rem;
 }
 
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-\[11px\] {
+  font-size: 11px;
+}
+
 .font-bold {
   font-weight: 700;
 }
 
-.italic {
-  font-style: italic;
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgba(156, 163, 175, var(--tw-text-opacity));
 }
 
-.text-gray-300 {
+.text-gray-500 {
   --tw-text-opacity: 1;
-  color: rgba(209, 213, 219, var(--tw-text-opacity));
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
 }
 
-.text-gray-400 {
+.text-gray-300 {
   --tw-text-opacity: 1;
-  color: rgba(156, 163, 175, var(--tw-text-opacity));
+  color: rgba(209, 213, 219, var(--tw-text-opacity));
 }
 
 .text-red-300 {
@@ -1849,19 +1944,19 @@ pre[class*="language-"] {
   color: rgba(55, 65, 81, var(--tw-text-opacity));
 }
 
-.text-gray-500 {
+.text-gray-800 {
   --tw-text-opacity: 1;
-  color: rgba(107, 114, 128, var(--tw-text-opacity));
+  color: rgba(31, 41, 55, var(--tw-text-opacity));
 }
 
-.text-gray-800 {
+.text-gray-900 {
   --tw-text-opacity: 1;
-  color: rgba(31, 41, 55, var(--tw-text-opacity));
+  color: rgba(17, 24, 39, var(--tw-text-opacity));
 }
 
-.text-gray-600 {
+.text-indigo-500 {
   --tw-text-opacity: 1;
-  color: rgba(75, 85, 99, var(--tw-text-opacity));
+  color: rgba(99, 102, 241, var(--tw-text-opacity));
 }
 
 .\!text-gray-300 {
@@ -1869,14 +1964,9 @@ pre[class*="language-"] {
   color: rgba(209, 213, 219, var(--tw-text-opacity)) !important;
 }
 
-.text-indigo-500 {
-  --tw-text-opacity: 1;
-  color: rgba(99, 102, 241, var(--tw-text-opacity));
-}
-
-.text-gray-900 {
+.text-gray-600 {
   --tw-text-opacity: 1;
-  color: rgba(17, 24, 39, var(--tw-text-opacity));
+  color: rgba(75, 85, 99, var(--tw-text-opacity));
 }
 
 .underline {
@@ -1901,6 +1991,11 @@ pre[class*="language-"] {
   outline-offset: 2px;
 }
 
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-filter);
+}
+
 .filter {
   filter: var(--tw-filter);
 }
@@ -2327,14 +2422,14 @@ pre[class*="language-"] {
   --tw-bg-opacity: 0.5;
 }
 
-.hover\:text-indigo-800:hover {
+.hover\:text-indigo-500:hover {
   --tw-text-opacity: 1;
-  color: rgba(55, 48, 163, var(--tw-text-opacity));
+  color: rgba(99, 102, 241, var(--tw-text-opacity));
 }
 
-.hover\:text-indigo-500:hover {
+.hover\:text-indigo-800:hover {
   --tw-text-opacity: 1;
-  color: rgba(99, 102, 241, var(--tw-text-opacity));
+  color: rgba(55, 48, 163, var(--tw-text-opacity));
 }
 
 .hover\:text-gray-700:hover {
@@ -2357,3 +2452,38 @@ pre[class*="language-"] {
   --tw-text-opacity: 1;
   color: rgba(55, 48, 163, var(--tw-text-opacity));
 }
+
+@media (min-width: 768px) {
+  .md\:-mx-px {
+    margin-left: -1px;
+    margin-right: -1px;
+  }
+
+  .md\:ml-3 {
+    margin-left: 0.75rem;
+  }
+
+  .md\:grid {
+    display: grid;
+  }
+
+  .md\:h-auto {
+    height: auto;
+  }
+
+  .md\:min-h-0 {
+    min-height: 0px;
+  }
+
+  .md\:border-l {
+    border-left-width: 1px;
+  }
+
+  .md\:pl-3 {
+    padding-left: 0.75rem;
+  }
+
+  .md\:pr-4 {
+    padding-right: 1rem;
+  }
+}