@poveste/controls 0.6.0 → 0.7.0

package/src/components/design-tokens/HstTokenGrid.story.vue

@@ -1,36 +0,0 @@
-<script lang="ts" setup>
-import HstTokenGrid from './HstTokenGrid.vue'
-
-const tokens = {
-  'sm': 'filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))',
-  'DEFAULT': 'filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06))',
-  'md': 'filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))',
-  'lg': 'filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))',
-  'xl': 'filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))',
-  '2xl': 'filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15))',
-  'none': 'filter: drop-shadow(0 0 #0000)',
-}
-</script>
-
-<template>
-  <Story
-    title="HstTokenGrid"
-    group="design-system"
-    responsive-disabled
-  >
-    <Variant title="default">
-      <HstTokenGrid
-        :tokens="tokens"
-        :get-name="key => key === 'DEFAULT' ? 'drop-shadow' : `drop-shadow-${key}`"
-        :col-size="160"
-      >
-        <template #default="{ token }">
-          <div
-            class="w-32 h-32 bg-white dark:bg-black rounded mb-2"
-            :style="token.value"
-          />
-        </template>
-      </HstTokenGrid>
-    </Variant>
-  </Story>
-</template>

package/src/components/design-tokens/HstTokenGrid.vue

@@ -1,88 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'HstTokenGrid',
-}
-</script>
-
-<script lang="ts" setup>
-import { VTooltip as vTooltip } from 'floating-vue'
-import { computed, ref } from 'vue'
-import HstCopyIcon from '../HstCopyIcon.vue'
-
-const props = withDefaults(defineProps<{
-  tokens: Record<string, string | number | any[] | Record<string, any>>
-  colSize?: number
-  getName?: (key: string, value: string | number | any[] | Record<string, any>) => string
-}>(), {
-  colSize: 180,
-  getName: null,
-})
-
-const processedTokens = computed(() => {
-  const list = props.tokens
-  const getName = props.getName
-  return Object.entries(list).map(([key, value]) => {
-    const name = getName ? getName(key, value) : key
-    return {
-      key,
-      name,
-      value: typeof value === 'number' ? value.toString() : value,
-    }
-  })
-})
-
-const colSizePx = computed(() => `${props.colSize}px`)
-
-const hover = ref<string>(null)
-</script>
-
-<template>
-  <div
-    class="poveste-token-grid bind-col-size grid gap-4 m-4"
-    :style="{
-      '--poveste-col-size': colSizePx,
-    }"
-  >
-    <div
-      v-for="token of processedTokens"
-      :key="token.key"
-      class="flex flex-col gap-2"
-      @mouseenter="hover = token.key"
-      @mouseleave="hover = null"
-    >
-      <slot
-        :token="token"
-      />
-      <div>
-        <div class="flex gap-1">
-          <pre
-            v-tooltip="token.name.length > colSize / 8 ? token.name : ''"
-            class="my-0 truncate shrink"
-          >{{ token.name }}</pre>
-          <HstCopyIcon
-            v-if="hover === token.key"
-            :content="token.name"
-            class="flex-none"
-          />
-        </div>
-        <div class="flex gap-1">
-          <pre
-            v-tooltip="token.value.length > colSize / 8 ? token.value : ''"
-            class="my-0 opacity-50 truncate shrink"
-          >{{ token.value }}</pre>
-          <HstCopyIcon
-            v-if="hover === token.key"
-            :content="typeof token.value === 'string' ? token.value : JSON.stringify(token.value)"
-            class="flex-none"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style>
-.bind-col-size {
-  grid-template-columns: repeat(auto-fill, minmax(var(--poveste-col-size), 1fr));
-}
-</style>

package/src/components/design-tokens/HstTokenList.story.vue

@@ -1,81 +0,0 @@
-<script lang="ts" setup>
-import type { CSSProperties } from 'vue'
-import HstTokenList from './HstTokenList.vue'
-
-const tokens = {
-  '0': 0,
-  '1': '0.25rem',
-  '2': '0.5rem',
-  '3': '0.75rem',
-  '4': '1rem',
-  '5': '1.25rem',
-  '6': '1.5rem',
-  '8': '2rem',
-  '10': '2.5rem',
-  '12': '3rem',
-  '16': '4rem',
-  '20': '5rem',
-  '24': '6rem',
-  '32': '8rem',
-  '40': '10rem',
-  '48': '12rem',
-  '56': '14rem',
-  '64': '16rem',
-  'auto': 'auto',
-  'px': '1px',
-  'screen': '100vw',
-  '1/2': '50%',
-  '1/3': '33.333333%',
-  '2/3': '66.666667%',
-  '1/4': '25%',
-  '2/4': '50%',
-  '3/4': '75%',
-  '1/5': '20%',
-  '2/5': '40%',
-  '3/5': '60%',
-  '4/5': '80%',
-  '1/6': '16.666667%',
-  '2/6': '33.333333%',
-  '3/6': '50%',
-  '4/6': '66.666667%',
-  '5/6': '83.333333%',
-  '1/12': '8.333333%',
-  '2/12': '16.666667%',
-  '3/12': '25%',
-  '4/12': '33.333333%',
-  '5/12': '41.666667%',
-  '6/12': '50%',
-  '7/12': '58.333333%',
-  '8/12': '66.666667%',
-  '9/12': '75%',
-  '10/12': '83.333333%',
-  '11/12': '91.666667%',
-  'full': '100%',
-}
-</script>
-
-<template>
-  <Story
-    title="HstTokenList"
-    group="design-system"
-    responsive-disabled
-  >
-    <Variant title="default">
-      <HstTokenList
-        :tokens="tokens"
-        :get-name="key => `w-${key}`"
-      >
-        <template #default="{ token }">
-          <div class="bg-gray-500/10">
-            <div
-              class="h-20 bg-gray-500/50"
-              :style="{
-                width: token.value as string,
-              } as CSSProperties"
-            />
-          </div>
-        </template>
-      </HstTokenList>
-    </Variant>
-  </Story>
-</template>

package/src/components/design-tokens/HstTokenList.vue

@@ -1,62 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'HstTokenList',
-}
-</script>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import HstCopyIcon from '../HstCopyIcon.vue'
-
-const props = defineProps<{
-  tokens: Record<string, string | number | any[] | Record<string, any>>
-  getName?: (key: string, value: string | number | any[] | Record<string, any>) => string
-}>()
-
-const processedTokens = computed(() => {
-  const list = props.tokens
-  const getName = props.getName
-  return Object.entries(list).map(([key, value]) => {
-    const name = getName ? getName(key, value) : key
-    return {
-      key,
-      name,
-      value: typeof value === 'number' ? value.toString() : value,
-    }
-  })
-})
-
-const hover = ref<string>(null)
-</script>
-
-<template>
-  <div
-    v-for="token of processedTokens"
-    :key="token.key"
-    class="poveste-token-list flex flex-col gap-2 my-8"
-    @mouseenter="hover = token.key"
-    @mouseleave="hover = null"
-  >
-    <slot
-      :token="token"
-    />
-    <div class="mx-4">
-      <div class="flex gap-1">
-        <pre class="my-0 truncate shrink">{{ token.name }}</pre>
-        <HstCopyIcon
-          v-if="hover === token.key"
-          :content="token.name"
-          class="flex-none"
-        />
-      </div>
-      <div class="flex gap-1">
-        <pre class="my-0 opacity-50 truncate shrink">{{ token.value }}</pre>
-        <HstCopyIcon
-          v-if="hover === token.key"
-          :content="typeof token.value === 'string' ? token.value : JSON.stringify(token.value)"
-          class="flex-none"
-        />
-      </div>
-    </div>
-  </div>
-</template>

package/src/components/json/HstJson.story.vue

@@ -1,41 +0,0 @@
-<script lang="ts" setup>
-import HstJson from './HstJson.vue'
-
-function initState() {
-  return {
-    film: {
-      year: 2017,
-      title: 'Blade Runner 2049',
-      actors: ['Ryan Gosling', 'Harrison Ford', 'Ana de Armas', 'Sylvia Hoeks'],
-    },
-  }
-}
-</script>
-
-<template>
-  <Story
-    title="HstJson"
-    group="controls"
-    :layout="{ type: 'single', iframe: false }"
-  >
-    <Variant
-      title="default"
-      :init-state="initState"
-    >
-      <template #default="{ state }">
-        <HstJson
-          v-model="state.film"
-          title="Textarea"
-        />
-        <pre>{{ state.film }}</pre>
-      </template>
-
-      <template #controls="{ state }">
-        <HstJson
-          v-model="state.film"
-          title="Text"
-        />
-      </template>
-    </Variant>
-  </Story>
-</template>

package/src/components/json/HstJson.vue

@@ -1,167 +0,0 @@
-<script lang="ts">
-export default {
-  name: 'HstJson',
-  inheritAttrs: false,
-}
-</script>
-
-<script lang="ts" setup>
-import type {
-  ViewUpdate,
-} from '@codemirror/view'
-import { defaultKeymap } from '@codemirror/commands'
-import { json } from '@codemirror/lang-json'
-import {
-  bracketMatching,
-  defaultHighlightStyle,
-  foldGutter,
-  foldKeymap,
-  indentOnInput,
-  syntaxHighlighting,
-} from '@codemirror/language'
-import { lintKeymap } from '@codemirror/lint'
-import { Compartment } from '@codemirror/state'
-import { oneDarkHighlightStyle, oneDarkTheme } from '@codemirror/theme-one-dark'
-import {
-  EditorView,
-  highlightActiveLine,
-  highlightActiveLineGutter,
-  highlightSpecialChars,
-  keymap,
-} from '@codemirror/view'
-import { Icon } from '@iconify/vue'
-import { VTooltip as vTooltip } from 'floating-vue'
-import { onMounted, ref, watch, watchEffect } from 'vue'
-import { isDark } from '../../utils'
-import HstWrapper from '../HstWrapper.vue'
-import { stringifyState } from './serialize.js'
-
-const props = defineProps<{
-  title?: string
-  modelValue: unknown
-}>()
-
-const emit = defineEmits({
-  'update:modelValue': (newValue: unknown) => true,
-})
-
-let editorView: EditorView
-// The document this control last rendered from `modelValue`. A change producing
-// exactly this is our own render, not an edit, and must not be written back:
-// `stringifyState` substitutes markers for what JSON cannot carry, so echoing
-// our own document replaces a cycle in the story's state with the string
-// `[Circular]`, and a function with `[Function]`.
-let renderedDoc: string | undefined
-const internalValue = ref('')
-const invalidValue = ref(false)
-const editorElement = ref<HTMLInputElement>()
-
-const themes = {
-  light: [EditorView.baseTheme({}), syntaxHighlighting(defaultHighlightStyle)],
-  dark: [oneDarkTheme, syntaxHighlighting(oneDarkHighlightStyle)],
-}
-
-const themeConfig = new Compartment()
-
-const extensions = [
-  highlightActiveLineGutter(),
-  highlightActiveLine(),
-  highlightSpecialChars(),
-  json(),
-  bracketMatching(),
-  indentOnInput(),
-  foldGutter(),
-  keymap.of([
-    ...defaultKeymap,
-    ...foldKeymap,
-    ...lintKeymap,
-  ]),
-  EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
-    internalValue.value = viewUpdate.view.state.doc.toString()
-  }),
-  themeConfig.of(themes.light),
-]
-
-onMounted(() => {
-  renderedDoc = stringifyState(props.modelValue, 2)
-
-  editorView = new EditorView({
-    doc: renderedDoc,
-    extensions,
-    parent: editorElement.value,
-  })
-
-  watchEffect(() => {
-    editorView.dispatch({
-      effects: [
-        themeConfig.reconfigure(themes[isDark.value ? 'dark' : 'light']),
-      ],
-    })
-  })
-})
-
-watch(() => props.modelValue, () => {
-  let sameDocument
-
-  try {
-    sameDocument = (stringifyState(JSON.parse(internalValue.value)) === stringifyState(props.modelValue))
-  }
-  catch (e) {
-    sameDocument = false
-  }
-
-  if (!sameDocument) {
-    renderedDoc = stringifyState(props.modelValue, 2)
-    editorView.dispatch({ changes: [{ from: 0, to: editorView.state.doc.length, insert: renderedDoc }] })
-  }
-}, { deep: true })
-
-watch(() => internalValue.value, () => {
-  // Our own render coming back round. The model already holds this, and parsing
-  // it would hand back the markers instead of the values they stand for.
-  if (internalValue.value === renderedDoc) {
-    return
-  }
-
-  invalidValue.value = false
-  try {
-    emit('update:modelValue', JSON.parse(internalValue.value))
-  }
-  catch (e) {
-    invalidValue.value = true
-  }
-})
-</script>
-
-<template>
-  <HstWrapper
-    :title="title"
-    class="poveste-json cursor-text"
-    :class="$attrs.class"
-    :style="$attrs.style"
-  >
-    <div
-      ref="editorElement"
-      class="__poveste-json-code w-full border border-solid border-black/25 dark:border-white/25 focus-within:border-primary-500 dark:focus-within:border-primary-500 rounded-sm box-border overflow-auto resize-y min-h-32 h-48 relative"
-      v-bind="{ ...$attrs, class: null, style: null }"
-    />
-
-    <template #actions>
-      <Icon
-        v-if="invalidValue"
-        v-tooltip="'JSON error'"
-        icon="carbon:warning-alt"
-        class="text-orange-500"
-      />
-
-      <slot name="actions" />
-    </template>
-  </HstWrapper>
-</template>
-
-<style scoped>
-.__poveste-json-code :deep(.cm-editor) {
-  height: 100%;
-  min-width: 280px;
-}
-</style>

package/src/components/json/serialize.spec.ts

@@ -1,85 +0,0 @@
-import { EditorView } from '@codemirror/view'
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import { nextTick } from 'vue'
-import HstJson from './HstJson.vue'
-import { stringifyState } from './serialize.js'
-
-describe('stringifyState', () => {
-  it('matches JSON.stringify on values JSON can express', () => {
-    const value = { a: 1, b: 'two', c: [1, 2], d: { e: null }, f: true }
-    expect(stringifyState(value)).toBe(JSON.stringify(value))
-    expect(stringifyState(value, 2)).toBe(JSON.stringify(value, null, 2))
-  })
-
-  it('names a cycle instead of throwing', () => {
-    // The ComplexParameter story in the vue3 example holds exactly this, and
-    // once the state sync started delivering the story's own scope it reached
-    // the editor. `JSON.stringify` throws here, from a lifecycle hook, taking
-    // the rest of the flush — the panel and the toolbar — down with it.
-    const parent: any = { name: 'hello' }
-    const child: any = { parent }
-    parent.child = child
-
-    expect(JSON.parse(stringifyState(parent))).toEqual({
-      name: 'hello',
-      child: { parent: '[Circular]' },
-    })
-  })
-
-  it('names a function, which JSON.stringify drops silently', () => {
-    expect(JSON.parse(stringifyState({ action: () => {} }))).toEqual({ action: '[Function]' })
-  })
-
-  it('does not mistake a shared reference for a cycle', () => {
-    // The guard tracks ancestors, not everything seen. The same object twice as
-    // a sibling serialises fine and must not be blanked out.
-    const shared = { a: 1 }
-    expect(JSON.parse(stringifyState({ x: shared, y: shared }))).toEqual({ x: { a: 1 }, y: { a: 1 } })
-  })
-
-  it('names a node rather than walking it', () => {
-    const el = document.createElement('div')
-    expect(JSON.parse(stringifyState({ el }))).toEqual({ el: '[Node]' })
-  })
-
-  it('carries a bigint across as its digits', () => {
-    expect(JSON.parse(stringifyState({ n: 10n }))).toEqual({ n: '10' })
-  })
-})
-
-describe('hstJson round-trip', () => {
-  it('does not write its own markers back into the model', async () => {
-    // The markers stand for what JSON cannot carry. Parsing the rendered
-    // document and emitting it replaces the thing itself with its label — a
-    // cycle in the story's state becomes the string `[Circular]` — and it used
-    // to happen on mount, with nobody touching the editor.
-    const parent: any = { name: 'hello' }
-    parent.child = { parent }
-
-    const wrapper = mount(HstJson, { props: { modelValue: parent, title: 'Recursive' } })
-    await nextTick()
-
-    await wrapper.setProps({ modelValue: { ...parent, name: 'changed' } })
-    await nextTick()
-    await new Promise(resolve => setTimeout(resolve, 50))
-
-    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
-  })
-
-  it('still reports a document the reader changed', async () => {
-    // The guard is keyed on the exact text this control last rendered, so it
-    // must not swallow anything else. Without this, suppressing the echo would
-    // quietly turn the editor read-only and the test above would still pass.
-    const wrapper = mount(HstJson, { props: { modelValue: { a: 1 }, title: 'Plain' } })
-    await nextTick()
-
-    const view = EditorView.findFromDOM(wrapper.find('.cm-content').element as HTMLElement)!
-    expect(view).toBeTruthy()
-
-    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: '{ "a": 2 }' } })
-    await nextTick()
-
-    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([{ a: 2 }])
-  })
-})

package/src/components/json/serialize.ts

@@ -1,54 +0,0 @@
-/**
- * `JSON.stringify` for values that were never promised to be JSON.
- *
- * State reaches this control straight out of a story's own scope, so it holds
- * whatever a `<script setup>` holds: a function, a DOM node, an object that
- * refers back to itself. `JSON.stringify` throws on the cycle, and it throws
- * from inside a lifecycle hook — which takes the rest of that flush with it, so
- * the panel and the toolbar beside it never mount. A marker in the editor is
- * the smaller loss, and it is what the story events pane already does.
- *
- * Nodes and windows are named rather than walked. Both are cyclic, so the guard
- * below would terminate on them, but only after walking a few thousand
- * properties of `window` on every keystroke.
- */
-export function stringifyState(value: unknown, space?: number) {
-  // Ancestors, not everything seen: the same object appearing twice as a
-  // sibling is a shared reference, not a cycle, and is perfectly serialisable.
-  // The replacer's `this` is the holder, which is what lets the stack unwind.
-  const ancestors: any[] = []
-
-  return JSON.stringify(value, function (this: any, _key, current) {
-    if (typeof current === 'function') {
-      return '[Function]'
-    }
-
-    if (typeof current === 'bigint') {
-      return current.toString()
-    }
-
-    if (current === null || typeof current !== 'object') {
-      return current
-    }
-
-    if (typeof Node !== 'undefined' && current instanceof Node) {
-      return '[Node]'
-    }
-
-    if (typeof Window !== 'undefined' && current instanceof Window) {
-      return '[Window]'
-    }
-
-    while (ancestors.length > 0 && ancestors[ancestors.length - 1] !== this) {
-      ancestors.pop()
-    }
-
-    if (ancestors.includes(current)) {
-      return '[Circular]'
-    }
-
-    ancestors.push(current)
-
-    return current
-  }, space)
-}

package/src/components/number/HstNumber.story.vue

@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-import HstNumber from './HstNumber.vue'
-
-function initState() {
-  return {
-    count: 20,
-    step: 1,
-  }
-}
-</script>
-
-<template>
-  <Story
-    title="HstNumber"
-    group="controls"
-  >
-    <Variant
-      title="default"
-      :init-state="initState"
-    >
-      <template #default="{ state }">
-        <HstNumber
-          v-model="state.count"
-          :step="state.step"
-          title="Count"
-        />
-      </template>
-
-      <template #controls="{ state }">
-        <HstNumber
-          v-model="state.count"
-          title="Count"
-        />
-
-        <HstNumber
-          v-model="state.step"
-          title="Step"
-        />
-      </template>
-    </Variant>
-  </Story>
-</template>