refactor: adjust structures and items to add composites, support getTypes API

[Aarebecca]

Invoke:

const infographic = new Infographic({
  // options
});

infographic.getTypes();

Output:

type InfographicType = {
  /** 信息图标题 */
  title: string;
  /** 信息图描述 */
  desc: string;
  /** 信息图的内容项 */
  items: Array<{
    /** 项目图标 */
    icon: string;
    /** 项目标签文本 */
    label: string;
    /** 项目数值内容 */
    value: number;
    /** 信息图描述 */
    desc: string;
  }>;
}

[gemini-code-assist]

Summary of Changes

Hello @Aarebecca, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a significant refactoring to the infographic component system by adding explicit composites metadata to both item and structure registrations. This metadata, which declares the sub-components or data fields used, is leveraged by a new getTypes API to dynamically generate TypeScript type definitions for infographic data. This enhancement improves type safety and provides a programmatic way to understand the expected data structure. Additionally, several list-based structures now support a zigzag layout option for more flexible visual arrangements.

Highlights

• Composites Metadata: Introduced a new composites metadata field for both item and structure registrations, explicitly declaring the sub-components or data fields they utilize (e.g., 'icon', 'label', 'value', 'desc', 'illus', 'title', 'item').
• Dynamic Type Generation API: Added a new getTypes() API to the Infographic class, which dynamically generates a TypeScript type string (InfographicType) based on the declared composites of the design's structure and items. This improves type safety and introspection.
• Zigzag Layout Option: Implemented a new zigzag boolean prop for list-column, list-grid, and list-row structures, allowing items to be positioned in an alternating (zigzag) pattern. Several built-in templates were updated to utilize this new option.
• Component Refinements: Simplified prop handling for HorizontalIconArrow, SimpleHorizontalArrow, SimpleVerticalArrow, and VerticalIconArrow components by removing the flipped prop and adjusting position logic. The positionV and positionH types in DotLine were also expanded to include a 'center' option.
• Documentation Updates: Extensively updated the prompt.md files for both items and structures to document the new composites field, its rules, and usage examples, ensuring developers understand how to correctly declare component compositions.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request is a significant refactoring that introduces a composites property to structures and items, enabling a new getTypes API for dynamically generating TypeScript type definitions. This is a valuable addition for developers. The changes are extensive but well-executed, particularly the refactoring of arrow components to improve separation of concerns. I've found a minor inconsistency in the documentation that should be addressed.

[gemini-code-assist]

The documentation uses the field name values, but the implementation across all components and the type definition in packages/infographic/src/designs/items/types.ts use composites. To ensure consistency, please update the documentation to use composites. This also applies to other occurrences of values in this file (e.g., lines 518, 740).

### 6. composites 字段规则

在 `registerItem` 时，需要传入 `composites` 字段，表示当前组件使用了哪些封装组件。`composites` 的值基于代码实现中使用的组件来确定：

- **ItemLabel** → `"label"`
- **ItemDesc** → `"desc"`
- **ItemValue** → `"value"`
- **ItemIcon** 或 **ItemIconCircle** → `"icon"`
- **Illus** → `"illus"`

**示例**：

```typescript
// 如果组件使用了 ItemLabel 和 ItemDesc
registerItem('simple-text', {
  component: SimpleText,
  composites: ['label', 'desc']
});

// 如果组件使用了 ItemIcon, ItemLabel, ItemValue 和 ItemDesc
registerItem('full-card', {
  component: FullCard,
  composites: ['icon', 'label', 'value', 'desc']
});

// 如果组件使用了 Illus, ItemLabel 和 ItemDesc
registerItem('illus-item', {
  component: IllusItem,
  composites: ['illus', 'label', 'desc']
});