Polydock Forms

A React-based form library for Polydock registration with hooks and components.

Features

• Registration Form Component: Pre-built form for Polydock app registration
• React Hooks: Reusable hooks for API integration (useRegions, useRegister)
• TypeScript Support: Full type safety and autocompletion
• Dual Build: Static demo app and reusable library output
• API Integration: Connects to /api/register and /api/regions endpoints

Development

Prerequisites

• Node.js 18+
• npm or yarn

Setup

npm install

Running the Demo

npm run dev

This starts a development server with:

• Registration form demo with Tailwind CSS styling
• Mock API for testing (no backend required)
• Hot module replacement

Building

Static Demo Build

npm run build

Creates a static build in dist/ for deployment.

Library Build

npm run build:lib

Creates library files in dist/ for importing in other projects.

Usage

As a Library

import { RegistrationForm, useRegions, useRegister } from 'polydock-forms';

// Use the complete form component
function MyApp() {
  return (
    <RegistrationForm
      apiBaseUrl="https://your-api.com/api"
      onSuccess={(response) => console.log('Success:', response)}
      onError={(error) => console.error('Error:', error)}
    />
  );
}

// Or use individual hooks
function CustomForm() {
  const { regions, loading, error } = useRegions('https://your-api.com/api');
  const { register, loading: registering } = useRegister('https://your-api.com/api');
  
  // Your custom form implementation
}

Available Hooks

useRegions(apiBaseUrl?)

Fetches available regions and apps from /api/regions.

Returns:

• regions: Array of regions with their apps
• loading: Boolean loading state
• error: Error message if any
• refetch: Function to refetch data

useRegister(apiBaseUrl?)

Handles registration form submission to /api/register.

Returns:

• register: Function to submit registration data
• loading: Boolean loading state
• error: Error message if any
• response: API response object
• reset: Function to reset state

Component Props

RegistrationForm

Prop	Type	Description
apiBaseUrl	string	Base URL for API calls (default: /api)
onSuccess	(response) => void	Success callback
onError	(error) => void	Error callback

API Integration

Expected API Endpoints

GET /api/regions

Returns available regions and apps:

{
  "status": "success",
  "data": {
    "regions": [
      {
        "id": 1,
        "label": "USA",
        "uuid": null,
        "apps": [
          {
            "uuid": "app-uuid-123",
            "label": "Drupal Commerce"
          }
        ]
      }
    ]
  }
}

POST /api/register

Accepts registration data:

{
  "polydock_store_app_uuid": "app-uuid-123",
  "first_name": "John",
  "last_name": "Doe",
  "email": "[email protected]",
  "type": "trial",
  "accepted_privacy_policy": true,
  "accepted_aup": true
}

TypeScript Types

All API types are exported from the library:

import type { 
  Region, 
  App, 
  RegionsResponse, 
  RegisterFormData, 
  RegisterResponse 
} from 'polydock-forms';

Development Notes

• Development Mode: Uses mock API data, no backend required
• Production Mode: Connects to real polydock-engine API endpoints
• The library build excludes React/ReactDOM as external dependencies
• Styling uses Tailwind CSS with responsive design
• Mock API simulates realistic loading times and responses