@jschofield/reading-list 0.2.0

package/README.md

@@ -0,0 +1,88 @@
+# @jschofield/reading-list
+
+A reading list / book tracker web component built with [Lit](https://lit.dev/). Fetches book data from an API and renders an interactive, filterable, sortable table.
+
+## Install
+
+```bash
+npm install @jschofield/reading-list
+```
+
+### Peer dependencies
+
+This component requires the following peer dependency:
+
+```bash
+npm install lit
+```
+
+| Peer | Version |
+|---|---|
+| `lit` | `^3.0.0` |
+
+## Usage
+
+```html
+<script type="module">
+  import '@jschofield/reading-list';
+</script>
+
+<reading-list></reading-list>
+
+<!-- Custom API endpoint: -->
+<reading-list api-endpoint="/api/my-books"></reading-list>
+```
+
+### Without a bundler
+
+If you're not using a bundler, provide peer dependencies via an import map:
+
+```html
+<script type="importmap">
+{
+  "imports": {
+    "lit": "https://esm.run/lit",
+    "lit/": "https://esm.run/lit/"
+  }
+}
+</script>
+<script type="module" src="https://esm.run/@jschofield/reading-list"></script>
+```
+
+## Attributes
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `api-endpoint` | `string` | `"/.netlify/functions/reading-list"` | URL returning the books JSON |
+
+## API response format
+
+```json
+{
+  "books": [
+    {
+      "name": "Dune",
+      "author": "Frank Herbert",
+      "series": "Dune",
+      "status": "Finished",
+      "finished": "2024-03-15",
+      "notes": "Incredible worldbuilding",
+      "grade": "A+",
+      "year": 2024
+    }
+  ]
+}
+```
+
+## Features
+
+- Search by book name, author, or series
+- Filter by status, year, grade, and series
+- Sortable columns (click headers to toggle)
+- Color-coded grade and status badges
+- "Clear All Filters" button
+- Responsive table layout
+
+## License
+
+MIT

package/dist/assets/index.js

@@ -0,0 +1,541 @@
+import{LitElement as e,css as t,html as n}from"lit";import{customElement as r,property as i,state as a}from"lit/decorators.js";(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();function o(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var s=class extends e{constructor(...e){super(...e),this.apiEndpoint=`/.netlify/functions/reading-list`,this.books=[],this.filteredBooks=[],this.loading=!1,this.error=``,this.searchTerm=``,this.statusFilter=``,this.seriesFilter=``,this.yearFilter=``,this.gradeFilter=``,this.sortColumn=null,this.sortDirection=`asc`}async connectedCallback(){super.connectedCallback(),await this.fetchBooks()}async fetchBooks(){this.loading=!0,this.error=``;try{let e=await fetch(this.apiEndpoint);if(!e.ok)throw Error(`HTTP error! status: ${e.status}`);let t=await e.json();if(t.error)throw Error(t.error);this.books=t.books||[],this.filteredBooks=[...this.books]}catch(e){this.error=`Failed to load reading list: ${e instanceof Error?e.message:`Unknown error`}`,console.error(`Error fetching books:`,e)}finally{this.loading=!1}}formatDate(e){if(!e)return null;try{let t=new Date(e);return isNaN(t.getTime())?e:t.toLocaleDateString(`en-US`,{year:`numeric`,month:`short`,day:`numeric`})}catch{return e}}renderGrade(e){return e?n`<span class="grade-badge grade-${e.charAt(0).toLowerCase()}">${e}</span>`:n`<span class="not-applicable">—</span>`}renderFinishedDate(e,t){return e?n`<span class="completion-date">${this.formatDate(e)}</span>`:t===`finished`?n`<span class="not-applicable">No date</span>`:n`<span class="not-applicable">—</span>`}getAvailableSeries(){return[...new Set(this.books.map(e=>e.series).filter(e=>!!e))].sort()}getAvailableYears(){return[...new Set(this.books.map(e=>e.year).filter(e=>typeof e==`number`))].sort((e,t)=>t-e)}getAvailableStatuses(){return[`Finished`,`Ah Naw`,`Reading`,`On Deck`,`Not started`,`Maybe Later`]}getAvailableGrades(){let e=new Set;return this.books.map(e=>e.grade).filter(e=>!!e?.trim()).forEach(t=>{e.add(t.toUpperCase())}),Array.from(e).sort((e,t)=>{let n=e=>{let t=e.charAt(0).toUpperCase(),n=e.slice(1),r=0;switch(t){case`A`:r=400;break;case`B`:r=300;break;case`C`:r=200;break;case`D`:r=100;break;case`F`:r=0;break;default:r=-100}return n===`+`?r+=30:n===`-`&&(r-=30),r};return n(t)-n(e)})}applyFilters(){this.filteredBooks=this.books.filter(e=>{let t=!this.searchTerm||e.name.toLowerCase().includes(this.searchTerm.toLowerCase())||e.author.toLowerCase().includes(this.searchTerm.toLowerCase())||e.series&&e.series.toLowerCase().includes(this.searchTerm.toLowerCase()),n=!this.statusFilter||e.status===this.statusFilter,r=!this.seriesFilter||e.series===this.seriesFilter,i=!this.yearFilter||e.year?.toString()===this.yearFilter,a=!this.gradeFilter||e.grade?.toUpperCase()===this.gradeFilter;return t&&n&&r&&i&&a}),this.sortColumn&&this.filteredBooks.sort((e,t)=>{let n,r;switch(this.sortColumn){case`name`:n=e.name.toLowerCase(),r=t.name.toLowerCase();break;case`author`:n=e.author.toLowerCase(),r=t.author.toLowerCase();break;case`series`:n=(e.series||``).toLowerCase(),r=(t.series||``).toLowerCase();break;case`status`:n=e.status.toLowerCase(),r=t.status.toLowerCase();break;case`year`:n=e.year||0,r=t.year||0;break;case`grade`:let i=e=>{if(!e)return-1;let t=e.charAt(0).toUpperCase(),n=e.slice(1),r=0;switch(t){case`A`:r=400;break;case`B`:r=300;break;case`C`:r=200;break;case`D`:r=100;break;case`F`:r=0;break;default:r=-100}return n===`+`?r+=30:n===`-`&&(r-=30),r};n=i(e.grade),r=i(t.grade);break;case`finished`:n=e.finished?new Date(e.finished).getTime():0,r=t.finished?new Date(t.finished).getTime():0;break;default:return 0}return n<r?this.sortDirection===`asc`?-1:1:n>r?this.sortDirection===`asc`?1:-1:0})}handleSearch(e){this.searchTerm=e.target.value,this.applyFilters()}handleStatusFilter(e){this.statusFilter=e.target.value,this.applyFilters()}handleSeriesFilter(e){this.seriesFilter=e.target.value,this.applyFilters()}handleYearFilter(e){this.yearFilter=e.target.value,this.applyFilters()}handleGradeFilter(e){this.gradeFilter=e.target.value,this.applyFilters()}handleSort(e){this.sortColumn===e?this.sortDirection=this.sortDirection===`asc`?`desc`:`asc`:(this.sortColumn=e,this.sortDirection=`asc`),this.applyFilters()}clearAllFilters(){this.searchTerm=``,this.statusFilter=``,this.yearFilter=``,this.gradeFilter=``,this.seriesFilter=``,this.sortColumn=null,this.sortDirection=`asc`,this.applyFilters()}renderFilters(){let e=this.getAvailableSeries(),t=this.getAvailableYears(),r=this.getAvailableStatuses(),i=this.getAvailableGrades();return n`
+      <div class="filters">
+        <div class="filter-group">
+          <label for="search">Search Books</label>
+          <input
+            type="text"
+            id="search"
+            placeholder="Search by name, author, or series..."
+            .value=${this.searchTerm}
+            @input=${this.handleSearch}
+          />
+        </div>
+        <div class="filter-group">
+          <label for="status-filter">Filter by Status</label>
+          <select
+            id="status-filter"
+            .value=${this.statusFilter}
+            @change=${this.handleStatusFilter}
+          >
+            <option value="">All Statuses</option>
+            ${r.map(e=>n`<option value="${e}">${e}</option>`)}
+          </select>
+        </div>
+        <div class="filter-group">
+          <label for="year-filter">Filter by Year</label>
+          <select
+            id="year-filter"
+            .value=${this.yearFilter}
+            @change=${this.handleYearFilter}
+          >
+            <option value="">All Years</option>
+            ${t.map(e=>n`<option value="${e}">${e}</option>`)}
+          </select>
+        </div>
+        <div class="filter-group">
+          <label for="grade-filter">Filter by Grade</label>
+          <select
+            id="grade-filter"
+            .value=${this.gradeFilter}
+            @change=${this.handleGradeFilter}
+          >
+            <option value="">All Grades</option>
+            ${i.map(e=>n`<option value="${e}">${e}</option>`)}
+          </select>
+        </div>
+        <div class="filter-group">
+          <label for="series-filter">Filter by Series</label>
+          <select
+            id="series-filter"
+            .value=${this.seriesFilter}
+            @change=${this.handleSeriesFilter}
+          >
+            <option value="">All Series</option>
+            ${e.map(e=>n`<option value="${e}">${e}</option>`)}
+          </select>
+        </div>
+        <div class="filter-group">
+          <button
+            class="clear-filters-btn"
+            @click=${this.clearAllFilters}
+            type="button"
+          >
+            Clear All Filters
+          </button>
+        </div>
+      </div>
+    `}renderTable(){return this.filteredBooks.length===0?n`
+        <div class="no-results">No books found matching your filters.</div>
+      `:n`
+      <table>
+        <thead>
+          <tr>
+            <th>
+              <button
+                class="sort-header"
+                @click=${()=>this.handleSort(`name`)}
+              >
+                Book
+                ${this.sortColumn===`name`?this.sortDirection===`asc`?` ↑`:` ↓`:``}
+              </button>
+            </th>
+            <th>
+              <button
+                class="sort-header"
+                @click=${()=>this.handleSort(`series`)}
+              >
+                Series
+                ${this.sortColumn===`series`?this.sortDirection===`asc`?` ↑`:` ↓`:``}
+              </button>
+            </th>
+            <th>
+              <button
+                class="sort-header"
+                @click=${()=>this.handleSort(`status`)}
+              >
+                Status
+                ${this.sortColumn===`status`?this.sortDirection===`asc`?` ↑`:` ↓`:``}
+              </button>
+            </th>
+            <th>
+              <button
+                class="sort-header"
+                @click=${()=>this.handleSort(`year`)}
+              >
+                Year
+                ${this.sortColumn===`year`?this.sortDirection===`asc`?` ↑`:` ↓`:``}
+              </button>
+            </th>
+            <th>
+              <button
+                class="sort-header"
+                @click=${()=>this.handleSort(`finished`)}
+              >
+                Finished
+                ${this.sortColumn===`finished`?this.sortDirection===`asc`?` ↑`:` ↓`:``}
+              </button>
+            </th>
+            <th>
+              <button
+                class="sort-header"
+                @click=${()=>this.handleSort(`grade`)}
+              >
+                Grade
+                ${this.sortColumn===`grade`?this.sortDirection===`asc`?` ↑`:` ↓`:``}
+              </button>
+            </th>
+            <th>Notes</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${this.filteredBooks.map(e=>n`
+              <tr>
+                <td>
+                  <div class="book-title">${e.name}</div>
+                  <div class="book-author">by ${e.author}</div>
+                </td>
+                <td>
+                  ${e.series?n`<span class="series-badge">${e.series}</span>`:n`<span class="not-applicable">—</span>`}
+                </td>
+                <td>
+                  <span
+                    class="status-badge status-${e.status.toLowerCase().replace(/\s+/g,`-`)}"
+                  >
+                    ${e.status}
+                  </span>
+                </td>
+                <td>
+                  ${e.year?n`<span class="year-badge">${e.year}</span>`:n`<span class="not-applicable">—</span>`}
+                </td>
+                <td>${this.renderFinishedDate(e.finished,e.status)}</td>
+                <td>${this.renderGrade(e.grade)}</td>
+                <td class="notes-cell">${e.notes?.trim()?n`${e.notes.trim()}`:n`<span class="not-applicable">—</span>`}</td>
+              </tr>
+            `)}
+        </tbody>
+      </table>
+    `}render(){return this.loading?n`
+        <div class="loading">
+          <p>Loading reading list...</p>
+        </div>
+      `:this.error?n`
+        <div class="error">
+          <p>${this.error}</p>
+        </div>
+      `:n`
+      <div class="container">
+        ${this.renderFilters()}
+
+        <div class="table-container">${this.renderTable()}</div>
+      </div>
+    `}static{this.styles=t`
+    :host {
+      --primary-color: #2563eb;
+      --text-color: #1f2937;
+      --text-secondary: #6b7280;
+      --border-color: #e5e7eb;
+      --bg-color: #ffffff;
+      --bg-hover: #f9fafb;
+      --success-color: #10b981;
+      --warning-color: #f59e0b;
+      --danger-color: #ef4444;
+
+      display: block;
+      font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+        Arial, sans-serif;
+      line-height: 1.6;
+      color: var(--text-color);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 2rem 1rem;
+    }
+
+    header {
+      text-align: center;
+      margin-bottom: 3rem;
+    }
+
+    h1 {
+      font-size: 2.5rem;
+      margin: 0 0 1rem 0;
+      font-weight: 300;
+    }
+
+    .subtitle {
+      color: var(--text-secondary);
+      font-size: 1.1rem;
+      margin: 0;
+    }
+
+    .loading,
+    .error {
+      text-align: center;
+      padding: 2rem;
+      color: var(--text-secondary);
+    }
+
+    .error {
+      color: var(--danger-color);
+      background: #fee2e2;
+      border: 1px solid #fecaca;
+      border-radius: 12px;
+    }
+
+    .filters {
+      background: var(--bg-color);
+      padding: 1.5rem;
+      border-radius: 12px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      margin-bottom: 2rem;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 1rem;
+    }
+
+    .filter-group {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .filter-group label {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.025em;
+    }
+
+    .filter-group input,
+    .filter-group select {
+      padding: 0.75rem 1rem;
+      border: 2px solid var(--border-color);
+      border-radius: 8px;
+      font-size: 1rem;
+      transition: border-color 0.2s;
+    }
+
+    .filter-group input:focus,
+    .filter-group select:focus {
+      outline: none;
+      border-color: var(--primary-color);
+    }
+
+    .filter-group:has(.clear-filters-btn) {
+      justify-content: center;
+      align-items: stretch;
+    }
+
+    .clear-filters-btn {
+      display: inline-block;
+      padding: 0.25em 1em;
+      background: #1b2f36; /* --gunmetal from main.css */
+      color: #fafafa; /* --seasalt from main.css */
+      border-radius: 8px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* --shadow from main.css */
+      text-decoration: none;
+      font: inherit;
+      border: none;
+      cursor: pointer;
+      align-self: center;
+    }
+
+    .clear-filters-btn:active,
+    .clear-filters-btn:hover {
+      color: #fafafa; /* --seasalt */
+      background: linear-gradient(
+        135deg,
+        #4d5963 0% 20%,
+        #f79103 20% 40%,
+        #376170 40% 60%,
+        #906b56 60% 80%,
+        #1b2f36 80% 100%
+      ); /* --gradient */
+    }
+
+    .clear-filters-btn:focus-visible {
+      color: #fafafa; /* --seasalt */
+      outline: 2px solid #906b56; /* --raw-umber */
+      outline-offset: 1px;
+      background: linear-gradient(
+        135deg,
+        #4d5963 0% 20%,
+        #f79103 20% 40%,
+        #376170 40% 60%,
+        #906b56 60% 80%,
+        #1b2f36 80% 100%
+      ); /* --gradient */
+    }
+
+    .table-container {
+      background: var(--bg-color);
+      border-radius: 12px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    th {
+      background: var(--bg-hover);
+      padding: 1rem;
+      text-align: left;
+      font-weight: 600;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      font-size: 0.875rem;
+      letter-spacing: 0.025em;
+      border-bottom: 2px solid var(--border-color);
+    }
+
+    th:has(.sort-header) {
+      padding: 0;
+    }
+
+    .sort-header {
+      width: 100%;
+      padding: 1rem;
+      background: transparent;
+      border: none;
+      text-align: left;
+      font-weight: 600;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      font-size: 0.875rem;
+      letter-spacing: 0.025em;
+      cursor: pointer;
+      transition:
+        background-color 0.2s,
+        color 0.2s;
+      white-space: nowrap;
+    }
+
+    .sort-header:hover {
+      background-color: var(--border-color);
+      color: var(--text-color);
+    }
+
+    .sort-header:focus {
+      outline: none;
+      background-color: var(--primary-color);
+      color: white;
+    }
+
+    td {
+      padding: 1rem;
+      border-bottom: 1px solid var(--border-color);
+      vertical-align: top;
+    }
+
+    tbody tr:hover {
+      background-color: var(--bg-hover);
+    }
+
+    tbody tr:last-child td {
+      border-bottom: none;
+    }
+
+    .status-badge {
+      display: inline-block;
+      padding: 0.375rem 0.875rem;
+      border-radius: 20px;
+      font-size: 0.875rem;
+      font-weight: 500;
+      text-transform: capitalize;
+    }
+
+    .status-reading {
+      background-color: #dbeafe;
+      color: #1d4ed8;
+    }
+
+    .status-finished {
+      background-color: #d1fae5;
+      color: #065f46;
+    }
+
+    .status-ah.naw,
+    .status-ah-naw {
+      background-color: #fee2e2;
+      color: #991b1b;
+    }
+
+    .status-not.started,
+    .status-not-started {
+      background-color: #f3f4f6;
+      color: #374151;
+    }
+
+    .status-maybe.later,
+    .status-maybe-later {
+      background-color: #fef3c7;
+      color: #92400e;
+    }
+
+    .status-on.deck,
+    .status-on-deck {
+      background-color: #f3e8ff;
+      color: #7c3aed;
+    }
+
+    .book-title {
+      font-weight: 600;
+      color: var(--text-color);
+      margin-bottom: 0.25rem;
+      text-transform: capitalize;
+    }
+
+    .book-author {
+      color: var(--text-secondary);
+      font-size: 0.9rem;
+      text-transform: capitalize;
+    }
+
+    .series-badge {
+      background-color: var(--bg-hover);
+      color: var(--text-secondary);
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.875rem;
+      font-style: italic;
+    }
+
+    .year-badge {
+      background-color: var(--primary-color);
+      color: white;
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+
+    .grade-badge {
+      display: inline-block;
+      padding: 0.375rem 0.75rem;
+      border-radius: 20px;
+      font-size: 0.875rem;
+      font-weight: 600;
+      text-align: center;
+      min-width: 2rem;
+      text-transform: uppercase;
+    }
+
+    .grade-a {
+      background-color: #d1fae5;
+      color: #065f46;
+    }
+
+    .grade-b {
+      background-color: #dbeafe;
+      color: #1e40af;
+    }
+
+    .grade-c {
+      background-color: #fef3c7;
+      color: #92400e;
+    }
+
+    .grade-d {
+      background-color: #fed7aa;
+      color: #c2410c;
+    }
+
+    .grade-f {
+      background-color: #fee2e2;
+      color: #991b1b;
+    }
+
+    .completion-date {
+      color: var(--text-secondary);
+      font-size: 0.9rem;
+    }
+
+    .not-applicable {
+      color: #9ca3af;
+      font-style: italic;
+      font-size: 0.875rem;
+    }
+
+    .notes-cell {
+      white-space: pre-line;
+    }
+
+    .no-results {
+      text-align: center;
+      padding: 3rem;
+      color: var(--text-secondary);
+    }
+
+    @media (max-width: 768px) {
+      .container {
+        padding: 1rem;
+      }
+
+      h1 {
+        font-size: 2rem;
+      }
+
+      .filters {
+        grid-template-columns: 1fr;
+      }
+
+      .table-container {
+        overflow-x: auto;
+      }
+
+      table {
+        min-width: 800px;
+      }
+    }
+  `}};o([i({attribute:`api-endpoint`})],s.prototype,`apiEndpoint`,void 0),o([a()],s.prototype,`books`,void 0),o([a()],s.prototype,`filteredBooks`,void 0),o([a()],s.prototype,`loading`,void 0),o([a()],s.prototype,`error`,void 0),o([a()],s.prototype,`searchTerm`,void 0),o([a()],s.prototype,`statusFilter`,void 0),o([a()],s.prototype,`seriesFilter`,void 0),o([a()],s.prototype,`yearFilter`,void 0),o([a()],s.prototype,`gradeFilter`,void 0),o([a()],s.prototype,`sortColumn`,void 0),o([a()],s.prototype,`sortDirection`,void 0),s=o([r(`reading-list`)],s);

package/dist/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Reading List Component</title>
+    <script type="module" crossorigin src="/assets/index.js"></script>
+  </head>
+  <body>
+    <reading-list></reading-list>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@jschofield/reading-list",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "./dist/assets/index.js",
+  "exports": {
+    ".": "./dist/assets/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "description": "Reading list web component built with Lit",
+  "author": "Jim Schofield",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JimSchofield/jschof.dev",
+    "directory": "component/reading-list"
+  },
+  "dependencies": {
+    "google-logging-utils": "^1.1.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.2",
+    "vite": "^8.0.3"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  }
+}