@trapar-waves/react-tailwind 1.0.10 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +59 -67
  2. package/eslint.config.js +10 -2
  3. package/package.json +13 -9
  4. package/pnpm-workspace.yaml +1 -0
  5. package/readme/README-CN.md +64 -93
  6. package/readme/README-JP.md +72 -78
  7. package/readme/README-RU.md +63 -72
  8. package/rsbuild.config.ts +9 -9
  9. package/tsconfig.json +7 -7
package/README.md CHANGED
@@ -2,101 +2,93 @@
2
2
 
3
3
  ![npm version](https://img.shields.io/npm/v/@trapar-waves/react-tailwind)
4
4
  ![npm dm](https://img.shields.io/npm/dm/@trapar-waves/react-tailwind)
5
- ![License](https://img.shields.io/badge/license-ISC-green)
5
+ ![License](https://img.shields.io/github/license/Trapar-waves/react-tailwind)
6
6
  ![GitHub last commit](https://img.shields.io/github/last-commit/Trapar-waves/react-tailwind)
7
+ ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-tailwind/release.yml)
8
+ ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
7
9
 
8
- > A project combining React and Tailwind CSS for modern UI development.
10
+ ---
9
11
 
10
- ## ✨ Features
11
-
12
- * **Modern UI Framework:** Built using React for a component-driven interface.
13
- * **Utility-First Styling:** Employs Tailwind CSS for flexible and rapid styling.
14
- * **Type Safety:** Leverages TypeScript to improve code quality and reduce runtime errors.
15
- * **Fast Development Workflow:** Utilizes Rsbuild for optimized builds and quick server starts.
16
- * **Icon Integration:** Likely includes support for Iconify, enabling scalable and customizable icons.
17
- * **Focus on Code Quality:** Includes ESLint with Antfu’s configuration, indicating attention to clean and maintainable code.
18
- * **PostCSS Integration:** Uses Tailwind's PostCSS plugin for advanced CSS handling.
12
+ [中文](/readme/README-CN.md) | [日本語](/readme/README-JP.md) | [Русский язык](/readme/README-RU.md)
19
13
 
20
- ## 🚀 Getting Started
14
+ > A project combining React, Mantine UI, and Tailwind CSS for building modern web applications.
21
15
 
22
- Follow these instructions to get the project running locally.
16
+ ## ✨ Features
23
17
 
24
- ### Prerequisites
18
+ - **Modern UI Framework:** Built using React (v19) for a component-driven, declarative interface.
19
+ - **Rich Component Library:** Integrates with Mantine UI (`@mantine/core` and `@mantine/hooks`) providing pre-built UI elements and utility hooks.
20
+ - **Utility-First Styling:** Employs Tailwind CSS along with `@tailwindcss/postcss`, enabling flexible and rapid styling while maintaining consistency.
21
+ - **PostCSS Integration:** Leverages PostCSS plugins like `postcss-import`, `autoprefixer`, and `postcss-simple-vars` for advanced CSS processing.
22
+ - **Type Safety:** Utilizes TypeScript (v5.8.x) to enhance code reliability and provide robust type checking during development.
23
+ - **Fast Development Workflow:** Uses Rsbuild (`@rsbuild/core` and `@rsbuild/plugin-react`) for optimized builds and efficient development server performance.
24
+ - **Icon Support:** Includes `@iconify/json` and `@iconify/tailwind` for scalable and customizable iconography.
25
+ - **Consistent Design Language:** Combines `postcss-preset-mantine` and `tailwind-preset-mantine` for seamless integration between Mantine and Tailwind styles.
26
+ - **Focus on Code Quality:** Includes ESLint with `@antfu/eslint-config` for linting and enforcing best practices in the codebase.
25
27
 
26
- * Ensure you have the following installed:
27
- * Node.js (>= 18.x recommended)
28
- * Package manager (npm, yarn, or pnpm)
29
- ```bash
30
- node -v
31
- npm -v # or yarn -v or pnpm -v
32
- ```
28
+ ## 💻 Tech Stack
33
29
 
34
- ### Installation
30
+ - **Framework/Library:** React (v19)
31
+ - **UI Toolkit/Styling:** Mantine UI (`@mantine/core`), Tailwind CSS (`tailwindcss`)
32
+ - **Build Tool:** Rsbuild (`@rsbuild/core`)
33
+ - **Language:** TypeScript (v5.8.x)
34
+ - **CSS Processing:** PostCSS with plugins like `autoprefixer` and `postcss-simple-vars`
35
+ - **Linting:** ESLint with `@antfu/eslint-config`
36
+ - **State Management:** Zustand
37
+ - **Routing:** Tanstack Router
38
+ - **Data Fetching:** Tanstack Query (React Query)
39
+ - **Table Component:** Tanstack Table
35
40
 
36
- 1. Clone the repository:
37
- ```bash
38
- git clone https://github.com/Trapar-waves/react-tailwind.git
39
- cd react-tailwind
40
- ```
41
- 2. Install dependencies:
42
- ```bash
43
- # Use your preferred package manager
44
- npm install
45
- # or
46
- yarn install
47
- # or
48
- pnpm install
49
- ```
41
+ See the [package.json](package.json) for a full list of dependencies.
50
42
 
51
- ## 🛠️ Usage
43
+ ## 🚀 Getting Started
52
44
 
53
- Explain how to run and use the project after installation.
45
+ Follow these instructions to get the project running locally.
54
46
 
55
- ### Available Scripts
47
+ ### Prerequisites
56
48
 
57
- Common scripts available via `npm run <script>`, `yarn <script>`, or `pnpm <script>`:
49
+ Ensure you have the following installed:
58
50
 
59
- * `dev`: Starts the development server and opens the app in the browser.
60
- * `build`: Creates a production-ready build.
61
- * `preview`: Launches a local server to preview the production build.
51
+ - Node.js (>= 18.x recommended)
52
+ - Package manager (npm, yarn, or pnpm)
62
53
 
63
- Example:
64
54
  ```bash
65
- # Start development server
66
- npm run dev
67
-
68
- # Create production build
69
- npm run build
55
+ node -v
56
+ npm -v
70
57
  ```
71
58
 
72
- ## 💻 Tech Stack
59
+ ### Installation
73
60
 
74
- Key technologies used in this project include:
61
+ Run script
75
62
 
76
- * **Framework/Library:** React
77
- * **UI Toolkit/Styling:** Tailwind CSS
78
- * **Build Tool:** Rsbuild
79
- * **Language:** TypeScript
80
- * **Code Quality:** ESLint with Antfu configuration
81
- * **Icons:** Iconify integration
63
+ ```bash
64
+ pnpm create trapar-waves
65
+ ```
82
66
 
83
- See the [package.json](package.json) for a full list of dependencies.
67
+ Install dependencies
84
68
 
85
- ## 🤝 Contributing
69
+ ```bash
70
+ npm install
71
+ yarn install
72
+ pnpm install
73
+ ```
86
74
 
87
- Contributions are welcome!
75
+ ## 🤝 Contributing
88
76
 
89
- ## 📄 License
77
+ Contributions are welcome and greatly appreciated! Please follow these steps to contribute:
90
78
 
91
- Distributed under the **ISC** License. See `LICENSE` file for more information.
79
+ 1. Fork the repository
80
+ 2. Create your feature branch (`git checkout -b feature/amazing-feature`)
81
+ 3. Commit your changes (`git commit -m 'Add some amazing feature'`)
82
+ 4. Push to the branch (`git push origin feature/amazing-feature`)
83
+ 5. Open a Pull Request
92
84
 
93
85
  ## 👤 Author
94
86
 
95
- * **Rikka** ([admin@rikka.cc](mailto:admin@rikka.cc))
96
- * GitHub: [@Muromi-Rikka](https://github.com/Muromi-Rikka)
87
+ - **Rikka:** (admin@rikka.cc)
88
+ - **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
97
89
 
98
90
  ## 🔗 Links
99
91
 
100
- * **Repository:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
101
- * **Homepage:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
102
- * **Issues:** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)
92
+ - **Repository:** [https://github.com/react-tailwind/Trapar-waves](https://github.com/react-tailwind/Trapar-waves)
93
+ - **Homepage:** [https://github.com/react-tailwind/Trapar-waves](https://github.com/react-tailwind/Trapar-waves)
94
+ - **Issues:** [https://github.com/react-tailwind/Trapar-waves/issues](https://github.com/react-tailwind/Trapar-waves/issues)
package/eslint.config.js CHANGED
@@ -1,8 +1,16 @@
1
1
  import antfu from "@antfu/eslint-config";
2
2
 
3
3
  export default antfu({
4
+ stylistic: {
5
+ quotes: "double",
6
+ semi: true,
7
+ },
8
+ markdown: true,
4
9
  jsonc: true,
5
- javascript: true,
10
+ typescript: true,
6
11
  yaml: true,
7
- stylistic: { indent: 2, quotes: "double", semi: true },
12
+ react: true,
13
+ formatters: {
14
+ markdown: "prettier",
15
+ },
8
16
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@trapar-waves/react-tailwind",
3
3
  "type": "module",
4
- "version": "1.0.10",
4
+ "version": "1.0.12",
5
5
  "description": "A modern UI development template integrating React and Tailwind CSS, with Rsbuild, TypeScript, ESLint (Antfu config), and Iconify support.",
6
6
  "author": {
7
7
  "email": "admin@rikka.cc",
@@ -37,16 +37,20 @@
37
37
  "react-dom": "^19.1.0"
38
38
  },
39
39
  "devDependencies": {
40
- "@antfu/eslint-config": "^4.13.2",
41
- "@iconify/json": "^2.2.345",
40
+ "@antfu/eslint-config": "^4.14.1",
41
+ "@eslint-react/eslint-plugin": "^1.52.2",
42
+ "@iconify/json": "^2.2.349",
42
43
  "@iconify/tailwind4": "^1.0.6",
43
44
  "@rsbuild/core": "^1.3.22",
44
- "@rsbuild/plugin-react": "^1.3.1",
45
- "@tailwindcss/postcss": "^4.1.8",
46
- "@types/react": "^19.1.6",
47
- "@types/react-dom": "^19.1.5",
48
- "eslint": "^9.28.0",
49
- "tailwindcss": "^4.1.8",
45
+ "@rsbuild/plugin-react": "^1.3.2",
46
+ "@tailwindcss/postcss": "^4.1.10",
47
+ "@types/react": "^19.1.8",
48
+ "@types/react-dom": "^19.1.6",
49
+ "eslint": "^9.29.0",
50
+ "eslint-plugin-format": "^1.0.1",
51
+ "eslint-plugin-react-hooks": "^5.2.0",
52
+ "eslint-plugin-react-refresh": "^0.4.20",
53
+ "tailwindcss": "^4.1.10",
50
54
  "typescript": "^5.8.3"
51
55
  }
52
56
  }
package/pnpm-workspace.yaml CHANGED
@@ -1,2 +1,3 @@
1
1
  onlyBuiltDependencies:
2
+ - "@tailwindcss/oxide"
2
3
  - core-js
package/readme/README-CN.md CHANGED
@@ -1,124 +1,95 @@
1
1
  # @trapar-waves/react-tailwind
2
2
 
3
- ![npm 版本](https://img.shields.io/npm/v/@trapar-waves/react-tailwind)
4
- ![月下载量](https://img.shields.io/npm/dm/@trapar-waves/react-tailwind)
5
- ![许可证](https://img.shields.io/badge/license-ISC-green)
6
- ![最近一次提交](https://img.shields.io/github/last-commit/Trapar-waves/react-tailwind)
3
+ ![npm version](https://img.shields.io/npm/v/@trapar-waves/react-tailwind)
4
+ ![npm dm](https://img.shields.io/npm/dm/@trapar-waves/react-tailwind)
5
+ ![License](https://img.shields.io/github/license/Trapar-waves/react-tailwind)
6
+ ![GitHub last commit](https://img.shields.io/github/last-commit/Trapar-waves/react-tailwind)
7
+ ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-tailwind/release.yml)
8
+ ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
7
9
 
8
- > 一个将 React 与 Tailwind CSS 相结合的现代化用户界面开发项目。
10
+ ---
9
11
 
10
- ## ✨ 核心特性
12
+ [English](../README.md) | [日本語](/readme/README-JP.md) | [Русский язык](/readme/README-RU.md)
11
13
 
12
- * **现代化 UI 框架：** 基于 React，采用组件化驱动的设计理念。
13
- * **实用至上：** 使用 Tailwind CSS，提供灵活高效、快速上手的样式开发体验。
14
- * **类型安全保障：** 集成 TypeScript，提升代码质量并减少运行时错误。
15
- * **高效开发流程：** 通过 Rsbuild 进行优化构建，并快速启动开发服务器。
16
- * **图标支持：** 很可能集成了 Iconify，提供可扩展与高度可定制的图标解决方案。
17
- * **代码质量优先：** 配置了基于 Antfu 的 ESLint，注重代码整洁性与可维护性。
18
- * **PostCSS 集成：** 使用 Tailwind CSS 的 PostCSS 插件，实现更高级的 CSS 处理。
14
+ > 一个结合React、Mantine UI和Tailwind CSS的项目，用于构建现代Web应用。
19
15
 
20
- ## 🚀 快速入门指南
16
+ ## ✨ 特性
21
17
 
22
- 按照以下步骤，快速在本地运行该项目。
18
+ - **现代UI框架:** 使用React (v19)构建组件驱动的声明式界面。
19
+ - **丰富的组件库:** 与Mantine UI（`@mantine/core`和`@mantine/hooks`）集成，提供预构建的UI元素和实用钩子。
20
+ - **实用优先的样式:** 采用Tailwind CSS和`@tailwindcss/postcss`，实现灵活快速的样式设计，同时保持一致性。
21
+ - **PostCSS集成:** 利用PostCSS插件如`postcss-import`、`autoprefixer`和`postcss-simple-vars`进行高级CSS处理。
22
+ - **类型安全:** 使用TypeScript (v5.8.x)增强代码可靠性，并在开发过程中提供强大的类型检查。
23
+ - **快速开发工作流:** 使用Rsbuild（`@rsbuild/core`和`@rsbuild/plugin-react`）实现优化构建和高效开发服务器性能。
24
+ - **图标支持:** 包含`@iconify/json`和`@iconify/tailwind`，提供可扩展和可定制的图标。
25
+ - **一致的设计语言:** 结合`postcss-preset-mantine`和`tailwind-preset-mantine`，实现Mantine和Tailwind样式的无缝集成。
26
+ - **注重代码质量:** 包含ESLint和`@antfu/eslint-config`，用于代码 linting 和执行最佳实践。
23
27
 
24
- ### 环境要求
28
+ ## 💻 技术栈
25
29
 
26
- * 确保已安装以下工具：
27
- * Node.js（推荐版本 >= 18.x）
28
- * 包管理工具（npm、yarn 或 pnpm）
29
- ```bash
30
- node -v
31
- npm -v # 或 yarn -v 或 pnpm -v
32
- ```
30
+ - **框架/库:** React (v19)
31
+ - **UI工具包/样式:** Mantine UI（`@mantine/core`），Tailwind CSS（`tailwindcss`）
32
+ - **构建工具:** Rsbuild（`@rsbuild/core`）
33
+ - **语言:** TypeScript (v5.8.x)
34
+ - **CSS处理:** PostCSS与插件如`autoprefixer`和`postcss-simple-vars`
35
+ - **代码检查:** ESLint与`@antfu/eslint-config`
36
+ - **状态管理:** Zustand
37
+ - **路由:** Tanstack Router
38
+ - **数据获取:** Tanstack Query (React Query)
39
+ - **表格组件:** Tanstack Table
33
40
 
34
- ### 安装步骤
35
-
36
- 1. 克隆代码库：
37
- ```bash
38
- git clone https://github.com/Trapar-waves/react-tailwind.git
39
- cd react-tailwind
40
- ```
41
- 2. 安装依赖：
42
- ```bash
43
- # 使用你喜欢的包管理工具
44
- npm install
45
- # 或
46
- yarn install
47
- # 或
48
- pnpm install
49
- ```
41
+ 完整依赖列表参见[package.json](package.json)。
50
42
 
51
- ## 🛠️ 使用说明
43
+ ## 🚀 开始使用
52
44
 
53
- 安装完成后，可以通过以下方式运行和使用项目。
45
+ 按照以下说明在本地运行项目。
54
46
 
55
- ### 常用脚本
47
+ ### 前提条件
56
48
 
57
- 通过 `npm run <脚本>`、`yarn <脚本>` 或 `pnpm <脚本>` 来运行以下命令：
49
+ 确保已安装以下软件：
58
50
 
59
- * `dev`：启动开发服务器，并在浏览器中打开应用。
60
- * `build`：生成适用于生产环境的构建版本。
61
- * `preview`：启动本地服务器，用于预览生产环境构建结果。
51
+ - Node.js (推荐 >= 18.x 版本)
52
+ - 包管理器 (npm, yarn 或 pnpm)
62
53
 
63
- 示例：
64
54
  ```bash
65
- # 启动开发服务器
66
- npm run dev
67
-
68
- # 生成生产环境构建
69
- npm run build
55
+ node -v
56
+ npm -v
70
57
  ```
71
58
 
72
- ## 💻 技术栈概览
73
-
74
- 该项目使用了以下关键技术：
75
-
76
- * **框架/库：** React
77
- * **样式解决方案：** Tailwind CSS
78
- * **构建工具：** Rsbuild
79
- * **编程语言：** TypeScript
80
- * **代码质量工具：** 基于 Antfu 配置的 ESLint
81
- * **图标支持：** 集成 Iconify
82
-
83
- 完整的依赖列表可参考 [package.json](package.json) 文件。
84
-
85
- ## 🤝 如何贡献
86
-
87
- 欢迎任何形式的贡献！无论是代码优化、问题反馈，还是功能建议，都非常欢迎。
59
+ ### 安装步骤
88
60
 
89
- ## 📄 许可证
61
+ 运行脚本
90
62
 
91
- 本项目基于 **ISC** 许可证发布。更多详情请查看 `LICENSE` 文件。
63
+ ```bash
64
+ pnpm create trapar-waves
65
+ ```
92
66
 
93
- ## 👤 作者信息
67
+ 安装依赖
94
68
 
95
- * **Rikka** ([admin@rikka.cc](mailto:admin@rikka.cc))
96
- * GitHub: [@Muromi-Rikka](https://github.com/Muromi-Rikka)
69
+ ```bash
70
+ npm install
71
+ yarn install
72
+ pnpm install
73
+ ```
97
74
 
98
- ## 🔗 项目相关链接
75
+ ## 🤝 贡献指南
99
76
 
100
- * **代码仓库：** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
101
- * **问题反馈：** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)
102
- ```
77
+ 欢迎贡献，非常感谢您的支持！请按照以下步骤进行贡献：
103
78
 
104
- ### 改进说明
79
+ 1. Fork 本仓库
80
+ 2. 创建功能分支（`git checkout -b feature/amazing-feature`）
81
+ 3. 提交您的更改（`git commit -m 'Add some amazing feature'`）
82
+ 4. 推送到分支（`git push origin feature/amazing-feature`）
83
+ 5. 打开Pull Request
105
84
 
106
- 1. **调整语言表达，使内容更贴近中文习惯**：
107
- - 将“npm 每月下载量”改为“月下载量”。
108
- - 将“GitHub 上次提交”改为“最近一次提交”。
109
- - 优化句子结构，使描述更加自然流畅。
85
+ ## 👤 Author
110
86
 
111
- 2. **优化术语翻译**：
112
- - 将“实用优先的样式设计”改为“实用至上”，更贴合 Tailwind CSS 的理念。
113
- - 对技术术语进行了更准确的翻译，如“组件化驱动的设计理念”。
87
+ - **Rikka:** (admin@rikka.cc)
88
+ - **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
114
89
 
115
- 3. **消除冗余表达**：
116
- - 合并了“主页”和“代码仓库”重复的链接，仅保留必要的链接。
117
- - 在“技术栈”部分简化了分类描述，避免重复。
90
+ ## 🔗 Links
118
91
 
119
- 4. **提升清晰度**：
120
- - 将“可能支持 Iconify”改为“很可能集成了 Iconify”，减少歧义。
121
- - 对“完整的依赖列表”进行了更明确的说明。
92
+ - **仓库:** [https://github.com/react-tailwind/Trapar-waves](https://github.com/react-tailwind/Trapar-waves)
122
93
 
123
- 5. **增强可读性**：
124
- - 优化句子结构，避免生硬的直译，使内容更符合中文读者的阅读习惯。
94
+ * **主页:** [https://github.com/react-tailwind/Trapar-waves](https://github.com/react-tailwind/Trapar-waves)
95
+ * **问题:** [https://github.com/react-tailwind/Trapar-waves/issues](https://github.com/react-tailwind/Trapar-waves/issues)
package/readme/README-JP.md CHANGED
@@ -1,100 +1,94 @@
1
1
  # @trapar-waves/react-tailwind
2
2
 
3
- ![npm バージョン](https://img.shields.io/npm/v/@trapar-waves/react-tailwind)
4
- ![npm ダウンロード数（月間）](https://img.shields.io/npm/dm/@trapar-waves/react-tailwind)
5
- ![ライセンス](https://img.shields.io/badge/license-ISC-green)
6
- ![最終コミット日時](https://img.shields.io/github/last-commit/Trapar-waves/react-tailwind)
7
-
8
- > React と Tailwind CSS を統合した、現代的な UI 開発をサポートするプロジェクト。
9
-
10
- ## ✨ 主な特徴
11
-
12
- * **モダンな UI フレームワーク:** コンポーネントベースの開発を効率化する React を採用。
13
- * **ユーティリティファーストのスタイリング:** 柔軟かつ迅速なデザイン調整を可能にする Tailwind CSS を統合。
14
- * **型安全性:** TypeScript を使用して、コード品質を高め、実行時のエラーを最小限に抑える設計。
15
- * **効率的な開発フロー:** 最適化されたビルドと高速なサーバー起動を実現する Rsbuild を採用。
16
- * **アイコンの統合:** Iconify をサポートし、拡張性とカスタマイズ性に優れたアイコンを提供。
17
- * **コード品質へのこだわり:** Antfu が提供する ESLint 設定を採用し、保守しやすいクリーンなコードを推奨。
18
- * **高度な CSS 処理:** Tailwind CSS の PostCSS プラグインを統合し、高度なスタイル調整を実現。
3
+ ![npm version](https://img.shields.io/npm/v/@trapar-waves/react-tailwind)
4
+ ![npm dm](https://img.shields.io/npm/dm/@trapar-waves/react-tailwind)
5
+ ![License](https://img.shields.io/github/license/Trapar-waves/react-tailwind)
6
+ ![GitHub last commit](https://img.shields.io/github/last-commit/Trapar-waves/react-tailwind)
7
+ ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-tailwind/release.yml)
8
+ ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
9
+
10
+ ---
11
+
12
+ [English](../README.md) | [中文](/readme/README-CN.md) | [Русский язык](/readme/README-RU.md)
13
+
14
+ > React、Mantine UI、Tailwind CSSを組み合わせたプロジェクトで、現代的なWebアプリケーションを構築するためのものです。
15
+
16
+ ## ✨ 特徴
17
+
18
+ - **モダンUIフレームワーク:** コンポーネント駆動の宣言型インターフェースのためにReact (v19)を使用して構築されています。
19
+ - **豊富なコンポーネントライブラリ:** Mantine UI（`@mantine/core`と`@mantine/hooks`）と統合し、事前構築されたUI要素とユーティリティフックを提供します。
20
+ - **ユーティリティファーストのスタイリング:** Tailwind CSSと`@tailwindcss/postcss`を採用し、一貫性を維持しながら柔軟で迅速なスタイリングを可能にします。
21
+ - **PostCSS統合:** `postcss-import`、`autoprefixer`、`postcss-simple-vars`などのPostCSSプラグインを活用し、高度なCSS処理を実現します。
22
+ - **型安全性:** TypeScript (v5.8.x)を使用してコードの信頼性を向上させ、開発中に堅牢な型チェックを提供します。
23
+ - **高速開発ワークフロー:** Rsbuild（`@rsbuild/core`と`@rsbuild/plugin-react`）を使用して最適化されたビルドと効率的な開発サーバーパフォーマンスを実現します。
24
+ - **アイコンサポート:** `@iconify/json`と`@iconify/tailwind`を含み、スケーラブルでカスタマイズ可能なアイコンを提供します。
25
+ - **一貫したデザイン言語:** `postcss-preset-mantine`と`tailwind-preset-mantine`を組み合わせ、MantineとTailwindスタイルのシームレスな統合を実現します。
26
+ - **コード品質への焦点:** ESLintと`@antfu/eslint-config`を含み、コードベースのリンティングとベストプラクティスの適用を実現します。
27
+
28
+ ## 💻 技術スタック
29
+
30
+ - **フレームワーク/ライブラリ:** React (v19)
31
+ - **UIツールキット/スタイリング:** Mantine UI（`@mantine/core`）、Tailwind CSS（`tailwindcss`）
32
+ - **ビルドツール:** Rsbuild（`@rsbuild/core`）
33
+ - **言語:** TypeScript (v5.8.x)
34
+ - **CSS処理:** `autoprefixer`や`postcss-simple-vars`などのプラグインを備えたPostCSS
35
+ - **リンティング:** `@antfu/eslint-config`を備えたESLint
36
+ - **状態管理:** Zustand
37
+ - **ルーティング:** Tanstack Router
38
+ - **データフェッチング:** Tanstack Query (React Query)
39
+ - **テーブルコンポーネント:** Tanstack Table
40
+
41
+ 依存関係の完全なリストについては[package.json](package.json)を参照してください。
19
42
 
20
43
  ## 🚀 始め方
21
44
 
22
- プロジェクトをローカル環境で実行する手順を紹介します。
45
+ 以下の手順に従ってプロジェクトをローカルで実行してください。
23
46
 
24
- ### 必要条件
47
+ ### 前提条件
25
48
 
26
- 以下のツールがインストールされていることを確認してください:
27
- * Node.js (バージョン 18.x 以上を推奨)
28
- * パッケージマネージャ（npm、yarn、または pnpm）
29
- ```bash
30
- node -v
31
- npm -v # または yarn -v または pnpm -v
32
- ```
49
+ 以下がインストールされていることを確認してください：
33
50
 
34
- ### インストール
51
+ - Node.js (推奨バージョン >= 18.x)
52
+ - パッケージマネージャー (npm, yarn または pnpm)
35
53
 
36
- 1. リポジトリをクローン:
37
- ```bash
38
- git clone https://github.com/Trapar-waves/react-tailwind.git
39
- cd react-tailwind
40
- ```
41
- 2. 依存関係をインストール:
42
- ```bash
43
- # お好みのパッケージマネージャを使用
44
- npm install
45
- # または
46
- yarn install
47
- # または
48
- pnpm install
49
- ```
50
-
51
- ## 🛠️ 使い方
52
-
53
- インストールが完了したプロジェクトを実行・利用する方法を説明します。
54
-
55
- ### 使用可能なスクリプト
56
-
57
- 以下のスクリプトは `npm run`、`yarn`、または `pnpm` で実行可能です:
58
- * `dev`: 開発用サーバーを起動し、ブラウザでアプリケーションを確認できます。
59
- * `build`: 本番環境用の最適化されたビルドを生成します。
60
- * `preview`: 生成された本番ビルドをローカルでプレビューするためのサーバーを起動します。
61
-
62
- 例:
63
54
  ```bash
64
- # 開発用サーバーを起動
65
- npm run dev
66
-
67
- # 本番用ビルドを生成
68
- npm run build
55
+ node -v
56
+ npm -v
69
57
  ```
70
58
 
71
- ## 💻 使用技術
59
+ ### インストール
72
60
 
73
- このプロジェクトで採用されている主要な技術スタック:
74
- * **フレームワーク/ライブラリ:** React
75
- * **UI スタイリング:** Tailwind CSS
76
- * **ビルドツール:** Rsbuild
77
- * **言語:** TypeScript
78
- * **コード品質:** Antfu の ESLint 設定を採用
79
- * **アイコン:** Iconify 統合
61
+ スクリプトの実行
80
62
 
81
- 依存関係の詳細は [package.json](package.json) をご参照ください。
63
+ ```bash
64
+ pnpm create trapar-waves
65
+ ```
66
+
67
+ 依存関係のインストール
82
68
 
83
- ## 🤝 貢献
69
+ ```bash
70
+ npm install
71
+ yarn install
72
+ pnpm install
73
+ ```
84
74
 
85
- 皆さまの貢献を歓迎します！詳細はリポジトリをご覧ください。
75
+ ## 🤝 コントリビューション
86
76
 
87
- ## 📄 ライセンス
77
+ 貢献は歓迎され、非常に高く評価されています！貢献するには以下の手順に従ってください：
88
78
 
89
- 本プロジェクトは **ISC ライセンス** の下で配布されています。詳細は `LICENSE` ファイルをご覧ください。
79
+ 1. リポジトリをフォークする
80
+ 2. 機能ブランチを作成する（`git checkout -b feature/amazing-feature`）
81
+ 3. 変更をコミットする（`git commit -m 'Add some amazing feature'`）
82
+ 4. ブランチにプッシュする（`git push origin feature/amazing-feature`）
83
+ 5. Pull Requestを開く
90
84
 
91
- ## 👤 作者
85
+ ## 👤 Author
92
86
 
93
- * **Rikka** ([admin@rikka.cc](mailto:admin@rikka.cc))
94
- * GitHub: [@Muromi-Rikka](https://github.com/Muromi-Rikka)
87
+ - **Rikka:** (admin@rikka.cc)
88
+ - **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
95
89
 
96
- ## 🔗 リンク
90
+ ## 🔗 Links
97
91
 
98
- * **リポジトリ:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
99
- * **ホームページ:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
100
- * **問題を報告:** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)
92
+ - **リポジトリ:** [https://github.com/react-tailwind/Trapar-waves](https://github.com/react-tailwind/Trapar-waves)
93
+ - **ホームページ:** [https://github.com/react-tailwind/Trapar-waves](https://github.com/react-tailwind/Trapar-waves)
94
+ - **イシュー:** [https://github.com/react-tailwind/Trapar-waves/issues](https://github.com/react-tailwind/Trapar-waves/issues)
package/readme/README-RU.md CHANGED
@@ -1,104 +1,95 @@
1
1
  # @trapar-waves/react-tailwind
2
2
 
3
- ![Версия npm](https://img.shields.io/npm/v/@trapar-waves/react-tailwind)
4
- ![Загрузки npm в месяц](https://img.shields.io/npm/dm/@trapar-waves/react-tailwind)
5
- ![Лицензия](https://img.shields.io/badge/license-ISC-green)
6
- ![Последний коммит на GitHub](https://img.shields.io/github/last-commit/Trapar-waves/react-tailwind)
3
+ ![npm version](https://img.shields.io/npm/v/@trapar-waves/react-tailwind)
4
+ ![npm dm](https://img.shields.io/npm/dm/@trapar-waves/react-tailwind)
5
+ ![License](https://img.shields.io/github/license/Trapar-waves/react-tailwind)
6
+ ![GitHub last commit](https://img.shields.io/github/last-commit/Trapar-waves/react-tailwind)
7
+ ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/Trapar-waves/react-tailwind/release.yml)
8
+ ![Renovate](https://img.shields.io/badge/renovate-enabled-blue)
7
9
 
8
- > Современный проект, основанный на React и Tailwind CSS для разработки интуитивных пользовательских интерфейсов.
10
+ ---
11
+
12
+ [English](../README.md) | [中文](/readme/README-CN.md) | [日本語](/readme/README-JP.md)
13
+
14
+ > Проект, сочетающий React, Mantine UI и Tailwind CSS для создания современных веб-приложений.
9
15
 
10
16
  ## ✨ Особенности
11
17
 
12
- * **Компонентная структура:** Построен с использованием React, обеспечивающего гибкий и модульный подход к созданию UI.
13
- * **Утилитарный подход к стилизации:** Использует Tailwind CSS, что позволяет быстро и эффективно создавать адаптивные интерфейсы.
14
- * **Типобезопасность:** TypeScript гарантирует высокое качество кода и минимизирует риск ошибок на этапе выполнения.
15
- * **Оптимизированная разработка:** Rsbuild обеспечивает быстрые сборки и упрощает разработку благодаря продвинутым инструментам.
16
- * **Поддержка иконок:** Интеграция Iconify позволяет использовать масштабируемые и настраиваемые иконки.
17
- * **Качество кода:** Настроен ESLint с конфигурацией Antfu для поддержания чистоты и читаемости кода.
18
- * **Расширенная обработка CSS:** Плагин PostCSS от Tailwind CSS предоставляет дополнительные возможности для работы со стилями.
18
+ - **Современный UI-фреймворк:** Строится с использованием React (v19) для компонентно-ориентированного декларативного интерфейса.
19
+ - **Богатая библиотека компонентов:** Интегрируется с Mantine UI (`@mantine/core` и `@mantine/hooks`), предоставляя предварительно построенные UI-элементы и утилитарные хуки.
20
+ - **Стилизация с упором на утилиты:** Использует Tailwind CSS вместе с `@tailwindcss/postcss`, обеспечивая гибкую и быструю стилизацию при сохранении согласованности.
21
+ - **Интеграция с PostCSS:** Получает преимущества от плагинов PostCSS, таких как `postcss-import`, `autoprefixer` и `postcss-simple-vars`, для расширенной обработки CSS.
22
+ - **Типовая безопасность:** Использует TypeScript (v5.8.x) для повышения надежности кода и обеспечения надежной проверки типов во время разработки.
23
+ - **Быстрый рабочий процесс разработки:** Использует Rsbuild (`@rsbuild/core` и `@rsbuild/plugin-react`) для оптимизированных сборок и эффективной производительности сервера разработки.
24
+ - **Поддержка иконок:** Включает `@iconify/json` и `@iconify/tailwind` для масштабируемой и настраиваемой иконографии.
25
+ - **Согласованный дизайн-язык:** Комбинирует `postcss-preset-mantine` и `tailwind-preset-mantine` для бесперебойной интеграции стилей Mantine и Tailwind.
26
+ - **Фокус на качестве кода:** Включает ESLint с `@antfu/eslint-config` для линтинга и обеспечения лучших практик в кодовой базе.
27
+
28
+ ## 💻 Технологический стек
29
+
30
+ - **Фреймворк/Библиотека:** React (v19)
31
+ - **UI-тулкит/Стилизация:** Mantine UI (`@mantine/core`), Tailwind CSS (`tailwindcss`)
32
+ - **Инструмент сборки:** Rsbuild (`@rsbuild/core`)
33
+ - **Язык:** TypeScript (v5.8.x)
34
+ - **Обработка CSS:** PostCSS с плагинами вроде `autoprefixer` и `postcss-simple-vars`
35
+ - **Линтинг:** ESLint с `@antfu/eslint-config`
36
+ - **Управление состоянием:** Zustand
37
+ - **Маршрутизация:** Tanstack Router
38
+ - **Получение данных:** Tanstack Query (React Query)
39
+ - **Табличный компонент:** Tanstack Table
40
+
41
+ Полный список зависимостей см. в [package.json](package.json).
19
42
 
20
43
  ## 🚀 Начало работы
21
44
 
22
- Чтобы запустить проект локально, выполните следующие шаги.
45
+ Следуйте этим инструкциям, чтобы запустить проект локально.
23
46
 
24
47
  ### Предварительные требования
25
48
 
26
- Для работы с проектом убедитесь, что установлены следующие программы:
27
- * Node.js (рекомендуется версия 18.x или выше)
28
- * Менеджер пакетов (npm, yarn или pnpm)
49
+ Убедитесь, что у вас установлены следующие компоненты:
50
+
51
+ - Node.js (рекомендуется версия >= 18.x)
52
+ - Пакетный менеджер (npm, yarn или pnpm)
29
53
 
30
- Проверьте версии:
31
54
  ```bash
32
55
  node -v
33
- npm -v # или yarn -v или pnpm -v
56
+ npm -v
34
57
  ```
35
58
 
36
59
  ### Установка
37
60
 
38
- 1. Склонируйте репозиторий:
39
- ```bash
40
- git clone https://github.com/Trapar-waves/react-tailwind.git
41
- cd react-tailwind
42
- ```
43
- 2. Установите зависимости:
44
- ```bash
45
- # Выберите предпочитаемый менеджер пакетов
46
- npm install
47
- # или
48
- yarn install
49
- # или
50
- pnpm install
51
- ```
52
-
53
- ## 🛠️ Использование
54
-
55
- Раздел содержит инструкции по запуску и использованию проекта после установки.
61
+ Запустить скрипт
56
62
 
57
- ### Доступные команды
58
-
59
- Для запуска скриптов используйте `npm run <команда>`, `yarn <команда>` или `pnpm <команда>`:
60
-
61
- * `dev`: Запускает сервер разработки и открывает приложение в браузере.
62
- * `build`: Создает оптимизированную сборку для продакшена.
63
- * `preview`: Предоставляет возможность предварительно просмотреть продакшен-сборку.
64
-
65
- Пример:
66
63
  ```bash
67
- # Запуск сервера разработки
68
- npm run dev
69
-
70
- # Создание продакшен-сборки
71
- npm run build
64
+ pnpm create trapar-waves
72
65
  ```
73
66
 
74
- ## 💻 Технологический стек
67
+ Установить зависимости
75
68
 
76
- Основные технологии, используемые в проекте:
77
-
78
- * **Фреймворк/Библиотека:** React
79
- * **Инструменты стилизации:** Tailwind CSS
80
- * **Сборщик:** Rsbuild
81
- * **Язык программирования:** TypeScript
82
- * **Контроль качества кода:** ESLint с конфигурацией Antfu
83
- * **Иконки:** Iconify
84
-
85
- Полный список зависимостей доступен в файле [package.json](package.json).
69
+ ```bash
70
+ npm install
71
+ yarn install
72
+ pnpm install
73
+ ```
86
74
 
87
- ## 🤝 Вклад
75
+ ## 🤝 Участие в разработке
88
76
 
89
- Вклад в проект приветствуется! Если вы хотите предложить изменения или исправить ошибки, создайте pull request.
77
+ Вклад в проект приветствуется и очень ценится! Чтобы внести вклад, следуйте этим шагам:
90
78
 
91
- ## 📄 Лицензия
79
+ 1. Сделайте форк репозитория
80
+ 2. Создайте ветку с функцией (`git checkout -b feature/amazing-feature`)
81
+ 3. Зафиксируйте свои изменения (`git commit -m 'Add some amazing feature'`)
82
+ 4. Отправьте изменения в ветку (`git push origin feature/amazing-feature`)
83
+ 5. Откройте Pull Request
92
84
 
93
- Проект распространяется под лицензией **ISC**. Дополнительная информация доступна в файле [LICENSE](LICENSE).
85
+ ## 👤 Author
94
86
 
95
- ## 👤 Автор
87
+ - **Rikka:** (admin@rikka.cc)
88
+ - **GitHub Profile:** [Muromi-Rikka](https://github.com/Muromi-Rikka)
96
89
 
97
- * **Рикка** ([admin@rikka.cc](mailto:admin@rikka.cc))
98
- * GitHub: [@Muromi-Rikka](https://github.com/Muromi-Rikka)
90
+ ## 🔗 Links
99
91
 
100
- ## 🔗 Полезные ссылки
92
+ - **Репозиторий:** [https://github.com/react-tailwind/Trapar-waves](https://github.com/react-tailwind/Trapar-waves)
101
93
 
102
- * **Репозиторий:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
103
- * **Домашняя страница:** [https://github.com/Trapar-waves/react-tailwind](https://github.com/Trapar-waves/react-tailwind)
104
- * **Сообщить о проблеме:** [https://github.com/Trapar-waves/react-tailwind/issues](https://github.com/Trapar-waves/react-tailwind/issues)
94
+ * **Домашняя страница:** [https://github.com/react-tailwind/Trapar-waves](https://github.com/react-tailwind/Trapar-waves)
95
+ * **Проблемы:** [https://github.com/react-tailwind/Trapar-waves/issues](https://github.com/react-tailwind/Trapar-waves/issues)
package/rsbuild.config.ts CHANGED
@@ -1,14 +1,14 @@
1
- import { defineConfig } from '@rsbuild/core';
2
- import { pluginReact } from '@rsbuild/plugin-react';
1
+ import { defineConfig } from "@rsbuild/core";
2
+ import { pluginReact } from "@rsbuild/plugin-react";
3
3
  import tailwind from "@tailwindcss/postcss";
4
4
 
5
5
  export default defineConfig({
6
6
  plugins: [pluginReact()],
7
- tools:{
8
- postcss:{
9
- postcssOptions:{
10
- plugins:[tailwind]
11
- }
12
- }
13
- }
7
+ tools: {
8
+ postcss: {
9
+ postcssOptions: {
10
+ plugins: [tailwind],
11
+ },
12
+ },
13
+ },
14
14
  });
package/tsconfig.json CHANGED
@@ -1,23 +1,23 @@
1
1
  {
2
2
  "compilerOptions": {
3
- "lib": ["DOM", "ES2020"],
4
- "jsx": "react-jsx",
5
3
  "target": "ES2020",
6
- "noEmit": true,
7
- "skipLibCheck": true,
4
+ "jsx": "react-jsx",
5
+ "lib": ["DOM", "ES2020"],
8
6
  "useDefineForClassFields": true,
9
7
 
10
8
  /* modules */
11
9
  "module": "ESNext",
12
- "isolatedModules": true,
13
- "resolveJsonModule": true,
14
10
  "moduleResolution": "Bundler",
11
+ "resolveJsonModule": true,
15
12
  "allowImportingTsExtensions": true,
16
13
 
17
14
  /* type checking */
18
15
  "strict": true,
19
16
  "noUnusedLocals": true,
20
- "noUnusedParameters": true
17
+ "noUnusedParameters": true,
18
+ "noEmit": true,
19
+ "isolatedModules": true,
20
+ "skipLibCheck": true
21
21
  },
22
22
  "include": ["src"]
23
23
  }