@covalent/components 0.0.0-COVALENT

package/src/menu/menu.stories.js

@@ -0,0 +1,110 @@
+import './menu';
+import '../button/button';
+import '../list/list-item';
+import '../select/select';
+
+export default {
+  title: 'Components/Menu',
+  component: 'cv-menu',
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    corner: 'BOTTOM_START',
+    defaultFocus: 'NONE',
+    fixed: true,
+    activatable: true,
+  },
+  argTypes: {
+    corner: {
+      options: ['TOP_START', 'TOP_END', 'BOTTOM_START', 'BOTTOM_END'],
+      control: {
+        type: 'select',
+      },
+    },
+    defaultFocus: {
+      options: ['NONE', 'LIST_ROOT', 'FIRST_ITEM', 'LAST_ITEM'],
+      control: {
+        type: 'select',
+      },
+    },
+    x: {
+      control: {
+        type: 'number',
+      },
+    },
+    y: {
+      control: {
+        type: 'number',
+      },
+    },
+    absolute: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+export const Basic = (args) => {
+  document.addEventListener('DOMContentLoaded', () => {
+    window.basicMenu.anchor = window.basicButton;
+
+    window.basicButton.addEventListener('click', function () {
+      window.basicMenu.open = !window.basicMenu.open;
+    });
+  });
+
+  let menuProps = '';
+
+  for (const [key, value] of Object.entries(args))
+    menuProps += `${key}="${value}" `;
+
+  return `
+    <cv-button id="basicButton" raised label="Open menu"></cv-button>
+    <cv-menu 
+      id="basicMenu"
+      ${menuProps}
+      >
+      <cv-list-item>one</cv-list-item>
+      <cv-list-item>two</cv-list-item>
+      <cv-list-item>three</cv-list-item>
+      <cv-list-item disabled><div>four</div></cv-list-item>
+      <li divider></li>
+      <cv-list-item>aaa</cv-list-item>
+      <cv-list-item>bbb</cv-list-item>
+    </cv-menu>
+  `;
+};
+
+export const absolute = Basic.bind({});
+absolute.args = {
+  absolute: true,
+  x: 100,
+  y: 100,
+};
+
+export const quickOpen = Basic.bind({});
+quickOpen.args = {
+  quick: true,
+};
+
+export const fullwidth = Basic.bind({});
+fullwidth.args = {
+  fullwidth: true,
+};
+
+export const stayOpenOnBodyClick = Basic.bind({});
+stayOpenOnBodyClick.args = {
+  stayOpenonBodyClick: true,
+};
+
+export const corner = Basic.bind({});
+corner.args = {
+  corner: 'TOP_END',
+};
+
+export const defaultFocus = Basic.bind({});
+defaultFocus.args = {
+  defaultFocus: 'LAST_ITEM',
+};

package/src/menu/menu.ts

@@ -0,0 +1,23 @@
+import { MenuBase } from '@material/mwc-menu/mwc-menu-base';
+import { styles as baseStyles } from '@material/mwc-menu/mwc-menu.css';
+import styles from './menu.scss?inline';
+import { customElement } from 'lit/decorators.js';
+import { css, unsafeCSS } from 'lit';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-menu': CovalentMenu;
+  }
+}
+
+@customElement('cv-menu')
+export class CovalentMenu extends MenuBase {
+  static override styles = [
+    baseStyles,
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+}
+
+export default CovalentMenu;

package/src/notebook-cell/notebook-cell.scss

@@ -0,0 +1,185 @@
+:host {
+  --mdc-icon-button-size: 2rem;
+
+  font-family: var(--mdc-typography-body1-font-family);
+  width: 100%;
+}
+
+cv-code-snippet {
+  background-color: var(--cv-theme-surface);
+  border-radius: 0;
+  box-sizing: border-box;
+}
+
+cv-code-snippet::part(code) {
+  font-size: var(--mdc-typography-body2-font-size);
+  line-height: var(--mdc-typography-body2-line-height);
+  padding: 0;
+  white-space: pre-wrap;
+}
+
+cv-code-editor {
+  margin-top: -1px;
+}
+
+.selectionIndicator {
+  background-color: var(--cv-theme-primary);
+  border-radius: 2px;
+  height: 100%;
+  visibility: hidden;
+}
+
+.selectionIndicatorWrapper {
+  min-width: 8px;
+
+  &:hover {
+    .selectionIndicator {
+      visibility: visible;
+    }
+  }
+}
+
+.status {
+  padding: 0 1px;
+  position: relative;
+}
+
+.loading {
+  top: 2.5px;
+}
+
+.timesExecuted {
+  --cv-icon-button-cursor: grab;
+
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--cv-theme-on-surface-38);
+  display: flex;
+  font-family: var(--cv-typography-subtitle2-font-family);
+  font-size: var(--cv-typography-subtitle2-font-size);
+  gap: 0.5rem;
+  height: 56px;
+  line-height: var(--cv-typography-headline6-line-height);
+
+  .executionCount {
+    padding-right: 1rem;
+    overflow: hidden;
+    text-align: right;
+    text-overflow: ellipsis;
+    user-select: none;
+    white-space: nowrap;
+    width: 52px;
+  }
+
+  .dragHandle {
+    color: var(--cv-theme-on-surface-variant);
+    cursor: grab;
+    padding-left: 0.5rem;
+    transition: visibility 0.3s ease;
+    visibility: hidden;
+
+    &:active {
+      --cv-icon-button-cursor: grabbing;
+    }
+  }
+}
+
+.timesExecutedWrapper {
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &:hover {
+    .dragHandle {
+      visibility: visible;
+    }
+  }
+}
+
+.cell {
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  transition: background-color 0.2s ease;
+  user-select: auto;
+
+  &.focused,
+  &.selected {
+    .selectionIndicator {
+      visibility: visible;
+    }
+  }
+
+  &:hover {
+    background-color: var(--cv-theme-secondary-4);
+
+    .selectionIndicator {
+      visibility: visible;
+      background-color: var(--cv-theme-on-secondary-container-38);
+    }
+  }
+
+  &:active {
+    background-color: var(--cv-theme-secondary-12);
+
+    .selectionIndicator {
+      visibility: visible;
+      background-color: var(--cv-theme-on-secondary-container-74);
+    }
+  }
+}
+
+.cellWrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.cellOutputWrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: calc(100% - 130px);
+  flex: 1;
+}
+
+.contextMenu {
+  background-color: var(--cv-theme-surface-canvas);
+  border-radius: 8px;
+  box-shadow: 0 8px 12px 6px rgba(0, 0, 0, 15%), 0 4px 4px 0 rgba(0, 0, 0, 30%);
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  visibility: hidden;
+  z-index: 1000;
+}
+
+.contextMenuContent {
+  border-radius: 4px;
+  flex-grow: 1;
+  max-height: 100%;
+  overflow: auto;
+}
+
+.contextMenu.open {
+  visibility: visible;
+}
+
+.editorContainer {
+  box-sizing: border-box;
+  background-color: var(--cv-theme-surface);
+  border: 1px solid var(--cv-theme-outline-variant);
+  border-radius: var(--cv-editor-border-radius, 4px);
+  min-height: 56px;
+  overflow: hidden;
+  padding: 1rem;
+}
+
+.errors,
+.output {
+  max-width: 100%;
+  width: 100%;
+}

package/src/notebook-cell/notebook-cell.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentNotebookCell } from './notebook-cell';
+
+describe('Notebook cell', () => {
+  it('should work', () => {
+    expect(new CovalentNotebookCell()).toBeDefined();
+  });
+});

package/src/notebook-cell/notebook-cell.stories.js

@@ -0,0 +1,87 @@
+import './notebook-cell';
+import '../alert/alert';
+import '../icon/icon';
+import '../typography/typography';
+import '../list/list';
+import '../list/list-item';
+
+export default {
+  title: 'Components/Notebook Cell',
+  args: {
+    code: 'Select * from DBC.UserInfo;',
+    index: 0,
+    language: 'sql',
+    loading: false,
+    selected: true,
+    hideCount: false,
+    hideEditor: false,
+    editorTheme: 'cv-light',
+    timesExecuted: 2,
+  },
+};
+
+const Template = ({
+  code,
+  index,
+  language,
+  loading,
+  selected,
+  hideCount,
+  hideEditor,
+  editorTheme,
+  timesExecuted,
+  error,
+  output,
+}) => {
+  return `<div style="width: 60vw;">
+            <cv-notebook-cell code="${code}" index="${index}" language="${language}" timesExecuted="${timesExecuted}" editorTheme="${editorTheme}" ${
+    hideEditor ? 'hideEditor' : ''
+  } ${selected ? 'selected' : ''} ${loading ? 'loading' : ''} ${
+    hideCount ? 'hideCount' : ''
+  }>
+      ${
+        error &&
+        `<div slot="error" style="margin-top: 1rem;">
+          <cv-alert
+              descriptionText="Could not load data!"
+              state="negative"
+              icon="error"
+              iconAriaLabel="error"
+            >
+            </cv-alert>
+        </div>`
+      }
+      ${
+        output &&
+        `<div slot="output">
+          <cv-typography scale="headline4" style="margin:1rem 0;">Create and Populate Tables</cv-typography>
+          <cv-typography scale="body1">Tables are created and populated using SQL</cv-typography>
+        </div>`
+      }
+      <cv-icon-button slot="drag-handle" icon="drag_indicator"></cv-icon-button>
+      <div slot="context-menu">
+        <cv-list activatable>
+          <cv-list-item>Cut</cv-list-item>
+          <cv-list-item>Copy</cv-list-item>
+          <cv-list-item>Paste</cv-list-item>
+          <cv-list-item disabled><div>Delete</div></cv-list-item>
+          <li divider></li>
+          <cv-list-item>Clear outputs</cv-list-item>
+          <cv-list-item>Restart</cv-list-item>
+        </cv-list>
+      </div>
+    </cv-notebook-cell>
+  </div>`;
+};
+
+export const Basic = Template.bind({});
+
+export const Error = Template.bind({});
+Error.args = {
+  error: true,
+};
+
+export const WithOutput = Template.bind({});
+WithOutput.args = {
+  output: true,
+};

package/src/notebook-cell/notebook-cell.ts

@@ -0,0 +1,300 @@
+import { css, html, LitElement, PropertyValues, unsafeCSS } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import styles from './notebook-cell.scss?inline';
+import { classMap } from 'lit/directives/class-map.js';
+import { KeyCode, editor } from 'monaco-editor/esm/vs/editor/editor.api.js';
+
+import '../code-editor/code-editor';
+import '../code-snippet/code-snippet';
+import '../icon-button/icon-button';
+import '../typography/typography';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-notebook-cell': CovalentNotebookCell;
+  }
+}
+
+/**
+ * Notebook cell
+ *
+ * @slot - This element has a slot
+ */
+@customElement('cv-notebook-cell')
+export class CovalentNotebookCell extends LitElement {
+  /**
+   * The index of the cell in a notebook
+   */
+  @property({ type: Number })
+  index?: number;
+
+  /**
+   * Code written in the cell
+   */
+  @property({ type: String })
+  code = '';
+
+  /**
+   * Language of the code
+   */
+  @property({ type: String })
+  language = '';
+
+  /**
+   * Whether the cell is loading
+   */
+  @property({ type: Boolean, reflect: true })
+  loading = false;
+
+  /**
+   * Whether the cell is selected
+   */
+  @property({ type: Boolean, reflect: true })
+  selected = false;
+
+  /**
+   * Number of times the cell was exceuted
+   */
+  @property({ type: Number })
+  timesExecuted = 0;
+
+  /**
+   * Whether the editor is shown
+   */
+  @property({ type: Boolean, reflect: true })
+  hideEditor = false;
+
+  /**
+   * Whether the execution count is shown
+   */
+  @property({ type: Boolean, reflect: true })
+  hideCount = false;
+
+  /**
+   * Theme for the code editor
+   */
+  @property({ type: String })
+  editorTheme = '';
+
+  private _editor!: editor.IStandaloneCodeEditor;
+
+  private _editorFocused = false;
+
+  @state()
+  private _isMenuOpen = false;
+
+  private _menuMaxHeight = 'auto';
+
+  private _menuPosition = { top: 0, left: 0 };
+
+  editorOptions = {
+    minimap: { enabled: false }, // Disable minimap to save space
+    wordWrap: 'on', // Enable word wrap to avoid horizontal scroll
+    fontSize: '14px',
+    glyphMargin: false,
+    folding: false,
+    lineHeight: 20,
+    lineNumbers: 'off',
+    lineDecorationsWidth: 0,
+    lineNumbersMinChars: 0,
+    renderIndentGuides: false,
+    renderLineHighlight: 'none',
+    overviewRulerLanes: 0,
+    hideCursorInOverviewRuler: true,
+    scrollbar: {
+      alwaysConsumeMouseWheel: false,
+      vertical: 'hidden',
+    },
+  };
+
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.closeContextMenu = this.closeContextMenu.bind(this);
+    this.showContextMenu = this.showContextMenu.bind(this);
+  }
+
+  closeContextMenu(): void {
+    this._isMenuOpen = false;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    document.addEventListener('click', this.closeContextMenu);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this.closeContextMenu);
+  }
+
+  handleCodeChange(e: CustomEvent) {
+    this.code = e.detail.code;
+  }
+
+  setEditorFocus(e: CustomEvent, setFocus: boolean) {
+    e.stopImmediatePropagation();
+    this._editorFocused = setFocus;
+    this.requestUpdate();
+  }
+
+  setEditorInstance(e: CustomEvent) {
+    e.stopImmediatePropagation();
+    this._editor = e.detail.editor;
+    this._editor.onKeyDown((e) => {
+      if (e.shiftKey && e.keyCode === KeyCode.Enter) {
+        e.preventDefault(); // Prevents adding a new line
+        // The event will still propagate and can be capture with an event listener
+      }
+    });
+  }
+
+  showContextMenu(e: MouseEvent) {
+    e.preventDefault();
+    const cells = document.querySelectorAll('cv-notebook-cell');
+    cells?.forEach((cell) => {
+      cell.closeContextMenu();
+    });
+
+    const menu = this.shadowRoot?.querySelector(
+      '.contextMenu'
+    ) as HTMLDivElement;
+    const menuHeight = menu?.offsetHeight;
+
+    // Determine if there is enough space below the click position
+    const viewportHeight = window.innerHeight;
+    const spaceBelow = viewportHeight - e.clientY;
+    const spaceAbove = e.clientY;
+
+    // Determine if there is enough space below, otherwise open upwards
+    if (spaceBelow >= menuHeight) {
+      // Enough space below, open normally
+      this._menuPosition = { top: e.clientY, left: e.clientX };
+      this._menuMaxHeight = `${spaceBelow}px`;
+    } else if (spaceAbove >= menuHeight) {
+      // Enough space above, open upwards fully
+      this._menuPosition = { top: e.clientY - menuHeight, left: e.clientX };
+      this._menuMaxHeight = `${menuHeight}px`;
+    } else {
+      // Not enough space either way, open upwards with adjusted height
+      this._menuPosition = { top: e.clientY - spaceAbove, left: e.clientX };
+      this._menuMaxHeight = `${spaceAbove}px`;
+    }
+    this._isMenuOpen = true;
+  }
+
+  protected updated(changedProperties: PropertyValues) {
+    const editor = this.shadowRoot?.querySelector('cv-code-editor');
+    if (changedProperties.has('code') || changedProperties.has('language')) {
+      // Update the editor instance's code and language properties
+      if (editor) {
+        editor.code = this.code;
+        editor.language = this.language;
+      } else {
+        // Update the code in code-snippet component
+        const codeSnippet = this.shadowRoot?.querySelector('cv-code-snippet');
+        if (codeSnippet && !this.selected) {
+          codeSnippet.highlight();
+        }
+      }
+    }
+    super.updated(changedProperties);
+  }
+
+  getEditorBgColor(): string {
+    const editorContainer = this.shadowRoot?.querySelector('.editorContainer');
+    if (!editorContainer) {
+      return '';
+    }
+    const styles = window.getComputedStyle(editorContainer);
+    return styles.getPropertyValue('background-color');
+  }
+
+  renderEditor() {
+    // Show editor when the cell is selected and show code snippet otherwise
+    const editor = this.selected
+      ? html`<cv-code-editor
+          @code-change="${this.handleCodeChange}"
+          @editor-ready="${this.setEditorInstance}"
+          @editor-focus="${(e: CustomEvent) => this.setEditorFocus(e, true)}"
+          @editor-blur="${(e: CustomEvent) => this.setEditorFocus(e, false)}"
+          .code="${this.code}"
+          .language="${this.language}"
+          .options="${this.editorOptions}"
+          .theme="${this.editorTheme}"
+          disableScroll
+        ></cv-code-editor>`
+      : html`<cv-code-snippet hideHeader .language="${this.language}"
+          >${this.code}</cv-code-snippet
+        >`;
+    return html`${this.hideEditor
+      ? ''
+      : html`<div class="editorContainer">${editor}</div>`}`;
+  }
+
+  renderOutput() {
+    const output = html` <div class="errors"><slot name="error"></slot></div>
+      <div class="output">
+        <slot name="output"></slot>
+        <slot name="input"></slot>
+      </div>`;
+    return html`${output}`;
+  }
+
+  renderExecutionCount() {
+    if (this.hideCount) {
+      return html`&nbsp;`;
+    }
+    const loadingClass = {
+      status: true,
+      loading: this.loading,
+    };
+    return html`[<span class="${classMap(loadingClass)}"
+        >${this.loading ? '*' : this.timesExecuted || ' '}</span
+      >] :`;
+  }
+
+  protected render() {
+    const classes = {
+      cell: true,
+      selected: this.selected,
+      focused: this._editorFocused,
+    };
+    return html`
+      <div class="${classMap(classes)}" @contextmenu=${this.showContextMenu}>
+        <div class="selectionIndicatorWrapper">
+          <div class="selectionIndicator"></div>
+        </div>
+
+        <div class="timesExecutedWrapper">
+          <div class="timesExecuted">
+            <div class="dragHandle">
+              <slot name="drag-handle"></slot>
+            </div>
+            <div class="executionCount">${this.renderExecutionCount()}</div>
+          </div>
+        </div>
+
+        <div class="cellOutputWrapper">
+          ${this.renderEditor()} ${this.renderOutput()}
+        </div>
+      </div>
+      <div
+        class="contextMenu ${this._isMenuOpen ? 'open' : ''}"
+        style="left: ${this._menuPosition.left}px; top: ${this._menuPosition
+          .top}px; max-height: ${this._menuMaxHeight}"
+      >
+        <div class="contextMenuContent">
+          <slot name="context-menu"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+export default CovalentNotebookCell;