Update README ad CONTRIBUTING files

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 />
+  <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/).

benchmark/webpack.config.ts

@@ -92,7 +92,7 @@ const mainConfig = (env: unknown, argv: WebpackArgv): Configuration => {
   <html>
     <head>
       <meta charset="utf-8">
-      <title>FoxBox Benchmark</title>
+      <title>Foxbox Benchmark</title>
     </head>
     <script>
       global = globalThis;

packages/studio-base/src/components/AppBar/index.tsx

@@ -16,7 +16,7 @@ import { useTranslation } from "react-i18next";
 import tc from "tinycolor2";
 import { makeStyles } from "tss-react/mui";
 
-import { FoxBoxLogo } from "@foxglove/studio-base/components/FoxBoxLogo";
+import { FoxboxLogo } from "@foxglove/studio-base/components/FoxboxLogo";
 import Stack from "@foxglove/studio-base/components/Stack";
 import { useAppContext } from "@foxglove/studio-base/context/AppContext";
 import {
@@ -208,7 +208,7 @@ export function AppBar(props: AppBarProps): JSX.Element {
                   setAppMenuEl(event.currentTarget);
                 }}
               >
-                <FoxBoxLogo fontSize="inherit" color="inherit" />
+                <FoxboxLogo fontSize="inherit" color="inherit" />
                 <ChevronDown12Regular
                   className={classes.dropDownIcon}
                   primaryFill={theme.palette.common.white}

packages/studio-base/src/components/AppSettingsDialog/AppSettingsDialog.tsx

@@ -30,7 +30,7 @@ import OsContextSingleton from "@foxglove/studio-base/OsContextSingleton";
 import CopyButton from "@foxglove/studio-base/components/CopyButton";
 import { ExperimentalFeatureSettings } from "@foxglove/studio-base/components/ExperimentalFeatureSettings";
 import ExtensionsSettings from "@foxglove/studio-base/components/ExtensionsSettings";
-import FoxBoxLogoText from "@foxglove/studio-base/components/FoxBoxLogoText";
+import FoxboxLogoText from "@foxglove/studio-base/components/FoxboxLogoText";
 import Stack from "@foxglove/studio-base/components/Stack";
 import { useAppContext } from "@foxglove/studio-base/context/AppContext";
 import {
@@ -315,10 +315,10 @@ export function AppSettingsDialog(
           >
             <Stack gap={2} alignItems="flex-start">
               <header>
-                <FoxBoxLogoText color="primary" className={classes.logo} />
+                <FoxboxLogoText color="primary" className={classes.logo} />
               </header>
               <Stack direction="row" alignItems="center" gap={1}>
-                <Typography variant="body2">FoxBox version {FOXGLOVE_STUDIO_VERSION}</Typography>
+                <Typography variant="body2">Foxbox version {FOXGLOVE_STUDIO_VERSION}</Typography>
                 <CopyButton
                   size="small"
                   getText={() => FOXGLOVE_STUDIO_VERSION?.toString() ?? ""}

packages/studio-base/src/components/DataSourceDialog/Start.tsx

@@ -9,7 +9,7 @@ import tinycolor from "tinycolor2";
 import { makeStyles } from "tss-react/mui";
 
 import { DataSourceDialogItem } from "@foxglove/studio-base/components/DataSourceDialog/DataSourceDialog";
-import FoxBoxLogoText from "@foxglove/studio-base/components/FoxBoxLogoText";
+import FoxboxLogoText from "@foxglove/studio-base/components/FoxboxLogoText";
 import Stack from "@foxglove/studio-base/components/Stack";
 import TextMiddleTruncate from "@foxglove/studio-base/components/TextMiddleTruncate";
 import { useAnalytics } from "@foxglove/studio-base/context/AnalyticsContext";
@@ -356,7 +356,7 @@ export default function Start(): JSX.Element {
   return (
     <Stack className={classes.grid}>
       <header className={classes.header}>
-        <FoxBoxLogoText color="primary" className={classes.logo} />
+        <FoxboxLogoText color="primary" className={classes.logo} />
       </header>
       <Stack className={classes.content}>
         <Stack gap={4}>

packages/studio-base/src/components/DocumentTitleAdapter.tsx

@@ -19,12 +19,12 @@ export default function DocumentTitleAdapter(): JSX.Element {
 
   useEffect(() => {
     if (!playerName) {
-      window.document.title = "FoxBox";
+      window.document.title = "Foxbox";
       return;
     }
     window.document.title = navigator.userAgent.includes("Mac")
       ? playerName
-      : `${playerName} – FoxBox`;
+      : `${playerName} – Foxbox`;
   }, [playerName]);
 
   return <></>;

packages/studio-base/src/components/FoxBoxLogo.tsx → packages/studio-base/src/components/FoxboxLogo.tsx

@@ -4,10 +4,10 @@
 
 import { SvgIcon, SvgIconProps } from "@mui/material";
 
-export function FoxBoxLogo(props: SvgIconProps): JSX.Element {
+export function FoxboxLogo(props: SvgIconProps): JSX.Element {
   return (
     <SvgIcon viewBox="0 0 512 512" {...props}>
-      <title>FoxBox</title>
+      <title>Foxbox</title>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="currentColor"

packages/studio-base/src/components/FoxBoxLogoText.tsx → packages/studio-base/src/components/FoxboxLogoText.tsx

@@ -4,10 +4,10 @@
 
 import { SvgIcon, SvgIconProps } from "@mui/material";
 
-export default function FoxBoxLogoText(props: SvgIconProps): JSX.Element {
+export default function FoxboxLogoText(props: SvgIconProps): JSX.Element {
   return (
     <SvgIcon viewBox="0 0 909 204" {...props}>
-      <title>FoxBox</title>
+      <title>Foxbox</title>
       <g>
         <svg
           width="909"

packages/studio-base/src/i18n/en/appSettings.ts

@@ -8,7 +8,7 @@ export const appSettings = {
   askEachTime: "Ask each time",
   colorScheme: "Color scheme",
   dark: "Dark",
-  debugModeDescription: "Enable panels and features for debugging FoxBox",
+  debugModeDescription: "Enable panels and features for debugging Foxbox",
   desktopApp: "Desktop app",
   displayTimestampsIn: "Display timestamps in",
   experimentalFeatures: "Experimental features",

packages/studio-base/src/i18n/en/incompatibleLayoutVersion.ts

@@ -4,7 +4,7 @@
 
 export const incompatibleLayoutVersion = {
   desktopText:
-    "This layout was created with a newer version of FoxBox. Please update to the latest version at ",
+    "This layout was created with a newer version of Foxbox. Please update to the latest version at ",
   title: "Incompatible layout version",
-  webText: "This layout was created with a newer version of FoxBox. Please refresh your browser.",
+  webText: "This layout was created with a newer version of Foxbox. Please refresh your browser.",
 };

packages/studio-base/src/i18n/en/openDialog.ts

@@ -4,15 +4,15 @@
 
 export const openDialog = {
   canBeShared: "Share data files, visualization layouts, and custom extensions with teammates",
-  collaborateTitle: "Accelerate development with FoxBox Data Platform",
+  collaborateTitle: "Accelerate development with Foxbox Data Platform",
   convenientWebInterface:
     "Use a convenient web interface to tag, search, and retrieve data at lightning speed",
   createAFreeAccount: "Create a free account",
   exploreSampleData: "Explore sample data",
   learnMore: "Learn more",
   needHelp: "Need help?",
   needHelpDescription: "View our documentation, or check out the tutorials on the Foxglove blog.",
-  newToFoxgloveStudio: "New to FoxBox?",
+  newToFoxgloveStudio: "New to Foxbox?",
   newToFoxgloveStudioDescription:
     "Start by exploring a sample dataset or checking out our documentation.",
   openAGitHubIssue: "Open a GitHub issue",