Refactor code structure for improved readability and maintainability

Author: devbyray

.github/workflows/publish-packages.yml

@@ -35,6 +35,7 @@ jobs:
           node-version: '20'
           registry-url: 'https://npm.pkg.github.com'
           scope: '@devbyrayray'
+          cache: 'pnpm'
 
       - name: Setup PNPM
         uses: pnpm/action-setup@v3

README.md

@@ -17,12 +17,12 @@ You can install individual components or the entire library:
 
 ```bash
 # Install the entire library
-npm install @vue-web-component-library/components
+npm install @devbyrayray/vue-wc-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
+npm install @devbyrayray/vue-wc-button
+npm install @devbyrayray/vue-wc-input
+npm install @devbyrayray/vue-wc-icon
 ```
 
 ### Installing from GitHub Packages
@@ -32,7 +32,7 @@ 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
+@devbyrayray:registry=https://npm.pkg.github.com
 //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
 ```
 
@@ -46,12 +46,12 @@ export GITHUB_TOKEN=your_github_token
 
 ```bash
 # Install the entire library
-npm install @vue-web-component-library/components
+npm install @devbyrayray/vue-wc-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
+npm install @devbyrayray/vue-wc-button
+npm install @devbyrayray/vue-wc-input
+npm install @devbyrayray/vue-wc-icon
 ```
 
 ## Usage
@@ -62,12 +62,12 @@ You can import each component individually:
 
 ```js
 // Import specific components
-import '@vue-web-component-library/button';
-import '@vue-web-component-library/input';
-import '@vue-web-component-library/icon';
+import '@devbyrayray/vue-wc-button';
+import '@devbyrayray/vue-wc-input';
+import '@devbyrayray/vue-wc-icon';
 
 // Or import everything
-import '@vue-web-component-library/components';
+import '@devbyrayray/vue-wc-components';
 ```
 
 ### Using in HTML

package.json

@@ -36,6 +36,7 @@
     "vue": "^3.5.13"
   },
   "dependencies": {
-    "jsdom": "^26.0.0"
+    "@devbyrayray/vue-wc-core": "workspace:*",
+    "@devbyrayray/vue-wc-vite": "workspace:*"
   }
 }

packages/components/button/package.json

@@ -33,8 +33,8 @@
     "registry": "https://npm.pkg.github.com"
   },
   "dependencies": {
-    "@vue-web-component-library/core": "workspace:*",
-    "@vue-web-component-library/vite": "workspace:*",
+    "@devbyrayray/vue-wc-core": "workspace:*",
+    "@devbyrayray/vue-wc-vite": "workspace:*",
     "vue": "^3.5.0"
   },
   "devDependencies": {

packages/components/button/src/Button.ce.vue

@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { defineProps, defineEmits } from 'vue';
-import { BaseProps, Size, Variant } from '@vue-web-component-library/core';
+import { BaseProps, Size, Variant } from '@devbyrayray/vue-wc-core';
 
 export interface ButtonProps extends /* @vue-ignore */ BaseProps {
   /**

packages/components/button/src/index.ts

@@ -1,6 +1,6 @@
 import { defineCustomElement as VueDefineCustomElement } from 'vue';
 import ButtonComponent from './Button.ce.vue';
-import { defineCustomElement, COMPONENT_NAMES } from '@vue-web-component-library/core';
+import { defineCustomElement, COMPONENT_NAMES } from '@devbyrayray/vue-wc-core';
 
 // Define the Button as a Vue custom element
 const ButtonElement = VueDefineCustomElement(ButtonComponent);

packages/components/button/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineBaseConfig } from '@vue-web-component-library/vite';
+import { defineBaseConfig } from '@devbyrayray/vue-wc-vite';
 
 export default defineBaseConfig({
   name: 'vwcButton',

packages/components/icon/package.json

@@ -34,8 +34,8 @@
     "registry": "https://npm.pkg.github.com"
   },
   "dependencies": {
-    "@vue-web-component-library/core": "workspace:*",
-    "@vue-web-component-library/vite": "workspace:*",
+    "@devbyrayray/vue-wc-core": "workspace:*",
+    "@devbyrayray/vue-wc-vite": "workspace:*",
     "vue": "^3.5.0"
   }
 }

packages/components/icon/src/Icon.ce.vue

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { defineProps, computed } from 'vue';
-import { BaseProps, Size } from '@vue-web-component-library/core';
+import { BaseProps, Size } from '@devbyrayray/vue-wc-core';
 
 export interface IconProps extends /* @vue-ignore */ BaseProps {
   /**

packages/components/icon/src/index.ts

@@ -1,6 +1,6 @@
 import { defineCustomElement as VueDefineCustomElement } from 'vue';
 import IconComponent from './Icon.ce.vue';
-import { defineCustomElement, COMPONENT_NAMES } from '@vue-web-component-library/core';
+import { defineCustomElement, COMPONENT_NAMES } from '@devbyrayray/vue-wc-core';
 
 // Define the Icon as a Vue custom element
 const IconElement = VueDefineCustomElement(IconComponent);