Add prettier config, format codebase

src/components/code/CliInstallation.vue

@@ -2,12 +2,21 @@
   <div class="cli-installation">
     <h2 class="demo-title">One-Time Installation</h2>
 
-    <VCodeBlock v-if="command" :code="command" :persistent-copy-button="true" highlightjs lang="bash" theme="nord"
-      :copy-button="true" class="code-block" />
+    <VCodeBlock
+      v-if="command"
+      :code="command"
+      :persistent-copy-button="true"
+      highlightjs
+      lang="bash"
+      theme="nord"
+      :copy-button="true"
+      class="code-block"
+    />
 
     <div class="cli-divider"></div>
 
     <h2 class="demo-title">Full CLI Setup</h2>
+
     <p class="jsrepo-info">
       Vue Bits uses
       <a href="https://jsrepo.dev/" target="_blank" rel="noreferrer">jsrepo</a>
@@ -17,23 +26,57 @@
     <Accordion expandIcon="pi pi-chevron-right" collapseIcon="pi pi-chevron-down">
       <AccordionPanel value="setup">
         <AccordionHeader>Setup Steps</AccordionHeader>
+
         <AccordionContent
-          :pt="{ transition: { enterFromClass: '', enterActiveClass: '', enterToClass: '', leaveFromClass: '', leaveActiveClass: '', leaveToClass: '' } }">
+          :pt="{
+            transition: {
+              enterFromClass: '',
+              enterActiveClass: '',
+              enterToClass: '',
+              leaveFromClass: '',
+              leaveActiveClass: '',
+              leaveToClass: ''
+            }
+          }"
+        >
           <div class="setup-content">
             <p class="demo-extra-info">1. Initialize a config file for your project</p>
 
             <div class="setup-option">
-              <VCodeBlock :persistent-copy-button="true" code="npx jsrepo init https://vue-bits.dev/ui" highlightjs
-                lang="bash" theme="nord" :copy-button="true" class="code-block" />
+              <VCodeBlock
+                :persistent-copy-button="true"
+                code="npx jsrepo init https://vue-bits.dev/ui"
+                highlightjs
+                lang="bash"
+                theme="nord"
+                :copy-button="true"
+                class="code-block"
+              />
             </div>
 
             <p class="demo-extra-info">2. Browse &amp; add components from the list</p>
-            <VCodeBlock :persistent-copy-button="true" code="npx jsrepo add" highlightjs lang="bash" theme="nord"
-              :copy-button="true" class="code-block" />
+
+            <VCodeBlock
+              :persistent-copy-button="true"
+              code="npx jsrepo add"
+              highlightjs
+              lang="bash"
+              theme="nord"
+              :copy-button="true"
+              class="code-block"
+            />
 
             <p class="demo-extra-info">3. Or just add a specific component</p>
-            <VCodeBlock :persistent-copy-button="true" code="npx jsrepo add Animations/AnimatedContainer" highlightjs
-              lang="bash" theme="nord" :copy-button="true" class="code-block" />
+
+            <VCodeBlock
+              :persistent-copy-button="true"
+              code="npx jsrepo add Animations/AnimatedContainer"
+              highlightjs
+              lang="bash"
+              theme="nord"
+              :copy-button="true"
+              class="code-block"
+            />
           </div>
         </AccordionContent>
       </AccordionPanel>
@@ -42,15 +85,15 @@
 </template>
 
 <script setup lang="ts">
-import { VCodeBlock } from '@wdns/vue-code-block'
-import Accordion from 'primevue/accordion'
-import AccordionPanel from 'primevue/accordionpanel'
-import AccordionHeader from 'primevue/accordionheader'
-import AccordionContent from 'primevue/accordioncontent'
+import { VCodeBlock } from '@wdns/vue-code-block';
+import Accordion from 'primevue/accordion';
+import AccordionPanel from 'primevue/accordionpanel';
+import AccordionHeader from 'primevue/accordionheader';
+import AccordionContent from 'primevue/accordioncontent';
 
 const { command } = defineProps<{
-  command?: string
-}>()
+  command?: string;
+}>();
 </script>
 
 <style scoped>
@@ -74,7 +117,7 @@ const { command } = defineProps<{
 }
 
 .jsrepo-info a {
-  color: #27FF64;
+  color: #27ff64;
   text-decoration: underline;
 }
 
@@ -166,4 +209,4 @@ const { command } = defineProps<{
 :deep(.v-code-block--me-1) {
   margin-right: 0 !important;
 }
-</style>
+</style>

src/components/code/CodeExample.vue

@@ -4,14 +4,25 @@
       <h2 class="demo-title">{{ getDisplayName(name) }}</h2>
 
       <div v-if="snippet" class="code-container">
-        <div class="code-wrapper" :class="{ 'collapsed': shouldCollapse(snippet) && !isExpanded(name) }">
-          <VCodeBlock :code="snippet" highlightjs :lang="getLanguage(name)" theme="nord" :copy-button="true"
-            :persistent-copy-button="true" class="code-block" />
+        <div class="code-wrapper" :class="{ collapsed: shouldCollapse(snippet) && !isExpanded(name) }">
+          <VCodeBlock
+            :code="snippet"
+            highlightjs
+            :lang="getLanguage(name)"
+            theme="nord"
+            :copy-button="true"
+            :persistent-copy-button="true"
+            class="code-block"
+          />
 
           <div v-if="shouldCollapse(snippet) && !isExpanded(name)" class="fade-overlay" />
 
-          <button v-if="shouldCollapse(snippet)" class="expand-button" :class="{ 'expanded': isExpanded(name) }"
-            @click="toggleExpanded(name)">
+          <button
+            v-if="shouldCollapse(snippet)"
+            class="expand-button"
+            :class="{ expanded: isExpanded(name) }"
+            @click="toggleExpanded(name)"
+          >
             {{ isExpanded(name) ? 'Collapse Snippet' : 'See Full Snippet' }}
           </button>
         </div>
@@ -19,6 +30,7 @@
 
       <div v-if="!snippet" class="no-code">
         <span>Nothing here yet!</span>
+
         <i class="pi pi-face-sad"></i>
       </div>
     </div>
@@ -26,58 +38,55 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { VCodeBlock } from '@wdns/vue-code-block'
-import type { CodeObject } from '../../types/code'
+import { computed, ref } from 'vue';
+import { VCodeBlock } from '@wdns/vue-code-block';
+import type { CodeObject } from '../../types/code';
 
 const props = defineProps<{
-  codeObject: CodeObject
-}>()
+  codeObject: CodeObject;
+}>();
 
-const skipKeys = [
-  'cli'
-]
+const skipKeys = ['cli'];
 
-const expandedSections = ref<Set<string>>(new Set())
+const expandedSections = ref<Set<string>>(new Set());
 
 const codeEntries = computed(() => {
-  return Object.entries(props.codeObject).filter(([name]) => !skipKeys.includes(name))
-})
-
+  return Object.entries(props.codeObject).filter(([name]) => !skipKeys.includes(name));
+});
 
 const shouldCollapse = (snippet: string) => {
-  const codeLines = snippet?.split('\n').length || 0
-  return codeLines > 35
-}
+  const codeLines = snippet?.split('\n').length || 0;
+  return codeLines > 35;
+};
 
 const isExpanded = (name: string) => {
-  return expandedSections.value.has(name)
-}
+  return expandedSections.value.has(name);
+};
 
 const toggleExpanded = (name: string) => {
   if (expandedSections.value.has(name)) {
-    expandedSections.value.delete(name)
+    expandedSections.value.delete(name);
   } else {
-    expandedSections.value.add(name)
+    expandedSections.value.add(name);
   }
-}
+};
 
 const getDisplayName = (name: string) => {
-  if (name === 'code') return 'Code'
-  if (name === 'cli') return 'CLI Command'
-  if (name === 'utility') return 'Utility'
-  if (name === 'usage') return 'Usage'
-  if (name === 'installation') return 'Installation'
-  return name.charAt(0).toUpperCase() + name.slice(1)
-}
+  if (name === 'code') return 'Code';
+  if (name === 'cli') return 'CLI Command';
+  if (name === 'utility') return 'Utility';
+  if (name === 'usage') return 'Usage';
+  if (name === 'installation') return 'Installation';
+  return name.charAt(0).toUpperCase() + name.slice(1);
+};
 
 const getLanguage = (name: string) => {
-  if (name === 'cli') return 'bash'
-  if (name === 'code') return 'html'
-  if (name === 'usage') return 'html'
-  if (name === 'installation') return 'bash'
-  return 'javascript'
-}
+  if (name === 'cli') return 'bash';
+  if (name === 'code') return 'html';
+  if (name === 'usage') return 'html';
+  if (name === 'installation') return 'bash';
+  return 'javascript';
+};
 </script>
 
 <style scoped>

src/components/code/Dependencies.vue

@@ -1,18 +1,17 @@
 <template>
   <div class="dependencies-container">
     <h2 class="demo-title">Dependencies</h2>
+
     <div class="demo-details">
-      <span v-for="dep in dependencyList" :key="dep" class="dependency-tag">
-        {{ dep }}
-      </span>
+      <span v-for="dep in dependencyList" :key="dep" class="dependency-tag">{{ dep }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 interface Props {
-  dependencyList: string[]
+  dependencyList: string[];
 }
 
-defineProps<Props>()
+defineProps<Props>();
 </script>