From dd3ef070f172b9d94ce56f15c987792d0ea57372 Mon Sep 17 00:00:00 2001
From: Mickael Lecoq <mickael@lecoq.me>
Date: Wed, 24 May 2023 10:47:43 +0200
Subject: [PATCH] feat: make spacing property as optional

---
 CHANGELOG.md                             |  4 +++
 src/context.tsx                          |  1 -
 src/restyleFunctions.ts                  |  4 +--
 src/test/createRestyleComponent.test.tsx | 41 ++++++++++++++++++++++++
 src/types.ts                             |  2 +-
 5 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d3704cb5..65c32022 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/src/context.tsx b/src/context.tsx
index be37f6b1..fd028c8a 100644
--- a/src/context.tsx
+++ b/src/context.tsx
@@ -3,7 +3,6 @@ import {BaseTheme} from 'types';
 
 export const ThemeContext = React.createContext({
   colors: {},
-  spacing: {},
 });
 
 export const ThemeProvider = ({
diff --git a/src/restyleFunctions.ts b/src/restyleFunctions.ts
index 0f698fee..cec472c5 100644
--- a/src/restyleFunctions.ts
+++ b/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']
   >;
 };
diff --git a/src/test/createRestyleComponent.test.tsx b/src/test/createRestyleComponent.test.tsx
index 9fe1abce..cfd46b1c 100644
--- a/src/test/createRestyleComponent.test.tsx
+++ b/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,
+          },
+        ],
+      });
+    });
   });
 });
diff --git a/src/types.ts b/src/types.ts
index 2384c9fd..f2a3a230 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -35,7 +35,7 @@ export interface KnownBaseTheme {
   colors: {
     [key: string]: string;
   };
-  spacing: {
+  spacing?: {
     [key: string]: number | string;
   };
   breakpoints?: {