@fe-free/core 1.2.3 → 1.3.0

package/src/editor_javascript/{index.md → editor_javascript.stories.tsx}

@@ -1,23 +1,22 @@
----
-group: 'core'
-toc: content
----
-
-# EditorJavascript
-
-## 代码演示
+import { EditorJavascript } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 
-### 常规
+const meta: Meta<typeof EditorJavascript> = {
+  title: '@fe-free/core/EditorJavascript',
+  component: EditorJavascript,
+  tags: ['autodocs'],
+};
 
-```tsx
-import { useState } from 'react';
-import { EditorJavascript } from '@fe-free/core';
+export default meta;
+type Story = StoryObj<typeof EditorJavascript>;
 
-function Demo() {
+// 常规示例
+const BasicDemo = () => {
   const [value, setValue] = useState(
     `const name = 'world';
 console.log('hello', name);
-`
+`,
   );
 
   return (
@@ -25,22 +24,18 @@ console.log('hello', name);
       <EditorJavascript value={value} onChange={setValue} />
     </div>
   );
-}
+};
 
-export default Demo;
-```
+export const Basic: Story = {
+  render: () => <BasicDemo />,
+};
 
-### readonly
-
-```tsx
-import { useState } from 'react';
-import { EditorJavascript } from '@fe-free/core';
-
-function Demo() {
+// readonly 示例
+const ReadonlyDemo = () => {
   const [value, setValue] = useState(
     `const name = 'world';
 console.log('hello', name);
-`
+`,
   );
 
   return (
@@ -48,17 +43,8 @@ console.log('hello', name);
       <EditorJavascript value={value} onChange={setValue} readonly />
     </div>
   );
-}
-
-export default Demo;
-```
-
-## API
+};
 
-```tsx | pure
-interface EditorJavascriptProps {
-  value: string;
-  onChange: (value: string, event?: any) => void;
-  readonly?: boolean;
-}
-```
+export const Readonly: Story = {
+  render: () => <ReadonlyDemo />,
+};

package/src/editor_javascript/index.tsx

@@ -1,8 +1,8 @@
 import AceEditor from 'react-ace';
 
+import 'ace-builds/src-noconflict/ext-language_tools';
 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%' };
 
@@ -34,3 +34,4 @@ function EditorJavascript({ value, onChange, readonly }: EditorJavascriptProps)
 }
 
 export { EditorJavascript };
+export type { EditorJavascriptProps };

package/src/editor_json/{index.md → editor_json.stories.tsx}

@@ -1,27 +1,26 @@
----
-group: 'core'
-toc: content
----
-
-# EditorJSON
-
-## 代码演示
+import { EditorJSON } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 
-### 常规
+const meta: Meta<typeof EditorJSON> = {
+  title: '@fe-free/core/EditorJSON',
+  component: EditorJSON,
+  tags: ['autodocs'],
+};
 
-```tsx
-import { useState } from 'react';
-import { EditorJSON } from '@fe-free/core';
+export default meta;
+type Story = StoryObj<typeof EditorJSON>;
 
-function Demo() {
+// 基础示例
+const BasicDemo = () => {
   const [value, setValue] = useState(
     JSON.stringify(
       {
         name: 'world',
       },
       null,
-      2
-    )
+      2,
+    ),
   );
 
   return (
@@ -29,26 +28,22 @@ function Demo() {
       <EditorJSON value={value} onChange={setValue} />
     </div>
   );
-}
+};
 
-export default Demo;
-```
+export const Basic: Story = {
+  render: () => <BasicDemo />,
+};
 
-### 只读
-
-```tsx
-import { useState } from 'react';
-import { EditorJSON } from '@fe-free/core';
-
-function Demo() {
+// 只读模式
+const ReadonlyDemo = () => {
   const [value, setValue] = useState(
     JSON.stringify(
       {
         name: 'world',
       },
       null,
-      2
-    )
+      2,
+    ),
   );
 
   return (
@@ -56,26 +51,22 @@ function Demo() {
       <EditorJSON value={value} onChange={setValue} readonly />
     </div>
   );
-}
-
-export default Demo;
-```
+};
 
-### mode
+export const Readonly: Story = {
+  render: () => <ReadonlyDemo />,
+};
 
-```tsx
-import { useState } from 'react';
-import { EditorJSON } from '@fe-free/core';
-
-function Demo() {
+// 树形模式
+const TreeModeDemo = () => {
   const [value, setValue] = useState(
     JSON.stringify(
       {
         name: 'world',
       },
       null,
-      2
-    )
+      2,
+    ),
   );
 
   return (
@@ -83,26 +74,22 @@ function Demo() {
       <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';
+export const TreeMode: Story = {
+  render: () => <TreeModeDemo />,
+};
 
-function Demo() {
+// 无菜单栏的只读树形模式
+const NoMenuBarDemo = () => {
   const [value, setValue] = useState(
     JSON.stringify(
       {
         name: 'world',
       },
       null,
-      2
-    )
+      2,
+    ),
   );
 
   return (
@@ -110,20 +97,8 @@ function Demo() {
       <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'];
-}
-```
+export const NoMenuBar: Story = {
+  render: () => <NoMenuBarDemo />,
+};

package/src/editor_json/index.tsx

@@ -46,3 +46,4 @@ function EditorJSON({ value, onChange, readonly, mode, mainMenuBar }: EditorJSON
 }
 
 export { EditorJSON };
+export type { EditorJSONProps };

package/src/editor_logs/editor_logs.stories.tsx

@@ -0,0 +1,47 @@
+import { EditorLogs } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof EditorLogs> = {
+  title: '@fe-free/core/EditorLogs',
+  component: EditorLogs,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '一个用于显示日志内容的 React 组件。它使用 CodeMirror 编辑器来呈现日志，提供了语法高亮和主题支持。',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EditorLogs>;
+
+export const Basic: Story = {
+  args: {
+    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',
+      },
+    ],
+  },
+};

package/src/editor_logs/index.tsx

@@ -1,8 +1,8 @@
-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';
+import { createTheme } from '@uiw/codemirror-themes';
+import CodeMirror from '@uiw/react-codemirror';
+import React from 'react';
 
 interface EditorLogsProps {
   logs: {
@@ -67,3 +67,4 @@ const EditorLogs: React.FC<EditorLogsProps> = ({ logs }) => {
 };
 
 export { EditorLogs };
+export type { EditorLogsProps };

package/src/editor_markdown/editor_markdown.stories.tsx

@@ -0,0 +1,32 @@
+import { EditorMarkdown } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+const meta: Meta<typeof EditorMarkdown> = {
+  title: '@fe-free/core/EditorMarkdown',
+  component: EditorMarkdown,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof EditorMarkdown>;
+
+// 常规示例
+const BasicDemo = () => {
+  const [value] = useState(
+    `# hello
+
+world
+`,
+  );
+
+  return (
+    <div style={{ width: '500px', height: '500px' }}>
+      <EditorMarkdown value={value} />
+    </div>
+  );
+};
+
+export const Basic: Story = {
+  render: () => <BasicDemo />,
+};

package/src/editor_markdown/index.tsx

@@ -37,3 +37,4 @@ function EditorMarkdown({ value }: EditorMarkdownProps) {
 }
 
 export { EditorMarkdown };
+export type { EditorMarkdownProps };

package/src/form/form.stories.tsx

@@ -0,0 +1,65 @@
+import { ProForm } from '@ant-design/pro-components';
+import { ProFormJSON, ProFormJavascript } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta = {
+  title: '@fe-free/core/Form',
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ProFormJSON 基础示例
+export const ProFormJSONBasic: Story = {
+  render: () => (
+    <ProForm>
+      <ProFormJSON name="json" initialValue={JSON.stringify({ name: 'world' }, null, 2)} />
+    </ProForm>
+  ),
+};
+
+// ProFormJSON 只读示例
+export const ProFormJSONReadonly: Story = {
+  render: () => (
+    <ProForm>
+      <ProFormJSON
+        name="json"
+        readonly
+        initialValue={JSON.stringify({ name: 'world' }, null, 2)}
+        fieldProps={{
+          mainMenuBar: false,
+        }}
+      />
+    </ProForm>
+  ),
+};
+
+// ProFormJavascript 基础示例
+export const ProFormJavascriptBasic: Story = {
+  render: () => (
+    <ProForm>
+      <ProFormJavascript
+        name="javascript"
+        initialValue={`const name = 'world';
+console.log('hello', name);
+`}
+      />
+    </ProForm>
+  ),
+};
+
+// ProFormJavascript 只读示例
+export const ProFormJavascriptReadonly: Story = {
+  render: () => (
+    <ProForm>
+      <ProFormJavascript
+        name="javascript"
+        readonly
+        initialValue={`const name = 'world';
+console.log('hello', name);
+`}
+      />
+    </ProForm>
+  ),
+};

package/src/index.ts

@@ -1,16 +1,20 @@
-export { CRUD, useDelete, OperateDelete, CRUDDetail } from './crud';
-export type { CRUDProps, CRUDMethods, CRUDDetailProps } from './crud';
-
-export { ProFormJSON, ProFormJavascript, proFormSelectSearchProps } from './form';
-
 export { LoadingButton } from './button';
 
-export { Table } from './table';
-export type { TableProps } from './table';
+export { CRUD, CRUDDetail, OperateDelete, useDelete } from './crud';
+export type { CRUDDetailProps, CRUDMethods, CRUDProps } from './crud';
 
 export { EditorJavascript } from './editor_javascript';
+export type { EditorJavascriptProps } from './editor_javascript';
 export { EditorJSON } from './editor_json';
-export { EditorMarkdown } from './editor_markdown';
+export type { EditorJSONProps } from './editor_json';
 export { EditorLogs } from './editor_logs';
+export type { EditorLogsProps } from './editor_logs';
+export { EditorMarkdown } from './editor_markdown';
+export type { EditorMarkdownProps } from './editor_markdown';
+
+export { ProFormJSON, ProFormJavascript, proFormSelectSearchProps } from './form';
+
+export { Table } from './table';
+export type { TableProps } from './table';
 
-export { customValueTypeMap, CustomValueTypeEnum } from './value_type_map';
+export { CustomValueTypeEnum, customValueTypeMap } from './value_type_map';

package/src/table/table.stories.tsx

@@ -0,0 +1,80 @@
+import type { ProColumns } from '@ant-design/pro-components';
+import { Table } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fakeData } from '../crud/demo/data';
+
+const meta: Meta = {
+  title: '@fe-free/core/Table',
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 定义列配置
+const columns: ProColumns[] = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    search: true,
+  },
+  {
+    title: '名字(省略)',
+    dataIndex: 'name',
+    search: true,
+    ellipsis: true,
+  },
+  {
+    title: 'city',
+    dataIndex: 'city',
+  },
+  {
+    title: 'area',
+    dataIndex: 'area',
+  },
+];
+
+export const Basic: Story = {
+  render: () => (
+    <Table
+      rowKey="id"
+      columns={columns}
+      request={async (params) => {
+        console.log(params);
+        return {
+          data: fakeData,
+          success: true,
+          total: fakeData.length,
+        };
+      }}
+    />
+  ),
+};
+
+export const Search: Story = {
+  render: () => (
+    <Table
+      columns={[
+        {
+          title: 'id',
+          dataIndex: 'id',
+        },
+        {
+          title: '名字(省略)',
+          dataIndex: 'name',
+
+          ellipsis: true,
+        },
+        {
+          title: 'city',
+          dataIndex: 'city',
+        },
+        {
+          title: 'area',
+          dataIndex: 'area',
+        },
+      ]}
+      rowKey="id"
+    />
+  ),
+};

package/src/tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: '#1677ff',
+        /** 次要文本 */
+        secondary: 'rgba(0, 0, 0, 0.65)',
+        /** 描述文本 */
+        desc: 'rgba(0, 0, 0, 0.45)',
+        // 价格
+        price: '#E7484D',
+      },
+    },
+  },
+  plugins: [],
+};

package/src/tailwindcss.stories.tsx

@@ -0,0 +1,18 @@
+export default {
+  title: '@fe-free/core/tailwindcss',
+  tags: ['autodocs'],
+};
+
+export const Default = () => {
+  return (
+    <div>
+      <div>@fe-free/core 扩展的</div>
+      <div className="flex flex-row gap-2">
+        <span className="text-primary">text-primary</span>
+        <span className="text-secondary">text-secondary</span>
+        <span className="text-desc">text-desc</span>
+        <span className="text-price">text-price</span>
+      </div>
+    </div>
+  );
+};

package/src/value_type_map/{index.md → value_type_map.stories.tsx}

@@ -1,49 +1,20 @@
----
-group: 'core'
-toc: content
----
-
-# valueTypeMap
-
-自定义 valueType
-
-## customValueTypeMap
-
-配置 customValueTypeMap
-
-```tsx | pure
-import { customValueTypeMap } from '@fe-free/core';
 import { ProConfigProvider } from '@ant-design/pro-components';
+import { CRUD, CustomValueTypeEnum, customValueTypeMap } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
+import dayjs from 'dayjs';
+import { range } from 'lodash-es';
 
-const Demo = () => (
-  <ProConfigProvider valueTypeMap={customValueTypeMap}>
-    <div>some</div>
-  </ProConfigProvider>
-);
-
-export default Demo;
-```
-
-## CustomValueTypeEnum
-
-使用
-
-```tsx | pure
-enum CustomValueTypeEnum {
-  /** 渲染时间 + 搜索日期范围 */
-  CustomDateTimeAndDateRange = 'CustomDateTimeAndDateRange',
-  /** 渲染日期 + 搜索日期范围 */
-  CustomDateAndDateRange = 'CustomDateAndDateRange',
-  /** JSON */
-  CustomJSON = 'CustomJSON',
-}
-```
+const meta: Meta = {
+  title: '@fe-free/core/ValueTypeMap',
+  component: ProConfigProvider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
 
-```tsx
-import { CRUD, customValueTypeMap, CustomValueTypeEnum } from '@fe-free/core';
-import { ProConfigProvider } from '@ant-design/pro-components';
-import { range } from 'lodash-es';
-import dayjs from 'dayjs';
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 async function fakeRequest() {
   const data = range(5).map((item) => ({
@@ -94,7 +65,7 @@ const Table = () => {
       search: true,
     },
     {
-      title: '秒数',
+      title: '日期 number 秒',
       dataIndex: 'seconds',
       valueType: CustomValueTypeEnum.CustomDateAndDateRange,
       search: true,
@@ -118,11 +89,10 @@ const Table = () => {
   );
 };
 
-const Demo = () => (
-  <ProConfigProvider valueTypeMap={customValueTypeMap}>
-    <Table />
-  </ProConfigProvider>
-);
-
-export default Demo;
-```
+export const Default: Story = {
+  render: () => (
+    <ProConfigProvider valueTypeMap={customValueTypeMap}>
+      <Table />
+    </ProConfigProvider>
+  ),
+};