[ENG-362, ENG-476, ENG-503] Next.js (#817)

* update landing packages & tailwind

* move images

* refactor to nextjs

* doc stuff

* rename markdown to mdx

* working docs

* Add math

* fix pnpm-lock

* Code highlighting

* fix types

* fix more stuff

* Notice component and removed slot

* delete editorconfig eslint rule

* pnpm-lock

* some fixes

* fixed types (pls)

* bump ui's typescript too

* commit next-env.d.ts

* fix doc links

* Use next/head instead of react-helmet & rehype-external-links

* fixes

* fix unsub from list

* add trim() to docs.excerpt

* trim doc title too

* fix titles

* replace <a> to Link

* hide .contentlayer & .next from vscode search

.vscode/settings.json

@@ -50,6 +50,8 @@
 		"**/bower_components": true,
 		"**/*.code-search": true,
 		// Hiding these folders bcs they create a lot of noise in the search results
+		"**/*.contentlayer": true,
+		"**/*.next": true,
 		"apps/mobile/ios/Pods": true
 		// "apps/mobile/android": true
 		// "apps/mobile/ios": true

apps/mobile/src/screens/Location.tsx

@@ -29,7 +29,7 @@ export default function LocationScreen({ navigation, route }: SharedScreenProps<
 				title: location.data?.name ?? 'Location'
 			});
 		}
-	}, [data, navigation, path]);
+	}, [location.data?.name, navigation, path]);
 
 	useEffect(() => {
 		getExplorerStore().locationId = id;

apps/releases/package.json

@@ -13,7 +13,6 @@
 		"@types/react": "18.0.35",
 		"@types/react-dom": "18.0.11",
 		"@vercel/edge-config": "^0.1.7",
-		"eslint": "^8.38.0",
 		"eslint-config-next": "13.3.0",
 		"next": "13.3.0",
 		"octokit": "^2.0.14",

apps/storybook/package.json

@@ -27,7 +27,7 @@
 		"postcss": "^8.4.17",
 		"prop-types": "^15.8.1",
 		"storybook": "^7.0.5",
-		"tailwindcss": "^3.1.8",
+		"tailwindcss": "^3.3.2",
 		"typescript": "^4.9.3",
 		"vite": "^4.2.0"
 	}

crates/sync/example/web/package.json

@@ -20,6 +20,6 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"solid-js": "^1.5.1",
-		"tailwindcss": "^3.1.8"
+		"tailwindcss": "^3.3.2"
 	}
 }

docs/changelog/beta/0.1.0.mdx

@@ -1,8 +1,10 @@
 # 0.1.0 (Beta)
 
-::: slot warning Coming soon
-This release has not happened yet, stay tuned...
-:::
+<Notice
+	type="warning"
+	title="Coming soon"
+	text="This release has not happened yet, stay tuned..."
+/>
 
 After \_\_ months of development we are extremely excited to be releasing the first version of Spacedrive as an early public beta.
 
@@ -16,11 +18,11 @@ _Features:_
 
 - Basic onboarding flow, determine use-case and preferences.
 
-- Create [Libraries](../architecture/libraries.md) and switch between them.
+- Create [Libraries](../../developers/architecture/libraries) and switch between them.
 
-- Connect multiple [Nodes](../architecture/nodes.md) to a Library via LAN.
+- Connect multiple [Nodes](../../developers/architecture/nodes) to a Library via LAN.
 
-- Add [Locations](../architecture/locations.md) to import files into Spacedrive.
+- Add [Locations](../../developers/architecture/locations) to import files into Spacedrive.
 
   - Indexer watch for changes and performs light re-scans.
 
@@ -30,28 +32,28 @@ _Features:_
 
     _Eventually Clouds will be supported and added as Cloud Locations_
 
-- Browse Locations via the [Explorer](../architecture/explorer.md) and view previews and metadata.
+- Browse Locations via the [Explorer](../../developers/architecture/explorer) and view previews and metadata.
   - Viewer options: row/grid item size, gap adjustment, show/hide info.
   - Context menu: rename, copy, duplicate, delete, favorite and add tags.
   - Multi-select with dedicated context menu options.
   - Open with default OS app, in-app viewer (images/text only) or Apple Quicklook
 - Automatically identify unique files to discover duplicates, shown in the inspector.
 
-- Generate [Preview Media](../architecture/preview-media.md) for image, video and text.
+- Generate [Preview Media](../../developers/architecture/preview-media) for image, video and text.
 
-- Create [Tags](../architecture/tags.md) and assign them to files, browse Tags in the Explorer.
+- Create [Tags](../../developers/architecture/tags) and assign them to files, browse Tags in the Explorer.
 
-- Create [Spaces](../architecture/spaces.md) to organize and present files.
+- Create [Spaces](../../developers/architecture/spaces) to organize and present files.
 
   - Automated Spaces can include files that match criteria.
 
     _Eventually Spaces will be sharable, publically or privately_
 
-- Create photo [Albums](../architecture/albums.md) and add images.
+- Create photo [Albums](../../developers/architecture/albums) and add images.
 
 - Library statistics: total capacity, database size, preview media size, free space.
 
-- [Search](../architecture/search.md) Library via search bar or CTRL+F.
+- [Search](../../developers/architecture/search) Library via search bar or CTRL+F.
 
   - Searches online and offline Locations, Spaces, Tags and Albums.
 
@@ -61,7 +63,7 @@ _Features:_
 
 - Customize sidebar freely with section headings and flexible slots, include default layout.
 
-- Pause and resume [Jobs](../architecture/jobs.md) with recovery on crash via Job Manager widget.
+- Pause and resume [Jobs](../../developers/architecture/jobs) with recovery on crash via Job Manager widget.
 
 - Multi-window support.
 

docs/company/about/longevity.mdx

@@ -0,0 +1 @@
+# Longevity

docs/company/about/philosophy.mdx

@@ -0,0 +1 @@
+# Philosophy

docs/company/branding/typeography.mdx

@@ -0,0 +1 @@
+# Typeography

docs/developers/architecture/objects.mdx

@@ -1,7 +1,6 @@
 ---
-name: Objects
+title: Objects
 index: 2
-new: true
 ---
 
 # Objects

docs/developers/architecture/preview-media.mdx

@@ -1,5 +1,5 @@
 ---
-name: Preview Media
+title: Preview Media
 index: 10
 ---
 

docs/developers/clients/javascript.mdx

@@ -1,5 +1,5 @@
 ---
-name: JavaScript
+title: JavaScript
 index: 500
 ---
 

docs/developers/prerequisites/environment-setup.mdx

@@ -48,9 +48,10 @@ This project uses [Cargo](https://doc.rust-lang.org/cargo/getting-started/instal
 - **Server:** `DATA_DIR=/path/to/library cargo run -p sdcore`
 - **Webapp:** `pnpm web dev`
 
-::: slot note
-When changing branches, make sure to run `pnpm prep` command right after. This ensures all the codegen is up to date.
-:::
+<Notice
+	type="note"
+	text="When changing branches, make sure to run `pnpm prep` command right after. This ensures all the codegen is up to date."
+/>
 
 ### Mobile app
 
@@ -72,9 +73,10 @@ If you are having issues ensure you are using the following versions of Rust and
 
 ### Seeding data on startup
 
-::: slot note
-You may loose data if your using this feature so please be careful! This only works on development builds for this reason.
-:::
+<Notice
+	type="note"
+	text="You may loose data if your using this feature so please be careful! This only works on development builds for this reason."
+/>
 
 You can add a file called `sd_init.json` in the same folder where you start Spacedrive and it can automatically seed data on startup.
 

docs/developers/technology/open-source.mdx

@@ -1,5 +1,5 @@
 ---
-name: Open Source
+title: Open Source
 index: 10
 ---
 

docs/developers/technology/tech-stack.mdx

@@ -1,5 +1,5 @@
 ---
-name: Tech Stack
+title: Tech Stack
 index: 10
 ---
 

docs/package.json

@@ -1,5 +0,0 @@
-{
-	"name": "@sd/docs",
-	"description": "Allows turborepo to detect our markdown files",
-	"private": true
-}

docs/product/getting-started/introduction.mdx

@@ -1,5 +1,5 @@
 ---
-name: Introduction
+title: Introduction
 index: 0
 ---
 
@@ -15,6 +15,7 @@ Create photo albums that you'll never lose, effortlessly catalogue terabytes of
 
 A decentralized, local-first design optimizes for privacy, security and data ownership—and best of all, its open source and entirely free.
 
-::: slot note
-Spacedrive is not yet released, these docs are a work in progress. Check out our [roadmap](/roadmap) to see a timeline leading to release!
-:::
+<Notice
+	type="note"
+	text="Spacedrive is not yet released, these docs are a work in progress. Check out our [roadmap](/roadmap) to see a timeline leading to release!"
+/>

docs/product/getting-started/setup.md

@@ -1,10 +0,0 @@
----
-name: Setup
-index: 0
----
-
-# Setup
-
-::: slot note Note
-Spacedrive is not yet released, these docs are a work in progress. Check out our [roadmap](/roadmap) to see a timeline leading to release!
-:::

docs/product/getting-started/setup.mdx

@@ -0,0 +1,11 @@
+---
+title: Setup
+index: 0
+---
+
+# Setup
+
+<Notice
+	type="note"
+	text="Spacedrive is not yet released, these docs are a work in progress. Check out our [roadmap](/roadmap) to see a timeline leading to release!"
+/>

docs/product/getting-started/terminology.mdx

@@ -1,5 +1,5 @@
 ---
-name: Terminology
+title: Terminology
 index: 0
 ---
 

docs/product/guides/adding-locations.mdx

@@ -20,9 +20,10 @@ When a Location is added it is immediately scanned. The scan happens via several
 
 If any one of these jobs fail or the application is closed, the state is saved and it will resume when the app is relaunched.
 
-::: slot info
-If you wish to pause or cancel these jobs you can do so from the [Job Manager]()
-:::
+<Notice
+	type="info"
+	text="If you wish to pause or cancel these jobs you can do so from the [Job Manager]()"
+/>
 
 There is a button to trigger a full re-scan of this Location. Otherwise the location will keep watch for filesystem changes automatically.
 
@@ -30,10 +31,11 @@ Deleting a location will remove the data from the database permanently.
 
 ## Archiving
 
-::: slot warning
-This feature is WIP
-:::
-Locations can be archived, meaning the directory structure is extracted from the Spacedrive database and preserved as a standalone database file. This file can be opened by Spacedrive in the [Database]() view.
+<Notice type="warning" text="This feature is WIP" />
+
+Locations can be archived, meaning the directory structure is extracted from the Spacedrive database
+and preserved as a standalone database file. This file can be opened by Spacedrive in the [Database]()
+view.
 
 Archives are useful when files have been moved or deleted from a Location, but you want to keep a record of the directory structure of that Location without cluttering the Spacedrive interface. File metadata can optionally be included/excluded from the archive file.
 

docs/product/guides/connecting-nodes.mdx

@@ -4,9 +4,11 @@ index: 6
 
 # Connecting Nodes
 
-::: slot note WIP
-It is not possible to connect Nodes yet, please check our [roadmap](/roadmap).
-:::
+<Notice
+	type="note"
+	title="WIP"
+	text="It is not possible to connect Nodes yet, please check our [roadmap](/roadmap)."
+/>
 
 Nodes are instances of Spacedrive, commonly your devices. Currently Spacedrive supports Windows, Linux, Mac, iOS and Android.
 

docs/product/resources/faq.mdx

@@ -1,5 +1,5 @@
 ---
-name: FAQ
+title: FAQ
 ---
 
 # Frequently Asked Questions

interface/app/$libraryId/Explorer/File/Thumb.tsx

@@ -1,4 +1,4 @@
-import { getIcon, iconNames } from '@sd/assets/icons/util';
+import { getIcon, iconNames } from '@sd/assets/util';
 import clsx from 'clsx';
 import { ImgHTMLAttributes, memo, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { ExplorerItem, useLibraryContext } from '@sd/client';

interface/app/$libraryId/Explorer/OptionsPanel.tsx

@@ -17,7 +17,8 @@ const sortOptions: Record<ExplorerOrderByKeys, string> = {
 	sizeInBytes: 'Size',
 	dateCreated: 'Date created',
 	dateModified: 'Date modified',
-	dateIndexed: 'Date indexed'
+	dateIndexed: 'Date indexed',
+	object: 'Object'
 };
 
 export default () => {

interface/app/$libraryId/Explorer/util.ts

@@ -1,13 +1,22 @@
 import { z } from 'zod';
-import { ExplorerItem, ObjectKind, ObjectKindKey, Ordering, isObject, isPath } from '@sd/client';
+import {
+	ExplorerItem,
+	FilePathSearchOrdering,
+	ObjectKind,
+	ObjectKindKey,
+	isObject,
+	isPath
+} from '@sd/client';
 import { useExplorerStore, useZodSearchParams } from '~/hooks';
 
-export function useExplorerOrder(): Ordering | undefined {
+export function useExplorerOrder(): FilePathSearchOrdering | undefined {
 	const explorerStore = useExplorerStore();
 
 	if (explorerStore.orderBy === 'none') return undefined;
 
-	return { [explorerStore.orderBy]: explorerStore.orderByDirection === 'asc' } as Ordering;
+	return {
+		[explorerStore.orderBy]: explorerStore.orderByDirection === 'asc'
+	} as FilePathSearchOrdering;
 }
 
 export function getItemObject(data: ExplorerItem) {

interface/app/$libraryId/Layout/Sidebar/JobManager/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable tailwindcss/classnames-order */
 import { useQueryClient } from '@tanstack/react-query';
 import { Trash, X } from 'phosphor-react';
 import { useCallback } from 'react';

interface/app/$libraryId/Layout/Sidebar/JobManager/useJobTimeText.tsx

@@ -9,7 +9,7 @@ export function useJobTimeText(job: JobReport): string | null {
 	const elapsedTimeText = useMemo(() => {
 		let newText: string;
 		if (job.status === 'Running') {
-			newText = `Elapsed in ${dayjs(job.started_at).fromNow(true)}`;
+			newText = `Elapsed ${dayjs(job.started_at).fromNow(true)}`;
 		} else if (job.completed_at) {
 			newText = `Took ${dayjs(job.started_at).from(job.completed_at, true)}`;
 		} else {

interface/app/$libraryId/Layout/Sidebar/LibrariesDropdown.tsx

@@ -40,7 +40,7 @@ export default () => {
 			))}
 			<DropdownMenu.Separator className="mx-0" />
 			<DropdownMenu.Item
-				label="	New Library"
+				label="New Library"
 				icon={Plus}
 				iconProps={{ weight: 'bold', size: 16 }}
 				onClick={() => dialogManager.create((dp) => <CreateDialog {...dp} />)}

interface/app/$libraryId/overview/index.tsx

@@ -1,5 +1,4 @@
-import * as icons from '@sd/assets/icons';
-import { getIcon, iconNames } from '@sd/assets/icons/util';
+import { getIcon, iconNames } from '@sd/assets/util';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
 import 'react-loading-skeleton/dist/skeleton.css';
@@ -93,12 +92,12 @@ export const Component = () => {
 					favorite: isFavoritesCategory ? true : undefined,
 					...(explorerStore.layoutMode === 'media'
 						? {
-							kind: [5, 7].includes(kind)
-								? [kind]
-								: isFavoritesCategory
+								kind: [5, 7].includes(kind)
+									? [kind]
+									: isFavoritesCategory
 									? [5, 7]
 									: [5, 7, kind]
-						}
+						  }
 						: { kind: isFavoritesCategory ? [] : [kind] })
 				}
 			}

interface/app/onboarding/alpha.tsx

@@ -1,5 +1,5 @@
 import { AlphaBg, AppLogo } from '@sd/assets/images';
-import { Discord } from '@icons-pack/react-simple-icons';
+import { SiDiscord } from '@icons-pack/react-simple-icons';
 import { useNavigate } from 'react-router-dom';
 import { Button } from '@sd/ui';
 import { usePlatform } from '~/util/Platform';
@@ -33,7 +33,7 @@ export default function OnboardingAlpha() {
 						className="flex gap-2"
 						variant="gray"
 					>
-						<Discord className="h-5 w-5" />
+						<SiDiscord className="h-5 w-5" />
 						Join Discord
 					</Button>
 					<Button

interface/package.json

@@ -56,10 +56,11 @@
 		"react-router-dom": "6.9.0",
 		"remix-params-helper": "^0.4.10",
 		"rooks": "^5.14.0",
-		"tailwindcss": "^3.1.8",
+		"tailwindcss": "^3.3.2",
 		"use-count-up": "^3.0.1",
 		"use-debounce": "^8.0.4",
-		"valtio": "^1.7.4"
+		"valtio": "^1.7.4",
+		"@icons-pack/react-simple-icons": "^7.2.0"
 	},
 	"devDependencies": {
 		"@sd/config": "workspace:*",
@@ -71,7 +72,7 @@
 		"@types/react-dom": "^18.0.6",
 		"@types/react-router-dom": "^5.3.3",
 		"@vitejs/plugin-react": "^1.3.1",
-		"typescript": "^4.8.4",
+		"typescript": "5.0.4",
 		"vite": "^4.0.4",
 		"vite-plugin-svgr": "^2.2.1"
 	}

package.json

@@ -15,7 +15,6 @@
 		"ui": "pnpm --filter @sd/ui -- ",
 		"interface": "pnpm --filter @sd/interface -- ",
 		"assets": "pnpm --filter @sd/assets -- ",
-		"docs": "pnpm --filter @sd/docs -- ",
 		"client": "pnpm --filter @sd/client -- ",
 		"storybook": "pnpm --filter @sd/storybook -- ",
 		"prisma": "cd core && cargo prisma",
@@ -23,7 +22,7 @@
 		"typecheck": "pnpm -r typecheck",
 		"lint": "turbo run lint",
 		"lint:fix": "turbo run lint -- --fix",
-		"clean": "rimraf -g \"node_modules/\" \"**/node_modules/\" \"target/\" \"**/.build/\" \"**/.next/\" \"**/dist/!(.gitignore)**\""
+		"clean": "rimraf -g \"node_modules/\" \"**/node_modules/\" \"target/\" \"**/.build/\" \"**/.next/\" \"**/.contentlayer/\" \"**/dist/!(.gitignore)**\""
 	},
 	"pnpm": {
 		"overrides": {

packages/assets/images/index.ts

@@ -12,4 +12,4 @@ import GoogleDrive from './GoogleDrive.png';
 import Mega from './Mega.png';
 import iCloud from './iCloud.png';
 
-export { AppLogo, AlphaBg, Ball, BloomOne, BloomThree, BloomTwo, GoogleDrive, Mega, iCloud };
+export { AlphaBg, AppLogo, Ball, BloomOne, BloomThree, BloomTwo, GoogleDrive, Mega, iCloud };

packages/assets/util/index.ts

@@ -1,4 +1,4 @@
-import * as icons from '.';
+import * as icons from '../icons';
 
 // Record is defined as follows inside TypeScript
 export type IconTypes<K = keyof typeof icons> = K extends `${string}_${string}` ? never : K;

packages/config/.eslintrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-	extends: [require.resolve('./eslint/base.js')]
+	extends: [require.resolve('./eslint/base.js'), require.resolve('./eslint/tailwind.js')]
 };

packages/config/eslint/base.js

@@ -14,10 +14,9 @@ module.exports = {
 		'plugin:react-hooks/recommended',
 		'plugin:@typescript-eslint/recommended',
 		'turbo',
-		'plugin:editorconfig/all',
 		'prettier'
 	],
-	plugins: ['react', 'editorconfig'],
+	plugins: ['react'],
 	rules: {
 		'react/display-name': 'off',
 		'react/prop-types': 'off',
@@ -35,7 +34,6 @@ module.exports = {
 		'@typescript-eslint/no-empty-function': 'off',
 		'no-control-regex': 'off',
 		'no-mixed-spaces-and-tabs': ['warn', 'smart-tabs'],
-		'editorconfig/indent': 'off',
 		'turbo/no-undeclared-env-vars': [
 			'error',
 			{

packages/config/eslint/reactNative.js

@@ -1,5 +1,5 @@
 module.exports = {
-	extends: [require.resolve('./tailwind.js')],
+	extends: [require.resolve('./base.js'), require.resolve('./tailwind.js')],
 	env: {
 		'react-native/react-native': true
 	},
@@ -15,11 +15,6 @@ module.exports = {
 						importNames: ['SafeAreaView'],
 						message: 'Import SafeAreaView from react-native-safe-area-context instead'
 					}
-					// {
-					// 	name: 'react-native',
-					// 	importNames: ['Button'],
-					// 	message: 'Import Button from ~/components instead.'
-					// }
 				]
 			}
 		],

packages/config/eslint/tailwind.js

@@ -1,6 +1,6 @@
 const path = require('node:path');
 module.exports = {
-	extends: [require.resolve('./base.js'), 'plugin:tailwindcss/recommended'],
+	extends: ['plugin:tailwindcss/recommended'],
 	rules: {
 		'tailwindcss/no-custom-classname': 'off',
 		'tailwindcss/classnames-order': [

packages/config/eslint/web.js

@@ -1,5 +1,5 @@
 module.exports = {
-	extends: [require.resolve('./tailwind.js')],
+	extends: [require.resolve('./base.js'), require.resolve('./tailwind.js')],
 	ignorePatterns: ['public', 'vite.config.ts'],
 	env: {
 		browser: true,

packages/config/package.json

@@ -10,16 +10,16 @@
 		"lint": "eslint . --cache"
 	},
 	"devDependencies": {
-		"@typescript-eslint/eslint-plugin": "^5.59.5",
-		"@typescript-eslint/parser": "^5.59.5",
-		"eslint": "^8.38.0",
+		"@typescript-eslint/eslint-plugin": "^5.59.6",
+		"@typescript-eslint/parser": "^5.59.6",
+		"eslint": "^8.41.0",
+		"eslint-config-next": "13.3.0",
 		"eslint-config-prettier": "^8.8.0",
-		"eslint-config-turbo": "^1.9.1",
-		"eslint-plugin-editorconfig": "^4.0.2",
+		"eslint-config-turbo": "^1.9.8",
 		"eslint-plugin-prettier": "^4.2.1",
 		"eslint-plugin-react": "^7.32.2",
 		"eslint-plugin-react-hooks": "^4.6.0",
-		"eslint-plugin-tailwindcss": "^3.11.0",
+		"eslint-plugin-tailwindcss": "^3.12.0",
 		"eslint-utils": "^3.0.0",
 		"regexpp": "^3.2.0",
 		"vite-plugin-html": "^3.2.0",

packages/ui/package.json

@@ -49,7 +49,6 @@
 	"devDependencies": {
 		"@babel/core": "^7.19.3",
 		"@sd/config": "workspace:*",
-		"@tailwindcss/line-clamp": "^0.4.2",
 		"@tailwindcss/typography": "^0.5.7",
 		"@types/node": "^18.15.1",
 		"@types/react": "^18.0.21",
@@ -59,8 +58,8 @@
 		"sass": "^1.55.0",
 		"sass-loader": "^13.0.2",
 		"style-loader": "^3.3.1",
-		"tailwindcss": "^3.1.8",
+		"tailwindcss": "^3.3.2",
 		"tailwindcss-animate": "^1.0.5",
-		"typescript": "^4.8.4"
+		"typescript": "5.0.4"
 	}
 }

packages/ui/src/Folder.tsx

@@ -1,5 +1,5 @@
-import folderWhiteSvg from '@sd/assets/svgs/folder-white.svg';
-import folderSvg from '@sd/assets/svgs/folder.svg';
+import { ReactComponent as folderWhiteSvg } from '@sd/assets/svgs/folder-white.svg';
+import { ReactComponent as folderSvg } from '@sd/assets/svgs/folder.svg';
 
 interface FolderProps {
 	/**
@@ -21,13 +21,7 @@ interface FolderProps {
 export function Folder(props: FolderProps) {
 	const { size = 24 } = props;
 
-	return (
-		<img
-			className={props.className}
-			width={size}
-			height={size}
-			src={props.white ? folderWhiteSvg : folderSvg}
-			alt="Folder icon"
-		/>
-	);
+	const Icon = props.white ? folderWhiteSvg : folderSvg;
+
+	return <Icon className={props.className} width={size} height={size} />;
 }

packages/ui/src/forms/Input.tsx

@@ -4,7 +4,7 @@ import zxcvbnEnPackage from '@zxcvbn-ts/language-en';
 import clsx from 'clsx';
 import { forwardRef, useEffect, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { useDebounce, useDebouncedCallback } from 'use-debounce';
+import { useDebouncedCallback } from 'use-debounce';
 import * as Root from '../Input';
 import { FormField, UseFormFieldProps, useFormField } from './FormField';
 
@@ -51,7 +51,7 @@ const PasswordStrengthMeter = (props: { password: string }) => {
 		return { label: ratings[result.score]!, score: result.score };
 	}
 
-	useEffect(() => updateStrength(), [props.password]);
+	useEffect(() => updateStrength(), [props.password, updateStrength]);
 
 	return (
 		<div className="flex grow items-center justify-end">

packages/ui/style/tailwind.js

@@ -1,5 +1,3 @@
-// const colors = require('tailwindcss/colors');
-const plugin = require('tailwindcss/plugin');
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 function alpha(variableName) {
@@ -16,7 +14,6 @@ module.exports = function (app, options) {
 			'../../interface/**/*.{ts,tsx,html,stories.tsx}'
 		],
 		darkMode: app == 'landing' ? 'class' : 'media',
-		mode: 'jit',
 		theme: {
 			screens: {
 				xs: '475px',
@@ -168,7 +165,6 @@ module.exports = function (app, options) {
 	};
 	if (app === 'landing') {
 		config.plugins.push(require('@tailwindcss/typography'));
-		config.plugins.push(require('@tailwindcss/line-clamp'));
 	}
 	return config;
 };