Your own project component

---noindex: true---# Useful project componentsThese examples live in the site's own `smart/` folder and load without changes to the Docara engine. The page opens from the [“Your own project component”](/en/examples/extensions/) example and is not shown in the menu.## Install commandChoose the operating system, installation method, package, version and options. The component only builds and copies the command. It downloads and runs nothing.:::project.install-builder{"title":"Build the install command","package":"simai/docara","version":"^3.0"}:::## Product configuratorThe list changes the base plan, the checkboxes add options and the total is recalculated in the browser. The demo sends no data and creates no order.:::project.product-configurator{"title":"Configure the sample product","base_price":2500,"team_price":4500,"business_price":8000,"currency":"₽"}:::

{  "schemaVersion": "1.0",  "kind": "smart",  "code": "project.install-builder",  "title": "Install command builder",  "description": "Builds a copyable installation command locally without executing it.",  "category": "developer-tools",  "render": {    "mode": "server-first",    "strategy": "server-first-hydratable",    "template": "default",    "hydration": "required",    "domStrategy": "light-dom-adopt",    "updateStrategy": "patch",    "initialHtml": "complete",    "frontendOwnership": "behavior"  },  "props": {    "title": {"type": "string", "required": true},    "package": {"type": "string", "required": true},    "version": {"type": "string", "required": true},    "copy_label": {"type": "string", "required": false, "default": "Copy"},    "status_ready": {"type": "string", "required": false, "default": "The page only builds the command and never runs it."},    "status_copied": {"type": "string", "required": false, "default": "Command copied."},    "status_copy_failed": {"type": "string", "required": false, "default": "Select the command and copy it manually."},    "command_unavailable": {"type": "string", "required": false, "default": "Command unavailable: fix the parameters."},    "error_selection": {"type": "string", "required": false, "default": "Choose a supported operating system and installation method."},    "error_input": {"type": "string", "required": false, "default": "Check package and version: only safe Composer values are allowed."}  },  "slots": {    "controls": {"accepts": ["ui.dropdown", "ui.input", "ui.checkbox"], "required": true, "multiple": true}  },  "assets": {    "css": ["assets/install-builder.css"],    "js": ["assets/install-builder.js"],    "depends": ["simai.framework.core.css"]  },  "ai": {    "tags": ["install", "composer", "copy"],    "summary": "Choose a safe install mode and copy the generated Composer command."  },  "meta": {"ownerPackage": "project/project", "version": "1.0.0"},  "extensions": {"docara": {"aliases": {"project.install_builder": "Portable ABI identifiers use hyphens; the underscore name remains an authoring alias."}}}}

{
  "schemaVersion": "1.0",
  "kind": "smart.view",
  "smart": "project.install-builder",
  "code": "default",
  "template": "default",
  "props": {},
  "children": {
    "operating-system": {
      "smart": "ui.dropdown",
      "slot": "controls",
      "preset": "default",
      "props": {"label": "Operating system", "name": "operating-system", "placeholder": "Choose an OS", "ariaLabel": "Operating system", "search": false},
      "children": {
        "macos": {"smart": "ui.list-item", "slot": "options", "preset": "default", "props": {"type": "text", "text": "macOS", "selected": true}},
        "linux": {"smart": "ui.list-item", "slot": "options", "preset": "default", "props": {"type": "text", "text": "Linux"}},
        "windows": {"smart": "ui.list-item", "slot": "options", "preset": "default", "props": {"type": "text", "text": "Windows PowerShell"}}
      }
    },
    "method": {
      "smart": "ui.dropdown",
      "slot": "controls",
      "preset": "default",
      "props": {"label": "How to run Composer", "name": "install-method", "placeholder": "Choose a method", "ariaLabel": "How to run Composer", "search": false},
      "children": {
        "composer": {"smart": "ui.list-item", "slot": "options", "preset": "default", "props": {"type": "text", "text": "Composer", "selected": true}},
        "phar": {"smart": "ui.list-item", "slot": "options", "preset": "default", "props": {"type": "text", "text": "Composer PHAR"}}
      }
    },
    "package": {
      "smart": "ui.input",
      "slot": "controls",
      "preset": "default",
      "props": {"label": "Composer package", "name": "package", "value": "simai/docara", "hint": "Format: vendor/package"}
    },
    "version": {
      "smart": "ui.input",
      "slot": "controls",
      "preset": "default",
      "props": {"label": "Version", "name": "version", "value": "^3.0", "hint": "For example ^3.0"}
    },
    "development": {
      "smart": "ui.checkbox",
      "slot": "controls",
      "preset": "default",
      "props": {"label": "Add as a development dependency (--dev)", "name": "development", "value": "--dev"}
    },
    "prefer-dist": {
      "smart": "ui.checkbox",
      "slot": "controls",
      "preset": "default",
      "props": {"label": "Prefer a prebuilt archive (--prefer-dist)", "name": "prefer-dist", "value": "--prefer-dist"}
    }
  }
}

<?php

declare(strict_types=1);

// Canonical artifact ID: project.install-builder.

$escape = static fn (mixed $value): string => htmlspecialchars((string) $value, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
$text = static fn (string $name, string $fallback): string => $escape(is_string($props[$name] ?? null) ? $props[$name] : $fallback);
$title = $escape($props['title'] ?? 'Install Docara');
$package = $escape($props['package'] ?? 'simai/docara');
$version = $escape($props['version'] ?? '^3.0');
$command = "# macOS\ncomposer require '" . $package . ':' . $version . "'";
$ready = $text('status_ready', 'The page only builds the command and never runs it.');
?>
<section class="project-install-builder flex flex-col gap-2 border border-outline-variant radius-surface p-2" data-project-install-builder data-default-os="macOS" data-default-method="Composer" data-default-package="<?= $package ?>" data-default-version="<?= $version ?>" data-text-ready="<?= $ready ?>" data-text-copied="<?= $text('status_copied', 'Command copied.') ?>" data-text-copy-failed="<?= $text('status_copy_failed', 'Select the command and copy it manually.') ?>" data-text-unavailable="<?= $text('command_unavailable', 'Command unavailable: fix the parameters.') ?>" data-text-error-selection="<?= $text('error_selection', 'Choose a supported operating system and installation method.') ?>" data-text-error-input="<?= $text('error_input', 'Check package and version: only safe Composer values are allowed.') ?>" data-state="valid">
    <h2 class="m-0 title-2"><?= $title ?></h2>
    <div class="grid gap-1" data-install-framework-controls><?= $childrenHtml ?></div>
    <div class="flex items-cross-center gap-1"><code data-install-command class="flex-1 min-w-0 overflow-x-auto whitespace-pre-wrap p-1 bg-surface-container radius-1"><?= $escape($command) ?></code><button type="button" data-install-copy class="sf-button sf-button--outline sf-button--size-1 radius-default"><span class="sf-button-text-container"><?= $text('copy_label', 'Copy') ?></span></button></div>
    <p class="m-0 color-on-surface-variant text-small" data-install-status aria-live="polite"><?= $ready ?></p>
</section>