HyperUI项目贡献指南：如何参与组件开发与改进

前言

HyperUI作为一个基于Next.js和Tailwind CSS的UI组件库，为开发者提供了丰富的界面元素和设计模式。本文将详细介绍如何参与HyperUI项目的开发工作，包括问题报告、组件添加和本地环境配置等关键环节。

问题反馈与功能建议

在开发过程中发现问题或有改进想法时，建议先提交问题报告。这包括但不限于：

• 文本错误
• 可访问性问题
• SEO优化建议
• 新功能构想

通过规范的报告流程，可以确保开发团队充分讨论并制定最佳解决方案。

开发流程规范

准备工作

在开始任何实质性开发前，建议：

1. 创建问题报告讨论你的想法
2. 对于新组件，提供示例设计图
3. 获得团队认可后再开始编码

代码审查机制

所有提交的代码都会经过严格审查，审查过程中可能会收到反馈意见。请注意：

• 首次审查后的反馈必须在第三次审查前解决
• 如果第三次审查出现新反馈，仍需及时处理
• 未及时处理反馈的PR将被关闭

本地开发环境搭建

HyperUI基于Next.js构建，本地开发环境配置步骤如下：

1. 克隆项目仓库
2. 安装依赖：yarn install
3. 启动开发服务器：yarn dev
4. 实时编译CSS：yarn css --watch

添加新组件指南

组件创建流程

以添加营销类页脚组件为例：

1. 在/public/components/marketing/footers目录下创建新文件
2. 在/src/data/components/marketing/footers.mdx中注册新组件

命名规范

组件文件采用递增数字命名（如21、22等），请严格遵守这一约定。

预览控制

可以使用container:类调整组件预览位置，这些类不会影响最终复制的代码。

组件开发规范

1. 样式要求：必须使用Tailwind CSS实现所有样式
2. 插件限制：只能使用官方Tailwind CSS插件
3. 插件声明：在MDX文件的组件对象中声明使用的插件，例如：

   plugins: ['@tailwindcss/forms']
   

创建新组件集合

如需提议新的组件分类集合，建议先通过问题报告讨论，共同确定：

• 集合的定位
• 包含的组件类型
• 实现方案

常见问题处理

开发过程中可能会遇到控制台警告： params should be awaited before using its properties

这是Next.js的正常现象，可以安全忽略。await主要用于处理从params解析数据的getX函数。

结语

参与HyperUI项目开发不仅能提升个人技术能力，还能为社区贡献优质UI组件。遵循上述规范，你的贡献将更容易被接受和合并。期待看到更多开发者加入HyperUI的生态建设！