diff --git a/package.json b/package.json index 428603d86..85193e156 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "build:ui": "BUILD_MODE=ui vite build", "build:react": "BUILD_MODE=react-components vite build", "dev:react": "BUILD_MODE=react-components vite build --watch", - "package:react": "node scripts/publish-react-components.js", + "package:react": "node scripts/package-react-components.js", "prepare": "husky install", "size": "size-limit", "story:dev": "histoire dev", diff --git a/scripts/publish-react-components.js b/scripts/package-react-components.js similarity index 69% rename from scripts/publish-react-components.js rename to scripts/package-react-components.js index 367dd0a49..1d8f032b6 100644 --- a/scripts/publish-react-components.js +++ b/scripts/package-react-components.js @@ -13,63 +13,6 @@ if (isCopyMode) { console.log('🚀 Building Chatwoot React Components for NPM...'); } -async function publishReactComponents() { - try { - if (!isCopyMode) { - // Step 1: Clean previous builds - console.log('📦 Cleaning previous builds...'); - if (fs.existsSync('dist')) { - fs.rmSync('dist', { recursive: true, force: true }); - } - - // Clean previous React component builds - const reactFiles = [ - 'public/packs/react-components.es.js', - 'public/packs/react-components.cjs.js', - 'public/packs/style.css', - ]; - - reactFiles.forEach(file => { - if (fs.existsSync(file)) { - fs.unlinkSync(file); - console.log(` 🗑️ Removed ${file}`); - } - }); - - // Step 2: Build the React components library - console.log('🔨 Building React components...'); - execSync('pnpm build:react', { stdio: 'inherit' }); - } - - // Step 3: Create package directory - console.log('📁 Creating package directory...'); - const packageDir = 'dist/react-components'; - fs.mkdirSync(packageDir, { recursive: true }); - - // Step 4: Copy built files - console.log('📋 Copying built files...'); - copyBuildFiles(packageDir); - - // Step 5: Generate package.json - console.log('📄 Generating package.json...'); - generatePackageJson(packageDir); - - // Step 6: Copy additional files (README, etc.) - console.log('📚 Copying documentation...'); - copyDocumentation(packageDir); - - console.log('✅ Package ready in dist/react-components/'); - console.log(''); - console.log('📦 Publishing options:'); - console.log(' • npm publish: cd dist/react-components && npm publish'); - console.log(' • yalc publish: pnpm package:react:yalc-publish'); - console.log(' • local test: cd dist/react-components && npm pack'); - } catch (error) { - console.error('❌ Build failed:', error.message); - process.exit(1); - } -} - function copyBuildFiles(packageDir) { // Copy main build outputs const files = [ @@ -161,7 +104,7 @@ function generatePackageJson(packageDir) { }, // npm publish configuration - files: ['index.js', 'index.cjs', 'style.css', 'README.md', 'package.json'], + files: ['index.js', 'index.cjs', 'style.css', 'package.json'], // Engine requirements engines: { @@ -176,81 +119,57 @@ function generatePackageJson(packageDir) { console.log(' ✓ Generated package.json'); } -function copyDocumentation(packageDir) { - // Create a comprehensive README for the package - const readme = `# Chatwoot React Components +async function publishReactComponents() { + try { + if (!isCopyMode) { + // Step 1: Clean previous builds + console.log('📦 Cleaning previous builds...'); + if (fs.existsSync('dist')) { + fs.rmSync('dist', { recursive: true, force: true }); + } -React components for embedding Chatwoot messaging interface with Vue Web Components under the hood. + // Clean previous React component builds + const reactFiles = [ + 'public/packs/react-components.es.js', + 'public/packs/react-components.cjs.js', + 'public/packs/style.css', + ]; -## Installation + reactFiles.forEach(file => { + if (fs.existsSync(file)) { + fs.unlinkSync(file); + console.log(` 🗑️ Removed ${file}`); + } + }); -\`\`\`bash -npm install @chatwoot/agent-react-components -# or -yarn add @chatwoot/agent-react-components -# or -pnpm add @chatwoot/agent-react-components -\`\`\` + // Step 2: Build the React components library + console.log('🔨 Building React components...'); + execSync('pnpm build:react', { stdio: 'inherit' }); + } -## Usage + // Step 3: Create package directory + console.log('📁 Creating package directory...'); + const packageDir = 'dist/react-components'; + fs.mkdirSync(packageDir, { recursive: true }); -### Basic MessageList Integration + // Step 4: Copy built files + console.log('📋 Copying built files...'); + copyBuildFiles(packageDir); -\`\`\`jsx -import React from 'react'; -import { ChatwootProvider, ChatwootConversation } from '@chatwoot/agent-react-components'; -import '@chatwoot/agent-react-components/style.css'; + // Step 5: Generate package.json + console.log('📄 Generating package.json...'); + generatePackageJson(packageDir); -function App() { - return ( - - - - ); -} -\`\`\` - -## Components - -### ChatwootProvider - -Root provider component that manages global configuration and initialization. - -**Props:** -- \`baseURL\` (string, required): Your Chatwoot instance URL -- \`accountId\` (string|number, required): account identifier -- \`userToken\` (string, required): Authentication token -- \`conversationId\` (number, required): ID of the conversation to display -- \`websocketURL\` (string, optional): WebSocket endpoint, defaults to baseURL/cable -- \`pubsubToken\` (string, optional): PubSub token, defaults to userToken - -### ChatwootConversation - -Component that renders a specific conversation interface. - -### useChatwoot - -Hook to access the Chatwoot configuration within a ChatwootProvider. - -\`\`\`jsx -import { useChatwoot } from '@chatwoot/agent-react-components'; - -function MyComponent() { - const { baseURL, userId, userToken } = useChatwoot(); - // Use configuration as needed -} -\`\`\` -`; - - fs.writeFileSync(path.join(packageDir, 'README.md'), readme); - console.log(' ✓ Generated README.md'); + console.log('✅ Package ready in dist/react-components/'); + console.log(''); + console.log('📦 Publishing options:'); + console.log(' • npm publish: cd dist/react-components && npm publish'); + console.log(' • yalc publish: pnpm package:react:yalc-publish'); + console.log(' • local test: cd dist/react-components && npm pack'); + } catch (error) { + console.error('❌ Build failed:', error.message); + process.exit(1); + } } // Run the script diff --git a/scripts/yalc-publish-react.js b/scripts/yalc-publish-react.js deleted file mode 100644 index 3192acfa0..000000000 --- a/scripts/yalc-publish-react.js +++ /dev/null @@ -1,50 +0,0 @@ -const { execSync } = require('child_process'); -const fs = require('fs'); - -console.log('🔗 Publishing Chatwoot React Components via Yalc...'); - -function yalcPublish() { - try { - // Check if yalc is installed - try { - execSync('yalc --version', { stdio: 'pipe' }); - } catch (error) { - console.error('❌ Yalc is not installed globally.'); - console.log('💡 Install yalc: npm install -g yalc'); - process.exit(1); - } - - // Check if package exists - const packageDir = 'dist/react-components'; - if (!fs.existsSync(packageDir)) { - console.log('📦 Package not found. Building first...'); - execSync('node scripts/publish-react-components.js', { - stdio: 'inherit', - }); - } - - // Publish with yalc - console.log('🚀 Publishing to yalc store...'); - execSync('yalc publish', { - cwd: packageDir, - stdio: 'inherit', - }); - - console.log(''); - console.log('✅ Published to yalc store!'); - console.log(''); - console.log('📖 Next steps in your test project:'); - console.log(' 1. yalc add @chatwoot/agent-react-components'); - console.log(' 2. npm install'); - console.log(' 3. Import and use the components'); - console.log(''); - console.log('🔄 To update after changes:'); - console.log(' 1. pnpm package:react:yalc-publish (in this repo)'); - console.log(' 2. yalc update (in test project)'); - } catch (error) { - console.error('❌ Yalc publish failed:', error.message); - process.exit(1); - } -} - -yalcPublish();