RFC/refactor: code-split ui package

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

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

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,6 @@
 "use client";
 import React, { useState, FormEvent } from "react";
-import { Button } from "ui";
+import { Button } from "ui/button";
 import { formatSupabaseError, supabase } from "lib/supabase";
 import { useRouter } from "next/navigation";
 

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

@@ -4,7 +4,8 @@ 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 } from "ui";
+import { Button } from "ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "ui/avatar";
 import LogoutButton from "~/app/components/LogoutButton";
 import { UserPutBody, UserSettings } from "~/lib/types";
 

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/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,4 +1,4 @@
-import { Toaster } from "ui";
+import { Toaster } from "ui/toaster";
 import "ui/styles.css";
 import InitClient from "./InitClient";
 import "./globals.css";

integrations/evaluations/app/actions/evaluate/evaluate.tsx

@@ -7,12 +7,16 @@ import Ajv from "ajv";
 import { fullFormats } from "ajv-formats/dist/formats";
 import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
-import { Button, Form, Icon, useLocalStorage, useToast } from "ui";
 import { Process } from "~/lib/components/Process";
 import { Research } from "~/lib/components/Research";
 import { EvaluatorWhoAccepted, InstanceConfig } from "~/lib/types";
 import { submit, upload } from "./actions";
 import { calculateDeadline } from "~/lib/emails";
+import { useToast } from "ui/use-toast";
+import { useLocalStorage } from "ui/hooks";
+import { Form } from "ui/form";
+import { Button } from "ui/button";
+import { Loader2 } from "ui/icon";
 
 type Props = {
 	instanceId: string;
@@ -124,7 +128,7 @@ export function Evaluate(props: Props) {
 						{formFieldsFromSchema}
 						<Button type="submit" disabled={!form.formState.isValid}>
 							{form.formState.isSubmitting && (
-								<Icon.Loader2 className="h-4 w-4 mr-2 animate-spin" />
+								<Loader2 className="h-4 w-4 mr-2 animate-spin" />
 							)}
 							Submit Evaluation
 						</Button>

integrations/evaluations/app/actions/manage/EvaluatorInviteForm.tsx

@@ -4,28 +4,18 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { GetPubResponseBody } from "@pubpub/sdk";
 import React, { useCallback } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
-import {
-	Button,
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-	Form,
-	FormDescription,
-	FormItem,
-	FormLabel,
-	Icon,
-	useToast,
-} from "ui";
 import { cn } from "utils";
 import { EmailTemplate, Evaluator, InstanceConfig, hasUser, isInvited, isSaved } from "~/lib/types";
 import { EvaluatorInviteFormInviteButton } from "./EvaluatorInviteFormInviteButton";
 import { EvaluatorInviteFormSaveButton } from "./EvaluatorInviteFormSaveButton";
 import { EvaluatorInviteRow } from "./EvaluatorInviteRow";
 import * as actions from "./actions";
 import { InviteFormEvaluator, InviteFormSchema } from "./types";
+import { useToast } from "ui/use-toast";
+import { Form, FormDescription, FormItem, FormLabel } from "ui/form";
+import { Button } from "ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "ui/card";
+import { Loader2, Plus } from "ui/icon";
 
 type Props = {
 	evaluators: Evaluator[];
@@ -223,7 +213,7 @@ export function EvaluatorInviteForm(props: Props) {
 						/>
 					))}
 					<Button variant="ghost" onClick={onAppend} className="color:red-500">
-						<Icon.Plus className="h-4 w-4 mr-2" />
+						<Plus className="h-4 w-4 mr-2" />
 						Add Evaluator
 					</Button>
 				</CardContent>
@@ -235,7 +225,7 @@ export function EvaluatorInviteForm(props: Props) {
 					</div>
 					<div className="flex gap-2 items-center">
 						{form.formState.isSubmitting && (
-							<Icon.Loader2 className="h-4 w-4 mr-2 animate-spin" />
+							<Loader2 className="h-4 w-4 mr-2 animate-spin" />
 						)}
 						<EvaluatorInviteFormInviteButton
 							onClick={form.handleSubmit((values) => onSubmit(values, true))}

integrations/evaluations/app/actions/manage/EvaluatorInviteFormInviteButton.tsx

@@ -1,5 +1,7 @@
 import { useFormState, useWatch } from "react-hook-form";
-import { Button, Icon } from "ui";
+import { Button } from "ui/button";
+import { Send } from "ui/icon";
+
 import { InviteFormSchema } from "./types";
 
 export type EvaluatorInviteFormInviteButtonProps = {
@@ -16,7 +18,7 @@ export function EvaluatorInviteFormInviteButton(props: EvaluatorInviteFormInvite
 				!form.evaluators?.some((evaluator) => evaluator.selected) || formState.isSubmitting
 			}
 		>
-			<Icon.Send className="h-4 w-4 mr-2" />
+			<Send className="h-4 w-4 mr-2" />
 			Invite
 		</Button>
 	);

integrations/evaluations/app/actions/manage/EvaluatorInviteFormSaveButton.tsx

@@ -1,5 +1,5 @@
 import { useFormState } from "react-hook-form";
-import { Button, Icon } from "ui";
+import { Button } from "ui/button";
 
 export type EvaluatorInviteFormSaveButtonProps = {
 	onClick: () => void;

integrations/evaluations/app/actions/manage/EvaluatorInviteRow.tsx

@@ -2,7 +2,10 @@
 
 import { SuggestedMembersQuery } from "@pubpub/sdk";
 import { Control, useWatch } from "react-hook-form";
-import { Button, FormControl, FormField, FormItem, FormMessage, Icon, Input } from "ui";
+import { Button } from "ui/button";
+import { Input } from "ui/input";
+import { FormControl, FormField, FormItem, FormMessage } from "ui/form";
+import { X } from "ui/icon";
 import { cn } from "utils";
 import { hasUser } from "~/lib/types";
 import { EvaluatorInviteRowEmailDialog } from "./EvaluatorInviteRowEmailDialog";
@@ -115,7 +118,7 @@ export const EvaluatorInviteRow = (props: Props) => {
 					)}
 					<EvaluatorInviteRowEmailDialog evaluator={evaluator} index={props.index} />
 					<Button variant="ghost" onClick={() => props.onRemove(props.index)}>
-						<Icon.X className="h-4 w-4" />
+						<X className="h-4 w-4" />
 					</Button>
 				</div>
 			</div>