fix components

Author: PhilDL

.eslintrc.json

@@ -0,0 +1,16 @@
+{
+    "extends": [
+        "eslint:recommended",
+        "prettier"
+    ],
+    "plugins": [],
+    "parserOptions": {
+        "ecmaVersion": 2022,
+        "sourceType": "module"
+    },
+    "env": {
+        "es6": true,
+        "node": true,
+        "browser": true
+    }
+}

.prettierrc

@@ -0,0 +1 @@
+{}

package.json

@@ -9,13 +9,16 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.8",
-    "postcss": "^8.4.14",
-    "tailwindcss": "^3.1.7",
-    "typescript": "^4.6.4",
-    "vite": "^3.0.0"
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.33.0",
+    "eslint-config-prettier": "^8.6.0",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.4",
+    "tailwindcss": "^3.2.6",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.1"
   },
   "dependencies": {
-    "@odoo/owl": "2.0.0-beta-16"
+    "@odoo/owl": "2.0.5"
   }
 }

pnpm-lock.yaml

@@ -70,11 +70,19 @@ state.selectedTechnology: <t t-esc="toJsonString(state.selectedTechnology)"/>
 export type MenuItem = {
   id: string;
   name: string;
+  callBack?: (menuItem: MenuItem) => void;
+};
+
+export type RootState = {
+  menuItems: MenuItem[];
+  selectedMenu?: MenuItem;
+  searchData: { id: number; name: string }[];
+  selectedTechnology?: { id?: number; name: string };
 };
 export class Root extends Component {
   static template = ROOT_TEMPLATE;
   static components = { MyComponent, DropDown, AutoCompleteInput };
-  state = useState({
+  state = useState<RootState>({
     menuItems: [
       {
         id: "item-1",
@@ -92,7 +100,7 @@ export class Root extends Component {
         callBack: (menuItem: MenuItem) => this.clickMenu(menuItem),
       },
     ],
-    selectedMenu: {},
+    selectedMenu: undefined,
     searchData: [
       { id: 1, name: "Rollup.js" },
       { id: 2, name: "Webpack" },
@@ -104,20 +112,15 @@ export class Root extends Component {
       { id: 8, name: "Vue" },
       { id: 9, name: "React" },
     ],
-    selectedTechnology: null,
+    selectedTechnology: undefined,
   });
 
   clickMenu(menuItem: MenuItem) {
-    console.log(menuItem);
-    // Object.assign(this.state, { selectedMenu: menuItem });
     this.state.selectedMenu = menuItem;
-    console.log("this.state.selectedMenu", this.state.selectedMenu);
   }
 
   onOptionChosen(selectedTechnology: { name: string; optional: boolean }) {
-    Object.assign(this.state, {
-      selectedTechnology,
-    });
+    this.state.selectedTechnology = selectedTechnology;
   }
 
   toJsonString(obj: object) {

src/Root.ts

@@ -73,11 +73,9 @@ export class AutoCompleteInput extends Component {
   reset() {
     // this.trigger("input", "");
     // this.trigger("chosen", { selectedTechnology: null });
-    Object.assign(this.state, {
-      chosenOption: "",
-      searchTerm: "",
-      showOptions: false,
-    });
+    this.state.chosenOption = "";
+    this.state.searchTerm = "";
+    this.state.showOptions = false;
   }
 
   handleShowOptions(evt: Event) {

src/components/AutoCompleteInput.ts

@@ -1,4 +1,10 @@
-import { Component, useState, xml, useExternalListener, useRef } from "@odoo/owl";
+import {
+  Component,
+  useState,
+  xml,
+  useExternalListener,
+  useRef,
+} from "@odoo/owl";
 
 const DROPDOWN_TEMPLATE = xml/*xml*/ `
 <div t-ref="DropDown" class="relative inline-block text-left">
@@ -56,6 +62,7 @@ export class DropDown extends Component {
       optional: true,
     },
     dropdownLeft: { type: Boolean, optional: true },
+    slots: {},
   };
   state = useState({ open: false });
   dropdownContainerRef = useRef("DropDown");

src/components/DropDown.ts

@@ -5,20 +5,3 @@ import { Root } from "./Root";
 
 const app = new App(Root, { dev: true });
 app.mount(document.getElementById("app")!, {});
-
-const addSpaces = (input: string, spacesToAdd: number) => {
-  for (let i = 0; i < spacesToAdd; i++) {
-    input += " ";
-  }
-  return input;
-};
-
-const recursiveAddSpaces = (input: string, spacesToAdd: number): string => {
-  if (spacesToAdd === 0) {
-    return input;
-  }
-  return recursiveAddSpaces(input + " ", spacesToAdd - 1);
-};
-
-console.log(addSpaces("Hello", 2));
-console.log(recursiveAddSpaces("Hello", 2));

src/main.ts

@@ -3,7 +3,7 @@ module.exports = {
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx,xml}"],
   theme: {
     extend: {
-      backgroundImage: (theme) => ({
+      backgroundImage: () => ({
         "storefront-colour": "url('/storefront-colour.svg')",
       }),
       colors: {