feat: make spacing property as optional

Author: mlecoq

CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## next
+
+- Added: defining spacing in theme is now optional [#257](https://github.com/Shopify/restyle/pull/257) by [mlecoq](https://github.com/mlecoq)
+
 ## 2.4.2 - 2023-03-30
 
 - Fixed: Variant with breakpoints memoizing separate values into the same hash key by deconstructing breakpoint objects into strings [#241](https://github.com/Shopify/restyle/pull/241) by [mattfrances](https://github.com/mattfrances)

src/context.tsx

@@ -3,7 +3,6 @@ import {BaseTheme} from 'types';
 
 export const ThemeContext = React.createContext({
   colors: {},
-  spacing: {},
 });
 
 export const ThemeProvider = ({

src/restyleFunctions.ts

@@ -310,14 +310,14 @@ export interface BackgroundColorShorthandProps<Theme extends BaseTheme> {
 
 export type SpacingProps<Theme extends BaseTheme> = {
   [Key in keyof typeof spacingProperties]?: ResponsiveValue<
-    keyof Theme['spacing'],
+    Theme['spacing'] extends object ? keyof Theme['spacing'] : number | string,
     Theme['breakpoints']
   >;
 };
 
 export type SpacingShorthandProps<Theme extends BaseTheme> = {
   [Key in keyof typeof spacingPropertiesShorthand]?: ResponsiveValue<
-    keyof Theme['spacing'],
+    Theme['spacing'] extends object ? keyof Theme['spacing'] : number | string,
     Theme['breakpoints']
   >;
 };

src/test/createRestyleComponent.test.tsx

@@ -48,10 +48,16 @@ const themeWithVariant = {
   },
 };
 
+const themeWithoutSpacing = {
+  ...theme,
+  spacing: undefined,
+};
+
 const {breakpoints, ...themeWithoutBreakpoints} = theme;
 
 type Theme = typeof theme;
 type ThemeWithVariant = typeof themeWithVariant;
+type ThemeWithoutSpacing = typeof themeWithoutSpacing;
 
 const mockUseWindowDimensions = jest.fn();
 
@@ -67,6 +73,14 @@ const Component = createRestyleComponent<
     ViewProps,
   Theme
 >([backgroundColor, spacing, spacingShorthand, opacity]);
+const ComponentWithoutSpacing = createRestyleComponent<
+  BackgroundColorProps<ThemeWithoutSpacing> &
+    SpacingProps<ThemeWithoutSpacing> &
+    SpacingShorthandProps<ThemeWithoutSpacing> &
+    OpacityProps<ThemeWithoutSpacing> &
+    ViewProps,
+  ThemeWithoutSpacing
+>([backgroundColor, spacing, spacingShorthand, opacity]);
 const cardVariant = createVariant<ThemeWithVariant, 'cardVariants'>({
   themeKey: 'cardVariants',
 });
@@ -230,5 +244,32 @@ describe('createRestyleComponent', () => {
         style: [{gap: 8, columnGap: 8, rowGap: 8}],
       });
     });
+
+    it('passes gap values from the theme when no spacing prop is defined', () => {
+      const {root} = render(
+        <ThemeProvider theme={themeWithoutSpacing}>
+          <ComponentWithoutSpacing
+            gap={10}
+            columnGap={20}
+            rowGap={22}
+            marginTop={2}
+            marginLeft="auto"
+            paddingBottom={3}
+          />
+        </ThemeProvider>,
+      );
+      expect(root.findByType(View).props).toStrictEqual({
+        style: [
+          {
+            gap: 10,
+            columnGap: 20,
+            rowGap: 22,
+            marginTop: 2,
+            marginLeft: 'auto',
+            paddingBottom: 3,
+          },
+        ],
+      });
+    });
   });
 });

src/types.ts

@@ -35,7 +35,7 @@ export interface KnownBaseTheme {
   colors: {
     [key: string]: string;
   };
-  spacing: {
+  spacing?: {
     [key: string]: number | string;
   };
   breakpoints?: {