Add prod example to sandbox

examples/sandbox/.codesandbox/tasks.json

@@ -7,27 +7,19 @@
     },
     {
       "name": "Build App",
-      "command": "yarn build"
+      "command": "VITE_IS_SANDBOX=true yarn build"
     }
   ],
 
   // These tasks can be run from CodeSandbox. Running one will open a log in the app.
   "tasks": {
     "start": {
       "name": "start",
-      "command": "yarn start",
+      "command": "VITE_IS_SANDBOX=true yarn start & node src/pages/elasticsearch-production-ready/server/index.js",
       "runAtStart": true,
       "preview": {
         "port": 4173
       }
-    },
-    "start-api-server": {
-      "name": "Start API Server",
-      "command": "node src/pages/elasticsearch-production-ready/server/index.js",
-      "runAtStart": true,
-      "preview": {
-        "port": 3001
-      }
     }
   }
 }

examples/sandbox/package.json

@@ -52,6 +52,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.13.0",
+    "sass-embedded": "^1.86.2",
     "typescript": "^5.8.2",
     "vite": "^6.0.3"
   }

examples/sandbox/src/Router.tsx

@@ -19,7 +19,7 @@ export default function Router() {
   const isHomePage = location.pathname === "/";
 
   return (
-    <div className={`${isHomePage ? "App" : "text-black bg-white"}`}>
+    <div className={`${isHomePage ? "App" : "ExampleApp mx-auto"}`}>
       <Switch>
         <Route exact path="/" component={Root} />
 
@@ -29,12 +29,11 @@ export default function Router() {
           path="/elasticsearch-basic"
           component={ElasticsearchBasic}
         />
-        {/* TODO: Add back in when we have a production-ready connector */}
-        {/* <Route
+        <Route
           exact
           path="/elasticsearch-production-ready"
           component={ElasticsearchProductionReady}
-        /> */}
+        />
         <Route exact path="/site-search" component={SiteSearch} />
         <Route exact path="/engines" component={Engines} />
 

examples/sandbox/src/pages/ecommerce/Category.jsx

@@ -59,7 +59,7 @@ const BrowseHeader = ({ category }) => {
 export default function CategoryPage(props) {
   const category = props?.match?.params.category;
   return (
-    <>
+    <div className="ecommerce-container">
       <Navigation />
       <BrowseHeader category={category} />
       <SearchProvider config={categoryPageconfig(category)}>
@@ -114,6 +114,6 @@ export default function CategoryPage(props) {
           </ErrorBoundary>
         </div>
       </SearchProvider>
-    </>
+    </div>
   );
 }

examples/sandbox/src/pages/ecommerce/ListingPage.jsx

@@ -65,7 +65,7 @@ const categoryItems = {
 
 export default () => {
   return (
-    <>
+    <div className="ecommerce-container">
       <Navigation />
       <div className="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:px-8 grid md:grid-cols-4 gap-4 grid-cols-2">
         {Object.keys(categoryItems).map((category) => (
@@ -86,6 +86,6 @@ export default () => {
           </div>
         ))}
       </div>
-    </>
+    </div>
   );
 };

examples/sandbox/src/pages/ecommerce/Search.jsx

@@ -68,11 +68,11 @@ const Search = () => {
 };
 export default function App() {
   return (
-    <>
+    <div className="ecommerce-container">
       <Navigation />
       <SearchProvider config={config}>
         <Search />
       </SearchProvider>
-    </>
+    </div>
   );
 }

examples/sandbox/src/pages/ecommerce/index.jsx

@@ -3,11 +3,11 @@
 import * as React from "react";
 import Navigation from "./components/Navigation";
 import ProductCarousel from "./components/ProductCarousel";
-import "./styles.css";
+import "./styles.scss";
 
 export default function Ecommerce() {
   return (
-    <>
+    <div className="ecommerce-container">
       <Navigation />
       <div className="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
         <ProductCarousel
@@ -19,6 +19,6 @@ export default function Ecommerce() {
           filters={[{ field: "parent_category", values: ["Monitors"] }]}
         />
       </div>
-    </>
+    </div>
   );
 }

examples/sandbox/src/pages/ecommerce/styles.scss

@@ -0,0 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.ecommerce-container {
+  .sui-layout-header.sui-layout-header {
+    padding: 0;
+  }
+
+  .sui-layout-main-header {
+    margin-bottom: 1rem;
+  }
+
+  .sui-layout-header {
+    border: none;
+  }
+
+  .navigation {
+    position: sticky;
+    top: 0;
+    z-index: 40;
+    background-color: #000;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 0.15s;
+  }
+
+  .sui-search-box__suggestion-list {
+    width: 200px;
+  }
+}

examples/sandbox/src/pages/elasticsearch-production-ready/index.jsx

@@ -1,15 +1,19 @@
-import React from "react";
 import "@elastic/eui/dist/eui_theme_light.css";
 
 import { ApiProxyConnector } from "@elastic/search-ui-elasticsearch-connector";
 import moment from "moment";
 
 import { SearchProvider } from "@elastic/react-search-ui";
 import "@elastic/react-search-ui-views/lib/styles/styles.css";
-import { ElasticsearchProdReady } from "./elasticsearchProdReady";
+import { ElasticsearchProdReady } from "./ElasticsearchProdReady";
+
+const isSandbox = import.meta.env.VITE_IS_SANDBOX === "true";
+const apiHost = isSandbox
+  ? window.location.origin.replace("4173", "3001")
+  : "http://localhost:3001";
 
 const connector = new ApiProxyConnector({
-  basePath: "http://localhost:3001/api"
+  basePath: `${apiHost}/api`
 });
 
 const config = {

examples/sandbox/src/pages/home.tsx

@@ -16,13 +16,12 @@ import { useMemo } from "react";
 export default function SearchUISandbox() {
   const apiCards = useMemo(
     () => [
-      // TODO: Add back in when we have a production-ready connector
-      // {
-      //   title: "Elasticsearch Connector",
-      //   description: "Production-ready, Proxy connector",
-      //   href: "/elasticsearch-production-ready",
-      //   recommended: true
-      // },
+      {
+        title: "Elasticsearch Connector",
+        description: "Production-ready, Proxy connector",
+        href: "/elasticsearch-production-ready",
+        recommended: true
+      },
       {
         title: "Elasticsearch Connector (Basic)",
         description: "Browser-only implementation",

examples/sandbox/src/pages/search-bar-in-header/Header.jsx

@@ -20,7 +20,7 @@ export default function Header() {
             fontSize: "40px"
           }}
         >
-          🚀 Acme Inc.
+          🌲 National Parks
         </div>
         <SearchProvider
           config={{

examples/sandbox/src/styles.css

@@ -9,19 +9,35 @@
   /* Light theme variables */
   --background: #ffffff;
   --foreground: #213547;
+  --scroll-bar-color: #000;
+  --scroll-bar-background: #fff;
 }
 
 /* Dark theme variables */
 @media (prefers-color-scheme: dark) {
   :root {
+    color-scheme: dark;
     --background: #242424;
-    --foreground: rgba(255, 255, 255, 0.87);
+    --foreground: #ffffffde;
+    --scroll-bar-color: #ffffff40;
+    --scroll-bar-background: #0000;
+    --text-secondary: #ffffff40;
   }
 }
 
 body {
-  place-items: center;
   font-family: var(--font-family);
   background-color: var(--background);
   color: var(--foreground);
+  scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-background);
+}
+
+.ExampleApp {
+  background-color: #ffffff;
+  color: #213547;
+  color-scheme: auto;
+}
+
+.sui-layout-main-header {
+  margin-bottom: 1rem;
 }

packages/react-search-ui-views/src/types/index.ts

@@ -1,8 +1,4 @@
-import type {
-  FacetValue,
-  FieldValue,
-  FilterType,
-} from "@elastic/search-ui";
+import type { FacetValue, FieldValue, FilterType } from "@elastic/search-ui";
 
 export interface BaseContainerProps {
   children?: React.ReactNode;

packages/react-search-ui/src/hooks/index.ts

@@ -1 +1 @@
-export { useSearch } from "./use_search";
+export { useSearch } from "./useSearch";