Add makeStyles function

CHANGELOG.md

@@ -12,7 +12,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 * Add 2-dimensional breakpoints [#70](https://github.com/Shopify/restyle/pull/70) by [@Johan-duitot](https://github.com/Johan-dutoit)
 
 ## 1.3.1 - 2020-10-26
-* Silently ignore any errors caused by missing a variant definition in the theme (e.g. textVariants), to preserve backwards compatibility. [#64](https://github.com/Shopify/restyle/pull/64) by [@jonogreenz](https://github.com/jonogreenz)
+* Silently ignore any errors caused by missing a variant definition in the theme (e.g. typography), to preserve backwards compatibility. [#64](https://github.com/Shopify/restyle/pull/64) by [@jonogreenz](https://github.com/jonogreenz)
 * Disallow creating a variant with the existing base theme keys of `colors, spacing, breakpoints, zIndices, borderRadii`. [#64](https://github.com/Shopify/restyle/pull/64) by [@jonogreenz](https://github.com/jonogreenz)
 * Improve rendering performance by removing unnecessary uses of the spread operator. [#63](https://github.com/Shopify/restyle/pull/63) by [@JoelBesada](https://github.com/JoelBesada)
 * ~~Add a more descriptive error when theme is missing a key for a used variant.~~ [#59](https://github.com/Shopify/restyle/pull/59) by [@Charly6596](https://github.com/Charly6596) (*Replaced by [PR #64](https://github.com/Shopify/restyle/pull/64)*)

src/createText.ts

@@ -27,7 +27,7 @@ type BaseTextProps<Theme extends BaseTheme> = ColorProps<Theme> &
   TypographyProps<Theme> &
   SpacingProps<Theme> &
   TextShadowProps<Theme> &
-  VariantProps<Theme, 'textVariants'>;
+  VariantProps<Theme, 'typography'>;
 
 export type TextProps<
   Theme extends BaseTheme,
@@ -44,7 +44,7 @@ export const textRestyleFunctions = [
   spacing,
   spacingShorthand,
   textShadow,
-  createVariant({themeKey: 'textVariants'}),
+  createVariant({themeKey: 'typography'}),
 ];
 
 const createText = <

src/index.ts

@@ -14,3 +14,4 @@ export {default as useResponsiveProp} from './hooks/useResponsiveProp';
 export {default as createTheme} from './createTheme';
 export {default as createRestyleFunction} from './createRestyleFunction';
 export {default as createRestyleComponent} from './createRestyleComponent';
+export {default as makeStyles} from './makeStyles';

src/makeStyles.ts

@@ -0,0 +1,25 @@
+import {StyleSheet} from 'react-native';
+import {BaseTheme, CreateStyleFn, RNStyleSheetType} from 'types';
+
+import useTheme from './hooks/useTheme';
+
+function styleCreator<U extends BaseTheme, T extends RNStyleSheetType<T>>(
+  stylesOrCreator: CreateStyleFn<T, U>,
+) {
+  return (appTheme: U) =>
+    typeof stylesOrCreator === 'function'
+      ? StyleSheet.create(stylesOrCreator(appTheme))
+      : StyleSheet.create(stylesOrCreator);
+}
+
+function makeStyles<U extends BaseTheme, T extends RNStyleSheetType<T>>(
+  stylesOrCreator: CreateStyleFn<T, U>,
+) {
+  const useStyles = () => {
+    const appTheme = useTheme() as U;
+    return styleCreator(stylesOrCreator)(appTheme);
+  };
+  return useStyles;
+}
+
+export default makeStyles;

src/test/createVariant.test.ts

@@ -18,7 +18,7 @@ const theme = {
       height: 400,
     },
   },
-  textVariants: {
+  typography: {
     body: {
       fontSize: 14,
       lineHeight: 18,
@@ -65,7 +65,7 @@ const dimensions = {
 
 describe('createVariant', () => {
   it('expands a variant to the given values in the theme', () => {
-    const variant = createVariant({themeKey: 'textVariants'});
+    const variant = createVariant({themeKey: 'typography'});
     expect(variant.func({variant: 'body'}, {theme, dimensions})).toStrictEqual({
       fontSize: 14,
       lineHeight: 18,
@@ -74,7 +74,7 @@ describe('createVariant', () => {
 
   it('accepts defaults', () => {
     const variant = createVariant({
-      themeKey: 'textVariants',
+      themeKey: 'typography',
       defaults: {
         fontSize: 10,
         opacity: 0.5,
@@ -147,7 +147,7 @@ describe('createVariant', () => {
 
   it('correctly overrides default values', () => {
     const variant = createVariant({
-      themeKey: 'textVariants',
+      themeKey: 'typography',
       defaults: {
         fontSize: 10,
         opacity: 0.5,
@@ -160,10 +160,10 @@ describe('createVariant', () => {
     });
   });
 
-  it('correctly creates textVariants without key in theme', () => {
+  it('correctly creates typography without key in theme', () => {
     const themeSubset = {...theme};
-    delete themeSubset.textVariants;
-    const variant = createVariant({themeKey: 'textVariants'});
+    delete themeSubset.typography;
+    const variant = createVariant({themeKey: 'typography'});
     expect(variant.func({}, {theme: themeSubset, dimensions})).toStrictEqual(
       {},
     );
@@ -175,7 +175,7 @@ describe('createVariant', () => {
   });
 
   it('supports referencing other theme values in the variant', () => {
-    const variant = createVariant({themeKey: 'textVariants'});
+    const variant = createVariant({themeKey: 'typography'});
     expect(
       variant.func({variant: 'subheader'}, {theme, dimensions}),
     ).toStrictEqual({
@@ -185,7 +185,7 @@ describe('createVariant', () => {
   });
 
   it('supports responsive values', () => {
-    const variant = createVariant({themeKey: 'textVariants'});
+    const variant = createVariant({themeKey: 'typography'});
     expect(
       variant.func(
         {variant: 'header'},
@@ -200,7 +200,7 @@ describe('createVariant', () => {
   });
 
   it('supports more complex responsive values', () => {
-    const variant = createVariant({themeKey: 'textVariants'});
+    const variant = createVariant({themeKey: 'typography'});
     expect(
       variant.func(
         {variant: 'header'},
@@ -215,7 +215,7 @@ describe('createVariant', () => {
   });
 
   it('falls back to the closest width', () => {
-    const variant = createVariant({themeKey: 'textVariants'});
+    const variant = createVariant({themeKey: 'typography'});
     expect(
       variant.func(
         {variant: 'header'},

src/types.ts

@@ -1,4 +1,4 @@
-import {ImageStyle, TextStyle, ViewStyle} from 'react-native';
+import {ImageStyle, StyleSheet, TextStyle, ViewStyle} from 'react-native';
 
 export type ResponsiveValue<Value, Theme extends BaseTheme> =
   | Value
@@ -66,3 +66,9 @@ export type RNStyleProperty =
   | keyof ImageStyle;
 
 export type PropValue = string | number | undefined | null;
+
+export type RNStyleSheetType<T> = StyleSheet.NamedStyles<T>;
+
+export type CreateStyleFn<T extends RNStyleSheetType<T>, U extends BaseTheme> =
+  | ((theme: U) => T)
+  | T;