docs(Contribution Guide): update legacy type definition handling (#2048)

packages/dnb-design-system-portal/src/docs/contribute/faq.mdx

@@ -61,8 +61,3 @@ Run `yarn workspace dnb-design-system-portal build-visual-test`
 
 - Try cleaning cache: `yarn workspace dnb-design-system-portal gatsby clean`
 - Try running `yarn build` again
-
-## I get an error importing other components in my .tsx file
-
-You might get an error importing .js files in typescript files.
-Then you have to extract their typescript files .d.ts by changing _included files_ in `generateTypes.js` and then run `yarn build:types:dev`.

packages/dnb-design-system-portal/src/docs/contribute/first-contribution/before-started.mdx

@@ -79,18 +79,22 @@ All you need to do to add a new page is to create a new markdown (`.md`) file wi
 
 ### About Types
 
-As of now, the TypeScript types are mainly generated during the package build step on the CI. The two main purposes of delivering TypeScript types are:
+The two main purposes of delivering TypeScript types are:
 
 - Inline property documentation
 - Property validation and type safety
 
-While the documentation, including the property tables, have to be kept in Markdown Tables, they get extracted, parsed, and inserted in the type definition files.
+As of now, some components are written in TypeScript (`.tsx`) and some in JavaScript and type definition files (`.d.ts`).
 
-#### Manual type definitions
+#### Legacy type handling
 
-If a `*.d.ts` file is included in the source code, it will not be overwritten. But the documentation part about property types will still be inserted during the build.
+For JavaScript based components, the documentation for properties (`properties.mdx`) is kept as a Markdown Table, they get extracted, parsed, and inserted in the type definition files.
 
-#### Sharing PropTypes between components
+You can still sync/update the documentation of these files (`d.ts`), by running: `yarn @dnb/eufemia build:types:docs`
+
+**NB:** After you have synced/updated the files, you will see that some newlines where removed. Thats a negative side-effect we have no solution at the moment.
+
+#### Sharing PropTypes between components (legacy)
 
 You can share PropTypes between files. You can either export them explicitly (named export):
 
@@ -153,7 +157,7 @@ There are a couple of components doing so. You may have a look at:
 
 **NB:** In order to activate the type generation, a component needs to import the `prop-types` dependency.
 
-#### Shared Properties docs
+#### Shared Properties docs (legacy)
 
 If you have one `/properties.md` file, but e.g. two components share most or all of the properties. Like a component and a provider for that component (Accordion and AccordionProvider) – then you can define in the markdown table header name both of the components: You can then provide a second table with a more specific table for a second component.
 
@@ -170,10 +174,6 @@ If you have one `/properties.md` file, but e.g. two components share most or all
 | `expanded_id`                | _(optional)_ expanded_id docs. |
 ```
 
-#### Local development
-
-You can either run `yarn build:types` to generate type for all files, or use `yarn build:types:dev` to only build a certain and custom defined amount of files. Have a look at the `const isOfInterest = ...` part in `generateTypes.js`.
-
 ## About component structure
 
 Eufemia has a couple of common parts, so every component behaves consistent:

packages/dnb-eufemia/package.json

@@ -34,7 +34,7 @@
     "build:packages": "./scripts/postbuild/build-packages.sh",
     "build:prebuild": "babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/runPrepub.js",
     "build:resources": "babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/resources/makeResourcesPackage.js",
-    "build:types": "./scripts/prebuild/generate-types-docs.sh",
+    "build:types:docs": "./scripts/prebuild/generate-types-docs.sh",
     "build:types:generate": "./scripts/prebuild/generate-types.sh",
     "build:types:definitions": "yarn tsc --project tsconfig.definitions.json",
     "build:types:dev": "nodemon --exec 'babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/generateTypes.js' --ext js --watch './src/**/*' --watch './scripts/**/*'",

packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/__snapshots__/generateTypes.test.js.snap

@@ -44,10 +44,6 @@ export default class PrimaryComponent extends React.Component<
 exports[`generateTypes has to match SecondaryComponent snapshot 1`] = `
 "import * as React from 'react';
 export type ElementSecondary = string | number | boolean;
-
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
 export interface ElementProps extends React.HTMLProps<HTMLElement> {
   secondary?: ElementSecondary;
   children?: React.ReactNode;

packages/dnb-eufemia/scripts/prebuild/tasks/generateTypes.js

@@ -55,9 +55,19 @@ export const createTypes = async (
   { isTest = false, ...opts } = {}
 ) => {
   try {
-    const prettierrc = await prettier.resolveConfig()
-    prettierrc.semi = true
-    prettierrc.trailingComma = 'none'
+    const prettierrc = await fs.readJSON(
+      nodePath.resolve('./.prettierrc'),
+      'utf-8'
+    )
+
+    // "prettier.format" does not handle "overwrites", so we merge it manually
+    prettierrc.overrides.forEach(({ files, options }) => {
+      if (new RegExp(`.${files}`).test('file.d.ts')) {
+        for (const key in options) {
+          prettierrc[key] = options[key]
+        }
+      }
+    })
 
     return await asyncForEach(listOfAllFiles, async (file) => {
       if (!isTest && file.includes('__tests__')) {
@@ -187,7 +197,7 @@ export const createTypes = async (
                   babelPluginIncludeDocs,
                   {
                     docs,
-                    insertLeadingComment: true,
+                    insertLeadingComment: false,
                     onComplete: !unsureSituation
                       ? warnAboutMissingPropTypes
                       : null,
@@ -203,7 +213,7 @@ export const createTypes = async (
 
         definitionContent = prettier.format(definitionContent, {
           ...prettierrc,
-          filepath: destFile,
+          filepath: 'file.d.ts',
         })
 
         if (isTest) {