diff --git a/README.md b/README.md index df54e39..f077cfe 100644 --- a/README.md +++ b/README.md @@ -1,83 +1,46 @@ -# React + TypeScript + Vite +# Go Struct Mapping Visualizer -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +A visual web application for creating and managing mappings between Go struct fields with automatic code generation. -Currently, two official plugins are available: +## Features -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +- **Visual Mapping**: Drag-and-drop interface for connecting struct fields +- **Code Generation**: Generate Go transformation functions from visual mappings +- **Monaco Editor**: Built-in Go code editor with syntax highlighting +- **Flow Diagrams**: Interactive diagrams using React Flow +- **Transformer Nodes**: Custom transformation logic between fields -## Deployment - -This project is automatically deployed to GitHub Pages when changes are pushed to the `main` branch. The live application is available at: - -https://thitiph0n.github.io/go-struct-mapping-visualizer/ - -### Manual Deployment +## Live Demo -To deploy manually: +🔗 **[https://thitiph0n.github.io/go-struct-mapping-visualizer/](https://thitiph0n.github.io/go-struct-mapping-visualizer/)** -1. Build the project: `npm run build` -2. The built files will be in the `dist` directory -3. Push to the `main` branch to trigger automatic deployment +## Development -## Expanding the ESLint configuration +```bash +# Install dependencies +npm install -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: +# Start development server +npm run dev -```js -export default tseslint.config([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... +# Build for production +npm run build - // Remove tseslint.configs.recommended and replace with this - ...tseslint.configs.recommendedTypeChecked, - // Alternatively, use this for stricter rules - ...tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - ...tseslint.configs.stylisticTypeChecked, +# Preview production build +npm run preview - // Other configs... - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) +# Lint code +npm run lint ``` -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: +## Tech Stack -```js -// eslint.config.js -import reactX from 'eslint-plugin-react-x' -import reactDom from 'eslint-plugin-react-dom' +- **Frontend**: React 19 + TypeScript + Vite +- **UI**: shadcn/ui components with Tailwind CSS +- **Diagrams**: React Flow for visual mapping +- **Editor**: Monaco Editor for Go code editing +- **Icons**: Lucide React -export default tseslint.config([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - // Enable lint rules for React - reactX.configs['recommended-typescript'], - // Enable lint rules for React DOM - reactDom.configs.recommended, - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) -``` +## Deployment + +Automatically deployed to GitHub Pages on push to `main` branch. Manual deployment: `npm run build` → push to `main`.