feat: add components class (fix #203)

packages/histoire-app/src/app/App.vue

@@ -94,7 +94,7 @@ onMounted(() => {
 <template>
   <div
     v-if="storyStore.currentStory"
-    class="htw-hidden"
+    class="histoire-app htw-hidden"
   >
     <GenericMountStory
       :key="storyStore.currentStory.id"

packages/histoire-app/src/app/components/HomeView.vue

@@ -7,7 +7,7 @@ const logoUrl = computed(() => histoireConfig.theme?.logo?.square ? customLogos.
 </script>
 
 <template>
-  <div class="htw-flex htw-items-center htw-justify-center htw-h-full">
+  <div class="histoire-home-view htw-flex htw-items-center htw-justify-center htw-h-full">
     <img
       :src="logoUrl"
       alt="Logo"

packages/histoire-app/src/app/components/app/AppHeader.vue

@@ -23,7 +23,7 @@ onKeyboardShortcut(['ctrl+shift+d', 'meta+shift+d'], (event) => {
 
 <template>
   <div
-    class="htw-px-4 htw-h-16 htw-flex htw-items-center htw-gap-2"
+    class="histoire-app-header htw-px-4 htw-h-16 htw-flex htw-items-center htw-gap-2"
   >
     <div class="htw-py-3 sm:htw-py-4 htw-flex-1 htw-h-full htw-flex htw-items-center htw-pr-2">
       <a

packages/histoire-app/src/app/components/app/AppLogo.vue

@@ -18,6 +18,7 @@ const altText = computed(() => histoireConfig.theme.title + ' logo')
 
 <template>
   <img
+    class="histoire-app-logo"
     :src="logoUrl"
     :alt="altText"
   >

packages/histoire-app/src/app/components/app/Breadcrumb.vue

@@ -35,7 +35,7 @@ watch(story, () => {
 </script>
 
 <template>
-  <div>
+  <div class="histoire-breadcrumb">
     <a
       class="htw-px-6 htw-h-12 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-flex htw-gap-2 htw-flex-wrap htw-w-full htw-items-center"
       @click="openMenu"

packages/histoire-app/src/app/components/app/InitialLoading.vue

@@ -17,7 +17,7 @@ if (import.meta.hot) {
 </script>
 
 <template>
-  <div class="htw-fixed htw-inset-0 htw-bg-white dark:htw-bg-gray-700 htw-flex htw-flex-col htw-gap-6 htw-items-center htw-justify-center">
+  <div class="histoire-initial-loading htw-fixed htw-inset-0 htw-bg-white dark:htw-bg-gray-700 htw-flex htw-flex-col htw-gap-6 htw-items-center htw-justify-center">
     <transition name="__histoire-fade">
       <div
         v-if="progress.total > 0"

packages/histoire-app/src/app/components/app/MobileOverlay.vue

@@ -13,7 +13,7 @@ const emits = defineEmits<{(e: 'close'): void}>()
   <transition name="__histoire-fade-bottom">
     <div
       v-if="opened"
-      class="htw-absolute htw-z-10 htw-bg-white dark:htw-bg-gray-700 htw-w-screen htw-h-screen htw-inset-0 htw-overflow-hidden htw-flex htw-flex-col"
+      class="histoire-mobile-overlay htw-absolute htw-z-10 htw-bg-white dark:htw-bg-gray-700 htw-w-screen htw-h-screen htw-inset-0 htw-overflow-hidden htw-flex htw-flex-col"
     >
       <div class="htw-p-4 htw-h-16 htw-flex htw-border-b htw-border-gray-100 dark:htw-border-gray-800 htw-items-center htw-place-content-between">
         <span class="htw-text-gray-500">{{ title }}</span>

packages/histoire-app/src/app/components/base/BaseCheckbox.vue

@@ -35,7 +35,7 @@ watch(path, () => {
   <div
     role="checkbox"
     tabindex="0"
-    class="htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
+    class="histoire-base-checkbox htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
     @click="toggle()"
     @keydown.enter.prevent="toggle()"
     @keydown.space.prevent="toggle()"

packages/histoire-app/src/app/components/base/BaseCopyIcon.vue

@@ -28,7 +28,7 @@ const action = () => copy(props.content)
       delay: 0,
     }"
     icon="carbon:copy-file"
-    class="htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer"
+    class="histoire-base-copy-icon htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer"
     @click="action()"
   />
 </template>

packages/histoire-app/src/app/components/base/BaseEmpty.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400  htw-text-lg">
+  <div class="histoire-base-empty htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400  htw-text-lg">
     <slot />
   </div>
 </template>

packages/histoire-app/src/app/components/base/BaseListItemLink.vue

@@ -31,6 +31,7 @@ export default defineComponent({
 <template>
   <RouterLink
     v-slot="{ isActive: linkIsActive, href, navigate }"
+    class="histoire-base-list-item-link"
     v-bind="$attrs"
     custom
   >

packages/histoire-app/src/app/components/base/BaseOverflowMenu.vue

@@ -86,7 +86,7 @@ const ChildrenSlice = (props, { slots }) => {
 <template>
   <div
     ref="el"
-    class="htw-flex htw-overflow-hidden htw-relative"
+    class="histoire-base-overflow-menu htw-flex htw-overflow-hidden htw-relative"
   >
     <ChildrenRender>
       <slot />

packages/histoire-app/src/app/components/base/BaseOverflowTab.vue

@@ -21,6 +21,7 @@ export default defineComponent({
 <template>
   <router-link
     v-slot="{ isActive, isExactActive, href, navigate }"
+    class="histoire-base-overflow-tab"
     v-bind="$attrs"
     custom
   >

packages/histoire-app/src/app/components/base/BaseSelect.vue

@@ -31,6 +31,7 @@ function selectValue (value: string, hide: () => void) {
 
 <template>
   <VDropdown
+    class="histoire-base-select"
     auto-size
   >
     <div

packages/histoire-app/src/app/components/base/BaseSplitPane.vue

@@ -161,7 +161,7 @@ onUnmounted(() => {
 <template>
   <div
     ref="el"
-    class="htw-flex htw-h-full htw-isolate htw-overflow-auto"
+    class="histoire-base-split-pane htw-flex htw-h-full htw-isolate htw-overflow-auto"
     :class="{
       'htw-flex-col': orientation === 'portrait',
       'htw-cursor-ew-resize': dragging && orientation === 'landscape',

packages/histoire-app/src/app/components/base/BaseTab.vue

@@ -21,6 +21,7 @@ export default defineComponent({
 <template>
   <router-link
     v-slot="{ isActive, isExactActive, href, navigate }"
+    class="histoire-base-tab"
     v-bind="$attrs"
     custom
   >

packages/histoire-app/src/app/components/base/BaseTag.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="htw-text-center htw-text-xs htw-mx-1 htw-px-0.5 htw-h-4 htw-uppercase htw-min-w-4 htw-rounded-full htw-bg-primary-500 htw-text-white dark:htw-text-black">
+  <span class="histoire-base-tag htw-text-center htw-text-xs htw-mx-1 htw-px-0.5 htw-h-4 htw-uppercase htw-min-w-4 htw-rounded-full htw-bg-primary-500 htw-text-white dark:htw-text-black">
     <slot />
   </span>
 </template>

packages/histoire-app/src/app/components/panel/ControlsComponentPropItem.vue

@@ -54,6 +54,7 @@ const canReset = computed(() => props.variant.state?._hPropState?.[props.compone
     :is="comp"
     v-if="comp"
     v-model="model"
+    class="histoire-controls-component-prop-item"
     :title="`${definition.name}${canReset ? ' *' : ''}`"
   >
     <template #actions>

packages/histoire-app/src/app/components/panel/ControlsComponentProps.vue

@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <div>
+  <div class="histoire-controls-component-props">
     <div class="htw-font-mono htw-p-2 htw-flex htw-items-center htw-gap-1">
       <Icon
         v-tooltip="'Auto-detected props'"

packages/histoire-app/src/app/components/panel/PaneTabs.vue

@@ -22,7 +22,7 @@ const hasEvents = computed(() => eventsStore.events.length)
 </script>
 
 <template>
-  <BaseOverflowMenu class="htw-h-10 htw-flex-none htw-border-b htw-border-gray-100 dark:htw-border-gray-750">
+  <BaseOverflowMenu class="histoire-pane-tabs htw-h-10 htw-flex-none htw-border-b htw-border-gray-100 dark:htw-border-gray-750">
     <BaseTab
       :to="{ ...$route, query: { ...$route.query, tab: '' } }"
       :matched="!$route.query.tab"

packages/histoire-app/src/app/components/panel/StatePresets.vue

@@ -115,7 +115,7 @@ onClickOutside(select, stopEditing)
 </script>
 
 <template>
-  <div class="htw-flex htw-gap-2 htw-w-full htw-items-center">
+  <div class="histoire-state-presets htw-flex htw-gap-2 htw-w-full htw-items-center">
     <div
       ref="select"
       class="htw-flex-1 htw-min-w-0"

packages/histoire-app/src/app/components/panel/StoryControls.vue

@@ -32,7 +32,7 @@ const hasCustomControls = computed(() => props.variant.slots().controls || props
 <template>
   <div
     data-test-id="story-controls"
-    class="htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-750"
+    class="histoire-story-controls htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-750"
   >
     <!-- Toolbar -->
     <div

packages/histoire-app/src/app/components/panel/StoryDocs.vue

@@ -88,7 +88,10 @@ function onClick (e: MouseEvent) {
 </script>
 
 <template>
-  <div @click.capture="onClick">
+  <div
+    class="histoire-story-docs"
+    @click.capture="onClick"
+  >
     <BaseEmpty
       v-if="!renderedDoc"
     >

packages/histoire-app/src/app/components/panel/StoryEvent.vue

@@ -20,7 +20,7 @@ const formattedArgument = computed(() => {
 
 <template>
   <VDropdown
-    class="htw-group"
+    class="histoire-story-event htw-group"
     placement="right"
     data-test-id="event-item"
   >

packages/histoire-app/src/app/components/panel/StoryEvents.vue

@@ -24,7 +24,10 @@ const eventsElement = ref<HTMLDivElement>()
 </script>
 
 <template>
-  <div ref="eventsElement">
+  <div
+    ref="eventsElement"
+    class="histoire-story-events"
+  >
     <BaseEmpty
       v-if="!hasEvents"
     >

packages/histoire-app/src/app/components/panel/StorySidePanel.vue

@@ -28,19 +28,25 @@ const panelContentComponent = computed(() => {
 </script>
 
 <template>
-  <BaseEmpty v-if="!storyStore.currentVariant">
+  <BaseEmpty
+    v-if="!storyStore.currentVariant"
+    class="histoire-story-side-panel histoire-selection"
+  >
     <span>Select a variant</span>
   </BaseEmpty>
 
-  <BaseEmpty v-else-if="!storyStore.currentVariant.configReady || !storyStore.currentVariant.previewReady">
+  <BaseEmpty
+    v-else-if="!storyStore.currentVariant.configReady || !storyStore.currentVariant.previewReady"
+    class="histoire-story-side-panel histoire-loading"
+  >
     <span>Loading...</span>
   </BaseEmpty>
 
   <BaseSplitPane
     v-else
     save-id="story-sidepane"
     orientation="portrait"
-    class="htw-h-full"
+    class="histoire-story-side-panel histoire-loaded htw-h-full"
     data-test-id="story-side-panel"
   >
     <template #first>

packages/histoire-app/src/app/components/panel/StorySourceCode.vue

@@ -131,7 +131,7 @@ watch(sourceHtml, async () => {
 
 <template>
   <div
-    class="htw-bg-gray-50 dark:htw-bg-gray-750 htw-h-full htw-overflow-hidden htw-flex htw-flex-col"
+    class="histoire-story-source-code htw-bg-gray-50 dark:htw-bg-gray-750 htw-h-full htw-overflow-hidden htw-flex htw-flex-col"
   >
     <!-- Toolbar -->
     <div

packages/histoire-app/src/app/components/search/SearchItem.vue

@@ -50,6 +50,7 @@ const kindLabels = {
 <template>
   <div
     ref="el"
+    class="histoire-search-item"
     data-test-id="search-item"
     :data-selected="selected ? '' : undefined"
   >

packages/histoire-app/src/app/components/search/SearchLoading.vue

@@ -4,7 +4,7 @@ import { Icon } from '@iconify/vue'
 
 <template>
   <div
-    class="htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500 htw-h-[51px] htw-opacity-30"
+    class="histoire-search-loading htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500 htw-h-[51px] htw-opacity-30"
   >
     <Icon
       icon="carbon:search"

packages/histoire-app/src/app/components/search/SearchModal.vue

@@ -26,7 +26,7 @@ function close () {
 <template>
   <div
     v-show="shown"
-    class="htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-700/80 htw-z-20"
+    class="histoire-search-modal htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-700/80 htw-z-20"
     data-test-id="search-modal"
   >
     <div

packages/histoire-app/src/app/components/search/SearchPane.vue

@@ -262,7 +262,7 @@ function selectPrevious () {
 
 <template>
   <div
-    class="htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500"
+    class="histoire-search-pane htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500"
     @click="focused = true"
   >
     <Icon

packages/histoire-app/src/app/components/story/GenericMountStory.vue

@@ -29,6 +29,7 @@ watchEffect(async () => {
   <component
     :is="mountComponent"
     v-if="mountComponent"
+    class="histoire-generic-mount-story"
     :story="story"
     v-bind="$attrs"
   />

packages/histoire-app/src/app/components/story/GenericRenderStory.vue

@@ -29,6 +29,7 @@ watchEffect(async () => {
   <component
     :is="mountComponent"
     v-if="mountComponent"
+    class="histoire-generic-render-story"
     :story="story"
     v-bind="$attrs"
   />

packages/histoire-app/src/app/components/story/StoryResponsivePreview.vue

@@ -118,7 +118,7 @@ const isResponsiveEnabled = computed(() => !props.variant.responsiveDisabled)
 </script>
 
 <template>
-  <div class="htw-w-full htw-h-full htw-flex-1 htw-rounded-lg htw-relative htw-overflow-hidden">
+  <div class="histoire-story-responsive-preview htw-w-full htw-h-full htw-flex-1 htw-rounded-lg htw-relative htw-overflow-hidden">
     <div
       v-if="isResponsiveEnabled"
       class="htw-absolute htw-inset-0 htw-w-full htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 htw-rounded-r-lg htw-border-l-2 htw-border-gray-500/10 dark:htw-border-gray-700/30 htw-overflow-hidden"

packages/histoire-app/src/app/components/story/StoryVariantGrid.vue

@@ -115,7 +115,7 @@ const columnCount = computed(() => Math.min(storyStore.currentStory.variants.len
 </script>
 
 <template>
-  <div class="htw-flex htw-flex-col htw-items-stretch htw-h-full __histoire-pane-shadow-from-right">
+  <div class="histoire-story-variant-grid htw-flex htw-flex-col htw-items-stretch htw-h-full __histoire-pane-shadow-from-right">
     <!-- Toolbar -->
     <div
       v-if="!isMobile"

packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue

@@ -65,7 +65,7 @@ const settings = usePreviewSettingsStore().currentSettings
 <template>
   <div
     ref="el"
-    class="htw-cursor-default htw-flex htw-flex-col htw-gap-y-1 htw-group"
+    class="histoire-story-variant-grid-item htw-cursor-default htw-flex htw-flex-col htw-gap-y-1 htw-group"
   >
     <!-- Header -->
     <div class="htw-flex-none htw-flex htw-items-center">

packages/histoire-app/src/app/components/story/StoryVariantListItem.vue

@@ -22,6 +22,7 @@ useScrollOnActive(isActive, el)
 <template>
   <div
     ref="el"
+    class="histoire-story-variant-list-item"
     data-test-id="story-variant-list-item"
   >
     <BaseListItemLink

packages/histoire-app/src/app/components/story/StoryVariantSingle.vue

@@ -21,7 +21,7 @@ const variant = computed(() => storyStore.currentVariant)
 <template>
   <div
     v-if="hasSingleVariant && variant"
-    class="htw-p-2 htw-h-full __histoire-pane-shadow-from-right"
+    class="histoire-story-variant-single htw-p-2 htw-h-full __histoire-pane-shadow-from-right"
   >
     <StoryVariantSingleView
       :variant="variant"

packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewNative.vue

@@ -27,6 +27,7 @@ const settings = usePreviewSettingsStore().currentSettings
 <template>
   <StoryResponsivePreview
     v-slot="{ isResponsiveEnabled, finalWidth, finalHeight }"
+    class="histoire-story-variant-single-preview-native"
     :variant="variant"
   >
     <div

packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewRemote.vue

@@ -121,6 +121,7 @@ function onIframeLoad () {
 <template>
   <StoryResponsivePreview
     v-slot="{ isResponsiveEnabled, finalWidth, finalHeight, resizing }"
+    class="histoire-story-variant-single-preview-remote"
     :variant="variant"
   >
     <iframe

packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue

@@ -17,7 +17,7 @@ defineProps<{
 
 <template>
   <div
-    class="htw-h-full htw-flex htw-flex-col"
+    class="histoire-story-variant-single-view htw-h-full htw-flex htw-flex-col"
     data-test-id="story-variant-single-view"
   >
     <!-- Toolbar -->

packages/histoire-app/src/app/components/story/StoryView.vue

@@ -53,7 +53,10 @@ function setVariant (variantId: string) {
 </script>
 
 <template>
-  <BaseEmpty v-if="!storyStore.currentStory">
+  <BaseEmpty
+    v-if="!storyStore.currentStory"
+    class="histoire-story-view histoire-no-story"
+  >
     <Icon
       icon="carbon:software-resource-resource"
       class="htw-w-16 htw-h-16 htw-opacity-50"
@@ -62,7 +65,7 @@ function setVariant (variantId: string) {
 
   <div
     v-else
-    class="htw-h-full"
+    class="histoire-story-view histoire-with-story htw-h-full"
   >
     <div
       v-if="storyStore.currentStory.docsOnly"