Upgrade to phoenix 1.7

Author: mplatts

README.md

@@ -1,7 +1,6 @@
 # Petal Boilerplate
 
-A clean install of the latest Phoenix with some extras to get you started:
-- Tailwind CSS - using the [mix library](https://hexdocs.pm/tailwind/Tailwind.html)
+A clean install of the Phoenix 1.7 (RC) along with:
 - Alpine JS - using a CDN to avoid needing `node_modules`
 - 🌺 [Petal Components Library](https://github.com/petalframework/petal_components)
 
@@ -13,6 +12,21 @@ Optionally change your database name in `dev.exs`.
 2. Start Phoenix endpoint with `mix phx.server` or inside IEx with `iex -S mix phx.server`
 3. Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
 
+## Phoenix 1.7 generators
+
+The CRUD generators (eg. `mix phx.gen.live`) will produce code that doesn't quite work. Basically, they will use components defined in `core_components.ex` that we have renamed due to naming clashes with Petal Components.
+To fix, simply do a find and replace in the generated code:
+
+```
+Replace `.modal` with `.phx_modal`
+Replace `.table` with `.phx_table`
+Replace `.button` with `.phx_button`
+```
+
+This should make it work but it'll be using a different style of buttons/tables/modal to Petal Components. To work with Petal Components you will need to replace all buttons/tables/modal with the Petal Component versions.
+
+Petal Pro currently comes with a generator to build CRUD interfaces with Petal Components. You can purchase it [here](https://petal.build/pro).
+
 ## Renaming your project
 
 Your app module is currently called `PetalBoilerplate`. There is a script file included that will rename your project to anything you like in one go.

assets/css/app.css

@@ -1,4 +1,3 @@
-/* This file is for your main application CSS */
 @import "tailwindcss/base";
 @import "./petal-components-enhancements.css";
 @import "tailwindcss/components";

assets/js/app.js

@@ -40,7 +40,9 @@ let liveSocket = new LiveSocket("/live", Socket, {
 
 // Show progress bar on live navigation and form submits
 topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" });
-window.addEventListener("phx:page-loading-start", (info) => topbar.show());
+window.addEventListener("phx:page-loading-start", (info) =>
+  topbar.delayedShow(200)
+);
 window.addEventListener("phx:page-loading-stop", (info) => topbar.hide());
 
 // connect if there are any LiveViews on the page

assets/tailwind.config.js

@@ -1,24 +1,48 @@
+// See the Tailwind configuration guide for advanced usage
+// https://tailwindcss.com/docs/configuration
+
 const colors = require("tailwindcss/colors");
+const plugin = require("tailwindcss/plugin");
 
 module.exports = {
   content: [
-    "../lib/*_web/**/*.*ex",
     "./js/**/*.js",
+    "../lib/*_web.ex",
+    "../lib/*_web/**/*.*ex",
     "../deps/petal_components/**/*.*ex",
   ],
   theme: {
     extend: {
       colors: {
+        brand: "#FD4F00",
         primary: colors.blue,
         secondary: colors.pink,
       },
     },
   },
+  darkMode: "class",
   plugins: [
-    require("@tailwindcss/typography"),
     require("@tailwindcss/forms"),
-    require("@tailwindcss/line-clamp"),
-    require("@tailwindcss/aspect-ratio"),
+    plugin(({ addVariant }) =>
+      addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant("phx-click-loading", [
+        ".phx-click-loading&",
+        ".phx-click-loading &",
+      ])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant("phx-submit-loading", [
+        ".phx-submit-loading&",
+        ".phx-submit-loading &",
+      ])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant("phx-change-loading", [
+        ".phx-change-loading&",
+        ".phx-change-loading &",
+      ])
+    ),
   ],
-  darkMode: "class",
 };

assets/vendor/topbar.js

@@ -1,7 +1,9 @@
 /**
  * @license MIT
  * topbar 1.0.0, 2021-01-06
- * https://buunguyen.github.io/topbar
+ * Modifications:
+ *   - add delayedShow(time) (2022-09-21)
+ * http://buunguyen.github.io/topbar
  * Copyright (c) 2021 Buu Nguyen
  */
 (function (window, document) {
@@ -35,10 +37,11 @@
   })();
 
   var canvas,
-    progressTimerId,
-    fadeTimerId,
     currentProgress,
     showing,
+    progressTimerId = null,
+    fadeTimerId = null,
+    delayTimerId = null,
     addEvent = function (elem, type, handler) {
       if (elem.addEventListener) elem.addEventListener(type, handler, false);
       else if (elem.attachEvent) elem.attachEvent("on" + type, handler);
@@ -95,6 +98,11 @@
         for (var key in opts)
           if (options.hasOwnProperty(key)) options[key] = opts[key];
       },
+      delayedShow: function(time) {
+        if (showing) return;
+        if (delayTimerId) return;
+        delayTimerId = setTimeout(() => topbar.show(), time);
+      },
       show: function () {
         if (showing) return;
         showing = true;
@@ -125,6 +133,8 @@
         return currentProgress;
       },
       hide: function () {
+        clearTimeout(delayTimerId);
+        delayTimerId = null;
         if (!showing) return;
         showing = false;
         if (progressTimerId != null) {

config/config.exs

@@ -13,9 +13,12 @@ config :petal_boilerplate,
 # Configures the endpoint
 config :petal_boilerplate, PetalBoilerplateWeb.Endpoint,
   url: [host: "localhost"],
-  render_errors: [view: PetalBoilerplateWeb.ErrorView, accepts: ~w(html json), layout: false],
+  render_errors: [
+    formats: [html: PetalBoilerplateWeb.ErrorHTML, json: PetalBoilerplateWeb.ErrorJSON],
+    layout: false
+  ],
   pubsub_server: PetalBoilerplate.PubSub,
-  live_view: [signing_salt: "Fd8SWPu3"]
+  live_view: [signing_salt: "Nwp6Nmtc"]
 
 # Configures the mailer
 #
@@ -26,9 +29,6 @@ config :petal_boilerplate, PetalBoilerplateWeb.Endpoint,
 # at the `config/runtime.exs`.
 config :petal_boilerplate, PetalBoilerplate.Mailer, adapter: Swoosh.Adapters.Local
 
-# Swoosh API client is needed for adapters other than SMTP.
-config :swoosh, :api_client, false
-
 # Configure esbuild (the version is required)
 config :esbuild,
   version: "0.15.5",
@@ -39,6 +39,18 @@ config :esbuild,
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]
 
+# Configure tailwind (the version is required)
+config :tailwind,
+  version: "3.2.4",
+  default: [
+    args: ~w(
+      --config=tailwind.config.js
+      --input=css/app.css
+      --output=../priv/static/assets/app.css
+    ),
+    cd: Path.expand("../assets", __DIR__)
+  ]
+
 # Configures Elixir's Logger
 config :logger, :console,
   format: "$time $metadata[$level] $message\n",
@@ -49,18 +61,7 @@ config :phoenix, :json_library, Jason
 
 config :petal_components,
        :error_translator_function,
-       {PetalBoilerplateWeb.ErrorHelpers, :translate_error}
-
-config :tailwind,
-  version: "3.1.8",
-  default: [
-    args: ~w(
-         --config=tailwind.config.js
-         --input=css/app.css
-         --output=../priv/static/assets/app.css
-       ),
-    cd: Path.expand("../assets", __DIR__)
-  ]
+       {PetalBoilerplateWeb.CoreComponents, :translate_error}
 
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.

config/dev.exs

@@ -4,8 +4,9 @@ import Config
 config :petal_boilerplate, PetalBoilerplate.Repo,
   username: "postgres",
   password: "postgres",
-  database: "petal_boilerplate_dev",
   hostname: "localhost",
+  database: "petal_boilerplate_dev",
+  stacktrace: true,
   show_sensitive_data_on_connection_error: true,
   pool_size: 10
 
@@ -22,7 +23,7 @@ config :petal_boilerplate, PetalBoilerplateWeb.Endpoint,
   check_origin: false,
   code_reloader: true,
   debug_errors: true,
-  secret_key_base: "47TFd8fpLTZROcN4Lxz/OQ5fz4hVFMNCsSxHKwSrRGZGxDcWKyGH+1uxAtGYn1/Q",
+  secret_key_base: "ukpF68Q3LDULmUU6dX+IvlxG+bCDjJpDNjAP04W5hwt6G6UraVzzZBWEtAvkxlUi",
   watchers: [
     esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
     tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
@@ -36,7 +37,6 @@ config :petal_boilerplate, PetalBoilerplateWeb.Endpoint,
 #
 #     mix phx.gen.cert
 #
-# Note that this task requires Erlang/OTP 20 or later.
 # Run `mix help phx.gen.cert` for more information.
 #
 # The `http:` config above can be replaced with:
@@ -58,11 +58,13 @@ config :petal_boilerplate, PetalBoilerplateWeb.Endpoint,
     patterns: [
       ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
       ~r"priv/gettext/.*(po)$",
-      ~r"lib/petal_boilerplate_web/(live|views)/.*(ex)$",
-      ~r"lib/petal_boilerplate_web/templates/.*(eex)$"
+      ~r"lib/petal_boilerplate_web/(controllers|live|components)/.*(ex|heex)$"
     ]
   ]
 
+# Enable dev routes for dashboard and mailbox
+config :petal_boilerplate, dev_routes: true
+
 # Do not include metadata nor timestamps in development logs
 config :logger, :console, format: "[$level] $message\n"
 
@@ -72,3 +74,6 @@ config :phoenix, :stacktrace_depth, 20
 
 # Initialize plugs at runtime for faster development compilation
 config :phoenix, :plug_init_mode, :runtime
+
+# Disable swoosh api client as it is only required for production adapters.
+config :swoosh, :api_client, false

config/prod.exs

@@ -3,7 +3,7 @@ import Config
 # For production, don't forget to configure the url host
 # to something meaningful, Phoenix uses this information
 # when generating URLs.
-#
+
 # Note we also include the path to a cache manifest
 # containing the digested version of static files. This
 # manifest is generated by the `mix phx.digest` task,
@@ -12,39 +12,11 @@ import Config
 config :petal_boilerplate, PetalBoilerplateWeb.Endpoint,
   cache_static_manifest: "priv/static/cache_manifest.json"
 
+# Configures Swoosh API Client
+config :swoosh, :api_client, PetalBoilerplate.Finch
+
 # Do not print debug messages in production
 config :logger, level: :info
 
-# ## SSL Support
-#
-# To get SSL working, you will need to add the `https` key
-# to the previous section and set your `:url` port to 443:
-#
-#     config :petal_boilerplate, PetalBoilerplateWeb.Endpoint,
-#       ...,
-#       url: [host: "example.com", port: 443],
-#       https: [
-#         ...,
-#         port: 443,
-#         cipher_suite: :strong,
-#         keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"),
-#         certfile: System.get_env("SOME_APP_SSL_CERT_PATH")
-#       ]
-#
-# The `cipher_suite` is set to `:strong` to support only the
-# latest and more secure SSL ciphers. This means old browsers
-# and clients may not be supported. You can set it to
-# `:compatible` for wider support.
-#
-# `:keyfile` and `:certfile` expect an absolute path to the key
-# and cert in disk or a relative path inside priv, for example
-# "priv/ssl/server.key". For all supported SSL configuration
-# options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1
-#
-# We also recommend setting `force_ssl` in your endpoint, ensuring
-# no data is ever sent via http, always redirecting to https:
-#
-#     config :petal_boilerplate, PetalBoilerplateWeb.Endpoint,
-#       force_ssl: [hsts: true]
-#
-# Check `Plug.SSL` for all available options in `force_ssl`.
+# Runtime production configuration, including reading
+# of environment variables, is done on config/runtime.exs.

config/runtime.exs

@@ -7,9 +7,17 @@ import Config
 # any compile-time configuration in here, as it won't be applied.
 # The block below contains prod specific runtime configuration.
 
-# Start the phoenix server if environment is set and running in a release
-if System.get_env("PHX_SERVER") && System.get_env("RELEASE_NAME") do
-  config :petal_boilerplate, PetalBoilerplate.Endpoint, server: true
+# ## Using releases
+#
+# If you use `mix release`, you need to explicitly enable the server
+# by passing the PHX_SERVER=true when you start it:
+#
+#     PHX_SERVER=true bin/petal_boilerplate start
+#
+# Alternatively, you can use `mix phx.gen.release` to generate a `bin/server`
+# script that automatically sets the env var above.
+if System.get_env("PHX_SERVER") do
+  config :petal_boilerplate, PetalBoilerplateWeb.Endpoint, server: true
 end
 
 if config_env() == :prod do
@@ -44,26 +52,48 @@ if config_env() == :prod do
   port = String.to_integer(System.get_env("PORT") || "4000")
 
   config :petal_boilerplate, PetalBoilerplateWeb.Endpoint,
-    url: [host: host, port: 443],
+    url: [host: host, port: 443, scheme: "https"],
     http: [
       # Enable IPv6 and bind on all interfaces.
-      # Set it to {0, 0, 0, 0, 0, 0, 0, 1} for local network only access.
+      # Set it to  {0, 0, 0, 0, 0, 0, 0, 1} for local network only access.
       # See the documentation on https://hexdocs.pm/plug_cowboy/Plug.Cowboy.html
       # for details about using IPv6 vs IPv4 and loopback vs public addresses.
       ip: {0, 0, 0, 0, 0, 0, 0, 0},
       port: port
     ],
     secret_key_base: secret_key_base
 
-  # ## Using releases
+  # ## SSL Support
   #
-  # If you are doing OTP releases, you need to instruct Phoenix
-  # to start each relevant endpoint:
+  # To get SSL working, you will need to add the `https` key
+  # to your endpoint configuration:
   #
-  #     config :petal_boilerplate, PetalBoilerplateWeb.Endpoint, server: true
+  #     config :petal_boilerplate, PetalBoilerplateWeb.Endpoint,
+  #       https: [
+  #         ...,
+  #         port: 443,
+  #         cipher_suite: :strong,
+  #         keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"),
+  #         certfile: System.get_env("SOME_APP_SSL_CERT_PATH")
+  #       ]
   #
-  # Then you can assemble a release by calling `mix release`.
-  # See `mix help release` for more information.
+  # The `cipher_suite` is set to `:strong` to support only the
+  # latest and more secure SSL ciphers. This means old browsers
+  # and clients may not be supported. You can set it to
+  # `:compatible` for wider support.
+  #
+  # `:keyfile` and `:certfile` expect an absolute path to the key
+  # and cert in disk or a relative path inside priv, for example
+  # "priv/ssl/server.key". For all supported SSL configuration
+  # options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1
+  #
+  # We also recommend setting `force_ssl` in your endpoint, ensuring
+  # no data is ever sent via http, always redirecting to https:
+  #
+  #     config :petal_boilerplate, PetalBoilerplateWeb.Endpoint,
+  #       force_ssl: [hsts: true]
+  #
+  # Check `Plug.SSL` for all available options in `force_ssl`.
 
   # ## Configuring the mailer
   #