diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f6873d6..ce1e74d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,108 +1,137 @@ -# Contributing to InfraBoard +# **Contributing to InfraBoard** -We are excited that you are interested in contributing to InfraBoard! This document provides guidelines for contributions to the project. +Thank you for your interest in contributing to InfraBoard! This document provides detailed guidelines and processes to ensure your contributions align with the project's standards and workflows. -## How to Contribute +--- -Contributions to InfraBoard can take many forms. Here are some ways you can help: +## **Ways to Contribute** -- **Reporting Bugs**: If you find a bug, please create an issue in our issue tracker. -- **Suggesting Enhancements**: Have ideas on how to make InfraBoard better? Open an issue with your suggestion. -- **Code Contributions**: If you want to write code for InfraBoard, that's great! Start by looking at our open issues. +- **Report Bugs**: Identify issues and create detailed reports in our [Issue Tracker](https://github.com/xerocodee/InfraBoard/issues). +- **Suggest Enhancements**: Share ideas to improve InfraBoard by opening a discussion or issue. +- **Code Contributions**: Tackle open issues or suggest new features to enhance InfraBoard's functionality. -## Steps for Contributing +--- -1. **Fork the Repository**: Start by forking the InfraBoard repository to your GitHub account. +## **Contribution Workflow** -2. **Clone the Forked Repository**: Clone your fork to your local machine. +### **Steps for Contributing** -3. **Create a New Branch**: Create a branch for your contribution (`git checkout -b feature/YourFeature`). +1. **Fork the Repository**: Fork InfraBoard's repository to your GitHub account. +2. **Clone Your Fork**: Clone the forked repository locally: + ```bash + git clone https://github.com//InfraBoard.git + ``` +3. **Create a New Branch**: Use a feature-specific branch name: + ```bash + git checkout -b feature/YourFeature + ``` +4. **Make Changes**: Implement your feature or bug fix in the appropriate files. +5. **Test Your Changes**: Ensure your changes pass existing tests and add new ones if necessary. +6. **Commit Changes**: Write clear, descriptive commit messages: + ```bash + git commit -m "Add YourFeature" + ``` +7. **Push Changes**: Push your branch to your fork: + ```bash + git push origin feature/YourFeature + ``` +8. **Open a Pull Request**: Create a pull request (PR) to merge your branch into InfraBoard's `test` branch. -4. **Make Your Changes**: Work on the changes you wish to make. +--- -5. **Test Your Changes**: Ensure your changes do not introduce any new bugs or issues. +## **GitHub Desktop Workflow** -6. **Commit Your Changes**: Commit your changes with a clear commit message (`git commit -m 'Add YourFeature'`). +1. **Open GitHub Desktop**: + - Log in to your GitHub account. +2. **Clone Repository**: + - Clone InfraBoard's repository via the "Clone Repository" option. +3. **Switch to a New Branch**: + - Use the "Current Branch" dropdown to create or switch branches. +4. **Make Changes**: + - Edit files locally using your preferred editor. +5. **Commit Changes**: + - Use GitHub Desktop to stage and commit your changes. +6. **Push Changes**: + - Push your branch to your forked repository. +7. **Create a Pull Request**: + - Use the "Compare & Pull Request" button on GitHub to open a PR. -7. **Push to Your Branch**: Push your changes to your branch (`git push origin feature/YourFeature`). +--- -8. **Open a Pull Request**: Go to the InfraBoard repository and open a pull request from your branch. +## **Branching and PR Strategy** -## Alternatively, contribute using GitHub Desktop +All new features or bug fixes should be made on a separate feature or bug branch. Submit pull requests to the `test` branch for review and testing before merging into the main or stage branch. -1. **Open GitHub Desktop:** - - Launch GitHub Desktop and log in to your GitHub account if you haven't already. +```mermaid +graph TD + A[feature/bug branch] --> B[test branch] + B --> C[stage branch] + C --> D[master branch] +``` -3. **Clone the Repository:** - - - If you haven't cloned the InfraBoard repository yet, you can do so by clicking on the "File" menu and selecting "Clone Repository." - - Choose the InfraBoard repository from the list of repositories on GitHub and clone it to your local machine. +--- -5. **Switch to the Correct Branch:** - - - Ensure you are on the branch that you want to submit a pull request for. - - If you need to switch branches, you can do so by clicking on the "Current Branch" dropdown menu and selecting the desired branch. +## **Coding Guidelines** -7. **Make Changes:** - - Make your changes to the code or files in the repository using your preferred code editor. +- Follow the project's coding standards (see `.eslintrc.json` and `.prettierrc`). +- Ensure your code is clean, readable, and maintainable. +- Comment your code where necessary to improve clarity. -9. **Commit Changes:** - - - In GitHub Desktop, you'll see a list of the files you've changed. Check the box next to each file you want to include in the commit. - - Enter a summary and description for your changes in the "Summary" and "Description" fields, respectively. Click the "Commit to " button to commit your changes to the local branch. +--- -11. **Push Changes to GitHub:** - - After committing your changes, click the "Push-origin" button in the top right corner of GitHub Desktop to push your changes to your forked repository on GitHub. +## **Documentation Guidelines** -13. **Create a Pull Request:** - - - Go to the GitHub website and navigate to your fork of the InfraBoard repository. - - You should see a button to "Compare & pull request" between your fork and the original repository. Click on it. +If your changes require documentation updates: +- Include documentation updates in your pull request. +- Ensure clarity and consistency in writing. -8. **Review and Submit:** - - - On the pull request page, review your changes and add any additional information, such as a title and description, that you want to include with your pull request. - - Once you're satisfied, click the "Create pull request" button to submit your pull request. +--- -10. **Wait for Review:** - - Your pull request will now be available for review by the project maintainers. They may provide feedback or ask for changes before merging your pull request into the main branch of the InfraBoard repository. +## **Pull Request Guidelines** -⭐️ Support the Project -If you find this project helpful, please consider giving it a star on GitHub! Your support helps to grow the project and reach more contributors. +- Keep PRs concise and focused on a single feature or fix. +- Provide a clear and detailed description of the changes. +- Reference relevant issue numbers for context. -## Notes : +--- -To contribute to InfraBoard, always push new features or bug fixes to a feature/bug branch first. Then, raise a pull request (PR) from your feature/bug branch to the test branch for review. It's crucial to target the test branch with your PRs to ensure changes are tested before merging into the master/stage codebase. This approach helps maintain the stability and quality of the project. +## **Code of Conduct** -## Coding Guidelines +By contributing to InfraBoard, you agree to abide by our [Code of Conduct](./CODE_OF_CONDUCT.md). It ensures a welcoming and inclusive environment for all contributors. -- Ensure your code adheres to the project's coding standards. -- Write clean, readable, and maintainable code. -- Include comments in your code where necessary. +--- -## Documentation +## **Communication Channels** -If you are adding new features or making changes that require documentation updates, please include them in your pull requests. +If you have questions or need assistance: +- [Discord](https://discord.gg/nmRb3fsTgu) +- [Discussions Room](https://github.com/xerocodee/InfraBoard/discussions) -## Pull Request Guidelines +--- -- Keep pull requests concise and focused on a single issue or feature. -- Provide a detailed description of your changes in the pull request. -- Reference any relevant issue numbers in your pull request description. +## **Support the Project** -## Code of Conduct +If you find InfraBoard helpful, consider giving it a ⭐️ on GitHub. Your support helps us grow and reach more contributors. -Please note that this project is released with a Contributor [Code of Conduct](./CODE_OF_CONDUCT.md). By participating in this project, you agree to abide by its terms. +--- -## Questions? +## **Mermaid Diagram: Contribution Workflow** -If you have any questions or need assistance, feel free to open an issue for discussion. +```mermaid +graph TD + A[Contributor Forks Repository] --> B[Clone Repository Locally] + B --> C[Create a New Branch] + C --> D[Make Changes] + D --> E[Test Changes] + E --> F[Commit Changes] + F --> G[Push to Fork] + G --> H[Open Pull Request] + H --> I[Review by Maintainers] + I --> J[Merge into Test Branch] + J --> K[Merge into Stage Branch] + K --> L[Merge into Master Branch] +``` -- [Discord](https://discord.gg/nmRb3fsTgu) -- [Discussions Room](https://github.com/xerocodee/InfraBoard/discussions) +--- -Thank you for contributing to InfraBoard, and we look forward to your contributions! +Thank you for contributing to InfraBoard! Your contributions make a significant impact on the project's success. \ No newline at end of file diff --git a/HACKTOBERFEST.md b/HACKTOBERFEST.md deleted file mode 100644 index b6631ab..0000000 --- a/HACKTOBERFEST.md +++ /dev/null @@ -1,92 +0,0 @@ -# Hacktoberfest 2024 - -Welcome to **Hacktoberfest 2024**! 🎉 - -Hacktoberfest is a month-long celebration of open-source software, encouraging participation in the open-source community through contributions. Whether you're a seasoned developer or new to coding, your contributions are valuable and welcome. - -## How to Participate - -1. **Register for Hacktoberfest**: Sign up on the [official Hacktoberfest website](https://hacktoberfest.com) to get started. - -2. **Find Repositories**: - - Look for repositories tagged with the `hacktoberfest` topic. - - Contribute to projects that have issues labeled `hacktoberfest-accepted`. - - Ensure the repository is public and not archived. - -3. **Make Meaningful Contributions**: - - Your pull/merge requests (PRs/MRs) should add value to the project. - - Avoid trivial changes like fixing typos or formatting. - -4. **Submit Your PRs/MRs**: - - PRs/MRs must be created between **October 1 and October 31**. - - They should be accepted by the project's maintainer. - -## Contribution Guidelines - -- **Quality Over Quantity**: Focus on making meaningful contributions that improve the project. - -- **Respect Project Guidelines**: Adhere to the contribution guidelines provided by the project maintainers. - -- **Avoid Spam**: - - Do not submit automated or scripted PRs/MRs. - - Refrain from making PRs/MRs that are irrelevant or disruptive. - -## Acceptance Criteria - -Your PRs/MRs must meet the following criteria to count toward Hacktoberfest: - -- **Timing**: Created between October 1 and October 31. - -- **Repository**: Contributed to a public, unarchived repository. - -- **Approval**: - - **Merged** by a maintainer, **or** - - Labeled as `hacktoberfest-accepted`, **or** - - Given an overall approving review. - -- **Status**: Not marked as a draft and not labeled as `spam` or `invalid`. - -## Seven-Day Review Period - -- After your PR/MR meets the acceptance criteria, it enters a **seven-day review period**. - -- During this time, maintainers or Hacktoberfest organizers may invalidate the PR/MR if it doesn't meet the guidelines. - -- Once the review period is over and your PR/MR still meets all the checks, it will count toward your Hacktoberfest goals. - -## Reducing Spam - -To maintain the quality of contributions: - -- **Maintainers Can Mark PRs/MRs as Spam**: - - PRs/MRs labeled with `spam` will not be counted. - - Contributors with two or more spammy PRs/MRs may be disqualified. - -- **Exclusion of Bad Repositories**: - - Repositories that encourage low-quality contributions will be excluded. - - Such PRs/MRs will not count toward Hacktoberfest. - -- **Reporting Issues**: - - If you encounter a repository or PR/MR that goes against Hacktoberfest values, report it to the organizers for review. - -## Rewards - -- Complete **four valid PRs/MRs** to earn a limited edition Hacktoberfest T-shirt or plant a tree. - -- All participants will receive a digital certificate of completion. - -## Resources - -- **Official Website**: [Hacktoberfest 2024](https://hacktoberfest.com) - -- **Event Details**: Learn more about the event, rules, and FAQs. - -- **Community Support**: Join the conversation on social media using the hashtag `#Hacktoberfest`. - -## Let's Get Started! - -Join thousands of developers around the world in making impactful contributions to open-source projects. Happy coding! 🚀 - ---- - -*For any questions or clarifications, please refer to the [official Hacktoberfest FAQ](https://hacktoberfest.com/faq) or contact the support team.* diff --git a/STRUCTURE.md b/STRUCTURE.md index 75465ef..cccd277 100644 --- a/STRUCTURE.md +++ b/STRUCTURE.md @@ -1,40 +1,88 @@ # InfraBoard File Structure -This document provides an overview of the InfraBoard project's file structure to help you navigate and understand where different parts of the code reside. - -## Overview - -- `public/`: Contains static assets like images and `favicon.ico` used across the application. -- `src/`: The source code directory for the application. - - `app/`: Core app files including global styles and layout definitions. - - `assets/`: Asset files categorized by their types (AWS, GCP, logos, etc.). - - `appwrite` : Contains various appwrite authentication functions. - - `components/`: Reusable React components. - - `canvas/`: Components related to the canvas functionality. - - `drag/`: Drag-and-drop related components. - - `header/`: Header component of the application. - - `modals/`: Contains various modal components like `ReadmeModal.tsx`. - - `sidebar/`: Sidebar and related components. - - `conf` : config file for appwrite project credentials. - - `context` : contains various global context states functions. - - `lib` : contains various library files for the project. - - `store/`: State management using Redux or similar state stores, separated by service types. - - `styles`: css file for the project - - `types` : typescript interface files - - `utils` : functions which will be used multiple times across the project. - - `protectedRoutes.tsx` : This file is important! This file ensures that only authenticated user will have access to InfraBoard Dashboard. -- `.eslintrc.json`: ESLint configuration for coding standards. -- `.gitignore`: Specifies files to be ignored by git. -- `.prettierrc`: Prettier configuration for code formatting. -- `next-env.d.ts`: Type declarations for Next.js. -- `next.config.mjs`: Configuration file for Next.js. -- `README.md`: Comprehensive guide and overview of the project. - -## Details - -Each subdirectory contains further organization specific to its purpose. For instance: - -- `store/aws/`: Contains state management files specific to AWS services. -- `store/gcp/`: Contains state management files specific to GCP services. - -Remember, this structure may evolve as the project grows. Always pull the latest changes and consult the documentation for the most up-to-date information. \ No newline at end of file +This document provides a professional overview of the **InfraBoard** project's file structure to help navigate and understand where different parts of the codebase reside. It adheres to modular and organized conventions for maintainability and scalability. + + +## Overview of the Structure + +- **`public/`**: Contains static assets such as images and `favicon.ico` used across the application. +- **`src/`**: Houses the main application source code: + - **`app/`**: Core files for global styles and layout definitions. + - **`assets/`**: Categorized asset files (e.g., AWS, GCP, logos). + - **`appwrite/`**: Includes functions for Appwrite authentication. + - **`components/`**: Reusable React components: + - **`canvas/`**: Components for canvas-related functionality. + - **`drag/`**: Drag-and-drop related components. + - **`header/`**: Components for the application header. + - **`modals/`**: Modal components such as `ReadmeModal.tsx`. + - **`sidebar/`**: Sidebar and related components. + - **`conf/`**: Configuration files for Appwrite project credentials. + - **`context/`**: Global context state management files. + - **`lib/`**: Library files utilized throughout the project. + - **`store/`**: State management implementations (e.g., Redux) categorized by service type: + - **`store/aws/`**: AWS service-specific state management. + - **`store/gcp/`**: GCP service-specific state management. + - **`styles/`**: CSS files for styling the project. + - **`types/`**: TypeScript interface and type definition files. + - **`utils/`**: Utility functions reused across the project: + - **`protectedRoutes.tsx`**: Ensures authenticated access to InfraBoard's Dashboard. +- **Configuration Files**: + - `.eslintrc.json`: ESLint configuration for coding standards. + - `.gitignore`: Files and directories to be ignored by Git. + - `.prettierrc`: Prettier configuration for consistent code formatting. + - `next-env.d.ts`: Type declarations for Next.js. + - `next.config.mjs`: Next.js configuration. + - `README.md`: Comprehensive guide and project overview. + +--- + +## File Structure Visualization + +```mermaid +graph TD + style A fill:#E6F7FF,stroke:#3399FF,stroke-width:2px + style B fill:#FFF0F0,stroke:#FF6666,stroke-width:2px + style C fill:#F7F7F7,stroke:#999999,stroke-width:2px + style C1 fill:#FFFBE6,stroke:#FFCC00,stroke-width:2px + style C2 fill:#E6FFEB,stroke:#66CC66,stroke-width:2px + style C3 fill:#E8F4FF,stroke:#3399FF,stroke-width:2px + style C4 fill:#F9F0FF,stroke:#9933CC,stroke-width:2px + style C8A fill:#FFF2CC,stroke:#FFCC33,stroke-width:2px + style C8B fill:#FFEEE6,stroke:#FF9966,stroke-width:2px + + A[Root Directory] --> B[public/] + A --> C[src/] + C --> C1[app/] + C --> C2[assets/] + C --> C3[appwrite/] + C --> C4[components/] + C --> C5[conf/] + C --> C6[context/] + C --> C7[lib/] + C --> C8[store/] + C --> C9[styles/] + C --> C10[types/] + C --> C11[utils/] + C4 --> C4A[canvas/] + C4 --> C4B[drag/] + C4 --> C4C[header/] + C4 --> C4D[modals/] + C4 --> C4E[sidebar/] + C8 --> C8A[aws/] + C8 --> C8B[gcp/] + A --> D[.eslintrc.json] + A --> E[.gitignore] + A --> F[.prettierrc] + A --> G[next-env.d.ts] + A --> H[next.config.mjs] + A --> I[README.md] +``` + +--- + +## Key Notes + +1. **Protected Routes**: The `protectedRoutes.tsx` file ensures that only authenticated users can access the InfraBoard Dashboard. +2. **State Management**: The `store/` directory provides service-specific state management to segregate concerns effectively. +3. **Scalability**: The modular structure supports future scalability and integration of additional services or components. +4. **Consistency**: Configuration files like `.eslintrc.json` and `.prettierrc` maintain coding standards and formatting consistency. diff --git a/TEMPLATE.md b/TEMPLATE.md index cbf9aba..95a94a2 100644 --- a/TEMPLATE.md +++ b/TEMPLATE.md @@ -1,50 +1,105 @@ - # Templates Tutorial -- `src/assets/`: - - `aws/`: This directory contains all the icons related to AWS services. The icons are the `.tsx` file. - - `compute/`: contains icons for aws compute services. - - `network/`: contains icons for aws networking services. - - ... - - `gcp/`: This directory contains all the icons related to GCP services. The icons are the `.tsx` file. - - `compute/`: contains icons for gcp compute services. - - `network/`: contains icons for gcp networking services. - - ... +This document provides detailed instructions on the structure and usage of assets and the store folder in the InfraBoard project, along with a step-by-step guide for creating and using custom `.tsx` icon components. + +## **Directory Overview** + +### **`src/assets/`** +- **`aws/`**: Contains `.tsx` icon components related to AWS services: + - **`compute/`**: Icons for AWS compute services. + - **`network/`**: Icons for AWS networking services. + - _(Other subdirectories for additional AWS categories)_ +- **`gcp/`**: Contains `.tsx` icon components related to GCP services: + - **`compute/`**: Icons for GCP compute services. + - **`network/`**: Icons for GCP networking services. + - _(Other subdirectories for additional GCP categories)_ + +--- + +## **Steps to Create a `.tsx` File from an SVG** + +1. Copy the SVG code. +2. Open the [SVGR Playground](https://react-svgr.com/playground/?dimensions=false&jsxRuntime=automatic). +3. Paste the SVG code into the playground. It will generate a React component. +4. Save the generated code into a new `.tsx` file within the appropriate directory in `src/assets/`. +5. Follow proper naming conventions for the file. +6. Import the newly created `.tsx` file into `src/assets/index.ts`. +7. Add the new component to the relevant icon object. + +--- + +## **Using the Icon/Image Component** +1. Import the desired icon object: + ```typescript + import { AWSIcons } from '@/assets/aws'; + ``` +2. Destructure the required icon from the object: + ```typescript + const { YourIconComponentName } = AWSIcons; + ``` +3. Use the component in your application: + ```jsx + + ``` +--- -## Steps to create .tsx file from svg file. +## **Store Folder Structure** -- Copy the svg code. -- [Go to this link](https://react-svgr.com/playground/?dimensions=false&jsxRuntime=automatic) -- Paste the SVG code here. The site will generate the React component. Create the icon file in the project and use proper naming conventions. -- import the tsx component you create earlier in `src/assets/index.ts` file. -- Add icon in icon object. +### **`src/store/`** +- **`aws/`**: Contains data files related to AWS services, categorized into: + - **`compute/`** + - **`network/`** + - **`applications/`** + - **`others/`** + - _(Additional categories as required)_ +- **`gcp/`**: Contains data files related to GCP services, categorized into: + - **`compute/`** + - **`ai/`** + - **`applications/`** + - **`others/`** + - _(Additional categories as required)_ -## How to use this icon/image component. +Each subdirectory contains objects that may include React icons or custom `.tsx` icon components. These objects are imported into `store/aws/index.ts` and `store/gcp/index.ts` for centralized access. -- import {`AWSIcons`} from `@/assets/aws` -- const {`YourIconComponentName`} = `AWSIcons` -- `` use this when required. +### Key File: +- **`leftSidebarData`**: Responsible for rendering the tabs in the left sidebar. Tabs can be easily added or removed by modifying this file. +--- +## **Mermaid Diagram: Directory Visualization** -## Store Folder `src/store` +```mermaid +graph TD + A[src/] --> B[assets/] + B --> B1[aws/] + B --> B2[gcp/] + B1 --> B1A[compute/] + B1 --> B1B[network/] + B1 --> B1C[...] + B2 --> B2A[compute/] + B2 --> B2B[network/] + B2 --> B2C[...] -- `aws/`: contains data file about aws services. - - `compute` - - `network` - - `applications` - - `others` - - ... + A --> C[store/] + C --> C1[aws/] + C --> C2[gcp/] + C1 --> C1A[compute/] + C1 --> C1B[network/] + C1 --> C1C[applications/] + C1 --> C1D[others/] + C2 --> C2A[compute/] + C2 --> C2B[ai/] + C2 --> C2C[applications/] + C2 --> C2D[others/] + C --> C3[leftSidebarData] +``` -- `gcp/`: contains data file about gcp services. - - `compute` - - `ai` - - `applications` - - `others` - - ... +--- -The subdirectories (eg: compute, ai, applications, etc.) object files are then imported into `store/gcp/index.ts` and `store/aws/index.ts`. The subdirectories object files may contains react icons or custom tsx icon files. +## **Best Practices** -- `leftSidebarData` : The file that is responsible for rendering the tabs in the left sidebar You can easily add and remove the tabs from this file. \ No newline at end of file +- Maintain a clear and consistent naming convention for all files and components. +- Regularly update the `index.ts` files for centralized imports and better modularity. +- Use the `leftSidebarData` file for managing the tabs dynamically in the left sidebar. diff --git a/next-env.d.ts b/next-env.d.ts index 725dd6f..00af21b 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,3 @@ /// /// /// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.