@goplusvn/core 0.1.0 → 0.1.1

package/src/user/components/profile-info-form.tsx

@@ -0,0 +1,390 @@
+"use client";
+
+import { useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+
+import type { ChangeEvent } from "react";
+import type { ProfileInfoFormType, UserType } from "../types";
+import type { DictionaryType } from "../../hooks";
+
+import { ProfileInfoSchema } from "../schemas";
+
+import { cn, getInitials } from "../../utils";
+
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui";
+import { Button, ButtonLoading, buttonVariants } from "../../ui";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../../ui";
+import { Input } from "../../ui";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../ui";
+
+interface ProfileInfoFormProps {
+  user: UserType;
+  dictionary?: DictionaryType;
+}
+
+export function ProfileInfoForm({ user, dictionary }: ProfileInfoFormProps) {
+  const t = dictionary?.profile;
+  const fields = t?.fields;
+  const placeholders = t?.placeholders;
+  const buttons = t?.buttons;
+  
+  const [photoPreview, setPhotoPreview] = useState<string | undefined>(
+    user?.avatar,
+  );
+
+  const form = useForm<ProfileInfoFormType>({
+    resolver: zodResolver(ProfileInfoSchema),
+    values: {
+      ...user,
+      avatar: undefined,
+    },
+  });
+
+  const { isSubmitting, isDirty } = form.formState;
+  const isDisabled = isSubmitting || !isDirty;
+
+  async function onSubmit(_data: ProfileInfoFormType) {}
+
+  function handleResetForm() {
+    form.reset();
+    setPhotoPreview(user?.avatar);
+  }
+
+  function handleUploadPhoto(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (file) {
+      const imageUrl = URL.createObjectURL(file);
+      setPhotoPreview(imageUrl);
+      form.setValue("avatar", file);
+      form.trigger("avatar");
+    }
+  }
+
+  function handleRemovePhoto() {
+    form.resetField("avatar");
+    setPhotoPreview(undefined);
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-y-3">
+        <div className="flex items-center gap-x-4">
+          <Avatar className="size-22">
+            <AvatarImage src={photoPreview} alt="Profile Avatar" />
+            <AvatarFallback>{getInitials(user.name)}</AvatarFallback>
+          </Avatar>
+          <div className="grid gap-2">
+            <FormField
+              control={form.control}
+              name="avatar"
+              render={() => (
+                <FormItem>
+                  <FormLabel
+                    className={cn(
+                      buttonVariants({ variant: "default" }),
+                      "cursor-pointer w-full",
+                    )}
+                  >
+                    {buttons?.uploadPhoto || "Upload Photo"}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleUploadPhoto}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={handleRemovePhoto}
+            >
+              {buttons?.removePhoto || "Remove Photo"}
+            </Button>
+          </div>
+        </div>
+        <div className="grid gap-2 md:grid-cols-2">
+          <FormField
+            control={form.control}
+            name="firstName"
+            render={({ field }) => (
+              <FormItem className="grow">
+                <FormLabel>{fields?.firstName || "First Name"}</FormLabel>
+                <FormControl>
+                  <Input type="text" placeholder={placeholders?.firstName || "John"} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="lastName"
+            render={({ field }) => (
+              <FormItem className="grow">
+                <FormLabel>{fields?.lastName || "Last Name"}</FormLabel>
+                <FormControl>
+                  <Input type="text" placeholder={placeholders?.lastName || "Doe"} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{fields?.username || "Username"}</FormLabel>
+                <FormControl>
+                  <Input type="text" placeholder={placeholders?.username || "john_doe"} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{fields?.email || "Email"}</FormLabel>
+                <FormControl>
+                  <Input
+                    type="email"
+                    placeholder={placeholders?.email || "name@example.com"}
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="state"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{fields?.state || "State"}</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder={placeholders?.selectState || "Select a state"} />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {[
+                      "Alabama", "Alaska", "Arizona", "Arkansas", "California",
+                      "Colorado", "Connecticut", "Delaware", "Florida", "Georgia",
+                      "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa",
+                      "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland",
+                      "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri",
+                      "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey",
+                      "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio",
+                      "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina",
+                      "South Dakota", "Tennessee", "Texas", "Utah", "Vermont",
+                      "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming",
+                    ].map((state) => (
+                      <SelectItem key={state} value={state}>
+                        {state}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="country"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{fields?.country || "Country"}</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder={placeholders?.selectCountry || "Select a country"} />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {[
+                      "United States", "Canada", "United Kingdom", "Australia",
+                      "Germany", "France", "Japan", "China", "India", "Brazil",
+                    ].map((country) => (
+                      <SelectItem key={country} value={country}>
+                        {country}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="address"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{fields?.address || "Address"}</FormLabel>
+                <FormControl>
+                  <Input type="text" placeholder={placeholders?.address || "123 Main St"} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="zipCode"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{fields?.zipCode || "Zip Code"}</FormLabel>
+                <FormControl>
+                  <Input type="text" placeholder={placeholders?.zipCode || "90210"} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="language"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{fields?.language || "Preferred Language"}</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder={placeholders?.selectLanguage || "Select a language"} />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {[
+                      "English", "Spanish", "French", "German", "Chinese",
+                      "Japanese", "Arabic", "Portuguese", "Russian", "Hindi",
+                    ].map((language) => (
+                      <SelectItem key={language} value={language}>
+                        {language}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="timeZone"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{fields?.timeZone || "Time Zone"}</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder={placeholders?.selectTimeZone || "Select a time zone"} />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {[
+                      "GMT-12:00", "GMT-11:00", "GMT-10:00", "GMT-09:00", "GMT-08:00",
+                      "GMT-07:00", "GMT-06:00", "GMT-05:00", "GMT-04:00", "GMT-03:00",
+                      "GMT-02:00", "GMT-01:00", "GMT+00:00", "GMT+01:00", "GMT+02:00",
+                      "GMT+03:00", "GMT+04:00", "GMT+05:00", "GMT+06:00", "GMT+07:00",
+                      "GMT+08:00", "GMT+09:00", "GMT+10:00", "GMT+11:00", "GMT+12:00",
+                    ].map((timezone) => (
+                      <SelectItem key={timezone} value={timezone}>
+                        {timezone}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="currency"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{fields?.currency || "Currency"}</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder={placeholders?.selectCurrency || "Select a currency"} />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {[
+                      "USD", "EUR", "GBP", "JPY", "CAD",
+                      "AUD", "CHF", "CNY", "INR", "BRL",
+                    ].map((currency) => (
+                      <SelectItem key={currency} value={currency}>
+                        {currency}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="organization"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{fields?.organization || "Organization (Optional)"}</FormLabel>
+                <FormControl>
+                  <Input type="text" placeholder={placeholders?.organization || "Company Name"} {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <div className="flex gap-x-2 mt-2">
+          <ButtonLoading
+            isLoading={isSubmitting}
+            className="w-fit"
+            disabled={isDisabled}
+          >
+            {buttons?.save || "Save"}
+          </ButtonLoading>
+          <Button
+            type="reset"
+            variant="secondary"
+            className="w-fit"
+            disabled={isDisabled}
+            onClick={handleResetForm}
+          >
+            {buttons?.reset || "Reset"}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

package/src/user/components/profile-info.tsx

@@ -0,0 +1,32 @@
+import type { UserType } from "../types";
+import type { DictionaryType } from "../../hooks";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../ui";
+import { ProfileInfoForm } from "./profile-info-form";
+
+interface ProfileInfoProps {
+  user: UserType;
+  dictionary?: DictionaryType;
+}
+
+export function ProfileInfo({ user, dictionary }: ProfileInfoProps) {
+  const t = dictionary?.profile;
+  
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t?.title || "Profile Information"}</CardTitle>
+        <CardDescription>{t?.description || "Update your public profile details."}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ProfileInfoForm user={user} dictionary={dictionary} />
+      </CardContent>
+    </Card>
+  );
+}