@fe-free/core 1.0.1

package/src/editor_javascript/index.tsx

@@ -0,0 +1,36 @@
+import AceEditor from 'react-ace';
+
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/theme-monokai';
+import 'ace-builds/src-noconflict/ext-language_tools';
+
+const fullStyle = { width: '100%', height: '100%' };
+
+interface EditorJavascriptProps {
+  value: string;
+  onChange?: (value: string, event?: any) => void;
+  readonly?: boolean;
+}
+function EditorJavascript({ value, onChange, readonly }: EditorJavascriptProps) {
+  return (
+    <AceEditor
+      style={fullStyle}
+      mode="javascript"
+      theme="monokai"
+      value={value}
+      onChange={onChange}
+      readOnly={readonly}
+      name="javascript_editor"
+      editorProps={{ $blockScrolling: true }}
+      setOptions={{
+        enableBasicAutocompletion: true,
+        enableLiveAutocompletion: true,
+        enableSnippets: true,
+        showLineNumbers: true,
+        tabSize: 2,
+      }}
+    />
+  );
+}
+
+export { EditorJavascript };

package/src/editor_json/index.md

@@ -0,0 +1,129 @@
+---
+group: 'core'
+toc: content
+---
+
+# EditorJSON
+
+## 代码演示
+
+### 常规
+
+```tsx
+import { useState } from 'react';
+import { EditorJSON } from '@fe-free/core';
+
+function Demo() {
+  const [value, setValue] = useState(
+    JSON.stringify(
+      {
+        name: 'world',
+      },
+      null,
+      2
+    )
+  );
+
+  return (
+    <div style={{ width: '500px', height: '500px' }}>
+      <EditorJSON value={value} onChange={setValue} />
+    </div>
+  );
+}
+
+export default Demo;
+```
+
+### 只读
+
+```tsx
+import { useState } from 'react';
+import { EditorJSON } from '@fe-free/core';
+
+function Demo() {
+  const [value, setValue] = useState(
+    JSON.stringify(
+      {
+        name: 'world',
+      },
+      null,
+      2
+    )
+  );
+
+  return (
+    <div style={{ width: '500px', height: '500px' }}>
+      <EditorJSON value={value} onChange={setValue} readonly />
+    </div>
+  );
+}
+
+export default Demo;
+```
+
+### mode
+
+```tsx
+import { useState } from 'react';
+import { EditorJSON } from '@fe-free/core';
+
+function Demo() {
+  const [value, setValue] = useState(
+    JSON.stringify(
+      {
+        name: 'world',
+      },
+      null,
+      2
+    )
+  );
+
+  return (
+    <div style={{ width: '500px', height: '500px' }}>
+      <EditorJSON value={value} onChange={setValue} mode="tree" readonly />
+    </div>
+  );
+}
+
+export default Demo;
+```
+
+### readonly mainMenuBar mode
+
+```tsx
+import { useState } from 'react';
+import { EditorJSON } from '@fe-free/core';
+
+function Demo() {
+  const [value, setValue] = useState(
+    JSON.stringify(
+      {
+        name: 'world',
+      },
+      null,
+      2
+    )
+  );
+
+  return (
+    <div style={{ width: '500px', height: '500px' }}>
+      <EditorJSON value={value} onChange={setValue} readonly mode="tree" mainMenuBar={false} />
+    </div>
+  );
+}
+
+export default Demo;
+```
+
+## API
+
+```tsx | pure
+import type { JSONEditor } from 'vanilla-jsoneditor';
+
+interface EditorJSONProps {
+  value: string;
+  onChange: (value: string, event?: any) => void;
+  readonly?: boolean;
+  mode?: JSONEditor['mode'];
+}
+```

package/src/editor_json/index.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react';
+import type { Mode } from 'vanilla-jsoneditor';
+import { JSONEditor } from 'vanilla-jsoneditor';
+
+interface EditorJSONProps {
+  value: string;
+  onChange?: (value: string, event?: any) => void;
+  readonly?: boolean;
+  mode?: 'text' | 'tree' | 'table';
+  mainMenuBar?: boolean;
+}
+
+function EditorJSON({ value, onChange, readonly, mode, mainMenuBar }: EditorJSONProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const refEditor = useRef<JSONEditor | null>(null);
+
+  const refOnChange = useRef(onChange);
+
+  useEffect(() => {
+    refEditor.current?.update({
+      text: value || '',
+    });
+  }, [value]);
+
+  useEffect(() => {
+    refEditor.current = new JSONEditor({
+      target: ref.current!,
+      props: {
+        mainMenuBar,
+        tabSize: 2,
+        mode: (mode || 'text') as Mode,
+        readOnly: readonly,
+        askToFormat: false,
+        content: {
+          text: value || '',
+        },
+        onChange: (newContent) => {
+          // @ts-ignore
+          refOnChange.current(newContent.text);
+        },
+      },
+    });
+  }, []);
+
+  return <div ref={ref} className="h-full w-full" />;
+}
+
+export { EditorJSON };

package/src/editor_logs/index.md

@@ -0,0 +1,48 @@
+---
+group: 'core'
+toc: content
+---
+
+# EditorLogs
+
+`LogViewer` 是一个用于显示日志内容的 React 组件。它使用 CodeMirror 编辑器来呈现日志，提供了语法高亮和主题支持。
+
+## 代码演示
+
+### 常规
+
+```tsx
+import { EditorLogs } from '@fe-free/core';
+
+function Demo() {
+  return (
+    <EditorLogs
+      logs={[
+        {
+          timestamp: '2023-01-01 12:00:00',
+          level: 'info',
+          message: 'This is an info log message.',
+        },
+        {
+          timestamp: '2023-01-01 12:00:00',
+          level: 'warn',
+          message: 'This is a warning log message.',
+        },
+        {
+          timestamp: '2023-01-01 12:00:00',
+          level: 'error',
+          message: 'This is an error log message.',
+        },
+        {
+          timestamp: '2023-01-01 12:00:00',
+          level: 'system',
+          message:
+            'This is a debug log message. This is a debug log message This is a debug log message This is a debug log message This is a debug log message',
+        },
+      ]}
+    />
+  );
+}
+
+export default Demo;
+```

package/src/editor_logs/index.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import CodeMirror from '@uiw/react-codemirror';
+import { StreamLanguage } from '@codemirror/language';
+import { createTheme } from '@uiw/codemirror-themes';
+import { tags as t } from '@lezer/highlight';
+
+interface EditorLogsProps {
+  logs: {
+    timestamp: string;
+    level: 'info' | 'warn' | 'error' | 'system';
+    message: string;
+  }[];
+}
+
+const EditorLogs: React.FC<EditorLogsProps> = ({ logs }) => {
+  const formattedLogs = logs
+    .map((log) => {
+      const levelPadded = `[${log.level}]`.padEnd(8, ' ');
+      return `${log.timestamp} ${levelPadded.toUpperCase()} ${log.message}`;
+    })
+    .join('\n');
+
+  const logExtension = [
+    StreamLanguage.define({
+      token: (stream) => {
+        if (stream.match(/.*\[WARN\s*\].*/)) return 'keyword';
+        if (stream.match(/.*\[ERROR\s*\].*/)) return 'invalid';
+        if (stream.match(/.*\[SYSTEM\].*/)) return 'comment';
+        stream.next();
+        return null;
+      },
+    }),
+  ];
+
+  const myTheme = createTheme({
+    theme: 'dark',
+    settings: {
+      background: '#2e3235',
+      foreground: 'rgba(243, 244, 246, 1)',
+    },
+    styles: [
+      {
+        tag: t.keyword,
+        color: 'rgba(252, 211, 77, 1)',
+      },
+      {
+        tag: t.invalid,
+        color: 'rgba(248, 113, 113, 1)',
+      },
+      {
+        tag: t.comment,
+        color: 'rgba(96, 165, 250, 1)',
+      },
+    ],
+  });
+
+  return (
+    <CodeMirror
+      value={formattedLogs}
+      theme={myTheme}
+      extensions={logExtension}
+      editable={false}
+      height="400px"
+      style={{ overflowY: 'auto' }}
+    />
+  );
+};
+
+export { EditorLogs };

package/src/editor_markdown/index.md

@@ -0,0 +1,40 @@
+---
+group: 'core'
+toc: content
+---
+
+# EditorMarkdown
+
+## 代码演示
+
+### 常规
+
+```tsx
+import { useState } from 'react';
+import { EditorMarkdown } from '@fe-free/core';
+
+function Demo() {
+  const [value] = useState(
+    `# hello
+
+world
+`
+  );
+
+  return (
+    <div style={{ width: '500px', height: '500px' }}>
+      <EditorMarkdown value={value} />
+    </div>
+  );
+}
+
+export default Demo;
+```
+
+## API
+
+```tsx | pure
+interface EditorMarkdownProps {
+  value: string;
+}
+```

package/src/editor_markdown/index.tsx

@@ -0,0 +1,39 @@
+import Markdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+
+interface EditorMarkdownProps {
+  value: string;
+}
+
+function EditorMarkdown({ value }: EditorMarkdownProps) {
+  return (
+    <Markdown
+      unwrapDisallowed
+      components={{
+        code(props) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const { children, className, node, ...rest } = props;
+          const match = /language-(\w+)/.exec(className || '');
+          return match ? (
+            <SyntaxHighlighter
+              {...rest}
+              PreTag="div"
+              wrapLongLines
+              // eslint-disable-next-line react/no-children-prop
+              children={String(children).replace(/\n$/, '')}
+              language={match[1].toLowerCase()}
+            />
+          ) : (
+            <code {...rest} className={className}>
+              {children}
+            </code>
+          );
+        },
+      }}
+    >
+      {value || ''}
+    </Markdown>
+  );
+}
+
+export { EditorMarkdown };

package/src/form/index.md

@@ -0,0 +1,96 @@
+---
+group: 'core'
+toc: content
+---
+
+# Form
+
+## ProFormJSON
+
+JSON
+
+```tsx
+import { ProForm } from '@ant-design/pro-components';
+import { ProFormJSON } from '@fe-free/core';
+
+function Demo() {
+  return (
+    <ProForm>
+      <ProFormJSON name="json" initialValue={JSON.stringify({ name: 'world' }, null, 2)} />
+    </ProForm>
+  );
+}
+
+export default Demo;
+```
+
+readonly
+
+```tsx
+import { ProForm } from '@ant-design/pro-components';
+import { ProFormJSON } from '@fe-free/core';
+
+function Demo() {
+  return (
+    <ProForm>
+      <ProFormJSON
+        name="json"
+        readonly
+        initialValue={JSON.stringify({ name: 'world' }, null, 2)}
+        fieldProps={{
+          mainMenuBar: false,
+        }}
+      />
+    </ProForm>
+  );
+}
+
+export default Demo;
+```
+
+## ProFormJavascript
+
+JSON
+
+```tsx
+import { ProForm } from '@ant-design/pro-components';
+import { ProFormJavascript } from '@fe-free/core';
+
+function Demo() {
+  return (
+    <ProForm>
+      <ProFormJavascript
+        name="json"
+        initialValue={`const name = 'world';
+console.log('hello', name);
+`}
+      />
+    </ProForm>
+  );
+}
+
+export default Demo;
+```
+
+readonly
+
+```tsx
+import { ProForm } from '@ant-design/pro-components';
+import { ProFormJavascript } from '@fe-free/core';
+
+function Demo() {
+  return (
+    <ProForm>
+      <ProFormJavascript
+        name="json"
+        readonly
+        initialValue={`const name = 'world';
+console.log('hello', name);
+`}
+      />
+    </ProForm>
+  );
+}
+
+export default Demo;
+```

package/src/form/index.tsx

@@ -0,0 +1,51 @@
+import type { ProFormItemProps } from '@ant-design/pro-components';
+import { ProForm } from '@ant-design/pro-components';
+import { EditorJSON } from '../editor_json';
+import { EditorJavascript } from '../editor_javascript';
+import { pinyinMatch } from '@fe-free/tool';
+
+function JSONItem(props) {
+  return (
+    <div style={{ height: '300px' }}>
+      <EditorJSON {...props} />
+    </div>
+  );
+}
+
+function ProFormJSON(props: ProFormItemProps) {
+  const { readonly, fieldProps, ...rest } = props;
+  return (
+    <ProForm.Item {...rest}>
+      <JSONItem readonly={readonly} {...fieldProps} />
+    </ProForm.Item>
+  );
+}
+
+function JavascriptItem(props) {
+  return (
+    <div style={{ height: '300px' }}>
+      <EditorJavascript {...props} />
+    </div>
+  );
+}
+
+function ProFormJavascript(props: ProFormItemProps) {
+  const { readonly, fieldProps, ...rest } = props;
+  return (
+    <ProForm.Item {...rest}>
+      <JavascriptItem readonly={readonly} {...fieldProps} />
+    </ProForm.Item>
+  );
+}
+
+/** ProFromSelect 搜索相关 props。 支持 1 搜索 2 拼音过滤 */
+const proFormSelectSearchProps = {
+  fieldProps: {
+    showSearch: true,
+    filterOption: (input, option) => pinyinMatch(option.label, input),
+    // 本地过滤，关闭搜索 fetch data
+    fetchDataOnSearch: false,
+  },
+};
+
+export { ProFormJSON, ProFormJavascript, proFormSelectSearchProps };

package/src/index.ts

@@ -0,0 +1,16 @@
+export { CRUD } from './crud';
+export type { CRUDProps, CRUDMethods } from './crud';
+
+export { ProFormJSON, ProFormJavascript, proFormSelectSearchProps } from './form';
+
+export { LoadingButton } from './button';
+
+export { Table } from './table';
+export type { TableProps } from './table';
+
+export { EditorJavascript } from './editor_javascript';
+export { EditorJSON } from './editor_json';
+export { EditorMarkdown } from './editor_markdown';
+export { EditorLogs } from './editor_logs';
+
+export { customValueTypeMap, CustomValueTypeEnum } from './value_type_map';

package/src/table/index.md

@@ -0,0 +1,89 @@
+---
+group: 'core'
+toc: content
+---
+
+# Table
+
+对 ProTable 做扩展以满足实际使用情况
+
+- 默认搜索关闭，需要再打开 `search: true`
+- 有搜索的时候才显示搜索区域
+
+## 场景
+
+### 常规
+
+```tsx
+import { Table } from '@fe-free/core';
+import { fakeData } from '../crud/demo/data';
+
+function fakeRequest() {
+  return Promise.resolve({
+    data: fakeData,
+    success: true,
+    total: fakeData.length,
+  });
+}
+
+const Demo = () => {
+  const columns = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+      search: true,
+    },
+    {
+      title: '名字(省略)',
+      dataIndex: 'name',
+      search: true,
+      ellipsis: true,
+    },
+    {
+      title: 'city',
+      dataIndex: 'city',
+    },
+    {
+      title: 'area',
+      dataIndex: 'area',
+    },
+  ];
+
+  return <Table rowKey="id" columns={columns} request={fakeRequest} />;
+};
+
+export default Demo;
+```
+
+### 没有搜索
+
+```tsx
+import { Table } from '@fe-free/core';
+
+const Demo = () => {
+  const columns = [
+    {
+      title: 'id',
+      dataIndex: 'id',
+    },
+    {
+      title: '名字(省略)',
+      dataIndex: 'name',
+
+      ellipsis: true,
+    },
+    {
+      title: 'city',
+      dataIndex: 'city',
+    },
+    {
+      title: 'area',
+      dataIndex: 'area',
+    },
+  ];
+
+  return <Table columns={columns} rowKey="id" />;
+};
+
+export default Demo;
+```