npm - @modern-admin/web - Versions diffs - 0.1.0 - Mend

@modern-admin/web 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/lib/app.d.ts +13 -0
package/dist/lib/index.d.ts +8 -0
package/dist/lib/index.js +54 -0
package/dist/lib/index.js.map +1 -0
package/dist/lib/mount.d.ts +17 -0
package/dist/lib/runtime-config.d.ts +74 -0
package/dist/standalone/assets/index-Bq7jl8a_.css +1 -0
package/dist/standalone/assets/index-Bz-CBvit.js +546 -0
package/dist/standalone/assets/index-Bz-CBvit.js.map +1 -0
package/dist/standalone/favicon.svg +5 -0
package/dist/standalone/index.html +21 -0
package/index.html +20 -0
package/package.json +67 -0
package/src/app.tsx +64 -0
package/src/index.ts +13 -0
package/src/mount.tsx +47 -0
package/src/runtime-config.ts +92 -0
package/src/standalone.tsx +18 -0
package/tsconfig.json +11 -0
package/vite.config.ts +108 -0

package/dist/standalone/favicon.svg ADDED Viewed

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <ellipse cx="12" cy="5" rx="9" ry="3"/>
+  <path d="M3 5V19A9 3 0 0 0 21 19V5"/>
+  <path d="M3 12A9 3 0 0 0 21 12"/>
+</svg>

package/dist/standalone/index.html ADDED Viewed

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+    <title>Modern Admin</title>
+    <!--
+      The host server (e.g. @modern-admin/nest StaticController) replaces
+      this marker with `<script>window.__MODERN_ADMIN__ = {...}</script>`
+      before sending the response. When the file is served raw (dev mode,
+      smoke tests), the standalone entry falls back to same-origin defaults.
+    -->
+    <!--MODERN_ADMIN_CONFIG-->
+    <script type="module" crossorigin src="./assets/index-Bz-CBvit.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-Bq7jl8a_.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/index.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>Modern Admin</title>
+    <!--
+      The host server (e.g. @modern-admin/nest StaticController) replaces
+      this marker with `<script>window.__MODERN_ADMIN__ = {...}</script>`
+      before sending the response. When the file is served raw (dev mode,
+      smoke tests), the standalone entry falls back to same-origin defaults.
+    -->
+    <!--MODERN_ADMIN_CONFIG-->
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/standalone.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,67 @@
+{
+  "name": "@modern-admin/web",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Pre-built React admin SPA. Mount it into a host page or let @modern-admin/nest serve the standalone bundle.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/modern-admin/modern-admin.git",
+    "directory": "packages/web"
+  },
+  "files": [
+    "dist",
+    "src",
+    "index.html",
+    "vite.config.ts",
+    "tsconfig.json"
+  ],
+  "main": "./dist/lib/index.js",
+  "types": "./dist/lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/lib/index.d.ts",
+      "default": "./dist/lib/index.js"
+    },
+    "./standalone/*": "./dist/standalone/*",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public",
+    "main": "./dist/lib/index.js",
+    "types": "./dist/lib/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/lib/index.d.ts",
+        "default": "./dist/lib/index.js"
+      },
+      "./standalone/*": "./dist/standalone/*",
+      "./package.json": "./package.json"
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  },
+  "dependencies": {
+    "@modern-admin/core": "0.1.0",
+    "@modern-admin/i18n": "0.1.0",
+    "@modern-admin/react": "0.1.0",
+    "@modern-admin/ui": "0.1.0",
+    "@tanstack/react-query": "^5.100.9"
+  },
+  "devDependencies": {
+    "@modern-admin/tsconfig": "0.1.0",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tailwindcss": "^4.2.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.10",
+    "vite-plugin-dts": "^5.0.1"
+  }
+}

package/src/app.tsx ADDED Viewed

@@ -0,0 +1,64 @@
+/**
+ * Root <App> for the admin SPA. Wraps the AdminApp shell with i18n and the
+ * ModernAdmin provider, wiring everything from a single runtime config.
+ *
+ * Used by both the standalone bundle (window.__MODERN_ADMIN__) and the
+ * library `mount()` entry point — hosts compose it the same way.
+ */
+import { type ReactElement, useMemo } from 'react'
+import {
+  AdminApp,
+  type ComponentLoader,
+  I18nProvider,
+  ModernAdminProvider,
+} from '@modern-admin/react'
+import { builtinLocales } from '@modern-admin/i18n'
+import type { ModernAdminRuntimeConfig } from './runtime-config.js'
+export interface AppProps {
+  config: ModernAdminRuntimeConfig
+  /**
+   * Optional custom property-type components. The standalone bundle leaves
+   * this unset; the library `mount()` lets callers pass demo / project-
+   * specific components.
+   */
+  components?: ComponentLoader
+}
+export function App({ config, components }: AppProps): ReactElement {
+  // Filter the built-in 9-locale bundle by the host's whitelist. Empty /
+  // omitted → expose everything; the language switcher in the header
+  // collapses itself when only one locale survives the filter.
+  const enabledLocales = useMemo(() => {
+    if (!config.locales || config.locales.length === 0) return builtinLocales
+    const codes = new Set(config.locales)
+    const filtered = builtinLocales.filter((l) => codes.has(l.code))
+    return filtered.length > 0 ? filtered : builtinLocales
+  }, [config.locales])
+  return (
+    <I18nProvider
+      locales={enabledLocales}
+      defaultLocale={config.defaultLocale}
+      fallbackLocale={config.fallbackLocale}
+      metadataTranslations={config.metadataTranslations}
+    >
+      <ModernAdminProvider
+        components={components}
+        clientOptions={{
+          baseUrl: config.apiUrl,
+          credentials: config.credentials ?? 'include',
+          headers: config.headers,
+          persistDemoSession: config.persistDemoSession,
+          authBasePath: config.authBasePath,
+        }}
+      >
+        <AdminApp
+          loginHint={config.loginHint}
+          basePath={config.basePath}
+          showSidebarResourceIds={config.showSidebarResourceIds}
+        />
+      </ModernAdminProvider>
+    </I18nProvider>
+  )
+}

package/src/index.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/**
+ * @modern-admin/web — prebuilt admin SPA, with both a library API
+ * (`mount()` + React `<App>`) and a standalone bundle for backends to
+ * serve as static assets.
+ */
+export { App, type AppProps } from './app.js'
+export { mount, type MountOptions, type MountedAdmin } from './mount.js'
+export {
+  readWindowConfig,
+  type ModernAdminBrand,
+  type ModernAdminRuntimeConfig,
+} from './runtime-config.js'

package/src/mount.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+/**
+ * Imperative mounting API for embedding the admin SPA inside another React
+ * tree or vanilla HTML page. Consumers call once at startup:
+ *
+ *   import { mount } from '@modern-admin/web'
+ *   mount(document.getElementById('root')!, { apiUrl: 'https://api.example.com' })
+ *
+ * For the prebuilt standalone bundle, `src/standalone.tsx` calls this for
+ * you using `window.__MODERN_ADMIN__`.
+ */
+import { StrictMode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { type ComponentLoader } from '@modern-admin/react'
+import { initTheme } from '@modern-admin/ui'
+import '@modern-admin/ui/styles.css'
+import { App } from './app.js'
+import type { ModernAdminRuntimeConfig } from './runtime-config.js'
+export interface MountOptions {
+  config: ModernAdminRuntimeConfig
+  /** Optional ComponentLoader with custom property-type components. */
+  components?: ComponentLoader
+}
+export interface MountedAdmin {
+  /** Unmounts the admin SPA from its container. */
+  unmount(): void
+}
+/**
+ * Renders the admin SPA into `container`. Returns a handle with `unmount()`
+ * for hosts that need to tear it down dynamically (rare — most users mount
+ * once and never unmount).
+ */
+export function mount(container: Element, options: MountOptions): MountedAdmin {
+  initTheme()
+  const root: Root = createRoot(container)
+  root.render(
+    <StrictMode>
+      <App config={options.config} components={options.components} />
+    </StrictMode>,
+  )
+  return {
+    unmount: () => root.unmount(),
+  }
+}

package/src/runtime-config.ts ADDED Viewed

@@ -0,0 +1,92 @@
+/**
+ * Runtime configuration for the prebuilt admin SPA.
+ *
+ * The standalone bundle reads this from `window.__MODERN_ADMIN__`; the
+ * library `mount()` API takes it as an argument. Either way it is the
+ * single source of truth for "where is the API", "which translations to
+ * apply", and how the admin client should behave at runtime.
+ *
+ * No build-time env vars: one bundle serves any deployment.
+ */
+import type { MetadataTranslations } from '@modern-admin/react'
+export interface ModernAdminBrand {
+  /** Shown in the sidebar header and login screen. */
+  title?: string
+  /** Optional logo image URL. */
+  logoUrl?: string
+}
+export interface ModernAdminRuntimeConfig {
+  /**
+   * Absolute base URL of the admin API (the @modern-admin/nest backend).
+   * Leave undefined to use same-origin — recommended when the SPA is served
+   * by the same NestJS process that exposes the admin API.
+   */
+  apiUrl?: string
+  /** RequestCredentials forwarded to every fetch. Defaults to 'include'. */
+  credentials?: RequestCredentials
+  /** Extra headers attached to every request (e.g. CSRF, custom auth). */
+  headers?: Record<string, string>
+  /** Helper line shown on the login screen — e.g. demo credentials. */
+  loginHint?: string
+  /** Initial UI locale code. Falls back to the persisted choice / 'en'. */
+  defaultLocale?: string
+  /** Locale used when a translation is missing. Defaults to 'en'. */
+  fallbackLocale?: string
+  /**
+   * Whitelist of locale codes to expose in the header switcher (filters
+   * the built-in 9-locale bundle: `en`, `ru`, `de`, `es`, `fr`, `it`, `ja`,
+   * `pl`, `pt-BR`). Behaviour:
+   *   - omitted / empty array → all built-in locales available
+   *   - single code           → switcher hides, that locale is forced
+   *   - multiple codes        → switcher lists only those locales
+   */
+  locales?: string[]
+  /** Optional per-resource / per-property metadata translations. */
+  metadataTranslations?: MetadataTranslations
+  /** Branding overrides (title, logo). */
+  brand?: ModernAdminBrand
+  /** Persist the demo session credentials in localStorage. */
+  persistDemoSession?: boolean
+  /**
+   * Path under which the host mounts Better Auth's Node handler. Drives
+   * the sign-in / sign-out endpoints — defaults to `/admin/api/auth`,
+   * matching the canonical CLI scaffold (and `ModernAdminStaticUiModule`
+   * mounted at `/admin`). Override only when the host mounts Better Auth
+   * elsewhere; pass *without* a trailing slash.
+   */
+  authBasePath?: string
+  /**
+   * URL prefix where the SPA is mounted (e.g. `/admin`). Injected
+   * automatically by `ModernAdminStaticUiMiddleware` from its `path` option
+   * so you normally do not need to set this. The router uses it as its
+   * basepath so all internal navigation and deep-link refreshes stay under
+   * the correct prefix. Pass without a trailing slash.
+   */
+  basePath?: string
+  /**
+   * When true, the sidebar resource list shows the raw resource id next
+   * to the localized label (e.g. "Posts (posts)") whenever the label
+   * differs from the id. Defaults to `false` — keeping the sidebar tidy.
+   * The home page tile and selector dropdowns (chart builder, etc.)
+   * always show both regardless of this flag.
+   */
+  showSidebarResourceIds?: boolean
+}
+declare global {
+  interface Window {
+    __MODERN_ADMIN__?: ModernAdminRuntimeConfig
+  }
+}
+/**
+ * Reads runtime config from `window.__MODERN_ADMIN__`. Returns an empty
+ * object (same-origin defaults) when nothing is injected.
+ */
+export function readWindowConfig(): ModernAdminRuntimeConfig {
+  if (typeof window === 'undefined') return {}
+  return window.__MODERN_ADMIN__ ?? {}
+}

package/src/standalone.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+/**
+ * Entry point for the prebuilt standalone bundle. Picks up the runtime
+ * config from `window.__MODERN_ADMIN__` (injected by the host server,
+ * typically @modern-admin/nest's StaticController) and mounts into
+ * `#root`.
+ *
+ * No build-time configuration — one bundle works for any deployment.
+ */
+import { mount } from './mount.js'
+import { readWindowConfig } from './runtime-config.js'
+const container = document.getElementById('root')
+if (!container) {
+  throw new Error('[modern-admin] expected #root container in the host page')
+}
+mount(container, { config: readWindowConfig() })

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": false,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["bun", "vite/client"]
+  },
+  "include": ["src/**/*", "vite.config.ts"]
+}

package/vite.config.ts ADDED Viewed

@@ -0,0 +1,108 @@
+/**
+ * Two-mode build:
+ *
+ *   bun run build:lib         → dist/lib/   (ESM library — `mount()` API)
+ *   bun run build:standalone  → dist/standalone/ (Prebuilt SPA + index.html)
+ *
+ * `mode` is set by Vite from the `--mode` CLI flag. Other modes (dev,
+ * preview) get the standalone SPA config — that's what you serve from
+ * `bun run dev`.
+ */
+import { defineConfig, type UserConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import dts from 'vite-plugin-dts'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+// External deps for the library build — host apps provide their own copy
+// (deduped by the workspace / package manager). The standalone SPA bundle
+// inlines all of these so the served `<script>` is self-contained.
+const LIB_EXTERNALS = [
+  'react',
+  'react-dom',
+  'react-dom/client',
+  /^react\//,
+  /^react-dom\//,
+  /^@modern-admin\//,
+  /^@tanstack\//,
+  /^@radix-ui\//,
+  /^lucide-react/,
+  /^@hookform\//,
+  /^react-hook-form/,
+  'zod',
+  'class-variance-authority',
+  'clsx',
+  'tailwind-merge',
+  'cmdk',
+  'sonner',
+  'date-fns',
+  'react-day-picker',
+  /^@tiptap\//,
+  'tiptap-markdown',
+  'dompurify',
+  'marked',
+  'recharts',
+  'tw-animate-css',
+]
+const libConfig: UserConfig = {
+  plugins: [
+    react(),
+    tailwindcss(),
+    dts({
+      entryRoot: 'src',
+      outDirs: 'dist/lib',
+      include: ['src/**/*.ts', 'src/**/*.tsx'],
+      exclude: ['src/standalone.tsx'],
+    }),
+  ],
+  // Don't copy public/ (favicon.svg etc.) into the library output — those
+  // assets only make sense for the standalone HTML build.
+  publicDir: false,
+  build: {
+    outDir: 'dist/lib',
+    emptyOutDir: true,
+    sourcemap: true,
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      formats: ['es'],
+      fileName: () => 'index.js',
+    },
+    rollupOptions: {
+      external: LIB_EXTERNALS,
+    },
+  },
+}
+const standaloneConfig: UserConfig = {
+  plugins: [react(), tailwindcss()],
+  // Relative base so the same bundle can be mounted under any path
+  // (e.g. `/admin/`) — the server rewrites asset URLs in index.html.
+  base: './',
+  build: {
+    outDir: 'dist/standalone',
+    emptyOutDir: true,
+    sourcemap: true,
+    rollupOptions: {
+      input: path.resolve(__dirname, 'index.html'),
+    },
+  },
+}
+const devConfig: UserConfig = {
+  plugins: [react(), tailwindcss()],
+  server: {
+    port: Number(process.env.WEB_PORT ?? 3000),
+    host: true,
+  },
+}
+export default defineConfig(({ mode }) => {
+  if (mode === 'lib') return libConfig
+  if (mode === 'standalone') return standaloneConfig
+  return devConfig
+})