Project Structure

Recommended Folder Layout

@myorg/atlas-contact-controls/
├── src/
│   ├── controls/
│   │   ├── PhoneInput/
│   │   │   ├── PhoneEditComponent.tsx
│   │   │   ├── PhoneViewComponent.tsx
│   │   │   ├── PhoneDesignComponent.tsx
│   │   │   ├── phoneInputPlugin.ts       ← ReactControlPlugin definition
│   │   │   └── index.ts                  ← Re-exports
│   │   ├── AddressPicker/
│   │   │   ├── AddressEditComponent.tsx
│   │   │   ├── AddressViewComponent.tsx
│   │   │   ├── addressPickerPlugin.ts
│   │   │   └── index.ts
│   │   └── EmailVerify/
│   │       └── ...
│   ├── validators/
│   │   ├── phoneValidator.ts
│   │   └── postalCodeValidator.ts
│   ├── utils/
│   │   └── phoneFormatter.ts
│   └── index.ts                           ← Package entry: exports + register()
├── __tests__/
│   ├── PhoneInput.test.tsx
│   └── AddressPicker.test.tsx
├── package.json
├── tsconfig.json
└── vite.config.ts                         ← Library build config

src/index.ts — The Entry Point

// src/index.ts
import { getControlRegistry } from '@atlas-forms/control-registry-js';
import { registerValidator } from '@atlas-forms/validation-js';
import { phoneInputPlugin } from './controls/PhoneInput';
import { addressPickerPlugin } from './controls/AddressPicker';
import { emailVerifyPlugin } from './controls/EmailVerify';
import { phoneValidator } from './validators/phoneValidator';
import { postalCodeValidator } from './validators/postalCodeValidator';

// Export plugins for individual import
export { phoneInputPlugin, addressPickerPlugin, emailVerifyPlugin };

// Convenience registration function
export function registerContactControls(): void {
  const registry = getControlRegistry();
  registry.register(phoneInputPlugin);
  registry.register(addressPickerPlugin);
  registry.register(emailVerifyPlugin);

  registerValidator('phone', phoneValidator);
  registerValidator('postalCode', postalCodeValidator);
}

package.json

{
  "name": "@myorg/atlas-contact-controls",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "files": ["dist"],
  "scripts": {
    "build": "vite build",
    "test": "vitest run",
    "type-check": "tsc --noEmit"
  },
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "@atlas-forms/types-js": "^1.0.0",
    "@atlas-forms/control-registry-js": "^1.0.0",
    "@atlas-forms/validation-js": "^1.0.0"
  },
  "devDependencies": {
    "react": "^18.0.0",
    "@atlas-forms/types-js": "^1.0.0",
    "@atlas-forms/control-registry-js": "^1.0.0",
    "@atlas-forms/validation-js": "^1.0.0",
    "typescript": "^5.0.0",
    "vite": "^5.0.0",
    "vitest": "^1.0.0"
  }
}