From 33ab5456b56172005efb12b0bcbee4b353223e24 Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <92519134+BrickheadJohnny@users.noreply.github.com>
Date: Fri, 27 Sep 2024 10:22:05 +0200
Subject: [PATCH] feat: add `Switch` component & story (#1512)

* feat: initialize shadcn/ui switch component

* cleanup: remove `* as React` imports

* feat: add proper styling & storybook
---
 package-lock.json                       | 30 ++++++++++++++++
 package.json                            |  1 +
 src/v2/components/ui/Progress.tsx       | 22 ++++++------
 src/v2/components/ui/ScrollArea.tsx     | 17 +++++----
 src/v2/components/ui/Select.tsx         | 47 ++++++++++++-------------
 src/v2/components/ui/Switch.stories.tsx | 31 ++++++++++++++++
 src/v2/components/ui/Switch.tsx         | 30 ++++++++++++++++
 src/v2/components/ui/Textarea.tsx       |  8 ++---
 8 files changed, 138 insertions(+), 48 deletions(-)
 create mode 100644 src/v2/components/ui/Switch.stories.tsx
 create mode 100644 src/v2/components/ui/Switch.tsx

diff --git a/package-lock.json b/package-lock.json
index cdfa808e6d..a2d02a409c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,6 +48,7 @@
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-switch": "^1.1.0",
         "@radix-ui/react-toast": "^1.2.1",
         "@radix-ui/react-toggle": "^1.1.0",
         "@radix-ui/react-toggle-group": "^1.1.0",
@@ -9063,6 +9064,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.0.tgz",
+      "integrity": "sha512-OBzy5WAj641k0AOSpKQtreDMe+isX0MQJ1IVyF03ucdF3DunOnROVrjWs8zsXUxC3zfZ6JL9HFVCUlMghz9dJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-toast": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.1.tgz",
diff --git a/package.json b/package.json
index 6c1508cc02..45b48bae40 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
diff --git a/src/v2/components/ui/Progress.tsx b/src/v2/components/ui/Progress.tsx
index 1897978e28..5904211351 100644
--- a/src/v2/components/ui/Progress.tsx
+++ b/src/v2/components/ui/Progress.tsx
@@ -1,13 +1,17 @@
 "use client"
 
-import * as ProgressPrimitive from "@radix-ui/react-progress"
-import * as React from "react"
-
 import { cn } from "@/lib/utils"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+import {
+  ComponentPropsWithoutRef,
+  ElementRef,
+  FunctionComponent,
+  forwardRef,
+} from "react"
 
-const ProgressRoot = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+const ProgressRoot = forwardRef<
+  ElementRef<typeof ProgressPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
 >(({ className, value, ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
@@ -19,10 +23,8 @@ const ProgressRoot = React.forwardRef<
   />
 ))
 
-const ProgressIndicator = React.forwardRef<
-  React.ElementRef<
-    React.FunctionComponent<ProgressPrimitive.ProgressIndicatorProps>
-  >,
+const ProgressIndicator = forwardRef<
+  ElementRef<FunctionComponent<ProgressPrimitive.ProgressIndicatorProps>>,
   ProgressPrimitive.ProgressIndicatorProps & { value: number }
 >(({ className, value, style, ...props }, ref) => (
   <ProgressPrimitive.Indicator
diff --git a/src/v2/components/ui/ScrollArea.tsx b/src/v2/components/ui/ScrollArea.tsx
index e3ef8ce368..0aa2d54b5f 100644
--- a/src/v2/components/ui/ScrollArea.tsx
+++ b/src/v2/components/ui/ScrollArea.tsx
@@ -1,13 +1,12 @@
 "use client"
 
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-import * as React from "react"
-
 import { cn } from "@/lib/utils"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
 
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+const ScrollArea = forwardRef<
+  ElementRef<typeof ScrollAreaPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
@@ -23,9 +22,9 @@ const ScrollArea = React.forwardRef<
 ))
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
 
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+const ScrollBar = forwardRef<
+  ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
 >(({ className, orientation = "vertical", ...props }, ref) => (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
     ref={ref}
diff --git a/src/v2/components/ui/Select.tsx b/src/v2/components/ui/Select.tsx
index fa014a3332..13e316b394 100644
--- a/src/v2/components/ui/Select.tsx
+++ b/src/v2/components/ui/Select.tsx
@@ -1,10 +1,9 @@
 "use client"
 
+import { cn } from "@/lib/utils"
 import { CaretDown, CaretUp, Check } from "@phosphor-icons/react"
 import * as SelectPrimitive from "@radix-ui/react-select"
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
 
 const Select = SelectPrimitive.Root
 
@@ -12,9 +11,9 @@ const SelectGroup = SelectPrimitive.Group
 
 const SelectValue = SelectPrimitive.Value
 
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+const SelectTrigger = forwardRef<
+  ElementRef<typeof SelectPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
@@ -32,9 +31,9 @@ const SelectTrigger = React.forwardRef<
 ))
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+const SelectScrollUpButton = forwardRef<
+  ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
@@ -46,9 +45,9 @@ const SelectScrollUpButton = React.forwardRef<
 ))
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+const SelectScrollDownButton = forwardRef<
+  ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
@@ -60,9 +59,9 @@ const SelectScrollDownButton = React.forwardRef<
 ))
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
 
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+const SelectContent = forwardRef<
+  ElementRef<typeof SelectPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 >(({ className, children, position = "popper", ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
@@ -92,9 +91,9 @@ const SelectContent = React.forwardRef<
 ))
 SelectContent.displayName = SelectPrimitive.Content.displayName
 
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+const SelectLabel = forwardRef<
+  ElementRef<typeof SelectPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
@@ -104,9 +103,9 @@ const SelectLabel = React.forwardRef<
 ))
 SelectLabel.displayName = SelectPrimitive.Label.displayName
 
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+const SelectItem = forwardRef<
+  ElementRef<typeof SelectPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
@@ -127,9 +126,9 @@ const SelectItem = React.forwardRef<
 ))
 SelectItem.displayName = SelectPrimitive.Item.displayName
 
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+const SelectSeparator = forwardRef<
+  ElementRef<typeof SelectPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
diff --git a/src/v2/components/ui/Switch.stories.tsx b/src/v2/components/ui/Switch.stories.tsx
new file mode 100644
index 0000000000..46291394d4
--- /dev/null
+++ b/src/v2/components/ui/Switch.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { Label } from "./Label"
+import { Switch, SwitchProps } from "./Switch"
+
+const SwitchExample = (props: SwitchProps) => (
+  <div className="flex items-center space-x-2">
+    <Switch id="demo-switch" {...props} />
+    <Label htmlFor="demo-switch">Demo switch</Label>
+  </div>
+)
+
+const meta: Meta<typeof SwitchExample> = {
+  title: "Design system/Switch",
+  component: SwitchExample,
+}
+
+export default meta
+
+type Story = StoryObj<typeof SwitchExample>
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+  },
+  argTypes: {
+    disabled: {
+      type: "boolean",
+      control: "boolean",
+    },
+  },
+}
diff --git a/src/v2/components/ui/Switch.tsx b/src/v2/components/ui/Switch.tsx
new file mode 100644
index 0000000000..2fd993f659
--- /dev/null
+++ b/src/v2/components/ui/Switch.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
+
+export interface SwitchProps
+  extends ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {}
+
+const Switch = forwardRef<ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
+  ({ className, ...props }, ref) => (
+    <SwitchPrimitives.Root
+      className={cn(
+        "inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-secondary [&~label]:disabled:cursor-not-allowed [&~label]:disabled:opacity-50",
+        className
+      )}
+      {...props}
+      ref={ref}
+    >
+      <SwitchPrimitives.Thumb
+        className={cn(
+          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitives.Root>
+  )
+)
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/src/v2/components/ui/Textarea.tsx b/src/v2/components/ui/Textarea.tsx
index 8f29acfa9d..141ef02cdd 100644
--- a/src/v2/components/ui/Textarea.tsx
+++ b/src/v2/components/ui/Textarea.tsx
@@ -1,11 +1,9 @@
-import * as React from "react"
-
 import { cn } from "@/lib/utils"
+import { TextareaHTMLAttributes, forwardRef } from "react"
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
     return (
       <textarea