Convert core components to TypeScript (Round 2)

.eslintrc

@@ -1,26 +1,32 @@
 {
-  "parser": "babel-eslint",
-  "extends": [
-    "standard",
-    "standard-react"
-  ],
-  "env": {
-    "es6": true
-  },
-  "plugins": [
-    "react"
-  ],
-  "parserOptions": {
-    "sourceType": "module"
-  },
-  "rules": {
-    // don't force es6 functions to include space before paren
-    "space-before-function-paren": 0,
-
-    // allow specifying true explicitly for boolean props
-    "react/jsx-boolean-value": 0,
-
-    // allow comma-dangle in multiline objects & arrays
-    "comma-dangle": ["error", "only-multiline"]
-  }
-}
+   "parser": "@typescript-eslint/parser",
+   "extends": [
+     "standard",
+     "standard-react",
+     "plugin:@typescript-eslint/recommended"
+   ],
+   "env": {
+     "es6": true
+   },
+   "plugins": [
+     "react",
+     "@typescript-eslint"
+   ],
+   "parserOptions": {
+     "sourceType": "module"
+   },
+   "rules": {
+     "space-before-function-paren": 0,
+     "react/jsx-boolean-value": 0,
+     "@typescript-eslint/explicit-function-return-type": "off",
+     "@typescript-eslint/explicit-member-accessibility": "off",
+     "@typescript-eslint/member-ordering": "error",
+     "@typescript-eslint/no-explicit-any": "off",
+     "@typescript-eslint/no-unused-vars": "off",
+     "@typescript-eslint/prefer-interface": "off",
+     "react/jsx-indent": "off",
+     "react/jsx-indent-props": "off",
+     "@typescript-eslint/no-var-requires": "off"
+   }
+ }
+

package.json

@@ -29,6 +29,8 @@
   },
   "devDependencies": {
     "@svgr/rollup": "^2.4.1",
+    "@typescript-eslint/eslint-plugin": "^1.9.0",
+    "@typescript-eslint/parser": "^1.9.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.5",
     "babel-plugin-external-helpers": "^6.22.0",
@@ -51,12 +53,19 @@
     "rollup": "^0.64.1",
     "rollup-plugin-babel": "^3.0.7",
     "rollup-plugin-commonjs": "^9.1.3",
+    "rollup-plugin-includepaths": "^0.2.3",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss": "^1.6.2",
-    "rollup-plugin-url": "^1.4.0"
+    "rollup-plugin-url": "^1.4.0",
+    "typescript": "^3.5.1"
   },
   "files": [
     "dist"
-  ]
-}
+  ],
+  "dependencies": {
+    "@types/jest": "^24.0.13",
+    "@types/react": "^16.8.19",
+    "@types/react-dom": "^16.8.4"
+  }
+}

rollup.config.js

@@ -4,36 +4,44 @@ import external from 'rollup-plugin-peer-deps-external'
 import postcss from 'rollup-plugin-postcss'
 import resolve from 'rollup-plugin-node-resolve'
 import url from 'rollup-plugin-url'
+import includePaths from 'rollup-plugin-includepaths'
 import svgr from '@svgr/rollup'
-
 import pkg from './package.json'
 
+const includePathOptions = {
+    include: {},
+    paths: ['src/lib', 'src/other'],
+    external: [],
+    extensions: ['.js', '.json', '.html', '.ts', '.tsx', '.css']
+}
+
 export default {
-  input: 'src/index.js',
-  output: [
-    {
-      file: pkg.main,
-      format: 'cjs',
-      sourcemap: true
-    },
-    {
-      file: pkg.module,
-      format: 'es',
-      sourcemap: true
-    }
-  ],
-  plugins: [
-    external(),
-    postcss({
-      modules: true
-    }),
-    url(),
-    svgr(),
-    babel({
-      exclude: 'node_modules/**',
-      plugins: [ 'external-helpers' ]
-    }),
-    resolve(),
-    commonjs()
-  ]
+    input: 'src/index.tsx',
+    output: [
+        {
+            file: pkg.main,
+            format: 'cjs',
+            sourcemap: true
+        },
+        {
+            file: pkg.module,
+            format: 'es',
+            sourcemap: true
+        }
+    ],
+    plugins: [
+        external(),
+        postcss({
+            modules: true
+        }),
+        url(),
+        svgr(),
+        babel({
+            exclude: 'node_modules/**',
+            plugins: ['external-helpers']
+        }),
+        resolve(),
+        commonjs(),
+        includePaths(includePathOptions)
+    ]
 }

src/component.test.ts

@@ -0,0 +1,7 @@
+import ExampleComponent from '.'
+
+describe('ExampleComponent', (): void => {
+    it('is truthy', () => {
+        expect(ExampleComponent).toBeTruthy()
+    })
+})

src/force.ts

@@ -0,0 +1,44 @@
+// Inspired by Dave DeSandro's (@desandro) work on Practical UI Physics
+// https://www.youtube.com/watch?v=90oMnMFozEE
+// https://codepen.io/desandro/pen/QbPKEq
+
+const applyForce = ({ velocityX, force }: { velocityX: number; force: number }): number => velocityX + force
+
+interface DragForce {
+    isDragging: boolean;
+    dragPosition: number;
+    nativePosition: number;
+    velocityX: number;
+}
+
+export const applyDragForce = ({ isDragging, dragPosition, nativePosition, velocityX }: DragForce): number => {
+    if (!isDragging) return velocityX
+
+    const dragVelocity: number = dragPosition - nativePosition
+    const dragForce: number = dragVelocity - velocityX
+    return velocityX + dragForce
+}
+
+interface BoundForce {
+    bound: number;
+    edge: string;
+    nativePosition: number;
+    friction: number;
+    velocityX: number;
+}
+
+export const applyBoundForce = ({ bound, edge, nativePosition, friction, velocityX }: BoundForce): number => {
+    // bouncing past bound
+    const distance: number = bound - nativePosition
+    let force: number = distance * (1 - friction)
+    // calculate resting position with this force
+    const rest: number = nativePosition + (velocityX + force) / (1 - friction)
+    // apply force if resting position is out of bounds
+    if ((edge === 'right' && rest > bound) || (edge === 'left' && rest < bound)) {
+        return applyForce({ velocityX, force })
+    } else {
+        // if in bounds, apply force to align at bounds
+        force = distance * (1 - friction) - velocityX
+        return applyForce({ velocityX, force })
+    }
+}

src/getBoundaries.ts

@@ -0,0 +1,15 @@
+interface BoundaryVariables {
+    outerWidth: number;
+    innerWidth: number;
+    elClientLeft: number;
+}
+export default ({ outerWidth, innerWidth, elClientLeft }: BoundaryVariables): { left: number; right: number } => {
+    const innerIsLessThanOuter: boolean = innerWidth < outerWidth
+    const leftEdge: number = elClientLeft
+    const rightEdge: number = -innerWidth + outerWidth
+
+    return {
+        left: innerIsLessThanOuter ? leftEdge : rightEdge,
+        right: innerIsLessThanOuter ? rightEdge : leftEdge
+    }
+}