# Adding a New Component to open.INC-Stack
## Overview
In this guide, we will walk through the steps to add a new component or a plugin to the open.INC-Stack framework. Components in open.INC-Stack are modular units that provide specific functionality to the application or new User Interfaces.
## Prerequisites
Before you begin, make sure you have the following:
- A basic understanding of open.INC-Stack architecture
- Development environment set up with the necessary tools and dependencies
## Steps
1. **Create a new component folder**: Start by creating a new folder for your component in the appropriate location within the open.INC-Stack project structure (e.g. src/js/components).
2. **Define the component**: Inside the component folder, create a new file to define the component. E.g.:
```JAVASCRIPT
import { AppFactory, AppPluginInterface } from "@opendash/core";
export interface Options {
testOption: string;
}
export class TestPlugin implements AppPluginInterface {
name: string = "TestPlugin";
private options: Partial<Options> = {};
constructor(options?: Partial<Options>) {
this.options = options || {};
}
async onFactory(factory: AppFactory) {}
}
```
3. **Register NavigationItems**: Inside the AppFactory you can register routes and add NavigationItems.
```JAVASCRIPT
factory.registerRoute({
path: "/test/start",
props: this.options, //optional
component: async () => ({ default: TestComponent }), //Link a Component
});
factory.registerStaticNavigationItem({
id: "test/start",
place: "frontpage",
group: "test",
order: 11,
color: "#676767",
label: "Test",
icon: "fa:wrench",
link: "/test/start",
routeCondition: "**",
activeCondition: "/test",
});
```
4. **Register Translations**: Use Translation to support multiple Language in your Plugin. Inside the factory:
```JAVASCRIPT
factory.registerTranslationResolver(
"en",
"test", //Namespace
async () => await import("./translations/en.json")
);
factory.registerTranslationResolver(
"de",
"test", //Namespace
async () => await import("./translations/de.json")
);
```
5. **Configure the component**: Update the Instance index.ts file to include the newly added component. This ensures that the component is properly integrated into the application.
```JAVASCRIPT
await factory.use(new TestPlugin());
```
6. **Document the component**: Update open.DOCs to include information about the newly added component. This should include details about its purpose, usage, and any specific configuration options or dependencies.
## Conclusion
By following these steps, you can successfully add a new component to the open.INC-Stack framework. Remember to follow best practices and adhere to the project's coding guidelines throughout the process.
For more information, refer to the open.INC-Stack documentation and consult with the project community if you have any questions or need further assistance.