@poveste/controls 0.1.0

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

@@ -0,0 +1,101 @@
+<script lang="ts">
+export default {
+  name: 'HstColorShades',
+}
+</script>
+
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
+import { VTooltip as vTooltip } from 'floating-vue'
+import { computed, ref } from 'vue'
+import HstCopyIcon from '../HstCopyIcon.vue'
+
+const props = defineProps<{
+  shades: Record<string, any>
+  getName?: (key: string, color: string) => string
+  search?: string
+}>()
+
+function flattenShades(shades: Record<string, any>, path = ''): Record<string, string> {
+  return Object.entries(shades).reduce((acc, [key, color]) => {
+    const nextPath = path ? key === 'DEFAULT' ? path : `${path}-${key}` : key
+    const obj = typeof color === 'object' ? flattenShades(color, nextPath) : { [nextPath]: color }
+    return { ...acc, ...obj }
+  }, {})
+}
+
+const shadesWithName = computed(() => {
+  const shades = props.shades
+  const getName = props.getName
+  const flatShades = flattenShades(shades)
+  return Object.entries(flatShades).map(([key, color]) => {
+    const name = getName ? getName(key, color) : key
+    return {
+      key,
+      color,
+      name,
+    }
+  })
+})
+
+const displayedShades = computed(() => {
+  let list = shadesWithName.value
+  if (props.search) {
+    const reg = new RegExp(props.search, 'i')
+    list = list.filter(({ name }) => reg.test(name))
+  }
+  return list
+})
+
+const hover = ref<string>(null)
+</script>
+
+<template>
+  <div
+    v-if="displayedShades.length"
+    class="histoire-color-shades htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
+  >
+    <div
+      v-for="shade of displayedShades"
+      :key="shade.key"
+      class="htw-flex htw-flex-col htw-gap-2"
+      @mouseenter="hover = shade.key"
+      @mouseleave="hover = null"
+    >
+      <slot
+        :color="shade.color"
+      >
+        <div
+          class="htw-rounded-full htw-w-16 htw-h-16"
+          :style="{
+            backgroundColor: shade.color,
+          } as CSSProperties"
+        />
+      </slot>
+      <div>
+        <div class="htw-flex htw-gap-1">
+          <pre
+            v-tooltip="shade.name.length > 23 ? shade.name : ''"
+            class="htw-my-0 htw-truncate htw-shrink"
+          >{{ shade.name }}</pre>
+          <HstCopyIcon
+            v-if="hover === shade.key"
+            :content="shade.name"
+            class="htw-flex-none"
+          />
+        </div>
+        <div class="htw-flex htw-gap-1">
+          <pre
+            v-tooltip="shade.color.length > 23 ? shade.color : ''"
+            class="htw-my-0 htw-opacity-50 htw-truncate htw-shrink"
+          >{{ shade.color }}</pre>
+          <HstCopyIcon
+            v-if="hover === shade.key"
+            :content="shade.color"
+            class="htw-flex-none"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,36 @@
+<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="htw-w-32 htw-h-32 htw-bg-white dark:htw-bg-black htw-rounded htw-mb-2"
+            :style="token.value"
+          />
+        </template>
+      </HstTokenGrid>
+    </Variant>
+  </Story>
+</template>

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

@@ -0,0 +1,88 @@
+<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="histoire-token-grid htw-bind-col-size htw-grid htw-gap-4 htw-m-4"
+    :style="{
+      '--histoire-col-size': colSizePx,
+    }"
+  >
+    <div
+      v-for="token of processedTokens"
+      :key="token.key"
+      class="htw-flex htw-flex-col htw-gap-2"
+      @mouseenter="hover = token.key"
+      @mouseleave="hover = null"
+    >
+      <slot
+        :token="token"
+      />
+      <div>
+        <div class="htw-flex htw-gap-1">
+          <pre
+            v-tooltip="token.name.length > colSize / 8 ? token.name : ''"
+            class="htw-my-0 htw-truncate htw-shrink"
+          >{{ token.name }}</pre>
+          <HstCopyIcon
+            v-if="hover === token.key"
+            :content="token.name"
+            class="htw-flex-none"
+          />
+        </div>
+        <div class="htw-flex htw-gap-1">
+          <pre
+            v-tooltip="token.value.length > colSize / 8 ? token.value : ''"
+            class="htw-my-0 htw-opacity-50 htw-truncate htw-shrink"
+          >{{ token.value }}</pre>
+          <HstCopyIcon
+            v-if="hover === token.key"
+            :content="typeof token.value === 'string' ? token.value : JSON.stringify(token.value)"
+            class="htw-flex-none"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.htw-bind-col-size {
+  grid-template-columns: repeat(auto-fill, minmax(var(--histoire-col-size), 1fr));
+}
+</style>

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

@@ -0,0 +1,81 @@
+<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="htw-bg-gray-500/10">
+            <div
+              class="htw-h-20 htw-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

@@ -0,0 +1,62 @@
+<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="histoire-token-list htw-flex htw-flex-col htw-gap-2 htw-my-8"
+    @mouseenter="hover = token.key"
+    @mouseleave="hover = null"
+  >
+    <slot
+      :token="token"
+    />
+    <div class="htw-mx-4">
+      <div class="htw-flex htw-gap-1">
+        <pre class="htw-my-0 htw-truncate htw-shrink">{{ token.name }}</pre>
+        <HstCopyIcon
+          v-if="hover === token.key"
+          :content="token.name"
+          class="htw-flex-none"
+        />
+      </div>
+      <div class="htw-flex htw-gap-1">
+        <pre class="htw-my-0 htw-opacity-50 htw-truncate htw-shrink">{{ token.value }}</pre>
+        <HstCopyIcon
+          v-if="hover === token.key"
+          :content="typeof token.value === 'string' ? token.value : JSON.stringify(token.value)"
+          class="htw-flex-none"
+        />
+      </div>
+    </div>
+  </div>
+</template>

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,151 @@
+<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'
+
+const props = defineProps<{
+  title?: string
+  modelValue: unknown
+}>()
+
+const emit = 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 {
+    emit('update:modelValue', JSON.parse(internalValue.value))
+  }
+  catch (e) {
+    invalidValue.value = true
+  }
+})
+</script>
+
+<template>
+  <HstWrapper
+    :title="title"
+    class="histoire-json 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/components/number/HstNumber.story.vue

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

package/src/components/number/HstNumber.vue

@@ -0,0 +1,95 @@
+<script lang="ts">
+export default {
+  name: 'HstNumber',
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onUnmounted, ref } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+
+const props = defineProps<{
+  title?: string
+  modelValue?: number | null
+}>()
+
+const emit = defineEmits({
+  'update:modelValue': (newValue: number) => true,
+})
+
+const numberModel = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+  },
+})
+
+const input = ref<HTMLInputElement>()
+
+function focusAndSelect() {
+  input.value.focus()
+  input.value.select()
+}
+
+// Drag to modify
+
+const isDragging = ref(false)
+let startX: number
+let startValue: number
+
+function onMouseDown(event: MouseEvent) {
+  isDragging.value = true
+  startX = event.clientX
+  startValue = numberModel.value
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', stopDragging)
+}
+
+function onMouseMove(event: MouseEvent) {
+  let step = Number.parseFloat(input.value.step)
+  if (Number.isNaN(step)) {
+    step = 1
+  }
+  numberModel.value = startValue + Math.round((event.clientX - startX) / 10 / step) * step
+}
+
+function stopDragging() {
+  isDragging.value = false
+  window.removeEventListener('mousemove', onMouseMove)
+  window.removeEventListener('mouseup', stopDragging)
+}
+
+onUnmounted(() => {
+  stopDragging()
+})
+</script>
+
+<template>
+  <HstWrapper
+    class="histoire-number htw-cursor-ew-resize htw-items-center"
+    :title="title"
+    :class="[
+      $attrs.class,
+      { 'htw-select-none': isDragging },
+    ]"
+    :style="$attrs.style"
+    @click="focusAndSelect"
+    @mousedown="onMouseDown"
+  >
+    <input
+      ref="input"
+      v-bind="{ ...$attrs, class: null, style: null }"
+      v-model.number="numberModel"
+      type="number"
+      :class="{
+        'htw-select-none': isDragging,
+      }"
+      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-cursor-ew-resize htw-box-border"
+    >
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </HstWrapper>
+</template>