naymspace · Flo0807 · Jun 27, 2024 · Jun 26, 2024 · Jun 26, 2024 · Jun 26, 2024
diff --git a/guides/get_started/installation.md b/guides/get_started/installation.md
@@ -2,6 +2,8 @@
 
 The following guide will help you to install Backpex in your Phoenix application. We will guide you through the installation process and show you how to create a simple resource.
 
+Make sure you meet the [prerequisites](prerequisites.md) before you start the installation.
+
 ## Add to list of dependencies
 
 In your `mix.exs`:
@@ -28,7 +30,7 @@ In your `tailwind.config.js`:
 content: [
   ...,
   // add this line
-  'deps/backpex/**/*.*ex'
+  '../deps/backpex/**/*.*ex'
 ]
 ```
 
@@ -260,3 +262,63 @@ end
 ```
 
 This macro will add the required routes for the `PostLive` module. You can now access the `PostLive` LiveResource at `/admin/posts`.
+
+## Remove default background color
+
+If you start with a new Phoenix project, you may have a default background color set for your body tag. This conflicts with the background color of the Backpex `app_shell`.
+
+So if you have this in your `root.html.heex`.
+
+```html
+<body class="bg-white">
+</body> 
+```
+
+You should remove the `bg-white` class.
+
+If you need this color on your body tag to style your application, consider using another root layout for Backpex (see [`put_root_layout/2`](https://hexdocs.pm/phoenix/Phoenix.Controller.html#put_root_layout/2)).
+
+## Set daisyUI theme
+
+As mentioned in the [prerequisites](prerequisites.md), Backpex currently only supports daisyUI light mode. You have two options:
+
+1. Only add the daisyUI light theme to your application.
+
+```js
+// tailwind.config.js
+module.exports = {
+  daisyui: {
+    themes: ['light'],
+  },
+  ...
+}
+```
+
+2. Explicitly set the daisyUI light theme in your layout.
+
+```elixir
+# root.html.heex
+<html data-theme="light">
+  ...
+</html>
+```
+
+If you use another daisyUI theme to style your application, consider using another root layout for Backpex with light theme applied (see [`put_root_layout/2`](https://hexdocs.pm/phoenix/Phoenix.Controller.html#put_root_layout/2)).
+
+## Remove `@tailwindcss/forms` plugin
+
+There is a conflict between the `@tailwindcss/forms` plugin and daisyUI. You should remove the `@tailwindcss/forms` plugin from your `tailwind.config.js` to prevent styling issues.
+
+```js
+// tailwind.config.js
+module.exports = {
+  ...
+  plugins: [
+    ...
+    // remove this line
+    // require('@tailwindcss/forms'),
+  ],
+}
+```
+
+If your application depends on the `@tailwindcss/forms` plugin, you can keep the plugin and [change the strategy to `'class'`](https://github.com/tailwindlabs/tailwindcss-forms?tab=readme-ov-file#using-only-global-styles-or-only-classes). This will prevent the plugin from conflicting with daisyUI. Note that you then have to add the form classes provided by the `@tailwindcss/forms` plugin to your inputs manually.
diff --git a/guides/get_started/prerequisites.md b/guides/get_started/prerequisites.md
@@ -6,6 +6,37 @@ Backpex integrates seamlessly with your existing Phoenix LiveView application, b
 
 Backpex is built on top of Phoenix LiveView, so you need to have Phoenix LiveView installed in your application. If you generate a new Phoenix application using the latest version of the `mix phx.new` generator, Phoenix LiveView is included by default.
 
+## Alpine.js
+
+Backpex uses [Alpine.js](https://alpinejs.dev/) for some interactivity. Make sure you have Alpine.js installed in your application.
+
+You can install Alpine.js by installing it via npm:
+
+```bash
+cd assets && npm install alpinejs
+```
+
+Then, import Alpine.js in your `app.js` file, start it and adjust your LiveView configuration:
+
+```javascript
+import Alpine from "alpinejs";
+
+window.Alpine = Alpine;
+Alpine.start();
+
+const liveSocket = new LiveSocket('/live', Socket, {
+  // add this
+  dom: {
+    onBeforeElUpdated (from, to) {
+      if (from._x_dataStack) {
+        window.Alpine.clone(from, to)
+      }
+    },
+  },
+  params: { _csrf_token: csrfToken },
+})
+```
+
 ## Tailwind CSS
 
 Backpex uses Tailwind CSS for styling. Make sure you have Tailwind CSS installed in your application. You can install Tailwind CSS by following the [official installation guide](https://tailwindcss.com/docs/installation). If you generate a new Phoenix application using the latest version of the `mix phx.new` generator, Tailwind CSS is included by default.

diff --git a/lib/backpex/item_actions/item_action.ex b/lib/backpex/item_actions/item_action.ex
@@ -22,10 +22,10 @@ defmodule Backpex.ItemAction do
   @callback fields() :: list()
 
   @doc """
-  Initial change. The result will be passed to `Backpex.ItemAction.changeset/3` in order to generate a changeset.
+  Initial change. The result will be passed to `c:changeset/3` in order to generate a changeset.
 
   This function is optional and can be used to use changesets with schemas in item actions. If this function
-  is not provided a changeset will be generated automatically based on the provided types in `Backpex.ItemAction.fields/0`.
+  is not provided a changeset will be generated automatically based on the provided types in `c:fields/0`.
   """
   @callback init_change(assigns :: map()) ::
               Ecto.Schema.t()

diff --git a/lib/backpex/resource_action.ex b/lib/backpex/resource_action.ex
@@ -25,10 +25,10 @@ defmodule Backpex.ResourceAction do
   @callback fields() :: list()
 
   @doc """
-  Initial change. The result will be passed to `Backpex.ResourceAction.changeset/3` in order to generate a changeset.
+  Initial change. The result will be passed to `c:changeset/3` in order to generate a changeset.
 
   This function is optional and can be used to use changesets with schemas in resource actions. If this function
-  is not provided a changeset will be generated automatically based on the provided types in `Backpex.ResourceAction.fields/0`.
+  is not provided a changeset will be generated automatically based on the provided types in `c:fields/0`.
   """
   @callback init_change(assigns :: map()) ::
               Ecto.Schema.t()

diff --git a/mix.exs b/mix.exs
@@ -75,7 +75,7 @@ defmodule Backpex.MixProject do
       extra_section: "GUIDES",
       groups_for_extras: groups_for_extras(),
       groups_for_modules: groups_for_modules(),
-      groups_for_functions: [
+      groups_for_docs: [
         Components: &(&1[:type] == :component)
       ],
       source_ref: @version,