feat(mobile): expand demo screen with all UI components

.mcp.json

@@ -9,6 +9,14 @@
 				"tokenUrl": "https://api.superset.sh/api/auth/mcp/token",
 				"scopes": ["openid", "profile", "email"]
 			}
+		},
+		"expo-mcp": {
+			"type": "http",
+			"url": "https://mcp.expo.dev/mcp"
+		},
+		"maestro": {
+			"command": "maestro",
+			"args": ["mcp"]
 		}
 	}
 }

apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/FilesView/FilesView.tsx

@@ -39,8 +39,8 @@ export function FilesView() {
 
 	const [searchTerm, setSearchTerm] = useState("");
 	const projectId = workspace?.project?.id;
-	const showHiddenFiles = useFileExplorerStore(
-		(s) => (projectId ? (s.showHiddenFiles[projectId] ?? false) : false),
+	const showHiddenFiles = useFileExplorerStore((s) =>
+		projectId ? (s.showHiddenFiles[projectId] ?? false) : false,
 	);
 	const toggleHiddenFiles = useFileExplorerStore((s) => s.toggleHiddenFiles);
 

apps/mobile/components/ui/accordion.tsx

@@ -0,0 +1,155 @@
+import * as AccordionPrimitive from "@rn-primitives/accordion";
+import { ChevronDown } from "lucide-react-native";
+import { Platform, Pressable, View } from "react-native";
+import Animated, {
+	FadeOutUp,
+	LayoutAnimationConfig,
+	LinearTransition,
+	useAnimatedStyle,
+	useDerivedValue,
+	withTiming,
+} from "react-native-reanimated";
+import { Icon } from "@/components/ui/icon";
+import { TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+function Accordion({
+	children,
+	...props
+}: Omit<AccordionPrimitive.RootProps, "asChild"> &
+	React.RefAttributes<AccordionPrimitive.RootRef>) {
+	return (
+		<LayoutAnimationConfig skipEntering>
+			<AccordionPrimitive.Root
+				{...(props as AccordionPrimitive.RootProps)}
+				asChild={Platform.OS !== "web"}
+			>
+				<Animated.View layout={LinearTransition.duration(200)}>
+					{children}
+				</Animated.View>
+			</AccordionPrimitive.Root>
+		</LayoutAnimationConfig>
+	);
+}
+
+function AccordionItem({
+	children,
+	className,
+	value,
+	...props
+}: AccordionPrimitive.ItemProps &
+	React.RefAttributes<AccordionPrimitive.ItemRef>) {
+	return (
+		<AccordionPrimitive.Item
+			className={cn(
+				"border-border border-b",
+				Platform.select({ web: "last:border-b-0" }),
+				className,
+			)}
+			value={value}
+			asChild
+			{...props}
+		>
+			<Animated.View
+				className="native:overflow-hidden"
+				layout={Platform.select({ native: LinearTransition.duration(200) })}
+			>
+				{children}
+			</Animated.View>
+		</AccordionPrimitive.Item>
+	);
+}
+
+const Trigger = Platform.OS === "web" ? View : Pressable;
+
+function AccordionTrigger({
+	className,
+	children,
+	...props
+}: AccordionPrimitive.TriggerProps & {
+	children?: React.ReactNode;
+} & React.RefAttributes<AccordionPrimitive.TriggerRef>) {
+	const { isExpanded } = AccordionPrimitive.useItemContext();
+
+	const progress = useDerivedValue(
+		() =>
+			isExpanded
+				? withTiming(1, { duration: 250 })
+				: withTiming(0, { duration: 200 }),
+		[isExpanded],
+	);
+	const chevronStyle = useAnimatedStyle(
+		() => ({
+			transform: [{ rotate: `${progress.value * 180}deg` }],
+		}),
+		[progress],
+	);
+
+	return (
+		<TextClassContext.Provider
+			value={cn(
+				"text-left text-sm font-medium",
+				Platform.select({ web: "group-hover:underline" }),
+			)}
+		>
+			<AccordionPrimitive.Header>
+				<AccordionPrimitive.Trigger {...props} asChild={Platform.OS !== "web"}>
+					<Trigger
+						className={cn(
+							"flex-row items-start justify-between gap-4 rounded-md py-4 disabled:opacity-50",
+							Platform.select({
+								web: "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none [&[data-state=open]>svg]:rotate-180",
+							}),
+							className,
+						)}
+					>
+						{children}
+						<Animated.View style={chevronStyle}>
+							<Icon
+								as={ChevronDown}
+								size={16}
+								className={cn(
+									"text-muted-foreground shrink-0",
+									Platform.select({
+										web: "pointer-events-none translate-y-0.5 transition-transform duration-200",
+									}),
+								)}
+							/>
+						</Animated.View>
+					</Trigger>
+				</AccordionPrimitive.Trigger>
+			</AccordionPrimitive.Header>
+		</TextClassContext.Provider>
+	);
+}
+
+function AccordionContent({
+	className,
+	children,
+	...props
+}: AccordionPrimitive.ContentProps &
+	React.RefAttributes<AccordionPrimitive.ContentRef>) {
+	const { isExpanded } = AccordionPrimitive.useItemContext();
+	return (
+		<TextClassContext.Provider value="text-sm">
+			<AccordionPrimitive.Content
+				className={cn(
+					"overflow-hidden",
+					Platform.select({
+						web: isExpanded ? "animate-accordion-down" : "animate-accordion-up",
+					}),
+				)}
+				{...props}
+			>
+				<Animated.View
+					exiting={Platform.select({ native: FadeOutUp.duration(200) })}
+					className={cn("pb-4", className)}
+				>
+					{children}
+				</Animated.View>
+			</AccordionPrimitive.Content>
+		</TextClassContext.Provider>
+	);
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

apps/mobile/components/ui/alert-dialog.tsx

@@ -0,0 +1,167 @@
+import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";
+import * as React from "react";
+import { Platform, View, type ViewProps } from "react-native";
+import { FadeIn, FadeOut } from "react-native-reanimated";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { buttonTextVariants, buttonVariants } from "@/components/ui/button";
+import { NativeOnlyAnimatedView } from "@/components/ui/native-only-animated-view";
+import { TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const FullWindowOverlay =
+	Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+
+function AlertDialogOverlay({
+	className,
+	children,
+	...props
+}: Omit<AlertDialogPrimitive.OverlayProps, "asChild"> &
+	React.RefAttributes<AlertDialogPrimitive.OverlayRef> & {
+		children?: React.ReactNode;
+	}) {
+	return (
+		<FullWindowOverlay>
+			<AlertDialogPrimitive.Overlay
+				className={cn(
+					"absolute bottom-0 left-0 right-0 top-0 z-50 flex items-center justify-center bg-black/50 p-2",
+					Platform.select({
+						web: "animate-in fade-in-0 fixed",
+					}),
+					className,
+				)}
+				{...props}
+			>
+				<NativeOnlyAnimatedView
+					entering={FadeIn.duration(200).delay(50)}
+					exiting={FadeOut.duration(150)}
+				>
+					{children}
+				</NativeOnlyAnimatedView>
+			</AlertDialogPrimitive.Overlay>
+		</FullWindowOverlay>
+	);
+}
+
+function AlertDialogContent({
+	className,
+	portalHost,
+	...props
+}: AlertDialogPrimitive.ContentProps &
+	React.RefAttributes<AlertDialogPrimitive.ContentRef> & {
+		portalHost?: string;
+	}) {
+	return (
+		<AlertDialogPortal hostName={portalHost}>
+			<AlertDialogOverlay>
+				<AlertDialogPrimitive.Content
+					className={cn(
+						"bg-background border-border z-50 flex flex-col gap-4 rounded-lg border p-6 shadow-lg shadow-black/5 sm:max-w-lg",
+						Platform.select({
+							web: "animate-in fade-in-0 zoom-in-95 web:max-w-[calc(100%-2rem)] duration-200",
+						}),
+						className,
+					)}
+					{...props}
+				/>
+			</AlertDialogOverlay>
+		</AlertDialogPortal>
+	);
+}
+
+function AlertDialogHeader({ className, ...props }: ViewProps) {
+	return (
+		<TextClassContext.Provider value="text-center sm:text-left">
+			<View className={cn("flex flex-col gap-2", className)} {...props} />
+		</TextClassContext.Provider>
+	);
+}
+
+function AlertDialogFooter({ className, ...props }: ViewProps) {
+	return (
+		<View
+			className={cn(
+				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogTitle({
+	className,
+	...props
+}: AlertDialogPrimitive.TitleProps &
+	React.RefAttributes<AlertDialogPrimitive.TitleRef>) {
+	return (
+		<AlertDialogPrimitive.Title
+			className={cn("text-foreground text-lg font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogDescription({
+	className,
+	...props
+}: AlertDialogPrimitive.DescriptionProps &
+	React.RefAttributes<AlertDialogPrimitive.DescriptionRef>) {
+	return (
+		<AlertDialogPrimitive.Description
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogAction({
+	className,
+	...props
+}: AlertDialogPrimitive.ActionProps &
+	React.RefAttributes<AlertDialogPrimitive.ActionRef>) {
+	return (
+		<TextClassContext.Provider value={buttonTextVariants({ className })}>
+			<AlertDialogPrimitive.Action
+				className={cn(buttonVariants(), className)}
+				{...props}
+			/>
+		</TextClassContext.Provider>
+	);
+}
+
+function AlertDialogCancel({
+	className,
+	...props
+}: AlertDialogPrimitive.CancelProps &
+	React.RefAttributes<AlertDialogPrimitive.CancelRef>) {
+	return (
+		<TextClassContext.Provider
+			value={buttonTextVariants({ className, variant: "outline" })}
+		>
+			<AlertDialogPrimitive.Cancel
+				className={cn(buttonVariants({ variant: "outline" }), className)}
+				{...props}
+			/>
+		</TextClassContext.Provider>
+	);
+}
+
+export {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogOverlay,
+	AlertDialogPortal,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+};