@axzydev/axzy_ui_system 1.4.7 → 1.5.0

package/src/showcases/HelpShowcase.tsx

@@ -13,14 +13,17 @@ import {
   FaTerminal,
   FaWrench,
 } from "react-icons/fa";
-import { ITAccordion, ITBadget, ITButton, ITCard, ITFlex, ITGrid, ITStack, ITText } from "../index";
+import { ITAccordion, ITButton, ITFlex, ITGrid, ITStack, ITText } from "../index";
 import type { ITAccordionItem } from "../index";
+import { BotonAccion } from "@/sandbox/ui";
+import { useITTranslation } from "@/i18n";
 
 const GITHUB_URL = "https://github.com/maag070208/AXZY_UI_SYSTEM";
 const ISSUE_URL = `${GITHUB_URL}/issues/new`;
 
 /** Clipboard button that flips to a "Copiado" confirmation for 2s. */
 const CopyButton = ({ text }: { text: string }) => {
+  const { t } = useITTranslation();
   const [copied, setCopied] = useState(false);
   return (
     <ITButton
@@ -35,7 +38,7 @@ const CopyButton = ({ text }: { text: string }) => {
     >
       <ITFlex align="center" gap={1.5}>
         {copied ? <FaCheck size={10} className="text-emerald-400" /> : <FaClipboardList size={10} />}
-        {copied ? "Copiado" : "Copiar"}
+        {copied ? t("showcase.common.copied") : t("showcase.common.copy")}
       </ITFlex>
     </ITButton>
   );
@@ -80,7 +83,9 @@ const ErrorBody = ({
   fix: ReactNode;
   bad?: string;
   good?: string;
-}) => (
+}) => {
+  const { t } = useITTranslation();
+  return (
   <ITStack spacing={3} className="pt-1">
     <div className="flex items-start gap-2">
       <FaExclamationTriangle size={12} className="mt-0.5 shrink-0 text-danger-500" />
@@ -96,18 +101,19 @@ const ErrorBody = ({
     </div>
     {bad && (
       <CodeBlock
-        filename="❌ Incorrecto"
+        filename={t("showcase.common.incorrect")}
         code={bad}
       />
     )}
     {good && (
       <CodeBlock
-        filename="✅ Correcto"
+        filename={t("showcase.common.correct")}
         code={good}
       />
     )}
   </ITStack>
-);
+  );
+};
 
 const COMMON_ERRORS: ITAccordionItem[] = [
   {
@@ -254,13 +260,13 @@ const FAQ: ITAccordionItem[] = [
     id: "faq-examples",
     title: "¿Dónde están los ejemplos de cada componente?",
     content:
-      "En el sandbox: ejecuta `pnpm dev` y navega a `#ui-system`. Las historias de Storybook existen y deben compilar, pero la superficie principal de ejemplos es el sandbox.",
+      "En el sandbox: ejecuta `pnpm dev` y navega a `#ui-system`. La superficie de ejemplos es el sandbox y la referencia por componente vive en `docs/`.",
   },
   {
     id: "faq-new-component",
     title: "¿Cómo agrego un componente nuevo?",
     content:
-      "Crea `src/components/<layer>/<kebab-name>/` con `<name>.tsx`, `<name>.props.ts` y `<name>.stories.tsx`. Documenta cada prop con JSDoc, regístralo en `src/index.ts` y actualiza los documentos y el showcase correspondiente.",
+      "Crea `src/components/<layer>/<kebab-name>/` con `<name>.tsx` y `<name>.props.ts`. Documenta cada prop con JSDoc, regístralo en `src/index.ts` y actualiza `docs/<capa>/<nombre>.md` y el showcase correspondiente.",
   },
   {
     id: "faq-changes-not-visible",
@@ -275,10 +281,10 @@ const FAQ: ITAccordionItem[] = [
       "Sí. Importa named exports (`import { ITButton } from \"@axzydev/axzy_ui_system\"`) y el bundler descarta lo que no usas. No hay dependencias de UI de terceros.",
   },
   {
-    id: "faq-storybook",
-    title: "¿Necesito Storybook para desarrollar?",
+    id: "faq-examples-docs",
+    title: "¿Dónde veo la documentación de un componente?",
     content:
-      "No es obligatorio. `pnpm storybook` es útil para aislar un componente, pero los ejemplos de referencia viven en el sandbox y las historias solo deben seguir compilando.",
+      "En `docs/<capa>/<componente>.md` tienes props, defaults, ejemplo y notas. Los ejemplos vivos están en el sandbox (`pnpm dev` → `#ui-system`).",
   },
   {
     id: "faq-browser-support",
@@ -315,61 +321,47 @@ pnpm check:atomic # valida la dirección de dependencias entre capas`;
  * frecuentes, preguntas frecuentes y guía para reportar incidencias.
  */
 export const HelpShowcase = () => {
+  const { t } = useITTranslation();
   return (
     <ITStack spacing={10} className="animate-fadeIn">
-      {/* ─── HERO ─── */}
-      <ITCard className="overflow-hidden border-0 bg-gradient-to-br from-primary-50 via-white to-purple-50 dark:from-primary-950/20 dark:via-slate-900 dark:to-purple-950/20 shadow-sm">
-        <div className="relative">
-          <div className="absolute -top-40 -right-40 w-[500px] h-[500px] bg-primary-500/10 rounded-full blur-[120px] pointer-events-none" />
-          <div className="absolute -bottom-40 -left-40 w-[500px] h-[500px] bg-purple-500/10 rounded-full blur-[120px] pointer-events-none" />
-          <ITStack spacing={5} className="relative z-10">
-            <ITStack spacing={2}>
-              <ITBadget label="Soporte" color="purple" variant="outlined" className="w-fit" />
-              <ITText as="h1" className="!text-4xl !font-bold !tracking-tight">
-                Ayuda & Solución de Bugs
-              </ITText>
-              <ITText as="p" muted className="!text-base !leading-relaxed max-w-2xl">
-                Guía para diagnosticar y resolver los problemas más frecuentes al usar AXZY UI System,
-                más una checklist para reportar incidencias con todo el contexto necesario.
-              </ITText>
-            </ITStack>
-            <ITFlex gap={3} wrap="wrap" align="center">
-              <ITButton
-                variant="filled"
-                color="primary"
-                icon={<FaBug size={13} />}
-                onClick={() => window.open(ISSUE_URL, "_blank", "noopener,noreferrer")}
-              >
-                Reportar un bug
-              </ITButton>
-              <ITButton
-                variant="outlined"
-                color="secondary"
-                icon={<FaBook size={13} />}
-                onClick={() => window.open(GITHUB_URL, "_blank", "noopener,noreferrer")}
-              >
-                Ver repositorio
-              </ITButton>
-            </ITFlex>
-          </ITStack>
-        </div>
-      </ITCard>
+      {/* ─── MASTHEAD ─── */}
+      <header className="border-b border-slate-200 pb-8 dark:border-slate-800">
+        <p className="font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
+          {t("showcase.help.badge")}
+        </p>
+        <h1 className="mt-2.5 font-display text-[34px] font-bold leading-[1.06] tracking-[-0.015em] text-slate-900 dark:text-white sm:text-[44px]">
+          {t("showcase.help.title")}
+        </h1>
+        <p className="mt-5 max-w-[68ch] text-[15.5px] leading-[1.75] text-slate-600 dark:text-slate-300">
+          {t("showcase.help.subtitle")}
+        </p>
+        <ITFlex gap={3} wrap="wrap" align="center" className="!mt-7">
+          <BotonAccion
+            variante="filled"
+            icono={<FaBug size={12} />}
+            onClick={() => window.open(ISSUE_URL, "_blank", "noopener,noreferrer")}
+          >
+            {t("showcase.help.reportBug")}
+          </BotonAccion>
+          <BotonAccion
+            variante="neutral"
+            icono={<FaBook size={12} />}
+            onClick={() => window.open(GITHUB_URL, "_blank", "noopener,noreferrer")}
+          >
+            {t("showcase.help.viewRepo")}
+          </BotonAccion>
+        </ITFlex>
+      </header>
 
       {/* ─── DIAGNÓSTICO RÁPIDO ─── */}
       <section>
-        <ITFlex align="center" gap={2.5} className="!mb-4">
-          <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300">
-            <FaTerminal size={13} />
-          </span>
-          <ITStack spacing={0}>
-            <ITText as="h2" className="!text-lg !font-bold">
-              Diagnóstico rápido
-            </ITText>
-            <ITText as="p" muted className="!text-xs">
-              Ejecuta estos comandos antes de reportar cualquier fallo.
-            </ITText>
-          </ITStack>
-        </ITFlex>
+        <div className="!mb-5 border-b border-slate-200 pb-4 dark:border-slate-800">
+          <h2 className="flex items-center gap-2.5 font-display text-[20px] font-bold tracking-[-0.02em] text-slate-900 dark:text-white">
+            <span className="text-primary-700 dark:text-primary-500"><FaTerminal size={13} /></span>
+            {t("showcase.help.quickDiagnosis")}
+          </h2>
+          <p className="mt-1.5 text-[13px] text-slate-500 dark:text-slate-400">{t("showcase.help.quickDiagnosisHint")}</p>
+        </div>
         <div className="relative">
           <div className="absolute top-2 right-2 z-10">
             <CopyButton text={DIAGNOSTICS} />
@@ -380,79 +372,85 @@ export const HelpShowcase = () => {
 
       {/* ─── ERRORES COMUNES ─── */}
       <section>
-        <ITFlex align="center" gap={2.5} className="!mb-4">
-          <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-danger-100 dark:bg-danger-950/40 text-danger-600 dark:text-danger-400">
-            <FaExclamationTriangle size={13} />
-          </span>
-          <ITStack spacing={0}>
-            <ITText as="h2" className="!text-lg !font-bold">
-              Errores comunes y su solución
-            </ITText>
-            <ITText as="p" muted className="!text-xs">
-              Síntoma, causa y arreglo de los tropiezos más habituales del stack.
-            </ITText>
-          </ITStack>
-        </ITFlex>
+        <div className="!mb-5 border-b border-slate-200 pb-4 dark:border-slate-800">
+          <h2 className="flex items-center gap-2.5 font-display text-[20px] font-bold tracking-[-0.02em] text-slate-900 dark:text-white">
+            <span className="text-primary-700 dark:text-primary-500"><FaExclamationTriangle size={13} /></span>
+            {t("showcase.help.commonErrors")}
+          </h2>
+          <p className="mt-1.5 text-[13px] text-slate-500 dark:text-slate-400">{t("showcase.help.commonErrorsHint")}</p>
+        </div>
         <ITAccordion items={COMMON_ERRORS} allowMultiple variant="separated" />
       </section>
 
       {/* ─── FAQ ─── */}
       <section>
-        <ITFlex align="center" gap={2.5} className="!mb-4">
-          <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-info-100 dark:bg-info-950/40 text-info-600 dark:text-info-400">
-            <FaQuestionCircle size={13} />
-          </span>
-          <ITStack spacing={0}>
-            <ITText as="h2" className="!text-lg !font-bold">
-              Preguntas frecuentes
-            </ITText>
-            <ITText as="p" muted className="!text-xs">
-              Respuestas cortas a las dudas más repetidas.
-            </ITText>
-          </ITStack>
-        </ITFlex>
+        <div className="!mb-5 border-b border-slate-200 pb-4 dark:border-slate-800">
+          <h2 className="flex items-center gap-2.5 font-display text-[20px] font-bold tracking-[-0.02em] text-slate-900 dark:text-white">
+            <span className="text-primary-700 dark:text-primary-500"><FaQuestionCircle size={13} /></span>
+            {t("showcase.help.faq")}
+          </h2>
+          <p className="mt-1.5 text-[13px] text-slate-500 dark:text-slate-400">{t("showcase.help.faqHint")}</p>
+        </div>
         <ITAccordion items={FAQ} allowMultiple variant="bordered" />
       </section>
 
       {/* ─── CÓMO REPORTAR UN BUG ─── */}
-      <ITCard title="Cómo reportar un bug" className="border-purple-200/60 dark:border-purple-800/60 shadow-sm">
+      <section className="border-t border-slate-200 pt-8 dark:border-slate-800">
         <ITStack spacing={6}>
-          <ITText as="p" className="!text-sm" muted>
-            Un buen reporte se puede reproducir sin preguntas extra. Sigue estos pasos y completa la
-            checklist antes de abrir el issue.
-          </ITText>
+          <div className="border-b border-slate-200 pb-4 dark:border-slate-800">
+            <h2 className="flex items-center gap-2.5 font-display text-[20px] font-bold tracking-[-0.02em] text-slate-900 dark:text-white">
+              <span className="text-primary-700 dark:text-primary-500">
+                <FaBug size={13} />
+              </span>
+              {t("showcase.help.howToReport")}
+            </h2>
+            <p className="mt-1.5 max-w-[70ch] text-[13px] leading-relaxed text-slate-500 dark:text-slate-400">
+              {t("showcase.help.reportIntro")}
+            </p>
+          </div>
 
           <ITGrid container spacing={6}>
             <ITGrid item xs={12} md={6}>
               <ITStack spacing={3}>
-                <ITText as="h3" className="!text-[11px] !font-bold uppercase !tracking-wider text-slate-400 dark:text-slate-500">
-                  Pasos
+                <ITText as="h3" className="font-mono !text-[11px] !font-medium uppercase !tracking-[0.14em] text-slate-500 dark:text-slate-400">
+                  {t("showcase.help.steps")}
                 </ITText>
-                {REPORT_STEPS.map((step, index) => (
-                  <ITFlex key={step} align="start" gap={3}>
-                    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-950/40 text-[11px] font-bold text-primary-600 dark:text-primary-400">
-                      {index + 1}
-                    </span>
-                    <ITText as="p" className="!text-sm text-slate-600 dark:text-slate-300">
-                      {step}
-                    </ITText>
-                  </ITFlex>
-                ))}
+                <ol className="border-t border-slate-200 dark:border-slate-800">
+                  {REPORT_STEPS.map((step, index) => (
+                    <li
+                      key={step}
+                      className="flex items-start gap-3 border-b border-slate-200 py-3 dark:border-slate-800"
+                    >
+                      <span className="font-mono text-[11px] tabular-nums text-slate-500 dark:text-slate-400">
+                        {String(index + 1).padStart(2, "0")}
+                      </span>
+                      <ITText as="p" className="!text-[13.5px] !leading-relaxed text-slate-600 dark:text-slate-300">
+                        {step}
+                      </ITText>
+                    </li>
+                  ))}
+                </ol>
               </ITStack>
             </ITGrid>
 
             <ITGrid item xs={12} md={6}>
-              <div className="h-full rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/40 p-5">
-                <ITText as="h3" className="!mb-4 !text-[11px] !font-bold uppercase !tracking-wider text-slate-400 dark:text-slate-500">
-                  Incluye en el reporte
+              <div>
+                <ITText as="h3" className="font-mono !text-[11px] !font-medium uppercase !tracking-[0.14em] text-slate-500 dark:text-slate-400">
+                  {t("showcase.help.includeInReport")}
                 </ITText>
-                <ul className="space-y-3">
+                <ul className="mt-3 border-t border-slate-200 dark:border-slate-800">
                   {REPORT_CHECKLIST.map((item) => (
-                    <li key={item} className="flex items-start gap-3">
-                      <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-success-100 dark:bg-success-950/40 text-success-600 dark:text-success-400">
-                        <FaCheck size={10} />
+                    <li
+                      key={item}
+                      className="flex items-start gap-3 border-b border-slate-200 py-3 dark:border-slate-800"
+                    >
+                      <FaCheck
+                        size={10}
+                        className="mt-1.5 shrink-0 text-primary-700 dark:text-primary-500"
+                      />
+                      <span className="text-[13.5px] leading-relaxed text-slate-600 dark:text-slate-300">
+                        {item}
                       </span>
-                      <span className="text-sm text-slate-600 dark:text-slate-300">{item}</span>
                     </li>
                   ))}
                 </ul>
@@ -464,34 +462,34 @@ export const HelpShowcase = () => {
             <ITFlex align="center" gap={2}>
               <FaLifeRing size={14} className="text-primary-500" />
               <ITText as="p" className="!text-xs" muted>
-                ¿Dudas de uso en lugar de un bug? Abre una discusión en el repositorio.
+                {t("showcase.help.footerHint")}
               </ITText>
             </ITFlex>
             <ITFlex gap={3} wrap="wrap">
-              <ITButton
-                variant="filled"
-                color="primary"
-                icon={<FaBug size={13} />}
+              <BotonAccion
+                variante="filled"
+                icono={<FaBug size={12} />}
                 onClick={() => window.open(ISSUE_URL, "_blank", "noopener,noreferrer")}
               >
-                Abrir issue
-              </ITButton>
-              <ITButton
-                variant="outlined"
-                color="secondary"
-                icon={<FaSyncAlt size={13} />}
-                onClick={() => window.open(`${GITHUB_URL}/blob/main/AGENTS.md`, "_blank", "noopener,noreferrer")}
+                {t("showcase.help.openIssue")}
+              </BotonAccion>
+              <BotonAccion
+                variante="neutral"
+                icono={<FaSyncAlt size={12} />}
+                onClick={() =>
+                  window.open(`${GITHUB_URL}/blob/main/AGENTS.md`, "_blank", "noopener,noreferrer")
+                }
               >
-                Ver AGENTS.md
-              </ITButton>
+                {t("showcase.help.viewAgents")}
+              </BotonAccion>
             </ITFlex>
           </ITFlex>
 
           <ITFlex align="center" gap={2} wrap="wrap">
-            <FixPill>Pasos reproducibles + versión + entorno = reporte accionable</FixPill>
+            <FixPill>{t("showcase.help.fixPill")}</FixPill>
           </ITFlex>
         </ITStack>
-      </ITCard>
+      </section>
     </ITStack>
   );
 };