chore: stop using kongponents

Signed-off-by: John Cowen <john.cowen@konghq.com>

Author: johncowen

packages/kuma-gui/src/app/application/components/app-collection/AppCollection.vue

@@ -43,6 +43,7 @@
 </template>
 
 <script lang="ts" setup generic="Row extends {}">
+// @TODO: Why are we using kongponents?
 import { KTableView } from '@kong/kongponents'
 import { ref, onMounted } from 'vue'
 

packages/kuma-gui/src/app/application/components/data-collection/DataCollection.vue

@@ -88,8 +88,10 @@
   </template>
 </template>
 <script lang="ts" generic="T" setup>
+import { KPagination } from '@kong/kongponents'
 import { useThrottleFn } from '@vueuse/core'
 import { computed, useSlots } from 'vue'
+// @TODO: Why are we using kongponents?
 
 import { useDataEmptyState } from '../../'
 

packages/kuma-gui/src/app/policies/components/PolicyTypeEntryList.vue

@@ -116,6 +116,7 @@
 
 <script lang="ts" setup>
 
+// @TODO: Why are we using kongponents?
 import { KTableView } from '@kong/kongponents'
 
 import type { PolicyResourceType } from '../data'

packages/kuma-gui/src/app/service-mesh/index.ts

@@ -1,4 +1,3 @@
-import Kongponents from '@kong/kongponents'
 import { token } from '@kumahq/container'
 import X from '@kumahq/x'
 
@@ -106,7 +105,6 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
     [token('service-mesh.plugins'), {
       service: (i18n, can) => {
         return [
-          [Kongponents],
           [X, {
             i18n,
             protocolHandler: protocolHandler(can),

packages/kuma-gui/src/assets/styles/main.scss

@@ -2,4 +2,4 @@
 @use "base";
 
 /* this can't be componentized because it affects global styles for at least popup */
-@import "@kong/kongponents/dist/style.css";
+@use "@kumahq/x/src/index";

packages/x/package.json

@@ -8,6 +8,9 @@
   "main": "src/index.ts",
   "module": "src/index.ts",
   "types": "src/index.ts",
+  "files": [
+    "src/index.scss"
+  ],
   "scripts": {
     "help": "make help"
   },

packages/x/src/components/x-drawer/XDrawer.vue

@@ -18,6 +18,7 @@
 </template>
 
 <script lang="ts" setup>
+import { KSlideout } from '@kong/kongponents'
 import { onClickOutside, useThrottleFn } from '@vueuse/core'
 import { ref, provide, useId } from 'vue'
 

packages/x/src/components/x-error-state/XErrorState.vue

@@ -90,6 +90,7 @@
 
 <script lang="ts" setup generic="T extends Error & Partial<{ type: string, status: number, title: string, detail: string, instance: string, invalid_parameters: { field: string, reason: string, source: 'body' | 'header', rule?: string }[] }>">
 import { KUI_COLOR_TEXT_DANGER } from '@kong/design-tokens'
+import { KEmptyState } from '@kong/kongponents'
 import { inject } from 'vue'
 
 const props = withDefaults(defineProps<{

packages/x/src/components/x-progress/XProgress.vue

@@ -49,7 +49,7 @@
 </template>
 <script lang="ts" setup>
 import { KUI_COLOR_TEXT_NEUTRAL_WEAK } from '@kong/design-tokens'
-import { KEmptyState } from '@kong/kongponents'
+import { KEmptyState, KSkeletonBox, KSkeleton } from '@kong/kongponents'
 const props = withDefaults(defineProps<{
   variant?: 'list' | 'line' | 'spinner' | 'legacy' | 'header'
 }>(), {

packages/x/src/components/x-search/XSearch.vue

@@ -143,6 +143,7 @@
 </template>
 
 <script setup lang="ts">
+import { KPop } from '@kong/kongponents'
 import { useResizeObserver } from '@vueuse/core'
 import { ref, watch } from 'vue'