Improve Dev-Experience with a new Demo-App to test the SDK (#372)

* update demo app with new UI

---------

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
This commit is contained in:
Johannes
2023-06-15 02:53:56 -05:00
committed by GitHub
parent f713591083
commit 478a981996
7 changed files with 435 additions and 384 deletions

View File

@@ -0,0 +1,29 @@
// @ts-nocheck
import React, { useState, useEffect, useRef } from "react";
import { Console, Hook, Unhook } from "console-feed";
const LogsContainer = () => {
const [logs, setLogs] = useState([]);
const messagesEndRef = useRef<HTMLDivElement | null>(null);
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
};
// run once!
useEffect(() => {
const hookedConsole = Hook(window.console, (log) => setLogs((currLogs) => [...currLogs, log]), false);
return () => Unhook(hookedConsole);
}, []);
useEffect(scrollToBottom, [logs]);
return (
<>
<Console logs={logs} variant="light" />
<div ref={messagesEndRef} />
</>
);
};
export { LogsContainer };

View File

@@ -5,7 +5,7 @@ const nextConfig = {
return [
{
source: "/",
destination: "/signin",
destination: "/app",
permanent: false,
},
];

View File

@@ -15,6 +15,7 @@
"@types/node": "18.15.11",
"@types/react": "18.0.33",
"@types/react-dom": "18.0.11",
"console-feed": "^3.5.0",
"eslint": "8.37.0",
"eslint-config-formbricks": "workspace:*",
"next": "13.2.4",

View File

@@ -1,5 +1,6 @@
import formbricks, { PersonId, SurveyId } from "@formbricks/js";
import formbricks from "@formbricks/js";
import type { AppProps } from "next/app";
import Head from "next/head";
import { useRouter } from "next/router";
import { useEffect } from "react";
import "../styles/globals.css";
@@ -35,10 +36,13 @@ export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<title>Demo App</title>
</Head>
{(!process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID ||
!process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) && (
<div className="w-full bg-red-500 p-3 text-center text-sm text-white">
Please set Formbricks environment variables
Please set Formbricks environment variables in apps/demo/.env
</div>
)}
<Component {...pageProps} />

View File

@@ -1,378 +1,189 @@
import LayoutApp from "@/components/LayoutApp";
import { classNames } from "@/lib/utils";
import { Bars3CenterLeftIcon, BellIcon, ScaleIcon } from "@heroicons/react/24/outline";
import {
BanknotesIcon,
BuildingOfficeIcon,
CheckCircleIcon,
ChevronDownIcon,
ChevronRightIcon,
MagnifyingGlassIcon,
} from "@heroicons/react/24/solid";
import Image from "next/image";
import fbsetup from "../../public/fb-setup.png";
import formbricks from "@formbricks/js";
const cards = [{ name: "Account balance", href: "#", icon: ScaleIcon, amount: "$30,659.45" }];
const transactions = [
{
id: 1,
name: "Payment to Molly Sanders",
href: "#",
amount: "$20,000",
currency: "USD",
status: "success",
date: "July 11, 2020",
datetime: "2020-07-11",
},
];
const statusStyles: any = {
success: "bg-green-100 text-green-800",
processing: "bg-yellow-100 text-yellow-800",
failed: "bg-slate-100 text-slate-800",
};
import Image from "next/image";
import { LogsContainer } from "../../components/ConsoleFeed";
export default function AppPage({}) {
return (
<LayoutApp>
<div className="flex h-16 flex-shrink-0 border-b border-slate-200 bg-white lg:border-none">
<button
type="button"
className="border-r border-slate-200 px-4 text-slate-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500 lg:hidden">
<span className="sr-only">Open sidebar</span>
<Bars3CenterLeftIcon className="h-6 w-6" aria-hidden="true" />
</button>
{/* Search bar */}
<div className="flex flex-1 justify-between px-4 sm:px-6 lg:mx-auto lg:max-w-6xl lg:px-8">
<div className="flex flex-1">
<form className="flex w-full md:ml-0" action="#" method="GET">
<label htmlFor="search-field" className="sr-only">
Search
</label>
<div className="relative w-full text-slate-400 focus-within:text-slate-600">
<div
className="pointer-events-none absolute inset-y-0 left-0 flex items-center"
aria-hidden="true">
<MagnifyingGlassIcon className="h-5 w-5" aria-hidden="true" />
</div>
<input
id="search-field"
name="search-field"
className="block h-full w-full border-transparent py-2 pl-8 pr-3 text-slate-900 placeholder-slate-500 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
placeholder="Search transactions"
type="search"
/>
</div>
</form>
<div className="px-12 py-6">
<div>
<h1 className="text-2xl font-bold">Formbricks In-product Survey Demo App</h1>
<p className="text-slate-700">
This app helps you test your in-app surveys. You can create an test user actions, create and update
user attributes, etc.
</p>
</div>
<div className="my-4 grid grid-cols-1 gap-6 md:grid-cols-2">
<div>
<div className="rounded-lg border border-slate-300 bg-slate-100 p-6">
<h3 className="text-lg font-semibold">Setup .env</h3>
<p className="text-slate-700">
Copy the environment ID of your Formbricks app to the env variable in demo/.env
</p>
<Image src={fbsetup} alt="fb setup" className="mt-4 rounded" priority />
</div>
<div className="ml-4 flex items-center md:ml-6">
<button
className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50"
onClick={() => {
formbricks.track("Cancel Subscription");
}}>
Feedback
</button>
<button className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50">
No Code Feedback Btn Click
</button>
<button
className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50"
onClick={() => {
formbricks.setEmail("test@web.com");
}}>
Set Email
</button>
<button
className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50"
onClick={() => {
formbricks.setUserId("ASDASDAAAAAASSSSSSSASDASD");
}}>
Set Long UserID
</button>
<button
className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50"
onClick={() => {
formbricks.setAttribute("Plan", "Free");
}}>
Set attribute &quot;Free&quot;
</button>
<button
className="mr-2 flex max-w-xs items-center rounded-full bg-white text-sm font-medium text-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50"
onClick={() => {
formbricks.setAttribute("Plan", "Paid");
}}>
Set attribute &quot;Paid&quot;
</button>
<div className="mt-4 rounded-lg border border-slate-300 bg-slate-100 p-6">
<h3 className="text-lg font-semibold">Console</h3>
<p className="text-slate-700">You can also open your browser console to logs:</p>
<div className="max-h-[40vh] overflow-y-auto py-4">
<LogsContainer />
</div>
</div>
</div>
{/* Profile dropdown */}
<div className="relative ml-3">
<div>
<button className="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 lg:rounded-md lg:p-2 lg:hover:bg-slate-50">
<Image
className="h-8 w-8 rounded-full"
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
width={32}
height={32}
alt=""
/>
<span className="ml-3 hidden text-sm font-medium text-slate-700 lg:block">
<span className="sr-only">Open user menu for </span>Emilia Birch
</span>
<ChevronDownIcon
className="ml-1 hidden h-5 w-5 flex-shrink-0 text-slate-400 lg:block"
aria-hidden="true"
/>
</button>
</div>
<div className="grid grid-cols-3">
<div className="col-span-3 rounded-lg border border-slate-300 bg-slate-100 p-6">
<h3 className="text-lg font-semibold">Reset person / pull data from Formbricks app</h3>
<p className="text-slate-700">
On formbricks.logout() a few things happen: <strong>New person is created</strong> and{" "}
<strong>surveys & no-code actions are pulled from Formbricks:</strong>.
</p>
<button
className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700"
onClick={() => {
formbricks.logout();
}}>
Logout
</button>
<p className="text-xs text-slate-700">
If you made a change in Formbricks app and it does not seem to work, hit &apos;Logout&apos; and
try again.
</p>
</div>
<div className="p-6">
<div>
<button
className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700"
onClick={() => {
formbricks.track("Code Action");
}}>
Code Action
</button>
</div>
<div>
<p className="text-xs text-slate-700">
This button sends a{" "}
<a href="https://formbricks.com/docs/actions/code" className="underline" target="_blank">
Code Action
</a>{" "}
to the Formbricks API called &apos;Code Action&apos;. You will find it in the Actions Tab.
</p>
</div>
</div>
<div className="p-6">
<div>
<button className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
No-Code Action
</button>
</div>
<div>
<p className="text-xs text-slate-700">
This button sends a{" "}
<a href="https://formbricks.com/docs/actions/no-code" className="underline" target="_blank">
No Code Action
</a>{" "}
as long as you created it beforehand in the Formbricks App.{" "}
<a href="https://formbricks.com/docs/actions/no-code" target="_blank" className="underline">
Here are instructions on how to do it.
</a>
</p>
</div>
</div>
<div className="p-6">
<div>
<button
onClick={() => {
formbricks.setAttribute("Plan", "Free");
}}
className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
Set Plan to &apos;Free&apos;
</button>
</div>
<div>
<p className="text-xs text-slate-700">
This button sets the{" "}
<a
href="https://formbricks.com/docs/attributes/custom-attributes"
target="_blank"
className="underline">
attribute
</a>{" "}
&apos;Plan&apos; to &apos;Free&apos;. If the attribute does not exist, it creates it.
</p>
</div>
</div>
<div className="p-6">
<div>
<button
onClick={() => {
formbricks.setAttribute("Plan", "Paid");
}}
className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
Set Plan to &apos;Paid&apos;
</button>
</div>
<div>
<p className="text-xs text-slate-700">
This button sets the{" "}
<a
href="https://formbricks.com/docs/attributes/custom-attributes"
target="_blank"
className="underline">
attribute
</a>{" "}
&apos;Plan&apos; to &apos;Paid&apos;. If the attribute does not exist, it creates it.
</p>
</div>
</div>
<div className="p-6">
<div>
<button
onClick={() => {
formbricks.setEmail("test@web.com");
}}
className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
Set Email
</button>
</div>
<div>
<p className="text-xs text-slate-700">
This button sets the{" "}
<a
href="https://formbricks.com/docs/attributes/identify-users"
target="_blank"
className="underline">
user email
</a>{" "}
&apos;test@web.com&apos;
</p>
</div>
</div>
<div className="p-6">
<div>
<button
onClick={() => {
formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
}}
className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700">
Set User ID
</button>
</div>
<div>
<p className="text-xs text-slate-700">
This button sets an external{" "}
<a
href="https://formbricks.com/docs/attributes/identify-users"
target="_blank"
className="underline">
user ID
</a>{" "}
to &apos;THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING&apos;
</p>
</div>
</div>
</div>
</div>
<main className="flex-1 pb-8">
{/* Page header */}
<div className="bg-white shadow">
<div className="px-4 sm:px-6 lg:mx-auto lg:max-w-6xl lg:px-8">
<div className="py-6 md:flex md:items-center md:justify-between lg:border-t lg:border-slate-200">
<div className="min-w-0 flex-1">
{/* Profile */}
<div className="flex items-center">
<Image
className="hidden h-16 w-16 rounded-full sm:block"
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.6&w=256&h=256&q=80"
alt=""
width={32}
height={32}
/>
<div>
<div className="flex items-center">
<Image
className="h-16 w-16 rounded-full sm:hidden"
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.6&w=256&h=256&q=80"
alt=""
width={32}
height={32}
/>
<h1 className="ml-3 text-2xl font-bold leading-7 text-slate-900 sm:truncate sm:leading-9">
Good morning, Emilia Birch
</h1>
</div>
<dl className="mt-6 flex flex-col sm:ml-3 sm:mt-1 sm:flex-row sm:flex-wrap">
<dt className="sr-only">Company</dt>
<dd className="flex items-center text-sm font-medium capitalize text-slate-500 sm:mr-6">
<BuildingOfficeIcon
className="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
aria-hidden="true"
/>
Duke street studio
</dd>
<dt className="sr-only">Account status</dt>
<dd className="mt-3 flex items-center text-sm font-medium capitalize text-slate-500 sm:mr-6 sm:mt-0">
<CheckCircleIcon
className="mr-1.5 h-5 w-5 flex-shrink-0 text-green-400"
aria-hidden="true"
/>
Verified account
</dd>
</dl>
</div>
</div>
</div>
<div className="mt-6 flex space-x-3 md:ml-4 md:mt-0">
<button
type="button"
className="inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
Add money
</button>
<button
type="button"
className="inline-flex items-center rounded-md border border-transparent bg-cyan-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2">
Send money
</button>
</div>
</div>
</div>
</div>
<div className="mt-8">
<div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
<h2 className="text-lg font-medium leading-6 text-slate-900">Overview</h2>
<div className="mt-2 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
{/* Card */}
{cards.map((card) => (
<div key={card.name} className="overflow-hidden rounded-lg bg-white shadow">
<div className="p-5">
<div className="flex items-center">
<div className="flex-shrink-0">
<card.icon className="h-6 w-6 text-slate-400" aria-hidden="true" />
</div>
<div className="ml-5 w-0 flex-1">
<dl>
<dt className="truncate text-sm font-medium text-slate-500">{card.name}</dt>
<dd>
<div className="text-lg font-medium text-slate-900">{card.amount}</div>
</dd>
</dl>
</div>
</div>
</div>
<div className="bg-slate-50 px-5 py-3">
<div className="text-sm">
<a href={card.href} className="font-medium text-cyan-700 hover:text-cyan-900">
View all
</a>
</div>
</div>
</div>
))}
</div>
</div>
<h2 className="mx-auto mt-8 max-w-6xl px-4 text-lg font-medium leading-6 text-slate-900 sm:px-6 lg:px-8">
Recent activity
</h2>
{/* Activity list (smallest breakpoint only) */}
<div className="shadow sm:hidden">
<ul role="list" className="mt-2 divide-y divide-slate-200 overflow-hidden shadow sm:hidden">
{transactions.map((transaction) => (
<li key={transaction.id}>
<a href={transaction.href} className="block bg-white px-4 py-4 hover:bg-slate-50">
<span className="flex items-center space-x-4">
<span className="flex flex-1 space-x-2 truncate">
<BanknotesIcon className="h-5 w-5 flex-shrink-0 text-slate-400" aria-hidden="true" />
<span className="flex flex-col truncate text-sm text-slate-500">
<span className="truncate">{transaction.name}</span>
<span>
<span className="font-medium text-slate-900">{transaction.amount}</span>{" "}
{transaction.currency}
</span>
<time dateTime={transaction.datetime}>{transaction.date}</time>
</span>
</span>
<ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-slate-400" aria-hidden="true" />
</span>
</a>
</li>
))}
</ul>
<nav
className="flex items-center justify-between border-t border-slate-200 bg-white px-4 py-3"
aria-label="Pagination">
<div className="flex flex-1 justify-between">
<a
href="#"
className="relative inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:text-slate-500">
Previous
</a>
<a
href="#"
className="relative ml-3 inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:text-slate-500">
Next
</a>
</div>
</nav>
</div>
{/* Activity table (small breakpoint and up) */}
<div className="hidden sm:block">
<div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
<div className="mt-2 flex flex-col">
<div className="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
<table className="min-w-full divide-y divide-slate-200">
<thead>
<tr>
<th
className="bg-slate-50 px-6 py-3 text-left text-sm font-semibold text-slate-900"
scope="col">
Transaction
</th>
<th
className="bg-slate-50 px-6 py-3 text-right text-sm font-semibold text-slate-900"
scope="col">
Amount
</th>
<th
className="hidden bg-slate-50 px-6 py-3 text-left text-sm font-semibold text-slate-900 md:block"
scope="col">
Status
</th>
<th
className="bg-slate-50 px-6 py-3 text-right text-sm font-semibold text-slate-900"
scope="col">
Date
</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-200 bg-white">
{transactions.map((transaction) => (
<tr key={transaction.id} className="bg-white">
<td className="w-full max-w-0 whitespace-nowrap px-6 py-4 text-sm text-slate-900">
<div className="flex">
<a
href={transaction.href}
className="group inline-flex space-x-2 truncate text-sm">
<BanknotesIcon
className="h-5 w-5 flex-shrink-0 text-slate-400 group-hover:text-slate-500"
aria-hidden="true"
/>
<p className="truncate text-slate-500 group-hover:text-slate-900">
{transaction.name}
</p>
</a>
</div>
</td>
<td className="whitespace-nowrap px-6 py-4 text-right text-sm text-slate-500">
<span className="font-medium text-slate-900">{transaction.amount}</span>
{transaction.currency}
</td>
<td className="hidden whitespace-nowrap px-6 py-4 text-sm text-slate-500 md:block">
<span
className={classNames(
statusStyles[transaction.status],
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium capitalize"
)}>
{transaction.status}
</span>
</td>
<td className="whitespace-nowrap px-6 py-4 text-right text-sm text-slate-500">
<time dateTime={transaction.datetime}>{transaction.date}</time>
</td>
</tr>
))}
</tbody>
</table>
{/* Pagination */}
<nav
className="flex items-center justify-between border-t border-slate-200 bg-white px-4 py-3 sm:px-6"
aria-label="Pagination">
<div className="hidden sm:block">
<p className="text-sm text-slate-700">
Showing <span className="font-medium">1</span> to{" "}
<span className="font-medium">10</span> of <span className="font-medium">20</span>{" "}
results
</p>
</div>
<div className="flex flex-1 justify-between sm:justify-end">
<a
href="#"
id="test-css"
className="relative inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
CSS ID Test
</a>
<a
href="#"
className="relative ml-3 inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
Next
</a>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</main>
</LayoutApp>
</div>
);
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

236
pnpm-lock.yaml generated
View File

@@ -37,6 +37,9 @@ importers:
'@types/react-dom':
specifier: 18.0.11
version: 18.0.11
console-feed:
specifier: ^3.5.0
version: 3.5.0(jquery@3.7.0)(react-dom@18.2.0)(react@18.2.0)
eslint:
specifier: 8.37.0
version: 8.37.0
@@ -873,7 +876,6 @@ packages:
engines: {node: '>=6.9.0'}
dependencies:
'@babel/highlight': 7.18.6
dev: true
/@babel/compat-data@7.20.5:
resolution: {integrity: sha512-KZXo2t10+/jxmkhNXc7pZTqRvSOIvVv/+lJwHS+B2rErwOyjuVRh60yVpb7liQ1U5t7lLJ1bz+t8tSypUZdm0g==}
@@ -1039,7 +1041,6 @@ packages:
engines: {node: '>=6.9.0'}
dependencies:
'@babel/types': 7.20.7
dev: true
/@babel/helper-module-transforms@7.20.11:
resolution: {integrity: sha512-uRy78kN4psmji1s2QtbtcCSaj/LILFDp0f/ymhpQH5QY3nljUZCaNWz9X1dEj/8MBdBEFECs7yRhKn8i7NjZgg==}
@@ -1121,12 +1122,10 @@ packages:
/@babel/helper-string-parser@7.19.4:
resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
engines: {node: '>=6.9.0'}
dev: true
/@babel/helper-validator-identifier@7.19.1:
resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
engines: {node: '>=6.9.0'}
dev: true
/@babel/helper-validator-option@7.18.6:
resolution: {integrity: sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==}
@@ -1163,7 +1162,6 @@ packages:
'@babel/helper-validator-identifier': 7.19.1
chalk: 2.4.2
js-tokens: 4.0.0
dev: true
/@babel/parser@7.20.13:
resolution: {integrity: sha512-gFDLKMfpiXCsjt4za2JA9oTMn70CeseCehb11kRZgvd7+F67Hih3OHOK24cRrWECJ/ljfPGac6ygXAs/C8kIvw==}
@@ -2232,7 +2230,6 @@ packages:
'@babel/helper-string-parser': 7.19.4
'@babel/helper-validator-identifier': 7.19.1
to-fast-properties: 2.0.0
dev: true
/@bcoe/v8-coverage@0.2.3:
resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
@@ -2460,6 +2457,107 @@ packages:
- '@algolia/client-search'
dev: false
/@emotion/cache@10.0.29:
resolution: {integrity: sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==}
dependencies:
'@emotion/sheet': 0.9.4
'@emotion/stylis': 0.8.5
'@emotion/utils': 0.11.3
'@emotion/weak-memoize': 0.2.5
dev: false
/@emotion/core@10.3.1(react@18.2.0):
resolution: {integrity: sha512-447aUEjPIm0MnE6QYIaFz9VQOHSXf4Iu6EWOIqq11EAPqinkSZmfymPTmlOE3QjLv846lH4JVZBUOtwGbuQoww==}
peerDependencies:
react: '>=16.3.0'
dependencies:
'@babel/runtime': 7.21.0
'@emotion/cache': 10.0.29
'@emotion/css': 10.0.27
'@emotion/serialize': 0.11.16
'@emotion/sheet': 0.9.4
'@emotion/utils': 0.11.3
react: 18.2.0
dev: false
/@emotion/css@10.0.27:
resolution: {integrity: sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==}
dependencies:
'@emotion/serialize': 0.11.16
'@emotion/utils': 0.11.3
babel-plugin-emotion: 10.2.2
dev: false
/@emotion/hash@0.8.0:
resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
dev: false
/@emotion/is-prop-valid@0.8.8:
resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
dependencies:
'@emotion/memoize': 0.7.4
dev: false
/@emotion/memoize@0.7.4:
resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
dev: false
/@emotion/serialize@0.11.16:
resolution: {integrity: sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==}
dependencies:
'@emotion/hash': 0.8.0
'@emotion/memoize': 0.7.4
'@emotion/unitless': 0.7.5
'@emotion/utils': 0.11.3
csstype: 2.6.21
dev: false
/@emotion/sheet@0.9.4:
resolution: {integrity: sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==}
dev: false
/@emotion/styled-base@10.3.0(@emotion/core@10.3.1)(react@18.2.0):
resolution: {integrity: sha512-PBRqsVKR7QRNkmfH78hTSSwHWcwDpecH9W6heujWAcyp2wdz/64PP73s7fWS1dIPm8/Exc8JAzYS8dEWXjv60w==}
peerDependencies:
'@emotion/core': ^10.0.28
react: '>=16.3.0'
dependencies:
'@babel/runtime': 7.21.0
'@emotion/core': 10.3.1(react@18.2.0)
'@emotion/is-prop-valid': 0.8.8
'@emotion/serialize': 0.11.16
'@emotion/utils': 0.11.3
react: 18.2.0
dev: false
/@emotion/styled@10.3.0(@emotion/core@10.3.1)(react@18.2.0):
resolution: {integrity: sha512-GgcUpXBBEU5ido+/p/mCT2/Xx+Oqmp9JzQRuC+a4lYM4i4LBBn/dWvc0rQ19N9ObA8/T4NWMrPNe79kMBDJqoQ==}
peerDependencies:
'@emotion/core': ^10.0.27
react: '>=16.3.0'
dependencies:
'@emotion/core': 10.3.1(react@18.2.0)
'@emotion/styled-base': 10.3.0(@emotion/core@10.3.1)(react@18.2.0)
babel-plugin-emotion: 10.2.2
react: 18.2.0
dev: false
/@emotion/stylis@0.8.5:
resolution: {integrity: sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==}
dev: false
/@emotion/unitless@0.7.5:
resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
dev: false
/@emotion/utils@0.11.3:
resolution: {integrity: sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==}
dev: false
/@emotion/weak-memoize@0.2.5:
resolution: {integrity: sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==}
dev: false
/@esbuild-kit/cjs-loader@2.4.2:
resolution: {integrity: sha512-BDXFbYOJzT/NBEtp71cvsrGPwGAMGRB/349rwKuoxNSiKjPraNNnlK6MIIabViCjqZugu6j+xeMDlEkWdHHJSg==}
dependencies:
@@ -5865,7 +5963,6 @@ packages:
/@types/parse-json@4.0.0:
resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
dev: true
/@types/prettier@2.7.2:
resolution: {integrity: sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==}
@@ -7305,6 +7402,21 @@ packages:
webpack: 4.46.0
dev: true
/babel-plugin-emotion@10.2.2:
resolution: {integrity: sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==}
dependencies:
'@babel/helper-module-imports': 7.18.6
'@emotion/hash': 0.8.0
'@emotion/memoize': 0.7.4
'@emotion/serialize': 0.11.16
babel-plugin-macros: 2.8.0
babel-plugin-syntax-jsx: 6.18.0
convert-source-map: 1.9.0
escape-string-regexp: 1.0.5
find-root: 1.1.0
source-map: 0.5.7
dev: false
/babel-plugin-istanbul@6.1.1:
resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
engines: {node: '>=8'}
@@ -7338,6 +7450,14 @@ packages:
'@types/babel__traverse': 7.18.3
dev: true
/babel-plugin-macros@2.8.0:
resolution: {integrity: sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==}
dependencies:
'@babel/runtime': 7.21.0
cosmiconfig: 6.0.0
resolve: 1.22.2
dev: false
/babel-plugin-macros@3.1.0:
resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
engines: {node: '>=10', npm: '>=6'}
@@ -7383,6 +7503,10 @@ packages:
- supports-color
dev: true
/babel-plugin-syntax-jsx@6.18.0:
resolution: {integrity: sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==}
dev: false
/babel-plugin-transform-async-to-promises@0.8.18:
resolution: {integrity: sha512-WpOrF76nUHijnNn10eBGOHZmXQC8JYRME9rOLxStOga7Av2VO53ehVFvVNImMksVtQuL2/7ZNxEgxnx7oo/3Hw==}
dev: true
@@ -8548,6 +8672,22 @@ packages:
engines: {node: '>=4'}
dev: true
/console-feed@3.5.0(jquery@3.7.0)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-2N5b37yH0HeaqbBDsHBx0jEy3qvhTGA1dVdGyEM6C1NQhVmIX+ToU6Rt/uo86K0lLs4Lg1orC940YSn+Z3kk5g==}
peerDependencies:
react: ^15.x || ^16.x || ^17.x || ^18.x
dependencies:
'@emotion/core': 10.3.1(react@18.2.0)
'@emotion/styled': 10.3.0(@emotion/core@10.3.1)(react@18.2.0)
emotion-theming: 10.3.0(@emotion/core@10.3.1)(react@18.2.0)
linkifyjs: 2.1.9(jquery@3.7.0)(react-dom@18.2.0)(react@18.2.0)
react: 18.2.0
react-inspector: 5.1.1(react@18.2.0)
transitivePeerDependencies:
- jquery
- react-dom
dev: false
/constants-browserify@1.0.0:
resolution: {integrity: sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==}
dev: true
@@ -8566,7 +8706,6 @@ packages:
/convert-source-map@1.9.0:
resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
dev: true
/convert-source-map@2.0.0:
resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
@@ -8652,6 +8791,17 @@ packages:
parse-json: 4.0.0
dev: true
/cosmiconfig@6.0.0:
resolution: {integrity: sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==}
engines: {node: '>=8'}
dependencies:
'@types/parse-json': 4.0.0
import-fresh: 3.3.0
parse-json: 5.2.0
path-type: 4.0.0
yaml: 1.10.2
dev: false
/cosmiconfig@7.1.0:
resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
engines: {node: '>=10'}
@@ -9059,6 +9209,10 @@ packages:
cssom: 0.3.8
dev: true
/csstype@2.6.21:
resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
dev: false
/csstype@3.1.1:
resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
@@ -9613,6 +9767,19 @@ packages:
engines: {node: '>= 4'}
dev: true
/emotion-theming@10.3.0(@emotion/core@10.3.1)(react@18.2.0):
resolution: {integrity: sha512-mXiD2Oj7N9b6+h/dC6oLf9hwxbtKHQjoIqtodEyL8CpkN4F3V4IK/BT4D0C7zSs4BBFOu4UlPJbvvBLa88SGEA==}
peerDependencies:
'@emotion/core': ^10.0.27
react: '>=16.3.0'
dependencies:
'@babel/runtime': 7.21.0
'@emotion/core': 10.3.1(react@18.2.0)
'@emotion/weak-memoize': 0.2.5
hoist-non-react-statics: 3.3.2
react: 18.2.0
dev: false
/encodeurl@1.0.2:
resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
engines: {node: '>= 0.8'}
@@ -9727,7 +9894,6 @@ packages:
resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
dependencies:
is-arrayish: 0.2.1
dev: true
/error-stack-parser@2.1.4:
resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==}
@@ -11012,6 +11178,10 @@ packages:
pkg-dir: 4.2.0
dev: true
/find-root@1.1.0:
resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
dev: false
/find-up@3.0.0:
resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
engines: {node: '>=6'}
@@ -12250,7 +12420,6 @@ packages:
/is-arrayish@0.2.1:
resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
dev: true
/is-arrayish@0.3.2:
resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
@@ -12386,6 +12555,13 @@ packages:
engines: {node: '>=8'}
hasBin: true
/is-dom@1.1.0:
resolution: {integrity: sha512-u82f6mvhYxRPKpw8V1N0W8ce1xXwOrQtgGcxl6UCL5zBmZu3is/18K0rR7uFCnMDuAsS/3W54mGL4vsaFUQlEQ==}
dependencies:
is-object: 1.0.2
is-window: 1.0.2
dev: false
/is-extendable@0.1.1:
resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
engines: {node: '>=0.10.0'}
@@ -12514,6 +12690,10 @@ packages:
resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
engines: {node: '>=8'}
/is-object@1.0.2:
resolution: {integrity: sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==}
dev: false
/is-path-cwd@2.2.0:
resolution: {integrity: sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==}
engines: {node: '>=6'}
@@ -12641,6 +12821,10 @@ packages:
dependencies:
call-bind: 1.0.2
/is-window@1.0.2:
resolution: {integrity: sha512-uj00kdXyZb9t9RcAUAwMZAnkBUwdYGhYlt7djMXhfyhUCzwNba50tIiBKR7q0l7tdoBtFVw/3JmLY6fI3rmZmg==}
dev: false
/is-windows@1.0.2:
resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
engines: {node: '>=0.10.0'}
@@ -13315,6 +13499,10 @@ packages:
engines: {node: '>=10'}
dev: true
/jquery@3.7.0:
resolution: {integrity: sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==}
dev: false
/js-cookie@2.2.1:
resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==}
dev: false
@@ -13635,7 +13823,6 @@ packages:
/lines-and-columns@1.2.4:
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
dev: true
/linkify-it@4.0.1:
resolution: {integrity: sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==}
@@ -13643,6 +13830,18 @@ packages:
uc.micro: 1.0.6
dev: false
/linkifyjs@2.1.9(jquery@3.7.0)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug==}
peerDependencies:
jquery: '>= 1.11.0'
react: '>= 0.14.0'
react-dom: '>= 0.14.0'
dependencies:
jquery: 3.7.0
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/listify@1.0.3:
resolution: {integrity: sha512-083swF7iH7bx8666zdzBColpgEuy46HjN3r1isD4zV6Ix7FuHfb/2/WVnl4CH8hjuoWeFF7P5KkKNXUnJCFEJg==}
engines: {node: '>= 0.4'}
@@ -15859,7 +16058,6 @@ packages:
error-ex: 1.3.2
json-parse-even-better-errors: 2.3.1
lines-and-columns: 1.2.4
dev: true
/parse-passwd@1.0.0:
resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==}
@@ -17604,6 +17802,17 @@ packages:
react: 18.2.0
dev: false
/react-inspector@5.1.1(react@18.2.0):
resolution: {integrity: sha512-GURDaYzoLbW8pMGXwYPDBIv6nqei4kK7LPRZ9q9HCZF54wqXz/dnylBp/kfE9XmekBhHvLDdcYeyIwSrvtOiWg==}
peerDependencies:
react: ^16.8.4 || ^17.0.0
dependencies:
'@babel/runtime': 7.21.0
is-dom: 1.1.0
prop-types: 15.8.1
react: 18.2.0
dev: false
/react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
@@ -18860,7 +19069,6 @@ packages:
/source-map@0.5.7:
resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
engines: {node: '>=0.10.0'}
dev: true
/source-map@0.6.1:
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
@@ -19867,7 +20075,6 @@ packages:
/to-fast-properties@2.0.0:
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
engines: {node: '>=4'}
dev: true
/to-object-path@0.3.0:
resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==}
@@ -21519,7 +21726,6 @@ packages:
/yaml@1.10.2:
resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
engines: {node: '>= 6'}
dev: true
/yaml@2.1.3:
resolution: {integrity: sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==}