@histoire/controls 0.2.4 → 0.2.5

package/dist/components/design-tokens/HstTokenGrid.story.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/components/design-tokens/HstTokenGrid.vue.d.ts

@@ -0,0 +1,33 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    tokens: Record<string, string | number>;
+    colSize?: number;
+    getName?: (key: string, value: string | number) => string;
+}>, {
+    colSize: number;
+    getName: any;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    tokens: Record<string, string | number>;
+    colSize?: number;
+    getName?: (key: string, value: string | number) => string;
+}>, {
+    colSize: number;
+    getName: any;
+}>>>, {
+    getName: (key: string, value: string | number) => string;
+    colSize: number;
+}>;
+export default _default;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/dist/components/design-tokens/HstTokenList.story.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/components/design-tokens/HstTokenList.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    tokens: Record<string, string | number>;
+    getName?: (key: string, value: string | number) => string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    tokens: Record<string, string | number>;
+    getName?: (key: string, value: string | number) => string;
+}>>>, {}>;
+export default _default;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/index.es.js

@@ -5027,12 +5027,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
 }));
 const _hoisted_1 = {
   key: 0,
-  class: "htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(100px,1fr))] htw-m-4"
+  class: "htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
 };
 const _hoisted_2 = { class: "htw-flex htw-gap-1" };
-const _hoisted_3 = { class: "htw-my-0" };
+const _hoisted_3 = { class: "htw-my-0 htw-truncate htw-shrink" };
 const _hoisted_4 = { class: "htw-flex htw-gap-1" };
-const _hoisted_5 = { class: "htw-my-0 htw-opacity-50" };
+const _hoisted_5 = { class: "htw-my-0 htw-opacity-50 htw-truncate htw-shrink" };
 const __default__ = {
   name: "HstColorShades"
 };
@@ -5083,17 +5083,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
             ]),
             createElementVNode("div", null, [
               createElementVNode("div", _hoisted_2, [
-                createElementVNode("pre", _hoisted_3, toDisplayString(shade.name), 1),
+                withDirectives((openBlock(), createElementBlock("pre", _hoisted_3, [
+                  createTextVNode(toDisplayString(shade.name), 1)
+                ])), [
+                  [unref(VTooltip), shade.name.length > 23 ? shade.name : ""]
+                ]),
                 createVNode(_sfc_main$1, {
                   content: shade.name,
-                  class: "htw-hidden group-hover:htw-block"
+                  class: "htw-hidden group-hover:htw-block htw-flex-none"
                 }, null, 8, ["content"])
               ]),
               createElementVNode("div", _hoisted_4, [
-                createElementVNode("pre", _hoisted_5, toDisplayString(shade.color), 1),
+                withDirectives((openBlock(), createElementBlock("pre", _hoisted_5, [
+                  createTextVNode(toDisplayString(shade.color), 1)
+                ])), [
+                  [unref(VTooltip), shade.color.length > 23 ? shade.color : ""]
+                ]),
                 createVNode(_sfc_main$1, {
                   content: shade.color,
-                  class: "htw-hidden group-hover:htw-block"
+                  class: "htw-hidden group-hover:htw-block htw-flex-none"
                 }, null, 8, ["content"])
               ])
             ])

package/dist/style.css

@@ -275,11 +275,25 @@
   margin-bottom:0px
 }
 
+.htw-my-8{
+  margin-top:2rem;
+  margin-bottom:2rem
+}
+
+.htw-mx-4{
+  margin-left:1rem;
+  margin-right:1rem
+}
+
 .-htw-my-1{
   margin-top:-0.25rem;
   margin-bottom:-0.25rem
 }
 
+.htw-mb-2{
+  margin-bottom:0.5rem
+}
+
 .htw-box-border{
   box-sizing:border-box
 }
@@ -316,6 +330,14 @@
   height:4rem
 }
 
+.htw-h-32{
+  height:8rem
+}
+
+.htw-h-20{
+  height:5rem
+}
+
 .htw-min-h-\[26px\]{
   min-height:26px
 }
@@ -336,14 +358,26 @@
   width:4rem
 }
 
+.htw-w-32{
+  width:8rem
+}
+
 .htw-w-full{
   width:100%
 }
 
+.htw-flex-none{
+  flex:none
+}
+
 .htw-shrink-0{
   flex-shrink:0
 }
 
+.htw-shrink{
+  flex-shrink:1
+}
+
 .htw-grow{
   flex-grow:1
 }
@@ -371,8 +405,8 @@
   resize:vertical
 }
 
-.htw-grid-cols-\[repeat\(auto-fill\,minmax\(100px\,1fr\)\)\]{
-  grid-template-columns:repeat(auto-fill,minmax(100px,1fr))
+.htw-grid-cols-\[repeat\(auto-fill\,minmax\(200px\,1fr\)\)\]{
+  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
 }
 
 .htw-flex-col{
@@ -407,6 +441,12 @@
   overflow:hidden
 }
 
+.htw-truncate{
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap
+}
+
 .htw-text-ellipsis{
   text-overflow:ellipsis
 }
@@ -452,6 +492,19 @@
   border-color:rgb(0 0 0 / 0.25)
 }
 
+.htw-bg-white{
+  --tw-bg-opacity:1;
+  background-color:rgb(255 255 255 / var(--tw-bg-opacity))
+}
+
+.htw-bg-gray-500\/10{
+  background-color:rgb(113 113 122 / 0.1)
+}
+
+.htw-bg-gray-500\/50{
+  background-color:rgb(113 113 122 / 0.5)
+}
+
 .htw-bg-transparent{
   background-color:transparent
 }
@@ -587,6 +640,11 @@ body {
   border-color:rgb(255 255 255 / 0.25)
 }
 
+.htw-dark .dark\:htw-bg-black{
+  --tw-bg-opacity:1;
+  background-color:rgb(0 0 0 / var(--tw-bg-opacity))
+}
+
 .htw-dark .dark\:hover\:htw-bg-primary-800:hover{
   --tw-bg-opacity:1;
   background-color:rgb(6 95 70 / var(--tw-bg-opacity))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -59,7 +59,7 @@
     "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:open": "peeky open",
+    "test:open": "peeky open --port 5010",
     "test": "peeky run",
     "story:dev": "histoire dev",
     "story:build": "histoire build"

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

@@ -377,5 +377,14 @@ const colors = {
         />
       </template>
     </Variant>
+
+    <Variant title="long names">
+      <HstColorShades
+        v-for="(shades, key) of colors"
+        :key="key"
+        :shades="shades"
+        :get-name="shade => `${'\'very-'.repeat(5)}long-${key}-${shade}`"
+      />
+    </Variant>
   </Story>
 </template>

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

@@ -5,7 +5,8 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
+import { VTooltip as vTooltip } from 'floating-vue'
 import HstCopyIcon from '../HstCopyIcon.vue'
 
 const props = defineProps<{
@@ -42,7 +43,7 @@ const displayedShades = computed(() => {
 <template>
   <div
     v-if="displayedShades.length"
-    class="htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(100px,1fr))] htw-m-4"
+    class="htw-grid htw-gap-4 htw-grid-cols-[repeat(auto-fill,minmax(200px,1fr))] htw-m-4"
   >
     <div
       v-for="shade of displayedShades"
@@ -61,17 +62,23 @@ const displayedShades = computed(() => {
       </slot>
       <div>
         <div class="htw-flex htw-gap-1">
-          <pre class="htw-my-0">{{ shade.name }}</pre>
+          <pre
+            v-tooltip="shade.name.length > 23 ? shade.name : ''"
+            class="htw-my-0 htw-truncate htw-shrink"
+          >{{ shade.name }}</pre>
           <HstCopyIcon
             :content="shade.name"
-            class="htw-hidden group-hover:htw-block"
+            class="htw-hidden group-hover:htw-block htw-flex-none"
           />
         </div>
         <div class="htw-flex htw-gap-1">
-          <pre class="htw-my-0 htw-opacity-50">{{ shade.color }}</pre>
+          <pre
+            v-tooltip="shade.color.length > 23 ? shade.color : ''"
+            class="htw-my-0 htw-opacity-50 htw-truncate htw-shrink"
+          >{{ shade.color }}</pre>
           <HstCopyIcon
             :content="shade.color"
-            class="htw-hidden group-hover:htw-block"
+            class="htw-hidden group-hover:htw-block htw-flex-none"
           />
         </div>
       </div>

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,79 @@
+<script lang="ts">
+export default {
+  name: 'HstDesignTokens',
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, withDefaults } from 'vue'
+import { VTooltip as vTooltip } from 'floating-vue'
+import HstCopyIcon from '../HstCopyIcon.vue'
+
+const props = withDefaults(defineProps<{
+  tokens: Record<string, string | number>
+  colSize?: number
+  // @TODO report eslint bug
+  // eslint-disable-next-line func-call-spacing
+  getName?: (key: string, value: string | number) => 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 === 'string' ? value : value.toString(),
+    }
+  })
+})
+
+const colSizePx = computed(() => `${props.colSize}px`)
+</script>
+
+<template>
+  <div class="htw-bind-col-size htw-grid htw-gap-4 htw-m-4">
+    <div
+      v-for="token of processedTokens"
+      :key="token.key"
+      class="htw-flex htw-flex-col htw-gap-2 htw-group"
+    >
+      <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
+            :content="token.name"
+            class="htw-hidden group-hover:htw-block 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
+            :content="token.value"
+            class="htw-hidden group-hover:htw-block htw-flex-none"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.htw-bind-col-size {
+  grid-template-columns: repeat(auto-fill, minmax(v-bind(colSizePx), 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,58 @@
+<script lang="ts">
+export default {
+  name: 'HstDesignTokens',
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import HstCopyIcon from '../HstCopyIcon.vue'
+
+const props = defineProps<{
+  tokens: Record<string, string | number>
+  // @TODO report eslint bug
+  // eslint-disable-next-line func-call-spacing
+  getName?: (key: string, value: string | number) => 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 === 'string' ? value : value.toString(),
+    }
+  })
+})
+</script>
+
+<template>
+  <div
+    v-for="token of processedTokens"
+    :key="token.key"
+    class="htw-flex htw-flex-col htw-gap-2 htw-group htw-my-8"
+  >
+    <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
+          :content="token.name"
+          class="htw-hidden group-hover:htw-block 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
+          :content="token.value"
+          class="htw-hidden group-hover:htw-block htw-flex-none"
+        />
+      </div>
+    </div>
+  </div>
+</template>