accosine · dkolba · Jun 5, 2024 · Jun 7, 2024 · Jun 7, 2024 · Jul 16, 2024
diff --git a/.gitignore b/.gitignore
@@ -17,7 +17,7 @@ coverage
 
 # tests
 test-results
-src/components/*-snapshots/*-darwin.png
+src/components/countdown/*-snapshots/*-darwin.png
 
 # nyc test coverage
 .nyc_output

diff --git a/development.ts b/development.ts
@@ -1,4 +1,4 @@
-import { Countdown } from './src/components/countdown.ts';
+import { Countdown } from './src/components/countdown/countdown.ts';
 import xanadu from './src/index.ts';
 
 xanadu();

diff --git a/eslint.config.js b/eslint.config.js
@@ -17,7 +17,8 @@ export default [
       'no-ternary': 'off',
       'no-undef': 'off',
       'one-var': 'off',
-      'sort-imports': ['error', { ignoreCase: true }]
+      'sort-imports': ['error', { ignoreCase: true }],
+      'no-console': ['error', { allow: ['warn', 'error'] }]
     }
   },
   eslintPluginUnicorn.configs['flat/recommended'],
@@ -53,7 +54,7 @@ export default [
       'wc/file-name-matches-element': 'error',
       'wc/guard-define-call': 'error',
       'wc/max-elements-per-file': 'error',
-      'wc/no-constructor': 'error',
+      'wc/no-constructor': 'warn',
       'wc/no-exports-with-element': 'error',
       'wc/no-method-prefixed-with-on': 'error',
       'wc/tag-name-matches-class': 'error'

diff --git a/index.html b/index.html
@@ -9,30 +9,10 @@
     <script type="module" src="./development.ts"></script>
   </head>
   <body>
-    <header>
-      <h1>Vite + Web Components</h1>
-    </header>
-    <main>
-      <x-countdown days="2" hours="3" minutes="5" seconds="7"></x-countdown>
-      <x-countdown
-        class="viapart"
-        days="3"
-        hours="4"
-        minutes="6"
-        seconds="8"
-      ></x-countdown>
-      <x-countdown days="4" hours="5" minutes="7" seconds="9"></x-countdown>
-      <x-countdown
-        class="viacustomproperty"
-        days="3"
-        hours="4"
-        minutes="6"
-        seconds="8"
-      ></x-countdown>
-      <x-countdown hours="9" minutes="9" seconds="9"></x-countdown>
-      <x-countdown minutes="8" seconds="8"></x-countdown>
-      <x-countdown seconds="7"></x-countdown>
-      <x-countdown></x-countdown>
-    </main>
+    <h1>Vite + Web Components</h1>
+    <a href="/www/countdown">Countdown</a>
+    <a href="/www/zine">Zine</a>
+    <a href="/www/story">Story</a>
+    <a href="/www/folio">Folio</a>
   </body>
 </html>
diff --git a/jsr.json b/jsr.json
@@ -7,7 +7,7 @@
       "LICENSE",
       "README.md",
       "./mod.ts",
-      "src/components/*.ts",
+      "src/components/**/*.ts",
       "src/constants.ts"
     ]
   }

diff --git a/mod.ts b/mod.ts
@@ -1,2 +1,2 @@
 /* eslint-disable unicorn/prevent-abbreviations */
-export { Countdown } from "./src/components/countdown.ts";
+export { Countdown } from './src/components/countdown/countdown.ts';
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "dev": "vite",
     "lint": "npm run lint:code && npm run lint:styles && npm run lint:slowtypes",
     "lint:code": "eslint --cache --cache-location ./node_modules/.cache/eslint ./src ./stories",
-    "lint:styles": "stylelint src/**/*.{css,styles.js}",
+    "lint:styles": "stylelint src/components/**/*.css",
     "lint:slowtypes": "jsr publish --dry-run --allow-dirty",
     "storybook": "storybook dev -p 6006",
     "test": "playwright test",

diff --git a/src/components/countdown.css → src/components/countdown/countdown.css b/src/components/countdown.css → src/components/countdown/countdown.css
diff --git a/src/components/countdown.spec.ts → src/components/countdown/countdown.spec.ts b/src/components/countdown.spec.ts → src/components/countdown/countdown.spec.ts
@@ -1,10 +1,10 @@
-import { expect, test } from '../../e2e/baseFixtures.ts';
+import { expect, test } from '../../../e2e/baseFixtures.ts';
 import AxeBuilder from '@axe-core/playwright';
-import { ONE } from '../constants.ts';
+import { ONE } from '../../constants.ts';
 import type { Page } from '@playwright/test';
 
 test.beforeEach(async ({ page }: { page: Page }) => {
-  await page.goto('/');
+  await page.goto('/www/countdown');
 });
 
 const runCountdownTests = () => {

diff --git a/...nts-screenshots-1-Mobile-Chrome-linux.png → ...nts-screenshots-1-Mobile-Chrome-linux.png b/...nts-screenshots-1-Mobile-Chrome-linux.png → ...nts-screenshots-1-Mobile-Chrome-linux.png
diff --git a/...nts-screenshots-1-Mobile-Safari-linux.png → ...nts-screenshots-1-Mobile-Safari-linux.png b/...nts-screenshots-1-Mobile-Safari-linux.png → ...nts-screenshots-1-Mobile-Safari-linux.png
diff --git a/...variants-screenshots-1-chromium-linux.png → ...variants-screenshots-1-chromium-linux.png b/...variants-screenshots-1-chromium-linux.png → ...variants-screenshots-1-chromium-linux.png
diff --git a/...-variants-screenshots-1-firefox-linux.png → ...-variants-screenshots-1-firefox-linux.png b/...-variants-screenshots-1-firefox-linux.png → ...-variants-screenshots-1-firefox-linux.png
diff --git a/...h-variants-screenshots-1-webkit-linux.png → ...h-variants-screenshots-1-webkit-linux.png b/...h-variants-screenshots-1-webkit-linux.png → ...h-variants-screenshots-1-webkit-linux.png
diff --git a/...nts-screenshots-2-Mobile-Chrome-linux.png → ...nts-screenshots-2-Mobile-Chrome-linux.png b/...nts-screenshots-2-Mobile-Chrome-linux.png → ...nts-screenshots-2-Mobile-Chrome-linux.png
diff --git a/...nts-screenshots-2-Mobile-Safari-linux.png → ...nts-screenshots-2-Mobile-Safari-linux.png b/...nts-screenshots-2-Mobile-Safari-linux.png → ...nts-screenshots-2-Mobile-Safari-linux.png
diff --git a/...variants-screenshots-2-chromium-linux.png → ...variants-screenshots-2-chromium-linux.png b/...variants-screenshots-2-chromium-linux.png → ...variants-screenshots-2-chromium-linux.png
diff --git a/...-variants-screenshots-2-firefox-linux.png → ...-variants-screenshots-2-firefox-linux.png b/...-variants-screenshots-2-firefox-linux.png → ...-variants-screenshots-2-firefox-linux.png
diff --git a/...h-variants-screenshots-2-webkit-linux.png → ...h-variants-screenshots-2-webkit-linux.png b/...h-variants-screenshots-2-webkit-linux.png → ...h-variants-screenshots-2-webkit-linux.png
diff --git a/...nts-screenshots-3-Mobile-Chrome-linux.png → ...nts-screenshots-3-Mobile-Chrome-linux.png b/...nts-screenshots-3-Mobile-Chrome-linux.png → ...nts-screenshots-3-Mobile-Chrome-linux.png
diff --git a/...nts-screenshots-3-Mobile-Safari-linux.png → ...nts-screenshots-3-Mobile-Safari-linux.png b/...nts-screenshots-3-Mobile-Safari-linux.png → ...nts-screenshots-3-Mobile-Safari-linux.png
diff --git a/...variants-screenshots-3-chromium-linux.png → ...variants-screenshots-3-chromium-linux.png b/...variants-screenshots-3-chromium-linux.png → ...variants-screenshots-3-chromium-linux.png
diff --git a/...-variants-screenshots-3-firefox-linux.png → ...-variants-screenshots-3-firefox-linux.png b/...-variants-screenshots-3-firefox-linux.png → ...-variants-screenshots-3-firefox-linux.png
diff --git a/...h-variants-screenshots-3-webkit-linux.png → ...h-variants-screenshots-3-webkit-linux.png b/...h-variants-screenshots-3-webkit-linux.png → ...h-variants-screenshots-3-webkit-linux.png
diff --git a/...nts-screenshots-1-Mobile-Chrome-linux.png → ...nts-screenshots-1-Mobile-Chrome-linux.png b/...nts-screenshots-1-Mobile-Chrome-linux.png → ...nts-screenshots-1-Mobile-Chrome-linux.png
diff --git a/...nts-screenshots-1-Mobile-Safari-linux.png → ...nts-screenshots-1-Mobile-Safari-linux.png b/...nts-screenshots-1-Mobile-Safari-linux.png → ...nts-screenshots-1-Mobile-Safari-linux.png
diff --git a/...variants-screenshots-1-chromium-linux.png → ...variants-screenshots-1-chromium-linux.png b/...variants-screenshots-1-chromium-linux.png → ...variants-screenshots-1-chromium-linux.png
diff --git a/...-variants-screenshots-1-firefox-linux.png → ...-variants-screenshots-1-firefox-linux.png b/...-variants-screenshots-1-firefox-linux.png → ...-variants-screenshots-1-firefox-linux.png
diff --git a/...h-variants-screenshots-1-webkit-linux.png → ...h-variants-screenshots-1-webkit-linux.png b/...h-variants-screenshots-1-webkit-linux.png → ...h-variants-screenshots-1-webkit-linux.png
diff --git a/...nts-screenshots-2-Mobile-Chrome-linux.png → ...nts-screenshots-2-Mobile-Chrome-linux.png b/...nts-screenshots-2-Mobile-Chrome-linux.png → ...nts-screenshots-2-Mobile-Chrome-linux.png
diff --git a/...nts-screenshots-2-Mobile-Safari-linux.png → ...nts-screenshots-2-Mobile-Safari-linux.png b/...nts-screenshots-2-Mobile-Safari-linux.png → ...nts-screenshots-2-Mobile-Safari-linux.png
diff --git a/...variants-screenshots-2-chromium-linux.png → ...variants-screenshots-2-chromium-linux.png b/...variants-screenshots-2-chromium-linux.png → ...variants-screenshots-2-chromium-linux.png
diff --git a/...-variants-screenshots-2-firefox-linux.png → ...-variants-screenshots-2-firefox-linux.png b/...-variants-screenshots-2-firefox-linux.png → ...-variants-screenshots-2-firefox-linux.png
diff --git a/...h-variants-screenshots-2-webkit-linux.png → ...h-variants-screenshots-2-webkit-linux.png b/...h-variants-screenshots-2-webkit-linux.png → ...h-variants-screenshots-2-webkit-linux.png
diff --git a/...nts-screenshots-3-Mobile-Chrome-linux.png → ...nts-screenshots-3-Mobile-Chrome-linux.png b/...nts-screenshots-3-Mobile-Chrome-linux.png → ...nts-screenshots-3-Mobile-Chrome-linux.png
diff --git a/...nts-screenshots-3-Mobile-Safari-linux.png → ...nts-screenshots-3-Mobile-Safari-linux.png b/...nts-screenshots-3-Mobile-Safari-linux.png → ...nts-screenshots-3-Mobile-Safari-linux.png
diff --git a/...variants-screenshots-3-chromium-linux.png → ...variants-screenshots-3-chromium-linux.png b/...variants-screenshots-3-chromium-linux.png → ...variants-screenshots-3-chromium-linux.png
diff --git a/...-variants-screenshots-3-firefox-linux.png → ...-variants-screenshots-3-firefox-linux.png b/...-variants-screenshots-3-firefox-linux.png → ...-variants-screenshots-3-firefox-linux.png
diff --git a/...h-variants-screenshots-3-webkit-linux.png → ...h-variants-screenshots-3-webkit-linux.png b/...h-variants-screenshots-3-webkit-linux.png → ...h-variants-screenshots-3-webkit-linux.png
diff --git a/src/components/countdown.ts → src/components/countdown/countdown.ts b/src/components/countdown.ts → src/components/countdown/countdown.ts
@@ -11,7 +11,7 @@ import {
   THOUSAND,
   TWO,
   ZERO
-} from '../constants.ts';
+} from '../../constants.ts';
 
 /**
  * A class to represent the StopWatch element

diff --git a/src/components/countdown.types.ts → src/components/countdown/countdown.types.ts b/src/components/countdown.types.ts → src/components/countdown/countdown.types.ts
diff --git a/src/components/folio/folio.css b/src/components/folio/folio.css
@@ -0,0 +1,37 @@
+:host {
+  display: flex;
+  background-color: hotpink;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  & label {
+    position: absolute;
+    cursor: pointer;
+  }
+
+  & input[type='file'] {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: auto;
+    position: absolute;
+    z-index: -1;
+  }
+
+  & [type='file']:focus + label {
+    /* keyboard navigation */
+    /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+
+  & [type='file'] + label * {
+    pointer-events: none;
+  }
+
+  & img {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/src/components/folio/folio.ts b/src/components/folio/folio.ts
@@ -0,0 +1,86 @@
+import { folioTemplate } from './templates.ts';
+import XanaduElement from '../../xanadu-element.ts';
+
+/**
+ * A class to represent the Folio web component
+ */
+export class Folio extends XanaduElement {
+  imageInput: HTMLInputElement | undefined;
+  previewImage: HTMLImageElement | null | undefined;
+  labelElement: HTMLLabelElement | null | undefined;
+  imageInputHandler: () => void;
+
+  constructor() {
+    super();
+    if (!this.shadowRoot) {
+      const template = Folio.prepareTemplate(folioTemplate({}));
+      this.attachShadow({ mode: 'open' }).append(template);
+    }
+    this.#prepareElements();
+    this.imageInputHandler = this.#createImageInputChangeHandler();
+  }
+
+  connectedCallback() {
+    this.imageInput?.addEventListener('change', this.imageInputHandler);
+  }
+
+  disconnectedCallback() {
+    this.imageInput?.removeEventListener('change', this.imageInputHandler);
+  }
+
+  #prepareElements() {
+    Folio.assert(
+      this.shadowRoot instanceof ShadowRoot,
+      'A ShadowRoot needs to be declared in the DOM.'
+    );
+    this.imageInput = this.shadowRoot.querySelector(
+      '#file'
+    ) as HTMLInputElement;
+    this.previewImage = this.shadowRoot.querySelector('img');
+    /* istanbul ignore if -- @preserve */
+    if (!this.previewImage) {
+      this.previewImage = document.createElement('img');
+    }
+    this.labelElement = this.shadowRoot.querySelector('label');
+  }
+
+  #createImageInputChangeHandler() {
+    return () => {
+      this.previewSelectedImage();
+    };
+  }
+
+  previewSelectedImage() {
+    Folio.assert(
+      this.shadowRoot instanceof ShadowRoot,
+      'A ShadowRoot needs to be declared in the DOM.'
+    );
+    const imageInput = this.shadowRoot.querySelector(
+      '#file'
+    ) as HTMLInputElement;
+    const [file] = imageInput.files || [];
+    if (file) {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.addEventListener('load', (event) => {
+        Folio.assert(
+          this.previewImage instanceof HTMLImageElement,
+          'A ShadowRoot needs to be declared in the DOM.'
+        );
+        Folio.assert(
+          typeof event.target?.result === 'string',
+          'Event.target.result needs to be a string.'
+        );
+        this.previewImage.src = event.target.result;
+      });
+      Folio.assert(
+        this.labelElement instanceof HTMLLabelElement,
+        'A ShadowRoot needs to be declared in the DOM.'
+      );
+      this.labelElement.after(this.previewImage as Node);
+      this.labelElement.remove();
+    }
+  }
+}
+
+export default Folio;
diff --git a/src/components/folio/templates.ts b/src/components/folio/templates.ts
@@ -0,0 +1,26 @@
+type FolioTemplateType = {
+  css?: string;
+  preview?: string;
+  dsd?: boolean;
+};
+
+export const folioTemplate = ({
+  css = '',
+  preview = '',
+  dsd = false
+}: FolioTemplateType) => {
+  const styles = css ? `<style>${css}</style>` : '';
+  const shadowrootmode = dsd ? 'shadowrootmode="open"' : '';
+  const previewImage = preview
+    ? `<img id="previewImage" alt="Preview" src="${preview}"/>`
+    : '';
+
+  return `<template ${shadowrootmode}>
+          ${styles}
+          <input type="file" name="file" id="file" accept=".jpg, .jpeg, .png" />
+          <label for="file">Choose a file (Click me)</label>
+          ${previewImage}
+        </template>`;
+};
+
+export default folioTemplate;
diff --git a/src/components/story/templates.ts b/src/components/story/templates.ts
@@ -0,0 +1,39 @@
+export const storyTemplate = `<div class="is-stories">
+      <section class="is-user">
+        <article
+          class="is-story"
+          style="--bg: url(https://picsum.photos/480/840)"
+        ></article>
+        <article
+          class="is-story"
+          style="--bg: url(https://picsum.photos/480/841)"
+        ></article>
+      </section>
+      <section class="is-user">
+        <article
+          class="is-story"
+          style="--bg: url(https://picsum.photos/481/840)"
+        ></article>
+      </section>
+      <section class="is-user">
+        <article
+          class="is-story"
+          style="--bg: url(https://picsum.photos/481/841)"
+        ></article>
+      </section>
+      <section class="is-user">
+        <article
+          class="is-story"
+          style="--bg: url(https://picsum.photos/482/840)"
+        ></article>
+        <article
+          class="is-story"
+          style="--bg: url(https://picsum.photos/482/843)"
+        ></article>
+        <article
+          class="is-story"
+          style="--bg: url(https://picsum.photos/482/844)"
+        ></article>
+      </section>
+    </div>
+    `;
diff --git a/src/components/story/zine.css b/src/components/story/zine.css
@@ -0,0 +1,70 @@
+:host {
+  color: blue;
+  min-block-size: 100vh;
+  display: grid;
+  place-items: center;
+  font-family: system-ui;
+  margin: 0;
+  background: hsl(200deg 15% 93%);
+
+  & > .is-stories {
+    inline-size: 100vw;
+    block-size: 100vh;
+    box-shadow:
+      0 5px 2.5px hsl(200deg 95% 3% / 3.7%),
+      0 12px 6.5px hsl(200deg 95% 3% / 5.3%),
+      0 22.5px 13px hsl(200deg 95% 3% / 6.5%),
+      0 40.2px 24px hsl(200deg 95% 3% / 7.7%),
+      0 75.2px 44px hsl(200deg 95% 3% / 9.3%),
+      0 180px 80px hsl(200deg 95% 3% / 13%);
+
+    @media (hover: hover) {
+      border-radius: 3ch;
+    }
+
+    /* desktop constraint */
+    @media (hover: hover) and (width >= 480px) {
+      max-inline-size: 480px;
+      max-block-size: 848px;
+    }
+
+    /* smaller desktop constraint */
+    @media (hover: hover) and (height <= 880px) and (width >= 720px) {
+      max-inline-size: 320px;
+      max-block-size: 568px;
+    }
+  }
+
+  & .is-stories {
+    /* asdf */
+    display: grid;
+    grid: 1fr / auto-flow 100%;
+    gap: 1ch;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    overscroll-behavior: contain;
+    touch-action: pan-x;
+  }
+
+  & .is-user {
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+    display: grid;
+    grid: [story] 1fr / [story] 1fr;
+  }
+
+  & .is-story {
+    grid-area: story;
+    background-size: cover;
+    background-image: var(--bg),
+      linear-gradient(to top, lch(98% 0 0deg), lch(90% 0 0deg));
+    user-select: none;
+    touch-action: manipulation;
+    transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1);
+
+    &.is-seen {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}