docs: update plugin development tutorial to include CLI setup instruc… (#146)

* docs: update plugin development tutorial to include CLI setup instructions and remove outdated boilerplate code

* docs: update upload plugin tutorial to enhance preview image size configuration with detailed settings

Author: SerVitasik

adminforth/documentation/docs/tutorial/05-Plugins/05-upload.md

@@ -1,5 +1,3 @@
-
-
 # Upload
 
 This plugin allows you to upload files to Amazon S3 bucket.
@@ -305,7 +303,7 @@ new UploadPlugin({
 });
 ```
 
-### Max-width for preview image
+### Preview Image Size Configuration
 
 You can set the maximum width for the preview image in the `./resources/apartments.ts` file by adding the `maxWidth` property to the `preview` configuration:
 
@@ -322,8 +320,18 @@ You can set the maximum width for the preview image in the `./resources/apartmen
     s3Path: ({originalFilename, originalExtension, contentType}) => 
       `aparts/${new Date().getFullYear()}/${uuid()}-${originalFilename}.${originalExtension}`,
     preview: {
-      //diff-add
-      maxWidth: '200px', // Set the maximum width for the preview image
+      // Global width settings (applies to all views if specific view settings not provided)
+      maxWidth: '200px',  // Maximum width for preview images
+      minWidth: '200px',  // Minimum width for preview images
+
+      // List view specific settings
+      maxListWidth: '300px',  // Maximum width in list view
+      minListWidth: '100px',  // Minimum width in list view
+
+      // Show/detail view specific settings
+      maxShowWidth: '200px',  // Maximum width in show view
+      minShowWidth: '200px',  // Minimum width in show view
+    
       ...
     }
 

adminforth/documentation/docs/tutorial/06-Advanced/01-plugin-development.md

@@ -21,112 +21,28 @@ Let's create plugin which auto-completes text in strings
 ```bash
 mkdir -p af-plugin-chatgpt
 cd af-plugin-chatgpt
-npm init -y
-touch index.ts
-npm i typescript @types/node -D
-```
-
-Edit `package.json`:
-
-```json title='./af-plugin-chatgpt/package.json'
-{
-  ...
-//diff-remove
-  "main": "index.js",
-//diff-add
-  "main": "dist/index.js",
-//diff-add
-  "types": "dist/index.d.ts",
-//diff-add
-  "type": "module",
-  "scripts": {
-//diff-remove
-    "test": "echo \"Error: no test specified\" && exit 1",
-//diff-add
-    "build": "tsc && rsync -av --exclude 'node_modules' custom dist/ && npm version patch"
-  },
-}
-```
-
-
-Install AdminForth for types and classes imports:
-
-```bash
-npm i adminforth --save
-```
-
-Now create plugin boilerplate in `index.ts`:
-
-```ts title='./af-plugin-chatgpt/index.ts'
-
-import { AdminForthPlugin } from "adminforth";
-import type { IAdminForth, IHttpServer, AdminForthResourcePages, AdminForthResourceColumn, AdminForthDataTypes, AdminForthResource } from "adminforth";
-import type { PluginOptions } from './types.js';
-
-
-export default class ChatGptPlugin extends AdminForthPlugin {
-  options: PluginOptions;
-
-  constructor(options: PluginOptions) {
-    super(options, import.meta.url);
-    this.options = options;
-  }
-
-  async modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
-    super.modifyResourceConfig(adminforth, resourceConfig);
-  
-    // simply modify resourceConfig or adminforth.config. You can get access to plugin options via this.options;
-  }
-  
-  validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
-    // optional method where you can safely check field types after database discovery was performed
-  }
-
-  instanceUniqueRepresentation(pluginOptions: any) : string {
-    // optional method to return unique string representation of plugin instance. 
-    // Needed if plugin can have multiple instances on one resource 
-    return `single`;
-  }
-
-  setupEndpoints(server: IHttpServer) {
-    server.endpoint({
-      method: 'POST',
-      path: `/plugin/${this.pluginInstanceId}/example`,
-      handler: async ({ body }) => {
-        const { name } = body;
-        return { hey: `Hello ${name}` };
-      }
-    });
-  }
-
-}
+npx adminforth create-plugin
 ```
 
-Create `types.ts` file:
+CLI options:
 
-```ts title='./af-plugin-chatgpt/types.ts'
-
-export interface PluginOptions {
-  
-}
-```
+* **`--plugin-name`** - name for your plugin.
 
+This command will:
+1. Set up the TypeScript configuration
+2. Create initial plugin files
+3. Install required dependencies
 
-Create `./af-plugin-chatgpt/tsconfig.json` file:
+The CLI will create the following files and directories:
 
-```json title='./af-plugin-chatgpt/tsconfig.json'
-{
-  "compilerOptions": {
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include*/ 
-    "module": "node16",                                /* Specify what module code is generated. */
-    "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules.  */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
-    "strict": false,                                     /* Enable all strict type-checking options. */
-    "skipLibCheck": true,                                 /* Skip type checking all .d.ts files. */
-  },
-  "exclude": ["node_modules", "dist", "custom"],           /* Exclude files from compilation. */
-}
+```text
+af-plugin-chatgpt/
+├── custom
+│   └── tsconfig.json     # TypeScript configuration for custom components
+├── index.ts              # Main plugin file with boilerplate code
+├── package.json          # Plugin package configuration
+├── tsconfig.json         # TypeScript configuration
+└── types.ts              # TypeScript types for your plugin
 
 ```
 
@@ -204,37 +120,6 @@ export interface PluginOptions {
 }
 ```
 
-Now we have to create custom Vue component which will be used in plugin. To do it create custom folder:
-
-```bash
-mkdir -p af-plugin-chatgpt/custom
-```
-
-Also create `tsconfig.ts` file so your IDE will be able to resolve adminforth spa imports: 
-
-```json title='./af-plugin-chatgpt/custom/tsconfig.json'
-{
-  "compilerOptions": {
-    "baseUrl": ".", // This should point to your project root
-    "paths": {
-      "@/*": [
-        // "node_modules/adminforth/dist/spa/src/*"
-        "../../../spa/src/*"
-      ],
-      "*": [
-        // "node_modules/adminforth/dist/spa/node_modules/*"
-        "../../../spa/node_modules/*"
-      ],
-      "@@/*": [
-        // "node_modules/adminforth/dist/spa/src/*"
-        "."
-      ]
-    }
-  }
-}
-```
-
-
 We will use `vue-suggestion-input` package in our frontend component. 
 To install package into frontend component, first of all we have to initialize npm package in custom folder:
 
@@ -535,7 +420,7 @@ Finally, since we want to support multiple installations on one resource (e.g. o
 ```
 
 
-Ro compile plugin run:
+To compile plugin run:
 
 ```bash
 npm run build