@poveste/controls 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,4 @@
+export interface HstControlOption {
+    label: string;
+    value: any;
+}

package/dist/utils.d.ts

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

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@poveste/controls",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Prebuilt controls components",
+  "author": {
+    "name": "Sorin Gitlan"
+  },
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/poveste-dev/poveste.git",
+    "type": "git",
+    "directory": "packages/poveste-controls"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.postcss",
+    "*.vue"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.es.js"
+    },
+    "./*": "./*"
+  },
+  "main": "./dist/index.es.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "@codemirror/commands": "^6.7.1",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/language": "^6.10.6",
+    "@codemirror/lint": "^6.8.4",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.35.0",
+    "@poveste/shared": "^0.1.0",
+    "@poveste/vendors": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/runtime-dom": "^3.5.26",
+    "@vue/test-utils": "^2.4.6",
+    "@vueuse/core": "^12.0.0",
+    "autoprefixer": "^10.4.20",
+    "concurrently": "^9.1.0",
+    "floating-vue": "5.2.2",
+    "jsdom": "^27.4.0",
+    "postcss": "^8.4.49",
+    "postcss-import": "^16.1.0",
+    "tailwindcss": "^3.4.16",
+    "typescript": "5.6.3",
+    "vite": "^7.3.0",
+    "vitest": "4.0.16",
+    "vue": "^3.5.26",
+    "vue-tsc": "^2.1.10"
+  },
+  "scripts": {
+    "build": "rimraf dist && pnpm run build:css && vite build && pnpm run build:types",
+    "build:css": "tailwindcss -i src/style/main.css -o ./dist/style-standalone.css -c tailwind.config.cjs --postcss postcss.config.cjs",
+    "build:types": "vue-tsc --declaration --emitDeclarationOnly",
+    "watch": "concurrently \"vite build --watch\" \"pnpm run build:types --watch\"",
+    "watch:full": "concurrently \"vite build --watch\" \"pnpm run build:css --watch\" \"pnpm run build:types --watch\"",
+    "test": "vitest run",
+    "test:dev": "vitest"
+  }
+}

package/postcss.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss/nesting'),
+    require('tailwindcss')('./tailwind.config.cjs'),
+    require('autoprefixer'),
+  ],
+}

package/src/components/HstCopyIcon.story.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import HstCopyIcon from './HstCopyIcon.vue'
+
+function initState() {
+  return {
+    content: 'Text fo copy',
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="internals/HstCopyIcon"
+  >
+    <Variant
+      title="default"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstCopyIcon
+          :content="state.content"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/HstCopyIcon.vue

@@ -0,0 +1,38 @@
+<script lang="ts">
+export default {
+  name: 'HstCopyIcon',
+}
+</script>
+
+<script lang="ts" setup>
+import type { Awaitable } from '@poveste/shared'
+import { Icon } from '@iconify/vue'
+import { useClipboard } from '@vueuse/core'
+import { VTooltip as vTooltip } from 'floating-vue'
+
+const props = defineProps<{
+  content: string | (() => Awaitable<string>)
+}>()
+
+const { copy, copied } = useClipboard()
+
+async function action() {
+  const content = typeof props.content === 'function' ? await props.content() : props.content
+  copy(content)
+}
+</script>
+
+<template>
+  <Icon
+    v-tooltip="{
+      content: 'Copied!',
+      triggers: [],
+      shown: copied,
+      distance: 12,
+      delay: 0,
+    }"
+    icon="carbon:copy-file"
+    class="htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer"
+    @click="action()"
+  />
+</template>

package/src/components/HstWrapper.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+export default {
+  name: 'HstWrapper',
+}
+</script>
+
+<script lang="ts" setup>
+import { VTooltip as vTooltip } from 'floating-vue'
+
+withDefaults(defineProps<{
+  title?: string
+  tag?: string
+}>(), {
+  title: undefined,
+  tag: 'label',
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="histoire-wrapper htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap"
+  >
+    <span
+      v-tooltip="{
+        content: title,
+        placement: 'left',
+        distance: 12,
+      }"
+      class="htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0"
+    >
+      {{ title }}
+    </span>
+    <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" />
+    </span>
+  </component>
+</template>

package/src/components/button/HstButton.story.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import HstButton from './HstButton.vue'
+
+const variants: Array<{ name: string, bind?: unknown }> = [
+  { name: 'Default' },
+  { name: 'Primary', bind: { color: 'primary' } },
+  { name: 'Flat', bind: { color: 'flat' } },
+]
+</script>
+
+<template>
+  <Story
+    title="HstButton"
+    group="controls"
+    :layout="{ type: 'grid', width: '200px', iframe: false }"
+  >
+    <Variant
+      v-for="(variant, key) of variants"
+      :key="key"
+      :title="variant.name"
+    >
+      <HstButton
+        v-bind="variant.bind as {}"
+        class="htw-p-2"
+      >
+        Click me!
+      </HstButton>
+    </Variant>
+  </Story>
+</template>

package/src/components/button/HstButton.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+export default {
+  name: 'HstButton',
+}
+</script>
+
+<script setup lang="ts">
+const colors = {
+  default: 'htw-bg-gray-200 dark:htw-bg-gray-750 htw-text-gray-900 dark:htw-text-gray-100 hover:htw-bg-primary-200 dark:hover:htw-bg-primary-900',
+  primary: 'htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black',
+  flat: 'htw-bg-transparent hover:htw-bg-gray-500/20 htw-text-gray-900 dark:htw-text-gray-100',
+}
+
+defineProps<{
+  color?: keyof typeof colors
+}>()
+</script>
+
+<template>
+  <button
+    class="histoire-button htw-cursor-pointer htw-rounded-sm htw-border-none"
+    :class="colors[color ?? 'default']"
+  >
+    <slot />
+  </button>
+</template>

package/src/components/button/HstButtonGroup.story.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import HstButtonGroup from './HstButtonGroup.vue'
+
+const options = {
+  slow: 'Slow',
+  fast: 'Fast',
+  max: 'Max',
+}
+
+const flatOptions = Object.keys(options)
+
+const objectOptions = Object.keys(options).map(key => ({
+  label: options[key],
+  value: key,
+}))
+
+function initState() {
+  return {
+    speed: flatOptions[0],
+  }
+}
+
+const count = ref('0')
+</script>
+
+<template>
+  <Story
+    title="HstButtonGroup"
+    group="controls"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <Variant
+      title="playground"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <pre>{{ { speed: state.speed } }}</pre>
+        <HstButtonGroup
+          v-model="state.speed"
+          title="Label"
+          :options="objectOptions"
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstButtonGroup
+          v-model="state.speed"
+          title="Label"
+          :options="objectOptions"
+        />
+      </template>
+    </Variant>
+
+    <Variant
+      title="Object options"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <pre>{{ { speed: state.speed } }}</pre>
+        <HstButtonGroup
+          v-model="state.speed"
+          title="Label"
+          :options="options"
+        />
+      </template>
+    </Variant>
+
+    <Variant
+      title="Should retain order"
+    >
+      <pre>{{ { count } }}</pre>
+      <HstButtonGroup
+        v-model="count"
+        :options="[{ label: 'Low', value: '-25' }, { label: 'Regular', value: '0' }, { label: 'High', value: '200' }]"
+      />
+    </Variant>
+  </Story>
+</template>

package/src/components/button/HstButtonGroup.vue

@@ -0,0 +1,71 @@
+<script lang="ts">
+export default {
+  name: 'HstButtonGroup',
+}
+</script>
+
+<script setup lang="ts">
+import type { ComputedRef } from 'vue'
+import type { HstControlOption } from '../../types'
+import { computed } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+import HstButton from './HstButton.vue'
+
+const props = defineProps<{
+  title?: string
+  modelValue?: string
+  options: string[] | number[] | HstControlOption[] | Record<string, string | number>
+}>()
+
+const formattedOptions: ComputedRef<HstControlOption[]> = computed(() => {
+  if (Array.isArray(props.options)) {
+    return props.options.map((value: string | number | HstControlOption) => {
+      if (typeof value === 'string' || typeof value === 'number') {
+        return { value, label: String(value) }
+      }
+      else {
+        return value
+      }
+    })
+  }
+  else {
+    return Object.keys(props.options).map((value: string) => ({
+      value,
+      label: props.options[value],
+    }))
+  }
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+function selectOption(value: string) {
+  emit('update:modelValue', value)
+}
+</script>
+
+<template>
+  <HstWrapper
+    tag="div"
+    role="group"
+    :title="title"
+    class="histoire-button-group htw-flex-nowrap htw-items-center"
+  >
+    <div class="htw-flex htw-gap-px htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 htw-rounded-sm htw-p-px">
+      <HstButton
+        v-for="{ label, value } of formattedOptions"
+        :key="value"
+        class="htw-px-1 htw-h-[22px] htw-flex-1 !htw-rounded-[3px]"
+        :color="value === modelValue ? 'primary' : 'flat'"
+        :rounded="false"
+        @click="selectOption(value)"
+      >
+        {{ label }}
+      </HstButton>
+    </div>
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </HstWrapper>
+</template>

package/src/components/checkbox/HstCheckbox.spec.ts

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils'
+import HstCheckbox from './HstCheckbox.vue'
+
+describe('hstCheckbox', () => {
+  it('toggle to checked', async () => {
+    const wrapper = mount(HstCheckbox, {
+      props: {
+        modelValue: false,
+        title: 'Label',
+      },
+    })
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual([true])
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('toggle to unchecked', async () => {
+    const wrapper = mount(HstCheckbox, {
+      props: {
+        modelValue: true,
+        title: 'Label',
+      },
+    })
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual([false])
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

package/src/components/checkbox/HstCheckbox.story.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import HstCheckbox from './HstCheckbox.vue'
+
+function initState() {
+  return {
+    booleanChecked: false,
+    stringChecked: 'false',
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="HstCheckbox"
+    group="controls"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <Variant
+      title="playground"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstCheckbox
+          v-model="state.booleanChecked"
+          title="Boolean"
+        />
+        {{ { value: state.booleanChecked } }}
+        <HstCheckbox
+          v-model="state.stringChecked"
+          title="String"
+        />
+        {{ { value: state.stringChecked } }}
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox
+          v-model="state.booleanChecked"
+          title="Boolean"
+        />
+        <HstCheckbox
+          v-model="state.stringChecked"
+          title="String"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/checkbox/HstCheckbox.vue

@@ -0,0 +1,56 @@
+<script lang="ts">
+export default {
+  name: 'HstCheckbox',
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
+
+type Booleanish = boolean | 'true' | 'false'
+
+const props = defineProps<{
+  modelValue?: Booleanish | null
+  title?: string
+}>()
+
+const emit = defineEmits({
+  'update:modelValue': (newValue: Booleanish) => true,
+})
+
+function toggle() {
+  if (typeof props.modelValue === 'string') {
+    emit('update:modelValue', props.modelValue === 'false' ? 'true' : 'false')
+    return
+  }
+
+  emit('update:modelValue', !props.modelValue)
+}
+
+const isTrue = computed(() => {
+  if (typeof props.modelValue === 'string') {
+    return props.modelValue !== 'false'
+  }
+
+  return props.modelValue
+})
+</script>
+
+<template>
+  <HstWrapper
+    role="checkbox"
+    tabindex="0"
+    class="histoire-checkbox htw-cursor-pointer htw-items-center"
+    :title="title"
+    @click="toggle()"
+    @keydown.enter.prevent="toggle()"
+    @keydown.space.prevent="toggle()"
+  >
+    <HstSimpleCheckbox :model-value="isTrue" />
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </HstWrapper>
+</template>

package/src/components/checkbox/HstCheckboxList.story.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import HstCheckboxList from './HstCheckboxList.vue'
+
+const options = {
+  'crash-bandicoot': 'Crash Bandicoot',
+  'the-last-of-us': 'The Last of Us',
+  'ghost-of-tsushima': 'Ghost of Tsushima',
+}
+
+const objectOptions = Object.keys(options).map(key => ({
+  label: options[key],
+  value: key,
+}))
+
+function initState() {
+  return {
+    characters: [],
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="HstCheckboxList"
+    group="controls"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <Variant
+      title="playground"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstCheckboxList
+          v-model="state.characters"
+          title="Label"
+          :options="objectOptions"
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckboxList
+          v-model="state.characters"
+          title="Label"
+          :options="objectOptions"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/checkbox/HstCheckboxList.vue

@@ -0,0 +1,82 @@
+<script lang="ts">
+export default {
+  name: 'HstCheckboxList',
+}
+</script>
+
+<script lang="ts" setup>
+import type { ComputedRef } from 'vue'
+import type { HstControlOption } from '../../types'
+import { computed } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
+
+const props = defineProps<{
+  title?: string
+  modelValue: Array<string>
+  options: string[] | HstControlOption[]
+}>()
+
+const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
+  if (Array.isArray(props.options)) {
+    return Object.fromEntries(props.options.map((value: string | HstControlOption) => {
+      if (typeof value === 'string') {
+        return [value, value]
+      }
+      else {
+        return [value.value, value.label]
+      }
+    }))
+  }
+  return props.options
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Array<string>): void
+}>()
+
+function toggleOption(value: string) {
+  if (props.modelValue.includes(value)) {
+    emit('update:modelValue', props.modelValue.filter(element => element !== value))
+  }
+  else {
+    emit('update:modelValue', [...props.modelValue, value])
+  }
+}
+</script>
+
+<template>
+  <HstWrapper
+    role="group"
+    :title="title"
+    class="histoire-checkbox-list htw-cursor-text"
+    :class="$attrs.class"
+    :style="$attrs.style"
+  >
+    <div class="-htw-my-1">
+      <template
+        v-for="(label, value) in formattedOptions"
+        :key="value"
+      >
+        <label
+          tabindex="0"
+          :for="`${value}-radio`"
+          class="htw-cursor-pointer htw-flex htw-items-center htw-relative htw-py-1 htw-group"
+          @keydown.enter.prevent="toggleOption(value)"
+          @keydown.space.prevent="toggleOption(value)"
+          @click="toggleOption(value)"
+        >
+          <HstSimpleCheckbox
+            :model-value="modelValue.includes(value)"
+            class="htw-mr-2"
+          />
+          {{ label }}
+        </label>
+      </template>
+    </div>
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </HstWrapper>
+</template>