formatic 0.1.0

data/app/assets/stylesheets/formatic/components/wrapper.sass

@@ -0,0 +1,51 @@
+@use "iglu/font-size"
+@use 'iglu/spacing'
+@use "formatic/settings/colors"
+@use "iglu/responsive/settings/breakpoints"
+
+.c-formatic-wrapper
+  display: grid
+  grid-row-gap: 0.2rem
+  grid-template-columns: auto
+  grid-template-areas: 'label' 'input' 'error' 'hint'
+  +font-size.default
+  +spacing.margin-bottom
+
+  &--hint-before-input
+    grid-template-areas: 'label' 'hint' 'input' 'error'
+
+  @each $column in label input error hint address
+    &__#{$column}
+      grid-area: #{$column}
+
+  &__input
+    // Allow for children of this div to autoscroll-x
+    min-width: 1px
+
+  &__error
+    color: colors.$paradise-pink
+
+    i
+      display: inline-block
+      height: 1em
+      width: 1em
+      animation: formatic-flip 4s infinite
+      background-size: 1em 1em
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"1024\" height=\"1024\" viewBox=\"0 0 1024 1024\"><path d=\"M512 220.885l368.256 675.115h-736.512l368.256-675.115zM512 42.667l-512 938.667h1024l-512-938.667zM469.333 426.667h85.333v256h-85.333v-256zM512 842.667c-29.397 0-53.333-23.893-53.333-53.333s23.936-53.333 53.333-53.333 53.333 23.893 53.333 53.333-23.936 53.333-53.333 53.333z\" style=\"fill: #{colors.$paradise-pink}\"></path></svg>")
+
+  &__hint
+    opacity: 0.5
+    +spacing.margin-bottom--tiny
+    +font-size.smaller
+
+  &__prevent-submit-on-enter
+    position: absolute
+    margin-left: -9999px
+    visibility: hidden
+
+@container (min-width: #{breakpoints.$large})
+  .c-formatic-wrapper
+    grid-template-columns: 1fr 1fr
+    grid-template-rows: min-content min-content min-content
+    grid-column-gap: 1rem
+    grid-template-areas: 'label input' 'hint input' 'error input'

data/app/assets/stylesheets/formatic/generics/flip.sass

@@ -0,0 +1,3 @@
+@keyframes formatic-flip
+  0%, 80%
+    transform: rotateY(360deg)

data/app/assets/stylesheets/formatic/index.sass

@@ -0,0 +1,16 @@
+// ITCSS
+
+@use "./generics/flip.sass"
+
+@use "./components/wrapper.sass" // Wrapper comes first, rest alphabetically
+@use "./components/checklist.sass"
+@use "./components/date.sass"
+@use "./components/select.sass"
+@use "./components/stepper.sass"
+@use "./components/string.sass"
+@use "./components/textarea.sass"
+@use "./components/toggle.sass"
+
+@use "./utilities/container"
+
+@use "./scopes/form"

data/app/assets/stylesheets/formatic/package.json

@@ -0,0 +1,5 @@
+{
+  "exports": {
+    "sass": "formatic/index.sass"
+  }
+}

data/app/assets/stylesheets/formatic/scopes/form.sass

@@ -0,0 +1,45 @@
+@use "iglu/font-size"
+@use "formatic/settings/colors"
+
+.s-formatic
+  input[type="email"],
+  input[type="number"],
+  input[type="password"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="text"],
+  input[type="url"],
+  textarea,
+  select
+    -webkit-appearance: none
+    -moz-appearance: none
+    font-family: 'Roboto Condensed'
+    width: 100%
+    outline-offset: 0
+    outline-color: colors.$neon-yellow
+    border: 1px solid colors.$silver-gray
+    color: colors.$black
+    height: 2em
+    padding-top: 0.2em
+    padding-right: 0.4em
+    padding-left: 0.4em
+    box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1) inset
+    box-sizing: border-box
+    +font-size.default
+
+    .formatic-wrapper.is-required &
+      border-left-color: colors.$paradise-pink
+      border-left-width: 2px
+
+  textarea
+    min-height: 7em
+
+  select
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"32\" height=\"24\" viewBox=\"0 0 32 24\"><polygon points=\"0,0 32,0 16,24\" style=\"fill: rgb(51, 51, 51)\"></polygon></svg>")
+    background-position: right 0.5rem center
+    background-repeat: no-repeat
+    background-size: 9px 6px
+    box-shadow: none
+
+  ::placeholder
+    color: colors.$silver-gray

data/app/assets/stylesheets/formatic/settings/_colors.sass

@@ -0,0 +1,13 @@
+@use "sass:color"
+
+$black: #222
+$white: #fff
+
+$paradise-pink: rgb(240, 30, 80)
+$neon-yellow: #ffd400
+$jade-green: rgb(0, 190, 130)
+
+$granite-gray: rgb(70, 70, 70)
+$silver-gray: color.adjust($granite-gray, $lightness: 50%)
+
+// $neon-red: #ec5840

data/app/assets/stylesheets/formatic/tools/terminal.sass

@@ -0,0 +1,3 @@
+=terminal
+  &
+    font-family: Inconsolata, "Roboto Mono", "Source Code Pro", "SF Mono", Monaco, "Fira Mono", "Droid Sans Mono", monospace !important

data/app/assets/stylesheets/formatic/utilities/container.sass

@@ -0,0 +1,2 @@
+.u-formatic-container
+  container-type: inline-size

data/app/components/formatic/application_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Formatic
+  # A component that every other component inherits from in this gem.
+  # It adds convenience methods for initialization of a component.
+  class ApplicationComponent < ViewComponent::Base
+    extend Dry::Initializer
+
+    # By default, Dry::Initializer doesn't complain about invalid arguments.
+    # We want it to raise an error.
+    def initialize(...)
+      __check_for_unknown_options(...)
+      super
+    end
+
+    private
+
+    def __check_for_unknown_options(*args, **kwargs)
+      return if __defined_options.empty?
+
+      # Checking params
+      opts = args.drop(__defined_params.length).first || kwargs
+      raise ArgumentError, "Unexpected argument #{opts}" unless opts.is_a? Hash
+
+      # Checking options
+      unknown_options = opts.keys - __defined_options
+      message = "Key(s) #{unknown_options} not found in #{__defined_options} of #{self.class}"
+      raise KeyError, message if unknown_options.any?
+    end
+
+    def __defined_options
+      self.class.dry_initializer.options.map(&:source)
+    end
+
+    def __defined_params
+      self.class.dry_initializer.params.map(&:source)
+    end
+  end
+end

data/app/components/formatic/base.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Formatic
+  # All inputs inherit from this class.
+  class Base < ApplicationComponent
+    # Rails form builder. Usually with a model as `f.object`.
+    option :f
+
+    # The method that is called on the form object.
+    #
+    # This is uncontroversial, both Rails and SimpleForm have this.
+    #  Rails:      `f.text_field(:title)`
+    #  SimpleForm: `f.input(:title)`
+    option :attribute_name, type: proc(&:to_sym)
+
+    # If passed in, used as the `<input value="...">`
+    # If not passed in, it is derived from the form object.
+    option :value, as: :manual_value, default: -> { :_fetch_from_record }
+
+    # CSS class(es) applied to the <input> element
+    # and the wrapper <div> respectively.
+    option :class, as: :manual_class, optional: true
+    option :wrapper_class, optional: true
+
+    # For inputs that support `<input autofocus=...>`
+    option :autofocus, default: -> { false }
+
+    # Some inputs (such as checkboxes and textfields)
+    # can be submitted continously by submitting their <form>
+    # via javascript.
+    option :async_submit, default: -> { false }
+
+    # See `Formatic::Wrapper`
+    option :label, default: -> { true }
+    option :label_for_id, optional: true
+    option :readonly, as: :readonly, default: -> { false }
+    option :required, optional: true
+    option :prevent_submit_on_enter, default: -> { false }
+
+    def wrapper
+      @wrapper ||= ::Formatic::Wrapper.new(
+        f:,
+        attribute_name:,
+        label:,
+        required:,
+        prevent_submit_on_enter:,
+        label_for_id:,
+        class: wrapper_class
+      )
+    end
+
+    def value
+      return manual_value if manual_value != :_fetch_from_record
+
+      f.object.public_send(attribute_name) if f.object.respond_to?(attribute_name)
+    end
+
+    # ---------------------------
+    # ActiveModel and Rails slugs
+    # ---------------------------
+
+    # Name of the URL param for this record.
+    def param_key
+      f.object.model_name.param_key
+    end
+
+    # # Name of the URL param for this input.
+    def input_name
+      "#{param_key}[#{attribute_name}]"
+    end
+  end
+end

data/app/components/formatic/checklist.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Formatic
+  # Multiple checkboxes for an Array of values in one attribute.
+  class Checklist < ::Formatic::Base
+    # Alternative 1:
+    # Raw options that are passed on to the Rails collection_check_boxes.check_box.
+    option :options, optional: true
+
+    # Alternative 2:
+    # ActiveRecord records used to populate the checkbox list.
+    option :records, optional: true
+
+    # Alternative 3:
+    # Keys to lookup in i18n translations.
+    option :keys, optional: true
+
+    option :include_current, optional: true
+
+    renders_many :toggles, ::Formatic::Toggle
+
+    # This is highjacking the CSS definitions of another component, `Formatic::Toggle`.
+    # I'm not terribly pleased by this, but I think it's a good work-around.
+    erb_template <<~ERB
+      <%= render wrapper do |wrap| %>
+
+        <% wrap.with_input do %>
+          <div class="c-formatic-checklist s-formatic">
+
+          <% f.collection_check_boxes(attribute_name, choices, :last, :first) do |builder| %>
+
+            <%= content_tag :div,
+                            builder.label { builder.check_box(class: manual_class) + content_tag(:i) + content_tag(:span, split_and_wrap(builder.object.first)) },
+                            class: 'c-formatic-toggle' %>
+
+          <% end %>
+
+          </div>
+        <% end %>
+      <% end %>
+    ERB
+
+    def choices
+      ::Formatic::Choices.call(
+        f:,
+        attribute_name:,
+        options:,
+        records:,
+        keys:,
+        include_current:,
+        include_blank: false
+      )
+    end
+
+    def split_and_wrap(string)
+      parts = string.split('   ')
+      return parts.first if parts.size == 1
+
+      main_part = parts[0..-2].join('   ')
+      last_part = parts.last
+
+      ::Formatic::SafeJoin.call(main_part, '<br/>'.html_safe, content_tag(:small, last_part))
+    end
+  end
+end

data/app/components/formatic/date.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+require 'formatic/templates/date'
+
+module Formatic
+  # Date/calendar
+  class Date < ::Formatic::Base
+    # Represents one element in the calendar.
+    class Day
+      extend Dry::Initializer
+
+      option :date
+
+      def classes
+        [
+          ('is-today' if date.today?),
+          ('is-saturday' if date.saturday?),
+          ('is-sunday' if date.sunday?),
+          ('is-holiday' if holiday?)
+        ].join(' ')
+      end
+
+      private
+
+      def holiday?
+        return false if date.saturday? || date.sunday?
+
+        ::Holidays.on(date, :de_nw).present?
+      end
+    end
+
+    option :discard_day, optional: true
+
+    erb_template(::Formatic::Templates::Date.call)
+
+    def css_classes
+      %i[c-formatic-date__input]
+    end
+
+    def options_for_day
+      options_for_select collection_for_day, day_value
+    end
+
+    def options_for_month
+      options_for_select collection_for_month, f.object.public_send(attribute_name)&.month
+    end
+
+    def options_for_year
+      options_for_select collection_for_year, f.object.public_send(attribute_name)&.year
+    end
+
+    def day_attribute_name
+      "#{f.object.model_name.param_key}[#{attribute_name}(3i)]"
+    end
+
+    def month_attribute_name
+      "#{f.object.model_name.param_key}[#{attribute_name}(2i)]"
+    end
+
+    def year_attribute_name
+      "#{f.object.model_name.param_key}[#{attribute_name}(1i)]"
+    end
+
+    def day_value
+      f.object.public_send(attribute_name)&.day
+    end
+
+    def day_input_id
+      "#{f.object.model_name.param_key}_#{attribute_name}_3i"
+    end
+
+    def month_input_id
+      "#{f.object.model_name.param_key}_#{attribute_name}_2i"
+    end
+
+    def year_input_id
+      "#{f.object.model_name.param_key}_#{attribute_name}_1i"
+    end
+
+    def calendar(now: Time.current)
+      from = 5.days.ago.to_date
+      till = now.beginning_of_month.advance(months: 2).end_of_month.to_date
+
+      (from..till).map do |date|
+        ::Formatic::Date::Day.new(date:)
+      end
+    end
+
+    private
+
+    def collection_for_day
+      return (1..31) if wrapper.required?
+
+      [nil] + (1..31).to_a
+    end
+
+    def collection_for_month
+      result = (1..12).map { [l(::Date.new(1, _1), format: '%B  %-m'), _1] }
+      result.prepend([nil, nil]) if wrapper.optional?
+      result
+    end
+
+    def collection_for_year
+      result = (30.years.ago.year..10.years.from_now.year)
+      return result if wrapper.required?
+
+      result.to_a.prepend nil
+    end
+  end
+end

data/app/components/formatic/select.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+require 'formatic/templates/select'
+
+module Formatic
+  # Dropdown box
+  class Select < ::Formatic::Base
+    # Alternative 1:
+    # Raw options that are passed on to the Rails select_box_tag.
+    option :options, optional: true
+
+    # Alternative 2:
+    # ActiveRecord records used to populate the select box.
+    option :records, optional: true
+
+    # Alternative 3:
+    # Keys to lookup in i18n translations.
+    option :keys, optional: true
+
+    # Whether or not to show an empty (nil) option.
+    option :include_blank, default: -> { :guess }
+
+    option :include_current, optional: true
+
+    erb_template(::Formatic::Templates::Select.call)
+
+    def choices
+      ::Formatic::Choices.call(
+        f:,
+        attribute_name:,
+        options:,
+        records:,
+        keys:,
+        include_current:,
+        include_blank: include_blank?
+      )
+    end
+
+    def current_choice_name
+      choices.detect { _1.last == value }&.first
+    end
+
+    def include_blank?
+      return wrapper.optional? if @include_blank == :guess
+
+      !!@include_blank
+    end
+  end
+end

data/app/components/formatic/stepper.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Formatic
+  # Stepper input for integer values.
+  class Stepper < ::Formatic::Base
+    option :minimum, default: -> { 0 }
+
+    erb_template <<~ERB
+      <%= render wrapper do |wrap| %>
+
+        <% wrap.with_input do %>
+          <div class="c-formatic-stepper js-formatic-stepper">
+
+            <%= link_to '#', class: 'c-formatic-stepper__step js-formatic-stepper__decrement' do %>
+              &minus;
+            <% end %>
+            <%= text_field_tag input_name,
+                                value.to_i,
+                                { \
+                                  min: minimum,
+                                  inputmode: :numeric,
+                                  pattern: '-?[0-9]*',
+                                  class: 'c-formatic-stepper__number js-formatic-stepper__number',
+                                  placeholder: wrapper.placeholder,
+                                } %>
+            <%= link_to '#', class: 'c-formatic-stepper__step js-formatic-stepper__increment' do %>
+              &plus;
+            <% end %>
+          </div>
+
+        <% end %>
+      <% end %>
+    ERB
+  end
+end

data/app/components/formatic/string.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Formatic
+  # Text input for one-liners.
+  class String < ::Formatic::Base
+    option :terminal, default: -> { false }
+
+    erb_template <<~ERB
+      <%= render wrapper do |wrap| -%>
+
+        <% wrap.with_input do -%>
+          <div class="c-formatic-string s-formatic">
+
+          <% if readonly -%>
+            <div class="s-markdown">
+              <p>
+                <% if terminal? -%>
+                  <tt><%= value -%></tt>
+                <% else -%>
+                  <%= value -%>
+                <% end -%>
+              </p>
+            </div>
+          <% else -%>
+            <%= f.text_field(attribute_name, **input_options) -%>
+          <% end -%>
+
+          </div>
+        <% end -%>
+      <% end -%>
+    ERB
+
+    def input_options
+      result = {
+        placeholder: wrapper.placeholder,
+        autofocus:,
+        class: css_classes
+      }
+
+      (result[:value] = value) if value
+
+      result
+    end
+
+    def css_classes
+      classes = %i[c-formatic-string__input]
+      classes.push(:'is-terminal') if terminal?
+      classes
+    end
+
+    private
+
+    def terminal?
+      !!@terminal
+    end
+  end
+end

data/app/components/formatic/textarea.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Formatic
+  # Text input for multi-line text.
+  class Textarea < ::Formatic::Base
+    renders_one :footer
+
+    erb_template <<~ERB
+      <%= render wrapper do |wrap| -%>
+
+        <% wrap.with_input do -%>
+          <div class="c-formatic-textarea s-formatic">
+
+          <% if readonly -%>
+            <div class="s-markdown">
+              <p>
+                <%= value -%>
+              </p>
+            </div>
+          <% else -%>
+            <%= f.text_area(attribute_name, **input_options) -%>
+          <% end -%>
+
+          </div>
+        <% end -%>
+      <% end -%>
+    ERB
+
+    def input_options
+      result = {
+        placeholder: wrapper.placeholder,
+        data: { '1p-ignore' => true },
+        autofocus:,
+        class: css_classes
+      }
+
+      (result[:value] = value) if value
+
+      result
+    end
+
+    def css_classes
+      classes = %i[c-formatic-textarea__input js-formatic-textarea]
+      classes.push(:'is-autosubmit') if async_submit
+      classes
+    end
+  end
+end

data/app/components/formatic/toggle.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Formatic
+  # Stylish checkbox for a boolean attribute.
+  class Toggle < ::Formatic::Base
+    erb_template <<~ERB
+      <%= render wrapper do |wrap| %>
+
+        <% wrap.with_input do %>
+          <div class="c-formatic-toggle s-formatic <%= 'js-formatic-toggle' if async_submit %>">
+
+          <% if readonly %>
+            <div class="s-markdown">
+              <p>
+                <%= value %>
+              </p>
+            </div>
+          <% else %>
+            <%= f.label attribute_name, nil, { for: dom_id } do |builder| %>
+              <%
+                f.check_box(attribute_name, { id: dom_id, class: css_classes }) +
+                  content_tag(:i) +
+                  content_tag(:div, human_attribute_name, class: 'c-formatic-toggle__label-caption-dummy') +
+                  content_tag(:div, wrap.toggle_on, class: 'is-active') +
+                  content_tag(:div, wrap.toggle_off, class: 'is-inactive')
+              %>
+            <% end %>
+          <% end %>
+
+          </div>
+        <% end %>
+      <% end %>
+    ERB
+
+    def css_classes
+      ::Formatic::Css.call('c-formatic-toggle__input', manual_class)
+    end
+
+    # So that the wrapper <label> references our custom checkbox.
+    def label_for_id
+      dom_id
+    end
+
+    def human_attribute_name
+      return unless f.object
+
+      f.object.class.human_attribute_name(attribute_name)
+    end
+
+    # There can be multiple checkboxes with the same attribute name on the page.
+    # To couple a <label> to its checkbox, make the checkbox ID unequivocal.
+    def dom_id
+      # For predictability in tests, maybe use something like `Time.now.nsec`?
+      @dom_id ||= SecureRandom.hex(4)
+    end
+  end
+end