Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Dec 19, 2025

Ports four MobX-RESTful form components from React Bootstrap to Shadcn UI, following the established pattern in PR #3.

Components Added

FileUploader

  • FileModel abstract class extending BaseModel for file array management
  • Drag-and-drop file reordering using FilePicker components
  • Supports single and multiple file uploads with upload/delete hooks

RestForm

  • Generic form component for CRUD operations with ListModel<D, F> integration
  • Field type support: text, number, date, file, checkbox, radio, textarea, select, badge input
  • Custom validation messages via validMessage/invalidMessage props
  • Example:
<RestForm
  fields={[
    { key: "name", type: "text", required: true },
    { key: "email", type: "email" },
    { key: "tags", multiple: true }
  ]}
  store={listModelStore}
  translator={i18nTranslator}
/>

RestFormModal

  • Dialog wrapper for RestForm that auto-opens when store.currentOne is set
  • Displays entity ID in modal header

SearchableInput

  • Debounced search with autocomplete dropdown
  • Multiple selection with badge display
  • Optional inline item creation via RestFormModal integration
  • Infinite scroll support through ScrollList

Registry Configuration

All components registered in registry.json with dependency chains:

  • file-uploaderfile-picker, file-preview
  • rest-formbutton, label, badge-input, file-uploader, form-field
  • rest-form-modaldialog, rest-form
  • searchable-inputbadge-bar, rest-form-modal, scroll-list

UI Components

Auto-generated Shadcn UI components via shadcn-helper:

  • components/ui/dialog.tsx - Modal dialogs
  • components/ui/badge.tsx - Tag/label badges
Original prompt

参照 #3 的模式,用 Shadcn UI 实现以下组件:

  1. https://github.com/idea2app/MobX-RESTful-table/blob/master/source/FileUploader.tsx

  2. https://github.com/idea2app/MobX-RESTful-table/blob/master/source/RestForm.tsx

  3. https://github.com/idea2app/MobX-RESTful-table/blob/master/source/RestFormModal.tsx

  4. https://github.com/idea2app/MobX-RESTful-table/blob/master/source/SearchableInput.tsx

创建自 VS Code


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI and others added 2 commits December 19, 2025 01:06
…ents

Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>
Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>
Copilot AI changed the title [WIP] Implement Shadcn UI for specified components Implement FileUploader, RestForm, RestFormModal, and SearchableInput components with Shadcn UI Dec 19, 2025
Copilot AI requested a review from TechQuery December 19, 2025 01:28
@TechQuery TechQuery changed the title Implement FileUploader, RestForm, RestFormModal, and SearchableInput components with Shadcn UI [add] FileUploader, RestForm, RestFormModal & SearchableInput components with Shadcn UI Dec 19, 2025
@TechQuery TechQuery marked this pull request as ready for review December 19, 2025 16:32
@TechQuery TechQuery merged commit 9023a7c into main Dec 19, 2025
1 check passed
@github-project-automation github-project-automation bot moved this from In progress to Done in 开源项目 Dec 19, 2025
@TechQuery TechQuery deleted the copilot/implement-shadcn-ui-components branch December 19, 2025 16:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature New feature or request

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants