feat: Add progress, skeleton, card, calendar, badge, tag, statistic components

[xuanlid]

English | 简体中文

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• [ ] The commit message follows our Commit Message Guidelines
• [ ] Tests for the changes have been added (for bug fixes / features)
• [ ] Docs have been added / updated (for bug fixes / features)
• [ ] Built its own designer, fully self-validated

PR Type

What kind of change does this PR introduce?

• [ ] Bugfix
• [ ] Feature
• [ ] Code style update (formatting, local variables)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] CI related changes
• [ ] Documentation content changes
• [ ] Other... Please describe:

Background and solution

Add progress, skeleton, card, calendar, badge, tag, statistic components

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• [ ] Yes
• [ ] No

Other information

Summary by CodeRabbit

• New Features
  • Added seven new UI components: TinyProgress, TinySkeleton, TinyCard, TinyCalendar, TinyBadge, TinyTag, and TinyStatistic. These components are now available in the component library for use in application design.

[coderabbitai[bot]]

Walkthrough

Seven new UI components (TinyProgress, TinySkeleton, TinyCard, TinyCalendar, TinyBadge, TinyTag, TinyStatistic) were added to the designer-demo mock bundle and registered in the app-center schema with metadata, configuration schemas, and editor snippets.

Changes

Cohort / File(s)	Summary
Bundle Component Definitions designer-demo/public/mock/bundle.json	Added component definitions and editor snippets for seven components: TinyProgress, TinySkeleton, TinyCard, TinyCalendar, TinyBadge, TinyTag, TinyStatistic. Each entry includes metadata, property schemas, events, slots, configure blocks, and example snippets.
App-Center Registry Entries mockServer/src/mock/get/app-center/v1/apps/schema/1.json	Appended seven entries to componentsMap registering the same components with package: "@opentiny/vue", exportName, destructuring: true, and version: "3.22.0".

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Check consistency of schema structure and naming across both files
• Validate JSON syntax and snippet formatting in bundle.json
• Confirm exportName values and version: "3.22.0" entries in the app-center registry
• Review property types and required fields for obvious mismatches or typos

Poem

🐰 New components hop into the light,
Progress, cards, and stats take flight,
Calendars and badges join the show,
Tiny widgets dance in a row,
Designer dreaming — code delights! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: adding seven new Tiny Vue components (progress, skeleton, card, calendar, badge, tag, statistic) to the component catalog.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3ecdec466012c4b1bafff1668c224307fae3b7ab and 92ad174b0ea9f920593a01c1e66e4fdddfabd4ea.

📒 Files selected for processing (2)

• designer-demo/public/mock/bundle.json (2 hunks)
• mockServer/src/mock/get/app-center/v1/apps/schema/1.json (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• mockServer/src/mock/get/app-center/v1/apps/schema/1.json

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: rhlin
Repo: opentiny/tiny-engine PR: 1011
File: packages/canvas/render/src/builtin/builtin.json:645-850
Timestamp: 2025-01-14T04:22:02.404Z
Learning: In TinyEngine, components must use inline styles instead of CSS classes because components cannot carry class styles when dragged into the canvas.

📚 Learning: 2025-01-14T06:55:59.692Z

Learnt from: gene9831
Repo: opentiny/tiny-engine PR: 1011
File: packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue:95-98
Timestamp: 2025-01-14T06:55:59.692Z
Learning: The tiny-select component from opentiny/vue library ensures selected options are valid internally, requiring no additional validation in the change handler.

Applied to files:

• designer-demo/public/mock/bundle.json

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: push-check

🔇 Additional comments (2)

designer-demo/public/mock/bundle.json (2)

8384-8684: TinySkeleton schema looks reasonable

Boolean properties, row counts, and variant selections are properly typed and configured with sensible defaults.

---

22126-22248: Component snippets align with schema

The insertion snippets (hunk 2) provide sensible default props for the new components. Once schema issues are resolved, these snippets will correctly reflect the component configurations.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}