configure formatter plugins and mix format

surface-ui · Aug 5, 2022 · 65b850c · 65b850c
1 parent aa49ffa
commit 65b850c
Show file tree

Hide file tree

Showing 18 changed files with 125 additions and 83 deletions.
diff --git a/.formatter.exs b/.formatter.exs
@@ -1,6 +1,13 @@
 # Used by "mix format"
 [
   import_deps: [:phoenix, :surface],
-  inputs: ["{mix,.formatter}.exs", "{config,lib,test}/**/*.{ex,exs}"],
-  surface_inputs: ["{lib,test}/**/*.{ex,exs,sface}", "priv/catalogue/**/*.{ex,exs,sface}"]
+  plugins: [
+    Phoenix.LiveView.HTMLFormatter,
+    Surface.Formatter.Plugin
+  ],
+  inputs: [
+    "{mix,.formatter}.exs",
+    "{config,lib,test}/**/*.{ex,exs,sface}",
+    "priv/catalogue/**/*.{ex,exs,sface}"
+  ]
 ]
diff --git a/lib/surface/catalogue/components/component_info.ex b/lib/surface/catalogue/components/component_info.ex
@@ -58,7 +58,7 @@ defmodule Surface.Catalogue.Components.ComponentInfo do
       <h3 id={@api_anchor_id} class="title is-4 is-spaced">
         <a href={"##{@api_anchor_id}"}>#</a> Public API
       </h3>
-      <ComponentAPI module={@module}/>
+      <ComponentAPI module={@module} />
     </div>
     """
   end

diff --git a/lib/surface/catalogue/components/component_tree.ex b/lib/surface/catalogue/components/component_tree.ex
@@ -12,8 +12,8 @@ defmodule Surface.Catalogue.Components.ComponentTree do
   def render(assigns) do
     ~F"""
     <aside
-     class="section column is-narrow is-narrow-mobile is-fullheight is-hidden-mobile"
-     style="background-color: #f5f5f5; min-width: 270px;"
+      class="section column is-narrow is-narrow-mobile is-fullheight is-hidden-mobile"
+      style="background-color: #f5f5f5; min-width: 270px;"
     >
       {render_node(assigns, @components, @selected_component, @single_catalogue?)}
     </aside>
@@ -35,32 +35,36 @@ defmodule Surface.Catalogue.Components.ComponentTree do
         </LivePatch>
       </li>
       {#for {key, value} <- Enum.sort(node),
-                    mod_path = parent_keys ++ [key],
-                    module = Module.concat(mod_path),
-                    component_type = component_type(module),
-                    {has_child_selected?} = {has_child_selected?(mod_path, selected_component)}}
+          mod_path = parent_keys ++ [key],
+          module = Module.concat(mod_path),
+          component_type = component_type(module),
+          {has_child_selected?} = {has_child_selected?(mod_path, selected_component)}}
         <li :if={component_type != :none}>
           <LivePatch
             to={@socket.router.__helpers__().live_path(@socket, Surface.Catalogue.PageLive, inspect(module))}
-            class={"has-text-weight-bold": selected_component?(mod_path, selected_component)}>
+            class={"has-text-weight-bold": selected_component?(mod_path, selected_component)}
+          >
             <span class="icon">
-              <i class={component_icon(component_type)}></i>
-            </span> {key}
+              <i class={component_icon(component_type)} />
+            </span>
+            {key}
           </LivePatch>
         </li>
         <li :if={value != %{} && @single_catalogue? && parent_keys == []}>
           <a style="cursor: default;">
             <span class="icon">
-              <i class="fa fa-puzzle-piece"></i>
-            </span> Components
+              <i class="fa fa-puzzle-piece" />
+            </span>
+            Components
           </a>
           {render_node(assigns, value, selected_component, single_catalogue?, mod_path)}
         </li>
         <li :if={value != %{} && (!@single_catalogue? || parent_keys != [])}>
           <a href="#" onclick="toggleNode(this)">
             <span class="icon">
-              <i class={:far, "fa-folder-open": has_child_selected?, "fa-folder": !has_child_selected?}></i>
-            </span> {key}
+              <i class={:far, "fa-folder-open": has_child_selected?, "fa-folder": !has_child_selected?} />
+            </span>
+            {key}
           </a>
           {render_node(assigns, value, selected_component, single_catalogue?, mod_path)}
         </li>

diff --git a/lib/surface/catalogue/components/playground_tools.ex b/lib/surface/catalogue/components/playground_tools.ex
@@ -57,7 +57,7 @@ defmodule Surface.Catalogue.Components.PlaygroundTools do
           <div style="margin-top: 0.7rem;">
             <Form for={:props_values} change="change" opts={autocomplete: "off"} :let={form: form}>
               {#for prop <- @props}
-                <PropInput prop={prop} value={@props_values[prop.name]} form={form}/>
+                <PropInput prop={prop} value={@props_values[prop.name]} form={form} />
               {/for}
             </Form>
           </div>
@@ -66,7 +66,7 @@ defmodule Surface.Catalogue.Components.PlaygroundTools do
           <div style="margin-top: 0.7rem;">
             <Form for={:props_values} change="change" opts={autocomplete: "off"} :let={form: form}>
               {#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]} form={form} nil_placeholder="no slot" />
               {/for}
             </Form>
           </div>
@@ -138,7 +138,10 @@ defmodule Surface.Catalogue.Components.PlaygroundTools do
           <hr style="margin: 0.7rem 0;">
 
           <div id="playground-tools-state-instances" style="margin-top: 0.7rem;">
-            <div :for={{mod, id, value} <- @playground_info.components_instances_memory} class="field is-horizontal">
+            <div
+              :for={{mod, id, value} <- @playground_info.components_instances_memory}
+              class="field is-horizontal"
+            >
               <div class="field-label is-small">
                 <label class="label has-text-grey-dark">
                   {mod}&lt;<a :on-click="show_component_state" phx-value-component={id}>#{id}</a>&gt;
@@ -154,14 +157,19 @@ defmodule Surface.Catalogue.Components.PlaygroundTools do
         </TabItem>
         <TabItem label="Event Log" visible={@events != []} changed={@has_new_events?}>
           <span style="margin-left: 1.0rem;">
-            <span class="has-text-weight-semibold">Events: </span>
+            <span class="has-text-weight-semibold">Events:
+            </span>
             <span>{available_events(@events)}</span>
             <span style="float: right; padding-right: 1.0rem;">
               <a :on-click="clear_event_log">Clear</a>
             </span>
           </span>
           <hr style="margin: 0.8rem 0;">
-          <div id="event-log" style="height: 250px; overflow: scroll; font-family: monospace" class="is-size-7">
+          <div
+            id="event-log"
+            style="height: 250px; overflow: scroll; font-family: monospace"
+            class="is-size-7"
+          >
             <div id={"event-log-content-#{@event_log_counter}"} phx-update="append" phx-hook="EventLog">
               <p :for={{id, message} <- @event_log_entries} id={"event-log-message-#{id}"}>
                 <span style="white-space: break-spaces;">{raw(message)}</span>
@@ -170,7 +178,11 @@ defmodule Surface.Catalogue.Components.PlaygroundTools do
           </div>
         </TabItem>
         <TabItem label="Debug/Profile">
-          <div id="playground-tools-debug-profile-disabled" style="margin-top: 3.0rem; text-align: center;" phx-update="ignore">
+          <div
+            id="playground-tools-debug-profile-disabled"
+            style="margin-top: 3.0rem; text-align: center;"
+            phx-update="ignore"
+          >
             The <strong>window.liveSocket</strong> has not been set. Debug/Profiling is disabled.
           </div>
           <div id="playground-tools-debug-profile" style="margin-top: 0.7rem;" phx-update="ignore">
@@ -186,7 +198,7 @@ defmodule Surface.Catalogue.Components.PlaygroundTools do
                       style="height: 26px;"
                       type="checkbox"
                       onclick="handleEnableDebugClick(this);"
-                    >
+                    />
                   </div>
                 </div>
               </div>
@@ -204,7 +216,7 @@ defmodule Surface.Catalogue.Components.PlaygroundTools do
                       style="height: 26px;"
                       type="checkbox"
                       onclick="handleEnableLatencySimClick(this);"
-                    >
+                    />
                   </div>
                   <input
                     id="debug_profile_latency_sim_value"
@@ -213,7 +225,7 @@ defmodule Surface.Catalogue.Components.PlaygroundTools do
                     class="input is-small"
                     style="width: 80px; margin-right: 5px; text-align: right;"
                     onblur="handleLatencySimValueBlur(this);"
-                  >
+                  />
                 </div>
               </div>
             </div>
@@ -231,15 +243,15 @@ defmodule Surface.Catalogue.Components.PlaygroundTools do
                       type="checkbox"
                       value="true"
                       onclick="handleEnableProfileClick(this);"
-                    >
+                    />
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </TabItem>
       </Tabs>
-      <StateDialog id="component_state_dialog"/>
+      <StateDialog id="component_state_dialog" />
     </div>
     """
   end
@@ -338,7 +350,7 @@ defmodule Surface.Catalogue.Components.PlaygroundTools do
       ) do
     prop_info =
       Enum.find(socket.assigns.props, &(to_string(&1.name) == prop_name)) ||
-      Enum.find(socket.assigns.slots, &(to_string(&1.name) == prop_name))
+        Enum.find(socket.assigns.slots, &(to_string(&1.name) == prop_name))
 
     {fun, prop_name, new_props_values} =
       convert_props_values(
@@ -367,7 +379,7 @@ defmodule Surface.Catalogue.Components.PlaygroundTools do
       ) do
     prop_info =
       Enum.find(socket.assigns.props, &(to_string(&1.name) == prop)) ||
-      Enum.find(socket.assigns.slots, &(to_string(&1.name) == prop))
+        Enum.find(socket.assigns.slots, &(to_string(&1.name) == prop))
 
     if prop_info.opts[:required] do
       {:noreply, socket}

diff --git a/lib/surface/catalogue/components/prop_input.ex b/lib/surface/catalogue/components/prop_input.ex
@@ -26,7 +26,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} form={@form} placeholder={@placeholder} />
           </div>
         </div>
       </div>
@@ -43,7 +43,7 @@ defmodule Surface.Catalogue.Components.PropInput do
     case {prop.type, get_choices(prop)} do
       {:boolean, _} ->
         ~F"""
-        <Checkbox field={prop.name} value={value} opts={style: "height: 26px;"} form={form}/>
+        <Checkbox field={prop.name} value={value} opts={style: "height: 26px;"} form={form} />
 
         {error_message(prop)}
         """
@@ -55,15 +55,16 @@ defmodule Surface.Catalogue.Components.PropInput do
           value={value}
           class="input is-small"
           opts={placeholder: @placeholder, phx_keydown: "text_prop_keydown", phx_value_prop: prop.name}
-         form={form}/>
+          form={form}
+        />
 
         {error_message(prop)}
         """
 
       {:string, choices} ->
         ~F"""
         <div class="select is-small">
-          <Select field={prop.name} options={choices} selected={value} form={form}/>
+          <Select field={prop.name} options={choices} selected={value} form={form} />
         </div>
 
         {error_message(prop)}
@@ -76,7 +77,8 @@ defmodule Surface.Catalogue.Components.PropInput do
           value={value_to_string(value)}
           class="input is-small"
           opts={placeholder: @placeholder}
-         form={form}/>
+          form={form}
+        />
 
         {error_message(prop)}
         """
@@ -86,7 +88,7 @@ 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 field={prop.name} options={choices} selected={value_to_string(value)} form={form} />
         </div>
 
         {error_message(prop)}
@@ -99,7 +101,8 @@ defmodule Surface.Catalogue.Components.PropInput do
           value={css_value_to_string(value)}
           class="input is-small"
           opts={placeholder: @placeholder, phx_keydown: "text_prop_keydown", phx_value_prop: prop.name}
-         form={form}/>
+          form={form}
+        />
 
         {error_message(prop)}
         """
@@ -111,7 +114,8 @@ defmodule Surface.Catalogue.Components.PropInput do
           value={value}
           class="input is-small"
           opts={placeholder: @placeholder}
-         form={form}/>
+          form={form}
+        />
 
         {error_message(prop)}
         """
@@ -123,15 +127,16 @@ defmodule Surface.Catalogue.Components.PropInput do
           value={value}
           class="input is-small"
           opts={placeholder: @placeholder}
-         form={form}/>
+          form={form}
+        />
 
         {error_message(prop)}
         """
 
       {:integer, choices} ->
         ~F"""
         <div class="select is-small">
-          <Select field={prop.name} options={choices} selected={value} form={form}/>
+          <Select field={prop.name} options={choices} selected={value} form={form} />
         </div>
 
         {error_message(prop)}
@@ -144,7 +149,8 @@ defmodule Surface.Catalogue.Components.PropInput do
           value={value_to_string(value)}
           class="input is-small"
           opts={placeholder: @placeholder, phx_keydown: "text_prop_keydown", phx_value_prop: prop.name}
-         form={form}/>
+          form={form}
+        />
 
         {error_message(prop)}
         """

diff --git a/lib/surface/catalogue/components/state_dialog.ex b/lib/surface/catalogue/components/state_dialog.ex
@@ -38,7 +38,7 @@ defmodule Surface.Catalogue.Components.StateDialog do
   def render(assigns) do
     ~F"""
     <div class={"modal", "is-active": @show} :on-window-keydown="hide" phx-key="Escape">
-      <div class="modal-background" style="background-color: rgba(10,10,10,.30)"></div>
+      <div class="modal-background" style="background-color: rgba(10,10,10,.30)" />
       <div class="modal-card" style="width: unset; min-width: 600px;">
         <header class="modal-card-head">
           <p class="modal-card-title has-text-grey has-text-weight-medium">
@@ -60,15 +60,15 @@ defmodule Surface.Catalogue.Components.StateDialog do
                 <div class="column is-narrow has-text-centered">
                   <div class="control">
                     <label class="checkbox">
-                      <Checkbox field={:show_builtin} value={@show_builtin}/>
+                      <Checkbox field={:show_builtin} value={@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}/>
+                      <Checkbox field={:show_private} value={@show_private} />
                       Private assigns
                     </label>
                   </div>

diff --git a/lib/surface/catalogue/components/table.ex b/lib/surface/catalogue/components/table.ex
@@ -36,7 +36,7 @@ defmodule Surface.Catalogue.Components.Table do
         "is-fullwidth": @expanded,
         "is-bordered": @bordered,
         "is-striped": @striped
-     }>
+      }>
         <thead>
           <tr>
             <th :for={col <- @cols}>
@@ -45,11 +45,9 @@ defmodule Surface.Catalogue.Components.Table do
           </tr>
         </thead>
         <tbody>
-          <tr
-            :for={{item, index} <- Enum.with_index(@data)}
-            class={row_class_fun(@rowClass).(item, index)}>
+          <tr :for={{item, index} <- Enum.with_index(@data)} class={row_class_fun(@rowClass).(item, index)}>
             <td :for.index={index <- @cols}>
-              <span><#slot name="cols" index={index} :args={item: item}/></span>
+              <span><#slot name="cols" index={index} :args={item: item} /></span>
             </td>
           </tr>
         </tbody>

diff --git a/lib/surface/catalogue/components/tabs.ex b/lib/surface/catalogue/components/tabs.ex
@@ -37,18 +37,18 @@ defmodule Surface.Catalogue.Components.Tabs do
   def render(assigns) do
     ~F"""
     <div class={"is-fullwidth": @expanded}>
-      <nav class={"tabs",  "is-boxed": @boxed, "is-fullwidth": @expanded}>
+      <nav class={"tabs", "is-boxed": @boxed, "is-fullwidth": @expanded}>
         <ul>
           <li
             :for={{tab, index} <- Enum.with_index(@tabs), tab.visible}
             class={"is-active": @active_tab == index, isDisabled: tab.disabled}
           >
             <a :on-click="tab_click" phx-value-index={index}>
               <span :if={tab.icon} class="icon is-small">
-                <i class={tab.icon} aria-hidden="true"></i>
+                <i class={tab.icon} aria-hidden="true" />
               </span>
               <span>{tab.label}</span>
-              <span style="width: 15px; margin-left: 2px;">{raw(tab.changed && "*" || "&nbsp")}</span>
+              <span style="width: 15px; margin-left: 2px;">{raw((tab.changed && "*") || "&nbsp")}</span>
             </a>
           </li>
         </ul>
@@ -59,7 +59,7 @@ defmodule Surface.Catalogue.Components.Tabs do
           :show={tab.visible && @active_tab == index}
           class={"tab-item animated #{@animation} faster"}
         >
-          <#slot name="tabs" index={index}/>
+          <#slot name="tabs" index={index} />
         </div>
       </section>
     </div>