ci: Setup basic CI

.github/workflows/ci.yaml

@@ -0,0 +1,34 @@
+name: CI
+run-name: ${{github.workflow}} (${{github.event_name}} on ${{ github.ref_name}})
+
+on: [push, pull_request]
+
+concurrency:
+  group: 'ci'
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: package.json
+
+      - name: Install dependencies
+        run: npm install
+
+      - name:
+          Verify the integrity of provenance attestations and registry signatures for installed
+          dependencies
+        run: npm audit signatures
+
+      - name: Build
+        run: npm run build --workspaces

.gitignore

@@ -1,3 +1,4 @@
 .idea
 .next
 node_modules
+build

examples/pixel/next.config.mjs

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+};
 
 export default nextConfig;

examples/pixel/src/components/SearchBar.jsx

@@ -1,15 +1,15 @@
 import _ from 'lodash';
+import { Suspense, useEffect, useState } from 'react';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { InputField, LoaderIcon, SearchIcon } from '@bloomreach/react-banana-ui';
 import JsonView from '@uiw/react-json-view';
 import Highlighter from 'react-highlight-words';
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
 import useAnalytics from '../hooks/useAnalytics';
 import useAutosuggestApi from '../hooks/useAutosuggestApi';
 import { CONFIG } from '../constants';
 
-export function SearchBar() {
+function SearchBarInner() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { trackEvent } = useAnalytics();
@@ -154,3 +154,11 @@ export function SearchBar() {
     </div>
   );
 }
+
+export function SearchBar() {
+  return (
+    <Suspense>
+      <SearchBarInner />
+    </Suspense>
+  );
+}

examples/visual-search/README.md

@@ -16,3 +16,15 @@ npm run dev
 or:
 
 [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/github/bloomreach/web-code-samples/tree/main/examples/visual-search)
+
+## Troubleshooting
+
+### Command does not support workspaces.
+
+If you see this error when you run `npm run dev`
+```
+npm error code ENOWORKSPACES
+npm error This command does not support workspaces.
+```
+
+run `npx next telemetry disable` to fix it

examples/visual-search/app/fetch-image-url/route.ts

@@ -3,10 +3,13 @@ import {NextRequest, NextResponse} from "next/server";
 export async function GET(req: NextRequest, res: NextResponse) {
   try {
     const {searchParams} = new URL(req.url);
-    const url = searchParams.get('url')
+    const url = searchParams.get('url');
 
     if (!url) {
-      return res.status(400).json({message: 'url query parameter is required'});
+      return new NextResponse(JSON.stringify({message: 'url query parameter is required'}), {
+        status: 400,
+        headers: { 'Content-Type': 'application/json' }
+      });
     }
 
     const response = await fetch(url);
@@ -22,11 +25,14 @@ export async function GET(req: NextRequest, res: NextResponse) {
       status: 200,
       headers: {
         'Content-Type': response.headers.get('content-type') || 'image/*',
-        'Content-Length': response.headers.get('content-length') || arr.length,
+        'Content-Length': response.headers.get('content-length') || String(arr.length),
       },
     })
-  } catch (e) {
+  } catch (e: any) {
     console.error(e);
-    return new NextResponse.error(e);
+    return new NextResponse(JSON.stringify({ message: e.message || 'An error occurred' }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    })
   }
 }

examples/visual-search/app/page.tsx

@@ -41,11 +41,13 @@ export default function Home() {
   }
 
   const handleImageFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
-    const file = event.currentTarget.files[0];
+    const file = event.currentTarget.files && event.currentTarget.files[0];
     if (file) {
       const reader = new FileReader();
       reader.onload = function (e) {
-        setImageSrc(e.target.result);
+        if (e?.target?.result) {
+          setImageSrc(e.target.result.toString());
+        }
       };
       reader.readAsDataURL(file);
       await uploadImage(file);

package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@bloomreach/web-code-samples",
+  "private": true,
+  "workspaces": [
+    "examples/*"
+  ],
+  "engines": {
+    "node": ">=20"
+  }
+}