Add Contribution Guid & Code Style Guid

Author: ShenKSPZ

.github/workflows/ubuntu.yml

@@ -7,9 +7,11 @@ on:
   push:
     branches:
       - main
+      - dev
   pull_request:
     branches:
       - main
+      - dev
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

README.md

@@ -118,10 +118,10 @@ We welcome contributions from the community!
 7. Open a Pull Request
 
 ### Development Guidelines
-- Follow the code style guide
+- Follow the [Code Style Guide](docs/CODE_STYLE_GUIDE.md)
 - Write tests for new features
 - Update documentation for any changes
-- See CONTRIBUTING.md for detailed guidelines
+- See [Contributing Guide](docs/CONTRIBUTING.md) for detailed guidelines
 
 <br>
 

docs/CODE_STYLE_GUIDE.md

@@ -0,0 +1,96 @@
+# TensorBlock Studio Code Style Guide
+
+This guide outlines the coding conventions and practices used in the TensorBlock Studio project. Following these guidelines ensures code consistency and maintainability across the codebase.
+
+## General Formatting
+
+- Use UTF-8 character encoding for all files
+- Use spaces for indentation (2 spaces)
+- Insert a final newline at the end of each file
+- Trim trailing whitespaces
+- Keep lines at a reasonable length (recommended 100 characters)
+
+## TypeScript Guidelines
+
+### Naming Conventions
+
+- Use **camelCase** for variables, functions, and properties
+- Use **PascalCase** for classes, interfaces, types, enums, and React components
+- Use **UPPERCASE_SNAKE_CASE** for constants
+- Prefix interfaces with `I` (e.g., `IUser`)
+- Prefix types with `T` (e.g., `TConfig`)
+- Prefix enum names with `E` (e.g., `EStatus`)
+
+### Imports and Exports
+
+- Use named exports for utility functions and components
+- Use default exports for main component files
+- Group imports in the following order:
+  1. React and React-related libraries
+  2. Third-party libraries
+  3. Project modules (with relative paths)
+  4. Types and interfaces
+  5. Assets (styles, images, etc.)
+- Use single quotes for imports
+
+### TypeScript Best Practices
+
+- Use explicit type annotations for function parameters and return types
+- Use interfaces for object shapes when possible
+- Avoid using `any` type; use more specific types or `unknown` when necessary
+- Use TypeScript's built-in utility types when appropriate (e.g., `Partial<T>`, `Pick<T>`)
+- Use optional chaining (`?.`) and nullish coalescing (`??`) operators
+
+## React Guidelines
+
+### Component Structure
+
+- Prefer functional components with hooks over class components
+- Keep components focused on a single responsibility
+- Extract complex logic into custom hooks
+- Extract reusable UI elements into separate components
+- Use React fragments (`<>...</>`) to avoid unnecessary DOM elements
+
+### Props and State
+
+- Destructure props in function parameters
+- Define prop types using TypeScript interfaces
+- Use the useState hook for component state
+- Use the useEffect hook for side effects
+- Follow the React hooks rules (only call hooks at the top level)
+
+### Event Handling
+
+- Use arrow functions for event handlers
+- Name event handlers with the format `handle{Event}` (e.g., `handleClick`)
+- Pass event handlers as props with the format `on{Event}` (e.g., `onClick`)
+
+## CSS and Styling
+
+- Use Tailwind CSS for styling components
+- Follow a mobile-first approach when implementing responsive designs
+- Use the `@apply` directive in CSS files only when necessary
+- Keep styling consistent with the design system
+
+## Testing
+
+- Write tests for all new features
+- Use descriptive test names that explain what is being tested
+- Follow the Arrange-Act-Assert pattern in tests
+- Mock external dependencies in unit tests
+
+## Git Guidelines
+
+- Write clear, concise commit messages in the imperative mood
+- Keep commits focused on a single task or fix
+- Reference issue numbers in commit messages when applicable
+- Use feature branches for new features and bugfixes
+
+## Documentation
+
+- Add JSDoc comments for functions, interfaces, and classes
+- Keep documentation up-to-date with code changes
+- Document complex algorithms or business logic with inline comments
+- Update the README.md and other documentation files when introducing significant changes
+
+By adhering to these guidelines, we maintain a consistent and high-quality codebase that is easier to understand, maintain, and extend. 

docs/CONTRIBUTING.md

@@ -0,0 +1,116 @@
+# Contributing to TensorBlock Studio
+
+Thank you for your interest in contributing to TensorBlock Studio! This document provides guidelines and instructions for contributing to the project.
+
+## Code of Conduct
+
+All contributors are expected to adhere to our code of conduct, which promotes a welcoming and inclusive environment for everyone.
+
+## Getting Started
+
+### Setting Up the Development Environment
+
+1. **Fork the repository** on GitHub
+2. **Clone your fork** to your local machine:
+   ```bash
+   git clone https://github.com/yourusername/TensorBlock-Studio.git
+   cd TensorBlock-Studio
+   ```
+3. **Install dependencies**:
+   ```bash
+   npm install
+   ```
+4. **Set up environment variables**:
+   - Copy `.env.example` to `.env`
+   - Add any required API keys or configuration values
+
+### Development Workflow
+
+1. **Create a new branch** for your feature or bugfix:
+   ```bash
+   git checkout -b feature/your-feature-name
+   # or
+   git checkout -b fix/issue-description
+   ```
+2. **Make your changes** following our [Code Style Guide](CODE_STYLE_GUIDE.md)
+3. **Run the development server**:
+   ```bash
+   npm run dev
+   ```
+4. **Test your changes** to ensure they work as expected
+
+## Submitting Changes
+
+### Pull Requests
+
+1. **Commit your changes** with clear, descriptive commit messages:
+   ```bash
+   git commit -m "Add: implementation of feature X"
+   ```
+2. **Push your branch** to your fork:
+   ```bash
+   git push origin feature/your-feature-name
+   ```
+3. **Open a Pull Request** against the main repository:
+   - Provide a clear title and description
+   - Reference any related issues
+   - Fill out the pull request template
+
+### Pull Request Guidelines
+
+- Keep PRs focused on a single feature or bugfix
+- Make sure your code follows our [Code Style Guide](CODE_STYLE_GUIDE.md)
+- All tests must pass
+- Update documentation for any changes to APIs or features
+- Include screenshots or GIFs for UI changes when possible
+
+## Development Standards
+
+### Testing
+
+- Write tests for new features and bugfixes
+- Ensure all existing tests pass before submitting a PR
+- Run tests locally with:
+  ```bash
+  npm run test
+  ```
+
+### Documentation
+
+- Update documentation when changing or adding features
+- Document new components and functions with JSDoc comments
+- Update README.md if your changes affect how users interact with the application
+
+### Code Quality
+
+- Follow the TypeScript and React best practices outlined in our [Code Style Guide](CODE_STYLE_GUIDE.md)
+- Use ESLint to ensure code quality:
+  ```bash
+  npm run lint
+  ```
+
+## Feature Requests and Bug Reports
+
+- Use the GitHub issue tracker to report bugs or request features
+- Check for existing issues before creating a new one
+- Provide detailed steps to reproduce bugs
+- Include information about your environment (OS, browser, etc.)
+
+## Project Structure
+
+```
+├── app/ # Electron main process files
+├── docs/ # Documentation
+├── src/
+│   ├── components/ # React components
+│   ├── services/ # Application services
+│   ├── styles/ # Global styles
+│   └── types/ # TypeScript type definitions
+```
+
+## Communication
+
+- Use GitHub issues for bug reports and feature requests
+- Join our community discussions for general questions and ideas
+
+Thank you for contributing to TensorBlock Studio! 

docs/docs_index.md

@@ -8,6 +8,8 @@ This documentation provides a comprehensive overview of the TensorBlock Studio a
 - [Components](components.md) - UI components documentation
 - [Services](services.md) - Core services documentation
 - [Types](types.md) - Data types and interfaces
+- [Code Style Guide](CODE_STYLE_GUIDE.md) - Coding standards and best practices
+- [Contributing Guide](CONTRIBUTING.md) - Guidelines for contributing to the project
 
 ## Project Overview