feat(notebook-cell): add code editor and notebook cell components (#2220

)

libs/components/package.json

@@ -66,6 +66,11 @@
       "import": "./circular-progress.mjs",
       "require": "./circular-progress.js"
     },
+    "./code-editor": {
+      "types": "./code-editor/code-editor.d.ts",
+      "import": "./code-editor.mjs",
+      "require": "./code-editor.js"
+    },
     "./code-snippet": {
       "types": "./code-snippet/code-snippet.d.ts",
       "import": "./code-snippet.mjs",
@@ -161,6 +166,11 @@
       "import": "./menu.mjs",
       "require": "./menu.js"
     },
+    "./notebook-cell": {
+      "types": "./notebook-cell/notebook-cell.d.ts",
+      "import": "./notebook-cell.mjs",
+      "require": "./notebook-cell.js"
+    },
     "./radio": {
       "types": "./radio/radio.d.ts",
       "import": "./radio.mjs",

libs/components/project.json

@@ -15,6 +15,12 @@
     "build": {
       "executor": "nx:run-commands",
       "options": {
+        "customWebpackConfig": {
+          "path": "./monaco-webpack.config.js",
+          "mergeRules": {
+            "module.rules": "prepend"
+          }
+        },
         "commands": [
           "mkdir -p dist/libs/components/",
           "vite build --config libs/components/vite.config.js  --outDir dist/libs/components",

libs/components/src/code-editor/code-editor.scss

@@ -0,0 +1,24 @@
+: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);
+    }
+  }
+
+  .monaco-editor-background {
+    background-color: var(--cv-theme-surface);
+  }
+}
+
+.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);
+}

libs/components/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();
+  });
+});

libs/components/src/code-editor/code-editor.stories.js

@@ -0,0 +1,41 @@
+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',
+  },
+};
+
+const Template = ({ theme, language, code }) => {
+  return `
+  <div style="width: 800px; height: 100%">
+    <cv-code-editor language="${language}" theme="${theme}" code="${code}">
+    </cv-code-editor>
+  </div>
+   `;
+};
+
+export const Basic = Template.bind();

libs/components/src/code-editor/code-editor.theme.ts

@@ -0,0 +1,94 @@
+import * as tokens from '@covalent/tokens';
+
+export const cvEditorDarkTheme = {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    {
+      token: '',
+      foreground: tokens.CvDarkCodeSnippetColor,
+      background: tokens.CvThemeDarkColorsSurface,
+    },
+    {
+      token: 'comment',
+      foreground: tokens.CvDarkCodeSnippetComment,
+      fontStyle: 'italic',
+    },
+    { token: 'keyword', foreground: tokens.CvDarkCodeSnippetKeyword },
+    { token: 'variable', foreground: tokens.CvDarkCodeSnippetVariable },
+    { token: 'string', foreground: tokens.CvDarkCodeSnippetString },
+    { token: 'number', foreground: tokens.CvDarkCodeSnippetVariable },
+    { token: 'type', foreground: tokens.CvDarkCodeSnippetClass },
+    { token: 'class', foreground: tokens.CvDarkCodeSnippetClass },
+    { token: 'function', foreground: tokens.CvDarkCodeSnippetTitle },
+    { token: 'operator', foreground: tokens.CvDarkCodeSnippetLiteral },
+    { token: 'constant', foreground: tokens.CvDarkCodeSnippetLiteral },
+    { token: 'builtin', foreground: tokens.CvDarkCodeSnippetClass },
+    { token: 'punctuation', foreground: tokens.CvDarkCodeSnippetColor },
+    { token: 'meta', foreground: tokens.CvDarkCodeSnippetTitle },
+    { token: 'tag', foreground: tokens.CvDarkCodeSnippetSelector },
+    { token: 'attribute.name', foreground: tokens.CvDarkCodeSnippetVariable },
+    { token: 'attribute.value', foreground: tokens.CvDarkCodeSnippetString },
+    { token: 'invalid', foreground: tokens.CvDarkNegative },
+    { token: 'strong', fontStyle: 'bold' },
+    { token: 'emphasis', fontStyle: 'italic' },
+    {
+      token: 'link',
+      foreground: tokens.CvDarkCodeSnippetTitle,
+      fontStyle: 'underline',
+    },
+  ],
+  colors: {
+    'editor.background': tokens.CvThemeDarkColorsSurface,
+    'editor.foreground': tokens.CvDarkCodeSnippetColor,
+    'editorCursor.foreground': tokens.CvDarkTextSecondaryOnBackground,
+  },
+};
+
+export const cvEditorLightTheme = {
+  base: 'vs',
+  inherit: true,
+  rules: [
+    {
+      token: '',
+      foreground: tokens.CvLightCodeSnippetColor,
+      background: tokens.CvLightSurfaceCanvas,
+    },
+    {
+      token: 'comment',
+      foreground: tokens.CvLightCodeSnippetComment,
+      fontStyle: 'italic',
+    },
+    { token: 'keyword', foreground: tokens.CvLightCodeSnippetKeyword },
+    { token: 'doctag', foreground: tokens.CvLightCodeSnippetKeyword },
+    { token: 'formula', foreground: tokens.CvLightCodeSnippetKeyword },
+    { token: 'variable', foreground: tokens.CvLightCodeSnippetVariable },
+    { token: 'string', foreground: tokens.CvLightCodeSnippetString },
+    { token: 'number', foreground: tokens.CvLightCodeSnippetVariable },
+    { token: 'type', foreground: tokens.CvLightCodeSnippetClass },
+    { token: 'class', foreground: tokens.CvLightCodeSnippetClass },
+    { token: 'function', foreground: tokens.CvLightCodeSnippetTitle },
+    { token: 'literal', foreground: tokens.CvLightCodeSnippetLiteral },
+    { token: 'operator', foreground: tokens.CvLightCodeSnippetLiteral },
+    { token: 'constant', foreground: tokens.CvLightCodeSnippetLiteral },
+    { token: 'builtin', foreground: tokens.CvLightCodeSnippetClass },
+    { token: 'punctuation', foreground: tokens.CvLightCodeSnippetColor },
+    { token: 'meta', foreground: tokens.CvLightCodeSnippetTitle },
+    { token: 'tag', foreground: tokens.CvLightCodeSnippetSelector },
+    { token: 'attribute.name', foreground: tokens.CvLightCodeSnippetVariable },
+    { token: 'attribute.value', foreground: tokens.CvLightCodeSnippetString },
+    { token: 'invalid', foreground: tokens.CvLightNegative },
+    { token: 'strong', fontStyle: 'bold' },
+    { token: 'emphasis', fontStyle: 'italic' },
+    {
+      token: 'link',
+      foreground: tokens.CvLightCodeSnippetTitle,
+      fontStyle: 'underline',
+    },
+  ],
+  colors: {
+    'editor.background': tokens.CvThemeLightColorsSurface,
+    'editor.foreground': tokens.CvLightCodeSnippetColor,
+    'editorCursor.foreground': tokens.CvLightTextSecondaryOnBackground,
+  },
+};