From 454a641802df8188ad94c553c303f633541a05f9 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish.iitg@gmail.com>
Date: Mon, 3 Jun 2024 19:21:48 +0530
Subject: [PATCH 1/8] Add sortable, radio and typography components

---
 packages/ui/src/index.ts                      |  4 +-
 packages/ui/src/radio-input/index.tsx         |  1 +
 .../src/radio-input/radio-input.stories.tsx   | 36 +++++++++
 packages/ui/src/radio-input/radio-input.tsx   | 72 ++++++++++++++++++
 packages/ui/src/sortable/draggable.tsx        | 61 ++++++++++++++++
 packages/ui/src/sortable/index.ts             |  2 +
 packages/ui/src/sortable/sortable.stories.tsx | 32 ++++++++
 packages/ui/src/sortable/sortable.tsx         | 73 +++++++++++++++++++
 packages/ui/src/typography/index.tsx          |  1 +
 packages/ui/src/typography/sub-heading.tsx    | 15 ++++
 10 files changed, 296 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/radio-input/index.tsx
 create mode 100644 packages/ui/src/radio-input/radio-input.stories.tsx
 create mode 100644 packages/ui/src/radio-input/radio-input.tsx
 create mode 100644 packages/ui/src/sortable/draggable.tsx
 create mode 100644 packages/ui/src/sortable/index.ts
 create mode 100644 packages/ui/src/sortable/sortable.stories.tsx
 create mode 100644 packages/ui/src/sortable/sortable.tsx
 create mode 100644 packages/ui/src/typography/index.tsx
 create mode 100644 packages/ui/src/typography/sub-heading.tsx

diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index dae01238162..7aa002eaabd 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -13,4 +13,6 @@ export * from "./loader";
 export * from "./control-link";
 export * from "./toast";
 export * from "./drag-handle";
-export * from "./drop-indicator";
\ No newline at end of file
+export * from "./drop-indicator";
+export * from "./radio-input";
+export * from "./sortable";
diff --git a/packages/ui/src/radio-input/index.tsx b/packages/ui/src/radio-input/index.tsx
new file mode 100644
index 00000000000..99ac1d9b693
--- /dev/null
+++ b/packages/ui/src/radio-input/index.tsx
@@ -0,0 +1 @@
+export * from "./radio-input";
diff --git a/packages/ui/src/radio-input/radio-input.stories.tsx b/packages/ui/src/radio-input/radio-input.stories.tsx
new file mode 100644
index 00000000000..544c2feb4fa
--- /dev/null
+++ b/packages/ui/src/radio-input/radio-input.stories.tsx
@@ -0,0 +1,36 @@
+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,
+  },
+};
diff --git a/packages/ui/src/radio-input/radio-input.tsx b/packages/ui/src/radio-input/radio-input.tsx
new file mode 100644
index 00000000000..16e1d5e9cb4
--- /dev/null
+++ b/packages/ui/src/radio-input/radio-input.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { Field, Label, Radio, RadioGroup } from "@headlessui/react";
+import { cn } from "../../helpers";
+// helpers
+
+type RadioInputProps = {
+  label: string | React.ReactNode | undefined;
+  wrapperClassName?: string;
+  fieldClassName?: string;
+  buttonClassName?: string;
+  labelClassName?: string;
+  ariaLabel?: string;
+  options: { label: string | React.ReactNode; value: string; disabled?: boolean }[];
+  vertical?: boolean;
+  selected: string;
+  onChange: (value: string) => void;
+  className?: string;
+};
+
+export const RadioInput = ({
+  label: inputLabel,
+  labelClassName: inputLabelClassName = "",
+  wrapperClassName: inputWrapperClassName = "",
+  fieldClassName: inputFieldClassName = "",
+  buttonClassName: inputButtonClassName = "",
+  options,
+  vertical,
+  selected,
+  ariaLabel,
+  onChange,
+  className,
+}: RadioInputProps) => {
+  const wrapperClass = vertical ? "flex flex-col gap-1" : "flex gap-2";
+
+  const setSelected = (value: string) => {
+    onChange(value);
+  };
+
+  let aria = ariaLabel ? ariaLabel.toLowerCase().replace(" ", "-") : "";
+  if (!aria && typeof inputLabel === "string") {
+    aria = inputLabel.toLowerCase().replace(" ", "-");
+  } else {
+    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={cn(`${wrapperClass}`, inputWrapperClassName)}>
+        {options.map(({ value, label, disabled }, index) => (
+          <Field key={index} className={cn("flex items-center gap-2", inputFieldClassName)}>
+            <Radio
+              value={value}
+              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",
+                inputButtonClassName
+              )}
+              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>
+        ))}
+      </div>
+    </RadioGroup>
+  );
+};
+
+export default RadioInput;
diff --git a/packages/ui/src/sortable/draggable.tsx b/packages/ui/src/sortable/draggable.tsx
new file mode 100644
index 00000000000..a56afe07308
--- /dev/null
+++ b/packages/ui/src/sortable/draggable.tsx
@@ -0,0 +1,61 @@
+import React, { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { isEqual } from "lodash";
+import { cn } from "../../helpers";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { DropIndicator } from "../drop-indicator";
+type Props = {
+  children: React.ReactNode;
+  data: any; //@todo make this generic
+  className?: string;
+};
+const Draggable = ({ children, data, className }: Props) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [dragging, setDragging] = useState<boolean>(false); // NEW
+  const [isDraggedOver, setIsDraggedOver] = useState(false);
+
+  const [closestEdge, setClosestEdge] = useState<string | null>(null);
+  useEffect(() => {
+    const el = ref.current;
+
+    if (el) {
+      combine(
+        draggable({
+          element: el,
+          onDragStart: () => setDragging(true), // NEW
+          onDrop: () => setDragging(false), // NEW
+          getInitialData: () => data,
+        }),
+        dropTargetForElements({
+          element: el,
+          onDragEnter: (args) => {
+            setIsDraggedOver(true);
+            setClosestEdge(extractClosestEdge(args.self.data));
+          },
+          onDragLeave: () => setIsDraggedOver(false),
+          onDrop: () => {
+            setIsDraggedOver(false);
+          },
+          canDrop: ({ source }) => !isEqual(source.data, data),
+          getData: ({ input, element }) =>
+            attachClosestEdge(data, {
+              input,
+              element,
+              allowedEdges: ["top", "bottom"],
+            }),
+        })
+      );
+    }
+  }, [data]);
+
+  return (
+    <div ref={ref} className={cn(dragging && "opacity-25", className)}>
+      {<DropIndicator isVisible={isDraggedOver && closestEdge === "top"} />}
+      {children}
+      {<DropIndicator isVisible={isDraggedOver && closestEdge === "bottom"} classNames="absolute w-full" />}
+    </div>
+  );
+};
+
+export { Draggable };
diff --git a/packages/ui/src/sortable/index.ts b/packages/ui/src/sortable/index.ts
new file mode 100644
index 00000000000..9dde5a40474
--- /dev/null
+++ b/packages/ui/src/sortable/index.ts
@@ -0,0 +1,2 @@
+export * from "./sortable";
+export * from "./draggable";
diff --git a/packages/ui/src/sortable/sortable.stories.tsx b/packages/ui/src/sortable/sortable.stories.tsx
new file mode 100644
index 00000000000..6d40ddc2ee1
--- /dev/null
+++ b/packages/ui/src/sortable/sortable.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Draggable } from "./draggable";
+import { Sortable } from "./sortable";
+
+const meta: Meta<typeof Sortable> = {
+  title: "Sortable",
+  component: Sortable,
+};
+
+export default meta;
+type Story = StoryObj<typeof Sortable>;
+
+const data = [
+  { id: "1", name: "John Doe" },
+  { id: "2", name: "Jane Doe 2" },
+  { id: "3", name: "Alice" },
+  { id: "4", name: "Bob" },
+  { id: "5", name: "Charlie" },
+];
+export const Default: Story = {
+  args: {
+    data,
+    render: (item: any) => (
+      // <Draggable data={item} className="rounded-lg">
+      <div className="border ">{item.name}</div>
+      // </Draggable>
+    ),
+    onChange: (data) => console.log(data.map(({ id }) => id)),
+    keyExtractor: (item: any) => item.id,
+  },
+};
diff --git a/packages/ui/src/sortable/sortable.tsx b/packages/ui/src/sortable/sortable.tsx
new file mode 100644
index 00000000000..967965f2a94
--- /dev/null
+++ b/packages/ui/src/sortable/sortable.tsx
@@ -0,0 +1,73 @@
+import React, { Fragment, useEffect } from "react";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { Draggable } from "./draggable";
+
+type Props<T> = {
+  data: T[];
+  render: (item: T, index: number) => React.ReactNode;
+  onChange: (data: T[]) => void;
+  keyExtractor: (item: T, index: number) => string;
+  containerClassName?: string;
+};
+
+const moveItem = <T,>(
+  data: T[],
+  source: T,
+  destination: T & Record<symbol, string>,
+  keyExtractor: (item: T, index: number) => string
+) => {
+  const sourceIndex = data.indexOf(source);
+  if (sourceIndex === -1) return data;
+
+  const destinationIndex = data.findIndex((item, index) => keyExtractor(item, index) === keyExtractor(destination, 0));
+
+  if (destinationIndex === -1) return data;
+
+  const symbolKey = Reflect.ownKeys(destination).find((key) => key.toString() === "Symbol(closestEdge)");
+  const position = symbolKey ? destination[symbolKey as symbol] : "bottom"; // Add 'as symbol' to cast symbolKey to symbol
+  const newData = [...data];
+  const [movedItem] = newData.splice(sourceIndex, 1);
+
+  let adjustedDestinationIndex = destinationIndex;
+  if (position === "bottom") {
+    adjustedDestinationIndex++;
+  }
+
+  // Prevent moving item out of bounds
+  if (adjustedDestinationIndex > newData.length) {
+    adjustedDestinationIndex = newData.length;
+  }
+
+  newData.splice(adjustedDestinationIndex, 0, movedItem);
+
+  return newData;
+};
+
+export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerClassName }: Props<T>) => {
+  useEffect(() => {
+    const unsubscribe = monitorForElements({
+      onDrop({ source, location }) {
+        const destination = location?.current?.dropTargets[0];
+        if (!destination) return;
+        onChange(moveItem(data, source.data as T, destination.data as T & { closestEdge: string }, keyExtractor));
+      },
+    });
+
+    // Clean up the subscription on unmount
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [data, onChange]);
+
+  return (
+    <>
+      {data.map((item, index) => (
+        <Draggable key={keyExtractor(item, index)} data={item} className={containerClassName}>
+          <Fragment>{render(item, index)} </Fragment>
+        </Draggable>
+      ))}
+    </>
+  );
+};
+
+export default Sortable;
diff --git a/packages/ui/src/typography/index.tsx b/packages/ui/src/typography/index.tsx
new file mode 100644
index 00000000000..0b1b7ffe1c4
--- /dev/null
+++ b/packages/ui/src/typography/index.tsx
@@ -0,0 +1 @@
+export * from "./sub-heading";
diff --git a/packages/ui/src/typography/sub-heading.tsx b/packages/ui/src/typography/sub-heading.tsx
new file mode 100644
index 00000000000..9e7075583cc
--- /dev/null
+++ b/packages/ui/src/typography/sub-heading.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { cn } from "../../helpers";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+  noMargin?: boolean;
+};
+const SubHeading = ({ children, className, noMargin }: Props) => (
+  <h3 className={cn("text-xl font-medium text-custom-text-200 block leading-7", !noMargin && "mb-2", className)}>
+    {children}
+  </h3>
+);
+
+export { SubHeading };

From 47c20d3374787d63bd4bd577ef47e92d51b4f415 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish.iitg@gmail.com>
Date: Mon, 3 Jun 2024 19:26:36 +0530
Subject: [PATCH 2/8] Remove stray css classes

---
 packages/ui/src/sortable/draggable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/sortable/draggable.tsx b/packages/ui/src/sortable/draggable.tsx
index a56afe07308..73509a91b9a 100644
--- a/packages/ui/src/sortable/draggable.tsx
+++ b/packages/ui/src/sortable/draggable.tsx
@@ -53,7 +53,7 @@ const Draggable = ({ children, data, className }: Props) => {
     <div ref={ref} className={cn(dragging && "opacity-25", className)}>
       {<DropIndicator isVisible={isDraggedOver && closestEdge === "top"} />}
       {children}
-      {<DropIndicator isVisible={isDraggedOver && closestEdge === "bottom"} classNames="absolute w-full" />}
+      {<DropIndicator isVisible={isDraggedOver && closestEdge === "bottom"} />}
     </div>
   );
 };

From e252ffa5e5f05225c17124a88b2f806b508a576a Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish.iitg@gmail.com>
Date: Mon, 3 Jun 2024 19:43:23 +0530
Subject: [PATCH 3/8] Prevent drag of items from other draggable

---
 packages/ui/src/sortable/draggable.tsx |  3 ++-
 packages/ui/src/sortable/sortable.tsx  | 14 ++++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/sortable/draggable.tsx b/packages/ui/src/sortable/draggable.tsx
index 73509a91b9a..7fded837e6f 100644
--- a/packages/ui/src/sortable/draggable.tsx
+++ b/packages/ui/src/sortable/draggable.tsx
@@ -5,6 +5,7 @@ import { isEqual } from "lodash";
 import { cn } from "../../helpers";
 import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { DropIndicator } from "../drop-indicator";
+
 type Props = {
   children: React.ReactNode;
   data: any; //@todo make this generic
@@ -37,7 +38,7 @@ const Draggable = ({ children, data, className }: Props) => {
           onDrop: () => {
             setIsDraggedOver(false);
           },
-          canDrop: ({ source }) => !isEqual(source.data, data),
+          canDrop: ({ source }) => !isEqual(source.data, data) && source.data.__uuid__ === data.__uuid__,
           getData: ({ input, element }) =>
             attachClosestEdge(data, {
               input,
diff --git a/packages/ui/src/sortable/sortable.tsx b/packages/ui/src/sortable/sortable.tsx
index 967965f2a94..0ca71f6f3a5 100644
--- a/packages/ui/src/sortable/sortable.tsx
+++ b/packages/ui/src/sortable/sortable.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect } from "react";
+import React, { Fragment, useEffect, useMemo } from "react";
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { Draggable } from "./draggable";
 
@@ -8,6 +8,7 @@ type Props<T> = {
   onChange: (data: T[]) => void;
   keyExtractor: (item: T, index: number) => string;
   containerClassName?: string;
+  id: string;
 };
 
 const moveItem = <T,>(
@@ -43,7 +44,7 @@ const moveItem = <T,>(
   return newData;
 };
 
-export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerClassName }: Props<T>) => {
+export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerClassName, id }: Props<T>) => {
   useEffect(() => {
     const unsubscribe = monitorForElements({
       onDrop({ source, location }) {
@@ -57,11 +58,16 @@ export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerCl
     return () => {
       if (unsubscribe) unsubscribe();
     };
-  }, [data, onChange]);
+  }, [data, keyExtractor, onChange]);
+
+  const enhancedData = useMemo(() => {
+    const uuid = id ? id : Math.random().toString(36).substring(7);
+    return data.map((item) => ({ ...item, __uuid__: uuid }));
+  }, [data]);
 
   return (
     <>
-      {data.map((item, index) => (
+      {enhancedData.map((item, index) => (
         <Draggable key={keyExtractor(item, index)} data={item} className={containerClassName}>
           <Fragment>{render(item, index)} </Fragment>
         </Draggable>

From 390558a5b910e57596cd009440e686dfcbe9b8f0 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish.iitg@gmail.com>
Date: Tue, 4 Jun 2024 11:28:26 +0530
Subject: [PATCH 4/8] Minor cleanup

---
 packages/ui/src/radio-input/radio-input.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/ui/src/radio-input/radio-input.tsx b/packages/ui/src/radio-input/radio-input.tsx
index 16e1d5e9cb4..a4499e30e30 100644
--- a/packages/ui/src/radio-input/radio-input.tsx
+++ b/packages/ui/src/radio-input/radio-input.tsx
@@ -43,8 +43,6 @@ 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>

From 70bb2b83175f7916f30b276a36c2d3be211b5acd Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish.iitg@gmail.com>
Date: Tue, 4 Jun 2024 11:58:09 +0530
Subject: [PATCH 5/8] Update yarn.lock

---
 yarn.lock | 47 ++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index b807736a8d8..0336f52f43b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4612,7 +4612,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@18.2.48", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^18.2.42", "@types/react@^18.2.48":
+"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^18.2.42", "@types/react@^18.2.48":
   version "18.2.48"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.48.tgz#11df5664642d0bd879c1f58bc1d37205b064e8f1"
   integrity sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==
@@ -9437,6 +9437,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"
@@ -10891,7 +10896,7 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-"prettier-fallback@npm:prettier@^3", prettier@^3.1.1, prettier@^3.2.5, prettier@latest:
+"prettier-fallback@npm:prettier@^3":
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
   integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
@@ -10918,6 +10923,11 @@ prettier@^2.8.8:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
+prettier@^3.1.1, prettier@^3.2.5, prettier@latest:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
+  integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
+
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
@@ -12316,8 +12326,16 @@ string-argv@0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -12413,7 +12431,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -13814,8 +13839,16 @@ workbox-window@6.6.1, workbox-window@^6.5.4:
     "@types/trusted-types" "^2.0.2"
     workbox-core "6.6.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

From 3f6c8a99cd100750df4c18e55f79cc204ac94d53 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish.iitg@gmail.com>
Date: Tue, 4 Jun 2024 12:43:33 +0530
Subject: [PATCH 6/8] Remove radio input component as it was build on headless
 ui v2.0.0 and now we are using v1.7.0

---
 packages/ui/src/index.ts                      |  1 -
 packages/ui/src/radio-input/index.tsx         |  1 -
 .../src/radio-input/radio-input.stories.tsx   | 36 ----------
 packages/ui/src/radio-input/radio-input.tsx   | 70 -------------------
 4 files changed, 108 deletions(-)
 delete mode 100644 packages/ui/src/radio-input/index.tsx
 delete mode 100644 packages/ui/src/radio-input/radio-input.stories.tsx
 delete mode 100644 packages/ui/src/radio-input/radio-input.tsx

diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 7aa002eaabd..23fc7ed62fd 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -14,5 +14,4 @@ export * from "./control-link";
 export * from "./toast";
 export * from "./drag-handle";
 export * from "./drop-indicator";
-export * from "./radio-input";
 export * from "./sortable";
diff --git a/packages/ui/src/radio-input/index.tsx b/packages/ui/src/radio-input/index.tsx
deleted file mode 100644
index 99ac1d9b693..00000000000
--- a/packages/ui/src/radio-input/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./radio-input";
diff --git a/packages/ui/src/radio-input/radio-input.stories.tsx b/packages/ui/src/radio-input/radio-input.stories.tsx
deleted file mode 100644
index 544c2feb4fa..00000000000
--- a/packages/ui/src/radio-input/radio-input.stories.tsx
+++ /dev/null
@@ -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,
-  },
-};
diff --git a/packages/ui/src/radio-input/radio-input.tsx b/packages/ui/src/radio-input/radio-input.tsx
deleted file mode 100644
index a4499e30e30..00000000000
--- a/packages/ui/src/radio-input/radio-input.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from "react";
-import { Field, Label, Radio, RadioGroup } from "@headlessui/react";
-import { cn } from "../../helpers";
-// helpers
-
-type RadioInputProps = {
-  label: string | React.ReactNode | undefined;
-  wrapperClassName?: string;
-  fieldClassName?: string;
-  buttonClassName?: string;
-  labelClassName?: string;
-  ariaLabel?: string;
-  options: { label: string | React.ReactNode; value: string; disabled?: boolean }[];
-  vertical?: boolean;
-  selected: string;
-  onChange: (value: string) => void;
-  className?: string;
-};
-
-export const RadioInput = ({
-  label: inputLabel,
-  labelClassName: inputLabelClassName = "",
-  wrapperClassName: inputWrapperClassName = "",
-  fieldClassName: inputFieldClassName = "",
-  buttonClassName: inputButtonClassName = "",
-  options,
-  vertical,
-  selected,
-  ariaLabel,
-  onChange,
-  className,
-}: RadioInputProps) => {
-  const wrapperClass = vertical ? "flex flex-col gap-1" : "flex gap-2";
-
-  const setSelected = (value: string) => {
-    onChange(value);
-  };
-
-  let aria = ariaLabel ? ariaLabel.toLowerCase().replace(" ", "-") : "";
-  if (!aria && typeof inputLabel === "string") {
-    aria = inputLabel.toLowerCase().replace(" ", "-");
-  } else {
-    aria = "radio-input";
-  }
-
-  return (
-    <RadioGroup value={selected} onChange={setSelected} aria-label={aria} className={className}>
-      <Label className={cn(`mb-2`, inputLabelClassName)}>{inputLabel}</Label>
-      <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}
-              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",
-                inputButtonClassName
-              )}
-              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>
-        ))}
-      </div>
-    </RadioGroup>
-  );
-};
-
-export default RadioInput;

From aae835d40e94ac295fb661789011566bbfe9b7b3 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish.iitg@gmail.com>
Date: Tue, 4 Jun 2024 13:58:29 +0530
Subject: [PATCH 7/8] Fix build errors

---
 web/lib/app-provider.tsx |  4 ++--
 yarn.lock                | 49 +++++++---------------------------------
 2 files changed, 10 insertions(+), 43 deletions(-)

diff --git a/web/lib/app-provider.tsx b/web/lib/app-provider.tsx
index 1044af012cb..692a43b9fd3 100644
--- a/web/lib/app-provider.tsx
+++ b/web/lib/app-provider.tsx
@@ -43,8 +43,6 @@ export const AppProvider: FC<IAppProvider> = observer((props) => {
 
   return (
     <>
-      {/* TODO: Need to handle custom themes for toast */}
-      <Toast theme={resolveGeneralTheme(resolvedTheme)} />
       <InstanceWrapper>
         <StoreWrapper>
           <CrispWrapper user={currentUser}>
@@ -56,6 +54,8 @@ export const AppProvider: FC<IAppProvider> = observer((props) => {
               posthogAPIKey={config?.posthog_api_key || undefined}
               posthogHost={config?.posthog_host || undefined}
             >
+              {/* TODO: Need to handle custom themes for toast */}
+              <Toast theme={resolveGeneralTheme(resolvedTheme)} />
               <SWRConfig value={SWR_CONFIG}>{children}</SWRConfig>
             </PostHogProvider>
           </CrispWrapper>
diff --git a/yarn.lock b/yarn.lock
index 0336f52f43b..e1fee6c52b3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4612,7 +4612,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^18.2.42", "@types/react@^18.2.48":
+"@types/react@*", "@types/react@18.2.48", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^18.2.42", "@types/react@^18.2.48":
   version "18.2.48"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.48.tgz#11df5664642d0bd879c1f58bc1d37205b064e8f1"
   integrity sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==
@@ -9437,11 +9437,6 @@ 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"
@@ -10896,7 +10891,7 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-"prettier-fallback@npm:prettier@^3":
+"prettier-fallback@npm:prettier@^3", prettier@^3.1.1, prettier@^3.2.5, prettier@latest:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
   integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
@@ -10923,11 +10918,6 @@ prettier@^2.8.8:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
-prettier@^3.1.1, prettier@^3.2.5, prettier@latest:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
-  integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
-
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
@@ -12326,16 +12316,8 @@ string-argv@0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -12431,14 +12413,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -13839,16 +13814,8 @@ workbox-window@6.6.1, workbox-window@^6.5.4:
     "@types/trusted-types" "^2.0.2"
     workbox-core "6.6.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -13978,4 +13945,4 @@ yocto-queue@^0.1.0:
 zxcvbn@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/zxcvbn/-/zxcvbn-4.4.2.tgz#28ec17cf09743edcab056ddd8b1b06262cc73c30"
-  integrity sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ==
+  integrity sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ==
\ No newline at end of file

From e3f172b713ee8545a9aa707e4887532b4e33d1e3 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish.iitg@gmail.com>
Date: Tue, 4 Jun 2024 14:08:23 +0530
Subject: [PATCH 8/8] Update dependencies in use memo.

---
 packages/ui/src/sortable/sortable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/sortable/sortable.tsx b/packages/ui/src/sortable/sortable.tsx
index 0ca71f6f3a5..9d79a8f5900 100644
--- a/packages/ui/src/sortable/sortable.tsx
+++ b/packages/ui/src/sortable/sortable.tsx
@@ -63,7 +63,7 @@ export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerCl
   const enhancedData = useMemo(() => {
     const uuid = id ? id : Math.random().toString(36).substring(7);
     return data.map((item) => ({ ...item, __uuid__: uuid }));
-  }, [data]);
+  }, [data, id]);
 
   return (
     <>