chore: normalize import order across codebase

Author: RYGRIT

.storybook/manager.ts

@@ -1,5 +1,4 @@
 import { addons } from 'storybook/manager-api'
-
 import npmxDark from './theme'
 
 addons.setConfig({

.storybook/preview.ts

@@ -1,10 +1,9 @@
 import type { Preview } from '@storybook-vue/nuxt'
 import { withThemeByDataAttribute } from '@storybook/addon-themes'
 import { addons } from 'storybook/preview-api'
-import { currentLocales } from '../config/i18n'
 import { fn } from 'storybook/test'
+import { currentLocales } from '../config/i18n'
 import { ACCENT_COLORS } from '../shared/utils/constants'
-
 import npmxDark from './theme'
 
 // related: https://github.com/npmx-dev/npmx.dev/blob/1431d24be555bca5e1ae6264434d49ca15173c43/test/nuxt/setup.ts#L12-L26

app/components/AppHeader.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { LinkBase } from '#components'
 import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
-import { isEditableElement } from '~/utils/input'
+import { LinkBase } from '#components'
 import { NPMX_DOCS_SITE } from '#shared/utils/constants'
+import { isEditableElement } from '~/utils/input'
 
 const keyboardShortcuts = useKeyboardShortcuts()
 const discord = useDiscordLink()

app/components/BlueskyComment.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { AppBskyRichtextFacet } from '@atproto/api'
-import { segmentize } from '@atcute/bluesky-richtext-segmenter'
 import type { Comment } from '#shared/types/blog-post'
+import { segmentize } from '@atcute/bluesky-richtext-segmenter'
 
 type RichtextFeature =
   | AppBskyRichtextFacet.Link

app/components/Compare/FacetBarChart.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
+import type { VueUiHorizontalBarConfig, VueUiHorizontalBarDatasetItem } from 'vue-data-ui'
 import { ref, computed } from 'vue'
 import { VueUiHorizontalBar } from 'vue-data-ui/vue-ui-horizontal-bar'
-import type { VueUiHorizontalBarConfig, VueUiHorizontalBarDatasetItem } from 'vue-data-ui'
-import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
-import { createChartPatternSlotMarkup } from '~/utils/charts'
 import { drawSmallNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
-
+import { createChartPatternSlotMarkup } from '~/utils/charts'
 import {
   loadFile,
   insertLineBreaks,
   sanitise,
   applyEllipsis,
   copyAltTextForCompareFacetBarChart,
 } from '~/utils/charts'
+import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
 
 import('vue-data-ui/style.css')
 

app/components/Header/AuthModal.client.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { isAtIdentifierString } from '@atproto/lex'
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { authRedirect } from '~/utils/atproto/helpers'
-import { isAtIdentifierString } from '@atproto/lex'
 
 const authModal = useModal('auth-modal')
 

app/components/Header/MobileMenu.client.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { NavigationConfigWithGroups } from '~/types'
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 import { useAtproto } from '~/composables/atproto/useAtproto'
-import type { NavigationConfigWithGroups } from '~/types'
 
 const isOpen = defineModel<boolean>('open', { default: false })
 const { links } = defineProps<{

app/components/Package/InstallScripts.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { getOutdatedTooltip, getVersionClass } from '~/utils/npm/outdated-dependencies'
 import type { RouteLocationRaw } from 'vue-router'
+import { getOutdatedTooltip, getVersionClass } from '~/utils/npm/outdated-dependencies'
 
 const props = defineProps<{
   packageName: string

app/components/Package/TrendsChart.vue

@@ -1,11 +1,4 @@
 <script setup lang="ts">
-import type { Theme as VueDataUiTheme, VueUiXyConfig, VueUiXyDatasetItem } from 'vue-data-ui'
-import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
-import { useDebounceFn, useElementSize, useTimeoutFn } from '@vueuse/core'
-import { useCssVariables } from '~/composables/useColors'
-import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch, lightenOklch } from '~/utils/colors'
-import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
-import { drawNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
 import type { RepoRef } from '#shared/utils/git-providers'
 import type {
   ChartTimeGranularity,
@@ -17,14 +10,21 @@ import type {
   WeeklyDataPoint,
   YearlyDataPoint,
 } from '~/types/chart'
-import { DATE_INPUT_MAX } from '~/utils/input'
+import type { Theme as VueDataUiTheme, VueUiXyConfig, VueUiXyDatasetItem } from 'vue-data-ui'
+import { useDebounceFn, useElementSize, useTimeoutFn } from '@vueuse/core'
+import { VueUiXy } from 'vue-data-ui/vue-ui-xy'
+import { drawNpmxLogoAndTaglineWatermark } from '~/composables/useChartWatermark'
+import { useCssVariables } from '~/composables/useColors'
 import {
   applyDataPipeline,
   endDateOnlyToUtcMs,
   DEFAULT_PREDICTION_POINTS,
 } from '~/utils/chart-data-prediction'
-import { applyBlocklistCorrection, getAnomaliesForPackages } from '~/utils/download-anomalies'
 import { copyAltTextForTrendLineChart, sanitise, loadFile, applyEllipsis } from '~/utils/charts'
+import { OKLCH_NEUTRAL_FALLBACK, transparentizeOklch, lightenOklch } from '~/utils/colors'
+import { applyBlocklistCorrection, getAnomaliesForPackages } from '~/utils/download-anomalies'
+import { getFrameworkColor, isListedFramework } from '~/utils/frameworks'
+import { DATE_INPUT_MAX } from '~/utils/input'
 
 import('vue-data-ui/style.css')
 

app/components/Package/Versions.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { compare, validRange } from 'semver'
 import type { RouteLocationRaw } from 'vue-router'
+import { compare, validRange } from 'semver'
 import { fetchAllPackageVersions } from '~/utils/npm/api'
 
 const props = defineProps<{