1 Commits
v2.0.0 ... main

Author SHA1 Message Date
b7d4cd40f6 chore: update dependencies and add development guidelines
- Updated `docxtemplater` from 3.66.4 to 3.66.7
- Updated `i18next` from 25.5.3 to 25.6.0
- Updated `@biomejs/biome` from 2.2.4 to 2.2.5
- Updated TypeScript types for `node`, `react`, and `react-dom`
- Added AGENTS.md for development guidelines and best practices
- Added README.md with installation, usage, and development instructions
2025-10-12 14:02:31 +09:00
5 changed files with 333 additions and 2447 deletions

197
AGENTS.md Normal file
View File

@@ -0,0 +1,197 @@
# AGENTS.md - Development Guidelines for Kintone Word Output Plugin
This document provides guidelines and useful information for AI agents and developers working on the Kintone Word Output Plugin project. It includes setup instructions, coding standards, and best practices to ensure efficient and consistent development.
## Project Overview
- **Name**: Kintone Word Output Plugin
- **Purpose**: A Kintone plugin that formats and downloads data using Word (.docx) templates.
- **Tech Stack**:
- Frontend: React (TypeScript)
- Build Tool: rspack
- Linting/Formatting: Biome
- Template Engine: docxtemplater with angular-expressions
- Kintone Integration: @kintone/rest-api-client
- **Languages**: TypeScript, JavaScript
- **Package Manager**: npm
## Development Environment Setup
### Prerequisites
- Node.js 18+
- npm (comes with Node.js)
### Initial Setup
1. Clone the repository
2. Run `npm install` to install dependencies
3. Run `npm run gen:key` to generate a private key for development
4. Run `npm start` to start the development server
### Useful Scripts
- `npm run build`: Development build
- `npm run build:prod`: Production build
- `npm run develop`: Watch mode build
- `npm run lint`: Run Biome linter
- `npm run format`: Format code with Biome
- `npm run cspell`: Check spelling
- `npm run upload`: Upload plugin to Kintone (requires env setup)
## Coding Standards
### TypeScript
- Use strict TypeScript settings (see tsconfig.json)
- Prefer interfaces over types for object definitions
- Use proper typing for Kintone API responses
- Avoid `any` type; use specific types or `unknown`
### React Components
- Use functional components with hooks
- Follow React best practices for state management
- Use TypeScript for prop types
- Implement error boundaries where appropriate
### File Structure
- `src/common/`: Shared utilities and components
- `src/config/`: Configuration UI components
- `src/desktop/`: Desktop app components and logic
- `src/types/`: TypeScript type definitions
- `plugin/`: Kintone plugin manifest and assets
- `scripts/`: Build and utility scripts
### Naming Conventions
- Use camelCase for variables and functions
- Use PascalCase for components and classes
- Use kebab-case for file names
- Prefix custom hooks with `use`
## Code Quality Tools
### Biome
- Used for linting and formatting
- Configuration in `biome.json`
- Run `npm run lint` to check code
- Run `npm run format` to auto-fix issues
### TypeScript Compiler
- Strict mode enabled
- Check for errors with `npm run build`
### Spell Checker
- Uses cspell for spell checking
- Configuration in cspell config files
- Run `npm run cspell` to check
## Testing
### Current Testing Setup
- No automated tests are currently implemented
- Manual testing required for:
- Plugin installation in Kintone
- Template rendering with various data types
- Error handling scenarios
### Recommended Testing Approach
- Add unit tests for utility functions (e.g., data formatting)
- Add integration tests for template generation
- Test with different Kintone field types
- Test error scenarios (invalid templates, missing data)
## Build and Deployment
### Build Process
1. Pre-build: Generate keys and validate
2. Build with rspack (dev or prod mode)
3. Output: `dist/plugin.zip` for Kintone upload
### Deployment
- Use `npm run upload` for development
- Manual upload via Kintone Plugin Uploader for production
- Requires proper environment variables for authentication
## Kintone-Specific Considerations
### Plugin Architecture
- Separate config and desktop JS files
- Config handles settings UI
- Desktop handles record view functionality
- Uses Kintone's plugin API
### Data Handling
- Fields are mapped from Kintone records to template data
- Supports all Kintone field types
- Custom formatting for numbers, dates, calculations
- Handles subtable data as arrays
### Template Engine
- Uses docxtemplater for .docx processing
- Custom filters available (see generateWordFileData.ts)
- Supports loops, conditionals, and expressions
## Common Development Tasks
### Adding a New Filter
1. Add filter function in `generateWordFileData.ts`
2. Update filters object in expressionParser.configure()
3. Document in README.md
4. Test with sample templates
### Adding a New Field Type Support
1. Update `record2templateData` function
2. Handle formatting in appropriate helper functions
3. Add type checks and error handling
4. Test with sample data
### Updating UI Components
1. Use existing UI components from `src/common/ui/`
2. Follow i18n pattern for text
3. Test in both config and desktop contexts
## Troubleshooting
### Common Issues
- Build fails: Check Node.js version, run `npm install`
- Plugin not loading: Verify manifest.json, check browser console
- Template errors: Validate .docx file, check field codes
- Upload fails: Check environment variables, Kintone permissions
### Debug Tips
- Use browser dev tools for client-side debugging
- Check Kintone app logs for server-side issues
- Validate templates with docxtemplater documentation
- Test with minimal data sets first
## Contributing
### Pull Request Process
1. Create a feature branch
2. Make changes following coding standards
3. Run linting and build checks
4. Test manually in Kintone environment
5. Submit PR with clear description
### Code Review Checklist
- [ ] Code follows TypeScript and React best practices
- [ ] No linting errors
- [ ] Proper error handling
- [ ] Tested with various data scenarios
- [ ] Documentation updated if needed
## Resources
- [Kintone Developer Documentation](https://developer.kintone.io/)
- [docxtemplater Documentation](https://docxtemplater.com/)
- [Biome Documentation](https://biomejs.dev/)
- [React Documentation](https://react.dev/)
## AI Agent Guidelines
When working on this project:
- Always check existing code patterns before implementing new features
- Use the provided UI components and utilities
- Follow the established file structure
- Test changes in a Kintone environment
- Update documentation for any user-facing changes
- Prefer TypeScript over JavaScript for new code
- Use Biome for code quality checks
- Always use English for comments embedded in the code
- Respond to chat messages in the language used in the input

106
README.md Normal file
View File

@@ -0,0 +1,106 @@
# Kintone Word Output Plugin
A Kintone plugin that allows users to format and download data using Word template files (.docx). This plugin integrates with Kintone's record data and uses the docxtemplater library to populate templates with dynamic content.
## Features
- **Template-Based Output**: Use pre-designed Word (.docx) templates to format your Kintone data.
- **Data Source Flexibility**: Choose data from the current record or from another Kintone app.
- **Dynamic Content Population**: Leverage angular-expressions for complex data manipulation within templates.
- **Multi-Language Support**: Includes English and Japanese localization.
- **Error Handling**: Comprehensive error messages for configuration and runtime issues.
## Installation
1. Download the plugin package from the [releases page](https://github.com/your-repo/kintone-plugin-docx/releases).
2. Upload the plugin to your Kintone environment via the Kintone Plugin Uploader.
3. Enable the plugin in your desired Kintone app.
## Usage
### Configuration
1. In the app settings, navigate to the plugin configuration.
2. Select the data source:
- **Own Record**: Use an attachment field in the current app that contains the Word template.
- **Record from Another App**: Specify the App ID, Record ID, and Attachment Field Code for the template.
3. Save the settings.
### Outputting Word Files
1. Open a record in the Kintone app where the plugin is enabled.
2. Click the "Output Word" button in the record view.
3. The plugin will generate and download a Word file based on the configured template and record data.
## Template Requirements
- Templates must be in .docx format.
- Use placeholders like `{{fieldCode}}` in the template to insert data.
- Supports angular-expressions for advanced formatting (e.g., `{{fieldCode | uppercase}}`).
- **Custom Filters**: The plugin provides the following custom filters for use in templates:
- `toUpperCase`: Converts a string to uppercase (e.g., `{{fieldCode | toUpperCase}}`).
- `toLowerCase`: Converts a string to lowercase (e.g., `{{fieldCode | toLowerCase}}`).
- `regexMatch`: Checks if a string matches a regex pattern (e.g., `{{fieldCode | regexMatch:'pattern'}}`).
- `regexFilter`: Filters an array of strings based on a regex pattern (e.g., `{{arrayField | regexFilter:'pattern'}}`).
- `includes`: Checks if an array or string includes a substring (e.g., `{{arrayField | includes:'value'}}`).
- `indexOf`: Returns the index of a substring in an array or string (e.g., `{{arrayField | indexOf:'value'}}`).
## Development
### Prerequisites
- Node.js (version 18 or higher)
- npm or yarn
### Setup
1. Clone the repository:
```bash
git clone https://github.com/your-repo/kintone-plugin-docx.git
cd kintone-plugin-docx
```
2. Install dependencies:
```bash
npm install
```
3. Generate private key for development:
```bash
npm run gen:key
```
4. Start development server:
```bash
npm start
```
### Build
- Development build: `npm run build`
- Production build: `npm run build:prod`
### Upload to Kintone
```bash
npm run upload
```
## Dependencies
- `@kintone/rest-api-client`: For interacting with Kintone REST API.
- `docxtemplater`: For processing Word templates.
- `angular-expressions`: For template expressions.
- `react`: For the plugin's UI components.
## License
This project is licensed under the MIT License. See the [LICENSE.txt](LICENSE.txt) file for details.
## Contributing
Contributions are welcome! Please open an issue or submit a pull request.
## Support
For support, please check the [Kintone Developer Network](https://developer.kintone.io/) or open an issue in this repository.

View File

@@ -1,5 +1,5 @@
{ {
"$schema": "https://biomejs.dev/schemas/2.2.4/schema.json", "$schema": "https://biomejs.dev/schemas/2.2.5/schema.json",
"vcs": { "vcs": {
"enabled": true, "enabled": true,
"clientKind": "git", "clientKind": "git",

2463
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -20,9 +20,9 @@
"angular-expressions": "^1.5.1", "angular-expressions": "^1.5.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"dayjs": "^1.11.18", "dayjs": "^1.11.18",
"docxtemplater": "^3.66.4", "docxtemplater": "^3.66.7",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"i18next": "^25.5.3", "i18next": "^25.6.0",
"moize": "^6.1.6", "moize": "^6.1.6",
"pizzip": "^3.2.0", "pizzip": "^3.2.0",
"react": "^19.2.0", "react": "^19.2.0",
@@ -32,16 +32,16 @@
"tiny-invariant": "^1.3.3" "tiny-invariant": "^1.3.3"
}, },
"devDependencies": { "devDependencies": {
"@biomejs/biome": "^2.2.4", "@biomejs/biome": "^2.2.5",
"@kintone/dts-gen": "^8.1.3", "@kintone/dts-gen": "^8.1.3",
"@kintone/plugin-uploader": "^9.1.5", "@kintone/plugin-uploader": "^9.1.5",
"@kintone/webpack-plugin-kintone-plugin": "^8.0.11", "@kintone/webpack-plugin-kintone-plugin": "^8.0.11",
"@rspack/cli": "^1.5.8", "@rspack/cli": "^1.5.8",
"@rspack/core": "^1.5.8", "@rspack/core": "^1.5.8",
"@types/file-saver": "^2.0.7", "@types/file-saver": "^2.0.7",
"@types/node": "^24.6.2", "@types/node": "^24.7.2",
"@types/react": "^19.2.0", "@types/react": "^19.2.2",
"@types/react-dom": "^19.2.0", "@types/react-dom": "^19.2.1",
"cross-env": "^10.1.0", "cross-env": "^10.1.0",
"cspell": "^9.2.1", "cspell": "^9.2.1",
"env-cmd": "^11.0.0", "env-cmd": "^11.0.0",