Skip to content

FILE_STRUCTURE.md

Latest commit

 

History

History
349 lines (288 loc) · 11.1 KB

FILE_STRUCTURE.md

File metadata and controls

349 lines (288 loc) · 11.1 KB

📂 Complete File Structure

This document provides a complete overview of the project structure.

🌲 Directory Tree

forms-poc/
│
├── 📄 README.md                          # Main project documentation
├── 📄 PROJECT_SUMMARY.md                 # Complete project overview
├── 📄 GETTING_STARTED.md                 # Detailed setup guide
├── 📄 NL_DESIGN_SYSTEM.md               # Accessibility integration guide
├── 📄 JSONLOGIC_BUILDER.md              # Visual logic builder roadmap
├── 📄 FILE_STRUCTURE.md                 # This file
├── 📄 package.json                       # Root package config (workspaces)
├── 📄 .gitignore                         # Git ignore rules
│
├── 📁 packages/                          # Monorepo packages
│   │
│   ├── 📁 shared/                        # Shared TypeScript utilities
│   │   ├── 📄 package.json
│   │   ├── 📄 tsconfig.json
│   │   └── 📁 src/
│   │       ├── 📄 index.ts               # Package exports
│   │       ├── 📄 types.ts               # TypeScript type definitions
│   │       ├── 📄 validation.ts          # Validation utilities
│   │       └── 📄 logic.ts               # JSONLogic utilities
│   │
│   ├── 📁 renderer/                      # Form renderer package
│   │   ├── 📄 package.json
│   │   ├── 📄 tsconfig.json
│   │   ├── 📄 vite.config.ts
│   │   ├── 📄 index.html                 # Development demo page
│   │   └── 📁 src/
│   │       ├── 📄 index.ts               # Package exports
│   │       └── 📁 components/
│   │           ├── 📄 base-field.ts      # Base field component
│   │           ├── 📄 text-field.ts      # Text input component
│   │           ├── 📄 email-field.ts     # Email input component
│   │           ├── 📄 number-field.ts    # Number input component
│   │           ├── 📄 textarea-field.ts  # Textarea component
│   │           └── 📄 form-renderer.ts   # Main renderer component
│   │
│   ├── 📁 builder/                       # Form builder package
│   │   ├── 📄 package.json
│   │   ├── 📄 tsconfig.json
│   │   ├── 📄 vite.config.ts
│   │   ├── 📄 index.html                 # Development demo page
│   │   └── 📁 src/
│   │       ├── 📄 index.ts               # Package exports
│   │       └── 📁 components/
│   │           ├── 📄 form-builder.ts    # Main builder component
│   │           ├── 📄 field-palette.ts   # Field type palette
│   │           └── 📄 field-editor.ts    # Property editor panel
│   │
│   └── 📁 backend/                       # Django package
│       ├── 📄 setup.py                   # Python package setup
│       ├── 📄 requirements.txt           # Python dependencies
│       ├── 📄 README.md                  # Backend documentation
│       └── 📁 forms_builder/             # Django app
│           ├── 📄 __init__.py
│           ├── 📄 apps.py                # Django app config
│           ├── 📄 models.py              # Django models
│           ├── 📄 admin.py               # Django admin
│           ├── 📄 views.py               # API views
│           ├── 📄 urls.py                # URL routing
│           ├── 📄 validation.py          # Server-side validation
│           └── 📁 migrations/            # Database migrations
│               └── 📄 __init__.py
│
└── 📁 example-django/                    # Example Django project
    ├── 📄 README.md                      # Example project documentation
    ├── 📄 QUICKSTART.md                  # 5-minute quick start
    ├── 📄 manage.py                      # Django management script
    ├── 📄 requirements.txt               # Python dependencies
    ├── 📄 setup.sh                       # Setup script (Linux/Mac)
    ├── 📄 setup.bat                      # Setup script (Windows)
    ├── 📄 start.sh                       # Start script (Linux/Mac)
    ├── 📄 .gitignore                     # Git ignore rules
    │
    └── 📁 demo_project/                  # Django project
        ├── 📄 __init__.py
        ├── 📄 settings.py                # Django settings
        ├── 📄 urls.py                    # URL routing
        ├── 📄 wsgi.py                    # WSGI config
        │
        ├── 📁 fixtures/                  # Example data
        │   └── 📄 example_forms.json     # 3 example forms
        │
        ├── 📁 static/                    # Static files
        │   └── 📁 forms/                 # Form-related static files
        │
        └── 📁 templates/                 # Django templates
            ├── 📄 base.html              # Base template
            ├── 📄 home.html              # Home page
            └── 📁 forms/
                ├── 📄 builder.html       # Builder page
                └── 📄 renderer.html      # Renderer page

📦 Package Dependencies

Frontend Packages

@forms-poc/shared
  ├── json-logic-js
  └── typescript

@forms-poc/renderer
  ├── @forms-poc/shared
  ├── lit
  ├── typescript
  └── vite

@forms-poc/builder
  ├── @forms-poc/shared
  ├── @forms-poc/renderer
  ├── lit
  ├── @dnd-kit/core (not yet installed)
  ├── typescript
  └── vite

Backend Package

forms_builder
  ├── Django >= 4.0
  └── json-logic >= 1.0.0

📊 File Statistics

By Category

Documentation: 7 markdown files

  • README.md (main)
  • PROJECT_SUMMARY.md
  • GETTING_STARTED.md
  • NL_DESIGN_SYSTEM.md
  • JSONLOGIC_BUILDER.md
  • FILE_STRUCTURE.md
  • example-django/README.md
  • example-django/QUICKSTART.md
  • packages/backend/README.md

TypeScript: ~15 source files

  • 4 shared utilities
  • 6 renderer components
  • 3 builder components
  • 3 config files

Python: ~10 source files

  • 3 models
  • 1 admin
  • 1 views
  • 1 urls
  • 1 validation
  • 1 apps

Configuration: ~8 files

  • 4 package.json
  • 3 tsconfig.json
  • 3 vite.config.ts
  • 1 setup.py
  • 2 requirements.txt

Templates: 5 HTML files

  • 1 base template
  • 1 home page
  • 2 form pages
  • 2 demo pages

Scripts: 4 files

  • 2 setup scripts (sh, bat)
  • 2 start scripts

🎯 Key Files by Purpose

Getting Started

  1. example-django/QUICKSTART.md - Start here for 5-minute setup
  2. GETTING_STARTED.md - Detailed setup instructions
  3. README.md - Project overview

Development

  1. packages/shared/src/types.ts - Core type definitions
  2. packages/renderer/src/components/form-renderer.ts - Main renderer
  3. packages/builder/src/components/form-builder.ts - Main builder
  4. packages/backend/forms_builder/models.py - Django models

Configuration

  1. package.json (root) - Workspace configuration
  2. example-django/demo_project/settings.py - Django settings
  3. packages/*/tsconfig.json - TypeScript config
  4. packages/*/vite.config.ts - Build config

Demo & Examples

  1. example-django/demo_project/fixtures/example_forms.json - Example forms
  2. packages/renderer/index.html - Renderer demo
  3. packages/builder/index.html - Builder demo
  4. example-django/templates/ - Django templates

🔍 Finding What You Need

"I want to..."

...understand the project → Read README.md and PROJECT_SUMMARY.md

...get started quickly → Follow example-django/QUICKSTART.md

...understand the types → Check packages/shared/src/types.ts

...modify the renderer → Edit files in packages/renderer/src/components/

...modify the builder → Edit files in packages/builder/src/components/

...customize Django admin → Edit packages/backend/forms_builder/admin.py

...add validation → Edit packages/shared/src/validation.ts (client) → Edit packages/backend/forms_builder/validation.py (server)

...modify templates → Edit files in example-django/templates/

...add example forms → Edit example-django/demo_project/fixtures/example_forms.json

...understand JSONLogic → Read JSONLOGIC_BUILDER.md

...integrate NL Design System → Read NL_DESIGN_SYSTEM.md

📝 Important Files Explained

Root Level

package.json

  • Defines npm workspace structure
  • Contains build scripts for all packages
  • Manages shared dependencies

README.md

  • Main entry point for documentation
  • Quick start guide
  • Links to all other docs

PROJECT_SUMMARY.md

  • Complete overview of deliverables
  • Feature checklist
  • Statistics and metrics

Packages

packages/shared/src/types.ts

  • All TypeScript interfaces
  • Form, field, step definitions
  • Validation and logic types
  • Used by renderer and builder

packages/renderer/src/components/form-renderer.ts

  • Main form rendering component
  • Handles multi-step logic
  • Manages form state
  • Processes submissions
  • ~350 lines of code

packages/builder/src/components/form-builder.ts

  • Drag-and-drop interface
  • Field management
  • Property editing
  • JSON export
  • ~700 lines of code

packages/backend/forms_builder/models.py

  • FormDefinition model
  • FormSubmission model
  • FormValidationRule model
  • Django ORM definitions

packages/backend/forms_builder/admin.py

  • Custom Django admin
  • Form builder widget integration
  • Submission viewer
  • Inline validation rules

Example Django

example-django/demo_project/settings.py

  • Django configuration
  • App registration
  • Database setup
  • Static files config

example-django/templates/home.html

  • Landing page with features
  • Quick links to demos
  • Getting started guide

example-django/demo_project/fixtures/example_forms.json

  • 3 pre-configured forms
  • Ready to load and test
  • Examples of different patterns

🛠 Build Artifacts

When you build the project, these directories will be created:

packages/shared/dist/           # Compiled TypeScript
packages/renderer/dist/         # Built renderer bundle
packages/builder/dist/          # Built builder bundle
example-django/db.sqlite3       # SQLite database
example-django/static/          # Collected static files

These are not in version control (.gitignore).

📈 Lines of Code (Approximate)

Component Files Lines
TypeScript 15 ~3,000
Python 10 ~1,500
HTML/Templates 7 ~800
Documentation 9 ~3,500
Configuration 10 ~400
Total 51 ~9,200

🎯 Next Steps

  1. Explore: Browse through key files listed above
  2. Run: Follow QUICKSTART.md to see it in action
  3. Modify: Start with small changes to templates
  4. Extend: Add new field types or features
  5. Deploy: Follow deployment guide in docs

Need help finding something? Check the documentation files or search for specific terms in the codebase.