Micro Apps

import { AppShellProvider, type RegisteredApp } from '@akinon/app-shell';
 
const apps: RegisteredApp[] = [
  {
    id: 1,
    name: 'App 1',
    url: '...',
    path: '',
    slug: 'app-fullpage',
    type: 'full_page'
  },
  {
    id: 2,
    name: 'App 2',
    url: '...',
    path: '',
    slug: 'app-plugin',
    type: 'plugin'
  },
  {
    id: 3,
    name: 'App 3',
    url: '...', // Same as the "url" of the "App 4"
    slug: "app-multi-fullpage/first-app",
    subSlug: "/first-app",
    path: '',
    type: "full_page",
  },
  {
    id: 4,
    name: 'App 4',
    url: '...', // Same as the "url" of the "App 3"
    slug: "app-multi-fullpage/second-app",
    subSlug: "/second-app",
    path: '',
    type: "full_page",
  },
  {
    id: 5,
    name: 'App 5',
    url: "...", // Same as the "url" of the "App 6"
    slug: "app-multi-plugin/first-app",
    subSlug: "/first-app",
    path: '',
    type: "plugin",
  },
  {
    id: 6,
    name: 'App 6',
    url: "...", // Same as the "url" of the "App 5"
    slug: "app-multi-plugin/second-app",
    subSlug: "/second-app",
    path: '',
    type: "plugin",
  },
];
 
const App = () => {
  return (
    <AppShellProvider
      apps={apps}
      data={...}
      navigation={...}
      actions={...}
    >
      {/* Your application components go here */}
    </AppShellProvider>
  );
};

/**
 * Describes a registered application within the system,
  including its type, unique identifier, and URL.
 *
 * @typedef {Object} RegisteredApp
 * @property {number} id - The unique identifier of the application.
 * @property {string} name - Optional. The name of the application.
 * @property {string} url - The URL where the application is hosted.
 * @property {string} path - The path where the application is hosted.
 * @property {string} slug - A short, unique string used to identify the application.
 * @property {string} subSlug - Optional. A short, unique slug fragment used to identify each of multiple client applications.
 * @property {RegisteredAppType} type - The type of the application.
 */
type RegisteredApp = {
  id: number;
  name?: string;
  url: string;
  path: string;
  slug: string;
  subSlug?: string;
  type: RegisteredAppType;
};

/**
 * Represents the type of a registered application within the system.
 *
 * @typedef {('full_page' | 'plugin')} RegisteredAppType
 */
type RegisteredAppType = 'full_page' | 'plugin';