Radix UI Switch (#2075)

* Radix UI Switch

Making all switches consistent - using Raxix UI design instead of headless

* Moving Switch Component to Monorepo

* Update apps/web/components/booking/TimeOptions.tsx

* Fix stripe data import

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Omar López <zomars@me.com>
Co-authored-by: Alan <alannnc@gmail.com>

apps/web/components/booking/TimeOptions.tsx

@@ -1,9 +1,8 @@
-// TODO: replace headlessui with radix-ui
-import { Switch } from "@headlessui/react";
 import { FC, useEffect, useState } from "react";
 import TimezoneSelect, { ITimezoneOption } from "react-timezone-select";
 
-import classNames from "@lib/classNames";
+import Switch from "@calcom/ui/Switch";
+
 import { useLocale } from "@lib/hooks/useLocale";
 
 import { is24h, timeZone } from "../../lib/clock";
@@ -36,34 +35,17 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone }) => {
   return selectedTimeZone !== "" ? (
     <div className="max-w-80 absolute z-10 w-full rounded-sm border border-gray-200 bg-white px-4 py-2 dark:border-0 dark:bg-gray-700">
       <div className="mb-4 flex">
-        <div className="w-1/2 font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
-        <div className="w-1/2">
-          <Switch.Group as="div" className="flex items-center justify-end">
-            <Switch.Label as="span" className="ltr:mr-3">
-              <span className="text-sm text-gray-500 dark:text-white">{t("am_pm")}</span>
-            </Switch.Label>
-            <Switch
-              checked={is24hClock}
-              onChange={handle24hClockToggle}
-              className={classNames(
-                is24hClock
-                  ? "bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast"
-                  : "bg-gray-200 dark:bg-gray-600",
-                "relative inline-flex h-5 w-8 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
-              )}>
-              <span className="sr-only">{t("use_setting")}</span>
-              <span
-                aria-hidden="true"
-                className={classNames(
-                  is24hClock ? "translate-x-3" : "translate-x-0",
-                  "pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
-                )}
-              />
-            </Switch>
-            <Switch.Label as="span" className="ltr:ml-3 rtl:mr-3">
-              <span className="text-sm text-gray-500 dark:text-white">{t("24_h")}</span>
-            </Switch.Label>
-          </Switch.Group>
+        <div className="font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
+        <div className="ml-auto flex items-center">
+          <label className="ltl:mr-3 mr-2 align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3 dark:text-white">
+            {t("am_pm")}
+          </label>
+          <Switch
+            name="24hClock"
+            label={t("24_h")}
+            defaultChecked={is24hClock}
+            onCheckedChange={handle24hClockToggle}
+          />
         </div>
       </div>
       <TimezoneSelect

apps/web/components/integrations/CalendarListContainer.tsx

@@ -1,6 +1,8 @@
 import React, { Fragment } from "react";
 import { useMutation } from "react-query";
 
+import Switch from "@calcom/ui/Switch";
+
 import { QueryCell } from "@lib/QueryCell";
 import { useLocale } from "@lib/hooks/useLocale";
 import showToast from "@lib/notification";
@@ -11,7 +13,6 @@ import { List } from "@components/List";
 import { ShellSubHeading } from "@components/Shell";
 import { Alert } from "@components/ui/Alert";
 import Button from "@components/ui/Button";
-import Switch from "@components/ui/Switch";
 
 import ConnectIntegration from "./ConnectIntegrations";
 import DisconnectIntegration from "./DisconnectIntegration";

apps/web/components/webhook/WebhookDialogForm.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
+import Switch from "@calcom/ui/Switch";
+
 import { useLocale } from "@lib/hooks/useLocale";
 import showToast from "@lib/notification";
 import { trpc } from "@lib/trpc";
@@ -10,7 +12,6 @@ import customTemplate, { hasTemplateIntegration } from "@lib/webhooks/integratio
 import { DialogFooter } from "@components/Dialog";
 import { FieldsetLegend, Form, InputGroupBox, TextArea, TextField } from "@components/form/fields";
 import Button from "@components/ui/Button";
-import Switch from "@components/ui/Switch";
 import { TWebhook } from "@components/webhook/WebhookListItem";
 import WebhookTestDisclosure from "@components/webhook/WebhookTestDisclosure";
 

apps/web/pages/event-types/[type].tsx

@@ -28,6 +28,7 @@ import Select from "react-select";
 import { JSONObject } from "superjson/dist/types";
 
 import { StripeData } from "@calcom/stripe/server";
+import Switch from "@calcom/ui/Switch";
 
 import { asStringOrThrow, asStringOrUndefined } from "@lib/asStringOrNull";
 import { getSession } from "@lib/auth";
@@ -52,7 +53,6 @@ import CustomInputTypeForm from "@components/pages/eventtypes/CustomInputTypeFor
 import Button from "@components/ui/Button";
 import InfoBadge from "@components/ui/InfoBadge";
 import { Scheduler } from "@components/ui/Scheduler";
-import Switch from "@components/ui/Switch";
 import CheckboxField from "@components/ui/form/CheckboxField";
 import CheckedSelect from "@components/ui/form/CheckedSelect";
 import { DateRangePicker } from "@components/ui/form/DateRangePicker";

packages/config/tailwind-preset.js

@@ -3,6 +3,7 @@ module.exports = {
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
     "./ee/components/**/*.{js,ts,jsx,tsx}",
+    "../../packages/ui/**/*.{js,ts,jsx,tsx}",
   ],
   darkMode: "class",
   theme: {

packages/ui/Switch.tsx

@@ -3,7 +3,7 @@ import * as Label from "@radix-ui/react-label";
 import * as PrimitiveSwitch from "@radix-ui/react-switch";
 import React, { useState } from "react";
 
-import classNames from "@lib/classNames";
+import classNames from "@calcom/lib/classNames";
 
 type SwitchProps = React.ComponentProps<typeof PrimitiveSwitch.Root> & {
   label: string;
@@ -37,7 +37,7 @@ export default function Switch(props: SwitchProps) {
       {label && (
         <Label.Root
           htmlFor={id}
-          className="cursor-pointer align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3">
+          className="cursor-pointer align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3 dark:text-white">
           {label}
         </Label.Root>
       )}

packages/ui/index.tsx

@@ -1,3 +1,4 @@
 import * as React from "react";
 
 export * from "./Button";
+export * from "./Switch";