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

README.md

@@ -435,7 +435,7 @@ const variant = createVariant<Theme>({themeKey: 'cardVariants', defaults: {
   margin: {
     phone: 's',
     tablet: 'm',
-  }
+  },
   backgroundColor: 'cardRegularBackground',
 }})
 

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/composeRestyleFunctions.ts

@@ -1,14 +1,25 @@
-import {RestyleFunctionContainer, BaseTheme, Dimensions} from './types';
+import {
+  RestyleFunctionContainer,
+  BaseTheme,
+  Dimensions,
+  RNStyle,
+} from './types';
+import {AllProps} from './restyleFunctions';
 
-const composeRestyleFunctions = (
-  restyleFunctions: (RestyleFunctionContainer | RestyleFunctionContainer[])[],
+const composeRestyleFunctions = <
+  Theme extends BaseTheme,
+  TProps extends AllProps<Theme>
+>(
+  restyleFunctions: (
+    | RestyleFunctionContainer<TProps, Theme>
+    | RestyleFunctionContainer<TProps, Theme>[])[],
 ) => {
   const flattenedRestyleFunctions = restyleFunctions.reduce(
-    (acc: RestyleFunctionContainer[], item) => {
+    (acc: RestyleFunctionContainer<TProps, Theme>[], item) => {
       return acc.concat(item);
     },
     [],
-  ) as RestyleFunctionContainer[];
+  );
 
   const properties = flattenedRestyleFunctions.map(styleFunc => {
     return styleFunc.property;
@@ -22,16 +33,17 @@ const composeRestyleFunctions = (
       return styleFunc.func;
     });
 
-  const buildStyle = (
-    props: {[key: string]: any},
+  // TInputProps is a superset of TProps since TProps are only the Restyle Props
+  const buildStyle = <TInputProps extends TProps>(
+    props: TInputProps,
     {
       theme,
       dimensions,
     }: {
-      theme: BaseTheme;
+      theme: Theme;
       dimensions: Dimensions;
     },
-  ) => {
+  ): RNStyle => {
     return funcs.reduce((acc, func) => {
       return {...acc, ...func(props, {theme, dimensions})};
     }, {});

src/createBox.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import {View} from 'react-native';
-import createRestyleComponent from './createRestyleComponent';
-import {BaseTheme, Omit} from './types';
 
+import createRestyleComponent from './createRestyleComponent';
+import {BaseTheme} from './types';
 import {
   backgroundColor,
   opacity,
@@ -48,7 +49,8 @@ const createBox = <
   BaseComponent: React.ComponentType<any> = View,
 ) => {
   return createRestyleComponent<
-    BoxProps<Theme> & Omit<Props, keyof BoxProps<Theme>>
+    BoxProps<Theme> & Omit<Props, keyof BoxProps<Theme>>,
+    Theme
   >(boxRestyleFunctions, BaseComponent);
 };
 

src/createRestyleComponent.tsx

@@ -1,10 +1,16 @@
 import React from 'react';
 import {View} from 'react-native';
-import {RestyleFunctionContainer} from './types';
+
+import {BaseTheme, RestyleFunctionContainer} from './types';
 import useRestyle from './hooks/useRestyle';
 
-const createRestyleComponent = <Props extends {}>(
-  restyleFunctions: (RestyleFunctionContainer | RestyleFunctionContainer[])[],
+const createRestyleComponent = <
+  Props extends Record<string, unknown>,
+  Theme extends BaseTheme = BaseTheme
+>(
+  restyleFunctions: (
+    | RestyleFunctionContainer<Props, Theme>
+    | RestyleFunctionContainer<Props, Theme>[])[],
   BaseComponent: React.ComponentType<any> = View,
 ) => {
   const RestyleComponent = (

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 | undefined
+> = (params: {value: any; theme: Theme; themeKey?: K}) => any;
 
 const getValueForScreenSize = ({
   responsiveValue,
@@ -41,20 +40,29 @@ const isResponsiveObjectValue = <Theme extends BaseTheme>(
   }, true);
 };
 
-const getValue = <Theme extends BaseTheme>(
-  propValue: ResponsiveValue<string | number, Theme>,
+type PropValue = string | number | undefined | null;
+
+function isThemeKey<Theme extends BaseTheme>(
+  theme: Theme,
+  K: keyof Theme | undefined,
+): K is keyof Theme {
+  return theme[K as keyof Theme];
+}
+
+const getValue = <Theme extends BaseTheme, K extends keyof Theme | undefined>(
+  propValue: ResponsiveValue<PropValue, Theme>,
   {
     theme,
     transform,
     dimensions,
     themeKey,
   }: {
     theme: Theme;
-    transform?: StyleTransformFunction;
+    transform?: StyleTransformFunction<Theme, K>;
     dimensions: Dimensions;
-    themeKey?: string;
+    themeKey?: K;
   },
-) => {
+): PropValue => {
   const val = isResponsiveObjectValue(propValue, theme)
     ? getValueForScreenSize({
         responsiveValue: propValue,
@@ -63,7 +71,7 @@ const getValue = <Theme extends BaseTheme>(
       })
     : propValue;
   if (transform) return transform({value: val, theme, themeKey});
-  if (themeKey && theme[themeKey]) {
+  if (isThemeKey(theme, themeKey)) {
     if (val && theme[themeKey][val] === undefined)
       throw new Error(`Value '${val}' does not exist in theme['${themeKey}']`);
 
@@ -73,26 +81,28 @@ const getValue = <Theme extends BaseTheme>(
   return val;
 };
 
-const createRestyleFunction = ({
+const createRestyleFunction = <
+  Theme extends BaseTheme = BaseTheme,
+  TProps extends Record<string, unknown> = Record<string, unknown>,
+  P extends keyof TProps = keyof TProps,
+  K extends keyof Theme | undefined = undefined
+>({
   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}) => {
+      const value = getValue(props[property] as PropValue, {
         theme,
         dimensions,
         themeKey,

src/createText.ts

@@ -1,6 +1,8 @@
+import React from 'react';
 import {Text} from 'react-native';
+
 import createRestyleComponent from './createRestyleComponent';
-import {BaseTheme, Omit} from './types';
+import {BaseTheme} from './types';
 import {
   color,
   opacity,
@@ -42,7 +44,8 @@ const createText = <
   BaseComponent: React.ComponentType<any> = Text,
 ) => {
   return createRestyleComponent<
-    TextProps<Theme> & Omit<Props, keyof TextProps<Theme>>
+    TextProps<Theme> & Omit<Props, keyof TextProps<Theme>>,
+    Theme
   >(textRestyleFunctions, BaseComponent);
 };
 

src/createVariant.ts

@@ -1,25 +1,43 @@
-import {
-  BaseTheme,
-  Dimensions,
-  RestyleFunctionContainer,
-  ResponsiveValue,
-} from './types';
+import {BaseTheme, ResponsiveValue, RestyleFunctionContainer} from './types';
 import createRestyleFunction from './createRestyleFunction';
 import {all, AllProps} from './restyleFunctions';
 import composeRestyleFunctions from './composeRestyleFunctions';
 
 const allRestyleFunctions = composeRestyleFunctions(all);
 
-const createVariant = <Theme extends BaseTheme = BaseTheme>({
-  property = 'variant',
+// With Custom Prop Name
+function createVariant<
+  Theme extends BaseTheme,
+  K extends keyof Theme = keyof Theme,
+  P extends keyof any = keyof any
+>(params: {
+  property: P;
+  themeKey: K;
+  defaults?: AllProps<Theme>;
+}): RestyleFunctionContainer<VariantProps<Theme, K, P>, Theme, P, K>;
+// Without Custom Prop Name
+function createVariant<
+  Theme extends BaseTheme,
+  K extends keyof Theme = keyof Theme
+>(params: {
+  themeKey: K;
+  defaults?: AllProps<Theme>;
+}): RestyleFunctionContainer<VariantProps<Theme, K>, Theme, 'variant', K>;
+function createVariant<
+  Theme extends BaseTheme,
+  K extends keyof Theme,
+  P extends keyof any,
+  TProps extends VariantProps<Theme, K, P>
+>({
+  property = 'variant' as P,
   themeKey,
   defaults = {},
 }: {
-  property?: string;
-  themeKey: string;
+  property?: P;
+  themeKey: K;
   defaults?: AllProps<Theme>;
-}): RestyleFunctionContainer => {
-  const styleFunction = createRestyleFunction({
+}): RestyleFunctionContainer<TProps, Theme, P, K> {
+  const styleFunction = createRestyleFunction<Theme, TProps, P, K>({
     property,
     styleProperty: 'expandedProps',
     themeKey,
@@ -28,10 +46,7 @@ const createVariant = <Theme extends BaseTheme = BaseTheme>({
     property,
     themeKey,
     variant: true,
-    func: (
-      props: any,
-      {theme, dimensions}: {theme: BaseTheme; dimensions: Dimensions},
-    ) => {
+    func: (props, {theme, dimensions}) => {
       const {expandedProps} = styleFunction.func(props, {theme, dimensions});
       if (!expandedProps) return {};
       return allRestyleFunctions.buildStyle(
@@ -43,12 +58,12 @@ const createVariant = <Theme extends BaseTheme = BaseTheme>({
       );
     },
   };
-};
+}
 
 export type VariantProps<
   Theme extends BaseTheme,
-  ThemeKey extends keyof Theme,
-  Property extends string = 'variant'
-> = {[key in Property]?: ResponsiveValue<keyof Theme[ThemeKey], Theme>};
+  K extends keyof Theme,
+  Property extends keyof any = 'variant'
+> = {[key in Property]?: ResponsiveValue<keyof Theme[K], Theme>};
 
 export default createVariant;

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 = () => {