From 4baf388c47645ea7d405d692682e3c5bf677dc15 Mon Sep 17 00:00:00 2001 From: Fran McDade <18710366+frano-m@users.noreply.github.com> Date: Thu, 16 Apr 2026 16:17:16 +1000 Subject: [PATCH 01/10] feat: add static css file for github pages analytics dashboards (#873) Co-Authored-By: Claude Opus 4.6 (1M context) --- package.json | 1 + static/analytics-preview.html | 251 +++++++++++++ static/analytics.css | 641 ++++++++++++++++++++++++++++++++++ 3 files changed, 893 insertions(+) create mode 100644 static/analytics-preview.html create mode 100644 static/analytics.css diff --git a/package.json b/package.json index 45af9a76..7f91d92b 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "main": "lib/index.js", "files": [ "lib", + "static/**/*.css", "types" ], "exports": { diff --git a/static/analytics-preview.html b/static/analytics-preview.html new file mode 100644 index 00000000..ab8d32e0 --- /dev/null +++ b/static/analytics-preview.html @@ -0,0 +1,251 @@ + + + + + + findable-ui Analytics CSS Preview + + + + + +
+ +
+ +
+
+ + +
+ +
+

heading-xlarge — Analytics Dashboard

+

heading-large — Monthly Overview

+

heading — Weekly Trends

+

heading-small — Daily Breakdown

+
heading-xsmall — Section Title
+

+ body-large-400 — Larger body text for introductions and summaries. +

+

+ body-large-400-2lines — Larger body text with increased line height + for multi-line content. +

+

+ body-large-500 — Larger body text with medium weight. +

+

+ body-400 — Standard body text at 14px. It includes a + link example to verify link styling. +

+

+ body-400-2lines — Standard body text with increased line height for + multi-line paragraphs. +

+

+ body-500 — Standard body text with medium weight. +

+

+ body-small-400 — Captions, timestamps, and secondary information. +

+

+ body-small-400-2lines — Small body text with increased line height. +

+

+ body-small-500 — Small body text with medium weight. +

+

uppercase-500 — Label text

+
+ + +
+

Buttons

+
+ + + + +
+
+ + +
+

Analytics Overview

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris. +

+ +

Data Collection Methods

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +

+
    +
  • Page view tracking across all dataset pages
    • +
  • Export and download event monitoring
    • +
  • Search query analysis and term frequency
    • +
  • User session duration and bounce rates
    • +
+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium. +

+ +

Event Categories

+

+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut + fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem + sequi nesciunt. +

+
    +
  1. + Navigation events — page transitions, tab switches, and breadcrumb + clicks +
    2. +
  2. + Search events — query submissions, filter applications, and result + selections +
    3. +
  3. + Export events — manifest downloads, Terra exports, and bulk + operations +
      +
    1. File manifest CSV downloads
      2. +
    2. Export to Terra workspace
      3. +
    3. Bulk download via curl command
      4. +
    +
    4. +
  4. + Authentication events — login attempts, session renewals, and + logouts +
    5. +
+ +

Implementation Notes

+

+ Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, + consectetur, adipisci velit. At vero eos et accusamus et iusto odio + dignissimos ducimus qui blanditiis praesentium voluptatum. +

+

+ Temporibus autem quibusdam et aut officiis debitis aut rerum + necessitatibus saepe eveniet ut et voluptates repudiandae sint et + molestiae non recusandae. +

+
+ + +

Chart Cards

+
+ +
+
+

Page Views

+

+ Total page views over the last 30 days +

+
+
+
+

+ [Chart placeholder — 300 x 200] +

+
+
+ + +
+
+

+ Unique Visitors +

+

+ Distinct users by session +

+
+
+
+

+ [Chart placeholder — 300 x 200] +

+
+
+ + +
+
+

+ Downloads Over Time +

+

+ File manifest and export downloads, full width card +

+
+
+
+

+ [Wide chart placeholder — 600 x 200] +

+
+
+ + +
+
+

+ Top Search Terms +

+
+
+
+

1. single cell

+

2. lung cancer

+

3. CRISPR

+
+
+ + +
+
+
Card Without Header
+

+ This card uses only a body section, no header divider. +

+
+
+
+
+ + diff --git a/static/analytics.css b/static/analytics.css new file mode 100644 index 00000000..20d9e640 --- /dev/null +++ b/static/analytics.css @@ -0,0 +1,641 @@ +/* + * findable-ui Analytics Dashboard Styles + * + * A self-contained static CSS file for GitHub Pages analytics dashboards. + * Matches the findable-ui design system (colors, spacing, typography). + * + * Usage: + * + * — or — + * @import "@databiosphere/findable-ui/static/analytics.css"; + * + * All class names are prefixed with `.fui-` to avoid conflicts. + * + * Customization: + * Override CSS custom properties to match your application's branding. + * Add a * * Responsive grid: * Grid items use fixed column spans. To make them responsive, * add a */ /* ---------- Custom Properties ---------- */ From 218c907dc7aa5af12f993d9a0f897663a7500ec2 Mon Sep 17 00:00:00 2001 From: Fran McDade <18710366+frano-m@users.noreply.github.com> Date: Thu, 16 Apr 2026 16:25:05 +1000 Subject: [PATCH 03/10] chore: add primary palette override to preview html (#873) Co-Authored-By: Claude Opus 4.6 (1M context) --- static/analytics-preview.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/static/analytics-preview.html b/static/analytics-preview.html index ab8d32e0..1c0f2049 100644 --- a/static/analytics-preview.html +++ b/static/analytics-preview.html @@ -6,6 +6,12 @@ findable-ui Analytics CSS Preview * From 676926917e8fc3f158c4bbdbb159fd989c4ae6ff Mon Sep 17 00:00:00 2001 From: Fran McDade <18710366+frano-m@users.noreply.github.com> Date: Thu, 16 Apr 2026 16:36:32 +1000 Subject: [PATCH 07/10] refactor: replace hardcoded spacing with css custom properties (#873) Co-Authored-By: Claude Opus 4.6 (1M context) --- static/analytics.css | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/static/analytics.css b/static/analytics.css index 547782af..5f500efe 100644 --- a/static/analytics.css +++ b/static/analytics.css @@ -453,7 +453,7 @@ font: var(--fui-font-body-500); gap: var(--fui-space-4); letter-spacing: normal; - padding: 8px 16px; + padding: var(--fui-space-8) var(--fui-space-16); } .fui-button:disabled { @@ -514,32 +514,32 @@ .fui-content h1 { font: var(--fui-font-heading-large); letter-spacing: -0.4px; - margin: 0 0 8px; + margin: 0 0 var(--fui-space-8); } .fui-content h2 { font: var(--fui-font-heading); letter-spacing: -0.2px; - margin: 32px 0 16px; + margin: var(--fui-space-32) 0 var(--fui-space-16); } .fui-content h3 { font: var(--fui-font-heading-small); - margin: 32px 0 16px; + margin: var(--fui-space-32) 0 var(--fui-space-16); } .fui-content h4 { font: var(--fui-font-body-large-500); - margin: 24px 0 16px; + margin: var(--fui-space-24) 0 var(--fui-space-16); } .fui-content img { - margin: 16px 0; + margin: var(--fui-space-16) 0; max-width: 100%; } .fui-content li { - margin: 8px 0; + margin: var(--fui-space-8) 0; } .fui-content li:last-child { @@ -547,12 +547,12 @@ } .fui-content li p { - margin-bottom: 8px; + margin-bottom: var(--fui-space-8); } .fui-content ol { margin: 0; - padding-left: 24px; + padding-left: var(--fui-space-24); } .fui-content ol ol { @@ -561,17 +561,17 @@ .fui-content p { font: var(--fui-font-body-large-400-2lines); - margin-bottom: 16px; + margin-bottom: var(--fui-space-16); overflow-wrap: break-word; } .fui-content ul { margin: 0; - padding-left: 24px; + padding-left: var(--fui-space-24); } .fui-content ul + p { - margin-top: 16px; + margin-top: var(--fui-space-16); } .fui-content > *:first-child { From 78cbae7246225e2ee6b6c938ee97b781b90a7ea4 Mon Sep 17 00:00:00 2001 From: Fran McDade <18710366+frano-m@users.noreply.github.com> Date: Thu, 16 Apr 2026 16:44:32 +1000 Subject: [PATCH 08/10] fix: add align-items center to button for icon vertical centering (#873) Co-Authored-By: Claude Opus 4.6 (1M context) --- static/analytics.css | 1 + 1 file changed, 1 insertion(+) diff --git a/static/analytics.css b/static/analytics.css index 5f500efe..336a0ec2 100644 --- a/static/analytics.css +++ b/static/analytics.css @@ -446,6 +446,7 @@ /* ---------- Buttons ---------- */ .fui-button { + align-items: center; border: none; border-radius: var(--fui-radius-sm); cursor: pointer; From 4a4988990c800a0329f2312ae67c7428ccddce3b Mon Sep 17 00:00:00 2001 From: Fran McDade <18710366+frano-m@users.noreply.github.com> Date: Thu, 16 Apr 2026 16:49:01 +1000 Subject: [PATCH 09/10] fix: update comment for state classes, add content last-child margin reset (#873) Co-Authored-By: Claude Opus 4.6 (1M context) --- static/analytics.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/static/analytics.css b/static/analytics.css index 336a0ec2..59db0641 100644 --- a/static/analytics.css +++ b/static/analytics.css @@ -3,7 +3,8 @@ * * A self-contained static CSS file for GitHub Pages analytics dashboards. * Matches the findable-ui design system (colors, spacing, typography). - * All class names are prefixed with `.fui-` to avoid conflicts. + * Component class names are prefixed with `.fui-` to avoid conflicts. + * State classes may be used alongside prefixed classes, for example `.active`. * * GitHub Pages setup: * 1. Install the package: npm install @databiosphere/findable-ui @@ -579,6 +580,10 @@ margin-top: 0; } +.fui-content > *:last-child { + margin-bottom: 0; +} + /* ---------- Divider ---------- */ .fui-divider { From de62fa882cab30c61fa0734552c097b5cb9d3aac Mon Sep 17 00:00:00 2001 From: Fran McDade <18710366+frano-m@users.noreply.github.com> Date: Thu, 16 Apr 2026 16:59:05 +1000 Subject: [PATCH 10/10] fix: match theme shadow hex values, add box-sizing reset and display block on images (#873) Co-Authored-By: Claude Opus 4.6 (1M context) --- static/analytics.css | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/static/analytics.css b/static/analytics.css index 59db0641..822d16bf 100644 --- a/static/analytics.css +++ b/static/analytics.css @@ -128,10 +128,8 @@ /* Shadows */ --fui-shadow-00: none; - --fui-shadow-01: 0 1px 4px 0 rgba(0, 0, 0, 0.07); - --fui-shadow-02: - 0 8px 8px -4px rgba(16, 24, 40, 0.03), - 0 20px 24px -4px rgba(16, 24, 40, 0.08); + --fui-shadow-01: 0 1px 4px 0 #00000012; + --fui-shadow-02: 0 8px 8px -4px #10182808, 0 20px 24px -4px #10182814; /* Smoke (borders / backgrounds) */ --fui-smoke: #e1e3e5; @@ -174,6 +172,13 @@ /* ---------- Base ---------- */ +.fui-body, +.fui-body *, +.fui-body *::before, +.fui-body *::after { + box-sizing: border-box; +} + .fui-body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -407,6 +412,7 @@ } .fui-header-logo img { + display: block; height: 32px; width: auto; } @@ -536,6 +542,7 @@ } .fui-content img { + display: block; margin: var(--fui-space-16) 0; max-width: 100%; }