@api-client/ui 0.5.11 → 0.5.12

package/demo/elements/code-editor/CodeEditorDemo.ts

@@ -0,0 +1,212 @@
+import { html } from 'lit'
+import reactive from '../../../src/decorators/reactive.js'
+import { DemoPage } from '../../../src/demo/DemoPage.js'
+import type {
+  FunctionSchema,
+  Suggestion,
+  FunctionInsertEvent,
+  SuggestionInsertEvent,
+} from '../../../src/elements/code-editor/ui-code-editor.js'
+import '../../../src/elements/code-editor/ui-code-editor.js'
+
+class CodeEditorDemo extends DemoPage {
+  override accessor componentName = 'Code Editor'
+
+  @reactive()
+  private accessor output = ''
+
+  @reactive()
+  private accessor editorValue = [
+    '// Start typing function names or {{ mentions }}',
+    'console.log("Hello, world!")',
+    '',
+    '// Try: getData, processData, or @John, @Jane',
+    '// Example: Ask {{John}} about the API design',
+    '// Example: {{Jane}} can review the implementation',
+    '',
+    '"Hello {{John}}! Can you help with the " + getData() + " function?"',
+  ].join('\n')
+
+  private functionSchemas: FunctionSchema[] = [
+    {
+      id: 'getData',
+      name: 'getData',
+      description: 'Fetches data from the server',
+      parameters: [
+        {
+          name: 'url',
+          type: 'string',
+          description: 'The URL to fetch data from',
+          required: true,
+        },
+        {
+          name: 'options',
+          type: 'RequestInit',
+          description: 'Fetch options',
+          required: false,
+        },
+      ],
+      returns: 'Promise<Response>',
+    },
+    {
+      id: 'processData',
+      name: 'processData',
+      description: 'Processes raw data into a usable format',
+      parameters: [
+        {
+          name: 'data',
+          type: 'any',
+          description: 'Raw data to process',
+          required: true,
+        },
+        {
+          name: 'transformer',
+          type: 'Function',
+          description: 'Optional transformer function',
+          required: false,
+        },
+      ],
+      returns: 'any',
+    },
+    {
+      id: 'validateInput',
+      name: 'validateInput',
+      description: 'Validates user input against a schema',
+      parameters: [
+        {
+          name: 'input',
+          type: 'object',
+          description: 'The input to validate',
+          required: true,
+        },
+        {
+          name: 'schema',
+          type: 'Schema',
+          description: 'Validation schema',
+          required: true,
+        },
+      ],
+      returns: 'ValidationResult',
+    },
+  ]
+
+  private suggestions: Suggestion[] = [
+    {
+      id: 'user-john',
+      label: 'John',
+      description: 'Software Engineer',
+      suffix: 'Engineering',
+      data: { role: 'developer', department: 'engineering' },
+    },
+    {
+      id: 'user-jane',
+      label: 'Jane',
+      description: 'Product Manager',
+      suffix: 'Product',
+      data: { role: 'manager', department: 'product' },
+    },
+    {
+      id: 'admin-system',
+      label: 'System',
+      description: 'System Administrator',
+      suffix: 'Admin',
+      data: { role: 'admin', department: 'infrastructure' },
+    },
+  ]
+
+  private handleFunctionInsert(event: CustomEvent<FunctionInsertEvent>): void {
+    const { functionSchema, position } = event.detail
+    this.output = `Function inserted: ${functionSchema.name} at position ${position}`
+  }
+
+  private handleSuggestionInsert(event: CustomEvent<SuggestionInsertEvent>): void {
+    const { suggestion, position } = event.detail
+    this.output = `Suggestion inserted: ${suggestion.label} at position ${position}`
+  }
+
+  private handleInput(event: Event): void {
+    const target = event.target as HTMLElement & { value: string }
+    this.editorValue = target.value
+  }
+
+  contentTemplate() {
+    return html`
+      <a href="../">Back</a>
+
+      <section class="demo-section">
+        <h2 class="display-large">Basic Code Editor</h2>
+        <p>A CodeMirror 6 based editor with function autocomplete and suggestion pills.</p>
+
+        <code-editor
+          label="Code Editor"
+          supporting-text="Type function names or @mentions to see autocomplete"
+          .value=${this.editorValue}
+          .functionSchemas=${this.functionSchemas}
+          .suggestions=${this.suggestions}
+          @function-insert=${this.handleFunctionInsert}
+          @suggestion-insert=${this.handleSuggestionInsert}
+          @input=${this.handleInput}
+        ></code-editor>
+
+        ${this.output ? html`<p><strong>Output:</strong> ${this.output}</p>` : ''}
+      </section>
+
+      <section class="demo-section">
+        <h2 class="display-large">Dark Theme</h2>
+        <p>The same editor with dark theme enabled.</p>
+
+        <code-editor
+          label="Dark Theme Editor"
+          supporting-text="Dark theme variant"
+          .value=${'// Dark theme example\nconst theme = "dark"'}
+          .functionSchemas=${this.functionSchemas}
+          .suggestions=${this.suggestions}
+          dark-theme
+        ></code-editor>
+      </section>
+
+      <section class="demo-section">
+        <h2 class="display-large">Disabled State</h2>
+        <p>A disabled editor for read-only content.</p>
+
+        <code-editor
+          label="Disabled Editor"
+          supporting-text="This editor is disabled"
+          .value=${'// This editor is disabled\nconst readOnly = true'}
+          .functionSchemas=${this.functionSchemas}
+          .suggestions=${this.suggestions}
+          disabled
+        ></code-editor>
+      </section>
+
+      <section class="demo-section">
+        <h2 class="display-large">Error State</h2>
+        <p>An editor in error state.</p>
+
+        <code-editor
+          label="Error Editor"
+          supporting-text="This editor has an error"
+          .value=${'// This editor has an error\nconst invalid = true'}
+          .functionSchemas=${this.functionSchemas}
+          .suggestions=${this.suggestions}
+          invalid
+        ></code-editor>
+      </section>
+
+      <section class="demo-section">
+        <h2 class="display-large">Function Schemas</h2>
+        <p>Available function schemas for autocomplete:</p>
+        <pre>${JSON.stringify(this.functionSchemas, null, 2)}</pre>
+      </section>
+
+      <section class="demo-section">
+        <h2 class="display-large">Suggestions</h2>
+        <p>Available suggestions (use @mention syntax):</p>
+        <pre>${JSON.stringify(this.suggestions, null, 2)}</pre>
+      </section>
+    `
+  }
+}
+
+const instance = new CodeEditorDemo()
+instance.render()

package/demo/elements/code-editor/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Code Editor Demo</title>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+    rel="stylesheet"
+  />
+  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
+  <link href="../../page.css" rel="stylesheet" type="text/css" />
+</head>
+<body data-gr-ext-disabled="next">
+  <div id="app"></div>
+  <script type="module" src="/.tmp/demo/elements/code-editor/CodeEditorDemo.js"></script>
+</body>
+</html>

package/demo/elements/index.html

@@ -25,6 +25,9 @@
         <dt><a href="authorization/index.html">Authorization element</a></dt>
         <dd>Elements to define HTTP authorization.</dd>
 
+        <dt><a href="code-editor/index.html">Code editor</a></dt>
+        <dd>An element that render a code editor.</dd>
+
         <dt><a href="context-menu/index.html">Context menu</a></dt>
         <dd>An element that render a context menu.</dd>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.11",
+  "version": "0.5.12",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",
@@ -180,6 +180,14 @@
     "@api-client/core": "^0.18.0",
     "@api-client/graph": "^0.3.6",
     "@api-client/json": "^0.2.0",
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/basic-setup": "^0.20.0",
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/language": "^6.11.2",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.38.0",
     "@github/relative-time-element": "^4.4.6",
     "@material/web": "^2.3.0",
     "@types/har-format": "^1.2.8",
@@ -198,6 +206,7 @@
     "@commitlint/config-conventional": "^19.2.2",
     "@eslint/compat": "^1.2.8",
     "@eslint/js": "^9.26.0",
+    "@jarrodek/ts-lit-plugin": "^3.0.0",
     "@open-wc/testing": "^4.0.0",
     "@pawel-up/semver": "^0.1.4",
     "@types/marked": "^5.0.2",
@@ -222,7 +231,6 @@
     "oauth2-mock-server": "^8.0.0",
     "prettier": "^3.5.1",
     "sinon": "^21.0.0",
-    "@jarrodek/ts-lit-plugin": "^3.0.0",
     "typescript": "^5.5.2",
     "typescript-eslint": "^8.24.1",
     "wireit": "^0.14.4"

package/src/elements/code-editor/README.md

@@ -0,0 +1,204 @@
+# Code Editor Component
+
+A CodeMirror 6 based editor component that supports function autocomplete and suggestion pills, built with Material Design styling.
+
+## Features
+
+- **CodeMirror 6 Integration**: Uses the latest CodeMirror 6 for a modern editing experience
+- **Function Autocomplete**: Dynamic function schema loading with intelligent autocomplete
+- **Suggestion Pills**: Inline suggestion pills that are visually distinct from plain text
+- **Material Design Styling**: Follows Material Design v3 guidelines
+- **Keyboard Navigation**: Full keyboard support for autocomplete and editor interactions
+- **Accessibility**: Built with accessibility in mind, including proper ARIA attributes
+- **Dark Theme Support**: Optional dark theme variant
+- **Syntax Highlighting**: JavaScript syntax highlighting with extensible language support
+
+## Basic Usage
+
+```typescript
+import { CodeEditorElement } from '@api-client/ui'
+
+// Or import the component directly
+import '@api-client/ui/elements/code-editor/ui-code-editor.js'
+```
+
+```html
+<code-editor
+  label="Code Editor"
+  supporting-text="Enter your code here"
+  .value=${this.code}
+  .functionSchemas=${this.functions}
+  .suggestions=${this.suggestions}
+  @function-insert=${this.handleFunctionInsert}
+  @suggestion-insert=${this.handleSuggestionInsert}
+  @input=${this.handleInput}
+></code-editor>
+```
+
+## Function Schemas
+
+Function schemas define the available functions for autocomplete:
+
+```typescript
+const functionSchemas: FunctionSchema[] = [
+  {
+    id: 'getData',
+    name: 'getData',
+    description: 'Fetches data from the server',
+    parameters: [
+      {
+        name: 'url',
+        type: 'string',
+        description: 'The URL to fetch data from',
+        required: true,
+      },
+      {
+        name: 'options',
+        type: 'RequestInit',
+        description: 'Fetch options',
+        required: false,
+      },
+    ],
+    returns: 'Promise<Response>',
+  },
+]
+```
+
+## Suggestions
+
+Suggestions are used for @mention-style autocomplete with pill rendering:
+
+```typescript
+const suggestions: Suggestion[] = [
+  {
+    id: 'user-john',
+    label: 'John Doe',
+    description: 'Software Engineer',
+    suffix: 'Engineering',
+    data: { role: 'developer', department: 'engineering' },
+  },
+]
+```
+
+## Events
+
+The component dispatches several events:
+
+- `function-insert`: When a function is inserted via autocomplete
+- `suggestion-insert`: When a suggestion is inserted as a pill
+- `input`: When the editor content changes (standard input event)
+- `change`: When the editor loses focus and content has changed
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `label` | `string` | `''` | Label text displayed as placeholder/floating label |
+| `supporting-text` | `string` | `''` | Supporting text displayed below the editor |
+| `disabled` | `boolean` | `false` | Whether the component is disabled |
+| `invalid` | `boolean` | `false` | Whether the component is in an invalid state |
+| `name` | `string` | `''` | Name attribute for form integration |
+| `required` | `boolean` | `false` | Whether the input is required |
+| `placeholder` | `string` | `''` | Placeholder text shown when editor is empty |
+| `value` | `string` | `''` | The editor content value |
+| `functionSchemas` | `FunctionSchema[]` | `[]` | Available function schemas for autocomplete |
+| `suggestions` | `Suggestion[]` | `[]` | Available suggestions for autocomplete |
+| `dark-theme` | `boolean` | `false` | Whether to use dark theme |
+| `language` | `string` | `'javascript'` | Programming language for syntax highlighting |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `focus()` | Focus the editor |
+| `getSelection()` | Get the current selection range |
+| `insertText(text: string)` | Insert text at the current cursor position |
+
+## Styling
+
+The component uses CSS custom properties for theming and follows Material Design tokens:
+
+```css
+code-editor {
+  --md-sys-color-primary: #1976d2;
+  --md-sys-color-on-surface: #1c1b1f;
+  /* ... other Material Design tokens */
+}
+```
+
+## Accessibility
+
+The component includes:
+- Proper ARIA attributes for screen readers
+- Keyboard navigation support
+- Focus management
+- Semantic HTML structure
+- High contrast support
+
+## Examples
+
+### Basic Editor
+
+```html
+<code-editor
+  label="JavaScript Code"
+  .value=${'console.log("Hello, world!")'}
+>
+</code-editor>
+```
+
+### With Function Autocomplete
+
+```html
+<code-editor
+  label="Code with Functions"
+  .value=${this.code}
+  .functionSchemas=${this.functions}
+  @function-insert=${this.onFunctionInsert}
+>
+</code-editor>
+```
+
+### With Suggestions (Pills)
+
+```html
+<code-editor
+  label="Code with Mentions"
+  .value=${this.code}
+  .suggestions=${this.users}
+  @suggestion-insert=${this.onSuggestionInsert}
+>
+</code-editor>
+```
+
+### Dark Theme
+
+```html
+<code-editor
+  label="Dark Code Editor"
+  .value=${this.code}
+  dark-theme
+>
+</code-editor>
+```
+
+## Demo
+
+A comprehensive demo is available at `/demo/elements/code-editor/` when running the development server.
+
+## Browser Support
+
+The component works in all modern browsers that support:
+- ES2020+ features
+- Web Components
+- CSS Custom Properties
+- CodeMirror 6
+
+## Contributing
+
+When contributing to this component, please follow the established patterns:
+- Use TypeScript for type safety
+- Follow the existing code style
+- Include tests for new features
+- Update documentation as needed
+- Follow Material Design guidelines for styling

package/src/elements/code-editor/internals/CodeEditor.styles.ts

@@ -0,0 +1,150 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    outline: none;
+    min-width: 200px;
+    background-color: transparent;
+    color: var(--md-sys-color-on-surface);
+
+    font-family: var(--md-sys-typescale-body-large-font);
+    font-size: var(--md-sys-typescale-body-large-size);
+    letter-spacing: var(--md-sys-typescale-body-large-tracking);
+    line-height: var(--md-sys-typescale-body-large-height);
+  }
+
+  .surface {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .label {
+    font-family: var(--md-sys-typescale-label-medium-font);
+    font-weight: var(--md-sys-typescale-label-medium-weight);
+    font-size: var(--md-sys-typescale-label-medium-size);
+    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+    line-height: var(--md-sys-typescale-label-medium-height);
+    color: var(--md-sys-color-on-surface-variant);
+
+    padding: 8px 16px 4px 16px;
+    margin: 0;
+  }
+
+  .has-focus .label {
+    color: var(--md-sys-color-primary);
+  }
+
+  .editor-container {
+    position: relative;
+    flex: 1;
+
+    border-radius: var(--md-sys-shape-corner-extra-small);
+    border: 1px solid var(--md-sys-color-outline);
+    outline: 0px solid var(--md-sys-color-primary);
+    outline-offset: -1px;
+    transition:
+      border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .editor-container:focus-within {
+    border-color: var(--md-sys-color-primary);
+    outline-width: 2px;
+    outline-offset: -2px;
+  }
+
+  .supporting-text {
+    margin-top: 4px;
+    padding: 0 16px;
+    color: var(--md-sys-color-on-surface-variant);
+    font-family: var(--md-sys-typescale-body-small-font);
+    font-weight: var(--md-sys-typescale-body-small-weight);
+    font-size: var(--md-sys-typescale-body-small-size);
+    letter-spacing: var(--md-sys-typescale-body-small-tracking);
+    line-height: var(--md-sys-typescale-body-small-height);
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  :host([disabled]) .editor-container {
+    border-color: var(--md-sys-color-on-surface);
+  }
+
+  :host([disabled]) .label,
+  :host([disabled]) .editor-container {
+    color: var(--md-sys-color-on-surface);
+    opacity: 0.38;
+  }
+
+  :host([invalid]) .label,
+  :host([invalid]) .supporting-text {
+    color: var(--md-sys-color-error);
+  }
+
+  :host([invalid]) .editor-container {
+    border-color: var(--md-sys-color-error);
+    outline-color: var(--md-sys-color-error);
+  }
+
+  .mention-chip {
+    display: inline-flex;
+    align-items: center;
+    margin: 0 2px;
+    vertical-align: baseline;
+    user-select: none;
+  }
+
+  .mention-chip ui-chip {
+    margin: 0;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  .cm-gutters {
+    background: var(--md-sys-color-surface-variant);
+    color: var(--md-sys-color-on-surface-variant);
+    border: none;
+  }
+
+  .cm-focused .cm-cursor {
+    border-left-color: var(--md-sys-color-primary);
+  }
+
+  ::selection {
+    background: var(--md-sys-color-surface-variant);
+  }
+
+  .ͼ1.cm-focused {
+    outline: none;
+  }
+
+  /* Responsive */
+  @media (max-width: 600px) {
+    :host {
+      min-width: 0;
+    }
+
+    .label {
+      padding: 6px 6px 3px 6px;
+    }
+
+    .editor-container {
+      padding: 6px;
+    }
+
+    .supporting-text {
+      padding: 3px 6px 6px 6px;
+    }
+  }
+`