feat: add Switch component & story (#1512)

* feat: initialize shadcn/ui switch component

* cleanup: remove `* as React` imports

* feat: add proper styling & storybook

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",

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

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}

src/v2/components/ui/Select.tsx

@@ -1,20 +1,19 @@
 "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
 
 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}

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",
+    },
+  },
+}

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 }

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