Dark theme & color customizations (#194)

packages/ui/src/components/spaces/space-create-dialog.tsx

@@ -1,36 +1,16 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
-import { z } from 'zod/v4';
 
-import { Button } from '@colanode/ui/components/ui/button';
+import { SpaceForm } from '@colanode/ui/components/spaces/space-form';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@colanode/ui/components/ui/dialog';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@colanode/ui/components/ui/form';
-import { Input } from '@colanode/ui/components/ui/input';
-import { Spinner } from '@colanode/ui/components/ui/spinner';
-import { Textarea } from '@colanode/ui/components/ui/textarea';
 import { useWorkspace } from '@colanode/ui/contexts/workspace';
 import { useMutation } from '@colanode/ui/hooks/use-mutation';
 
-const formSchema = z.object({
-  name: z.string().min(3, 'Name must be at least 3 characters long.'),
-  description: z.string(),
-});
-
 interface SpaceCreateDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -43,102 +23,48 @@ export const SpaceCreateDialog = ({
   const workspace = useWorkspace();
   const { mutate, isPending } = useMutation();
 
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      name: '',
-      description: '',
-    },
-  });
-
-  const handleCancel = () => {
-    form.reset();
-    onOpenChange(false);
-  };
-
-  const handleSubmit = async (values: z.infer<typeof formSchema>) => {
-    if (isPending) {
-      return;
-    }
-
-    if (values.name.length < 3) {
-      return;
-    }
-
-    mutate({
-      input: {
-        type: 'space.create',
-        name: values.name,
-        description: values.description,
-        accountId: workspace.accountId,
-        workspaceId: workspace.id,
-      },
-      onSuccess() {
-        onOpenChange(false);
-        form.reset();
-      },
-      onError(error) {
-        toast.error(error.message);
-      },
-    });
-  };
-
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent className="w-xl max-w-xl min-w-xl">
         <DialogHeader>
           <DialogTitle>Create space</DialogTitle>
           <DialogDescription>
             Create a new space to collaborate with your peers
           </DialogDescription>
         </DialogHeader>
-        <Form {...form}>
-          <form
-            className="flex flex-col"
-            onSubmit={form.handleSubmit(handleSubmit)}
-          >
-            <div className="flex-grow space-y-4 py-2 pb-4">
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem className="flex-1">
-                    <FormLabel>Name *</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Name" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="description"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Description</FormLabel>
-                    <FormControl>
-                      <Textarea
-                        placeholder="Write a short description about the workspace"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-            <DialogFooter>
-              <Button type="button" variant="outline" onClick={handleCancel}>
-                Cancel
-              </Button>
-              <Button type="submit" disabled={isPending}>
-                {isPending && <Spinner className="mr-1" />}
-                Create
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
+        <SpaceForm
+          onSubmit={(values) => {
+            if (isPending) {
+              return;
+            }
+
+            if (values.name.length < 3) {
+              return;
+            }
+
+            mutate({
+              input: {
+                type: 'space.create',
+                name: values.name,
+                description: values.description,
+                avatar: values.avatar,
+                accountId: workspace.accountId,
+                workspaceId: workspace.id,
+              },
+              onSuccess() {
+                onOpenChange(false);
+              },
+              onError(error) {
+                toast.error(error.message);
+              },
+            });
+          }}
+          isSaving={isPending}
+          onCancel={() => {
+            onOpenChange(false);
+          }}
+          saveText="Create"
+        />
       </DialogContent>
     </Dialog>
   );