update readme

CONTRIBUTING.md

@@ -1,51 +1,75 @@
-# Contributing to Foxbox
+# Contributing Guidelines
 
-**Supported development environments:** Linux, Windows, macOS
+Welcome, and thank you for your interest in contributing to FoxBox! We value your contributions and want to make the contributing experience enjoyable and rewarding for you. Here’s how you can get started:
 
-**Dependencies:**
+## :rocket: Getting Started
 
-- [Node.js](https://nodejs.org/en/) v16.10+
-- [Git LFS](https://git-lfs.github.com/)
+Please check our [README.md](../README.md) and follow the installation steps.
 
-## Getting started
-
-1. Clone repo
-1. Run `git lfs pull` to ensure Git LFS objects are up to date
-1. Run `corepack enable` and `yarn install`
-   - If you still get errors about corepack after running `corepack enable`, try uninstalling and reinstalling Node.js. Ensure that Yarn is not separately installed from another source, but is installed _via_ corepack.
-1. Launch the development environment:
+#### Other useful commands
 
 ```sh
-# To launch the desktop app (run both scripts concurrently):
-$ yarn desktop:serve        # start webpack
-$ yarn desktop:start        # launch electron
-
-# To launch the browser app:
-$ yarn web:serve
-
-# To launch the storybook:
+# To launch the storybook
 $ yarn storybook
+```
 
+```sh
 # Advanced usage: running webpack and electron on different computers (or VMs) on the same network
-$ yarn desktop:serve --host 192.168.xxx.yyy         # the address where electron can reach the webpack dev server
+$ yarn desktop:serve --host 192.168.xxx.yyy # the address where electron can reach the webpack dev server
 $ yarn dlx [email protected] .webpack # launch the version of electron for the current computer's platform
 ```
 
-### Other useful commands
-
 ```sh
-$ yarn run          # list available commands
-$ yarn lint         # lint all files
-$ yarn test         # run all tests
-$ yarn test:watch   # run tests on changed files
+$ yarn run               # list available commands
+$ yarn lint              # lint all files
+$ yarn test              # run all tests
+$ yarn test:watch        # run tests on changed files
+$ yarn test:integration  # run all integration tests
 ```
 
-## Localization
+## :herb: Creating a new branch
+
+To create a branch in this repository, please follow the guidelines below, ensuring that the purpose of each branch is clear and well-defined:
+
+- `feature` : Create this branch when adding new features, modifying existing features, or removing outdated functionality.
+- `bugfix` : This branch is for resolving bugs discovered in existing features.
+- `hotfix` : Use this for rapidly addressing critical issues. This typically involves implementing a temporary solution that requires immediate attention.
+- `test` : This is intended for experimental changes, where the main goal is to explore new ideas or test solutions without addressing a specific issue.
+- `docs` : Designate this branch for updates and improvements to documentation, ensuring that information is current and helpful to users.
+- `wip` (Work In Progress): Use this for ongoing development that is not yet ready for merging into the main branch.
+
+### Examples
+
+`feature/new-menu-foo`
+
+`test/create-unit-test-for-component-bar`
+
+## :label: Version increment
+
+Semantic Versioning has been chosen as our standard method for version increments, which is widely adopted across various software projects. The version format is structured as follows:
+`<major>.<minor>.<patch>[.<build number>]`.
+
+- _Note: Currently, the version increment process is manual. Developers are required to update the version number in the package.json file manually. An automated pipeline for this task is in development and will be implemented to streamline this process in the future._
+
+### Components
+
+MAJOR: Increasing the major version usually breaks compatibility, allowing developers to remove the deprecated API or rework the existing ones. Users know about it and do not expect a smooth update.
+
+MINOR: Version increment implies adding new functionality without breaking compatibility.
+
+PATCH: Also known as bugfix version that includes fixing security vulnerabilities, etc.
+
+BUILD NUMBER (Optional): Optionally, the build number can be additionally added.
+
+### Examples
+
+`1.20.11`
+
+`1.20.11.403`
 
-At this time, first-class support for Foxbox is provided in English only. Localization into other languages is available on a best-effort basis, with translations provided by community volunteers. Current community supported-languages are:
+## :globe_with_meridians: Localization
 
-- Chinese
-- Japanese
+At this time, first-class support for Foxbox is provided in English only. Localization into other languages is available on a best-effort basis, with translations provided by community volunteers.
 
 Translation support is implemented using [`react-i18next`](https://react.i18next.com).
 

Dockerfile

@@ -17,11 +17,11 @@ EXPOSE 8080
 
 COPY <<EOF /entrypoint.sh
 # Optionally override the default layout with one provided via bind mount
-mkdir -p /foxglove
-touch /foxglove/default-layout.json
+mkdir -p /foxbox
+touch /foxbox/default-layout.json
 index_html=\$(cat index.html)
-replace_pattern='/*FOXGLOVE_STUDIO_DEFAULT_LAYOUT_PLACEHOLDER*/'
-replace_value=\$(cat /foxglove/default-layout.json)
+replace_pattern='/*FOXBOX_STUDIO_DEFAULT_LAYOUT_PLACEHOLDER*/'
+replace_value=\$(cat /foxbox/default-layout.json)
 echo "\${index_html/"\$replace_pattern"/\$replace_value}" > index.html
 
 # Continue executing the CMD

README.md

@@ -1,41 +1,102 @@
-<br/>
+<h1 align="center">FoxBox</h1>
 
 <div align="center">
-    <h1>Foxbox</h1>
-    <a href="https://github.com/foxglove/studio/blob/main/LICENSE"><img src="https://img.shields.io/github/license/foxglove/studio" /></a>
-  <br />
-  <br />
-
-Foxbox is an integrated visualization and diagnosis tool for robotics, available in your browser or as a desktop app on Linux, Windows, and macOS.
+  <a href="https://github.com/bmw-software-engineering/foxbox/stargazers"><img src="https://img.shields.io/github/stars/bmw-software-engineering/foxbox" alt="Stars Badge"/></a>
+  <a href="https://github.com/bmw-software-engineering/foxbox/network/members"><img src="https://img.shields.io/github/forks/bmw-software-engineering/foxbox" alt="Forks Badge"/></a>
+  <a href="https://github.com/bmw-software-engineering/foxbox/pulls"><img src="https://img.shields.io/github/issues-pr/bmw-software-engineering/foxbox" alt="Pull Requests Badge"/></a>
+  <a href="https://github.com/bmw-software-engineering/foxbox/issues"><img src="https://img.shields.io/github/issues/bmw-software-engineering/foxbox" alt="Issues Badge"/></a>
+  <a href="https://github.com/bmw-software-engineering/foxbox/issues"><img src="https://img.shields.io/github/issues/bmw-software-engineering/foxbox" alt="Version"/></a>
+  <a href="https://github.com/bmw-software-engineering/foxbox/graphs/contributors"><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/bmw-software-engineering/foxbox?color=2b9348"></a>
+  <a href="https://github.com/bmw-software-engineering/foxbox/blob/master/LICENSE"><img src="https://img.shields.io/github/license/bmw-software-engineering/foxbox?color=2b9348" alt="License Badge"/></a>
 
+  <br />
+<p  align="center">
+FoxBox is an integrated visualization and diagnosis tool for robotics, available in your browser or as a desktop app on Linux, Windows, and macOS.
+</p>
   <p align="center">
-    <img alt="Foxbox screenshot" src="/resources/screenshot.png">
+    <img alt="Foxbox screenshot" src="resources/screenshot.png">
   </p>
 </div>
 
-<hr />
-<br />
+**Dependencies:**
+
+- [Node.js](https://nodejs.org/en/) v16.10+
+- [Git LFS](https://git-lfs.github.com/)
 
-## Installation
+<hr/>
 
-Foxbox is can be ran locally as a web application by using the command (also available on package.json)
+## :rocket: Getting started
+
+Clone the repository:
 
 ```sh
-yarn run web:serve
+$ git clone https://github.com/bmw-software-engineering/foxbox.git
+```
+
+Pull large files with Git LFS:
+
+```sh
+$ git lfs pull
+```
+
+Enable corepack:
+
+```sh
+$ corepack enable
+```
+
+Install packages from `package.json` :
+
+```sh
+$ yarn install
+```
+
+- If you still get errors about corepack after running `corepack enable`, try uninstalling and reinstalling Node.js. Ensure that Yarn is not separately installed from another source, but is installed _via_ corepack.
+
+Launch the development environment:
+
+```sh
+# To launch the desktop app (run both scripts concurrently):
+$ yarn desktop:serve        # start webpack
+$ yarn desktop:start        # launch electron
+
+# To launch the web app:
+$ yarn run web:serve        # it will be avaiable in http://localhost:8080
+```
+
+## :hammer_and_wrench: Building FoxBox
+
+Build the application for production using these commands:
+
+```sh
+# To build the desktop apps:
+$ yarn run desktop:build:prod   # compile necessary files
+
+- yarn run package:win         # Package for windows
+- yarn run package:darwin      # Package for macOS
+- yarn run package:linux       # Package for linux
+
+# To build the web app:
+$ yarn run web:build:prod
+
+# To build and run the web app using docker:
+$ docker build . -t foxbox
+$ docker run -p 8080:8080 foxbox
+
+# It is possible to clean up build files using the following command:
+$ yarn run clean
 ```
 
-Foxbox will be accessible in your browser at [localhost:8080](http://localhost:8080/).
-It can also be installed by using the desktop aplication versions available on [github releases](https://github.com/bmw-software-engineering/foxbox/tags).
+- The desktop builds are located in the `dist` directory, and the web builds are found in the `web/.webpack` directory.
 
-## Open Source
+## :pencil: License (Open Source)
 
 Foxbox follows an open core licensing model. Most functionality is available in this repository, and can be reproduced or modified per the terms of the [Mozilla Public License v2.0](/LICENSE).
 
-## Contributing
+## :handshake: Contributing
 
-Foxbox is written in TypeScript – contributions are welcome!
-Note: All contributors must agree to our Contributor License Agreement. See [CONTRIBUTING.md](CONTRIBUTING.md) for more details.
+Contributions are welcome! FoxBox is primarily built in TypeScript and ReactJS. All potential contributors must agree to the Contributor License Agreement outlined in [CONTRIBUTING.md](CONTRIBUTING.md).
 
-## Credits
+## :star: Credits
 
-Foxbox originally began as a fork of [FoxGlove Studio](https://github.com/foxglove/studio), an open source project developed by [Foxglove](https://app.foxglove.dev/).
+FoxBox originally began as a fork of [FoxGlove Studio](https://github.com/foxglove/studio), an open source project developed by [Foxglove](https://app.foxglove.dev/).

packages/studio-base/src/providers/CurrentLayoutProvider/defaultLayout.ts

@@ -8,8 +8,8 @@ import { defaultPlaybackConfig } from "@foxglove/studio-base/providers/CurrentLa
 /**
  * Overridden default layout that may have been provided when self-hosting via Docker
  * */
-const staticDefaultLayout = (globalThis as { FOXGLOVE_STUDIO_DEFAULT_LAYOUT?: LayoutData })
-  .FOXGLOVE_STUDIO_DEFAULT_LAYOUT;
+const staticDefaultLayout = (globalThis as { FOXBOX_STUDIO_DEFAULT_LAYOUT?: LayoutData })
+  .FOXBOX_STUDIO_DEFAULT_LAYOUT;
 
 /**
  * This is loaded when the user has no layout selected on application launch

packages/studio-web/src/webpackConfigs.ts

@@ -172,7 +172,7 @@ export const mainConfig =
     </head>
     <script>
       global = globalThis;
-      globalThis.FOXGLOVE_STUDIO_DEFAULT_LAYOUT = [/*FOXGLOVE_STUDIO_DEFAULT_LAYOUT_PLACEHOLDER*/][0];
+      globalThis.FOXBOX_STUDIO_DEFAULT_LAYOUT = [/*FOXBOX_STUDIO_DEFAULT_LAYOUT_PLACEHOLDER*/][0];
     </script>
     <body>
       <div id="root"></div>