update

README.md

@@ -29,17 +29,21 @@ Oxc is 4x faster than swc, and 40x faster than Babel.
 ### MacBook Pro M3 Max
 
 ```
+  oxc - src/transform.bench.js > UserSettings.tsx
+    6.43x faster than swc
+    67.96x faster than babel
+
   oxc - src/transform.bench.js > parser.ts
-    3.94x faster than swc
-    43.64x faster than babel
+    3.55x faster than swc
+    44.01x faster than babel
 
   oxc - src/transform.bench.js > renderer.ts
-    3.98x faster than swc
-    41.86x faster than babel
+    3.62x faster than swc
+    24.58x faster than babel
 
   oxc - src/transform.bench.js > table.tsx
-    4.28x faster than swc
-    36.14x faster than babel
+    4.22x faster than swc
+    34.35x faster than babel
 ```
 
 ## Isolated Declarations DTS Emit
@@ -98,6 +102,7 @@ For package download size, oxc downloads 2 packages for around a total of 2MB.
 * [TypeScript/src/compiler/parser.ts](https://github.com/microsoft/TypeScript/blob/3ad0f752482f5e846dc35a69572ccb43311826c0/src/compiler/parser.ts) - an atypical large file with 10777 lines.
 * [vuejs/core/packages/runtime-core/src/renderer.ts](https://github.com/vuejs/core/blob/cb34b28a4a9bf868be4785b001c526163eda342e/packages/runtime-core/src/renderer.ts) - somewhat large library file with 2550 lines.
 * [AFFiNE/packages/frontend/core/src/components/affine/page-properties/table.tsx](https://github.com/toeverything/AFFiNE/blob/a9b29d24f1f6e5563e43a11b5cbcfb30c9981d25/packages/frontend/core/src/components/affine/page-properties/table.tsx) - a tsx file with 1118 lines.
+* [cal.com/apps/web/components/getting-started/steps-views/UserSettings.tsx](https://github.com/calcom/cal.com/blob/20729b3a4e62c52f49419d2c3b30225f0c7a5936/apps/web/components/getting-started/steps-views/UserSettings.tsx) - a typical 124 lines of tsx code.
 
 ### NOTE:
 

fixtures/UserSettings.tsx

@@ -0,0 +1,124 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import dayjs from "@calcom/dayjs";
+import { useTimePreferences } from "@calcom/features/bookings/lib";
+import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
+import { trpc } from "@calcom/trpc/react";
+import { Button, TimezoneSelect, Icon, Input } from "@calcom/ui";
+
+import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
+
+interface IUserSettingsProps {
+  nextStep: () => void;
+  hideUsername?: boolean;
+}
+
+const UserSettings = (props: IUserSettingsProps) => {
+  const { nextStep } = props;
+  const [user] = trpc.viewer.me.useSuspenseQuery();
+  const { t } = useLocale();
+  const { setTimezone: setSelectedTimeZone, timezone: selectedTimeZone } = useTimePreferences();
+  const telemetry = useTelemetry();
+  const userSettingsSchema = z.object({
+    name: z
+      .string()
+      .min(1)
+      .max(FULL_NAME_LENGTH_MAX_LIMIT, {
+        message: t("max_limit_allowed_hint", { limit: FULL_NAME_LENGTH_MAX_LIMIT }),
+      }),
+  });
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<z.infer<typeof userSettingsSchema>>({
+    defaultValues: {
+      name: user?.name || "",
+    },
+    reValidateMode: "onChange",
+    resolver: zodResolver(userSettingsSchema),
+  });
+
+  useEffect(() => {
+    telemetry.event(telemetryEventTypes.onboardingStarted);
+  }, [telemetry]);
+
+  const utils = trpc.useUtils();
+  const onSuccess = async () => {
+    await utils.viewer.me.invalidate();
+    nextStep();
+  };
+  const mutation = trpc.viewer.updateProfile.useMutation({
+    onSuccess: onSuccess,
+  });
+
+  const onSubmit = handleSubmit((data) => {
+    mutation.mutate({
+      name: data.name,
+      timeZone: selectedTimeZone,
+    });
+  });
+
+  return (
+    <form onSubmit={onSubmit}>
+      <div className="space-y-6">
+        {/* Username textfield: when not coming from signup */}
+        {!props.hideUsername && <UsernameAvailabilityField />}
+
+        {/* Full name textfield */}
+        <div className="w-full">
+          <label htmlFor="name" className="text-default mb-2 block text-sm font-medium">
+            {t("full_name")}
+          </label>
+          <Input
+            {...register("name", {
+              required: true,
+            })}
+            id="name"
+            name="name"
+            type="text"
+            autoComplete="off"
+            autoCorrect="off"
+          />
+          {errors.name && (
+            <p data-testid="required" className="py-2 text-xs text-red-500">
+              {errors.name.message}
+            </p>
+          )}
+        </div>
+        {/* Timezone select field */}
+        <div className="w-full">
+          <label htmlFor="timeZone" className="text-default block text-sm font-medium">
+            {t("timezone")}
+          </label>
+
+          <TimezoneSelect
+            id="timeZone"
+            value={selectedTimeZone}
+            onChange={({ value }) => setSelectedTimeZone(value)}
+            className="mt-2 w-full rounded-md text-sm"
+          />
+
+          <p className="text-subtle mt-3 flex flex-row font-sans text-xs leading-tight">
+            {t("current_time")} {dayjs().tz(selectedTimeZone).format("LT").toString().toLowerCase()}
+          </p>
+        </div>
+      </div>
+      <Button
+        type="submit"
+        className="mt-8 flex w-full flex-row justify-center"
+        loading={mutation.isPending}
+        disabled={mutation.isPending}>
+        {t("next_step_text")}
+        <Icon name="arrow-right" className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+      </Button>
+    </form>
+  );
+};
+
+export { UserSettings };