open-index/open-npm huggingface dataset:
npm package: @gateweb/react-material-ui
Description: React UI components for Gateweb
Latest version: 3.0.2

# GateWeb Material React UI

GateWeb Material React UI 是一個基於 [Material-UI (MUI)](https://mui.com/material-ui/getting-started/) 打造的UI元件庫，旨在提供一致且易於使用的UI元件，幫助開發者更高效地構建現代Web應用。我們的元件庫使用了 [Material React Table](https://www.material-react-table.com/) 套件來實現高效和靈活的表格功能。

### 技術堆棧

- [**React**](https://react.dev/): 用於構建用戶界面的JavaScript庫。
- [**Material-UI (MUI)**](https://mui.com/material-ui/getting-started/): 一個流行的React UI框架，提供一套基於Material Design的高質量元件。
- [**Material React Table**](https://www.material-react-table.com/): 一個強大的React表格庫，樣式基於 [Material-UI (MUI)](https://mui.com/material-ui/getting-started/)，功能基於 [TanStack Table](https://tanstack.com/table/latest/docs/introduction)，提供豐富的表格功能

### 系統要求

- [**Node.js**](https://nodejs.org/): 18.x 或更高版本

## 使用方式

### 安裝

```bash
npm install @gateweb/react-material-ui
# or
yarn add @gateweb/react-material-ui
# or
pnpm add @gateweb/react-material-ui
```

### 引入

```jsx
import { Button } from '@gateweb/react-material-ui';
```

## 如何發布版本

### 手動發布

1. 更新 `package.json` 內的版本號

   ```diff
   # e.g. 從 0.1.0 升級成 0.1.1
   {
       "name": "@gateweb/react-material-ui",
   -   "version": "0.1.0"
   +   "version": "0.1.1"
   }
   ```

2. 安裝依賴、建置程式碼

   ```sh
   pnpm install
   pnpm build
   ```

3. 登入 npm

   ```sh
   # 確保有 npm 帳號
   pnpm login
   # npm notice Log in on https://registry.npmjs.org/
   # Login at:
   # https://www.npmjs.com/login?next=/login/cli/390e514d-7aa5-4ee7-a13a-b17e6dd64518
   # Press ENTER to open in the browser...
   ```

4. 發布到 npm

   ```sh
   pnpm publish --access public --no-git-checks
   ```

5. 到 npm 頁面上確認是否有新版本發布成功

   [@gateweb/react-material-ui](https://www.npmjs.com/package/@gateweb/react-material-ui)

### 自動發布

- 當有新的 commit push 到 `main` 分支時，GitHub Action 會自動執行發布流程。

- 版本號的規則都是遵循 [Semantic Versioning](https://semver.org/)。

## 注意事項

### Mui-icons 問題

v1.2.0 時在 `next.js` 專案中使用包含引入 `@mui/icons-material` 的元件時，會遇到以下錯誤：

```shell
React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
```

根據相關的 [issue](https://github.com/mui/material-ui/issues/35233)，在引入 icon 時做了以下調整：

```jsx
// 原本方式使用 default import
import CheckIcon from '@mui/icons-material/Check';

// 修改為使用 named import
import { Check as CheckIcon } from '@mui/icons-material';
```
npm package: @gateweb/react-utils
Description: React Utils for GateWeb
Latest version: 2.7.4

# @gateweb/react-utils

**`@gateweb/react-utils`** 是 GateWeb 的 TypeScript-first utility library，包含常用的 functions / hooks / types（日期、格式化、轉換、驗證、web、React hooks 等），並且有測試與自動化文件。

> This repo also provides a docs site + auto-generated API reference.

[![npm version](https://img.shields.io/npm/v/@gateweb/react-utils.svg)](https://www.npmjs.com/package/@gateweb/react-utils)

## ✨ Features

- **React Hooks**: A collection of useful hooks like `useCountdown` and `useValue`.
- **Date Utilities**: Powerful and flexible functions for handling dates and time periods, built on top of `dayjs`.
- **Core Helpers**: A wide range of utilities for type conversion (`bytes`, `searchParams`), case style formatting, object manipulation, and more.
- **Web APIs**: Simplified functions for common web tasks like file downloads (`download`) and managing browser storage (`webStorage`).
- **Validation**: A set of predefined regex patterns and validation functions for common data types.
- **TypeScript First**: Fully written in TypeScript, providing excellent type safety and autocompletion out of the box.
- **Lightweight & Tree-Shakable**: Built with `bunchee` to ensure minimal bundle size.

## 📦 Installation

```bash
# With pnpm (recommended)
pnpm add @gateweb/react-utils

# With npm
npm install @gateweb/react-utils

# With yarn
yarn add @gateweb/react-utils
```

## 🚀 快速開始（Quick Start）

```ts
import { bytesToSize } from '@gateweb/react-utils';

bytesToSize(1024);
```

更多範例與用法請看 [react-utils docs](https://crispy-dollop-o765k9n.pages.github.io/)

## 🤝 Contributing

Contributions are welcome! To ensure a smooth development process, please follow these steps:

1.  **Fork & Clone**: Fork the repository and clone it to your local machine.
2.  **Set Up**: This project uses `pnpm` as the package manager. Install dependencies with:
    ```bash
    pnpm install
    ```
3.  **Develop**: Create a new branch for your feature or bug fix.
4.  **Test**: Write tests for your changes and ensure all existing tests pass.

    ```bash
    # Run all tests
    pnpm test

    # Run tests in watch mode
    pnpm test:watch
    ```

5.  **Submit a Pull Request**: Push your changes to your fork and open a pull request to the `main` branch. Your code will be automatically linted and formatted upon commit.

## Publishing (For Maintainers)

### Manual Release

1.  Update the version in `package.json`.
2.  Install dependencies and build the package:
    ```sh
    pnpm install && pnpm build
    ```
3.  Log in to npm:
    ```sh
    pnpm login
    ```
4.  Publish the package:
    ```sh
    pnpm publish --access public --no-git-checks
    ```

### Automatic Release

When a pull request is merged into the `main` branch, the `release` GitHub Action will automatically bump the version, create a changelog, and publish the new version to npm. The version bump follows [Semantic Versioning](https.semver.org/) based on the commit messages (e.g., `feat:` for minor, `fix:` for patch).
npm package: @gateweb/zod-schema
Description: Zod schema for GateWeb
Latest version: 1.1.1

# @gateweb/zod-schema

`@gateweb/zod-schema`，封裝常用表單欄位規則，並內建可與 i18n 翻譯函式整合的錯誤訊息產生方式。

- 支援：字串、陣列、Email、日期 Timestamp、統一編號、檔案...等常見欄位
- 友善 i18n：所有錯誤訊息可透過自帶的 `TranslateFn` 組合
- 型別安全：以 Zod 為核心，完整 TypeScript 推導
- 實用工具：提供 `extractValidationResult`、`extractObjectValidationResult` 便於測時取得錯誤訊息

## Installation

```bash
# With pnpm (recommended)
pnpm add @gateweb/zod-schema

# With npm
npm install @gateweb/zod-schema

# With yarn
yarn add @gateweb/zod-schema
```

## Usage

**Quick start**

```ts
import { z } from 'zod';
import { createStringSchema } from '@gateweb/zod-schema';
import { useTranslate } from 'your-i18n-lib'; // 假設你有一個 i18n 函式

const t = useTranslate();
const stringSchema = createStringSchema(t);
const nameSchema = stringSchema({ required: true, maxLength: 50, fieldName: '姓名' });
stringSchema.parse('測試名稱'); // 成功
stringSchema.parse(''); // 失敗，拋出錯誤訊息 "
```

> notice: 所有的 schema creator 都需要傳入一個 `TranslateFn` 函式作為參數。

**With i18n**

- 本套件不綁定特定 i18n 套件，只要提供 `TranslateFn` 簽名 `(key: string, options?: any) => string` 即可。
- 你可以將現有的 `t()` 直接傳入，例如 `createStringSchema(t)`。
- 未提供 `fieldName` 時，部分 Schema 會使用預設欄位名稱（如 `Email`、`日期` 等）。

**Type Inference**

- 所有 Schema 皆使用 Zod，支援 `z.infer<typeof schema>` 自動推導。
- 範例：

```ts
const imageInfo = createImageInfoSchema(t)();
type ImageInfo = z.infer<ReturnType<typeof imageInfo>>; // { image: File | string | null; id: number }
```

## API

詳見 [API 文件](./api-docs.md)

## Contributing

Contributions are welcome! To ensure a smooth development process, please follow these steps:

1.  **Fork & Clone**: Fork the repository and clone it to your local machine.
2.  **Set Up**: This project uses `pnpm` as the package manager. Install dependencies with:
    ```bash
    pnpm install
    ```
3.  **Develop**: Create a new branch for your feature or bug fix.
4.  **Test**: Write tests for your changes and ensure all existing tests pass.

    ```bash
    # Run all tests
    pnpm test

    # Run tests in watch mode
    pnpm test:watch
    ```

5.  **Submit a Pull Request**: Push your changes to your fork and open a pull request to the `main` branch. Your code will be automatically linted and formatted upon commit.

## Publishing (For Maintainers)

### Manual Release

1.  Update the version in `package.json`.
2.  Install dependencies and build the package:
    ```sh
    pnpm install && pnpm build
    ```
3.  Log in to npm:
    ```sh
    pnpm login
    ```
4.  Publish the package:
    ```sh
    pnpm publish --access public --no-git-checks
    ```

### Automatic Release

When a pull request is merged into the `main` branch, the `release` GitHub Action will automatically bump the version, create a changelog, and publish the new version to npm. The version bump follows [Semantic Versioning](https.semver.org/) based on the commit messages (e.g., `feat:` for minor, `fix:` for patch).