Merge pull request #53 from tidbcloud/chore/refine-playground

chore: refine playground and example, make dark default
tidbcloud · Jul 5, 2024 · 4bc642d · 4bc642d
2 parents e1f624e + dce988c
commit 4bc642d
Show file tree

Hide file tree

Showing 17 changed files with 144 additions and 81 deletions.
diff --git a/README.md b/README.md
@@ -21,27 +21,27 @@ https://github.com/tidbcloud/tisqleditor/assets/1284531/732b600f-5b4e-45d3-a3d2-
 
 ## Packages
 
-| package                                          | desc                                                                      |
-| ------------------------------------------------ | ------------------------------------------------------------------------- |
-| @tidbcloud/tisqleditor                           | SQLEditorInstance with pre-configured extensions                          |
-| @tidbcloud/tisqleditor-react                     | React component wrapper                                                   |
-| @tidbcloud/codemirror-extension-ai-widget        | a widget to chat with AI to help write or refine SQL                      |
-| @tidbcloud/codemirror-extension-sql-parser       | parse the editor content to SQL statements                                |
-| @tidbcloud/codemirror-extension-cur-sql          | get the selected SQL statements                                           |
-| @tidbcloud/codemirror-extension-cur-sql-gutter   | show gutter for the selected SQL statements                               |
-| @tidbcloud/codemirror-extension-sql-autocomplete | SQL keyword and database schema autocomplete                              |
-| @tidbcloud/codemirror-extension-linters          | use db statement, full width chars, and regular expression linters        |
-| @tidbcloud/codemirror-extension-save-helper      | save the editor content if it changes                                     |
-| @tidbcloud/codemirror-extension-events           | 2 normal kinds of event listener: doc change, selection change            |
-| @tidbcloud/codemirror-extension-themes           | 2 simple builtin themes, `bbedit` for light mode, `oneDark` for dark mode |
-| @tidbcloud/codemirror-extension-basic-setup      | basic configuration for codemirror                                        |
+| package                                                                                              | desc                                                                      |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| [@tidbcloud/tisqleditor](./packages/core/README.md)                                                  | SQLEditorInstance with pre-configured extensions                          |
+| [@tidbcloud/tisqleditor-react](./packages/react/README.md)                                           | React component wrapper                                                   |
+| [@tidbcloud/codemirror-extension-ai-widget](./packages/extensions/ai-widget/README.md)               | a widget to chat with AI to help write or refine SQL                      |
+| [@tidbcloud/codemirror-extension-sql-parser](./packages/extensions/sql-parser/README.md)             | parse the editor content to SQL statements                                |
+| [@tidbcloud/codemirror-extension-cur-sql](./packages/extensions/cur-sql/README.md)                   | get the selected SQL statements                                           |
+| [@tidbcloud/codemirror-extension-cur-sql-gutter](./packages/extensions/cur-sql-gutter/README.md)     | show gutter for the selected SQL statements                               |
+| [@tidbcloud/codemirror-extension-sql-autocomplete](./packages/extensions/sql-autocomplete/README.md) | SQL keyword and database schema autocomplete                              |
+| [@tidbcloud/codemirror-extension-linters](./packages/extensions/linters/README.md)                   | use db statement, full width chars, and regular expression linters        |
+| [@tidbcloud/codemirror-extension-save-helper](./packages/extensions/save-helper/README.md)           | save the editor content if it changes                                     |
+| [@tidbcloud/codemirror-extension-events](./packages/extensions/events/README.md)                     | 2 normal kinds of event listener: doc change, selection change            |
+| [@tidbcloud/codemirror-extension-themes](./packages/extensions/themes/README.md)                     | 2 simple builtin themes, `bbedit` for light mode, `oneDark` for dark mode |
+| [@tidbcloud/codemirror-extension-basic-setup](./packages/extensions/basic-setup/README.md)           | basic configuration for codemirror                                        |
 
 ## Usage
 
 See [editor.tsx](./packages/playground/src/components/biz/editor-panel/editor.tsx) or [editor-example.tsx](./packages/playground/src/examples/editor-example.tsx) to get more details.
 
 ```shell
-pnpm add @tidbcloud/tisqleditor-react @tidbcloud/codemirror-extension-themes @tidbcloud/codemirror-extension-cur-sql-gutter
+npm install @tidbcloud/tisqleditor-react @tidbcloud/codemirror-extension-themes @tidbcloud/codemirror-extension-cur-sql-gutter
 ```
 
 ```tsx
@@ -53,7 +53,7 @@ export function Editor() {
   return (
     <SQLEditor
       editorId="MySQLEditor"
-      doc={'USE game;\n'}
+      doc={'USE game;\nSELECT * from games;'}
       theme={oneDark}
       basicSetupOptions={{
         autocompletion: true
@@ -100,7 +100,7 @@ Before you create a pull request, please check whether your commits comply with
 
 ### Test
 
-To run the test, execute the command `pnpm test`
+Run `pnpm test` to test.
 
 ### Release
 

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -33,7 +33,7 @@ const editorInst = createSQLEditorInstance({
 cache.addEditor(editorId, editorInst)
 ```
 
-The package installs the cur-sql and sql-parser extensions default, can use the following methods:
+The package pre-installs the `sql-parser` and `cur-sql` extensions default internally, you can use the following methods:
 
 ```ts
 const curSql = editorInst.getCurStatements()

diff --git a/packages/extensions/basic-setup/README.md b/packages/extensions/basic-setup/README.md
@@ -1,6 +1,7 @@
 # @tidbcloud/codemirror-extension-basic-setup
 
 Default basic configuration for codemirror.
+
 This package depends on most of the codemirror core library packages and exports extension bundles to help set up a simple editor in a few lines of code.
 
 ## Installation
@@ -37,7 +38,7 @@ const editorView = new EditorView({
 })
 ```
 
-If you have used @tidbcloud/tisqleditor component, as it used baisc-setup and has some default config values, to override the default values, you can use basicSetupOptions, it has a higher priority, and can config it like this:
+If you have used `@tidbcloud/tisqleditor` component, as it used `basic-setup` internally and has some default config values. To override the default values, you can use `basicSetupOptions`, it has a higher priority, and can config it like this:
 
 ```ts
 import { EditorView } from '@codemirror/view'

diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx
@@ -24,7 +24,7 @@ function FullFeaturedPlayground() {
   return (
     <QueryClientProvider client={queryClient}>
       <EditorCacheProvider>
-        <ThemeProvider>
+        <ThemeProvider defaultTheme="dark">
           <StatementProvider>
             <SchemaProvider>
               <FilesProvider>
@@ -43,15 +43,23 @@ function FullFeaturedPlayground() {
 function App() {
   const params = new URLSearchParams(window.location.search)
   const example = params.get('example')
-  const theme = params.get('theme') ?? 'bbedit'
   const withSelect = params.get('with_select')
 
+  const editorTheme = params.get('theme') ?? 'oneDark'
+
   if (example !== null) {
     if (withSelect !== null) {
-      return <EditorExampleWithSelect defExample={example} defTheme={theme} />
+      return (
+        <ThemeProvider>
+          <EditorExampleWithSelect
+            defExample={example}
+            defTheme={editorTheme}
+          />
+        </ThemeProvider>
+      )
     }
 
-    return <EditorExample example={example} theme={theme} />
+    return <EditorExample example={example} theme={editorTheme} />
   }
 
   return <FullFeaturedPlayground />

diff --git a/packages/playground/src/components/biz/editor-panel/opened-files.tsx b/packages/playground/src/components/biz/editor-panel/opened-files.tsx
@@ -32,7 +32,8 @@ export function OpenedFilesTabs() {
       if (next.length > 0) {
         setActiveFileId(next[0].id)
       } else {
-        setActiveFileId(null)
+        // setActiveFileId(null)
+        setActiveFileId('')
       }
     }
   }

diff --git a/packages/playground/src/components/biz/files-panel/actions.tsx b/packages/playground/src/components/biz/files-panel/actions.tsx
@@ -6,7 +6,7 @@ import {
   ReloadIcon
 } from '@radix-ui/react-icons'
 import dayjs from 'dayjs'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 
 import { useFilesContext } from '@/contexts/files-context'
 import { Button } from '@/components/ui/button'
@@ -30,6 +30,7 @@ import {
 } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { cn } from '@/lib/utils'
+import { useFilesQuery } from '@/hooks/use-files-loader'
 
 function AddFileButton() {
   const {
@@ -241,14 +242,7 @@ function DelFileAlertDialog() {
 }
 
 function ReloadButton() {
-  const {
-    api: { loadFiles }
-  } = useFilesContext()
-
-  const { isFetching, refetch } = useQuery({
-    queryKey: ['sql_files'],
-    queryFn: loadFiles
-  })
+  const { isFetching, refetch } = useFilesQuery()
 
   return (
     <Button

diff --git a/packages/playground/src/components/biz/files-panel/list.tsx b/packages/playground/src/components/biz/files-panel/list.tsx
@@ -1,30 +1,28 @@
 import { useEffect } from 'react'
 
-import { useQuery } from '@tanstack/react-query'
-
 import { IFile, useFilesContext } from '@/contexts/files-context'
 import { Skeleton } from '@/components/ui/skeleton'
+import { useFilesQuery } from '@/hooks/use-files-loader'
 
 export function FilesList() {
   const {
     state: {
       allFiles,
-      setAllFiles,
       openedFiles,
       setOpenedFiles,
       activeFileId,
       setActiveFileId
     },
-    api: { loadFiles, openFile }
+    api: { openFile }
   } = useFilesContext()
 
-  const { data: filesData, isLoading } = useQuery({
-    queryKey: ['sql_files'],
-    queryFn: loadFiles
-  })
+  const { isLoading } = useFilesQuery()
+
   useEffect(() => {
-    setAllFiles(filesData ?? [])
-  }, [filesData])
+    if (activeFileId === null && allFiles.length > 0) {
+      handleOpenFile(allFiles[0])
+    }
+  }, [allFiles, activeFileId])
 
   async function handleOpenFile(file: IFile) {
     setActiveFileId(file.id)

diff --git a/packages/playground/src/components/biz/left-panel.tsx b/packages/playground/src/components/biz/left-panel.tsx
@@ -1,6 +1,7 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+
 import FilesPanel from './files-panel'
-import { SchemasPanel } from './schemas-panel'
+import { SchemaPanel } from './schema-panel'
 
 export function LeftPanel() {
   return (
@@ -12,17 +13,17 @@ export function LeftPanel() {
       </div>
 
       <div className="p-2 pt-0">
-        <Tabs defaultValue="schemas">
+        <Tabs defaultValue="sql-files">
           <TabsList>
-            <TabsTrigger value="schemas">Schemas</TabsTrigger>
             <TabsTrigger value="sql-files">SQL Files</TabsTrigger>
+            <TabsTrigger value="schemas">Schemas</TabsTrigger>
           </TabsList>
-          <TabsContent value="schemas">
-            <SchemasPanel />
-          </TabsContent>
           <TabsContent value="sql-files">
             <FilesPanel />
           </TabsContent>
+          <TabsContent value="schemas">
+            <SchemaPanel />
+          </TabsContent>
         </Tabs>
       </div>
     </div>

diff --git a/.../components/biz/schemas-panel/actions.tsx → ...c/components/biz/schema-panel/actions.tsx b/.../components/biz/schemas-panel/actions.tsx → ...c/components/biz/schema-panel/actions.tsx
@@ -1,17 +1,11 @@
 import { ReloadIcon } from '@radix-ui/react-icons'
-import { useQuery } from '@tanstack/react-query'
 
 import { Button } from '@/components/ui/button'
-import { useSchemaContext } from '@/contexts/schema-context'
 import { cn } from '@/lib/utils'
+import { useSchemaQuery } from '@/hooks/use-schema-loader'
 
 function ReloadButton() {
-  const { loadSchema } = useSchemaContext()
-
-  const { isFetching, refetch } = useQuery({
-    queryKey: ['db_schema'],
-    queryFn: loadSchema
-  })
+  const { isFetching, refetch } = useSchemaQuery()
 
   return (
     <Button

diff --git a/...rc/components/biz/schemas-panel/index.tsx → ...src/components/biz/schema-panel/index.tsx b/...rc/components/biz/schemas-panel/index.tsx → ...src/components/biz/schema-panel/index.tsx
@@ -1,11 +1,11 @@
 import { SchemaActions } from './actions'
-import { SchemasTree } from './schemas-tree'
+import { SchemaTree } from './schema-tree'
 
-export function SchemasPanel() {
+export function SchemaPanel() {
   return (
     <div>
       <SchemaActions />
-      <SchemasTree />
+      <SchemaTree />
     </div>
   )
 }
diff --git a/...onents/biz/schemas-panel/schemas-tree.tsx → ...mponents/biz/schema-panel/schema-tree.tsx b/...onents/biz/schemas-panel/schemas-tree.tsx → ...mponents/biz/schema-panel/schema-tree.tsx
@@ -6,19 +6,11 @@ import {
 } from '@/components/ui/accordion'
 import { Skeleton } from '@/components/ui/skeleton'
 import { useSchemaContext } from '@/contexts/schema-context'
-import { useQuery } from '@tanstack/react-query'
-import { useEffect } from 'react'
+import { useSchemaQuery } from '@/hooks/use-schema-loader'
 
-export function SchemasTree() {
-  const { loadSchema, schema, setSchema } = useSchemaContext()
-
-  const { data: schemaData, isLoading } = useQuery({
-    queryKey: ['db_schema'],
-    queryFn: loadSchema
-  })
-  useEffect(() => {
-    setSchema(schemaData ?? null)
-  }, [schemaData])
+export function SchemaTree() {
+  const { schema } = useSchemaContext()
+  const { isLoading } = useSchemaQuery()
 
   if (isLoading) {
     return (

diff --git a/packages/playground/src/components/darkmode-toggle/theme-provider.tsx b/packages/playground/src/components/darkmode-toggle/theme-provider.tsx
@@ -25,7 +25,7 @@ const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
 export function ThemeProvider({
   children,
   defaultTheme = 'system',
-  storageKey = 'tisqleditor.ui.theme',
+  storageKey = 'tisqleditor.ui.theme.v1',
   ...props
 }: ThemeProviderProps) {
   const [theme, setTheme] = useState<Theme>(

diff --git a/packages/playground/src/contexts/files-context-provider.tsx b/packages/playground/src/contexts/files-context-provider.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react'
-import { IFile, FilesContext } from './files-context'
 import {
   addFile,
   delFile,
@@ -8,9 +7,16 @@ import {
   renameFile,
   saveFile
 } from '@/api/mock/files-api'
+import { useFilesLoader } from '@/hooks/use-files-loader'
+import { IFile, FilesContext } from './files-context'
 
 //----------------------------------------------
 
+function FilesLoader() {
+  useFilesLoader()
+  return null
+}
+
 export function FilesProvider(props: { children: React.ReactNode }) {
   const [allFiles, setAllFiles] = React.useState<IFile[]>([])
   const [openedFiles, setOpenedFiles] = React.useState<IFile[]>([])
@@ -40,6 +46,7 @@ export function FilesProvider(props: { children: React.ReactNode }) {
 
   return (
     <FilesContext.Provider value={ctxValue}>
+      <FilesLoader />
       {props.children}
     </FilesContext.Provider>
   )

diff --git a/packages/playground/src/contexts/schema-context-provider.tsx b/packages/playground/src/contexts/schema-context-provider.tsx
@@ -1,6 +1,13 @@
 import React, { useMemo } from 'react'
-import { SchemaContext, SchemaRes } from './schema-context'
+
 import { getSchema } from '@/api/tidbcloud/schema-api'
+import { SchemaContext, SchemaRes } from './schema-context'
+import { useSchemaLoader } from '@/hooks/use-schema-loader'
+
+function SchemaLoader() {
+  useSchemaLoader()
+  return null
+}
 
 export function SchemaProvider(props: { children: React.ReactNode }) {
   const [schema, setSchema] = React.useState<SchemaRes | null>(null)
@@ -12,6 +19,7 @@ export function SchemaProvider(props: { children: React.ReactNode }) {
 
   return (
     <SchemaContext.Provider value={ctxValue}>
+      <SchemaLoader />
       {props.children}
     </SchemaContext.Provider>
   )