Forms

Gemfile

@@ -21,7 +21,11 @@ group :development do
 end
 
 group :test do
-  gem "rspec"
+  gem "capybara"
+  gem "cuprite"
+  gem "nokogiri"
+  gem "rspec-given"
+  gem "rspec-html-matchers"
 end
 
 group :development, :test do

assets/css/index.css

@@ -544,6 +544,10 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
 .mx-3 {
   margin-left: 0.75rem;
   margin-right: 0.75rem;
@@ -562,23 +566,89 @@ video {
   display: flex;
 }
 
+.hidden {
+  display: none;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
 
+.border-slate-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity));
+}
+
+.border-slate-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(30 41 59 / var(--tw-border-opacity));
+}
+
+.bg-slate-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+}
+
+.bg-slate-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
+}
+
 .bg-slate-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(15 23 42 / var(--tw-bg-opacity));
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -588,6 +658,11 @@ video {
   font-weight: 600;
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .text-slate-50 {
   --tw-text-opacity: 1;
   color: rgb(248 250 252 / var(--tw-text-opacity));
@@ -609,6 +684,21 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.placeholder\:text-gray-400::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.placeholder\:text-gray-400::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.hover\:bg-slate-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
+}
+
 .hover\:shadow-sm:hover {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);

docker-compose.yml

@@ -18,21 +18,14 @@ services:
   web:
     <<: [*build-common, *app-common]
     command: "rerun --pattern **/*.{rb,ru,yml} -- bundle exec rackup --host=0.0.0.0"
-    tty: true
-    stdin_open: true
     entrypoint: script/docker-entrypoint.sh
     depends_on:
       - tailwindcss
     environment:
       ENVIRONMENT_NAME: development
       HISTFILE: /app/.zsh_history
-    expose:
-      - 9292
     ports:
       - "9292:9292"
-    volumes:
-      - .:/app
-      - bundler:/bundler
 
   tailwindcss:
     <<: [*build-common, *app-common]

spec/framework/web/form_errors_spec.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+RSpec.describe Forms::Errors do
+  Given(:html) { form.call }
+  Given(:result) { HTML(html) }
+
+  Given(:form_class) {
+    Class.new {
+      include Phlex::Renderable
+      include Forms::Form
+
+      def template
+        errors_for(:my_field)
+      end
+    }
+  }
+
+  When(:form) { form_class.new(errors: { my_field: field_errors }) }
+  When(:form_tag) { result.find_tag(:form) }
+
+  context " when there are NO errors for field" do
+    context "when errors for the field is empty" do
+      Given(:field_errors) { [] }
+
+      Then { form_tag.empty_element? }
+    end
+
+    context "when errors for the field is nil" do
+      Given(:field_errors) { nil }
+
+      Then { form_tag.empty_element? }
+    end
+
+    context "when there are no errors" do
+      Given(:form) { form_class.new(errors: {}) }
+
+      Then { form_tag.empty_element? }
+    end
+
+    context "when there are no errors passed in" do
+      Given(:form) { form_class.new }
+
+      Then { form_tag.empty_element? }
+    end
+  end
+
+  context "when the field has errors" do
+    context "when there is one error for the field" do
+      Given(:field_errors) { "an error" }
+
+      Then { form_tag.has_tag?(:span, text: "an error") }
+    end
+
+    context "when there are multiple errors for the field" do |_v|
+      Given(:field_errors) { %w[error-one error-two] }
+
+      Then { form_tag.has_tag?(:span, text: "error-one") }
+      And { form_tag.has_tag?(:span, text: "error-two") }
+    end
+  end
+
+  describe "css classes" do
+    Given(:form_class) {
+      Class.new {
+        include Phlex::Renderable
+        include Forms::Form
+
+        def template
+          errors_for(:my_field)
+        end
+
+        private
+
+        def errors_css_classes
+          %w[a-class]
+        end
+
+        def error_css_classes
+          %w[another-class]
+        end
+      }
+    }
+
+    When(:field_errors) { "an-error" }
+
+    Then { form_tag.has_tag?(:div, with: {class: "a-class"}) }
+    Then { form_tag.has_tag?(:span, with: {class: "another-class"}) }
+  end
+end