Merge branch 'main' into ro-crate

Signed-off-by: Shivang Bagri <61118650+sivangbagri@users.noreply.github.com>
elixir-cloud-aai · Aug 13, 2024 · 6bc6dbb · 6bc6dbb
2 parents 372c42e + 8e0add4
commit 6bc6dbb
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,11 @@
     "type": "git",
     "url": "git+https://github.com/elixir-cloud-aai/cloud-components.git"
   },
+  "prettier": {
+    "singleQuote": false,
+    "printWidth": 80,
+    "tabWidth": 2
+  },
   "bugs": {
     "url": "https://github.com/elixir-cloud-aai/cloud-components/issues"
   },
@@ -15,7 +20,7 @@
     "clean": "turbo run clean && rm -rf node_modules",
     "dev": "turbo run dev",
     "lint": "eslint . && turbo run lint",
-    "lint:fix": "eslint . --fix && turbo run lint:fix",
+    "lint:fix": "eslint . --fix && turbo run lint:fix  && prettier .",
     "new": "turbo gen",
     "prepare": "husky install",
     "release": "changeset publish",
@@ -44,7 +49,7 @@
   },
   "packageManager": "npm@9.2.0",
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "workspaces": [
     "apps/*",

diff --git a/packages/ecc-client-elixir-drs-filer/package.json b/packages/ecc-client-elixir-drs-filer/package.json
@@ -1,30 +1,30 @@
 {
-  "name": "ecc-client-elixir-drs-filer",
+  "name": "@elixir-cloud/drs-filer",
   "description": "DRS Filer component",
   "main": "index.js",
   "type": "module",
   "version": "0.1.0",
   "private": true,
   "license": "Apache-2.0",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/elixir-cloud-aai/cloud-components.git"
-	},
-	"files": [
-		"dist",
-		"README.md",
-		"package.json",
-		"LICENSE"
-	],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/elixir-cloud-aai/cloud-components.git"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "package.json",
+    "LICENSE"
+  ],
   "scripts": {
     "analyze": "cem analyze --litelement",
     "build": "node ../../scripts/build.js -p ecc-client-elixir-drs-filer-",
     "dev": "concurrently -r \"npm run build -- --watch\" \"wds\"",
     "clean": "rm -rf dist node_modules custom-elements-manifest.config.js",
-    "test": "wtr --coverage",
+    "test": "",
     "test:watch": "wtr --watch",
     "lint": "npx eslint .",
-    "lint:fix": "npm run lint -- --fix",
+    "lint:fix": "npm run lint -- --fix && prettier .",
     "prepublish": "npm run build"
   },
   "devDependencies": {

diff --git a/packages/ecc-client-ga4gh-tes/package.json b/packages/ecc-client-ga4gh-tes/package.json
@@ -37,7 +37,7 @@
     "test": "wtr --coverage",
     "test:watch": "wtr --watch",
     "lint": "npx eslint .",
-    "lint:fix": "npm run lint -- --fix",
+    "lint:fix": "npm run lint -- --fix && prettier .",
     "prepublish": "npm run build"
   },
   "dependencies": {

diff --git a/packages/ecc-client-ga4gh-wes/package.json b/packages/ecc-client-ga4gh-wes/package.json
@@ -37,7 +37,7 @@
     "test": "wtr --coverage",
     "test:watch": "wtr --watch",
     "lint": "npx eslint .",
-    "lint:fix": "npm run lint -- --fix",
+    "lint:fix": "npm run lint -- --fix && prettier .",
     "prepublish": "npm run build"
   },
   "dependencies": {

diff --git a/packages/ecc-utils-design/demo/form/index.html b/packages/ecc-utils-design/demo/form/index.html
@@ -88,6 +88,7 @@
     <title>ecc-utils-design</title>
     <script src="https://cdn.tailwindcss.com"></script>
   </head>
+
   <body>
     <div class="p-10">
       <div id="demo"></div>
@@ -96,8 +97,6 @@
 
     <script type="module">
       import { html, render } from "lit";
-      import { getComponentCssParts } from "../dist/utilities/index.js";
-      import { EccUtilsDesignForm } from "../dist/components/index.js";
       import "../../dist/components/form/index.js";
 
       const fields = [
@@ -135,6 +134,19 @@
             tooltip: "Your ID document",
           },
         },
+        {
+          key: "gender",
+          label: "Gender",
+          type: "select",
+          fieldOptions: {
+            required: true,
+          },
+          selectOptions: [
+            { label: "Male", value: "1" },
+            { label: "Female", value: "2" },
+            { label: "Don't want to disclose", value: "3" },
+          ],
+        },
         {
           key: "address",
           label: "Address",
@@ -220,7 +232,6 @@
         html`<ecc-utils-design-form
           .fields=${fields}
           @ecc-utils-submit=${async (e) => {
-            console.log(getComponentCssParts(EccUtilsDesignForm));
             try {
               console.log("form - submitted", e.detail);
               document.querySelector("ecc-utils-design-form").loading();
@@ -238,10 +249,6 @@
         </ecc-utils-design-form> `,
         document.querySelector("#demo")
       );
-
-      console.log(
-        getComponentCssParts(document.querySelector("ecc-utils-design-form"))
-      );
     </script>
   </body>
 </html>
diff --git a/packages/ecc-utils-design/package.json b/packages/ecc-utils-design/package.json
@@ -38,7 +38,7 @@
     "test": "wtr --coverage",
     "test:watch": "wtr --watch",
     "lint": "npx eslint .",
-    "lint:fix": "npm run lint -- --fix",
+    "lint:fix": "npm run lint -- --fix && prettier .",
     "prepublish": "npm run build"
   },
   "devDependencies": {

diff --git a/packages/ecc-utils-design/src/components/form/form.ts b/packages/ecc-utils-design/src/components/form/form.ts
@@ -30,7 +30,8 @@ export interface Field {
     | "array"
     | "switch"
     | "file"
-    | "group";
+    | "group"
+    | "select";
   fieldOptions?: {
     required?: boolean;
     default?: string | boolean;
@@ -39,6 +40,7 @@ export interface Field {
     returnIfEmpty?: string;
     tooltip?: string;
   };
+  selectOptions?: Array<{ label: string; value: string }>;
   arrayOptions?: {
     defaultInstances?: number;
     max?: number;
@@ -172,6 +174,46 @@ export default class EccUtilsDesignForm extends LitElement {
       }
     }
 
+    if (field.type === "select") {
+      return html`
+        <div class="select-container">
+          ${field.fieldOptions?.tooltip && field.fieldOptions.tooltip !== ""
+            ? html`
+                <sl-tooltip
+                  id=${field.key}
+                  content=${field.fieldOptions?.tooltip}
+                >
+                  <label class="select-label">
+                    ${field.label} ${field.fieldOptions?.required ? "*" : ""}
+                  </label>
+                </sl-tooltip>
+              `
+            : html`
+                <label class="select-label">
+                  ${field.label} ${field.fieldOptions?.required ? "*" : ""}
+                </label>
+              `}
+          <sl-select
+            class="select"
+            ?required=${field.fieldOptions?.required}
+            value=${_.get(this.form, path)?.label || ""}
+            @sl-change=${(e: Event) => {
+              const selectElement = e.target as HTMLSelectElement;
+              const label = selectElement.selectedOptions[0].textContent;
+              _.set(this.form, path, label);
+              this.requestUpdate();
+            }}
+          >
+            ${field.selectOptions?.map(
+              (option) => html`
+                <sl-option value=${option.value}> ${option.label} </sl-option>
+              `
+            )}
+          </sl-select>
+        </div>
+      `;
+    }
+
     return html`
       <sl-input
         class="input"
@@ -481,6 +523,7 @@ export default class EccUtilsDesignForm extends LitElement {
             composed: true,
           });
           this.dispatchEvent(event);
+          console.log(this.form);
         }}
       >
         ${this.fields.map((field) => this.renderTemplate(field, "data"))}

diff --git a/turbo/generators/template-package/package.json.hbs b/turbo/generators/template-package/package.json.hbs
@@ -21,7 +21,7 @@
     "dev": "",
     "test": "",
     "lint": "npx eslint .",
-    "lint:fix": "npm run lint -- --fix"
+    "lint:fix": "npm run lint -- --fix && prettier ."
   },
   "devDependencies": {
     "eslint": "^8.41.0",