@ code with beto/ ui (英语)

为博览会应用程序所建的React Industrial UI组件库.

概览

这个软件包为React Native应用程序提供可再使用的UI组件. 构件以"回想原生"(React Introduct)为上部,并被设计为与"博览会"无缝地工作.

安装

pnpm add @codewithbeto/ui

或与 npm :

npm install @codewithbeto/ui

快速启动

import { Text } from "@codewithbeto/ui";

export default function App() {
  return <Text type="title">Hello World</Text>;
}

构成部分

• 文本 - 有多个大小变体的轻量级文本组件和完全回放原生文本兼容性

发展

本地开发设置

这个包是pnpm工作空间的一部分. 关于地方发展:

1. 清除寄存器并安装依赖性 :

   pnpm install
   

2. 使用工作空间链接 apps/example 测试您的更改 :

   import { Text } from "@codewithbeto/ui";
   

3. 更改会在博览会自动重载.

大楼

在发布前, 您必须构建软件包来编译 TypeScript 到 JavaScript :

pnpm --filter @codewithbeto/ui build

此命令 :

• 编译类型脚本文件 src/ 到 Java 脚本在 dist/
• 生成 TypeScript 声明文件(.d.ts用于类型支持
• 创建用于调试的源地图

为什么建造? 我们发布编译的JavaScript到npm,而不是TypeScript源文件. 这确保:

• 更快安装( 不需要编译)
• 较小的软件包大小
• 不同类型脚本版本之间更好的兼容性

类型检查

运行类型检查而不构建 :

pnpm --filter @codewithbeto/ui typecheck

出版

通过GitHub Actions自动发布. 无本地 .npmrc 或需要个人访问托肯.

如何运作

储存库包括: 发布工作流程 即:

• 当一个 GitHub 发布 创建
• 发表于 latest 稳定释放,或 beta 预发
• 构建软件包并将其发布到 npm
• 用途 a NPM_TOKEN 用于认证的仓库密钥

版本

此套件跟随 Expo SDK 版本方案. 主要版本与它所建造和测试的世博会SDK版本相匹配. 譬如说, @codewithbeto/[email protected] 设计为Expo SDK 55. 这样一看就很容易识别出您的软件包与您的SDK版本兼容.

在主要版本中,我们使用补丁来修复错误,使用小补丁来更新功能:

• 补丁 (单位:千美元)55.0.0 → 55.0.1:错误修正,小改进
• 次要 (单位:千美元)55.0.0 → 55.1.0: 新特性(后向兼容)

出版稳定版

1. 弹出版本 内 package.json。 。 。 .

2. 提交版本出错 推动到 main。 。 。 .

3. 创建 GitHub 发布 :

   • 转到 页面
   • 点击“ 草稿新版本 ”
   • 创建一个匹配版本的新标签( 例如 ), v55.0.0(中文(简体) )
   • 添加描述变化的放行注释
   • 点击“ 文件发布 ”

4. 工作流程将在 latest 标签.

发布 beta 版本

Beta的放出让你在稳定版本上测试新的更改而不影响用户.

1. 弹出版本 带有预放标识符,例如:. 55.0.0-beta.1。 。 。 .

2. 提交版本出错 推到你的树枝上.

3. 创建 GitHub 发布 :

   • 转到 页面
   • 创建一个匹配版本的新标签( 例如 ), v55.0.0-beta.1(中文(简体) )
   • 检查 "作为预释" 复选框
   • 点击“ 文件发布 ”

4. 工作流程检测发布前旗并发布于 beta ditt-tag 代替 latest。 。 。 .

安装β版本 :

pnpm add @codewithbeto/ui@beta

运行的用户 pnpm add @codewithbeto/ui (无) @beta)将继续获得最新的稳定版本.

将 Beta 推广到稳定

一旦一个β经过测试并准备生产:

1. 更新版本 内 package.json 到稳定版本(删除预释标识符):

   • 55.0.0-beta.3 → 55.0.0

2. 提交版本出错 推动到 main。 。 。 .

3. 创建常规 GitHub 发布 (做到这一点) 没有 请检查access-date=中的日期值 (帮助) "Set as a pre-release":

   • 创建匹配稳定版本的新标签( 例如 ), v55.0.0(中文(简体) )
   • 点击“ 文件发布 ”

4. 工作流程发布软件包 latest。所有用户将在下次安装或更新时获得稳定版本.

示例:全发布寿命周期

以下是从开发到稳定发行的典型工作流程:

您也可以手动启动工作流程 行动 选项卡,如果需要,则使用自定义 dist-tag.

软件包配置

软件包配置为 npm 发布 :

• 书记官处: https://registry.npmjs.org
• 范围: @codewithbeto
• 访问 : 公开
• 包括的文件 : 只有 dist/ 文件夹(指定在 package.json(中文(简体) )

添加新组件

添加新组件时遵循此结构 :

1. 在 src/components/数字 :

   src/components/MyComponent/
   ├── MyComponent.tsx    # Component implementation
   ├── README.md          # Component documentation
   └── index.ts           # Exports
   

2. 用 TypeScript 创建组件 :

   // src/components/MyComponent/MyComponent.tsx
   import { View } from "react-native";
   
   export interface MyComponentProps {
     // your props
   }
   
   export function MyComponent({ ...props }: MyComponentProps) {
     return <View>...</View>;
   }
   

3. 创建组件索引文件 :

   // src/components/MyComponent/index.ts
   export { MyComponent, type MyComponentProps } from "./MyComponent";
   

4. 从主导出 src/index.ts数字 :

   export { MyComponent, type MyComponentProps } from "./components/MyComponent";
   

5. 在组件中添加综合文档 README.md 包括:

   • 构成部分说明和特征
   • 有类型和说明的平面表
   • 用法实例
   • 类型脚本示例

6. 更新 构成部分 区域,并链接到您新组件的 README.

7. 测试在 apps/example 发表前.

许可证

此软件包根据 MIT 许可证。 。 。 .