@c15t/dev-tools 0.0.1-rc.3 → 0.0.1-rc.4

package/src/components/ui/scroll-area.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-
-import {
-	type ComponentPropsWithoutRef,
-	type ElementRef,
-	forwardRef,
-} from 'react';
-import { cn } from '../../libs/utils';
-
-const ScrollArea = forwardRef<
-	ElementRef<typeof ScrollAreaPrimitive.Root>,
-	ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-	<ScrollAreaPrimitive.Root
-		ref={ref}
-		className={cn('relative overflow-hidden', className)}
-		{...props}
-	>
-		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-			{children}
-		</ScrollAreaPrimitive.Viewport>
-		<ScrollBar />
-		<ScrollAreaPrimitive.Corner />
-	</ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = forwardRef<
-	ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-	ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = 'vertical', ...props }, ref) => (
-	<ScrollAreaPrimitive.ScrollAreaScrollbar
-		ref={ref}
-		orientation={orientation}
-		className={cn(
-			'flex touch-none select-none transition-colors',
-			orientation === 'vertical' &&
-				'h-full w-2.5 border-l border-l-transparent p-[1px]',
-			orientation === 'horizontal' &&
-				'h-2.5 flex-col border-t border-t-transparent p-[1px]',
-			className
-		)}
-		{...props}
-	>
-		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-	</ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };

package/src/components/ui/switch.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-import * as React from 'react';
-import { cn } from '../../libs/utils';
-
-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-[24px] w-[44px] 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 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-			className
-		)}
-		{...props}
-		ref={ref}
-	>
-		<SwitchPrimitives.Thumb
-			className={cn(
-				'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
-			)}
-		/>
-	</SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };

package/src/components/ui/tooltip.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
-
-import { cn } from '../../libs/utils';
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-	React.ElementRef<typeof TooltipPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-	<TooltipPrimitive.Portal>
-		<TooltipPrimitive.Content
-			ref={ref}
-			sideOffset={sideOffset}
-			className={cn(
-				'fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 animate-in overflow-hidden rounded-md bg-primary px-3 py-1.5 text-primary-foreground text-xs data-[state=closed]:animate-out',
-				className
-			)}
-			{...props}
-		/>
-	</TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components/wrapper.tsx

@@ -1,103 +0,0 @@
-'use client';
-
-import { Shield } from 'lucide-react';
-import { AnimatePresence, motion } from 'motion/react';
-
-import { type ReactNode, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { cn } from '../libs/utils';
-import { Button } from './ui/button';
-import { Card } from './ui/card';
-
-/**
- * Dev Tool Wrapper Component
- *
- * This component serves as both an icon and a wrapper for the development tool interface.
- * It provides a button that, when clicked, toggles the visibility of a pop-up containing
- * the router pages.
- *
- * @component
- * @returns {JSX.Element} The rendered component
- */
-export function DevToolWrapper({
-	children,
-	isOpen,
-	toggleOpen,
-	position = 'bottom-right',
-}: {
-	children: ReactNode;
-	isOpen: boolean;
-	toggleOpen: () => void;
-	position?: 'bottom-right' | 'top-right' | 'bottom-left' | 'top-left';
-}) {
-	// Track whether component is mounted to handle client-side only features
-	const [isMounted, setIsMounted] = useState(false);
-
-	useEffect(() => {
-		setIsMounted(true);
-		return () => setIsMounted(false);
-	}, []);
-
-	const DevToolContent = (
-		<AnimatePresence>
-			{isOpen && (
-				<motion.div
-					className="fixed inset-0 z-50 flex items-end justify-center sm:items-center"
-					initial={{ opacity: 0 }}
-					animate={{ opacity: 1 }}
-					exit={{ opacity: 0 }}
-				>
-					<motion.div
-						className="fixed inset-0 bg-background/10 backdrop-blur-sm"
-						initial={{ opacity: 0 }}
-						animate={{ opacity: 1 }}
-						exit={{ opacity: 0 }}
-						onClick={toggleOpen}
-					/>
-					<motion.div
-						className={cn(
-							'fixed z-[9999]',
-							position === 'bottom-right' && 'right-4 bottom-4',
-							position === 'top-right' && 'top-4 right-4',
-							position === 'bottom-left' && 'bottom-4 left-4',
-							position === 'top-left' && 'top-4 left-4'
-						)}
-						initial={{ opacity: 0, y: 50 }}
-						animate={{ opacity: 1, y: 0 }}
-						exit={{ opacity: 0, y: 50 }}
-						transition={{ type: 'spring', stiffness: 300, damping: 30 }}
-					>
-						<Card className="w-[350px] shadow-lg">{children}</Card>
-					</motion.div>
-				</motion.div>
-			)}
-		</AnimatePresence>
-	);
-
-	return (
-		<>
-			<AnimatePresence>
-				{!isOpen && (
-					<motion.div
-						initial={{ scale: 0.9, opacity: 0 }}
-						animate={{ scale: 1, opacity: 1 }}
-						exit={{ scale: 0.9, opacity: 0 }}
-						className="fixed right-4 bottom-4 z-[9999]"
-					>
-						<Button
-							variant="outline"
-							size="icon"
-							className="h-10 w-10 rounded-full shadow-lg"
-							onClick={toggleOpen}
-						>
-							<Shield className="h-4 w-4" />
-						</Button>
-					</motion.div>
-				)}
-			</AnimatePresence>
-			{isMounted && createPortal(DevToolContent, document.body)}
-		</>
-	);
-}
-
-export default DevToolWrapper;

package/src/dev-tool.tsx

@@ -1,117 +0,0 @@
-'use client';
-import type { NamespaceProps, PrivacyConsentState } from 'c15t';
-
-import {
-	type FC,
-	createContext,
-	useCallback,
-	useContext,
-	useEffect,
-	useState,
-} from 'react';
-import type { StoreApi } from 'zustand/vanilla';
-import { ErrorState } from './components/error-state';
-import { Header } from './components/header';
-import DevToolWrapper from './components/wrapper';
-import { Router } from './router/router';
-
-const PrivacyConsentContext = createContext<{
-	state: PrivacyConsentState | null;
-	store: StoreApi<PrivacyConsentState> | null;
-} | null>(null);
-
-export const getStore = () => {
-	const context = useContext(PrivacyConsentContext);
-	if (context === null) {
-		throw new Error(
-			'useConsentManagerContext must be used within a ConsentManagerProvider'
-		);
-	}
-
-	// Create a subscription to the store updates
-	const [localState, setLocalState] = useState(context.state);
-
-	useEffect(() => {
-		if (!context.store) {
-			return;
-		}
-
-		// Update local state when context state changes
-		setLocalState(context.state);
-
-		// Subscribe to store updates
-		const unsubscribe = context.store.subscribe(
-			(newState: PrivacyConsentState) => {
-				setLocalState(newState);
-			}
-		);
-
-		return () => {
-			unsubscribe();
-		};
-	}, [context.store, context.state]);
-
-	return localState;
-};
-
-export default PrivacyConsentContext;
-
-interface ConsentManagerProviderProps extends NamespaceProps {
-	position?: 'bottom-right' | 'top-right' | 'bottom-left' | 'top-left';
-}
-
-export const ConsentManagerDevTool: FC<ConsentManagerProviderProps> = ({
-	namespace = 'c15tStore',
-	position = 'bottom-right',
-}) => {
-	const [state, setState] = useState<PrivacyConsentState | null>(null);
-	const [store, setStore] = useState<StoreApi<PrivacyConsentState> | null>(
-		null
-	);
-	const [isOpen, setIsOpen] = useState(false);
-	const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
-
-	useEffect(() => {
-		const storeInstance =
-			(typeof window !== 'undefined' &&
-				(window as Window)[namespace as keyof Window]) ||
-			null;
-
-		if (storeInstance) {
-			setStore(storeInstance);
-			const currentState = storeInstance.getState() as PrivacyConsentState;
-			setState(currentState);
-
-			// Subscribe to store updates
-			const unsubscribe = storeInstance.subscribe(
-				(newState: PrivacyConsentState) => {
-					setState(newState);
-				}
-			);
-
-			return () => {
-				unsubscribe();
-			};
-		}
-		// biome-ignore lint/suspicious/noConsoleLog: needed for dev tools
-		// biome-ignore lint/suspicious/noConsole: needed for dev tools
-		console.log(`${namespace} is not available on the window object.`);
-	}, [namespace]);
-
-	return (
-		<PrivacyConsentContext.Provider value={{ state, store }}>
-			<DevToolWrapper
-				isOpen={isOpen}
-				toggleOpen={toggleOpen}
-				position={position}
-			>
-				<Header onClose={() => setIsOpen(false)} />
-				{state ? (
-					<Router onClose={() => setIsOpen(false)} />
-				) : (
-					<ErrorState namespace={namespace} />
-				)}
-			</DevToolWrapper>
-		</PrivacyConsentContext.Provider>
-	);
-};

package/src/index.ts

@@ -1,3 +0,0 @@
-import { ConsentManagerDevTool } from './dev-tool';
-
-export default ConsentManagerDevTool;

package/src/libs/utils.ts

@@ -1,6 +0,0 @@
-import clsx, { type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
-}

package/src/router/router.tsx

@@ -1,164 +0,0 @@
-'use client';
-
-import {
-	Cookie,
-	FileText,
-	GanttChartSquare,
-	RefreshCw,
-	ToggleLeft,
-} from 'lucide-react';
-import { motion } from 'motion/react';
-import { useCallback, useState } from 'react';
-
-import type { PrivacyConsentState } from 'c15t';
-import { Button } from '../components/ui/button';
-import { ExpandableTabs } from '../components/ui/expandable-tabs';
-import { ScrollArea } from '../components/ui/scroll-area';
-import { getStore } from '../dev-tool';
-import { cn } from '../libs/utils';
-
-type TabSection = 'Consents' | 'Compliance' | 'Scripts' | 'Conditional';
-
-const tabs = [
-	{ title: 'Consents' as const, icon: ToggleLeft },
-	{ title: 'Compliance' as const, icon: GanttChartSquare },
-] as const;
-
-interface ContentItem {
-	title: string;
-	status: string;
-	details?: string;
-}
-
-interface RouterProps {
-	onClose: () => void;
-}
-
-export function Router({ onClose }: RouterProps) {
-	const privacyConsent = getStore() as PrivacyConsentState;
-	const { clearAllData, setIsPrivacyDialogOpen, setShowPopup } = privacyConsent;
-
-	const [activeSection, setActiveSection] = useState<TabSection>('Consents');
-
-	// Handle tab change locally
-	const handleTabChange = useCallback((index: number | null) => {
-		if (index !== null) {
-			//@ts-expect-error
-			setActiveSection(tabs[index].title);
-		}
-	}, []);
-
-	// Compute rendering state without conditions
-	const renderingState = [
-		{ componentName: 'MarketingContent', consentType: 'marketing' as const },
-		{ componentName: 'AnalyticsContent', consentType: 'measurement' as const },
-		{
-			componentName: 'PersonalizationComponent',
-			consentType: 'ad_personalization' as const,
-		},
-	];
-
-	// Compute content items based on active section
-	const contentItems: ContentItem[] =
-		activeSection === 'Consents'
-			? Object.entries(privacyConsent.consents).map(([name, value]) => ({
-					title: name,
-					status: value ? 'Enabled' : 'Disabled',
-				}))
-			: activeSection === 'Compliance'
-				? Object.entries(privacyConsent.complianceSettings).map(
-						([region, settings]) => ({
-							title: region,
-							status: settings.enabled ? 'Active' : 'Inactive',
-						})
-					)
-				: activeSection === 'Conditional'
-					? renderingState.map((item) => ({
-							title: item.componentName,
-							status: 'Rendered',
-							details: `Requires: ${item.consentType}`,
-						}))
-					: [];
-
-	const handleResetConsent = useCallback(() => {
-		clearAllData();
-		onClose();
-	}, [clearAllData, onClose]);
-
-	const handleOpenPrivacyModal = useCallback(() => {
-		setIsPrivacyDialogOpen(true);
-	}, [setIsPrivacyDialogOpen]);
-
-	const handleOpenCookiePopup = useCallback(() => {
-		setShowPopup(true);
-	}, [setShowPopup]);
-
-	return (
-		<>
-			<div className="border-b p-4">
-				<ExpandableTabs
-					tabs={Array.from(tabs)}
-					activeColor="text-primary"
-					className="border-muted"
-					onChange={handleTabChange}
-				/>
-			</div>
-			<ScrollArea className="h-[300px]">
-				<motion.div
-					className="space-y-2 p-4"
-					initial={{ opacity: 0 }}
-					animate={{ opacity: 1 }}
-					exit={{ opacity: 0 }}
-				>
-					{contentItems.map((item, index) => (
-						<motion.div
-							key={`${activeSection}-${item.title}`}
-							className="flex items-center justify-between rounded-lg border bg-card p-3"
-							initial={{ opacity: 0, y: 20 }}
-							animate={{ opacity: 1, y: 0 }}
-							transition={{ delay: index * 0.05 }}
-						>
-							<div className="flex flex-col">
-								<span className="font-medium text-sm">{item.title}</span>
-								{item.details && (
-									<span className="text-muted-foreground text-xs">
-										{item.details}
-									</span>
-								)}
-							</div>
-							<span
-								className={cn(
-									'rounded-full px-2 py-1 text-xs',
-									item.status === 'Enabled' ||
-										item.status === 'Active' ||
-										item.status === 'active' ||
-										item.status === 'Rendered'
-										? 'bg-green-100 text-green-800'
-										: 'bg-red-100 text-red-800'
-								)}
-							>
-								{item.status}
-							</span>
-						</motion.div>
-					))}
-				</motion.div>
-			</ScrollArea>
-			<div className="border-t p-4">
-				<div className="flex flex-col gap-2">
-					<Button variant="outline" size="sm" onClick={handleResetConsent}>
-						<RefreshCw className="mr-2 h-4 w-4" />
-						Reset Local Storage Consent
-					</Button>
-					<Button variant="outline" size="sm" onClick={handleOpenPrivacyModal}>
-						<FileText className="mr-2 h-4 w-4" />
-						Open Privacy Settings
-					</Button>
-					<Button variant="outline" size="sm" onClick={handleOpenCookiePopup}>
-						<Cookie className="mr-2 h-4 w-4" />
-						Open Cookie Popup
-					</Button>
-				</div>
-			</div>
-		</>
-	);
-}