Add documentation for plugin development (#242)

* Add basic plugin documentation

* Add documentation for plugin development

* Fix typos

* Add SDK docs

* Rename sdk docs

* Minor doc improvements

* Improve first paragraph

* Fix documentation links

README.md

@@ -103,3 +103,9 @@ server {
 
 Now ensure that storybook is running via `npm run storybook`.
 Finally you can access it under `{your-domain/storybook}`
+
+## Documentation Overview
+
+- [Installation](./doc/01_Installation.md)
+- [Getting started with your first plugin](./doc/05_Plugins/README.md)
+- [SDK Overview](./doc/07_SDK_Overview/README.md)

doc/05_Plugins/01_Register_a_tab_for_a_folder_asset.md

@@ -0,0 +1,64 @@
+# How to register a new tab for a folder asset
+
+In this guide we want to add a new tab for a folder asset. Let's take our [basic plugin](./README.md) as starting point. 
+
+First of all let's create a new module that takes care of the registration of a new tab.
+
+`./modules/asset/folder-tab-extension.tsx`:
+``` typescript
+import React from 'react'
+import { type AbstractModule, Icon, type FolderTabManager, container, serviceIds } from 'pimcore-studio-ui'
+import { MyFirstTabComponent } from './components/my-first-tab-component';
+
+export const FolderTabExtension: AbstractModule = {
+  onInit: (): void => {
+    const tabManager = container.get<FolderTabManager>(serviceIds['Asset/Editor/FolderTabManager'])
+
+    tabManager.register({
+      children: <MyFirstTabComponent />,
+      icon: <Icon name={ 'camera' } />,
+      key: 'my-first-tab-component',
+      label: '1. tab component'
+    })
+  }
+}
+```
+
+In our example we are importing the `MyFirstTabComponent` as the content for our new registered tab. Let's create it:
+
+`./modules/asset/components/my-first-tab-component.tsx`:
+``` typescript
+import React from 'react';
+
+export const MyFirstTabComponent = (): React.JSX.Element => {
+  return (
+    <div>
+      <h1>My First Tab</h1>
+      <p>This is a simple tab component.</p>
+    </div>
+  )
+}
+```
+
+And last but not least we have to register our newly created module:
+
+`./main.ts`
+``` typescript
+import { Pimcore } from 'pimcore-studio-ui'
+import { FolderTabExtension } from './modules/assets/folder-tab-extension'
+
+Pimcore.pluginSystem.registerPlugin({
+  name: 'pimcore-plugin',
+
+  // register modules here
+  onStartup: ({ moduleSystem }): void => {
+    moduleSystem.registerModule(FolderTabExtension)
+  }
+})
+```
+
+That's it! Our new tab is now rendered in our Pimcore Studio UI.
+
+
+
+

doc/05_Plugins/02_Adding_custom_icons.md

@@ -0,0 +1,56 @@
+# How to add custom icons
+
+In this guide we want add a completely new icon to Pimcore Studio UI. Let's take our [Folder tab plugin](./01_Register_a_tab_for_a_folder_asset.md) as starting point. 
+
+We could use any kind of icon library like Font Awesome or comparable. But let's assume we want to add a custom one:
+
+`./icons/my-rocket.inline.svg`
+``` html
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M12 15L9 12M12 15C13.3968 14.4687 14.7369 13.7987 16 13M12 15V20C12 20 15.03 19.45 16 18C17.08 16.38 16 13 16 13M9 12C9.53214 10.6194 10.2022 9.29607 11 8.05C12.1652 6.18699 13.7876 4.65305 15.713 3.5941C17.6384 2.53514 19.8027 1.98637 22 2C22 4.72 21.22 9.5 16 13M9 12H4C4 12 4.55 8.97 6 8C7.62 6.92 11 8 11 8M4.5 16.5C3 17.76 2.5 21.5 2.5 21.5C2.5 21.5 6.24 21 7.5 19.5C8.21 18.66 8.2 17.37 7.41 16.59C7.02131 16.219 6.50929 16.0046 5.97223 15.988C5.43516 15.9714 4.91088 16.1537 4.5 16.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+```
+
+In the current version of our plugin we are rendering a already known camera icon of Pimcore Studio. Let's replace it with our rocket:
+
+`./modules/asset/folder-tab-extension.tsx`:
+``` typescript
+import React from 'react'
+import { type AbstractModule Icon, type FolderTabManager, container, serviceIds, type IconLibrary } from 'pimcore-studio-ui'
+import { MyFirstTabComponent } from './components/my-first-tab-component';
+import MyRocket from './../../icons/my-rocket.inline.svg'
+
+export const FolderTabExtension: AbstractModule = {
+  onInit: (): void => {
+    const iconLibrary = container.get<IconLibrary>(serviceIds.iconLibrary)
+
+    // register your new icon here
+    iconLibrary.register({
+      name: 'my-rocket',
+      component: MyRocket
+    })
+
+    const tabManager = container.get<FolderTabManager>(serviceIds['Asset/Editor/FolderTabManager'])
+
+    tabManager.register({
+      children: <MyFirstTabComponent />,
+      icon: <Icon name={ 'my-rocket' } />, // tell the tab manager to use our new icon
+      key: 'my-first-tab-component',
+      label: '1. tab component'
+    })
+  }
+}
+```
+
+We are using `@svgr/webpack` to directly convert a loaded svg file to a react component. So please make sure that you have it installed like mentioned in our [basic plugin](./README.md) example. Also, TypeScript does not know how to handle our svg-import, yet. Let's add a simple declaration file for that:
+
+`./types/svg.d.ts`
+``` typescript
+declare module '*.svg' {
+  import type React from 'react'
+  const SVG: React.FC<React.SVGProps<SVGSVGElement>>
+  export default SVG
+}
+```
+
+That's it! Compile your plugin and take a look at our newly added icon!

doc/05_Plugins/03_Add_your_first_widget.md

@@ -0,0 +1,81 @@
+# How to add your first widget
+
+In this guide we want to add a new bottom widget when a user clicks a button. Let's take our [Folder tab plugin](./01_Register_a_tab_for_a_folder_asset.md) as starting point. 
+
+A widget is just a simple react component. So, let's create one:
+
+`./modules/asset/widgets/my-first-widget.tsx`
+``` typescript
+import React from 'react';
+
+export const MyFirstWidget = (): React.JSX.Element => {
+  return (
+    <div>
+      <h1>My First Widget</h1>
+      <p>This is a simple widget component.</p>
+    </div>
+  );
+}
+```
+
+Now, with the react component defined - we have to tell Pimcore Studio to handle it as a widget:
+
+`./modules/asset/folder-tab-extension.tsx`:
+``` typescript
+import React from 'react'
+import { type AbstractModule Icon, type FolderTabManager, container, serviceIds, WidgetRegistry } from 'pimcore-studio-ui'
+import { MyFirstTabComponent } from './components/my-first-tab-component';
+import { MyFirstWidget } from './widgets/my-first-widget';
+
+export const FolderTabExtension: AbstractModule = {
+  onInit: (): void => {
+    // registration of our new widget
+    const widgetManager = container.get<WidgetRegistry>(serviceIds.widgetManager)
+
+    widgetManager.registerWidget({
+      name: 'my-first-widget',
+      component: MyFirstWidget
+    })
+
+    const tabManager = container.get<FolderTabManager>(serviceIds['Asset/Editor/FolderTabManager'])
+
+    tabManager.register({
+      children: <MyFirstTabComponent />,
+      icon: <Icon name={ 'camera' } />,
+      key: 'my-first-tab-component',
+      label: '1. tab component'
+    })
+  }
+}
+```
+
+Last but not least we have to open up the widget via button click. For that let's extend our tab component:
+
+`./modules/asset/components/my-first-tab-component.tsx`:
+``` typescript
+import React from 'react';
+import { Button } from 'antd';
+import { useWidgetManager } from 'pimcore-studio-ui';
+
+export const MyFirstTabComponent = (): React.JSX.Element => {
+  const widgetManager = useWidgetManager();
+
+  function onClick(): void {
+    widgetManager.openBottomWidget({
+      name: 'My first widget',
+      component: 'my-first-widget',
+    });
+  }
+
+  return (
+    <div>
+      <h1>My First Tab</h1>
+      <p>This is a simple tab component.</p>
+
+      <Button type="primary" onClick={onClick}>Open up my first widget</Button>
+    </div>
+  );
+}
+```
+
+That's it! We can now open up our first widget via button click.