Skip to content

Commit c66ddf5

Browse files
amraniamrani
committed
simplify demo and use latest UI
1 parent 33c1d5c commit c66ddf5

32 files changed

+694
-570
lines changed

‎.env

+2-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
# Environment variables declared in this file are automatically made available to Prisma.
2-
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
3-
4-
# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
5-
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
6-
7-
DATABASE_URL="file:./dev.db"
81
EMBED_WORFKLOW_SK=sk_test_12345
9-
EMBED_WORFKLOW_PK=pk_test_12345
2+
EMBED_WORFKLOW_PK=pk_test_12345
3+
EMBED_WORKFLOW_UI_VERSION=1.5.0

‎.gitignore

+1-7
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,8 @@ yarn-error.log*
2626
.pnpm-debug.log*
2727

2828
# local env files
29+
.env
2930
.env*.local
3031

3132
# vercel
3233
.vercel
33-
34-
# typescript
35-
*.tsbuildinfo
36-
next-env.d.ts
37-
38-
# prisma
39-
dev.db

‎README.md

+7-22
Original file line numberDiff line numberDiff line change
@@ -9,42 +9,27 @@ Dependencies
99
- An Embed Workflow Account. [Sign up for a free account](https://embedworkflow.com/a/users/sign_up).
1010

1111
Resources
12-
- [Original Blog Post](https://embedworkflow.com/posts/node-js-demo/)
12+
- [Original Blog Post](https://blog.embedworkflow.com/posts/node-js-demo/)
1313
- [Embed Workflow API Documentation](https://api-docs.embedworkflow.com)
1414
- [Embed Workflow UI Component Documentation](https://ui-docs.embedworkflow.com)
1515
- [Next JS](https://nextjs.org/docs/)
16-
- [Prisma](https://www.prisma.io/docs)
1716

1817
Check out the original blog post for more details.
1918

2019
## Set Environment Variables
2120

22-
Navigate to your Embed Workflow account settings and copy your publishable and secret keys. I recommend using `pk_test` and `sk_test`.
21+
Navigate to your Embed Workflow account settings and copy your publishable and secret keys: https://embedworkflow.com/app/account/api_access
22+
23+
And use the latest UI version: https://embedworkflow.com/ui-version
2324

2425
```yml
25-
EMBED_WORFKLOW_SK=sk_test_12345
26-
EMBED_WORFKLOW_PK=pk_test_12345
26+
EMBED_WORKFLOW_SK=sk_live_12345
27+
EMBED_WORKFLOW_PK=pk_live_12345
28+
EMBED_WORKFLOW_UI_VERSION=1.5.0
2729
```
2830

29-
## Update Your Form ID
30-
31-
You will need a workflow already set up before we embed. Copy your `id` and update `REPLACE_ME_WITH_YOUR_FORM_ID`.
32-
33-
**Note: [Check the latest link and script URLs here](https://embedworkflow.com/ui-version).**
34-
35-
## Update Your Slack Webhook URL
36-
37-
Update `REPLACE_ME_WITH_YOUR_SLACK_WEBHOOK_URL` with your Slack webhook URL. [Read more on configuring Slack](https://blog.embedworkflow.com/posts/integrate-with-slack/).
38-
39-
4031
## How to use
4132

42-
### Migrate the database
43-
44-
```bash
45-
npx prisma migrate dev
46-
```
47-
4833
### Start the dev server
4934

5035
```bash

‎components/Layout.jsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Head from "next/head";
2+
import Nav from "./Nav";
3+
4+
const Layout = ({ children }) => (
5+
<div>
6+
<Head>
7+
<title>NextJS Embed Workflow Demo</title>
8+
<link rel="icon" href="/favicon.png" />
9+
</Head>
10+
11+
<div className="min-h-screen bg-gray-100">
12+
<Nav />
13+
14+
<main>
15+
<div className="w-full">{children}</div>
16+
</main>
17+
18+
<footer className="flex h-24 w-full items-center justify-center border-t"></footer>
19+
</div>
20+
</div>
21+
);
22+
23+
export default Layout;

‎components/Layout.tsx

-32
This file was deleted.

‎components/Nav.jsx

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import Head from "next/head";
2+
import Link from "next/link";
3+
import { useRouter } from "next/router";
4+
5+
const Nav = () => {
6+
const router = useRouter();
7+
8+
const navLinkClassNames = (active = false) => {
9+
const defaults =
10+
"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium";
11+
return active
12+
? `${defaults} border-gray-400 text-gray-900`
13+
: `${defaults} border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700`;
14+
};
15+
16+
return (
17+
<nav className="bg-white shadow">
18+
<div className="mx-auto max-w-full px-4 sm:px-6 lg:px-8">
19+
<div className="flex h-16 justify-between">
20+
<div className="flex">
21+
<div className="hidden sm:flex flex-shrink-0 items-center">
22+
<img
23+
className="h-8 w-auto"
24+
src="/sample_logo.png"
25+
alt="Your Company"
26+
/>
27+
</div>
28+
<div className="ml-6 flex space-x-8">
29+
<a href="/" className={navLinkClassNames(router.asPath == "/")}>
30+
Dashboard
31+
</a>
32+
33+
<a
34+
href="/workflows"
35+
className={navLinkClassNames(
36+
router.asPath.startsWith("/workflows")
37+
)}
38+
>
39+
Workflows
40+
</a>
41+
42+
<a
43+
target="_blank"
44+
href="https://calendly.com/embedworkflow/connect"
45+
className={navLinkClassNames()}
46+
>
47+
Get Demo
48+
</a>
49+
</div>
50+
</div>
51+
52+
<div className="hidden sm:ml-6 sm:flex sm:items-center">
53+
<button
54+
type="button"
55+
className="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
56+
>
57+
<span className="absolute -inset-1.5"></span>
58+
<span className="sr-only">View notifications</span>
59+
<svg
60+
className="h-6 w-6"
61+
fill="none"
62+
viewBox="0 0 24 24"
63+
strokeWidth="1.5"
64+
stroke="currentColor"
65+
aria-hidden="true"
66+
>
67+
<path
68+
strokeLinecap="round"
69+
strokeLinejoin="round"
70+
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"
71+
/>
72+
</svg>
73+
</button>
74+
75+
<div className="relative ml-3">
76+
<div>
77+
<button
78+
type="button"
79+
className="relative flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
80+
id="user-menu-button"
81+
aria-expanded="false"
82+
aria-haspopup="true"
83+
>
84+
<span className="absolute -inset-1.5"></span>
85+
<span className="sr-only">Display for fake user menu</span>
86+
<img
87+
className="h-8 w-8 rounded-full"
88+
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
89+
alt=""
90+
/>
91+
</button>
92+
</div>
93+
94+
<div
95+
className="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
96+
role="menu"
97+
aria-orientation="vertical"
98+
aria-labelledby="user-menu-button"
99+
tabIndex="-1"
100+
>
101+
<a
102+
href="#"
103+
className="block px-4 py-2 text-sm text-gray-700"
104+
role="menuitem"
105+
tabIndex="-1"
106+
id="user-menu-item-0"
107+
>
108+
Your Profile
109+
</a>
110+
<a
111+
href="#"
112+
className="block px-4 py-2 text-sm text-gray-700"
113+
role="menuitem"
114+
tabIndex="-1"
115+
id="user-menu-item-1"
116+
>
117+
Settings
118+
</a>
119+
<a
120+
href="#"
121+
className="block px-4 py-2 text-sm text-gray-700"
122+
role="menuitem"
123+
tabIndex="-1"
124+
id="user-menu-item-2"
125+
>
126+
Sign out
127+
</a>
128+
</div>
129+
</div>
130+
</div>
131+
</div>
132+
</div>
133+
</nav>
134+
);
135+
};
136+
137+
export default Nav;

‎components/UserNavigator.jsx

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { useState, useEffect } from "react";
2+
import { useRouter } from 'next/navigation';
3+
4+
const UserNavigator = ({userId, children}) => {
5+
const [inputValue, setInputValue] = useState(userId || '');
6+
const router = useRouter()
7+
8+
const handleNavigation = () => {
9+
const trimmedValue = inputValue.trim();
10+
if (trimmedValue.length > 0) {
11+
router.push(`/users/${trimmedValue}/workflows/`);
12+
}
13+
};
14+
15+
const handleKeyDown = (e) => {
16+
if (e.key === 'Enter') {
17+
handleNavigation(e);
18+
}
19+
};
20+
21+
return (
22+
<div className="flex items-center justify-between gap-x-6 bg-gray-900 px-6 py-2.5 sm:pr-3.5 lg:pl-8">
23+
<div className="flex flex-col justify-center items-start space-y-4 py-3">
24+
<div className="text-lg leading-6 text-white flex-1 font-semibold">Load demo for a user</div>
25+
26+
<div className="flex gap-2">
27+
<input
28+
type="text"
29+
value={inputValue}
30+
onChange={(e) => setInputValue(e.target.value)}
31+
onKeyDown={handleKeyDown}
32+
placeholder="Enter a User ID..."
33+
className="px-3 py-2 border rounded"
34+
/>
35+
<button
36+
onClick={handleNavigation}
37+
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
38+
>
39+
Go
40+
</button>
41+
</div>
42+
</div>
43+
</div>
44+
)
45+
};
46+
47+
export default UserNavigator;

‎lib/prisma.ts

-13
This file was deleted.

‎lib/util.ts

-3
This file was deleted.

‎next.config.js

-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +0,0 @@
1-
/** @type {import('next').NextConfig} */
2-
module.exports = {
3-
reactStrictMode: true,
4-
}

‎package.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
"start": "next start"
77
},
88
"dependencies": {
9-
"@prisma/client": "4.9.0",
109
"jsonwebtoken": "^9.0.0",
1110
"next": "latest",
1211
"react": "18.2.0",
@@ -18,8 +17,7 @@
1817
"@types/react-dom": "18.0.6",
1918
"autoprefixer": "^10.4.12",
2019
"postcss": "^8.4.18",
21-
"prisma": "^4.9.0",
2220
"tailwindcss": "^3.2.4",
2321
"typescript": "4.9.4"
2422
}
25-
}
23+
}

‎pages/_app.jsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import "../styles/globals.css";
2+
3+
function MyApp({ Component, pageProps }) {
4+
return <Component {...pageProps} />;
5+
}
6+
7+
export default MyApp;

‎pages/_app.tsx

-8
This file was deleted.

0 commit comments

Comments
 (0)