@jjlmoya/utils-finance 1.14.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-finance",
-    "version": "1.14.0",
+    "version": "1.16.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

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

@@ -34,18 +34,28 @@ export async function getStaticPaths() {
       ]),
     ) as Partial<Record<KnownLocale, string>>;
 
+    const firstLoader = entry.i18n.en ?? Object.values(entry.i18n)[0];
+    const englishSlug = firstLoader ? (await firstLoader()).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,
-        })),
-      );
+      const allToolsNav = (
+        await Promise.all(
+          ALL_TOOLS.map(async ({ entry: navEntry }) => {
+            const loader = navEntry.i18n[locale] ?? navEntry.i18n.en;
+            if (!loader) return null;
+            const navContent = await loader();
+            return {
+              id: navEntry.id,
+              title: navContent.title,
+              href: `/${locale}/${navContent.slug}`,
+              isActive: navEntry.id === entry.id,
+            };
+          }),
+        )
+      ).filter(Boolean) as NavItem[];
       paths.push({
         params: { locale, slug: content.slug },
-        props: { Component, locale, content, localeUrls, allToolsNav },
+        props: { Component, locale, content, localeUrls, allToolsNav, englishSlug },
       });
     }
   }
@@ -66,11 +76,16 @@ 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 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 seoContent: UtilitySEOContent = { locale, sections: content.seo ?? [] };
 
 const words = content.title.split(" ");
 const titleHighlight = words[0] || "";
@@ -89,8 +104,9 @@ const titleBase = words.slice(1).join(" ") || "";
     tools={allToolsNav}
   />
   <Fragment slot="head">
+    {toolCss ? <Fragment set:html={`<style is:inline>${toolCss}</style>`} /> : null}
     {
-      content.schemas.map((schema: unknown) => (
+      ( content.schemas ?? []).map((schema: unknown) => (
         <script
           is:inline
           type="application/ld+json"
@@ -120,7 +136,7 @@ const titleBase = words.slice(1).join(" ") || "";
     </section>
 
     <section class="section-bibliography">
-      <Bibliography links={content.bibliography} title={content.bibliographyTitle} />
+      <Bibliography links={content.bibliography}  />
     </section>
   </div>
 </PreviewLayout>

package/src/tests/locale_completeness.test.ts

@@ -7,28 +7,18 @@ describe('Locale Completeness Validation', () => {
     describe(`Tool: ${tool.entry.id}`, () => {
       Object.keys(tool.entry.i18n).forEach((locale) => {
         describe(`Locale: ${locale}`, () => {
-          it('faqTitle should be defined when faq items exist', async () => {
+          it('should have faq items', async () => {
             const loader = tool.entry.i18n[locale as keyof typeof tool.entry.i18n];
             const content = (await loader?.()) as ToolLocaleContent;
-
-            if (content.faq.length > 0) {
-              expect(
-                content.faqTitle,
-                `Tool "${tool.entry.id}" locale "${locale}" has ${content.faq.length} FAQ items but is missing faqTitle`,
-              ).toBeTruthy();
-            }
+            expect(content.faq).toBeDefined();
+            expect(Array.isArray(content.faq)).toBe(true);
           });
 
-          it('bibliographyTitle should be defined when bibliography items exist', async () => {
+          it('should have bibliography items', async () => {
             const loader = tool.entry.i18n[locale as keyof typeof tool.entry.i18n];
             const content = (await loader?.()) as ToolLocaleContent;
-
-            if (content.bibliography.length > 0) {
-              expect(
-                content.bibliographyTitle,
-                `Tool "${tool.entry.id}" locale "${locale}" has ${content.bibliography.length} bibliography items but is missing bibliographyTitle`,
-              ).toBeTruthy();
-            }
+            expect(content.bibliography).toBeDefined();
+            expect(Array.isArray(content.bibliography)).toBe(true);
           });
         });
       });

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/tool/compoundInterest/bibliography.ts

@@ -0,0 +1,20 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Investopedia: Compound Interest Definition',
+    url: 'https://www.investopedia.com/terms/c/compoundinterest.asp',
+  },
+  {
+    name: 'Investopedia: Rule of 72',
+    url: 'https://www.investopedia.com/terms/r/ruleof72.asp',
+  },
+  {
+    name: 'Khan Academy: Interest and Debt',
+    url: 'https://www.khanacademy.org/economics-finance-domain/core-finance/interest-tutorial',
+  },
+  {
+    name: 'Banco de España: Portal del Cliente Bancario',
+    url: 'https://www.bde.es/bde/es/secciones/servicios/Particulares_y_e/Clientesbancarios/',
+  },
+];

package/src/tool/compoundInterest/compound-interest-calculator.css

@@ -1,79 +1,325 @@
-.cic-insight.cic-insight-visible {
-    opacity: 1;
-  }
+.cic-root {
+  --cic-accent: #10b981;
+  --cic-accent-text: #059669;
+  --cic-accent-icon-bg: #d1fae5;
+  --cic-bg: #fff;
+  --cic-bg-panel: rgba(248, 250, 252, 0.3);
+  --cic-bg-card: #fff;
+  --cic-bg-header: rgba(248, 250, 252, 0.5);
+  --cic-border: #e2e8f0;
+  --cic-border-subtle: #f1f5f9;
+  --cic-text: #0f172a;
+  --cic-text-muted: #64748b;
+  --cic-text-subtle: #94a3b8;
+  --cic-input-bg: #fff;
+  --cic-input-border: #e2e8f0;
+  --cic-summary-bg: #fff;
+  --cic-insight-bg: #ecfdf5;
+  --cic-insight-text: #065f46;
 
-  .cic-insight-year {
-    font-weight: 700;
-    color: #10b981;
-  }
+  background: var(--cic-bg);
+  border-radius: 1.5rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--cic-border-subtle);
+  overflow: hidden;
+}
+
+.theme-dark .cic-root {
+  --cic-accent-text: #34d399;
+  --cic-accent-icon-bg: rgba(16, 185, 129, 0.2);
+  --cic-bg: #1e293b;
+  --cic-bg-panel: rgba(15, 23, 42, 0.1);
+  --cic-bg-card: #1e293b;
+  --cic-bg-header: rgba(30, 41, 59, 0.5);
+  --cic-border: #334155;
+  --cic-border-subtle: #334155;
+  --cic-text: #fff;
+  --cic-text-muted: #94a3b8;
+  --cic-text-subtle: #64748b;
+  --cic-input-bg: #0f172a;
+  --cic-input-border: #334155;
+  --cic-summary-bg: #1e293b;
+  --cic-insight-bg: rgba(16, 185, 129, 0.1);
+  --cic-insight-text: #6ee7b7;
+}
+
+.cic-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--cic-border-subtle);
+  background: var(--cic-bg-header);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cic-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.cic-icon-wrap {
+  padding: 0.625rem;
+  background: var(--cic-accent-icon-bg);
+  border-radius: 0.75rem;
+  color: var(--cic-accent-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cic-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.cic-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--cic-text);
+}
+
+.cic-realtime {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--cic-text-muted);
+}
+
+.cic-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: var(--cic-accent);
+  animation: cic-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes cic-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.cic-grid {
+  display: grid;
+}
+
+.cic-panel-left {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  background: var(--cic-bg-panel);
+  border-bottom: 1px solid var(--cic-border-subtle);
+}
+
+.cic-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.cic-grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.cic-label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--cic-text-subtle);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.5rem;
+}
+
+.cic-input-wrap {
+  position: relative;
+}
+
+.cic-currency {
+  position: absolute;
+  left: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--cic-text-subtle);
+  font-weight: 700;
+  pointer-events: none;
+  font-size: 0.75rem;
+}
+
+.cic-currency-right {
+  left: auto;
+  right: 0.5rem;
+}
+
+.cic-input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background: var(--cic-input-bg);
+  border: 2px solid var(--cic-input-border);
+  border-radius: 0.75rem;
+  outline: none;
+  transition: border-color 0.2s;
+  color: var(--cic-text);
+  font-weight: 700;
+  font-size: 1.125rem;
+  box-sizing: border-box;
+}
 
-  .theme-dark .cic-root {
-    --cic-accent-text: #34d399;
-    --cic-accent-icon-bg: rgba(16, 185, 129, 0.2);
-    --cic-bg: #1e293b;
-    --cic-bg-panel: rgba(15, 23, 42, 0.1);
-    --cic-bg-card: #1e293b;
-    --cic-bg-header: rgba(30, 41, 59, 0.5);
-    --cic-border: #334155;
-    --cic-border-subtle: #334155;
-    --cic-text: #fff;
-    --cic-text-muted: #94a3b8;
-    --cic-text-subtle: #64748b;
-    --cic-input-bg: #0f172a;
-    --cic-input-border: #334155;
-    --cic-summary-bg: #1e293b;
-    --cic-insight-bg: rgba(16, 185, 129, 0.1);
-    --cic-insight-text: #6ee7b7;
+.cic-input-prefixed {
+  padding-left: 3.5rem;
+}
+
+.cic-input-suffixed {
+  padding-right: 5rem;
+}
+
+.cic-input:focus {
+  border-color: var(--cic-accent);
+}
+
+.cic-summary {
+  background: var(--cic-summary-bg);
+  border-radius: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--cic-border);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.cic-summary-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.875rem;
+}
+
+.cic-summary-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cic-dot-neutral {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  background: var(--cic-text-subtle);
+  flex-shrink: 0;
+}
+
+.cic-dot-accent {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 50%;
+  background: var(--cic-accent);
+  flex-shrink: 0;
+}
+
+.cic-text-muted {
+  color: var(--cic-text-muted);
+}
+
+.cic-text-accent {
+  color: var(--cic-accent-text);
+  font-weight: 500;
+}
+
+.cic-summary-value {
+  font-weight: 700;
+  color: var(--cic-text);
+}
+
+.cic-summary-value-accent {
+  color: var(--cic-accent-text);
+}
+
+.cic-summary-total {
+  padding-top: 0.75rem;
+  margin-top: 0.25rem;
+  border-top: 1px solid var(--cic-border-subtle);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.cic-total-label {
+  color: var(--cic-text-subtle);
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.cic-total-value {
+  font-size: 1.5rem;
+  font-weight: 900;
+  color: var(--cic-text);
+}
+
+.cic-panel-right {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 500px;
+}
+
+.cic-canvas-wrap {
+  position: relative;
+  width: 100%;
+  flex: 1;
+}
+
+.cic-insight {
+  display: none;
+  margin-top: 1rem;
+  padding: 1rem;
+  background: var(--cic-insight-bg);
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--cic-insight-text);
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+
+@media (min-width: 768px) {
+  .cic-insight {
+    display: block;
   }
+}
 
-  .theme-dark .cic-insight-year {
-    color: #fff;
+@media (min-width: 1024px) {
+  .cic-grid {
+    grid-template-columns: 4fr 8fr;
   }
 
-  [data-theme='dark'] .cic-root {
-    --cic-accent-text: #34d399;
-    --cic-accent-icon-bg: rgba(16, 185, 129, 0.2);
-    --cic-bg: #1e293b;
-    --cic-bg-panel: rgba(15, 23, 42, 0.1);
-    --cic-bg-card: #1e293b;
-    --cic-bg-header: rgba(30, 41, 59, 0.5);
-    --cic-border: #334155;
-    --cic-border-subtle: #334155;
-    --cic-text: #fff;
-    --cic-text-muted: #94a3b8;
-    --cic-text-subtle: #64748b;
-    --cic-input-bg: #0f172a;
-    --cic-input-border: #334155;
-    --cic-summary-bg: #1e293b;
-    --cic-insight-bg: rgba(16, 185, 129, 0.1);
-    --cic-insight-text: #6ee7b7;
+  .cic-panel-left {
+    border-bottom: none;
+    border-right: 1px solid var(--cic-border-subtle);
   }
 
-  [data-theme='dark'] .cic-insight-year {
-    color: #fff;
+  .cic-panel-right {
+    padding: 2rem;
+    min-height: auto;
   }
+}
+
+.cic-insight.cic-insight-visible {
+  opacity: 1;
+}
+
+.cic-insight-year {
+  font-weight: 700;
+  color: #10b981;
+}
 
-  @media (prefers-color-scheme: dark) {
-    .cic-root {
-      --cic-accent-text: #34d399;
-      --cic-accent-icon-bg: rgba(16, 185, 129, 0.2);
-      --cic-bg: #1e293b;
-      --cic-bg-panel: rgba(15, 23, 42, 0.1);
-      --cic-bg-card: #1e293b;
-      --cic-bg-header: rgba(30, 41, 59, 0.5);
-      --cic-border: #334155;
-      --cic-border-subtle: #334155;
-      --cic-text: #fff;
-      --cic-text-muted: #94a3b8;
-      --cic-text-subtle: #64748b;
-      --cic-input-bg: #0f172a;
-      --cic-input-border: #334155;
-      --cic-summary-bg: #1e293b;
-      --cic-insight-bg: rgba(16, 185, 129, 0.1);
-      --cic-insight-text: #6ee7b7;
-    }
-
-    .cic-insight-year {
-      color: #fff;
-    }
-  }
+.theme-dark .cic-insight-year {
+  color: #fff;
+}

package/src/tool/compoundInterest/entry.ts

@@ -28,3 +28,5 @@ export const compoundInterest: FinanceToolEntry<CompoundInterestUI> = {
     zh: () => import('./i18n/zh').then((m) => m.content),
   },
 };
+
+export { bibliography } from './bibliography';

package/src/tool/compoundInterest/i18n/de.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography'
 import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { CompoundInterestUI } from '../ui';
@@ -87,23 +88,9 @@ export const content: ToolLocaleContent<CompoundInterestUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Häufig gestellte Fragen',
   faq: faqData,
-  bibliographyTitle: 'Quellen und Referenzen',
-  bibliography: [
-    {
-      name: 'Investopedia: Compound Interest Definition',
-      url: 'https://www.investopedia.com/terms/c/compoundinterest.asp',
-    },
-    {
-      name: 'Investopedia: Rule of 72',
-      url: 'https://www.investopedia.com/terms/r/ruleof72.asp',
-    },
-    {
-      name: 'Khan Academy: Interest and Debt',
-      url: 'https://www.khanacademy.org/economics-finance-domain/core-finance/interest-tutorial',
-    },
-  ],
+  bibliography,
+  
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [