superform 0.6.0 → 0.7.0

data/lib/superform/rails/form.rb

@@ -14,146 +14,35 @@ module Superform
       include Phlex::Rails::Helpers::FormAuthenticityToken
       include Phlex::Rails::Helpers::URLFor
 
-      attr_accessor :model
-
-      delegate \
-          :Field,
-          :field,
-          :collection,
-          :namespace,
-          :assign,
-          :serialize,
-        to: :@namespace
-
-      # The Field class is designed to be extended to create custom forms. To override,
-      # in your subclass you may have something like this:
+      # The `Field` class is nested inside the `Form` class so it can be easily extended
+      # to customize the form inputs for your application. For example, if you wanted to
+      # add some default classes to all your inputs and labels you could do something like:
       #
       # ```ruby
       # class MyForm < Superform::Rails::Form
-      #   class MyLabel < Superform::Rails::Components::Label
-      #     def view_template(&content)
-      #       label(form: @field.dom.name, class: "text-bold", &content)
+      #   class Field < self::Field
+      #     def input(**attributes)
+      #       super(class: "input input-bordered", **attributes)
       #     end
-      #   end
       #
-      #   class Field < Field
-      #     def label(**attributes)
-      #       MyLabel.new(self, **attributes)
+      #     def label(**attributes, &block)
+      #       super(class: "label", **attributes, &block)
       #     end
       #   end
       # end
       # ```
-      #
-      # Now all calls to `label` will have the `text-bold` class applied to it.
-      class Field < Superform::Field
-        def button(**attributes)
-          Components::Button.new(self, attributes:)
-        end
-
-        def input(**attributes)
-          Components::Input.new(self, attributes:)
-        end
-
-        def text(*, **, &)
-          input(*, **, type: :text, &)
-        end
+      Field = Superform::Rails::Field
 
-        def checkbox(**attributes)
-          Components::Checkbox.new(self, attributes:)
-        end
-
-        def label(**attributes, &)
-          Components::Label.new(self, attributes:, &)
-        end
-
-        def textarea(**attributes)
-          Components::Textarea.new(self, attributes:)
-        end
-
-        def select(*collection, **attributes, &)
-          Components::Select.new(self, attributes:, collection:, &)
-        end
-
-        # HTML5 input type convenience methods - clean API without _field suffix
-        # Examples:
-        #   field(:email).email(class: "form-input")
-        #   field(:age).number(min: 18, max: 99)
-        #   field(:birthday).date
-        #   field(:secret).hidden(value: "token123")
-        #   field(:gender).radio("male", id: "user_gender_male")
-        def hidden(*, **, &)
-          input(*, **, type: :hidden, &)
-        end
-
-        def password(*, **, &)
-          input(*, **, type: :password, &)
-        end
-
-        def email(*, **, &)
-          input(*, **, type: :email, &)
-        end
-
-        def url(*, **, &)
-          input(*, **, type: :url, &)
-        end
-
-        def tel(*, **, &)
-          input(*, **, type: :tel, &)
-        end
-        alias_method :phone, :tel
-
-        def number(*, **, &)
-          input(*, **, type: :number, &)
-        end
-
-        def range(*, **, &)
-          input(*, **, type: :range, &)
-        end
-
-        def date(*, **, &)
-          input(*, **, type: :date, &)
-        end
-
-        def time(*, **, &)
-          input(*, **, type: :time, &)
-        end
-
-        def datetime(*, **, &)
-          input(*, **, type: :"datetime-local", &)
-        end
-
-        def month(*, **, &)
-          input(*, **, type: :month, &)
-        end
-
-        def week(*, **, &)
-          input(*, **, type: :week, &)
-        end
-
-        def color(*, **, &)
-          input(*, **, type: :color, &)
-        end
-
-        def search(*, **, &)
-          input(*, **, type: :search, &)
-        end
-
-        def file(*, **, &)
-          input(*, **, type: :file, &)
-        end
-
-        def radio(value, *, **, &)
-          input(*, **, type: :radio, value: value, &)
-        end
-
-        # Rails compatibility aliases
-        alias_method :check_box, :checkbox
-        alias_method :text_area, :textarea
+      attr_accessor :model
 
-        def title
-          key.to_s.titleize
-        end
-      end
+      delegate \
+          :Field,
+          :field,
+          :collection,
+          :namespace,
+          :assign,
+          :serialize,
+        to: :@namespace
 
       def build_field(...)
         self.class::Field.new(...)

data/lib/superform/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Superform
-  VERSION = "0.6.0"
+  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;
+}

data/server/rails.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+require "bundler/setup"
+
+require "active_model"
+require "action_controller/railtie"
+require "phlex-rails"
+
+# Load superform from this repo
+require_relative "../lib/superform"
+require_relative "../lib/superform/rails"
+
+# Directories
+SERVER_DIR = Pathname.new(__dir__)
+EXAMPLES_DIR = SERVER_DIR.join("../examples").expand_path
+
+# Minimal Rails app
+class SuperformApp < Rails::Application
+  config.root = SERVER_DIR
+  config.eager_load = false
+  config.consider_all_requests_local = true
+  config.secret_key_base = "superform-demo-secret-key-base-for-development-only"
+  config.hosts.clear
+  config.public_file_server.enabled = true
+
+  config.autoload_paths << root.join("components")
+  config.autoload_paths << root.join("models")
+  config.autoload_paths << root.join("controllers")
+
+  config.autoload_paths << EXAMPLES_DIR
+end
+
+# Collect form classes dynamically
+def form_classes
+  EXAMPLES_DIR.glob("*.rb").sort.filter_map do |path|
+    next if path.basename.to_s == "example_form.rb"
+    cpath = Rails.autoloaders.main.cpath_expected_at(path)
+    Object.const_get(cpath)
+  end
+end
+
+SuperformApp.initialize!
+
+SuperformApp.routes.draw do
+  root to: "forms#index"
+  get "/forms/:id" => "forms#show", as: :form
+  post "/forms/:id" => "forms#create"
+end
+
+def self.start(port: 3000)
+  require "rackup"
+  puts "Starting Superform Examples on http://localhost:#{port}"
+  puts "Press Ctrl+C to stop"
+  puts
+  Rackup::Handler::WEBrick.run(SuperformApp, Port: port)
+end