@blocklet/component-studio-cli 0.4.134

package/templates/init/1-professional/src/components/HelloWorld/@metadata.json

@@ -0,0 +1,433 @@
+{
+  "id": "KEHGy3vdflE8JGrV",
+  "createdAt": "2025-03-20T16:01:56.655Z",
+  "updatedAt": "2025-03-21T01:24:04.008Z",
+  "name": "HelloWorld",
+  "description": "",
+  "properties": {
+    "gs1rn5jmxfvpxptx": {
+      "index": 0,
+      "data": {
+        "id": "gs1rn5jmxfvpxptx",
+        "key": "title",
+        "type": "string",
+        "visible": true,
+        "locales": {
+          "zh": {
+            "name": "标题",
+            "defaultValue": "Hello World"
+          },
+          "en": {
+            "name": "Title",
+            "defaultValue": "Hello World"
+          }
+        }
+      }
+    },
+    "9ajrz12ik7esfk1z": {
+      "index": 1,
+      "data": {
+        "id": "9ajrz12ik7esfk1z",
+        "key": "description",
+        "type": "string",
+        "visible": true,
+        "locales": {
+          "zh": {
+            "name": "描述",
+            "defaultValue": "这是你的创意实验室，在这里可以:\n- 设计和构建各类强大组件\n- 将创意转化为可复用代码\n- 打造专属于您的组件库\n释放你的开发潜能，开始创作吧！"
+          },
+          "en": {
+            "name": "Description",
+            "defaultValue": "This is your creative lab, where you can:\n- Design and build powerful components\n- Transform ideas into reusable code\n- Create your own component library\nUnleash your development potential and start creating!"
+          }
+        }
+      }
+    },
+    "3ckcfvf6b7zyskk8": {
+      "index": 2,
+      "data": {
+        "id": "3ckcfvf6b7zyskk8",
+        "key": "logo",
+        "type": "url",
+        "visible": true,
+        "locales": {
+          "zh": {
+            "defaultValue": {
+              "url": "/.well-known/service/blocklet/logo?imageFilter=convert&f=png&h=80",
+              "mediaKitUrl": "/.well-known/service/blocklet/logo?imageFilter=convert&f=png&h=80"
+            },
+            "name": "Logo"
+          },
+          "en": {
+            "defaultValue": {
+              "url": "/.well-known/service/blocklet/logo?imageFilter=convert&f=png&h=80",
+              "mediaKitUrl": "/.well-known/service/blocklet/logo?imageFilter=convert&f=png&h=80"
+            },
+            "name": "Logo"
+          }
+        },
+        "subProperties": {
+          "ML-CDw7LvtlhM_cl": {
+            "index": 0,
+            "data": {
+              "id": "ML-CDw7LvtlhM_cl",
+              "key": "url",
+              "locales": {
+                "en": {
+                  "name": "url"
+                },
+                "zh": {
+                  "name": "url"
+                }
+              }
+            }
+          },
+          "K-HYgPHtAsmO_mer": {
+            "index": 1,
+            "data": {
+              "id": "K-HYgPHtAsmO_mer",
+              "key": "mediaKitUrl",
+              "locales": {
+                "en": {
+                  "name": "mediaKitUrl"
+                },
+                "zh": {
+                  "name": "mediaKitUrl"
+                }
+              }
+            }
+          },
+          "evequmAWgWEWZLex": {
+            "index": 2,
+            "data": {
+              "id": "evequmAWgWEWZLex",
+              "key": "width",
+              "locales": {
+                "en": {
+                  "name": "width"
+                },
+                "zh": {
+                  "name": "width"
+                }
+              }
+            }
+          },
+          "poeAwflRHJeUmfLa": {
+            "index": 3,
+            "data": {
+              "id": "poeAwflRHJeUmfLa",
+              "key": "height",
+              "locales": {
+                "en": {
+                  "name": "height"
+                },
+                "zh": {
+                  "name": "height"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "x3lqht8ikble1itx": {
+      "index": 3,
+      "data": {
+        "id": "x3lqht8ikble1itx",
+        "key": "copyright",
+        "type": "string",
+        "visible": false,
+        "locales": {
+          "zh": {
+            "name": "版权信息",
+            "defaultValue": "由 Component Studio 提供支持"
+          },
+          "en": {
+            "name": "Copyright",
+            "defaultValue": "Powered by Component Studio"
+          }
+        }
+      }
+    },
+    "q0ezdj81v0m14y5m": {
+      "index": 4,
+      "data": {
+        "id": "q0ezdj81v0m14y5m",
+        "key": "number",
+        "type": "number",
+        "visible": true,
+        "locales": {
+          "zh": {
+            "name": "整数",
+            "defaultValue": 42
+          },
+          "en": {
+            "name": "Integer",
+            "defaultValue": 42
+          }
+        }
+      }
+    },
+    "bl0rimfebwbencoj": {
+      "index": 5,
+      "data": {
+        "id": "bl0rimfebwbencoj",
+        "key": "decimal",
+        "type": "decimal",
+        "visible": true,
+        "locales": {
+          "zh": {
+            "name": "小数",
+            "defaultValue": 3.14
+          },
+          "en": {
+            "name": "Decimal",
+            "defaultValue": 3.14
+          }
+        }
+      }
+    },
+    "gioetxz8d13jabz6": {
+      "index": 6,
+      "data": {
+        "id": "gioetxz8d13jabz6",
+        "key": "showCopyright",
+        "type": "boolean",
+        "visible": true,
+        "locales": {
+          "zh": {
+            "name": "是否展示 Copyright",
+            "defaultValue": true
+          },
+          "en": {
+            "name": "Show Description",
+            "defaultValue": true
+          }
+        }
+      }
+    },
+    "yi1oj4rq1eziup1d": {
+      "index": 7,
+      "data": {
+        "id": "yi1oj4rq1eziup1d",
+        "key": "titleColor",
+        "type": "color",
+        "visible": true,
+        "locales": {
+          "zh": {
+            "defaultValue": "rgb(45, 36, 45)",
+            "name": "标题颜色"
+          },
+          "en": {
+            "defaultValue": "rgb(44, 39, 44)",
+            "name": "Title Color"
+          }
+        }
+      }
+    },
+    "4f49q5uidkcp5ak4": {
+      "index": 8,
+      "data": {
+        "id": "4f49q5uidkcp5ak4",
+        "key": "json",
+        "type": "json",
+        "visible": true,
+        "locales": {
+          "zh": {
+            "name": "JSON 数据",
+            "defaultValue": {
+              "foo": "-",
+              "bar": "-"
+            }
+          },
+          "en": {
+            "name": "JSON Data",
+            "defaultValue": {
+              "foo": "foo",
+              "bar": "bar"
+            }
+          }
+        },
+        "subProperties": {
+          "gpy89bsxc6ovvlsp": {
+            "index": 0,
+            "data": {
+              "id": "gpy89bsxc6ovvlsp",
+              "key": "foo",
+              "type": "string",
+              "visible": true,
+              "locales": {
+                "zh": {
+                  "name": "名称",
+                  "defaultValue": "-"
+                },
+                "en": {
+                  "name": "Foo",
+                  "defaultValue": "foo"
+                }
+              }
+            }
+          },
+          "1j34jdhdptp2xm5e": {
+            "index": 1,
+            "data": {
+              "id": "1j34jdhdptp2xm5e",
+              "key": "bar",
+              "type": "string",
+              "visible": true,
+              "locales": {
+                "zh": {
+                  "name": "属性",
+                  "defaultValue": "-"
+                },
+                "en": {
+                  "name": "Bar",
+                  "defaultValue": "bar"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "lbclpm6mxrp10w2k": {
+      "index": 9,
+      "data": {
+        "id": "lbclpm6mxrp10w2k",
+        "key": "array",
+        "type": "array",
+        "visible": true,
+        "locales": {
+          "zh": {
+            "name": "数组数据",
+            "defaultValue": [
+              {
+                "name": "示例用户",
+                "bio": "这是一个示例用户"
+              }
+            ]
+          },
+          "en": {
+            "name": "Array Data",
+            "defaultValue": [
+              {
+                "name": "Example User",
+                "bio": "This is an example user"
+              }
+            ]
+          }
+        },
+        "subProperties": {
+          "1c5vl2p9cn9ryvgh": {
+            "index": 0,
+            "data": {
+              "id": "1c5vl2p9cn9ryvgh",
+              "key": "name",
+              "type": "string",
+              "visible": true,
+              "locales": {
+                "zh": {
+                  "name": "姓名",
+                  "defaultValue": ""
+                },
+                "en": {
+                  "name": "Name",
+                  "defaultValue": ""
+                }
+              }
+            }
+          },
+          "c5whnccwzqqzaa0w": {
+            "index": 1,
+            "data": {
+              "id": "c5whnccwzqqzaa0w",
+              "key": "bio",
+              "type": "multiline",
+              "visible": true,
+              "locales": {
+                "zh": {
+                  "name": "简介",
+                  "defaultValue": ""
+                },
+                "en": {
+                  "name": "Bio",
+                  "defaultValue": ""
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "s0tund4p07bzizgv": {
+      "index": 10,
+      "data": {
+        "id": "s0tund4p07bzizgv",
+        "key": "yaml",
+        "type": "yaml",
+        "visible": true,
+        "locales": {
+          "zh": {
+            "name": "YAML 配置",
+            "defaultValue": ""
+          },
+          "en": {
+            "name": "YAML Configuration",
+            "defaultValue": "ya: ya\nml: ml\n"
+          }
+        },
+        "subProperties": {
+          "1q8tsreh4k2mhbgs": {
+            "index": 0,
+            "data": {
+              "id": "1q8tsreh4k2mhbgs",
+              "key": "ya",
+              "type": "string",
+              "visible": true,
+              "locales": {
+                "en": {
+                  "name": "Ya",
+                  "defaultValue": "ya"
+                }
+              }
+            }
+          },
+          "09w8sncxwrj6tldi": {
+            "index": 1,
+            "data": {
+              "id": "09w8sncxwrj6tldi",
+              "key": "ml",
+              "type": "string",
+              "visible": true,
+              "locales": {
+                "en": {
+                  "name": "Ml",
+                  "defaultValue": "ml"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "8e7g6c61pxcy0q4w": {
+      "index": 11,
+      "data": {
+        "id": "8e7g6c61pxcy0q4w",
+        "key": "children",
+        "type": "component",
+        "visible": true,
+        "locales": {
+          "zh": {
+            "name": "子组件",
+            "defaultValue": {}
+          },
+          "en": {
+            "name": "Children Components",
+            "defaultValue": {}
+          }
+        }
+      }
+    }
+  }
+}

package/templates/init/1-professional/src/components/HelloWorld/index.tsx

@@ -0,0 +1,224 @@
+import React from 'react';
+
+import {
+  ContentWrapper,
+  GradientTitle,
+  Logo,
+  NumberDisplay,
+  JsonDisplay,
+  YamlDisplay,
+  ArrayTable,
+  CopyrightFooter,
+  AnimationWrapper,
+} from '../../atoms';
+import { logger } from '../../utils';
+
+export interface BlockProps {
+  /** @description id: gs1rn5jmxfvpxptx | type: string | visible: true */
+  title?: string;
+  /** @description id: 9ajrz12ik7esfk1z | type: string | visible: true */
+  description?: string;
+  /** @description id: 3ckcfvf6b7zyskk8 | type: url | visible: true */
+  logo?: {
+    url: string;
+    mediaKitUrl?: string;
+    width?: number;
+    height?: number;
+  };
+  /** @description id: x3lqht8ikble1itx | type: string | visible: false */
+  copyright?: string;
+  /** @description id: q0ezdj81v0m14y5m | type: number | visible: true */
+  number?: number;
+  /** @description id: bl0rimfebwbencoj | type: decimal | visible: true */
+  decimal?: number;
+  /** @description id: gioetxz8d13jabz6 | type: boolean | visible: true */
+  showCopyright?: boolean;
+  /** @description id: yi1oj4rq1eziup1d | type: color | visible: true */
+  titleColor?: string;
+  /** @description id: 4f49q5uidkcp5ak4 | type: json | visible: true */
+  json?: {
+    /** @description id: gpy89bsxc6ovvlsp | type: string | visible: true */
+    foo?: string;
+    /** @description id: 1j34jdhdptp2xm5e | type: string | visible: true */
+    bar?: string;
+  };
+  /** @description id: lbclpm6mxrp10w2k | type: array | visible: true */
+  array?: {
+    /** @description id: 1c5vl2p9cn9ryvgh | type: string | visible: true */
+    name?: string;
+    /** @description id: c5whnccwzqqzaa0w | type: multiline | visible: true */
+    bio?: string;
+  }[];
+  /** @description id: s0tund4p07bzizgv | type: yaml | visible: true */
+  yaml?: {
+    /** @description id: 1q8tsreh4k2mhbgs | type: string | visible: true */
+    ya?: string;
+    /** @description id: 09w8sncxwrj6tldi | type: string | visible: true */
+    ml?: string;
+  };
+  /** @description id: 8e7g6c61pxcy0q4w | type: component | visible: true */
+  children?: any;
+}
+
+// Define the type of array items
+type ArrayItem = {
+  name?: string;
+  bio?: string;
+};
+
+// default export
+export default function BlockComponent({
+  title = 'Hello World',
+  logo,
+  description,
+  copyright = 'Powered by Component Studio',
+  number,
+  decimal,
+  showCopyright = true,
+  titleColor = '#6366F1',
+  json,
+  array,
+  yaml,
+  children,
+}: BlockProps) {
+  // Create array table column configuration
+  const arrayColumns = [
+    { key: 'name' as keyof ArrayItem, header: 'Name' },
+    { key: 'bio' as keyof ArrayItem, header: 'Bio' },
+  ];
+
+  logger.log('arrayColumns', arrayColumns);
+
+  return (
+    <ContentWrapper>
+      {/* Logo area */}
+      {logo && <Logo src={typeof logo === 'object' ? logo.url : logo} width={logo?.width} height={logo?.height} />}
+
+      {/* Title area */}
+      {title && <GradientTitle title={title} startColor={titleColor} animate />}
+
+      {/* Description area */}
+      {description && (
+        <AnimationWrapper animationType="fadeSlideUp" delay="0.2s">
+          <div
+            style={{
+              color: '#4B5563',
+              padding: '1.5rem 2rem',
+              background: 'rgba(255, 255, 255, 0.8)',
+              backdropFilter: 'blur(10px)',
+              borderRadius: '16px',
+              marginTop: '1.5rem',
+              border: '1px solid rgba(255, 255, 255, 0.5)',
+              boxShadow: '0 4px 20px rgba(0, 0, 0, 0.05)',
+              whiteSpace: 'pre-wrap',
+              lineHeight: 1.7,
+              fontSize: '1.1rem',
+            }}>
+            {description}
+          </div>
+        </AnimationWrapper>
+      )}
+
+      {/* Data display area */}
+      {(number !== undefined || decimal !== undefined || json) && (
+        <div
+          className="data-section"
+          style={{
+            display: 'flex',
+            gap: '1.5rem',
+            margin: '2rem 0',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+          }}>
+          {/* Number display */}
+          {(number !== undefined || decimal !== undefined) && <NumberDisplay integer={number} decimal={decimal} />}
+
+          {/* JSON data display */}
+          {json && <JsonDisplay data={json} />}
+        </div>
+      )}
+
+      {/* Array data table */}
+      {array && array.length > 0 && <ArrayTable<ArrayItem> data={array} columns={arrayColumns} />}
+
+      {/* YAML display */}
+      {yaml && <YamlDisplay data={yaml} />}
+
+      {/* Sub components */}
+      {children && (
+        <AnimationWrapper animationType="fadeSlideUp" delay="0.5s">
+          <div
+            style={{
+              margin: '2.5rem 0',
+              padding: '2rem',
+              borderRadius: '16px',
+              background: 'rgba(255, 255, 255, 0.7)',
+              backdropFilter: 'blur(10px)',
+              border: '1px solid rgba(99, 102, 241, 0.2)',
+              boxShadow: '0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03)',
+            }}>
+            <h3
+              style={{
+                textAlign: 'center',
+                marginTop: '0',
+                marginBottom: '1.5rem',
+                color: '#4F46E5',
+                fontSize: '1.5rem',
+                fontWeight: 600,
+              }}>
+              Children Components
+            </h3>
+            {children}
+          </div>
+        </AnimationWrapper>
+      )}
+
+      {/* Copyright information */}
+      {showCopyright && copyright && <CopyrightFooter text={copyright} />}
+    </ContentWrapper>
+  );
+}
+
+// export edit component
+export const EditComponent: React.FC<BlockProps & { onChange?: (value: BlockProps) => void }> = ({
+  onChange,
+  ...props
+}) => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <div
+        style={{
+          fontSize: '14px',
+          fontWeight: 500,
+          color: '#333',
+          padding: '8px 0',
+          borderBottom: '1px solid #eee',
+        }}>
+        Extra Edit Component
+      </div>
+
+      {/* Copyright information input */}
+      <div>
+        <label htmlFor="copyright-input" style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}>
+          Copyright Text
+        </label>
+        <input
+          id="copyright-input"
+          type="text"
+          style={{
+            width: '100%',
+            padding: '8px 12px',
+            border: '1px solid #ddd',
+            borderRadius: '4px',
+            fontSize: '14px',
+            transition: 'border-color 0.3s',
+            outline: 'none',
+          }}
+          value={props.copyright || ''}
+          onChange={(e) => onChange?.({ ...props, copyright: e.target.value })}
+          placeholder="Please Input Copyright"
+        />
+      </div>
+    </div>
+  );
+};

package/templates/init/1-professional/src/type.d.ts

@@ -0,0 +1,42 @@
+export interface TextProps {
+  id?: string;
+  type?: 'text';
+  text: string;
+  style: {
+    color?: string;
+    fontSize?: string;
+  };
+}
+
+export interface RichDescriptionProps {
+  list: Array<
+    | TextProps
+    | {
+        id?: string;
+        type: 'image';
+        url: string;
+        alt?: string;
+        width?: string;
+        height?: string;
+      }
+    | {
+        id?: string;
+        type: 'link';
+        text: string;
+        color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+        variant?: 'text' | 'outlined' | 'contained' | 'icon';
+        startIcon?: string;
+        endIcon?: string;
+        size?: 'small' | 'medium' | 'large';
+        url: string;
+        target?: '_blank' | '_self';
+      }
+  >;
+}
+
+export interface ImageProps {
+  url: string;
+  mediaKitUrl?: string;
+  width?: string;
+  height?: string;
+}

package/templates/init/1-professional/src/utils/index.ts

@@ -0,0 +1 @@
+export const logger = console;