Remove dependency on Surface Forms (#56)

surface-ui · Feb 21, 2024 · b72562e · b72562e
1 parent cd6f66b
commit b72562e
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 62 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## v0.6.3 (yyyy-mm-dd)
+
+* Remove dependency on Surface Forms (#56)
+
 ## v0.6.2 (2024-02-20)
 
 * Fix bug when dispatching events creared the slot value

diff --git a/lib/surface/catalogue/components/playground_tools.ex b/lib/surface/catalogue/components/playground_tools.ex
@@ -5,7 +5,6 @@ defmodule Surface.Catalogue.Components.PlaygroundTools do
   alias Surface.Catalogue.Components.Tabs.TabItem
   alias Surface.Catalogue.Components.PropInput
   alias Surface.Catalogue.Components.StateDialog
-  alias Surface.Components.Form
   alias Surface.Catalogue.Playground
 
   @event_log_tab 2
@@ -55,20 +54,20 @@ defmodule Surface.Catalogue.Components.PlaygroundTools do
       <Tabs id="playground-tools-tabs" animated={false} tab_click_callback={&tab_click_callback/1}>
         <TabItem label="Properties" visible={@props != []}>
           <div style="margin-top: 0.7rem;">
-            <Form for={%{}} as={:props_values} change="change" opts={autocomplete: "off"} :let={form: form}>
+            <.form for={%{}} as={:props_values} phx-change="change" autocomplete="off">
               {#for prop <- @props}
-                <PropInput prop={prop} value={@props_values[prop.name]} form={form} />
+                <PropInput prop={prop} value={@props_values[prop.name]} />
               {/for}
-            </Form>
+            </.form>
           </div>
         </TabItem>
         <TabItem label="Slots" visible={@slots != []}>
           <div style="margin-top: 0.7rem;">
-            <Form for={%{}} as={:props_values} change="change" opts={autocomplete: "off"} :let={form: form}>
+            <.form for={%{}} as={:props_values} phx-change="change" autocomplete="off">
               {#for slot <- @slots}
-                <PropInput prop={slot} value={@props_values[slot.name]} form={form} nil_placeholder="no slot" />
+                <PropInput prop={slot} value={@props_values[slot.name]} nil_placeholder="no slot" />
               {/for}
-            </Form>
+            </.form>
           </div>
         </TabItem>
         <TabItem label="State">

diff --git a/lib/surface/catalogue/components/prop_input.ex b/lib/surface/catalogue/components/prop_input.ex
@@ -3,14 +3,10 @@ defmodule Surface.Catalogue.Components.PropInput do
 
   use Surface.Component
 
-  alias Surface.Components.Form.{TextInput, Checkbox, Select, NumberInput}
-
   prop prop, :map
 
   prop value, :any
 
-  prop form, :form
-
   prop nil_placeholder, :string, default: "nil"
 
   data placeholder, :any
@@ -26,7 +22,7 @@ defmodule Surface.Catalogue.Components.PropInput do
       <div class="field-body">
         <div class="field" style="display:flex; align-items:center;">
           <div class="control" style="width: 400px;">
-            <.input prop={@prop} value={@value} form={@form} placeholder={@placeholder} />
+            <.input prop={@prop} value={@value} placeholder={@placeholder} />
           </div>
         </div>
       </div>
@@ -42,20 +38,36 @@ defmodule Surface.Catalogue.Components.PropInput do
   defp input(assigns) do
     case {assigns.prop.type, get_choices(assigns.prop)} do
       {:boolean, _} ->
+        assigns =
+          assign_new(assigns, :checked, fn ->
+            Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value])
+          end)
+
         ~F"""
-        <Checkbox field={@prop.name} value={@value} opts={style: "height: 26px;"} form={@form} />
+        <input name={"props_values[#{@prop.name}]"} type="hidden" value="false">
+        <input
+          checked={@checked}
+          id={"props_values_#{@prop.name}"}
+          name={"props_values[#{@prop.name}]"}
+          style="height: 26px;"
+          type="checkbox"
+          value="true"
+        />
 
         {error_message(@prop)}
         """
 
       {:string, []} ->
         ~F"""
-        <TextInput
-          field={@prop.name}
-          value={@value}
+        <input
           class="input is-small"
-          opts={placeholder: @placeholder, phx_keydown: "text_prop_keydown", phx_value_prop: @prop.name}
-          form={@form}
+          id={"props_values_#{@prop.name}"}
+          name={"props_values[#{@prop.name}]"}
+          phx-keydown="text_prop_keydown"
+          phx-value-prop={@prop.name}
+          type="text"
+          {=@value}
+          {=@placeholder}
         />
 
         {error_message(@prop)}
@@ -66,20 +78,25 @@ defmodule Surface.Catalogue.Components.PropInput do
 
         ~F"""
         <div class="select is-small">
-          <Select field={@prop.name} options={@choices} selected={@value} form={@form} />
+          <select id={"props_values_#{@prop.name}"} name={"props_values[#{@prop.name}]"}>
+            {Phoenix.HTML.Form.options_for_select(@choices, @value)}
+          </select>
         </div>
 
         {error_message(@prop)}
         """
 
       {:atom, []} ->
         ~F"""
-        <TextInput
-          field={@prop.name}
-          value={value_to_string(@value)}
+        <input
           class="input is-small"
-          opts={placeholder: @placeholder}
-          form={@form}
+          id={"props_values_#{@prop.name}"}
+          name={"props_values[#{@prop.name}]"}
+          phx-keydown="text_prop_keydown"
+          phx-value-prop={@prop.name}
+          type="text"
+          value={value_to_string(@value)}
+          {=@placeholder}
         />
 
         {error_message(@prop)}
@@ -91,46 +108,57 @@ defmodule Surface.Catalogue.Components.PropInput do
 
         ~F"""
         <div class="select is-small">
-          <Select field={@prop.name} options={@choices} selected={value_to_string(@value)} form={@form} />
+          <select id={"props_values_#{@prop.name}"} name={"props_values[#{@prop.name}]"}>
+            {Phoenix.HTML.Form.options_for_select(@choices, value_to_string(@value))}
+          </select>
         </div>
 
         {error_message(@prop)}
         """
 
       {:css_class, _} ->
         ~F"""
-        <TextInput
-          field={@prop.name}
-          value={css_value_to_string(@value)}
+        <input
           class="input is-small"
-          opts={placeholder: @placeholder, phx_keydown: "text_prop_keydown", phx_value_prop: @prop.name}
-          form={@form}
+          id={"props_values_#{@prop.name}"}
+          name={"props_values[#{@prop.name}]"}
+          phx-keydown="text_prop_keydown"
+          phx-value-prop={@prop.name}
+          type="text"
+          value={css_value_to_string(@value)}
+          {=@placeholder}
         />
 
         {error_message(@prop)}
         """
 
       {:number, []} ->
         ~F"""
-        <NumberInput
-          field={@prop.name}
-          value={@value}
+        <input
           class="input is-small"
-          opts={placeholder: @placeholder}
-          form={@form}
+          id={"props_values_#{@prop.name}"}
+          name={"props_values[#{@prop.name}]"}
+          phx-keydown="text_prop_keydown"
+          phx-value-prop={@prop.name}
+          type="number"
+          {=@value}
+          {=@placeholder}
         />
 
         {error_message(@prop)}
         """
 
       {:integer, []} ->
         ~F"""
-        <NumberInput
-          field={@prop.name}
-          value={@value}
+        <input
           class="input is-small"
-          opts={placeholder: @placeholder}
-          form={@form}
+          id={"props_values_#{@prop.name}"}
+          name={"props_values[#{@prop.name}]"}
+          phx-keydown="text_prop_keydown"
+          phx-value-prop={@prop.name}
+          type="number"
+          {=@value}
+          {=@placeholder}
         />
 
         {error_message(@prop)}
@@ -141,20 +169,25 @@ defmodule Surface.Catalogue.Components.PropInput do
 
         ~F"""
         <div class="select is-small">
-          <Select field={@prop.name} options={@choices} selected={@value} form={@form} />
+          <select id={"props_values_#{@prop.name}"} name={"props_values[#{@prop.name}]"}>
+            {Phoenix.HTML.Form.options_for_select(@choices, @value)}
+          </select>
         </div>
 
         {error_message(@prop)}
         """
 
       {type, []} when type in [:list, :keyword] ->
         ~F"""
-        <TextInput
-          field={@prop.name}
-          value={value_to_string(@value)}
+        <input
           class="input is-small"
-          opts={placeholder: @placeholder, phx_keydown: "text_prop_keydown", phx_value_prop: @prop.name}
-          form={@form}
+          id={"props_values_#{@prop.name}"}
+          name={"props_values[#{@prop.name}]"}
+          phx-keydown="text_prop_keydown"
+          phx-value-prop={@prop.name}
+          type="text"
+          value={value_to_string(@value)}
+          {=@placeholder}
         />
 
         {error_message(@prop)}

diff --git a/lib/surface/catalogue/components/state_dialog.ex b/lib/surface/catalogue/components/state_dialog.ex
@@ -11,9 +11,6 @@ defmodule Surface.Catalogue.Components.StateDialog do
   data show_private, :boolean, default: false
   data playground_pid, :pid, default: nil
 
-  alias Surface.Components.Form
-  alias Surface.Components.Form.Checkbox
-
   def update(assigns, socket) do
     socket =
       if assigns[:component_id] do
@@ -55,26 +52,40 @@ defmodule Surface.Catalogue.Components.StateDialog do
         </section>
         <footer class="modal-card-foot" style="padding: 15px 20px;">
           <span style="width: 100%" class="has-text-grey">
-            <Form for={%{}} as={:options} change="options_change">
+            <.form for={%{}} as={:options} phx-change="options_change" phx-target={@myself}>
               <div class="columns is-vcentered" style="margin-top: 0px;">
                 <div class="column is-narrow has-text-centered">
                   <div class="control">
                     <label class="checkbox">
-                      <Checkbox field={:show_builtin} value={@show_builtin} />
+                      <input name="options[show_builtin]" type="hidden" value="false">
+                      <input
+                        id="options_show_builtin"
+                        name="options[show_builtin]"
+                        type="checkbox"
+                        value="true"
+                        checked={@show_builtin}
+                      />
                       Built-in assigns
                     </label>
                   </div>
                 </div>
                 <div class="column is-narrow has-text-centered">
                   <div class="control">
                     <label class="checkbox">
-                      <Checkbox field={:show_private} value={@show_private} />
+                      <input name="options[show_private]" type="hidden" value="false">
+                      <input
+                        id="options_show_private"
+                        name="options[show_private]"
+                        type="checkbox"
+                        value="true"
+                        checked={@show_private}
+                      />
                       Private assigns
                     </label>
                   </div>
                 </div>
               </div>
-            </Form>
+            </.form>
           </span>
           <button class="button is-info" :on-click="hide">
             Close

diff --git a/mix.lock b/mix.lock
@@ -8,7 +8,7 @@
   "esbuild": {:hex, :esbuild, "0.8.1", "0cbf919f0eccb136d2eeef0df49c4acf55336de864e63594adcea3814f3edf41", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "25fc876a67c13cb0a776e7b5d7974851556baeda2085296c14ab48555ea7560f"},
   "ex_doc": {:hex, :ex_doc, "0.31.1", "8a2355ac42b1cc7b2379da9e40243f2670143721dd50748bf6c3b1184dae2089", [:mix], [{:earmark_parser, "~> 1.4.39", [hex: :earmark_parser, repo: "hexpm", optional: false]}, {:makeup_c, ">= 0.1.1", [hex: :makeup_c, repo: "hexpm", optional: true]}, {:makeup_elixir, "~> 0.14", [hex: :makeup_elixir, repo: "hexpm", optional: false]}, {:makeup_erlang, "~> 0.1", [hex: :makeup_erlang, repo: "hexpm", optional: false]}], "hexpm", "3178c3a407c557d8343479e1ff117a96fd31bafe52a039079593fb0524ef61b0"},
   "file_system": {:hex, :file_system, "0.2.10", "fb082005a9cd1711c05b5248710f8826b02d7d1784e7c3451f9c1231d4fc162d", [:mix], [], "hexpm", "41195edbfb562a593726eda3b3e8b103a309b733ad25f3d642ba49696bf715dc"},
-  "floki": {:hex, :floki, "0.35.3", "0c8c6234aa71cb2b069cf801e8f8f30f8d096eb452c3dae2ccc409510ec32720", [:mix], [], "hexpm", "6d9f07f3fc76599f3b66c39f4a81ac62c8f4d9631140268db92aacad5d0e56d4"},
+  "floki": {:hex, :floki, "0.35.4", "cc947b446024732c07274ac656600c5c4dc014caa1f8fb2dfff93d275b83890d", [:mix], [], "hexpm", "27fa185d3469bd8fc5947ef0f8d5c4e47f0af02eb6b070b63c868f69e3af0204"},
   "html_entities": {:hex, :html_entities, "0.5.2", "9e47e70598da7de2a9ff6af8758399251db6dbb7eebe2b013f2bbd2515895c3c", [:mix], [], "hexpm", "c53ba390403485615623b9531e97696f076ed415e8d8058b1dbaa28181f4fdcc"},
   "jason": {:hex, :jason, "1.4.1", "af1504e35f629ddcdd6addb3513c3853991f694921b1b9368b0bd32beb9f1b63", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "fbb01ecdfd565b56261302f7e1fcc27c4fb8f32d56eab74db621fc154604a7a1"},
   "makeup": {:hex, :makeup, "1.1.1", "fa0bc768698053b2b3869fa8a62616501ff9d11a562f3ce39580d60860c3a55e", [:mix], [{:nimble_parsec, "~> 1.2.2 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "5dc62fbdd0de44de194898b6710692490be74baa02d9d108bc29f007783b0b48"},
@@ -19,7 +19,7 @@
   "phoenix": {:hex, :phoenix, "1.7.11", "1d88fc6b05ab0c735b250932c4e6e33bfa1c186f76dcf623d8dd52f07d6379c7", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.7", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.5.3", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "b1ec57f2e40316b306708fe59b92a16b9f6f4bf50ccfa41aa8c7feb79e0ec02a"},
   "phoenix_html": {:hex, :phoenix_html, "3.3.3", "380b8fb45912b5638d2f1d925a3771b4516b9a78587249cabe394e0a5d579dc9", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "923ebe6fec6e2e3b3e569dfbdc6560de932cd54b000ada0208b5f45024bdd76c"},
   "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.4.1", "2aff698f5e47369decde4357ba91fc9c37c6487a512b41732818f2204a8ef1d3", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "9bffb834e7ddf08467fe54ae58b5785507aaba6255568ae22b4d46e2bb3615ab"},
-  "phoenix_live_view": {:hex, :phoenix_live_view, "0.20.7", "278804219cc85e00f59a02a07b8ea591d99b219877a3b984fb77ac3fdebfb696", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.15", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "4d533f5d6b09c6ff4fb1f41d61dcd90c7f076f25909d4a5481d71bd442b83dc9"},
+  "phoenix_live_view": {:hex, :phoenix_live_view, "0.20.9", "46d5d436d3f8ff97f066b6c45528fd842a711fd3875b2d3f706b2e769ea07c51", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.15 or ~> 1.7.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.3 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.15", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "694388615ece21b70c523910cba1c633132b08a270caaf60100dd4eaf331885d"},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.1.3", "3168d78ba41835aecad272d5e8cd51aa87a7ac9eb836eabc42f6e57538e3731d", [:mix], [], "hexpm", "bba06bc1dcfd8cb086759f0edc94a8ba2bc8896d5331a1e2c2902bf8e36ee502"},
   "phoenix_template": {:hex, :phoenix_template, "1.0.4", "e2092c132f3b5e5b2d49c96695342eb36d0ed514c5b252a77048d5969330d639", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0 or ~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "2c0c81f0e5c6753faf5cca2f229c9709919aba34fab866d3bc05060c9c444206"},
   "plug": {:hex, :plug, "1.15.3", "712976f504418f6dff0a3e554c40d705a9bcf89a7ccef92fc6a5ef8f16a30a97", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "cc4365a3c010a56af402e0809208873d113e9c38c401cabd88027ef4f5c01fd2"},

diff --git a/priv/catalogue/editable_props/playground.ex b/priv/catalogue/editable_props/playground.ex
@@ -7,13 +7,15 @@ defmodule SurfaceCatalogue.SampleComponents.EditableProps.Playground do
   @props [
     boolean: true,
     string: "some string",
-    string_choices: ["1", "2", "3"],
+    string_choices: "2",
     atom: :an_atom,
     atom_choices: :a,
     css_class: ["css", "class"],
     integer: 4,
-    integer_choices: [1, 2, 3],
+    integer_choices: 2,
     number: 3.14,
-    any: nil
+    list: [1, "string", :atom],
+    keyword: [key1: 1, key2: "2", key3: :three],
+    any: %{a: :map}
   ]
 end
diff --git a/priv/catalogue/sample_components/editable_props.ex b/priv/catalogue/sample_components/editable_props.ex
@@ -24,15 +24,15 @@ defmodule SurfaceCatalogue.SampleComponents.EditableProps do
     <p><strong>boolean</strong>: {@boolean}</p>
     <p><strong>string</strong>: {@string}</p>
     <p><strong>string_choices</strong>: {@string_choices}</p>
-    <p><strong>atom</strong>: {@atom}</p>
-    <p><strong>atom_choices</strong>: {@atom_choices}</p>
-    <p><strong>css_class</strong>: {@css_class}</p>
+    <p><strong>atom</strong>: {inspect(@atom)}</p>
+    <p><strong>atom_choices</strong>: {inspect(@atom_choices)}</p>
+    <p><strong>css_class</strong>: {inspect(@css_class)}</p>
     <p><strong>integer</strong>: {@integer}</p>
     <p><strong>integer_choices</strong>: {@integer_choices}</p>
     <p><strong>number</strong>: {@number}</p>
     <p><strong>list</strong>: {inspect(@list)}</p>
     <p><strong>keyword</strong>: {inspect(@keyword)}</p>
-    <p><strong>any</strong>: {@any}</p>
+    <p><strong>any</strong>: {inspect(@any)}</p>
     """
   end
 end