organize repository for easier code reuse

.editorconfig

@@ -0,0 +1,17 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+
+[*.{yml,yaml}]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2

.eslintrc.cjs

@@ -0,0 +1,92 @@
+module.exports = {
+    root: true,
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: "module",
+        ecmaFeatures: {
+            jsx: true,
+        },
+    },
+    settings: {
+        react: {
+            pragma: "h",
+            version: "detect",
+        },
+    },
+    env: {
+        node: true,
+        browser: true,
+        es6: true,
+    },
+    globals: {
+        document: true,
+        window: true,
+        API_URL: true,
+        WIDGET_CONFIG_URL: true,
+        API_KEY: true,
+        SANDBOX_KEY: true,
+        TEST_URL: true,
+    },
+    extends: [
+        "preact",
+        // "eslint:recommended",
+        // "plugin:preact/recommended",
+        "plugin:@typescript-eslint/recommended",
+        // "plugin:@typescript-eslint/eslint-recommended",
+        // "plugin:storybook/recommended",
+        "plugin:prettier/recommended", // should always be last
+    ],
+    plugins: ["simple-import-sort"],
+    rules: {
+        "no-console": ["error"],
+        "react/prop-types": 0,
+        "@typescript-eslint/default-param-last": ["error"],
+        "@typescript-eslint/no-explicit-any": ["off"],
+        "simple-import-sort/imports": [
+            "error",
+            {
+                groups: [
+                    // Packages.
+                    // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
+                    ["^@?\\w"],
+                    // Absolute imports and other imports such as Vue-style `@/foo`.
+                    // Anything that does not start with a dot.
+                    ["^[^.]"],
+                    // Side effect imports.
+                    ["^\\u0000"],
+                    // Relative imports.
+                    // Anything that starts with a dot.
+                    ["^\\."],
+                    [".css$"], // css last
+                ],
+            },
+        ],
+        "@typescript-eslint/no-unused-vars": [
+            "error",
+            {
+                vars: "local",
+                varsIgnorePattern: "",
+            },
+        ],
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/ban-ts-comment": ["error", { "ts-ignore": "allow-with-description" }],
+        // introduced with eslint-config-preact
+        radix: "off",
+    },
+    overrides: [
+        {
+            files: ["*.js"],
+            rules: {
+                "@typescript-eslint/no-var-requires": "off",
+            },
+        },
+    ],
+    ignorePatterns: [
+        "node_modules",
+        "dist",
+        "config",
+        // "**/*.test.ts",
+        // "**/*.test.tsx"
+    ],
+};

.github/workflows/devlop.yml

@@ -0,0 +1,26 @@
+name: build-deploy-qa
+
+on:
+  push:
+    branches: 
+      - develop
+
+jobs:
+  build:
+    name: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+      - name: use node.js 18
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'yarn'
+      - run: yarn install --frozen-lockfile
+      - run: yarn lint
+      - run: |
+          ls -al src/icons
+      - run: yarn test
+      - run: yarn build
+

README.md

@@ -312,9 +312,9 @@ Follow the below instructions on how to host with CDN and update your Commerce s
 1. Now the Live Search extension needs to be updated to include your new url. Find the `magento-live-search` extension code in your adobe commerce code base. Locate the directory `LiveSearchProductListing`.
 1. We will be updating two files under `magento-live-search > LiveSearchProductListing`: `etc/config.xml` & `etc/csp_whitelist.xml`
 1. Changes for `etc/config.xml`: change the live search url in `<frontend_url>`to match the one you created with your hosting/CDN solution url above. See below.
-1. ![image](./config_xml.png)
+1. ![image](./docs/config_xml.png)
 1. Changes for `etc/csp_whitelist.xml`: find all references to the live search SaaS product list page (`plp-widgets-ui.magento.ds.com`) and replace with your hosting/CDN solution url. See below.
-1. ![image](./csp_whitelist_xml.png)
+1. ![image](./docs/csp_whitelist_xml.png)
 1. Those are all the required changes. Now redeploy your adobe commerce store code and see your new custom product listing page in your storefront.
 
 _The purpose of this project is to provide a dev-ready starting point for developers to implement the product listing page. The project, repo, and any accompanying assets included herein (“Assets”) are provided “as-is” for your use solely at your sole discretion, risk, and responsibility. By using these Assets, you agree Adobe will in no event be responsible for any use of the Assets, including but not limited to any customizations made thereto, by you or any third party. Adobe will not provide any support of any kind for any customizations made to the Assets by anyone._

babel.config.js

@@ -1,29 +1,29 @@
 module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        modules: false,
-        targets: {
-          browsers: ['last 2 versions'],
-        },
-      },
+    presets: [
+        [
+            "@babel/preset-env",
+            {
+                modules: false,
+                targets: {
+                    browsers: ["last 2 versions"],
+                },
+            },
+        ],
+        ["@babel/preset-typescript", { jsxPragma: "h" }],
     ],
-    ['@babel/preset-typescript', { jsxPragma: 'h' }],
-  ],
-  plugins: [
-    ['babel-plugin-tsconfig-paths'],
-    [
-      '@babel/plugin-transform-react-jsx',
-      {
-        runtime: 'automatic',
-        importSource: 'preact',
-      },
+    plugins: [
+        ["babel-plugin-tsconfig-paths"],
+        [
+            "@babel/plugin-transform-react-jsx",
+            {
+                runtime: "automatic",
+                importSource: "preact",
+            },
+        ],
     ],
-  ],
-  env: {
-    test: {
-      plugins: ['dynamic-import-node', 'istanbul'],
+    env: {
+        test: {
+            plugins: ["dynamic-import-node", "istanbul"],
+        },
     },
-  },
 };

babelrc.js

@@ -1,24 +1,24 @@
-const plugins = ['babel-plugin-istanbul'];
+const plugins = ["babel-plugin-istanbul"];
 
 module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        useBuiltIns: 'usage', // alternative mode: "entry"
-        corejs: 3, // default would be 2
-        targets: '> 0.25%, not dead',
-        // set your own target environment here (see Browserslist)
-      },
+    presets: [
+        [
+            "@babel/preset-env",
+            {
+                useBuiltIns: "usage", // alternative mode: "entry"
+                corejs: 3, // default would be 2
+                targets: "> 0.25%, not dead",
+                // set your own target environment here (see Browserslist)
+            },
+        ],
+        "@babel/typescript",
+        [
+            "@babel/preset-react",
+            {
+                development: true,
+            },
+        ],
     ],
-    '@babel/typescript',
-    [
-      '@babel/preset-react',
-      {
-        development: true,
-      },
-    ],
-  ],
-  plugins,
-  babelrc: false,
+    plugins,
+    babelrc: false,
 };

config/.env

@@ -0,0 +1,25 @@
+# see documentation to better understand .env files work in vite
+# https://vitejs.dev/guide/env-and-mode.html#env-variables-and-modes
+
+LUMA_PORT=8081
+
+VITE_API_URL=""
+VITE_TEST_URL=""
+VITE_SANDBOX_KEY=""
+
+CONFIG_ENVIRONMENT_TYPE=""
+CONFIG_ENVIRONMENT_ID=""
+CONFIG_WEBSITE_CODE=""
+CONFIG_WEBSITE_NAME=""
+CONFIG_STORE_CODE=""
+CONFIG_STORE_NAME=""
+CONFIG_STORE_VIEW_CODE=""
+CONFIG_STORE_VIEW_NAME="" 
+CONFIG_BASE_CURRENCY_CODE=""
+CONFIG_STORE_VIEW_CURRENCY_CODE=""
+
+CONFIG_CUSTOMER_GROUP=""
+CONFIG_API_KEY=""
+
+CONFIG_SDK_ENVIRONMENT_ID=""
+CONFIG_SDK_STORE_URL=""

docs/MSRCH-4696.md

@@ -0,0 +1,5 @@
+# Highlights
+
+-   Using vite instead of webpack for better DX
+-   Vite builds LiveSearchPLP widget in library mode for easier reusabliity
+-   Consistant organization of types

index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite + Preact + TS</title>
+    </head>
+    <body>
+        <script>
+            console.warn("development on index.html is for convenience purposes only.");
+        </script>
+        <div id="search-plp-root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>