@fe-free/core 1.2.4 → 1.3.1

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/index.tsx

@@ -1,5 +1,5 @@
+import type { ParamsType, ProTableProps } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
-import type { ProTableProps, ParamsType } from '@ant-design/pro-components';
 import { useMemo } from 'react';
 
 interface TableProps<DataSource = any, Params = any, ValueType = 'text'>
@@ -10,7 +10,7 @@ interface TableProps<DataSource = any, Params = any, ValueType = 'text'>
 
 function Table<
   DataSource extends Record<string, any> = any,
-  Params extends ParamsType = ParamsType
+  Params extends ParamsType = ParamsType,
 >(props: TableProps<DataSource, Params>) {
   const { columns, rowKey = 'id', search, ...rest } = props;
 
@@ -48,7 +48,7 @@ function Table<
       scroll={getTableScroll(newColumns)}
       search={
         hasSearch && {
-          layout: 'vertical',
+          labelWidth: 'auto',
           defaultCollapsed: false,
           ...search,
         }

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/tailwindcss.stories.tsx

@@ -6,7 +6,7 @@ export default {
 export const Default = () => {
   return (
     <div>
-      <div>extends colors</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>

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>
+  ),
+};

package/src/crud/demo/index.tsx

@@ -1,342 +0,0 @@
-import React, { useRef } from 'react';
-import type { CRUDProps } from '@fe-free/core';
-import { CRUD, proFormSelectSearchProps } from '@fe-free/core';
-import { Button } from 'antd';
-import { ProForm, ProFormSwitch, ProFormText } from '@ant-design/pro-components';
-import {
-  fakeRequest,
-  fakeDeleteByRecord,
-  fakeCreate,
-  fakeGetByRecord,
-  fakeUpdateById,
-  fakeRequestCity,
-  fakeRequestArea,
-  levels,
-  fakeRequestSchool,
-} from './data';
-
-const Normal = () => {
-  const columns = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-      search: true,
-    },
-    {
-      title: '名字(省略)',
-      dataIndex: 'name',
-      search: true,
-      ellipsis: true,
-    },
-    {
-      title: 'city',
-      dataIndex: 'city',
-    },
-    {
-      title: 'area',
-      dataIndex: 'area',
-    },
-  ];
-
-  return (
-    <CRUD
-      actions={['create', 'read', 'delete', 'update']}
-      tableProps={{
-        columns,
-        request: fakeRequest,
-      }}
-      requestDeleteByRecord={fakeDeleteByRecord}
-      deleteProps={{
-        nameIndex: 'name',
-      }}
-      detailForm={(formProps) => (
-        <>
-          <ProFormText
-            {...formProps}
-            name="name"
-            label="名字"
-            required
-            rules={[{ required: true }]}
-            extra="extra extra extra extra"
-          />
-        </>
-      )}
-      requestGetByRecord={fakeGetByRecord}
-      requestCreateByValues={fakeCreate}
-      requestUpdateById={fakeUpdateById}
-    />
-  );
-};
-
-function ReadDetail() {
-  const columns = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-      search: true,
-    },
-    {
-      title: '名字',
-      dataIndex: 'name',
-      search: true,
-    },
-  ];
-
-  return (
-    <CRUD
-      actions={['read_detail']}
-      tableProps={{
-        columns,
-        request: fakeRequest,
-      }}
-    />
-  );
-}
-
-function Ref() {
-  const formRef = useRef<any>();
-  const [detailFormInstance] = ProForm.useForm();
-
-  // @ts-ignore
-  window._detailFormInstance = detailFormInstance;
-
-  const name = ProForm.useWatch('name', formRef.current);
-  const detailName = ProForm.useWatch('name', detailFormInstance);
-
-  // 不知道为啥这里 name 不生效，但是项目里是生效的。先忽略
-  console.log('useWatch', name, detailName);
-
-  const columns = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-      search: true,
-    },
-    {
-      title: '名字',
-      dataIndex: 'name',
-      search: true,
-    },
-  ];
-
-  return (
-    <CRUD
-      actions={['create', 'read', 'update']}
-      tableProps={{
-        formRef,
-        columns,
-        request: fakeRequest,
-      }}
-      detailFormInstance={detailFormInstance}
-      detailForm={(formProps) => (
-        <>
-          <ProFormText
-            {...formProps}
-            name="name"
-            label="名字"
-            required
-            rules={[{ required: true }]}
-            initialValue={'default'}
-          />
-          <ProFormSwitch {...formProps} name="status" label="开启" initialValue={false} />
-        </>
-      )}
-      requestGetByRecord={fakeGetByRecord}
-      requestCreateByValues={fakeCreate}
-      requestUpdateById={fakeUpdateById}
-    />
-  );
-}
-
-function ActionRef() {
-  const ref = useRef<any>();
-
-  const columns = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-      search: true,
-    },
-    {
-      title: '名字',
-      dataIndex: 'name',
-      search: true,
-    },
-  ];
-
-  return (
-    <>
-      <Button onClick={() => ref.current.getActionRef().current?.reload()}>reload</Button>
-      <CRUD
-        ref={ref}
-        actions={[]}
-        tableProps={{
-          columns,
-          request: fakeRequest,
-        }}
-      />
-    </>
-  );
-}
-
-function RemoteData() {
-  const columns: CRUDProps['tableProps']['columns'] = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-      search: true,
-    },
-    {
-      title: '名字',
-      dataIndex: 'name',
-      search: true,
-    },
-    {
-      title: '等级(本地数据)',
-      dataIndex: 'level',
-      search: true,
-      valueEnum: levels,
-      ...proFormSelectSearchProps,
-    },
-    {
-      title: 'city(远端数据)',
-      dataIndex: 'city',
-      search: true,
-      request: async () => {
-        console.log('request');
-        const res = await fakeRequestCity();
-
-        return (
-          res.map((item) => ({
-            label: item,
-            value: item,
-          })) || []
-        );
-      },
-      ...proFormSelectSearchProps,
-    },
-    {
-      title: 'area(联动 city)',
-      dataIndex: 'area',
-      search: true,
-      request: async (params) => {
-        console.log('params', params);
-        const res = await fakeRequestArea(params);
-
-        return (
-          res.map((item) => ({
-            label: item,
-            value: item,
-          })) || []
-        );
-      },
-      dependencies: ['city'],
-      ...proFormSelectSearchProps,
-    },
-    {
-      title: '学校(远端数据 label value)',
-      dataIndex: 'school',
-      search: true,
-      valueType: 'select',
-      request: () => fakeRequestSchool(),
-      ...proFormSelectSearchProps,
-    },
-  ];
-
-  return (
-    <CRUD
-      actions={[]}
-      tableProps={{
-        columns,
-        request: fakeRequest,
-      }}
-    />
-  );
-}
-
-function NoSearch() {
-  const ref = useRef<any>();
-
-  const columns = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-    },
-    {
-      title: '名字',
-      dataIndex: 'name',
-    },
-  ];
-
-  return (
-    <CRUD
-      ref={ref}
-      actions={[]}
-      tableProps={{
-        columns,
-        request: fakeRequest,
-      }}
-    />
-  );
-}
-
-const CustomText = () => {
-  const columns = [
-    {
-      title: 'id',
-      dataIndex: 'id',
-      search: true,
-    },
-    {
-      title: '名字',
-      dataIndex: 'name',
-      search: true,
-      ellipsis: true,
-    },
-  ];
-
-  return (
-    <CRUD
-      actions={['create', 'read', 'delete', 'update']}
-      tableProps={{
-        columns,
-        request: fakeRequest,
-      }}
-      operateColumnProps={{
-        width: 230,
-        moreOperator: () => <div>custom</div>,
-      }}
-      readProps={{
-        operateText: '查看啦',
-      }}
-      requestDeleteByRecord={fakeDeleteByRecord}
-      deleteProps={{
-        nameIndex: 'name',
-        operateText: '删除啦',
-      }}
-      detailForm={(formProps) => (
-        <>
-          <ProFormText
-            {...formProps}
-            name="name"
-            label="名字"
-            required
-            rules={[{ required: true }]}
-          />
-        </>
-      )}
-      requestGetByRecord={fakeGetByRecord}
-      requestCreateByValues={fakeCreate}
-      createProps={{
-        successText: '新建成功啦',
-      }}
-      updateProps={{
-        operateText: '更新啦',
-        successText: '更新成功啦',
-      }}
-      requestUpdateById={fakeUpdateById}
-    />
-  );
-};
-
-export { Normal, ReadDetail, Ref, ActionRef, RemoteData, NoSearch, CustomText };