# inPIPE Vue Source Code

This folder contains the **original source code** for the inPIPE by Seresa WordPress plugin.
The admin panel UI is built with Vue.js 3 and compiled using Vite. The compiled output lives in the `/dist/` directory and is generated from these human-readable files.

---

## 🛡️ Tech Stack

* **Vue.js 3**: Frontend JavaScript framework
* **Vite**: Lightning-fast build tool for development and production
* **Tailwind CSS**: Utility-first CSS framework for styling
* **PostCSS**: CSS preprocessor used alongside Tailwind
* **Vitest**: Unit and integration test runner
* **Grunt**: Used for WordPress translation `.pot` file generation and packaging

---

## 🛆 Project Structure

```
/src
  ├── base/        → Core UI components (buttons, inputs, modals, etc.)
  ├── config/      → Tailwind directives, global styles, and theme configs
  ├── free/        → Free version entry point and main app components
  ├── shared/      → Shared components (settings, subscriptions, UTM tools)
  ├── utils/       → API endpoints, Axios config, translation, and utilities
  └── index.php    → WordPress security file
```

**Note**: Build configuration files (`vite.config.js`, `package.json`, `Gruntfile.cjs`, etc.) are stored in `/src/` to keep the plugin root clean for production deployment.

---

## 🛠️ Build Instructions

You need **Node.js v18+** and **npm v9+** installed.

### Install dependencies

```bash
npm install
```

### Build Free Version

```bash
npm run build:free
```

Generates the free admin assets in `/dist/`.

### Live Development

```bash
npm run dev
```

Launches a Vite development server with hot module reloading.

---

## 🧪 Run Tests

```bash
npm run test
```

Runs unit and integration tests using **Vitest**.

---

## 🌐 Generate Translations

Use Grunt to generate or update translation files:

```bash
npm run update-pot
npm run update-translations
```

---

## 🛠️ Build Configuration Files

The following build configuration files are stored in `/src/` to keep the plugin root clean for production. During the build process, these are temporarily copied to the project root as needed:

* `src/vite.config.js` — Vite configuration for building the Vue-based admin panel
* `src/package.json` — Project dependencies and build/test scripts
* `src/postcss.config.cjs` — PostCSS setup used with Tailwind and Vite
* `src/tailwind.config.js` — Tailwind CSS directives and design config
* `src/tsconfig.json` — TypeScript compiler config (used in modern Vue + Vite environments)
* `src/babel.config.cjs` — Babel configuration for JS transpilation

**Note**: `Gruntfile.cjs` remains in the project root as it manages the overall build and packaging process.

These files are required to properly compile the plugin's assets into `/dist/`, ensuring WordPress.org guideline compliance.

Other files like `.txt`, `.sh`, `.lock`, `composer.json`, `uninstall.php`, `*.test.php`, and Cypress config files are **not required for building** the admin interface, but may be included for full development or QA tooling context.

---

## 📂 Actual Directory Contents

Based on the current project structure:

### `/src/base/` - Core UI Components
* `inPipeBaseButton.vue` - Reusable button component
* `inPipeBaseCard.vue` - Card layout component
* `inPipeBaseControl.vue` - Form control wrapper
* `inPipeBaseInput.vue` - Input field component
* `inPipeBaseModal.vue` - Modal dialog component
* `inPipeBaseProgress.vue` - Progress bar component
* `inPipeBaseSelect.vue` - Select dropdown component
* `inPipeBaseTable.vue` - Data table component
* `inPipeBaseText.vue` - Text display component
* `inPipeBaseToggle.vue` - Toggle switch component
* `inPipeBaseToolTip.vue` - Tooltip component

### `/src/config/` - Configuration & Styles
* `inPipeConfig.js` - Main configuration file
* `inPipeGlobalColors.css` - Global color definitions
* `inPipeStyle.css` - Core styles
* `inPipeTailwindDirectives.css` - Tailwind directives

### `/src/free/` - Free Version Components
* `inPipeApp.vue` - Main application component
* `inPipeEnvHandler.js` - Environment handling logic
* `inPipeMain.js` - Application entry point

### `/src/shared/` - Shared Components
* `inPipeSettingsComponent.vue` - Settings interface
* `inPipeSubscriptionComponent.vue` - Subscription management
* `inPipeUTMCoderComponent.vue` - UTM parameter tools

### `/src/utils/` - Utilities & API
* `inPipeApiEndpoints.js` - API endpoint definitions
* `inPipeAxios.js` - Axios HTTP client configuration
* `inPipeTranslate.js` - Translation utilities
* `inPipeUtmDecoder.js` - UTM parameter decoder

---

## 📄 License & Compliance

* All code in this folder is human-readable and open source.
* Files in `/dist/` are compiled from this source using Vite.
* The required build configuration files are included in the project root.
* This project complies with WordPress.org's [plugin code guidelines](https://developer.wordpress.org/plugins/wordpress-org/detailed-plugin-guidelines/#4-code-must-be-mostly-human-readable).

For any questions, contact [support@seresa.io](mailto:support@seresa.io)