feat: Add Global Form Auto-Localization demo to community

.changeset/small-moles-play.md

@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+Add global form auto-localization community demo

community/lingo-global-forms/.env.example

@@ -0,0 +1 @@
+VITE_LINGO_API_KEY=your_lingo_api_key_here

community/lingo-global-forms/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react-hooks/recommended',
+    ],
+    ignorePatterns: ['dist', '.eslintrc.cjs'],
+    parser: '@typescript-eslint/parser',
+    plugins: ['react-refresh'],
+    rules: {
+        'react-refresh/only-export-components': [
+            'warn',
+            { allowConstantExport: true },
+        ],
+    },
+}

community/lingo-global-forms/.gitignore

@@ -0,0 +1,123 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# IntelliJ
+.idea
+
+# VSCode
+.vscode
+*.code-workspace

community/lingo-global-forms/README.md

@@ -0,0 +1,135 @@
+# 🌐 Global Form Auto-Localization
+
+A demo showcasing **Lingo.dev's** structured object translation for automatic form localization.
+
+![Lingo.dev](https://img.shields.io/badge/Powered%20by-Lingo.dev-6366f1?style=for-the-badge)
+
+## Demo
+
+### [🎥 Watch the Demo Video](./public/demo-video.mp4)
+*(Click to play)*
+
+## What This App Does
+
+This demo demonstrates a real-world use case: **writing a form once in English and automatically localizing it into multiple languages** using Lingo.dev's SDK.
+
+Instead of translating plain text, this app translates **structured form content**:
+
+- Form title and description
+- Field labels
+- Input placeholders
+- Helper text
+- Validation error messages
+- Submit button text
+- **Supported Field Types**: Text, TextArea, Radio Groups, Checkboxes, Dropdowns (Select), Date inputs
+- **Option Translation**: Automatically translates options for choice-based fields
+
+## Why This Use Case Matters
+
+Forms are everywhere in web applications—contact forms, registration flows, checkout pages, surveys. Traditionally, localizing forms requires:
+
+1. Extracting all strings into translation files
+2. Managing keys for every field property
+3. Coordinating with translators for each language
+4. Keeping translations in sync as forms evolve
+
+With Lingo.dev, you can **skip the complexity**. Just pass your form structure to the API, and get back a perfectly translated form—instantly.
+
+## Lingo.dev Features Demonstrated
+
+| Feature | Description |
+|---------|-------------|
+| **`localizeObject()`** | Translates structured JavaScript objects while preserving structure |
+| **Multi-language Support** | Supports EN, ES, FR, DE, HI (easily extensible) |
+| **Structured Translation** | Translates nested form properties, not just flat strings |
+| **API Key Authentication** | Secure API key configuration via environment variables |
+
+## How to Run Locally
+
+### Prerequisites
+
+- Node.js 18+ installed
+- A [Lingo.dev](https://lingo.dev) API key
+
+### Step-by-Step Setup
+
+1. **Navigate to the demo directory:**
+
+   ```bash
+   cd community/lingo-global-forms
+   ```
+
+2. **Install dependencies:**
+
+   ```bash
+   npm install
+   ```
+
+3. **Configure your API key:**
+
+   Create a `.env` file in the project root:
+
+   ```bash
+   cp .env.example .env
+   ```
+
+   Then edit `.env` and add your Lingo.dev API key:
+
+   ```
+   VITE_LINGO_API_KEY=your_actual_api_key_here
+   ```
+
+   > 💡 Get your API key at [lingo.dev](https://lingo.dev)
+
+4. **Start the development server:**
+
+   ```bash
+   npm run dev
+   ```
+
+5. **Open your browser:**
+
+   Navigate to [http://localhost:3000](http://localhost:3000)
+
+## Usage
+
+1. **Edit the form** in the left panel—change labels, placeholders, error messages
+2. **Select a language** from the dropdown in the preview panel
+3. **Watch the form translate** automatically
+4. **Submit the form** with empty required fields to see translated validation errors
+
+## Project Structure
+
+```
+lingo-global-forms/
+├── src/
+│   ├── components/
+│   │   ├── FormBuilder.tsx     # Form editing panel
+│   │   ├── FormPreview.tsx     # Live preview with validation
+│   │   └── LanguageSelect.tsx  # Language dropdown
+│   ├── lib/
+│   │   ├── lingo.ts            # Lingo.dev SDK initialization
+│   │   └── translateForm.ts    # Translation logic with caching
+│   ├── types/
+│   │   └── form.ts             # TypeScript interfaces
+│   ├── App.tsx                 # Main application
+│   ├── main.tsx                # Entry point
+│   └── index.css               # Styles
+├── .env.example                # Environment variable template
+├── package.json
+└── README.md
+```
+
+## Environment Variables
+
+| Variable | Description | Required |
+|----------|-------------|----------|
+| `VITE_LINGO_API_KEY` | Your Lingo.dev API key | Yes |
+
+## License
+
+This project is part of the [Lingo.dev](https://github.com/lingodotdev/lingo.dev) community contributions and is licensed under the Apache-2.0 license.
+
+---
+
+Built with ❤️ by the community for [Lingo.dev](https://lingo.dev)

community/lingo-global-forms/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Global Form Auto-Localization demo using Lingo.dev - translate form content instantly" />
+    <title>Global Form Localizer | Lingo.dev Demo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>