Change jsxImportSource to react (#2184)

sumup-oss · Jul 14, 2023 · 4b7dd4d · 4b7dd4d
1 parent e1db849
commit 4b7dd4d
Show file tree

Hide file tree

Showing 32 changed files with 91 additions and 44 deletions.
diff --git a/.changeset/twenty-cobras-wink.md b/.changeset/twenty-cobras-wink.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Changed the `jsxImportSource` from `@emotion/react` to `react`.
diff --git a/packages/circuit-ui/components/Calendar/RangePicker.tsx b/packages/circuit-ui/components/Calendar/RangePicker.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 import { ArrowRight, ArrowLeft, Close } from '@sumup/icons';
 // eslint-disable-next-line import/no-extraneous-dependencies

diff --git a/packages/circuit-ui/components/Calendar/components/CalendarWrapper/CalendarWrapper.tsx b/packages/circuit-ui/components/Calendar/components/CalendarWrapper/CalendarWrapper.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import type { ReactNode } from 'react';
 import type { Theme } from '@sumup/design-tokens';
 import { css, Global } from '@emotion/react';

diff --git a/packages/circuit-ui/components/CalendarTagTwoStep/CalendarTagTwoStep.tsx b/packages/circuit-ui/components/CalendarTagTwoStep/CalendarTagTwoStep.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { Component, createRef } from 'react';
 import { css } from '@emotion/react';
 import type { Moment } from 'moment';

diff --git a/packages/circuit-ui/components/Grid/Col/Col.ts b/packages/circuit-ui/components/Grid/Col/Col.ts
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 import { Theme } from '@sumup/design-tokens';
 

diff --git a/packages/circuit-ui/components/Grid/Grid/Grid.ts b/packages/circuit-ui/components/Grid/Grid/Grid.ts
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 import { Theme } from '@sumup/design-tokens';
 

diff --git a/packages/circuit-ui/components/Grid/Row/Row.ts b/packages/circuit-ui/components/Grid/Row/Row.ts
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 import { Theme } from '@sumup/design-tokens';
 

diff --git a/packages/circuit-ui/components/Grid/utils.ts b/packages/circuit-ui/components/Grid/utils.ts
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import type { Theme } from '@sumup/design-tokens';
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';

diff --git a/packages/circuit-ui/components/InlineElements/InlineElements.stories.tsx b/packages/circuit-ui/components/InlineElements/InlineElements.stories.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 
 import styled from '../../styles/styled.js';

diff --git a/packages/circuit-ui/components/InlineElements/InlineElements.tsx b/packages/circuit-ui/components/InlineElements/InlineElements.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { Children, ReactElement } from 'react';
 import { css } from '@emotion/react';
 

diff --git a/packages/circuit-ui/components/List/List.stories.tsx b/packages/circuit-ui/components/List/List.stories.tsx
@@ -15,8 +15,7 @@
 
 import { Fragment } from 'react';
 
-import Body from '../Body/index.js';
-import { spacing } from '../../styles/style-mixins.js';
+import { Stack } from '../../../../.storybook/components/index.js';
 
 import { List, ListProps } from './List.js';
 
@@ -40,31 +39,27 @@ export const Base = (args: ListProps) => (
 
 const variants: ListProps['variant'][] = ['unordered', 'ordered'];
 
-export const Variants = (args: ListProps) =>
-  variants.map((variant) => (
-    <List
-      key={variant}
-      {...args}
-      variant={variant}
-      css={spacing({ bottom: 'giga' })}
-    >
-      <ListItems />
-    </List>
-  ));
+export const Variants = (args: ListProps) => (
+  <Stack vertical>
+    {variants.map((variant) => (
+      <List key={variant} {...args} variant={variant}>
+        <ListItems />
+      </List>
+    ))}
+  </Stack>
+);
 
 const sizes: ListProps['size'][] = ['one', 'two'];
 
-export const Sizes = (args: ListProps) =>
-  sizes.map((size) => (
-    <>
-      <Body size={size} css={spacing({ bottom: 'mega' })}>
-        Use List size {size} with Body {size} text.
-      </Body>
-      <List key={size} {...args} size={size} css={spacing({ bottom: 'giga' })}>
+export const Sizes = (args: ListProps) => (
+  <Stack vertical>
+    {sizes.map((size) => (
+      <List key={size} {...args} size={size}>
         <ListItems />
       </List>
-    </>
-  ));
+    ))}
+  </Stack>
+);
 
 export const Nested = (args: ListProps) => (
   <List {...args}>

diff --git a/packages/circuit-ui/components/Modal/Modal.stories.tsx b/packages/circuit-ui/components/Modal/Modal.stories.tsx
@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-/* eslint-disable react/display-name */
 import { Fragment } from 'react';
 
 import { Stack } from '../../../../.storybook/components/index.js';
@@ -22,7 +21,6 @@ import Headline from '../Headline/index.js';
 import Body from '../Body/index.js';
 import Image from '../Image/index.js';
 import { ModalProvider } from '../ModalContext/index.js';
-import { spacing } from '../../styles/style-mixins.js';
 
 import { Modal, ModalProps, useModal } from './Modal.js';
 
@@ -34,7 +32,7 @@ export default {
 
 const defaultModalChildren = () => (
   <Fragment>
-    <Headline as="h2" size="four" css={spacing({ bottom: 'giga' })}>
+    <Headline as="h2" size="four" style={{ marginBottom: '1rem' }}>
       Hello World!
     </Headline>
     <Body>I am a modal.</Body>
@@ -109,10 +107,10 @@ export const PreventClose = (modal: ModalProps): JSX.Element => {
 PreventClose.args = {
   children: ({ onClose }: { onClose: ModalProps['onClose'] }) => (
     <Fragment>
-      <Headline as="h2" size="four" css={spacing({ bottom: 'giga' })}>
+      <Headline as="h2" size="four" style={{ marginBottom: '1rem' }}>
         Complete the action
       </Headline>
-      <Body css={spacing({ bottom: 'giga' })}>
+      <Body style={{ marginBottom: '1rem' }}>
         Users have to complete the action inside the modal to close it. The
         close button is hidden and clicking outside the modal or pressing the
         escape key does not close the modal either.
@@ -169,10 +167,10 @@ CustomStyles.args = {
           borderTopRightRadius: 'var(--cui-border-radius-mega)',
         }}
       />
-      <Headline as="h2" size="four" css={spacing('giga')}>
+      <Headline as="h2" size="four" style={{ margin: '1rem' }}>
         Custom styles
       </Headline>
-      <Body css={spacing('giga')}>
+      <Body style={{ margin: '1rem' }}>
         Custom styles can be applied using the <code>css</code> prop.
       </Body>
     </Fragment>

diff --git a/packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx b/packages/circuit-ui/components/SidePanel/SidePanel.stories.tsx
@@ -24,7 +24,6 @@ import { TopNavigation } from '../TopNavigation/index.js';
 import { baseArgs as topNavigationProps } from '../TopNavigation/TopNavigation.stories.js';
 import { SideNavigation } from '../SideNavigation/index.js';
 import { baseArgs as sideNavigationProps } from '../SideNavigation/SideNavigation.stories.js';
-import { spacing } from '../../styles/style-mixins.js';
 
 import { SidePanelProvider } from './SidePanelContext.js';
 import {
@@ -69,7 +68,7 @@ const basePlay = ({ canvasElement }: { canvasElement: HTMLCanvasElement }) => {
 };
 
 const StoryInstructions = () => (
-  <Body css={spacing('mega')}>
+  <Body style={{ margin: '1rem' }}>
     Select an item to open its details in a side panel. When this story is
     viewed in canvas mode we simulate a selection of the third item.
   </Body>
@@ -98,12 +97,12 @@ const DefaultChildren = ({
 
   return (
     <>
-      <Body css={spacing({ bottom: 'mega' })}>
+      <Body style={{ marginBottom: '1rem' }}>
         {showMoreInfo
           ? `These are the details of ${label}.`
           : `This is more information about ${label}.`}
       </Body>
-      <Body css={spacing({ bottom: 'mega' })}>
+      <Body style={{ marginBottom: '1rem' }}>
         {
           'Lorem ipsum dolor amet swag pickled humblebrag retro farm-to-table, shoreditch typewriter deep v single-origin coffee green juice coloring book venmo chambray. Marfa authentic blue bottle mixtape tofu adaptogen. IPhone chia blog palo santo mlkshk tattooed jean shorts yr locavore ennui scenester. Wolf tousled pok pok sartorial scenester man bun salvia quinoa raclette sriracha roof party pour-over venmo hammock. Four dollar toast typewriter 3 wolf moon letterpress disrupt pabst. Neutra irony tousled iPhone banh mi wayfarers hoodie waistcoat.'
         }
@@ -127,7 +126,7 @@ const DefaultChildren = ({
               headline: 'More information',
             })
           }
-          css={spacing({ bottom: 'mega' })}
+          style={{ marginBottom: '1rem' }}
         >
           Show more
         </Button>
@@ -140,7 +139,7 @@ const DefaultChildren = ({
               variant="tertiary"
               size="kilo"
               onClick={onBack}
-              css={spacing({ bottom: 'mega' })}
+              style={{ marginBottom: '1rem' }}
             >
               Back
             </Button>
@@ -150,7 +149,7 @@ const DefaultChildren = ({
             variant="tertiary"
             size="kilo"
             onClick={onClose}
-            css={spacing({ left: 'mega', bottom: 'mega' })}
+            style={{ marginBottom: '1rem', marginLeft: '1rem' }}
           >
             Close
           </Button>
@@ -182,7 +181,7 @@ const ComponentWithSidePanel = (props: SidePanelHookProps) => {
       }))}
       label="List of items with details in a side panel"
       hideLabel
-      css={spacing('mega')}
+      style={{ margin: '1rem' }}
     />
   );
 };
@@ -216,7 +215,7 @@ export const WithTopNavigation = (props: SidePanelHookProps): JSX.Element => {
           onClose={() => setSideNavigationOpen(false)}
         />
         <div style={{ flex: '1' }}>
-          <SidePanelProvider withTopNavigation>
+          <SidePanelProvider>
             <StoryInstructions />
             <ComponentWithSidePanel {...props} />
           </SidePanelProvider>
@@ -279,7 +278,7 @@ const ComponentWithSidePanelExtended = (props: SidePanelHookProps) => {
       }))}
       label="List of items with details in a side panel"
       hideLabel
-      css={spacing('mega')}
+      style={{ margin: '1rem' }}
     />
   );
 };

diff --git a/packages/circuit-ui/components/Sidebar/Sidebar.stories.tsx b/packages/circuit-ui/components/Sidebar/Sidebar.stories.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { useState } from 'react';
 import { css } from '@emotion/react';
 import { Home, Profile, Sales, Shop } from '@sumup/icons';

diff --git a/packages/circuit-ui/components/Sidebar/Sidebar.tsx b/packages/circuit-ui/components/Sidebar/Sidebar.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { Fragment, ReactNode } from 'react';
 import { css } from '@emotion/react';
 

diff --git a/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.tsx b/packages/circuit-ui/components/Sidebar/components/Aggregator/Aggregator.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { useState, useEffect, ReactElement } from 'react';
 import { css } from '@emotion/react';
 

diff --git a/packages/circuit-ui/components/Sidebar/components/Backdrop/Backdrop.ts b/packages/circuit-ui/components/Sidebar/components/Backdrop/Backdrop.ts
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { HTMLAttributes } from 'react';
 import { css } from '@emotion/react';
 

diff --git a/packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.ts b/packages/circuit-ui/components/Sidebar/components/CloseButton/CloseButton.ts
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 
 import styled, { StyleProps } from '../../../../styles/styled.js';

diff --git a/packages/circuit-ui/components/Sidebar/components/Footer/Footer.ts b/packages/circuit-ui/components/Sidebar/components/Footer/Footer.ts
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 
 import styled, { StyleProps } from '../../../../styles/styled.js';

diff --git a/packages/circuit-ui/components/Sidebar/components/Header/Header.ts b/packages/circuit-ui/components/Sidebar/components/Header/Header.ts
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 
 import styled, { StyleProps } from '../../../../styles/styled.js';

diff --git a/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.tsx b/packages/circuit-ui/components/Sidebar/components/NavItem/NavItem.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { ReactElement } from 'react';
 import { css } from '@emotion/react';
 

diff --git a/packages/circuit-ui/components/Sidebar/components/NavLabel/NavLabel.ts b/packages/circuit-ui/components/Sidebar/components/NavLabel/NavLabel.ts
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { HTMLAttributes } from 'react';
 import { css } from '@emotion/react';
 

diff --git a/packages/circuit-ui/components/Sidebar/components/NavList/NavList.tsx b/packages/circuit-ui/components/Sidebar/components/NavList/NavList.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { HTMLAttributes } from 'react';
 import { css } from '@emotion/react';
 

diff --git a/packages/circuit-ui/components/Sidebar/components/Separator/Separator.tsx b/packages/circuit-ui/components/Sidebar/components/Separator/Separator.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 import { Theme } from '@sumup/design-tokens';
 

diff --git a/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.tsx b/packages/circuit-ui/components/Sidebar/components/SubNavList/SubNavList.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { HTMLAttributes } from 'react';
 import { css } from '@emotion/react';
 

diff --git a/packages/circuit-ui/components/Tooltip/Tooltip.tsx b/packages/circuit-ui/components/Tooltip/Tooltip.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+/** @jsxImportSource @emotion/react */
+
 import { css } from '@emotion/react';
 
 import styled from '../../styles/styled.js';