@jjlmoya/utils-babies 1.13.0 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-babies",
-    "version": "1.13.0",
+    "version": "1.15.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -22,7 +22,7 @@
         "build": "astro build",
         "preview": "astro preview",
         "astro": "astro",
-        "lint": "eslint src/ --max-warnings 0 && stylelint \"src/**/*.{css,astro}\"",
+        "lint": "eslint src/ --max-warnings 0 && stylelint \"src/**/*.css\" \"src/tool/**/*.astro\" \"src/layouts/**/*.astro\" \"src/components/**/*.astro\"",
         "check": "astro check",
         "type-check": "astro check",
         "test": "vitest run",

package/src/category/index.ts

@@ -6,10 +6,13 @@ import { fertileDaysEstimator } from '../tool/fertile-days-estimator/entry';
 import { babyPercentileCalculator } from '../tool/baby-percentile-calculator/entry';
 import { pregnancyCalculator } from '../tool/pregnancy-calculator/entry';
 
+import { babyBudgetPlanner } from '../tool/baby-budget-planner/entry';
+
 export const babiesCategory: BabiesCategoryEntry = {
   icon: 'mdi:baby-carriage',
   tools: [
     babyFeedingCalculator,
+    babyBudgetPlanner,
     babySizeConverter,
     vaccinationCalendar,
     fertileDaysEstimator,

package/src/entries.ts

@@ -1,5 +1,7 @@
 export { babyFeedingCalculator } from './tool/baby-feeding-calculator/entry';
+export { babyBudgetPlanner } from './tool/baby-budget-planner/entry';
 export type { BabyFeedingCalculatorUI, BabyFeedingCalculatorLocaleContent } from './tool/baby-feeding-calculator/entry';
+export type { BabyBudgetPlannerUI, BabyBudgetPlannerLocaleContent } from './tool/baby-budget-planner/entry';
 export { babyPercentileCalculator } from './tool/baby-percentile-calculator/entry';
 export type { BabyPercentileCalculatorUI, BabyPercentileCalculatorLocaleContent } from './tool/baby-percentile-calculator/entry';
 export { babySizeConverter } from './tool/baby-size-converter/entry';
@@ -12,9 +14,10 @@ export { vaccinationCalendar } from './tool/vaccination-calendar/entry';
 export type { VaccinationCalendarUI, VaccinationCalendarLocaleContent } from './tool/vaccination-calendar/entry';
 export { babiesCategory } from './category';
 import { babyFeedingCalculator } from './tool/baby-feeding-calculator/entry';
+import { babyBudgetPlanner } from './tool/baby-budget-planner/entry';
 import { babyPercentileCalculator } from './tool/baby-percentile-calculator/entry';
 import { babySizeConverter } from './tool/baby-size-converter/entry';
 import { fertileDaysEstimator } from './tool/fertile-days-estimator/entry';
 import { pregnancyCalculator } from './tool/pregnancy-calculator/entry';
 import { vaccinationCalendar } from './tool/vaccination-calendar/entry';
-export const ALL_ENTRIES = [babyFeedingCalculator, babyPercentileCalculator, babySizeConverter, fertileDaysEstimator, pregnancyCalculator, vaccinationCalendar];
+export const ALL_ENTRIES = [babyFeedingCalculator, babyBudgetPlanner, babyPercentileCalculator, babySizeConverter, fertileDaysEstimator, pregnancyCalculator, vaccinationCalendar];

package/src/index.ts

@@ -1,6 +1,7 @@
 export { babiesCategory } from './category';
 
 export * from './tool/baby-feeding-calculator';
+export * from './tool/baby-budget-planner';
 export * from './tool/baby-size-converter';
 export * from './tool/baby-percentile-calculator';
 export * from './tool/fertile-days-estimator';

package/src/pages/[locale]/[slug].astro

@@ -16,37 +16,19 @@ export async function getStaticPaths() {
 
   for (const { entry, Component: lazyComp } of ALL_TOOLS) {
     const { default: Component } = await lazyComp();
-    const localeEntries = Object.entries(entry.i18n) as [
-      KnownLocale,
-      () => Promise<ToolLocaleContent>,
-    ][];
-    const localeContents = await Promise.all(
-      localeEntries.map(async ([locale, loader]) => ({
-        locale,
-        content: await loader(),
-      })),
-    );
-
-    const localeUrls = Object.fromEntries(
-      localeContents.map(({ locale, content }) => [
-        locale,
-        `/${locale}/${content.slug}`,
-      ]),
-    ) as Partial<Record<KnownLocale, string>>;
+    const localeEntries = Object.entries(entry.i18n) as [KnownLocale, () => Promise<ToolLocaleContent>][];
+    const localeContents = await Promise.all(localeEntries.map(async ([locale, loader]) => ({ locale, content: await loader() })));
+    const localeUrls = Object.fromEntries(localeContents.map(({ locale, content }) => [locale, `/${locale}/${content.slug}`])) as Partial<Record<KnownLocale, string>>;
+    const englishSlug = entry.i18n.en ? (await entry.i18n.en()).slug : entry.id;
 
     for (const { locale, content } of localeContents) {
-      const allToolsNav = await Promise.all(
-        ALL_TOOLS.map(async ({ entry: navEntry }) => ({
-          id: navEntry.id,
-          title: (await navEntry.i18n[locale]!()).title,
-          href: `/${locale}/${(await navEntry.i18n[locale]!()).slug}`,
-          isActive: navEntry.id === entry.id,
-        })),
-      );
-      paths.push({
-        params: { locale, slug: content.slug },
-        props: { Component, locale, content, localeUrls, allToolsNav },
-      });
+      const allToolsNav = (await Promise.all(ALL_TOOLS.map(async ({ entry: n }) => {
+        const l = n.i18n[locale] ?? n.i18n.en;
+        if (!l) return null;
+        const c = await l();
+        return { id: n.id, title: c.title, href: `/${locale}/${c.slug}`, isActive: n.id === entry.id };
+      }))).filter(Boolean) as NavItem[];
+      paths.push({ params: { locale, slug: content.slug }, props: { Component, locale, content, localeUrls, allToolsNav, englishSlug } });
     }
   }
 
@@ -66,11 +48,22 @@ interface Props {
   content: ToolLocaleContent;
   localeUrls: Partial<Record<KnownLocale, string>>;
   allToolsNav: NavItem[];
+  englishSlug: string;
 }
 
-const { Component, locale, content, localeUrls, allToolsNav } = Astro.props;
+const { Component, locale, content, localeUrls, allToolsNav, englishSlug } =
+  Astro.props;
 
-const seoContent: UtilitySEOContent = { locale, sections: content.seo };
+const cssFiles = import.meta.glob("../" + "../tool/**" + "/*.css", {
+  query: "?raw",
+  import: "default",
+});
+const cssKey = Object.keys(cssFiles).find((k) =>
+  k.endsWith(`/${englishSlug}.css`),
+);
+const toolCss = cssKey ? ((await cssFiles[cssKey]()) as string) : "";
+
+const seoContent: UtilitySEOContent = { locale, sections: content.seo ?? [] };
 
 const words = content.title.split(" ");
 const titleHighlight = words[0] || "";
@@ -83,14 +76,11 @@ const titleBase = words.slice(1).join(" ") || "";
   localeUrls={localeUrls}
   hasSidebar={true}
 >
-  <PreviewNavSidebar
-    slot="sidebar"
-    categoryTitle="Tools"
-    tools={allToolsNav}
-  />
+  <PreviewNavSidebar slot="sidebar" categoryTitle="Tools" tools={allToolsNav} />
   <Fragment slot="head">
+    {toolCss && <style set:html={toolCss} />}
     {
-      content.schemas.map((schema: unknown) => (
+      (content.schemas ?? []).map((schema) => (
         <script
           is:inline
           type="application/ld+json"
@@ -116,11 +106,11 @@ const titleBase = words.slice(1).join(" ") || "";
     </section>
 
     <section class="section-faq">
-      <FAQSection items={content.faq} title={content.ui['faqTitle'] ?? ''} inLanguage={locale} />
+      <FAQSection items={content.faq} inLanguage={locale} />
     </section>
 
     <section class="section-bibliography">
-      <Bibliography links={content.bibliography} title={content.ui['bibliographyTitle'] ?? ''} />
+      <Bibliography links={content.bibliography} />
     </section>
   </div>
 </PreviewLayout>
@@ -131,11 +121,13 @@ const titleBase = words.slice(1).join(" ") || "";
     flex-direction: column;
     gap: 2rem;
   }
+
   .section-tool {
     max-width: 1200px;
     margin: 0 auto;
     width: 100%;
   }
+
   .section-seo,
   .section-faq,
   .section-bibliography {

package/src/tests/locale_completeness.test.ts

@@ -35,8 +35,8 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 6 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(6);
+  it('all 7 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(7);
   });
 });
 

package/src/tests/shared-test-helpers.ts

@@ -0,0 +1,56 @@
+import type { ToolDefinition } from '../types';
+
+export interface ToolExportValidationResult {
+  passed: boolean;
+  failures: string[];
+}
+
+function validateComponentType(
+  toolId: string,
+  componentName: string,
+  component: unknown,
+  failures: string[],
+): void {
+  if (typeof component !== 'function') {
+    failures.push(`${toolId}: ${componentName} is not a function (${typeof component})`);
+  }
+}
+
+async function validateComponentExecution(
+  toolId: string,
+  componentName: string,
+  fn: () => Promise<unknown>,
+  failures: string[],
+): Promise<void> {
+  try {
+    const result = await fn();
+    if (!result || typeof result !== 'object') {
+      failures.push(`${toolId}: ${componentName} import returned invalid result`);
+    }
+  } catch (error) {
+    failures.push(`${toolId}: ${componentName} execution error - ${error instanceof Error ? error.message : 'unknown'}`);
+  }
+}
+
+export async function validateToolExports(tools: ToolDefinition[]): Promise<ToolExportValidationResult> {
+  const failures: string[] = [];
+
+  for (const tool of tools) {
+    validateComponentType(tool.entry.id, 'Component', tool.Component, failures);
+    validateComponentType(tool.entry.id, 'SEOComponent', tool.SEOComponent, failures);
+    validateComponentType(tool.entry.id, 'BibliographyComponent', tool.BibliographyComponent, failures);
+
+    const componentFn = tool.Component as () => Promise<unknown>;
+    const seoFn = tool.SEOComponent as () => Promise<unknown>;
+    const bibFn = tool.BibliographyComponent as () => Promise<unknown>;
+
+    await validateComponentExecution(tool.entry.id, 'Component', componentFn, failures);
+    await validateComponentExecution(tool.entry.id, 'SEOComponent', seoFn, failures);
+    await validateComponentExecution(tool.entry.id, 'BibliographyComponent', bibFn, failures);
+  }
+
+  return {
+    passed: failures.length === 0,
+    failures,
+  };
+}

package/src/tests/tool_exports.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import { validateToolExports } from './shared-test-helpers';
+
+describe('Tool Exports Pattern Validation', () => {
+  describe('Component Exports Format', () => {
+    ALL_TOOLS.forEach((tool) => {
+      it(`${tool.entry.id}: Component should be a lazy-loaded function`, () => {
+        expect(typeof tool.Component).toBe('function');
+        expect(tool.Component).toBeInstanceOf(Function);
+      });
+
+      it(`${tool.entry.id}: SEOComponent should be a lazy-loaded function`, () => {
+        expect(typeof tool.SEOComponent).toBe('function');
+        expect(tool.SEOComponent).toBeInstanceOf(Function);
+      });
+
+      it(`${tool.entry.id}: BibliographyComponent should be a lazy-loaded function`, () => {
+        expect(typeof tool.BibliographyComponent).toBe('function');
+        expect(tool.BibliographyComponent).toBeInstanceOf(Function);
+      });
+    });
+  });
+
+  describe('Dynamic Import Validation', () => {
+    it('all tools must have functional dynamic imports', async () => {
+      const result = await validateToolExports(ALL_TOOLS);
+      if (!result.passed) {
+        throw new Error(`Tool export validation failed:\n${result.failures.join('\n')}`);
+      }
+      expect(result.passed).toBe(true);
+    });
+  });
+});

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { babiesCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 6 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(6);
+    it('should have 7 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(7);
     });
 
     it('babiesCategory should be defined', () => {

package/src/tool/baby-budget-planner/baby-budget-planner.css

@@ -0,0 +1,405 @@
+.bbp-card {
+  --bbp-primary: #f43f5e;
+  --bbp-primary-soft: rgba(244, 63, 94, 0.05);
+  --bbp-primary-border: rgba(244, 63, 94, 0.1);
+  --bbp-bg-card: #fff;
+  --bbp-bg-left: #f8fafc;
+  --bbp-bg-item: #fff;
+  --bbp-text-main: #0f172a;
+  --bbp-text-muted: #64748b;
+  --bbp-border: #e2e8f0;
+  --bbp-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
+  
+  display: flex;
+  flex-direction: column;
+  background: var(--bbp-bg-card);
+  border-radius: 2rem;
+  overflow: hidden;
+  border: 1px solid var(--bbp-border);
+  box-shadow: var(--bbp-shadow);
+  color: var(--bbp-text-main);
+}
+
+.theme-dark .bbp-card {
+  --bbp-bg-card: #020617;
+  --bbp-bg-left: #0f172a;
+  --bbp-bg-item: #1e293b;
+  --bbp-text-main: #f8fafc;
+  --bbp-text-muted: #94a3b8;
+  --bbp-border: #334155;
+  --bbp-primary-soft: rgba(244, 63, 94, 0.15);
+  --bbp-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+}
+
+.bbp-main {
+  display: grid;
+  grid-template-columns: 1.2fr 0.8fr;
+  min-height: 600px;
+}
+
+.bbp-left {
+  background: var(--bbp-bg-left);
+  padding: 40px;
+  border-right: 1px solid var(--bbp-border);
+}
+
+.bbp-right {
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+}
+
+.bbp-right-col {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+@media (max-width: 1024px) {
+  .bbp-main {
+    grid-template-columns: 1fr;
+  }
+  .bbp-left {
+    border-right: none;
+    border-bottom: 1px solid var(--bbp-border);
+  }
+}
+
+.bbp-section-marker {
+  display: block;
+  font-size: 0.7rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--bbp-primary);
+  margin-bottom: 20px;
+}
+
+.bbp-group {
+  margin-bottom: 24px;
+}
+
+.bbp-label {
+  display: block;
+  font-size: 0.85rem;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+.bbp-options-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.bbp-choice-btn {
+  background: var(--bbp-bg-item);
+  border: 1px solid var(--bbp-border);
+  padding: 12px 8px;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--bbp-text-main);
+}
+
+.bbp-choice-btn:hover {
+  border-color: var(--bbp-primary);
+}
+
+.bbp-choice-btn.active {
+  background: var(--bbp-primary);
+  color: white;
+  border-color: var(--bbp-primary);
+  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.2);
+}
+
+.bbp-cta-btn {
+  width: 100%;
+  background: var(--bbp-primary);
+  color: white;
+  border: none;
+  padding: 18px;
+  border-radius: 16px;
+  font-weight: 800;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  margin-top: 10px;
+}
+
+.bbp-cta-btn:hover { transform: translateY(-2px); }
+
+.bbp-item-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  background: var(--bbp-bg-item);
+  border-radius: 16px;
+  margin-bottom: 12px;
+  border: 1px solid var(--bbp-border);
+}
+
+.bbp-item-meta { flex: 1; }
+
+.bbp-item-name {
+  display: block;
+  font-weight: 700;
+  font-size: 0.95rem;
+  margin-bottom: 4px;
+}
+
+.bbp-toggles {
+  display: flex;
+  gap: 12px;
+}
+
+.bbp-toggle-pill {
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: var(--bbp-text-muted);
+  cursor: pointer;
+  padding: 2px 0;
+  border-bottom: 2px solid transparent;
+}
+
+.bbp-toggle-pill.sh.checked {
+  color: #10b981;
+  border-bottom-color: #10b981;
+}
+
+.bbp-toggle-pill.wl.checked {
+  color: #06b6d4;
+  border-bottom-color: #06b6d4;
+}
+
+.bbp-price-area {
+  text-align: right;
+  min-width: 100px;
+}
+
+.bbp-price-bubble {
+  font-weight: 800;
+  font-size: 1.1rem;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 8px;
+}
+
+.bbp-price-bubble:hover { background: var(--bbp-primary-soft); }
+
+.bbp-price-bubble.is-zero {
+  color: #10b981;
+}
+
+.bbp-input-fancy {
+  width: 100%;
+  padding: 12px;
+  border-radius: 12px;
+  border: 2px solid var(--bbp-border);
+  background: var(--bbp-bg-card);
+  color: var(--bbp-text-main);
+  font-weight: 700;
+}
+
+.bbp-input-fancy:focus {
+  outline: none;
+  border-color: var(--bbp-primary);
+}
+
+.bbp-total-box {
+  background: var(--bbp-primary-soft);
+  padding: 1.5rem;
+  border-radius: 1.25rem;
+  text-align: center;
+  border: 1px solid var(--bbp-primary-border);
+}
+
+.bbp-import-promo {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  padding: 2rem;
+  background: var(--bbp-bg-item);
+  border: 2px dashed var(--bbp-border);
+  border-radius: 1.5rem;
+  min-height: 300px;
+}
+
+.bbp-promo-icon {
+  width: 64px;
+  height: 64px;
+  color: var(--bbp-primary);
+  opacity: 0.5;
+}
+
+.bbp-tool-btn.primary-btn {
+  background: var(--bbp-primary);
+  color: white;
+  padding: 1rem 2rem;
+  font-size: 1rem;
+}
+
+.bbp-total-val {
+  font-size: 2.5rem;
+  font-weight: 900;
+  color: var(--bbp-primary);
+  margin: 10px 0;
+}
+
+.bbp-stat-label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--bbp-text-muted);
+  text-transform: uppercase;
+}
+
+.bbp-progress-rail {
+  height: 8px;
+  background: var(--bbp-border);
+  border-radius: 4px;
+  overflow: hidden;
+  margin: 15px 0;
+}
+
+.bbp-progress-thumb {
+  height: 100%;
+  background: var(--bbp-primary);
+  transition: width 0.3s ease;
+}
+
+.bbp-curve-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.bbp-curve-chart {
+  height: 140px;
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  padding-top: 20px;
+}
+
+.bbp-bar-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+  gap: 4px;
+}
+
+.bbp-bar-val {
+  font-size: 0.6rem;
+  font-weight: 800;
+  color: var(--bbp-primary);
+  transition: opacity 0.2s ease;
+}
+
+.bbp-bar {
+  width: 100%;
+  background: var(--bbp-primary);
+  border-radius: 4px 4px 0 0;
+  min-height: 2px;
+  transition: all 0.2s ease;
+}
+
+.bbp-curve-labels {
+  display: flex;
+  gap: 2px;
+}
+
+.bbp-bar-lbl {
+  flex: 1;
+  text-align: center;
+  font-size: 0.55rem;
+  font-weight: 800;
+  color: var(--bbp-text-muted);
+  text-transform: uppercase;
+}
+
+.bbp-ghost-item {
+  padding: 12px 16px;
+  background: rgba(245, 158, 11, 0.05);
+  border-radius: 12px;
+  font-size: 0.85rem;
+  font-weight: 700;
+  border: 1px solid rgba(245, 158, 11, 0.2);
+  color: #b45309;
+}
+
+.theme-dark .bbp-ghost-item {
+  background: rgba(245, 158, 11, 0.1);
+  color: #fcd34d;
+  border-color: rgba(245, 158, 11, 0.3);
+}
+
+.bbp-panel {
+  background: var(--bbp-bg-item);
+  border: 1px solid var(--bbp-border);
+  border-radius: 1.5rem;
+  padding: 24px;
+}
+
+
+.bbp-ghost-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.bbp-diaper-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.bbp-diaper-result {
+  font-weight: 800;
+  font-size: 0.9rem;
+  color: var(--bbp-primary);
+  margin-top: 8px;
+  text-align: center;
+}
+
+.bbp-action-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-top: auto;
+}
+
+.bbp-tool-btn {
+  background: var(--bbp-bg-item);
+  border: 1px solid var(--bbp-border);
+  padding: 14px;
+  border-radius: 14px;
+  font-weight: 700;
+  font-size: 0.85rem;
+  cursor: pointer;
+  color: var(--bbp-text-main);
+}
+
+#bbp-reset-btn {
+  border-color: rgba(244, 63, 94, 0.2);
+  color: #f43f5e;
+}
+
+#bbp-reset-btn[data-confirm='true'] {
+  background: #f43f5e;
+  color: white;
+  border-color: #f43f5e;
+}
+
+.bbp-hidden {
+  display: none;
+}