@nimtech/nimpress 2.3.1

package/src/harness/svelte/ComponentHarnessEffects.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import { useHarness } from './context.svelte'
+  const ctx = useHarness()
+  let { children }: { children?: Snippet } = $props()
+</script>
+
+<div class="nimpress-harness-effects" class:nimpress-harness-shadow={ctx.shadow}>
+  {@render children?.()}
+</div>
+
+<style>
+  .nimpress-harness-effects {
+    display: contents;
+  }
+
+  .nimpress-harness-shadow > :global(*) {
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+  }
+
+  :global([data-theme='dark']) .nimpress-harness-shadow > :global(*) {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.09);
+  }
+</style>

package/src/harness/svelte/ComponentHarnessOverlay.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { useHarness } from './context.svelte'
+  const ctx = useHarness()
+</script>
+
+{#if ctx.overlay}
+  {@const Overlay = ctx.overlay}
+  <Overlay />
+{/if}

package/src/harness/svelte/ComponentStory.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { useHarness } from './context.svelte'
+  const ctx = useHarness()
+</script>
+
+{#if ctx.component}
+  {@const Story = ctx.component}
+  <Story {...ctx.props} />
+{/if}

package/src/harness/svelte/DefaultHarness.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import ComponentHarness from './ComponentHarness.svelte'
+  import ComponentHarnessEffects from './ComponentHarnessEffects.svelte'
+  import ComponentHarnessOverlay from './ComponentHarnessOverlay.svelte'
+
+  let { children }: { children?: Snippet } = $props()
+</script>
+
+<ComponentHarness>
+  <ComponentHarnessEffects>
+    {@render children?.()}
+  </ComponentHarnessEffects>
+  <ComponentHarnessOverlay />
+</ComponentHarness>

package/src/harness/svelte/HarnessRoot.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Component } from 'svelte'
+  import { setHarness, type HarnessContext } from './context.svelte'
+  import ComponentStory from './ComponentStory.svelte'
+
+  let {
+    ctx,
+    harness: Harness,
+    storyHarness: StoryHarness
+  }: { ctx: HarnessContext; harness: Component; storyHarness?: Component } = $props()
+  setHarness(ctx)
+</script>
+
+<Harness>
+  {#if StoryHarness}
+    <StoryHarness>
+      <ComponentStory />
+    </StoryHarness>
+  {:else}
+    <ComponentStory />
+  {/if}
+</Harness>

package/src/harness/svelte/context.svelte.ts

@@ -0,0 +1,33 @@
+import { getContext, setContext } from 'svelte'
+import type { Component } from 'svelte'
+
+export interface HarnessContext {
+  component: Component | null
+  props: Record<string, unknown>
+  overlay: Component | null
+  shadow: boolean
+  zoom: number
+}
+
+const HARNESS_KEY = Symbol('nimpressHarness')
+
+export function createHarnessContext(): HarnessContext {
+  const ctx: HarnessContext = $state({
+    component: null,
+    props: {},
+    overlay: null,
+    shadow: false,
+    zoom: 1
+  })
+  return ctx
+}
+
+export function setHarness(ctx: HarnessContext): void {
+  setContext(HARNESS_KEY, ctx)
+}
+
+export function useHarness(): HarnessContext {
+  const ctx = getContext<HarnessContext>(HARNESS_KEY)
+  if (!ctx) throw new Error('nimpress harness primitive used outside a ComponentHarness tree')
+  return ctx
+}

package/src/harness/svelte/index.ts

@@ -0,0 +1,12 @@
+export { default as ComponentHarness } from './ComponentHarness.svelte'
+export { default as ComponentHarnessEffects } from './ComponentHarnessEffects.svelte'
+export { default as ComponentHarnessOverlay } from './ComponentHarnessOverlay.svelte'
+export { default as ComponentStory } from './ComponentStory.svelte'
+export { default as DefaultHarness } from './DefaultHarness.svelte'
+export { default as HarnessRoot } from './HarnessRoot.svelte'
+export {
+  createHarnessContext,
+  setHarness,
+  useHarness,
+  type HarnessContext,
+} from './context.svelte'

package/src/harness/vue/ComponentHarness.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  name: 'ComponentHarness',
+  setup(_, { slots }) {
+    return () => h('div', { class: 'nimpress-harness' }, slots.default?.())
+  },
+})
+</script>
+
+<style>
+.nimpress-harness {
+  display: contents;
+}
+</style>

package/src/harness/vue/ComponentHarnessEffects.vue

@@ -0,0 +1,27 @@
+<script lang="ts">
+import { computed, defineComponent, h } from 'vue'
+import { useHarness } from './context'
+
+export default defineComponent({
+  name: 'ComponentHarnessEffects',
+  setup(_, { slots }) {
+    const ctx = useHarness()
+    const cls = computed(() => ['nimpress-harness-effects', { 'nimpress-harness-shadow': ctx.shadow.value }])
+    return () => h('div', { class: cls.value }, slots.default?.())
+  },
+})
+</script>
+
+<style>
+.nimpress-harness-effects {
+  display: contents;
+}
+
+.nimpress-harness-shadow > * {
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+}
+
+[data-theme='dark'] .nimpress-harness-shadow > * {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.09);
+}
+</style>

package/src/harness/vue/ComponentHarnessOverlay.vue

@@ -0,0 +1,12 @@
+<script lang="ts">
+import { defineComponent, h } from 'vue'
+import { useHarness } from './context'
+
+export default defineComponent({
+  name: 'ComponentHarnessOverlay',
+  setup() {
+    const ctx = useHarness()
+    return () => (ctx.overlay.value ? h(ctx.overlay.value) : null)
+  },
+})
+</script>

package/src/harness/vue/ComponentStory.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import { defineComponent, h } from 'vue'
+import { useHarness } from './context'
+
+export default defineComponent({
+  name: 'ComponentStory',
+  setup() {
+    const ctx = useHarness()
+    return () => {
+      const target = ctx.component.value
+      if (!target) return null
+      return h(target, ctx.props.value, ctx.slots.value)
+    }
+  },
+})
+</script>

package/src/harness/vue/DefaultHarness.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import ComponentHarness from './ComponentHarness.vue'
+import ComponentHarnessEffects from './ComponentHarnessEffects.vue'
+import ComponentHarnessOverlay from './ComponentHarnessOverlay.vue'
+</script>
+
+<template>
+  <ComponentHarness>
+    <ComponentHarnessEffects>
+      <slot />
+    </ComponentHarnessEffects>
+    <ComponentHarnessOverlay />
+  </ComponentHarness>
+</template>

package/src/harness/vue/context.ts

@@ -0,0 +1,37 @@
+import {
+  inject,
+  ref,
+  shallowRef,
+  type Component,
+  type InjectionKey,
+  type Ref,
+  type ShallowRef,
+} from 'vue'
+
+export interface HarnessContext {
+  component: ShallowRef<Component | null>
+  props: ShallowRef<Record<string, unknown>>
+  slots: ShallowRef<Record<string, () => unknown>>
+  overlay: ShallowRef<Component | null>
+  shadow: Ref<boolean>
+  zoom: Ref<number>
+}
+
+export const HARNESS_KEY: InjectionKey<HarnessContext> = Symbol('nimpressHarness')
+
+export function createHarnessContext(): HarnessContext {
+  return {
+    component: shallowRef(null),
+    props: shallowRef({}),
+    slots: shallowRef({}),
+    overlay: shallowRef(null),
+    shadow: ref(false),
+    zoom: ref(1),
+  }
+}
+
+export function useHarness(): HarnessContext {
+  const ctx = inject(HARNESS_KEY, null)
+  if (!ctx) throw new Error('nimpress harness primitive used outside a ComponentHarness tree')
+  return ctx
+}

package/src/harness/vue/index.ts

@@ -0,0 +1,11 @@
+export { default as ComponentHarness } from './ComponentHarness.vue'
+export { default as ComponentHarnessEffects } from './ComponentHarnessEffects.vue'
+export { default as ComponentHarnessOverlay } from './ComponentHarnessOverlay.vue'
+export { default as ComponentStory } from './ComponentStory.vue'
+export { default as DefaultHarness } from './DefaultHarness.vue'
+export {
+  HARNESS_KEY,
+  createHarnessContext,
+  useHarness,
+  type HarnessContext,
+} from './context'

package/src/mock/index.ts

@@ -0,0 +1,88 @@
+const swCharacters = ['Luke Skywalker', 'Leia Organa', 'Han Solo', 'Obi-Wan Kenobi', 'Ahsoka Tano', 'Lando Calrissian', 'Din Djarin', 'Padmé Amidala']
+const swFirst = ['Luke', 'Leia', 'Han', 'Ahsoka', 'Din', 'Padmé', 'Lando', 'Obi-Wan']
+const swFamily = ['Skywalker', 'Organa', 'Solo', 'Kenobi', 'Tano', 'Calrissian', 'Amidala', 'Djarin']
+const swPlaces = ['Tatooine', 'Coruscant', 'Endor', 'Hoth', 'Naboo', 'Dagobah', 'Mos Eisley', 'Bespin']
+const swThings = ['Millennium Falcon', 'X-Wing', 'Razor Crest', 'Lightsaber', 'Holocron', 'Beskar Ingot', 'Astromech Droid', 'Sarlacc Pit']
+const swSentences = [
+  'Bantha fodder drifts across the dune sea beyond Mos Eisley.',
+  'A hyperdrive hums softly as the freighter clears the asteroid field.',
+  'Womp rats scatter when the landspeeder skims Beggar’s Canyon.',
+  'The council convened on Coruscant to debate the blockade of Naboo.',
+  'Moisture vaporators line the ridge above the homestead on Tatooine.',
+  'A protocol droid recites etiquette while the astromech beeps in protest.',
+  'Snow swirls over the shield generator on the plains of Hoth.',
+  'The cantina band strikes up as smugglers haggle over spice.'
+]
+const swWords = ['bantha', 'kyber', 'hyperdrive', 'womp-rat', 'sabacc', 'holocron', 'beskar', 'porg']
+const swEmails = ['leia.organa@rebellion.org', 'luke.skywalker@jedi.temple', 'han.solo@falcon.crew', 'ahsoka.tano@fulcrum.net']
+const swColors = ['#ffe81f', '#2e67f8', '#e5484d', '#30a46c', '#8a63d2']
+
+function hintHash(text: string): number {
+  let h = 0
+  for (let i = 0; i < text.length; i++) h = (h * 31 + text.charCodeAt(i)) >>> 0
+  return h
+}
+function pick<T>(list: T[], seed = 0): T {
+  return list[(hintHash(String(seed)) + seed) % list.length] as T
+}
+
+export interface MockFnValue {
+  __nimpressFn: string
+}
+
+export function isFnValue(value: unknown): value is MockFnValue {
+  return !!value && typeof value === 'object' && typeof (value as MockFnValue).__nimpressFn === 'string'
+}
+
+export function fnSource(name: string): string {
+  return `(...args) => {
+  console.log(${JSON.stringify(name || 'handler')}, ...args)
+}`
+}
+
+export const mockFullName = (seed = 0): string => pick(swCharacters, seed)
+export const mockFirstName = (seed = 0): string => pick(swFirst, seed)
+export const mockFamilyName = (seed = 0): string => pick(swFamily, seed)
+export const mockUsername = (seed = 0): string => `${pick(swFirst, seed).toLowerCase()}_${pick(swWords, seed + 1)}`
+export const mockEmail = (seed = 0): string => pick(swEmails, seed)
+export const mockPassword = (seed = 0): string => `${pick(swWords, seed)}-${pick(swThings, seed + 1).replace(/\s+/g, '')}`
+export const mockWord = (seed = 0): string => pick(swWords, seed)
+export const mockTitle = (seed = 0): string => pick(swThings, seed)
+export const mockSentence = (seed = 0): string => pick(swSentences, seed)
+export const mockParagraph = (seed = 0): string => `${pick(swSentences, seed)} ${pick(swSentences, seed + 1)} ${pick(swSentences, seed + 2)}`
+export const mockPlace = (seed = 0): string => pick(swPlaces, seed)
+export const mockUrl = (seed = 0): string => `https://holonet.example/${pick(swWords, seed)}`
+export const mockImageUrl = (seed = 0): string => `https://holonet.example/${pick(swWords, seed)}.png`
+export const mockColor = (seed = 0): string => pick(swColors, seed)
+export const mockIcon = (): string => 'pi pi-star'
+export const mockDate = (): string => '1977-05-25'
+export const mockTime = (): string => '09:41'
+export const mockPhone = (): string => '+47 555 01138'
+export const mockId = (seed = 0): string => `${pick(swWords, seed)}-1138`
+export const mockSlug = (seed = 0): string => pick(swWords, seed)
+export const mockObject = (seed = 0): Record<string, unknown> => ({
+  [pick(swWords, seed)]: pick(swSentences, seed),
+  [pick(swWords, seed + 3)]: pick(swSentences, seed + 3)
+})
+export const mockArray = (seed = 0): unknown[] => [pick(swWords, seed), pick(swWords, seed + 3)]
+
+export const mockBoolean = (): boolean => true
+export const mockInt = (): number => 42
+export const mockIndex = (): number => 0
+export const mockFloat = (): number => 1.618
+export const mockCount = (): number => 7
+export const mockPercent = (): number => 66
+export const mockWidth = (): number => 320
+export const mockHeight = (): number => 240
+export const mockPrice = (): number => 199
+export const mockYear = (): number => 1977
+export const mockAge = (): number => 29
+export const mockOption = (options: string[] = [], seed = 0, exclude: unknown[] = []): string | undefined => {
+  const pool = options.filter((option) => !exclude.includes(option))
+  return pool.length ? pool[(hintHash(String(seed)) + seed) % pool.length] : undefined
+}
+
+export const mockFunction = (name = 'handler'): MockFnValue => ({
+  __nimpressFn: fnSource(name)
+})
+export const mockEvent = (name = 'event'): MockFnValue => mockFunction(name)

package/src/styles/app.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@source '../../dist';
+@import '@nimtech/nimpress/style.css';