Elgato_dark/console
1
0
Fork 0
mirror of https://github.com/graphql-hive/console synced 2026-04-21 14:37:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Remove twin.macro, use pure tailwindcss3 (#1256)

Browse source
This commit is contained in:
Dimitri POSTOLOV 2023-02-13 04:08:17 +01:00 committed by GitHub
parent 19909f9764
commit 0575817a97
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
54 changed files with 439 additions and 773 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.eslintrc.cjs
View file

@ -101,6 +101,9 @@ module.exports = {
'tailwindcss/classnames-order': 'off',
// set more strict to highlight in editor
'tailwindcss/enforces-shorthand': 'error',
'tailwindcss/no-custom-classname': 'error',
'tailwindcss/migration-from-tailwind-2': 'error',
'tailwindcss/no-contradicting-classname': 'error',
'react/display-name': 'off',
'react/prop-types': 'off',
'react/no-unknown-property': 'off',
@ -110,8 +113,6 @@ module.exports = {
// TODO: enable below rules👇
'@typescript-eslint/consistent-type-imports': ['off', { prefer: 'no-type-imports' }],
'tailwindcss/no-custom-classname': 'off',
'tailwindcss/migration-from-tailwind-2': 'off',
'no-console': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'react/jsx-no-useless-fragment': 'off',
@ -129,7 +130,6 @@ module.exports = {
'jsx-a11y/click-events-have-key-events': 'off',
'jsx-a11y/no-static-element-interactions': 'off',
'@next/next/no-html-link-for-pages': 'off',
'tailwindcss/no-contradicting-classname': 'off',
},
},
{

3
docs/DEVELOPMENT.md
View file

@ -14,9 +14,8 @@ Developing Hive locally requires you to have the following software installed lo
- Make sure to install the recommended VSCode extensions (defined in `.vscode/extensions.json`)
- In the root of the repo, run `nvm use` to use the same version of node as mentioned
- Create `.env` file in the root, and use the following:
-
```
```dotenv
SERVER_ENDPOINT=http://localhost:3001
ENVIRONMENT=local
```

6
packages/web/app/.babelrc.js
View file

@ -12,9 +12,5 @@ module.exports = {
},
],
],
plugins: [
'@emotion/babel-plugin',
'babel-plugin-macros',
[babelPlugin, { artifactDirectory: './src/gql' }],
],
plugins: ['@emotion/babel-plugin', [babelPlugin, { artifactDirectory: './src/gql' }]],
};

6
packages/web/app/package.json
View file

@ -82,7 +82,6 @@
"tailwindcss": "3.2.6",
"tailwindcss-radix": "2.7.0",
"tslib": "2.5.0",
"twin.macro": "2.8.2",
"urql": "3.0.3",
"use-debounce": "9.0.3",
"valtio": "1.10.1",
@ -110,11 +109,6 @@
"postcss": "8.4.21",
"rimraf": "4.1.2"
},
"babelMacros": {
"twin": {
"preset": "emotion"
}
},
"buildOptions": {
"runify": {
"next": {

1
packages/web/app/pages/[orgId]/[projectId]/[targetId]/operations.tsx
View file

@ -2,7 +2,6 @@ import { ComponentProps, ReactElement, useCallback, useMemo, useState } from 're
import { useRouter } from 'next/router';
import { formatISO, subDays, subHours, subMinutes } from 'date-fns';
import { VscChevronDown } from 'react-icons/vsc';
import 'twin.macro';
import { useQuery } from 'urql';
import { authenticated } from '@/components/authenticated-container';
import { TargetLayout } from '@/components/layouts';

1
packages/web/app/pages/[orgId]/view/subscription/manage.tsx
View file

@ -1,5 +1,4 @@
import { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
import 'twin.macro';
import { useMutation, useQuery } from 'urql';
import { authenticated } from '@/components/authenticated-container';
import { Section } from '@/components/common';

8
packages/web/app/pages/_app.tsx
View file

@ -6,7 +6,6 @@ import cookies from 'js-cookie';
import SuperTokens, { SuperTokensWrapper } from 'supertokens-auth-react';
import Session from 'supertokens-auth-react/recipe/session';
import { Provider as UrqlProvider } from 'urql';
import GlobalStylesComponent from '@/components/common/GlobalStyles';
import { LoadingAPIIndicator } from '@/components/common/LoadingAPI';
import { frontendConfig } from '@/config/supertokens/frontend';
import { LAST_VISITED_ORG_KEY } from '@/constants';
@ -33,7 +32,7 @@ function identifyOnCrisp(email: string): void {
}
}
function pushIfNotEmpty(crisp: any, key: string, value: string | undefined | null): void {
function pushIfNotEmpty(crisp: any, key: string, value?: string | null): void {
if (value) {
crisp.push(['set', key, value]);
}
@ -45,7 +44,7 @@ function identifyOnSentry(userId: string, email: string): void {
});
}
function App({ Component, pageProps }: AppProps): ReactElement {
export default function App({ Component, pageProps }: AppProps): ReactElement {
useEffect(() => {
const handleRouteChange = (url: string) => {
gtag.pageview(url);
@ -85,7 +84,6 @@ function App({ Component, pageProps }: AppProps): ReactElement {
return (
<>
<GlobalStylesComponent />
{env.analytics.googleAnalyticsTrackingId && (
<>
<Script
@ -152,5 +150,3 @@ if (globalThis.window) {
});
}
}
export default App;

2
packages/web/app/pages/_document.tsx
View file

@ -51,7 +51,7 @@ export default class MyDocument extends Document<{
<script
type="module"
dangerouslySetInnerHTML={{
__html: `globalThis["__frontend_env"] = ${JSON.stringify(
__html: `globalThis.__frontend_env = ${JSON.stringify(
(this.props as any).frontendEnv,
)}`,
}}

79
packages/web/app/pages/action/transfer/[orgId]/[code].tsx
View file

@ -1,5 +1,5 @@
import * as React from 'react';
import tw from 'twin.macro';
import clsx from 'clsx';
import { gql, useMutation, useQuery } from 'urql';
import { authenticated } from '@/components/authenticated-container';
import { Title } from '@/components/common';
@ -9,13 +9,10 @@ import { useRouteSelector } from '@/lib/hooks/use-route-selector';
import { withSessionProtection } from '@/lib/supertokens/guard';
import { Button } from '@chakra-ui/react';
const Center = tw.div`w-full h-full flex flex-row items-center justify-center`;
const Invitation = {
Root: tw.div`flex flex-col text-center md:w-2/3 w-full`,
Title: tw.h1`sm:text-4xl text-3xl mb-4 font-medium text-white`,
Description: tw.p`mb-8 leading-relaxed`,
Actions: tw.div`flex flex-row gap-2 items-center justify-center`,
const classes = {
title: clsx('sm:text-4xl text-3xl mb-4 font-medium text-white'),
description: clsx('mb-8 leading-relaxed'),
actions: clsx('flex flex-row gap-2 items-center justify-center'),
};
const OrganizationTransferPage_GetRequest = gql(`
@ -105,44 +102,40 @@ function OrganizationTransferPage() {
<>
<Title title="Organization Transfer" />
<DataWrapper query={query}>
{({ data }) => {
if (data.organizationTransferRequest == null) {
return (
<Center>
<Invitation.Root>
<Invitation.Title>Organization Transfer Error</Invitation.Title>
<Invitation.Description>Not found</Invitation.Description>
{({ data }) => (
<div className="w-full h-full flex flex-row items-center justify-center">
<div className="flex flex-col text-center md:w-2/3 w-full">
{data.organizationTransferRequest == null ? (
<>
<h1 className={classes.title}>Organization Transfer Error</h1>
<p className={classes.description}>Not found</p>
<Invitation.Actions>
<div className={classes.actions}>
<Button onClick={goBack}>Back to Hive</Button>
</Invitation.Actions>
</Invitation.Root>
</Center>
);
}
</div>
</>
) : (
<>
<h1 className={classes.title}>Accept the transfer?</h1>
<p className={classes.description}>
{data.organizationTransferRequest.organization.owner.user.displayName} wants to
transfer the "{data.organizationTransferRequest.organization.name}" organization
to you.
</p>
return (
<Center>
<Invitation.Root>
<Invitation.Title>Accept the transfer?</Invitation.Title>
<Invitation.Description>
{data.organizationTransferRequest.organization.owner.user.displayName} wants to
transfer the "{data.organizationTransferRequest.organization.name}" organization
to you.
</Invitation.Description>
<Invitation.Actions>
<Button colorScheme="primary" onClick={accept} disabled={mutation.fetching}>
Accept
</Button>
<Button colorScheme="red" onClick={reject} disabled={mutation.fetching}>
Reject
</Button>
</Invitation.Actions>
</Invitation.Root>
</Center>
);
}}
<div className={classes.actions}>
<Button colorScheme="primary" onClick={accept} disabled={mutation.fetching}>
Accept
</Button>
<Button colorScheme="red" onClick={reject} disabled={mutation.fetching}>
Reject
</Button>
</div>
</>
)}
</div>
</div>
)}
</DataWrapper>
</>
);

1
packages/web/app/pages/auth/[[...path]].tsx
View file

@ -3,7 +3,6 @@ import { GetServerSideProps } from 'next';
import dynamic from 'next/dynamic';
import Head from 'next/head';
import SuperTokensReact from 'supertokens-auth-react';
import 'twin.macro';
import { FullLogo } from '@/components/common/Logo';
import { env } from '@/env/frontend';
import { startAuthFlowForProvider } from '@/lib/supertokens/start-auth-flow-for-provider';

73
packages/web/app/pages/join/[inviteCode].tsx
View file

@ -1,5 +1,5 @@
import * as React from 'react';
import tw from 'twin.macro';
import clsx from 'clsx';
import { useMutation, useQuery } from 'urql';
import { authenticated } from '@/components/authenticated-container';
import { Title } from '@/components/common';
@ -10,13 +10,10 @@ import { useRouteSelector } from '@/lib/hooks/use-route-selector';
import { withSessionProtection } from '@/lib/supertokens/guard';
import { Button } from '@chakra-ui/react';
const Center = tw.div`w-full h-full flex flex-row items-center justify-center`;
const Invitation = {
Root: tw.div`flex flex-col text-center md:w-2/3 w-full`,
Title: tw.h1`sm:text-4xl text-3xl mb-4 font-medium text-white`,
Description: tw.p`mb-8 leading-relaxed`,
Actions: tw.div`flex flex-row gap-2 items-center justify-center`,
const classes = {
title: clsx('sm:text-4xl text-3xl mb-4 font-medium text-white'),
description: clsx('mb-8 leading-relaxed'),
actions: clsx('flex flex-row gap-2 items-center justify-center'),
};
function OrganizationPage() {
@ -59,39 +56,37 @@ function OrganizationPage() {
}
const invitation = data.organizationByInviteCode;
if (invitation.__typename === 'OrganizationInvitationError') {
return (
<Center>
<Invitation.Root>
<Invitation.Title>Invitation Error</Invitation.Title>
<Invitation.Description>{invitation.message}</Invitation.Description>
<Invitation.Actions>
<Button onClick={goBack}>Back to Hive</Button>
</Invitation.Actions>
</Invitation.Root>
</Center>
);
}
return (
<Center>
<Invitation.Root>
<Invitation.Title>Join "{invitation.name}" organization?</Invitation.Title>
<Invitation.Description>
You've been invited to join "{invitation.name}" organization on GraphQL Hive.
</Invitation.Description>
<div className="w-full h-full flex flex-row items-center justify-center">
<div className="flex flex-col text-center md:w-2/3 w-full">
{invitation.__typename === 'OrganizationInvitationError' ? (
<>
<h1 className={classes.title}>Invitation Error</h1>
<p className={classes.description}>{invitation.message}</p>
<Invitation.Actions>
<Button colorScheme="primary" onClick={accept} disabled={mutation.fetching}>
Accept
</Button>
<Button disabled={mutation.fetching} onClick={goBack}>
Ignore
</Button>
</Invitation.Actions>
</Invitation.Root>
</Center>
<div className={classes.actions}>
<Button onClick={goBack}>Back to Hive</Button>
</div>
</>
) : (
<>
<h1 className={classes.title}>Join "{invitation.name}" organization?</h1>
<p className={classes.description}>
You've been invited to join "{invitation.name}" organization on GraphQL Hive.
</p>
<div className={classes.actions}>
<Button colorScheme="primary" onClick={accept} disabled={mutation.fetching}>
Accept
</Button>
<Button disabled={mutation.fetching} onClick={goBack}>
Ignore
</Button>
</div>
</>
)}
</div>
</div>
);
}}
</DataWrapper>

42
packages/web/app/pages/manage/index.tsx
View file

@ -3,7 +3,6 @@ import startOfMonth from 'date-fns/startOfMonth';
import subDays from 'date-fns/subDays';
import subHours from 'date-fns/subHours';
import { VscChevronDown } from 'react-icons/vsc';
import 'twin.macro';
import { AdminStats, Filters } from '@/components/admin/AdminStats';
import { authenticated } from '@/components/authenticated-container';
import { Page } from '@/components/common';
@ -11,12 +10,7 @@ import { DATE_RANGE_OPTIONS, floorToMinute } from '@/components/common/TimeFilte
import { withSessionProtection } from '@/lib/supertokens/guard';
import { Checkbox, CheckboxGroup, Select, Tooltip } from '@chakra-ui/react';
type DateRangeOptions = Exclude<
(typeof DATE_RANGE_OPTIONS)[number],
{
key: 'all';
}
>;
type DateRangeOptions = Exclude<(typeof DATE_RANGE_OPTIONS)[number], { key: 'all' }>;
function isNotAllOption(option: (typeof DATE_RANGE_OPTIONS)[number]): option is DateRangeOptions {
return option.key !== 'all';
@ -70,10 +64,10 @@ function Manage() {
return (
<Page title="Hive Stats">
<div tw="flex flex-row h-full">
<div tw="flex-grow overflow-x-auto divide-y divide-gray-200">
<div tw="w-6/12 mt-10 mb-6">
<div tw="inline-block">
<div className="flex flex-row h-full">
<div className="grow overflow-x-auto divide-y divide-gray-200">
<div className="w-6/12 mt-10 mb-6">
<div className="inline-block">
<CheckboxGroup
colorScheme="teal"
size="sm"
@ -82,24 +76,24 @@ function Manage() {
)}
onChange={onFiltersChange}
>
<Checkbox tw="whitespace-nowrap align-middle" value="only-regular">
<Checkbox className="whitespace-nowrap align-middle" value="only-regular">
<Tooltip label="Do not count personal organizations, created automatically for every user">
Only Regular
</Tooltip>
</Checkbox>
<Checkbox tw="whitespace-nowrap align-middle" value="with-projects">
<Checkbox className="whitespace-nowrap align-middle" value="with-projects">
With Projects
</Checkbox>
<Checkbox tw="whitespace-nowrap align-middle" value="with-targets">
<Checkbox className="whitespace-nowrap align-middle" value="with-targets">
With Targets
</Checkbox>
<Checkbox tw="whitespace-nowrap align-middle" value="with-schema-pushes">
<Checkbox className="whitespace-nowrap align-middle" value="with-schema-pushes">
With Schema Pushes
</Checkbox>
<Checkbox tw="whitespace-nowrap align-middle" value="with-persisted">
<Checkbox className="whitespace-nowrap align-middle" value="with-persisted">
With Persisted
</Checkbox>
<Checkbox tw="whitespace-nowrap align-middle" value="with-collected">
<Checkbox className="whitespace-nowrap align-middle" value="with-collected">
With Collected
</Checkbox>
</CheckboxGroup>
@ -113,15 +107,13 @@ function Manage() {
iconSize="16"
icon={<VscChevronDown />}
size="sm"
tw="inline-block align-middle"
className="inline-block align-middle"
>
{dateRangeOptions.map(item => {
return (
<option key={item.key} value={item.key}>
{item.label}
</option>
);
})}
{dateRangeOptions.map(item => (
<option key={item.key} value={item.key}>
{item.label}
</option>
))}
</Select>
</Tooltip>
</div>

39
packages/web/app/public/styles.css
View file

@ -1,3 +1,42 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
*:active,
*:focus {
outline: none !important;
}
html,
body,
#__next {
@apply h-screen w-screen;
}
#__next {
font-family: inherit !important;
color: inherit !important;
@apply flex h-full flex-col text-sm text-gray-700 antialiased lg:text-base;
}
/* Remove autocomplete color in Chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
-webkit-transition-delay: 9999s;
}
select {
/* remove default arrow down icon in right side */
appearance: none;
}
.monaco-editor,
.monaco-editor-background,
[role='presentation'] {
background: transparent !important;
}
}

11
packages/web/app/src/components/admin/AdminStats.tsx
View file

@ -3,7 +3,6 @@ import { formatISO } from 'date-fns';
import ReactECharts from 'echarts-for-react';
import { VscChevronDown, VscChevronLeft, VscChevronRight, VscChevronUp } from 'react-icons/vsc';
import AutoSizer from 'react-virtualized-auto-sizer';
import 'twin.macro';
import { DocumentType, gql, useQuery } from 'urql';
import { DataWrapper } from '@/components/common/DataWrapper';
import { env } from '@/env/frontend';
@ -172,7 +171,7 @@ const Sortable = ({
direction="row"
align="center"
justifyContent={align === 'center' ? 'center' : align === 'left' ? 'flex-start' : 'flex-end'}
tw="cursor-pointer"
className="cursor-pointer"
>
<span>{children}</span>
{isSorted ? isSortedDesc ? <VscChevronDown /> : <VscChevronUp /> : null}
@ -404,7 +403,7 @@ function OrganizationTable({ data }: { data: Organization[] }) {
))}
</Tbody>
</Table>
<div tw="py-3 flex flex-row items-center justify-center space-x-2">
<div className="py-3 flex flex-row items-center justify-center space-x-2">
<Button
size="sm"
variant="ghost"
@ -423,7 +422,7 @@ function OrganizationTable({ data }: { data: Organization[] }) {
disabled={!tableInstance.getCanPreviousPage()}
icon={<VscChevronLeft />}
/>
<span tw="font-bold whitespace-nowrap text-sm">
<span className="font-bold whitespace-nowrap text-sm">
{tableInstance.getState().pagination.pageIndex + 1} / {tableInstance.getPageCount()}
</span>
<IconButton
@ -504,8 +503,8 @@ export const AdminStats: React.FC<{
return (
<DataWrapper query={query}>
{({ data }) => (
<div tw="flex flex-col space-y-6">
<StatGroup tw="bg-gray-100 dark:bg-gray-800 px-3 py-2">
<div className="flex flex-col space-y-6">
<StatGroup className="bg-gray-100 dark:bg-gray-800 px-3 py-2">
<OverallStat label="Users" value={overall.users} />
<OverallStat label="Organizations" value={overall.organizations} />
<OverallStat label="Projects" value={overall.projects} />

5
packages/web/app/src/components/common/Feedback.tsx
View file

@ -1,6 +1,5 @@
import * as React from 'react';
import { useFormik } from 'formik';
import 'twin.macro';
import { useMutation } from 'urql';
import * as Yup from 'yup';
import { SendFeedbackDocument } from '@/graphql';
@ -76,7 +75,7 @@ export const Feedback: React.FC<{
<ModalHeader>{state === 'FORM' ? 'Send feedback' : 'We got your feedback'}</ModalHeader>
<ModalBody>
{state === 'FORM' ? (
<div tw="space-y-6">
<div className="space-y-6">
<FormControl isInvalid={isValid('feedback')}>
<FormLabel>How can we improve GraphQL Hive?</FormLabel>
<Textarea
@ -109,7 +108,7 @@ export const Feedback: React.FC<{
</Alert>
)}
</ModalBody>
<ModalFooter tw="space-x-6">
<ModalFooter className="space-x-6">
{state === 'FORM' ? (
<>
<Button variant="ghost" type="button" onClick={onClose}>

53
packages/web/app/src/components/common/GlobalStyles.tsx
View file

@ -1,53 +0,0 @@
import { ReactElement } from 'react';
import tw, { GlobalStyles } from 'twin.macro';
import { css, Global } from '@emotion/react';
const customStyles = css`
*:active,
*:focus {
outline: none !important;
}
html,
body,
#__next {
${tw`w-screen h-screen`}
}
#__next {
font-family: inherit !important;
color: inherit !important;
${tw`flex flex-col h-full text-sm antialiased text-gray-700 lg:text-base`}
}
// Remove autocomplete color in Chrome
input:-webkit-autofill {
&,
&:hover,
&:focus,
&:active {
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
-webkit-transition-delay: 9999s;
}
}
select {
// remove default arrow down icon in right side
appearance: none;
}
.monaco-editor,
.monaco-editor-background,
[role='presentation'] {
background: transparent !important;
}
`;
export default function GlobalStylesComponent(): ReactElement {
return (
<>
<GlobalStyles />
<Global styles={customStyles} />
</>
);
}

36
packages/web/app/src/components/common/Navigation.tsx
View file

@ -1,6 +1,5 @@
import * as React from 'react';
import Link from 'next/link';
import 'twin.macro';
import { useQuery } from 'urql';
import { env } from '@/env/frontend';
import { MeDocument } from '@/graphql';
@ -115,25 +114,25 @@ export function Navigation() {
const docsUrl = getDocsUrl();
return (
<nav tw="bg-white shadow-md dark:bg-gray-900 z-10">
<div tw="mx-auto px-2 sm:px-6 lg:px-8">
<div tw="relative flex flex-row items-center justify-between h-12">
<div tw="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
<Link href="/" tw="flex-shrink-0 flex text-yellow-500 items-center hover:opacity-50">
<Logo tw="w-6 h-6" />
<nav className="bg-white shadow-md dark:bg-gray-900 z-10">
<div className="mx-auto px-2 sm:px-6 lg:px-8">
<div className="relative flex flex-row items-center justify-between h-12">
<div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
<Link href="/" className="shrink-0 flex text-yellow-500 items-center hover:opacity-50">
<Logo className="w-6 h-6" />
</Link>
<div tw="hidden sm:block sm:ml-6">
<div tw="flex space-x-4 items-center ">
<div className="hidden sm:block sm:ml-6">
<div className="flex space-x-4 items-center ">
{organization && <OrganizationSwitcher organizationId={organization} />}
{project && organization && (
<>
<div tw="text-xl text-gray-200 font-normal select-none">/</div>
<div className="text-xl text-gray-200 font-normal select-none">/</div>
<ProjectSwitcher organizationId={organization} projectId={project} />
</>
)}
{project && target && organization && (
<>
<div tw="text-xl text-gray-200 font-normal select-none">/</div>
<div className="text-xl text-gray-200 font-normal select-none">/</div>
<TargetSwitcher
organizationId={organization}
projectId={project}
@ -145,24 +144,24 @@ export function Navigation() {
</div>
</div>
{docsUrl ? (
<div tw="flex flex-row items-center space-x-4">
<ChakraLink tw="text-sm dark:text-gray-200" href={docsUrl}>
<div className="flex flex-row items-center space-x-4">
<ChakraLink className="text-sm dark:text-gray-200" href={docsUrl}>
Documentation
</ChakraLink>
</div>
) : null}
<Divider orientation="vertical" tw="height[20px] ml-8 mr-3" />
<div tw="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:pr-0">
<div tw="ml-3 relative">
<Divider orientation="vertical" className="h-5 ml-8 mr-3" />
<div className="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:pr-0">
<div className="ml-3 relative">
<Menu autoSelect={false}>
<MenuButton
size="sm"
as={Button}
tw="font-normal"
className="font-normal"
variant="ghost"
rightIcon={
<img
tw="h-6 w-6 rounded-full"
className="h-6 w-6 rounded-full"
src={undefined}
alt={me?.displayName ?? undefined}
/>
@ -212,7 +211,6 @@ export function Navigation() {
</div>
</div>
<ThemeButton />
<div className="hive-release-notes" />
</div>
</div>
</nav>

99
packages/web/app/src/components/common/Page.tsx
View file

@ -1,66 +1,57 @@
import React, { PropsWithChildren, ReactElement } from 'react';
import Link from 'next/link';
import clsx from 'clsx';
import { FiTarget } from 'react-icons/fi';
import { VscFolder, VscOrganization } from 'react-icons/vsc';
import tw, { styled } from 'twin.macro';
import { useRouteSelector } from '@/lib/hooks';
import { Navigation, NavigationItem, useNavigation } from './Navigation';
const PageContainer = tw.div`flex flex-col flex-1 overflow-y-auto relative`;
const Container = tw.div`flex flex-1 overflow-y-auto text-gray-700 bg-white dark:bg-gray-900`;
const Fixed = tw.div`flex-none bg-white dark:bg-gray-800 dark:text-white border-r-2 border-gray-100 dark:border-gray-700`;
const Grow = tw.div`flex-grow`;
const Content = tw.div`flex-1 overflow-y-auto`;
const MenuLink = styled.a(({ active }: { active?: boolean }) => [
tw`
relative flex flex-row items-center
px-3 py-2 min-width[200px]
font-semibold
text-gray-500
dark:text-gray-400
hover:text-gray-700
hover:bg-gray-100
dark:hover:text-gray-200
dark:hover:bg-gray-700
dark:hover:bg-opacity-25
rounded-md
`,
active
? tw`
text-black hover:text-black
bg-gray-200 hover:bg-gray-200
dark:text-white dark:hover:text-white
dark:bg-gray-700 dark:hover:bg-gray-700
`
: tw``,
]);
const Menu = {
Root: tw.ul`flex flex-col px-2 py-4`,
Title: ({ children, icon }: { children: string; icon: ReactElement }) => {
Title({ children, icon }: { children: string; icon: ReactElement }): ReactElement {
return (
<li tw="px-3 pb-2">
<div tw="flex flex-row items-center h-8">
<span tw="inline-flex justify-center items-center">{icon}</span>
<div tw="ml-4 text-sm font-semibold text-gray-500 dark:text-gray-300 tracking-wide">
<li className="px-3 pb-2">
<div className="flex flex-row items-center h-8">
<span className="inline-flex justify-center items-center">{icon}</span>
<div className="ml-4 text-sm font-semibold text-gray-500 dark:text-gray-300 tracking-wide">
{children}
</div>
</div>
</li>
);
},
Item: (item: NavigationItem & { path: string }) => {
Item(item: NavigationItem & { path: string }) {
const active = item.exact ? item.path === item.link : item.path.startsWith(item.link);
return (
<li>
<Link href={item.link}>
<MenuLink href="#" active={active}>
<span tw="inline-flex justify-center items-center">{item.icon}</span>
<span tw="ml-4 text-sm tracking-wide truncate font-normal">{item.label}</span>
</MenuLink>
<a
href="#"
className={clsx(
`
relative flex flex-row items-center
px-3 py-2 min-w-[200px]
font-semibold
text-gray-500
dark:text-gray-400
hover:text-gray-700
hover:bg-gray-100
dark:hover:text-gray-200
dark:hover:bg-gray-700/25
rounded-md
`,
active &&
`
text-black hover:text-black
bg-gray-200 hover:bg-gray-200
dark:text-white dark:hover:text-white
dark:bg-gray-700 dark:hover:bg-gray-700
`,
)}
>
<span className="inline-flex justify-center items-center">{item.icon}</span>
<span className="ml-4 text-sm tracking-wide truncate font-normal">{item.label}</span>
</a>
</Link>
</li>
);
@ -86,13 +77,13 @@ const WithNavigation = ({ children }: PropsWithChildren) => {
);
return (
<PageContainer>
<div className="flex flex-col flex-1 overflow-y-auto relative">
<Navigation />
{navigation.menu ? (
<Container>
<Fixed>
<Grow>
<Menu.Root>
<div className="flex flex-1 overflow-y-auto text-gray-700 bg-white dark:bg-gray-900">
<div className="flex-none bg-white dark:bg-gray-800 dark:text-white border-r-2 border-gray-100 dark:border-gray-700">
<div className="grow">
<ul className="flex flex-col px-2 py-4">
<Menu.Title icon={menuIcon}>{menuTitle}</Menu.Title>
{navigation.menu.filter(Boolean).map((item, key) => (
<Menu.Item
@ -104,15 +95,15 @@ const WithNavigation = ({ children }: PropsWithChildren) => {
path={router.asPath}
/>
))}
</Menu.Root>
</Grow>
</Fixed>
<Content>{children}</Content>
</Container>
</ul>
</div>
</div>
<div className="flex-1 overflow-y-auto">{children}</div>
</div>
) : (
children
)}
</PageContainer>
</div>
);
};

3
packages/web/app/src/components/common/Spinner.tsx
View file

@ -1,9 +1,8 @@
import React from 'react';
import 'twin.macro';
import { Spinner as CSpinner } from '@chakra-ui/react';
export const Spinner = () => (
<div tw="h-full w-full flex justify-center items-center">
<div className="h-full w-full flex justify-center items-center">
<CSpinner color="#eab308" size="lg" />
</div>
);

5
packages/web/app/src/components/common/UserSettings.tsx
View file

@ -1,6 +1,5 @@
import * as React from 'react';
import { useFormik } from 'formik';
import 'twin.macro';
import { DocumentType, gql, useMutation } from 'urql';
import * as Yup from 'yup';
import {
@ -97,7 +96,7 @@ export const UserSettings: React.FC<{
>
<ModalHeader>User Settings</ModalHeader>
<ModalBody>
<div tw="space-y-6">
<div className="space-y-6">
<FormControl isInvalid={isValid('fullName')}>
<FormLabel>Full name</FormLabel>
<Input
@ -122,7 +121,7 @@ export const UserSettings: React.FC<{
</FormControl>
</div>
</ModalBody>
<ModalFooter tw="space-x-6">
<ModalFooter className="space-x-6">
<Button variant="ghost" type="button" disabled={formik.isSubmitting} onClick={onClose}>
Cancel
</Button>

91
packages/web/app/src/components/common/index.tsx
View file

@ -1,6 +1,6 @@
import React, { PropsWithChildren } from 'react';
import React, { ComponentProps, PropsWithChildren, ReactElement } from 'react';
import Head from 'next/head';
import tw, { styled } from 'twin.macro';
import clsx from 'clsx';
export const Title: React.FC<{ title: string }> = ({ title }) => (
<Head>
@ -9,18 +9,25 @@ export const Title: React.FC<{ title: string }> = ({ title }) => (
</Head>
);
export const Label = tw.span`
export function Label({ className, children, ...props }: ComponentProps<'span'>): ReactElement {
return (
<span
className={clsx(
`
inline-block
py-1 px-2
rounded
bg-yellow-50 dark:bg-white dark:bg-opacity-10
bg-yellow-50 dark:bg-white/10
text-yellow-600 dark:text-yellow-300
text-xs font-medium tracking-widest`;
const PageContent = styled.div(({ scrollable }: { scrollable: boolean }) => [
tw`px-4 pb-4 dark:text-white`,
scrollable ? tw`flex-grow overflow-y-auto` : tw`h-full`,
]);
text-xs font-medium tracking-widest`,
className,
)}
{...props}
>
{children}
</span>
);
}
export const Page = ({
title,
@ -37,30 +44,48 @@ export const Page = ({
noPadding?: boolean;
}>) => {
return (
<div tw="flex flex-col relative h-full dark:bg-gray-900">
<div tw="p-4 flex-shrink-0 flex flex-row justify-between items-center">
<div className="flex flex-col relative h-full dark:bg-gray-900">
<div className="p-4 shrink-0 flex flex-row justify-between items-center">
<div>
<h2 tw="text-xl text-black dark:text-white font-bold">{title}</h2>
<span tw="text-sm text-gray-600 dark:text-gray-300 mt-2">{subtitle}</span>
<h2 className="text-xl text-black dark:text-white font-bold">{title}</h2>
<span className="text-sm text-gray-600 dark:text-gray-300 mt-2">{subtitle}</span>
</div>
<div tw="flex flex-row items-center space-x-2">{actions}</div>
<div className="flex flex-row items-center space-x-2">{actions}</div>
</div>
{noPadding ? children : <PageContent scrollable={scrollable}>{children}</PageContent>}
{noPadding ? (
children
) : (
<div
className={clsx(
'px-4 pb-4 dark:text-white',
scrollable ? 'grow overflow-y-auto' : 'h-full',
)}
>
{children}
</div>
)}
</div>
);
};
export const Section = {
Title: tw.h3`text-base text-black dark:text-white font-bold`,
BigTitle: tw.h2`text-base text-black dark:text-white font-bold`,
Subtitle: tw.div`text-sm text-gray-600 dark:text-gray-300`,
Title: ({ className, children, ...props }: ComponentProps<'h3'>): ReactElement => (
<h3 className={clsx('text-base text-black dark:text-white font-bold', className)} {...props}>
{children}
</h3>
),
BigTitle: ({ className, children, ...props }: ComponentProps<'h2'>): ReactElement => (
<h2 className={clsx('text-base text-black dark:text-white font-bold', className)} {...props}>
{children}
</h2>
),
Subtitle: ({ className, children, ...props }: ComponentProps<'div'>): ReactElement => (
<div className={clsx('text-sm text-gray-600 dark:text-gray-300', className)} {...props}>
{children}
</div>
),
};
const ScalePiece = styled.div(({ filled }: { filled: boolean }) => [
tw`w-1 h-4`,
filled ? tw`bg-emerald-400` : tw`bg-gray-200`,
]);
export const Scale: React.FC<{
value: number;
max: number;
@ -68,12 +93,24 @@ export const Scale: React.FC<{
className?: string;
}> = ({ value, max, size, className }) => {
return (
<div tw="flex flex-row space-x-1 flex-grow-0" className={className}>
<div className={clsx('flex flex-row space-x-1 grow-0', className)}>
{new Array(size).fill(null).map((_, i) => (
<ScalePiece key={i} filled={value >= i * (max / size)} />
<div
key={i}
className={clsx('w-1 h-4', value >= i * (max / size) ? 'bg-emerald-400' : 'bg-gray-200')}
/>
))}
</div>
);
};
export const Description = tw.p`pr-5 text-sm leading-5 text-gray-500 dark:text-gray-300`;
export function Description({ className, children, ...props }: ComponentProps<'p'>): ReactElement {
return (
<p
className={clsx('pr-5 text-sm leading-5 text-gray-500 dark:text-gray-300', className)}
{...props}
>
{children}
</p>
);
}

1
packages/web/app/src/components/layouts/project.tsx
View file

@ -1,6 +1,5 @@
import { ReactElement, ReactNode, useEffect } from 'react';
import NextLink from 'next/link';
import 'twin.macro';
import { useQuery } from 'urql';
import { Button, Heading, Link, SubHeader, Tabs } from '@/components/v2';
import {

5
packages/web/app/src/components/organization/Creator.tsx
View file

@ -1,5 +1,4 @@
import React, { ChangeEventHandler, FormEventHandler } from 'react';
import 'twin.macro';
import { useMutation } from 'urql';
import { Description, Label } from '@/components/common';
import { CreateOrganizationDocument } from '@/graphql';
@ -68,7 +67,7 @@ export const OrganizationCreator: React.FC<{
<Description>
You will become an <Label>admin</Label> and don't worry, you can add members later.
</Description>
<div tw="pt-6 space-y-6">
<div className="pt-6 space-y-6">
<FormControl>
<FormLabel>Organization Name</FormLabel>
<Input
@ -82,7 +81,7 @@ export const OrganizationCreator: React.FC<{
</FormControl>
</div>
</ModalBody>
<ModalFooter tw="space-x-6">
<ModalFooter className="space-x-6">
<Button variant="ghost" type="button" disabled={fetching} onClick={onClose}>
Cancel
</Button>

11
packages/web/app/src/components/organization/Permissions.tsx
View file

@ -1,5 +1,4 @@
import React, { FormEventHandler } from 'react';
import 'twin.macro';
import { useMutation } from 'urql';
import {
MemberFieldsFragment,
@ -66,9 +65,9 @@ function PermissionsSpaceInner<
return (
<AccordionItem>
<AccordionButton tw="font-bold">{title}</AccordionButton>
<AccordionButton className="font-bold">{title}</AccordionButton>
<AccordionPanel pb={4}>
<div tw="divide-y-2 divide-gray-100">
<div className="divide-y-2 divide-gray-100">
{scopes.map(scope => {
const possibleScope = [scope.mapping['read-only'], scope.mapping['read-write']].filter(
isDefined,
@ -90,10 +89,10 @@ function PermissionsSpaceInner<
);
return (
<div tw="py-2 flex flex-row justify-between items-center" key={scope.name}>
<div className="py-2 flex flex-row justify-between items-center" key={scope.name}>
<div>
<div tw="font-semibold text-gray-600">{scope.name}</div>
<div tw="text-xs text-gray-600">{scope.description}</div>
<div className="font-semibold text-gray-600">{scope.name}</div>
<div className="text-xs text-gray-600">{scope.description}</div>
</div>
<div>
<Select

3
packages/web/app/src/components/organization/Switcher.tsx
View file

@ -1,6 +1,5 @@
import React from 'react';
import { VscAdd, VscChevronDown } from 'react-icons/vsc';
import 'twin.macro';
import { useQuery } from 'urql';
import { OrganizationsDocument, OrganizationsQuery, OrganizationType } from '@/graphql';
import { useRouteSelector } from '@/lib/hooks';
@ -79,7 +78,7 @@ export const OrganizationSwitcher: React.FC<{
as={Button}
rightIcon={<VscChevronDown />}
variant="ghost"
tw="font-normal"
className="font-normal"
>
{menu.currentOrganization.name}
</MenuButton>

5
packages/web/app/src/components/organization/Usage.tsx
View file

@ -1,5 +1,4 @@
import React from 'react';
import 'twin.macro';
import { useQuery } from 'urql';
import {
OrganizationFieldsFragment,
@ -30,7 +29,7 @@ export const OrganizationUsageEstimationView: React.FC<{
return (
<>
<div tw="top-7 right-4">
<div className="top-7 right-4">
<DataWrapper query={query}>
{result => (
<TableContainer>
@ -55,7 +54,7 @@ export const OrganizationUsageEstimationView: React.FC<{
value={result.data.usageEstimation.org.operations}
size={10}
max={organization.rateLimit.operations}
tw="justify-end"
className="justify-end"
/>
</Td>
</Tr>

1
packages/web/app/src/components/organization/billing/Billing.tsx
View file

@ -1,5 +1,4 @@
import React, { PropsWithChildren } from 'react';
import 'twin.macro';
import { useQuery } from 'urql';
import { DataWrapper } from '@/components/common/DataWrapper';
import {

2
packages/web/app/src/components/organization/billing/BillingPaymentMethod.tsx
View file

@ -25,7 +25,7 @@ export const BillingPaymentMethod = ({
<div className={clsx('flex flex-col gap-6', className)}>
<Heading>Payment Method</Heading>
<CardElement
className="flex-grow"
className="grow"
onChange={e => {
if (e.error || !e.complete) {
onValidationChange?.(false);

3
packages/web/app/src/components/project/Switcher.tsx
View file

@ -1,6 +1,5 @@
import React from 'react';
import { VscChevronDown } from 'react-icons/vsc';
import 'twin.macro';
import { useQuery } from 'urql';
import { ProjectsDocument } from '@/graphql';
import { useRouteSelector } from '@/lib/hooks';
@ -47,7 +46,7 @@ export const ProjectSwitcher: React.FC<{
as={Button}
rightIcon={<VscChevronDown />}
variant="ghost"
tw="font-normal"
className="font-normal"
>
{refinedData.currentProject.name}
</MenuButton>

2
packages/web/app/src/components/project/migration-toast.tsx
View file

@ -19,7 +19,7 @@ export function ProjectMigrationToast({ projectId, orgId }: { projectId: string;
href={`/${orgId}/${projectId}/view/settings`}
variant="link"
size="small"
className="shrink-1 mr-2 self-center text-sm font-medium text-gray-300"
className="mr-2 self-center text-sm font-medium text-gray-300"
>
Migrate
</Button>

2
packages/web/app/src/components/project/settings/external-composition.tsx
View file

@ -195,7 +195,7 @@ export const ExternalCompositionSettings = ({
return (
<Card>
<Heading className="mb-2 flex items-center justify-between gap-5">
<span className="flex-shrink-0">External Composition</span>
<span className="shrink-0">External Composition</span>
<div>
{isLoading ? (
<Spinner />

2
packages/web/app/src/components/project/settings/model-migration.tsx
View file

@ -197,7 +197,7 @@ export const ModelMigrationSettings = ({
<div className="flex gap-12 items-center">
<div>
<Heading className="mb-2 flex items-center justify-between gap-5">
<span className="flex-shrink-0">Upgrade Project</span>
<span className="shrink-0">Upgrade Project</span>
</Heading>
<p className="mb-3 font-light text-gray-300">
In a few months, access to the old schema registry model will be discontinued as we have

3
packages/web/app/src/components/target/Switcher.tsx
View file

@ -1,6 +1,5 @@
import React from 'react';
import { VscChevronDown } from 'react-icons/vsc';
import 'twin.macro';
import { useQuery } from 'urql';
import { TargetsDocument } from '@/graphql';
import { useRouteSelector } from '@/lib/hooks';
@ -40,7 +39,7 @@ export const TargetSwitcher: React.FC<{
as={Button}
rightIcon={<VscChevronDown />}
variant="ghost"
tw="font-normal"
className="font-normal"
>
{currentTarget.name}
</MenuButton>

6
packages/web/app/src/components/target/explorer/common.tsx
View file

@ -65,13 +65,13 @@ export function SchemaExplorerUsageStats(props: {
<div className="text-xl">
<VscPulse />
</div>
<div className="flex-grow">
<div className="grow">
<div className="text-center" title={`${props.usage.total} requests`}>
{formatNumber(props.usage.total)}
</div>
<div
title={`${percentage.toFixed(2)}% of all requests`}
className="relative mt-1 w-full overflow-hidden rounded bg-orange-500 bg-opacity-20"
className="relative mt-1 w-full overflow-hidden rounded bg-orange-500/20"
style={{
width: 50,
height: 5,
@ -243,7 +243,7 @@ export function GraphQLTypeCardListItem(
onClick={props.onClick}
className={clsx(
'flex flex-row items-center justify-between p-4 text-sm',
props.index % 2 ? '' : 'bg-gray-900 bg-opacity-50',
props.index % 2 ? '' : 'bg-gray-900/50',
props.className,
)}
>

6
packages/web/app/src/components/target/explorer/filter.tsx
View file

@ -98,7 +98,7 @@ export function SchemaExplorerFilter({
return (
<div className="flex flex-row items-center gap-12">
<div className="flex-grow">
<div className="grow">
<Autocomplete
placeholder="Search for a type"
defaultValue={typename ? { value: typename, label: typename } : null}
@ -111,7 +111,7 @@ export function SchemaExplorerFilter({
loading={query.fetching}
/>
</div>
<div className="flex-shrink-0">
<div className="shrink-0">
<RadixSelect
className="cursor-pointer rounded-md"
value={periodSelector.value}
@ -120,7 +120,7 @@ export function SchemaExplorerFilter({
options={periodSelector.options}
/>
</div>
<div className="flex-shrink-0">
<div className="shrink-0">
<div className="flex flex-row items-center gap-4">
<Switch checked={!collapsed} onCheckedChange={toggleCollapsed} />
<div>

2
packages/web/app/src/components/target/explorer/scalar-type.tsx
View file

@ -19,7 +19,7 @@ export function GraphQLScalarTypeComponent(props: {
return (
<GraphQLTypeCard name={props.type.name} kind="scalar">
<div className="flex flex-row gap-4 p-4">
<div className="flex-grow text-sm">
<div className="grow text-sm">
{typeof props.type.description === 'string' ? (
<Markdown content={props.type.description} />
) : null}

21
packages/web/app/src/components/target/operations/Filters.tsx
View file

@ -2,7 +2,6 @@ import React, { ComponentType } from 'react';
import { VscChevronDown, VscChromeClose } from 'react-icons/vsc';
import AutoSizer from 'react-virtualized-auto-sizer';
import { FixedSizeList, ListChildComponentProps } from 'react-window';
import 'twin.macro';
import { useQuery } from 'urql';
import { useDebouncedCallback } from 'use-debounce';
import { Spinner } from '@/components/common/Spinner';
@ -111,7 +110,7 @@ const OperationsFilter: React.FC<{
<DrawerHeader bgColor="gray.900">Filter by operation</DrawerHeader>
<DrawerCloseButton />
<DrawerBody bgColor="gray.900">
<div tw="flex flex-col h-full space-y-3">
<div className="flex flex-col h-full space-y-3">
<InputGroup>
<Input
pr="3rem"
@ -133,7 +132,7 @@ const OperationsFilter: React.FC<{
/>
</InputRightElement>
</InputGroup>
<div tw="flex flex-row justify-between items-center">
<div className="flex flex-row justify-between items-center">
<div>
<Button variant="link" size="xs" onClick={selectAll}>
All
@ -142,7 +141,7 @@ const OperationsFilter: React.FC<{
None
</Button>
</div>
<div tw="flex flex-row">
<div className="flex flex-row">
<Button variant="ghost" size="sm" onClick={selectAll}>
Reset
</Button>
@ -159,7 +158,7 @@ const OperationsFilter: React.FC<{
</Button>
</div>
</div>
<div tw="pl-1 flex-grow">
<div className="pl-1 grow">
<AutoSizer>
{({ height, width }) => (
<FixedSizeList
@ -241,13 +240,13 @@ const OperationRow: React.FC<{
}, [onSelect, operation.operationHash, selected]);
return (
<div style={style} tw="flex flex-row space-x-4 items-center">
<div style={style} className="flex flex-row space-x-4 items-center">
<Checkbox colorScheme="primary" isChecked={selected} onChange={change} />
<div tw="flex flex-grow flex-row items-center cursor-pointer">
<button tw="flex-grow overflow-ellipsis overflow-hidden whitespace-nowrap" onClick={change}>
<div className="flex grow flex-row items-center cursor-pointer">
<button className="grow text-ellipsis overflow-hidden whitespace-nowrap" onClick={change}>
{operation.name}
</button>
<button tw="width[75px] flex-shrink-0 text-right text-gray-500" onClick={change}>
<button className="w-[75px] shrink-0 text-right text-gray-500" onClick={change}>
{requests}
</button>
</div>
@ -274,7 +273,9 @@ export const OperationsFilterTrigger: React.FC<{
bgColor="whiteAlpha.50"
_hover={{ bgColor: 'whiteAlpha.100' }}
>
<span tw="font-normal">Operations ({selected?.length ? selected.length : 'all'})</span>
<span className="font-normal">
Operations ({selected?.length ? selected.length : 'all'})
</span>
</Button>
<OperationsFilterContainer
isOpen={isOpen}

36
packages/web/app/src/components/target/operations/List.tsx
View file

@ -1,4 +1,5 @@
import React, { PropsWithChildren } from 'react';
import clsx from 'clsx';
import {
VscChevronDown,
VscChevronLeft,
@ -6,7 +7,6 @@ import {
VscChevronUp,
VscWarning,
} from 'react-icons/vsc';
import 'twin.macro';
import { gql, useQuery } from 'urql';
import { useDebouncedCallback } from 'use-debounce';
import { Scale, Section } from '@/components/common';
@ -76,7 +76,7 @@ const Sortable = ({
direction="row"
align="center"
justify={align === 'center' ? 'center' : align === 'left' ? 'start' : 'end'}
tw="cursor-pointer"
className="cursor-pointer"
>
<span>{children}</span>
{isSorted ? isSortedDesc ? <VscChevronDown /> : <VscChevronUp /> : null}
@ -117,7 +117,7 @@ function GraphQLOperationBody({
}
if (data?.operationBodyByHash) {
return <GraphQLHighlight tw="pt-6" light code={data.operationBodyByHash} />;
return <GraphQLHighlight className="pt-6" light code={data.operationBodyByHash} />;
}
return null;
@ -141,8 +141,8 @@ const OperationRow: React.FC<{
return (
<>
<Tr>
<Td tw="font-medium truncate">
<div tw="flex flex-row">
<Td className="font-medium truncate">
<div className="flex flex-row">
<Button
as="a"
href="#"
@ -164,7 +164,7 @@ const OperationRow: React.FC<{
placement="right"
label="Anonymous operation detected. Naming your operations is a recommended practice"
>
<span tw="ml-1 text-yellow-500">
<span className="ml-1 text-yellow-500">
<VscWarning />
</span>
</Tooltip>
@ -172,7 +172,7 @@ const OperationRow: React.FC<{
</div>
</Td>
<Td textAlign="center">
<span tw="text-xs">{operation.kind}</span>
<span className="text-xs">{operation.kind}</span>
</Td>
<Td textAlign="center">{p90}</Td>
<Td textAlign="center">{p95}</Td>
@ -180,9 +180,9 @@ const OperationRow: React.FC<{
<Td textAlign="center">{failureRate}%</Td>
<Td textAlign="center">{count}</Td>
<Td textAlign="right">
<div tw="flex flex-row justify-end">
<div tw="mr-3">{percentage}%</div>
<Scale value={operation.percentage} size={10} max={100} tw="justify-end" />
<div className="flex flex-row justify-end">
<div className="mr-3">{percentage}%</div>
<Scale value={operation.percentage} size={10} max={100} className="justify-end" />
</div>
</Td>
</Tr>
@ -307,15 +307,17 @@ const OperationsTable: React.FC<{
return (
<div
className={className}
tw="transition-opacity ease-in-out duration-700 rounded-md p-5 ring-1 ring-gray-800 bg-gray-900/50"
className={clsx(
'transition-opacity ease-in-out duration-700 rounded-md p-5 ring-1 ring-gray-800 bg-gray-900/50',
className,
)}
>
<Section.Title>Operations</Section.Title>
<Section.Subtitle>List of all operations with their statistics</Section.Subtitle>
<Table tw="mt-6" variant="striped" colorScheme="gray" size="sm">
<Table className="mt-6" variant="striped" colorScheme="gray" size="sm">
<Thead>
<Tr>
<Th tw="truncate">Operation</Th>
<Th className="truncate">Operation</Th>
<Th textAlign="center">Kind</Th>
<Th onClick={p90Column.column.getToggleSortingHandler()}>
<Sortable
@ -390,7 +392,7 @@ const OperationsTable: React.FC<{
})}
</Tbody>
</Table>
<div tw="py-3 flex flex-row items-center justify-center space-x-2">
<div className="py-3 flex flex-row items-center justify-center space-x-2">
<Button
size="sm"
variant="ghost"
@ -409,7 +411,7 @@ const OperationsTable: React.FC<{
disabled={!tableInstance.getCanPreviousPage()}
icon={<VscChevronLeft />}
/>
<span tw="font-bold whitespace-nowrap text-sm">
<span className="font-bold whitespace-nowrap text-sm">
{tableInstance.getState().pagination.pageIndex + 1} / {tableInstance.getPageCount()}
</span>
<IconButton
@ -430,7 +432,7 @@ const OperationsTable: React.FC<{
>
Last
</Button>
<InputGroup variant="filled" tw="w-auto" size="sm">
<InputGroup variant="filled" className="w-auto" size="sm">
<InputLeftAddon>Go to</InputLeftAddon>
<Input
width="70px"

62
packages/web/app/src/components/target/operations/Stats.tsx
View file

@ -1,7 +1,7 @@
import React, { useCallback } from 'react';
import clsx from 'clsx';
import ReactECharts from 'echarts-for-react';
import AutoSizer from 'react-virtualized-auto-sizer';
import tw from 'twin.macro';
import { useQuery } from 'urql';
import { Section } from '@/components/common';
import {
@ -155,20 +155,20 @@ function useChartStyles() {
);
}
const Stats = {
Root: tw.div`text-center`,
Value: tw.h2`font-normal text-3xl text-gray-900 dark:text-white`,
Title: tw.p`text-sm leading-relaxed`,
const classes = {
root: clsx('text-center'),
value: clsx('font-normal text-3xl text-gray-900 dark:text-white'),
title: clsx('text-sm leading-relaxed'),
};
const RequestsStats: React.FC<{ requests?: number }> = ({ requests = 0 }) => {
const value = useFormattedNumber(requests);
return (
<Stats.Root>
<Stats.Value>{value}</Stats.Value>
<Stats.Title>Requests</Stats.Title>
</Stats.Root>
<div className={classes.root}>
<h2 className={classes.value}>{value}</h2>
<p className={classes.title}>Requests</p>
</div>
);
};
@ -176,10 +176,10 @@ const UniqueOperationsStats: React.FC<{ operations?: number }> = ({ operations =
const value = useFormattedNumber(operations);
return (
<Stats.Root>
<Stats.Value>{value}</Stats.Value>
<Stats.Title>Unique Operations</Stats.Title>
</Stats.Root>
<div className={classes.root}>
<h2 className={classes.value}>{value}</h2>
<p className={classes.title}>Unique Operations</p>
</div>
);
};
@ -187,10 +187,10 @@ const PercentileStats: React.FC<{ value?: number; title: string }> = ({ value, t
const formatted = useFormattedDuration(value);
return (
<Stats.Root>
<Stats.Value>{formatted}</Stats.Value>
<Stats.Title>{title}</Stats.Title>
</Stats.Root>
<div className={classes.root}>
<h2 className={classes.value}>{formatted}</h2>
<p className={classes.title}>{title}</p>
</div>
);
};
@ -206,10 +206,10 @@ const RPM: React.FC<{
window: new Date(period.to).getTime() - new Date(period.from).getTime(),
});
return (
<Stats.Root>
<Stats.Value>{throughput}</Stats.Value>
<Stats.Title>RPM</Stats.Title>
</Stats.Root>
<div className={classes.root}>
<h2 className={classes.value}>{throughput}</h2>
<p className={classes.title}>RPM</p>
</div>
);
};
@ -223,10 +223,10 @@ const SuccessRateStats: React.FC<{
: '-';
return (
<Stats.Root>
<Stats.Value tw="text-emerald-500 dark:text-emerald-500">{rate}</Stats.Value>
<Stats.Title>Success rate</Stats.Title>
</Stats.Root>
<div className={classes.root}>
<h2 className={clsx(classes.value, 'text-emerald-500 dark:text-emerald-500')}>{rate}</h2>
<p className={classes.title}>Success rate</p>
</div>
);
};
@ -237,10 +237,10 @@ const FailureRateStats: React.FC<{
const rate = requests || totalFailures ? `${toDecimal((totalFailures * 100) / requests)}%` : '-';
return (
<Stats.Root tw="pt-4">
<Stats.Value tw="text-red-500 dark:text-red-500">{rate}</Stats.Value>
<Stats.Title>Failure rate</Stats.Title>
</Stats.Root>
<div className={clsx(classes.root, 'pt-4')}>
<h2 className={clsx(classes.value, 'text-red-500 dark:text-red-500')}>{rate}</h2>
<p className={classes.title}>Failure rate</p>
</div>
);
};
@ -790,13 +790,13 @@ export const OperationsStats: React.FC<{
const operationsStats = query.data?.operationsStats;
return (
<section tw="text-gray-600 dark:text-gray-400 space-y-12 transition-opacity ease-in-out duration-700">
<section className="text-gray-600 dark:text-gray-400 space-y-12 transition-opacity ease-in-out duration-700">
<OperationsFallback isError={isError} refetch={refetch} isFetching={isFetching}>
<Grid
templateRows="repeat(2, 1fr)"
templateColumns="repeat(4, 1fr)"
gap={4}
tw="rounded-md p-5 ring-1 ring-gray-800 transition bg-gray-900/50"
className="rounded-md p-5 ring-1 ring-gray-800 transition bg-gray-900/50"
>
<GridItem>
<RequestsStats requests={operationsStats?.totalRequests} />

26
packages/web/app/src/components/v2/button.tsx
View file

@ -1,6 +1,6 @@
import { ComponentProps, forwardRef } from 'react';
import clsx from 'clsx';
import tw, { css } from 'twin.macro';
import { css } from '@emotion/react';
import * as Toolbar from '@radix-ui/react-toolbar';
type ButtonProps = Omit<ComponentProps<'button'>, 'size'> & {
@ -65,19 +65,19 @@ export const Button = forwardRef<any, ButtonProps>(
variant !== 'link' &&
'inline-flex items-center border border-transparent text-sm font-bold',
className,
rotate > 0 && 'radix-state-open:border-gray-800 radix-state-open:text-orange-600',
)}
css={
rotate > 0 &&
css`
&[data-state='open'] {
${tw`border-gray-800 text-orange-600`}
svg {
transform: rotate(${rotate}deg);
${tw`will-change-transform transition-transform`}
}
}
`
}
css={css`
&[data-state='open'] svg {
transform: rotate(${rotate}deg);
will-change: transform; /* will-change-transform */
/* transition-transform */
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
`}
{...props}
>
{children}

18
packages/web/app/src/components/v2/icon.tsx
View file

@ -1,6 +1,5 @@
import { FC, ReactElement } from 'react';
import clsx from 'clsx';
import 'twin.macro';
const DEFAULT_PATH_PROPS = {
strokeWidth: '2',
@ -119,11 +118,11 @@ export const UserPlusMinusIcon: FC<IconProps & { isPlus: boolean }> = ({ classNa
</svg>
);
export const MoreIcon: FC<IconProps> = props => (
export const MoreIcon: FC<IconProps> = ({ className, ...props }) => (
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
tw="w-6 h-6 stroke-current"
className={clsx('w-6 h-6 stroke-current', className)}
{...props}
>
<path
@ -330,11 +329,11 @@ export const LogOutIcon = ({ className }: IconProps): ReactElement => (
</svg>
);
export const LinkIcon: FC<IconProps> = props => (
export const LinkIcon: FC<IconProps> = ({ className, ...props }) => (
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
tw="w-6 h-6 stroke-current fill-none"
className={clsx('w-6 h-6 stroke-current fill-none', className)}
{...props}
>
<path
@ -375,8 +374,13 @@ export const XIcon: FC<IconProps> = ({ className }) => (
</svg>
);
export const LinkedInIcon: FC<IconProps> = props => (
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" tw="w-6 h-6 fill-current" {...props}>
export const LinkedInIcon: FC<IconProps> = ({ className, ...props }) => (
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
className={clsx('w-6 h-6 fill-current', className)}
{...props}
>
<path d="M16 8C19.3137 8 22 10.6863 22 14V21H18V14C18 12.8954 17.1046 12 16 12C14.8954 12 14 12.8954 14 14V21H10V14C10 10.6863 12.6863 8 16 8Z" />
<rect x={2} y={9} width={4} height={12} />
<path d="M4 6C5.10457 6 6 5.10457 6 4C6 2.89543 5.10457 2 4 2C2.89543 2 2 2.89543 2 4C2 5.10457 2.89543 6 4 6Z" />

2
packages/web/app/src/components/v2/input.tsx
View file

@ -42,7 +42,7 @@ export const Input = forwardRef<
{prefix}
<input
className="w-full bg-transparent placeholder-gray-500 disabled:cursor-not-allowed"
className="w-full bg-transparent placeholder:text-gray-500 disabled:cursor-not-allowed"
placeholder={placeholder}
type={type}
style={{ fontWeight: 'inherit' }}

45
packages/web/app/src/components/v2/markdown.tsx
View file

@ -1,29 +1,34 @@
import { ReactElement } from 'react';
import { sanitize } from 'dompurify';
import snarkdown from 'snarkdown';
import { css } from '@emotion/react';
const styles = css`
a {
color: #f4b740;
}
a:hover {
text-decoration: underline;
}
code {
color: #f4b740;
background-color: #fcfcfc1a;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
`;
export function Markdown(props: { content: string; className?: string }) {
export function Markdown({
content,
className,
}: {
content: string;
className?: string;
}): ReactElement {
return (
<div
className={props.className}
css={styles}
dangerouslySetInnerHTML={{ __html: sanitize(snarkdown(props.content)) }}
className={className}
css={css`
a {
color: #f4b740;
}
a:hover {
text-decoration: underline;
}
code {
color: #f4b740;
background-color: #fcfcfc1a;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
`}
dangerouslySetInnerHTML={{ __html: sanitize(snarkdown(content)) }}
/>
);
}

5
packages/web/app/src/components/v2/modal.tsx
View file

@ -1,9 +1,8 @@
import { PropsWithChildren, ReactElement } from 'react';
import clsx from 'clsx';
import { css } from 'twin.macro';
import { Button } from '@/components/v2';
import { XIcon } from '@/components/v2/icon';
import { keyframes } from '@emotion/react';
import { css, keyframes } from '@emotion/react';
import {
Close,
Content,
@ -74,9 +73,9 @@ const Modal = ({
widthBySize[size],
)}
css={css`
transform: translate(-50%, -50%);
box-shadow: hsl(206 22% 7% / 35%) 0 10px 38px -10px,
hsl(206 22% 7% / 20%) 0 10px 20px -15px;
transform: translate(-50%, -50%);
@media (prefers-reduced-motion: no-preference) {
animation: ${contentShow} 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

2
packages/web/app/src/components/v2/shine-background.tsx
View file

@ -3,7 +3,7 @@ import { ReactElement } from 'react';
export const ShineBackground = (): ReactElement => {
return (
<div
className="-z-1 absolute inset-0"
className="z-[-1] absolute inset-0"
style={{
background: `url(/images/bg-top-shine.png) no-repeat left top/468px 278px,
url(/images/bg-bottom-shine.png) no-repeat right bottom/330px 399px`,

2
packages/web/app/src/components/v2/sub-header.tsx
View file

@ -4,7 +4,7 @@ export const SubHeader = ({ children }: { children: ReactNode }): ReactElement =
return (
<header
className={`
after:-z-1
after:z-[-1]
relative
pt-20
after:absolute

41
packages/web/app/tailwind.config.js
View file

@ -1,15 +1,9 @@
const colors = require('tailwindcss/colors');
const plugin = require('tailwindcss/plugin');
module.exports = {
darkMode: 'class',
mode: 'jit', // remove in v3
purge: ['./{pages,src}/**/*.ts{,x}'], // rename to content in v3
content: ['./{pages,src}/**/*.ts{,x}'],
theme: {
fontFamily: {
// to use `font-sans` class
sans: ['Inter', 'ui-sans-serif', 'system-ui'],
},
container: {
center: true,
},
@ -18,11 +12,7 @@ module.exports = {
current: 'currentColor',
white: '#fcfcfc',
black: '#0b0d11',
// gray: colors.gray,
// red: colors.red,
// yellow: colors.yellow,
emerald: colors.emerald,
red: {
50: '#fef5f5',
100: '#fdeaeb',
@ -88,8 +78,8 @@ module.exports = {
},
},
extend: {
zIndex: {
'-1': -1,
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui'],
},
ringColor: theme => ({
DEFAULT: theme('colors.orange.500'),
@ -98,31 +88,6 @@ module.exports = {
},
},
plugins: [
plugin(({ addUtilities }) => {
addUtilities({
'.drag-none': {
'-webkit-user-drag': 'none',
},
'.fill-none': {
fill: 'none',
},
'.will-change-transform': {
willChange: 'transform', // exist in tailwind v3, remove after upgrade
},
'.grow': {
flexGrow: 1, // exist in v3
},
'.grow-0': {
flexGrow: 0, // exist in v3
},
'.shrink-0': {
flexShrink: 0, // exist in v3
},
'.text-ellipsis': {
textOverflow: 'ellipsis', // exist in v3
},
});
}),
// Utilities for visually truncating text after a fixed number of lines
require('@tailwindcss/line-clamp'),
// Utilities and variants for styling Radix state

2
packages/web/app/tsconfig.json
View file

@ -17,6 +17,6 @@
"jsxImportSource": "@emotion/react",
"incremental": true
},
"include": ["next-env.d.ts", "modules.d.ts", "twin.d.ts", "src", "pages", "environment.ts"],
"include": ["next-env.d.ts", "modules.d.ts", "src", "pages", "environment.ts"],
"exclude": ["node_modules"]
}

8
packages/web/app/twin.d.ts vendored
View file

@ -1,8 +0,0 @@
// twin.d.ts
import { css as cssImport, styled as styledImport } from 'twin.macro';
declare module 'twin.macro' {
// The styled and css imports
const styled: typeof styledImport;
const css: typeof cssImport;
}

2
packages/web/landing-page/next.config.js
View file

@ -1,4 +1,4 @@
/* eslint-disable no-undef, no-process-env */
/* eslint-disable no-process-env */
export default {
basePath: process.env.NEXT_BASE_PATH,
poweredByHeader: false,

13
packages/web/landing-page/src/pages/index.tsx
View file

@ -43,7 +43,7 @@ const CookiesConsent = (): ReactElement => {
<p>This website uses cookies to analyze site usage and improve your experience.</p>
<p>If you continue to use our services, you are agreeing to the use of such cookies.</p>
</div>
<div className="flex flex-shrink-0 items-center gap-4 lg:pr-24">
<div className="flex shrink-0 items-center gap-4 lg:pr-24">
<a
href="https://the-guild.dev/graphql/hive/privacy-policy.pdf"
className="whitespace-nowrap text-yellow-600 hover:underline"
@ -103,8 +103,9 @@ function Hero() {
<a
href="https://app.graphql-hive.com"
className={clsx(
'inline-block rounded-lg bg-yellow-500 px-6 py-3 font-medium text-white shadow-sm hover:bg-opacity-75',
'dark:bg-yellow-600 dark:hover:bg-yellow-500 dark:hover:bg-opacity-100',
'inline-block rounded-lg px-6 py-3 font-medium text-white shadow-sm',
'bg-yellow-500 hover:bg-yellow-500/75',
'dark:bg-yellow-600 dark:hover:bg-yellow-500/100',
)}
>
Sign up for free
@ -148,7 +149,7 @@ function Feature(props: {
flipped ? 'md:flex-row-reverse' : 'md:flex-row',
)}
>
<div className="flex w-full flex-shrink-0 flex-col gap-4 md:w-2/5 lg:w-1/3">
<div className="flex w-full shrink-0 flex-col gap-4 md:w-2/5 lg:w-1/3">
<h2
className="bg-clip-text text-5xl font-semibold leading-normal text-transparent dark:text-transparent"
style={{ backgroundImage: `linear-gradient(-70deg, ${end}, ${start})` }}
@ -158,7 +159,7 @@ function Feature(props: {
<div className="text-lg leading-7 text-gray-600 dark:text-gray-400">{description}</div>
</div>
<div
className="relative flex flex-grow flex-col items-center justify-center overflow-hidden rounded-3xl p-8"
className="relative flex grow flex-col items-center justify-center overflow-hidden rounded-3xl p-8"
style={{ backgroundImage: `linear-gradient(70deg, ${start}, ${end})` }}
>
<Image {...image} className="rounded-2xl" alt={title} />
@ -168,7 +169,7 @@ function Feature(props: {
<div className="flex flex-col justify-between gap-12 md:flex-row">
{highlights.map(({ title, description, icon }) => (
<div className={classes.root} key={title}>
<div className="h-16 w-16 flex-shrink-0 text-yellow-500">{icon}</div>
<div className="h-16 w-16 shrink-0 text-yellow-500">{icon}</div>
<div className={classes.content}>
<h3 className={classes.title}>{title}</h3>
<p className={classes.description}>{description}</p>

6
packages/web/landing-page/src/pricing.tsx
View file

@ -62,7 +62,7 @@ export function Pricing({ gradient }: { gradient: [string, string] }): ReactElem
<div className="w-full bg-neutral-900">
<div className="mx-auto my-12 box-border w-full max-w-[1024px] px-6">
<h2
className="bg-clip-text text-2xl font-bold leading-normal text-white text-transparent dark:text-transparent md:text-3xl"
className="bg-clip-text text-2xl font-bold leading-normal text-transparent md:text-3xl"
style={{
backgroundImage: `linear-gradient(-70deg, ${gradient[1]}, ${gradient[0]})`,
}}
@ -109,9 +109,7 @@ export function Pricing({ gradient }: { gradient: [string, string] }): ReactElem
<span
className="cursor-pointer"
onClick={() => {
if (typeof window !== 'undefined') {
(window as any).$crisp?.push(['do', 'chat:open']);
}
(window as any).$crisp?.push(['do', 'chat:open']);
}}
>
Contact us

295
pnpm-lock.yaml
View file

@ -8,9 +8,6 @@ patchedDependencies:
'@tgriesser/schemats@7.0.1':
hash: u3kbucfchakklx3sci2vh6wjau
path: patches/@tgriesser__schemats@7.0.1.patch
'@theguild/buddy@0.1.0':
hash: ryylgra5xglhidfoiaxehn22hq
path: patches/@theguild__buddy@0.1.0.patch
'@oclif/core@1.23.0':
hash: zhte2hlj7lfobytjpalcwwo474
path: patches/@oclif__core@1.23.0.patch
@ -20,9 +17,6 @@ patchedDependencies:
bullmq@3.6.5:
hash: xbmkiyyfti7h6orsfs6pdmi4s4
path: patches/bullmq@3.6.5.patch
slonik@30.1.2:
hash: wg2hxbo7txnklmvja4aeqnygfi
path: patches/slonik@30.1.2.patch
mjml-core@4.13.0:
hash: zxxsxbqejjmcwuzpigutzzq6wa
path: patches/mjml-core@4.13.0.patch
@ -32,6 +26,12 @@ patchedDependencies:
'@graphql-inspector/core@3.5.0':
hash: wf35oaq7brzyeva5aoncxac66a
path: patches/@graphql-inspector__core@3.5.0.patch
'@theguild/buddy@0.1.0':
hash: ryylgra5xglhidfoiaxehn22hq
path: patches/@theguild__buddy@0.1.0.patch
slonik@30.1.2:
hash: wg2hxbo7txnklmvja4aeqnygfi
path: patches/slonik@30.1.2.patch
importers:
@ -1069,7 +1069,6 @@ importers:
tailwindcss: 3.2.6
tailwindcss-radix: 2.7.0
tslib: 2.5.0
twin.macro: 2.8.2
urql: 3.0.3
use-debounce: 9.0.3
valtio: 1.10.1
@ -1147,7 +1146,6 @@ importers:
tailwindcss: 3.2.6_postcss@8.4.21
tailwindcss-radix: 2.7.0
tslib: 2.5.0
twin.macro: 2.8.2
urql: 3.0.3_onqnqwb3ubg5opvemcqf7c2qhy
use-debounce: 9.0.3_react@18.2.0
valtio: 1.10.1_react@18.2.0
@ -3225,14 +3223,6 @@ packages:
chalk: 2.4.2
js-tokens: 4.0.0
/@babel/parser/7.19.4:
resolution: {integrity: sha512-qpVT7gtuOLjWeDTKLkJ6sryqLliBaFpAtGeqw5cs5giLldvh+Ch0plqnUMKoVAUS6ZEueQQiZV+p5pxtPitEsA==}
engines: {node: '>=6.0.0'}
hasBin: true
dependencies:
'@babel/types': 7.20.7
dev: false
/@babel/parser/7.20.13:
resolution: {integrity: sha512-gFDLKMfpiXCsjt4za2JA9oTMn70CeseCehb11kRZgvd7+F67Hih3OHOK24cRrWECJ/ljfPGac6ygXAs/C8kIvw==}
engines: {node: '>=6.0.0'}
@ -3577,15 +3567,6 @@ packages:
dependencies:
regenerator-runtime: 0.13.11
/@babel/template/7.18.10:
resolution: {integrity: sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==}
engines: {node: '>=6.9.0'}
dependencies:
'@babel/code-frame': 7.18.6
'@babel/parser': 7.20.13
'@babel/types': 7.20.7
dev: false
/@babel/template/7.20.7:
resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==}
engines: {node: '>=6.9.0'}
@ -12175,6 +12156,7 @@ packages:
picocolors: 1.0.0
postcss: 8.4.21
postcss-value-parser: 4.2.0
dev: true
/available-typed-arrays/1.0.5:
resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
@ -12258,14 +12240,6 @@ packages:
resolution: {integrity: sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==}
dev: true
/babel-plugin-macros/2.8.0:
resolution: {integrity: sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==}
dependencies:
'@babel/runtime': 7.20.7
cosmiconfig: 6.0.0
resolve: 1.22.1
dev: false
/babel-plugin-macros/3.1.0:
resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
engines: {node: '>=10', npm: '>=6'}
@ -12486,6 +12460,7 @@ packages:
electron-to-chromium: 1.4.281
node-releases: 2.0.6
update-browserslist-db: 1.0.10_browserslist@4.21.4
dev: true
/bser/2.1.1:
resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
@ -13017,10 +12992,6 @@ packages:
escape-string-regexp: 1.0.5
dev: true
/clean-set/1.1.2:
resolution: {integrity: sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==}
dev: false
/clean-stack/2.2.0:
resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
engines: {node: '>=6'}
@ -13226,33 +13197,11 @@ packages:
/color-name/1.1.4:
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
/color-string/1.9.1:
resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
dependencies:
color-name: 1.1.4
simple-swizzle: 0.2.2
dev: false
/color-support/1.1.3:
resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
hasBin: true
dev: true
/color/3.2.1:
resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==}
dependencies:
color-convert: 1.9.3
color-string: 1.9.1
dev: false
/color/4.2.3:
resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
engines: {node: '>=12.5.0'}
dependencies:
color-convert: 2.0.1
color-string: 1.9.1
dev: false
/color2k/2.0.2:
resolution: {integrity: sha512-kJhwH5nAwb34tmyuqq/lgjEKzlFXn1U99NlnB6Ws4qVaERcRUYeYP1cBw6BJ4vxaWStAUEef4WMr7WjOCnBt8w==}
dev: false
@ -13515,17 +13464,6 @@ packages:
typescript: 4.9.5
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.0.1:
resolution: {integrity: sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==}
engines: {node: '>=10'}
@ -13622,10 +13560,6 @@ packages:
tiny-invariant: 1.3.1
dev: false
/css-color-names/0.0.4:
resolution: {integrity: sha512-zj5D7X1U2h2zsXOAM8EyUREBnnts6H+Jm+d1M2DbiQQcUtnqgQsMrdo8JW9R80YFUmIdBZeMu5wvYM7hcgWP/Q==}
dev: false
/css-declaration-sorter/6.3.1_postcss@8.4.21:
resolution: {integrity: sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==}
engines: {node: ^10 || ^12 || >=14}
@ -13652,10 +13586,6 @@ packages:
source-map: 0.6.1
dev: true
/css-unit-converter/1.1.2:
resolution: {integrity: sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==}
dev: false
/css-what/6.1.0:
resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
engines: {node: '>= 6'}
@ -14457,11 +14387,6 @@ packages:
engines: {node: '>=10'}
dev: true
/dset/2.1.0:
resolution: {integrity: sha512-hlQYwNEdW7Qf8zxysy+yN1E8C/SxRst3Z9n+IvXOR35D9bPVwNHhnL8ZBeoZjvinuGrlvGg6pAMDwhmjqFDgjA==}
engines: {node: '>=4'}
dev: false
/dset/3.1.2:
resolution: {integrity: sha512-g/M9sqy3oHe477Ar4voQxWtaPIFw1jTdKZuomOjhCcBx9nHUNn0pu6NopuFFrTh/TRZIKEj+76vLWFu9BNKk+Q==}
engines: {node: '>=4'}
@ -14533,6 +14458,7 @@ packages:
/electron-to-chromium/1.4.281:
resolution: {integrity: sha512-yer0w5wCYdFoZytfmbNhwiGI/3cW06+RV7E23ln4490DVMxs7PvYpbsrSmAiBn/V6gode8wvJlST2YfWgvzWIg==}
dev: true
/emittery/0.8.1:
resolution: {integrity: sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==}
@ -16067,6 +15993,7 @@ packages:
/fraction.js/4.2.0:
resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
dev: true
/framer-motion/9.0.2_biqbaboplfbrettd7655fr4n2y:
resolution: {integrity: sha512-n7ZdIUBrT1xklowQNRQ6/h54+3ysmz422CP0rrhjE1X2tshiJy0WWQ7tv6y/fcOSQd23htNA9vvbUFLYMQ5lEQ==}
@ -16102,15 +16029,6 @@ packages:
resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
dev: false
/fs-extra/10.1.0:
resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
engines: {node: '>=12'}
dependencies:
graceful-fs: 4.2.10
jsonfile: 6.1.0
universalify: 2.0.0
dev: false
/fs-extra/11.1.0:
resolution: {integrity: sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==}
engines: {node: '>=14.14'}
@ -16997,10 +16915,6 @@ packages:
readable-stream: 3.6.0
dev: true
/hex-color-regex/1.1.0:
resolution: {integrity: sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==}
dev: false
/hey-listen/1.0.8:
resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
dev: false
@ -17021,14 +16935,6 @@ packages:
lru-cache: 6.0.0
dev: true
/hsl-regex/1.0.0:
resolution: {integrity: sha512-M5ezZw4LzXbBKMruP+BNANf0k+19hDQMgpzBIYnya//Al+fjNct9Wf3b1WedLqdEs2hKBvxq/jh+DsHJLj0F9A==}
dev: false
/hsla-regex/1.0.0:
resolution: {integrity: sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==}
dev: false
/htm/3.1.1:
resolution: {integrity: sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==}
dev: false
@ -17047,11 +16953,6 @@ packages:
uglify-js: 3.17.3
dev: false
/html-tags/3.2.0:
resolution: {integrity: sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==}
engines: {node: '>=8'}
dev: false
/html-tokenize/2.0.1:
resolution: {integrity: sha512-QY6S+hZ0f5m1WT8WffYN+Hg+xm/w5I8XeUcAq/ZYP5wVC8xbKi4Whhru3FtrAebD5EhBW8rmFzkDI6eCAuFe2w==}
hasBin: true
@ -17449,10 +17350,6 @@ packages:
/is-arrayish/0.2.1:
resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
/is-arrayish/0.3.2:
resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
dev: false
/is-bigint/1.0.4:
resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
dependencies:
@ -17493,17 +17390,6 @@ packages:
ci-info: 3.7.0
dev: true
/is-color-stop/1.1.0:
resolution: {integrity: sha512-H1U8Vz0cfXNujrJzEcvvwMDW9Ra+biSYA3ThdQvAnMLJkEHQXn6bWzLkxHtVYJ+Sdbx0b6finn3jZiaVe7MAHA==}
dependencies:
css-color-names: 0.0.4
hex-color-regex: 1.1.0
hsl-regex: 1.0.0
hsla-regex: 1.0.0
rgb-regex: 1.0.1
rgba-regex: 1.0.0
dev: false
/is-core-module/2.11.0:
resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
dependencies:
@ -18459,10 +18345,6 @@ packages:
/lodash.defaults/4.2.0:
resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
/lodash.flatmap/4.5.0:
resolution: {integrity: sha512-/OcpcAGWlrZyoHGeHh3cAoa6nGdX6QYtmzNP84Jqol6UEQQ2gIaU3H+0eICcjcKGl0/XF8LWOujNn9lffsnaOg==}
dev: false
/lodash.get/4.4.2:
resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
@ -18499,6 +18381,7 @@ packages:
/lodash.merge/4.6.2:
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
dev: true
/lodash.mergewith/4.6.2:
resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
@ -18518,10 +18401,6 @@ packages:
resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==}
dev: false
/lodash.topath/4.5.2:
resolution: {integrity: sha512-1/W4dM+35DwvE/iEd1M9ekewOSTlpFekhw9mhAtrwjVqUr83/ilQiyAvmg4tVX7Unkcfl1KC+i9WdaT4B6aQcg==}
dev: false
/lodash.uniq/4.5.0:
resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
dev: true
@ -20000,11 +19879,6 @@ packages:
ufo: 1.0.1
dev: true
/modern-normalize/1.1.0:
resolution: {integrity: sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==}
engines: {node: '>=6'}
dev: false
/module-details-from-path/1.0.3:
resolution: {integrity: sha512-ySViT69/76t8VhE1xXHK6Ch4NcDd26gx0MzKXLO+F7NOtnqH68d9zF94nT8ZWSxXh8ELOERsnJO/sWt1xZYw5A==}
dev: false
@ -20355,12 +20229,6 @@ packages:
resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
engines: {node: '>=10.5.0'}
/node-emoji/1.11.0:
resolution: {integrity: sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==}
dependencies:
lodash: 4.17.21
dev: false
/node-fetch/2.6.7:
resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
engines: {node: 4.x || >=6.0.0}
@ -20404,6 +20272,7 @@ packages:
/node-releases/2.0.6:
resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==}
dev: true
/nodemailer-fetch/1.6.0:
resolution: {integrity: sha512-P7S5CEVGAmDrrpn351aXOLYs1R/7fD5NamfMCHyi6WIkbjS2eeZUB/TkuvpOQr0bvRZicVqo59+8wbhR3yrJbQ==}
@ -20478,6 +20347,7 @@ packages:
/normalize-range/0.1.2:
resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
engines: {node: '>=0.10.0'}
dev: true
/normalize-url/6.1.0:
resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
@ -20618,11 +20488,6 @@ packages:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
engines: {node: '>=0.10.0'}
/object-hash/2.2.0:
resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
engines: {node: '>= 6'}
dev: false
/object-hash/3.0.0:
resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
engines: {node: '>= 6'}
@ -21508,14 +21373,6 @@ packages:
resolve: 1.22.1
dev: true
/postcss-js/3.0.3:
resolution: {integrity: sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==}
engines: {node: '>=10.0'}
dependencies:
camelcase-css: 2.0.1
postcss: 8.4.21
dev: false
/postcss-js/4.0.0:
resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
engines: {node: ^12 || ^14 || >= 16}
@ -21651,16 +21508,6 @@ packages:
postcss-selector-parser: 6.0.11
dev: true
/postcss-nested/5.0.6_postcss@8.4.21:
resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
engines: {node: '>=12.0'}
peerDependencies:
postcss: ^8.2.14
dependencies:
postcss: 8.4.21
postcss-selector-parser: 6.0.11
dev: false
/postcss-nested/6.0.0:
resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
engines: {node: '>=12.0'}
@ -21830,10 +21677,6 @@ packages:
postcss-selector-parser: 6.0.11
dev: true
/postcss-value-parser/3.3.1:
resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
dev: false
/postcss-value-parser/4.2.0:
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
@ -22023,11 +21866,6 @@ packages:
react-is: 18.2.0
dev: false
/pretty-hrtime/1.0.3:
resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==}
engines: {node: '>= 0.8'}
dev: false
/pretty-ms/7.0.1:
resolution: {integrity: sha512-973driJZvxiGOQ5ONsFhOF/DtzPMOMtgC11kCpUrPGMTgqp2q/1gwzCquocrN33is0VZ5GFHXZYMM9l6h67v2Q==}
engines: {node: '>=10'}
@ -22171,16 +22009,6 @@ packages:
resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
engines: {node: '>=6'}
/purgecss/4.1.3:
resolution: {integrity: sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==}
hasBin: true
dependencies:
commander: 8.3.0
glob: 7.2.3
postcss: 8.4.21
postcss-selector-parser: 6.0.11
dev: false
/pvtsutils/1.3.2:
resolution: {integrity: sha512-+Ipe2iNUyrZz+8K/2IOo+kKikdtfhRKzNpQbruF2URmqPtoqAs8g3xS7TJvFF2GcPXjh7DkqMnpVveRFq4PgEQ==}
dependencies:
@ -22681,13 +22509,6 @@ packages:
dependencies:
redis-errors: 1.2.0
/reduce-css-calc/2.1.8:
resolution: {integrity: sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==}
dependencies:
css-unit-converter: 1.1.2
postcss-value-parser: 3.3.1
dev: false
/reflect-metadata/0.1.13:
resolution: {integrity: sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==}
dev: false
@ -22966,14 +22787,6 @@ packages:
/rfdc/1.3.0:
resolution: {integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==}
/rgb-regex/1.0.1:
resolution: {integrity: sha512-gDK5mkALDFER2YLqH6imYvK6g02gpNGM4ILDZ472EwWfXZnC2ZEpoB2ECXTyOVUKuk/bPJZMzwQPBYICzP+D3w==}
dev: false
/rgba-regex/1.0.0:
resolution: {integrity: sha512-zgn5OjNQXLUTdq8m17KdaicF6w89TZs8ZU8y0AYENIU6wG8GG6LLm0yLSiPY8DmaYmHdgRW8rnApjoT0fQRfMg==}
dev: false
/rimraf/2.7.1:
resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
hasBin: true
@ -22986,6 +22799,7 @@ packages:
hasBin: true
dependencies:
glob: 7.2.3
dev: true
/rimraf/4.1.2:
resolution: {integrity: sha512-BlIbgFryTbw3Dz6hyoWFhKk+unCcHMSkZGrTFVAx2WmttdBSonsdtRlwiuTbDqTKr+UlXIUqJVS4QT5tUzGENQ==}
@ -23333,12 +23147,6 @@ packages:
resolution: {integrity: sha512-6+eerH9fEnNmi/hyM1DXcRK3pWdoMQtlkQ+ns0ntzunjKqp5i3sKCc80ym8Fib3iaYhdJUOPdhlJWj1tvge2Ww==}
dev: true
/simple-swizzle/0.2.2:
resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
dependencies:
is-arrayish: 0.3.2
dev: false
/sirv/1.0.19:
resolution: {integrity: sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==}
engines: {node: '>= 10'}
@ -24110,52 +23918,6 @@ packages:
resolution: {integrity: sha512-fIVkT5zQYdsjT9+/Mvp+DTlJDdTFpRDuyS5+PLuJDAIIVr9+rWYKhK6rsB9QtjwUwwb0YF+BkAJN6CjZivOfLA==}
dev: false
/tailwindcss/2.2.19_gbtt6ss3tbiz4yjtvdr6fbrj44:
resolution: {integrity: sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==}
engines: {node: '>=12.13.0'}
hasBin: true
peerDependencies:
autoprefixer: ^10.0.2
postcss: ^8.0.9
dependencies:
arg: 5.0.2
autoprefixer: 10.4.13_postcss@8.4.21
bytes: 3.1.2
chalk: 4.1.2
chokidar: 3.5.3
color: 4.2.3
cosmiconfig: 7.0.1
detective: 5.2.1
didyoumean: 1.2.2
dlv: 1.1.3
fast-glob: 3.2.12
fs-extra: 10.1.0
glob-parent: 6.0.2
html-tags: 3.2.0
is-color-stop: 1.1.0
is-glob: 4.0.3
lodash: 4.17.21
lodash.topath: 4.5.2
modern-normalize: 1.1.0
node-emoji: 1.11.0
normalize-path: 3.0.0
object-hash: 2.2.0
postcss: 8.4.21
postcss-js: 3.0.3
postcss-load-config: 3.1.4_postcss@8.4.21
postcss-nested: 5.0.6_postcss@8.4.21
postcss-selector-parser: 6.0.11
postcss-value-parser: 4.2.0
pretty-hrtime: 1.0.3
purgecss: 4.1.3
quick-lru: 5.1.1
reduce-css-calc: 2.1.8
resolve: 1.22.1
tmp: 0.2.1
transitivePeerDependencies:
- ts-node
dev: false
/tailwindcss/3.2.6:
resolution: {integrity: sha512-BfgQWZrtqowOQMC2bwaSNe7xcIjdDEgixWGYOd6AL0CbKHJlvhfdbINeAW76l1sO+1ov/MJ93ODJ9yluRituIw==}
engines: {node: '>=12.13.0'}
@ -24336,10 +24098,6 @@ packages:
readable-stream: 3.6.0
dev: false
/timsort/0.3.0:
resolution: {integrity: sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==}
dev: false
/tiny-glob/0.2.9:
resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
dependencies:
@ -24405,6 +24163,7 @@ packages:
engines: {node: '>=8.17.0'}
dependencies:
rimraf: 3.0.2
dev: true
/to-fast-properties/2.0.0:
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
@ -24792,29 +24551,6 @@ packages:
- supports-color
dev: false
/twin.macro/2.8.2:
resolution: {integrity: sha512-2Vg09mp+nA70AWUedJ8WRgB2me3buq7JGbOnjHnFnNaBzomVu5k7lJ9YGpByIlre+UYr7QRhtlj7+IUKxvCrUA==}
engines: {node: '>=12.13.0'}
dependencies:
'@babel/parser': 7.19.4
'@babel/template': 7.18.10
autoprefixer: 10.4.13_postcss@8.4.21
babel-plugin-macros: 2.8.0
chalk: 4.1.2
clean-set: 1.1.2
color: 3.2.1
dset: 2.1.0
lodash.flatmap: 4.5.0
lodash.get: 4.4.2
lodash.merge: 4.6.2
postcss: 8.4.21
string-similarity: 4.0.4
tailwindcss: 2.2.19_gbtt6ss3tbiz4yjtvdr6fbrj44
timsort: 0.3.0
transitivePeerDependencies:
- ts-node
dev: false
/type-check/0.4.0:
resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
engines: {node: '>= 0.8.0'}
@ -25110,6 +24846,7 @@ packages:
browserslist: 4.21.4
escalade: 3.1.1
picocolors: 1.0.0
dev: true
/upper-case-first/2.0.2:
resolution: {integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==}

2
scripts/seed-local-env.js
View file

@ -67,7 +67,7 @@ async function main() {
() => {
for (let i = 0; i < operationsPerBatch; i++) {
const randNumber = Math.random() * 100;
console.log(`Reporting usage query...`);
console.log('Reporting usage query...');
const done = hiveInstance.collectUsage({
document: randNumber > 50 ? query1 : query2,