Improve TypeSafety

.eslintrc

@@ -1,12 +1,12 @@
 {
   "extends": [
-    "plugin:shopify/typescript",
-    "plugin:shopify/react",
-    "plugin:shopify/jest",
-    "plugin:shopify/prettier"
+    "plugin:@shopify/typescript",
+    "plugin:@shopify/react",
+    "plugin:@shopify/jest",
+    "plugin:@shopify/prettier"
   ],
   "parserOptions": {
-    "project": "tsconfig.json"
+    "project": "tsconfig.eslint.json"
   },
   "rules": {
     "import/extensions": "off",
@@ -20,12 +20,9 @@
     "func-style": "off",
     "react/display-name": "off",
     "id-length": "off",
-    "shopify/restrict-full-import": ["error", "lodash"],
-    "shopify/jest/no-vague-titles": [
+    "@shopify/restrict-full-import": [
       "error",
-      {
-        "allow": ["all"]
-      }
+      "lodash"
     ]
   }
 }

.gitignore

@@ -6,3 +6,6 @@ npm-debug.log
 .jest
 
 dist
+
+# IDE
+.idea

package.json

@@ -29,21 +29,21 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@shopify/eslint-plugin": "^37.0.0",
     "@types/jest": "^24.0.18",
     "@types/react": "^16.9.2",
     "@types/react-native": "^0.60.10",
     "@types/react-test-renderer": "^16.9.0",
     "babel-jest": "^24.9.0",
-    "eslint": "^5.16.0",
-    "eslint-plugin-shopify": "^30.0.1",
+    "eslint": "^6.0.0",
     "husky": "^4.2.3",
     "jest": "^24.9.0",
     "prettier": "^1.18.2",
     "react": "^16.9.0",
     "react-native": "0.60.5",
     "react-test-renderer": "^16.9.0",
     "ts-jest": "^24.0.2",
-    "typescript": "~3.2.1"
+    "typescript": "~3.7.5"
   },
   "peerDependencies": {
     "react": "^16.8.0",

src/createBox.ts

@@ -1,7 +1,7 @@
 import {View} from 'react-native';
+
 import createRestyleComponent from './createRestyleComponent';
 import {BaseTheme, Omit} from './types';
-
 import {
   backgroundColor,
   opacity,

src/createRestyleComponent.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+
 import {RestyleFunctionContainer} from './types';
 import useRestyle from './hooks/useRestyle';
 

src/createRestyleFunction.ts

@@ -5,11 +5,10 @@ import {
   RestyleFunctionContainer,
 } from './types';
 
-type StyleTransformFunction = (params: {
-  value: any;
-  theme: BaseTheme;
-  themeKey?: string;
-}) => any;
+type StyleTransformFunction<
+  Theme extends BaseTheme,
+  K extends keyof Theme
+> = (params: {value: any; theme: Theme; themeKey?: K}) => any;
 
 const getValueForScreenSize = ({
   responsiveValue,
@@ -41,7 +40,7 @@ const isResponsiveObjectValue = <Theme extends BaseTheme>(
   }, true);
 };
 
-const getValue = <Theme extends BaseTheme>(
+const getValue = <Theme extends BaseTheme, K extends keyof Theme>(
   propValue: ResponsiveValue<string | number, Theme>,
   {
     theme,
@@ -50,9 +49,9 @@ const getValue = <Theme extends BaseTheme>(
     themeKey,
   }: {
     theme: Theme;
-    transform?: StyleTransformFunction;
+    transform?: StyleTransformFunction<Theme, K>;
     dimensions: Dimensions;
-    themeKey?: string;
+    themeKey?: K;
   },
 ) => {
   const val = isResponsiveObjectValue(propValue, theme)
@@ -73,26 +72,28 @@ const getValue = <Theme extends BaseTheme>(
   return val;
 };
 
-const createRestyleFunction = ({
+const createRestyleFunction = <
+  TProps = Record<string, unknown>,
+  Theme extends BaseTheme = BaseTheme,
+  P extends keyof TProps = keyof TProps,
+  K extends keyof Theme = keyof Theme
+>({
   property,
   transform,
-  styleProperty = property,
+  styleProperty = property.toString(),
   themeKey,
 }: {
-  property: string;
-  transform?: StyleTransformFunction;
+  property: P;
+  transform?: StyleTransformFunction<Theme, K>;
   styleProperty?: string;
-  themeKey?: string;
-}): RestyleFunctionContainer => {
+  themeKey?: K;
+}): RestyleFunctionContainer<TProps, Theme, P, K> => {
   return {
     property,
     themeKey,
     variant: false,
-    func: (
-      props: any,
-      {theme, dimensions}: {theme: BaseTheme; dimensions: Dimensions},
-    ): {[key: string]: any} => {
-      const value = getValue(props[property], {
+    func: (props, {theme, dimensions}): Record<string, any> => {
+      const value = getValue<Theme, K>(props[property], {
         theme,
         dimensions,
         themeKey,

src/createText.ts

@@ -1,4 +1,5 @@
 import {Text} from 'react-native';
+
 import createRestyleComponent from './createRestyleComponent';
 import {BaseTheme, Omit} from './types';
 import {

src/hooks/useDimensions.ts

@@ -1,5 +1,6 @@
 import {useState, useEffect} from 'react';
 import {Dimensions} from 'react-native';
+
 import {Dimensions as DimensionsType} from '../types';
 
 const useDimensions = () => {

src/hooks/useRestyle.ts

@@ -1,6 +1,8 @@
 import {useMemo} from 'react';
+
 import {RestyleFunctionContainer} from '../types';
 import composeRestyleFunctions from '../composeRestyleFunctions';
+
 import useDimensions from './useDimensions';
 import useTheme from './useTheme';
 

src/hooks/useTheme.ts

@@ -1,5 +1,6 @@
 import {useContext} from 'react';
 import {BaseTheme} from 'types';
+
 import {ThemeContext} from '../context';
 
 const useTheme = <Theme extends BaseTheme = BaseTheme>() =>

src/restyleFunctions.ts

@@ -1,4 +1,5 @@
 import {TextStyle, FlexStyle, ViewStyle} from 'react-native';
+
 import createRestyleFunction from './createRestyleFunction';
 import {BaseTheme, ResponsiveValue} from './types';
 
@@ -206,19 +207,19 @@ export const all = [
   ...textShadow,
 ];
 
-export type BackgroundColorProps<Theme extends BaseTheme> = {
+export interface BackgroundColorProps<Theme extends BaseTheme> {
   backgroundColor?: ResponsiveValue<keyof Theme['colors'], Theme>;
-};
-export type ColorProps<Theme extends BaseTheme> = {
+}
+export interface ColorProps<Theme extends BaseTheme> {
   color?: ResponsiveValue<keyof Theme['colors'], Theme>;
-};
-export type OpacityProps<Theme extends BaseTheme> = {
+}
+export interface OpacityProps<Theme extends BaseTheme> {
   opacity?: ResponsiveValue<number, Theme>;
-};
+}
 
-export type VisibleProps<Theme extends BaseTheme> = {
+export interface VisibleProps<Theme extends BaseTheme> {
   visible?: ResponsiveValue<boolean, Theme>;
-};
+}
 
 export type SpacingProps<Theme extends BaseTheme> = {
   [Key in keyof typeof spacingProperties]?: ResponsiveValue<

src/test/createRestyleComponent.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {create as render, act} from 'react-test-renderer';
 import {View, Dimensions, ViewProps} from 'react-native';
+
 import createRestyleComponent from '../createRestyleComponent';
 import {
   backgroundColor,

src/types.ts

@@ -26,16 +26,24 @@ export interface Dimensions {
   height: number;
 }
 
-export interface RestyleFunctionContainer {
-  property: string;
-  themeKey?: string;
+export interface RestyleFunctionContainer<
+  TProps = Record<string, unknown>,
+  Theme extends BaseTheme = BaseTheme,
+  P extends keyof TProps = keyof TProps,
+  K extends keyof Theme = keyof Theme
+> {
+  property: P;
+  themeKey?: K;
   variant: boolean;
-  func: RestyleFunction;
+  func: RestyleFunction<TProps, Theme>;
 }
 
-export type RestyleFunction = (
-  props: {[key: string]: any},
-  context: {theme: BaseTheme; dimensions: Dimensions},
-) => {[key: string]: any};
+export type RestyleFunction<
+  TProps = Record<string, any>,
+  Theme extends BaseTheme = BaseTheme
+> = (
+  props: TProps,
+  context: {theme: Theme; dimensions: Dimensions},
+) => Record<string, any>;
 
 export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;

tsconfig.eslint.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "./src/**/*.ts",
+    "./src/**/*.tsx",
+    "**/*.test.ts",
+    "**/*.test.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}