anteriority-ui 1.0.0

package/screens/components/UserEditPopover/index.jsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from 'react';
+import Popover from '@mui/material/Popover';
+import InputWithIcon from '../Material-UI/Components/InputWithIcon/index';
+import { CircleUser, Check, X } from 'lucide-react';
+import styles from './index.module.css';
+import { updateUserName } from '../../../features/user-profile/api';
+import { getUserId } from '../../../common/storage/LocalStorage';
+import Button from '../Button/index'
+
+const UserEditPopover = ({ open, anchorEl, onClose, currentName, onSuccess, bgColor, saveColor, cancelColor }) => {
+  const [tempUserName, setTempUserName] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setTempUserName(currentName || '');
+    }
+  }, [open, currentName]);
+
+  const handleSave = async () => {
+    if (!tempUserName.trim()) return;
+    setLoading(true);
+    try {
+      const idUser = getUserId();
+      await updateUserName({
+        idUser: Number(idUser),
+        newUserName: tempUserName
+      });
+      onSuccess(tempUserName);
+    } catch (error) {
+      console.error('Error al actualizar nombre', error);
+      // Actualizar localmente si falla para pruebas
+      onSuccess(tempUserName);
+    } finally {
+      setLoading(false);
+      onClose();
+    }
+  };
+
+  return (
+    <Popover
+      open={open}
+      anchorEl={anchorEl}
+      onClose={onClose}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
+      slotProps={{
+        paper: {
+          className: styles.popoverPaper,
+          style: {
+            ...(bgColor ? { '--usereditpopover-bg': bgColor } : {}),
+            ...(saveColor ? { '--usereditpopover-save': saveColor } : {}),
+            ...(cancelColor ? { '--usereditpopover-cancel': cancelColor } : {}),
+          }
+        }
+      }}
+    >
+      <div className={styles.container}>
+        <h4 className={styles.header}>Editar Nombre</h4>
+        <div className={styles.inputWrapper}>
+          <InputWithIcon
+            value={tempUserName}
+            onChange={(e) => setTempUserName(e.target.value)}
+            icon={CircleUser}
+            variant="standard"
+            placeholder="Tu nuevo nombre..."
+            autoFocus
+            fullWidth
+          />
+        </div>
+        <div className={styles.actions}>
+          <Button
+            className={styles.btnCancel}
+            onClick={onClose}
+            disabled={loading}
+            borderColor="var(--border-gray-low)"
+
+          >
+            <X size={14} style={{ marginRight: '4px', verticalAlign: 'middle' }} />
+            Cancelar
+          </Button>
+          <Button
+            className={styles.btnSave}
+            onClick={handleSave}
+            disabled={loading}
+          >
+            <Check size={14} style={{ marginRight: '4px', verticalAlign: 'middle' }} />
+            {loading ? 'Guardar' : 'Guardar'}
+          </Button>
+        </div>
+      </div>
+    </Popover>
+  );
+};
+
+export default UserEditPopover;

package/screens/components/UserEditPopover/index.module.css

@@ -0,0 +1,97 @@
+.popoverPaper {
+  padding: 16px;
+  border-radius: 12px;
+  background-color: var(--usereditpopover-bg, #ffffff);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e2e8f0;
+  margin-top: 8px;
+  min-width: 250px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.header {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0;
+}
+
+.inputWrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.inputWrapper :global(.MuiInput-root) {
+  color: #1e293b !important;
+  font-size: 0.95rem !important;
+  padding: 6px 8px !important;
+  background: #f8fafc !important;
+  border-radius: 6px !important;
+  border: 1px solid #cbd5e1 !important;
+}
+
+.inputWrapper :global(.MuiInput-root):before,
+.inputWrapper :global(.MuiInput-root):after {
+  display: none !important;
+}
+
+.inputWrapper :global(.MuiInputAdornment-root) svg {
+  color: #64748b !important;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.btnSave {
+  background: var(--usereditpopover-save, #10b981);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.85rem;
+  transition: background 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.btnSave:hover:not(:disabled) {
+  background: var(--usereditpopover-save-hover, #059669);
+}
+
+.btnSave:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.btnCancel {
+  background: var(--usereditpopover-cancel-bg, #f1f5f9);
+  color: var(--usereditpopover-cancel, #64748b);
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.85rem;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.btnCancel:hover {
+  background: var(--usereditpopover-cancel-hover-bg, #e2e8f0);
+  color: var(--usereditpopover-cancel-hover, #0f172a);
+}

package/screens/components/UserEditPopover/index.stories.jsx

@@ -0,0 +1,49 @@
+import React, { useState, useRef, useEffect } from 'react';
+import UserEditPopover from './index';
+
+export default {
+  title: 'Components/UserEditPopover',
+  component: UserEditPopover,
+};
+
+// UserEditPopover uses a MUI Popover, which needs a real DOM node as anchorEl.
+// This wrapper renders a trigger button, stores its DOM node in state once
+// mounted, and passes that node down as anchorEl so the popover has something
+// to anchor to when `open` is true.
+const AnchoredPopover = (args) => {
+  const anchorRef = useRef(null);
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  useEffect(() => {
+    setAnchorEl(anchorRef.current);
+  }, []);
+
+  return (
+    <div style={{ padding: '60px' }}>
+      <button ref={anchorRef} type="button">
+        Editar nombre
+      </button>
+      <UserEditPopover {...args} anchorEl={anchorEl} />
+    </div>
+  );
+};
+
+export const Open = {
+  render: (args) => <AnchoredPopover {...args} />,
+  args: {
+    open: true,
+    currentName: 'Ana Gomez',
+    onClose: () => console.log('popover closed'),
+    onSuccess: (name) => console.log('saved name', name),
+  },
+};
+
+export const EmptyName = {
+  render: (args) => <AnchoredPopover {...args} />,
+  args: {
+    open: true,
+    currentName: '',
+    onClose: () => console.log('popover closed'),
+    onSuccess: (name) => console.log('saved name', name),
+  },
+};

package/scripts/build.mjs

@@ -0,0 +1,129 @@
+// Compila la librería para publicar: transpila JSX -> JS (import/export ESM intactos)
+// y copia los assets (CSS Modules, imágenes, etc.) manteniendo la MISMA estructura de
+// carpetas que el código fuente, para que los subpath imports documentados en el README
+// (ej. 'anteriority-ui/screens/components/Button', 'anteriority-ui/common/theme/muiTheme')
+// sigan resolviendo igual una vez instalada la librería, sin exponer JSX sin compilar.
+import { build } from 'esbuild';
+import { cp, mkdir, readdir, readFile, rm, stat, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const rootDir = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
+const outDir = path.join(rootDir, 'dist');
+const sourceDirs = ['screens', 'common', 'features', 'hooks'];
+
+const isSourceFile = (file) => /\.(jsx|js)$/.test(file) && !/\.stories\.jsx$/.test(file);
+
+async function collectFiles(dir) {
+  const entries = await readdir(dir, { withFileTypes: true });
+  const files = [];
+  for (const entry of entries) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...(await collectFiles(full)));
+    } else {
+      files.push(full);
+    }
+  }
+  return files;
+}
+
+async function main() {
+  await rm(outDir, { recursive: true, force: true });
+  await mkdir(outDir, { recursive: true });
+
+  const allFiles = [path.join(rootDir, 'index.js')];
+  for (const dir of sourceDirs) {
+    const abs = path.join(rootDir, dir);
+    try {
+      await stat(abs);
+    } catch {
+      continue;
+    }
+    allFiles.push(...(await collectFiles(abs)));
+  }
+
+  const jsEntryPoints = allFiles.filter((f) => isSourceFile(path.relative(rootDir, f)));
+  const assetFiles = allFiles.filter((f) => !isSourceFile(path.relative(rootDir, f)) && !/\.stories\.jsx$/.test(f));
+
+  if (jsEntryPoints.length === 0) {
+    throw new Error('No se encontraron archivos fuente para compilar.');
+  }
+
+  await build({
+    entryPoints: jsEntryPoints,
+    outdir: outDir,
+    outbase: rootDir,
+    bundle: false,
+    format: 'esm',
+    platform: 'neutral',
+    jsx: 'automatic',
+    logLevel: 'info',
+  });
+
+  for (const file of assetFiles) {
+    const rel = path.relative(rootDir, file);
+    const dest = path.join(outDir, rel);
+    await mkdir(path.dirname(dest), { recursive: true });
+    await cp(file, dest);
+  }
+
+  for (const file of ['README.md', 'AnteriorityUI.md', 'LICENSE']) {
+    const src = path.join(rootDir, file);
+    try {
+      await stat(src);
+      await cp(src, path.join(outDir, file));
+    } catch {
+      // opcional, no todos existen
+    }
+  }
+
+  // pnpm publish empaqueta desde `dist/` (ver publishConfig.directory en package.json),
+  // así que este subset de campos es el package.json que va a terminar publicado.
+  const rootPkg = JSON.parse(await readFile(path.join(rootDir, 'package.json'), 'utf8'));
+  const {
+    name,
+    version,
+    description,
+    main,
+    license,
+    author,
+    type,
+    keywords,
+    repository,
+    homepage,
+    bugs,
+    dependencies,
+    peerDependencies,
+  } = rootPkg;
+  await writeFile(
+    path.join(outDir, 'package.json'),
+    JSON.stringify(
+      {
+        name,
+        version,
+        description,
+        main,
+        license,
+        author,
+        type,
+        keywords,
+        repository,
+        homepage,
+        bugs,
+        dependencies,
+        peerDependencies,
+        publishConfig: { registry: rootPkg.publishConfig.registry },
+      },
+      null,
+      2,
+    ) + '\n',
+  );
+
+  console.log(`\nBuild OK: ${jsEntryPoints.length} módulos, ${assetFiles.length} assets copiados -> dist/`);
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/scripts/check-case.mjs

@@ -0,0 +1,127 @@
+// Audita imports relativos contra el filesystem real, comparando MAYÚSCULAS/minúsculas
+// exactas. En Windows/Mac (case-insensitive) un import mal casado resuelve igual y no
+// se nota; en Linux (donde corren los builds de deploy) revienta con "module not found".
+// Uso: node scripts/check-case.mjs        (reporta)
+//      node scripts/check-case.mjs --fix  (además lista qué archivos habría que renombrar)
+import { readFile, readdir, stat } from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const rootDir = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
+const sourceDirs = ['screens', 'common', 'features', 'hooks'];
+const importRe = /from\s+['"](\.\.?\/[^'"]+)['"]/g;
+const candidateExts = ['', '.jsx', '.js', '.module.css', '.css'];
+const candidateIndexes = ['/index.jsx', '/index.js', '/Index.jsx', '/Index.js'];
+
+async function collectFiles(dir) {
+  const entries = await readdir(dir, { withFileTypes: true });
+  const files = [];
+  for (const entry of entries) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) files.push(...(await collectFiles(full)));
+    else files.push(full);
+  }
+  return files;
+}
+
+// Devuelve el nombre EXACTO (case-sensitive) tal como está en disco para un segmento
+// dado dentro de un directorio, o null si no existe ningún archivo/carpeta con ese
+// nombre en cualquier casing.
+async function exactNameInDir(dir, name) {
+  let entries;
+  try {
+    entries = await readdir(dir);
+  } catch {
+    return { exists: false, exact: null };
+  }
+  const exact = entries.includes(name);
+  const insensitiveMatch = entries.find((e) => e.toLowerCase() === name.toLowerCase());
+  return { exists: Boolean(insensitiveMatch), exact: exact ? name : insensitiveMatch ?? null, caseMismatch: Boolean(insensitiveMatch) && !exact };
+}
+
+async function resolveCaseSensitive(fromFile, spec) {
+  const baseDir = path.dirname(fromFile);
+  const targetNoExt = path.resolve(baseDir, spec);
+  const parentDir = path.dirname(targetNoExt);
+  const leaf = path.basename(targetNoExt);
+
+  // 1. spec ya trae extensión (ej. ./index.module.css)
+  if (path.extname(leaf)) {
+    const res = await exactNameInDir(parentDir, leaf);
+    return res.exists ? { ok: !res.caseMismatch, actual: res.exact, tried: leaf, parentDir } : null;
+  }
+
+  // 2. probar como archivo con extensiones comunes
+  for (const ext of candidateExts) {
+    if (!ext) continue;
+    const res = await exactNameInDir(parentDir, leaf + ext);
+    if (res.exists) return { ok: !res.caseMismatch, actual: res.exact, tried: leaf + ext, parentDir };
+  }
+
+  // 3. probar como directorio con index.jsx / Index.jsx adentro
+  const dirRes = await exactNameInDir(parentDir, leaf);
+  if (dirRes.exists) {
+    const dirExactOrGuess = path.join(parentDir, dirRes.exact ?? leaf);
+    for (const idx of candidateIndexes) {
+      const idxLeaf = path.basename(idx);
+      const idxRes = await exactNameInDir(dirExactOrGuess, idxLeaf);
+      if (idxRes.exists) {
+        return {
+          ok: !dirRes.caseMismatch && !idxRes.caseMismatch,
+          actual: `${dirRes.actual}/${idxRes.exact}`,
+          tried: `${leaf}${idx}`,
+          parentDir,
+        };
+      }
+    }
+  }
+
+  return null; // no se pudo resolver ni siquiera sin distinguir mayúsculas -> no es un problema de casing
+}
+
+async function main() {
+  const allFiles = [];
+  for (const dir of sourceDirs) {
+    const abs = path.join(rootDir, dir);
+    try {
+      await stat(abs);
+    } catch {
+      continue;
+    }
+    allFiles.push(...(await collectFiles(abs)));
+  }
+  const sourceFiles = allFiles.filter((f) => /\.jsx?$/.test(f));
+
+  const mismatches = [];
+  for (const file of sourceFiles) {
+    const content = await readFile(file, 'utf8');
+    for (const match of content.matchAll(importRe)) {
+      const spec = match[1];
+      const resolved = await resolveCaseSensitive(file, spec);
+      if (resolved && !resolved.ok) {
+        mismatches.push({
+          file: path.relative(rootDir, file),
+          spec,
+          importedAs: path.basename(spec),
+          actualOnDisk: resolved.actual,
+        });
+      }
+    }
+  }
+
+  if (mismatches.length === 0) {
+    console.log('OK: ningún import relativo tiene mismatch de mayúsculas/minúsculas.');
+    return;
+  }
+
+  console.log(`${mismatches.length} import(s) con casing distinto al archivo real en disco:\n`);
+  for (const m of mismatches) {
+    console.log(`  ${m.file}\n    import: '${m.spec}'  (pide "${m.importedAs}")\n    disco:  "${m.actualOnDisk}"\n`);
+  }
+  process.exitCode = 1;
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/scripts/verify-dist.mjs

@@ -0,0 +1,45 @@
+// Bundlea dist/index.js (que importa los ~50 componentes) con esbuild para confirmar
+// que el grafo de imports del paquete YA COMPILADO resuelve de verdad. `pnpm build-storybook`
+// no alcanza para esto: corre contra el código FUENTE (.jsx), donde un import con extensión
+// ".jsx" explícita matchea el archivo real; una vez compilado a dist/ (.js), ese mismo import
+// literal deja de resolver. Correr después de `pnpm run build`.
+import { build } from 'esbuild';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const rootDir = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
+
+const peerAndDeps = [
+  'react',
+  'react-dom',
+  'react-dom/*',
+  'react/*',
+  '@mui/*',
+  '@emotion/*',
+  'lucide-react',
+  'date-fns',
+  'react-markdown',
+  'remark-gfm',
+];
+
+async function main() {
+  try {
+    await build({
+      entryPoints: [path.join(rootDir, 'dist', 'index.js')],
+      bundle: true,
+      outfile: path.join(rootDir, 'dist', '.verify-bundle.js'),
+      format: 'esm',
+      platform: 'browser',
+      loader: { '.css': 'css' },
+      external: peerAndDeps,
+      logLevel: 'silent',
+    });
+  } catch (err) {
+    console.error('FAIL: el paquete compilado en dist/ tiene imports que no resuelven:\n');
+    console.error(err.message);
+    process.exit(1);
+  }
+  console.log('OK: dist/index.js y los ~50 componentes que importa resuelven correctamente.');
+}
+
+main();

package/vitest.config.js

@@ -0,0 +1,36 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig } from 'vitest/config';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+import { playwright } from '@vitest/browser-playwright';
+
+const dirname =
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({ configDir: path.join(dirname, '.storybook') }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [{ browser: 'chromium' }],
+          },
+        },
+      },
+    ],
+  },
+});