Migrate core packages to TypeScript (#183)

.github/dependabot.yml

@@ -8,11 +8,10 @@ updates:
   - package-ecosystem: "npm" # See documentation for possible values
     directory: "/" # Location of package manifests
     schedule:
-      interval: "weekly"
-      day: "sunday"
-
+      interval: "monthly"
 
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
-      interval: "daily"
+      interval: "weekly"
+      day: "sunday"

.github/workflows/ci.yml

@@ -0,0 +1,106 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@master
+
+      - name: Use latest version of Node.j
+        uses: actions/setup-node@master
+        with:
+          node-version: "*"
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Cache yarn cache
+        uses: actions/[email protected]
+        id: yarn-cache #`steps.yarn-cache.outputs.cache-hit != 'true'
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install Dependencies
+        run: yarn install
+
+      - name: Run lint
+        run: yarn eslint .
+
+  types:
+    name: Check Types
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@master
+
+      - name: Use latest version of Node.j
+        uses: actions/setup-node@master
+        with:
+          node-version: "*"
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Cache yarn cache
+        uses: actions/[email protected]
+        id: yarn-cache #`steps.yarn-cache.outputs.cache-hit != 'true'
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install Dependencies
+        run: yarn install
+
+      - name: check types
+        run: "yarn tsc --noEmit"
+
+  unit-test:
+    name: Unit Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@master
+
+      - name: Use latest version of Node.j
+        uses: actions/setup-node@master
+        with:
+          node-version: "*"
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Cache yarn cache
+        uses: actions/[email protected]
+        id: yarn-cache #`steps.yarn-cache.outputs.cache-hit != 'true'
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install Dependencies
+        run: yarn install
+
+      - name: Run Test
+        run: CI=true yarn jest --coverage
+
+      - name: Upload coverage to Codecov
+        run: bash <(curl -s https://codecov.io/bash) -C $GITHUB_SHA -B ${GITHUB_REF#refs/heads/} -Z
+        env:
+          CODECOV_TOKEN: 98cfb3ef-e3ad-4ffc-aaa1-314731222d1b

.github/workflows/cypress.yml

@@ -8,28 +8,34 @@ on:
 
 jobs:
   cypress-dnd:
+    name: E2E Test For DnD React APP
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@master
+      - name: Check out repository
+        uses: actions/checkout@master
 
-      - name: Set Node.js 14.x
+      - name: Use latest version of Node.j
         uses: actions/setup-node@master
         with:
-          node-version: 14.x
+          node-version: "*"
 
-      - name: Cache Dependencies
-        uses: actions/[email protected]
-
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Cache yarn cache
+        uses: actions/[email protected]
+        id: yarn-cache #`steps.yarn-cache.outputs.cache-hit != 'true'
         with:
-          path: node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-node-
+            ${{ runner.os }}-yarn-
 
       - name: Install Dependencies
-        run: yarn
+        run: yarn install
 
-      - name: Run Build
+      - name: Build packages
         run: yarn build
 
       - name: Extended Test for DnD React APP
@@ -42,4 +48,3 @@ jobs:
           wait-on-timeout: 120
           browser: chrome
           headless: true
-

.gitignore

@@ -4,11 +4,13 @@ node_modules
 .cache
 .changelog
 .docusaurus
+.DS_Store
 build
 dist
+lib
 draft
 samples
-
+tsconfig.tsbuildinfo
 cypress/screenshots
 cypress/videos
 

.vscode/settings.json

@@ -1,30 +1,8 @@
 {
-	"editor.formatOnSave": true,
-	"editor.fontSize": 13,
-	"cSpell.words": [
-		"LGPL",
-		"builderz",
-		"camelized",
-		"corename",
-		"dflex",
-		"docx",
-		"draggable",
-		"folo",
-		"frontmatter",
-		"hashbang",
-		"interop",
-		"isboolean",
-		"isempty",
-		"mytools",
-		"sdecs",
-		"sname",
-		"toplevel",
-		"treemap",
-		"unfound",
-		"unsortable",
-		"withcontext"
-	],
-	"eslint.packageManager": "yarn",
-	"eslint.alwaysShowStatus": true,
-	"eslint.debug": true
+  "editor.formatOnSave": true,
+  "editor.fontSize": 13,
+  "eslint.packageManager": "yarn",
+  "eslint.alwaysShowStatus": true,
+  "eslint.debug": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

babel.config.js

@@ -10,6 +10,7 @@ module.exports = (api) => {
           },
         },
       ],
+      "@babel/preset-typescript",
     ],
   };
 };

docs/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
 };

docs/src/pages/index.js

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 /* eslint-disable import/no-unresolved */
+
 import React from "react";
 import clsx from "clsx";
 import Layout from "@theme/Layout";

docs/src/theme/ReactLiveScope/HandlerSVG.js

@@ -1,34 +1,32 @@
 import React from "react";
 import "./draggable.css";
 
-const HandlerSVG = (props) => {
-  return (
-    <svg
-      className="handler"
-      width="10"
-      height="16px"
-      viewBox="0 0 10 16"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-        <g id="Outlined" transform="translate(-617.000000, -246.000000)">
-          <g id="Action" transform="translate(100.000000, 100.000000)">
-            <g transform="translate(510.000000, 142.000000)">
-              <g>
-                <polygon id="Path" points="0 0 24 0 24 24 0 24" />
-                <path
-                  d="M11,18 C11,19.1 10.1,20 9,20 C7.9,20 7,19.1 7,18 C7,16.9 7.9,16 9,16 C10.1,16 11,16.9 11,18 Z M9,10 C7.9,10 7,10.9 7,12 C7,13.1 7.9,14 9,14 C10.1,14 11,13.1 11,12 C11,10.9 10.1,10 9,10 Z M9,4 C7.9,4 7,4.9 7,6 C7,7.1 7.9,8 9,8 C10.1,8 11,7.1 11,6 C11,4.9 10.1,4 9,4 Z M15,8 C16.1,8 17,7.1 17,6 C17,4.9 16.1,4 15,4 C13.9,4 13,4.9 13,6 C13,7.1 13.9,8 15,8 Z M15,10 C13.9,10 13,10.9 13,12 C13,13.1 13.9,14 15,14 C16.1,14 17,13.1 17,12 C17,10.9 16.1,10 15,10 Z M15,16 C13.9,16 13,16.9 13,18 C13,19.1 13.9,20 15,20 C16.1,20 17,19.1 17,18 C17,16.9 16.1,16 15,16 Z"
-                  fill="#f6f8ff"
-                />
-              </g>
+const HandlerSVG = (props) => (
+  <svg
+    className="handler"
+    width="10"
+    height="16px"
+    viewBox="0 0 10 16"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="Outlined" transform="translate(-617.000000, -246.000000)">
+        <g id="Action" transform="translate(100.000000, 100.000000)">
+          <g transform="translate(510.000000, 142.000000)">
+            <g>
+              <polygon id="Path" points="0 0 24 0 24 24 0 24" />
+              <path
+                d="M11,18 C11,19.1 10.1,20 9,20 C7.9,20 7,19.1 7,18 C7,16.9 7.9,16 9,16 C10.1,16 11,16.9 11,18 Z M9,10 C7.9,10 7,10.9 7,12 C7,13.1 7.9,14 9,14 C10.1,14 11,13.1 11,12 C11,10.9 10.1,10 9,10 Z M9,4 C7.9,4 7,4.9 7,6 C7,7.1 7.9,8 9,8 C10.1,8 11,7.1 11,6 C11,4.9 10.1,4 9,4 Z M15,8 C16.1,8 17,7.1 17,6 C17,4.9 16.1,4 15,4 C13.9,4 13,4.9 13,6 C13,7.1 13.9,8 15,8 Z M15,10 C13.9,10 13,10.9 13,12 C13,13.1 13.9,14 15,14 C16.1,14 17,13.1 17,12 C17,10.9 16.1,10 15,10 Z M15,16 C13.9,16 13,16.9 13,18 C13,19.1 13.9,20 15,20 C16.1,20 17,19.1 17,18 C17,16.9 16.1,16 15,16 Z"
+                fill="#f6f8ff"
+              />
             </g>
           </g>
         </g>
       </g>
-    </svg>
-  );
-};
+    </g>
+  </svg>
+);
 
 export default HandlerSVG;