暂存添加编辑器和modal

packages/theme-preview/src/App.tsx

@@ -0,0 +1,29 @@
+import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
+import { ConfigProvider } from 'antd';
+import { ToastContainer } from 'react-toastify';
+import { App as FlowApps } from './pages/model';
+import { App as CodeMirrorApp } from './pages/codemirror';
+
+export const App = () => {
+  return (
+    <div className='w-full h-full'>
+      <ConfigProvider
+        theme={{
+          token: {},
+        }}>
+        <Router>
+          <Routes>
+            <Route path='/' element={<Navigate to='/model/' />} />
+            <Route path='/model/*' element={<FlowApps />} />
+            <Route path='/codemirror/*' element={<CodeMirrorApp />} />
+            <Route path='/404' element={<div>404</div>} />
+            <Route path='*' element={<div>404</div>} />
+          </Routes>
+        </Router>
+      </ConfigProvider>
+      <div id='for-modal'></div>
+      <div id='ui-model-list'></div>
+      <ToastContainer />
+    </div>
+  );
+};

packages/theme-preview/src/globals.css

@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  h1 {
+    @apply text-2xl font-bold;
+  }
+  h2 {
+    @apply text-xl font-bold;
+  }
+  h3 {
+    @apply text-lg font-bold;
+  }
+}

packages/theme-preview/src/index.css

@@ -0,0 +1,12 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  font-family: 'Montserrat', sans-serif;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+}

packages/theme-preview/src/main.tsx

@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import { App } from './App.tsx';
+// import './tailwind.css';
+import './globals.css';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(<App />);

packages/theme-preview/src/pages/codemirror/Json.tsx

@@ -0,0 +1,25 @@
+import { createEditorInstance } from '@kevisual/codemirror/dist/editor.json';
+import { useEffect, useRef } from 'react';
+export const App = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    init();
+  }, []);
+  const init = () => {
+    const editor = createEditorInstance(ref.current!);
+    editor.dom.style.height = '100%';
+  };
+  return (
+    <div className='h-full w-full bg-gray-400'>
+      <div className='p-2 bg-white mb-4'>CodeMirror</div>
+      <div
+        className='rounded-md border shadow-md p-4 bg-white mx-8'
+        style={{
+          height: 'calc(100vh - 100px)',
+          overflow: 'auto',
+        }}>
+        <div ref={ref} className='h-full w-full'></div>
+      </div>
+    </div>
+  );
+};

packages/theme-preview/src/pages/codemirror/Ts.tsx

@@ -0,0 +1,29 @@
+import { createEditorInstance } from '@kevisual/codemirror';
+import { useEffect, useRef } from 'react';
+
+type AppProps = {
+  typescript?: boolean;
+};
+export const App = ({ typescript }: AppProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    init();
+  }, []);
+  const init = () => {
+    const editor = createEditorInstance(ref.current!, { typescript });
+    editor.dom.style.height = '100%';
+  };
+  return (
+    <div className='h-full w-full bg-gray-400'>
+      <div className='p-2 bg-white mb-4'>CodeMirror</div>
+      <div
+        className='rounded-md border shadow-md p-4 bg-white mx-8'
+        style={{
+          height: 'calc(100vh - 100px)',
+          overflow: 'auto',
+        }}>
+        <div ref={ref} className='h-full w-full'></div>
+      </div>
+    </div>
+  );
+};

packages/theme-preview/src/pages/codemirror/index.tsx

@@ -0,0 +1,15 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+
+import { App as TsApp } from './Ts';
+import { App as JsonApp } from './Json';
+
+export const App = () => {
+  return (
+    <Routes>
+      <Route path='/' element={<Navigate to='/codemirror/ts' />} />
+      <Route path='/ts' element={<TsApp typescript={true} />} />
+      <Route path='/js' element={<TsApp />} />
+      <Route path='/json' element={<JsonApp />} />
+    </Routes>
+  );
+};

packages/theme-preview/src/pages/model/index.tsx

@@ -0,0 +1,73 @@
+import { modalStore, Modal, DialogModal } from '@kevisual/ui';
+import { calc } from 'antd/es/theme/internal';
+import { useEffect, useRef } from 'react';
+import '@kevisual/ui/src/index.css';
+export const App = () => {
+  const showModel = () => {
+    //
+  };
+  return (
+    <div className='flex flex-col w-full h-full bg-gray-400'>
+      <div className='p-2 bg-white rounded-md border-b rounded-s rounded-e'>Model</div>
+      <div
+        className='mt-2 mx-4 bg-white p-2 rounded-md border shadow-sm flex flex-wrap gap-2'
+        style={{
+          height: 'calc(100vh - 100px)',
+          overflow: 'auto',
+        }}>
+        <ModelOne />
+        <ModelTwo />
+      </div>
+    </div>
+  );
+};
+
+const ModelOne = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const showModel = () => {
+    const model = Modal.render(ref.current!, {});
+  };
+  return (
+    <div>
+      <div className='w-100 h-100 p-4 rounded-md shadow-md bg-slate-200'>
+        model one
+        <div className='cursor-pointer p-2 border' onClick={showModel}>
+          show
+        </div>
+        <div ref={ref}> 当前元素是Model的渲染内容</div>
+      </div>
+    </div>
+  );
+};
+
+const ModelTwo = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const showModel = () => {
+    const model = DialogModal.render(ref.current!, {
+      dialogTitle: 'Dialog Modal',
+      width: '400px',
+      dialogTitleCloseIcon: true,
+      contentStyle: {
+        // maxHeight: '100px',
+        // overflow: 'auto',
+      }
+    });
+  };
+  return (
+    <div>
+      <div className='w-100 h-100 p-4 rounded-md shadow-md bg-slate-200'>
+        model two
+        <div className='cursor-pointer p-2 border' onClick={showModel}>
+          show
+        </div>
+        <div ref={ref}>
+          当前元素是Modal Dialog 的渲染内容
+          <div>内容</div>
+          <div>内容2</div>
+          <div>内容3</div>
+          <div>内容4</div>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/theme-preview/src/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/theme-preview/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+type SimpleObject = {
+  [key: string | number]: any;
+};
+
+declare let DEV_SERVER: boolean;