jupiter-dynamic-forms 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Jupiter Forms
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,384 @@
+# Jupiter Dynamic Forms
+
+# Jupiter Dynamic Forms
+
+> **Framework-agnostic dynamic form builder for XBRL entrypoints using Web Components**
+
+[![npm version](https://badge.fury.io/js/%40jupiter%2Fdynamic-forms.svg)](https://badge.fury.io/js/%40jupiter%2Fdynamic-forms)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+
+Jupiter Dynamic Forms is a powerful, framework-agnostic form builder specifically designed for XBRL (eXtensible Business Reporting Language) data. It automatically generates interactive forms with accordion sections from XBRL taxonomy data, supporting Angular 18+, React, Vue, and vanilla HTML applications.
+
+## ✨ Key Features
+
+- 🎭 **XBRL Integration**: Direct consumption of XBRL taxonomy JSON files
+- 📱 **Framework Agnostic**: Works with Angular 18+, React, Vue, or vanilla HTML
+- 🎨 **Accordion UI**: Automatic accordion sections for each presentation role
+- 🏗️ **Hierarchical Display**: Nested concept trees with proper indentation
+- 🔧 **Smart Field Types**: Automatic mapping from XBRL types to form controls
+- 🌐 **Multi-language**: Intelligent label selection from XBRL labels
+- 📊 **TypeScript**: Full type safety with comprehensive interfaces
+- ⚡ **Web Components**: Built with Lit Element for maximum compatibility
+
+## 🚀 Quick Start
+
+### Installation
+
+```bash
+npm install @jupiter/dynamic-forms
+```
+
+### Angular 18+ Integration
+
+```typescript
+// app.module.ts
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import '@jupiter/dynamic-forms';
+
+@NgModule({
+  // ... other config
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule { }
+```
+
+```typescript
+// your-component.ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-form',
+  template: `
+    <jupiter-dynamic-form 
+      [attr.xbrlInput]="xbrlData"
+      [attr.config]="formConfig"
+      (formSubmit)="onFormSubmit($event)"
+      (formChange)="onFormChange($event)">
+    </jupiter-dynamic-form>
+  `
+})
+export class FormComponent {
+  xbrlData = {
+    presentation: [/* your XBRL data */]
+  };
+  
+  formConfig = {
+    showValidationSummary: true,
+    collapsibleSections: true
+  };
+  
+  onFormSubmit(event: CustomEvent) {
+    console.log('Form submitted:', event.detail);
+  }
+  
+  onFormChange(event: CustomEvent) {
+    console.log('Form changed:', event.detail);
+  }
+}
+```
+
+## 📊 XBRL Data Structure
+
+Jupiter Dynamic Forms expects XBRL data in JSON format. Each presentation role automatically becomes an accordion section:
+
+- **[000001] Filing Information** → Company details and registration
+- **[000101] Profit or Loss Statement** → Income statement data
+- **[000201] Comprehensive Income** → Comprehensive income items
+- **[000301] Financial Position** → Balance sheet structure
+- **[000401] Changes in Equity** → Equity movements
+- **[000501] Cash Flows** → Cash flow analysis
+
+## 🚀 Features
+
+- **Framework Agnostic**: Works with Angular, React, Vue, and vanilla JavaScript
+- **JSON Schema Driven**: Define complex forms using simple JSON schemas
+- **XBRL Optimized**: Built specifically for XBRL entrypoint data collection
+- **Accordion Sections**: Collapsible sections for better organization
+- **Nested Concept Trees**: Hierarchical data organization with expandable/collapsible nodes
+- **Tabular Layout**: Clean table-based layout with concept trees and input columns
+- **Dynamic Columns**: Add/remove dimension columns on the fly
+- **Rich Field Types**: Support for text, number, date, currency, boolean, select, and more
+- **Built-in Validation**: Comprehensive validation with customizable rules
+- **TypeScript Support**: Full TypeScript definitions included
+- **Themeable**: CSS custom properties for easy styling customization
+
+## 📦 Installation
+
+```bash
+npm install @jupiter/dynamic-forms
+```
+
+## 🎯 Quick Start
+
+### Vanilla JavaScript / HTML
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script type="module">
+    import '@jupiter/dynamic-forms';
+  </script>
+</head>
+<body>
+  <jupiter-dynamic-form id="my-form"></jupiter-dynamic-form>
+  
+  <script>
+    const form = document.getElementById('my-form');
+    form.schema = {
+      version: '1.0',
+      formId: 'example',
+      title: 'My XBRL Form',
+      sections: [
+        // Your schema here
+      ]
+    };
+  </script>
+</body>
+</html>
+```
+
+### Angular
+
+```typescript
+// app.module.ts
+import { JupiterDynamicFormModule } from '@jupiter/dynamic-forms/angular';
+
+@NgModule({
+  imports: [JupiterDynamicFormModule],
+  // ...
+})
+export class AppModule { }
+```
+
+```html
+<!-- component.html -->
+<jupiter-dynamic-form-ng
+  [schema]="formSchema"
+  [config]="formConfig"
+  (formSubmit)="onFormSubmit($event)"
+></jupiter-dynamic-form-ng>
+```
+
+### React
+
+```tsx
+import { JupiterDynamicForm } from '@jupiter/dynamic-forms/react';
+
+function MyComponent() {
+  const handleSubmit = (data) => {
+    console.log('Form data:', data);
+  };
+
+  return (
+    <JupiterDynamicForm
+      schema={formSchema}
+      config={formConfig}
+      onFormSubmit={handleSubmit}
+    />
+  );
+}
+```
+
+### Vue
+
+```vue
+<template>
+  <JupiterDynamicForm
+    :schema="formSchema"
+    :config="formConfig"
+    @form-submit="handleSubmit"
+  />
+</template>
+
+<script>
+import { JupiterDynamicForm } from '@jupiter/dynamic-forms/vue';
+
+export default {
+  components: {
+    JupiterDynamicForm
+  },
+  // ...
+}
+</script>
+```
+
+## 📋 Schema Structure
+
+The form is driven by a JSON schema that defines sections, concepts, and fields:
+
+```json
+{
+  "version": "1.0",
+  "formId": "financial-statement",
+  "title": "Financial Statement Form",
+  "description": "XBRL financial data entry",
+  "sections": [
+    {
+      "id": "balance-sheet",
+      "title": "Balance Sheet",
+      "expanded": true,
+      "concepts": [
+        {
+          "id": "assets",
+          "name": "Assets",
+          "label": "Total Assets",
+          "level": 0,
+          "fields": [
+            {
+              "id": "assets-base",
+              "conceptId": "assets",
+              "columnId": "base",
+              "type": "currency",
+              "label": "Assets",
+              "required": true,
+              "validation": [
+                {
+                  "type": "required",
+                  "message": "Assets value is required"
+                }
+              ]
+            }
+          ],
+          "children": [
+            // Nested concepts...
+          ]
+        }
+      ]
+    }
+  ]
+}
+```
+
+## 🎛️ Configuration Options
+
+```typescript
+const config = {
+  theme: 'light' | 'dark' | 'auto',
+  locale: 'en-US',
+  dateFormat: 'YYYY-MM-DD',
+  currencyCode: 'USD',
+  showValidationSummary: true,
+  collapsibleSections: true,
+  collapsibleConcepts: true,
+  enableColumnManagement: true,
+  maxColumns: 10,
+  autoSave: false,
+  autoSaveInterval: 30000
+};
+```
+
+## 🔧 Field Types
+
+- `text` - Single line text input
+- `textarea` - Multi-line text input
+- `number` - Numeric input
+- `decimal` - Decimal number with formatting
+- `currency` - Currency input with formatting
+- `percentage` - Percentage input
+- `date` - Date picker
+- `datetime` - Date and time picker
+- `boolean` - Checkbox
+- `select` - Dropdown selection
+- `multiselect` - Multiple selection
+- `email` - Email input with validation
+- `url` - URL input with validation
+- `tel` - Telephone number input
+
+## ✅ Validation Rules
+
+- `required` - Field must have a value
+- `min` / `max` - Numeric range validation
+- `minLength` / `maxLength` - String length validation
+- `pattern` - Regular expression validation
+- `email` - Email format validation
+- `url` - URL format validation
+- `custom` - Custom validation functions
+
+## 🎨 Styling
+
+The component uses CSS custom properties for theming:
+
+```css
+:root {
+  --jupiter-primary-color: #1976d2;
+  --jupiter-background: #ffffff;
+  --jupiter-text-primary: #333333;
+  --jupiter-border-color: #dddddd;
+  --jupiter-error-color: #d32f2f;
+  /* ... more variables */
+}
+```
+
+## 📚 API Reference
+
+### Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `schema` | `XBRLFormSchema` | The form schema definition |
+| `config` | `ComponentConfig` | Configuration options |
+| `initialData` | `FormData` | Initial form data |
+| `disabled` | `boolean` | Disable the entire form |
+| `readonly` | `boolean` | Make form read-only |
+
+### Methods
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `getData()` | `FormData` | Get current form data |
+| `setData(data)` | `void` | Set form data |
+| `validate()` | `boolean` | Validate form and return result |
+| `reset()` | `void` | Reset form to initial state |
+| `getState()` | `FormState` | Get complete form state |
+
+### Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `field-change` | `{fieldId, conceptId, columnId, value, oldValue}` | Field value changed |
+| `section-expand` | `{sectionId, expanded}` | Section expanded/collapsed |
+| `concept-expand` | `{conceptId, expanded}` | Concept expanded/collapsed |
+| `column-add` | `{column}` | Column added |
+| `column-remove` | `{columnId}` | Column removed |
+| `form-submit` | `{data, valid, errors}` | Form submitted |
+| `form-reset` | `{}` | Form reset |
+
+## 🏗️ Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build the library
+npm run build
+
+# Run tests
+npm test
+
+# Lint code
+npm run lint
+```
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🔗 Links
+
+- [Documentation](https://github.com/your-org/jupiter-dynamic-forms/wiki)
+- [Examples](./examples/)
+- [Issue Tracker](https://github.com/your-org/jupiter-dynamic-forms/issues)
+- [Changelog](CHANGELOG.md)

package/dist/core/concept-tree.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import { ConceptTree, FormColumn } from '../schema/types';
+
+export declare class JupiterConceptTree extends LitElement {
+    concept: ConceptTree;
+    columns: FormColumn[];
+    formData: Record<string, any>;
+    disabled: boolean;
+    locale: string;
+    private _expanded;
+    static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    private _toggleExpanded;
+    private _getFieldForColumn;
+    private _getFieldValue;
+    private _handleFieldChange;
+    render(): import('lit-html').TemplateResult<1>;
+}
+//# sourceMappingURL=concept-tree.d.ts.map

package/dist/core/concept-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"concept-tree.d.ts","sourceRoot":"","sources":["../../src/core/concept-tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,UAAU,EAAa,MAAM,iBAAiB,CAAC;AACrE,OAAO,cAAc,CAAC;AAEtB,qBACa,kBAAmB,SAAQ,UAAU;IACpB,OAAO,EAAG,WAAW,CAAC;IACvB,OAAO,EAAE,UAAU,EAAE,CAAM;IAC1B,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAM;IAClC,QAAQ,UAAS;IAClB,MAAM,SAAW;IAEpC,OAAO,CAAC,SAAS,CAAQ;IAElC,MAAM,CAAC,MAAM,0BA+FX;IAEF,iBAAiB;IAKjB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,kBAAkB;IAS1B,MAAM;CA+DP"}

package/dist/core/dynamic-form.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+import { XBRLFormSchema, FormData, FormState, ComponentConfig } from '../schema/types';
+import { XBRLFormInput } from '../schema/xbrl-types';
+
+export declare class JupiterDynamicForm extends LitElement {
+    schema?: XBRLFormSchema;
+    xbrlInput?: XBRLFormInput;
+    config: ComponentConfig;
+    initialData: FormData;
+    disabled: boolean;
+    readonly: boolean;
+    private _formData;
+    private _columns;
+    private _errors;
+    private _touched;
+    private _dirty;
+    private _valid;
+    private _submitted;
+    private _currentSchema?;
+    static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, any>): void;
+    private _initializeForm;
+    private _getDefaultSchema;
+    private _getDefaultColumns;
+    private _validateForm;
+    private _handleFieldChange;
+    private _handleSectionExpand;
+    private _handleConceptExpand;
+    private _handleColumnRemove;
+    private _addColumn;
+    private _handleSubmit;
+    private _handleReset;
+    private _getFormState;
+    getData(): FormData;
+    setData(data: FormData): void;
+    validate(): boolean;
+    reset(): void;
+    getState(): FormState;
+    render(): import('lit-html').TemplateResult<1>;
+}
+//# sourceMappingURL=dynamic-form.d.ts.map

package/dist/core/dynamic-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-form.d.ts","sourceRoot":"","sources":["../../src/core/dynamic-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EACL,cAAc,EACd,QAAQ,EAGR,SAAS,EACT,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD,OAAO,gBAAgB,CAAC;AAExB,qBACa,kBAAmB,SAAQ,UAAU;IACpB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,MAAM,EAAE,eAAe,CAAM;IAC7B,WAAW,EAAE,QAAQ,CAAM;IAC1B,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAErC,OAAO,CAAC,SAAS,CAAgB;IACjC,OAAO,CAAC,QAAQ,CAAoB;IACpC,OAAO,CAAC,OAAO,CAAyB;IACxC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,cAAc,CAAC,CAAiB;IAEjD,MAAM,CAAC,MAAM,0BAqJX;IAEF,iBAAiB;IAKjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAM3C,OAAO,CAAC,eAAe;IA0CvB,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,aAAa;IA6BrB,OAAO,CAAC,kBAAkB;IA2B1B,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,aAAa;IAYd,OAAO,IAAI,QAAQ;IAInB,OAAO,CAAC,IAAI,EAAE,QAAQ;IAOtB,QAAQ,IAAI,OAAO;IAKnB,KAAK;IAIL,QAAQ,IAAI,SAAS;IAI5B,MAAM;CA8FP"}

package/dist/core/form-field.d.ts

@@ -0,0 +1,23 @@
+import { LitElement, PropertyValues } from 'lit';
+import { FormField } from '../schema/types';
+
+export declare class JupiterFormField extends LitElement {
+    field: FormField;
+    conceptId: string;
+    columnId: string;
+    value: any;
+    disabled: boolean;
+    locale: string;
+    private _errors;
+    private _touched;
+    static styles: import('lit').CSSResult;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private _validateField;
+    private _handleInput;
+    private _handleFocus;
+    private _handleBlur;
+    private _renderInput;
+    private _getInputType;
+    render(): import('lit-html').TemplateResult<1>;
+}
+//# sourceMappingURL=form-field.d.ts.map

package/dist/core/form-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../src/core/form-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAmB,MAAM,iBAAiB,CAAC;AAG7D,qBACa,gBAAiB,SAAQ,UAAU;IAClB,KAAK,EAAG,SAAS,CAAC;IAClB,SAAS,EAAG,MAAM,CAAC;IACnB,QAAQ,EAAG,MAAM,CAAC;IAClC,KAAK,EAAE,GAAG,CAAQ;IACD,QAAQ,UAAS;IAClB,MAAM,SAAW;IAEpC,OAAO,CAAC,OAAO,CAAyB;IACxC,OAAO,CAAC,QAAQ,CAAS;IAElC,MAAM,CAAC,MAAM,0BAqGX;IAEF,SAAS,CAAC,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAMtD,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,YAAY;IA0EpB,OAAO,CAAC,aAAa;IAsBrB,MAAM;CAyBP"}

package/dist/core/form-section.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import { FormSection, FormColumn } from '../schema/types';
+
+export declare class JupiterFormSection extends LitElement {
+    section: FormSection;
+    columns: FormColumn[];
+    formData: Record<string, any>;
+    disabled: boolean;
+    collapsible: boolean;
+    locale: string;
+    private _expanded;
+    static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    private _toggleExpanded;
+    private _handleRemoveColumn;
+    private _handleFieldChange;
+    private _handleConceptExpand;
+    render(): import('lit-html').TemplateResult<1>;
+}
+//# sourceMappingURL=form-section.d.ts.map

package/dist/core/form-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-section.d.ts","sourceRoot":"","sources":["../../src/core/form-section.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,gBAAgB,CAAC;AAExB,qBACa,kBAAmB,SAAQ,UAAU;IACpB,OAAO,EAAG,WAAW,CAAC;IACvB,OAAO,EAAE,UAAU,EAAE,CAAM;IAC1B,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAM;IAClC,QAAQ,UAAS;IACjB,WAAW,UAAQ;IACpB,MAAM,SAAW;IAEpC,OAAO,CAAC,SAAS,CAAQ;IAElC,MAAM,CAAC,MAAM,0BA+IX;IAEF,iBAAiB;IAKjB,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,oBAAoB;IAQ5B,MAAM;CAgFP"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export * from './core/dynamic-form';
+export * from './core/form-section';
+export * from './core/concept-tree';
+export * from './core/form-field';
+export * from './schema/types';
+export * from './utils/validation';
+export declare const version = "1.0.0";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AAGnC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,mBAAmB,CAAC;AAG3B,eAAO,MAAM,OAAO,UAAU,CAAC"}