Regrouping components

woolimi · Nov 24, 2023 · bd31ad2 · bd31ad2
1 parent 6c32656
commit bd31ad2
Show file tree

Hide file tree

Showing 18 changed files with 99 additions and 103 deletions.
diff --git a/components/WButton/WButton.story.vue b/components/WButton/WButton.story.vue
@@ -1,16 +1,16 @@
 <script setup>
-import { reactive } from "vue";
-import { logEvent } from "histoire/client";
-import WButton from "./WButton.vue";
-import colors from "tailwindcss/colors";
+import { reactive } from 'vue';
+import { logEvent } from 'histoire/client';
+import WButton from './WButton.vue';
+import colors from 'tailwindcss/colors';
 
 const state = reactive({
-  text: "Click here",
+  text: 'Click here',
 });
 </script>
 
 <template>
-  <Story title="WButton" :layout="{ type: 'grid', width: 300 }">
+  <Story title="WButton" group="UI" :layout="{ type: 'grid', width: 300 }">
     <Variant title="default">
       <WButton>
         {{ state.text }}

diff --git a/components/WCard/WCard.story.vue b/components/WCard/WCard.story.vue
@@ -1,12 +1,12 @@
 <script setup>
-import WCard from "./WCard.vue";
-import { reactive } from "vue";
+import WCard from './WCard.vue';
+import { reactive } from 'vue';
 
 const state = reactive({});
 </script>
 
 <template>
-  <Story title="WCard" :layout="{ type: 'grid', width: 350 }">
+  <Story title="WCard" group="UI" :layout="{ type: 'grid', width: 350 }">
     <Variant title="default">
       <WCard>
         <template #head>

diff --git a/components/WCheckbox/WCheckbox.story.vue b/components/WCheckbox/WCheckbox.story.vue
@@ -1,17 +1,17 @@
 <script setup>
-import WCheckbox from "./WCheckbox.vue";
-import { reactive } from "vue";
+import WCheckbox from './WCheckbox.vue';
+import { reactive } from 'vue';
 
 const state = reactive({
-  text: "Are you a sheep?",
+  text: 'Are you a sheep?',
   modelValue: false,
   modelValue2: false,
   modelValue3: false,
 });
 </script>
 
 <template>
-  <Story title="WCheckbox" :layout="{ type: 'grid', width: 300 }">
+  <Story title="WCheckbox" group="Form" :layout="{ type: 'grid', width: 300 }">
     <Variant title="default">
       <WCheckbox v-model="state.modelValue" :text="state.text" />
     </Variant>

diff --git a/components/WDateField/WDateField.story.vue b/components/WDateField/WDateField.story.vue
@@ -17,7 +17,7 @@ const onError = (error: Boolean) => {
 </script>
 
 <template>
-  <Story title="Form/WDateField" :layout="{ type: 'grid', width: 350 }">
+  <Story title="WDateField" group="Form" :layout="{ type: 'grid', width: 350 }">
     <Variant title="default" :init-state="initState">
       <template #default="{ state }">
         <p class="min-h-[48px]">modelValue: {{ state.value }}</p>

diff --git a/components/WDatePicker/WDatePicker.story.vue b/components/WDatePicker/WDatePicker.story.vue
@@ -14,7 +14,7 @@ const min3 = addYears(-30, new Date());
 </script>
 
 <template>
-  <Story title="Form/WDatePicker" :layout="{ type: 'grid', width: 400 }">
+  <Story title="WDatePicker" group="Form" :layout="{ type: 'grid', width: 400 }">
     <Variant title="default" :init-state="initState">
       <template #default="{ state }">
         <p class="min-h-[48px]">modelValue: {{ state.value }}</p>

diff --git a/components/WError/WError.story.vue b/components/WError/WError.story.vue
@@ -1,9 +1,9 @@
 <script setup>
-import WError from "@/components/WError";
+import WError from '@/components/WError';
 </script>
 
 <template>
-  <Story title="WError" :layout="{ type: 'grid', width: 300 }">
+  <Story title="WError" group="Form" :layout="{ type: 'grid', width: 300 }">
     <Variant title="one item">
       <WError error-message="Some error message" />
     </Variant>

diff --git a/components/WInput/WInput.story.vue b/components/WInput/WInput.story.vue
@@ -16,7 +16,7 @@ const onInput = (e: InputEvent) => {
 </script>
 
 <template>
-  <Story title="Form/WInput" :layout="{ type: 'grid', width: 300 }">
+  <Story title="WInput" group="Form" :layout="{ type: 'grid', width: 300 }">
     <Variant title="default">
       <WInput placeholder="Type here..." :value="state.value" @input="onInput" :type="state.type" />
     </Variant>

diff --git a/components/WLabel/WLabel.story.vue b/components/WLabel/WLabel.story.vue
@@ -1,9 +1,9 @@
 <script setup>
-import WLabel from "./WLabel.vue";
+import WLabel from './WLabel.vue';
 </script>
 
 <template>
-  <Story title="WLabel" :layout="{ type: 'grid', width: 300 }">
+  <Story title="WLabel" group="Form" :layout="{ type: 'grid', width: 300 }">
     <Variant title="default">
       <WLabel for="label">Label</WLabel>
     </Variant>

diff --git a/components/WNavbar/WNavbar.story.vue b/components/WNavbar/WNavbar.story.vue
@@ -1,30 +1,30 @@
 <script setup>
-import WNavbar from "./WNavbar.vue";
-import { reactive } from "vue";
+import WNavbar from './WNavbar.vue';
+import { reactive } from 'vue';
 const state = reactive({
   model: [
-    { text: "Home", to: "#" },
+    { text: 'Home', to: '#' },
     {
-      text: "Projects",
+      text: 'Projects',
       items: [
         {
-          text: "My awesome project",
+          text: 'My awesome project',
           items: [
-            { text: "Project 1", to: "#" },
-            { text: "Project 2", to: "#" },
+            { text: 'Project 1', to: '#' },
+            { text: 'Project 2', to: '#' },
           ],
         },
-        { text: "My worst project", to: "#" },
+        { text: 'My worst project', to: '#' },
       ],
     },
     {
-      text: "About us",
+      text: 'About us',
       items: [
-        { text: "Who we are", to: "#" },
-        { text: "Where we are", to: "#" },
+        { text: 'Who we are', to: '#' },
+        { text: 'Where we are', to: '#' },
       ],
     },
-    { text: "Contact", to: "#" },
+    { text: 'Contact', to: '#' },
   ],
 });
 const source = `/* 
@@ -54,7 +54,7 @@ item = {
 </script>
 
 <template>
-  <Story title="WNavbar" :layout="{ type: 'single', iframe: true, width: '100%' }">
+  <Story title="WNavbar" group="UI" :layout="{ type: 'single', iframe: true, width: '100%' }">
     <Variant title="default" :source="source">
       <WNavbar :model="state.model" class="mt-10" />
     </Variant>

diff --git a/components/WPasswordField/WPasswordField.story.vue b/components/WPasswordField/WPasswordField.story.vue
@@ -10,7 +10,7 @@ const state = reactive({
 </script>
 
 <template>
-  <Story title="Form/WPasswordField" :layout="{ type: 'grid', width: 300 }">
+  <Story title="WPasswordField" group="Form" :layout="{ type: 'grid', width: 300 }">
     <Variant title="default">
       <WPasswordField v-model="state.value" :label="state.label" :placeholder="state.placeholder" />
     </Variant>

diff --git a/components/WPhoneField/WPhoneField.story.vue b/components/WPhoneField/WPhoneField.story.vue
@@ -38,7 +38,7 @@ const onCheck = useDebounceFn((valid) => {
 </script>
 
 <template>
-  <Story title="Form/WPhoneField" :layout="{ type: 'grid', width: 400 }">
+  <Story title="WPhoneField" group="Form" :layout="{ type: 'grid', width: 400 }">
     <Variant title="default">
       <WPhoneField v-model="state.value" :label="state.label" />
     </Variant>

diff --git a/components/WRadio/WRadio.story.vue b/components/WRadio/WRadio.story.vue
diff --git a/components/WRadioGroup/WRadioGroup.story.vue b/components/WRadioGroup/WRadioGroup.story.vue
@@ -1,15 +1,15 @@
 <script setup>
-import WRadio from "@/components/WRadio";
-import WRadioGroup from "@/components/WRadioGroup";
-import { reactive } from "vue";
+import WRadio from '@/components/WRadio';
+import WRadioGroup from '@/components/WRadioGroup';
+import { reactive } from 'vue';
 
 const state = reactive({
-  modelValue: "",
+  modelValue: '',
 });
 </script>
 
 <template>
-  <Story title="WRadioGroup" :layout="{ type: 'grid', width: 300 }">
+  <Story title="WRadioGroup" group="Form" :layout="{ type: 'grid', width: 300 }">
     <Variant title="default">
       <WRadioGroup label="Gender" v-model="state.modelValue" name="Gender">
         <WRadio value="male" text="Male" />

diff --git a/components/WSelect/WSelect.story.vue b/components/WSelect/WSelect.story.vue
@@ -1,26 +1,31 @@
 <script setup>
-import WSelect from "./WSelect.vue";
-import { reactive } from "vue";
+import WSelect from './WSelect.vue';
+import { reactive } from 'vue';
 
 const state = reactive({
   modelValue: undefined,
   options: [
-    { text: "Option 1", value: 1 },
-    { text: "Option 2", value: 2 },
-    { text: "Option 3", value: 3 },
-    { text: "Option 4", value: 4 },
-    { text: "Option 5", value: 5 },
-    { text: "Option 6", value: 6 },
+    { text: 'Option 1', value: 1 },
+    { text: 'Option 2', value: 2 },
+    { text: 'Option 3', value: 3 },
+    { text: 'Option 4', value: 4 },
+    { text: 'Option 5', value: 5 },
+    { text: 'Option 6', value: 6 },
   ],
-  label: "Select an option",
-  placeholder: "Any option?",
+  label: 'Select an option',
+  placeholder: 'Any option?',
 });
 </script>
 
 <template>
-  <Story title="Form/WSelect" :layout="{ type: 'grid', width: 300 }">
+  <Story title="WSelect" group="Form" :layout="{ type: 'grid', width: 300 }">
     <Variant title="default">
-      <WSelect v-model="state.value" :label="state.label" :options="state.options" :placeholder="state.placeholder" />
+      <WSelect
+        v-model="state.value"
+        :label="state.label"
+        :options="state.options"
+        :placeholder="state.placeholder"
+      />
     </Variant>
     <Variant title="disabled">
       <WSelect
@@ -32,7 +37,12 @@ const state = reactive({
       />
     </Variant>
     <Variant title="bottom">
-      <WSelect v-model="state.value" :label="state.label" :options="state.options" :placeholder="state.placeholder" />
+      <WSelect
+        v-model="state.value"
+        :label="state.label"
+        :options="state.options"
+        :placeholder="state.placeholder"
+      />
     </Variant>
   </Story>
 </template>
diff --git a/components/WSheep/WSheep.story.vue b/components/WSheep/WSheep.story.vue
@@ -1,9 +1,9 @@
 <script setup>
-import WSheep from "./WSheep.vue";
+import WSheep from './WSheep.vue';
 </script>
 
 <template>
-  <Story title="WSheep" :layout="{ type: 'grid', width: 200 }">
+  <Story title="WSheep" group="UI" :layout="{ type: 'grid', width: 200 }">
     <Variant title="default">
       <WSheep />
     </Variant>

diff --git a/components/WSwitch/WSwitch.story.vue b/components/WSwitch/WSwitch.story.vue
@@ -1,6 +1,6 @@
 <script setup>
-import WSwitch from "./WSwitch.vue";
-import { reactive } from "vue";
+import WSwitch from './WSwitch.vue';
+import { reactive } from 'vue';
 
 const state = reactive({
   modelValue: false,
@@ -9,7 +9,7 @@ const state = reactive({
 </script>
 
 <template>
-  <Story title="WSwitch" :layout="{ type: 'grid', width: 300 }">
+  <Story title="WSwitch" group="UI" :layout="{ type: 'grid', width: 300 }">
     <Variant title="default">
       <WSwitch :disabled="state.disabled" v-model="state.modelValue" />
     </Variant>

diff --git a/components/WTextField/WTextField.story.vue b/components/WTextField/WTextField.story.vue
@@ -1,17 +1,22 @@
 <script setup>
-import WTextField from "./WTextField.vue";
-import { reactive } from "vue";
+import WTextField from './WTextField.vue';
+import { reactive } from 'vue';
 
 const state = reactive({
-  value: "",
-  label: "What are you looking for?",
+  value: '',
+  label: 'What are you looking for?',
 });
 </script>
 
 <template>
-  <Story title="Form/WTextField" :layout="{ type: 'grid', width: 300 }">
+  <Story title="WTextField" group="Form" :layout="{ type: 'grid', width: 300 }">
     <Variant title="default">
-      <WTextField placeholder="Type here..." v-model="state.value" :disabled="state.disabled" :label="state.label" />
+      <WTextField
+        placeholder="Type here..."
+        v-model="state.value"
+        :disabled="state.disabled"
+        :label="state.label"
+      />
     </Variant>
     <Variant title="disabled">
       <WTextField

diff --git a/histoire.config.ts b/histoire.config.ts
@@ -1,33 +1,35 @@
-import { defineConfig } from "histoire";
-import { HstVue } from "@histoire/plugin-vue";
+import { defineConfig } from 'histoire';
+import { HstVue } from '@histoire/plugin-vue';
 
 export default defineConfig({
   plugins: [HstVue()],
-  setupFile: "./histoire.setup.ts",
-  storyMatch: ["components/**/*.story.vue", "./*.story.vue"],
-  outDir: "github-pages",
-  routerMode: "hash",
+  setupFile: './histoire.setup.ts',
+  storyMatch: ['components/**/*.story.vue', './*.story.vue'],
+  outDir: 'github-pages',
+  routerMode: 'hash',
   theme: {
-    title: "Wool Components",
+    title: 'Wool Components',
     logo: {
-      square: "./assets/sheep.png",
-      light: "./assets/sheep.png",
-      dark: "./assets/sheep.png",
+      square: './assets/sheep.png',
+      light: './assets/sheep.png',
+      dark: './assets/sheep.png',
     },
-    logoHref: "/Wool-Components/#/",
-    favicon: "./public/favicon.ico",
+    logoHref: '/Wool-Components/#/',
+    favicon: './public/favicon.ico',
   },
   tree: {
     groups: [
       {
-        id: "top",
-        title: "", // No toggle
+        id: 'top',
+        title: '', // No toggle
       },
       {
-        title: "Components",
-        include: (file) => {
-          return file.path.includes("/W");
-        },
+        title: 'Form Components',
+        id: 'Form',
+      },
+      {
+        title: 'UI Components',
+        id: 'UI',
       },
     ],
   },