lookbook 1.2.1 → 1.4.5

data/app/components/lookbook/code/highlight_github.css

@@ -0,0 +1,406 @@
+.theme-github {
+  --dark-bg: #111111;
+  --dark-gray-1: #404040;
+  --dark-gray-2: #d0d0d0;
+  --dark-gray-3: #cccccc;
+  --dark-gray-4: #777777;
+  --dark-gray-5: #aaaaaa;
+  --dark-gray-6: #bbbbbb;
+  --dark-gray-7: #666666;
+  --dark-blue-1: #3677a9;
+  --dark-blue-2: #24909d;
+  --dark-blue-3: #447fcf;
+  --dark-blue-4: #009988;
+  --dark-red-1: #a61717;
+  --dark-red-2: #331111;
+  --dark-red-3: #e50808;
+  --dark-red-4: #520000;
+  --dark-red-5: #d22323;
+  --dark-red-6: #cd2828;
+  --dark-yellow-1: #e9b96e;
+  --dark-yellow-2: #ffa500;
+  --dark-orange: #d2691e;
+  --dark-white: #ffffff;
+  --dark-green-1: #589819;
+  --dark-green-2: #6ab825;
+  --dark-green-3: #44ccaa;
+
+  --light-bg: #ffffff;
+  --light-gray-1: #f8f8f8;
+  --light-gray-2: #27272a;
+  --light-gray-3: #cccccc;
+  --light-gray-4: #888888;
+  --light-gray-5: #999999;
+  --light-gray-6: #555555;
+  --light-gray-7: #bbbbbb;
+  --light-yellow-1: #999988;
+  --light-red-1: #a61717;
+  --light-red-2: #e3d2d2;
+  --light-red-3: #dd1144;
+  --light-red-4: #ffdddd;
+  --light-red-5: #aa0000;
+  --light-red-6: #990000;
+  --light-purple-1: #800080;
+  --light-purple-2: #990073;
+  --light-black: #000000;
+  --light-green-1: #ddffdd;
+  --light-green-2: #009926;
+  --light-blue-1: #445588;
+  --light-blue-2: #009999;
+  --light-blue-3: #008080;
+  --light-blue-4: #0086b3;
+  --light-blue-5: #3c5d5d;
+  --light-blue-6: #000080;
+
+  --hl-bg: var(--light-bg);
+  --hl-hll-bg: var(--light-gray-1);
+  --hl-border: var(--light-gray-3);
+  --hl-line-number: var(--light-gray-2);
+  --hl-comment: var(--light-yellow-1);
+  --hl-comment-preproc: var(--light-gray-5);
+  --hl-comment-special-fg: var(--light-gray-5);
+  --hl-comment-special-bg: transparent;
+  --hl-error-fg: var(--light-red-1);
+  --hl-error-bg: var(--light-red-2);
+  --hl-subtle-fg: var(--light-gray-2);
+  --hl-entity: var(--light-purple-1);
+  --hl-keyword: var(--light-black);
+  --hl-output: var(--light-gray-4);
+  --hl-operator: var(--light-black);
+  --hl-punctuation: var(--light-gray-6);
+  --hl-string: var(--light-red-3);
+  --hl-string-other: var(--light-red-3);
+  --hl-string-regex: var(--light-green-2);
+  --hl-string-symbol: var(--light-purple-2);
+  --hl-deleted-fg: var(--light-black);
+  --hl-deleted-bg: var(--light-red-4);
+  --hl-danger: var(--light-red-5);
+  --hl-heading: var(--light-gray-5);
+  --hl-inserted-fg: var(--light-black);
+  --hl-inserted-bg: var(--light-green-1);
+  --hl-prompt: var(--light-gray-6);
+  --hl-subheading: var(--light-purple-1);
+  --hl-keyword-crude: var(--light-black);
+  --hl-keyword-subtle: var(--light-blue-1);
+  --hl-number: var(--light-blue-2);
+  --hl-attribute: var(--light-blue-3);
+  --hl-builtin: var(--light-blue-4);
+  --hl-builtin-pseudo: var(--light-gray-5);
+  --hl-class: var(--light-blue-1);
+  --hl-variable: var(--light-blue-3);
+  --hl-decorator: var(--light-blue-5);
+  --hl-exception: var(--light-red-6);
+  --hl-function: var(--light-red-6);
+  --hl-namespace: var(--light-gray-6);
+  --hl-tag: var(--light-blue-6);
+  --hl-word: var(--light-black);
+  --hl-whitespace: var(--light-gray-7);
+
+  &.dark {
+    --hl-bg: var(--dark-bg);
+    --hl-hll-bg: var(--dark-gray-1);
+    --hl-border: var(--dark-gray-4);
+    --hl-line-number: var(--dark-gray-2);
+    --hl-comment: var(--dark-blue-1);
+    --hl-comment-preproc: var(--dark-orange);
+    --hl-comment-special-fg: var(--dark-red-3);
+    --hl-comment-special-bg: var(--dark-red-4);
+    --hl-error-fg: var(--dark-red-1);
+    --hl-error-bg: var(--dark-red-2);
+    --hl-subtle-fg: var(--dark-gray-2);
+    --hl-entity: var(--dark-gray-2);
+    --hl-keyword: var(--dark-gray-3);
+    --hl-output: var(--dark-gray-3);
+    --hl-operator: var(--dark-gray-4);
+    --hl-punctuation: var(--dark-yellow-1);
+    --hl-string: var(--dark-orange);
+    --hl-string-other: var(--dark-yellow-2);
+    --hl-string-regex: var(--dark-red-6);
+    --hl-string-symbol: var(--dark-orange);
+    --hl-deleted-fg: var(--dark-red-5);
+    --hl-deleted-bg: transparent;
+    --hl-danger: var(--dark-red-5);
+    --hl-heading: var(--dark-white);
+    --hl-inserted-fg: var(--dark-green-1);
+    --hl-inserted-bg: transparent;
+    --hl-prompt: var(--dark-gray-5);
+    --hl-subheading: var(--dark-white);
+    --hl-keyword-crude: var(--dark-green-2);
+    --hl-keyword-subtle: var(--dark-green-2);
+    --hl-number: var(--dark-red-6);
+    --hl-attribute: var(--dark-gray-6);
+    --hl-builtin: var(--dark-blue-2);
+    --hl-builtin-pseudo: var(--dark-blue-2);
+    --hl-class: var(--dark-blue-3);
+    --hl-variable: var(--dark-green-3);
+    --hl-decorator: var(--dark-yellow-2);
+    --hl-exception: var(--dark-gray-6);
+    --hl-function: var(--dark-blue-4);
+    --hl-namespace: var(--dark-blue-3);
+    --hl-tag: var(--dark-green-2);
+    --hl-word: var(--dark-green-2);
+    --hl-whitespace: var(--dark-gray-7);
+  }
+}
+
+.theme-github {
+  background-color: var(--hl-bg);
+
+  .line-numbers {
+    background-color: var(--hl-bg);
+    border-color: var(--hl-border);
+    color: var(--hl-line-number);
+  }
+
+  .highlight {
+    .hll {
+      background-color: var(--hl-hll-bg);
+    }
+    .c {
+      color: var(--hl-comment);
+      font-style: italic;
+    } /* Comment */
+    .err {
+      color: var(--hl-error-fg);
+      background-color: var(--hl-error-bg);
+    } /* Error */
+    .g {
+      color: var(--hl-subtle-fg);
+    } /* Generic */
+    .k {
+      color: var(--hl-keyword);
+      font-weight: bold;
+    } /* Keyword; catches prefixes and css3 */
+    .l {
+      color: var(--hl-subtle-fg);
+    } /* Literal */
+    .n,
+    .h {
+      color: var(--hl-keyword);
+    } /* Name */
+    .o {
+      color: var(--hl-operator);
+      font-weight: bold;
+    } /* Operator */
+    .x {
+      color: var(--hl-subtle-fg);
+    } /* Other */
+    .p {
+      color: var(--hl-punctuation);
+    } /* Punctuation */
+    .cm {
+      color: var(--hl-comment);
+      font-style: italic;
+    } /* Comment.Multiline */
+    .cp {
+      color: var(--hl-comment-preproc);
+      font-weight: bold;
+    } /* Comment.Preproc */
+    .c1 {
+      color: var(--hl-comment);
+      font-style: italic;
+    } /* Comment.Single */
+    .cs {
+      color: var(--hl-comment-special-fg);
+      background-color: var(--hl-comment-special-bg);
+      font-weight: bold;
+      font-style: italic;
+    } /* Comment.Special */
+    .gd {
+      color: var(--hl-deleted-fg);
+      background-color: var(--hl-deleted-bg);
+    } /* Generic.Deleted */
+    .ge {
+      color: var(--hl-subtle-fg);
+      font-style: italic;
+    } /* Generic.Emph */
+    .gr {
+      color: var(--hl-danger);
+    } /* Generic.Error */
+    .gh {
+      color: var(--hl-heading);
+    } /* Generic.Heading */
+    .gi {
+      color: var(--hl-inserted-fg);
+      background-color: var(--hl-inserted-bg);
+    } /* Generic.Inserted */
+    .go {
+      color: var(--hl-output);
+    } /* Generic.Output */
+    .gp {
+      color: var(--hl-prompt);
+    } /* Generic.Prompt */
+    .gs {
+      color: var(--hl-subtle-fg);
+      font-weight: bold;
+    } /* Generic.Strong */
+    .gu {
+      color: var(--hl-subheading);
+      font-weight: bold;
+    } /* Generic.Subheading */
+    .gt {
+      color: var(--hl-danger);
+    } /* Generic.Traceback */
+    .kc {
+      color: var(--hl-keyword-crude);
+      font-weight: bold;
+    } /* Keyword.Constant */
+    .kd {
+      color: var(--hl-keyword-crude);
+      font-weight: bold;
+    } /* Keyword.Declaration */
+    .kn {
+      color: var(--hl-keyword-crude);
+      font-weight: bold;
+    } /* Keyword.Namespace */
+    .kp {
+      color: var(--hl-keyword-crude);
+      font-weight: bold;
+    } /* Keyword.Pseudo */
+    .kr {
+      color: var(--hl-keyword-crude);
+      font-weight: bold;
+    } /* Keyword.Reserved */
+    .kt {
+      color: var(--hl-keyword-subtle);
+      font-weight: bold;
+    } /* Keyword.Type */
+    .ld {
+      color: var(--hl-subtle-fg);
+    } /* Literal.Date */
+    .m {
+      color: var(--hl-number);
+    } /* Literal.Number */
+    .s {
+      color: var(--hl-string);
+    } /* Literal.String */
+    .na {
+      color: var(--hl-attribute);
+    } /* Name.Attribute */
+    .nb {
+      color: var(--hl-builtin);
+    } /* Name.Builtin */
+    .nc {
+      color: var(--hl-class);
+      font-weight: bold;
+    } /* Name.Class */
+    .no {
+      color: var(--hl-variable);
+    } /* Name.Constant */
+    .nd {
+      color: var(--hl-decorator);
+    } /* Name.Decorator */
+    .ni {
+      color: var(--hl-entity);
+    } /* Name.Entity */
+    .ne {
+      color: var(--hl-exception);
+      font-weight: bold;
+    } /* Name.Exception */
+    .nf {
+      color: var(--hl-function);
+      font-weight: bold;
+    } /* Name.Function */
+    .nl {
+      color: var(--hl-subtle-fg);
+    } /* Name.Label */
+    .nn {
+      color: var(--hl-namespace);
+    } /* Name.Namespace */
+    .nx {
+      color: var(--hl-subtle-fg);
+    } /* Name.Other */
+    .py {
+      color: var(--hl-subtle-fg);
+    } /* Name.Property */
+    .nt {
+      color: var(--hl-tag);
+    } /* Name.Tag */
+    .nv {
+      color: var(--hl-variable);
+    } /* Name.Variable */
+    .ow {
+      color: var(--hl-word);
+      font-weight: bold;
+    } /* Operator.Word */
+    .w {
+      color: var(--hl-whitespace);
+    } /* Text.Whitespace */
+    .mf {
+      color: var(--hl-number);
+    } /* Literal.Number.Float */
+    .mh {
+      color: var(--hl-number);
+    } /* Literal.Number.Hex */
+    .mi {
+      color: var(--hl-number);
+    } /* Literal.Number.Integer */
+    .mo {
+      color: var(--hl-number);
+    } /* Literal.Number.Oct */
+    .sb {
+      color: var(--hl-string);
+    } /* Literal.String.Backtick */
+    .sc {
+      color: var(--hl-string);
+    } /* Literal.String.Char */
+    .sd {
+      color: var(--hl-string);
+    } /* Literal.String.Doc */
+    .s2 {
+      color: var(--hl-string);
+    } /* Literal.String.Double */
+    .se {
+      color: var(--hl-string);
+    } /* Literal.String.Escape */
+    .sh {
+      color: var(--hl-string);
+    } /* Literal.String.Heredoc */
+    .si {
+      color: var(--hl-string);
+    } /* Literal.String.Interpol */
+    .sx {
+      color: var(--hl-string-other);
+    } /* Literal.String.Other */
+    .sr {
+      color: var(--hl-string-regex);
+    } /* Literal.String.Regex */
+    .s1 {
+      color: var(--hl-string);
+    } /* Literal.String.Single */
+    .ss {
+      color: var(--hl-string-symbol);
+    } /* Literal.String.Symbol */
+    .bp {
+      color: var(--hl-builtin-pseudo);
+    } /* Name.Builtin.Pseudo */
+    .vc {
+      color: var(--hl-variable);
+    } /* Name.Variable.Class */
+    .vg {
+      color: var(--hl-variable);
+    } /* Name.Variable.Global */
+    .vi {
+      color: var(--hl-variable);
+    } /* Name.Variable.Instance */
+    .il {
+      color: var(--hl-number);
+    } /* Literal.Number.Integer.Long */
+
+    /* Make line numbers unselectable: excludes line numbers from copy-paste user ops */
+    .line-number {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+    }
+
+    /* Mozilla specific */
+    .line-number::-moz-selection {
+      background-color: transparent;
+    }
+
+    /* Other major browsers */
+    .line-number::selection {
+      background-color: transparent;
+    }
+  }
+}

data/app/components/lookbook/header/component.html.erb

@@ -25,7 +25,7 @@
             <% menu = lookbook_render :debug_menu,
               version: Lookbook::VERSION,
               docs_url: "https://lookbook.build/guide",
-              repo_url: "https://github.com/allmarkedup/lookbook" do %>
+              repo_url: "https://github.com/ViewComponent/lookbook" do %>
               <%= helpers.pretty_json(Lookbook.debug_data) %>
             <% end %>
             <% button.dropdown({}).with_content(menu) %>

data/app/components/lookbook/inspector_panel/component.rb

@@ -1,5 +1,3 @@
-require "css_parser"
-
 module Lookbook
   class InspectorPanel::Component < Lookbook::BaseComponent
     attr_reader :panel_styles, :panel_html
@@ -10,13 +8,13 @@ module Lookbook
     end
 
     def id
-      AttributeUtils.dom_id("panel", @name)
+      Utils.id("panel", @name)
     end
 
     def before_render
-      tpl = TemplateParser.new(content)
-      @panel_styles = tpl.styles.map { |s| "##{id} #{s}" }.join("\n")
-      @panel_html = tpl.content
+      styles, html = StylesExtractor.call(content)
+      @panel_styles = styles.map { |s| "##{id} #{s}" }.join("\n")
+      @panel_html = html.html_safe
     end
   end
 end

data/app/components/lookbook/nav/component.rb

@@ -3,25 +3,18 @@ module Lookbook
     renders_one :filter, Lookbook::Filter::Component
     renders_one :toolbar, Lookbook::Toolbar::Component
 
-    def initialize(
-      collection:, id: nil,
-      collapse_singles: false,
-      **attrs
-    )
-      @id = id.presence || "#{collection.id}-nav"
-      @collection = collection.as_tree
-      @item_args = {
-        collapse_singles: collapse_singles
-      }
+    attr_reader :id, :tree
+
+    def initialize(tree:, id: nil, **attrs)
+      @id = id
+      @tree = tree
       super(**attrs, id: id)
     end
 
     def items
-      @collection.non_empty_items.map do |item|
-        lookbook_render Lookbook::Nav::Item::Component.new item,
-          nav_id: @id,
-          depth: 1,
-          **@item_args
+      @items ||= tree.map do |node|
+        item_class = (node.type == :directory) ? Nav::Directory::Component : Nav::Entity::Component
+        lookbook_render item_class.new node, nav_id: id
       end
     end
 

data/app/components/lookbook/nav/directory/component.html.erb

@@ -0,0 +1,28 @@
+<%= render_component_tag :li,
+  id: id,
+  key: "#{id}-directory",
+  class: "list-none",
+  "x-show": "!filteredOut",
+  data: { "entity-type": :directory },
+  cloak: true do %>
+  <%= lookbook_tag :button,
+    key: "#{id}-action",
+    class: "nav-action",
+    style: "padding-left: #{left_pad}px",
+    "x-bind": "bindings.toggle" do %>
+    <div class="nav-action-inner">
+      <%= icon nil,
+        size: 3,
+        class: "nav-toggle-icon",
+        "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
+      <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
+      <span class="truncate"><%= label %></span>
+    </div>
+  <% end %>
+  
+  <% if children? %>
+    <ul x-ref="items" x-show="open" x-cloak>
+      <%= safe_join(children) %>
+    </ul>
+  <% end %>  
+<% end %>

data/app/components/lookbook/nav/directory/component.rb

@@ -0,0 +1,4 @@
+module Lookbook
+  class Nav::Directory::Component < Nav::Item::Component
+  end
+end

data/app/components/lookbook/nav/{item → entity}/component.html.erb

@@ -1,23 +1,23 @@
 <%= render_component_tag :li,
   id: id,
+  key: "#{id}-entity-#{type}",
   class: "list-none",
   "x-show": "!filteredOut",
-  data: {
-    "entity-type": item.type
-  },
+  data: { "entity-type": type },
   cloak: true do %>
-  <%= lookbook_tag href.present? ? :a : :div,
+  <%= lookbook_tag href.present? ? :a : :button,
     href: href,
-    class: "flex items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover transition",
+    key: "#{id}-action",
+    class: "nav-action",
     style: "padding-left: #{left_pad}px",
     "x-bind": "bindings.#{href.present? ? "link" : "toggle"}" do %>
-    <div class="relative flex items-center w-full">
+    <div class="nav-action-inner">
       <%= icon nil,
         size: 3,
-        class: "mr-1 text-lookbook-nav-toggle absolute -left-4",
+        class: "nav-toggle-icon",
         "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
       <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
-      <span class="truncate <% if @item.type == :preview %>font-bold<% end %>"><%= label %></span>
+      <span class="truncate <% if node.type == :preview %>font-bold<% end %>"><%= label %></span>
     </div>
   <% end %>
   

data/app/components/lookbook/nav/entity/component.rb

@@ -0,0 +1,49 @@
+module Lookbook
+  class Nav::Entity::Component < Nav::Item::Component
+    ICONS = {
+      page: :file,
+      preview: :layers,
+      example: :eye,
+      group: :eye
+    }.freeze
+
+    def nav_icon
+      ICONS[collapsed? ? :preview : node.type] || :file
+    end
+
+    def href
+      if collapsed?
+        node.first.url_path
+      elsif type != :preview
+        node.url_path
+      end
+    end
+
+    def children
+      collapsed? ? [] : super
+    end
+
+    def type
+      collapsed? ? :example : node.type
+    end
+
+    def collapsed?
+      node.type == :preview && node.children.one?
+    end
+
+    def search_terms
+      matchers = if collapsed?
+        node.first.search_terms
+      else
+        node.respond_to?(:search_terms) ? Array(node.search_terms) : []
+      end
+      matchers.flatten.map { |m| m.gsub(/\s/, "").downcase }
+    end
+
+    protected
+
+    def alpine_data
+      alpine_encode({id: node.id, matchers: search_terms})
+    end
+  end
+end

data/app/components/lookbook/nav/item/component.css

@@ -0,0 +1,15 @@
+@layer components {
+  [data-component="nav"] {
+    .nav-action {
+      @apply flex w-full items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover transition;
+    }
+
+    .nav-action-inner {
+      @apply relative flex items-center w-full;
+    }
+
+    .nav-toggle-icon {
+      @apply mr-1 text-lookbook-nav-toggle absolute -left-4;
+    }
+  }
+}

data/app/components/lookbook/nav/item/component.js

@@ -1,4 +1,8 @@
 export default function navItemComponent({ id, matchers }) {
+  matchers = matchers.map((matcher) =>
+    matcher.replace(/\s/g, "").toLowerCase()
+  );
+
   return {
     filteredOut: false,