[Step]: adjust ts types

.gitignore

@@ -87,3 +87,5 @@ gemini-report/
 *.log
 .DS_Store
 src/core-temp
+./vscode/settings.json
+

components/demo-helper/index.tsx

@@ -169,7 +169,7 @@ interface BaseProps {
     switchVisible?: (demoIndex: string) => unknown;
 }
 
-interface DemoProps extends Omit<BaseProps, 'demoTitle'> {
+export interface DemoProps extends Omit<BaseProps, 'demoTitle'> {
     parentDisplayName?: string;
     defaultBackground?: 'dark' | 'light';
     title: string;
@@ -184,7 +184,7 @@ interface DemoProps extends Omit<BaseProps, 'demoTitle'> {
     style?: React.CSSProperties;
 }
 
-interface DemoState {
+export interface DemoState {
     demoIndex: string;
     demoItems: Record<string, DemoItem>;
     showType: ShowType;

components/step/__docs__/adaptor/index.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import { Types, parseData, NodeType, ContentType } from '@alifd/adaptor-helper';
+import { IContent } from '@alifd/adaptor-helper/types/parse-data';
+import { Step } from '@alifd/next';
+
+interface adaptorProps {
+    shape?: 'circle' | 'arrow' | 'dot';
+    level: string;
+    state: 'percent' | 'disabled' | string;
+    location: 'right' | string;
+    width: number | string;
+    height: number | string;
+    style?: React.CSSProperties;
+    others: any;
+    data: any;
+}
+const _propsValue = ({
+    shape,
+    level,
+    location,
+}: {
+    shape: string;
+    level: string;
+    location: string;
+}) => {
+    return {
+        shape: shape,
+        direction: level,
+        labelPlacement: location === 'right' ? 'hoz' : 'ver',
+    };
+};
+
+export default {
+    name: 'Step',
+    shape: ['circle', 'arrow', 'dot'],
+    editor: (shape: string) => {
+        if (shape === 'arrow') {
+            return {
+                props: [
+                    {
+                        name: 'state',
+                        type: Types.enum,
+                        options: ['normal', 'disabled'],
+                        default: 'normal',
+                    },
+                    {
+                        name: 'width',
+                        type: Types.number,
+                        default: 500,
+                    },
+                ],
+                data: {
+                    active: true,
+                    disabled: true,
+                    default: 'Step 1\nStep 2\n*Step 3\nStep 4',
+                },
+            };
+        }
+
+        return {
+            props: [
+                {
+                    name: 'level',
+                    label: 'Orientation',
+                    type: Types.enum,
+                    options: [
+                        { value: 'hoz', label: 'Horizontal' },
+                        { value: 'ver', label: 'Vertical' },
+                    ],
+                },
+                ...(shape === 'circle'
+                    ? [
+                          {
+                              name: 'state',
+                              type: Types.enum,
+                              options: ['normal', 'percent', 'disabled'],
+                              default: 'normal',
+                          },
+                          {
+                              name: 'location',
+                              type: Types.enum,
+                              options: ['down', 'right'],
+                              default: 'down',
+                          },
+                      ]
+                    : [
+                          {
+                              name: 'state',
+                              label: 'Status',
+                              type: Types.enum,
+                              options: ['normal', 'disabled'],
+                              default: 'normal',
+                          },
+                      ]),
+                {
+                    name: 'width',
+                    type: Types.number,
+                    default: 600,
+                },
+                {
+                    name: 'height',
+                    type: Types.number,
+                    default: 300,
+                },
+            ],
+            data: {
+                active: true,
+                disabled: true,
+                default:
+                    'Step 1\n\tOpen the door Put the elephant into the fridge\n*Step 2\n\tOpen the door Put the elephant into the fridge\nStep 3\n\tOpen the door Put the elephant into the fridge\nStep 4\n\tOpen the door Put the elephant into the fridge',
+            },
+        };
+    },
+    propsValue: _propsValue,
+    adaptor: ({
+        shape,
+        level,
+        state,
+        location,
+        width,
+        height,
+        data,
+        style,
+        ...others
+    }: adaptorProps) => {
+        const list = parseData(data, { parseContent: true }).filter(
+            ({ type }) => type === NodeType.node
+        );
+        const dataSouce: {
+            key: number;
+            icon?: string;
+            title: string;
+            content?: string;
+            disabled: boolean;
+            percent?: number;
+        }[] = [];
+
+        let current = 0;
+        list.forEach((item, index) => {
+            const { value = '' } =
+                (item.value as IContent[]).find(({ type }) => type === ContentType.icon) || {};
+            dataSouce.push({
+                key: index,
+                icon: value,
+                title: (item.value as IContent[])
+                    .filter(({ type }) => type === ContentType.text)
+                    .map(({ value }) => value)
+                    .join(''),
+                content:
+                    item.children && item.children.length > 0
+                        ? (item.children[0].value as IContent[])
+                              .filter(({ type }) => type === ContentType.text)
+                              .map(({ value }) => value)
+                              .join('')
+                        : '',
+                disabled: state === 'disabled' || item.state === 'disabled',
+            });
+            if (item.state === 'active') {
+                current = index;
+            }
+        });
+
+        if (state === 'percent' && dataSouce[current]) {
+            dataSouce[current].percent = 60;
+        }
+
+        return (
+            <div
+                {...others}
+                style={{
+                    width,
+                    height,
+                    ...style,
+                }}
+            >
+                <Step
+                    current={current}
+                    shape={shape}
+                    direction={level}
+                    labelPlacement={location === 'right' ? 'hoz' : 'ver'}
+                >
+                    {dataSouce.map(item => (
+                        <Step.Item
+                            key={item.key}
+                            title={item.title}
+                            content={item.content}
+                            icon={item.icon}
+                            percent={item.percent}
+                            disabled={item.disabled}
+                        />
+                    ))}
+                </Step>
+            </div>
+        );
+    },
+    demoOptions: (demo: { node: { props: { level: string; width: number; height: number } } }) => {
+        if (demo.node.props.level === 'hoz') {
+            demo.node.props = {
+                ...demo.node.props,
+                width: 600,
+                height: 120,
+            };
+        } else if (demo.node.props.level === 'ver') {
+            demo.node.props = {
+                ...demo.node.props,
+                width: 200,
+                height: 300,
+            };
+        }
+
+        return demo;
+    },
+};

components/step/__docs__/demo/basic/index.tsx

@@ -8,7 +8,7 @@ const steps = [
     ['Step 3', 'Close the refrigerator door'],
 ].map((item, index) => (
     <Step.Item
-        aria-current={index === 1 ? 'step' : null}
+        aria-current={index === 1 ? 'step' : undefined}
         key={index}
         title={item[0]}
         content={item[1]}