create-middag-ui

Bootstrap a MIDDAG React UI layer in your Moodle or WordPress plugin.

Usage

# Community (no auth needed)
npx create-middag-ui

# PRO (source maps, mock SPA, full exports)
npx @middag-io/create-middag-ui

Or specify a custom directory:

npx create-middag-ui mydir

Non-interactive mode

Skip all prompts with --yes (uses defaults: ui/, public registry):

npx create-middag-ui --yes

# PRO path (GitHub Packages) without prompts:
npx create-middag-ui --yes --github

Host platform and Moodle component are still auto-detected. Only interactive prompts are skipped.

Run from your plugin project root. The wizard:

1. Auto-detects your host — finds version.php (Moodle) or wp-config.php (WordPress)
2. Asks for target directory — default ui/, or pass as CLI argument
3. Configures registry — GitHub Packages (with source maps) or npm public (no auth needed)
4. Scaffolds everything — config files, demo components, mock environment
5. Installs dependencies — runs npm install automatically with progress feedback

Then start developing:

cd ui
npm run dev:mock

Your mock opens at http://localhost:5174 (Moodle), 5175 (WordPress), or 5176 (Custom).

What it creates

ui/
  package.json              # Dependencies and scripts
  tsconfig.json             # TypeScript config with path aliases
  vite.mock.config.ts       # Vite dev server config for mock build
  src/
    blocks/
      hello-block.tsx       # Custom block example (rename me!)
    components/
      greeting.tsx          # Standalone component example (rename me!)
    contracts.ts            # PageContract type re-export
  mock/
    index.html              # HTML entry point
    main.tsx                # React entry with registerDefaults() + ContractPage
    hello-contract.ts       # Example PageContract (metric card + data table)
    tailwind.css            # Tailwind CSS import

Community vs PRO

@middag-io/react is available in two editions:

Community (default, no auth)

Choose "No" when asked about GitHub access. Dependencies install from the public npm registry with zero configuration.

PRO (source maps, mock SPA, full exports)

Choose "Yes" when asked about GitHub access. The wizard will:

1. Ask for your GitHub Personal Access Token
2. Validate the token against GitHub Packages
3. Save the registry + token to ~/.npmrc (global, not project-local)

Create a token at github.com/settings/tokens with the read:packages scope.

After setup

Once @middag-io/react is installed, more commands become available from inside your UI directory:

npx @middag-io/react doctor        # Validate project setup
npx @middag-io/react dev            # Start mock dev server
npx @middag-io/react add-block <t>  # Scaffold a new block type
npx @middag-io/react upgrade        # Check for updates

Documentation

• Live Demo — 24 screens showing all block types
• Full Documentation — Getting started, host guides, API reference
• GitHub — Source code and issues

License

MIT