Initial Project Setup

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: App CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v5
+    - uses: actions/setup-node@v5
+      with:
+        node-version: lts/*
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+
+    - name: Run tests
+      run: npm run test
+
+    - uses: codecov/codecov-action@v5
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}

.gitignore

@@ -1 +1,17 @@
+node_modules/
+*.tgz
+*.tsbuildinfo
+.DS_Store
+.wireit
+/temp
 .idea
+/scripts/check-size-out.md
+/playground/p/**/package-lock.json
+/playground/p/scratch/*/
+!/playground/p/scratch/*.*
+/.direnv/
+/.envrc
+/.actrc
+dist
+coverage
+__screenshots__

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "bracketSpacing": true
+}

.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bierner.lit-html",
+    "bashmish.es6-string-css",
+    "runem.lit-plugin",
+    "ryanluker.vscode-coverage-gutters",
+    "google.wireit",
+    "vitest.explorer"
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,14 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Watch coverage on open",
+      "command": "${command:coverage-gutters.watchCoverageAndVisibleEditors}",
+      "runOptions": {
+        "runOn": "folderOpen"
+      }
+    }
+  ]
+}

README.md

@@ -1,4 +1,4 @@
-# 📚 _ia-components_ 🏛️
+# 📚 _elements_ 🏛️
 
 
 ## Component Inventory

demo/app-root.ts

@@ -0,0 +1,18 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import '@src/elements/ia-button/ia-button-story';
+import '@src/labs/ia-snow/ia-snow-story';
+
+@customElement('app-root')
+export class AppRoot extends LitElement {
+  render() {
+    return html`
+      <h1>🏛️ Internet Archive Elements ⚛️</h1>
+
+      <ia-button-story></ia-button-story>
+
+      <ia-snow-story></ia-snow-story>
+    `;
+  }
+}

demo/index.css

@@ -0,0 +1,37 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 1rem;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+}

demo/story-template.ts

@@ -0,0 +1,103 @@
+import { css, html, LitElement, type CSSResultGroup } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { when } from 'lit/directives/when.js';
+
+import './syntax-highlighter';
+
+import arrow from './arrow.svg';
+
+@customElement('story-template')
+export class StoryTemplate extends LitElement {
+  @property({ type: String }) elementTag = '';
+
+  @property({ type: String }) exampleUsage = '';
+
+  @property({ type: Boolean }) labs = false;
+
+  @state() private visible = false;
+
+  render() {
+    return html`
+      <h2 @click=${() => (this.visible = !this.visible)}>
+        <img
+          class="disclosure-arrow ${this.visible ? 'open' : ''}"
+          src=${arrow}
+        /><code> &lt;${this.elementTag}&gt;</code>
+      </h2>
+      ${when(this.visible, () => this.elementDemoTemplate)}
+    `;
+  }
+
+  private get elementDemoTemplate() {
+    return html`
+      <div id="container">
+        <h3>Demo</h3>
+        <div class="slot-container">
+          <slot name="demo"></slot>
+        </div>
+        <h3>Import</h3>
+        <syntax-highlighter .code=${this.importCode}></syntax-highlighter>
+        <h3>Usage</h3>
+        <syntax-highlighter .code=${this.exampleUsage}></syntax-highlighter>
+        <h3>Settings</h3>
+        <div class="slot-container">
+          <slot name="settings"></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  private get importCode() {
+    return `
+import '${this.modulePath}';
+import { ${this.elementClassName} } from '${this.modulePath}';
+    `;
+  }
+
+  private get elementClassName() {
+    return customElements.get(this.elementTag)?.name;
+  }
+
+  private get modulePath() {
+    return this.labs
+      ? `@internetarchive/elements/labs/${this.elementTag}/${this.elementTag}`
+      : `@internetarchive/elements/${this.elementTag}/${this.elementTag}`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      #container {
+        border: 1px solid #ccc;
+        padding: 0 16px 16px 16px;
+      }
+
+      h2 {
+        cursor: pointer;
+        margin-top: 8px;
+        margin-bottom: 8px;
+      }
+
+      h3 {
+        margin-bottom: 8px;
+      }
+
+      .slot-container {
+        background: #282c34;
+        padding: 1em;
+      }
+
+      .disclosure-arrow {
+        width: 12px;
+        height: 12px;
+        transform: rotate(-90deg);
+        filter: invert(1);
+        transition: transform 0.2s ease-in-out;
+      }
+
+      .disclosure-arrow.open {
+        transform: rotate(0deg);
+
+    `;
+  }
+}

demo/syntax-highlighter.ts

@@ -0,0 +1,49 @@
+import hljs from 'highlight.js';
+import typescript from 'highlight.js/lib/languages/typescript';
+import {
+  type CSSResultGroup,
+  LitElement,
+  type PropertyValues,
+  html,
+} from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { syntaxStyles } from './syntax-style';
+
+@customElement('syntax-highlighter')
+export class SyntaxHighlighter extends LitElement {
+  @property({ type: String }) code = '';
+
+  @state() private highlightedCode = '';
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    hljs.registerLanguage('typescript', typescript);
+  }
+
+  protected willUpdate(_changedProperties: PropertyValues): void {
+    if (_changedProperties.has('code')) {
+      this.highlightCode();
+    }
+  }
+
+  render() {
+    return html`
+      <pre><code class="hljs language-typescript">${unsafeHTML(
+        this.highlightedCode,
+      )}</code></pre>
+    `;
+  }
+
+  private highlightCode() {
+    const code = this.code.trim();
+    const highlighted = hljs.highlight(code, {
+      language: 'typescript',
+    }).value;
+    this.highlightedCode = highlighted;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [syntaxStyles];
+  }
+}

demo/syntax-style.ts

@@ -0,0 +1,94 @@
+import { css, type CSSResultGroup } from 'lit';
+
+export const syntaxStyles: CSSResultGroup = css`
+  pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+  }
+  code.hljs {
+    padding: 3px 5px;
+  }
+  /*
+
+Atom One Dark by Daniel Gamage
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+
+base:    #282c34
+mono-1:  #abb2bf
+mono-2:  #818896
+mono-3:  #5c6370
+hue-1:   #56b6c2
+hue-2:   #61aeee
+hue-3:   #c678dd
+hue-4:   #98c379
+hue-5:   #e06c75
+hue-5-2: #be5046
+hue-6:   #d19a66
+hue-6-2: #e6c07b
+
+*/
+  .hljs {
+    color: #abb2bf;
+    background: #282c34;
+  }
+  .hljs-comment,
+  .hljs-quote {
+    color: #5c6370;
+    font-style: italic;
+  }
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-formula {
+    color: #c678dd;
+  }
+  .hljs-section,
+  .hljs-name,
+  .hljs-selector-tag,
+  .hljs-deletion,
+  .hljs-subst {
+    color: #e06c75;
+  }
+  .hljs-literal {
+    color: #56b6c2;
+  }
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta .hljs-string {
+    color: #98c379;
+  }
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-number {
+    color: #d19a66;
+  }
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-title {
+    color: #61aeee;
+  }
+  .hljs-built_in,
+  .hljs-title.class_,
+  .hljs-class .hljs-title {
+    color: #e6c07b;
+  }
+  .hljs-emphasis {
+    font-style: italic;
+  }
+  .hljs-strong {
+    font-weight: bold;
+  }
+  .hljs-link {
+    text-decoration: underline;
+  }
+`;