[DNM] - Feature/add typescript types for sage

packages/sage-react/package.json

@@ -9,6 +9,8 @@
   "homepage": "https://github.com/Kajabi/sage-lib#readme",
   "license": "MIT",
   "main": "dist/main.js",
+  "types": "./dist/types/main.d.ts",
+  "type": "module",
   "directories": {
     "lib": "lib"
   },
@@ -33,9 +35,10 @@
     "yarn": "1.x"
   },
   "scripts": {
-    "build": "build-storybook -o build && webpack --config webpack/webpack.prod.js",
+    "build": "build-storybook -o build && webpack --config webpack/webpack.prod.js && yarn run generate:types",
     "build:watch": "build-storybook -o build && webpack --config webpack/webpack.prod.js --watch",
     "heroku-prebuild": "npm install react@16.13.1 react-dom@16.13.1 react-router-dom@5.1.0 --no-package-lock",
+    "generate:types": "node scripts/generateTypes.js",
     "lint": "yarn run eslint \"lib/**/*.{js,jsx}\"",
     "storybook": "start-storybook -p 4100 --ci",
     "preversion": "yarn install && yarn run build",
@@ -77,6 +80,7 @@
     "npm-run-all": "^4.1.5",
     "react-is": "16.13.1",
     "react-test-renderer": "16.13.1",
+    "react-to-typescript-definitions": "^3.1.1",
     "sass-loader": "^10.0.2",
     "typescript": "4.0.3",
     "url-loader": "^4.1.0",

packages/sage-react/scripts/generateTypes.js

@@ -0,0 +1,22 @@
+import { generateFromFile } from 'react-to-typescript-definitions';
+import * as componentLibrary from '../lib/index.js';
+
+const fs = require('fs');
+
+let definitionsContent = '';
+const components = Object.keys(componentLibrary);
+
+components.forEach((component) => {
+  if (typeof componentLibrary[component] === 'function' && componentLibrary[compoennt].filename !== undefined) {
+    const definitions = generateFromFile(
+      null,
+      componentLibrary[component].filename,
+      {},
+      'react'
+    );
+
+    definitionsContent = `${definitionsContent}${definitions}`;
+  }
+});
+
+fs.writeFileSync('../dist/sage-lib.d.ts', definitionsContent);

packages/sage-react/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    // Tells TypeScript to read JS files, as
+    // normally they are ignored as source files
+    "allowJs": true,
+    // Generate d.ts files
+    "declaration": true,
+    // This compiler run should
+    // only output d.ts files
+    "emitDeclarationOnly": true,
+    // Types should go into this directory.
+    // Removing this would place the .d.ts files
+    // next to the .js files
+    "outDir": "dist/types",
+    // go to js file when using IDE functions like
+    // "Go to Definition" in VSCode
+    "declarationMap": true
+  },
+  // Change this to match your project
+  "include": ["lib/**/*"],
+  "exclude": [
+    "lib/**/*.story.jsx",
+    "lib/test"
+  ],
+}