@histoire/controls 0.11.2 → 0.11.3

package/dist/style-standalone.css

@@ -404,6 +404,10 @@
   height:5rem
 }
 
+.htw-h-48{
+  height:12rem
+}
+
 .htw-h-\[27px\]{
   height:27px
 }
@@ -416,6 +420,10 @@
   height:0.75rem
 }
 
+.htw-min-h-32{
+  min-height:8rem
+}
+
 .htw-min-h-\[26px\]{
   min-height:26px
 }
@@ -448,6 +456,10 @@
   width:0.75rem
 }
 
+.htw-max-w-full{
+  max-width:100%
+}
+
 .htw-flex-1{
   flex:1 1 0%
 }
@@ -542,6 +554,10 @@
   gap:1rem
 }
 
+.htw-overflow-auto{
+  overflow:auto
+}
+
 .htw-overflow-hidden{
   overflow:hidden
 }
@@ -733,6 +749,11 @@
   color:rgb(255 255 255 / var(--tw-text-opacity))
 }
 
+.htw-text-orange-500{
+  --tw-text-opacity:1;
+  color:rgb(249 115 22 / var(--tw-text-opacity))
+}
+
 .htw-text-inherit{
   color:inherit
 }
@@ -806,6 +827,11 @@ body {
   }
 }
 
+.focus-within\:htw-border-primary-500:focus-within{
+  --tw-border-opacity:1;
+  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+}
+
 .hover\:htw-border-primary-500:hover{
   --tw-border-opacity:1;
   border-color:rgb(16 185 129 / var(--tw-border-opacity))
@@ -892,6 +918,11 @@ body {
   color:rgb(0 0 0 / var(--tw-text-opacity))
 }
 
+.htw-dark .dark\:focus-within\:htw-border-primary-500:focus-within{
+  --tw-border-opacity:1;
+  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+}
+
 .htw-dark .dark\:hover\:htw-border-primary-500:hover{
   --tw-border-opacity:1;
   border-color:rgb(16 185 129 / var(--tw-border-opacity))

package/dist/style.css

@@ -1 +1 @@
-.htw-range-input::-webkit-slider-thumb{height:.75rem;width:.75rem;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.htw-dark .htw-range-input::-webkit-slider-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-webkit-slider-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.htw-range-input::-moz-range-thumb{height:.75rem;width:.75rem;-moz-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.htw-dark .htw-range-input::-moz-range-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-moz-range-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.v-popper{line-height:0}.htw-dark .v-popper--theme-dropdown .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{--tw-border-opacity: 1;border-color:rgb(63 63 70 / var(--tw-border-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity))}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transform:none;transition:transform .15s cubic-bezier(0,1,.5,1)}.v-popper__popper:focus-visible{outline:none}.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}
+.htw-range-input::-webkit-slider-thumb{height:.75rem;width:.75rem;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.htw-dark .htw-range-input::-webkit-slider-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-webkit-slider-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.htw-range-input::-moz-range-thumb{height:.75rem;width:.75rem;-moz-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.htw-dark .htw-range-input::-moz-range-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-moz-range-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.v-popper{line-height:0}.htw-dark .v-popper--theme-dropdown .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{--tw-border-opacity: 1;border-color:rgb(63 63 70 / var(--tw-border-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity))}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transform:none;transition:transform .15s cubic-bezier(0,1,.5,1)}.v-popper__popper:focus-visible{outline:none}.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}.__histoire-json-code[data-v-35a6e314] .cm-editor{height:100%;min-width:280px}

package/dist/utils.d.ts

@@ -0,0 +1 @@
+export declare const isDark: import("vue").Ref<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -31,7 +31,14 @@
     "*.vue"
   ],
   "dependencies": {
-    "@histoire/vendors": "^0.11.2"
+    "@codemirror/commands": "^6.1.1",
+    "@codemirror/lang-json": "^6.0.0",
+    "@codemirror/language": "^6.2.1",
+    "@codemirror/lint": "^6.0.0",
+    "@codemirror/state": "^6.1.2",
+    "@codemirror/theme-one-dark": "^6.1.0",
+    "@codemirror/view": "^6.3.0",
+    "@histoire/vendors": "^0.11.3"
   },
   "devDependencies": {
     "@peeky/server": "^0.14.0",

package/src/components/HstWrapper.vue

@@ -5,13 +5,14 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { withDefaults, computed } from 'vue'
+import { withDefaults } from 'vue'
 import { VTooltip as vTooltip } from 'floating-vue'
 
-const props = withDefaults(defineProps<{
+withDefaults(defineProps<{
   title?: string
   tag?: string
 }>(), {
+  title: undefined,
   tag: 'label',
 })
 
@@ -32,8 +33,8 @@ const props = withDefaults(defineProps<{
     >
       {{ title }}
     </span>
-    <span class="htw-grow htw-flex htw-items-center htw-gap-1">
-      <span class="htw-block htw-grow">
+    <span class="htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1">
+      <span class="htw-block htw-grow htw-max-w-full">
         <slot />
       </span>
       <slot name="actions" />

package/src/components/checkbox/__snapshots__/HstCheckbox.test.ts.snap

@@ -9,8 +9,8 @@ exports[`HstCheckbox toggle to checked 1`] = `
   <span class="htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip">
     Label
   </span>
-  <span class="htw-grow htw-flex htw-items-center htw-gap-1">
-    <span class="htw-block htw-grow">
+  <span class="htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1">
+    <span class="htw-block htw-grow htw-max-w-full">
       <div class="htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
         <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-black/25 dark:htw-border-white/25 htw-delay-150">
         </div>
@@ -44,8 +44,8 @@ exports[`HstCheckbox toggle to unchecked 1`] = `
   <span class="htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip">
     Label
   </span>
-  <span class="htw-grow htw-flex htw-items-center htw-gap-1">
-    <span class="htw-block htw-grow">
+  <span class="htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1">
+    <span class="htw-block htw-grow htw-max-w-full">
       <div class="htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
         <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-primary-500 htw-border-8">
         </div>

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

@@ -0,0 +1,41 @@
+<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

@@ -0,0 +1,148 @@
+<script lang="ts">
+export default {
+  name: 'HstJson',
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch, watchEffect } from 'vue'
+import { Icon } from '@iconify/vue'
+import HstWrapper from '../HstWrapper.vue'
+import { VTooltip as vTooltip } from 'floating-vue'
+import { Compartment } from '@codemirror/state'
+import {
+  EditorView,
+  keymap,
+  highlightActiveLineGutter,
+  highlightActiveLine,
+  highlightSpecialChars,
+  ViewUpdate,
+} from '@codemirror/view'
+import { defaultKeymap } from '@codemirror/commands'
+import { json } from '@codemirror/lang-json'
+import {
+  defaultHighlightStyle,
+  syntaxHighlighting,
+  indentOnInput,
+  bracketMatching,
+  foldGutter,
+  foldKeymap,
+} from '@codemirror/language'
+import { lintKeymap } from '@codemirror/lint'
+import { oneDarkTheme, oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
+import { isDark } from '../../utils'
+
+const props = defineProps<{
+  title?: string
+  modelValue: unknown
+}>()
+
+const emits = defineEmits({
+  'update:modelValue': (newValue: unknown) => true,
+})
+
+let editorView: EditorView
+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(() => {
+  editorView = new EditorView({
+    doc: JSON.stringify(props.modelValue, null, 2),
+    extensions,
+    parent: editorElement.value,
+  })
+
+  watchEffect(() => {
+    editorView.dispatch({
+      effects: [
+        themeConfig.reconfigure(themes[isDark.value ? 'dark' : 'light']),
+      ],
+    })
+  })
+})
+
+watch(() => props.modelValue, () => {
+  let sameDocument
+
+  try {
+    sameDocument = (JSON.stringify(JSON.parse(internalValue.value)) === JSON.stringify(props.modelValue))
+  } catch (e) {
+    sameDocument = false
+  }
+
+  if (!sameDocument) {
+    editorView.dispatch({ changes: [{ from: 0, to: editorView.state.doc.length, insert: JSON.stringify(props.modelValue, null, 2) }] })
+  }
+}, { deep: true })
+
+watch(() => internalValue.value, () => {
+  invalidValue.value = false
+  try {
+    emits('update:modelValue', JSON.parse(internalValue.value))
+  } catch (e) {
+    invalidValue.value = true
+  }
+})
+
+</script>
+
+<template>
+  <HstWrapper
+    :title="title"
+    class="htw-cursor-text"
+    :class="$attrs.class"
+    :style="$attrs.style"
+  >
+    <div
+      ref="editorElement"
+      class="__histoire-json-code htw-w-full htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus-within:htw-border-primary-500 dark:focus-within:htw-border-primary-500 htw-rounded-sm htw-box-border htw-overflow-auto htw-resize-y htw-min-h-32 htw-h-48 htw-relative"
+      v-bind="{ ...$attrs, class: null, style: null }"
+    />
+
+    <template #actions>
+      <Icon
+        v-if="invalidValue"
+        v-tooltip="'JSON error'"
+        icon="carbon:warning-alt"
+        class="htw-text-orange-500"
+      />
+
+      <slot name="actions" />
+    </template>
+  </HstWrapper>
+</template>
+
+<style scoped>
+.__histoire-json-code :deep(.cm-editor) {
+  height: 100%;
+  min-width: 280px;
+}
+</style>

package/src/end.d.ts

@@ -0,0 +1,8 @@
+import type { Ref } from '@histoire/vendors/vue'
+
+global {
+  interface Window {
+    __hst_controls_dark: Ref<boolean>[]
+    __hst_controls_dark_ready: () => void
+  }
+}

package/src/index.ts

@@ -12,6 +12,7 @@ import HstTokenListVue from './components/design-tokens/HstTokenList.vue'
 import HstTokenGridVue from './components/design-tokens/HstTokenGrid.vue'
 import HstCopyIconVue from './components/HstCopyIcon.vue'
 import HstRadioVue from './components/radio/HstRadio.vue'
+import HstJsonVue from './components/json/HstJson.vue'
 
 export const HstButton = HstButtonVue
 export const HstButtonGroup = HstButtonGroupVue
@@ -27,6 +28,7 @@ export const HstTokenList = HstTokenListVue
 export const HstTokenGrid = HstTokenGridVue
 export const HstCopyIcon = HstCopyIconVue
 export const HstRadio = HstRadioVue
+export const HstJson = HstJsonVue
 
 export const components = {
   HstButton,
@@ -43,6 +45,7 @@ export const components = {
   HstTokenGrid,
   HstCopyIcon,
   HstRadio,
+  HstJson,
 }
 
 export * from './types'

package/src/utils.ts

@@ -0,0 +1,12 @@
+import { ref } from 'vue'
+
+export const isDark = ref(false)
+
+if (!window.__hst_controls_dark) {
+  window.__hst_controls_dark = []
+}
+
+// There could be multiple instances of the controls lib (in the controls book https://controls.histoire.dev)
+window.__hst_controls_dark.push(isDark)
+
+window.__hst_controls_dark_ready?.()