feat(AP-1778): add demo sites for nextjs and react

evolv-ai · Sep 12, 2022 · 196cfb0 · 196cfb0
1 parent 1e83c22
commit 196cfb0
Show file tree

Hide file tree

Showing 32 changed files with 3,589 additions and 8,592 deletions.
diff --git a/example/pages/button.js b/example/pages/button.js
diff --git a/example/pages/heading.js b/example/pages/heading.js
diff --git a/example/pages/index.js b/example/pages/index.js
diff --git a/example/public/favicon.ico b/example/public/favicon.ico
diff --git a/example/public/vercel.svg b/example/public/vercel.svg
diff --git a/example/.gitignore → examples/nextjs/.gitignore b/example/.gitignore → examples/nextjs/.gitignore
diff --git a/example/README.md → examples/nextjs/README.md b/example/README.md → examples/nextjs/README.md
diff --git a/examples/nextjs/next-env.d.ts b/examples/nextjs/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/example/package-lock.json → examples/nextjs/package-lock.json b/example/package-lock.json → examples/nextjs/package-lock.json
diff --git a/example/package.json → examples/nextjs/package.json b/example/package.json → examples/nextjs/package.json
@@ -3,6 +3,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev --port 4000",
+    "clean": "del dist **/*.tsbuildinfo .next",
     "build": "next build",
     "start": "next start"
   },

diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx
@@ -0,0 +1,113 @@
+import { AppProps } from 'next/app';
+import Head from 'next/head';
+import Script from 'next/script';
+import React, { FC } from 'react';
+
+
+export const App: FC<AppProps> =
+	({ Component, pageProps }) => {
+		return <>
+			<Head>
+				<title>Evolv &raquo; NextJS SDK Demo</title>
+				<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+				<meta name="theme-color" content="#000000"/>
+				<link rel="shortcut icon" href="/favicon.png"/>
+				<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
+				      rel="stylesheet"
+				      integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
+				      crossOrigin="anonymous"
+				/>
+				<style>{`
+					.bd-placeholder-img {
+						font-size: 1.125rem;
+						text-anchor: middle;
+						-webkit-user-select: none;
+						-moz-user-select: none;
+						user-select: none;
+					}
+
+					@media (min-width: 768px) {
+						.bd-placeholder-img-lg {
+							font-size: 3.5rem;
+						}
+					}
+
+					.b-example-divider {
+						height: 3rem;
+						background-color: rgba(0, 0, 0, .1);
+						border: solid rgba(0, 0, 0, .15);
+						border-width: 1px 0;
+						box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+					}
+
+					.b-example-vr {
+						flex-shrink: 0;
+						width: 1.5rem;
+						height: 100vh;
+					}
+
+					.bi {
+						vertical-align: -.125em;
+						fill: currentColor;
+					}
+
+					.nav-scroller {
+						position: relative;
+						z-index: 2;
+						height: 2.75rem;
+						overflow-y: hidden;
+					}
+
+					.nav-scroller .nav {
+						display: flex;
+						flex-wrap: nowrap;
+						padding-bottom: 1rem;
+						margin-top: -1px;
+						overflow-x: auto;
+						text-align: center;
+						white-space: nowrap;
+						-webkit-overflow-scrolling: touch;
+					}
+
+					header.text-bg-dark {
+						background-color: #313638 !important;
+					}
+				`}
+				</style>
+			</Head>
+			<Script
+				src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
+				integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
+				crossOrigin="anonymous"
+			/>
+			<header className="p-3 text-bg-dark">
+				<div className="container">
+					<div
+						className="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+						<a href="https://evolv.ai"
+						   className="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
+							<img className="bi me-2" src="/evolv-logo-lockup-red-white.svg" alt="Evolv"
+							     style={{ height: '40px' }} />
+						</a>
+
+						<ul className="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
+							<li><a href="#" className="nav-link px-2 text-secondary">Home</a></li>
+							<li><a href="#" className="nav-link px-2 text-white">Page 1</a></li>
+							<li><a href="#" className="nav-link px-2 text-white">Page 2</a></li>
+							<li><a href="#" className="nav-link px-2 text-white">Page 3</a></li>
+						</ul>
+					</div>
+				</div>
+			</header>
+			<div className="col-lg-8 mx-auto p-3 py-md-5">
+				<header className="d-flex align-items-center pb-3 mb-5 border-bottom">
+					<span className="fs-4">NextJS SDK Demo</span>
+				</header>
+				<main>
+					<Component {...pageProps} />
+				</main>
+			</div>
+		</>;
+	};
+
+export default App;
diff --git a/examples/nextjs/pages/button.tsx b/examples/nextjs/pages/button.tsx
@@ -0,0 +1,18 @@
+import { useContextState, useVariable } from '@evolv/nextjs';
+
+export default function Button() {
+	const buttonText = useVariable('movies.vp2xajnk0', 'control');
+	const buttonColor = useVariable('movies.c1zj181kr', 'unset');
+	const [, setCustomizeButton] = useContextState('customizeButton');
+
+	return (
+		<div>
+			<button
+				onClick={() => setCustomizeButton(true)}
+				style={{ backgroundColor: buttonColor }}
+			>
+				{buttonText}
+			</button>
+		</div>
+	);
+}
diff --git a/examples/nextjs/pages/heading.tsx b/examples/nextjs/pages/heading.tsx
@@ -0,0 +1,13 @@
+import { useVariable } from '@evolv/nextjs';
+
+export default function Heading() {
+	//const headingText = useVariable('movies.cta-text', 'control');
+
+	const headingText = useVariable('shop.checkout-steps', 'control');
+
+	return (
+		<div>
+			<h1 className="title">{headingText}</h1>
+		</div>
+	);
+}
diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
@@ -0,0 +1,43 @@
+import { EvolvClientOptions, EvolvProvider, EvolvServerSideProps, getEvolvServerSideProps } from '@evolv/nextjs';
+import { GetServerSidePropsContext } from 'next';
+import { FC } from 'react';
+
+import { StoreCidCookie, getUserIdProps, UserIdProps } from '../utils';
+import Button from './button';
+import Heading from './heading';
+
+
+const options: EvolvClientOptions = {
+	environment: 'df7109b048',
+	endpoint: 'https://participants-newdev.evolvdev.com/'
+};
+
+const Home: FC<EvolvServerSideProps & UserIdProps> = (props) => {
+	return (
+		<EvolvProvider
+			options={options}
+			uid={props.uid}
+			hydratedState={props.hydratedState}
+		>
+			{/* Use a component such as this to save the CID in a cookie */}
+			<StoreCidCookie />
+
+			<Heading/>
+			<Button/>
+		</EvolvProvider>
+	);
+};
+
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+	const { props: { uid } } = await getUserIdProps(ctx);
+	const { props: evolvProps } = await getEvolvServerSideProps({ client: options, uid }, ctx);
+
+	return {
+		props: {
+			...evolvProps,
+			uid
+		}
+	};
+}
+
+export default Home;
diff --git a/examples/nextjs/public/evolv-logo-lockup-red-white.svg b/examples/nextjs/public/evolv-logo-lockup-red-white.svg
diff --git a/examples/nextjs/public/favicon.png b/examples/nextjs/public/favicon.png