Fix typo information for props (#216)

Co-authored-by: Franz Moreno <[email protected]>

CHANGELOG.md

@@ -7,6 +7,8 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## Next
 
+- Better TypeScript type support [#216](https://github.com/Shopify/restyle/pull/216) by [FranzMoreno](https://github.com/FranzMoreno) & [fortmarek](https://github.com/fortmarek)
+
 ## 2.2.0 - 2023-01-24
 
 - Upgrade React Native to 0.71 in [#207](https://github.com/Shopify/restyle/pull/207) by [mattfrances](https://github.com/mattfrances)

src/createVariant.ts

@@ -82,7 +82,10 @@ export type VariantProps<
   K extends keyof Theme,
   Property extends keyof any = 'variant',
 > = {
-  [key in Property]?: ResponsiveValue<keyof Omit<Theme[K], 'defaults'>, Theme>;
+  [key in Property]?: ResponsiveValue<
+    keyof Omit<Theme[K], 'defaults'>,
+    Theme['breakpoints']
+  >;
 };
 
 export default createVariant;

src/hooks/useResponsiveProp.ts

@@ -9,7 +9,7 @@ import {
 import useTheme from './useTheme';
 
 const useResponsiveProp = <Theme extends BaseTheme, TVal extends PropValue>(
-  propValue: ResponsiveValue<TVal, Theme>,
+  propValue: ResponsiveValue<TVal, Theme['breakpoints']>,
 ) => {
   const theme = useTheme<Theme>();
   const dimensions = useWindowDimensions();

src/responsiveHelpers.ts

@@ -32,7 +32,7 @@ export const getValueForScreenSize = <Theme extends BaseTheme, TVal>({
   breakpoints,
   dimensions,
 }: {
-  responsiveValue: AtLeastOneResponsiveValue<TVal, Theme>;
+  responsiveValue: AtLeastOneResponsiveValue<TVal, Theme['breakpoints']>;
   breakpoints: Theme['breakpoints'];
   dimensions: Dimensions;
 }): TVal | undefined => {
@@ -62,9 +62,9 @@ export const getValueForScreenSize = <Theme extends BaseTheme, TVal>({
 };
 
 export const isResponsiveObjectValue = <Theme extends BaseTheme, TVal>(
-  val: ResponsiveValue<TVal, Theme>,
+  val: ResponsiveValue<TVal, Theme['breakpoints']>,
   theme: Theme,
-): val is AtLeastOneResponsiveValue<TVal, Theme> => {
+): val is AtLeastOneResponsiveValue<TVal, Theme['breakpoints']> => {
   if (!val) return false;
   if (typeof val !== 'object') return false;
   return getKeys(val).reduce((acc: boolean, key) => {
@@ -77,7 +77,7 @@ export const getResponsiveValue = <
   Theme extends BaseTheme,
   K extends keyof Theme | undefined,
 >(
-  propValue: ResponsiveValue<TVal, Theme>,
+  propValue: ResponsiveValue<TVal, Theme['breakpoints']>,
   {
     theme,
     transform,

src/restyleFunctions.ts

@@ -272,97 +272,103 @@ export const all = [
 ];
 
 export interface ColorProps<Theme extends BaseTheme> {
-  color?: ResponsiveValue<keyof Theme['colors'], Theme>;
+  color?: ResponsiveValue<keyof Theme['colors'], Theme['breakpoints']>;
 }
 export interface OpacityProps<Theme extends BaseTheme> {
-  opacity?: ResponsiveValue<number, Theme>;
+  opacity?: ResponsiveValue<number, Theme['breakpoints']>;
 }
 
 export interface VisibleProps<Theme extends BaseTheme> {
-  visible?: ResponsiveValue<boolean, Theme>;
+  visible?: ResponsiveValue<boolean, Theme['breakpoints']>;
 }
 
 export interface BackgroundColorProps<Theme extends BaseTheme> {
-  backgroundColor?: ResponsiveValue<keyof Theme['colors'], Theme>;
+  backgroundColor?: ResponsiveValue<
+    keyof Theme['colors'],
+    Theme['breakpoints']
+  >;
 }
 
 export interface BackgroundColorShorthandProps<Theme extends BaseTheme> {
-  bg?: ResponsiveValue<keyof Theme['colors'], Theme>;
+  bg?: ResponsiveValue<keyof Theme['colors'], Theme['breakpoints']>;
 }
 
 export type SpacingProps<Theme extends BaseTheme> = {
   [Key in keyof typeof spacingProperties]?: ResponsiveValue<
     keyof Theme['spacing'],
-    Theme
+    Theme['breakpoints']
   >;
 };
 
 export type SpacingShorthandProps<Theme extends BaseTheme> = {
   [Key in keyof typeof spacingPropertiesShorthand]?: ResponsiveValue<
     keyof Theme['spacing'],
-    Theme
+    Theme['breakpoints']
   >;
 };
 
 export type TypographyProps<Theme extends BaseTheme> = {
   [Key in keyof typeof typographyProperties]?: ResponsiveValue<
     TextStyle[Key],
-    Theme
+    Theme['breakpoints']
   >;
 };
 
 export type LayoutProps<Theme extends BaseTheme> = {
   [Key in keyof typeof layoutProperties]?: ResponsiveValue<
     FlexStyle[Key],
-    Theme
+    Theme['breakpoints']
   >;
 };
 
 export type PositionProps<Theme extends BaseTheme> = {
   [Key in keyof typeof positionProperties]?: ResponsiveValue<
     FlexStyle[Key],
-    Theme
+    Theme['breakpoints']
   >;
 } & {
   zIndex?: ResponsiveValue<
     Theme['zIndices'] extends object ? keyof Theme['zIndices'] : number,
-    Theme
+    Theme['breakpoints']
   >;
 };
 
 export type BorderProps<Theme extends BaseTheme> = {
   [Key in keyof typeof borderProperties]?: ResponsiveValue<
     ViewStyle[Key],
-    Theme
+    Theme['breakpoints']
   >;
 } & {
   [Key in keyof typeof borderColorProperties]?: ResponsiveValue<
     keyof Theme['colors'],
-    Theme
+    Theme['breakpoints']
   >;
 } & {
   [Key in keyof typeof borderRadiusProperties]?: ResponsiveValue<
     Theme['borderRadii'] extends object ? keyof Theme['borderRadii'] : number,
-    Theme
+    Theme['breakpoints']
   >;
 };
 
 export type ShadowProps<Theme extends BaseTheme> = {
   [Key in keyof typeof shadowProperties]?: ResponsiveValue<
     ViewStyle[Key],
-    Theme
+    Theme['breakpoints']
   >;
 } & {
-  shadowColor?: ResponsiveValue<keyof Theme['colors'], Theme>;
+  shadowColor?: ResponsiveValue<keyof Theme['colors'], Theme['breakpoints']>;
 };
 
 export type TextShadowProps<Theme extends BaseTheme> = {
   [Key in keyof typeof textShadowProperties]?: ResponsiveValue<
     TextStyle[Key],
-    Theme
+    Theme['breakpoints']
   >;
 } & {
-  textShadowColor?: ResponsiveValue<keyof Theme['colors'], Theme>;
+  textShadowColor?: ResponsiveValue<
+    keyof Theme['colors'],
+    Theme['breakpoints']
+  >;
 };
 
 export type AllProps<Theme extends BaseTheme> = BackgroundColorProps<Theme> &

src/types.ts

@@ -2,17 +2,16 @@ import {ImageStyle, TextStyle, ViewStyle, StyleProp} from 'react-native';
 
 export type AtLeastOneResponsiveValue<
   Value,
-  Theme extends BaseTheme,
-  B = Theme['breakpoints'],
+  B extends BaseTheme['breakpoints'],
   R = {[Key in keyof B]: {[key in Key]: Value}},
 > = Partial<{
   [K in keyof B]: Value;
 }> &
   R[keyof R];
 
-export type ResponsiveValue<Value, Theme extends BaseTheme> =
+export type ResponsiveValue<Value, B extends BaseTheme['breakpoints']> =
   | Value
-  | AtLeastOneResponsiveValue<Value, Theme>;
+  | AtLeastOneResponsiveValue<Value, B>;
 
 export type SafeVariants<T> = Omit<T, keyof KnownBaseTheme>;