@comparaonline/admin

Comparaonline | Admin generator

A simple and configurable base template for generating admins without the overload of unnecessary libraries.

Installation

You can install it using:

npm

npm install @comparaonline/admin

yarn

yarn add @comparaonline/admin

Usage

import React from 'react';
import ReactDOM from 'react-dom/client';
import '@comparaonline/admin/index.css';
import { Admin } from '@comparaonline/admin';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Admin />
  </React.StrictMode>
);

This usage will render the welcome screen. In order to start rendering routes, you'll need to set routes prop:

import React from 'react';
import ReactDOM from 'react-dom/client';
import '@comparaonline/admin/index.css';
import { Admin } from '@comparaonline/admin';
import { routes } from './example';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Admin routes={routes} />
  </React.StrictMode>
);

Those are a list of objects containing the following fields:

export type Route = {
  /**
   * Route element.
   * @see {@link https://v5.reactrouter.com/web/api/Route|react-router-dom Route}
   */
  route: ReactElement;
  /**
   * Label to be displayed on
   * aside menu.
   */
  menuLabel?: string;
  /**
   * Icon to be displayed on
   * aside menu, next to 'menuLabel'.
   */
  menuIcon?: ReactElement;
  /**
   * Skip aside menu entry.
   */
  menuSkip?: boolean;
  /**
   * Array of roles that
   * can access content.
   */
  privileges?: string[];
  /**
   * Array of companies that
   * can access content.
   */
  companiesPrivileges?: string[];
  /**
   * Main title to be displayed on
   * the page.
   */
  title?: string;
  /**
   * Subtitle to be displayed on
   * the page.
   */
  subtitle?: string;
  /**
   * Has page wrapper structure
   * (title, subtitle).
   */
  hasPageWrapper?: boolean;
  /**
   * Has width wrapper structure.
   */
  hasWrapper?: boolean;
  hasLayout?: boolean;
  key?: number;
};

By default, authentication is not enabled, to start using it, you'll need to set an authProvider:

import React from 'react';
import ReactDOM from 'react-dom/client';
import '@comparaonline/admin/index.css';
import { Admin } from '@comparaonline/admin';
import { routes, authProvider } from './example';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Admin routes={routes} authProvider={authProvider} />
  </React.StrictMode>
);

These provider has this structure:

export type AuthProvider = {
  login: (
    params?: Record<string, unknown> | unknown
  ) => Promise<{ redirectTo?: string | boolean } | void>;
  logout: (params?: Record<string, unknown> | unknown) => Promise<void | boolean | string>;
  checkAuth: (params?: Record<string, unknown> | unknown) => Promise<void>;
  googleLogin?: (
    params?: Record<string, unknown> | unknown
  ) => Promise<{ redirectTo?: string | boolean } | void>;
  restorePassword?: (params?: Record<string, unknown> | unknown) => Promise<{
    status: STATUS.SUCCESS | STATUS.ERROR;
    message: string;
    username: string;
  }>;
  editUser?: () => void;
};

Contributing

Read the contributing guide to learn about our development process and how to build, test and commit your changes to this repository.

@comparaonline/admin