@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/flex/flex.style.ts

@@ -0,0 +1,101 @@
+import { css } from 'lit';
+
+/**
+ * Flex component styles
+ * Using shared CSS variables from /src/shared/themes/
+ */
+export const styles = css`
+  :host {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  .nr-flex {
+    display: flex;
+    box-sizing: border-box;
+    
+    /* Theme-aware */
+    color: var(--nuraly-color-text);
+  }
+
+  /* Inline flex */
+  .nr-flex[data-inline="true"] {
+    display: inline-flex;
+  }
+
+  /* Flex direction */
+  .nr-flex[data-direction="row"] {
+    flex-direction: row;
+  }
+
+  .nr-flex[data-direction="row-reverse"] {
+    flex-direction: row-reverse;
+  }
+
+  .nr-flex[data-direction="column"] {
+    flex-direction: column;
+  }
+
+  .nr-flex[data-direction="column-reverse"] {
+    flex-direction: column-reverse;
+  }
+
+  /* Flex wrap */
+  .nr-flex[data-wrap="nowrap"] {
+    flex-wrap: nowrap;
+  }
+
+  .nr-flex[data-wrap="wrap"] {
+    flex-wrap: wrap;
+  }
+
+  .nr-flex[data-wrap="wrap-reverse"] {
+    flex-wrap: wrap-reverse;
+  }
+
+  /* Justify content */
+  .nr-flex[data-justify="flex-start"] {
+    justify-content: flex-start;
+  }
+
+  .nr-flex[data-justify="flex-end"] {
+    justify-content: flex-end;
+  }
+
+  .nr-flex[data-justify="center"] {
+    justify-content: center;
+  }
+
+  .nr-flex[data-justify="space-between"] {
+    justify-content: space-between;
+  }
+
+  .nr-flex[data-justify="space-around"] {
+    justify-content: space-around;
+  }
+
+  .nr-flex[data-justify="space-evenly"] {
+    justify-content: space-evenly;
+  }
+
+  /* Align items */
+  .nr-flex[data-align="flex-start"] {
+    align-items: flex-start;
+  }
+
+  .nr-flex[data-align="flex-end"] {
+    align-items: flex-end;
+  }
+
+  .nr-flex[data-align="center"] {
+    align-items: center;
+  }
+
+  .nr-flex[data-align="baseline"] {
+    align-items: baseline;
+  }
+
+  .nr-flex[data-align="stretch"] {
+    align-items: stretch;
+  }
+`;

package/components/ui/nuraly-ui/src/components/flex/flex.types.ts

@@ -0,0 +1,70 @@
+/**
+ * Flex component types and constants
+ */
+
+export const EMPTY_STRING = '';
+
+/**
+ * Flex direction
+ */
+export const enum FlexDirection {
+  Row = 'row',
+  RowReverse = 'row-reverse',
+  Column = 'column',
+  ColumnReverse = 'column-reverse'
+}
+
+/**
+ * Flex wrap behavior
+ */
+export const enum FlexWrap {
+  NoWrap = 'nowrap',
+  Wrap = 'wrap',
+  WrapReverse = 'wrap-reverse'
+}
+
+/**
+ * Justify content alignment
+ */
+export const enum FlexJustify {
+  FlexStart = 'flex-start',
+  FlexEnd = 'flex-end',
+  Center = 'center',
+  SpaceBetween = 'space-between',
+  SpaceAround = 'space-around',
+  SpaceEvenly = 'space-evenly'
+}
+
+/**
+ * Align items alignment
+ */
+export const enum FlexAlign {
+  FlexStart = 'flex-start',
+  FlexEnd = 'flex-end',
+  Center = 'center',
+  Baseline = 'baseline',
+  Stretch = 'stretch'
+}
+
+/**
+ * Gap size presets
+ */
+export const enum FlexGap {
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large'
+}
+
+/**
+ * Gap configuration - can be string preset, number (px), or array [horizontal, vertical]
+ */
+export type Gap = FlexGap | number | string | [number | string, number | string];
+
+/**
+ * Flex item configuration
+ */
+export interface FlexItemConfig {
+  flex?: string | number;
+  order?: number;
+  alignSelf?: FlexAlign | 'auto';
+}

package/components/ui/nuraly-ui/src/components/flex/index.ts

@@ -0,0 +1,2 @@
+export * from './flex.component.js';
+export * from './flex.types.js';

package/components/ui/nuraly-ui/src/components/flex/react.ts

@@ -0,0 +1,9 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrFlexElement } from './flex.component.js';
+export const NrFlex = createComponent({
+  tagName: 'nr-flex',
+  elementClass: NrFlexElement,
+  react: React,
+  events: {},
+});

package/components/ui/nuraly-ui/src/components/form/README.md

@@ -0,0 +1,152 @@
+# NuralyUI Form Component
+
+A comprehensive form component that coordinates validation and submission across form fields without performing validation itself.
+
+## Architecture Overview
+
+The Form component follows the **coordination pattern** where:
+
+- ✅ **Individual components handle their own validation** (input, select, radio, etc.)
+- ✅ **Form coordinates validation results** across all fields
+- ✅ **Form manages submission flow** and state
+- ✅ **Form provides unified events** and data collection
+
+## Why Validation Happens in Each Input
+
+### Benefits of Component-Level Validation
+
+1. **Encapsulation**: Each component manages its own validation logic
+2. **Reusability**: Components work independently of any form
+3. **HTML5 Integration**: Components implement native validation APIs
+4. **Real-time Feedback**: Immediate validation on user interaction
+5. **Consistency**: Standardized validation behavior across all components
+
+### Form's Role
+
+The form component:
+- **Coordinates** existing component validations
+- **Collects** validation results from all fields
+- **Manages** form-level state and submission
+- **Provides** unified events and data access
+- **Prevents** submission if validation fails
+
+## Usage Examples
+
+### Basic Form with Validation
+
+```html
+<nr-form @nr-form-submit-success="${handleSuccess}">
+  <nr-input name="username" required placeholder="Username"></nr-input>
+  <nr-input name="email" type="email" required placeholder="Email"></nr-input>
+  <nr-input name="password" type="password" required minlength="8"></nr-input>
+  <nr-button type="submit">Submit</nr-button>
+</nr-form>
+```
+
+### Advanced Configuration
+
+```html
+<nr-form 
+  validate-on-change
+  validate-on-blur
+  prevent-invalid-submission
+  reset-on-success
+  @nr-form-validation-changed="${handleValidationChange}"
+  @nr-form-submit-error="${handleError}"
+>
+  <nr-input name="name" required></nr-input>
+  <nr-select name="country" required>
+    <nr-option value="us">United States</nr-option>
+    <nr-option value="ca">Canada</nr-option>
+  </nr-select>
+  <nr-radio name="plan" value="basic" required>Basic</nr-radio>
+  <nr-radio name="plan" value="premium">Premium</nr-radio>
+  <nr-button type="submit">Submit</nr-button>
+</nr-form>
+```
+
+### Programmatic Usage
+
+```typescript
+const form = document.querySelector('nr-form');
+
+// Validate programmatically
+const isValid = await form.validate();
+
+// Submit with custom data
+await form.submit({ timestamp: Date.now() });
+
+// Get form data
+const data = form.getFormData();
+
+// Get invalid fields
+const invalidFields = form.getInvalidFields();
+
+// Reset form
+form.reset();
+```
+
+## Events
+
+| Event | Description | Detail |
+|-------|-------------|---------|
+| `nr-form-validation-changed` | Validation state changes | `{ validationResult }` |
+| `nr-form-field-changed` | Individual field changes | `{ field }` |
+| `nr-form-submit-attempt` | Form submission attempted | `{ validationResult }` |
+| `nr-form-submit-success` | Form submitted successfully | `{ formData }` |
+| `nr-form-submit-error` | Form submission failed | `{ error }` |
+| `nr-form-reset` | Form was reset | `{}` |
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `validateOnChange` | `boolean` | `true` | Enable real-time validation |
+| `validateOnBlur` | `boolean` | `true` | Validate on field blur |
+| `preventInvalidSubmission` | `boolean` | `true` | Prevent submission if invalid |
+| `resetOnSuccess` | `boolean` | `false` | Reset after successful submission |
+| `action` | `string` | `undefined` | Form action URL |
+| `method` | `'GET' \| 'POST'` | `'POST'` | Form method |
+| `disabled` | `boolean` | `false` | Disable entire form |
+
+## Methods
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `validate()` | `Promise<boolean>` | Validate all form fields |
+| `submit(customData?)` | `Promise<void>` | Submit form programmatically |
+| `reset()` | `void` | Reset form to initial state |
+| `getFormData()` | `FormSubmissionData` | Get current form data |
+| `getInvalidFields()` | `FormField[]` | Get fields with validation errors |
+
+## Integration with Existing Components
+
+The form automatically detects and coordinates with:
+
+- `nr-input` - Text inputs with validation
+- `nr-select` - Select dropdowns with validation  
+- `nr-radio` - Radio button groups with validation
+- `nr-checkbox` - Checkboxes with validation
+- `nr-textarea` - Text areas with validation
+- `nr-timepicker` - Time pickers with validation
+- `nr-datepicker` - Date pickers with validation
+
+Each component maintains its own validation logic while the form coordinates the results.
+
+## Best Practices
+
+1. **Always add `name` attributes** to form fields
+2. **Use component-level validation** for field-specific rules
+3. **Use form-level events** for submission handling
+4. **Implement proper error handling** for submission failures
+5. **Consider UX** when configuring validation timing
+
+## Architecture Compliance
+
+This form component follows the established NuralyUI architecture:
+
+- Uses **controllers** for complex logic management
+- Implements **event-driven** communication
+- Follows **HTML5 form standards**
+- Maintains **component encapsulation**
+- Provides **consistent API** patterns

package/components/ui/nuraly-ui/src/components/form/controllers/submission.controller.ts

@@ -0,0 +1,243 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { 
+  FormSubmissionData, 
+  FormSubmissionState, 
+  FormFieldCapable,
+  FORM_EVENTS 
+} from '../form.types.js';
+
+/**
+ * Controller that handles form submission logic
+ */
+export class FormSubmissionController {
+  private submissionState: FormSubmissionState = FormSubmissionState.Idle;
+  private lastSubmissionData: FormSubmissionData | null = null;
+
+  constructor(private host: any) {}
+
+  /**
+   * Get current submission state
+   */
+  getSubmissionState(): FormSubmissionState {
+    return this.submissionState;
+  }
+
+  /**
+   * Check if form is currently submitting
+   */
+  isSubmitting(): boolean {
+    return this.submissionState === FormSubmissionState.Submitting;
+  }
+
+  /**
+   * Collect form data from all registered fields
+   */
+  collectFormData(): FormSubmissionData {
+    const formData = new FormData();
+    const jsonData: Record<string, any> = {};
+    const fields: Record<string, any> = {};
+
+    // Get all form field elements
+    const formFields = this.getFormFields();
+
+    formFields.forEach(element => {
+      const name = element.name || element.getAttribute('name');
+      if (!name) return;
+
+      const value = element.value;
+      
+      // Add to FormData
+      if (value !== null && value !== undefined) {
+        formData.append(name, String(value));
+      }
+
+      // Add to JSON data
+      jsonData[name] = value;
+      fields[name] = {
+        element,
+        value,
+        name,
+        type: element.tagName.toLowerCase(),
+        required: element.required || false,
+        disabled: element.disabled || false
+      };
+    });
+
+    return {
+      formData,
+      jsonData,
+      fields
+    };
+  }
+
+  /**
+   * Submit form with validation
+   */
+  async submitForm(customData?: Record<string, any>): Promise<FormSubmissionData> {
+    if (this.isSubmitting()) {
+      throw new Error('Form is already submitting');
+    }
+
+    try {
+      this.setSubmissionState(FormSubmissionState.Submitting);
+
+      // Validate form first
+      const validationController = (this.host as any).validationController;
+      if (validationController) {
+        const validationResult = await validationController.validateForm();
+        
+        if (!validationResult.isValid) {
+          // Focus first invalid field
+          validationController.focusFirstInvalidField();
+          
+          // Dispatch submit attempt event
+          this.dispatchSubmitAttemptEvent(validationResult);
+          
+          throw new Error(`Form validation failed: ${validationResult.summary}`);
+        }
+      }
+
+      // Collect form data
+      const submissionData = this.collectFormData();
+      
+      // Merge custom data if provided
+      if (customData) {
+        Object.assign(submissionData.jsonData, customData);
+        Object.entries(customData).forEach(([key, value]) => {
+          submissionData.formData.append(key, String(value));
+        });
+      }
+
+      this.lastSubmissionData = submissionData;
+
+      // Dispatch submit success event
+      this.dispatchSubmitSuccessEvent(submissionData);
+      
+      this.setSubmissionState(FormSubmissionState.Success);
+      
+      return submissionData;
+
+    } catch (error) {
+      this.setSubmissionState(FormSubmissionState.Error);
+      
+      // Dispatch submit error event
+      this.dispatchSubmitErrorEvent(error as Error);
+      
+      throw error;
+    }
+  }
+
+  /**
+   * Reset submission state
+   */
+  resetSubmission(): void {
+    this.submissionState = FormSubmissionState.Idle;
+    this.lastSubmissionData = null;
+  }
+
+  /**
+   * Get last submission data
+   */
+  getLastSubmissionData(): FormSubmissionData | null {
+    return this.lastSubmissionData;
+  }
+
+  /**
+   * Get all form field elements from the host
+   */
+  private getFormFields(): (HTMLElement & FormFieldCapable)[] {
+    const host = this.host;
+    const fields: (HTMLElement & FormFieldCapable)[] = [];
+
+    // Query for all potential form field elements
+    const selectors = [
+      'nr-input',
+      'nr-select', 
+      'nr-radio',
+      'nr-checkbox',
+      'nr-textarea',
+      'nr-timepicker',
+      'nr-datepicker',
+      'input',
+      'select',
+      'textarea'
+    ];
+
+    // Search in light DOM
+    selectors.forEach(selector => {
+      const elements = host.querySelectorAll(selector);
+      elements.forEach((element: HTMLElement & FormFieldCapable) => {
+        if (element.name || element.getAttribute('name')) {
+          fields.push(element);
+        }
+      });
+    });
+
+    // Search in slotted content
+    const slots = host.shadowRoot?.querySelectorAll('slot') || [];
+    slots.forEach((slot: HTMLSlotElement) => {
+      const assignedElements = slot.assignedElements({ flatten: true });
+      assignedElements.forEach(element => {
+        selectors.forEach(selector => {
+          if (element.matches && element.matches(selector)) {
+            const fieldElement = element as HTMLElement & FormFieldCapable;
+            if (fieldElement.name || fieldElement.getAttribute('name')) {
+              fields.push(fieldElement);
+            }
+          }
+          
+          // Also search within the element
+          const nestedFields = element.querySelectorAll(selector);
+          nestedFields.forEach((nested) => {
+            const fieldElement = nested as HTMLElement & FormFieldCapable;
+            if (fieldElement.name || fieldElement.getAttribute('name')) {
+              fields.push(fieldElement);
+            }
+          });
+        });
+      });
+    });
+
+    return fields;
+  }
+
+  /**
+   * Set submission state and update host
+   */
+  private setSubmissionState(state: FormSubmissionState): void {
+    this.submissionState = state;
+    (this.host as any).requestUpdate?.();
+  }
+
+  /**
+   * Dispatch submit attempt event
+   */
+  private dispatchSubmitAttemptEvent(validationResult: any): void {
+    (this.host as any).dispatchCustomEvent?.(FORM_EVENTS.SUBMIT_ATTEMPT, {
+      validationResult
+    });
+  }
+
+  /**
+   * Dispatch submit success event
+   */
+  private dispatchSubmitSuccessEvent(data: FormSubmissionData): void {
+    (this.host as any).dispatchCustomEvent?.(FORM_EVENTS.SUBMIT_SUCCESS, {
+      formData: data
+    });
+  }
+
+  /**
+   * Dispatch submit error event
+   */
+  private dispatchSubmitErrorEvent(error: Error): void {
+    (this.host as any).dispatchCustomEvent?.(FORM_EVENTS.SUBMIT_ERROR, {
+      error
+    });
+  }
+}