feat: add GitHub Actions workflow for publishing packages and update package.json files with repository and registry information

Author: devbyray

.github/workflows/publish-packages.yml

@@ -0,0 +1,71 @@
+name: Publish Packages
+
+on:
+  release:
+    types: [created]
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version to publish (patch, minor, major, or specific version)'
+        required: true
+        default: 'patch'
+        type: choice
+        options:
+          - patch
+          - minor
+          - major
+          - custom
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://npm.pkg.github.com'
+          scope: '@vue-web-component-library'
+      
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v3
+        with:
+          version: '10.6.3'
+      
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      
+      - name: Build packages
+        run: pnpm build
+      
+      - name: Run tests
+        run: pnpm test
+      
+      - name: Configure Git
+        run: |
+          git config --global user.name "${GITHUB_ACTOR}"
+          git config --global user.email "${GITHUB_ACTOR}@users.noreply.github.com"
+      
+      - name: Version packages
+        if: github.event_name == 'workflow_dispatch'
+        run: |
+          if [ "${{ github.event.inputs.version }}" == "custom" ]; then
+            echo "Please specify the custom version in the next workflow run."
+            exit 1
+          else
+            pnpm -r exec -- npm version ${{ github.event.inputs.version }} --no-git-tag-version
+          fi
+      
+      - name: Publish packages
+        run: pnpm -r publish --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -25,6 +25,35 @@ npm install @vue-web-component-library/input
 npm install @vue-web-component-library/icon
 ```
 
+### Installing from GitHub Packages
+
+The packages are also available on GitHub Packages. To use them:
+
+1. Create or modify your `.npmrc` file in your project root:
+
+```
+@vue-web-component-library:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+```
+
+2. Set your GitHub token as an environment variable:
+
+```bash
+export GITHUB_TOKEN=your_github_token
+```
+
+3. Install the packages:
+
+```bash
+# Install the entire library
+npm install @vue-web-component-library/components
+
+# Or install individual components
+npm install @vue-web-component-library/button
+npm install @vue-web-component-library/input
+npm install @vue-web-component-library/icon
+```
+
 ## Usage
 
 ### Importing Components
@@ -132,6 +161,21 @@ A component for displaying Google Material Icons.
 
 Contributions are welcome! Please feel free to submit a Pull Request.
 
-## License
+## Publishing
+
+This library is published to GitHub Packages using a GitHub Actions workflow. To publish a new version:
+
+1. Create a new release on GitHub or
+2. Manually trigger the "Publish Packages" workflow from the Actions tab, selecting the version increment (patch, minor, major)
+
+### GitHub Actions Workflow
 
+The publishing workflow:
+
+1. Builds all packages
+2. Runs tests
+3. Increments versions (when manually triggered)
+4. Publishes packages to GitHub Packages
+
+## License
 MIT

packages/components/button/package.json

@@ -15,6 +15,11 @@
     "lint": "eslint src --ext .ts,.vue",
     "test": "vitest"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/devbyrayray/vue-web-component-library.git",
+    "directory": "packages/components/button"
+  },
   "keywords": [
     "vue",
     "web-components",
@@ -26,7 +31,7 @@
   "license": "MIT",
   "sideEffects": false,
   "publishConfig": {
-    "access": "public"
+    "registry": "https://npm.pkg.github.com"
   },
   "dependencies": {
     "@vue-web-component-library/core": "workspace:*",

packages/components/icon/package.json

@@ -15,6 +15,11 @@
     "lint": "eslint src --ext .ts,.vue",
     "test": "vitest"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/devbyrayray/vue-web-component-library.git",
+    "directory": "packages/components/icon"
+  },
   "keywords": [
     "vue",
     "web-components",
@@ -27,7 +32,7 @@
   "license": "MIT",
   "sideEffects": false,
   "publishConfig": {
-    "access": "public"
+    "registry": "https://npm.pkg.github.com"
   },
   "dependencies": {
     "@vue-web-component-library/core": "workspace:*",

packages/components/input/package.json

@@ -15,6 +15,11 @@
     "lint": "eslint src --ext .ts,.vue",
     "test": "vitest"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/devbyrayray/vue-web-component-library.git",
+    "directory": "packages/components/input"
+  },
   "keywords": [
     "vue",
     "web-components",
@@ -26,7 +31,8 @@
   "license": "MIT",
   "sideEffects": false,
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://npm.pkg.github.com"
   },
   "dependencies": {
     "@vue-web-component-library/core": "workspace:*",

packages/components/package.json

@@ -15,6 +15,11 @@
     "lint": "eslint src --ext .ts,.vue",
     "test": "vitest"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/devbyrayray/vue-web-component-library.git",
+    "directory": "packages/components"
+  },
   "keywords": [
     "vue",
     "web-components",
@@ -26,7 +31,7 @@
   "license": "MIT",
   "sideEffects": false,
   "publishConfig": {
-    "access": "public"
+    "registry": "https://npm.pkg.github.com"
   },
   "dependencies": {
     "@vue-web-component-library/button": "workspace:*",

packages/core/package.json

@@ -15,6 +15,14 @@
     "lint": "eslint src --ext .ts,.vue",
     "test": "vitest"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/devbyrayray/vue-web-component-library.git",
+    "directory": "packages/core"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  },
   "keywords": [
     "vue",
     "web-components",
@@ -25,8 +33,5 @@
   "author": "",
   "license": "MIT",
   "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  },
   "packageManager": "[email protected]"
 }