@sondor-technology/sondor-components 1.0.1-develop.13 → 1.0.1-develop.15

package/src/components/cron-builder/cron-builder.ts

@@ -0,0 +1,452 @@
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset";
+
+@customElement("st-cron-builder")
+export class StCronBuilder extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) value = "";
+  @property({type: Boolean, reflect: true}) required = false;
+
+  @state() private _frequency = "weekly";
+  @state() private _time = "12:00";
+  @state() private _days = "1,3,5";
+  @state() private _monthDay = "1";
+  @state() private _date = "";
+
+  @state() private _customCron = "0 * * * *";
+  @state() private _customCronError = "";
+  @state() private _customCronText = "";
+
+  private _defaultValue = "";
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+
+    const today = new Date();
+    const pad = (n: number) => n.toString().padStart(2, "0");
+    this._date = `${today.getFullYear()}-${pad(today.getMonth() + 1)}-${pad(today.getDate())}`;
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        background: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-lg);
+        padding: var(--st-spacing-lg);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      }
+
+      .builder-grid {
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-lg);
+      }
+
+      .row {
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-xs);
+      }
+
+      label {
+        font-size: var(--st-font-size-sm);
+        font-weight: 600;
+        color: var(--st-color-text);
+      }
+
+      .helper-text {
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-text-muted);
+        margin-top: 4px;
+      }
+
+      .cron-segments {
+        display: flex;
+        gap: 4px;
+        margin-top: var(--st-spacing-xs);
+        margin-bottom: var(--st-spacing-xs);
+      }
+
+      .segment-badge {
+        flex: 1;
+        text-align: center;
+        font-size: 11px;
+        padding: 4px;
+        background: var(--st-color-surface-muted, #f1f5f9);
+        border-radius: var(--st-radius-sm);
+        color: var(--st-color-text-muted);
+        border: 1px solid var(--st-color-border);
+        transition: all 0.2s;
+      }
+
+      .segment-badge.active {
+        background: var(--st-color-primary, #eff6ff);
+        color: var(--st-color-surface);
+        border-color: var(--st-color-primary);
+        font-weight: 600;
+      }
+
+      .success-text {
+        color: var(--st-color-success, #16a34a);
+      }
+
+      .error-text {
+        color: var(--st-color-danger, #dc2626);
+        font-weight: 500;
+      }
+
+      .output-preview {
+        margin-top: var(--st-spacing-md);
+        padding: var(--st-spacing-md);
+        background: var(--st-color-surface-muted, #f8fafc);
+        border-radius: var(--st-radius-md);
+        border: 1px dashed var(--st-color-border);
+      }
+
+      .output-preview code {
+        font-family: monospace;
+        color: var(--st-color-primary);
+        font-weight: bold;
+        font-size: var(--st-font-size-lg);
+      }
+    `,
+  ];
+
+  override firstUpdated() {
+    this._generateOutput();
+    this._defaultValue = this.value;
+  }
+
+  private _translateCron(cron: string): {valid: boolean; text: string} {
+    const parts = cron.trim().split(/\s+/);
+
+    if (parts.length !== 5) {
+      return {
+        valid: false,
+        text: `A cron expression must contain exactly 5 segments (currently ${parts.length}).`,
+      };
+    }
+
+    const types = ["Minute", "Hour", "Day of Month", "Month", "Day of Week"];
+
+    const bounds = [
+      {min: 0, max: 59}, // Minute
+      {min: 0, max: 23}, // Hour
+      {min: 1, max: 31}, // DOM
+      {min: 1, max: 12}, // Month
+      {min: 0, max: 7}, // DOW
+    ];
+
+    for (let i = 0; i < 5; i++) {
+      const part = parts[i];
+      const type = types[i];
+      const bound = bounds[i];
+
+      // Prevent consecutive or hanging symbols like 1- or */
+      if (/(^[\/\-\,])|([\/\-\,]$)|([\/\-\,]{2,})/.test(part)) {
+        return {valid: false, text: `Invalid formatting in ${type} segment.`};
+      }
+
+      // First 3 segments (min, hour, dom) cannot have letters
+      if (i < 3 && /[A-Za-z]/.test(part)) {
+        return {valid: false, text: `${type} cannot contain letters.`};
+      }
+
+      // Last 2 segments can only have specific valid keywords
+      if (/[A-Za-z]/.test(part)) {
+        const words = part.match(/[A-Za-z]+/g) || [];
+        const validWords =
+          i === 3
+            ? ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]
+            : ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+
+        for (const word of words) {
+          if (!validWords.includes(word.toUpperCase())) {
+            return {valid: false, text: `"${word}" is not a valid ${type}.`};
+          }
+        }
+      }
+
+      const numbers = part.match(/\d+/g);
+      if (numbers) {
+        for (const numStr of numbers) {
+          const num = parseInt(numStr, 10);
+          if (num < bound.min || num > bound.max) {
+            return {
+              valid: false,
+              text: `${type} values must be between ${bound.min} and ${bound.max}.`,
+            };
+          }
+        }
+      }
+    }
+
+    const [min, hour, dom, mon, dow] = parts;
+    let desc = "Runs ";
+
+    if (min === "*") desc += "every minute";
+    else if (min.startsWith("*/")) desc += `every ${min.substring(2)} minutes`;
+    else desc += `at minute ${min}`;
+
+    if (hour !== "*") {
+      if (hour.startsWith("*/")) desc += `, past every ${hour.substring(2)} hours`;
+      else desc += `, past hour ${hour}`;
+    }
+
+    if (dom !== "*") {
+      if (dom.startsWith("*/")) desc += `, every ${dom.substring(2)} days`;
+      else desc += `, on day ${dom} of the month`;
+    }
+
+    if (mon !== "*") {
+      if (mon.startsWith("*/")) desc += `, every ${mon.substring(2)} months`;
+      else desc += `, in month ${mon}`;
+    }
+
+    if (dow !== "*") {
+      const days = [
+        "Sunday",
+        "Monday",
+        "Tuesday",
+        "Wednesday",
+        "Thursday",
+        "Friday",
+        "Saturday",
+        "Sunday",
+      ];
+      let dayStr = dow;
+
+      if (dow.length === 1 && /[0-7]/.test(dow)) {
+        dayStr = days[parseInt(dow, 10)];
+      } else if (dow.includes("-") && /[0-7]-[0-7]/.test(dow)) {
+        dayStr = dow
+          .split("-")
+          .map((d) => days[parseInt(d, 10)])
+          .join(" through ");
+      }
+      desc += `, on ${dayStr}`;
+    }
+
+    return {valid: true, text: desc + "."};
+  }
+
+  private _generateOutput() {
+    let output = "";
+    this._customCronError = "";
+    this._customCronText = "";
+    this._internals.setValidity({});
+
+    if (this._frequency === "custom") {
+      const analysis = this._translateCron(this._customCron);
+
+      if (!analysis.valid) {
+        this._customCronError = analysis.text;
+        this._internals.setValidity({customError: true}, analysis.text);
+      } else {
+        this._customCronText = analysis.text;
+      }
+      output = this._customCron;
+    } else if (this._frequency === "one-off") {
+      output = `${this._date}T${this._time}`;
+    } else {
+      const [hh, mm] = this._time.split(":");
+      const minute = mm ? parseInt(mm, 10).toString() : "0";
+      const hour = hh ? parseInt(hh, 10).toString() : "0";
+
+      switch (this._frequency) {
+        case "daily":
+          output = `${minute} ${hour} * * *`;
+          break;
+        case "weekly":
+          const safeDays = this._days || "1";
+          output = `${minute} ${hour} * * ${safeDays}`;
+          break;
+        case "monthly":
+          output = `${minute} ${hour} ${this._monthDay} * *`;
+          break;
+      }
+    }
+
+    this.value = output;
+    this._internals.setFormValue(output);
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+  }
+
+  private _handleCustomCronInput(e: any) {
+    const inputEl = e.target;
+    const sanitized = inputEl.value.replace(/[^0-9A-Za-z\s\*\/\-\,]/g, "");
+
+    if (inputEl.value !== sanitized) {
+      inputEl.value = sanitized;
+    }
+
+    this._customCron = sanitized;
+    this._generateOutput();
+  }
+
+  private _handleFrequencyChange(e: any) {
+    this._frequency = e.target.value;
+    this._generateOutput();
+  }
+
+  public checkValidity() {
+    return this._internals.checkValidity();
+  }
+  public reportValidity() {
+    return this._internals.reportValidity();
+  }
+
+  formResetCallback() {
+    this.value = this._defaultValue;
+    this._frequency = "weekly";
+    this._generateOutput();
+  }
+
+  render() {
+    const frequencyOptions = [
+      {label: "One-Off Execution", value: "one-off"},
+      {label: "Daily", value: "daily"},
+      {label: "Weekly", value: "weekly"},
+      {label: "Monthly", value: "monthly"},
+      {label: "Custom Cron", value: "custom"},
+    ];
+
+    const monthDayOptions = Array.from({length: 31}, (_, i) => ({
+      label: `${i + 1}${i === 0 ? "st" : i === 1 ? "nd" : i === 2 ? "rd" : "th"}`,
+      value: String(i + 1),
+    }));
+
+    // Calculate which segment the user is currently typing in
+    const activeSegmentIndex = Math.min(this._customCron.trimStart().split(/\s+/).length - 1, 4);
+
+    return html`
+      <div class="builder-grid">
+        <div class="row">
+          <st-select
+            label="Schedule Type"
+            .options=${frequencyOptions}
+            .value=${this._frequency}
+            @change=${this._handleFrequencyChange}
+          ></st-select>
+        </div>
+
+        ${this._frequency === "weekly"
+          ? html`
+              <div class="row">
+                <label>Run on days</label>
+                <st-toggle-group
+                  multiple
+                  .value=${this._days}
+                  @change=${(e: any) => {
+                    this._days = e.target.value;
+                    this._generateOutput();
+                  }}
+                >
+                  <st-toggle-button value="1">Mon</st-toggle-button>
+                  <st-toggle-button value="2">Tue</st-toggle-button>
+                  <st-toggle-button value="3">Wed</st-toggle-button>
+                  <st-toggle-button value="4">Thu</st-toggle-button>
+                  <st-toggle-button value="5">Fri</st-toggle-button>
+                  <st-toggle-button value="6">Sat</st-toggle-button>
+                  <st-toggle-button value="0">Sun</st-toggle-button>
+                </st-toggle-group>
+              </div>
+            `
+          : ""}
+        ${this._frequency === "monthly"
+          ? html`
+              <div class="row">
+                <st-select
+                  label="Run on day of month"
+                  .options=${monthDayOptions}
+                  .value=${this._monthDay}
+                  @change=${(e: any) => {
+                    this._monthDay = e.target.value;
+                    this._generateOutput();
+                  }}
+                ></st-select>
+              </div>
+            `
+          : ""}
+        ${this._frequency === "one-off"
+          ? html`
+              <div class="row">
+                <label>Execution Date</label>
+                <st-calendar
+                  .value=${this._date}
+                  @change=${(e: any) => {
+                    this._date = e.target.value;
+                    this._generateOutput();
+                  }}
+                ></st-calendar>
+              </div>
+            `
+          : ""}
+        ${this._frequency === "custom"
+          ? html`
+              <div class="row">
+                <st-input
+                  label="Raw Cron Expression"
+                  placeholder="*/15 * * * *"
+                  .value=${this._customCron}
+                  .error=${this._customCronError}
+                  ?invalid=${!!this._customCronError}
+                  @input=${this._handleCustomCronInput}
+                ></st-input>
+                <div class="cron-segments" aria-hidden="true">
+                  ${["Minute", "Hour", "Day", "Month", "Weekday"].map(
+                    (label, i) => html`
+                      <div class="segment-badge ${activeSegmentIndex === i ? "active" : ""}">
+                        ${label}
+                      </div>
+                    `,
+                  )}
+                </div>
+
+                ${this._customCronText && !this._customCronError
+                  ? html`
+                      <div class="helper-text success-text">
+                        <strong>Schedule:</strong> ${this._customCronText}
+                      </div>
+                    `
+                  : ""}
+              </div>
+            `
+          : ""}
+        ${this._frequency !== "custom"
+          ? html`
+              <div class="row">
+                <st-time-picker
+                  label="Execution Time"
+                  .value=${this._time}
+                  @change=${(e: any) => {
+                    this._time = e.target.value;
+                    this._generateOutput();
+                  }}
+                ></st-time-picker>
+              </div>
+            `
+          : ""}
+
+        <div class="output-preview">
+          <div class="helper-text">Generated Payload</div>
+          <code>${this.value}</code>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-cron-builder": StCronBuilder;
+  }
+}

package/src/components/divider/divider.constants.ts

@@ -0,0 +1,5 @@
+export const dividerDirections = ['horizontal', 'vertical'] as const;
+export type DividerDirection = typeof dividerDirections[number];
+
+export const dividerColors = ['default', 'primary', 'border'] as const;
+export type DividerColor = typeof dividerColors[number];

package/src/components/divider/divider.ts

@@ -1,13 +1,14 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { resetStyles } from '../../styles/reset.js';
+import { DividerColor, DividerDirection } from './divider.constants.js';
 
 @customElement('st-divider')
 export class StDivider extends LitElement {
-  @property({ type: String, reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';
+  @property({ type: String, reflect: true }) direction: DividerDirection = 'horizontal';
   @property({ type: String }) thickness = '1px';
   @property({ type: String }) margin = '0';
-  @property({ type: String, reflect: true }) color: 'default' | 'primary' | 'border' = 'border';
+  @property({ type: String, reflect: true }) color: DividerColor = 'border';
 
   static styles = [
     resetStyles,
@@ -43,22 +44,32 @@ export class StDivider extends LitElement {
     `
   ];
 
+  connectedCallback() {
+    super.connectedCallback();
+    // Semantic role belongs on the host element
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'separator');
+    }
+  }
+
   updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
     
     // Sync properties to CSS variables for dynamic adjustment
-    this.style.setProperty('--divider-thickness', this.thickness);
-    this.style.setProperty('--divider-margin', this.margin);
+    if (changedProperties.has('thickness') || changedProperties.has('margin')) {
+      this.style.setProperty('--divider-thickness', this.thickness);
+      this.style.setProperty('--divider-margin', this.margin);
+    }
+
+    // Keep native ARIA attributes perfectly synced with our Lit properties
+    if (changedProperties.has('direction')) {
+      this.setAttribute('aria-orientation', this.direction);
+    }
   }
 
   render() {
-    // Accessibility: Set role and aria-orientation
-    return html`
-      <div 
-        role="separator" 
-        aria-orientation="${this.direction === 'horizontal' ? 'horizontal' : 'vertical'}"
-      ></div>
-    `;
+    // The host element itself is the structural divider. No inner DOM bloat needed.
+    return html``;
   }
 }