Refactor: Rewrite loaders folder in typescript (#1485)

* ts highlight

* ts highlightCode md

* ts noAutoLink

* ts slugger

* ts remove Doclets

* ts sortProps

* ts getName from filepath

* ts chunkiy

* fix props loader

* ts filter components examples

* ts requireIt

* ts expand default component

* ts getast

* ts getAllContentPages

* ts getComponentFiles

* ts get files from sections

* ts get patterns from section

* ts getExamples

* ts getImports

* ts getComponents

* ts getComponents

* ts getSctions

* ts getProps

* before starting the loaders

* update hasExamples type

* update types

* fix some types

* type fix

* update getProps

* fix typings for default Example

* fix types for defaultExamples

* ts props loader

* type fix sanitizeConfig

* last type fixes

* ts examples loader

* ts styleguide loader

* finish the job

* remove custom eslintrc

* generate the types

* avoid exporting test specs

* run tsc om src omly

* remove unused space

* remove flow from ci

* remove compilation of types on publish

* rollbalk changes to bin

* remove useless types

* remove oops test file

* Use standard Array.isArray instead of lodash

Co-Authored-By: Artem Sapegin <[email protected]>

* fix typechecks

Author: Barthélémy Ledoux

.travis.yml

@@ -7,7 +7,7 @@ node_js:
 addons:
   apt:
     packages:
-    - libgconf-2-4
+      - libgconf-2-4
 
 script:
   # Run tests without coverage since it's 2x faster
@@ -38,7 +38,6 @@ jobs:
 
     - stage: typecheck
       script:
-        - npm run flow check
         - npm run tscheck
 
     - stage: integration

package-lock.json

@@ -104,10 +104,13 @@
     "@testing-library/react": "^9.3.0",
     "@types/buble": "^0.19.2",
     "@types/copy-webpack-plugin": "^5.0.0",
+    "@types/doctrine": "0.0.3",
     "@types/enzyme": "^3.10.3",
+    "@types/escodegen": "0.0.6",
     "@types/estree": "^0.0.39",
     "@types/jest": "^24.0.21",
     "@types/keymirror": "^0.1.1",
+    "@types/loader-utils": "^1.1.3",
     "@types/lodash": "^4.14.144",
     "@types/markdown-to-jsx": "^6.9.0",
     "@types/node": "^12.12.3",
@@ -172,8 +175,8 @@
     "start:sections": "node lib/bin/styleguidist.js server --config examples/sections/styleguide.config.js",
     "start:ui": "node lib/bin/styleguidist.js server",
     "lint": "eslint . --cache --fix --ext .js,.ts,.tsx",
-    "flow": "flow",
     "compile": "babel --delete-dir-on-start --ignore **/__mocks__/*,**/__tests__/*,**/*.spec.*,**/*.d.ts --extensions '.js,.ts,.tsx' -d lib/ src/",
+    "compile:types": "tsc -p ./tsconfig.types.json --emitDeclarationOnly",
     "compile:watch": "npm run compile -- --watch",
     "prepublishOnly": "npm run compile",
     "build:basic": "node lib/bin/styleguidist.js build --config examples/basic/styleguide.config.js",

package.json

@@ -1,7 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { ArgumentRenderer, styles } from './ArgumentRenderer';
-import classes from '../../../../test/classes';
 
 const name = 'Foo';
 const type = { name: 'Array' };

src/client/rsg-components/Argument/Argument.spec.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { ArgumentsRenderer, styles } from './ArgumentsRenderer';
-import classes from '../../../../test/classes';
 
 const props = {
 	classes: classes(styles),

src/client/rsg-components/Arguments/Arguments.spec.tsx

@@ -35,7 +35,7 @@ const styles = ({ fontFamily, fontSize, color, borderRadius }: Rsg.Theme) => ({
 	},
 });
 
-interface EditorProps extends JssInjectedProps {
+export interface EditorProps extends JssInjectedProps {
 	code: string;
 	onChange: (code: string) => void;
 }

src/client/rsg-components/Editor/Editor.tsx

@@ -4,7 +4,8 @@ import { TagProps, TagObject } from 'react-docgen';
 import map from 'lodash/map';
 import Markdown from 'rsg-components/Markdown';
 
-const plural = (array: any[], caption: string) => (array.length === 1 ? caption : `${caption}s`);
+const plural = (array: TagObject[], caption: string) =>
+	array.length === 1 ? caption : `${caption}s`;
 const list = (array: TagObject[]) => array.map(item => item.description).join(', ');
 const paragraphs = (array: TagObject[]) => array.map(item => item.description).join('\n\n');
 

src/client/rsg-components/JsDoc/JsDoc.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { NameRenderer, styles } from './NameRenderer';
-// TODO: simplify this path
-import classes from '../../../../test/classes';
 
 const props = {
 	classes: classes(styles),

…sg-components/Markdown/Checkbox/index.js …sg-components/Markdown/Checkbox/index.tssrc/client/rsg-components/Markdown/Checkbox/index.js renamed to src/client/rsg-components/Markdown/Checkbox/index.ts src/client/rsg-components/Markdown/Checkbox/index.js renamed to src/client/rsg-components/Markdown/Checkbox/index.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { ParaRenderer, styles } from './ParaRenderer';
-import classes from '../../../../test/classes';
 
 const props = {
 	classes: classes(styles),