@histoire/controls 0.0.4

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

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

package/src/components/checkbox/HstCheckbox.vue

@@ -0,0 +1,82 @@
+<script lang="ts">
+export default {
+  name: 'HstCheckbox',
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits({
+  'update:modelValue': (newValue: boolean) => true,
+})
+
+function toggle () {
+  emit('update:modelValue', !props.modelValue)
+  animationEnabled.value = true
+}
+
+// SVG check
+
+const path = ref<SVGPathElement>()
+const dasharray = ref(0)
+const progress = computed(() => props.modelValue ? 1 : 0)
+const dashoffset = computed(() => (1 - progress.value) * dasharray.value)
+const animationEnabled = ref(false)
+
+watch(path, value => {
+  dasharray.value = path.value.getTotalLength?.() ?? 21.21
+})
+</script>
+
+<template>
+  <div
+    role="checkbox"
+    tabindex="0"
+    class="htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
+    @click="toggle()"
+    @keydown.enter.prevent="toggle()"
+    @keydown.space.prevent="toggle()"
+  >
+    <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
+      <div
+        class="htw-border 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"
+        :class="[
+          modelValue
+            ? 'htw-border-primary-500 htw-border-8'
+            : 'htw-border-gray-300 dark:htw-border-gray-500 htw-delay-150',
+        ]"
+      />
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        class="htw-relative htw-z-10"
+      >
+        <path
+          ref="path"
+          d="m 4 12 l 5 5 l 10 -10"
+          fill="none"
+          class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out"
+          :class="[
+            animationEnabled ? 'htw-transition-all' : 'htw-transition-none',
+            {
+              'htw-delay-150': modelValue,
+            },
+          ]"
+          :stroke-dasharray="dasharray"
+          :stroke-dashoffset="dashoffset"
+        />
+      </svg>
+    </div>
+
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,59 @@
+// Peeky snapshots v1.0
+
+exports[`HstCheckbox toggle to checked 1`] = `
+<div
+  role="checkbox"
+  tabindex="0"
+  class="htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
+>
+  <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
+    <div class="htw-border 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 htw-border-gray-300 dark:htw-border-gray-500 htw-delay-150">
+    </div>
+    <svg
+      width="16"
+      height="16"
+      viewbox="0 0 24 24"
+      class="htw-relative htw-z-10"
+    >
+      <path
+        d="m 4 12 l 5 5 l 10 -10"
+        fill="none"
+        class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-all"
+        stroke-dasharray="21.21"
+        stroke-dashoffset="21.21"
+      >
+      </path>
+    </svg>
+  </div>
+  Label
+</div>
+`;
+
+exports[`HstCheckbox toggle to unchecked 1`] = `
+<div
+  role="checkbox"
+  tabindex="0"
+  class="htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
+>
+  <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
+    <div class="htw-border 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 htw-border-primary-500 htw-border-8">
+    </div>
+    <svg
+      width="16"
+      height="16"
+      viewbox="0 0 24 24"
+      class="htw-relative htw-z-10"
+    >
+      <path
+        d="m 4 12 l 5 5 l 10 -10"
+        fill="none"
+        class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-all htw-delay-150"
+        stroke-dasharray="21.21"
+        stroke-dashoffset="0"
+      >
+      </path>
+    </svg>
+  </div>
+  Label
+</div>
+`;

package/src/components/input/HstInput.story.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import HstInput from './HstInput.vue'
+
+function initState () {
+  return {
+    text: '',
+  }
+}
+</script>
+
+<template>
+  <Story title="HstInput">
+    <Variant
+      title="playground"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstInput
+          v-model="state.text"
+        >
+          Label
+        </HstInput>
+      </template>
+
+      <template #controls="{ state }">
+        <HstInput
+          v-model="state.text"
+        >
+          Label
+        </HstInput>
+      </template>
+    </Variant>
+
+    <Variant
+      title="no-label"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstInput
+          v-model="state.text"
+          placeholder="Enter some text..."
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstInput
+          v-model="state.text"
+        >
+          Label
+        </HstInput>
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/input/HstInput.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+export default {
+  name: 'HstInput',
+
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+})
+
+const emit = defineEmits({
+  'update:modelValue': (newValue: string | number) => true,
+})
+
+const input = ref<HTMLInputElement>()
+</script>
+
+<template>
+  <div
+    class="htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700 htw-cursor-text"
+    :class="$attrs.class"
+    :style="$attrs.style"
+    @click="input.focus()"
+  >
+    <label
+      v-if="$slots.default"
+      class="htw-text-sm htw-px-2 htw-cursor-text"
+    >
+      <slot />
+    </label>
+    <input
+      ref="input"
+      v-bind="{ ...$attrs, style: null, class: null }"
+      :value="modelValue"
+      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-0 htw-border htw-border-gray-300 dark:htw-border-gray-500 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm"
+      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    >
+  </div>
+</template>

package/src/histoire-setup.ts

@@ -0,0 +1,5 @@
+import './style/main.css'
+
+export default () => {
+  // Noop
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+import type { App } from 'vue'
+import HstCheckboxVue from './components/checkbox/HstCheckbox.vue'
+import HstInputVue from './components/input/HstInput.vue'
+
+export const HstCheckbox = HstCheckboxVue
+export const HstInput = HstInputVue
+
+export function registerVueComponents (app: App) {
+  app.component('HstCheckbox', HstCheckboxVue)
+  app.component('HstInput', HstInputVue)
+}

package/src/peeky-preview.ts

@@ -0,0 +1 @@
+import './style/main.css'

package/src/style/main.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply dark:htw-text-gray-100;
+}

package/tailwind.config.cjs

@@ -0,0 +1,11 @@
+const inheritedConfig = require('../../tailwind.config.cjs')
+
+module.exports = {
+  ...inheritedConfig,
+  content: [
+    './src/**/*.{vue,js,ts,jsx,tsx,md}',
+  ],
+  // corePlugins: {
+  //   preflight: false,
+  // },
+}

package/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "outDir": "dist",
+    "rootDir": "src",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "removeComments": false,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "types": [
+      "node",
+      "@peeky/test"
+    ],
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "sourceMap": false,
+    "preserveWatchOutput": true,
+    "preserveSymlinks": true,
+    // Strict
+    "noImplicitAny": false,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "strictBindCallApply": true,
+    "strictFunctionTypes": true,
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "generated/**/*",
+    "dist/**/*",
+    "src/**/*.spec.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,48 @@
+/// <reference types="@peeky/test"/>
+/// <reference types="histoire"/>
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+  ],
+
+  build: {
+    emptyOutDir: false,
+
+    lib: {
+      entry: 'src/index.ts',
+      formats: [
+        'es',
+      ],
+      fileName: 'index',
+    },
+
+    rollupOptions: {
+      external: [
+        'vue',
+      ],
+    },
+  },
+
+  histoire: {
+    setupFile: '/src/histoire-setup.ts',
+    vite: (config) => {
+      config.build.lib = false
+      config.build.rollupOptions.external = []
+    },
+    theme: {
+      title: 'Histoire controls',
+      favicon: '/histoire.svg',
+    },
+  },
+
+  test: {
+    runtimeEnv: 'dom',
+    previewSetupFiles: [
+      'src/peeky-preview.ts',
+    ],
+  },
+})