RFC/refactor: code-split ui package (#234)

* refactor: split the code

* 'chore: update @preconstruct/cli and typescript versions for compatibility

* chore: update imports

* fix: use correct styles.css imports

* docs: add documentation on how to add components in ui package

Author: tefkah

core/app/(user)/forgot/ForgotForm.tsx

@@ -1,12 +1,13 @@
 "use client";
 import React, { FormEvent, useState } from "react";
-import { Button, Icon } from "ui";
+import { Button } from "ui/button";
+import { Loader2 } from "ui/icon";
+
 import { supabase } from "lib/supabase";
 import { useEnvContext } from "next-runtime-env";
 
-
 export default function ForgotForm() {
-  const { NEXT_PUBLIC_PUBPUB_URL } = useEnvContext()
+	const { NEXT_PUBLIC_PUBPUB_URL } = useEnvContext();
 
 	const [email, setEmail] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
@@ -50,9 +51,7 @@ export default function ForgotForm() {
 
 							<Button variant="outline" type="submit" disabled={!email || isLoading}>
 								Send password reset email
-								{isLoading && (
-									<Icon.Loader2 className="h-4 w-4 ml-4 animate-spin" />
-								)}
+								{isLoading && <Loader2 className="h-4 w-4 ml-4 animate-spin" />}
 							</Button>
 
 							{failure && (

core/app/(user)/login/LoginForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React, { useState, FormEvent } from "react";
-import { Button } from "ui";
+import { Button } from "ui/button";
 import { supabase } from "lib/supabase";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -38,7 +38,7 @@ export default function LoginForm() {
 				router.push("/settings");
 			}
 		}
-	}
+	};
 
 	return (
 		<div className="border p-4">

core/app/(user)/reset/ResetForm.tsx

@@ -1,6 +1,7 @@
 "use client";
 import React, { useState, FormEvent } from "react";
-import { Button, Icon } from "ui";
+import { Button } from "ui/button";
+import { Loader2 } from "ui/icon";
 import { formatSupabaseError, supabase } from "lib/supabase";
 import { useRouter } from "next/navigation";
 
@@ -57,7 +58,7 @@ export default function ResetForm() {
 
 						<Button variant="outline" type="submit" disabled={!password || isLoading}>
 							Set new password
-							{isLoading && <Icon.Loader2 className="h-4 w-4 ml-4 animate-spin" />}
+							{isLoading && <Loader2 className="h-4 w-4 ml-4 animate-spin" />}
 						</Button>
 
 						{error && (

core/app/(user)/settings/SettingsForm.tsx

@@ -4,7 +4,9 @@ import { supabase } from "lib/supabase";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { FormEvent, useState } from "react";
-import { Avatar, AvatarFallback, AvatarImage, Button, Icon } from "ui";
+import { Button } from "ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "ui/avatar";
+import { Loader2 } from "ui/icon";
 import LogoutButton from "~/app/components/LogoutButton";
 import { UserPutBody, UserSettings } from "~/lib/types";
 import { useEnvContext } from "next-runtime-env";
@@ -162,7 +164,7 @@ export default function SettingsForm({
 				{!resetSuccess && (
 					<Button onClick={resetPassword} disabled={resetIsLoading}>
 						Send password reset email
-						{resetIsLoading && <Icon.Loader2 className="h-4 w-4 ml-4 animate-spin" />}
+						{resetIsLoading && <Loader2 className="h-4 w-4 ml-4 animate-spin" />}
 					</Button>
 				)}
 				{resetSuccess && (

core/app/(user)/signup/SignupForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React, { useState, FormEvent } from "react";
-import { Button } from "ui";
+import { Button } from "ui/button";
 import { UserPostBody } from "~/lib/types";
 
 export default function SignupForm() {

core/app/InitClient.tsx

@@ -3,19 +3,16 @@ import { useEffect } from "react";
 import { REFRESH_NAME, TOKEN_NAME } from "lib/auth/cookies";
 import { createBrowserSupabase, supabase } from "lib/supabase";
 import { usePathname } from "next/navigation";
-import { useEnvContext } from 'next-runtime-env';
+import { useEnvContext } from "next-runtime-env";
 
 export default function InitClient() {
-  const { NEXT_PUBLIC_SUPABASE_PUBLIC_KEY , NEXT_PUBLIC_SUPABASE_URL } = useEnvContext();
+	const { NEXT_PUBLIC_SUPABASE_PUBLIC_KEY, NEXT_PUBLIC_SUPABASE_URL } = useEnvContext();
 
 	const pathname = usePathname();
 	useEffect(() => {
 		const isLocalhost = window.location.origin.includes("localhost");
 		const securityValue = isLocalhost ? "secure" : "";
-		createBrowserSupabase(
-      NEXT_PUBLIC_SUPABASE_URL,
-      NEXT_PUBLIC_SUPABASE_PUBLIC_KEY
-    );
+		createBrowserSupabase(NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_PUBLIC_KEY);
 		supabase.auth.onAuthStateChange(async (event, session) => {
 			if (event === "SIGNED_OUT") {
 				// delete cookies on sign out

core/app/c/[communitySlug]/CommunitySwitcher.tsx

@@ -1,13 +1,11 @@
 import Link from "next/link";
+import { Avatar, AvatarFallback, AvatarImage } from "ui/avatar";
 import {
-	Avatar,
-	AvatarFallback,
-	AvatarImage,
 	DropdownMenu,
 	DropdownMenuItem,
 	DropdownMenuContent,
 	DropdownMenuTrigger,
-} from "ui";
+} from "ui/dropdown-menu";
 import { CommunityData } from "./layout";
 
 type Props = {

core/app/c/[communitySlug]/LoginSwitcher.tsx

@@ -1,5 +1,6 @@
 import { getLoginData } from "~/lib/auth/loginData";
-import { Avatar, AvatarFallback, AvatarImage, Button } from "ui";
+import { Avatar, AvatarFallback, AvatarImage } from "ui/avatar";
+import { Button } from "ui/button";
 import LogoutButton from "../../components/LogoutButton";
 import Link from "next/link";
 
@@ -27,7 +28,9 @@ export default async function LoginSwitcher() {
 			<div className="mt-1 flex flex-row items-">
 				<LogoutButton />
 				<Link className="ml-2" href="/settings">
-					<Button variant="outline" size="sm">Settings</Button>
+					<Button variant="outline" size="sm">
+						Settings
+					</Button>
 				</Link>
 			</div>
 		</div>

core/app/c/[communitySlug]/integrations/IntegrationsList.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import NextLink from "next/link";
-import { Button, Card, CardContent, CardHeader } from "ui";
+
+import { Button } from "ui/button";
+import { Card, CardContent, CardHeader } from "ui/card";
 import { IntegrationData } from "./page";
 import { Row, RowContent, RowFooter } from "~/app/components/Row";
 

core/app/c/[communitySlug]/pubs/PubHeader.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Button } from "ui";
+import { Button } from "ui/button";
 
 type Props = {};
 

core/app/c/[communitySlug]/pubs/[pubId]/page.tsx

@@ -1,19 +1,11 @@
 import { Prisma, PubField, PubFieldSchema, PubValue } from "@prisma/client";
 import { AnySchema, JSONSchemaType } from "ajv";
 import Link from "next/link";
-import {
-	Avatar,
-	AvatarFallback,
-	AvatarImage,
-	Button,
-	CardContent,
-	CardHeader,
-	CardTitle,
-	HoverCard,
-	HoverCardContent,
-	HoverCardTrigger,
-	Separator,
-} from "ui";
+import { Avatar, AvatarFallback, AvatarImage } from "ui/avatar";
+import { Button } from "ui/button";
+import { CardContent, CardHeader, CardTitle } from "ui/card";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "ui/hover-card";
+import { Separator } from "ui/separator";
 
 import IntegrationActions from "~/app/components/IntegrationActions";
 import { PubTitle } from "~/app/components/PubTitle";

core/app/c/[communitySlug]/stages/components/Assign.tsx

@@ -1,20 +1,12 @@
 "use client";
 import Image from "next/image";
 import React from "react";
-import {
-	Button,
-	Card,
-	CardContent,
-	CardFooter,
-	CardTitle,
-	Dialog,
-	DialogContent,
-	DialogTrigger,
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-	useToast,
-} from "ui";
+import { Button } from "ui/button";
+import { Card, CardContent, CardFooter, CardTitle } from "ui/card";
+import { Dialog, DialogContent, DialogTrigger } from "ui/dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "ui/popover";
+import { useToast } from "ui/use-toast";
+
 import {
 	PermissionPayloadUser,
 	PubPayload,

core/app/c/[communitySlug]/stages/components/Move.tsx

@@ -1,5 +1,7 @@
 "use client";
-import { Button, Popover, PopoverContent, PopoverTrigger, useToast } from "ui";
+import { Button } from "ui/button";
+import { useToast } from "ui/use-toast";
+import { Popover, PopoverContent, PopoverTrigger } from "ui/popover";
 import { PubPayload, StagePayload, StagePayloadMoveConstraintDestination } from "~/lib/types";
 import { move } from "./lib/actions";
 

core/app/c/[communitySlug]/stages/components/StageList.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { Fragment } from "react";
-import { Button } from "ui";
+import { Button } from "ui/button";
 import PubRow from "~/app/components/PubRow";
 import { getPubUsers } from "~/lib/permissions";
 import { StagesById, StagePayload, UserLoginData } from "~/lib/types";

core/app/c/[communitySlug]/stages/manage/StageEditor.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { Tabs, TabsContent, TabsList, TabsTrigger, toast } from "ui";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "ui/tabs";
+import { toast } from "ui/use-toast";
 import { StageFormSchema, moveConstraintSourcesForStage } from "~/lib/stages";
 import { DeepPartial, StagesById, StagePayload } from "~/lib/types";
 import StageForm from "./StageForm";

core/app/c/[communitySlug]/stages/manage/StageForm.tsx

@@ -1,17 +1,17 @@
 import { useCallback, useEffect } from "react";
 import { useForm } from "react-hook-form";
+import { Button } from "ui/button";
 import {
-	Button,
 	Form,
 	FormControl,
 	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
 	FormMessage,
-	Icon,
-	Input,
-} from "ui";
+} from "ui/form";
+import * as Icon from "ui/icon";
+import { Input } from "ui/input";
 import { assert } from "utils";
 import { StageFormSchema } from "~/lib/stages";
 import { StagePayload, StagesById, DeepPartial } from "~/lib/types";

core/app/c/[communitySlug]/stages/manage/StageManagement.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "ui";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "ui/tabs";
 import StageEditor from "./StageEditor";
 import { StagePayload, StagesById } from "~/lib/types";
 

core/app/c/[communitySlug]/types/TypeBlock.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useState } from "react";
-import { Button, Card, CardContent } from "ui";
+import { Button } from "ui/button";
+import { Card, CardContent } from "ui/card";
 import { TypesData } from "./page";
 
 type Props = { type: NonNullable<TypesData>[number] };

core/app/components/IntegrationActions.tsx

@@ -1,4 +1,4 @@
-import { Popover, PopoverTrigger, Button, PopoverContent } from "ui";
+import { Button } from "ui/button";
 import { PubPayload } from "~/lib/types";
 
 type Props = {

core/app/components/LogoutButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { supabase } from "~/lib/supabase";
-import { Button } from "ui";
+import { Button } from "ui/button";
 import { useRouter } from "next/navigation";
 
 export default function LogoutButton() {

core/app/components/PubRow.tsx

@@ -2,7 +2,8 @@
 
 import Link from "next/link";
 import React, { Fragment } from "react";
-import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from "ui";
+import { Button } from "ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "ui/collapsible";
 import { cn } from "utils";
 import { PubPayload } from "~/lib/types";
 import IntegrationActions from "./IntegrationActions";
@@ -48,7 +49,10 @@ const ChildHierarchy = ({ pub }: { pub: PubPayload["children"][number] }) => {
 								<span className="text-gray-500 mr-2 font-semibold">
 									{group.pubType.name}
 								</span>
-								<Link href={`/pubs/${child.id}`} className="text-sm hover:underline">
+								<Link
+									href={`/pubs/${child.id}`}
+									className="text-sm hover:underline"
+								>
 									{getTitle(child)}
 								</Link>
 							</div>

core/app/components/Row.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { PropsWithChildren } from "react";
-import { Card, CardContent, CardFooter, CardHeader } from "ui";
+import { Card, CardContent, CardFooter, CardHeader } from "ui/card";
 import { cn } from "utils";
 
 type Props = PropsWithChildren<{ className?: string }>;

core/app/layout.tsx

@@ -1,7 +1,7 @@
-import { Toaster } from "ui";
+import { Toaster } from "ui/toaster";
 import "ui/styles.css";
 import InitClient from "./InitClient";
-import { PublicEnvProvider } from 'next-runtime-env';
+import { PublicEnvProvider } from "next-runtime-env";
 import "./globals.css";
 
 export const metadata = {
@@ -13,11 +13,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 	return (
 		<html lang="en">
 			<body>
-        <PublicEnvProvider>
-          <InitClient />
-            {children}
-          <Toaster />
-        </PublicEnvProvider>
+				<PublicEnvProvider>
+					<InitClient />
+					{children}
+					<Toaster />
+				</PublicEnvProvider>
 			</body>
 		</html>
 	);

core/lib/supabase.ts

@@ -11,4 +11,5 @@ export const createBrowserSupabase = (url, publicKey) => {
 	});
 };
 
-export const formatSupabaseError = (error: AuthError) => `${error.name} ${error.status}: ${error.message}`
+export const formatSupabaseError = (error: AuthError) =>
+	`${error.name} ${error.status}: ${error.message}`;

core/scripts/invite.ts

@@ -8,7 +8,7 @@ import { randomUUID } from "crypto";
 import { unJournalId } from "../prisma/exampleCommunitySeeds/unjournal";
 
 const getServerSupabase = () => {
-  // can use the process.env here, because this code only runs in server context
+	// can use the process.env here, because this code only runs in server context
 	const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
 	const key = process.env.SUPABASE_SERVICE_ROLE_KEY;
 	if (!url || !key) {

infrastructure/terraform/aws/README.md

@@ -3,6 +3,7 @@
 ## Dependencies
 
 ### State file bucket/config
+
 You must have some way of storing terraform state files.
 We use and recommend the s3 backend, but you can change
 that configuration. In order to keep this code generic, however,
@@ -24,7 +25,6 @@ If you need to change the backend, update this file and `init` again.
 the module exposes its configuration area, but those configurations
 need to be supplied at plan/apply time using the flag `-var-file=demo-env.tfvars`.
 
-
 ## Adding secrets
 
 To provide secrets to ECS containers, you should put them in AWS Secrets Manager.