HDS::CodeEditor with Code Mirror 6

.changeset/long-poets-wonder.md

@@ -0,0 +1,6 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`Hds::CodeEditor` - Added new CodeMirror 6 supported code editor component
+`hds-code-editor` modifier - Added new code editor modifier which converts the element it is applied to into a CodeMirror6 code editor

packages/components/babel.config.json

@@ -26,6 +26,7 @@
     ],
     ["@babel/plugin-proposal-decorators", { "legacy": true }],
     "@babel/plugin-transform-class-properties",
-    "@babel/plugin-transform-private-methods"
+    "@babel/plugin-transform-private-methods",
+    "ember-concurrency/async-arrow-task-transform"
   ]
 }

packages/components/package.json

@@ -35,6 +35,13 @@
     "lint:js:fix": "eslint . --fix"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.7.1",
+    "@codemirror/lang-go": "^6.0.1",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-sql": "^6.8.0",
+    "@codemirror/language": "^6.10.3",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.33.0",
     "@ember/render-modifiers": "^2.0.5",
     "@ember/string": "^3.1.1",
     "@ember/test-waiters": "^3.1.0",
@@ -43,6 +50,7 @@
     "@hashicorp/design-system-tokens": "^2.2.2",
     "@hashicorp/flight-icons": "^3.8.0",
     "clipboard-polyfill": "^4.1.0",
+    "codemirror-lang-hcl": "^0.0.0-beta.2",
     "decorator-transforms": "^1.1.0",
     "ember-a11y-refocus": "^4.1.3",
     "ember-cli-sass": "^11.0.1",
@@ -156,6 +164,10 @@
       "./components/hds/code-block/description.js": "./dist/_app_/components/hds/code-block/description.js",
       "./components/hds/code-block/index.js": "./dist/_app_/components/hds/code-block/index.js",
       "./components/hds/code-block/title.js": "./dist/_app_/components/hds/code-block/title.js",
+      "./components/hds/code-editor/description.js": "./dist/_app_/components/hds/code-editor/description.js",
+      "./components/hds/code-editor/full-screen-button.js": "./dist/_app_/components/hds/code-editor/full-screen-button.js",
+      "./components/hds/code-editor/index.js": "./dist/_app_/components/hds/code-editor/index.js",
+      "./components/hds/code-editor/title.js": "./dist/_app_/components/hds/code-editor/title.js",
       "./components/hds/copy/button/index.js": "./dist/_app_/components/hds/copy/button/index.js",
       "./components/hds/copy/snippet/index.js": "./dist/_app_/components/hds/copy/snippet/index.js",
       "./components/hds/dialog-primitive/body.js": "./dist/_app_/components/hds/dialog-primitive/body.js",
@@ -301,6 +313,10 @@
       "./instance-initializers/load-sprite.js": "./dist/_app_/instance-initializers/load-sprite.js",
       "./modifiers/hds-anchored-position.js": "./dist/_app_/modifiers/hds-anchored-position.js",
       "./modifiers/hds-clipboard.js": "./dist/_app_/modifiers/hds-clipboard.js",
+      "./modifiers/hds-code-editor.js": "./dist/_app_/modifiers/hds-code-editor.js",
+      "./modifiers/hds-code-editor/highlight-styles/hds-dark-highlight-style.js": "./dist/_app_/modifiers/hds-code-editor/highlight-styles/hds-dark-highlight-style.js",
+      "./modifiers/hds-code-editor/palettes/hds-dark-palette.js": "./dist/_app_/modifiers/hds-code-editor/palettes/hds-dark-palette.js",
+      "./modifiers/hds-code-editor/themes/hds-dark-theme.js": "./dist/_app_/modifiers/hds-code-editor/themes/hds-dark-theme.js",
       "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js",
       "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.js",
       "./services/hds-time.js": "./dist/_app_/services/hds-time.js"

packages/components/src/components.ts

@@ -72,6 +72,12 @@ export { default as HdsCodeBlockDescription } from './components/hds/code-block/
 export { default as HdsCodeBlockTitle } from './components/hds/code-block/title.ts';
 export * from './components/hds/code-block/types.ts';
 
+// CodeEditor
+export { default as HdsCodeEditor } from './components/hds/code-editor/index.ts';
+export { default as HdsCodeEditorDescription } from './components/hds/code-editor/description.ts';
+export { default as HdsCodeEditorTitle } from './components/hds/code-editor/title.ts';
+export { default as HdsCodeEditorFullScreenButton } from './components/hds/code-editor/full-screen-button.ts';
+
 // CopyButton
 export { default as HdsCopyButton } from './components/hds/copy/button/index.ts';
 export * from './components/hds/copy/button/types.ts';

packages/components/src/components/hds/code-editor/description.hbs

@@ -0,0 +1,3 @@
+<Hds::Text::Body class="hds-code-editor__description" @tag="p" @size="100" ...attributes>
+  {{yield}}
+</Hds::Text::Body>

packages/components/src/components/hds/code-editor/description.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import TemplateOnlyComponent from '@ember/component/template-only';
+
+import type { HdsTextBodySignature } from '../text/body';
+
+export interface HdsCodeEditorDescriptionSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HdsTextBodySignature['Element'];
+}
+
+const HdsCodeEditorDescription =
+  TemplateOnlyComponent<HdsCodeEditorDescriptionSignature>();
+
+export default HdsCodeEditorDescription;

packages/components/src/components/hds/code-editor/full-screen-button.hbs

@@ -0,0 +1,10 @@
+<Hds::Button
+  class={{this.className}}
+  aria-pressed={{@isFullScreen}}
+  @isIconOnly={{true}}
+  @color="secondary"
+  @size="small"
+  @icon={{this.icon}}
+  @text="Toggle full screen view"
+  {{on "click" @onToggleFullScreen}}
+/>

packages/components/src/components/hds/code-editor/full-screen-button.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+import type { HdsButtonSignature } from '../button';
+
+export interface HdsCodeEditorFullScreenButtonSignature {
+  Args: {
+    isFullScreen: boolean;
+    onToggleFullScreen: () => void;
+  };
+  Element: HdsButtonSignature['Element'];
+}
+
+export default class HdsCodeEditorFullScreenButton extends Component<HdsCodeEditorFullScreenButtonSignature> {
+  get state(): 'minimize' | 'maximize' {
+    return this.args.isFullScreen ? 'minimize' : 'maximize';
+  }
+
+  get className() {
+    const classes = [
+      'hds-code-editor__full-screen-button',
+      'hds-code-editor__button',
+    ];
+
+    const stateClass = {
+      minimize: 'hds-code-editor__full-screen-button--minimize',
+      maximize: 'hds-code-editor__full-screen-button--maximize',
+    }[this.state];
+
+    classes.push(stateClass);
+
+    return classes.join(' ');
+  }
+
+  get icon(): HdsButtonSignature['Args']['icon'] {
+    const stateIcons = {
+      minimize: 'minimize',
+      maximize: 'maximize',
+    } as const;
+
+    return stateIcons[this.state];
+  }
+}

packages/components/src/components/hds/code-editor/index.hbs

@@ -0,0 +1,49 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+<div
+  class={{this.classNames}}
+  {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}
+  {{focus-trap isActive=this._isFullScreen}}
+  {{this._handleEscape}}
+  ...attributes
+>
+  {{#if (and this._isSetupComplete (or this.hasActions (has-block)))}}
+    <div class="hds-code-editor__header">
+      <div class="hds-code-editor__header-content">
+        {{yield (hash Title=(component "hds/code-editor/title") Description=(component "hds/code-editor/description"))}}
+      </div>
+
+      {{#if this.hasActions}}
+        <div class="hds-code-editor__header-actions">
+          {{#if @hasCopyButton}}
+            <Hds::Copy::Button
+              class="hds-code-editor__button hds-code-editor__copy-button"
+              @isIconOnly={{true}}
+              @size="small"
+              @text="Copy"
+              @textToCopy={{this._value}}
+            />
+          {{/if}}
+          {{#if @hasFullScreenButton}}
+            <Hds::CodeEditor::FullScreenButton
+              @isFullScreen={{this._isFullScreen}}
+              @onToggleFullScreen={{this.toggleFullScreen}}
+            />
+          {{/if}}
+        </div>
+      {{/if}}
+    </div>
+  {{/if}}
+  <div
+    class="hds-code-editor__editor"
+    {{hds-code-editor value=@value language=@language onInput=this.onInput onSetup=this.onSetup}}
+  />
+  {{#unless this._isSetupComplete}}
+    <div class="hds-code-editor__loader" aria-live="polite" role="status">
+      <Hds::Icon @name="loading" @size="24" />
+    </div>
+  {{/unless}}
+</div>

packages/components/src/components/hds/code-editor/index.ts

@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { modifier } from 'ember-modifier';
+
+import type { ComponentLike } from '@glint/template';
+import type { HdsCodeEditorSignature as HdsCodeEditorModifierSignature } from 'src/modifiers/hds-code-editor';
+import type { HdsButtonSignature } from 'src/components/hds/button';
+import type { HdsCodeEditorDescriptionSignature } from './description';
+import type { HdsCodeEditorTitleSignature } from './title';
+import type { EditorView } from '@codemirror/view';
+
+export interface HdsCodeEditorSignature {
+  Args: {
+    hasCopyButton?: boolean;
+    hasFullScreenButton?: boolean;
+    language?: HdsCodeEditorModifierSignature['Args']['Named']['language'];
+    value?: HdsCodeEditorModifierSignature['Args']['Named']['value'];
+    onInput?: HdsCodeEditorModifierSignature['Args']['Named']['onInput'];
+    onSetup?: HdsCodeEditorModifierSignature['Args']['Named']['onSetup'];
+  };
+  Blocks: {
+    default: [
+      {
+        Title?: ComponentLike<HdsCodeEditorTitleSignature>;
+        Description?: ComponentLike<HdsCodeEditorDescriptionSignature>;
+        Button?: ComponentLike<HdsButtonSignature>;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class HdsCodeEditor extends Component<HdsCodeEditorSignature> {
+  @tracked private _isFullScreen = false;
+  @tracked private _isSetupComplete = false;
+  @tracked private _value;
+
+  private _handleEscape = modifier(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape' || !this._isFullScreen) {
+        return;
+      }
+
+      this.toggleFullScreen();
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  });
+
+  constructor(owner: unknown, args: HdsCodeEditorSignature['Args']) {
+    super(owner, args);
+
+    if (args.value) {
+      this._value = args.value;
+    }
+  }
+
+  get classNames(): string {
+    // Currently there is only one theme so the class name is hard-coded.
+    // In the future, additional themes such as a "light" theme could be added.
+    const classes = ['hds-code-editor', 'hds-code-editor--theme-dark'];
+
+    if (this._isFullScreen) {
+      classes.push('hds-code-editor--is-full-screen');
+    }
+
+    return classes.join(' ');
+  }
+
+  get hasActions(): boolean {
+    return (this.args.hasCopyButton || this.args.hasFullScreenButton) ?? false;
+  }
+
+  @action
+  toggleFullScreen(): void {
+    this._isFullScreen = !this._isFullScreen;
+  }
+
+  @action
+  onInput(newVal: string): void {
+    this._value = newVal;
+    this.args.onInput?.(newVal);
+  }
+
+  @action
+  onKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Escape' && this._isFullScreen) {
+      this.toggleFullScreen();
+    }
+  }
+
+  @action
+  onSetup(editorView: EditorView): void {
+    this._isSetupComplete = true;
+    this.args.onSetup?.(editorView);
+  }
+}

packages/components/src/components/hds/code-editor/title.hbs

@@ -0,0 +1,3 @@
+<Hds::Text::Body class="hds-code-editor__title" @tag={{this.tag}} @size="200" @weight="semibold" ...attributes>
+  {{yield}}
+</Hds::Text::Body>

packages/components/src/components/hds/code-editor/title.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+
+import type { HdsTextBodySignature } from '../text/body';
+
+export interface HdsCodeEditorTitleSignature {
+  Args: {
+    tag?: HdsTextBodySignature['Args']['tag'];
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HdsTextBodySignature['Element'];
+}
+
+export default class HdsCodeEditorTitle extends Component<HdsCodeEditorTitleSignature> {
+  get tag() {
+    return this.args.tag ?? 'h2';
+  }
+}