From 7abdbd2e3f8a7699753e7c0109a14de712e99487 Mon Sep 17 00:00:00 2001 From: Navid Shad Date: Wed, 4 Mar 2026 14:10:43 +0200 Subject: [PATCH 01/18] chore: Rename package from `@codebridger/lib-vue-components` to `pilotui`, migrate publishing to npmjs.org, and add an MIT license. --- .github/workflows/release.yml | 8 +-- LICENSE | 21 ++++++ README.md | 107 ++++++++++++++++++++++++++++- docs/global-confige.mdx | 2 +- docs/how-to-use.mdx | 14 ++-- docs/install.mdx | 36 +++------- package.json | 12 ++-- src/form/FileInputCombo.stories.ts | 2 +- src/icon/iconGallery.mdx | 2 +- src/utils/toastDocs.mdx | 2 +- 10 files changed, 157 insertions(+), 49 deletions(-) create mode 100644 LICENSE diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 1049dbc..ce71fb5 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,7 +1,7 @@ name: Release env: - package_name: "@codebridger/lib-vue-components" + package_name: "pilotui" on: push: @@ -30,8 +30,7 @@ jobs: uses: actions/setup-node@v4 with: node-version: "20" - registry-url: "https://npm.pkg.github.com" - scope: ${{ env.package_name }} + registry-url: "https://registry.npmjs.org/" - name: Install dependencies run: yarn install @@ -42,8 +41,7 @@ jobs: - name: Release env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} - NPM_TOKEN: ${{ secrets.GITHUB_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} run: | if [ "${{ github.ref }}" == "refs/heads/dev" ]; then yarn semantic-release --branch dev --tag-format "dev-\${version}" diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..7f06678 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 CodeBridger + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 30b15e2..d5503d3 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,8 @@ This template should help get you started developing with Vue 3 and TypeScript i ## Recommended IDE Setup -- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) +### What is PilotUI? +PilotUI is a reusable component library for Vue 3 projects. It ships a curated set of building blocks to assemble modern web applications and dashboards fast, with consistent design and strong TypeScript types. The published package name is `pilotui`. ## Type Support For `.vue` Imports in TS @@ -13,4 +14,106 @@ Since TypeScript cannot handle type information for `.vue` imports, they are shi 1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled. 2. Reload the VS Code window by running `Developer: Reload Window` from the command palette. -You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471). +### Prerequisites +- Vue 3 or Nuxt 3 project +- Node.js and yarn + +### 1) Install the package + +```bash +yarn add pilotui + +# or install the dev tag +yarn add pilotui@dev +``` + +## Usage + +### Vue 3 (Vite) quick start +```ts +// main.ts +import { createApp } from 'vue' +import App from './App.vue' +import PilotUI from 'pilotui' +import 'pilotui/style.css' + +const app = createApp(App) + +app.use(PilotUI, { + prefix: 'CL', + dontInstallPinia: true, + dontInstallPopper: false, + dontInstallPerfectScrollbar: false, +}) + +app.mount('#app') +``` + +Use components immediately (default prefix `CL`): + +```vue + +``` + +### Nuxt 3 setup +Create a client plugin, for example `plugins/pilotui.client.ts`: + +```ts +import { defineNuxtPlugin as init } from 'pilotui/nuxt' + +export default defineNuxtPlugin({ + name: 'pilotui', + enforce: 'pre', + async setup(nuxtApp) { + const options = { + prefix: 'CL', + dontInstallPinia: true, + dontInstallPopper: false, + dontInstallPerfectScrollbar: false, + } + + return init(nuxtApp, options) + }, +}) +``` + +Add configuration to `nuxt.config.ts`: + +```ts +export default defineNuxtConfig({ + build: { + transpile: ['pilotui'], + }, + css: ['pilotui/style.css'], +}) +``` + +## Local development + +```bash +# install dependencies +yarn + +# run Storybook locally +yarn storybook + +# run tests +yarn test + +# build the library +yarn build +``` + +## Links +- **Storybook**: [codebridger.github.io/lib-vue-components](https://codebridger.github.io/lib-vue-components) +- **Package**: `pilotui` + +--- + +If you like PilotUI, consider starring the repo and pinning it on your GitHub profile. diff --git a/docs/global-confige.mdx b/docs/global-confige.mdx index 0d5c0e5..3d11972 100644 --- a/docs/global-confige.mdx +++ b/docs/global-confige.mdx @@ -10,7 +10,7 @@ Import and use the `useAppStore` in your components to access and modify the glo ### Importing the Store ```typescript -import { useAppStore } from '@codebridger/lib-vue-components/store.ts'; +import { useAppStore } from 'pilotui/store.ts'; ``` ### Accessing State diff --git a/docs/how-to-use.mdx b/docs/how-to-use.mdx index 996833e..4f9bc15 100644 --- a/docs/how-to-use.mdx +++ b/docs/how-to-use.mdx @@ -25,7 +25,7 @@ It's really important to wrap all components with `AppRoot` because it's respons ```typescript // All Components -Import { Button, Input, App } form '@codebridger/lib-vue-components' +Import { Button, Input, App } form 'pilotui' // Or Import by category: @@ -36,22 +36,22 @@ import { ThemeCustomizer, SidebarMenu, HorizontalMenu, -} from "@codebridger/lib-vue-components/shell"; +} from "pilotui/shell"; // Element components -import { Button } from "@codebridger/lib-vue-components/elements"; +import { Button } from "pilotui/elements"; // Form components -import { Input } from "@codebridger/lib-vue-components/form"; +import { Input } from "pilotui/form"; // Complex components -import { Modal } from "@codebridger/lib-vue-components/complex"; +import { Modal } from "pilotui/complex"; // Type imports import type { SidebarItemType, HorizontalMenuItemType, -} from "@codebridger/lib-vue-components/types"; +} from "pilotui/types"; ``` ## Global Configuration @@ -59,7 +59,7 @@ import type { There is pinia store for global configuration. see full documentation [here](/docs/introduction.mdx#store) ```typescript -import { useAppStore } from "@codebridger/lib-vue-components/store.ts"; +import { useAppStore } from "pilotui/store.ts"; const appStore = useAppStore(); appStore.setTheme("dark"); diff --git a/docs/install.mdx b/docs/install.mdx index efe803e..9f116d3 100644 --- a/docs/install.mdx +++ b/docs/install.mdx @@ -7,39 +7,23 @@ import { Meta } from "@storybook/blocks"; ## Prerequisites - A working Vue 3 or Nuxt 3 project -- GitHub account with package access - Node.js and npm/yarn installed ## Setup Steps -### 1. GitHub Authentication - -1. Create a GitHub personal access token: - - Go to GitHub Settings → Developer Settings → Personal Access Tokens - - Generate a new token with `read:packages` permission - - Copy the generated token - - For detailed instructions, watch [this guide](https://www.youtube.com/watch?v=iLrywUfs7yU) - -2. Create an `.npmrc` file in your project root: - ```bash - @codebridger:registry=https://npm.pkg.github.com - //npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN - ``` - Replace `YOUR_GITHUB_TOKEN` with the token you created. - -### 2. Package Installation +### 1. Package Installation Install the package using npm or yarn: ```bash # Using npm -npm install @codebridger/lib-vue-components +npm install pilotui # Using yarn -yarn add @codebridger/lib-vue-components +yarn add pilotui # install from dev branch -yarn add @codebridger/lib-vue-components@dev +yarn add pilotui@dev ``` ### 3. Integration @@ -48,8 +32,8 @@ yarn add @codebridger/lib-vue-components@dev ```javascript // Import components and Styles -import vueComponents from "@codebridger/lib-vue-components"; -import '@codebridger/lib-vue-components/style.css'; +import vueComponents from "pilotui"; +import 'pilotui/style.css'; // Configuration options const options = { @@ -71,10 +55,10 @@ vueApp.use(vueComponents, options); 1. Create a plugin file `plugins/component-library.client.ts`: ```javascript -import { defineNuxtPlugin as init } from '@codebridger/lib-vue-components/nuxt'; +import { defineNuxtPlugin as init } from 'pilotui/nuxt'; export default defineNuxtPlugin({ - name: '@codebridger/lib-vue-components', + name: 'pilotui', enforce: 'pre', async setup(nuxtApp) { const options = { @@ -95,12 +79,12 @@ export default defineNuxtPlugin({ export default defineNuxtConfig({ // Ensure components are transpiled during build build: { - transpile: ['@codebridger/lib-vue-components'], + transpile: ['pilotui'], }, css: [ // ... other CSS files - '@codebridger/lib-vue-components/style.css', + 'pilotui/style.css', ], // ... other Nuxt config diff --git a/package.json b/package.json index 8fd894d..fbba5a4 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,13 @@ { - "name": "@codebridger/lib-vue-components", + "name": "pilotui", "description": "A comprehensive Vue 3 + TypeScript component library featuring 50+ UI components, shell layouts, icon system, and utilities. Built with Tailwind CSS, includes Storybook documentation, theme customization, and Nuxt.js support. Perfect for building modern web applications and dashboards.", + "version": "1.28.1", + "license": "MIT", + "type": "module", "publishConfig": { - "registry": "https://npm.pkg.github.com" + "access": "public", + "registry": "https://registry.npmjs.org/" }, - "version": "1.17.0-dev.38", - "type": "module", "files": [ "dist", "src" @@ -127,4 +129,4 @@ "vitest": "^3.2.4", "vue-tsc": "^0.40.4" } -} +} \ No newline at end of file diff --git a/src/form/FileInputCombo.stories.ts b/src/form/FileInputCombo.stories.ts index 6b96767..63a94f1 100644 --- a/src/form/FileInputCombo.stories.ts +++ b/src/form/FileInputCombo.stories.ts @@ -131,7 +131,7 @@ In this Storybook demo, the file upload process is simulated with progress updat \`\`\`vue ``` diff --git a/src/utils/toastDocs.mdx b/src/utils/toastDocs.mdx index cab8f30..1be2864 100644 --- a/src/utils/toastDocs.mdx +++ b/src/utils/toastDocs.mdx @@ -11,7 +11,7 @@ The `toast.ts` file provides utility functions for displaying toast notification To show a basic toast message, use the `showToast` function: ```typescript -import { showToast, toastSuccess, toastError, toastWarning, toastInfo } from '@codebridger/lib-vue-components/toast.ts'; +import { showToast, toastSuccess, toastError, toastWarning, toastInfo } from 'pilotui/toast.ts'; showToast({ message: 'This is a basic toast message', variant: 'success' }); From f894c519615e955487a0c19d2183562ffc57fbd8 Mon Sep 17 00:00:00 2001 From: Navid Shad Date: Wed, 4 Mar 2026 14:54:21 +0200 Subject: [PATCH 02/18] feat: Enhance documentation generation with improved Puppeteer stability, 'Show code' button handling, and structured LLM-friendly output including a header, instructions, and TOC. --- README.md | 145 ++++++++++++++++++----------------- llm-doc-generator.js | 133 +++++++++++++++++++++++--------- src/types/initialize.type.ts | 1 - src/vue.ts | 25 +----- 4 files changed, 173 insertions(+), 131 deletions(-) diff --git a/README.md b/README.md index d5503d3..7a309b1 100644 --- a/README.md +++ b/README.md @@ -1,119 +1,124 @@ -# Vue 3 + TypeScript + Vite +# 🚀 PilotUI -This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` ``` -### Nuxt 3 setup -Create a client plugin, for example `plugins/pilotui.client.ts`: +--- -```ts -import { defineNuxtPlugin as init } from 'pilotui/nuxt' - -export default defineNuxtPlugin({ - name: 'pilotui', - enforce: 'pre', - async setup(nuxtApp) { - const options = { - prefix: 'CL', - dontInstallPinia: true, - dontInstallPopper: false, - dontInstallPerfectScrollbar: false, - } - - return init(nuxtApp, options) - }, -}) -``` +## 🍱 Component Showcase -Add configuration to `nuxt.config.ts`: +| Category | Key Components | +| :--- | :--- | +| **Shell** | `AppRoot`, `DashboardShell`, `SidebarMenu`, `HorizontalMenu` | +| **Elements** | `Button`, `Card`, `Avatar`, `Dropdown`, `Tabs`, `Progress` | +| **Form** | `Input`, `Select`, `Checkbox`, `Switch`, `Textarea` | +| **Complex** | `Modal`, `Pagination`, `DataTable`, `Toast` | +| **Icons** | Custom `Icon` component with multi-pack support | -```ts -export default defineNuxtConfig({ - build: { - transpile: ['pilotui'], - }, - css: ['pilotui/style.css'], -}) -``` +--- + +## 🤖 AI-Native Documentation + +PilotUI includes a specialized `llm.md` file designed specifically for Large Language Models. If you are using an AI assistant (like Cursor or GitHub Copilot) to build your app, point it to: +👉 [**https://codebridger.github.io/lib-vue-components/llm.md**](https://codebridger.github.io/lib-vue-components/llm.md) + +This file contains flat, metadata-rich descriptions of every component, property, and slot, enabling AI to generate accurate PilotUI code for you instantly. -## Local development +--- + +## 🛠ī¸ Local Development ```bash -# install dependencies -yarn +# Install dependencies +yarn install -# run Storybook locally +# Run Storybook for live development yarn storybook -# run tests -yarn test +# Generate LLM documentation +yarn generate-docs -# build the library -yarn build +# Run unit tests +yarn test ``` -## Links -- **Storybook**: [codebridger.github.io/lib-vue-components](https://codebridger.github.io/lib-vue-components) -- **Package**: `pilotui` - --- -If you like PilotUI, consider starring the repo and pinning it on your GitHub profile. +## 🤝 Community & Support + +- **Contribute**: Feel free to open issues or submit PRs to improve the library. +- **Star us**: If you find PilotUI useful, please consider giving it a ⭐ on GitHub! + +Built with ❤ī¸ by the **CodeBridger** team. diff --git a/llm-doc-generator.js b/llm-doc-generator.js index f8509c5..553a5f2 100755 --- a/llm-doc-generator.js +++ b/llm-doc-generator.js @@ -110,20 +110,19 @@ class DocGenerator { "--disable-gpu", "--no-first-run", "--no-zygote", - "--single-process", ], }); this.page = await this.browser.newPage(); // Set user agent to avoid detection await this.page.setUserAgent( - "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36" + "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36", ); // Additional settings for CI environment if (process.env.CI) { console.log( - "🔧 Running in CI environment - applying CI-specific settings" + "🔧 Running in CI environment - applying CI-specific settings", ); await this.page.setViewport({ width: 1920, height: 1080 }); await this.page.setDefaultTimeout(30000); @@ -141,8 +140,8 @@ class DocGenerator { console.log("đŸĨ Checking server health..."); try { const response = await this.page.goto(this.baseUrl, { - waitUntil: "domcontentloaded", - timeout: 10000, + waitUntil: "load", + timeout: 30000, }); if (response && response.ok()) { @@ -167,16 +166,11 @@ class DocGenerator { for (let attempt = 1; attempt <= maxRetries; attempt++) { try { console.log( - `🔄 Attempt ${attempt}/${maxRetries} to connect to Storybook...` + `🔄 Attempt ${attempt}/${maxRetries} to connect to Storybook...`, ); - // First check if server is healthy + // Check if server is healthy (this also performs the initial navigation) if (await this.checkServerHealth()) { - await this.page.goto(this.baseUrl, { - waitUntil: "domcontentloaded", - timeout: 30000, - }); - console.log("✅ Successfully loaded Storybook"); return; } else { @@ -198,7 +192,7 @@ class DocGenerator { async findDocPages() { console.log( - "🔍 Finding documentation pages with data-item-id ending in --docs..." + "🔍 Finding documentation pages with data-item-id ending in --docs...", ); try { @@ -208,7 +202,7 @@ class DocGenerator { // Find and click all expand-all buttons await this.page.evaluate(() => { const expandAllButtons = Array.from( - document.querySelectorAll('[data-action="expand-all"]') + document.querySelectorAll('[data-action="expand-all"]'), ); console.log("Found expand-all buttons:", expandAllButtons.length); console.log("🖱ī¸ Starting to click expand-all buttons..."); @@ -227,7 +221,7 @@ class DocGenerator { await this.page.evaluate(() => { // Find all expandable menu items (those without links but with data-item-id) const expandableItems = Array.from( - document.querySelectorAll("[data-item-id]") + document.querySelectorAll("[data-item-id]"), ).filter((el) => { const link = el.querySelector("a"); return !link || !link.href; // Items without links are likely expandable @@ -251,7 +245,7 @@ class DocGenerator { const docElements = await this.page.evaluate(() => { // Get all elements with data-item-id ending in --docs that have links const allElementsWithLinks = Array.from( - document.querySelectorAll('[data-item-id$="--docs"]') + document.querySelectorAll('[data-item-id$="--docs"]'), ).filter((el) => { const link = el.querySelector("a"); return link && link.href; @@ -259,7 +253,7 @@ class DocGenerator { console.log( "📄 Documentation pages (--docs):", - allElementsWithLinks.length + allElementsWithLinks.length, ); // Use only documentation elements (ending with --docs) @@ -308,7 +302,7 @@ class DocGenerator { }); console.log( - `📄 Found ${docElements.length} documentation pages to process` + `📄 Found ${docElements.length} documentation pages to process`, ); return docElements; @@ -325,7 +319,7 @@ class DocGenerator { } console.log( - `📖 Extracting content from: ${docElement.title} (${docElement.dataItemId})` + `📖 Extracting content from: ${docElement.title} (${docElement.dataItemId})`, ); this.visitedUrls.add(docElement.href); @@ -343,7 +337,7 @@ class DocGenerator { try { await this.page.waitForSelector( '.docblock, .markdown, article, main, [data-testid="story-panel"]', - { timeout: 5000 } + { timeout: 5000 }, ); } catch (e) { console.log("No specific content selectors found, continuing..."); @@ -380,7 +374,7 @@ class DocGenerator { // Remove all style tags and buttons from the cloned content const elementsToRemove = clonedContent.querySelectorAll( - "style, button, [role='button'], .btn, .button" + "style, button, [role='button'], .btn, .button", ); elementsToRemove.forEach((element) => { element.remove(); @@ -388,7 +382,7 @@ class DocGenerator { const result = clonedContent.outerHTML; console.log( - `Extracted content length: ${result.length} characters (after removing ${elementsToRemove.length} elements)` + `Extracted content length: ${result.length} characters (after removing ${elementsToRemove.length} elements)`, ); return result; }, docElement.dataItemId); @@ -406,7 +400,7 @@ class DocGenerator { } catch (error) { console.error( `❌ Error extracting content from ${docElement.title}:`, - error.message + error.message, ); return null; } @@ -422,14 +416,14 @@ class DocGenerator { // Try to find and click "Show code" buttons in the main document const mainDocButtonsClicked = await this.page.evaluate(() => { const showCodeButtons = Array.from( - document.querySelectorAll('button, [role="button"], .btn, .button') + document.querySelectorAll('button, [role="button"], .btn, .button'), ).filter((button) => { const text = button.textContent?.trim().toLowerCase(); return text === "show code" || text.includes("show code"); }); console.log( - `Found ${showCodeButtons.length} 'Show code' buttons in main document` + `Found ${showCodeButtons.length} 'Show code' buttons in main document`, ); let clickedCount = 0; @@ -441,7 +435,7 @@ class DocGenerator { } catch (error) { console.log( "Failed to click button in main document:", - error.message + error.message, ); } }); @@ -466,20 +460,20 @@ class DocGenerator { iframe.contentDocument || iframe.contentWindow.document; if (!iframeDoc) { console.log( - "Cannot access iframe content for 'Show code' button search" + "Cannot access iframe content for 'Show code' button search", ); return 0; } const showCodeButtons = Array.from( - iframeDoc.querySelectorAll('button, [role="button"], .btn, .button') + iframeDoc.querySelectorAll('button, [role="button"], .btn, .button'), ).filter((button) => { const text = button.textContent?.trim().toLowerCase(); return text === "show code" || text.includes("show code"); }); console.log( - `Found ${showCodeButtons.length} 'Show code' buttons in iframe` + `Found ${showCodeButtons.length} 'Show code' buttons in iframe`, ); let clickedCount = 0; @@ -504,7 +498,7 @@ class DocGenerator { const totalClicked = mainDocButtonsClicked + iframeButtonsClicked; if (totalClicked > 0) { console.log( - `✅ Successfully clicked ${totalClicked} 'Show code' button(s)` + `✅ Successfully clicked ${totalClicked} 'Show code' button(s)`, ); } else { console.log("ℹī¸ No 'Show code' buttons found on this page"); @@ -512,7 +506,7 @@ class DocGenerator { } catch (error) { console.log( "⚠ī¸ Error while handling 'Show code' buttons:", - error.message + error.message, ); } } @@ -534,7 +528,7 @@ class DocGenerator { for (let i = 0; i < docElements.length; i++) { const docElement = docElements[i]; console.log( - `\n[${i + 1}/${docElements.length}] Processing: ${docElement.title}` + `\n[${i + 1}/${docElements.length}] Processing: ${docElement.title}`, ); const docContent = await this.extractPageContent(docElement); @@ -573,14 +567,79 @@ Generated on: ${new Date().toISOString()} } async appendDocumentToFile(doc) { - const content = `## ${doc.title}\n\n${doc.content}\n\n---\n\n`; - await fs.appendFile("llm.md", content, "utf8"); + // We now accumulate in memory and write all at once in finalizeMarkdownFile + // but we can still log progress + console.log(`✅ Prepared content for: ${doc.title}`); } async finalizeMarkdownFile() { + console.log("📊 Finalizing markdown file with TOC and LLM guidance..."); + + // 1. Generate Header & LLM Guidance + let fullContent = `# PilotUI - LLM Documentation\n\n`; + fullContent += `> Generated on: ${new Date().toLocaleString()}\n\n`; + + fullContent += `## 🤖 LLM Instructions\n`; + fullContent += `This document is optimized for Large Language Models. It contains the complete documentation for **PilotUI**, a Vue 3 component library.\n\n`; + fullContent += `### How to use this doc:\n`; + fullContent += `- **Component Search**: Use the Table of Contents below to find specific components.\n`; + fullContent += `- **Code Examples**: All component examples are provided in fenced code blocks with language identifiers.\n`; + fullContent += `- **Prop Tables**: Component properties, events, and slots are documented in Markdown tables.\n`; + fullContent += `- **Implementation**: When asked to implement a UI, refer to the available components and their usage patterns described here.\n\n`; + + fullContent += `---\n\n`; + + // 2. Generate Table of Contents + fullContent += `## 📋 Table of Contents\n\n`; + + // Group by category if possible (based on "Category / Component" title format) + const categories = {}; + this.allDocs.forEach((doc) => { + const parts = doc.title.split(" / "); + const category = parts.length > 1 ? parts[0] : "General"; + const title = parts.length > 1 ? parts[1] : doc.title; + + if (!categories[category]) categories[category] = []; + categories[category].push({ + title: title, + anchor: doc.title + .toLowerCase() + .replace(/[^\w\s-]/g, "") + .trim() + .replace(/\s+/g, "-"), + }); + }); + + for (const [category, items] of Object.entries(categories)) { + fullContent += `### ${category}\n`; + items.forEach((item) => { + fullContent += `- [${item.title}](#${item.anchor})\n`; + }); + fullContent += `\n`; + } + + fullContent += `---\n\n`; + + // 3. Append all document contents + this.allDocs.forEach((doc) => { + const anchor = doc.title + .toLowerCase() + .replace(/[^\w\s-]/g, "") + .trim() + .replace(/\s+/g, "-"); + fullContent += `\n`; + fullContent += `## ${doc.title}\n\n`; + fullContent += `**Source URL**: ${doc.url}\n\n`; + fullContent += `${doc.content}\n\n`; + fullContent += `---\n\n`; + }); + + // Write the complete file + await fs.writeFile("llm.md", fullContent, "utf8"); + const stats = await fs.stat("llm.md"); - console.log(`✅ Documentation written to: llm.md`); - console.log(`📊 Total content length: ${stats.size} characters`); + console.log(`✅ Documentation successfully written to: llm.md`); + console.log(`📊 Total file size: ${(stats.size / 1024).toFixed(2)} KB`); } async cleanup() { @@ -593,7 +652,7 @@ Generated on: ${new Date().toISOString()} async run() { try { console.log( - `🔧 Environment: CI=${process.env.CI}, NODE_ENV=${process.env.NODE_ENV}` + `🔧 Environment: CI=${process.env.CI}, NODE_ENV=${process.env.NODE_ENV}`, ); await this.init(); await this.navigateToStorybook(); diff --git a/src/types/initialize.type.ts b/src/types/initialize.type.ts index 172cd8e..45151a8 100644 --- a/src/types/initialize.type.ts +++ b/src/types/initialize.type.ts @@ -21,7 +21,6 @@ export interface AppSettingType { } export interface PluginOptionsType extends AppSettingType { - prefix?: string; dontInstallPinia?: boolean; dontInstallPopper?: boolean; dontInstallPerfectScrollbar?: boolean; diff --git a/src/vue.ts b/src/vue.ts index 09af10c..834d814 100644 --- a/src/vue.ts +++ b/src/vue.ts @@ -7,9 +7,6 @@ import PerfectScrollbar from "vue3-perfect-scrollbar"; import "./assets/css/app.css"; import appSetting from "./app-setting"; import * as ShellComponents from "./shell/components"; -import * as Components from "./elements/components"; -import * as FormComponents from "./form/components"; -import * as ComplexComponents from "./complex/components"; import { PluginOptionsType } from "./types/initialize.type"; // Export all components from root level @@ -21,8 +18,7 @@ export * from "./complex/components"; export default { install: (app: App, options: PluginOptionsType) => { const { - prefix = "CL", - dontInstallPinia = true, + dontInstallPinia = false, dontInstallPopper = false, dontInstallPerfectScrollbar = false, theme = "light", @@ -58,24 +54,7 @@ export default { app.component("Popper", Popper); } - if (!prefix) - throw "Component library needs a prefix to be added for all components"; - - Object.keys(ShellComponents).forEach((key) => { - app.component(prefix + key, ShellComponents[key]); - }); - - Object.keys(Components).forEach((key) => { - app.component(prefix + key, ShellComponents[key]); - }); - - Object.keys(FormComponents).forEach((key) => { - app.component(prefix + key, FormComponents[key]); - }); - - Object.keys(ComplexComponents).forEach((key) => { - app.component(prefix + key, ComplexComponents[key]); - }); + // Components are now imported individually by users for better tree-shaking and flexibility. // Check if we're on client-side if (typeof window !== "undefined") { From e977f8d4721e92a182a16d345f6221e6445824a6 Mon Sep 17 00:00:00 2001 From: Navid Shad Date: Wed, 4 Mar 2026 15:31:16 +0200 Subject: [PATCH 03/18] chore: remove `@semantic-release/github` plugin from release configuration. --- .releaserc.mjs | 1 - 1 file changed, 1 deletion(-) diff --git a/.releaserc.mjs b/.releaserc.mjs index e151351..c6bab16 100644 --- a/.releaserc.mjs +++ b/.releaserc.mjs @@ -52,7 +52,6 @@ export default { tag: isMainBranch ? "latest" : currentBranch, }, ], - "@semantic-release/github", [ "@semantic-release/git", { From bdf5fe3d570fab9b04987b452e55caff2538f859 Mon Sep 17 00:00:00 2001 From: Navid Shad Date: Wed, 4 Mar 2026 15:55:07 +0200 Subject: [PATCH 04/18] ci: Add dynamic environment selection and conditional NPM token handling to the release workflow. --- .github/workflows/release.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index ce71fb5..76fb147 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -19,6 +19,7 @@ jobs: release: name: Release runs-on: ubuntu-latest + environment: ${{ github.ref == 'refs/heads/main' && 'production' || 'development' }} steps: - name: Checkout uses: actions/checkout@v4 @@ -41,7 +42,7 @@ jobs: - name: Release env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + NPM_TOKEN: ${{ github.ref == 'refs/heads/dev' && secrets.NPM_TOKEN_DEV || secrets.NPM_TOKEN }} run: | if [ "${{ github.ref }}" == "refs/heads/dev" ]; then yarn semantic-release --branch dev --tag-format "dev-\${version}" From dee81ce10802f97f4d6fcebb018def0b2690930b Mon Sep 17 00:00:00 2001 From: Navid Shad Date: Wed, 4 Mar 2026 16:00:16 +0200 Subject: [PATCH 05/18] ci: Simplify release workflow environment and NPM token usage by removing conditional logic. --- .github/workflows/release.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 76fb147..feb49c7 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -19,7 +19,7 @@ jobs: release: name: Release runs-on: ubuntu-latest - environment: ${{ github.ref == 'refs/heads/main' && 'production' || 'development' }} + environment: production steps: - name: Checkout uses: actions/checkout@v4 @@ -42,7 +42,7 @@ jobs: - name: Release env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - NPM_TOKEN: ${{ github.ref == 'refs/heads/dev' && secrets.NPM_TOKEN_DEV || secrets.NPM_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} run: | if [ "${{ github.ref }}" == "refs/heads/dev" ]; then yarn semantic-release --branch dev --tag-format "dev-\${version}" From cd1fa01a84ac1c64891f1eb4528dd63c97d0df87 Mon Sep 17 00:00:00 2001 From: Navid Shad Date: Wed, 4 Mar 2026 16:10:01 +0200 Subject: [PATCH 06/18] ci: Add `id-token: write` permission for OIDC/Trusted Publishing. --- .github/workflows/release.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index feb49c7..b7e08be 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -14,6 +14,7 @@ permissions: issues: write pull-requests: write packages: write + id-token: write # Required for Trusted Publishing/OIDC jobs: release: From ffb00165c77e19a628475b61fe6794c2aec9dda7 Mon Sep 17 00:00:00 2001 From: Navid Shad Date: Wed, 4 Mar 2026 16:31:39 +0200 Subject: [PATCH 07/18] ci: Configure OIDC Trusted Publishing for npm releases by removing `NPM_TOKEN` and enabling provenance. --- .github/workflows/release.yml | 4 ++-- .releaserc.mjs | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index b7e08be..9f726a5 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -20,7 +20,7 @@ jobs: release: name: Release runs-on: ubuntu-latest - environment: production + # environment: production # Optional: keep if you want UI tracking, but ensure it's not branch-restricted steps: - name: Checkout uses: actions/checkout@v4 @@ -43,7 +43,7 @@ jobs: - name: Release env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + # NPM_TOKEN removed - OIDC Trusted Publishing will be used instead run: | if [ "${{ github.ref }}" == "refs/heads/dev" ]; then yarn semantic-release --branch dev --tag-format "dev-\${version}" diff --git a/.releaserc.mjs b/.releaserc.mjs index c6bab16..93f2bd8 100644 --- a/.releaserc.mjs +++ b/.releaserc.mjs @@ -50,6 +50,7 @@ export default { { npmPublish: true, tag: isMainBranch ? "latest" : currentBranch, + provenance: true, }, ], [ From f3be029a8685dc0a28a625ef7b9dd2c3bbfd2cd8 Mon Sep 17 00:00:00 2001 From: Navid Shad Date: Wed, 4 Mar 2026 16:42:26 +0200 Subject: [PATCH 08/18] chore: Update Node.js to v22 and remove registry-url to enable OIDC Trusted Publishing. --- .github/workflows/release.yml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 9f726a5..6448928 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -31,8 +31,7 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v4 with: - node-version: "20" - registry-url: "https://registry.npmjs.org/" + node-version: "22" # Required for stable npm OIDC / Trusted Publishing - name: Install dependencies run: yarn install @@ -43,7 +42,7 @@ jobs: - name: Release env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - # NPM_TOKEN removed - OIDC Trusted Publishing will be used instead + # NPM_TOKEN intentionally removed to enable OIDC / Trusted Publishing run: | if [ "${{ github.ref }}" == "refs/heads/dev" ]; then yarn semantic-release --branch dev --tag-format "dev-\${version}" From 159e6ffb155ccc04d2a922015f59a5f216767a63 Mon Sep 17 00:00:00 2001 From: Navid Shad Date: Wed, 4 Mar 2026 16:48:53 +0200 Subject: [PATCH 09/18] chore: Remove `@semantic-release/github` and update `@semantic-release/npm` to `13.1.5`. --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index fbba5a4..7460274 100644 --- a/package.json +++ b/package.json @@ -94,8 +94,7 @@ "@rollup/plugin-alias": "^3.1.9", "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.1", - "@semantic-release/github": "^11.0.0", - "@semantic-release/npm": "^12.0.1", + "@semantic-release/npm": "^13.1.5", "@semantic-release/release-notes-generator": "^14.0.1", "@storybook/addon-essentials": "^8.4.5", "@storybook/addon-interactions": "^8.6.14", From c562985cc5c359df08bf4d7408bcc2f03e0d3396 Mon Sep 17 00:00:00 2001 From: Navid Shad Date: Wed, 4 Mar 2026 16:51:41 +0200 Subject: [PATCH 10/18] chore: update semantic-release to version 25.0.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7460274..11cfefc 100644 --- a/package.json +++ b/package.json @@ -119,7 +119,7 @@ "puppeteer": "^24.15.0", "remark-gfm": "^4.0.0", "sass": "^1.83.4", - "semantic-release": "^24.2.0", + "semantic-release": "^25.0.3", "storybook": "^8.4.5", "tailwindcss": "^3.4.17", "turndown": "^7.2.0", From 2553550652f5ca301f16e14037647a2ad18f94a2 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Wed, 4 Mar 2026 14:52:44 +0000 Subject: [PATCH 11/18] chore(release): 1.17.0-dev.39 [skip ci] # [1.17.0-dev.39](https://github.com/codebridger/lib-vue-components/compare/dev-1.17.0-dev.38...dev-1.17.0-dev.39) (2026-03-04) ### Bug Fixes * **Select:** Change v-show to v-if for improved rendering logic ([d0fb03e](https://github.com/codebridger/lib-vue-components/commit/d0fb03ef1685033f197918f99e06387a1573139e)) ### Features * Enhance documentation generation with improved Puppeteer stability, 'Show code' button handling, and structured LLM-friendly output including a header, instructions, and TOC. ([f894c51](https://github.com/codebridger/lib-vue-components/commit/f894c519615e955487a0c19d2183562ffc57fbd8)) --- CHANGELOG-DEV.md | 12 ++++++++++++ package.json | 4 ++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/CHANGELOG-DEV.md b/CHANGELOG-DEV.md index 23597f1..6b4749d 100644 --- a/CHANGELOG-DEV.md +++ b/CHANGELOG-DEV.md @@ -1,3 +1,15 @@ +# [1.17.0-dev.39](https://github.com/codebridger/lib-vue-components/compare/dev-1.17.0-dev.38...dev-1.17.0-dev.39) (2026-03-04) + + +### Bug Fixes + +* **Select:** Change v-show to v-if for improved rendering logic ([d0fb03e](https://github.com/codebridger/lib-vue-components/commit/d0fb03ef1685033f197918f99e06387a1573139e)) + + +### Features + +* Enhance documentation generation with improved Puppeteer stability, 'Show code' button handling, and structured LLM-friendly output including a header, instructions, and TOC. ([f894c51](https://github.com/codebridger/lib-vue-components/commit/f894c519615e955487a0c19d2183562ffc57fbd8)) + # [1.17.0-dev.38](https://github.com/codebridger/lib-vue-components/compare/dev-1.17.0-dev.37...dev-1.17.0-dev.38) (2025-11-16) diff --git a/package.json b/package.json index 11cfefc..73bbc33 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pilotui", "description": "A comprehensive Vue 3 + TypeScript component library featuring 50+ UI components, shell layouts, icon system, and utilities. Built with Tailwind CSS, includes Storybook documentation, theme customization, and Nuxt.js support. Perfect for building modern web applications and dashboards.", - "version": "1.28.1", + "version": "1.17.0-dev.39", "license": "MIT", "type": "module", "publishConfig": { @@ -128,4 +128,4 @@ "vitest": "^3.2.4", "vue-tsc": "^0.40.4" } -} \ No newline at end of file +} From 213d1962b46edf11af0259060233843f5b94bfea Mon Sep 17 00:00:00 2001 From: Navid Shad Date: Wed, 4 Mar 2026 16:58:10 +0200 Subject: [PATCH 12/18] chore: Add repository URL to package.json. --- package.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/package.json b/package.json index 11cfefc..be8b29d 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,10 @@ "description": "A comprehensive Vue 3 + TypeScript component library featuring 50+ UI components, shell layouts, icon system, and utilities. Built with Tailwind CSS, includes Storybook documentation, theme customization, and Nuxt.js support. Perfect for building modern web applications and dashboards.", "version": "1.28.1", "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/codebridger/lib-vue-components.git" + }, "type": "module", "publishConfig": { "access": "public", From c943183fa9b59e306083ea99f538cc7a15175a57 Mon Sep 17 00:00:00 2001 From: Navid Shad Date: Wed, 4 Mar 2026 17:05:28 +0200 Subject: [PATCH 13/18] fix: modernization of readme and metadata --- README.md | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 7a309b1..127de34 100644 --- a/README.md +++ b/README.md @@ -41,27 +41,26 @@ yarn add pilotui npm install pilotui ``` -### 2. Global Integration (Vue 3) +### 2. Setup +Add the required styles and Pinia configuration (if using state-dependent components like `DashboardShell`): ```ts // main.ts import { createApp } from 'vue' +import { createPinia } from 'pinia' import PilotUI from 'pilotui' import 'pilotui/style.css' import App from './App.vue' const app = createApp(App) -app.use(PilotUI, { - dontInstallPinia: false, // Set to true if you already have a Pinia instance in your app -}) - +app.use(createPinia()) +app.use(PilotUI) // Optional: sets up default themes & internal utilities app.mount('#app') ``` ### 3. Usage - -Import components directly where you need them: +PilotUI is designed for explicit component imports. This ensures better tree-shaking and type safety: ```vue