fix missing styles from ui package

.prettierignore

@@ -26,3 +26,5 @@ apps/next/tsconfig.json
 
 # supabase database types
 apps/next/src/lib/database.types.ts
+
+.turbo

apps/code-not-found/package.json

@@ -3,10 +3,10 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "PORT=3004 next dev",
 		"build": "next build",
-		"start": "PORT=3004 next start",
-		"lint": "next lint"
+		"dev": "PORT=3004 next dev",
+		"lint": "next lint",
+		"start": "PORT=3004 next start"
 	},
 	"dependencies": {
 		"next": "14.0.4",

apps/design/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react'
 
-import 'ui/globals.css'
+import '@repo/ui/styles.css'
 import './styles.css'
 
 import { Inter } from 'next/font/google'

apps/design/app/page.tsx

@@ -18,7 +18,7 @@ import {
 	Progress,
 	Slider,
 	CheckboxWithLabel,
-} from 'ui'
+} from '@repo/ui'
 
 const RadioGroup = RadioGroupPrimitive.Root
 const RadioGroupRadio = RadioGroupPrimitive.Item

apps/design/package.json

@@ -2,23 +2,23 @@
 	"name": "design-app",
 	"private": true,
 	"scripts": {
-		"dev": "PORT=3001 next dev",
 		"build": "next build",
+		"dev": "PORT=3001 next dev",
 		"export": "next export",
-		"start": "PORT=3001 next start",
-		"lint": "next lint"
+		"lint": "next lint",
+		"start": "PORT=3001 next start"
 	},
 	"dependencies": {
-		"@radix-ui/react-icons": "1.1.1",
-		"@radix-ui/react-label": "1.0.0",
-		"@radix-ui/react-progress": "1.0.0",
-		"@radix-ui/react-radio-group": "latest",
+		"@radix-ui/react-icons": "1.3.2",
+		"@radix-ui/react-label": "2.1.1",
+		"@radix-ui/react-progress": "1.1.1",
+		"@radix-ui/react-radio-group": "^1.2.2",
+		"@repo/ui": "workspace:*",
 		"framer-motion": "6.2.3",
 		"lib": "workspace:*",
 		"next": "14.0.4",
 		"react": "18.2.0",
-		"react-dom": "18.2.0",
-		"ui": "workspace:*"
+		"react-dom": "18.2.0"
 	},
 	"devDependencies": {
 		"config": "workspace:*",

apps/games/package.json

@@ -3,14 +3,15 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "PORT=3002 next dev",
 		"build": "next build",
-		"start": "PORT=3002 next start",
-		"lint": "next lint"
+		"dev": "PORT=3002 next dev",
+		"lint": "next lint",
+		"start": "PORT=3002 next start"
 	},
 	"dependencies": {
 		"@faker-js/faker": "7.4.0",
 		"@nanostores/react": "0.7.1",
+		"@repo/ui": "workspace:*",
 		"framer-motion": "6.2.3",
 		"just-shuffle": "4.1.1",
 		"lib": "workspace:*",
@@ -20,8 +21,7 @@
 		"next": "14.0.4",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"react-icons": "4.7.1",
-		"ui": "workspace:*"
+		"react-icons": "4.7.1"
 	},
 	"devDependencies": {
 		"config": "workspace:*",

apps/games/src/app/idiot/Game.tsx

@@ -4,7 +4,7 @@ import type { Card, Deck, Piles } from 'src/types/card-games'
 
 import { useRef, useState } from 'react'
 import { FiRefreshCw } from 'react-icons/fi'
-import { Header, HeaderAction } from 'ui'
+import { Header, HeaderAction } from '@repo/ui'
 import { isDefined, isEmpty } from 'lib/utils/lang'
 import { classNames } from 'lib/utils/string'
 import { first, last, lastIndex, chunk } from 'lib/utils/array'

apps/games/src/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react'
 
-import 'ui/globals.css'
+import '@repo/ui/styles.css'
 import './globals.css'
 
 import { Inter } from 'next/font/google'

apps/games/src/app/ms/MineSweaper.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { MuseoModerno } from 'next/font/google'
-import { Header, Select, SelectItem } from 'ui'
+import { Header, Select, SelectItem } from '@repo/ui'
 import { useStore } from '@nanostores/react'
 import { Board } from './Board'
 import { $selectedDifficulty } from './store'

apps/games/src/app/spider/Game.tsx

@@ -6,7 +6,7 @@ import { useRef, useState } from 'react'
 import { FiRefreshCw, FiRotateCcw } from 'react-icons/fi'
 import { isDefined, isEmpty } from 'lib/utils/lang'
 import { chunk, first, last } from 'lib/utils/array'
-import { Header, HeaderAction } from 'ui'
+import { Header, HeaderAction } from '@repo/ui'
 import {
 	deselectAll,
 	moveCardsToPiles,

apps/games/src/app/wordle/Game.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { motion } from 'framer-motion'
-import { Header } from 'ui'
+import { Header } from '@repo/ui'
 
 enum Color {
 	Green = 'green',

apps/next/next.config.js

@@ -1,5 +1,5 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
 	reactStrictMode: true,
-	transpilePackages: ['ui'],
+	transpilePackages: ['@repo/ui'],
 }

apps/next/package.json

@@ -1,28 +1,32 @@
 {
 	"name": "next-app",
-	"description": "Playground for Emil Johansson",
 	"version": "1.2.1",
-	"author": "[email protected]",
+	"description": "Playground for Emil Johansson",
 	"keywords": [
 		"emil",
 		"johansson"
 	],
 	"license": "MIT",
+	"author": "[email protected]",
 	"scripts": {
-		"dev": "next dev",
 		"build": "next build",
-		"start": "next start",
-		"lint": "next lint"
+		"dev": "next dev",
+		"lint": "next lint",
+		"start": "next start"
 	},
 	"dependencies": {
 		"@emiljohansson/random-string": "1.1.2",
 		"@faker-js/faker": "7.4.0",
 		"@nanostores/react": "0.7.1",
-		"@radix-ui/react-accessible-icon": "1.0.2",
-		"@radix-ui/react-label": "1.0.0",
-		"@radix-ui/react-progress": "1.0.0",
-		"@radix-ui/react-select": "1.0.0",
-		"@radix-ui/react-tabs": "1.0.0",
+		"@radix-ui/react-accessible-icon": "1.1.1",
+		"@radix-ui/react-label": "2.1.1",
+		"@radix-ui/react-progress": "1.1.1",
+		"@radix-ui/react-select": "2.1.4",
+		"@radix-ui/react-tabs": "1.1.2",
+		"@repo/eslint-config": "workspace:*",
+		"@repo/tailwind-config": "workspace:*",
+		"@repo/typescript-config": "workspace:*",
+		"@repo/ui": "workspace:*",
 		"@supabase/ssr": "0.0.10",
 		"@vercel/analytics": "1.1.1",
 		"@vercel/kv": "1.0.0",
@@ -37,8 +41,7 @@
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-icons": "4.7.1",
-		"swr": "1.3.0",
-		"ui": "workspace:*"
+		"swr": "1.3.0"
 	},
 	"devDependencies": {
 		"@types/crypto-js": "4.1.1",

apps/next/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react'
 import type { Metadata } from 'next'
 
-// import 'ui/globals.css'
+import '@repo/ui/styles.css'
 import './styles.css'
 
 import { headers } from 'next/headers'
@@ -92,19 +92,19 @@ export default async function Layout({ children }: PropsWithChildren<unknown>) {
 			</head>
 			<body
 				className={`
-					${inter.className} 
+					${inter.className}
 					bg-[length:15px_15px] bg-dots
-					bg-slate-50 dark:bg-gray-900 
-					dark:text-white 
+					bg-slate-50 dark:bg-gray-900
+					dark:text-white
 					flex flex-col h-full`}
 			>
 				{/* background-image: conic-gradient(at 92% 8%, rgb(134, 143, 151) 90deg, transparent 0deg, transparent 225deg, transparent 0deg);
 				background-size: 15px 15px; */}
 				<nav
 					className="
 						flex justify-between items-center
-						bg-white dark:bg-black 
-						border-b border-slate-200 dark:border-zinc-700 
+						bg-white dark:bg-black
+						border-b border-slate-200 dark:border-zinc-700
 						px-4 py-3
 					"
 				>

apps/next/src/app/password-generator/page.tsx

@@ -3,7 +3,7 @@
 import { type PropsWithChildren, useState } from 'react'
 import * as Tabs from '@radix-ui/react-tabs'
 import useSWR from 'swr'
-import { Slider, CheckboxWithLabel } from 'ui'
+import { Slider, CheckboxWithLabel } from '@repo/ui'
 import { randomString } from 'lib/utils/string'
 
 interface Selection {

apps/next/src/app/two-way-auth/enter/TwoWayAuthEnter.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useState, useRef, FormEvent, ChangeEvent } from 'react'
+import { useState, useRef, ChangeEvent } from 'react'
 import { Label } from '@radix-ui/react-label'
 import { Check, X, MoreHorizontal } from 'lucide-react'
+import { useFormState, useFormStatus } from 'react-dom'
 
 enum State {
 	idle,
@@ -49,10 +50,18 @@ function EnteredContent({ state }: { state: State }) {
 	return <></>
 }
 
-function TwoWayAuthEnter() {
+function TwoWayAuthEnter({ validate }) {
+	const [state, formAction] = useFormState(State.idle)
+	console.log({
+		state,
+		formAction,
+	})
+
 	const [value, setValue] = useState('')
 	const [state, setState] = useState(State.idle)
 	const inputEl = useRef(null)
+	const { pending } = useFormStatus()
+	console.log({ pending })
 
 	function onChange(event: ChangeEvent<HTMLInputElement>) {
 		setState(State.idle)
@@ -64,6 +73,7 @@ function TwoWayAuthEnter() {
 		setValue(target.value)
 	}
 
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	async function onSubmit(event: FormEvent<HTMLFormElement>) {
 		event.preventDefault()
 		setState(State.loading)
@@ -81,7 +91,7 @@ function TwoWayAuthEnter() {
 	}
 
 	return (
-		<form action="#" method="POST" onSubmit={onSubmit} className="flex">
+		<form action={validate} className="flex">
 			<div className="flex items-center relative">
 				<Label htmlFor="secret" className="pr-3">
 					Enter Code

apps/next/src/app/two-way-auth/enter/actions.ts

@@ -0,0 +1,9 @@
+'use server'
+
+import { validateCode } from '../api/codes'
+
+export async function validate(formData: FormData) {
+	const value = formData.get('secret')?.toString() || ''
+	console.log('value', value, validateCode(value))
+	return { message: 'hello' }
+}

apps/next/src/app/two-way-auth/enter/page.tsx

@@ -1,12 +1,13 @@
 import TwoWayAuthEnter from './TwoWayAuthEnter'
 import Content from '@/components/Content'
 import Section from '@/components/Section'
+import { validate } from './actions'
 
 export default function TwoWayAuthEnterPage() {
 	return (
 		<Content>
 			<Section>
-				<TwoWayAuthEnter />
+				<TwoWayAuthEnter validate={validate} />
 			</Section>
 		</Content>
 	)

apps/next/src/components/ProgressBar.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Progress } from 'ui'
+import { Progress } from '@repo/ui'
 
 const useIncrementalProgress = () => {
 	const [progress, setProgress] = useState(0)

apps/next/tailwind.config.ts

@@ -0,0 +1,11 @@
+// tailwind config is required for editor support
+
+import type { Config } from 'tailwindcss'
+import sharedConfig from '@repo/tailwind-config'
+
+const config: Pick<Config, 'content' | 'presets'> = {
+	content: ['./src/**/*.tsx'],
+	presets: [sharedConfig],
+}
+
+export default config

apps/oauth-app/package.json

@@ -3,25 +3,25 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "PORT=3006 next dev",
 		"build": "PORT=3006 next build",
-		"start": "PORT=3006 next start",
-		"lint": "next lint"
+		"dev": "PORT=3006 next dev",
+		"lint": "next lint",
+		"start": "PORT=3006 next start"
 	},
 	"dependencies": {
 		"@types/node": "18.0.1",
-		"@types/react": "18.0.15",
-		"@types/react-dom": "18.0.6",
+		"@types/react": "18.2.55",
+		"@types/react-dom": "18.2.19",
 		"autoprefixer": "10.4.13",
 		"eslint": "8.54.0",
 		"eslint-config-next": "14.0.3",
 		"jsonwebtoken": "9.0.2",
 		"next": "14.0.4",
 		"node-cache": "5.1.2",
-		"postcss": "8.4.31",
+		"postcss": "8.4.49",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"tailwindcss": "3.4.0",
+		"tailwindcss": "3.4.17",
 		"typescript": "5.0.4"
 	},
 	"devDependencies": {