@sondor-technology/sondor-components 1.0.7 → 1.0.8

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/input/input.ts

@@ -18,6 +18,7 @@ export class StInput extends LitElement {
   @property({type: String}) placeholder = "";
   @property({type: String}) type: InputType = "text";
   @property({attribute: "help-text"}) helpText = "";
+  @property({type: String}) error = "";
   @property({ type: String }) autocomplete?: string;
 
   @property({type: Boolean, reflect: true}) required = false;
@@ -34,7 +35,7 @@ export class StInput extends LitElement {
     this._internals = this.attachInternals();
 
     this.addEventListener("focusout", () => {
-      this.invalid = !this._inputEl.validity.valid;
+      this.invalid = !!this.error || !this._inputEl.validity.valid;
     });
 
     this.addEventListener("invalid", () => {
@@ -115,16 +116,24 @@ export class StInput extends LitElement {
         margin: 0;
       }
 
+      /* 🚀 NEW: Explicit error text styling */
+      .error-text {
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-error, #dc2626);
+        margin: 0;
+        font-weight: 500;
+      }
+
       :host([invalid]) .input-wrapper {
-        border-color: var(--st-color-error);
+        border-color: var(--st-color-error, #dc2626);
       }
 
       :host([invalid]) .input-wrapper:focus-within {
-        box-shadow: 0 0 0 1px var(--st-color-error);
+        box-shadow: 0 0 0 1px var(--st-color-error, #dc2626);
       }
 
       :host([invalid]) .help-text {
-        color: var(--st-color-error);
+        color: var(--st-color-error, #dc2626);
       }
 
       :host([disabled]) .input-wrapper {
@@ -149,16 +158,30 @@ export class StInput extends LitElement {
     if (changedProperties.has("value")) {
       this._internals.setFormValue(this.value);
     }
-    this._syncValidity();
+    
+    if (changedProperties.has("value") || changedProperties.has("error") || changedProperties.has("required")) {
+      this._syncValidity();
+    }
   }
 
   private _syncValidity() {
     if (!this._inputEl) return;
+    
+    if (this.error) {
+      this._internals.setValidity({ customError: true }, this.error, this._inputEl);
+      this.invalid = true;
+      return;
+    }
+
     this._internals.setValidity(
       this._inputEl.validity,
       this._inputEl.validationMessage,
       this._inputEl,
     );
+    
+    if (this.invalid && this._inputEl.validity.valid) {
+      this.invalid = false;
+    }
   }
 
   formResetCallback() {
@@ -179,7 +202,7 @@ export class StInput extends LitElement {
     const target = e.target as HTMLInputElement;
     this.value = target.value;
 
-    if (this.invalid && target.validity.valid) {
+    if (this.invalid && target.validity.valid && !this.error) {
       this.invalid = false;
     }
 
@@ -190,10 +213,9 @@ export class StInput extends LitElement {
     this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
   }
 
-render() {
-    const helpTextId = this.helpText ? "help-text" : undefined;
+  render() {
+    const descriptionId = this.error ? "error-text" : (this.helpText ? "help-text" : undefined);
     
-    // Security: Prevent OS/Extensions from logging sensitive data via spellcheck
     const isSensitive = this.type === "password" || this.type === "email";
     const safeSpellcheck = isSensitive ? "false" : undefined;
     const safeAutocapitalize = isSensitive ? "none" : undefined;
@@ -221,7 +243,7 @@ render() {
             spellcheck=${ifDefined(safeSpellcheck)}
             autocapitalize=${ifDefined(safeAutocapitalize)}
             aria-invalid=${this.invalid ? "true" : "false"}
-            aria-describedby=${ifDefined(helpTextId)}
+            aria-describedby=${ifDefined(descriptionId)}
             @input=${this._handleInput}
             @change=${this._handleChange}
           />
@@ -229,9 +251,11 @@ render() {
           <slot name="suffix"></slot>
         </div>
 
-        ${this.helpText 
-          ? html`<div id="help-text" class="help-text">${this.helpText}</div>` 
-          : ""}
+        ${this.error 
+          ? html`<div id="error-text" class="error-text">${this.error}</div>`
+          : this.helpText 
+            ? html`<div id="help-text" class="help-text">${this.helpText}</div>` 
+            : ""}
       </div>
     `;
   }
@@ -241,4 +265,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "st-input": StInput;
   }
-}
+}