refactor: make code simple (#3)

antvis · Jun 12, 2024 · 48516fd · 48516fd
1 parent be4e662
commit 48516fd
Show file tree

Hide file tree

Showing 58 changed files with 281 additions and 18,412 deletions.
diff --git a/.dumi/hooks/useDark.tsx b/.dumi/hooks/useDark.tsx
diff --git a/.dumi/pages/index.tsx b/.dumi/pages/index.tsx
diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
diff --git a/.dumi/tsconfig.json b/.dumi/tsconfig.json
diff --git a/.dumirc.ts b/.dumirc.ts
diff --git a/.fatherrc.ts b/.fatherrc.ts
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,30 @@
-node_modules
-/dist
-.dumi/tmp
-.dumi/tmp-test
-.dumi/tmp-production
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+yarn.lock
+package-lock.json
+pnpm-lock.yaml
+
+# Sys
 .DS_Store
+.idea
+
+# Node
+node_modules/
+.npmrc
+
+# Build
+dist
+lib
+esm
+es
+
+# Test
+coverage
+
+# Bundle visualizer
+stats.html
diff --git a/.husky/commit-msg b/.husky/commit-msg
diff --git a/.npmrc b/.npmrc
diff --git a/.stylelintrc b/.stylelintrc
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/README.md b/README.md
@@ -1,37 +1,78 @@
-# GPT-Vis [![github](http://img.shields.io/npm/dm/GPT-Vis.svg?style=flat)](https://github.com/eosphoros-ai/GPT-Vis)
+<h1 align="center">
+<b>GPT-VIS</b>
+</h1>
+
+<div align="center">
+Components for GPTs, generative AI, and LLM projects. Not only UI Components.
+
 ![GPT-vis logo-06](https://github.com/eosphoros-ai/GPT-Vis/assets/17919400/c8804ffb-d3d6-45d3-846f-cf217681ab05)
 
+</div>
+
+## 特性
+
+- 🤖 **LLM 相关**：针对 LLM 对话式交互，以及服务端序列化输出而设计，方便快速集成到 AI 应用中。
+- 🍡 **丰富组件**：内置有 20+ 美观好看的常用 UI 组件，满足常规需求。
+- 🔨 **易于扩展**：对于自己的特殊 UI 定制需求，提供方便的扩展机制和架构设计。
+
+## 安装
 
-## Usage
+使用 NodeJS 包管理工具安装依赖。
 
-TODO
+```bash
+$npm i --save gpt-vis
+```
+
+## 快速使用
 
-## Options
+快速使用 gpt-vis渲染出对话卡片的 UI。
 
-TODO
+```tsx
+import { Conversation, Components } from 'gpt-vis';
+
+function Demo() {
+  // 服务端返回的协议内容
+  const content =
+    '# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.';
+
+  return <Conversation components={Components}>{content}</Conversation>;
+}
+```
+
+使用自定义的 UI 组件。UI 渲染最终使用 markdown 格式，所以自定义的方式有两种，一种是基于 markdown code 标签去扩展语言，一种是扩展标签。
+
+````tsx
+import { Conversation, Components } from 'gpt-vis';
+
+const custom = {
+  'my-ui': () => {},
+};
+
+function Demo() {
+  // 服务端返回的协议内容
+  const content = '# GPT-VIS \n\n```my-ui\n{"value": "1"}```';
+
+  return (
+    <Conversation components={{ ...components, ...custom }}>
+      {content}
+    </Conversation>
+  );
+}
+````
 
 ## Development
 
 ```bash
 # install dependencies
-$ pnpm install
+$ npm install
 
 # develop library by docs demo
-$ pnpm start
+$ npm run dev
 
 # build library source code
-$ pnpm run build
-
-# build library source code in watch mode
-$ pnpm run build:watch
-
-# build docs
-$ pnpm run docs:build
-
-# check your project for potential problems
-$ pnpm run doctor
+$ npm run build
 ```
 
-## LICENSE
+## License
 
 MIT
diff --git a/dev/demo/basic.ts b/dev/demo/basic.ts
@@ -0,0 +1,21 @@
+export const Basic = `
+# [GPT-VIS](https://github.com/eosphoros-ai/GPT-VIS)
+
+Components for GPTs, generative AI, and LLM projects. Not only UI Components.;
+
+<div class="note">
+
+Some *emphasis* and <strong>strong</strong>!
+
+</div>
+
+Here is some JavaScript code:
+
+~~~js
+const greeting = 'hello, world';
+
+const sayHello = (greeting) => {}
+
+sayHello(greeting);
+~~~
+`;
diff --git a/dev/demo/index.ts b/dev/demo/index.ts
@@ -0,0 +1 @@
+export { Basic } from './basic';
diff --git a/dev/index.html b/dev/index.html
@@ -0,0 +1,7 @@
+<html>
+<script type="module" src="./main.tsx"></script>
+
+<select id="selector"></select>
+<hr />
+<div id="root"></div>
+</html>
diff --git a/dev/main.tsx b/dev/main.tsx
@@ -0,0 +1,45 @@
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Components, Conversation } from '../src';
+import * as markdowns from './demo';
+
+const select = document.getElementById('selector') as HTMLSelectElement;
+select.onchange = () => {
+  const { value } = select;
+  history.pushState({ value }, '', `?name=${value}`);
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
+  render();
+};
+select.style.display = 'block';
+select.style.minWidth = '120px';
+
+Object.keys(markdowns).forEach((d) => {
+  const option = document.createElement('option');
+  option.textContent = d;
+  option.value = d;
+  select.append(option);
+});
+
+let root;
+/**
+ * 渲染 markdown 组件
+ */
+function render() {
+  if (root) root.unmount();
+  const markdown = markdowns[select.value];
+
+  root = createRoot(document.getElementById('root')!);
+
+  root.render(
+    <StrictMode>
+      <Conversation components={Components}>{markdown}</Conversation>
+    </StrictMode>,
+  );
+}
+
+const initialValue = new URL(location as any).searchParams.get(
+  'name',
+) as string;
+if (markdowns[initialValue]) select.value = initialValue;
+
+render();
diff --git a/docs/index.en-US.md b/docs/index.en-US.md