feat(variants): add defaults to theme (#51)

* feat(types): add the ability to specify styles type when using createRestyleComponent

* refactor(types): remove style prop instead of adding more types

* fix(tests): revert types added to tests

* feat(variants): add defaults to theme

* tests(variants): add tests for dimensions in defaults

* fix(types): remove defaults from variant types

* Update src/test/createVariant.test.ts

Co-authored-by: Joel Besada <joel.besada@gmail.com>

Co-authored-by: Joel Besada <joel.besada@gmail.com>

README.md

@@ -415,6 +415,10 @@ const theme = createTheme({
     tablet: 768,
   },
   cardVariants: {
+    defaults: { 
+      // We can define defaults for the variant here.
+      // This will be applied after the defaults passed to createVariant and before the variant defined below.
+    },
     regular: {
       // We can refer to other values in the theme here, and use responsive props
       padding: {

src/createVariant.ts

@@ -50,9 +50,14 @@ function createVariant<
     const expandedProps = styleFunction.func(props, {theme, dimensions})[
       property
     ];
-    if (!expandedProps && !defaults) return {};
+
+    const variantDefaults = theme[themeKey].defaults as Partial<
+      AllProps<Theme>
+    >;
+
+    if (!expandedProps && !defaults && !variantDefaults) return {};
     return allRestyleFunctions.buildStyle(
-      {...defaults, ...expandedProps},
+      {...defaults, ...variantDefaults, ...expandedProps},
       {
         theme,
         dimensions,
@@ -71,6 +76,8 @@ export type VariantProps<
   Theme extends BaseTheme,
   K extends keyof Theme,
   Property extends keyof any = 'variant'
-> = {[key in Property]?: ResponsiveValue<keyof Theme[K], Theme>};
+> = {
+  [key in Property]?: ResponsiveValue<keyof Omit<Theme[K], 'defaults'>, Theme>;
+};
 
 export default createVariant;

src/test/createVariant.test.ts

@@ -33,6 +33,22 @@ const theme = {
       color: 'white',
     },
   },
+  boxVariants: {
+    defaults: {
+      fontSize: {
+        phone: 12,
+        tablet: 24,
+      },
+      backgroundColor: {
+        phone: 'black',
+        tablet: 'white',
+      },
+    },
+    primary: {
+      width: 50,
+      height: 50,
+    },
+  },
 };
 const dimensions = {
   width: 375,
@@ -62,6 +78,65 @@ describe('createVariant', () => {
     });
   });
 
+  it('accepts defaults from the theme', () => {
+    const variant = createVariant({
+      themeKey: 'boxVariants',
+    });
+    expect(variant.func({}, {theme, dimensions})).toStrictEqual({
+      fontSize: 12,
+      backgroundColor: '#111111',
+    });
+  });
+
+  it('accepts defaults from the theme and correctly overrides variant defaults', () => {
+    const variant = createVariant({
+      themeKey: 'boxVariants',
+      defaults: {
+        fontSize: 10,
+        opacity: 0.5,
+      },
+    });
+
+    expect(variant.func({}, {theme, dimensions})).toStrictEqual({
+      backgroundColor: '#111111',
+      fontSize: 12,
+      opacity: 0.5,
+    });
+  });
+
+  it('correctly uses the breakpoints for defaults within the theme', () => {
+    const variant = createVariant({
+      themeKey: 'boxVariants',
+      defaults: {
+        fontSize: 10,
+        opacity: 0.5,
+      },
+    });
+
+    expect(variant.func({}, {theme, dimensions})).toStrictEqual({
+      backgroundColor: '#111111',
+      fontSize: 12,
+      opacity: 0.5,
+    });
+
+    expect(
+      variant.func(
+        {},
+        {
+          theme,
+          dimensions: {
+            width: 376,
+            height: 667,
+          },
+        },
+      ),
+    ).toStrictEqual({
+      backgroundColor: '#EEEEEE',
+      fontSize: 24,
+      opacity: 0.5,
+    });
+  });
+
   it('correctly overrides default values', () => {
     const variant = createVariant({
       themeKey: 'textVariants',