@histoire/controls 0.2.3 → 0.3.0

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

@@ -0,0 +1,35 @@
+<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="design-tokens/HstTokenGrid"
+    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 { computed, ref, withDefaults } from 'vue'
+import { VTooltip as vTooltip } from 'floating-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="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,79 @@
+<script lang="ts" setup>
+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="design-tokens/HstTokenList"
+    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,
+              }"
+            />
+          </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="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/index.ts

@@ -4,6 +4,8 @@ import HstTextVue from './components/text/HstText.vue'
 import HstNumberVue from './components/number/HstNumber.vue'
 import HstTextareaVue from './components/textarea/HstTextarea.vue'
 import HstColorShadesVue from './components/design-tokens/HstColorShades.vue'
+import HstTokenListVue from './components/design-tokens/HstTokenList.vue'
+import HstTokenGridVue from './components/design-tokens/HstTokenGrid.vue'
 import HstCopyIconVue from './components/HstCopyIcon.vue'
 
 export const HstCheckbox = HstCheckboxVue
@@ -11,6 +13,8 @@ export const HstText = HstTextVue
 export const HstNumber = HstNumberVue
 export const HstTextarea = HstTextareaVue
 export const HstColorShades = HstColorShadesVue
+export const HstTokenList = HstTokenListVue
+export const HstTokenGrid = HstTokenGridVue
 export const HstCopyIcon = HstCopyIconVue
 
 export function registerVueComponents (app: App) {
@@ -18,4 +22,7 @@ export function registerVueComponents (app: App) {
   app.component('HstText', HstTextVue)
   app.component('HstNumber', HstNumberVue)
   app.component('HstTextarea', HstTextareaVue)
+  app.component('HstColorShades', HstColorShadesVue)
+  app.component('HstTokenList', HstTokenListVue)
+  app.component('HstTokenGrid', HstTokenGridVue)
 }

package/tsconfig.json

@@ -27,6 +27,8 @@
     "alwaysStrict": true,
     "strictBindCallApply": true,
     "strictFunctionTypes": true,
+    // Volar
+    "jsx": "preserve",
   },
   "include": [
     "src"