gitlab-lookbook 2.3.14

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 0b28f48fecce325cadbe6f6132b322db3db1b77b1764df873a677ec9b187b1a0
+  data.tar.gz: e6781755d1514ac31ad54519c4bd68283a456ce52e155f8680d3990d51b8ce8f
+SHA512:
+  metadata.gz: 43767211cb42e7a40547d1a32e11a4cc0517c6b8976418fdd377b8c4387b78e22af84db68196ab5098d8a7bbec08200ac668f2c9883f0827fc9d80e3f8755d92
+  data.tar.gz: 5d02db7947be9d06711dc70edcba06b08f5fe11b48f10b6fc1a4bfb0485017e490cda494989677059dd158db664927dc8accacb761f52a22e56e2dbc94f9780d

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Mark Perkins
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,98 @@
+<div align="center">
+<br>
+<p><a href="https://lookbook.build"><img src=".github/assets/lookbook_logo.svg" width="240"></a></p>
+
+<p>A UI development environment for Ruby on Rails applications.</p>
+
+<p><strong><a href="https://lookbook.build">Documentation</a> &nbsp;|&nbsp; <a href="http://demo.lookbook.build/lookbook">Demo site</a></strong></p>
+
+<p><a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook" alt="Gem version"></a>
+<a href="https://github.com/lookbook-hq/lookbook/actions/workflows/ci.yml"><img src="https://github.com/lookbook-hq/lookbook/actions/workflows/ci.yml/badge.svg" alt="CI status"></a></p>
+
+</div>
+
+---
+
+> [!NOTE]
+> **`gitlab-lookbook` is GitLab's fork of [`lookbook`](https://github.com/lookbook-hq/lookbook).**
+>
+> It exists so that GitLab can carry patches ahead of an upstream release — currently
+> [lookbook-hq/lookbook#799](https://github.com/lookbook-hq/lookbook/pull/799), which widens the
+> Rouge dependency constraint to allow Rouge 5.x. The gem ships the same `Lookbook` module and is
+> a drop-in replacement — just use `gem "gitlab-lookbook"` in place of `gem "lookbook"` (the code
+> is still required and used as `lookbook`).
+>
+> The canonical repository is <https://gitlab.com/gitlab-org/ruby/gems/gitlab-lookbook>.
+> For general Lookbook documentation and support, please refer to the [upstream project](https://lookbook.build).
+
+---
+
+<div align="center">
+Lookbook combines a powerful <strong>component browser</strong> and <strong>preview system</strong> with an <strong>integrated documentation engine</strong> to help teams build robust, modular, maintainable user interfaces.<br><br>
+It's compatible with <a href="https://viewcomponent.org/">ViewComponent</a>, <a href="https://www.phlex.fun/">Phlex</a>, ActionView partials and more.
+<br><br>
+<a href="https://lookbook.build"><strong>Read the docs &rarr;</strong></a>
+
+</div>
+
+
+---
+
+[![Lookbook UI](.github/assets/lookbook_ui.png)](http://lookbook.build/)
+
+## Development
+
+Lookbook is implemented as an isolated [Rails Engine](https://guides.rubyonrails.org/engines.html) and uses [ViewComponent](https://viewcomponent.org), [Tailwind](https://tailwindcss.com/) and [Alpine](https://alpinejs.dev/) for its UI.
+
+This repository contains:
+
+* The Lookbook source code ([`/app`](https://github.com/lookbook-hq/lookbook/tree/main/app), [`/lib`](https://github.com/lookbook-hq/lookbook/tree/main/lib), [`/config`](https://github.com/lookbook-hq/lookbook/tree/main/config), etc)
+* The Lookbook [documentation site](#docs-site) source code and content ([`/docs`](https://github.com/lookbook-hq/lookbook/tree/main/docs)).
+* A [test suite](#testing) with a 'runable' dummy app ([`/spec`](https://github.com/lookbook-hq/lookbook/tree/main/spec)).
+
+### Documentation site
+
+The [Lookbook docs site](https://lookbook.build) is built using [Bridgetown](https://www.bridgetownrb.com/) and the source files can be found in the `./docs` directory.
+
+To preview changes locally you can run a development version of the docs site:
+
+1. Clone this repo
+2. Install dependencies: `bundle install`
+3. Start the app: `bin/docs`
+4. Visit http://localhost:4000 
+
+### Testing
+
+Lookbook uses [RSpec](https://relishapp.com/rspec). [Appraisal](https://github.com/thoughtbot/appraisal) is used to run tests against different Ruby and Rails versions.
+
+Tests can be run using the `bundle exec appraisal rspec` command.
+
+The dummy app that the tests are being run against can be viewed by running the `bin/dummy` command and then browsing to http://localhost:9292/lookbook
+
+### Releases
+
+Lookbook uses [Release It!](https://github.com/release-it/release-it) to automate the release process.
+
+Running `npm run release` will start the process of publishing a new release and walks though all the steps from picking a version number to publishing the updated gem.
+
+Publishing a release requires write permissions for this repository (lookbook-hq/lookbook) and 2FA publish permissions for Lookbook on RubyGems.
+
+## Contributing
+
+Lookbook is an un-funded open source project and contributions of all types and sizes are most welcome!
+
+Please take the time to read over the [Contributing](./CONTRIBUTING.md) guide before making your first contribution and if anything isn't clear then [start a discussion](https://github.com/lookbook-hq/lookbook/discussions) and we will do our best to help you out.
+
+## Contributors 
+
+Lookbook was created by [Mark Perkins](https://github.com/allmarkedup) and continues to grow
+&amp; improve thanks to the ideas, suggestions and hard work of all of [these excellent humans](https://github.com/lookbook-hq/lookbook/graphs/contributors):
+<br>
+<br>
+<a href="https://github.com/lookbook-hq/lookbook/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=lookbook-hq/lookbook&columns=14" width="800" />
+</a>
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/components/lookbook/base_component.rb

@@ -0,0 +1,52 @@
+module Lookbook
+  class BaseComponent < ViewComponent::Base
+    send(:include, Lookbook::Engine.routes.url_helpers) # YARD parsing workaround: https://github.com/lsegal/yard/issues/546
+    include Lookbook::UiElementsHelper
+    include Lookbook::ClassNamesHelper if Engine.runtime_context.rails_older_than?("6.1.0")
+    include ERB::Util # for json_escape
+
+    def initialize(alpine_data: [], **html_attrs)
+      @alpine_data ||= alpine_data
+      @html_attrs = html_attrs
+      @html_attrs[:class] = {"#{@html_attrs[:class]}": true} if @html_attrs[:class].is_a? String
+    end
+
+    def render_component_tag(tag = :div, **attrs, &block)
+      merged_classes = class_names(attrs[:class], @html_attrs[:class])
+      merged_attrs = @html_attrs.except(:class).deep_merge(attrs.except(:class))
+
+      lookbook_tag tag, name: component_name,
+        **merged_attrs,
+        "x-data": prepare_alpine_data(merged_attrs[:"x-data"]),
+        class: merged_classes, &block
+    end
+
+    def component_name
+      self.class.name.chomp("::Component").delete_prefix("Lookbook::").underscore.tr("/", "_").tr("_", "-")
+    end
+
+    protected
+
+    attr_reader :alpine_data
+
+    def alpine_component
+      nil
+    end
+
+    def alpine_encode(data)
+      if data.is_a? String
+        "'#{json_escape data}'"
+      else
+        json_escape data.to_json.tr("\"", "'")
+      end
+    end
+
+    def prepare_alpine_data(x_data = nil)
+      alpine_component_name = x_data || @html_attrs&.dig(:"x-data") || alpine_component
+      if alpine_component_name.present?
+        args = Array.wrap(alpine_data).compact
+        args.any? ? "#{alpine_component_name}(#{args.join(",")})" : alpine_component_name
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+<div class="contents" key="<%= key %>">
+  <%= lookbook_render button_component.new(
+    id: id,
+    icon: icon,
+    **button_attrs,
+    "x-on:keydown.esc.stop.document": "hideDropdown") do %>
+    <%= content %>
+  <% end %>
+
+  <% if dropdown? %>
+    <div data-dropdown-id="<%= id %>" hidden>
+      <div class="divide-y divide-lookbook-divider text-left">
+        <%= dropdown %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/components/lookbook/button/component.js

@@ -0,0 +1,69 @@
+import tippy from "~/assets/js/lib/tippy";
+import { initTooltip } from "~/assets/js/components/tooltip";
+
+export default function buttonComponent() {
+  let tooltip = null;
+  let dropdown = null;
+
+  return {
+    init() {
+      if (this.$refs.tooltip) {
+        tooltip = initTooltip(this, {
+          target: this.$refs.icon,
+        });
+      }
+
+      if (this.dropdownContent) {
+        this.initDropdown();
+      }
+    },
+
+    initDropdown() {
+      dropdown = tippy(this.$el, {
+        content: this.dropdownContent,
+        trigger: "click",
+        theme: "menu",
+        triggerTarget: this.$el,
+        interactive: true,
+        zIndex: 99999,
+        onShow: () => {
+          if (!this.$store.settings.showTooltips) {
+            return false;
+          }
+          this.$dispatch("dropdown:show", { dropdown: this });
+        },
+        onHide: () => this.$dispatch("dropdown:hide", { dropdown: this }),
+      });
+    },
+
+    get dropdownContent() {
+      if (this.$root && this.$root.id) {
+        const dropdown = document.querySelector(
+          `[data-dropdown-id="${this.$root.id}"]`
+        );
+        return dropdown ? dropdown.innerHTML : null;
+      }
+      return null;
+    },
+
+    hideDropdown() {
+      if (dropdown) {
+        dropdown.hide();
+      }
+    },
+
+    startSpin() {
+      this._spinning = true;
+    },
+
+    stopSpin(delay = 0) {
+      setTimeout(() => (this._spinning = false), delay);
+    },
+
+    get _tooltip() {
+      return tooltip;
+    },
+
+    _spinning: false,
+  };
+}

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

@@ -0,0 +1,39 @@
+module Lookbook
+  class Button::Component < Lookbook::BaseComponent
+    renders_one :dropdown
+
+    attr_reader :id, :icon, :button_attrs
+
+    def initialize(id: nil, icon: nil, **html_attrs)
+      @id = id
+      @icon = icon
+      @button_attrs = html_attrs
+    end
+
+    def key
+      Digest::SHA256.hexdigest(icon.to_s + dropdown.to_s + @button_attrs.to_json)
+    end
+
+    def dropdown?
+      dropdown.present?
+    end
+
+    def text_button?
+      content.present?
+    end
+
+    def icon_button?
+      !text_button? && icon
+    end
+
+    def before_render
+      if dropdown? && id.nil?
+        raise "Dropdown buttons must be given an ID"
+      end
+    end
+
+    def button_component
+      icon_button? ? IconButton::Component : TextButton::Component
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= render_component_tag :div, class: "flex items-center" do %>
+  <%= safe_join(buttons) %>
+<% end %>

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

@@ -0,0 +1,17 @@
+module Lookbook
+  class ButtonGroup::Component < Lookbook::BaseComponent
+    renders_many :buttons, ->(copy: nil, **attrs, &block) do
+      attrs[:size] = @size
+      if copy.present?
+        lookbook_render :copy_button, target: copy, **attrs, &block
+      else
+        lookbook_render :button, **attrs, &block
+      end
+    end
+
+    def initialize(size: :md, **html_attrs)
+      @size = size
+      super(**html_attrs)
+    end
+  end
+end

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

@@ -0,0 +1,57 @@
+@import "./highlight_github.css";
+
+@layer components {
+  [data-component="code"] {
+    @apply text-sm px-4 overflow-x-hidden;
+
+    & .line {
+      min-height: 1.625em;
+      @apply leading-relaxed;
+    }
+
+    & .code {
+      @apply overflow-x-auto overflow-y-hidden py-4;
+    }
+
+    /* Line numbers */
+
+    &.numbered {
+      @apply p-0;
+
+      & .wrapper {
+        grid-template-columns: min-content 1fr;
+        @apply grid h-full w-full relative;
+      }
+
+      & .line-numbers {
+        width: min-content;
+        @apply border-r border-dashed z-10 h-full p-3 select-none text-right;
+      }
+
+      & .line-number {
+        min-width: 1.4em;
+        @apply text-xs block pt-[4px];
+      }
+
+      & .code {
+        @apply py-3;
+      }
+
+      & .code .line {
+        @apply px-3;
+      }
+    }
+
+    /* Focusing on specific lines */
+
+    &.focussed {
+      & .line:not(.highlighted) {
+        @apply !opacity-30;
+      }
+
+      & .code .line.highlighted {
+        @apply bg-yellow-50;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+<%= render_component_tag class: [
+    "not-prose font-mono #{theme_classname}",
+    {
+      "numbered": numbered?,
+      "focussed": focussed?,
+      "h-full": full_height?,
+      "dark": is_dark?
+    } 
+  ] do %>
+  <%= Lookbook::CodeHighlighter.call(source, **@highlight_opts) %>
+<% end %>

data/app/components/lookbook/code/component.js

@@ -0,0 +1,3 @@
+export default function codeComponent() {
+  return {};
+}

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

@@ -0,0 +1,65 @@
+module Lookbook
+  class Code::Component < Lookbook::BaseComponent
+    def initialize(
+      source: nil,
+      language: :html,
+      line_numbers: false,
+      highlight_lines: [],
+      start_line: 1,
+      wrap: false,
+      theme: nil,
+      dark: false,
+      full_height: false,
+      **html_attrs
+    )
+      @source_code = source
+      @highlight_opts = {
+        language: language,
+        line_numbers: line_numbers,
+        highlight_lines: highlight_lines,
+        start_line: start_line
+      }
+      @highlight_lines = highlight_lines
+      @wrap = wrap
+      @theme = theme
+      @dark = dark
+      @full_height = full_height
+      super(**html_attrs)
+    end
+
+    def theme_classname
+      "theme-#{@theme.to_s.tr("_", "-")}"
+    end
+
+    def source
+      (@source_code || content).strip_heredoc.strip
+    end
+
+    def numbered?
+      @highlight_opts[:line_numbers] == true
+    end
+
+    def focussed?
+      @highlight_opts[:highlight_lines].any?
+    end
+
+    def full_height?
+      @full_height
+    end
+
+    def is_dark?
+      @dark
+    end
+
+    def before_render
+      @theme ||= Lookbook.config.highlighter_options.fetch(:theme, :github).to_sym
+      @dark ||= !!Lookbook.config.highlighter_options.fetch(:dark, false)
+    end
+
+    protected
+
+    def alpine_component
+      "codeComponent"
+    end
+  end
+end