Add comprehensive guides and improve documentation

README.md

@@ -1,38 +1,42 @@
-# Backpex
+<img src="https://github.com/naymspace/backpex/blob/develop/priv/static/images/logo.svg" width="100" height="100">
 
 [![CI](https://github.com/naymspace/backpex/actions/workflows/ci.yml/badge.svg)](https://github.com/naymspace/backpex/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/naymspace/backpex/blob/develop/LICENSE.md)
 [![Hex](https://img.shields.io/hexpm/v/backpex.svg)](https://hex.pm/packages/backpex)
 [![Hex Docs](https://img.shields.io/badge/hex-docs-green)](https://hexdocs.pm/backpex)
 
-Backpex is a simple admin dashboard that makes it easy to manage existing resources in your application.
-
-See our comprehensive [docs](https://hexdocs.pm/backpex) for more information.
+# Backpex
 
-## Screenshot ([Live Demo](https://backpex.live/admin/users))
+Welcome! Backpex is a highly customizable administration panel for Phoenix LiveView applications. Quickly create beautiful CRUD views for your existing data using configurable *LiveResources*. Backpex integrates seamlessly with your existing Phoenix application and provides a simple way to manage your resources. It is highly customizable and can be extended with your own layouts, views, field types, filters and more.
 
-![Backpex Screenshot](priv/static/images/screenshot.png)
+![Backpex Screenshot](https://github.com/naymspace/backpex/blob/develop/priv/static/images/screenshot.png)
 
-## Development
+<div align="center">
+  <a href="https://backpex.live/"><strong>Visit our Live Demo →</strong></a>
+</div>
 
-### Requirements
+## Key Features
 
-- [Docker](https://www.docker.com/)
+- **LiveResources**: Quickly create LiveResource modules for your database tables with fully customizable CRUD views. Bring your own layout or use our components.
+- **Search and Filters**: Define searchable fields on your resources and add custom filters. Get instant results with the power of Phoenix LiveView.
+- **Resource Actions**: Add your globally available custom actions (like user invitation or exports) with additional form fields to your LiveResources.
+- **Authorization**: Handle authorization for all your CRUD and custom actions via simple pattern matching. Optionally integrate your own authorization library.
+- **Field Types**: Many field types (e.g. Text, Number, Date, Upload) are supported out of the box. Easily create your own field type modules with custom logic.
+- **Associations**: Handle HasOne, BelongsTo and HasMany(Through) associations with minimal configuration. Customize available options and rendered columns.
+- **Metrics**: Easily add value metrics (like sums or averages) to your resources for a quick glance at your date. More metric types are in the making.
 
-### Recommended Extensions
+## Installation & Documentation
 
-- [Editorconfig](http://editorconfig.org)
-- [JavaScript Standard Style](https://github.com/standard/standard#are-there-text-editor-plugins)
+See our comprehensive [installation guide](guides/get_started/installation.md) for more information on how to install and configure Backpex in your Phoenix application.
 
-### Setup
+We also provide a detailed [documentation](https://hexdocs.pm/backpex) with guides on how to use Backpex and how to customize it to your needs.
 
-- Clone the repository.
-- In `demo` directory run `cp .env.example .env` and set values accordingly.
-  - Generate `SECRET_KEY_BASE` via `mix phx.gen.secret`.
-  - Generate `LIVE_VIEW_SIGNING_SALT` via `mix phx.gen.secret 32`.
-- Run `docker compose up` (`yarn watch` is triggered automatically).
+## Learn More
 
-Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
+- [What is Backpex?](guides/about_backpex/what-is-backpex.md)
+- [Why we built Backpex?](guides/about_backpex/why-we-built-backpex.md)
+- [Contribute to Backpex](guides/about_backpex/contribute-to-backpex.md)
 
 ## License
 
-Backpex source code is licensed under the [MIT License](LICENSE.md).
+Backpex source code is licensed under the [MIT License](https://github.com/naymspace/backpex/blob/main/LICENSE.md).

guides/about/contribute-to-backpex.md

@@ -0,0 +1,50 @@
+# Contribute to Backpex
+
+We are excited to have you contribute to Backpex! We are always looking for ways to improve the project and welcome any contributions in the form of bug reports, feature requests, documentation improvements, code contributions, and more.
+
+## What can I contribute?
+
+We are in the process of writing a roadmap to outline the features we plan to implement in the future. In the meantime, you can contribute to Backpex by:
+
+- Reporting bugs
+- Requesting new features
+- Improving the documentation
+- Improving the demo application
+- Fixing bugs
+
+## Fork the repository
+
+In order to contribute to Backpex, you need to fork the repository. You can do this by clicking the "Fork" button in the top right corner of the repository page at [https://github.com/naymspace/backpex](https://github.com/naymspace/backpex).
+
+## Clone the repository
+
+After forking the repository, you need to clone it to your local machine. You can do this by running the `git clone` command along with the URL of your forked repository.
+
+## Setting up your development environment
+
+You first need to create a `.env` file in the `demo` directory of the project with the following content:
+
+```bash
+SECRET_KEY_BASE=<SECRET_KEY_BASE>
+LIVE_VIEW_SIGNING_SALT=<LIVE_VIEW_SIGNING_SALT>
+```
+
+For development purposes you can copy the values from the `demo/.env.example` file.
+
+You can then start the development environment by running the following command in the root directory of the project:
+
+```bash
+docker compose up
+```
+
+Backpex comes with a demo application that you can use to test the features of the project. The command will start a PostgreSQL database and the demo application on [http://localhost:4000](http://localhost:4000).
+
+To insert some demo data into the database, you can run the following command:
+
+```bash
+docker compose exec app mix ecto.seed
+```
+
+## Making changes
+
+After setting up your development environment, you can start making changes to the project. We recommend creating a new branch for your changes. After submitting your changes to your forked repository, you can create a pull request to the `develop` branch of the main repository.

guides/about/what-is-backpex.md

@@ -0,0 +1,9 @@
+# What is Backpex?
+
+Backpex is a highly customizable administration panel for Phoenix LiveView applications. It allows you to quickly create CRUD views of your existing data using configurable *LiveResources*. Backpex integrates seamlessly with your existing Phoenix LiveView application and provides an easy way to manage your resources. It is highly customizable and can be extended with your own layouts, views, field types, filters and more.
+
+Backpex is built on top of Phoenix LiveView and provides a rich set of features to manage your resources. With Backpex, you can set up an administration panel for your application in minutes, not hours.
+
+Whether you want to quickly scaffold CRUD views for your existing data or build a full-fledged administration panel, Backpex has you covered.
+
+TODO: add screenshots of key features here

guides/about/why-we-built-backpex.md

@@ -0,0 +1,7 @@
+# Why we built Backpex?
+
+After building several Phoenix applications, we realized that we were repeating ourselves when it came to building administration panels. We were writing the same CRUD views, search and filter functionality over and over again. We wanted a tool that would allow us to quickly scaffold these views and focus on building the core functionality of our applications.
+
+The tool we wanted had to be able to serve as a simple backend administration panel in one project, while being the core of the application in another.
+
+We looked at existing solutions, but found that none of them offered the flexibility and customization we were looking for. We decided to develop Backpex to solve this problem and provide a highly customizable administration panel for Phoenix LiveView applications.

guides/actions/item-actions.md

@@ -0,0 +1,192 @@
+# Item Actions
+
+An item action defines an action (such as deleting a user) that can be performed on one or more items. Unlike resource actions, item actions are not automatically performed on all items in a resource.
+
+An item action could be something like deleting a user, or sending an email to a specific user.
+
+There are multiple ways to perform an Item Action:
+- use the checkboxes in the first column of the resource table to select 1-n items and trigger the action later on
+- use an icon in the last column of the resource table to perform the Item Action for one item
+- use the corresponding icon in the show view to perform the Item Action for the corresponding item
+
+If you use the first method, you must trigger the item action using the button above the resource action. If you use the second or third method, the item action is triggered immediately.
+
+Backpex ships with a few built-in item actions, such as `delete`, `show`, and `edit`.
+
+## Configuration
+
+To add an item action to a resource, you need to implement the [`item_actions/1`](Backpex.LiveResource.html#c:item_actions/1) callback in your resource configuration module. The function should return a list of maps, where each map represents an item action. It takes the default item actions as an argument. This way you can add your custom item actions to the default ones or even replace them.
+
+Let's say we want to add a `show` item action to navigate to the show view of a user and replace all other default item actions.
+
+First, we need to add the item action to our resource configuration module.
+
+```elixir
+# in your resource configuration file
+@impl Backpex.LiveResource
+def item_actions([_show, _edit, _delete]) do
+    [
+        show: %{
+            module: DemoWeb.ItemAction.Show
+        }
+    ]
+end
+```
+
+In the above example, we only return the `show` item action. This way we replace the default `show`, `edit`, and `delete` item actions with our custom `show` item action.
+
+## Implementing an Item Action
+
+An item action is a module that uses the `Backpex.ItemAction` module. To get started, you can use the `BackpexWeb` module and provide the `:item_action` option. This will import the necessary functions and macros to define an item action.
+
+In the following example, we define an item action to navigate to the show view of a user.
+
+```elixir
+defmodule DemoWeb.ItemAction.Show do
+  use BackpexWeb, :item_action
+
+  @impl Backpex.ItemAction
+  def icon(assigns) do
+    ~H"""
+    <Heroicons.eye class="h-5 w-5 cursor-pointer transition duration-75 hover:scale-110 hover:text-green-600" />
+    """
+  end
+
+  @impl Backpex.ItemAction
+  def label(_assigns), do: Backpex.translate("Show")
+
+  @impl Backpex.ItemAction
+  def handle(socket, [item | _items], _change) do
+    path = Router.get_path(socket, socket.assigns.live_resource, socket.assigns.params, :show, item)
+    {:noreply, Phoenix.LiveView.push_patch(socket, to: path)}
+  end
+end
+```
+
+Like in resource actions the `handle/3` function is called when the item action is triggered. The handle function receives the socket, the items that should be affected by the action, and the parameters that were submitted by the user.
+
+In the above example, we define an item action to navigate to the show view of a user. The `handle/3` function is used to navigate to the show view of the user. The `Router.get_path/5` function is used to generate the path to the show view of the user.
+
+See `Backpex.ItemAction` for a list of all available callbacks.
+
+## Placement of Item Actions
+
+Item actions can be placed in the resource table or in the show view. You can specify the placement of the item action by using the `only` key.
+
+The only key must provide a list and accepts the following options
+
+* `:row` - display an icon for each element in the table that can trigger the Item Action for the corresponding element
+* `:index` - display a button at the top of the resource table, which triggers the Item Action for selected items
+* `:show` - display an icon in the show view that triggers the Item Action for the corresponding item
+
+The following example shows how to place the `show` item action on the index table rows only.
+
+```elixir
+# in your resource configuration file
+@impl Backpex.LiveResource
+def item_actions([_show, _edit, _delete]) do
+    [
+        show: %{
+            module: DemoWeb.ItemAction.Show,
+            only: [:row]
+        }
+    ]
+end
+```
+
+## Advanced Item Action
+
+In the following example, we define an item action to soft delete users. The item action will also asked the user for a reason before the user can be deleted.
+
+First, wee need to add the item action to our resource configuration module.
+
+```elixir
+# in your resource configuration file
+
+@impl Backpex.LiveResource
+def item_actions([show, edit, _delete]) do
+    Enum.concat([show, edit],
+        soft_delete: %{module: DemoWeb.ItemAction.SoftDelete}
+    )
+end
+```
+
+In the above example, we add the `soft_delete` item action to the default item actions. We do not add the default `delete` item action to the list of item actions. This way we replace the default `delete` item action with our custom `soft_delete` item action.
+
+Next, we need to implement the item action module.
+
+```elixir
+defmodule DemoWeb.ItemAction.SoftDelete do
+    use BackpexWeb, :item_action
+
+    alias Backpex.Resource
+
+    @impl Backpex.ItemAction
+    def icon(assigns) do
+    ~H"""
+    <Heroicons.eye class="h-5 w-5 cursor-pointer transition duration-75 hover:scale-110 hover:text-green-600" />
+    """
+    end
+
+    @impl Backpex.ItemAction
+    def fields do
+        [
+            reason: %{
+                module: Backpex.Fields.Textarea,
+                label: "Reason",
+                type: :string
+            }
+        ]       
+    end
+
+    @required_fields ~w[reason]a
+
+    @impl Backpex.ItemAction
+    def changeset(change, attrs) do
+        change
+        |> cast(attrs, @required_fields)
+        |> validate_required(@required_fields)
+    end
+
+    @impl Backpex.ItemAction
+    def label(_assigns), do: Backpex.translate("Delete")
+
+    @impl Backpex.ItemAction
+    def confirm_label(_assigns), do: Backpex.translate("Delete")
+
+    @impl Backpex.ItemAction
+    def cancel_label(_assigns), do: Backpex.translate("Cancel")
+
+    @impl Backpex.ItemAction
+    def handle(socket, items, params) do
+        datetime = DateTime.truncate(DateTime.utc_now(), :second)
+
+        socket =
+            try do
+                {:ok, _items} =
+                Backpex.Resource.update_all(
+                    socket.assigns,
+                    items,
+                    [set: [deleted_at: datetime, reason: Map.get(params, "reason")]],
+                    "deleted"
+                )
+
+                socket
+                |> clear_flash()
+                |> put_flash(:info, "Item(s) successfully deleted.")
+            rescue
+                socket
+                |> clear_flash()
+                |> put_flash(:error, error)
+            end
+
+        {:noreply, socket}
+    end
+end
+```
+
+In the above example, we define an item action to soft delete users. The item action will also ask the user for a reason before the user can be deleted. The user needs to fill out the reason field before the item action can be performed. The reason field is defined in the `fields/0` function. The `changeset/2` function is used to validate the user input.
+
+The `handle/3` function is called when the item action is triggered. The handle function receives the socket, the items that should be affected by the action, and the parameters that were submitted by the user.
+
+By default an item action is triggered immediately when the user clicks on the corresponding icon in the resource table or in the show view, but an item actions also supports a confirmation dialog. To enable the confirmation dialog you need to implement the `confirm_label/1` function and return a string that will be displayed in the confirmation dialog. The confirmation dialog will be displayed when the user clicks on the icon in the resource table.