internetarchive · iisa · May 7, 2024 · May 7, 2024 · May 7, 2024 · May 15, 2024
diff --git a/packages/ia-activity-indicator/.editorconfig → .editorconfig b/packages/ia-activity-indicator/.editorconfig → .editorconfig
diff --git a/.gitignore b/.gitignore
@@ -1,9 +1,51 @@
-packages/ia-prototype-apps/dist
-packages/ia-prototype-apps/.cache
-yarn-error.log
-node_modules
 jest-test-utils
 __snapshots__
 /publish_dev.sh
-/dist
+
+# ts build artifacts
+**.js
+**.js.map
+**.d.ts
+components/*
+# Exclude JS files & directories here
+!components/icons/
+!**.test.js
+
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+## npm
+/node_modules/
+/npm-debug.log
+
+## testing
+/coverage/
+
+## temp folders
+/.tmp/
+
+# build
+/_site/
+/dist/
+/out-tsc/
+/build/
+ghpages
+dist
+dist-ssr
+*.local
+
+# Logs
+logs
 *.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
diff --git a/packages/audio-element/README.md → components/audio/audio-element/README.md b/packages/audio-element/README.md → components/audio/audio-element/README.md
diff --git a/...ent/assets/img/audio-element-controls.png → ...ent/assets/img/audio-element-controls.png b/...ent/assets/img/audio-element-controls.png → ...ent/assets/img/audio-element-controls.png
diff --git a/packages/audio-element/demo/arrow.mp3 → ...onents/audio/audio-element/demo/arrow.mp3 b/packages/audio-element/demo/arrow.mp3 → ...onents/audio/audio-element/demo/arrow.mp3
diff --git a/packages/audio-element/demo/arrow.ogg → ...onents/audio/audio-element/demo/arrow.ogg b/packages/audio-element/demo/arrow.ogg → ...onents/audio/audio-element/demo/arrow.ogg
diff --git a/packages/audio-element/demo/index.html → ...nents/audio/audio-element/demo/index.html b/packages/audio-element/demo/index.html → ...nents/audio/audio-element/demo/index.html
@@ -22,8 +22,9 @@
 
   <script type="module">
     import { html, render } from 'lit';
-    import AudioSource from '../lib/models/audio-source.js';
-    import AudioElement from '../lib/audio-element.js';
+    import AudioSource from '../src/models/audio-source.js';
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    import AudioElement from '../src/audio-element.js';
 
     const arrowOgg = new AudioSource('./arrow.ogg', 'audio/ogg');
     const arrowMp3 = new AudioSource('./arrow.mp3', 'audio/mpeg');

diff --git a/packages/audio-element/demo/spring.mp3 → ...nents/audio/audio-element/demo/spring.mp3 b/packages/audio-element/demo/spring.mp3 → ...nents/audio/audio-element/demo/spring.mp3
diff --git a/packages/audio-element/demo/spring.ogg → ...nents/audio/audio-element/demo/spring.ogg b/packages/audio-element/demo/spring.ogg → ...nents/audio/audio-element/demo/spring.ogg
diff --git a/components/audio/audio-element/index.ts b/components/audio/audio-element/index.ts
@@ -0,0 +1,4 @@
+import AudioElement from './src/audio-element';
+import AudioSource from './src/models/audio-source';
+
+export { AudioElement, AudioSource };
diff --git a/packages/audio-element/src/audio-element.ts → .../audio/audio-element/src/audio-element.ts b/packages/audio-element/src/audio-element.ts → .../audio/audio-element/src/audio-element.ts
@@ -1,7 +1,7 @@
 /* eslint-disable operator-assignment */
 import { LitElement, html, TemplateResult, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import AudioSource from './models/audio-source';
+import type AudioSource from './models/audio-source';
 
 @customElement('audio-element')
 export default class AudioElement extends LitElement {
@@ -61,6 +61,7 @@ export default class AudioElement extends LitElement {
   }
 
   render(): TemplateResult {
+    console.log('foo bar');
     return html`
       <audio
         @timeupdate=${this.handleTimeChange}

diff --git a/.../audio-element/src/models/audio-source.ts → .../audio-element/src/models/audio-source.ts b/.../audio-element/src/models/audio-source.ts → .../audio-element/src/models/audio-source.ts
diff --git a/packages/audio-element/test/assets/arrow.mp3 → ...audio/audio-element/test/assets/arrow.mp3 b/packages/audio-element/test/assets/arrow.mp3 → ...audio/audio-element/test/assets/arrow.mp3
diff --git a/packages/audio-element/test/assets/arrow.ogg → ...audio/audio-element/test/assets/arrow.ogg b/packages/audio-element/test/assets/arrow.ogg → ...audio/audio-element/test/assets/arrow.ogg
diff --git a/packages/audio-element/stories/spring.mp3 → ...udio/audio-element/test/assets/spring.mp3 b/packages/audio-element/stories/spring.mp3 → ...udio/audio-element/test/assets/spring.mp3
diff --git a/...ages/audio-element/test/assets/spring.ogg → ...udio/audio-element/test/assets/spring.ogg b/...ages/audio-element/test/assets/spring.ogg → ...udio/audio-element/test/assets/spring.ogg
diff --git a/.../audio-element/test/audio-element.test.js → .../audio-element/test/audio-element.test.js b/.../audio-element/test/audio-element.test.js → .../audio-element/test/audio-element.test.js
diff --git a/components/icons/demo/README.md b/components/icons/demo/README.md
@@ -0,0 +1,45 @@
+# ia-icons: SVG icon library for use in archive.org components
+
+## Usage
+
+```js
+import { IAIcon } from './src/ia-icon';
+```
+
+```html
+<ia-icon icon="close" style="--iconFillColor: #0066cc; --iconStrokeColor: #ffffff;"></ia-icon>
+```
+
+```css
+ia-icon {
+  --iconFillColor: #0066cc;
+  --iconStrokeColor: #ffffff;
+  --iconWidth: 40px;
+  --iconHeight: 40px;
+}
+```
+
+## Testing
+
+Unit tests are placed in the ./test directory with the suffix and extension
+".test.js". Any other JS files in the test directory will be ignored by Karma.
+Run the tests with `yarn test`.
+
+## Structure
+
+* index.js - main component export
+* index.html - file opened when running `yarn start`
+* karma.conf.js - Karma runner config
+* karma.bs.conf.js - Karma BrowserStack config. Note that BROWSER_STACK_USERNAME
+  and BROWSER_STACK_ACCESS_KEY need to be set as environment variables before
+  running.
+* /src/ia-icons.js - Class definitions for each LitElement
+* /src/icons - Place icon SVGs here. Convention is to export a Lit-html template
+* /test - unit tests
+
+## Single Icons
+
+This package is part of [a monorepo](https://github.com/internetarchive/iaux-icons)
+that includes a published package for each icon included here. Each package
+includes a raw SVG file, a LitHtml template literal, and a defined custom
+element created with LitElement.
diff --git a/components/icons/demo/ia-icon.js b/components/icons/demo/ia-icon.js
@@ -0,0 +1,5 @@
+/* eslint-disable import/no-duplicates */
+import './src/ia-icon';
+import IAIcon from './src/ia-icon';
+
+export default IAIcon;
diff --git a/components/icons/demo/index.html b/components/icons/demo/index.html
@@ -0,0 +1,126 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script type="module" src="ia-icon.js"></script>
+    <script type="module" src="src/icon-donate.js"></script>
+    <title>IA SVG Icons</title>
+    <style>
+      html {
+        font: normal 10px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        font-size: 10px;
+        --iconWidth: 40px;
+        --iconHeight: 40px;
+      }
+      body {
+        margin: 0;
+        padding: 0 2rem;
+      }
+
+      h3 {
+        font-size: 2rem;
+      }
+
+      ul {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
+        grid-gap: 1rem;
+        padding: 0;
+        list-style: none;
+      }
+
+      li {
+        padding: 1.5rem 0;
+        border: 2px solid #ccc;
+        text-align: center;
+      }
+
+      li:hover {
+        color: #f0f0f0;
+        background: #222;
+      }
+
+      p {
+        margin: 0;
+      }
+
+      icon-donate {
+        width: 40px;
+        display: block;
+      }
+    </style>
+  </head>
+
+  <body>
+    <script type="module">
+      </script>
+    <script type="module">
+      import {render, html} from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
+
+      // import { render, html } from '';
+
+      const listItems = () => [
+    'advance',
+    'applePay',
+    'audio',
+    'calendar',
+    'calendarBlank',
+    'close',
+    'closeCircle',
+    'collapseSidebar',
+    'creditCard',
+    'donate',
+    'download',
+    'editPencil',
+    'ellipses',
+    'email',
+    'facebook',
+    'googlePay',
+    'iaLogo',
+    'images',
+    'link',
+    'localePin',
+    'lock',
+    'magnifyMinus',
+    'magnifyPlus',
+    'paypal',
+    'pinterest',
+    'search',
+    'share',
+    'software',
+    'sortAscending',
+    'sortDescending',
+    'texts',
+    'toc',
+    'tumblr',
+    'twitter',
+    'upload',
+    'user',
+    'venmo',
+    'video',
+    'visualAdjustment',
+    'volumes',
+    'web',
+    'info',
+  ].map((name) => {
+    const color = `rgb(${~~(Math.random() * 256)}, ${~~(Math.random() * 256)}, ${~~(Math.random() * 256)})`;
+    return html`
+      <li>
+        <ia-icon icon=${name} style="--iconFillColor: ${color}; --iconStrokeColor: ${color};"></ia-icon>
+        <p>${name}</p>
+      </li>
+    `;
+  });
+
+      render(html`
+        <h3>Icons using ${"<ia-icon>"}</h3>
+        <ul>
+          ${listItems()}
+        </ul>
+        <h3>Icon created by extending IAIcon</h3>
+        <icon-donate></icon-donate>
+      `, document.body);
+    </script>
+  </body>
+</html>
diff --git a/components/icons/demo/index.js b/components/icons/demo/index.js
@@ -0,0 +1,3 @@
+import IAIcon from './src/ia-icon';
+
+export default IAIcon;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import IAIcon from './src/ia-icon';

		export default IAIcon;