jouw-stem__design-system 0.1.0

package/src/components/FileUpload/FileUpload.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="file-upload" :class="additionalClasses">
+    <!-- Dropzone -->
+    <div
+      class="file-upload__dropzone"
+      :class="{ 'file-upload__dropzone--state-active': isDragging }"
+      @dragenter.prevent="onDragEnter"
+      @dragover.prevent="onDragOver"
+      @dragleave.prevent="onDragLeave"
+      @drop.prevent="onDrop"
+      @click="triggerFileInput"
+    >
+      <input
+        ref="fileInputRef"
+        type="file"
+        class="file-upload__input"
+        :accept="accept"
+        :multiple="multiple"
+        :disabled="isDisabled"
+        @change="onFileSelect"
+      />
+
+      <div class="file-upload__content">
+        <svg class="file-upload__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="17 8 12 3 7 8" />
+          <line x1="12" y1="3" x2="12" y2="15" />
+        </svg>
+        <p class="file-upload__text-primary">
+          <slot name="header">
+            {{ isDragging ? 'Drop files here' : 'Drag and drop files here' }}
+          </slot>
+        </p>
+        <p class="file-upload__text-secondary">
+          <slot name="subheader">
+            or click to browse
+          </slot>
+        </p>
+      </div>
+    </div>
+
+    <!-- File list -->
+    <div v-if="files.length > 0" class="file-upload__list">
+      <div
+        v-for="(file, index) in files"
+        :key="file.name + index"
+        class="file-upload__item"
+      >
+        <div class="file-upload__file-info">
+          <span class="file-upload__file-name">{{ file.name }}</span>
+          <span class="file-upload__file-size">{{ formatFileSize(file.size) }}</span>
+        </div>
+        <button
+          type="button"
+          class="file-upload__remove"
+          aria-label="Remove file"
+          @click="removeFile(index)"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./FileUpload.scss"></style>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { validateFiles, formatFileSize } from "./fileValidation";
+
+const props = defineProps({
+  /**
+   * Accepted file types (MIME types or extensions)
+   */
+  accept: {
+    type: String,
+    default: null,
+  },
+  /**
+   * Allow multiple file selection
+   */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Maximum file size in bytes
+   */
+  maxFileSize: {
+    type: Number,
+    default: null,
+  },
+  /**
+   * Maximum number of files
+   */
+  maxFiles: {
+    type: Number,
+    default: null,
+  },
+  /**
+   * Disable the upload component
+   */
+  isDisabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  (e: "select", ...args: unknown[]): void;
+  (e: "remove", ...args: unknown[]): void;
+  (e: "error", ...args: unknown[]): void;
+}>();
+const fileInputRef = ref(null);
+const isDragging = ref(false);
+const files = ref([]);
+
+const additionalClasses = computed(() =>
+  [
+    props.isDisabled && "file-upload--state-disabled",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+const triggerFileInput = () => {
+  if (!props.isDisabled) {
+    fileInputRef.value?.click();
+  }
+};
+
+const onDragEnter = () => {
+  if (!props.isDisabled) {
+    isDragging.value = true;
+  }
+};
+
+const onDragOver = () => {
+  if (!props.isDisabled) {
+    isDragging.value = true;
+  }
+};
+
+const onDragLeave = () => {
+  isDragging.value = false;
+};
+
+const onDrop = (event) => {
+  isDragging.value = false;
+  if (props.isDisabled) return;
+
+  const droppedFiles = Array.from(event.dataTransfer.files);
+  processFiles(droppedFiles);
+};
+
+const onFileSelect = (event) => {
+  const selectedFiles = Array.from(event.target.files);
+  processFiles(selectedFiles);
+  event.target.value = "";
+};
+
+const processFiles = (newFiles) => {
+  const { accepted, rejected } = validateFiles(newFiles, {
+    existing: files.value.length,
+    maxFileSize: props.maxFileSize,
+    maxFiles: props.maxFiles,
+  });
+
+  for (const r of rejected) {
+    if (r.type === "size") {
+      emit("error", { type: "size", file: r.file, maxSize: r.limit });
+    } else {
+      emit("error", { type: "limit", file: r.file, maxFiles: r.limit });
+    }
+  }
+
+  if (accepted.length > 0) {
+    if (props.multiple) {
+      files.value = [...files.value, ...accepted];
+    } else {
+      files.value = [accepted[0]];
+    }
+    emit("select", files.value);
+  }
+};
+
+const removeFile = (index) => {
+  const removed = files.value[index];
+  files.value = files.value.filter((_, i) => i !== index);
+  emit("remove", removed);
+};
+
+// Expose methods for parent components
+defineExpose({
+  files,
+  clear: () => { files.value = []; },
+});
+</script>

package/src/components/FileUpload/fileValidation.ts

@@ -0,0 +1,93 @@
+/**
+ * Pure helpers for FileUpload.
+ *
+ * The component validates incoming files against `maxFileSize` and
+ * `maxFiles` and formats sizes for display. Extracting the rules here
+ * keeps the boundary cases (exact size, file at limit, zero bytes)
+ * testable without simulating drag-drop or `<input type="file">`.
+ */
+
+export type FileLike = { name: string; size: number; type?: string }
+
+export type RejectionReason = 'size' | 'limit'
+
+export interface FileRejection {
+  type: RejectionReason
+  file: FileLike
+  /** Echoes the limit that triggered the rejection. */
+  limit: number
+}
+
+export interface ValidationResult {
+  /** Files cleared for use. Order preserved from input. */
+  accepted: FileLike[]
+  /** One rejection per excluded file, in the order they were processed. */
+  rejected: FileRejection[]
+}
+
+export interface ValidationOptions {
+  /** Files already in the list — counted toward `maxFiles`. */
+  existing?: number
+  /** Per-file size cap in bytes; `null` / `undefined` disables the check. */
+  maxFileSize?: number | null
+  /** Total file cap; `null` / `undefined` disables the check. */
+  maxFiles?: number | null
+}
+
+/**
+ * Filter a batch of incoming files against size + count limits.
+ *
+ * Decisions:
+ *   - Size check runs first. A file rejected for size never counts toward
+ *     the file-count quota.
+ *   - The file-count quota is checked *as we go*: once the quota is full
+ *     we stop accepting and emit a `'limit'` rejection for every remaining
+ *     file. This matches the original component behaviour where adding
+ *     the (n+1)th file silently dropped (n+2)..(n+k).
+ *   - `maxFileSize` is inclusive — a file equal to the cap is accepted.
+ *     A file strictly larger than the cap is rejected.
+ *   - `maxFiles` is inclusive — exactly `maxFiles` is the saturation
+ *     point; one more triggers the rejection.
+ */
+export function validateFiles(
+  files: FileLike[],
+  options: ValidationOptions = {}
+): ValidationResult {
+  const { existing = 0, maxFileSize = null, maxFiles = null } = options
+  const accepted: FileLike[] = []
+  const rejected: FileRejection[] = []
+
+  for (const file of files) {
+    if (maxFileSize != null && file.size > maxFileSize) {
+      rejected.push({ type: 'size', file, limit: maxFileSize })
+      continue
+    }
+    if (maxFiles != null && existing + accepted.length >= maxFiles) {
+      rejected.push({ type: 'limit', file, limit: maxFiles })
+      continue
+    }
+    accepted.push(file)
+  }
+
+  return { accepted, rejected }
+}
+
+/**
+ * Format a byte count as a human-readable string with one decimal of
+ * precision. Uses base-1024 units (KB / MB / GB), matching every file
+ * manager users will recognise.
+ *
+ * Decisions:
+ *   - 0 bytes returns "0 B" — `Math.log(0)` is -Infinity, so we bail
+ *     out early.
+ *   - Negative inputs are treated as 0 (defensive — files don't have
+ *     negative sizes, but a wrong call shouldn't print "-Infinity B").
+ */
+export function formatFileSize(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1)
+  const value = bytes / Math.pow(k, i)
+  return `${parseFloat(value.toFixed(1))} ${sizes[i]}`
+}

package/src/components/Galleria/Galleria.matrix.ts

@@ -0,0 +1,13 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.galleria',
+  // Galleria renders the active item + thumbnail strip. value provides
+  // a minimal item set; item slot is not supplied (the matrix would
+  // render the default chrome only).
+  baseQuery: {
+    value: '[{"alt":"Image 1"},{"alt":"Image 2"},{"alt":"Image 3"}]',
+    numVisible: '3'
+  },
+  variants: []
+}

package/src/components/Galleria/Galleria.scss

@@ -0,0 +1,300 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: galleria;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  background: var(--galleria-container-background, $galleria-container-background);
+  border-radius: var(--galleria-container-radius, $galleria-container-radius);
+  border: var(--galleria-container-border-width, $galleria-container-border-width) solid
+          var(--galleria-container-border-color, $galleria-container-border-color);
+  overflow: hidden;
+}
+
+// Thumbnail position variants
+.#{$c}--thumbnails-top {
+  flex-direction: column-reverse;
+}
+
+.#{$c}--thumbnails-left {
+  flex-direction: row-reverse;
+
+  .#{$c}__thumbnails {
+    flex-direction: column;
+  }
+
+  .#{$c}__thumbnail-container {
+    flex-direction: column;
+  }
+}
+
+.#{$c}--thumbnails-right {
+  flex-direction: row;
+
+  .#{$c}__thumbnails {
+    flex-direction: column;
+  }
+
+  .#{$c}__thumbnail-container {
+    flex-direction: column;
+  }
+}
+
+.#{$c}__main {
+  flex: 1;
+  min-height: 0;
+}
+
+.#{$c}__preview {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--galleria-preview-background, $galleria-preview-background);
+  padding: var(--galleria-preview-padding, $galleria-preview-padding);
+  min-height: 300px;
+}
+
+.#{$c}--mode-fullscreen-enabled .#{$c}__preview {
+  cursor: pointer;
+}
+
+.#{$c}__preview-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: var(--galleria-preview-radius, $galleria-preview-radius);
+}
+
+// Navigation buttons in preview
+.#{$c}__nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--galleria-navigator-size, $galleria-navigator-size);
+  height: var(--galleria-navigator-size, $galleria-navigator-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--galleria-navigator-radius, $galleria-navigator-radius);
+  background: var(--galleria-navigator-background-default, $galleria-navigator-background-default);
+  color: var(--galleria-navigator-color, $galleria-navigator-color);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+  z-index: 1;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background: var(--galleria-navigator-background-hover, $galleria-navigator-background-hover);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  svg {
+    width: var(--galleria-navigator-iconSize, $galleria-navigator-iconSize);
+    height: var(--galleria-navigator-iconSize, $galleria-navigator-iconSize);
+  }
+}
+
+.#{$c}__nav--prev {
+  left: 16px;
+}
+
+.#{$c}__nav--next {
+  right: 16px;
+}
+
+// Indicators
+.#{$c}__indicators {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: var(--galleria-indicator-gap, $galleria-indicator-gap);
+}
+
+.#{$c}__indicator {
+  width: var(--galleria-indicator-size, $galleria-indicator-size);
+  height: var(--galleria-indicator-size, $galleria-indicator-size);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--galleria-indicator-background-default, $galleria-indicator-background-default);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background: var(--galleria-indicator-background-active, $galleria-indicator-background-active);
+  }
+}
+
+.#{$c}__indicator--state-active {
+  background: var(--galleria-indicator-background-active, $galleria-indicator-background-active);
+}
+
+// Caption
+.#{$c}__caption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--galleria-caption-padding, $galleria-caption-padding);
+  background: var(--galleria-caption-background, $galleria-caption-background);
+  color: var(--galleria-caption-color, $galleria-caption-color);
+}
+
+.#{$c}__caption-title {
+  margin: 0 0 4px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.#{$c}__caption-description {
+  margin: 0;
+  font-size: var(--galleria-caption-fontSize, $galleria-caption-fontSize);
+  opacity: 0.9;
+}
+
+// Thumbnails
+.#{$c}__thumbnails {
+  padding: var(--galleria-thumbnail-container-padding, $galleria-thumbnail-container-padding);
+  background: var(--galleria-container-background, $galleria-container-background);
+  overflow: auto;
+}
+
+.#{$c}__thumbnail-container {
+  display: flex;
+  gap: var(--galleria-thumbnail-container-gap, $galleria-thumbnail-container-gap);
+}
+
+.#{$c}__thumbnail {
+  flex-shrink: 0;
+  width: var(--galleria-thumbnail-item-width, $galleria-thumbnail-item-width);
+  height: var(--galleria-thumbnail-item-height, $galleria-thumbnail-item-height);
+  padding: 0;
+  border: var(--galleria-thumbnail-item-border-width, $galleria-thumbnail-item-border-width) solid
+          var(--galleria-thumbnail-item-border-color-default, $galleria-thumbnail-item-border-color-default);
+  border-radius: var(--galleria-thumbnail-item-radius, $galleria-thumbnail-item-radius);
+  background: transparent;
+  cursor: pointer;
+  overflow: hidden;
+  opacity: var(--galleria-thumbnail-item-opacity-default, $galleria-thumbnail-item-opacity-default);
+  transition: opacity 150ms ease, border-color 150ms ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    opacity: var(--galleria-thumbnail-item-opacity-hover, $galleria-thumbnail-item-opacity-hover);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.#{$c}__thumbnail--state-active {
+  opacity: var(--galleria-thumbnail-item-opacity-active, $galleria-thumbnail-item-opacity-active);
+  border-color: var(--galleria-thumbnail-item-border-color-active, $galleria-thumbnail-item-border-color-active);
+}
+
+// Fullscreen
+.#{$c}__fullscreen {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--galleria-fullscreen-background, $galleria-fullscreen-background);
+  z-index: var(--galleria-fullscreen-zIndex, $galleria-fullscreen-zIndex);
+  padding: 60px;
+}
+
+.#{$c}__fullscreen-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.#{$c}__fullscreen-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--galleria-fullscreen-closeButton-size, $galleria-fullscreen-closeButton-size);
+  height: var(--galleria-fullscreen-closeButton-size, $galleria-fullscreen-closeButton-size);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--galleria-fullscreen-closeButton-background-default, $galleria-fullscreen-closeButton-background-default);
+  color: var(--galleria-fullscreen-closeButton-color, $galleria-fullscreen-closeButton-color);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background: var(--galleria-fullscreen-closeButton-background-hover, $galleria-fullscreen-closeButton-background-hover);
+  }
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.#{$c}__fullscreen-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--galleria-navigator-size, $galleria-navigator-size);
+  height: var(--galleria-navigator-size, $galleria-navigator-size);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--galleria-navigator-background-default, $galleria-navigator-background-default);
+  color: var(--galleria-navigator-color, $galleria-navigator-color);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background: var(--galleria-navigator-background-hover, $galleria-navigator-background-hover);
+  }
+
+  svg {
+    width: var(--galleria-navigator-iconSize, $galleria-navigator-iconSize);
+    height: var(--galleria-navigator-iconSize, $galleria-navigator-iconSize);
+  }
+}
+
+.#{$c}__fullscreen-nav--prev {
+  left: 16px;
+}
+
+.#{$c}__fullscreen-nav--next {
+  right: 16px;
+}
+
+// Transition animations
+.galleria-fullscreen-enter-active,
+.galleria-fullscreen-leave-active {
+  transition: opacity 200ms ease;
+}
+
+.galleria-fullscreen-enter-from,
+.galleria-fullscreen-leave-to {
+  opacity: 0;
+}