cistack 6.1.0 → 6.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cistack",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "description": "Automatically generate GitHub Actions CI/CD pipelines by analysing your codebase",
   "main": "src/index.js",
   "types": "index.d.ts",

package/product-site/.github/workflows/pipeline.yml

@@ -1,10 +1,11 @@
 # Generated by cistack v6.0.0 — https://github.com/cistack
 # Unified Pipeline: ci, deploy
+# CI: locale JSON files are checked for key parity vs en.json (scripts/validate-i18n.mjs, no install).
 # Required secrets: VERCEL_TOKEN, VERCEL_ORG_ID, VERCEL_PROJECT_ID
 # Add these at: Settings → Secrets and Variables → Actions
 # Dependabot remains in .github/dependabot.yml
 
-name: Pipeline
+name: CISTACK PIPELINE
 'on':
   push:
     branches:
@@ -17,6 +18,17 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 jobs:
+  ci_i18n:
+    name: 🌐 Locale strings
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Validate dictionary key parity
+        run: node scripts/validate-i18n.mjs
+    if: >-
+      (github.event_name == 'push' && (github.ref_name == 'main')) || (github.event_name == 'pull_request' &&
+      (github.base_ref == 'main'))
   ci_lint:
     name: 🔍 Lint & Format
     runs-on: ubuntu-latest
@@ -44,6 +56,7 @@ jobs:
     runs-on: ubuntu-latest
     needs:
       - ci_lint
+      - ci_i18n
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

package/product-site/components/CopyButton.tsx

@@ -1,33 +1,27 @@
 "use client";
 
+import { AnimatePresence, m, useReducedMotion } from "framer-motion";
+import { Check, Copy } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 
-type CopyButtonVariant = "hero" | "terminal";
+const iconClass = "h-4 w-4 shrink-0";
 
 interface CopyButtonProps {
   text: string;
-  variant?: CopyButtonVariant;
   className?: string;
+  idleLabel?: string;
+  successLabel?: string;
 }
 
-const copyLabels: Record<CopyButtonVariant, { idle: string; success: string }> = {
-  hero: {
-    idle: "COPY",
-    success: "COPIED",
-  },
-  terminal: {
-    idle: "Copy",
-    success: "Copied",
-  },
-};
-
 export default function CopyButton({
   text,
-  variant = "hero",
   className = "",
+  idleLabel = "Copy",
+  successLabel = "Copied",
 }: CopyButtonProps) {
   const [copied, setCopied] = useState(false);
   const timeoutRef = useRef<number | null>(null);
+  const reduce = useReducedMotion();
 
   useEffect(() => {
     return () => {
@@ -41,45 +35,67 @@ export default function CopyButton({
     try {
       await navigator.clipboard.writeText(text);
       setCopied(true);
-
       if (timeoutRef.current !== null) {
         window.clearTimeout(timeoutRef.current);
       }
-
       timeoutRef.current = window.setTimeout(() => {
         setCopied(false);
       }, 2000);
     } catch (error) {
-      console.error("Unable to copy command", error);
+      console.error("Unable to copy text", error);
     }
   };
 
-  if (variant === "terminal") {
-    return (
-      <button
-        type="button"
-        onClick={handleCopy}
-        className={`text-[12px] font-semibold text-zinc-600 transition-colors hover:text-zinc-900 ${className}`}
-        aria-label="Copy command"
-      >
-        {copied ? copyLabels.terminal.success : copyLabels.terminal.idle}
-      </button>
-    );
-  }
+  const label = copied ? successLabel : idleLabel;
+  const tap = reduce ? {} : { scale: 0.92 };
+  const hover = reduce ? {} : { scale: 1.06 };
 
   return (
-    <button
+    <m.button
       type="button"
       onClick={handleCopy}
-      className={`flex h-auto items-center justify-between gap-6 rounded-sm border border-zinc-800 bg-zinc-950 px-6 py-3.5 text-[14px] text-white shadow-[0_8px_30px_rgb(0,0,0,0.12)] transition-all hover:bg-black hover:shadow-zinc-300/50 ${className}`}
-      aria-label="Copy install command"
+      whileTap={tap}
+      whileHover={hover}
+      transition={{ type: "spring", stiffness: 520, damping: 28 }}
+      className={`flex h-9 w-9 shrink-0 items-center justify-center text-zinc-500 transition-colors hover:text-zinc-900 ${className}`}
+      aria-label={label}
+      title={label}
     >
-      <span className="font-mono font-bold tracking-tight text-emerald-400 transition-colors">
-        {text}
-      </span>
-      <span className="ml-2 border-l border-zinc-800 pl-6 text-[12px] font-black uppercase tracking-[0.18em] text-zinc-300">
-        {copied ? copyLabels.hero.success : copyLabels.hero.idle}
+      <span className="relative flex h-4 w-4 items-center justify-center">
+        {reduce ? (
+          copied ? (
+            <Check className={`${iconClass} text-emerald-600`} aria-hidden strokeWidth={2.25} />
+          ) : (
+            <Copy className={iconClass} aria-hidden strokeWidth={2} />
+          )
+        ) : (
+          <AnimatePresence mode="wait" initial={false}>
+            {copied ? (
+              <m.span
+                key="check"
+                initial={{ opacity: 0, scale: 0.35, rotate: -50 }}
+                animate={{ opacity: 1, scale: 1, rotate: 0 }}
+                exit={{ opacity: 0, scale: 0.75 }}
+                transition={{ type: "spring", stiffness: 420, damping: 22 }}
+                className="absolute inset-0 flex items-center justify-center text-emerald-600"
+              >
+                <Check className={iconClass} aria-hidden strokeWidth={2.25} />
+              </m.span>
+            ) : (
+              <m.span
+                key="copy"
+                initial={{ opacity: 0, scale: 0.75 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.8 }}
+                transition={{ duration: 0.15, ease: [0.22, 1, 0.36, 1] }}
+                className="absolute inset-0 flex items-center justify-center"
+              >
+                <Copy className={iconClass} aria-hidden strokeWidth={2} />
+              </m.span>
+            )}
+          </AnimatePresence>
+        )}
       </span>
-    </button>
+    </m.button>
   );
 }