mirror of
https://github.com/formbricks/formbricks.git
synced 2026-02-22 06:50:15 -06:00
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:
29
apps/demo/components/ConsoleFeed.tsx
Normal file
29
apps/demo/components/ConsoleFeed.tsx
Normal 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 };
|
||||
@@ -5,7 +5,7 @@ const nextConfig = {
|
||||
return [
|
||||
{
|
||||
source: "/",
|
||||
destination: "/signin",
|
||||
destination: "/app",
|
||||
permanent: false,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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 "Free"
|
||||
</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 "Paid"
|
||||
</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 'Logout' 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 'Code Action'. 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 'Free'
|
||||
</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>{" "}
|
||||
'Plan' to 'Free'. 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 'Paid'
|
||||
</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>{" "}
|
||||
'Plan' to 'Paid'. 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>{" "}
|
||||
'test@web.com'
|
||||
</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 'THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING'
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
BIN
apps/demo/public/fb-setup.png
Normal file
BIN
apps/demo/public/fb-setup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
236
pnpm-lock.yaml
generated
236
pnpm-lock.yaml
generated
@@ -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==}
|
||||
|
||||
Reference in New Issue
Block a user