kevisual/theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

暂存添加编辑器和modal

Browse Source
This commit is contained in:
熊潇
2024-09-21 04:42:48 +08:00
commit ac8d69f06f
47 changed files with 5426 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/theme-preview/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

32
packages/theme-preview/eslint.config.js Normal file
View File

@@ -0,0 +1,32 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import react from 'eslint-plugin-react'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
'@typescript-eslint/no-explicit-any': 'off',
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
},
)

13
packages/theme-preview/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>开发flow的功能记录</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

53
packages/theme-preview/package.json Normal file
View File

@@ -0,0 +1,53 @@
{
"name": "theme-preview",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@abearxiong/ui": "0.0.1-alpha.0",
"@kevisual/codemirror": "workspace:^",
"@kevisual/ui": "workspace:^",
"antd": "^5.20.6",
"clsx": "^2.1.1",
"immer": "^10.1.1",
"lodash-es": "^4.17.21",
"nanoid": "^5.0.7",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router": "^6.26.2",
"react-router-dom": "^6.26.2",
"react-toastify": "^10.0.5",
"zustand": "^4.5.5"
},
"devDependencies": {
"@eslint/js": "^9.10.0",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/typography": "^0.5.15",
"@types/node": "^22.5.5",
"@types/react": "^18.3.8",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.20",
"eslint": "^9.10.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.12",
"globals": "^15.9.0",
"tailwind-merge": "^2.5.2",
"tailwindcss": "^3.4.12",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.6.2",
"typescript-eslint": "^8.6.0",
"vite": "^5.4.6"
}
}

1
packages/theme-preview/readme.md Normal file
View File

@@ -0,0 +1 @@
# 工作区其他库的测试和预览

29
packages/theme-preview/src/App.tsx Normal file
View File

@@ -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>
);
};

15
packages/theme-preview/src/globals.css Normal file
View File

@@ -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;
}
}

12
packages/theme-preview/src/index.css Normal file
View File

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

7
packages/theme-preview/src/main.tsx Normal file
View File

@@ -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 />);

25
packages/theme-preview/src/pages/codemirror/Json.tsx Normal file
View File

@@ -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>
);
};

29
packages/theme-preview/src/pages/codemirror/Ts.tsx Normal file
View File

@@ -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>
);
};

15
packages/theme-preview/src/pages/codemirror/index.tsx Normal file
View File

@@ -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>
);
};

73
packages/theme-preview/src/pages/model/index.tsx Normal file
View File

@@ -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>
);
};

3
packages/theme-preview/src/tailwind.css Normal file
View File

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

6
packages/theme-preview/src/vite-env.d.ts vendored Normal file
View File

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

36
packages/theme-preview/tailwind.config.js Normal file
View File

@@ -0,0 +1,36 @@
console.log('tailwind.config.js');
/** @type {import('tailwindcss').Config} */
export default {
darkMode: ['class'],
content: [
'./src/**/*.{ts,tsx}',
'./node_modules/@abearxiong/flows/components/**/*.{ts,tsx}', //
'./node_modules/@abearxiong/flows/hooks/**/*.{ts,tsx}', //
'./node_modules/@abearxiong/flows/src/**/*.{ts,tsx}' //
],
plugins: [require('@tailwindcss/aspect-ratio'), require('@tailwindcss/typography')],
theme: {
extend: {},
screen: {
sm: '640px',
// => @media (min-width: 640px) { ... }
md: '768px',
// => @media (min-width: 768px) { ... }
lg: '1024px',
// => @media (min-width: 1024px) { ... }
xl: '1280px',
// => @media (min-width: 1280px) { ... }
'2xl': '1536px',
// => @media (min-width: 1536px) { ... }
'3xl': '1920px',
// => @media (min-width: 1920) { ... }
'4xl': '2560px'
// => @media (min-width: 2560) { ... }
}
},
plugins: [require('tailwindcss-animate')]
};

24
packages/theme-preview/tsconfig.app.json Normal file
View File

@@ -0,0 +1,24 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"noImplicitAny": false,
"strict": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}

7
packages/theme-preview/tsconfig.json Normal file
View File

@@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

22
packages/theme-preview/tsconfig.node.json Normal file
View File

@@ -0,0 +1,22 @@
{
"compilerOptions": {
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["vite.config.ts"]
}

34
packages/theme-preview/vite.config.ts Normal file
View File

@@ -0,0 +1,34 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import path from 'path'
import nesting from 'tailwindcss/nesting'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
css: {
postcss: {
plugins: [nesting, tailwindcss, autoprefixer]
}
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
define: {
DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development')
},
server: {
port: 7101,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '/api')
}
}
}
})