@poveste/controls 0.1.0

package/src/components/text/HstText.vue

@@ -0,0 +1,44 @@
+<script lang="ts">
+export default {
+  name: 'HstText',
+}
+</script>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+
+defineProps<{
+  title?: string
+  modelValue?: string | null
+}>()
+
+const emit = defineEmits({
+  'update:modelValue': (newValue: string) => true,
+})
+
+const input = ref<HTMLInputElement>()
+</script>
+
+<template>
+  <HstWrapper
+    :title="title"
+    class="histoire-text htw-cursor-text htw-items-center"
+    :class="$attrs.class"
+    :style="$attrs.style"
+    @click="input.focus()"
+  >
+    <input
+      ref="input"
+      v-bind="{ ...$attrs, class: null, style: null }"
+      type="text"
+      :value="modelValue"
+      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-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"
+      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    >
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </HstWrapper>
+</template>

package/src/components/textarea/HstTextarea.story.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import HstTextarea from './HstTextarea.vue'
+
+function initState() {
+  return {
+    text: '',
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="HstTextarea"
+    group="controls"
+  >
+    <Variant
+      title="default"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstTextarea
+          v-model="state.text"
+          title="Textarea"
+        />
+      </template>
+
+      <template #controls="{ state }">
+        <HstTextarea
+          v-model="state.text"
+          title="Text"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/textarea/HstTextarea.vue

@@ -0,0 +1,44 @@
+<script lang="ts">
+export default {
+  name: 'HstTextarea',
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+
+defineProps<{
+  title?: string
+  modelValue?: string | null
+}>()
+
+const emit = defineEmits({
+  'update:modelValue': (newValue: string) => true,
+})
+
+const input = ref<HTMLInputElement>()
+</script>
+
+<template>
+  <HstWrapper
+    :title="title"
+    class="histoire-textarea htw-cursor-text"
+    :class="$attrs.class"
+    :style="$attrs.style"
+    @click="input.focus()"
+  >
+    <textarea
+      ref="input"
+      v-bind="{ ...$attrs, class: null, style: null }"
+      :value="modelValue"
+      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-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-box-border htw-resize-y htw-min-h-[26px]"
+      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    />
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
+  </HstWrapper>
+</template>

package/src/end.d.ts

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

package/src/index.ts

@@ -0,0 +1,54 @@
+import HstButtonVue from './components/button/HstButton.vue'
+import HstButtonGroupVue from './components/button/HstButtonGroup.vue'
+import HstCheckboxVue from './components/checkbox/HstCheckbox.vue'
+import HstCheckboxListVue from './components/checkbox/HstCheckboxList.vue'
+import HstColorSelectVue from './components/colorselect/HstColorSelect.vue'
+import HstColorShadesVue from './components/design-tokens/HstColorShades.vue'
+import HstTokenGridVue from './components/design-tokens/HstTokenGrid.vue'
+import HstTokenListVue from './components/design-tokens/HstTokenList.vue'
+import HstCopyIconVue from './components/HstCopyIcon.vue'
+import HstJsonVue from './components/json/HstJson.vue'
+import HstNumberVue from './components/number/HstNumber.vue'
+import HstRadioVue from './components/radio/HstRadio.vue'
+import HstSelectVue from './components/select/HstSelect.vue'
+import HstSliderVue from './components/slider/HstSlider.vue'
+import HstTextVue from './components/text/HstText.vue'
+import HstTextareaVue from './components/textarea/HstTextarea.vue'
+
+export const HstButton = HstButtonVue
+export const HstButtonGroup = HstButtonGroupVue
+export const HstCheckbox = HstCheckboxVue
+export const HstCheckboxList = HstCheckboxListVue
+export const HstText = HstTextVue
+export const HstNumber = HstNumberVue
+export const HstSlider = HstSliderVue
+export const HstTextarea = HstTextareaVue
+export const HstSelect = HstSelectVue
+export const HstColorShades = HstColorShadesVue
+export const HstTokenList = HstTokenListVue
+export const HstTokenGrid = HstTokenGridVue
+export const HstCopyIcon = HstCopyIconVue
+export const HstRadio = HstRadioVue
+export const HstJson = HstJsonVue
+export const HstColorSelect = HstColorSelectVue
+
+export const components = {
+  HstButton,
+  HstButtonGroup,
+  HstCheckbox,
+  HstCheckboxList,
+  HstText,
+  HstNumber,
+  HstSlider,
+  HstTextarea,
+  HstSelect,
+  HstRadio,
+  HstJson,
+  HstColorShades,
+  HstTokenList,
+  HstTokenGrid,
+  HstCopyIcon,
+  HstColorSelect,
+}
+
+export * from './types'

package/src/style/main.css

@@ -0,0 +1,17 @@
+@import 'floating-vue/dist/style.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+body {
+  font-size: 1.125rem;
+  @apply dark:htw-text-gray-100;
+}
+
+@media (min-width: 640px) {
+  body {
+    font-size: .875rem;
+  }
+}

package/src/types.ts

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

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.poveste.dev)
+window.__hst_controls_dark.push(isDark)
+
+window.__hst_controls_dark_ready?.()

package/tailwind.config.cjs

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

package/tsconfig.json

@@ -0,0 +1,53 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    // Volar
+    "jsx": "preserve",
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "baseUrl": ".",
+    "rootDir": "src",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    // Alias
+    "paths": {
+      "floating-vue": ["./node_modules/@poveste/vendors/floating-vue"],
+      "@iconify/vue": ["./node_modules/@poveste/vendors/iconify"],
+      "pinia": ["./node_modules/@poveste/vendors/pinia"],
+      "scroll-into-view-if-needed": ["./node_modules/@poveste/vendors/scroll"],
+      "vue-router": ["./node_modules/@poveste/vendors/vue-router"],
+      "@vueuse/core": ["./node_modules/@poveste/vendors/vue-use"],
+      "vue": ["./node_modules/@poveste/vendors/vue"]
+    },
+    "resolveJsonModule": true,
+    "types": [
+      "node"
+    ],
+    "strictBindCallApply": true,
+    "strictFunctionTypes": true,
+    "alwaysStrict": true,
+    // Strict
+    "noImplicitAny": false,
+    "noImplicitThis": true,
+    // Output
+    "outDir": "dist",
+    "removeComments": false,
+    "sourceMap": false,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "preserveSymlinks": true,
+    "skipLibCheck": true,
+    "preserveWatchOutput": true
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "generated/**/*",
+    "dist/**/*",
+    "src/**/*.spec.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,46 @@
+/// <reference types="vitest" />
+
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+  ],
+  resolve: {
+    alias: process.env.VITEST
+      ? {}
+      : {
+          'floating-vue': '@poveste/vendors/floating-vue',
+          '@iconify/vue': '@poveste/vendors/iconify',
+          'pinia': '@poveste/vendors/pinia',
+          'scroll-into-view-if-needed': '@poveste/vendors/scroll',
+          'vue-router': '@poveste/vendors/vue-router',
+          '@vueuse/core': '@poveste/vendors/vue-use',
+          'vue': '@poveste/vendors/vue',
+        },
+  },
+
+  build: {
+    emptyOutDir: false,
+
+    lib: {
+      entry: 'src/index.ts',
+      formats: [
+        'es',
+      ],
+      fileName: 'index.es',
+    },
+
+    rollupOptions: {
+      external: [
+        /@poveste/,
+      ],
+    },
+  },
+
+  test: {
+    environment: 'jsdom',
+    globals: true,
+  },
+})