feat: add code component

apps/documentation/docs/.vitepress/config.mts

@@ -91,6 +91,10 @@ export default defineConfig({
                 text: 'Details',
                 link: '/design/components/details',
               },
+              {
+                text: 'Code',
+                link: '/design/components/code',
+              },
             ],
           },
         ],

apps/documentation/docs/design/components/code.md

@@ -0,0 +1,115 @@
+# Collection Component <Badge type="warning" text="beta" />
+
+<div class="component-name">&lt;ecc-utils-design-code&gt;</div>
+Simple code editor to handle Yaml, JSON and multiline text input.
+<ClientOnly>
+  <div :class="isDark ? 'component-dark component' : 'component-light component'">
+    <ecc-utils-design-code :v-if="renderComponent" :items="primaryItems" :filters="primaryFilters" totalItems="50"></ecc-utils-design-code>
+
+::: details Code Blocks
+::: code-group
+
+```js [HTML]
+import "@elixir-cloud/design/dist/components/code/index.js";
+```
+
+  <!-- ```jsx [React]
+  ``` -->
+
+:::
+
+  </div>
+</ClientOnly>
+
+## Importing
+
+```js [HTML]
+import "@elixir-cloud/design/dist/components/code/index.js";
+```
+
+## Properties
+
+| Property      | Required | Default | Type     | Description                                                            |
+| ------------- | -------- | ------- | -------- | ---------------------------------------------------------------------- |
+| `code`        | `false`  |         | `String` | Specifies the code to be rendered in the editor during initialization. |
+| `label`       | `Code`   |         | `String` | Label for code editor input field.                                     |
+| `language`    | `false`  |         | `String` | Specifies the language interpreter for syntax highlighting.            |
+| `indentation` | `2`      |         | `Number` | Specifies number of spaces that should be considered for 1 Tab space.  |
+| `blurDelay`   | `150`    |         | `Number` | Time in ms between 2 Tab key presses that should move the focus.       |
+
+## Events
+
+| Event Name         | Description                                                                                                                                                                                                                                                             |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ecc-utils-change` | This event is triggered when there is a change in the code within the editor. The event details include the language set by the package author, the code as value, and an error attribute indicating whether the entered code is valid based on the specified language. |
+
+## Methods
+
+| Method Name | Arguments | Description        |
+| ----------- | --------- | ------------------ |
+| `getCode()` |           | Returns the input. |
+
+## Slots
+
+## Parts
+
+## Examples
+
+### JSON
+
+<ClientOnly>
+  <div :class="isDark ? 'component-dark component' : 'component-light component'">
+    <ecc-utils-design-code :v-if="renderComponent" :items="primaryItems" :filters="primaryFilters" totalItems="50" language="JSON"></ecc-utils-design-code>
+
+::: details Code Blocks
+::: code-group
+
+```js [HTML]
+import "@elixir-cloud/design/dist/components/code/index.js";
+```
+
+  <!-- ```jsx [React]
+  ``` -->
+
+:::
+
+  </div>
+</ClientOnly>
+
+### Indentation
+
+<ClientOnly>
+  <div :class="isDark ? 'component-dark component' : 'component-light component'">
+    <ecc-utils-design-code :v-if="renderComponent" indentation="4"></ecc-utils-design-code>
+
+::: details Code Blocks
+::: code-group
+
+```js [HTML]
+import "@elixir-cloud/design/dist/components/code/index.js";
+
+<ecc-utils-design-code indentation=12></ecc-utils-design-code>;
+```
+
+  <!-- ```jsx [React]
+  ``` -->
+
+:::
+
+  </div>
+</ClientOnly>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import { useData } from "vitepress";
+const { isDark } = useData();
+const renderComponent = ref(false);
+
+onMounted(() => {
+  import("@elixir-cloud/design/dist/components/code/index.js").then((module) => {
+  });
+});
+</script>
+
+<style>
+</style>

apps/documentation/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "vitepress dev docs",
     "build": "vitepress build docs",
-    "start": "vitepress preview docs",
+    "start": "npm run build && vitepress preview docs",
     "lint": "prettier .",
     "lint:fix": "prettier --write ."
   },

packages/ecc-client-lit-ga4gh-tes/src/components/tes-create-run/create-run.ts

@@ -495,7 +495,7 @@ export class TESCreateRun extends LitElement {
       });
   };
 
-  // Process env data
+  // eslint-disable-next-line
   private _processEnv = (
     envArray: Record<string, string>[]
   ): Record<string, string> =>
@@ -507,11 +507,11 @@ export class TESCreateRun extends LitElement {
       {}
     );
 
-  // Process volume data
+  // eslint-disable-next-line
   private _processVolumes = (value: Array<{ volume: string }>) =>
     value.map((vol) => vol.volume);
 
-  // Process tags data
+  // eslint-disable-next-line
   private _processTags = (
     tagArray: Array<{ name: string; value: string }>
   ): Record<string, string> =>

packages/ecc-utils-design/demo/code/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+	<head>
+		<meta charset="utf-8" />
+		<style></style>
+		<title>ecc-utils-design</title>
+		<script src="https://cdn.tailwindcss.com"></script>
+	</head>
+	<body>
+		<div class="p-10">
+			<div id="demo"></div>
+		</div>
+		<script type="module">
+			import { html, render } from "lit";
+			import "../../dist/components/code/index.js";
+
+			render(
+			  html`<ecc-utils-design-code> </ecc-utils-design-code> `,
+			  document.querySelector("#demo")
+			);
+		</script>
+	</body>
+</html>

packages/ecc-utils-design/demo/index.html

@@ -1,22 +1,24 @@
 <!DOCTYPE html>
 <html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #f5f5f5;
-      }
-    </style>
-    <title>ecc-utils-design</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body>
-    <div class="p-10">
-      <a href="./form" class="text-blue-500">Form Component</a>
-      <br />
-      <a href="./collection" class="text-blue-500">Collection Component</a>
-      <br />
-      <a href="./details/" class="text-blue-500">Details Component</a>
-    </div>
-  </body>
+	<head>
+		<meta charset="utf-8" />
+		<style>
+			body {
+				background: #f5f5f5;
+			}
+		</style>
+		<title>ecc-utils-design</title>
+		<script src="https://cdn.tailwindcss.com"></script>
+	</head>
+	<body>
+		<div class="p-10">
+			<a href="./form" class="text-blue-500">Form Component</a>
+			<br />
+			<a href="./collection" class="text-blue-500">Collection Component</a>
+			<br />
+			<a href="./details" class="text-blue-500">Details Component</a>
+			<br />
+			<a href="./code" class="text-blue-500">Code Component</a>
+		</div>
+	</body>
 </html>

packages/ecc-utils-design/package.json

@@ -60,6 +60,7 @@
   },
   "dependencies": {
     "@shoelace-style/shoelace": "^2.8.0",
+    "js-yaml": "^4.1.0",
     "lit": "^2.8.0",
     "lodash-es": "^4.17.21"
   }

packages/ecc-utils-design/src/components/code/code.styles.ts

@@ -0,0 +1,12 @@
+import { css } from "lit";
+
+const codeStyles = css`
+  #label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sl-spacing-x-small);
+  }
+`;
+
+export default codeStyles;