Add Chat component

lib/phlexy_ui/chat.rb

@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  # @component html class="chat"
+  class Chat < Base
+    def initialize(*, as: :div, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        # "chat"
+        component_html_class: :chat,
+        modifiers_map: modifiers,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    def image(**options, &)
+      generate_classes!(
+        # "chat-image"
+        component_html_class: :"chat-image",
+        options:
+      ).then do |classes|
+        div(class: classes, **options, &)
+      end
+    end
+
+    def header(**options, &)
+      generate_classes!(
+        # "chat-header"
+        component_html_class: :"chat-header",
+        options:
+      ).then do |classes|
+        div(class: classes, **options, &)
+      end
+    end
+
+    def bubble(*modifiers, **options, &)
+      generate_classes!(
+        # "chat-bubble"
+        component_html_class: :"chat-bubble",
+        modifiers_map: bubble_modifiers,
+        base_modifiers: modifiers,
+        options:
+      ).then do |classes|
+        div(class: classes, **options, &)
+      end
+    end
+
+    def bubble_modifiers
+      {
+        # "sm:chat-bubble-neutral"
+        # "@sm:chat-bubble-neutral"
+        # "md:chat-bubble-neutral"
+        # "@md:chat-bubble-neutral"
+        # "lg:chat-bubble-neutral"
+        # "@lg:chat-bubble-neutral"
+        neutral: "chat-bubble-neutral",
+        # "sm:chat-bubble-primary"
+        # "@sm:chat-bubble-primary"
+        # "md:chat-bubble-primary"
+        # "@md:chat-bubble-primary"
+        # "lg:chat-bubble-primary"
+        # "@lg:chat-bubble-primary"
+        primary: "chat-bubble-primary",
+        # "sm:chat-bubble-secondary"
+        # "@sm:chat-bubble-secondary"
+        # "md:chat-bubble-secondary"
+        # "@md:chat-bubble-secondary"
+        # "lg:chat-bubble-secondary"
+        # "@lg:chat-bubble-secondary"
+        secondary: "chat-bubble-secondary",
+        # "sm:chat-bubble-accent"
+        # "@sm:chat-bubble-accent"
+        # "md:chat-bubble-accent"
+        # "@md:chat-bubble-accent"
+        # "lg:chat-bubble-accent"
+        # "@lg:chat-bubble-accent"
+        accent: "chat-bubble-accent",
+        # "sm:chat-bubble-info"
+        # "@sm:chat-bubble-info"
+        # "md:chat-bubble-info"
+        # "@md:chat-bubble-info"
+        # "lg:chat-bubble-info"
+        # "@lg:chat-bubble-info"
+        info: "chat-bubble-info",
+        # "sm:chat-bubble-success"
+        # "@sm:chat-bubble-success"
+        # "md:chat-bubble-success"
+        # "@md:chat-bubble-success"
+        # "lg:chat-bubble-success"
+        # "@lg:chat-bubble-success"
+        success: "chat-bubble-success",
+        # "sm:chat-bubble-warning"
+        # "@sm:chat-bubble-warning"
+        # "md:chat-bubble-warning"
+        # "@md:chat-bubble-warning"
+        # "lg:chat-bubble-warning"
+        # "@lg:chat-bubble-warning"
+        warning: "chat-bubble-warning",
+        # "sm:chat-bubble-error"
+        # "@sm:chat-bubble-error"
+        # "md:chat-bubble-error"
+        # "@md:chat-bubble-error"
+        # "lg:chat-bubble-error"
+        # "@lg:chat-bubble-error"
+        error: "chat-bubble-error"
+      }
+    end
+
+    def footer(**options, &)
+      generate_classes!(
+        # "chat-footer"
+        component_html_class: :"chat-footer",
+        options:
+      ).then do |classes|
+        div(class: classes, **options, &)
+      end
+    end
+
+    register_modifiers(
+      # "sm:chat-start"
+      # "@sm:chat-start"
+      # "md:chat-start"
+      # "@md:chat-start"
+      # "lg:chat-start"
+      # "@lg:chat-start"
+      start: "chat-start",
+        # "sm:chat-end"
+        # "@sm:chat-end"
+        # "md:chat-end"
+        # "@md:chat-end"
+        # "lg:chat-end"
+        # "@lg:chat-end"
+      end: "chat-end"
+    )
+  end
+end

spec/lib/phlexy_ui/chat_spec.rb

@@ -0,0 +1,131 @@
+require "spec_helper"
+
+describe PhlexyUI::Chat do
+  subject(:output) { render described_class.new }
+
+  it "is expected to match the formatted HTML" do
+    expected_html = html <<~HTML
+      <div class="chat"></div>
+    HTML
+
+    is_expected.to eq(expected_html)
+  end
+
+  describe "with part methods" do
+    subject(:output) do
+      render described_class.new do |c|
+        c.image { "Image" }
+        c.header { "Header" }
+        c.bubble { "Message" }
+        c.footer { "Footer" }
+      end
+    end
+
+    it "renders all parts" do
+      expected_html = html <<~HTML
+        <div class="chat">
+          <div class="chat-image">Image</div>
+          <div class="chat-header">Header</div>
+          <div class="chat-bubble">Message</div>
+          <div class="chat-footer">Footer</div>
+        </div>
+      HTML
+
+      expect(output).to eq(expected_html)
+    end
+  end
+
+  describe "conditions" do
+    {
+      start: "chat-start",
+      end: "chat-end"
+    }.each do |modifier, css|
+      context "when given :#{modifier} modifier" do
+        subject(:output) { render described_class.new(modifier) }
+
+        it "renders it apart from the main class" do
+          expected_html = html <<~HTML
+            <div class="chat #{css}"></div>
+          HTML
+
+          expect(output).to eq(expected_html)
+        end
+      end
+    end
+  end
+
+  describe "bubble colors" do
+    {
+      primary: "chat-bubble-primary",
+      secondary: "chat-bubble-secondary",
+      accent: "chat-bubble-accent",
+      neutral: "chat-bubble-neutral",
+      info: "chat-bubble-info",
+      success: "chat-bubble-success",
+      warning: "chat-bubble-warning",
+      error: "chat-bubble-error"
+    }.each do |color, css|
+      context "when bubble is given :#{color} modifier" do
+        subject(:output) do
+          render described_class.new do |c|
+            c.bubble(color) { "Message" }
+          end
+        end
+
+        it "renders bubble with color class" do
+          expected_html = html <<~HTML
+            <div class="chat">
+              <div class="chat-bubble #{css}">Message</div>
+            </div>
+          HTML
+
+          expect(output).to eq(expected_html)
+        end
+      end
+    end
+  end
+
+  describe "data" do
+    subject(:output) do
+      render described_class.new(data: {foo: "bar"})
+    end
+
+    it "renders it correctly" do
+      expected_html = html <<~HTML
+        <div class="chat" data-foo="bar"></div>
+      HTML
+
+      expect(output).to eq(expected_html)
+    end
+  end
+
+  describe "responsiveness" do
+    %i[sm md lg xl @sm @md @lg @xl].each do |viewport|
+      context "when given an :#{viewport} responsive option" do
+        subject(:output) do
+          render described_class.new(:start, responsive: {viewport => :end})
+        end
+
+        it "renders it separately with a responsive prefix" do
+          expected_html = html <<~HTML
+            <div class="chat chat-start #{viewport}:chat-end"></div>
+          HTML
+
+          expect(output).to eq(expected_html)
+        end
+      end
+    end
+  end
+
+  describe "passing :as option" do
+    subject(:output) { render described_class.new(as: :section) }
+
+    it "renders as the given tag" do
+      expected_html = html <<~HTML
+        <section class="chat"></section>
+      HTML
+
+      expect(output).to eq(expected_html)
+    end
+  end
+end