lookbook 2.3.1 → 3.0.0.alpha.1

data/app/components/lookbook/ui/app/status_bar/status_bar_notifications/status_bar_notifications.rb

@@ -0,0 +1,15 @@
+module Lookbook
+  module UI
+    class StatusBarNotifications < BaseComponent
+      attr_reader :notifications
+
+      def initialize(notifications:, **kwargs)
+        @notifications = notifications
+      end
+
+      def icon_name(notification)
+        StatusBar.icon_name(notification.type)
+      end
+    end
+  end
+end

data/app/components/lookbook/ui/base_component.rb

@@ -0,0 +1,166 @@
+module Lookbook
+  module UI
+    class BaseComponent < Lookbook::Component::Base
+      include ActionView::Helpers::TagHelper
+      include AppHelper
+
+      with_slot :content do |&block|
+        @content = block.call
+      end
+
+      TAG_ATTRIBUTE_NAMES = %i[id class data aria style key x].freeze
+
+      def component_name
+        @_component_name ||= self.class.send(:component_name)
+      end
+
+      def tag_attrs
+        @_tag_attrs ||= {}
+      end
+
+      protected
+
+      def args
+        @_args ||= {}
+      end
+
+      def args=(new_args)
+        @_args = new_args
+      end
+
+      def component_args
+        @_component_args ||= {**args}
+      end
+
+      def tag_name(name = nil)
+        @tag_name = name if name
+        @tag_name ||= self.class.tag_name
+      end
+
+      attr_writer :tag_name
+
+      def set_tag_attr(attr_name, value = "")
+        tag_attrs[attr_name] = value
+      end
+
+      def set_tag_data_attr(attr_name, value = "")
+        tag_attrs[:data] ||= {}
+        tag_attrs[:data][attr_name] = value
+      end
+
+      def tag_attr?(attr_name)
+        tag_attrs.key?(attr_name)
+      end
+
+      def call
+        component_tag(tag_name) do
+          content
+        end
+      end
+
+      def content
+        @content || super
+      end
+
+      def before_render
+        content unless content_evaluated?
+
+        tag_attrs[:data] ||= {}
+        tag_attrs[:data]["component"] = component_name
+
+        self.class.send(:run_callbacks, :before_render, nil, context: self)
+
+        tag_attrs.compact!
+      end
+
+      def component_tag(tag_override = nil, **attrs)
+        merged_attrs = attrs.deep_merge(tag_attrs)
+        classes = class_names(attrs[:class], tag_attrs[:class])
+        merged_attrs[:class] = classes if classes.present?
+        tag = (tag_override || tag_name || :div).to_s.tr("_", "-")
+        Lookbook::UI::Tag.new(tag, **merged_attrs, root: true)
+      end
+
+      def config = Lookbook.config
+
+      private
+
+      def process_tag_attrs(args)
+        @_tag_attrs ||= {}
+        @_tag_attrs.merge!(args[:html].to_h)
+        @_tag_attrs.merge!(args.slice(*self.class.tag_attr_names))
+        @_component_args = args.except(*self.class.tag_attr_names, :html)
+      end
+
+      class << self
+        def new(**kwargs)
+          kwargs = run_callbacks(:before_initialize, kwargs, reduce: true)
+
+          obj = super(**kwargs)
+
+          if obj.instance_of?(Lookbook::Component::Base)
+            raise "`Lookbook::Component::Base` must be subclassed before use"
+          end
+
+          obj.instance_variable_set(:@_args, kwargs)
+          obj.send(:process_tag_attrs, kwargs)
+          obj.class.send(:run_callbacks, :after_initialize, {}, context: obj) && obj
+        end
+
+        def tag_name(name = nil)
+          @_tag_name = name if name
+          @_tag_name
+        end
+
+        def tag_attr(*attr_names)
+          tag_attr_names.push(*attr_names)
+        end
+
+        def tag_attr_names
+          @_tag_attr_names ||= [*TAG_ATTRIBUTE_NAMES]
+        end
+
+        def before_render(method_name = nil, &callback)
+          callbacks[:before_render].push(method_name || callback)
+        end
+
+        def before_initialize(method_name = nil, &callback)
+          callbacks[:before_initialize].push(method_name || callback)
+        end
+
+        def after_initialize(method_name = nil, &callback)
+          callbacks[:after_initialize].push(method_name || callback)
+        end
+
+        def component_name(name = nil)
+          if name
+            @_component_name = name.to_s.tr("_", "-")
+          else
+            @_component_name ||= component_path.demodulize.underscore.tr("_", "-")
+          end
+        end
+
+        private
+
+        def component_path
+          name.to_s.delete_prefix("Lookbook::")
+        end
+
+        def run_callbacks(type, args, context: self, reduce: false)
+          callbacks[type].inject(args) do |memo, cb|
+            result = cb.is_a?(Symbol) ? context.send(cb, memo) : context.instance_exec(memo, &cb)
+            (reduce && result.is_a?(Hash) && args.is_a?(Hash)) ? result : memo
+          end
+        end
+
+        def callbacks
+          @_callbacks ||= {
+            before_render: [],
+            before_initialize: [],
+            after_initialize: []
+          }
+        end
+      end
+    end
+  end
+end

data/app/components/lookbook/ui/elements/badge/badge.css

@@ -0,0 +1,26 @@
+[data-component="badge"] {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--lb-border-radius-lg);
+  font-size: 12px;
+
+  .badge-label {
+    display: inline-block;
+    color: #fff;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  &[data-style="full"] {
+    padding-inline: var(--lb-spacing-sm);
+    padding-block: var(--lb-spacing-2xs);
+  }
+
+  &[data-style="indicator"] {
+    height: 12px;
+    width: 12px;
+    .badge-label {
+      display: none;
+    }
+  }
+}

data/app/components/lookbook/ui/elements/badge/badge.html.erb

@@ -0,0 +1,3 @@
+<%= render component_tag(:span, data: {style: style}, style: "background-color: var(--lb-color-#{color}-600)") do %>
+  <span class="badge-label"><%= label %></span>
+<% end %>

data/app/components/lookbook/ui/elements/badge/badge.rb

@@ -0,0 +1,21 @@
+module Lookbook
+  module UI
+    class Badge < BaseComponent
+      attr_reader :color
+
+      def initialize(label: nil, color: :slate, indicator: false, **kwargs)
+        @label = label
+        @color = color
+        @indicator = indicator
+      end
+
+      def label
+        @label || content
+      end
+
+      def style
+        @indicator ? "indicator" : "full"
+      end
+    end
+  end
+end

data/app/components/lookbook/ui/elements/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,26 @@
+[data-component="breadcrumbs"] {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  font-size: var(--lb-font-size-sm);
+  color: var(--lb-breadrumbs-color);
+
+  a.breadcrumb {
+    color: var(--lb-breadrumbs-link-color);
+    &:hover {
+      text-decoration: underline;
+      color: var(--lb-breadrumbs-link-color-hover);
+    }
+  }
+
+  .breadcrumb:last-child {
+    color: var(--lb-breadrumbs-color-current);
+  }
+
+  .breadcrumb-divider {
+    flex: none;
+    display: block;
+    margin-left: var(--lb-spacing-2xs);
+    margin-right: var(--lb-spacing-2xs);
+  }
+}

data/app/components/lookbook/ui/elements/breadcrumbs/breadcrumbs.html.erb

@@ -0,0 +1,12 @@
+<%= render component_tag(:nav) do %>
+  <% items.each do |item| %>
+    <% if item[:url] %>
+      <%= link_to item[:label], item[:url], class: "breadcrumb" %>
+    <% else %>
+      <span class="breadcrumb"><%= item[:label] %></span>
+    <% end %>
+    <% unless item == items.last %>
+      <%= lb_icon :chevron_right, class: "breadcrumb-divider" %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/lookbook/ui/elements/breadcrumbs/breadcrumbs.rb

@@ -0,0 +1,19 @@
+module Lookbook
+  module UI
+    class Breadcrumbs < BaseComponent
+      def initialize(items: [], **kwargs)
+        @items = items
+      end
+
+      def items
+        @items.map do |item|
+          if item.is_a?(String)
+            {label: item, url: nil}
+          else
+            {label: item.label, url: (item != @items.last) ? item.url_path : nil}
+          end
+        end.compact
+      end
+    end
+  end
+end

data/app/components/lookbook/ui/elements/button/button.css

@@ -0,0 +1,62 @@
+[data-component="button"] {
+  display: block;
+  width: fit-content;
+  color: var(--lb-button-color);
+  text-decoration: none;
+  border-radius: 1.5rem;
+  padding-inline: var(--lb-spacing-sm);
+  padding-block: var(--lb-spacing-xs);
+  background-color: var(--lb-button-background-color);
+  font-family: var(--lb-font-ui);
+  transition: background-color 200ms;
+  outline: 1px solid rgb(from var(--lb-button-border-color) r g b / 80%);
+  outline-offset: -1px;
+
+  &:hover {
+    color: var(--lb-button-color-hover);
+  }
+
+  .button-content {
+    display: flex;
+    align-items: center;
+    column-gap: var(--lb-spacing-xs);
+    text-decoration: none;
+    padding-inline: var(--lb-spacing-3xs);
+  }
+
+  .button-label {
+    font-size: var(--lb-font-size-xs);
+    white-space: nowrap;
+    line-height: 16px;
+  }
+
+  &.icon-only {
+    padding-inline: var(--lb-spacing-xs);
+
+    .button-content {
+      padding-inline: 0;
+    }
+  }
+
+  /* color: var(--lb-button-color); */
+
+  /* .icon {
+    width: 100%;
+    height: 100%;
+  }
+
+  &:hover {
+    color: var(--lb-toolbar-button-color-hover);
+  }
+
+  &:active,
+  &.active {
+    color: var(--lb-toolbar-button-color-active);
+  }
+
+  &[data-size="md"] {
+    padding: 0.75rem;
+    height: var(--lb-size-3xl);
+    width: var(--lb-size-3xl);
+  } */
+}

data/app/components/lookbook/ui/elements/button/button.html.erb

@@ -0,0 +1,25 @@
+<%= render component_tag(button_tag,
+  x: {
+    data: "button",
+    "@click": (click if click.present?),
+  },
+  data: {
+    size: size,
+    tooltip: tooltip
+  },
+  class: ["button", {"icon-only": content.blank?}]
+) do %>
+  <div class="button-content" x-ref="content">
+    <% if icon? && icon_position == :start %>
+      <%= icon %>
+    <% end %>
+    
+    <% if content.present? %>
+      <span class="button-label"><%= content %></span>      
+    <% end %>
+
+    <% if icon? && icon_position == :end %>
+      <%= icon %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/lookbook/ui/elements/button/button.js

@@ -0,0 +1,27 @@
+import AlpineComponent from "@js/alpine/component";
+import tippy from "@js/tippy";
+
+export default AlpineComponent("button", () => {
+  return {
+    tooltip: null,
+
+    init() {
+      if (this.tooltipContent) {
+        this.tooltip = tippy(this.$el, {
+          theme: "tooltip",
+          content: () => this.tooltipContent,
+        });
+      }
+    },
+
+    destroy() {
+      if (this.tooltip) this.tooltip.destroy();
+    },
+
+    get tooltipContent() {
+      return this.$el.hasAttribute("data-tooltip")
+        ? this.$el.getAttribute("data-tooltip")
+        : null;
+    },
+  };
+});

data/app/components/lookbook/ui/elements/button/button.rb

@@ -0,0 +1,28 @@
+module Lookbook
+  module UI
+    class Button < BaseComponent
+      attr_reader :icon_position, :size, :click, :tooltip
+
+      tag_attr :type, :value, :name, :disabled, :href, :target
+
+      def initialize(icon: nil, icon_position: :start, size: :md, click: nil, tooltip: nil, label: nil, **kwargs)
+        @icon = icon
+        @icon_position = icon_position
+        @size = size
+        @click = click
+        @tooltip = tooltip
+        @label = label
+      end
+
+      def icon? = @icon.present?
+
+      def icon
+        render Lookbook::UI::Icon.new(name: @icon, class: "button-icon") if @icon
+      end
+
+      def button_tag
+        tag_attr?(:href) ? :a : :button
+      end
+    end
+  end
+end

data/app/components/lookbook/ui/elements/button_group/button_group.css

@@ -0,0 +1,6 @@
+[data-component="button-group"] {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  column-gap: var(--lb-spacing-sm);
+}

data/app/components/lookbook/ui/elements/button_group/button_group.html.erb

@@ -0,0 +1,3 @@
+<%= render component_tag(data: {size: size}) do %>
+  <%= safe_join(buttons) %>
+<% end %>

data/app/components/lookbook/ui/elements/button_group/button_group.rb

@@ -0,0 +1,19 @@
+module Lookbook
+  module UI
+    class ButtonGroup < BaseComponent
+      with_slot :button do |*args, **kwargs, &block|
+        if args.any? || kwargs.any?
+          lb_button(*args, size: @size, **kwargs, &block)
+        else
+          block.call
+        end
+      end
+
+      attr_reader :size
+
+      def initialize(size: :md, **kwargs)
+        @size = size
+      end
+    end
+  end
+end

data/app/components/lookbook/ui/elements/code/code.css

@@ -0,0 +1,47 @@
+[data-component="code"] {
+  display: block;
+
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+
+  .code-raw {
+    display: none;
+  }
+
+  .code-highlighted {
+    height: 100%;
+
+    code,
+    pre {
+      display: block;
+      height: 100%;
+      width: 100%;
+
+      &:focus-visible {
+        outline: 0;
+      }
+    }
+
+    pre > code {
+      font-size: var(--lb-font-size-sm);
+      line-height: 1.5;
+      padding-inline: var(--lb-spacing-sm) !important;
+      padding-block: var(--lb-spacing-sm) !important;
+      overflow: auto;
+    }
+  }
+
+  &.wrap-lines .code-highlighted code {
+    white-space: pre-wrap;
+  }
+}
+
+html[data-color-scheme="dark"] .shiki,
+html[data-color-scheme="dark"] .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}

data/app/components/lookbook/ui/elements/code/code.html.erb

@@ -0,0 +1,9 @@
+<%= render component_tag(x:
+  {
+    data: "code({lang: #{lang.to_json}})",
+    ":class": "{'wrap-lines': wrap}"
+  }
+) do %>
+  <div class="code-highlighted" x-html="output"></div>
+  <code class="code-raw" x-ref="source"><%= source %></code>
+<% end %>

data/app/components/lookbook/ui/elements/code/code.js

@@ -0,0 +1,29 @@
+import AlpineComponent from "@js/alpine/component";
+import Highlighter from "@js/highlighter";
+
+export default AlpineComponent("code", ({ lang }) => {
+  return {
+    lang,
+    output: "",
+    wrap: false,
+    theme: "github-light",
+
+    init() {
+      this.highlightCode();
+    },
+
+    async highlightCode() {
+      this.output = await this.highlighter.highlight(this.source, {
+        theme: this.theme,
+      });
+    },
+
+    get highlighter() {
+      return new Highlighter(this.lang);
+    },
+
+    get source() {
+      return this.$refs.source.innerText;
+    },
+  };
+});

data/app/components/lookbook/ui/elements/code/code.rb

@@ -0,0 +1,20 @@
+module Lookbook
+  module UI
+    class Code < BaseComponent
+      attr_reader :lang
+
+      def initialize(source: nil, lang: :html, line_numbers: false, **kwargs)
+        @source = source.to_s
+        @lang = lang.to_s
+        @line_numbers = line_numbers
+      end
+
+      def source
+        escaped_source = CGI.escapeHTML(content.presence || @source)
+        WhitespaceStripper.call(escaped_source).html_safe
+      end
+
+      def line_numbers? = @line_numbers
+    end
+  end
+end

data/app/components/lookbook/ui/elements/icon/icon.css

@@ -0,0 +1,18 @@
+[data-component="icon"] {
+  display: inline-block;
+  aspect-ratio: 1 / 1;
+  width: 1rem;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.stroke-1 svg {
+    stroke-width: 1px;
+  }
+
+  &.stroke-2 svg {
+    stroke-width: 2px;
+  }
+}

data/app/components/lookbook/ui/elements/icon/icon.html.erb

@@ -0,0 +1,3 @@
+<%= render component_tag(:i, x: {data: "icon"}, class: ["icon", "stroke-#{stroke}"]) do %>
+  <%= svg %>
+<% end %>

data/app/components/lookbook/ui/elements/icon/icon.js

@@ -0,0 +1,5 @@
+import AlpineComponent from "@js/alpine/component";
+
+export default AlpineComponent("icon", () => {
+  return {};
+});

data/app/components/lookbook/ui/elements/icon/icon.rb

@@ -0,0 +1,30 @@
+module Lookbook
+  module UI
+    class Icon < BaseComponent
+      ICON_CACHE = {}
+
+      attr_reader :name, :stroke
+
+      def initialize(name:, stroke: 2, **kwargs)
+        @name = name.to_s.tr("_", "-")
+        @stroke = stroke
+      end
+
+      def svg
+        ICON_CACHE[name] ||= read_svg
+      end
+
+      def read_svg
+        if File.exist?(icon_path)
+          File.read(icon_path).html_safe
+        elsif Lookbook.env.development? || Lookbook.env.test?
+          raise "`#{name}` is not a valid icon name"
+        end
+      end
+
+      def icon_path
+        Lookbook::Engine.root.join("public/lookbook-assets/icons/#{name}.svg")
+      end
+    end
+  end
+end

data/app/components/lookbook/ui/elements/metadata_table/metadata_table.css

@@ -0,0 +1,8 @@
+[data-component="page-metadata"] {
+  width: fit-content;
+  padding: var(--lb-spacing-sm);
+
+  td {
+    white-space: nowrap;
+  }
+}

data/app/components/lookbook/ui/elements/metadata_table/metadata_table.html.erb

@@ -0,0 +1,19 @@
+<%= render component_tag do %>
+  <%= lb_table do |table| %>
+    <% table.with_header do |header| %>
+      <% header.with_cell("Name", collapse: true) %>
+      <% header.with_cell("Value") %>
+    <% end %>
+
+    <% entries.each do |entry| %>
+      <% table.with_row do |row| %>
+        <% row.with_cell(collapse: true) do %>
+          <strong><%= entry.name %></strong>
+        <% end %>
+        <% row.with_cell do %>
+          <code><%= entry.value %></code>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>