superform 0.6.1 → 0.7.0

data/lib/superform/rails/field.rb

@@ -12,8 +12,8 @@ module Superform
     #   end
     #
     #   class Field < Field
-    #     def label(**, &)
-    #       MyLabel.new(self, **, &)
+    #     def label(**attributes, &)
+    #       MyLabel.new(self, **attributes, &)
     #     end
     #
     #     def input(class: nil, **)
@@ -26,27 +26,53 @@ module Superform
     # Now all calls to `label` will have the `text-bold` class applied to it.
     class Field < Superform::Field
       def button(**attributes)
-        Components::Button.new(field, attributes:)
+        Components::Button.new(field, **attributes)
       end
 
       def input(**attributes)
-        Components::Input.new(field, attributes:)
+        Components::Input.new(field, **attributes)
       end
 
-      def checkbox(**attributes)
-        Components::Checkbox.new(field, attributes:)
+      def checkbox(index: nil, **attributes)
+        Components::Checkbox.new(field, index:, **attributes)
       end
 
       def label(**attributes, &)
-        Components::Label.new(field, attributes:, &)
+        Components::Label.new(field, **attributes, &)
       end
 
       def textarea(**attributes)
-        Components::Textarea.new(field, attributes:)
+        Components::Textarea.new(field, **attributes)
       end
 
-      def select(*collection, **attributes, &)
-        Components::Select.new(field, attributes:, collection:, &)
+      def select(*options, multiple: false, **attributes, &)
+        Components::Select.new(
+          field,
+          options:,
+          multiple:,
+          **attributes,
+          &
+        )
+      end
+
+      def datalist(*options, **attributes, &block)
+        Components::Datalist.new(field, options:, **attributes, &block)
+      end
+
+      def errors
+        object.errors[key]
+      end
+
+      def invalid?
+        errors.any?
+      end
+
+      def valid?
+        not invalid?
+      end
+
+      def human_attribute_name
+        object.class.human_attribute_name key
       end
 
       # HTML5 input type convenience methods - clean API without _field suffix
@@ -56,73 +82,83 @@ module Superform
       #   field(:birthday).date
       #   field(:secret).hidden(value: "token123")
       #   field(:gender).radio("male", id: "user_gender_male")
-      def text(*, **, &)
-        input(*, **, type: :text, &)
+      def text(*, **)
+        input(*, **, type: :text)
       end
 
-      def hidden(*, **, &)
-        input(*, **, type: :hidden, &)
+      def hidden(*, **)
+        input(*, **, type: :hidden)
       end
 
-      def password(*, **, &)
-        input(*, **, type: :password, &)
+      def password(*, **)
+        input(*, **, type: :password)
       end
 
-      def email(*, **, &)
-        input(*, **, type: :email, &)
+      def email(*, **)
+        input(*, **, type: :email)
       end
 
-      def url(*, **, &)
-        input(*, **, type: :url, &)
+      def url(*, **)
+        input(*, **, type: :url)
       end
 
-      def tel(*, **, &)
-        input(*, **, type: :tel, &)
+      def tel(*, **)
+        input(*, **, type: :tel)
       end
       alias_method :phone, :tel
 
-      def number(*, **, &)
-        input(*, **, type: :number, &)
+      def number(*, **)
+        input(*, **, type: :number)
+      end
+
+      def range(*, **)
+        input(*, **, type: :range)
+      end
+
+      def date(*, **)
+        input(*, **, type: :date)
       end
 
-      def range(*, **, &)
-        input(*, **, type: :range, &)
+      def time(*, **)
+        input(*, **, type: :time)
       end
 
-      def date(*, **, &)
-        input(*, **, type: :date, &)
+      def datetime(*, **)
+        input(*, **, type: :"datetime-local")
       end
 
-      def time(*, **, &)
-        input(*, **, type: :time, &)
+      def month(*, **)
+        input(*, **, type: :month)
       end
 
-      def datetime(*, **, &)
-        input(*, **, type: :"datetime-local", &)
+      def week(*, **)
+        input(*, **, type: :week)
       end
 
-      def month(*, **, &)
-        input(*, **, type: :month, &)
+      def color(*, **)
+        input(*, **, type: :color)
       end
 
-      def week(*, **, &)
-        input(*, **, type: :week, &)
+      def search(*, **)
+        input(*, **, type: :search)
       end
 
-      def color(*, **, &)
-        input(*, **, type: :color, &)
+      def file(*, **)
+        input(*, **, type: :file)
       end
 
-      def search(*, **, &)
-        input(*, **, type: :search, &)
+      def radio(value, index: value, **attributes)
+        Components::Radio.new(field, value:, index:, **attributes)
       end
 
-      def file(*, **, &)
-        input(*, **, type: :file, &)
+      def radios(*options, **attributes, &block)
+        options = enum_options if options.empty?
+        Components::Radios.new(field, options:, **attributes, &block)
       end
 
-      def radio(value, *, **, &)
-        input(*, **, type: :radio, value: value, &)
+      def checkboxes(*options, **attributes, &block)
+        options = enum_options if options.empty?
+        Components::Checkboxes.new(field, options:, **attributes, &block)
       end
 
       # Rails compatibility aliases
@@ -132,6 +168,17 @@ module Superform
       def title
         key.to_s.titleize
       end
+
+      private
+
+      def enum_options
+        return [] unless object
+        enums = object.class.try(:defined_enums)
+        return [] unless enums
+        enum = enums[key.to_s]
+        return [] unless enum
+        enum.keys.map { |k| [k, k.humanize] }
+      end
     end
   end
 end

data/lib/superform/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Superform
-  VERSION = "0.6.1"
+  VERSION = "0.7.0"
 end

data/server/components/breadcrumb.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Breadcrumb < Phlex::HTML
+  def view_template(&)
+    nav(class: "breadcrumb") { yield self }
+  end
+
+  def crumb(&)
+    span(class: "crumb") { yield }
+  end
+end

data/server/components/form_card.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class FormCard < Phlex::HTML
+  def initialize(form_class:, index:)
+    @form_class = form_class
+    @index = index
+  end
+
+  def view_template
+    h2 { a(href: "/forms/#{@index}") { @form_class.name_text } }
+    p { @form_class.description.html_safe }
+  end
+end

data/server/components/layout.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class Layout < Phlex::HTML
+  def initialize(title: "Superform")
+    @title = title
+  end
+
+  def view_template(&)
+    doctype
+    html do
+      head do
+        title { @title }
+        link rel: "stylesheet", href: "/styles.css"
+      end
+      body do
+        header do
+          h1 { a(href: "/") { "Superform" } }
+        end
+        yield
+      end
+    end
+  end
+end

data/server/controllers/forms_controller.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+class FormsController < ActionController::Base
+  before_action { Rails.autoloaders.main.reload }
+  class IndexPage < Phlex::HTML
+    def view_template
+      render Layout.new do
+        render Breadcrumb.new do |b|
+          b.crumb { "Examples" }
+        end
+
+        form_classes.each_with_index do |form_class, index|
+          render FormCard.new(form_class: form_class, index: index)
+        end
+      end
+    end
+  end
+
+  class ShowPage < Phlex::HTML
+    def initialize(form_class:, action:)
+      @form_class = form_class
+      @form = form_class.new(Example.new, action: action)
+    end
+
+    def view_template
+      render Layout.new(title: "#{@form_class.name_text} - Superform") do
+        render Breadcrumb.new do |b|
+          b.crumb { a(href: "/") { "Examples" } }
+          b.crumb { @form_class.name_text }
+        end
+
+        p { @form_class.description.html_safe }
+        render @form
+
+        hr
+
+        h3 { "Source Code" }
+        pre do
+          code { source_code }
+        end
+      end
+    end
+
+    private
+
+    def source_code
+      file = File.join(EXAMPLES_DIR, "#{underscore(@form_class.name)}.rb")
+      File.exist?(file) ? File.read(file) : "# Source not found"
+    end
+
+    def underscore(name)
+      name.gsub(/([a-z])([A-Z])/, '\1_\2').downcase
+    end
+  end
+
+  class SubmitPage < Phlex::HTML
+    def initialize(form_class:, params:, form_path:)
+      @form_class = form_class
+      @params = params
+      @form_path = form_path
+    end
+
+    def view_template
+      render Layout.new(title: "#{@form_class.name_text} - Submitted") do
+        render Breadcrumb.new do |b|
+          b.crumb { a(href: "/") { "Examples" } }
+          b.crumb { a(href: @form_path) { @form_class.name_text } }
+          b.crumb { "Submitted" }
+        end
+
+        h3 { "Params" }
+        pre do
+          code { JSON.pretty_generate(@params.to_unsafe_h) }
+        end
+      end
+    end
+  end
+
+  def index
+    render IndexPage.new, layout: false
+  end
+
+  def show
+    index = params[:id].to_i
+    form_class = form_classes[index]
+    render ShowPage.new(form_class: form_class, action: request.path), layout: false
+  end
+
+  def create
+    index = params[:id].to_i
+    form_class = form_classes[index]
+    render SubmitPage.new(form_class: form_class, params: params, form_path: request.path), layout: false
+  end
+end

data/server/models/example.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+class Example
+  include ActiveModel::Model
+  include ActiveModel::Attributes
+
+  attribute :name, :string
+  attribute :email, :string
+  attribute :password, :string
+  attribute :age, :integer
+  attribute :title, :string
+  attribute :body, :string
+  attribute :country, :string
+  attribute :priority, :string
+  attribute :quantity, :integer
+  attribute :terms_accepted, :boolean
+  attribute :subscribe, :boolean
+  attribute :featured, :boolean
+  attribute :birth_date, :date
+  attribute :appointment_time, :time
+  attribute :event_datetime, :datetime
+  attribute :favorite_color, :string
+  attribute :volume, :integer
+  attribute :search_query, :string
+  attribute :avatar, :string
+  attribute :address, :string
+
+  def self.model_name
+    ActiveModel::Name.new(self, nil, "Example")
+  end
+end

data/server/public/styles.css

@@ -0,0 +1,282 @@
+/* Superform Examples */
+
+:root {
+  --bg: #ffffff;
+  --bg-secondary: #f5f5f7;
+  --fg: #1d1d1f;
+  --fg-secondary: #6e6e73;
+  --border: #c7c7cc;
+  --accent: #007aff;
+  --radius: 8px;
+  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
+  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #000000;
+    --bg-secondary: #1c1c1e;
+    --fg: #f5f5f7;
+    --fg-secondary: #86868b;
+    --border: #38383a;
+    --accent: #0a84ff;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--font);
+  font-size: 17px;
+  line-height: 1.47059;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  margin: 0;
+  padding: 48px 24px;
+  background: var(--bg);
+  color: var(--fg);
+  max-width: 600px;
+  margin-inline: auto;
+}
+
+h1, h2, h3 {
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  margin: 0 0 8px;
+}
+
+h1 { font-size: 21px; }
+h2 { font-size: 19px; }
+h3 { font-size: 14px; color: var(--fg-secondary); font-weight: 500; letter-spacing: 0; }
+
+p {
+  margin: 0 0 16px;
+  color: var(--fg-secondary);
+  font-size: 15px;
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 32px 0;
+}
+
+pre, code {
+  font-family: var(--font-mono);
+  font-size: 13px;
+}
+
+code {
+  background: var(--bg-secondary);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+pre {
+  background: var(--bg-secondary);
+  border-radius: var(--radius);
+  padding: 16px;
+  overflow-x: auto;
+  margin: 0 0 16px;
+}
+
+pre code {
+  background: none;
+  padding: 0;
+}
+
+/* Header */
+header {
+  margin-bottom: 32px;
+}
+
+header h1 {
+  margin: 0;
+  font-size: 21px;
+  font-weight: 600;
+}
+
+header h1 a {
+  color: var(--fg);
+}
+
+header h1 a:hover {
+  text-decoration: none;
+  color: var(--accent);
+}
+
+/* Breadcrumb */
+nav.breadcrumb {
+  margin-bottom: 24px;
+  font-size: 15px;
+  color: var(--fg-secondary);
+}
+
+nav.breadcrumb .crumb + .crumb::before {
+  content: "›";
+  margin: 0 8px;
+  color: var(--fg-secondary);
+}
+
+/* Forms */
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+fieldset {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px;
+  margin: 0;
+}
+
+legend {
+  padding: 0 8px;
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--fg-secondary);
+}
+
+label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  margin-bottom: 4px;
+  color: var(--fg-secondary);
+}
+
+label + input,
+label + textarea,
+label + select {
+  margin-top: 0;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="url"],
+input[type="tel"],
+input[type="search"],
+input[type="color"],
+input[type="file"],
+textarea,
+select {
+  display: block;
+  width: 100%;
+  padding: 7px 10px;
+  font-family: inherit;
+  font-size: 17px;
+  color: var(--fg);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  accent-color: var(--accent);
+}
+
+input[type="range"] {
+  accent-color: var(--accent);
+}
+
+input[type="color"] {
+  padding: 4px;
+  height: 38px;
+}
+
+input[type="file"] {
+  font-size: 15px;
+  padding: 6px;
+}
+
+textarea {
+  min-height: 80px;
+  resize: vertical;
+}
+
+button,
+input[type="submit"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: 500;
+  color: #fff;
+  background: var(--accent);
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+}
+
+button:hover,
+input[type="submit"]:hover {
+  filter: brightness(1.1);
+}
+
+/* List */
+article {
+  padding: 16px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+article:first-of-type {
+  padding-top: 0;
+}
+
+article:last-of-type {
+  border-bottom: none;
+}
+
+article h2 {
+  margin-bottom: 4px;
+  font-size: 17px;
+}
+
+article h2 a {
+  color: var(--fg);
+}
+
+article h2 a:hover {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+article p {
+  margin: 0;
+  font-size: 15px;
+}
+
+article p code {
+  font-size: 12px;
+}