@nuraly/lumenui 0.1.0

package/dist/src/components/db-connection-select/db-connection-select.component.js

@@ -0,0 +1,573 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { property, customElement, state } from 'lit/decorators.js';
+/**
+ * Database Connection Select Component
+ *
+ * A select component for choosing database connections.
+ * Includes inline creation of new connections with connection testing.
+ *
+ * Data-in / events-out:
+ * - Host provides `entries`, `loading`, and `testResult`
+ * - Component fires `create-entry` when the user submits the create form
+ * - Component fires `test-connection` when the user clicks test
+ * - Component fires `value-change` when the selection changes
+ *
+ * @example
+ * ```html
+ * <nr-db-connection-select
+ *   dbType="postgresql"
+ *   .entries=${connectionEntries}
+ *   value="postgresql/my-db"
+ *   @value-change=${(e) => console.log(e.detail.value)}
+ *   @create-entry=${(e) => handleCreate(e.detail)}
+ *   @test-connection=${(e) => handleTest(e.detail)}
+ * ></nr-db-connection-select>
+ * ```
+ *
+ * @fires value-change - Fired when selection changes
+ * @fires create-entry - Fired when user submits the create form
+ * @fires test-connection - Fired when user clicks Test Connection
+ */
+let NrDbConnectionSelect = class NrDbConnectionSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Database type/scope to filter KV entries by */
+        this.dbType = 'postgresql';
+        /** Currently selected connection path */
+        this.value = '';
+        /** Placeholder text */
+        this.placeholder = 'Select database connection...';
+        /** Entries provided by the host */
+        this.entries = [];
+        /** Loading state provided by the host */
+        this.loading = false;
+        /** Test result pushed by the host */
+        this.testResult = null;
+        this.showCreateForm = false;
+        this.creating = false;
+        this.testing = false;
+        this.error = '';
+        // New connection form fields
+        this.newConnectionName = '';
+        this.newHost = 'localhost';
+        this.newPort = 5432;
+        this.newDatabase = '';
+        this.newUsername = '';
+        this.newPassword = '';
+        this.newSsl = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateDefaultPort();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('dbType')) {
+            this.updateDefaultPort();
+        }
+    }
+    updateDefaultPort() {
+        const defaultPorts = {
+            postgresql: 5432,
+            mysql: 3306,
+            mongodb: 27017,
+            mssql: 1433,
+            oracle: 1521,
+            sqlite: 0,
+        };
+        this.newPort = defaultPorts[this.dbType] || 5432;
+    }
+    handleSelectChange(e) {
+        var _a;
+        const value = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || '';
+        this.value = value;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    toggleCreateForm() {
+        this.showCreateForm = !this.showCreateForm;
+        if (!this.showCreateForm) {
+            this.resetCreateForm();
+        }
+    }
+    resetCreateForm() {
+        this.newConnectionName = '';
+        this.newHost = 'localhost';
+        this.updateDefaultPort();
+        this.newDatabase = '';
+        this.newUsername = '';
+        this.newPassword = '';
+        this.newSsl = false;
+        this.error = '';
+        this.testing = false;
+        this.creating = false;
+    }
+    handleTestConnection() {
+        this.testing = true;
+        this.dispatchEvent(new CustomEvent('test-connection', {
+            detail: {
+                type: this.dbType,
+                host: this.newHost,
+                port: this.newPort,
+                database: this.newDatabase,
+                username: this.newUsername,
+                password: this.newPassword,
+                ssl: this.newSsl,
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /**
+     * Called by host after test-connection completes.
+     */
+    notifyTestResult(result) {
+        this.testResult = result;
+        this.testing = false;
+    }
+    handleCreate() {
+        if (!this.newConnectionName || !this.newHost || !this.newDatabase)
+            return;
+        this.creating = true;
+        this.error = '';
+        const keyPath = `database/${this.newConnectionName}`;
+        const credentialValue = {
+            type: this.dbType,
+            host: this.newHost,
+            port: this.newPort,
+            database: this.newDatabase,
+            username: this.newUsername,
+            password: this.newPassword,
+            ssl: this.newSsl,
+        };
+        this.dispatchEvent(new CustomEvent('create-entry', {
+            detail: {
+                keyPath,
+                value: JSON.stringify(credentialValue),
+                scope: this.dbType,
+                isSecret: true,
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /**
+     * Called by host after create-entry succeeds.
+     */
+    notifyCreateSuccess(keyPath) {
+        this.value = keyPath;
+        this.showCreateForm = false;
+        this.resetCreateForm();
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: keyPath },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /**
+     * Called by host if create-entry fails.
+     */
+    notifyCreateError(message) {
+        this.error = message;
+        this.creating = false;
+    }
+    getDbTypeLabel() {
+        const labels = {
+            postgresql: 'PostgreSQL',
+            mysql: 'MySQL',
+            mongodb: 'MongoDB',
+            mssql: 'SQL Server',
+            oracle: 'Oracle',
+            sqlite: 'SQLite',
+        };
+        return labels[this.dbType] || this.dbType;
+    }
+    renderCreateForm() {
+        const canCreate = this.newConnectionName && this.newHost && this.newDatabase && this.newUsername;
+        return html `
+      <div class="create-form">
+        <div class="create-form-header">
+          <span class="create-form-title">Add ${this.getDbTypeLabel()} Connection</span>
+        </div>
+
+        <div class="form-field">
+          <label>Connection Name</label>
+          <nr-input
+            .value=${this.newConnectionName}
+            placeholder="e.g., production, dev"
+            @nr-input=${(e) => { var _a; return this.newConnectionName = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || ''; }}
+          ></nr-input>
+        </div>
+
+        <div class="form-row">
+          <div class="form-field">
+            <label>Host</label>
+            <nr-input
+              .value=${this.newHost}
+              placeholder="localhost"
+              @nr-input=${(e) => { var _a; return this.newHost = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || ''; }}
+            ></nr-input>
+          </div>
+
+          <div class="form-field">
+            <label>Port</label>
+            <nr-input
+              type="number"
+              .value=${String(this.newPort)}
+              placeholder="${this.newPort}"
+              @nr-input=${(e) => { var _a; return this.newPort = Number.parseInt((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || this.newPort; }}
+            ></nr-input>
+          </div>
+        </div>
+
+        <div class="form-field">
+          <label>Database</label>
+          <nr-input
+            .value=${this.newDatabase}
+            placeholder="database name"
+            @nr-input=${(e) => { var _a; return this.newDatabase = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || ''; }}
+          ></nr-input>
+        </div>
+
+        <div class="form-row">
+          <div class="form-field">
+            <label>Username</label>
+            <nr-input
+              .value=${this.newUsername}
+              placeholder="username"
+              @nr-input=${(e) => { var _a; return this.newUsername = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || ''; }}
+            ></nr-input>
+          </div>
+
+          <div class="form-field">
+            <label>Password</label>
+            <nr-input
+              type="password"
+              .value=${this.newPassword}
+              placeholder="password"
+              @nr-input=${(e) => { var _a; return this.newPassword = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || ''; }}
+            ></nr-input>
+          </div>
+        </div>
+
+        <div class="form-field">
+          <div class="checkbox-field">
+            <input
+              type="checkbox"
+              id="ssl-checkbox"
+              .checked=${this.newSsl}
+              @change=${(e) => this.newSsl = e.target.checked}
+            />
+            <label for="ssl-checkbox">Use SSL</label>
+          </div>
+        </div>
+
+        ${this.testResult ? html `
+          <div class="test-result ${this.testResult.success ? 'success' : 'error'}">
+            ${this.testResult.message}
+          </div>
+        ` : nothing}
+
+        ${this.error ? html `<div class="error-message">${this.error}</div>` : nothing}
+
+        <div class="form-actions">
+          <button
+            class="btn btn-test"
+            ?disabled=${!canCreate || this.testing}
+            @click=${this.handleTestConnection}
+          >
+            ${this.testing ? 'Testing...' : 'Test Connection'}
+          </button>
+          <button
+            class="btn btn-primary"
+            ?disabled=${!canCreate || this.creating}
+            @click=${this.handleCreate}
+          >
+            ${this.creating ? 'Creating...' : 'Create'}
+          </button>
+          <button
+            class="btn btn-secondary"
+            @click=${this.toggleCreateForm}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    renderAddButton() {
+        return html `
+      <div class="add-btn-container">
+        <button class="add-btn" @click=${this.toggleCreateForm}>
+          <nr-icon name="plus" size="small"></nr-icon>
+          Add new ${this.getDbTypeLabel()} connection
+        </button>
+      </div>
+    `;
+    }
+    render() {
+        const secretEntries = this.entries.filter(e => e.isSecret);
+        const options = secretEntries.map(entry => ({
+            label: entry.keyPath.replace('database/', ''),
+            value: entry.keyPath,
+            icon: 'database'
+        }));
+        return html `
+      <nr-select
+        .value=${this.value}
+        .options=${options}
+        placeholder=${this.placeholder}
+        .noOptionsMessage=${'No connections for ${this.getDbTypeLabel()}'}
+        @nr-change=${this.handleSelectChange}
+      >
+        <div slot="after-options">
+          ${this.loading ? html `<div class="loading">Loading...</div>` : nothing}
+          ${this.showCreateForm ? this.renderCreateForm() : this.renderAddButton()}
+        </div>
+      </nr-select>
+    `;
+    }
+};
+NrDbConnectionSelect.styles = css `
+    :host {
+      display: block;
+    }
+
+    .create-form {
+      padding: 12px;
+      border-top: 1px solid var(--border-color, #e5e7eb);
+      background: var(--bg-secondary, #f9fafb);
+    }
+
+    .create-form-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    .create-form-title {
+      font-weight: 600;
+      font-size: 13px;
+      color: var(--text-primary, #1f2937);
+    }
+
+    .form-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+    }
+
+    .form-field {
+      margin-bottom: 12px;
+    }
+
+    .form-field.full-width {
+      grid-column: span 2;
+    }
+
+    .form-field label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--text-secondary, #6b7280);
+      margin-bottom: 4px;
+    }
+
+    .form-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 12px;
+    }
+
+    .btn {
+      padding: 6px 12px;
+      border-radius: 6px;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      border: none;
+      transition: all 0.2s;
+    }
+
+    .btn-primary {
+      background: var(--primary-color, #6366f1);
+      color: white;
+    }
+
+    .btn-primary:hover {
+      background: #4f46e5;
+    }
+
+    .btn-primary:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .btn-secondary {
+      background: var(--bg-secondary, #f3f4f6);
+      color: var(--text-primary, #1f2937);
+      border: 1px solid var(--border-color, #e5e7eb);
+    }
+
+    .btn-secondary:hover {
+      background: #e5e7eb;
+    }
+
+    .btn-test {
+      background: var(--bg-tertiary, #f3f4f6);
+      color: var(--text-secondary, #6b7280);
+      border: 1px solid var(--border-color, #e5e7eb);
+    }
+
+    .btn-test:hover {
+      border-color: var(--primary-color, #6366f1);
+      color: var(--primary-color, #6366f1);
+    }
+
+    .add-btn-container {
+      padding: 8px 12px;
+      border-top: 1px solid var(--border-color, #e5e7eb);
+    }
+
+    .add-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      width: 100%;
+      padding: 8px 12px;
+      background: transparent;
+      border: 1px dashed var(--border-color, #d1d5db);
+      border-radius: 6px;
+      color: var(--text-secondary, #6b7280);
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .add-btn:hover {
+      border-color: var(--primary-color, #6366f1);
+      color: var(--primary-color, #6366f1);
+      background: #f5f3ff;
+    }
+
+    .error-message {
+      color: #dc2626;
+      font-size: 12px;
+      margin-top: 4px;
+    }
+
+    .success-message {
+      color: #16a34a;
+      font-size: 12px;
+      margin-top: 4px;
+    }
+
+    .loading {
+      padding: 12px;
+      text-align: center;
+      color: var(--text-secondary, #6b7280);
+      font-size: 13px;
+    }
+
+    .test-result {
+      padding: 8px 12px;
+      border-radius: 6px;
+      font-size: 12px;
+      margin-top: 8px;
+    }
+
+    .test-result.success {
+      background: #dcfce7;
+      color: #166534;
+    }
+
+    .test-result.error {
+      background: #fef2f2;
+      color: #991b1b;
+    }
+
+    .checkbox-field {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .checkbox-field input {
+      width: 16px;
+      height: 16px;
+    }
+
+    .checkbox-field label {
+      margin-bottom: 0;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], NrDbConnectionSelect.prototype, "dbType", void 0);
+__decorate([
+    property({ type: String })
+], NrDbConnectionSelect.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], NrDbConnectionSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: false })
+], NrDbConnectionSelect.prototype, "entries", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrDbConnectionSelect.prototype, "loading", void 0);
+__decorate([
+    property({ attribute: false })
+], NrDbConnectionSelect.prototype, "testResult", void 0);
+__decorate([
+    state()
+], NrDbConnectionSelect.prototype, "showCreateForm", void 0);
+__decorate([
+    state()
+], NrDbConnectionSelect.prototype, "creating", void 0);
+__decorate([
+    state()
+], NrDbConnectionSelect.prototype, "testing", void 0);
+__decorate([
+    state()
+], NrDbConnectionSelect.prototype, "error", void 0);
+__decorate([
+    state()
+], NrDbConnectionSelect.prototype, "newConnectionName", void 0);
+__decorate([
+    state()
+], NrDbConnectionSelect.prototype, "newHost", void 0);
+__decorate([
+    state()
+], NrDbConnectionSelect.prototype, "newPort", void 0);
+__decorate([
+    state()
+], NrDbConnectionSelect.prototype, "newDatabase", void 0);
+__decorate([
+    state()
+], NrDbConnectionSelect.prototype, "newUsername", void 0);
+__decorate([
+    state()
+], NrDbConnectionSelect.prototype, "newPassword", void 0);
+__decorate([
+    state()
+], NrDbConnectionSelect.prototype, "newSsl", void 0);
+NrDbConnectionSelect = __decorate([
+    customElement('nr-db-connection-select')
+], NrDbConnectionSelect);
+export { NrDbConnectionSelect };
+//# sourceMappingURL=db-connection-select.component.js.map

package/dist/src/components/db-connection-select/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly
+ * SPDX-License-Identifier: MIT
+ */
+export * from './db-connection-select.component.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/db-connection-select/index.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly
+ * SPDX-License-Identifier: MIT
+ */
+export * from './db-connection-select.component.js';
+//# sourceMappingURL=index.js.map