Dec 4, 2024 · Nov 13, 2024 · Nov 15, 2024 · Nov 17, 2024 · Nov 17, 2024 · Nov 17, 2024
diff --git a/site/src/components/Switch/Switch.stories.tsx b/site/src/components/Switch/Switch.stories.tsx
 import type { Meta, StoryObj } from "@storybook/react";
 import { Switch } from "./Switch";

 const meta: Meta<typeof Switch> = {
 title: "components/Switch",
 component: Switch,
 };

 export default meta;
 type Story = StoryObj<typeof Switch>;

 export const DefaultOn: Story = {
 args: {
 checked: true,
 disabled: false,
 },
 };

 export const DefaultOff: Story = {
 args: {
 checked: false,
 disabled: false,
 }
 };

 export const DisabledOn: Story = {
 args: {
 checked: true,
 disabled: true,
 },
 };

 export const DisabledOff: Story = {
 args: {
 checked: false,
 disabled: true,
 },
 };

diff --git a/site/src/components/Switch/Switch.tsx b/site/src/components/Switch/Switch.tsx
 /**
 * Copied from shadc/ui on 11/13/2024
 * @see {@link https://ui.shadcn.com/docs/components/switch}
 */
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import * as React from "react";

 import { cn } from "utils/cn";

 export const Switch = React.forwardRef<
 React.ElementRef<typeof SwitchPrimitives.Root>,
 React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 >(({ className, ...props }, ref) => (
 <SwitchPrimitives.Root
 className={cn(
 `peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full shadow-sm transition-colors
 border-2 border-transparent
 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-primary
 disabled:cursor-not-allowed
 data-[state=checked]:disabled:bg-surface-tertiary data-[state=unchecked]:disabled:bg-surface-tertiary
 data-[state=checked]:hover:bg-surface-invert-secondary data-[state=unchecked]:hover:bg-surface-tertiary
 data-[state=checked]:bg-surface-invert-primary data-[state=unchecked]:bg-surface-quaternary`,
 className,
 )}
 {...props}
 ref={ref}
 >
 <SwitchPrimitives.Thumb
 className={cn(
 `pointer-events-none block h-4 w-4 rounded-full bg-surface-primary shadow-lg ring-0 transition-transform
 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:-translate-x-1.5`,
 )}
 />
 </SwitchPrimitives.Root>
 ));
diff --git a/site/src/components/ui/Switch.tsx b/site/src/components/ui/Switch.tsx
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPageView.tsx
 } from "components/TableLoader/TableLoader";
 import { Label } from "components/ui/Label";
 import { MultipleSelector, type Option } from "components/ui/MultipleSelector";
 import { Switch } from "components/ui/Switch";
 import { Switch } from "components/Switch/Switch";
 import { useFormik } from "formik";
 import { Plus, SquareArrowOutUpRight, Trash } from "lucide-react";
 import type React from "react";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,39 @@
		import type { Meta, StoryObj } from "@storybook/react";
		import { Switch } from "./Switch";

		const meta: Meta<typeof Switch> = {
		title: "components/Switch",
		component: Switch,
		};

		export default meta;
		type Story = StoryObj<typeof Switch>;

		export const DefaultOn: Story = {
		args: {
		checked: true,
		disabled: false,
		},
		};

		export const DefaultOff: Story = {
		args: {
		checked: false,
		disabled: false,
		}
		};

		export const DisabledOn: Story = {
		args: {
		checked: true,
		disabled: true,
		},
		};

		export const DisabledOff: Story = {
		args: {
		checked: false,
		disabled: true,
		},
		};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,36 @@
		/**
		* Copied from shadc/ui on 11/13/2024
		* @see {@link https://ui.shadcn.com/docs/components/switch}
		*/
		import * as SwitchPrimitives from "@radix-ui/react-switch";
		import * as React from "react";
jaaydenh marked this conversation as resolved. Show resolvedHide resolved

jaaydenh marked this conversation as resolved. Show resolvedHide resolved
		import { cn } from "utils/cn";

		export const Switch = React.forwardRef<
		React.ElementRef<typeof SwitchPrimitives.Root>,
		React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
		>(({ className, ...props }, ref) => (
		<SwitchPrimitives.Root
		className={cn(
		`peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full shadow-sm transition-colors
		border-2 border-transparent
		focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
		focus-visible:ring-offset-2 focus-visible:ring-offset-surface-primary
		disabled:cursor-not-allowed
		data-[state=checked]:disabled:bg-surface-tertiary data-[state=unchecked]:disabled:bg-surface-tertiary
		data-[state=checked]:hover:bg-surface-invert-secondary data-[state=unchecked]:hover:bg-surface-tertiary
		data-[state=checked]:bg-surface-invert-primary data-[state=unchecked]:bg-surface-quaternary`,
		className,
		)}
		{...props}
		ref={ref}
		>
		<SwitchPrimitives.Thumb
		className={cn(
		`pointer-events-none block h-4 w-4 rounded-full bg-surface-primary shadow-lg ring-0 transition-transform
		data-[state=checked]:translate-x-2.5 data-[state=unchecked]:-translate-x-1.5`,
		)}
		/>
		</SwitchPrimitives.Root>
		));
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,7 +23,7 @@ import {
		} from "components/TableLoader/TableLoader";
		import { Label } from "components/ui/Label";
		import { MultipleSelector, type Option } from "components/ui/MultipleSelector";
		import { Switch } from "components/ui/Switch";
		import { Switch } from "components/Switch/Switch";
		import { useFormik } from "formik";
		import { Plus, SquareArrowOutUpRight, Trash } from "lucide-react";
		import type React from "react";
Expand Down