Shape your admin panels.ARDOR tempers the surface.
Admin consoles on react-admin, with the same dependency injection and filter language as IGNIS, plus sign-in and i18n.
$bun x @venizia/vulcan init --preset ardor --project demo --frontend-dir apps --app admin $cd demo && make dev
import { type BaseArdorApplication as TArdorApplication, configuration, CoreBindings, DefaultRestDataProvider, inject, provide, RuntimeConfig, } from '@venizia/ardor'; @configuration() export class AdminConfiguration { constructor( @inject({ key: CoreBindings.APPLICATION_INSTANCE }) private readonly application: TArdorApplication, ) {} @provide({ key: CoreBindings.REST_DATA_PROVIDER_OPTIONS }) restDataProviderOptions() { const url = RuntimeConfig.get({ key: 'VITE_API_URL', buildTimeEnv: import.meta.env, defaultValue: '/api', }); return { url, noAuthPathRegex: /./ }; } @provide({ key: CoreBindings.DEFAULT_REST_DATA_PROVIDER }) restDataProvider() { return this.application.instantiate(DefaultRestDataProvider).value(this.application); } }
import 'reflect-metadata'; import { configureStore } from '@reduxjs/toolkit'; import { ArdorApplication } from '@venizia/ardor'; import { createRoot } from 'react-dom/client'; import { Application } from '#src/application'; import { Home } from '#src/pages/home'; const application = new Application(); const store = configureStore({ reducer: { app: (state: { ready: boolean } = { ready: true }) => state }, }); await application.start(); createRoot(document.getElementById('root')!).render( <ArdorApplication container={application} reduxStore={store} suspense={<p>Loading</p>} dashboard={Home} />, );
src/configurations/admin.configuration.ts: The configuration the preset writes into a new admin, with the i18n bindings left out. Configuration
src/main.tsx: The mount point of the same preset, without its stylesheet import. Application
The commands of Create a project.
Counted from the repository (0.4.8-8): the packages and examples folders, every *.test.ts and *.test.tsx file in them, and the imports of Node builtins in the kernel, react and admin sources. A test fails when a number drifts.
Each part has a page that says what it does and what it does not.
Dependency injection in the browser
The application extends the IGNIS container. Bindings, @inject and useInjectable by key or class.
ReaddataREST data provider
Maps the react-admin calls to the IGNIS filter vocabulary and takes the total from the Content-Range header.
ReadauthAuth with recovery
A 401 triggers one shared token refresh and one retry per request. No-auth paths are explicit.
Readi18ni18n with typed keys
English and Vietnamese bundles, and useTranslate keys typed through module augmentation.
ReadrepositoryHTTP repository
HttpDataSource and HttpRepository from IGNIS, able to share the data provider's token and refresh.
ReadhooksHooks and Redux factories
useDebounce, useAutosave, useConfirm, useCopyToClipboard and typed selector and dispatch factories.
ReadfeaturesFeatures and runtime config
Features.define packages configurations, resources, routes and messages. RuntimeConfig.get lets one image serve every environment.
ReadmoreEverything else
Every public API has a reference page: application, binding keys, network, permission and types.
ReadHonest about the fit.
Use ARDOR when
- An enterprise admin panel that needs a clean IoC architecture
- An application that pairs react-admin with an IGNIS backend
- A team that wants DI in React through useInjectable
- A typed REST data provider, token refresh and i18n
Look elsewhere when
- A lightweight landing page with no admin state
- An application that is not built on React
- An app with no service orchestration or DI requirement
- A project that needs a 1.0 API: ARDOR is 0.x and a patch release can carry a breaking change
ARDOR is 0.x: a patch release can carry a breaking change. Pin exact versions and read the changelog before upgrading. It ships no socket client: use the IGNIS one.