chore: add script to generate research file for component (#1587)

docs/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@db-ui/docs",
+  "version": "0.0.0",
+  "description": "Docs folder for DB UX Design System Core.",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/db-ui/mono.git"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "generate:component-research": "node scripts/component-research/generate-component-research.js"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
+}

docs/research/README.md

@@ -0,0 +1,17 @@
+# How to research
+
+If you want to do a research for a new component run this in the `docs` folder:
+
+```shell
+npm run generate:component-research
+```
+
+1. Add the name of your component and a new `.md` file will be created.
+2. Use all links to the design systems to check if the component exists and/or if it has another name. Change the link/name according to this.
+3. You can add a comment as an optional field if you find something special in another design system.
+4. Add a conclusion at the end, which covers similarities and possible problems
+
+You can find more design systems here:
+
+-   <https://component.gallery/>
+-   <https://github.com/alexpate/awesome-design-systems>

docs/scripts/component-research/design-systems.js

@@ -0,0 +1,99 @@
+/**
+ *
+ * @type {[{ name: string, componentUrl: string, url: string}]}
+ */
+export const designSystems = [
+	{
+		name: 'Telekom Scale',
+		url: 'https://github.com/telekom/scale',
+		componentUrl: 'https://telekom.github.io/scale/?path=/docs/components'
+	},
+	{
+		name: 'SBB Lyne',
+		url: 'https://github.com/lyne-design-system/lyne-components',
+		componentUrl:
+			'https://lyne-storybook.app.sbb.ch/?path=/docs/pages-home--docs'
+	},
+	{
+		name: 'SNCF Design System',
+		url: 'https://gitlab.com/SNCF/wcs',
+		componentUrl:
+			'https://designmetier-bootstrap.sncf.fr/docs/4.3/components/alerts/'
+	},
+	{
+		name: 'IBM Carbon',
+		url: 'https://github.com/carbon-design-system/carbon',
+		componentUrl: 'https://carbondesignsystem.com/components/overview/'
+	},
+	{
+		name: 'Material UI',
+		url: 'https://github.com/mui/material-ui',
+		componentUrl: 'https://mui.com/material-ui/react-button/'
+	},
+	{
+		name: 'Porsche Design System',
+		url: 'https://github.com/porsche-design-system/porsche-design-system',
+		componentUrl:
+			'https://designsystem.porsche.com/v3/components/introduction'
+	},
+	{
+		name: 'Washington Post Design System',
+		url: 'https://build.washingtonpost.com/',
+		componentUrl: 'https://build.washingtonpost.com/components/accordion'
+	},
+	{
+		name: 'HP Enterprise Grommet',
+		url: 'https://github.com/grommet/grommet',
+		componentUrl: 'https://v2.grommet.io/components'
+	},
+	{
+		name: 'Shopify Polaris',
+		url: 'https://github.com/Shopify/polaris',
+		componentUrl: 'https://polaris.shopify.com/components/'
+	},
+	{
+		name: 'Atlassian Design System',
+		url: 'https://bitbucket.org/atlassian/atlaskit/src/master/',
+		componentUrl: 'https://atlassian.design/components/'
+	},
+	{
+		name: 'GitHub Primer',
+		url: 'https://github.com/primer/css',
+		componentUrl: 'https://primer.style/design/components/'
+	},
+	{
+		name: 'MongoDB.design',
+		url: 'https://github.com/mongodb/design',
+		componentUrl: 'https://www.mongodb.design/component/button/example/'
+	},
+	{
+		name: 'GitLab Pajamas',
+		url: 'https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com',
+		componentUrl: 'https://design.gitlab.com/components/overview'
+	},
+	{
+		name: 'Telefonica Mistica',
+		url: 'https://github.com/Telefonica/mistica-web',
+		componentUrl:
+			'https://brandfactory.telefonica.com/d/iSp7b1DkYygv/n-a#/components/overview'
+	},
+	{
+		name: 'Bootstrap',
+		url: 'https://github.com/twbs/bootstrap',
+		componentUrl: 'https://getbootstrap.com/docs/4.3/components/alerts/'
+	}
+].sort((a, b) => {
+	const nameA = a.name.toUpperCase(); // ignore upper and lowercase
+	const nameB = b.name.toUpperCase(); // ignore upper and lowercase
+	if (nameA < nameB) {
+		return -1;
+	}
+
+	if (nameA > nameB) {
+		return 1;
+	}
+
+	return 0;
+});
+
+export default designSystems;

docs/scripts/component-research/generate-component-research.js

@@ -0,0 +1,46 @@
+/* eslint-disable unicorn/prefer-top-level-await */
+
+import FS from 'node:fs';
+import inquirer from 'inquirer';
+import designSystems from './design-systems.js';
+
+inquirer
+	.prompt([
+		{
+			type: 'input',
+			message: 'Enter the name of the component',
+			name: 'name',
+			validate(answer) {
+				if (answer.length === 0) {
+					return 'Please provide a valid name';
+				}
+
+				return true;
+			}
+		}
+	])
+
+	.then(({ name }) => {
+		const path = `./research/${name}.md`;
+		let fileContent = `# DEV Research ${name}
+
+## Overview
+
+| Design System | Component |  Comment |
+| ------------- | :-------: |  ------- |
+`;
+
+		for (const designSystem of designSystems) {
+			fileContent += `| [${designSystem.name}](${designSystem.url}) |`;
+			fileContent += ` [${name}](${designSystem.componentUrl}) / ❌ | -- |\n`;
+		}
+
+		fileContent += `## Conclusion
+
+		TODO: Add your findings here
+		`;
+
+		if (!FS.existsSync(path)) {
+			FS.writeFileSync(path, fileContent);
+		}
+	});