feat: add list component

components/list/demo.mdx

@@ -0,0 +1,47 @@
+import * as Module from './index.tsx'
+import { RenderToReact } from '../../shared/render'
+import { useState } from 'react'
+export const Component = RenderToReact(Module)
+export function InputBox () {
+  const [val, setVal] = useState('v0')
+  return (
+    <div style={{ margin: '10px', color: '#999' }}>
+      <Component 
+        list={[{ name: 'AAA' }, { name: 'BBBBB' }, { name: 'CC' }]}
+        render={(item, i) => {
+          return (
+            <div >{i+1}.{item.name}</div>
+          )
+        }}
+      />
+    </div>
+  )
+}
+
+
+export function InputBox2 () {
+  const [val, setVal] = useState('v0')
+  return (
+    <div style={{ margin: '10px', color: '#999' }}>
+      <Component 
+        list={[{ name: 'AAA' }, { name: 'BBBBB' }, { name: 'CC' }]}
+        extra={<div>extra</div>}
+        render={(item, i) => {
+          return (
+            <div >{i+1}.{item.name}</div>
+          )
+        }}
+      />
+    </div>
+  )
+}
+
+# List 列表
+
+<InputBox />
+
+普通列表
+
+<InputBox2 />
+
+带extra 的列表

components/list/index.tsx

@@ -0,0 +1,65 @@
+import { h, SignalProps, PropTypes, useLogic, ConvertToLayoutTreeDraft, VirtualLayoutJSON } from '@polymita/renderer';
+import { after, Signal, signal } from '@polymita/signal'
+
+export const name = 'List' as const
+export let meta: {
+  props: ListProps,
+  layoutStruct: ListLayout
+  patchCommands: []
+}
+
+export interface ListProps<T = any> {
+  list: Signal<T[]>
+  render: (item: T, index: number) => VirtualLayoutJSON
+  extra?: VirtualLayoutJSON | string | number
+}
+
+export const propTypes = {
+  list: PropTypes.signal.isRequired,
+}
+
+export const logic = (props: SignalProps<ListProps>) => {
+  return {
+  }
+}
+type LogicReturn = ReturnType<typeof logic>
+
+export type ListLayout = {
+  type: 'listContainer',
+  children: [
+  ]
+}
+export const layout = <T,>(props: ListProps<T>) => {
+  const logic = useLogic<LogicReturn>()
+
+  const ds = props.list();
+
+  return (
+    <listContainer className="block">
+       {ds.map((item, index) => {
+          const r = props.render(item, index)
+          const key = (item as any)?.id ?? (item as any)?.key ?? (item as any)?.name ?? JSON.stringify(item)
+          return (
+            <listItem className="flex p-2 border-b items-center" key={key}>
+              <listContent className="flex-1">
+                {r}
+              </listContent>             
+              <listExtra className="flex-none ml-2">
+                {props.extra}
+              </listExtra>
+            </listItem>
+          )
+       })}
+    </listContainer>
+  )
+}
+
+export const styleRules = (props: ListProps, layout: ConvertToLayoutTreeDraft<ListLayout>) => {
+  return [
+  ]
+}
+
+export const designPattern = (props: ListProps, layout: ConvertToLayoutTreeDraft<ListLayout>) => {
+  const logic = useLogic<LogicReturn>()
+  return {}
+}

components/modal/index.tsx

@@ -42,7 +42,9 @@ export const layout = (props: ModalProps): VirtualLayoutJSON => {
         </modalContent>
 
         <footer className="flex gap-2 p-4 flex-row-reverse" >
-          <Button type="primary" onClick={(e) => props.onOk?.(e)}>确定</Button>
+          <Button type="primary" onClick={(e) => {
+            props.onOk?.(e)
+          }}>确定</Button>
           <Button onClick={(e) => {
             props.onCancel?.(e)
             props.onClose?.(e)

demo-site/components/form-item.js

@@ -0,0 +1,121 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+
+// components/form-item/demo.mdx
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+// components/form-item/index.tsx
+var form_item_exports = {};
+__export(form_item_exports, {
+  designPattern: () => designPattern,
+  layout: () => layout,
+  logic: () => logic,
+  meta: () => meta,
+  name: () => name,
+  propTypes: () => propTypes,
+  styleRules: () => styleRules
+});
+import { h, useLogic } from "@polymita/renderer";
+var name = "FormItem";
+var meta;
+var propTypes = {};
+var logic = (props) => {
+  return {};
+};
+var layout = (props) => {
+  const logic2 = useLogic();
+  return /* @__PURE__ */ h("formItemContainer", null);
+};
+var styleRules = (props, layout2) => {
+  return [];
+};
+var designPattern = (props, layout2) => {
+  const logic2 = useLogic();
+  return {};
+};
+
+// shared/render.ts
+import { createRSRenderer } from "@polymita/renderer";
+import React from "react";
+function RenderToReactWithWrap(module) {
+  const render = RenderToReact(module);
+  return (p) => {
+    const content = render(p);
+    console.log("content: ", content);
+    return React.createElement(
+      "div",
+      { style: { margin: "20px", display: "inline-block" } },
+      content
+    );
+  };
+}
+function RenderToReact(module) {
+  const renderer = createRSRenderer(module, {
+    framework: {
+      name: "react",
+      lib: React
+    }
+  });
+  return (p) => {
+    const r = renderer.construct(p);
+    return renderer.render();
+  };
+}
+
+// components/form-item/demo.mdx
+import { useState } from "react";
+var Component = RenderToReactWithWrap(form_item_exports);
+function InputBox() {
+  const [val, setVal] = useState("v0");
+  return _jsx("div", {
+    style: {
+      margin: "10px",
+      color: "#999"
+    }
+  });
+}
+function InputBox2() {
+  const [val, setVal] = useState("v0");
+  return _jsx("div", {
+    style: {
+      margin: "10px",
+      color: "#999"
+    }
+  });
+}
+function _createMdxContent(props) {
+  const _components = Object.assign({
+    h1: "h1",
+    p: "p"
+  }, props.components);
+  return _jsxs(_Fragment, {
+    children: [_jsx(_components.h1, {
+      children: "Input \u8F93\u5165"
+    }), "\n", _jsx(InputBox, {}), "\n", _jsx(_components.p, {
+      children: "\u63A5\u6536\u7528\u6237\u8F93\u5165"
+    }), "\n", _jsx(InputBox2, {}), "\n", _jsx(_components.p, {
+      children: "\u6570\u5B57\u6846 type=number"
+    }), "\n", _jsx(Component, {
+      disabled: true,
+      value: "disabled"
+    }), "\n", _jsx(_components.p, {
+      children: "\u4E0D\u53EF\u4EE5\u7684\u8F93\u5165\u6846"
+    })]
+  });
+}
+function MDXContent(props = {}) {
+  const { wrapper: MDXLayout } = props.components || {};
+  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
+    children: _jsx(_createMdxContent, props)
+  })) : _createMdxContent(props);
+}
+var demo_default = MDXContent;
+export {
+  Component,
+  InputBox,
+  InputBox2,
+  demo_default as default
+};

demo-site/components/form.js

@@ -0,0 +1,121 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+
+// components/form/demo.mdx
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+// components/form/index.tsx
+var form_exports = {};
+__export(form_exports, {
+  designPattern: () => designPattern,
+  layout: () => layout,
+  logic: () => logic,
+  meta: () => meta,
+  name: () => name,
+  propTypes: () => propTypes,
+  styleRules: () => styleRules
+});
+import { h, useLogic } from "@polymita/renderer";
+var name = "Form";
+var meta;
+var propTypes = {};
+var logic = (props) => {
+  return {};
+};
+var layout = (props) => {
+  const logic2 = useLogic();
+  return /* @__PURE__ */ h("formContainer", null);
+};
+var styleRules = (props, layout2) => {
+  return [];
+};
+var designPattern = (props, layout2) => {
+  const logic2 = useLogic();
+  return {};
+};
+
+// shared/render.ts
+import { createRSRenderer } from "@polymita/renderer";
+import React from "react";
+function RenderToReactWithWrap(module) {
+  const render = RenderToReact(module);
+  return (p) => {
+    const content = render(p);
+    console.log("content: ", content);
+    return React.createElement(
+      "div",
+      { style: { margin: "20px", display: "inline-block" } },
+      content
+    );
+  };
+}
+function RenderToReact(module) {
+  const renderer = createRSRenderer(module, {
+    framework: {
+      name: "react",
+      lib: React
+    }
+  });
+  return (p) => {
+    const r = renderer.construct(p);
+    return renderer.render();
+  };
+}
+
+// components/form/demo.mdx
+import { useState } from "react";
+var Component = RenderToReactWithWrap(form_exports);
+function InputBox() {
+  const [val, setVal] = useState("v0");
+  return _jsx("div", {
+    style: {
+      margin: "10px",
+      color: "#999"
+    }
+  });
+}
+function InputBox2() {
+  const [val, setVal] = useState("v0");
+  return _jsx("div", {
+    style: {
+      margin: "10px",
+      color: "#999"
+    }
+  });
+}
+function _createMdxContent(props) {
+  const _components = Object.assign({
+    h1: "h1",
+    p: "p"
+  }, props.components);
+  return _jsxs(_Fragment, {
+    children: [_jsx(_components.h1, {
+      children: "Input \u8F93\u5165"
+    }), "\n", _jsx(InputBox, {}), "\n", _jsx(_components.p, {
+      children: "\u63A5\u6536\u7528\u6237\u8F93\u5165"
+    }), "\n", _jsx(InputBox2, {}), "\n", _jsx(_components.p, {
+      children: "\u6570\u5B57\u6846 type=number"
+    }), "\n", _jsx(Component, {
+      disabled: true,
+      value: "disabled"
+    }), "\n", _jsx(_components.p, {
+      children: "\u4E0D\u53EF\u4EE5\u7684\u8F93\u5165\u6846"
+    })]
+  });
+}
+function MDXContent(props = {}) {
+  const { wrapper: MDXLayout } = props.components || {};
+  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
+    children: _jsx(_createMdxContent, props)
+  })) : _createMdxContent(props);
+}
+var demo_default = MDXContent;
+export {
+  Component,
+  InputBox,
+  InputBox2,
+  demo_default as default
+};