refactor shopify storefront

components/ui/progress.tsx

@@ -1,31 +1,44 @@
-"use client"
+import React from 'react';
 
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+// Utility function to combine classNames
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
 
-import { cn } from "@/lib/utils"
+interface ProgressProps extends React.ComponentProps<'div'> {
+  value?: number;
+  max?: number;
+}
 
 function Progress({
   className,
-  value,
+  value = 0,
+  max = 100,
   ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+}: ProgressProps) {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+
   return (
-    <ProgressPrimitive.Root
+    <div
       data-slot="progress"
       className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
         className
       )}
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={value}
       {...props}
     >
-      <ProgressPrimitive.Indicator
+      <div
         data-slot="progress-indicator"
         className="bg-primary h-full w-full flex-1 transition-all"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+        style={{ transform: `translateX(-${100 - percentage}%)` }}
       />
-    </ProgressPrimitive.Root>
-  )
+    </div>
+  );
 }
 
-export { Progress }
+export { Progress };
+export type { ProgressProps };