chore: removed radio button from ui and updated in the estimates

packages/ui/src/radio-input/index.tsx

@@ -1 +0,0 @@
-export * from "./radio-input";

packages/ui/src/radio-input/radio-input.stories.tsx

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { RadioInput } from "./radio-input";
-
-const meta: Meta<typeof RadioInput> = {
-  title: "RadioInput",
-  component: RadioInput,
-};
-
-export default meta;
-type Story = StoryObj<typeof RadioInput>;
-
-const options = [
-  { label: "Option 1", value: "option1" },
-  {
-    label:
-      "A very very long label, lets add some lipsum text and see what happens? May be we don't have to. This is long enough",
-    value: "option2",
-  },
-  { label: "Option 3", value: "option3" },
-];
-
-export const Default: Story = {
-  args: {
-    options,
-    label: "Horizontal Radio Input",
-  },
-};
-
-export const vertical: Story = {
-  args: {
-    options,
-    label: "Vertical Radio Input",
-    vertical: true,
-  },
-};

web/components/estimates/create/stage-one.tsx

@@ -1,7 +1,9 @@
 import { FC } from "react";
 import { Crown, Info } from "lucide-react";
 import { TEstimateSystemKeys } from "@plane/types";
-import { RadioInput, Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/ui";
+// components
+import { RadioInput } from "@/components/estimates";
 // constants
 import { ESTIMATE_SYSTEMS } from "@/constants/estimates";
 
@@ -45,6 +47,7 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
               disabled: !ESTIMATE_SYSTEMS[currentSystem]?.is_available || ESTIMATE_SYSTEMS[currentSystem]?.is_ee,
             };
           })}
+          name="estimate-radio-input"
           label="Choose an estimate system"
           labelClassName="text-sm font-medium text-custom-text-200 mb-1.5"
           wrapperClassName="relative flex flex-wrap gap-14"

web/components/estimates/index.ts

@@ -3,6 +3,7 @@ export * from "./root";
 export * from "./empty-screen";
 export * from "./loader-screen";
 export * from "./ee-banner";
+export * from "./radio-select";
 
 export * from "./estimate-search";
 export * from "./estimate-disable-switch";

web/components/estimates/points/index.ts

@@ -1,10 +1,10 @@
-export * from "./create-root";
-export * from "./edit-root";
-
 export * from "./preview";
 export * from "./create";
 export * from "./update";
 export * from "./delete";
 export * from "./select-dropdown";
 
+export * from "./create-root";
+
+export * from "./edit-root";
 export * from "./switch";

web/components/estimates/radio-select.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { Field, Label, Radio, RadioGroup } from "@headlessui/react";
-import { cn } from "../../helpers";
 // helpers
+import { cn } from "@/helpers/common.helper";
 
 type RadioInputProps = {
+  name?: string;
   label: string | React.ReactNode | undefined;
   wrapperClassName?: string;
   fieldClassName?: string;
@@ -18,6 +18,7 @@ type RadioInputProps = {
 };
 
 export const RadioInput = ({
+  name = "radio-input",
   label: inputLabel,
   labelClassName: inputLabelClassName = "",
   wrapperClassName: inputWrapperClassName = "",
@@ -43,29 +44,41 @@ export const RadioInput = ({
     aria = "radio-input";
   }
 
-  // return <h1>Hello</h1>;
-
   return (
-    <RadioGroup value={selected} onChange={setSelected} aria-label={aria} className={className}>
-      <Label className={cn(`mb-2`, inputLabelClassName)}>{inputLabel}</Label>
+    <div className={className}>
+      <div className={cn(`mb-2`, inputLabelClassName)}>{inputLabel}</div>
       <div className={cn(`${wrapperClass}`, inputWrapperClassName)}>
         {options.map(({ value, label, disabled }, index) => (
-          <Field key={index} className={cn("flex items-center gap-2", inputFieldClassName)}>
-            <Radio
-              value={value}
+          <div
+            key={index}
+            onClick={() => !disabled && setSelected(value)}
+            className={cn(
+              "flex items-center gap-2",
+              disabled ? `bg-custom-background-200 border-custom-border-200 cursor-not-allowed` : ``,
+              inputFieldClassName
+            )}
+          >
+            <input
+              id={`${name}_${index}`}
+              name={name}
               className={cn(
-                "group flex size-5 items-center justify-center rounded-full border border-custom-border-400 bg-custom-background-500 data-[checked]:bg-custom-primary-200 data-[checked]:border-custom-primary-100 cursor-pointer data-[disabled]:bg-custom-background-200 data-[disabled]:border-custom-border-200 data-[disabled]:cursor-not-allowed",
+                `group flex size-5 items-center justify-center rounded-full border border-custom-border-400 bg-custom-background-500 cursor-pointer`,
+                selected === value ? `bg-custom-primary-200 border-custom-primary-100 ` : ``,
+                disabled ? `bg-custom-background-200 border-custom-border-200 cursor-not-allowed` : ``,
                 inputButtonClassName
               )}
+              type="radio"
+              value={value}
               disabled={disabled}
-            >
-              <span className="invisible size-2 rounded-full bg-white group-data-[checked]:visible" />
-            </Radio>
-            <Label className="text-base cursor-pointer">{label}</Label>
-          </Field>
+              checked={selected === value}
+            />
+            <label htmlFor={`${name}_${index}`} className="text-base cursor-pointer">
+              {label}
+            </label>
+          </div>
         ))}
       </div>
-    </RadioGroup>
+    </div>
   );
 };
 

web/store/root.store.ts

@@ -104,5 +104,6 @@ export class RootStore {
     this.projectInbox = new ProjectInboxStore(this);
     this.projectPages = new ProjectPageStore(this);
     this.multipleSelect = new MultipleSelectStore();
+    this.projectEstimate = new ProjectEstimateStore(this);
   }
 }

yarn.lock

@@ -9320,6 +9320,11 @@ lucide-react@^0.378.0:
   resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.378.0.tgz#232acb99c6baedfa90959a2c0dd11327b058bde8"
   integrity sha512-u6EPU8juLUk9ytRcyapkWI18epAv3RU+6+TC23ivjR0e+glWKBobFeSgRwOIJihzktILQuy6E0E80P2jVTDR5g==
 
+lucide-react@^0.379.0:
+  version "0.379.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.379.0.tgz#29e34eeffae7fb241b64b09868cbe3ab888ef7cc"
+  integrity sha512-KcdeVPqmhRldldAAgptb8FjIunM2x2Zy26ZBh1RsEUcdLIvsEmbcw7KpzFYUy5BbpGeWhPu9Z9J5YXfStiXwhg==
+
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"