[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="rollout-strategy-selector.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { ChevronDown, ChevronUp, Plus, Trash2, Users } from "lucide-react" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { Separator } from "@/components/ui/separator" type AudienceType = "vip" | "beta" | "platform" | "percentage" | "region" interface SubStage { id: string name: string percentage: number } interface Stage { id: string name: string audienceType: AudienceType platform?: "ios" | "android" | "web" | "all" percentage?: number region?: string hasSubStages: boolean subStages: SubStage[] autoPause: boolean observationDuration: number observationUnit: "hours" | "days" | "weeks" } export default function RolloutStrategySelector() { const [stages, setStages] = useState([ { id: "1", name: "VIP Users", audienceType: "vip", hasSubStages: false, subStages: [], autoPause: true, observationDuration: 24, observationUnit: "hours", }, { id: "2", name: "iOS Rollout", audienceType: "platform", platform: "ios", hasSubStages: true, subStages: [ { id: "2-1", name: "Phase 1", percentage: 10 }, { id: "2-2", name: "Phase 2", percentage: 30 }, { id: "2-3", name: "Phase 3", percentage: 60 }, ], autoPause: true, observationDuration: 3, observationUnit: "days", }, { id: "3", name: "Android Rollout", audienceType: "platform", platform: "android", hasSubStages: true, subStages: [ { id: "3-1", name: "Phase 1", percentage: 10 }, { id: "3-2", name: "Phase 2", percentage: 30 }, { id: "3-3", name: "Phase 3", percentage: 60 }, ], autoPause: false, observationDuration: 1, observationUnit: "weeks", }, ]) const [expandedStages, setExpandedStages] = useState>({ "1": true, "2": true, "3": true, }) const addStage = () => { const newId = String(stages.length + 1) const newStage: Stage = { id: newId, name: `Stage ${newId}`, audienceType: "percentage", percentage: 100, hasSubStages: false, subStages: [], autoPause: true, observationDuration: 24, observationUnit: "hours", } setStages([...stages, newStage]) setExpandedStages({ ...expandedStages, [newId]: true }) } const removeStage = (id: string) => { setStages(stages.filter((stage) => stage.id !== id)) } const updateStage = (id: string, updates: Partial) => { setStages( stages.map((stage) => { if (stage.id === id) { return { ...stage, ...updates } } return stage }), ) } const addSubStage = (stageId: string) => { setStages( stages.map((stage) => { if (stage.id === stageId) { const subStageId = `${stageId}-${stage.subStages.length + 1}` return { ...stage, subStages: [ ...stage.subStages, { id: subStageId, name: `Phase ${stage.subStages.length + 1}`, percentage: 100 / (stage.subStages.length + 1), }, ], } } return stage }), ) } const removeSubStage = (stageId: string, subStageId: string) => { setStages( stages.map((stage) => { if (stage.id === stageId) { return { ...stage, subStages: stage.subStages.filter((subStage) => subStage.id !== subStageId), } } return stage }), ) } const updateSubStage = (stageId: string, subStageId: string, updates: Partial) => { setStages( stages.map((stage) => { if (stage.id === stageId) { return { ...stage, subStages: stage.subStages.map((subStage) => { if (subStage.id === subStageId) { return { ...subStage, ...updates } } return subStage }), } } return stage }), ) } const toggleStageExpansion = (id: string) => { setExpandedStages({ ...expandedStages, [id]: !expandedStages[id], }) } const normalizeSubStagePercentages = (stageId: string) => { setStages( stages.map((stage) => { if (stage.id === stageId && stage.subStages.length > 0) { const total = stage.subStages.reduce((sum, subStage) => sum + subStage.percentage, 0) if (total !== 100) { const factor = 100 / total return { ...stage, subStages: stage.subStages.map((subStage) => ({ ...subStage, percentage: Math.round(subStage.percentage * factor), })), } } } return stage }), ) } const getAudienceBadge = (stage: Stage) => { switch (stage.audienceType) { case "vip": return VIP Users case "beta": return Beta Testers case "platform": return ( {stage.platform === "ios" ? "iOS" : stage.platform === "android" ? "Android" : "Web"} ) case "percentage": return {stage.percentage}% of Users case "region": return {stage.region || "All Regions"} default: return null } } return ( Rollout Release Strategy Configure your release stages to gradually roll out features to different user segments

{stages.map((stage) => (

{stage.name}

{getAudienceBadge(stage)}

{expandedStages[stage.id] && (

Stage Name updateStage(stage.id, { name: e.target.value })} />

Audience Type

{stage.audienceType === "platform" && (

Platform

)} {stage.audienceType === "percentage" && (

Percentage of Users {stage.percentage}%

updateStage(stage.id, { percentage: value[0] })} />

)} {stage.audienceType === "region" && (

Region updateStage(stage.id, { region: e.target.value })} placeholder="e.g., North America, Europe, APAC" />

)}

{ updateStage(stage.id, { hasSubStages: checked, subStages: checked && stage.subStages.length === 0 ? [{ id: `${stage.id}-1`, name: "Phase 1", percentage: 100 }] : stage.subStages, }) }} /> Divide into sub-stages

{stage.hasSubStages && (

Sub-stages

{stage.subStages.map((subStage) => (

updateSubStage(stage.id, subStage.id, { name: e.target.value })} placeholder="Phase name" className="h-8" />

{ updateSubStage(stage.id, subStage.id, { percentage: value[0] }) }} onValueCommit={() => normalizeSubStagePercentages(stage.id)} className="flex-1" /> {subStage.percentage}%

))}

)} <>

Observation & Pause Settings

updateStage(stage.id, { autoPause: checked })} /> Automatically pause after this stage

Observation Duration updateStage(stage.id, { observationDuration: Number.parseInt(e.target.value) || 1 }) } className={!stage.autoPause ? "opacity-50" : ""} disabled={!stage.autoPause} />

Time Unit

{!stage.autoPause && (

Manual progression is enabled. You'll need to manually approve moving to the next stage.

)}

)} ))}

) }