Merge pull request #89 from AlexKlimenkov/master

[update] add lovable guide and update install instructions for react …

Author: AlexKlimenkov

docs/integrations/ai-tools/agent-skills.md

@@ -20,6 +20,8 @@ Covers integration of `@dhtmlx/trial-react-gantt` and `@dhx/react-gantt` into Re
 
 The skill files are readable Markdown - you can review exactly what rules your assistant will follow in the [GitHub repository](https://github.com/DHTMLX/skills/tree/main/dhtmlx-react-gantt).
 
+For a worked example of these patterns applied end-to-end, see the [React Gantt Lovable Starter](https://github.com/DHTMLX/react-gantt-lovable-starter) - a multi-project planner generated in Lovable, with the full build recipe in its [`lovable/`](https://github.com/DHTMLX/react-gantt-lovable-starter/tree/main/lovable) folder.
+
 ## Installing
 
 ```bash

docs/integrations/ai-tools/index.md

@@ -12,7 +12,11 @@ This section covers AI-assisted development with DHTMLX Gantt and adding AI feat
 
 - [DHTMLX MCP Server](./mcp-server/) - connect an AI coding tool to up-to-date DHTMLX documentation and API reference.
 - [Agent Skills](./agent-skills/) - teach AI coding assistants (Claude Code, Codex, and others) the correct patterns for working with DHTMLX Gantt.
-- [Lovable AI](./lovable-ai/) - integrate DHTMLX [React Gantt](./../react/) into a Lovable-generated app using prompts, Knowledge Base, and MCP.
+- [Lovable AI](./lovable-ai/) - integrate DHTMLX [React Gantt](integrations/react.md) into a Lovable-generated app using prompts, Knowledge Base, and MCP. The companion [Lovable Starter Walkthrough](./lovable-starter-walkthrough/) shows how to reproduce a full Supabase-backed project planner.
+
+## AI-builder showcases
+
+- [React Gantt Lovable Starter](https://github.com/DHTMLX/react-gantt-lovable-starter) - multi-project planner with a Supabase backend, generated end-to-end in Lovable. Includes the prompt sequence used to build it. [Live demo](https://react-gantt-lovable-starter.lovable.app).
 
 ## AI features inside your app
 

docs/integrations/ai-tools/lovable-ai.md

@@ -24,6 +24,18 @@ These aren't mutually exclusive. Knowledge Base and MCP work well together - use
 
 The sections below walk through the full workflow: scaffold an app, add Gantt, then improve output quality with each method.
 
+## Featured starter: React Gantt + Supabase project planner
+
+If you want a complete, full-featured reference instead of building from scratch, the [React Gantt Lovable Starter](https://github.com/DHTMLX/react-gantt-lovable-starter) is a multi-project planner generated end-to-end in Lovable, with a Supabase backend, task and link CRUD, undo/redo, working calendar, resource workload, and a demo role model.
+
+- **Live demo**: [https://react-gantt-lovable-starter.lovable.app](https://react-gantt-lovable-starter.lovable.app)
+- **Source**: [github.com/DHTMLX/react-gantt-lovable-starter](https://github.com/DHTMLX/react-gantt-lovable-starter)
+- **Reproducible recipe**: the [`lovable/`](https://github.com/DHTMLX/react-gantt-lovable-starter/tree/main/lovable) folder contains the exact prompt sequence (11 steps), the Knowledge Base content used during the build, and a log of every manual fix applied to the generated output.
+
+For a guided overview of the recipe and how to reproduce it in your own workspace, see the [Lovable Starter Walkthrough](integrations/ai-tools/lovable-starter-walkthrough.md).
+
+If you only need to render a Gantt inside a generic admin app, continue with the steps below.
+
 ## Prerequisites
 
 - A Lovable account
@@ -142,3 +154,5 @@ Lovable resolves property names, data formats, and configuration patterns from t
 - [DHTMLX React Gantt overview](../../react/overview/) - component API and features
 - [Installation guide](../../react/installation/) - setting up the professional package
 - [DHTMLX MCP Server](../mcp-server/) - connecting MCP to other AI tools
+- [Lovable Starter Walkthrough](integrations/ai-tools/lovable-starter-walkthrough.md) - reproduce the full project planner reference app
+- [Installing React Gantt](../../react/installation/) - includes the trial-to-commercial package swap procedure

docs/integrations/ai-tools/lovable-starter-walkthrough.md

@@ -0,0 +1,76 @@
+---
+title: "React Gantt Lovable Starter Walkthrough"
+sidebar_label: "Lovable Starter Walkthrough"
+description: "Reproduce the DHTMLX React Gantt project planner in Lovable using a fixed sequence of prompts and a Supabase backend"
+---
+
+# React Gantt Lovable Starter Walkthrough
+
+This guide explains how to reproduce the [React Gantt Lovable Starter](https://github.com/DHTMLX/react-gantt-lovable-starter) - a multi-project planner with a Supabase backend - in your own Lovable workspace. The published repo and its [`lovable/`](https://github.com/DHTMLX/react-gantt-lovable-starter/tree/main/lovable) folder are the source of truth; this page is the entry point that explains how the pieces fit together.
+
+For a generic Lovable + Gantt walkthrough that doesn't involve Supabase, see the companion guide: [Lovable AI](integrations/ai-tools/lovable-ai.md).
+
+## What you get at the end
+
+A working app with:
+
+- a routed shell (Dashboard, Projects, Reports, Workload)
+- per-project Gantt workspaces with task and link CRUD
+- persistent task ordering with drag-and-drop reorder
+- undo/redo and zoom controls
+- working calendar with weekend highlighting
+- resource panel with workload badges
+- a demo-only role model (viewer / editor / owner)
+- a Supabase schema, demo policies, and seed data
+
+The starter targets the standard Lovable stack: React 18 + TypeScript + Vite + Tailwind + shadcn/ui, with React Query, Redux Toolkit, and Supabase added on top.
+
+## Prerequisites
+
+- A Lovable account
+- A Supabase project (free tier is enough)
+- Optional: Node.js 18+ and npm if you plan to run the result locally
+
+## Two ways to use the recipe
+
+The [`lovable/`](https://github.com/DHTMLX/react-gantt-lovable-starter/tree/main/lovable) folder serves two audiences:
+
+1. **Reproduce the build from scratch.** Send the prompts to Lovable in order. You will end up with the same app structure, the same Gantt configuration, and the same Supabase schema. This is the recommended path if you want to learn the pattern.
+2. **Use the published repo as a starting template.** Clone the GitHub repo, point it at your own Supabase project, and skip the Lovable prompts entirely. This is faster if you just want a running starter.
+
+## Reproducing the build in Lovable
+
+The full prompt sequence is in [`lovable/00-build-plan.md`](https://github.com/DHTMLX/react-gantt-lovable-starter/blob/main/lovable/00-build-plan.md). The high-level flow:
+
+1. Paste the contents of [`00-knowledge.md`](https://github.com/DHTMLX/react-gantt-lovable-starter/blob/main/lovable/00-knowledge.md) into your Lovable project's Knowledge Base before sending the first prompt. This locks in the package name, CSS import, container height, and date-handling rules.
+2. Run prompt [`01-create-app-shell.md`](https://github.com/DHTMLX/react-gantt-lovable-starter/blob/main/lovable/01-create-app-shell.md) to scaffold routes, navigation, and placeholder pages.
+3. Decide your backend before step 03. The starter uses Supabase. If you want a backend-free variant, you can skip the Supabase steps and keep mock data only.
+4. Run the remaining prompts in order from `02` through `11`. Each prompt covers one feature area (Gantt core, Supabase, CRUD, permissions, browser verification, Gantt UX, working calendar, resources, final verification, dashboard/reports/workload pages).
+
+A typical run produces a working app in 11 prompt-sized steps. The exact prompts and their scope are version-controlled in the repo.
+
+## Manual fixes you may need
+
+Generated code is rarely perfect on the first try, especially around React-specific patterns. The repo records every manual edit applied during the original build in [`lovable/00-manual-edits.md`](https://github.com/DHTMLX/react-gantt-lovable-starter/blob/main/lovable/00-manual-edits.md). Treat that file as both a known-issues list and an example of how to keep your own Lovable build log when generated output drifts from the desired pattern.
+
+The current set of recorded fixes covers theme context wiring, Gantt date normalization at the CRUD boundary, Redux snapshot freshness, undo/redo persistence, and a weekend template signature mismatch.
+
+## Supabase setup
+
+The repo's [`supabase/migrations`](https://github.com/DHTMLX/react-gantt-lovable-starter/tree/main/supabase/migrations) folder contains the schema, demo policies, and seed data as ordered SQL files. Apply them in order in the Supabase SQL editor, then fill in the three Vite environment variables (`VITE_SUPABASE_URL`, `VITE_SUPABASE_PUBLISHABLE_KEY`, `VITE_SUPABASE_PROJECT_ID`) from your project settings.
+
+The schema supports multiple projects, with tasks and links scoped per project, plus a `project_members` table that drives the demo role model.
+
+## Going to production
+
+The starter uses the public trial package `@dhtmlx/trial-react-gantt`. When the prototype is approved for production, swap to the commercial `@dhx/react-gantt` package - the package-swap procedure is covered in [Installing React Gantt](integrations/react/installation.md#moving-from-the-trial-package-to-the-commercial-one).
+
+Permissions in the starter are demo-only. Replace the demo identity flow with real authentication before exposing the app to end users.
+
+## What to read next
+
+- [Lovable AI](integrations/ai-tools/lovable-ai.md) - the generic Lovable + Gantt workflow without a backend
+- [DHTMLX MCP Server](integrations/ai-tools/mcp-server.md) - connect MCP to Lovable for accurate API references
+- [Agent Skills](integrations/ai-tools/agent-skills.md) - apply the same DHTMLX patterns when you continue editing the cloned repo in Cursor or Claude Code
+- [Installing React Gantt](integrations/react/installation.md) - private-registry setup and the trial-to-commercial package swap
+- [React Gantt Overview](integrations/react/overview.md) - the underlying component reference

docs/integrations/ai-tools/mcp-server.md

@@ -22,6 +22,8 @@ The DHTMLX MCP server is a shared service that covers all major DHTMLX products,
 
 If you use [React Gantt](integrations/react.md), pair MCP with the [React Gantt agent skill](integrations/ai-tools/agent-skills.md#available-skills).
 
+For a real-world example of MCP + Lovable in use, see the [React Gantt Lovable Starter](https://github.com/DHTMLX/react-gantt-lovable-starter) and its [walkthrough](integrations/ai-tools/lovable-starter-walkthrough.md).
+
 ## Supported Products
 
 When connected, the AI tool can retrieve documentation, generate code snippets based on current APIs, and answer configuration questions for the following products:

docs/integrations/react/installation.md

@@ -67,6 +67,55 @@ Or, with Yarn:
 yarn add @dhx/react-gantt
 ~~~
 
+## Moving from the trial package to the commercial one
+
+Most projects start on the trial package and switch later, once the prototype is approved and a commercial license is in place. Both packages share the same API, so the move is mostly mechanical: swap the package name, swap the CSS import, and reinstall.
+
+After you've configured the private registry as shown above, update every import in the code:
+
+~~~ts
+// before
+import Gantt from "@dhtmlx/trial-react-gantt";
+import "@dhtmlx/trial-react-gantt/dist/react-gantt.css";
+
+// after
+import Gantt from "@dhx/react-gantt";
+import "@dhx/react-gantt/dist/react-gantt.css";
+~~~
+
+Search the project for any remaining mentions of `@dhtmlx/trial-react-gantt`, including the CSS import path - that one is the easiest to forget. Replace the dependency in `package.json`, then `npm install` and run the app. If the watermark is gone and the rest of the UI behaves identically, the swap is done.
+
+
+### Using the registry from CI or shared build environments
+
+`npm login` works fine on a developer machine, but CI runners and other shared build environments typically can't run an interactive login. For those, generate a non-interactive access token from a logged-in machine:
+
+~~~bash
+npm token create --registry=https://npm.dhtmlx.com
+~~~
+
+The token is printed once in the terminal output - copy it before closing the session, since it cannot be retrieved later. Then expose it through an `.npmrc` file that the build can read:
+
+~~~ini
+@dhx:registry=https://npm.dhtmlx.com
+//npm.dhtmlx.com/:_authToken=${DHTMLX_NPM_TOKEN}
+~~~
+
+Set `DHTMLX_NPM_TOKEN` as a secret in the CI provider (GitHub Actions, GitLab, etc.) so the token never gets committed. The same pattern works for Docker builds - inject the token at build time rather than baking it into the image.
+
+If `npm install` fails on CI with a 401 or 403 against `npm.dhtmlx.com`, the secret is either missing, expired, or the `.npmrc` file isn't where npm expects it (the project root is the safest location).
+
+### AI app builders (Lovable and similar)
+
+AI app builders like Lovable run their own build environments, and once you switch to `@dhx/react-gantt`, every `npm install` they run needs to authenticate against `https://npm.dhtmlx.com`.
+
+There are two reasonable paths after the package swap:
+
+- **Keep building in Lovable.** Attach the DHTMLX registry credentials to Lovable's build environment, usually as a secret that gets written into `.npmrc` at install time using the same `${DHTMLX_NPM_TOKEN}` pattern shown above. The exact mechanism for storing build secrets is a Lovable platform concern and may change over time - check current Lovable documentation when you set this up.
+- **Move the build to your own CI.** Many teams use Lovable for prototyping and run production builds from Vercel, Netlify, GitHub Actions, or similar, all of which support attaching the npm token as a secret. In that setup the trial-to-commercial swap typically lands as you wire up the deployment pipeline, and Lovable doesn't need credentials because it's no longer doing the install.
+
+If a Lovable build fails with 40x against `npm.dhtmlx.com` and you can't get the secret to land cleanly, the move-to-CI route is the reliable fallback.
+
 ## Next Steps
 
 After installation, continue with:

docs/integrations/react/overview.md

@@ -29,7 +29,7 @@ If you're new to DHTMLX Gantt, see the [DHTMLX Gantt documentation](guides.md) f
 
 
 :::tip AI-assisted development
-If you use an AI coding assistant, the [DHTMLX React Gantt agent skill](integrations/ai-tools/agent-skills.md#available-skills) can help it follow correct integration patterns and avoid common mistakes. For real-time API reference, connect the [DHTMLX MCP server](integrations/ai-tools/mcp-server.md).
+If you use an AI coding assistant, the [DHTMLX React Gantt agent skill](integrations/ai-tools/agent-skills.md#available-skills) can help it follow correct integration patterns and avoid common mistakes. For real-time API reference, connect the [DHTMLX MCP server](integrations/ai-tools/mcp-server.md). For Lovable-based generation, see the [Lovable AI guide](integrations/ai-tools/lovable-ai.md) and the [React Gantt Lovable Starter](https://github.com/DHTMLX/react-gantt-lovable-starter).
 :::
 
 

local_modules/dhx-md-data-parser/index.js

@@ -10,7 +10,9 @@ const MD_BOLD_TEXT_REGEXP = /\*\*(.+?)\*\*/g;
 
 // [text](<route><.md>#<route>) or [text](<route>/<route><.md>)
 // e.g. '[autoWidth](grid/configuration.md#autowidthforcolumns)'
-const MD_LINK_REGEXP = /(\[.+?\])\(([^\s]+?)(\.md)([^\s]*?)\)/g;
+// The negative lookahead skips absolute URLs - e.g. [text](https://github.com/foo/bar.md) -
+// so links to external Markdown files (GitHub blobs, etc.) are left untouched.
+const MD_LINK_REGEXP = /(\[.+?\])\((?![a-zA-Z]+:\/\/|\/\/)([^\s]+?)(\.md)([^\s]*?)\)/g;
 
 // @<text>:
 // e.g. '@short:' or '@short: sends a DELETE request to the server'

local_modules/dhx-md-data-parser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhx-md-data-parser",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
   "main": "index.js",
   "scripts": {

sidebars.js

@@ -208,6 +208,7 @@ module.exports = {
                         "integrations/ai-tools/mcp-server",
                         "integrations/ai-tools/agent-skills",
                         "integrations/ai-tools/lovable-ai",
+                        "integrations/ai-tools/lovable-starter-walkthrough",
                         "integrations/ai-tools/semantic-search"
                     ]
                 },