Merge pull request #13 from marsidev/path-setup

Path refactor

Author: marsidev

.eslintrc

@@ -6,14 +6,18 @@ on:
       - main
 
     paths-ignore:
+      - 'docs/**'
       - '**.md'
+      - '**.mdx'
 
   pull_request:
     branches:
       - main
 
     paths-ignore:
+     - 'docs/**'
       - '**.md'
+      - '**.mdx'
 
 jobs:
   lint:
@@ -37,12 +41,12 @@ jobs:
         run: nci
 
       - name: Build
-        run: nr build
+        run: nr lib:build
 
       - name: Lint
         run: nr lint
 
-  typecheck:
+  format:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -63,10 +67,36 @@ jobs:
         run: nci
 
       - name: Build
-        run: nr build
+        run: nr lib:build
 
-      - name: Typecheck
-        run: nr typecheck
+      - name: Format
+        run: nr format
+
+  type-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Set node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: pnpm
+
+      - name: Setup
+        run: npm i -g @antfu/ni
+
+      - name: Install
+        run: nci
+
+      - name: Build
+        run: nr lib:build
+
+      - name: Type check
+        run: nr type-check
 
   e2e-test:
     runs-on: ${{ matrix.os }}
@@ -99,7 +129,7 @@ jobs:
         run: npx playwright install --with-deps chromium webkit
 
       - name: Build
-        run: nr build
+        run: nr lib:build
 
       - name: Test
         run: npx playwright test

.github/workflows/ci.yml

@@ -0,0 +1,10 @@
+module.exports = {
+	semi: false,
+	useTabs: true,
+	singleQuote: true,
+	jsxSingleQuote: false,
+	trailingComma: 'none',
+	tabWidth: 2,
+	arrowParens: 'avoid',
+	printWidth: 100
+}

.prettierrc

@@ -1,6 +1,6 @@
 {
 	"eslint.packageManager": "pnpm",
-	"eslint.workingDirectories": ["./packages/example"],
+	"eslint.workingDirectories": ["./packages/lib", "./demos/nextjs"],
 	"editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },

.prettierrc.js

@@ -34,5 +34,3 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
-.vercel

.vscode/settings.json

@@ -0,0 +1,4 @@
+module.exports = {
+	...require('../../.prettierrc.js'),
+	plugins: [require('prettier-plugin-tailwindcss')]
+}

README.md

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "..\\..\\node_modules\\.pnpm\\[email protected]\\node_modules\\typescript\\lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

packages/example/.gitignore renamed to demos/nextjs/.gitignore

@@ -8,16 +8,20 @@ First, run the development server:
 npm run dev
 # or
 yarn dev
+# or
+pnpm dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
 [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
 
 The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

demos/nextjs/.prettierrc.js

@@ -0,0 +1,17 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+	experimental: {
+		appDir: true
+	},
+	async redirects() {
+		return [
+			{
+				source: '/',
+				destination: '/demo',
+				permanent: true
+			}
+		]
+	}
+}
+
+module.exports = nextConfig

demos/nextjs/.vscode/settings.json

@@ -0,0 +1,34 @@
+{
+	"name": "nextjs-demo",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "pnpm run --filter=@marsidev/react-turnstile build && next build",
+		"start": "next start",
+		"lint": "next lint",
+		"lint:fix": "next lint --fix",
+		"type-check": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@marsidev/react-turnstile": "workspace:*",
+		"classnames": "2.3.2",
+		"next": "13.2.4",
+		"react": "18.2.0",
+		"react-dom": "18.2.0"
+	},
+	"devDependencies": {
+		"autoprefixer": "10.4.13",
+		"eslint-config-custom": "workspace:*",
+		"eslint-config-next": "13.2.4",
+		"postcss": "8.4.21",
+		"prettier-plugin-tailwindcss": "0.2.4",
+		"tailwindcss": "3.2.7"
+	},
+	"eslintConfig": {
+		"extends": [
+			"next/core-web-vitals",
+			"custom"
+		]
+	}
+}

packages/example/README.md renamed to demos/nextjs/README.md

@@ -0,0 +1,32 @@
+import type { TurnstileServerValidationResponse } from '@marsidev/react-turnstile'
+
+const verifyEndpoint = 'https://challenges.cloudflare.com/turnstile/v0/siteverify'
+
+const responseHeaders = {
+	'content-type': 'application/json'
+}
+
+export async function POST(request: Request) {
+	const body = (await request.json()) as { token: string; secret: string }
+	const { token, secret } = body
+
+	const data = (await fetch(verifyEndpoint, {
+		method: 'POST',
+		body: `secret=${encodeURIComponent(secret)}&response=${encodeURIComponent(token)}`,
+		headers: {
+			'content-type': 'application/x-www-form-urlencoded'
+		}
+	}).then(res => res.json())) as TurnstileServerValidationResponse
+
+	if (!data.success) {
+		return new Response(JSON.stringify(data), {
+			status: 400,
+			headers: responseHeaders
+		})
+	}
+
+	return new Response(JSON.stringify(data), {
+		status: 200,
+		headers: responseHeaders
+	})
+}

demos/nextjs/next.config.js

@@ -0,0 +1,23 @@
+import '~/app/globals.css'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata = {
+	title: 'React Turnstile Demo',
+	description: 'React Turnstile Next.js 13 App Router Demo'
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+	return (
+		<html lang="en">
+			<body className={inter.className}>
+				<main className="flex min-h-screen w-full flex-col items-center justify-center bg-[#1d1f20] py-24">
+					<div className="flex w-full max-w-[740px] flex-col justify-center gap-2 p-4 text-white">
+						{children}
+					</div>
+				</main>
+			</body>
+		</html>
+	)
+}

demos/nextjs/package.json

@@ -0,0 +1,10 @@
+import Demo from '~/components/demo'
+
+export default function Page() {
+	return (
+		<>
+			<h1 className="mb-4 text-4xl font-semibold">React Turnstile Demo</h1>
+			<Demo />
+		</>
+	)
+}

packages/example/postcss.config.js renamed to demos/nextjs/postcss.config.js

@@ -1,7 +1,7 @@
 import { forwardRef, useState } from 'react'
-import { langOptions, siteKeyOptions, sizeOptions, themeOptions } from '../constants'
-import { SiteKeyType, WidgetSize } from '../types'
-import Options from './Options'
+import { langOptions, siteKeyOptions, sizeOptions, themeOptions } from '~/constants'
+import { SiteKeyType, WidgetSize } from '~/types'
+import Options from './options'
 
 interface FormProps {
 	onChangeTheme: (value: string) => void
@@ -33,35 +33,35 @@ const ConfigForm = forwardRef<HTMLFormElement, FormProps>((props, ref) => {
 	}
 
 	return (
-		<form ref={ref} className='text-left accent-[#f4a15d]'>
-			<div className='flex gap-16'>
+		<form ref={ref} className="text-left accent-[#f4a15d]">
+			<div className="flex gap-16">
 				<Options
-					name='theme'
+					name="theme"
 					options={[...themeOptions]}
-					title='Theme'
+					title="Theme"
 					onChange={props.onChangeTheme}
 				/>
 
-				<Options name='size' options={[...sizeOptions]} title='Size' onChange={onChangeSizeProxy} />
+				<Options name="size" options={[...sizeOptions]} title="Size" onChange={onChangeSizeProxy} />
 
 				<Options
-					helperUrl='https://developers.cloudflare.com/turnstile/frequently-asked-questions/#are-there-sitekeys-and-secret-keys-that-can-be-used-for-testing'
-					name='siteKey'
+					helperUrl="https://developers.cloudflare.com/turnstile/frequently-asked-questions/#are-there-sitekeys-and-secret-keys-that-can-be-used-for-testing"
+					name="siteKey"
 					options={siteKeyOptions.map(option => ({
 						...option,
 						// Option will be disabled when requesting interactive challenge on
 						// invisible widget type
 						disabled: option.value === 'interactive' && isInvisibleType
 					}))}
-					title='Demo Site Key Type'
+					title="Demo Site Key Type"
 					value={siteKeyType}
 					onChange={onChangeSiteKeyTypeProxy}
 				/>
 
 				<Options
-					name='lang'
+					name="lang"
 					options={[...langOptions]}
-					title='Language'
+					title="Language"
 					onChange={props.onChangeLang}
 				/>
 			</div>