AdonisAtlas

Admin panel package for AdonisJS v7, inspired by Laravel Nova and Filament.

Features

• Resource-based CRUD - Define resources that map to your Lucid models
• 10 Field Types - Text, Email, Password, Number, Boolean, Select, Date, DateTime, Time, Textarea
• Nova-like Fluent API - Clean, chainable field configuration
• Auto-routing - Resource routes automatically registered
• Edge Templates - Server-side rendering with Tailwind CSS and Alpine.js
• Auto-discovery - Resources auto-detected from app/atlas/resources/
• CLI Command - Generate resources with make:atlas-resource
• 90%+ Test Coverage - 150 tests passing

Installation

npm install adonisjs-atlas

Quick Start

1. Configure Provider

Add the provider to your app.ts:

import { defineConfig } from '@adonisjs/core'
import atlas from 'adonisjs-atlas/providers/atlas_provider'

export const appConfig = defineConfig({
  providers: [
    () => import('@adonisjs/core/providers/app_provider'),
    // ... other providers
    atlas(),
  ],
})

2. Create a Resource

Generate a resource using the CLI:

node ace make:atlas-resource users

This creates app/atlas/resources/users_resource.ts:

import { Resource } from 'adonisjs-atlas'

export class UsersResource extends Resource {
  static model = () => import('#models/user')

  static slug = 'users'

  static label = 'Users'

  static singularLabel = 'User'
}

3. Define Fields

Add fields to your resource:

import { Resource, TextField, EmailField, NumberField, BooleanField } from 'adonisjs-atlas'

export class UsersResource extends Resource {
  static model = () => import('#models/user')

  static slug = 'users'

  static label = 'Users'

  static singularLabel = 'User'

  static fields() {
    return [
      new NumberField('id').readonly(),
      new TextField('name').required().min(3).max(100),
      new EmailField('email').required().unique(),
      new BooleanField('isActive').default(true),
    ]
  }
}

4. Access the Admin Panel

Routes are automatically registered. Visit:

• http://localhost:3333/atlas - Dashboard
• http://localhost:3333/atlas/users - User list
• http://localhost:3333/atlas/users/create - Create user
• http://localhost:3333/atlas/users/:id - View user
• http://localhost:3333/atlas/users/:id/edit - Edit user

Field Types

| Field | Class | Usage | |-------|-------|-------| | Text | TextField | Basic text input | | Email | EmailField | Email validation | | Password | PasswordField | Hidden password input | | Number | NumberField | Numeric input | | Boolean | BooleanField | Checkbox/toggle | | Select | SelectField | Dropdown selection | | Date | DateField | Date picker | | DateTime | DateTimeField | Date & time picker | | Time | TimeField | Time picker | | Textarea | TextareaField | Multi-line text |

Field Options

new TextField('name')
  .required()
  .unique()
  .readonly()
  .default('value')
  .min(3)
  .max(100)
  .placeholder('Enter name')
  .helpText('Some help text')
  .searchable()
  .filterable()
  .sortable(false)
  .rules({ minLength: 3 })

Field Visibility

new TextField('secret')
  .hideOnIndex()     // Hide from table listing
  .hideOnDetail()    // Hide from detail view
  .hideOnForms()     // Hide from create/edit forms
  .hideOnCreate()    // Hide from create form only
  .hideOnUpdate()    // Hide from edit form only

Routes (Auto-Registered)

Routes are automatically registered when you create a resource:

| Method | URL | Action | |--------|-----|--------| | GET | /atlas/{resource} | List records | | GET | /atlas/{resource}/create | Create form | | POST | /atlas/{resource} | Store new record | | GET | /atlas/{resource}/:id | View record | | GET | /atlas/{resource}/:id/edit | Edit form | | PUT/PATCH | /atlas/{resource}/:id | Update record | | DELETE | /atlas/{resource}/:id | Delete record | | POST | /atlas/{resource}/bulk-destroy | Bulk delete |

Configuration

Create config/atlas.ts to customize routes:

// config/atlas.ts
export default {
  prefix: 'admin',        // Change /atlas to /admin
  middleware: [
    () => import('#middleware/auth_middleware'),   // Lazy import (recommended)
  ],
}

You can also pass inline middleware functions or pre-instantiated middleware objects:

export default {
  middleware: [
    () => import('#middleware/auth_middleware'),       // Lazy import
    (ctx, next) => { console.log('inline'); return next() },  // Inline function
  ],
}

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | prefix | string | 'atlas' | URL prefix for all routes | | middleware | MiddlewareEntry[] | [] | Middleware to apply to all routes |

Customizing Templates

Copy the default templates to customize:

cp -r node_modules/adonisjs-atlas/templates/atlas ./resources/atlas

Then modify as needed.

Alpine.js Directives

Atlas includes Alpine.js directives for interactivity:

Modal

<div x-data="{ open: false }">
  <button @click="open = true">Open Modal</button>
  <div x-show="open" x-modal>
    <div class="modal-content">
      <button @click="open = false">Close</button>
    </div>
  </div>
</div>

Sortable Tables

<table x-sortable>
  <thead>
    <tr>
      <th x-sort="name">Name</th>
      <th x-sort="email">Email</th>
    </tr>
  </thead>
  <tbody>
    <!-- rows -->
  </tbody>
</table>

Package Structure

All classes are exported from the main package:

import { 
  Resource, 
  TextField, 
  EmailField, 
  PasswordField,
  NumberField,
  BooleanField,
  SelectField,
  TextareaField,
  DateField,
  DateTimeField,
  TimeField,
  Action, 
  Filter,
  defineConfig
} from 'adonisjs-atlas'

Testing

Atlas includes 150 tests with 90%+ coverage:

# Run tests
npm test

# Run with coverage
npm test -- --coverage

Requirements

• AdonisJS v7+
• Node.js 20+

License

MIT