refactor: radio area group (#9113)

* refactor: radio area group

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* chore: remove select

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: e2e test

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

.github/workflows/semantic-pull-requests.yml

@@ -0,0 +1,21 @@
+name: "Validate PRs"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+      - edited
+      - synchronize
+
+permissions:
+  pull-requests: read
+
+jobs:
+  validate-pr:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

apps/web/playwright/managed-event-types.e2e.ts

@@ -39,10 +39,10 @@ test.describe("Managed Event Types tests", () => {
       await page.click("[data-testid=new-event-type-dropdown]");
       await page.click("[data-testid=option-team-1]");
       // Expecting we can add a managed event type as team owner
-      await expect(page.locator('input[value="MANAGED"]')).toBeVisible();
+      await expect(page.locator('button[value="MANAGED"]')).toBeVisible();
 
       // Actually creating a managed event type to test things further
-      await page.click('input[value="MANAGED"]');
+      await page.click('button[value="MANAGED"]');
       await page.fill("[name=title]", "managed");
       await page.click("[type=submit]");
     });

packages/app-store/stripepayment/LICENSE

@@ -1,4 +1,4 @@
-The Cal.com Enterprise Edition (EE) license (the “EE License”)
+The Cal.com Commercial License (EE) license (the “EE License”)
 Copyright (c) 2020-present Cal.com, Inc
 
 With regard to the Cal.com Software:
@@ -8,7 +8,7 @@ used in production, if you (and any entity that you represent) have agreed to,
 and are in compliance with, the Cal.com Subscription Terms available
 at https://cal.com/terms (the “EE Terms”), or other agreements governing
 the use of the Software, as mutually agreed by you and Cal.com, Inc ("Cal.com"),
-and otherwise have a valid Cal.com Enterprise Edition subscription ("EE Subscription")
+and otherwise have a valid Cal.com Commercial License subscription ("EE Subscription")
 for the correct number of hosts as defined in the EE Terms ("Hosts"). Subject to the foregoing sentence,
 you are free to modify this Software and publish patches to the Software. You agree
 that Cal.com and/or its licensors (as applicable) retain all right, title and interest in

packages/embeds/embed-core/LICENSE

@@ -1,4 +1,4 @@
-The Cal.com Enterprise Edition (EE) license (the “EE License”)
+The Cal.com Commercial License (EE) license (the “EE License”)
 Copyright (c) 2020-present Cal.com, Inc
 
 With regard to the Cal.com Software:
@@ -8,7 +8,7 @@ used in production, if you (and any entity that you represent) have agreed to,
 and are in compliance with, the Cal.com Subscription Terms available
 at https://cal.com/terms (the “EE Terms”), or other agreements governing
 the use of the Software, as mutually agreed by you and Cal.com, Inc ("Cal.com"),
-and otherwise have a valid Cal.com Enterprise Edition subscription ("EE Subscription")
+and otherwise have a valid Cal.com Commercial License subscription ("EE Subscription")
 for the correct number of hosts as defined in the EE Terms ("Hosts"). Subject to the foregoing sentence,
 you are free to modify this Software and publish patches to the Software. You agree
 that Cal.com and/or its licensors (as applicable) retain all right, title and interest in

packages/embeds/embed-react/LICENSE

@@ -1,4 +1,4 @@
-The Cal.com Enterprise Edition (EE) license (the “EE License”)
+The Cal.com Commercial License (EE) license (the “EE License”)
 Copyright (c) 2020-present Cal.com, Inc
 
 With regard to the Cal.com Software:
@@ -8,7 +8,7 @@ used in production, if you (and any entity that you represent) have agreed to,
 and are in compliance with, the Cal.com Subscription Terms available
 at https://cal.com/terms (the “EE Terms”), or other agreements governing
 the use of the Software, as mutually agreed by you and Cal.com, Inc ("Cal.com"),
-and otherwise have a valid Cal.com Enterprise Edition subscription ("EE Subscription")
+and otherwise have a valid Cal.com Commercial License subscription ("EE Subscription")
 for the correct number of hosts as defined in the EE Terms ("Hosts"). Subject to the foregoing sentence,
 you are free to modify this Software and publish patches to the Software. You agree
 that Cal.com and/or its licensors (as applicable) retain all right, title and interest in

packages/embeds/embed-snippet/LICENSE

@@ -1,4 +1,4 @@
-The Cal.com Enterprise Edition (EE) license (the “EE License”)
+The Cal.com Commercial License (EE) license (the “EE License”)
 Copyright (c) 2020-present Cal.com, Inc
 
 With regard to the Cal.com Software:
@@ -8,7 +8,7 @@ used in production, if you (and any entity that you represent) have agreed to,
 and are in compliance with, the Cal.com Subscription Terms available
 at https://cal.com/terms (the “EE Terms”), or other agreements governing
 the use of the Software, as mutually agreed by you and Cal.com, Inc ("Cal.com"),
-and otherwise have a valid Cal.com Enterprise Edition subscription ("EE Subscription")
+and otherwise have a valid Cal.com Commercial License subscription ("EE Subscription")
 for the correct number of hosts as defined in the EE Terms ("Hosts"). Subject to the foregoing sentence,
 you are free to modify this Software and publish patches to the Software. You agree
 that Cal.com and/or its licensors (as applicable) retain all right, title and interest in

packages/features/ee/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/ee",
-  "description": "Cal.com Enterprise Edition features",
+  "description": "Cal.com Commercial License features",
   "version": "0.0.0",
   "private": true,
   "license": "See license in LICENSE",

packages/features/eventtypes/components/CreateEventTypeDialog.tsx

@@ -254,6 +254,9 @@ export default function CreateEventTypeDialog({
                   />
                 )}
                 <RadioArea.Group
+                  onValueChange={(val: SchedulingType) => {
+                    form.setValue("schedulingType", val);
+                  }}
                   className={classNames(
                     "mt-1 flex gap-4",
                     isAdmin && flags["managed-event-types"] && "flex-col"

packages/ui/form/radio-area/RadioAreaGroup.tsx

@@ -1,59 +1,57 @@
-import React from "react";
+import { useId } from "@radix-ui/react-id";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import type { ReactNode } from "react";
 
 import classNames from "@calcom/lib/classNames";
 
-type RadioAreaProps = React.InputHTMLAttributes<HTMLInputElement> & { classNames?: { container?: string } };
+type RadioAreaProps = RadioGroupPrimitive.RadioGroupItemProps & {
+  children: ReactNode;
+  classNames?: { container?: string };
+};
 
-const RadioArea = React.forwardRef<HTMLInputElement, RadioAreaProps>(
-  ({ children, className, classNames: innerClassNames, ...props }, ref) => {
-    return (
-      <label className={classNames("relative flex", className)}>
-        <input
-          ref={ref}
-          className="text-emphasis bg-subtle border-emphasis focus:ring-none peer absolute top-[0.9rem] left-3 align-baseline"
-          type="radio"
-          {...props}
-        />
-        <div
-          className={classNames(
-            "text-default peer-checked:border-emphasis border-subtle rounded-md border p-4 pt-3 pl-10",
-            innerClassNames?.container
-          )}>
-          {children}
-        </div>
-      </label>
-    );
-  }
-);
-type MaybeArray<T> = T[] | T;
-type ChildrenOfType<T extends React.ElementType> = MaybeArray<
-  React.ReactElement<React.ComponentPropsWithoutRef<T>>
->;
-interface RadioAreaGroupProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
-  onChange?: (value: string) => void;
-  children: ChildrenOfType<typeof RadioArea>;
-}
+const RadioArea = ({ children, className, classNames: innerClassNames, ...props }: RadioAreaProps) => {
+  const radioAreaId = useId();
+  const id = props.id ?? radioAreaId;
 
-const RadioAreaGroup = ({ children, className, onChange, ...passThroughProps }: RadioAreaGroupProps) => {
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (onChange && React.isValidElement(child)) {
-      return React.cloneElement(child, {
-        onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
-          onChange(e.target.value);
-        },
-      });
-    }
-    return child;
-  });
   return (
-    <div className={className} {...passThroughProps}>
-      {childrenWithProps}
+    <div
+      className={classNames(
+        "border-subtle [&:has(input:checked)]:border-emphasis relative flex items-start rounded-md border",
+        className
+      )}>
+      <RadioGroupPrimitive.Item
+        id={id}
+        {...props}
+        className={classNames(
+          "hover:bg-subtle border-default focus:ring-emphasis absolute top-[0.9rem] left-3 mt-0.5 h-4 w-4 flex-shrink-0 rounded-full border focus:ring-2",
+          props.disabled && "opacity-60"
+        )}>
+        <RadioGroupPrimitive.Indicator
+          className={classNames(
+            "after:bg-default dark:after:bg-inverted relative flex h-full w-full items-center justify-center rounded-full bg-black after:h-[6px] after:w-[6px] after:rounded-full after:content-['']",
+            props.disabled ? "after:bg-muted" : "bg-black"
+          )}
+        />
+      </RadioGroupPrimitive.Item>
+      <label htmlFor={id} className={classNames("text-default p-4 pt-3 pl-10", innerClassNames?.container)}>
+        {children}
+      </label>
     </div>
   );
 };
 
-RadioAreaGroup.displayName = "RadioAreaGroup";
-RadioArea.displayName = "RadioArea";
+const RadioAreaGroup = ({
+  children,
+  className,
+  onValueChange,
+  ...passThroughProps
+}: RadioGroupPrimitive.RadioGroupProps) => {
+  return (
+    <RadioGroupPrimitive.Root className={className} onValueChange={onValueChange} {...passThroughProps}>
+      {children}
+    </RadioGroupPrimitive.Root>
+  );
+};
 
 const Item = RadioArea;
 const Group = RadioAreaGroup;

packages/ui/form/radio-area/Select.tsx

@@ -1,68 +0,0 @@
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
-import React from "react";
-import type { FieldValues, Path, UseFormReturn } from "react-hook-form";
-
-import classNames from "@calcom/lib/classNames";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { ChevronDown } from "@calcom/ui/components/icon";
-
-import { RadioArea, RadioAreaGroup } from "./RadioAreaGroup";
-
-interface OptionProps
-  extends Pick<React.OptionHTMLAttributes<HTMLOptionElement>, "value" | "label" | "className"> {
-  description?: string;
-}
-
-export type FieldPath<TFieldValues extends FieldValues> = Path<TFieldValues>;
-interface RadioAreaSelectProps<TFieldValues extends FieldValues>
-  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "form"> {
-  options: OptionProps[]; // allow options to be passed programmatically, like options={}
-  onChange?: (value: string) => void;
-  form: UseFormReturn<TFieldValues>;
-  name: FieldPath<TFieldValues>;
-}
-
-export const Select = function RadioAreaSelect<TFieldValues extends FieldValues>(
-  props: RadioAreaSelectProps<TFieldValues>
-) {
-  const { t } = useLocale();
-  const {
-    options,
-    form,
-    disabled = !options.length, // if not explicitly disabled and the options length is empty, disable anyway
-    placeholder = t("select"),
-  } = props;
-
-  const getLabel = (value: string | ReadonlyArray<string> | number | undefined) =>
-    options.find((option: OptionProps) => option.value === value)?.label;
-
-  return (
-    <Collapsible className={classNames("w-full", props.className)}>
-      <CollapsibleTrigger
-        type="button"
-        disabled={disabled}
-        className={classNames(
-          "focus:ring-primary-500 border-default bg-default mb-1 block w-full cursor-pointer rounded-sm border border p-2 text-left shadow-sm sm:text-sm",
-          disabled && "bg-emphasis cursor-default focus:ring-0 "
-        )}>
-        {getLabel(props.value) ?? placeholder}
-        <ChevronDown className="text-subtle float-right h-5 w-5" />
-      </CollapsibleTrigger>
-      <CollapsibleContent>
-        <RadioAreaGroup className="space-y-2 text-sm" onChange={props.onChange}>
-          {options.map((option) => (
-            <RadioArea
-              {...form.register(props.name)}
-              {...option}
-              key={Array.isArray(option.value) ? option.value.join(",") : `${option.value}`}>
-              <strong className="mb-1 block">{option.label}</strong>
-              <p>{option.description}</p>
-            </RadioArea>
-          ))}
-        </RadioAreaGroup>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-};
-
-export default Select;

packages/ui/form/radio-area/index.ts

@@ -1,3 +1,2 @@
 export * as RadioGroup from "./RadioAreaGroup";
-export { default as Select } from "./Select";
 export { Group, Indicator, Label, Radio, RadioField } from "./Radio";