chore: replace components with core-ui, upgrade eslint

src/pages/backends/community/add-community-modal.tsx

@@ -1,7 +1,6 @@
 import { enabledBackendsAtom } from '@/atoms/backend';
-import GSDrawer from '@/components/scroller-modal/gs-drawer';
-import ColumnWrapper from '@/pages/_components/column-wrapper';
 import Separator from '@/pages/llmodels/components/separator';
+import { ColumnWrapper, GSDrawer } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { useAtom } from 'jotai';
 import React, { useEffect } from 'react';

src/pages/backends/community/backend-detail.tsx

@@ -1,13 +1,11 @@
-import AutoTooltip from '@/components/auto-tooltip';
-import FullMarkdown from '@/components/markdown-viewer/full-markdown';
 import { BulbOutlined } from '@ant-design/icons';
+import { AutoTooltip, FullMarkdown } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button, Tag } from 'antd';
 import _ from 'lodash';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { generateIcon } from '../components/backend-card';
-
 const Title = styled.div`
   position: sticky;
   top: 0;

src/pages/backends/community/commnity-backends.tsx

@@ -1,8 +1,7 @@
 import { enabledBackendsAtom } from '@/atoms/backend';
-import IconFont from '@/components/icon-font';
-import ThemeTag from '@/components/tags-wrapper/theme-tag';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { SearchOutlined } from '@ant-design/icons';
+import { IconFont, ThemeTag } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Input, Tooltip } from 'antd';
 import { useAtom } from 'jotai';

src/pages/backends/components/add-modal.tsx

@@ -1,10 +1,12 @@
-import AlertBlockInfo from '@/components/alert-info/block';
-import IconFont from '@/components/icon-font';
-import ModalFooter from '@/components/modal-footer';
-import GSDrawer from '@/components/scroller-modal/gs-drawer';
-import SegmentLine from '@/components/segment-line';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
+import {
+  AlertBlockInfo,
+  GSDrawer,
+  IconFont,
+  ModalFooter,
+  SegmentLine
+} from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Tabs } from 'antd';
 import _ from 'lodash';

src/pages/backends/components/backend-card.tsx

@@ -1,9 +1,11 @@
-import AutoTooltip from '@/components/auto-tooltip';
-import DropDownActions from '@/components/drop-down-actions';
-import IconFont from '@/components/icon-font';
-import TagWrapper from '@/components/tags-wrapper';
-import ThemeTag from '@/components/tags-wrapper/theme-tag';
-import Card from '@/components/templates/card';
+import {
+  AutoTooltip,
+  DropdownActions,
+  IconFont,
+  TagsWrapper,
+  TemplateCard,
+  ThemeTag
+} from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button, Tag } from 'antd';
 import _ from 'lodash';
@@ -22,8 +24,7 @@ import {
   TagColorMap
 } from '../config';
 import { ListItem } from '../config/types';
-
-const StyledCard = styled(Card)`
+const StyledCard = styled(TemplateCard)`
   &:hover {
     .operations {
       background-color: var(--ant-color-fill-tertiary);
@@ -231,11 +232,11 @@ const BackendCard: React.FC<BackendCardProps> = ({
             {intl.formatMessage({ id: 'backend.availableFrameworks' })}:{' '}
           </span>
         </span>
-        <TagWrapper
+        <TagsWrapper
           gap={8}
           dataList={frameworks}
           renderTag={renderTag}
-        ></TagWrapper>
+        ></TagsWrapper>
       </InfoItem>
     );
   };
@@ -279,7 +280,7 @@ const BackendCard: React.FC<BackendCardProps> = ({
       actionsRenderer(data)
     ) : (
       <span onClick={handleonClickAction} className="operations">
-        <DropDownActions
+        <DropdownActions
           menu={{
             items: actions,
             onClick: handleOnSelect
@@ -290,7 +291,7 @@ const BackendCard: React.FC<BackendCardProps> = ({
             size="small"
             type="text"
           ></Button>
-        </DropDownActions>
+        </DropdownActions>
       </span>
     );
   };

src/pages/backends/components/backend-list.tsx

@@ -1,7 +1,9 @@
-import ResizeContainer from '@/components/resize-container';
-import CardSkeleton from '@/components/templates/card-skelton';
-import InfiniteScroller from '@/pages/_components/infinite-scroller';
-import { useScrollerContext } from '@/pages/_components/infinite-scroller/use-scroller-context';
+import {
+  InfiniteScroller,
+  ResizeContainer,
+  TemplateCardSkeleton
+} from '@gpustack/core-ui';
+import { useScrollerContext } from '@gpustack/core-ui/lib/components/infinite-scroller/use-scroller-context';
 import { Spin } from 'antd';
 import React from 'react';
 import backendListCss from '../styles/backend-list.less';
@@ -38,7 +40,7 @@ const ListSkeleton: React.FC<{
           >
             {isFirst && (
               <div className={backendListCss.SkeletonWrapper}>
-                <CardSkeleton
+                <TemplateCardSkeleton
                   skeletonProps={{
                     title: false
                   }}
@@ -47,7 +49,7 @@ const ListSkeleton: React.FC<{
                     flexDirection: 'column',
                     gap: 24
                   }}
-                ></CardSkeleton>
+                ></TemplateCardSkeleton>
               </div>
             )}
           </Spin>

src/pages/backends/components/import-yaml.tsx

@@ -1,6 +1,6 @@
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
-import YamlEditor from '@/pages/_components/yaml-editor';
+import { YamlEditor } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import React, {
   forwardRef,

src/pages/backends/components/version-info-modal.tsx

@@ -1,5 +1,5 @@
-import ScrollerModal from '@/components/scroller-modal';
 import { PlusOutlined } from '@ant-design/icons';
+import { ScrollerModal } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button } from 'antd';
 import _ from 'lodash';

src/pages/backends/config/index.ts

@@ -2,12 +2,12 @@ import MindIELogo from '@/assets/logo/ascend.png';
 import SGLangLogo from '@/assets/logo/sglang.png';
 import vLLMLogo from '@/assets/logo/vllm.png';
 import VoxBoxLogo from '@/assets/logo/voxbox.png';
-import icons from '@/components/icon-font/icons';
 import { backendOptionsMap } from '@/pages/llmodels/constants/backend-parameters';
 import {
   GPUDriverMap,
   ManufacturerMap
 } from '@/pages/resources/config/gpu-driver';
+import icons from '@gpustack/core-ui/lib/components/icon-font/icons';
 import jsYaml from 'js-yaml';
 import { trim } from 'lodash';
 

src/pages/backends/forms/basic.tsx

@@ -1,9 +1,11 @@
-import LabelSelector from '@/components/label-selector';
-import ListInput from '@/components/list-input';
-import SealInput from '@/components/seal-form/seal-input';
-import SealTextArea from '@/components/seal-form/seal-textarea';
 import { PageAction } from '@/config';
 import useAppUtils from '@/hooks/use-app-utils';
+import {
+  Input as CInput,
+  LabelSelector,
+  ListInput,
+  Textarea as SealTextArea
+} from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import { useEffect } from 'react';
@@ -39,7 +41,7 @@ const BasicForm = () => {
           }
         ]}
       >
-        <SealInput.Input
+        <CInput.Input
           trim
           addAfter={
             backendSource === BackendSourceValueMap.CUSTOM ? '-custom' : null
@@ -47,10 +49,10 @@ const BasicForm = () => {
           disabled={action === PageAction.EDIT}
           label={intl.formatMessage({ id: 'common.table.name' })}
           required
-        ></SealInput.Input>
+        ></CInput.Input>
       </Form.Item>
       <Form.Item<FormData> hidden name="backend_source">
-        <SealInput.Input></SealInput.Input>
+        <CInput.Input></CInput.Input>
       </Form.Item>
       {backendSource !== BackendSourceValueMap.BUILTIN && (
         <>
@@ -58,11 +60,11 @@ const BasicForm = () => {
             name="health_check_path"
             rules={[{ required: false }]}
           >
-            <SealInput.Input
+            <CInput.Input
               trim
               placeholder={`/v1/models`}
               label={intl.formatMessage({ id: 'backend.form.healthCheckPath' })}
-            ></SealInput.Input>
+            ></CInput.Input>
           </Form.Item>
           <Form.Item name="default_run_command">
             <SealTextArea
@@ -113,10 +115,10 @@ const BasicForm = () => {
       </Form.Item>
 
       <Form.Item<FormData> name="description" rules={[{ required: false }]}>
-        <SealInput.TextArea
+        <CInput.TextArea
           scaleSize={true}
           label={intl.formatMessage({ id: 'common.table.description' })}
-        ></SealInput.TextArea>
+        ></CInput.TextArea>
       </Form.Item>
     </>
   );

src/pages/backends/forms/version-info.tsx

@@ -1,7 +1,9 @@
-import AutoTooltip from '@/components/auto-tooltip';
-import CopyButton from '@/components/copy-button';
-import BaseSelect from '@/components/seal-form/base/select';
-import ThemeTag from '@/components/tags-wrapper/theme-tag';
+import {
+  AutoTooltip,
+  BaseSelect,
+  CopyButton,
+  ThemeTag
+} from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Empty, Typography } from 'antd';
 import { useState } from 'react';
@@ -14,7 +16,6 @@ import {
   TagColorMap
 } from '../config';
 import { VersionListItem } from '../config/types';
-
 const ItemWrapper = styled.div`
   display: flex;
   flex-direction: column;

src/pages/backends/forms/versions-config.tsx

@@ -1,12 +1,14 @@
-import CollapsibleContainer from '@/components/collapse-container';
-import LabelSelector from '@/components/label-selector';
-import BaseSelect from '@/components/seal-form/base/select';
-import SealInput from '@/components/seal-form/seal-input';
-import SealSelect from '@/components/seal-form/seal-select';
-import SealTextArea from '@/components/seal-form/seal-textarea';
 import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
+import {
+  BaseSelect,
+  Input as CInput,
+  CollapseContainer,
+  LabelSelector,
+  Select as SealSelect,
+  Textarea as SealTextArea
+} from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Button, Form, Tag } from 'antd';
 import React, { useEffect, useMemo } from 'react';
@@ -14,7 +16,6 @@ import styled from 'styled-components';
 import { BackendSourceValueMap, frameworks } from '../config';
 import { useFormContext } from '../config/form-context';
 import { ListItem } from '../config/types';
-
 // version must be endwith '-custom'
 
 const Box = styled.div`
@@ -263,7 +264,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
                   border: '1px solid var(--ant-color-split)'
                 }}
               >
-                <CollapsibleContainer
+                <CollapseContainer
                   collapsible={true}
                   showExpandIcon={true}
                   key={name}
@@ -289,7 +290,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
                       )}
                     </Label>
                   }
-                  onToggle={(open) => onToggle(open, name)}
+                  onToggle={(open: boolean) => onToggle(open, name)}
                   deleteBtn={false}
                   right={
                     <div className="flex-center gap-8">
@@ -328,13 +329,13 @@ const VersionsForm: React.FC<AddModalProps> = ({
                         }
                       ]}
                     >
-                      <SealInput.Input
+                      <CInput.Input
                         trim
                         addAfter={showCustomSuffix ? '-custom' : null}
                         onChange={handleVersionChange}
                         label={intl.formatMessage({ id: 'backend.version' })}
                         required
-                      ></SealInput.Input>
+                      ></CInput.Input>
                     </Form.Item>
                     <Form.Item
                       name={[name, 'image_name']}
@@ -345,7 +346,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
                         }
                       ]}
                     >
-                      <SealInput.Input
+                      <CInput.Input
                         trim
                         required
                         placeholder={intl.formatMessage(
@@ -353,7 +354,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
                           { content: 'vllm/vllm-openai:v0.12.0' }
                         )}
                         label={intl.formatMessage({ id: 'backend.imageName' })}
-                      ></SealInput.Input>
+                      ></CInput.Input>
                     </Form.Item>
                   </Box>
                   <Form.Item
@@ -374,7 +375,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
                     />
                   </Form.Item>
                   <Form.Item name={[name, 'entrypoint']}>
-                    <SealInput.TextArea
+                    <CInput.TextArea
                       allowClear
                       description={intl.formatMessage({
                         id: 'backend.entrypoint.tips'
@@ -382,7 +383,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
                       label={intl.formatMessage({
                         id: 'backend.replaceEntrypoint'
                       })}
-                    ></SealInput.TextArea>
+                    ></CInput.TextArea>
                   </Form.Item>
                   <Form.Item name={[name, 'run_command']}>
                     <SealTextArea
@@ -413,7 +414,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
                       }
                     ></LabelSelector>
                   </Form.Item>
-                </CollapsibleContainer>
+                </CollapseContainer>
               </div>
             ));
           }}

src/pages/backends/hooks/use-create-backend.tsx

@@ -1,7 +1,7 @@
-import IconFont from '@/components/icon-font';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import useBodyScroll from '@/hooks/use-body-scroll';
+import { IconFont } from '@gpustack/core-ui';
 import { ListItem } from '../config/types';
 import useCommunityBackend from './use-community-backend';
 import useCustomBackend from './use-custom-backend';

src/pages/backends/index.tsx

@@ -1,8 +1,6 @@
-import DeleteModal from '@/components/delete-modal';
-import IconFont from '@/components/icon-font';
-import { FilterBar } from '@/components/page-tools';
 import { PageAction } from '@/config';
 import useTableFetch from '@/hooks/use-table-fetch';
+import { DeleteModal, FilterBar, IconFont } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
 import _ from 'lodash';