Migrate landing page to app dir (#1587)

* app dir yay

* better docs route

* fix icon sizing

* mobile sidebars

* detect webgl in useEffect

* separate zxcvbn

packages/ui/src/forms/InputField.tsx

@@ -1,6 +1,3 @@
-import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core';
-import zxcvbnCommonPackage from '@zxcvbn-ts/language-common';
-import zxcvbnEnPackage from '@zxcvbn-ts/language-en';
 import clsx from 'clsx';
 import { forwardRef, useEffect, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -29,29 +26,48 @@ export interface PasswordInputProps extends UseFormFieldProps, Root.InputProps {
 }
 
 const PasswordStrengthMeter = (props: { password: string }) => {
+	const [zxcvbn, setZxcvbn] = useState<typeof import('./zxcvbn') | undefined>();
+
 	const [strength, setStrength] = useState<{ label: string; score: number }>();
-	const updateStrength = useDebouncedCallback(
-		() => setStrength(props.password ? getPasswordStrength(props.password) : undefined),
-		100
-	);
+	const updateStrength = useDebouncedCallback(() => {
+		if (!zxcvbn) return;
+
+		setStrength(props.password ? getPasswordStrength(props.password, zxcvbn) : undefined);
+	}, 100);
 
 	// TODO: Remove duplicate in @sd/client
-	function getPasswordStrength(password: string): { label: string; score: number } {
+	function getPasswordStrength(
+		password: string,
+		zxcvbn: typeof import('./zxcvbn')
+	): { label: string; score: number } {
 		const ratings = ['Poor', 'Weak', 'Good', 'Strong', 'Perfect'];
 
-		zxcvbnOptions.setOptions({
+		zxcvbn.zxcvbnOptions.setOptions({
 			dictionary: {
-				...zxcvbnCommonPackage.dictionary,
-				...zxcvbnEnPackage.dictionary
+				...zxcvbn.languageCommon.dictionary,
+				...zxcvbn.languageEn.dictionary
 			},
-			graphs: zxcvbnCommonPackage.adjacencyGraphs,
-			translations: zxcvbnEnPackage.translations
+			graphs: zxcvbn.languageCommon.adjacencyGraphs,
+			translations: zxcvbn.languageEn.translations
 		});
 
-		const result = zxcvbn(password);
+		const result = zxcvbn.zxcvbn(password);
 		return { label: ratings[result.score]!, score: result.score };
 	}
 
+	useEffect(() => {
+		let cancelled = false;
+
+		import('./zxcvbn').then((zxcvbn) => {
+			if (cancelled) return;
+			setZxcvbn(zxcvbn);
+		});
+
+		return () => {
+			cancelled = true;
+		};
+	}, []);
+
 	useEffect(() => updateStrength(), [props.password, updateStrength]);
 
 	return (

packages/ui/src/forms/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Form';
 export * from './FormField';
 export * from './CheckBoxField';

packages/ui/src/forms/zxcvbn.ts

@@ -0,0 +1,3 @@
+export { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core';
+export { default as languageCommon } from '@zxcvbn-ts/language-common';
+export { default as languageEn } from '@zxcvbn-ts/language-en';