bard-attachment_field 0.1.0

data/input-attachment/src/components/attachment-file/accepts.ts

@@ -0,0 +1,32 @@
+import { AttachmentFile } from './attachment-file'
+
+export default class Accepts {
+  uploadedFile: AttachmentFile
+
+  constructor(uploadedFile) {
+    this.uploadedFile = uploadedFile
+  }
+
+  get errors() {
+    if(this.#errors) return this.#errors
+    this.#errors = []
+
+    const accepts = this.uploadedFile.accepts ? this.uploadedFile.accepts.split(/,\s*/) : []
+
+    if(accepts.length > 0 && !accepts.includes(this.uploadedFile.filetype)) {
+      this.#errors.push(`Must be a ${this.joinWords(accepts)}.`)
+    }
+    return this.#errors
+  }
+
+  #errors: Array<string>
+
+  private joinWords(words) {
+    if(words.length >= 3) {
+      return (words.slice(0, -1) + [`or ${words.at(-1)}`]).join(", ")
+    } else {
+      return words.join(" or ")
+    }
+  }
+}
+

data/input-attachment/src/components/attachment-file/attachment-file.css

@@ -0,0 +1,89 @@
+:host {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  font-size: 13px;
+}
+
+figure{
+  margin: 0;
+}
+
+.progress-details{
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+progress-bar{
+  flex: 1 0;
+  padding: 0 10px;
+}
+
+progress-bar.pending{
+  opacity: 0.5;
+}
+
+progress-bar.complete {
+  opacity: 0.8;
+}
+
+progress-bar:not(.complete) + .progress-icon{
+  display: none;
+}
+
+progress-bar.complete + .progress-icon{
+  content: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><g><path d="M6.3,9.1c0.2,0,0.5,0.1,0.7,0.4c0.5,0.5,1,1,1.4,1.4c0.3,0.3,0.3,0.3,0.6,0c1.4-1.3,2.7-2.6,4-3.9c0.3-0.3,0.6-0.4,1-0.4 c0.5,0.1,0.9,0.6,0.7,1.1c-0.1,0.2-0.2,0.4-0.3,0.6c-1.6,1.6-3.2,3.2-4.8,4.8c-0.5,0.5-1,0.5-1.6,0c-0.8-0.7-1.5-1.5-2.3-2.3 c-0.3-0.3-0.5-0.6-0.3-1.1C5.5,9.3,5.8,9.1,6.3,9.1z"/></g></svg>');
+  filter: invert(100%);
+}
+
+.progress-icon{
+  display: inline-block;
+  flex: 0 0 20px;
+  width: 28px;
+  height: 28px;
+  background-size: contain;
+  position: absolute;
+  right: 30px;
+  z-index: 1;
+}
+
+progress-bar.error{
+  background: #f8b3b1;
+  background: rgba(74, 70, 70, 0.25);
+  opacity: 1;
+}
+
+.progress-bar a{color: #fff;}
+
+.download-link{
+  padding-right: 20px;
+  color: #fff;
+}
+
+.remove-media{
+  display: inline-block;
+  content: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve"><g><path d="M0,19.9C0.2,8.5,9.2-0.1,20.1,0C31.8,0.1,40.2,9.5,40,20.4c-0.2,11-8.9,19.7-20.1,19.6C8,39.9,0,30.5,0,19.9z M20,3.7 c-9,0-16.3,7-16.3,16.2C3.7,29,10.9,36.3,20,36.3c9,0,16.3-7.1,16.4-16.3C36.3,11,29.2,3.8,20,3.7z"/><path d="M17.3,20c-0.2-0.2-0.3-0.4-0.5-0.6c-1-1-2-1.9-2.9-2.9c-0.5-0.5-0.8-1.1-0.7-1.9c0.1-0.7,0.5-1.2,1.2-1.4 c0.8-0.2,1.5,0,2.1,0.6c1,1,2,2,3,3.1c0.3,0.4,0.6,0.3,0.9,0c1-1,2-2,3-3c0.3-0.3,0.7-0.5,1.1-0.6c0.8-0.2,1.6,0.1,2,0.8 c0.4,0.8,0.3,1.7-0.4,2.4c-1,1-2,2-3,3c-0.2,0.2-0.3,0.4-0.5,0.6c1.2,1.2,2.3,2.3,3.4,3.4c0.6,0.6,0.9,1.3,0.6,2.2 c-0.4,1.1-1.7,1.6-2.6,1c-0.3-0.2-0.5-0.4-0.8-0.6c-1-1-1.9-1.9-2.9-2.9c-0.3-0.3-0.5-0.3-0.9,0c-1,1-2,2.1-3,3 c-0.4,0.4-1,0.6-1.5,0.8c-0.6,0.1-1.2-0.2-1.5-0.8c-0.4-0.6-0.5-1.3-0.1-1.9c0.2-0.3,0.4-0.5,0.6-0.7C15.1,22.3,16.2,21.2,17.3,20z "/></g></svg>');
+  flex: 0 0 25px;
+  width: 25px;
+  height: 20px;
+  align-items: center;
+  opacity: 0.25;
+}
+
+.remove-media:hover{
+  opacity: 1;
+  filter: invert(50%)sepia(100%)saturate(10000%);
+}
+
+.remove-media span{
+  display: inline-block;
+  text-indent: -9999px;
+  color: transparent;
+}
+
+.validation-error{
+  color: #c00;
+  font-size: 12px;
+  margin: 4px 0 0 10px;
+}

data/input-attachment/src/components/attachment-file/attachment-file.e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('attachment-file', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<attachment-file></attachment-file>');
+
+    const element = await page.find('attachment-file');
+    expect(element).toHaveClass('hydrated');
+  });
+});

data/input-attachment/src/components/attachment-file/attachment-file.spec.tsx

@@ -0,0 +1,20 @@
+// Mock rails-request-json to avoid ES module issues
+jest.mock('rails-request-json', () => ({
+  get: jest.fn(() => Promise.resolve({}))
+}));
+
+import { newSpecPage } from '@stencil/core/testing';
+import { AttachmentFile } from './attachment-file';
+
+describe('attachment-file', () => {
+
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [AttachmentFile],
+      html: `<attachment-file></attachment-file>`,
+    });
+
+    // Just check that it renders without error
+    expect(page.root.tagName).toBe('ATTACHMENT-FILE');
+  });
+});

data/input-attachment/src/components/attachment-file/attachment-file.tsx

@@ -0,0 +1,157 @@
+import { Component, Prop, Element, Watch, Host, h } from '@stencil/core'
+import { Listen, Event, EventEmitter } from '@stencil/core'
+import DirectUploadController from './direct-upload-controller'
+import Max from './max'
+import Accepts from './accepts'
+import Extensions from './extensions'
+import { get } from 'rails-request-json'
+
+@Component({
+  tag: 'attachment-file',
+  styleUrl: 'attachment-file.css',
+  shadow: true,
+})
+export class AttachmentFile {
+  @Element() el
+
+  @Prop({ reflect: true, mutable: true }) name: string
+  @Prop({ reflect: true, mutable: true }) accepts: string
+  @Prop({ reflect: true, mutable: true }) max: number
+  @Prop({ reflect: true, mutable: true }) url: string
+
+  @Prop({ reflect: true, mutable: true }) value: string = ""
+  @Prop({ reflect: true, mutable: true }) filename: string
+  @Prop({ reflect: true, mutable: true }) src: string
+  @Prop({ reflect: true, mutable: true }) filetype: string
+  @Prop({ reflect: true, mutable: true }) size: number
+  @Prop({ reflect: true, mutable: true }) state: string = "complete"
+  @Prop({ reflect: true, mutable: true }) percent: number = 100
+  @Prop({ reflect: true, mutable: true }) preview: boolean = true
+
+  @Prop() validationMessage: string
+
+  @Event({ eventName: "attachment-file:remove" }) removeEvent: EventEmitter
+  @Event({ eventName: "attachment-file:validation" }) validationEvent: EventEmitter
+
+  private removeClicked = event => {
+    event.stopPropagation()
+    event.preventDefault()
+    this.controller?.cancel()
+    this.removeEvent.emit(this)
+  }
+
+  controller: DirectUploadController
+  _file: File
+  validationError: string = ""
+
+  componentWillLoad() {
+    this.setMissingFiletype()
+  }
+
+  get file() {
+    return this._file
+  }
+
+  set file(file: any) {
+    this.src = URL.createObjectURL(file)
+    this.filename = file.name
+    this.size = file.size
+    this.state = "pending"
+    this.percent = 0
+    this._file = file
+  }
+
+  set signedId(val) {
+    if(this.value !== val) {
+      get(`/rails/active_storage/blobs/info/${val}`).then(blob => {
+        this.src = `/rails/active_storage/blobs/redirect/${val}/${blob.filename}`
+        this.filename = blob.filename
+        this.size = blob.byte_size
+        this.state = "complete"
+        this.percent = 100
+        this.value = val
+      })
+    }
+  }
+
+  @Watch("filename")
+  setMissingFiletype(_value?, _previousValue?) {
+    if(!this.filetype && this.filename) {
+      this.filetype = Extensions.getFileType(this.filename)
+    }
+  }
+
+  @Listen("direct-upload:initialize")
+  @Listen("direct-upload:start")
+  start(_event) {
+    this.state = "pending"
+    this.percent = 0
+  }
+
+  @Listen("direct-upload:progress")
+  progress(event) {
+    const { progress } = event.detail
+    this.percent = progress
+  }
+
+  @Listen("direct-upload:error")
+  error(event) {
+    event.preventDefault()
+    const { error } = event.detail
+    this.state = "error"
+    this.validationError = error
+  }
+
+  @Listen("direct-upload:end")
+  end(_event) {
+    if(this.state !== "error") {
+      this.state = "complete"
+      this.percent = 100
+    }
+  }
+
+  render() {
+    return (
+      <Host>
+        <slot>
+        </slot>
+        <figure>
+          <div class="progress-details">
+            <progress-bar percent={this.percent} class={this.state}>
+              <a class="download-link" href={this.src} download={this.filename} onClick={e => e.stopPropagation()}>
+                {this.filename}
+              </a>
+            </progress-bar>
+            <span class="progress-icon"></span>
+            <a class="remove-media" onClick={this.removeClicked} href="#">
+              <span>Remove media</span>
+            </a>
+          </div>
+          {this.validationError ? <p class="validation-error">{this.validationError}</p> : ''}
+          {this.preview ? <attachment-preview src={this.src} filetype={this.filetype}></attachment-preview> : ''}
+        </figure>
+      </Host>
+    )
+  }
+
+  componentDidLoad() {
+    if(this.state == "pending" && this._file) {
+      if(this.checkValidity()) {
+        this.controller = new DirectUploadController(this.el, this._file)
+        this.controller.dispatch("initialize", { controller: this.controller })
+      } else {
+        this.state = "error"
+      }
+    }
+  }
+
+  checkValidity() {
+    let errors = []
+    errors.push(...new Accepts(this).errors)
+    errors.push(...new Max(this).errors)
+    this.validationError = errors.join(" ")
+    // Notify parent of validation state change
+    this.validationEvent.emit({ valid: errors.length === 0, error: this.validationError })
+    return errors.length === 0
+  }
+}

data/input-attachment/src/components/attachment-file/direct-upload-controller.tsx

@@ -0,0 +1,100 @@
+import { DirectUpload } from "@rails/activestorage"
+import { AttachmentFile } from "./attachment-file"
+
+export default class DirectUploadController {
+  uploadedFile: AttachmentFile
+  file: File
+  directUpload: any
+  recordXHR: XMLHttpRequest
+  uploadXHR: XMLHttpRequest
+  callback = null
+
+  constructor(uploadedFile, file: File) {
+    this.uploadedFile = uploadedFile
+    this.file = file
+    this.directUpload = new DirectUpload(this.file, this.uploadedFile.url, this)
+  }
+
+  cancel() {
+    this.directUpload.url = null
+    this.abortXHR(this.recordXHR)
+    this.abortXHR(this.uploadXHR)
+  }
+
+  abortXHR(xhr) {
+    if(!xhr) return
+    xhr.addEventListener("abort", () => {
+      this.complete("aborted", {})
+    })
+    xhr.abort()
+  }
+
+  start(callback) {
+    this.callback = callback
+    this.dispatch("start")
+    this.directUpload.create((error, attributes) => {
+      this.complete(error, attributes)
+    })
+  }
+
+  complete(error, _attributes) {
+    if (error) {
+      this.dispatchError(error)
+    }
+    this.dispatch("end")
+    this.callback(error)
+  }
+
+  uploadRequestDidProgress(event) {
+    const progress = event.loaded / event.total * 100;
+    if (progress) {
+      this.dispatch("progress", {
+        progress: progress
+      });
+    }
+  }
+  dispatch(name, detail = {}) {
+    return dispatchEvent(this.uploadedFile, `direct-upload:${name}`, {
+      detail: {
+        ...detail,
+        file: this.file,
+        id: this.directUpload.id,
+      }
+    });
+  }
+  dispatchError(error) {
+    this.dispatch("error", {
+      error: error
+    })
+  }
+  directUploadWillCreateBlobWithXHR(xhr) {
+    this.recordXHR = xhr
+    this.dispatch("before-blob-request", {
+      xhr: xhr
+    });
+  }
+  directUploadWillStoreFileWithXHR(xhr) {
+    this.uploadXHR = xhr
+    this.uploadedFile.value = this.recordXHR.response.signed_id
+    this.dispatch("before-storage-request", {
+      xhr: xhr
+    });
+    xhr.upload.addEventListener("progress", (event => this.uploadRequestDidProgress(event)));
+  }
+}
+
+function dispatchEvent(element: any, type, eventInit = {} as any) {
+  const {disabled: disabled} = element;
+  const {bubbles: bubbles, cancelable: cancelable, detail: detail} = eventInit;
+  const event = document.createEvent("Event") as any;
+  event.initEvent(type, bubbles || true, cancelable || true);
+  event.detail = detail || {};
+  try {
+    element.disabled = false;
+    element.dispatchEvent(event);
+  } finally {
+    element.disabled = disabled;
+  }
+  return event;
+}
+

data/input-attachment/src/components/attachment-file/extensions.ts

@@ -0,0 +1,13 @@
+export default {
+  image: ["ase", "art", "bmp", "blp", "cd5", "cit", "cpt", "cr2", "cut", "dds", "dib", "djvu", "egt", "exif", "gif", "gpl", "grf", "icns", "ico", "iff", "jng", "jpeg", "jpg", "jfif", "jp2", "jps", "lbm", "max", "miff", "mng", "msp", "nef", "nitf", "ota", "pbm", "pc1", "pc2", "pc3", "pcf", "pcx", "pdn", "pgm", "PI1", "PI2", "PI3", "pict", "pct", "pnm", "pns", "ppm", "psb", "psd", "pdd", "psp", "px", "pxm", "pxr", "qfx", "raw", "rle", "sct", "sgi", "rgb", "int", "bw", "tga", "tiff", "tif", "vtf", "xbm", "xcf", "xpm", "3dv", "amf", "ai", "awg", "cgm", "cdr", "cmx", "dxf", "e2d", "egt", "eps", "fs", "gbr", "odg", "svg", "stl", "vrml", "x3d", "sxd", "v2d", "vnd", "wmf", "emf", "art", "xar", "png", "webp", "jxr", "hdp", "wdp", "cur", "ecw", "iff", "lbm", "liff", "nrrd", "pam", "pcx", "pgf", "sgi", "rgb", "rgba", "bw", "int", "inta", "sid", "ras", "sun", "tga", "heic", "heif"],
+  video: ["3g2", "3gp", "3gpp", "aaf", "asf", "avchd", "avi", "drc", "flv", "m2v", "m3u8", "m4p", "m4v", "mkv", "mng", "mov", "mp2", "mp4", "mpe", "mpeg", "mpg", "mpv", "mxf", "nsv", "ogg", "ogv", "qt", "rm", "rmvb", "roq", "svi", "vob", "webm", "wmv", "yuv"],
+  pdf: ["pdf"],
+
+  getFileType: function(filename) {
+    const normalized = filename.toString().split(".").at(-1).toLowerCase().trim()
+    if(this.video.includes(normalized)) return "video" 
+    if(this.image.includes(normalized)) return "image" 
+    if(this.pdf.includes(normalized)) return "pdf" 
+    return "unknown"
+  }
+}

data/input-attachment/src/components/attachment-file/max.ts

@@ -0,0 +1,46 @@
+import { AttachmentFile } from './attachment-file'
+
+export default class Max {
+  uploadedFile: AttachmentFile
+
+  constructor(uploadedFile) {
+    this.uploadedFile = uploadedFile
+  }
+
+  get errors() {
+    if(this.#errors) return this.#errors
+    this.#errors = []
+    if(!this.checkValidity()) {
+      this.#errors.push(this.errorMessage)
+    }
+    return this.#errors
+  }
+
+  #errors: Array<string>
+
+  checkValidity() {
+    if(!this.uploadedFile.max) return true
+    return this.uploadedFile.size <= this.uploadedFile.max
+  }
+
+  get errorMessage() {
+    return [
+      `Must be smaller than ${this.formatBytes(this.uploadedFile.max)},`,
+      `and "${this.uploadedFile.filename}" is ${this.formatBytes(this.uploadedFile.size)}.`,
+      `Please attach a smaller file.`,
+    ].join(" ")
+  }
+
+  formatBytes(bytes, decimals = 2) {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i];
+  }
+}
+

data/input-attachment/src/components/attachment-file/readme.md

@@ -0,0 +1,55 @@
+# attachment-file
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute            | Description | Type      | Default      |
+| ------------------- | -------------------- | ----------- | --------- | ------------ |
+| `accepts`           | `accepts`            |             | `string`  | `undefined`  |
+| `filename`          | `filename`           |             | `string`  | `undefined`  |
+| `filetype`          | `filetype`           |             | `string`  | `undefined`  |
+| `max`               | `max`                |             | `number`  | `undefined`  |
+| `name`              | `name`               |             | `string`  | `undefined`  |
+| `percent`           | `percent`            |             | `number`  | `100`        |
+| `preview`           | `preview`            |             | `boolean` | `true`       |
+| `size`              | `size`               |             | `number`  | `undefined`  |
+| `src`               | `src`                |             | `string`  | `undefined`  |
+| `state`             | `state`              |             | `string`  | `"complete"` |
+| `url`               | `url`                |             | `string`  | `undefined`  |
+| `validationMessage` | `validation-message` |             | `string`  | `undefined`  |
+| `value`             | `value`              |             | `string`  | `""`         |
+
+
+## Events
+
+| Event                        | Description | Type               |
+| ---------------------------- | ----------- | ------------------ |
+| `attachment-file:remove`     |             | `CustomEvent<any>` |
+| `attachment-file:validation` |             | `CustomEvent<any>` |
+
+
+## Dependencies
+
+### Used by
+
+ - [input-attachment](../input-attachment)
+
+### Depends on
+
+- [attachment-preview](../attachment-preview)
+
+### Graph
+```mermaid
+graph TD;
+  attachment-file --> attachment-preview
+  input-attachment --> attachment-file
+  style attachment-file fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

data/input-attachment/src/components/attachment-preview/attachment-preview.css

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  font-size: 13px;
+}
+img, video {
+  max-width: 100%;
+  margin-top: 10px;
+}

data/input-attachment/src/components/attachment-preview/attachment-preview.e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('attachment-preview', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<attachment-preview></attachment-preview>');
+
+    const element = await page.find('attachment-preview');
+    expect(element).toHaveClass('hydrated');
+  });
+});

data/input-attachment/src/components/attachment-preview/attachment-preview.spec.tsx

@@ -0,0 +1,19 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { AttachmentPreview } from './attachment-preview';
+
+describe('attachment-preview', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [AttachmentPreview],
+      html: `<attachment-preview></attachment-preview>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <attachment-preview class="other">
+        <mock:shadow-root>
+          This file does not offer a preview
+          <slot></slot>
+        </mock:shadow-root>
+      </attachment-preview>
+    `);
+  });
+});

data/input-attachment/src/components/attachment-preview/attachment-preview.tsx

@@ -0,0 +1,42 @@
+import { Component, Prop, Host, h } from '@stencil/core';
+
+@Component({
+  tag: 'attachment-preview',
+  styleUrl: 'attachment-preview.css',
+  shadow: true,
+})
+export class AttachmentPreview {
+  @Prop({ reflect: true }) src: string
+  @Prop({ reflect: true }) filetype: string
+
+  render() {
+    return (
+      <Host class={this.computeClass()}>
+        {this.isImage() && <img src={this.src} />}
+        {this.isVideo() && <video src={this.src} onClick={toggle} />}
+        {this.isOther() && "This file does not offer a preview"}
+        <slot></slot>
+      </Host>
+    );
+  }
+
+  private computeClass() {
+    if(this.isImage()) return "image"
+    if(this.isVideo()) return "video"
+    return "other"
+  }
+
+  private isImage() {
+    return this.filetype == "image"
+  }
+
+  private isVideo() {
+    return this.filetype == "video"
+  }
+
+  private isOther() {
+    return !this.isImage() && !this.isVideo()
+  }
+}
+
+const toggle = function() { this.paused ? this.play() : this.pause(); return false }

data/input-attachment/src/components/attachment-preview/readme.md

@@ -0,0 +1,31 @@
+# attachment-preview
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description | Type     | Default     |
+| ---------- | ---------- | ----------- | -------- | ----------- |
+| `filetype` | `filetype` |             | `string` | `undefined` |
+| `src`      | `src`      |             | `string` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [attachment-file](../attachment-file)
+
+### Graph
+```mermaid
+graph TD;
+  attachment-file --> attachment-preview
+  style attachment-preview fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*