@covalent/components 0.0.0-COVALENT

package/src/circular-progress/circular-progress.stories.js

@@ -0,0 +1,40 @@
+import './circular-progress';
+
+export default {
+  title: 'Components/Circular Progress',
+  argTypes: {
+    progress: {
+      control: { type: 'range', max: 1, min: 0, step: 0.1 },
+    },
+    density: {
+      control: { type: 'range', min: -8, max: 50 },
+    },
+  },
+  args: {
+    density: 0,
+  },
+};
+
+const Template = ({ density = 0, indeterminate, progress }) => {
+  const progressBar = document.createElement('cv-circular-progress');
+  progressBar.density = density;
+  progressBar.indeterminate = indeterminate;
+  progressBar.progress = progress;
+  progressBar.ariaLabel = 'Example progress bar';
+
+  return progressBar;
+};
+
+export const Indeterminate = Template.bind({});
+Indeterminate.parameters = {
+  // disables Chromatic's snapshotting on a story level
+  chromatic: { disableSnapshot: true },
+};
+Indeterminate.args = {
+  indeterminate: true,
+};
+
+export const Determinate = Template.bind({});
+Determinate.args = {
+  progress: 0.5,
+};

package/src/circular-progress/circular-progress.ts

@@ -0,0 +1,16 @@
+import { CircularProgressBase } from '@material/mwc-circular-progress/mwc-circular-progress-base';
+import { styles } from '@material/mwc-circular-progress/mwc-circular-progress.css';
+import { customElement } from 'lit/decorators.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-circular-progress': CovalentCircularProgress;
+  }
+}
+
+@customElement('cv-circular-progress')
+export class CovalentCircularProgress extends CircularProgressBase {
+  static override styles = [styles];
+}
+
+export default CovalentCircularProgress;

package/src/code-editor/code-editor.scss

@@ -0,0 +1,20 @@
+:host {
+  --cv-editor-width: 100%;
+  --cv-editor-height: 100%;
+
+  box-sizing: border-box;
+
+  .monaco-editor {
+    .lines-content.monaco-editor-background {
+      height: var(--cv-editor-height);
+      width: var(--cv-editor-width);
+    }
+  }
+}
+
+.editor {
+  height: var(--cv-editor-height);
+  min-height: var(--cv-editor-height);
+  max-width: calc(var(--cv-editor-width) - 2px);
+  width: var(--cv-editor-width);
+}

package/src/code-editor/code-editor.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentCodeEditor } from './code-editor';
+
+describe('Code editor', () => {
+  it('should work', () => {
+    expect(new CovalentCodeEditor()).toBeDefined();
+  });
+});

package/src/code-editor/code-editor.stories.js

@@ -0,0 +1,44 @@
+import './code-editor';
+
+const sqlContent = `
+SELECT * FROM load_to_teradata (
+    ON (
+    SELECT 'class' AS class_col,
+            'variable' AS variable_col,
+            'type' AS type_col,
+            category,
+            cnt,
+            'sum' AS sum_col,
+            'sumSq',
+            'totalCnt'
+    FROM aster_nb_modelSC
+    )
+    tdpid ('sdt12432.labs.teradata.com')
+    username ('sample_user')
+    password ('sample_user')
+    target_table ('td_nb_modelSC')
+);
+`;
+
+export default {
+  title: 'Components/Code Editor',
+  args: {
+    theme: 'cv-light',
+    code: sqlContent,
+    language: 'sql',
+    disableScroll: false,
+  },
+};
+
+const Template = ({ theme, language, code, disableScroll }) => {
+  return `
+  <div style="width: 800px; height: 100%">
+    <cv-code-editor language="${language}" theme="${theme}" code="${code}" ${
+    disableScroll ? 'disableScroll' : ''
+  }>
+    </cv-code-editor>
+  </div>
+   `;
+};
+
+export const Basic = Template.bind();

package/src/code-editor/code-editor.theme.ts

@@ -0,0 +1,199 @@
+import * as tokens from '@covalent/tokens';
+
+const getTheme = (theme: 'Light' | 'Dark') => {
+  return {
+    base: theme === 'Light' ? 'vs' : 'vs-dark',
+    inherit: true,
+    rules: [
+      {
+        token: '',
+        foreground: tokens[`Cv${theme}CodeSnippetColor`],
+        background: tokens[`Cv${theme}Surface`],
+      },
+      {
+        token: 'arbitration-variable',
+        foreground: tokens[`Cv${theme}CodeSnippetVariable`],
+      },
+      {
+        token: 'arbitration-variable.invalid',
+        foreground: tokens[`Cv${theme}Negative`],
+      },
+      {
+        token: 'attribute.name',
+        foreground: tokens[`Cv${theme}CodeSnippetVariable`],
+      },
+      {
+        token: 'attribute.value',
+        foreground: tokens[`Cv${theme}CodeSnippetVariable`],
+      },
+      {
+        token: 'attribute.value.number',
+        foreground: tokens[`Cv${theme}CodeSnippetVariable`],
+      },
+      {
+        token: 'attribute.value.unit',
+        foreground: tokens[`Cv${theme}CodeSnippetVariable`],
+      },
+      {
+        token: 'attribute.value.html',
+        foreground: tokens[`Cv${theme}CodeSnippetString`],
+      },
+      {
+        token: 'attribute.value.xml',
+        foreground: tokens[`Cv${theme}CodeSnippetLiteral`],
+      },
+      {
+        token: 'builtins',
+        foreground: tokens[`Cv${theme}CodeSnippetClass`],
+      },
+      {
+        token: 'class',
+        foreground: tokens[`Cv${theme}CodeSnippetClass`],
+      },
+      {
+        token: 'comment',
+        foreground: tokens[`Cv${theme}CodeSnippetComment`],
+        fontStyle: 'italic',
+      },
+      {
+        token: 'constant',
+        foreground: tokens[`Cv${theme}CodeSnippetLiteral`],
+      },
+      {
+        token: 'delimiter',
+        foreground: tokens[`CvTheme${theme}ColorsOnSurface`],
+      },
+      {
+        token: 'delimiter.html',
+        foreground: tokens[`Cv${theme}CodeSnippetSelector`],
+      },
+      {
+        token: 'delimiter.xml',
+        foreground: tokens[`Cv${theme}CodeSnippetSelector`],
+      },
+      {
+        token: 'doctag',
+        foreground: tokens[`Cv${theme}CodeSnippetKeyword`],
+      },
+      {
+        token: 'emphasis',
+        fontStyle: 'italic',
+      },
+      {
+        token: 'formula',
+        foreground: tokens[`Cv${theme}CodeSnippetKeyword`],
+      },
+      {
+        token: 'function',
+        foreground: tokens[`Cv${theme}CodeSnippetTitle`],
+      },
+      {
+        token: 'invalid',
+        foreground: tokens[`Cv${theme}Negative`],
+      },
+      { token: 'key', foreground: tokens[`Cv${theme}CodeSnippetString`] },
+      {
+        token: 'keyword',
+        foreground: tokens[`Cv${theme}CodeSnippetKeyword`],
+      },
+      {
+        token: 'keyword.json',
+        foreground: tokens[`Cv${theme}CodeSnippetTitle`],
+        fontStyle: 'bold italic',
+      },
+      {
+        token: 'link',
+        foreground: tokens[`Cv${theme}CodeSnippetTitle`],
+        fontStyle: 'underline',
+      },
+      {
+        token: 'literal',
+        foreground: tokens[`Cv${theme}CodeSnippetLiteral`],
+      },
+      {
+        token: 'meta',
+        foreground: tokens[`Cv${theme}CodeSnippetTitle`],
+      },
+      {
+        token: 'number',
+        foreground: tokens[`Cv${theme}CodeSnippetVariable`],
+      },
+      {
+        token: 'operator',
+        foreground: tokens[`Cv${theme}CodeSnippetLiteral`],
+      },
+      { token: 'predefined', foreground: tokens[`Cv${theme}CodeSnippetTitle`] },
+      {
+        token: 'predefined.sql',
+        foreground: tokens[`Cv${theme}CodeSnippetTitle`],
+      },
+      {
+        token: 'predefined.python',
+        foreground: tokens[`Cv${theme}CodeSnippetClass`],
+      },
+      {
+        token: 'punctuation',
+        foreground: tokens[`Cv${theme}CodeSnippetColor`],
+      },
+      {
+        token: 'string',
+        foreground: tokens[`Cv${theme}CodeSnippetString`],
+      },
+      {
+        token: 'string.sql',
+        foreground: tokens[`Cv${theme}CodeSnippetString`],
+      },
+      {
+        token: 'string.key.json',
+        foreground: tokens[`Cv${theme}CodeSnippetString`],
+      },
+      {
+        token: 'string.value.json',
+        foreground: tokens[`Cv${theme}CodeSnippetString`],
+      },
+      {
+        token: 'strong',
+        fontStyle: 'bold',
+      },
+      {
+        token: 'tag',
+        foreground: tokens[`Cv${theme}CodeSnippetSelector`],
+      },
+      {
+        token: 'tag.id.jade',
+        foreground: tokens[`Cv${theme}CodeSnippetClass`],
+      },
+      {
+        token: 'tag.class.jade',
+        foreground: tokens[`Cv${theme}CodeSnippetClass`],
+      },
+      {
+        token: 'type',
+        foreground: tokens[`Cv${theme}CodeSnippetClass`],
+      },
+      {
+        token: 'variable',
+        foreground: tokens[`Cv${theme}CodeSnippetVariable`],
+      },
+    ],
+    colors: {
+      comment: tokens[`Cv${theme}CodeSnippetComment`],
+      'editor.background': tokens[`Cv${theme}Surface`],
+      'editor.foreground': tokens[`CvTheme${theme}ColorsOnSurface`],
+      'editorCursor.foreground': tokens[`Cv${theme}TextSecondaryOnBackground`],
+      'editorLineNumber.activeForeground':
+        tokens[`CvTheme${theme}ColorsOnSurface74`],
+      'editorLineNumber.foreground': tokens[`CvTheme${theme}ColorsOnSurface38`],
+      'editor.lineHighlightBackground':
+        tokens[`CvTheme${theme}ColorsSurfaceContainerLow`],
+      'inputValidation.errorBackground': tokens[`Cv${theme}Negative`],
+      'inputValidation.errorBorder':
+        tokens[`CvTheme${theme}PalettesNegative95`],
+    },
+  };
+};
+
+// Any changes to these themes should also be reflected in the angular-code-editor theme.
+export const cvEditorDarkTheme = getTheme('Dark');
+
+export const cvEditorLightTheme = getTheme('Light');

package/src/code-editor/code-editor.ts

@@ -0,0 +1,231 @@
+import { css, html, LitElement, PropertyValues, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { createRef, Ref, ref } from 'lit/directives/ref.js';
+
+import { cvEditorDarkTheme, cvEditorLightTheme } from './code-editor.theme';
+import styles from './code-editor.scss?inline';
+
+// -- Monaco Editor Imports --
+import { editor } from 'monaco-editor/esm/vs/editor/editor.api.js';
+import baseStyles from 'monaco-editor/min/vs/editor/editor.main.css?inline';
+
+// Register all language contributions
+import 'monaco-editor/esm/vs/basic-languages/html/html.contribution';
+import 'monaco-editor/esm/vs/basic-languages/css/css.contribution';
+import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
+import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
+import 'monaco-editor/esm/vs/basic-languages/python/python.contribution';
+import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
+import 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution';
+import 'monaco-editor/esm/vs/basic-languages/r/r.contribution';
+
+@customElement('cv-code-editor')
+export class CovalentCodeEditor extends LitElement {
+  /**
+   * The container where editor will be created
+   */
+  private container: Ref<HTMLElement> = createRef();
+  /**
+   * Editor instance
+   */
+  editor?: editor.IStandaloneCodeEditor;
+  /**
+   * Theme of the editor
+   */
+  @property({ type: String }) theme?: string;
+  /**
+   * Language of th editor instance
+   */
+  @property() language?: string;
+  /**
+   * Code entered into the editor
+   */
+  @property() code?: string;
+  /**
+   * Disable scroll bar and set the editor height based on content
+   */
+  @property({ type: Boolean, reflect: true }) disableScroll?: boolean = false;
+  /**
+   * Options that can be set for the editor
+   */
+  @property({ type: Object }) options?: editor.IEditorOptions &
+    editor.IGlobalEditorOptions;
+
+  static styles = [
+    css`
+      ${unsafeCSS(baseStyles)} ${unsafeCSS(styles)}
+    `,
+  ];
+
+  private getFile() {
+    if (this.children.length > 0) return this.children[0];
+    return null;
+  }
+
+  private getCode() {
+    if (this.code) return this.code;
+    const file = this.getFile();
+    if (!file) return;
+    return file.innerHTML.trim() || '';
+  }
+
+  private getLang() {
+    if (this.language) return this.language;
+    const file = this.getFile();
+    if (!file) return;
+    const type = file.getAttribute('type');
+    return type?.split('/').pop();
+  }
+
+  private getTheme() {
+    if (this.theme) return this.theme;
+    return 'cv-light';
+  }
+
+  private setTheme = () => {
+    editor.setTheme(this.getTheme());
+  };
+
+  adjustHeight() {
+    if (this.editor && this.container.value) {
+      const contentHeight = this.editor.getContentHeight();
+      this.container.value.style.height = `${contentHeight}px`;
+      this.editor.layout();
+    }
+  }
+
+  createEditor(container: HTMLElement) {
+    // uses covalent light colors
+    editor.defineTheme(
+      'cv-light',
+      cvEditorLightTheme as editor.IStandaloneThemeData
+    );
+
+    // uses covalent dark colors
+    editor.defineTheme(
+      'cv-dark',
+      cvEditorDarkTheme as editor.IStandaloneThemeData
+    );
+
+    this.editor = editor.create(container, {
+      ...this.options,
+      fontLigatures: '',
+      value: this.getCode(),
+      language: this.getLang(),
+      theme: this.getTheme(),
+      automaticLayout: true,
+      scrollBeyondLastLine: false,
+    });
+
+    // Notify when the editor instance is created/ready
+    this.dispatchEvent(
+      new CustomEvent('editor-ready', {
+        detail: { editor: this.editor },
+        bubbles: false,
+        composed: true,
+      })
+    );
+  }
+
+  override disconnectedCallback(): void {
+    this.editor?.dispose();
+    window.removeEventListener('change', this.setTheme);
+    super.disconnectedCallback();
+  }
+
+  firstUpdated() {
+    if (this.container.value) {
+      this.createEditor(this.container.value);
+
+      this.onModelChange();
+
+      // Dispatch event when editor is focused
+      this.editor?.onDidFocusEditorText(() => {
+        this.dispatchEvent(
+          new CustomEvent('editor-focus', {
+            bubbles: false,
+            composed: true,
+          })
+        );
+      });
+
+      // Dispatch event when editor is blurred
+      this.editor?.onDidBlurEditorText(() => {
+        this.dispatchEvent(
+          new CustomEvent('editor-blur', {
+            bubbles: false,
+            composed: true,
+          })
+        );
+      });
+
+      if (this.disableScroll) {
+        // Adjust the height of the editor when content changes, to avoid vertical scroll bar
+        this.editor?.onDidContentSizeChange(() => {
+          this.adjustHeight();
+        });
+      }
+
+      this.adjustHeight();
+
+      window
+        .matchMedia('(prefers-color-scheme: dark)')
+        .addEventListener('change', this.setTheme);
+    }
+  }
+
+  getEditorInstance() {
+    return this.editor;
+  }
+
+  getValue() {
+    const value = this.editor?.getValue();
+    return value;
+  }
+
+  onModelChange() {
+    this.editor?.onDidChangeModelContent(() => {
+      this.code = this.getValue();
+      // Dispatch event when code in the editor is changed
+      this.dispatchEvent(
+        new CustomEvent('code-change', {
+          detail: { code: this.code },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    });
+  }
+
+  render() {
+    return html` <main ${ref(this.container)} class="editor"></main> `;
+  }
+
+  setValue(value: string) {
+    this.editor?.setValue(value);
+  }
+
+  updated(changedProperties: PropertyValues) {
+    if (changedProperties.has('code') && this.editor) {
+      const currentCode = this.editor.getValue();
+      if (this.code !== currentCode) {
+        this.editor.setValue(this.code || '');
+      }
+    }
+    if (changedProperties.has('language') && this.editor) {
+      // Update monaco editor language when language prop is changed
+      editor.setModelLanguage(
+        this.editor.getModel() as editor.ITextModel,
+        this.language || ''
+      );
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-code-editor': CovalentCodeEditor;
+  }
+}
+
+export default CovalentCodeEditor;

package/src/code-snippet/code-snippet.scss

@@ -0,0 +1,126 @@
+:host {
+  background-color: var(--mdc-theme-surface-canvas);
+  border-radius: var(--mdc-shape-medium);
+  display: block;
+  position: relative;
+
+  /* For max height */
+  overflow: hidden;
+
+  .code-slot {
+    display: none;
+  }
+
+  pre {
+    margin: 0;
+    overflow: auto;
+
+    code.hljs.cv-code-snippet {
+      padding: 16px;
+      display: block;
+      overflow-x: auto;
+      font-family: var(--cv-theme-code-font-family);
+      font-size: var(--cv-theme-code-font-size);
+      font-weight: var(--cv-theme-code-font-weight);
+      line-height: var(--cv-theme-code-line-height);
+    }
+  }
+
+  .hljs {
+    color: var(--cv-theme-code-snippet-color, #abb2bf);
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: var(--cv-theme-code-snippet-comment, #5c6370);
+    font-style: italic;
+  }
+
+  .hljs-doctag,
+  .hljs-formula,
+  .hljs-keyword {
+    color: var(--cv-theme-code-snippet-keyword, #c678dd);
+  }
+
+  .hljs-deletion,
+  .hljs-name,
+  .hljs-section,
+  .hljs-selector-tag,
+  .hljs-subst {
+    color: var(--cv-theme-code-snippet-selector, #e06c75);
+  }
+
+  .hljs-literal {
+    color: var(--cv-theme-code-snippet-literal, #56b6c2);
+  }
+
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string,
+  .hljs-regexp,
+  .hljs-string {
+    color: var(--cv-theme-code-snippet-string, #98c379);
+  }
+
+  .hljs-attr,
+  .hljs-number,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-pseudo,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable {
+    color: var(--cv-theme-code-snippet-variable, #d19a66);
+  }
+
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-symbol,
+  .hljs-title {
+    color: var(--cv-theme-code-snippet-title, #61aeee);
+  }
+
+  .hljs-built_in,
+  .hljs-class .hljs-title,
+  .hljs-title.class_ {
+    color: var(--cv-theme-code-snippet-class, #e6c07b);
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: 700;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
+}
+
+:host([inline]) {
+  border-radius: 0;
+}
+
+.header {
+  border-bottom: 1px solid var(--mdc-theme-border);
+  position: sticky;
+  top: -8px;
+  background-color: var(--mdc-theme-surface-canvas);
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 8px 4px 16px;
+  align-items: center;
+  border-radius: var(--mdc-shape-medium) var(--mdc-shape-medium) 0 0;
+}
+
+.title {
+  font-family: var(--mdc-typography-subtitle2-font-family);
+  font-size: var(--mdc-typography-subtitle2-font-size);
+  font-weight: var(--mdc-typography-subtitle2-font-weight);
+  line-height: var(--mdc-typography-subtitle2-line-height);
+  padding-right: 16px;
+}

package/src/code-snippet/code-snippet.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentCodeSnippet } from './code-snippet';
+
+describe('Code snippet', () => {
+  it('should work', () => {
+    expect(new CovalentCodeSnippet()).toBeDefined();
+  });
+});