refactor: types and dir str

packages/ecc-client-lit-ga4gh-tes/package.json

@@ -9,10 +9,7 @@
   "types": "./dist/index.d.ts",
   "componentsPrefix": "ecc-client-lit-ga4gh-tes-",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
+    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
     "./dist/custom-elements.json": "./dist/custom-elements.json",
     "./dist/index.js": "./dist/index.js",
     "./dist/components/*": "./dist/components/*",
@@ -33,10 +30,7 @@
     "lint:fix": "npm run lint -- --fix",
     "prepublish": "npm run build"
   },
-  "dependencies": {
-    "@elixir-cloud/design": "*",
-    "lit": "^2.8.0"
-  },
+  "dependencies": { "@elixir-cloud/design": "*", "lit": "^2.8.0" },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@open-wc/eslint-config": "^9.2.1",

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

@@ -2,8 +2,9 @@
 
 import { html, LitElement } from "lit";
 import { property, state } from "lit/decorators.js";
+import { Field } from "@elixir-cloud/design/src/components/form/index.js";
+import type { EccUtilsButtonClickEvent } from "@elixir-cloud/design/src/events/index.js";
 import { postTask } from "../../API/Task/tesGet.js";
-import "@elixir-cloud/design/dist/components/form/index.js";
 
 export interface Executor {
   command: string[];
@@ -72,7 +73,7 @@ export default class ECCCLientGa4ghTesCreateRun extends LitElement {
 
   @state() accessor response: any = {};
 
-  private fields = [
+  @state() private fields: Field[] = [
     {
       key: "name",
       label: "Name",
@@ -81,7 +82,7 @@ export default class ECCCLientGa4ghTesCreateRun extends LitElement {
     {
       key: "description",
       label: "Description",
-      type: "test",
+      type: "text",
     },
     {
       key: "executors",
@@ -469,7 +470,7 @@ export default class ECCCLientGa4ghTesCreateRun extends LitElement {
     return html`
       <ecc-utils-design-form
         .fields=${this.fields}
-        @ecc-utils-submit=${(e: any) => {
+        @ecc-utils-submit=${(e: EccUtilsButtonClickEvent) => {
           this._submitForm(e.detail.form.data);
         }}
       >

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

@@ -0,0 +1,5 @@
+import { css } from "lit";
+
+const styles = css``;
+
+export default styles;

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

@@ -1,2 +1,2 @@
-import "./tes-create-run/create-run.js";
+import "./create-run/create-run.js";
 import "./runs/runs.js";

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

@@ -1,79 +1,16 @@
 /* eslint-disable lit/no-classfield-shadowing */
 import { html, css, LitElement, render } from "lit";
 import { property, state } from "lit/decorators.js";
-import "@elixir-cloud/design";
+import {
+  FilterProp,
+  ItemProp,
+} from "@elixir-cloud/design/src/components/collection/index.js";
+import {
+  Field,
+  Action,
+} from "@elixir-cloud/design/src/components/details/index.js";
 import { deleteTask, fetchTask, fetchTasks } from "../../API/Task/tesGet.js";
 
-// TODO: Remove the interfaces once design package
-//       can export them, as they are copied from
-//       from there.
-
-export interface Children {
-  label?: string;
-  path: string;
-  copy?: boolean;
-  defaultValue?: any;
-}
-
-export interface Field {
-  key: string;
-  path: string;
-  tab?: string;
-  label?: string;
-  arrayOptions?: {
-    labelOptions?: {
-      path?: string;
-      prefix?: string;
-      suffix?: string;
-    };
-    type?: "detail" | "tag";
-  };
-  tooltip?: string;
-  copy?: boolean;
-  parentKey?: string;
-}
-export interface ItemProp {
-  index: number;
-  name: string;
-  key: string;
-  lazy?: boolean;
-  tag?: {
-    name: string;
-    type?: "primary" | "success" | "neutral" | "warning" | "danger";
-  };
-}
-
-export interface FilterProp {
-  key: string;
-  type: "search" | "select";
-  options?: string[];
-  selectConfig?: {
-    multiple?: boolean;
-  };
-  placeholder?: string;
-}
-
-export interface Action {
-  key: string;
-  label: string;
-  type: "button" | "link";
-  buttonOptions?: {
-    variant?: "primary" | "success" | "neutral" | "warning" | "danger" | "text";
-    loading?: boolean;
-    disabled?: boolean;
-    size?: "small" | "medium" | "large";
-    icon?: {
-      url: string;
-      position?: "prefix" | "suffix";
-    };
-  };
-  linkOptions?: {
-    url: string;
-    size?: "small" | "medium" | "large";
-  };
-  position?: "left" | "right";
-}
-
 export default class ECCClientGa4ghTesRuns extends LitElement {
   static styles = css``;
   @property({ type: Number }) private pageSize = 5;

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

@@ -1,46 +1,7 @@
 import { html, LitElement } from "lit";
 import { property, state } from "lit/decorators.js";
+import { Field } from "@elixir-cloud/design/src/components/form/index.js";
 import { postWorkflow } from "../../API/Workflow/wesGet.js";
-import "@elixir-cloud/design";
-
-// TODO: import the interface from the design package
-export interface Field {
-  key: string;
-  label: string;
-  type?:
-    | "text"
-    | "date"
-    | "number"
-    | "email"
-    | "password"
-    | "tel"
-    | "url"
-    | "search"
-    | "datetime-local"
-    | "time"
-    | "array"
-    | "switch"
-    | "file"
-    | "group";
-  fieldOptions?: {
-    required?: boolean;
-    default?: string | boolean;
-    multiple?: boolean;
-    accept?: string;
-    returnIfEmpty?: string;
-    tooltip?: string;
-  };
-  arrayOptions?: {
-    defaultInstances?: number;
-    max?: number;
-    min?: number;
-  };
-  groupOptions?: {
-    collapsible: boolean;
-  };
-  error?: string;
-  children?: Array<Field>;
-}
 
 /**
  * @summary This component is used to create task runs using WES API.
@@ -55,7 +16,7 @@ export default class ECCClientGa4ghWesCreateRuns extends LitElement {
   @property({ type: String }) private baseURL =
     "https://prowes.rahtiapp.fi/ga4gh/wes/v1";
 
-  @state() fields: Array<Field> = [
+  @state() fields: Field[] = [
     {
       key: "workflow_url",
       label: "URL",

packages/ecc-client-lit-ga4gh-wes/src/components/wes-create-run/index.ts → packages/ecc-client-lit-ga4gh-wes/src/components/create-run/index.ts

@@ -1,6 +1,6 @@
-import ECCClientGa4ghWesCreateRuns from "./wes-create-run.js";
+import ECCClientGa4ghWesCreateRuns from "./create-run.js";
 
-export * from "./wes-create-run.js";
+export * from "./create-run.js";
 export default ECCClientGa4ghWesCreateRuns;
 
 window.customElements.define(

packages/ecc-client-lit-ga4gh-wes/src/components/index.ts

@@ -1,2 +1,2 @@
-import "./wes-create-run/wes-create-run.js";
+import "./create-run/create-run.js";
 import "./runs/runs.js";

packages/ecc-client-lit-ga4gh-wes/src/components/runs/runs.ts

@@ -1,82 +1,19 @@
 import { html, css, LitElement, render } from "lit";
 import { property, state } from "lit/decorators.js";
-import "@elixir-cloud/design";
+import {
+  FilterProp,
+  ItemProp,
+} from "@elixir-cloud/design/src/components/collection/index.js";
+import {
+  Field,
+  Action,
+} from "@elixir-cloud/design/src/components/details/index.js";
 import {
   cancelWorkflow,
   fetchWorkflow,
   fetchWorkflows,
 } from "../../API/Workflow/wesGet.js";
 
-// TODO: Remove the interfaces once design package
-//       can export them, as they are copied from
-//       from there.
-
-export interface Children {
-  label?: string;
-  path: string;
-  copy?: boolean;
-  defaultValue?: any;
-}
-
-export interface Field {
-  key: string;
-  path: string;
-  tab?: string;
-  label?: string;
-  arrayOptions?: {
-    labelOptions?: {
-      path?: string;
-      prefix?: string;
-      suffix?: string;
-    };
-    type?: "detail" | "tag";
-  };
-  tooltip?: string;
-  copy?: boolean;
-  parentKey?: string;
-}
-export interface ItemProp {
-  index: number;
-  name: string;
-  key: string;
-  lazy?: boolean;
-  tag?: {
-    name: string;
-    type?: "primary" | "success" | "neutral" | "warning" | "danger";
-  };
-}
-
-export interface Action {
-  key: string;
-  label: string;
-  type: "button" | "link";
-  buttonOptions?: {
-    variant?: "primary" | "success" | "neutral" | "warning" | "danger" | "text";
-    loading?: boolean;
-    disabled?: boolean;
-    size?: "small" | "medium" | "large";
-    icon?: {
-      url: string;
-      position?: "prefix" | "suffix";
-    };
-  };
-  linkOptions?: {
-    url: string;
-    size?: "small" | "medium" | "large";
-  };
-  position?: "left" | "right";
-}
-
-export interface FilterProp {
-  key: string;
-  type: "search" | "select";
-  options?: string[];
-  selectConfig?: {
-    multiple?: boolean;
-  };
-  placeholder?: string;
-}
-
 /**
  * @summary This component facilitates browsing workflow runs via WES API.
  * @since 1.0.0
@@ -94,7 +31,7 @@ export default class ECCClientGa4ghWesRuns extends LitElement {
   @property({ type: String }) private baseURL =
     "https://prowes.rahtiapp.fi/ga4gh/wes/v1";
 
-  @property({ type: Array }) private fields: Array<Field> = [
+  @property({ type: Array }) private fields: Field[] = [
     {
       label: "Tags",
       tab: "Overview",
@@ -247,7 +184,6 @@ export default class ECCClientGa4ghWesRuns extends LitElement {
     },
   ];
 
-  @state() private filterTag: string[] = [];
   @state() private filter = true;
   @state() private items: ItemProp[] = [];
   @state() private nextPageToken: string[] = [""];