[RealtimeKit] Allow disabling sub-platforms

Author: harshs-dyte

src/components/realtimekit/RTKSDKSelector/RTKSDKSelector.astro

@@ -2,7 +2,17 @@
 import { z } from "astro:schema";
 import SDKSelector from "./RTKSDKSelector";
 
-const platform = z.enum(["web", "mobile"]);
+const platform = z.enum([
+	"web",
+	"mobile",
+	"web-react",
+	"web-components",
+	"web-angular",
+	"mobile-android",
+	"mobile-ios",
+	"mobile-flutter",
+	"mobile-react-native",
+]);
 
 const props = z.object({
 	disabledPlatforms: z

src/components/realtimekit/RTKSDKSelector/RTKSDKSelector.tsx

@@ -25,18 +25,85 @@ export default function SDKSelector({ disabledPlatforms }: SDKSelectorProps) {
 			label: "Mobile",
 			id: "mobile",
 		},
+		{
+			label: "React",
+			id: "web-react",
+		},
+		{
+			label: "Web Components",
+			id: "web-components",
+		},
+		{
+			label: "Angular",
+			id: "web-angular",
+		},
+		{
+			label: "Android",
+			id: "mobile-android",
+		},
+		{
+			label: "iOS",
+			id: "mobile-ios",
+		},
+		{
+			label: "Flutter",
+			id: "mobile-flutter",
+		},
+		{
+			label: "React Native",
+			id: "mobile-react-native",
+		},
 	];
 
+	const mainPlatforms = platforms.filter(
+		(p) => p.id === "web" || p.id === "mobile",
+	);
+
+	const frameworkToPlatform: Record<string, Platform> = {
+		react: "web-react",
+		"web-components": "web-components",
+		angular: "web-angular",
+		android: "mobile-android",
+		ios: "mobile-ios",
+		flutter: "mobile-flutter",
+		"react-native": "mobile-react-native",
+	};
+
 	const frameworks = useMemo(
 		() => (platform === "web" ? webFrameworks : mobileFrameworks),
 		[platform],
 	);
 
 	const isPlatformDisabled = (p: Platform) =>
 		Boolean(disabledPlatforms?.includes(p));
-	const activePlatformDisabled = isPlatformDisabled(platform);
 
-	const disabledPlatformsString = disabledPlatforms?.join(", ");
+	const isFrameworkDisabled = (fw: { id: string; label: string }) => {
+		const subPlatform = frameworkToPlatform[fw.id];
+		return subPlatform ? isPlatformDisabled(subPlatform) : false;
+	};
+
+	const isWebPlatformDisabled = () => {
+		if (isPlatformDisabled("web")) return true;
+
+		const allWebDisabled = webFrameworks.every((fw) => isFrameworkDisabled(fw));
+		return allWebDisabled;
+	};
+
+	const isMobilePlatformDisabled = () => {
+		if (isPlatformDisabled("mobile")) return true;
+
+		const allMobileDisabled = mobileFrameworks.every((fw) =>
+			isFrameworkDisabled(fw),
+		);
+		return allMobileDisabled;
+	};
+
+	const activePlatformDisabled =
+		platform === "web" ? isWebPlatformDisabled() : isMobilePlatformDisabled();
+
+	const disabledPlatformsString = disabledPlatforms
+		?.map((p) => platforms.find((platform) => platform.id === p)?.label || p)
+		.join(", ");
 
 	return (
 		<>
@@ -48,8 +115,13 @@ export default function SDKSelector({ disabledPlatforms }: SDKSelectorProps) {
 			)}
 			<div className="my-5 flex flex-col gap-0 rounded-md bg-blue-100 p-2 dark:bg-neutral-800">
 				<div className="flex w-full flex-row items-start justify-start gap-2">
-					{platforms.map((p) => {
-						const disabled = isPlatformDisabled(p.id);
+					{mainPlatforms.map((p) => {
+						const disabled =
+							p.id === "web"
+								? isWebPlatformDisabled()
+								: p.id === "mobile"
+									? isMobilePlatformDisabled()
+									: isPlatformDisabled(p.id);
 
 						return (
 							<button
@@ -86,15 +158,18 @@ export default function SDKSelector({ disabledPlatforms }: SDKSelectorProps) {
 				{!activePlatformDisabled && (
 					<div className="m-0 flex w-full flex-row items-center gap-2 rounded-r-md rounded-b-md bg-neutral-50 p-2 text-gray-500 dark:bg-neutral-700 dark:text-gray-400">
 						{frameworks.map((fw) => {
+							const disabled = isFrameworkDisabled(fw);
 							const handleClick = () => {
+								if (disabled) return;
 								setSelection(platform, fw);
 							};
 
 							return (
 								<button
 									key={fw.id}
 									type="button"
-									className={`m-0 flex ${framework?.id === fw.id ? "text-blue-500 italic" : ""} text-md cursor-pointer items-center rounded-md bg-neutral-50 px-3 py-1 font-medium dark:bg-neutral-700`}
+									disabled={disabled}
+									className={`m-0 flex ${framework?.id === fw.id ? "text-blue-500 italic" : ""} ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"} text-md items-center rounded-md bg-neutral-50 px-3 py-1 font-medium dark:bg-neutral-700`}
 									onClick={handleClick}
 								>
 									{fw.label}

src/components/realtimekit/hooks/useFramework.ts

@@ -1,7 +1,16 @@
 import { useEffect, useState } from "react";
 const STORAGE_KEY = "realtimekit-sdk-selector";
 
-export type Platform = "web" | "mobile";
+export type Platform =
+	| "web"
+	| "mobile"
+	| "web-react"
+	| "web-components"
+	| "web-angular"
+	| "mobile-android"
+	| "mobile-ios"
+	| "mobile-flutter"
+	| "mobile-react-native";
 export type Framework = {
 	id: string;
 	label: string;