build: added dev server for ui kit development (#3720)

* chore: speedup creating components in ui-kit

* chore: updated stylelint config

* build: introduced dev server for ui kit

dokka-subprojects/plugin-base-frontend/README.md

@@ -0,0 +1,42 @@
+### How to use frontend dev-server:
+
+0. Prebuild Dokka's output for the ui-showcase project:
+
+```bash
+# Remove previous build
+rm -rf dokka-integration-tests/gradle/build/ui-showcase-result
+# Set output path
+export DOKKA_TEST_OUTPUT_PATH='build/ui-showcase-result'
+# Run gradle task
+./gradlew :dokka-integration-tests:gradle:testUiShowcaseProject
+ ```
+
+<small> For this repetitive sequence of tasks, it could be convenient to create an alias in the bash profile, something like:</small>
+
+```bash
+alias dokkabuild="rm -rf dokka-integration-tests/gradle/build/ui-showcase-result && export DOKKA_TEST_OUTPUT_PATH='build/ui-showcase-result' && ./gradlew :dokka-integration-tests:gradle:testUiShowcaseProject"
+```
+<small>and then rerun only `dokkabuild`command in terminal</small>
+
+1. Go to the plugin-base-frontend directory:
+```bash 
+cd dokka-subprojects/plugin-base-frontend
+```
+2. Run dev server for ui kit:
+```bash
+npm run start:ui-kit
+```
+
+3. Open the browser and go to http://localhost:8001
+
+The dev server will watch for changes in the `plugin-base-frontend/` and rebuild the `ui-showcase` project automatically.
+However, for the changes in html structure produced by kotlin templates one needs to rerun `dokkabuild` manually while there is no need to restart the dev server.
+
+
+### How to create a new UI kit component:
+
+1. Run `npm run create-component -- <component-name-in-kebab-case>`
+
+    It will create all necessary files templates in `src/main/ui-kit/` directory and import them in `src/main/ui-kit/index.ts` and `src/main/ui-kit/index.scss` files.
+
+2. Export component manually from `src/main/ui-kit/index.ts` file to make in available for webpack

dokka-subprojects/plugin-base-frontend/create-component.mjs

@@ -0,0 +1,65 @@
+import fs from 'fs';
+
+const firstLetterToLoweCase = str => str.charAt(0).toLowerCase() + str.slice(1);
+
+const kebabToCamelCase = str => str.replace(/-./g, x => x.toUpperCase()[1]);
+
+const uiKitPath = 'src/main/ui-kit';
+const componentName = process.argv[2];
+const componentPath = `${uiKitPath}/${componentName}`;
+const lowerCaseComponentName = firstLetterToLoweCase(componentName);
+const lowerCaseComponentNameCamelCase = firstLetterToLoweCase(kebabToCamelCase(componentName));
+
+const uiKitIndexTsFile = `${uiKitPath}/index.ts`;
+const uiKitIndexScssFile = `${uiKitPath}/index.scss`;
+const componentIndexTsFile = `${componentPath}/index.ts`;
+const componentScssFile = `${componentPath}/styles.scss`;
+
+const currentYear = new Date().getFullYear();
+
+const componentIndexTsFileContent = `/*
+ * Copyright 2014-${currentYear} JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+
+import './styles.scss';
+`;
+
+const componentScssFileContent = `/*!
+ * Copyright 2014-${currentYear}  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+@import '../tokens/index';
+
+.${lowerCaseComponentName} {
+}
+`;
+
+const uiKitIndexTsFileContent = `import * as ${lowerCaseComponentNameCamelCase} from './${componentName}/index';
+`;
+
+const uiKitIndexScssFileContent = `@import './${componentName}/styles';
+`;
+
+
+fs.mkdir(componentPath, error => {
+  if (error) {
+    throw error;
+  }
+
+  const pathToContentMap = {
+    [componentIndexTsFile]: componentIndexTsFileContent,
+    [componentScssFile]: componentScssFileContent,
+    [uiKitIndexTsFile]: uiKitIndexTsFileContent,
+    [uiKitIndexScssFile]: uiKitIndexScssFileContent,
+  };
+
+  Object.keys(pathToContentMap).forEach((path) => {
+    fs.appendFile(path, pathToContentMap[path], function (err) {
+      if (err) {
+        return console.error(err);
+      }
+      console.log(`${path} updated successfully`);
+    });
+  });
+
+  console.log(`Component ${componentPath} created successfully`);
+});