code added

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env"]
+}

.gitignore

@@ -1 +1,2 @@
-/.idea/
+/.idea/
+/node_modules/

CHANGELOG.md

@@ -0,0 +1,6 @@
+# AvalynxForm Changelog
+
+## 0.0.1
+- [x] Initial release
+
+

README.md

@@ -1 +1,142 @@
-# avalaynx-form
+# AvalynxForm
+
+AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
+
+## Features
+
+- **Form Handling**: Simplifies the process of creating and managing forms in your web applications.
+- **Bootstrap Integration**: Designed for seamless integration with Bootstrap >= 5.3.
+- **Easy to Use**: Simple API for creating and managing forms within your web applications.
+
+## Example
+
+Here's a simple example of how to use AvalynxForm in your project:
+
+* [Overview](https://avalynx-form.jbs-newmedia.de/examples/index.html)
+* [Form](https://avalynx-form.jbs-newmedia.de/examples/form.html)
+
+## Installation
+
+To use AvalynxForm in your project, you can directly include it in your HTML file. Ensure you have Bootstrap 5.3 or higher included in your project for AvalynxForm to work correctly.
+
+First, include Bootstrap:
+
+```html
+<!-- Bootstrap -->
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+```
+
+Then, include AvalynxForm:
+
+```html
+<script src="path/to/avalynx-form.js"></script>
+```
+
+Replace `path/to/avalynx-form.js` with the actual path to the file in your project.
+
+## Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-form/))
+
+AvalynxForm is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/avalynx-form.js"></script>
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.
+
+## Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-form))
+
+AvalynxForm is also available as a npm package. You can add it to your project with the following command:
+
+```bash
+npm install avalynx-form
+```
+
+After installing, you can import AvalynxForm into your JavaScript file like this:
+
+```javascript
+import { AvalynxForm } from 'avalynx-form';
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.
+
+## Installation via Symfony AssetMapper
+
+```bash
+php bin/console importmap:require avalynx-form
+```
+
+After installing, you can import AvalynxForm into your JavaScript file like this:
+
+```javascript
+import { AvalynxForm } from 'avalynx-form';
+```
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.
+
+## Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-form))
+
+AvalynxForm is also available as a Composer package. You can add it to your project with the following command:
+
+```bash
+composer require avalynx/avalynx-form
+```
+
+After installing, you can import AvalynxForm into your HTML file like this:
+
+```html
+<script src="vendor/avalynx/avalynx-form/dist/js/avalynx-form.js"></script>
+``` 
+
+Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxForm displays correctly.
+
+## Usage
+
+To use AvalynxForm in your project, include the AvalynxForm JavaScript file in your project and initialize the class with the appropriate selector.
+
+```javascript
+new AvalynxForm("#myForm", {
+    apiParams: {
+        extraData1: 'value1',
+        extraData2: 'value2'
+    },
+    onSuccess: function(response) {
+        console.log('Form submission was successful:', response);
+    },
+    onError: function(response) {
+        console.error('Form submission failed:', response);
+    }
+});
+```
+
+## Options
+
+AvalynxForm allows the following options for customization:
+
+- `id`: (string) The ID of the element to attach the form to.
+- `options`: An object containing the following keys:
+  - `apiParams`: (object) Additional parameters to be sent with the form data (default: `{}`).
+  - `loader`: (object) An instance of AvalynxLoader to use as the loader for the modal (default: `null`).
+  - `onSuccess`: (function) A callback function to be executed when the form submission is successful (default: `null`).
+  - `onError`: (function) A callback function to be executed when the form submission fails (default: `null`).
+
+## Contributing
+
+Contributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes or improvements. We're looking for contributions in the following areas:
+
+- Bug fixes
+- Feature enhancements
+- Documentation improvements
+
+Before submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project.
+
+## License
+
+AvalynxForm is open-sourced software licensed under the [MIT license](LICENSE).
+
+## Contact
+
+If you have any questions, feature requests, or issues, please open an issue on our [GitHub repository](https://github.com/avalynx/avalynx-form/issues) or submit a pull request.
+
+Thank you for considering AvalynxForm for your project!

__tests__/avalynx-form.test.js

@@ -0,0 +1,65 @@
+import { AvalynxForm } from '../dist/js/avalynx-form.esm.js';
+
+describe('AvalynxForm', () => {
+    let form;
+    let avalynxForm;
+
+    beforeEach(() => {
+        form = document.createElement('form');
+        form.id = 'test-form';
+        form.action = '/submit';
+        form.method = 'POST';
+        form.innerHTML = `
+            <div class="form-group">
+                <input type="text" id="input1" name="input1" class="form-control" required>
+                <div class="invalid-feedback">Please provide a valid input.</div>
+            </div>
+            <button type="submit">Submit</button>
+        `;
+        document.body.appendChild(form);
+
+        avalynxForm = new AvalynxForm('test-form', {
+            apiParams: { extraParam: 'extraValue' },
+            onSuccess: jest.fn(),
+            onError: jest.fn(),
+        });
+    });
+
+    afterEach(() => {
+        document.body.removeChild(form);
+    });
+
+    test('should be created correctly', () => {
+        expect(avalynxForm).toBeInstanceOf(AvalynxForm);
+    });
+
+    test('init should set up the submit handler', () => {
+        const submitHandler = jest.spyOn(avalynxForm, 'setupSubmitHandler');
+        avalynxForm.init();
+        expect(submitHandler).toHaveBeenCalled();
+    });
+
+    test('showInvalidFeedback should display error messages', () => {
+        avalynxForm.showInvalidFeedback('input1', 'Invalid input');
+        const inputElement = form.querySelector('#input1');
+        expect(inputElement.classList).toContain('is-invalid');
+        const feedbackElement = inputElement.nextElementSibling;
+        expect(feedbackElement.style.display).toBe('block');
+        expect(feedbackElement.innerHTML).toBe('Invalid input');
+    });
+
+    test('clearInvalidFeedback should clear error messages', () => {
+        avalynxForm.showInvalidFeedback('input1', 'Invalid input');
+        avalynxForm.clearInvalidFeedback('input1');
+        const inputElement = form.querySelector('#input1');
+        expect(inputElement.classList).not.toContain('is-invalid');
+        const feedbackElement = inputElement.nextElementSibling;
+        expect(feedbackElement.style.display).toBe('none');
+    });
+
+    test('setupOverlayAndLoader should create overlay if loader is null', () => {
+        const overlay = document.getElementById('test-form-overlay');
+        expect(overlay).not.toBeNull();
+        expect(overlay.style.display).toBe('none');
+    });
+});

build.js

@@ -0,0 +1,28 @@
+const fs = require('fs');
+
+if (process.argv.length < 3) {
+    console.error('Please provide the file path as an argument.');
+    process.exit(1);
+}
+
+const filePath = process.argv[2];
+
+if (!fs.existsSync(filePath)) {
+    console.error(`The file ${filePath} does not exist.`);
+    process.exit(1);
+}
+
+fs.readFile(filePath, 'utf8', (err, data) => {
+    if (err) {
+        console.error(`Error reading file ${filePath}: ${err}`);
+        return;
+    }
+
+    const result = data.replace(/class /g, 'export class ');
+
+    fs.writeFile(filePath, result, 'utf8', err => {
+        if (err) {
+            console.error(`Error writing file ${filePath}: ${err}`);
+        }
+    });
+});

composer.json

@@ -0,0 +1,30 @@
+{
+    "name": "avalynx/avalynx-form",
+    "description": "AvalynxForm is a lightweight, customizable form handling library for web applications. Based on Bootstrap >=5.3 without any framework dependencies.",
+    "keywords": [
+        "avalynx",
+        "form",
+        "validation",
+        "input",
+        "bootstrap",
+        "bootstrap5",
+        "component"
+    ],
+    "homepage": "https://github.com/avalynx/avalynx-form",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Juergen Schwind an the Avalynx-Form authors",
+            "homepage": "https://github.com/avalynx/avalynx-form/graphs/contributors"
+        }
+    ],
+    "require": {
+        "twbs/bootstrap": "^5.3"
+    },
+    "repositories": [
+        {
+            "type": "vcs",
+            "url": "https://github.com/avalynx/avalynx-form.git"
+        }
+    ]
+}