Sandbox update without custom build files.

adobe · Jan 17, 2024 · 5d9a91c · 5d9a91c
1 parent f8eb318
commit 5d9a91c
Show file tree

Hide file tree

Showing 25 changed files with 16,660 additions and 11,225 deletions.
diff --git a/sandbox/package-lock.json b/sandbox/package-lock.json
diff --git a/sandbox/package.json b/sandbox/package.json
@@ -3,12 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@babel/polyfill": "^7.4.3",
+    "@adobe/react-spectrum": "^3.33.1",
+    "@adobe/spectrum-css": "^3.0.0",
+    "core-js": "^3.35.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^5.0.1",
+    "regenerator-runtime": "^0.14.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/sandbox/public/index.css b/sandbox/public/index.css
@@ -2,24 +2,54 @@ body {
   margin: 0;
   padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  sans-serif;
   font-size: 1em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #333;
+  background-color: #ffffff; /* Changed from #333 to #ffffff */
   color: #eaeaea;
 }
 
-a {
-  color: #e7ca8d;
+nav {
+  flex: 0 0 200px; /* Adjust this value to change the width of the navigation */
+  height: 100vh;
+  padding: 1em;
+  background-color: #f5f5f5; /* Adjust this value to change the background color of the navigation */
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow to the navigation */
+}
+
+nav ul {
+  display: flex;
+  flex-direction: column;
+  width: 200px; /* adjust this value as needed */
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  padding: 0;
+  margin: 0;
+}
+
+nav li {
+  list-style: none;
+  padding: 10px;
+}
+
+.content {
+  margin-left: 210px; /* adjust this value as needed */
+}
+
+nav a {
+  color: #333; /* Adjust this value to change the color of the links */
+  text-decoration: none;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-    color: #acecfe;
-  }
+  monospace;
+  color: #acecfe;
+}
 
 section {
   padding: 15px;
@@ -34,12 +64,13 @@ ul {
   padding: 0;
 }
 
-li, button {
+li,
+button {
   display: inline-block;
   margin-right: 20px;
   font-size: 120%;
 }
 
 #root {
   padding: 10px;
-}
+}
diff --git a/sandbox/public/index.html b/sandbox/public/index.html
@@ -4,6 +4,10 @@
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <link rel="stylesheet" href="/index.css" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@spectrum-css/[email protected]/dist/index-vars.css"
+    />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"

diff --git a/sandbox/public/logo.png b/sandbox/public/logo.png
diff --git a/sandbox/src/App.css b/sandbox/src/App.css
@@ -7,15 +7,18 @@
   height: 40vmin;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
+.App-header ul {
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  align-items: flex-start;
+  overflow-y: auto;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 200px;
+  padding: 1em;
+  margin: 0;
+  background-color: #f8f9fa;
 }
 
 .App-link {

diff --git a/sandbox/src/App.js b/sandbox/src/App.js
@@ -1,15 +1,3 @@
-/*
-Copyright 2019 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
 import React from "react";
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 
@@ -37,99 +25,114 @@ const BasicExample = () => {
   return (
     <>
       <Router>
-        <div>
-          <ul>
-            <li>
+        <div style={{ display: "flex" }}>
+          <nav style={{ listStyleType: "none", padding: 0 }}>
+            <li style={{ display: "block" }}>
+              <img
+                src="logo.png"
+                alt="Adobe AEP Web SDK"
+                style={{ width: "150px" }}
+              />
+            </li>
+            <li style={{ display: "block" }}>
               <Link to="/">Home</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/consent">Consent</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/personalization">Personalization</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/personalizationSpa">Personalization - SPA</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/personalizationAjo">Personalization - AJO</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/personalizationA4TClientSide">
                 Personalization - A4T Client Side
               </Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/personalizationProfile">
                 Personalization - Profile
               </Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/personalizationFormBased">
                 Personalization - Form Based
               </Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/links">Links</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/eventMerge">Event-Merge</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/largePayload">Large Payload</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/orgTwo">Multiple Orgs</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               {/* Anchor tag to ensure app is reloaded with unsafe CSP */}
               <a href="/dualTag">Dual Tag</a>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <a href="/legacy.html">Legacy Visitor ID</a>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <a href="/redirectOffers">Redirect Offers</a>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <a href="/identity">Identity</a>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <a href="/configOverrides">Config Overrides</a>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/inAppMessages">In-app Messages</Link>
             </li>
-          </ul>
+          </nav>
+          <main
+            style={{
+              float: "right",
+              marginLeft: "50px",
+              padding: "1em",
+              width: "calc(100% - 200px)"
+            }}
+          >
+            <Route exact path="/" component={Home} />
+            <Route path="/consent" component={Consent} />
+            <Route path="/personalization" component={Personalization} />
+            <Route path="/personalizationSpa" component={PersonalizationSpa} />
+            <Route path="/personalizationAjo" component={PersonalizationAjo} />
+            <Route
+              path="/personalizationA4TClientSide"
+              component={PersonalizationAnalyticsClientSide}
+            />
+            <Route
+              path="/personalizationProfile"
+              component={PersonalizationProfile}
+            />
+            <Route
+              path="/personalizationFormBased"
+              component={PersonalizationFormBased}
+            />
+            <Route path="/links" component={Links} />
+            <Route path="/eventMerge" component={EventMerge} />
+            <Route path="/largePayload" component={LargePayload} />
+            <Route path="/orgTwo" component={OrgTwo} />
+            <Route path="/dualTag" component={DualTag} />
+            <Route path="/redirectOffers" component={RedirectOffers} />
+            <Route path="/redirectedNewPage" component={RedirectedNewPage} />
+            <Route path="/identity" component={Identity} />
+            <Route path="/configOverrides" component={ConfigOverrides} />
+            <Route path="/inAppMessages" component={InAppMessages} />
+          </main>
           <hr />
-
-          <Route exact path="/" component={Home} />
-          <Route path="/consent" component={Consent} />
-          <Route path="/personalization" component={Personalization} />
-          <Route path="/personalizationSpa" component={PersonalizationSpa} />
-          <Route path="/personalizationAjo" component={PersonalizationAjo} />
-          <Route
-            path="/personalizationA4TClientSide"
-            component={PersonalizationAnalyticsClientSide}
-          />
-          <Route
-            path="/personalizationProfile"
-            component={PersonalizationProfile}
-          />
-          <Route
-            path="/personalizationFormBased"
-            component={PersonalizationFormBased}
-          />
-          <Route path="/links" component={Links} />
-          <Route path="/eventMerge" component={EventMerge} />
-          <Route path="/largePayload" component={LargePayload} />
-          <Route path="/orgTwo" component={OrgTwo} />
-          <Route path="/dualTag" component={DualTag} />
-          <Route path="/redirectOffers" component={RedirectOffers} />
-          <Route path="/redirectedNewPage" component={RedirectedNewPage} />
-          <Route path="/identity" component={Identity} />
-          <Route path="/configOverrides" component={ConfigOverrides} />
-          <Route path="/inAppMessages" component={InAppMessages} />
         </div>
       </Router>
       <AlloyVersion />

diff --git a/sandbox/src/Consent.js b/sandbox/src/Consent.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { Heading } from "@adobe/react-spectrum";
 import ContentSecurityPolicy from "./components/ContentSecurityPolicy";
 import useSendPageViewEvent from "./useSendPageViewEvent";
 import "./Consent.css";
@@ -84,7 +85,7 @@ export default function Consent() {
   return (
     <div>
       <ContentSecurityPolicy />
-      <h1>Consent</h1>
+      <Heading level={1}>Consent</Heading>
       <h2>Opt-In</h2>
       <p>This page tests user consent:</p>
 

diff --git a/sandbox/src/DualTag.js b/sandbox/src/DualTag.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { Heading } from "@adobe/react-spectrum";
 import UnsafeContentSecurityPolicy from "./components/UnsafeContentSecurityPolicy";
 import useSendPageViewEvent from "./useSendPageViewEvent";
 
@@ -17,7 +18,7 @@ export default () => {
       {/* Need less restrictive CSP for old libraries */}
       <UnsafeContentSecurityPolicy />
       {loadLaunch()}
-      <h1>Dual Tagging</h1>
+      <Heading level={1}>Dual Tagging</Heading>
       <p>
         This page loads a launch library containing Analytics, ECID, DIL, and
         Target.

diff --git a/sandbox/src/EventMerge.js b/sandbox/src/EventMerge.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 
 import React, { useRef, useEffect } from "react";
+import { Heading } from "@adobe/react-spectrum";
 import ContentSecurityPolicy from "./components/ContentSecurityPolicy";
 import useSendPageViewEvent from "./useSendPageViewEvent";
 
@@ -35,7 +36,7 @@ export default function EventMerge() {
   return (
     <div>
       <ContentSecurityPolicy />
-      <h1>Event Merge</h1>
+      <Heading level={1}>Event Merge</Heading>
       <p>This is the Event Merge view, part of the Single Page Application.</p>
       <p>
         On this view, we are sending two events at different times, merged

diff --git a/sandbox/src/Home.js b/sandbox/src/Home.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-console, func-names */
 
 import React from "react";
+import { Heading } from "@adobe/react-spectrum";
 import ContentSecurityPolicy from "./components/ContentSecurityPolicy";
 import useSendPageViewEvent from "./useSendPageViewEvent";
 
@@ -30,7 +31,7 @@ export default function Home() {
   return (
     <div>
       <ContentSecurityPolicy />
-      <h1>Home</h1>
+      <Heading level={1}>Home</Heading>
       <section>
         <h2>Get Identity</h2>
         <div>

diff --git a/sandbox/src/Identity.js b/sandbox/src/Identity.js
@@ -13,6 +13,7 @@
 /* eslint-disable no-console, func-names */
 
 import React, { useEffect, useState } from "react";
+import { Heading } from "@adobe/react-spectrum";
 
 const readCookies = () => {
   const cookies = {};
@@ -110,7 +111,7 @@ export default function Identity() {
 
   return (
     <div>
-      <h1>Identity</h1>
+      <Heading level={1}>Identity</Heading>
       <section>
         This page demonstrates recieving or sending identity within the URL. No
         calls to experience edge are made until you press one of the buttons