docs: improve controls book

histoire-dev · Oct 4, 2022 · dde9249 · dde9249
1 parent ad39f96
commit dde9249
Show file tree

Hide file tree

Showing 13 changed files with 52 additions and 4 deletions.
diff --git a/packages/histoire-controls-stories/Intro.story.md b/packages/histoire-controls-stories/Intro.story.md
@@ -0,0 +1,15 @@
+---
+id: intro
+title: Introduction
+group: top
+icon: carbon:bookmark
+---
+
+# Builtin controls & components
+
+This book contains all the available builtin components to be used with [Histoire](https://histoire.dev/).
+
+## How to use
+
+- [For Vue](https://histoire.dev/guide/vue3/controls.html#builtin-controls)
+- [For Svelte](https://histoire.dev/guide/svelte3/controls.html#builtin-controls)
diff --git a/packages/histoire-controls-stories/histoire.config.ts b/packages/histoire-controls-stories/histoire.config.ts
@@ -4,6 +4,9 @@ import { HstVue } from '@histoire/plugin-vue'
 export default defineConfig({
   plugins: [
     HstVue(),
+    {
+      name: 'builtin:tailwind-tokens',
+    },
   ],
 
   storyMatch: ['../histoire-controls/src/**/*.story.vue'],
@@ -15,6 +18,23 @@ export default defineConfig({
     favicon: 'histoire.svg',
   },
 
+  tree: {
+    groups: [
+      {
+        id: 'top',
+        title: '',
+      },
+      {
+        id: 'controls',
+        title: 'Controls',
+      },
+      {
+        id: 'design-system',
+        title: 'Design System',
+      },
+    ],
+  },
+
   vite: {
     server: {
       fs: {

diff --git a/packages/histoire-controls/src/components/checkbox/HstCheckbox.story.vue b/packages/histoire-controls/src/components/checkbox/HstCheckbox.story.vue
@@ -11,6 +11,7 @@ function initState () {
 <template>
   <Story
     title="HstCheckbox"
+    group="controls"
     :layout="{ type: 'single', iframe: false }"
   >
     <Variant

diff --git a/packages/histoire-controls/src/components/checkbox/HstCheckboxList.story.vue b/packages/histoire-controls/src/components/checkbox/HstCheckboxList.story.vue
@@ -22,6 +22,7 @@ function initState () {
 <template>
   <Story
     title="HstCheckboxList"
+    group="controls"
     :layout="{ type: 'single', iframe: false }"
   >
     <Variant

diff --git a/packages/histoire-controls/src/components/design-tokens/HstColorShades.story.vue b/packages/histoire-controls/src/components/design-tokens/HstColorShades.story.vue
@@ -286,7 +286,8 @@ const colors = {
 
 <template>
   <Story
-    title="design-tokens/HstColorShades"
+    title="HstColorShades"
+    group="design-system"
     responsive-disabled
   >
     <Variant title="default">

diff --git a/packages/histoire-controls/src/components/design-tokens/HstTokenGrid.story.vue b/packages/histoire-controls/src/components/design-tokens/HstTokenGrid.story.vue
@@ -14,7 +14,8 @@ const tokens = {
 
 <template>
   <Story
-    title="design-tokens/HstTokenGrid"
+    title="HstTokenGrid"
+    group="design-system"
     responsive-disabled
   >
     <Variant title="default">

diff --git a/packages/histoire-controls/src/components/design-tokens/HstTokenList.story.vue b/packages/histoire-controls/src/components/design-tokens/HstTokenList.story.vue
@@ -55,7 +55,8 @@ const tokens = {
 
 <template>
   <Story
-    title="design-tokens/HstTokenList"
+    title="HstTokenList"
+    group="design-system"
     responsive-disabled
   >
     <Variant title="default">

diff --git a/packages/histoire-controls/src/components/number/HstNumber.story.vue b/packages/histoire-controls/src/components/number/HstNumber.story.vue
@@ -12,6 +12,7 @@ function initState () {
 <template>
   <Story
     title="HstNumber"
+    group="controls"
   >
     <Variant
       title="default"

diff --git a/packages/histoire-controls/src/components/radio/HstRadio.story.vue b/packages/histoire-controls/src/components/radio/HstRadio.story.vue
@@ -24,6 +24,7 @@ function initState () {
 <template>
   <Story
     title="HstRadio"
+    group="controls"
     :layout="{ type: 'single', iframe: false }"
   >
     <Variant

diff --git a/packages/histoire-controls/src/components/select/HstSelect.story.vue b/packages/histoire-controls/src/components/select/HstSelect.story.vue
@@ -25,6 +25,7 @@ function initState () {
 <template>
   <Story
     title="HstSelect"
+    group="controls"
     :layout="{
       type: 'grid',
       width: '100%',

diff --git a/packages/histoire-controls/src/components/slider/HstSlider.story.vue b/packages/histoire-controls/src/components/slider/HstSlider.story.vue
@@ -13,6 +13,7 @@ const state = reactive({
 <template>
   <Story
     title="HstSlider"
+    group="controls"
   >
     <HstSlider
       v-model="state.value"

diff --git a/packages/histoire-controls/src/components/text/HstText.story.vue b/packages/histoire-controls/src/components/text/HstText.story.vue
@@ -12,6 +12,7 @@ function initState () {
 <template>
   <Story
     title="HstText"
+    group="controls"
     :layout="{
       type: 'grid',
       width: '100%',

diff --git a/packages/histoire-controls/src/components/textarea/HstTextarea.story.vue b/packages/histoire-controls/src/components/textarea/HstTextarea.story.vue
@@ -9,7 +9,10 @@ function initState () {
 </script>
 
 <template>
-  <Story title="HstTextarea">
+  <Story
+    title="HstTextarea"
+    group="controls"
+  >
     <Variant
       title="default"
       :init-state="initState"