Merge pull request #19 from hipstersmoothie/loader

copy generateDocgenCodeBlock from loader to remove dependency on archived code

Author: hipstersmoothie

.eslintrc

@@ -4,14 +4,28 @@
     "xo",
     "prettier",
     "plugin:@typescript-eslint/recommended",
-    "prettier/@typescript-eslint"
+    "prettier/@typescript-eslint",
+    "plugin:jest/recommended",
+    "plugin:jest/style"
+  ],
+  "plugins": [
+    "prettier",
+    "eslint-plugin-jsdoc",
+    "@typescript-eslint",
+    "jest"
   ],
-  "plugins": ["prettier", "eslint-plugin-jsdoc", "@typescript-eslint"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "project": "./tsconfig.json",
     "sourceType": "module"
   },
+  "ignorePatterns": [
+    "jest.config.js",
+    "**/__fixtures__"
+  ],
+  "env": {
+    "jest/globals": true
+  },
   "rules": {
     "@typescript-eslint/explicit-function-return-type": 0,
     "@typescript-eslint/camelcase": 0,

.github/workflows/push.yml

@@ -27,6 +27,7 @@ jobs:
         yarn
         yarn build
         yarn lint
+        yarn test
 
   release:
     runs-on: ubuntu-latest

jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  testEnvironment: "node",
+  transform: {
+    "^.+\\.tsx?$": "ts-jest",
+  },
+  testRegex: "(/__tests__/.*|(.|/)).(test|spec).(jsx?|tsx?)$",
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+};

package.json

@@ -7,9 +7,10 @@
   "author": "Andrew Lisowski <lisowski54@gmail.com>",
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.build.json",
     "start": "yarn build --watch",
     "lint": "eslint src --ext .ts,.js",
+    "test": "jest",
     "release": "auto shipit"
   },
   "keywords": [
@@ -27,13 +28,14 @@
     "endent": "^2.0.1",
     "micromatch": "^4.0.2",
     "react-docgen-typescript": "^1.20.1",
-    "react-docgen-typescript-loader": "^3.7.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.5",
+    "@types/jest": "^26.0.16",
     "@types/micromatch": "^4.0.1",
     "@types/node": "^14.0.12",
+    "@types/react": "^17.0.0",
     "@types/webpack": "^4.41.17",
     "@typescript-eslint/eslint-plugin": "2.31.0",
     "@typescript-eslint/parser": "2.31.0",
@@ -44,10 +46,14 @@
     "eslint-config-prettier": "6.11.0",
     "eslint-config-xo": "0.29.1",
     "eslint-plugin-import": "2.20.2",
+    "eslint-plugin-jest": "^24.1.3",
     "eslint-plugin-jsdoc": "25.2.0",
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-prettier": "3.1.3",
+    "jest": "^26.6.3",
     "prettier": "^2.0.5",
+    "react": "^17.0.1",
+    "ts-jest": "^26.4.4",
     "typescript": "3.8.3"
   },
   "peerDependencies": {

src/__tests__/__fixtures__/DefaultPropValue.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+interface DefaultPropValueComponentProps {
+  /**
+   * Button color.
+   *
+   * @default blue
+   **/
+  color: "blue" | "green";
+
+  /**
+   * Button counter.
+   */
+  counter: number;
+
+  /**
+   * Button disabled.
+   */
+  disabled: boolean;
+}
+
+/**
+ * Component with a prop with a default value.
+ */
+export const DefaultPropValueComponent: React.FC<DefaultPropValueComponentProps> = (
+  props
+) => (
+  <button disabled={props.disabled} style={{ backgroundColor: props.color }}>
+    {props.counter}
+    {props.children}
+  </button>
+);
+
+DefaultPropValueComponent.defaultProps = {
+  counter: 123,
+  disabled: false,
+};

src/__tests__/__fixtures__/HyphenatedPropName.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+interface HyphenatedPropNameProps {
+  /** Button color. */
+  "button-color": "blue" | "green";
+}
+
+/**
+ * A component with a hyphenated prop name.
+ */
+export const HyphenatedPropNameComponent: React.FC<HyphenatedPropNameProps> = (
+  props
+) => (
+  <button style={{ backgroundColor: props["button-color"] }}>
+    {props.children}
+  </button>
+);

src/__tests__/__fixtures__/MultiProps.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+interface MultiPropsComponentProps {
+  /** Button color. */
+  color: "blue" | "green";
+
+  /** Button size. */
+  size: "small" | "large";
+}
+
+/**
+ * This is a component with multiple props.
+ */
+export const MultiPropsComponent: React.FC<MultiPropsComponentProps> = (
+  props
+) => <button style={{ backgroundColor: props.color }}>{props.children}</button>;

src/__tests__/__fixtures__/MultilineDescription.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+interface MultilineDescriptionProps {
+  /** Button color. */
+  color: "blue" | "green";
+}
+
+/**
+ * A component with a multiline description.
+ *
+ * Second line.
+ */
+export const MultilineDescriptionComponent: React.FC<MultilineDescriptionProps> = (
+  props
+) => <button style={{ backgroundColor: props.color }}>{props.children}</button>;

src/__tests__/__fixtures__/MultilinePropDescription.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+interface MultilinePropDescriptionComponentProps {
+  /**
+   * This is a multiline prop description.
+   *
+   * Second line.
+   */
+  color: "blue" | "green";
+}
+
+/**
+ * A component with multiline prop description.
+ */
+export const MultilinePropDescriptionComponent: React.FC<MultilinePropDescriptionComponentProps> = (
+  props
+) => <button style={{ backgroundColor: props.color }}>{props.children}</button>;

src/__tests__/__fixtures__/Simple.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+interface SimpleComponentProps {
+  /** Button color. */
+  color: "blue" | "green";
+}
+
+/**
+ * A simple component.
+ */
+export const SimpleComponent: React.FC<SimpleComponentProps> = (props) => (
+  <button style={{ backgroundColor: props.color }}>{props.children}</button>
+);