From b8897b70833037fc656b7d9a04f55ac7afd3d163 Mon Sep 17 00:00:00 2001 From: mhenrixon Date: Sat, 8 Nov 2025 08:17:51 +0100 Subject: [PATCH] Add Select component - Implements Select component with DaisyUI styling - Adds comprehensive test coverage - Includes responsive class comments for Tailwind --- lib/phlexy_ui/select.rb | 124 ++++++++++++++++++++++++++++++ spec/lib/phlexy_ui/select_spec.rb | 100 ++++++++++++++++++++++++ 2 files changed, 224 insertions(+) create mode 100644 lib/phlexy_ui/select.rb create mode 100644 spec/lib/phlexy_ui/select_spec.rb diff --git a/lib/phlexy_ui/select.rb b/lib/phlexy_ui/select.rb new file mode 100644 index 0000000..354d90c --- /dev/null +++ b/lib/phlexy_ui/select.rb @@ -0,0 +1,124 @@ +# frozen_string_literal: true + +module PhlexyUI + # @component html class="select" + class Select < Base + def initialize(*, as: :select, **) + super(*, **) + @as = as + end + + def view_template(&) + generate_classes!( + # "select" + component_html_class: :select, + modifiers_map: modifiers, + base_modifiers:, + options: + ).then do |classes| + public_send(as, class: classes, **options, &) + end + end + + register_modifiers( + # "sm:select-ghost" + # "@sm:select-ghost" + # "md:select-ghost" + # "@md:select-ghost" + # "lg:select-ghost" + # "@lg:select-ghost" + ghost: "select-ghost", + # "sm:select-xs" + # "@sm:select-xs" + # "md:select-xs" + # "@md:select-xs" + # "lg:select-xs" + # "@lg:select-xs" + xs: "select-xs", + # "sm:select-sm" + # "@sm:select-sm" + # "md:select-sm" + # "@md:select-sm" + # "lg:select-sm" + # "@lg:select-sm" + sm: "select-sm", + # "sm:select-md" + # "@sm:select-md" + # "md:select-md" + # "@md:select-md" + # "lg:select-md" + # "@lg:select-md" + md: "select-md", + # "sm:select-lg" + # "@sm:select-lg" + # "md:select-lg" + # "@md:select-lg" + # "lg:select-lg" + # "@lg:select-lg" + lg: "select-lg", + # "sm:select-xl" + # "@sm:select-xl" + # "md:select-xl" + # "@md:select-xl" + # "lg:select-xl" + # "@lg:select-xl" + xl: "select-xl", + # "sm:select-neutral" + # "@sm:select-neutral" + # "md:select-neutral" + # "@md:select-neutral" + # "lg:select-neutral" + # "@lg:select-neutral" + neutral: "select-neutral", + # "sm:select-primary" + # "@sm:select-primary" + # "md:select-primary" + # "@md:select-primary" + # "lg:select-primary" + # "@lg:select-primary" + primary: "select-primary", + # "sm:select-secondary" + # "@sm:select-secondary" + # "md:select-secondary" + # "@md:select-secondary" + # "lg:select-secondary" + # "@lg:select-secondary" + secondary: "select-secondary", + # "sm:select-accent" + # "@sm:select-accent" + # "md:select-accent" + # "@md:select-accent" + # "lg:select-accent" + # "@lg:select-accent" + accent: "select-accent", + # "sm:select-info" + # "@sm:select-info" + # "md:select-info" + # "@md:select-info" + # "lg:select-info" + # "@lg:select-info" + info: "select-info", + # "sm:select-success" + # "@sm:select-success" + # "md:select-success" + # "@md:select-success" + # "lg:select-success" + # "@lg:select-success" + success: "select-success", + # "sm:select-warning" + # "@sm:select-warning" + # "md:select-warning" + # "@md:select-warning" + # "lg:select-warning" + # "@lg:select-warning" + warning: "select-warning", + # "sm:select-error" + # "@sm:select-error" + # "md:select-error" + # "@md:select-error" + # "lg:select-error" + # "@lg:select-error" + error: "select-error" + ) + end +end diff --git a/spec/lib/phlexy_ui/select_spec.rb b/spec/lib/phlexy_ui/select_spec.rb new file mode 100644 index 0000000..7cccc68 --- /dev/null +++ b/spec/lib/phlexy_ui/select_spec.rb @@ -0,0 +1,100 @@ +require "spec_helper" + +describe PhlexyUI::Select do + subject(:output) { render described_class.new } + + it "is expected to match the formatted HTML" do + expected_html = html <<~HTML + + HTML + + is_expected.to eq(expected_html) + end + + describe "conditions" do + { + ghost: "select-ghost", + xs: "select-xs", + sm: "select-sm", + md: "select-md", + lg: "select-lg", + xl: "select-xl", + neutral: "select-neutral", + primary: "select-primary", + secondary: "select-secondary", + accent: "select-accent", + info: "select-info", + success: "select-success", + warning: "select-warning", + error: "select-error" + }.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 + + HTML + + expect(output).to eq(expected_html) + end + end + end + + context "when given multiple conditions" do + subject(:output) { render described_class.new(:primary, :lg) } + + it "renders them separately" do + expected_html = html <<~HTML + + HTML + + expect(output).to eq(expected_html) + 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 + + 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(:primary, responsive: {viewport => :secondary}) + end + + it "renders it separately with a responsive prefix" do + expected_html = html <<~HTML + + HTML + + expect(output).to eq(expected_html) + end + end + end + end + + describe "passing :as option" do + subject(:output) { render described_class.new(as: :div) } + + it "renders as the given tag" do + expected_html = html <<~HTML +
+ HTML + + expect(output).to eq(expected_html) + end + end +end