Skip to content

Commit f28179b

Browse files
dstaleydstaley
authored
test(e2e): Add tests for custom flows APIs (#6700)
1 parent d0fe6ca commit f28179b

File tree

31 files changed

+1329
-11
lines changed

31 files changed

+1329
-11
lines changed

‎.changeset/gold-snails-care.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@clerk/clerk-react': patch
3+
---
4+
5+
[Experimental] Fix issue with property access for state proxy

‎.github/workflows/ci.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,8 @@ jobs:
293293
'nuxt',
294294
'react-router',
295295
'billing',
296-
'machine'
296+
'machine',
297+
'custom',
297298
]
298299
test-project: ['chrome']
299300
include:

‎integration/presets/custom-flows.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { constants } from '../constants';
2+
import { applicationConfig } from '../models/applicationConfig';
3+
import { templates } from '../templates';
4+
import { linkPackage } from './utils';
5+
6+
const reactVite = applicationConfig()
7+
.setName('custom-flows-react-vite')
8+
.useTemplate(templates['custom-flows-react-vite'])
9+
.setEnvFormatter('public', key => `VITE_${key}`)
10+
.addScript('setup', 'pnpm install')
11+
.addScript('dev', 'pnpm dev')
12+
.addScript('build', 'pnpm build')
13+
.addScript('serve', 'pnpm preview')
14+
.addDependency('@clerk/clerk-react', constants.E2E_CLERK_VERSION || linkPackage('react'))
15+
.addDependency('@clerk/themes', constants.E2E_CLERK_VERSION || linkPackage('themes'));
16+
17+
export const customFlows = {
18+
reactVite,
19+
} as const;

‎integration/presets/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { astro } from './astro';
2+
import { customFlows } from './custom-flows';
23
import { elements } from './elements';
34
import { envs, instanceKeys } from './envs';
45
import { expo } from './expo';
@@ -12,6 +13,7 @@ import { tanstack } from './tanstack';
1213
import { vue } from './vue';
1314

1415
export const appConfigs = {
16+
customFlows,
1517
envs,
1618
express,
1719
longRunningApps: createLongRunningApps(),

‎integration/templates/custom-flows-react-vite/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎integration/templates/custom-flows-react-vite/components.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "",
8+
"css": "src/index.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
},
20+
"iconLibrary": "lucide"
21+
}

‎integration/templates/custom-flows-react-vite/eslint.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import js from '@eslint/js';
2+
import globals from 'globals';
3+
import reactHooks from 'eslint-plugin-react-hooks';
4+
import reactRefresh from 'eslint-plugin-react-refresh';
5+
import tseslint from 'typescript-eslint';
6+
import { globalIgnores } from 'eslint/config';
7+
8+
export default tseslint.config([
9+
globalIgnores(['dist']),
10+
{
11+
files: ['**/*.{ts,tsx}'],
12+
extends: [
13+
js.configs.recommended,
14+
tseslint.configs.recommended,
15+
reactHooks.configs['recommended-latest'],
16+
reactRefresh.configs.vite,
17+
],
18+
languageOptions: {
19+
ecmaVersion: 2020,
20+
globals: globals.browser,
21+
},
22+
},
23+
]);

‎integration/templates/custom-flows-react-vite/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎integration/templates/custom-flows-react-vite/package.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "hooks-revamp-vite-react",
3+
"version": "0.0.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"build": "tsc -b && vite build",
8+
"dev": "vite --port $PORT --no-open",
9+
"lint": "eslint .",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"@radix-ui/react-label": "^2.1.7",
14+
"@radix-ui/react-slot": "^1.2.3",
15+
"@tailwindcss/vite": "^4.1.11",
16+
"class-variance-authority": "^0.7.1",
17+
"clsx": "^2.1.1",
18+
"lucide-react": "^0.539.0",
19+
"react": "^19.1.1",
20+
"react-dom": "^19.1.1",
21+
"react-router": "^7.8.1",
22+
"tailwind-merge": "^3.3.1",
23+
"tailwindcss": "^4.1.11"
24+
},
25+
"devDependencies": {
26+
"@eslint/js": "^9.30.1",
27+
"@types/node": "^24.2.1",
28+
"@types/react": "^19.1.8",
29+
"@types/react-dom": "^19.1.6",
30+
"@vitejs/plugin-react": "^4.6.0",
31+
"eslint": "^9.30.1",
32+
"eslint-plugin-react-hooks": "^5.2.0",
33+
"eslint-plugin-react-refresh": "^0.4.20",
34+
"globals": "^16.3.0",
35+
"tw-animate-css": "^1.3.6",
36+
"typescript": "~5.8.3",
37+
"typescript-eslint": "^8.35.1",
38+
"vite": "^7.0.4"
39+
}
40+
}

‎integration/templates/custom-flows-react-vite/src/components/ui/button.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import * as React from 'react';
2+
import { Slot } from '@radix-ui/react-slot';
3+
import { cva, type VariantProps } from 'class-variance-authority';
4+
5+
import { cn } from '@/lib/utils';
6+
7+
const buttonVariants = cva(
8+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
9+
{
10+
variants: {
11+
variant: {
12+
default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
13+
destructive:
14+
'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
15+
outline:
16+
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
17+
secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
18+
ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
19+
link: 'text-primary underline-offset-4 hover:underline',
20+
},
21+
size: {
22+
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
23+
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
24+
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
25+
icon: 'size-9',
26+
},
27+
},
28+
defaultVariants: {
29+
variant: 'default',
30+
size: 'default',
31+
},
32+
},
33+
);
34+
35+
function Button({
36+
className,
37+
variant,
38+
size,
39+
asChild = false,
40+
...props
41+
}: React.ComponentProps<'button'> &
42+
VariantProps<typeof buttonVariants> & {
43+
asChild?: boolean;
44+
}) {
45+
const Comp = asChild ? Slot : 'button';
46+
47+
return (
48+
<Comp
49+
data-slot='button'
50+
className={cn(buttonVariants({ variant, size, className }))}
51+
{...props}
52+
/>
53+
);
54+
}
55+
56+
export { Button, buttonVariants };

0 commit comments

Comments
 (0)