# Plugin Structure Overview

This document outlines the complete structure of the `strapi-plugin-api-select-field` plugin.

## 📁 Directory Structure

```
strapi-plugin-api-select-field/
├── admin/                          # Admin panel components
│   ├── src/
│   │   ├── components/            # React components
│   │   │   ├── Input/            # Main custom field component
│   │   │   ├── Initializer/      # Plugin initialization
│   │   │   └── PluginIcon/       # Plugin icon
│   │   ├── pages/                 # Admin pages
│   │   │   └── HomePage/         # Plugin settings page
│   │   ├── translations/          # Internationalization
│   │   │   └── en.json           # English translations
│   │   ├── index.js               # Admin entry point
│   │   └── pluginId.js            # Plugin identifier
│   └── package.json               # Admin dependencies
├── server/                         # Server-side logic
│   ├── controllers/                # API controllers
│   │   └── index.js               # Main controller
│   ├── routes/                     # API routes
│   │   └── index.js               # Route definitions
│   ├── services/                   # Business logic
│   │   ├── index.js               # Service exports
│   │   └── api-service.js         # API integration service
│   ├── content-types/              # Content type definitions
│   │   └── index.js               # Content type config
│   ├── config/                     # Plugin configuration
│   │   └── index.js               # Config settings
│   ├── bootstrap.js                # Plugin startup
│   ├── destroy.js                  # Plugin cleanup
│   └── register.js                 # Plugin registration
├── examples/                       # Usage examples
│   ├── schema.json                # Content type example
│   ├── strapi-config.js           # Strapi configuration
│   └── .env.example               # Environment variables
├── .eslintrc.js                    # ESLint configuration
├── .prettierrc                     # Prettier configuration
├── jest.config.js                  # Jest test configuration
├── jest.setup.js                   # Jest setup file
├── index.js                        # Main plugin entry point
├── package.json                    # Plugin dependencies
├── PLUGIN_STRUCTURE.md             # This file
└── README.md                       # Plugin documentation
```

## 🔧 Key Components

### Server-Side (`/server`)
- **register.js**: Registers the custom field with Strapi
- **controllers/**: Handles API requests and responses
- **services/**: Business logic for API integration
- **routes/**: Defines API endpoints
- **config/**: Plugin configuration settings

### Admin-Side (`/admin`)
- **Input/**: Main React component for the custom field
- **HomePage/**: Plugin settings page in admin panel
- **translations/**: Internationalization support

### Configuration Files
- **package.json**: Dependencies and metadata
- **.eslintrc.js**: Code quality rules
- **.prettierrc**: Code formatting rules
- **jest.config.js**: Testing configuration

## 🚀 Installation & Usage

1. **Install the plugin**:
   ```bash
   npm install strapi-plugin-api-select-field
   ```

2. **Enable in Strapi config**:
   ```javascript
   // config/plugins.js
   module.exports = {
     'api-select-field': {
       enabled: true,
     },
   };
   ```

3. **Add to Content Types**:
   ```json
   {
     "type": "customField",
     "customField": "plugin::api-select-field.api-select-field",
     "customFieldConfig": {
       "optionsApi": "https://api.example.com/options",
       "selectMode": "single",
       "authMode": "public"
     }
   }
   ```

## 🔐 Security Features

- **SSRF Protection**: URL validation and sanitization
- **Secure Proxy**: Backend proxy for private APIs
- **Input Sanitization**: All inputs are validated and sanitized
- **Authentication**: Admin-only access to proxy endpoints
- **Audit Logging**: Request logging for security monitoring

## 🧪 Testing

```bash
# Run tests
npm test

# Run tests in watch mode
npm run test:watch

# Lint code
npm run lint

# Format code
npm run format
```

## 📦 Building

```bash
# Build the plugin
npm run build

# Development mode
npm run develop
```

## 🌟 Features

- ✅ Single and multiple selection modes
- ✅ Dynamic API integration
- ✅ Public and proxy authentication
- ✅ Search and filtering
- ✅ Error handling and loading states
- ✅ Internationalization support
- ✅ Comprehensive testing
- ✅ Production-ready security
- ✅ Strapi v4+ compatibility

## 🔄 Development Workflow

1. Make changes to source code
2. Run tests: `npm test`
3. Lint code: `npm run lint`
4. Format code: `npm run format`
5. Build plugin: `npm run build`
6. Test in Strapi project
7. Commit and push changes

## 📚 Documentation

- **README.md**: Comprehensive usage guide
- **examples/**: Working examples and configurations
- **Inline Comments**: Detailed code documentation
- **JSDoc**: Function and component documentation

---

This plugin follows Strapi's official plugin development guidelines and is designed for production use in enterprise environments. 