@jjlmoya/utils-babies 1.1.0

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@jjlmoya/utils-babies",
+  "version": "1.1.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./data": "./src/data.ts"
+  },
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "lint": "eslint src/ --max-warnings 0 && stylelint \"src/**/*.{css,astro}\"",
+    "check": "astro check",
+    "type-check": "astro check",
+    "test": "vitest run",
+    "preversion": "npm run lint && npm run test",
+    "postversion": "git push && git push --tags",
+    "patch": "npm version patch",
+    "minor": "npm version minor",
+    "major": "npm version major"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,astro}": [
+      "eslint --fix"
+    ]
+  },
+  "dependencies": {
+    "@iconify-json/mdi": "^1.2.3",
+    "@jjlmoya/utils-shared": "1.0.2",
+    "astro": "^6.1.2",
+    "astro-icon": "^1.1.0"
+  },
+  "peerDependencies": {
+    "chart.js": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "chart.js": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.8",
+    "chart.js": "^4.4.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-astro": "^1.6.0",
+    "eslint-plugin-no-comments": "^1.1.10",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.4.0",
+    "postcss-html": "^1.8.1",
+    "schema-dts": "^1.1.2",
+    "stylelint": "^17.6.0",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-declaration-strict-value": "^1.11.1",
+    "typescript": "^5.4.0",
+    "typescript-eslint": "^8.58.0",
+    "vitest": "^4.1.2"
+  }
+}

package/src/category/i18n/en.ts

@@ -0,0 +1,48 @@
+import type { CategoryLocaleContent } from '../../types';
+
+export const content: CategoryLocaleContent = {
+  slug: 'babies',
+  title: 'Baby Calculators',
+  description: 'Tools and calculators for the care and development tracking of your baby.',
+  seo: [
+    {
+      type: 'summary',
+      title: 'Available tools',
+      items: [
+        'Feeding calculator by age and weight',
+        'Growth percentile calculator (WHO)',
+        'Baby clothing size converter by brand',
+        'Fertile days estimator',
+        'Personalized vaccination calendar',
+        'Pregnancy and gestational weeks calculator',
+      ],
+    },
+    {
+      type: 'title',
+      text: "Tracking your baby's development",
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "Baby calculators help you accurately track your child's growth and development. From calculating milk feeds based on age and weight to checking WHO percentiles, these tools are designed to give you useful information at every stage.",
+    },
+    {
+      type: 'title',
+      text: 'Feeding and nutrition',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'The feeding calculator estimates the amount of breast milk or formula your baby needs based on their age in days, weeks, or months and their current weight. Calculations follow standard pediatric guidelines to ensure adequate nutrition.',
+    },
+    {
+      type: 'title',
+      text: 'Growth and percentiles',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "The percentile calculator uses the World Health Organization (WHO) reference tables to place your baby's weight, height, and BMI within the distribution of the child population. A 50th percentile indicates the baby is at the average.",
+    },
+  ],
+};

package/src/category/i18n/es.ts

@@ -0,0 +1,48 @@
+import type { CategoryLocaleContent } from '../../types';
+
+export const content: CategoryLocaleContent = {
+  slug: 'bebes',
+  title: 'Calculadoras para Bebés',
+  description: 'Herramientas y calculadoras para el cuidado y seguimiento del desarrollo de tu bebé.',
+  seo: [
+    {
+      type: 'summary',
+      title: 'Herramientas disponibles',
+      items: [
+        'Calculadora de alimentación por edad y peso',
+        'Calculadora de percentiles de crecimiento (OMS)',
+        'Convertidor de tallas de ropa por marca',
+        'Estimador de días fértiles',
+        'Calendario de vacunación personalizado',
+        'Calculadora de embarazo y semanas de gestación',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Seguimiento del desarrollo de tu bebé',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Las calculadoras para bebés te ayudan a realizar un seguimiento preciso del crecimiento y desarrollo de tu hijo. Desde calcular las tomas de leche según la edad y el peso hasta consultar los percentiles de la OMS, estas herramientas están diseñadas para darte información útil en cada etapa.',
+    },
+    {
+      type: 'title',
+      text: 'Alimentación y nutrición',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La calculadora de alimentación estima la cantidad de leche materna o de fórmula que necesita tu bebé según su edad en días, semanas o meses y su peso actual. Los cálculos siguen las pautas pediátricas estándar para garantizar una nutrición adecuada.',
+    },
+    {
+      type: 'title',
+      text: 'Crecimiento y percentiles',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La calculadora de percentiles utiliza las tablas de referencia de la Organización Mundial de la Salud (OMS) para situar el peso, la talla y el IMC de tu bebé dentro de la distribución de la población infantil. Un percentil 50 indica que el bebé está en la media.',
+    },
+  ],
+};

package/src/category/i18n/fr.ts

@@ -0,0 +1,48 @@
+import type { CategoryLocaleContent } from '../../types';
+
+export const content: CategoryLocaleContent = {
+  slug: 'bebes',
+  title: 'Calculatrices pour Bébés',
+  description: "Outils et calculatrices pour le suivi du développement et des soins de votre bébé.",
+  seo: [
+    {
+      type: 'summary',
+      title: 'Outils disponibles',
+      items: [
+        "Calculatrice d'alimentation par âge et poids",
+        'Calculatrice de percentiles de croissance (OMS)',
+        'Convertisseur de tailles de vêtements par marque',
+        'Estimateur de jours fertiles',
+        'Calendrier de vaccination personnalisé',
+        "Calculatrice de grossesse et semaines de gestation",
+      ],
+    },
+    {
+      type: 'title',
+      text: "Suivi du développement de votre bébé",
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "Les calculatrices pour bébés vous aident à suivre avec précision la croissance et le développement de votre enfant. Du calcul des tétées selon l'âge et le poids à la consultation des percentiles de l'OMS, ces outils sont conçus pour vous fournir des informations utiles à chaque étape.",
+    },
+    {
+      type: 'title',
+      text: 'Alimentation et nutrition',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "La calculatrice d'alimentation estime la quantité de lait maternel ou de lait maternisé dont votre bébé a besoin selon son âge en jours, semaines ou mois et son poids actuel. Les calculs suivent les directives pédiatriques standard pour garantir une nutrition adéquate.",
+    },
+    {
+      type: 'title',
+      text: 'Croissance et percentiles',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "La calculatrice de percentiles utilise les tableaux de référence de l'Organisation mondiale de la santé (OMS) pour situer le poids, la taille et l'IMC de votre bébé dans la distribution de la population infantile. Un percentile 50 indique que le bébé est dans la moyenne.",
+    },
+  ],
+};

package/src/category/index.ts

@@ -0,0 +1,24 @@
+import type { BabiesCategoryEntry } from '../types';
+import { babyFeedingCalculator } from '../tool/baby-feeding-calculator';
+import { babySizeConverter } from '../tool/baby-size-converter';
+import { vaccinationCalendar } from '../tool/vaccination-calendar';
+import { fertileDaysEstimator } from '../tool/fertile-days-estimator';
+import { babyPercentileCalculator } from '../tool/baby-percentile-calculator';
+import { pregnancyCalculator } from '../tool/pregnancy-calculator';
+
+export const babiesCategory: BabiesCategoryEntry = {
+  icon: 'mdi:baby-carriage',
+  tools: [
+    babyFeedingCalculator,
+    babySizeConverter,
+    vaccinationCalendar,
+    fertileDaysEstimator,
+    babyPercentileCalculator,
+    pregnancyCalculator,
+  ],
+  i18n: {
+    es: () => import('./i18n/es').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+  },
+};

package/src/category/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { babiesCategory } from './index';
+import type { KnownLocale } from '../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await babiesCategory.i18n[locale]?.();
+---
+
+{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+

package/src/components/PreviewNavSidebar.astro

@@ -0,0 +1,116 @@
+---
+interface NavItem {
+  id: string;
+  title: string;
+  href: string;
+  isActive?: boolean;
+}
+
+interface Props {
+  categoryTitle: string;
+  tools?: NavItem[];
+}
+
+const { categoryTitle, tools = [] } = Astro.props;
+---
+
+<nav class="preview-nav-sidebar">
+  <div class="sidebar-header">
+    <h3>{categoryTitle}</h3>
+  </div>
+
+  <ul class="tools-list">
+    {tools.map((tool) => (
+      <li>
+        <a
+          href={tool.href}
+          class:list={['tool-link', { active: tool.isActive }]}
+        >
+          <span class="tool-title">{tool.title}</span>
+        </a>
+      </li>
+    ))}
+  </ul>
+</nav>
+
+<style>
+  .preview-nav-sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--bg-surface, #0f172a);
+  }
+
+  .sidebar-header {
+    padding: 2rem 1.5rem 1.5rem;
+    border-bottom: 1px solid var(--border-color, #1e293b);
+  }
+
+  .sidebar-header h3 {
+    margin: 0;
+    font-size: 0.75rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-muted, #94a3b8);
+  }
+
+  .tools-list {
+    list-style: none;
+    margin: 0;
+    padding: 0.5rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .tools-list li {
+    margin: 0;
+  }
+
+  .tool-link {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1.5rem;
+    color: var(--text-muted, #94a3b8);
+    text-decoration: none;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    border-left: 3px solid transparent;
+    position: relative;
+  }
+
+  .tool-link:hover {
+    color: var(--text-base, #f1f5f9);
+    background: rgba(255, 255, 255, 0.08);
+    padding-left: 1.75rem;
+  }
+
+  .tool-link.active {
+    color: var(--accent, #f43f5e);
+    background: rgba(244, 63, 94, 0.15);
+    border-left-color: var(--accent, #f43f5e);
+    font-weight: 600;
+  }
+
+  .tool-link.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 24px;
+    background: var(--accent, #f43f5e);
+    border-radius: 0 2px 2px 0;
+  }
+
+  .tool-title {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>
+

package/src/components/PreviewToolbar.astro

@@ -0,0 +1,143 @@
+---
+import type { KnownLocale } from '../types';
+
+interface Props {
+  currentLocale: KnownLocale;
+  localeUrls?: Partial<Record<KnownLocale, string>>;
+}
+
+const { currentLocale, localeUrls = {} } = Astro.props;
+
+const otherLocales = Object.entries(localeUrls).filter(([l]) => l !== currentLocale) as [
+  KnownLocale,
+  string,
+][];
+---
+
+<nav class="preview-toolbar">
+  {
+    otherLocales.length > 0 && (
+      <div class="locale-group">
+        <span class="locale-current">{currentLocale.toUpperCase()}</span>
+        {otherLocales.map(([locale, url]) => (
+          <a href={url} class="btn-locale">
+            {locale.toUpperCase()}
+          </a>
+        ))}
+      </div>
+    )
+  }
+
+  <button id="theme-toggle" class="btn-theme" aria-label="Toggle theme" title="Toggle theme">
+    <span class="theme-icon"></span>
+  </button>
+</nav>
+
+<script>
+  function initToolbar() {
+    const btn = document.getElementById('theme-toggle');
+    if (!btn) return;
+
+    const applyTheme = (theme: string) => {
+      document.documentElement.classList.remove('theme-light', 'theme-dark');
+      document.documentElement.classList.add(theme);
+      localStorage.setItem('theme', theme);
+    };
+
+    btn.addEventListener('click', () => {
+      const next = document.documentElement.classList.contains('theme-dark')
+        ? 'theme-light'
+        : 'theme-dark';
+      applyTheme(next);
+    });
+  }
+
+  initToolbar();
+  document.addEventListener('astro:after-swap', initToolbar);
+</script>
+
+<style>
+  .preview-toolbar {
+    position: fixed;
+    top: 1rem;
+    right: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    z-index: 1000;
+    background: var(--bg-surface);
+    padding: 0.4rem;
+    border-radius: 1rem;
+    border: 1px solid var(--border-color);
+    backdrop-filter: blur(12px);
+  }
+
+  .locale-group {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding-right: 0.5rem;
+    border-right: 1px solid var(--border-color);
+  }
+
+  .locale-current {
+    font-size: 0.7rem;
+    font-weight: 900;
+    color: var(--text-muted);
+    padding: 0.4rem 0.6rem;
+    letter-spacing: 0.08em;
+  }
+
+  .btn-locale {
+    background: transparent;
+    border: 1px solid var(--border-color);
+    color: var(--text-main);
+    cursor: pointer;
+    padding: 0.4rem 0.7rem;
+    border-radius: 0.5rem;
+    font-weight: 700;
+    font-size: 0.7rem;
+    text-decoration: none;
+    letter-spacing: 0.08em;
+    transition: all 0.2s ease;
+  }
+
+  .btn-locale:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+
+  .btn-theme {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 0.6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s ease;
+  }
+
+  .btn-theme:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  .theme-icon {
+    display: block;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+  }
+
+  :global(.theme-light) .theme-icon {
+    background: #f59e0b;
+    box-shadow: 0 0 8px #fbbf24;
+  }
+
+  :global(.theme-dark) .theme-icon {
+    background: #94a3b8;
+    box-shadow: inset -4px -2px 0 #1e293b;
+  }
+</style>
+

package/src/data.ts

@@ -0,0 +1,30 @@
+export { babiesCategory } from './category';
+export { ALL_TOOLS } from './tools';
+
+export { babyFeedingCalculator } from './tool/baby-feeding-calculator';
+export type { BabyFeedingCalculatorUI } from './tool/baby-feeding-calculator';
+
+export { babySizeConverter } from './tool/baby-size-converter';
+export type { BabySizeConverterUI } from './tool/baby-size-converter';
+
+export { vaccinationCalendar } from './tool/vaccination-calendar';
+export type { VaccinationCalendarUI } from './tool/vaccination-calendar';
+
+export { fertileDaysEstimator } from './tool/fertile-days-estimator';
+export type { FertileDaysEstimatorUI } from './tool/fertile-days-estimator';
+
+export { babyPercentileCalculator } from './tool/baby-percentile-calculator';
+export type { BabyPercentileCalculatorUI } from './tool/baby-percentile-calculator';
+
+export { pregnancyCalculator } from './tool/pregnancy-calculator';
+export type { PregnancyCalculatorUI } from './tool/pregnancy-calculator';
+
+export type {
+  KnownLocale,
+  ToolLocaleContent,
+  CategoryLocaleContent,
+  LocaleMap,
+  BabiesToolEntry,
+  BabiesCategoryEntry,
+  ToolDefinition,
+} from './types';

package/src/env.d.ts

@@ -0,0 +1,5 @@
+declare module '*.astro' {
+  const Component: (_props: Record<string, unknown>) => unknown;
+  export default Component;
+}
+

package/src/index.ts

@@ -0,0 +1,19 @@
+export { babiesCategory } from './category';
+export { default as babiesCategorySEO } from './category/seo.astro';
+
+export type {
+  KnownLocale,
+  FAQItem,
+  BibliographyEntry,
+  HowToStep,
+  ToolLocaleContent,
+  CategoryLocaleContent,
+  LocaleLoader,
+  LocaleMap,
+  BabiesToolEntry,
+  BabiesCategoryEntry,
+  ToolDefinition,
+} from './types';
+
+export { ALL_TOOLS } from './tools';
+

package/src/layouts/PreviewLayout.astro

@@ -0,0 +1,117 @@
+---
+import "@jjlmoya/utils-shared/theme.css";
+import PreviewToolbar from "../components/PreviewToolbar.astro";
+import type { KnownLocale } from "../types";
+
+interface Props {
+  title: string;
+  currentLocale?: KnownLocale;
+  localeUrls?: Partial<Record<KnownLocale, string>>;
+  hasSidebar?: boolean;
+}
+
+const { title, currentLocale = "es", localeUrls = {}, hasSidebar = false } = Astro.props;
+---
+
+<!doctype html>
+<html lang={currentLocale}>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>{title} · preview</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+
+    <script is:inline>
+      (function () {
+        const saved = localStorage.getItem("theme") || "theme-dark";
+        document.documentElement.classList.add(saved);
+      })();
+    </script>
+    <slot name="head" />
+  </head>
+  <body>
+    <PreviewToolbar currentLocale={currentLocale} localeUrls={localeUrls} />
+    <div class:list={["page-wrapper", { "with-sidebar": hasSidebar }]}>
+      {
+        hasSidebar && (
+          <aside class="sidebar-area">
+            <slot name="sidebar" />
+          </aside>
+        )
+      }
+      <main>
+        <slot />
+      </main>
+    </div>
+  </body>
+</html>
+
+<style is:global>
+  :root {
+    --accent: #f43f5e;
+    --primary-base: #9f1239;
+    --cyan: #06b6d4;
+  }
+
+  .theme-dark,
+  .theme-light {
+    --text-main: var(--text-base);
+    --border-color: var(--border-base);
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--bg-page);
+    color: var(--text-base);
+    margin: 0;
+    min-height: 100vh;
+    transition:
+      background-color 0.3s ease,
+      color 0.3s ease;
+  }
+
+  main {
+    padding: 0 2rem;
+  }
+
+  .page-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .page-wrapper.with-sidebar {
+    display: grid;
+    grid-template-columns: 240px 1fr;
+    min-height: 100vh;
+  }
+
+  .sidebar-area {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    overflow-y: auto;
+    border-right: 1px solid var(--border-color);
+    background: var(--bg-page);
+  }
+
+  @media (max-width: 768px) {
+    .page-wrapper.with-sidebar {
+      grid-template-columns: 1fr;
+    }
+
+    .sidebar-area {
+      display: none;
+    }
+  }
+</style>
+