feat(components): migrate Text to TypeScript

.npmignore

@@ -0,0 +1,2 @@
+**/*.story.*
+**/*.spec.*

.storybook/components/BorderRadius.js

@@ -58,7 +58,7 @@ const BorderRadius = ({ size, ...props }) => (
     <div>
       <Text as="span">{size}</Text>
       <BorderRadiusSize>
-        <BorderRadiusName size={Text.KILO} as="span">
+        <BorderRadiusName size="kilo" as="span">
           {light.borderRadius[size]}
         </BorderRadiusName>
       </BorderRadiusSize>

.storybook/components/BorderWidth.js

@@ -61,7 +61,7 @@ const BorderWidth = ({ size }) => (
       <div>
         <Text as="span">{size}</Text>
         <BorderWidthSize>
-          <BorderWidthName size={Text.KILO} as="span">
+          <BorderWidthName size="kilo" as="span">
             {light.borderWidth[size]}
           </BorderWidthName>
         </BorderWidthSize>

.storybook/components/IconSize.js

@@ -60,7 +60,7 @@ const IconSize = ({ size }) => (
       <div>
         <Text as="span">{size}</Text>
         <IconSizeSize>
-          <IconSizeName size={Text.KILO} as="span">
+          <IconSizeName size="kilo" as="span">
             {light.iconSizes[size]}
           </IconSizeName>
         </IconSizeSize>

.storybook/components/Intro.js

@@ -32,14 +32,14 @@ const StyledText = styled(Text)(
 
 const Intro = ({ children, ...props }) => (
   <ThemeProvider theme={light}>
-    <StyledText size={Text.GIGA} {...props}>
+    <StyledText size="giga" {...props}>
       {children}
     </StyledText>
   </ThemeProvider>
 );
 
-Intro.KILO = Text.KILO;
-Intro.MEGA = Text.MEGA;
-Intro.GIGA = Text.GIGA;
+Intro.KILO = 'kilo';
+Intro.MEGA = 'mega';
+Intro.GIGA = 'giga';
 
 export default Intro;

.storybook/components/Spacing.js

@@ -60,7 +60,7 @@ const Spacing = ({ spacingName }) => (
       <div>
         <Text as="span">{spacingName}</Text>
         <SpacingSize>
-          <SpacingName size={Text.KILO} as="span">
+          <SpacingName size="kilo" as="span">
             {light.spacings[spacingName]}
           </SpacingName>
         </SpacingSize>

.storybook/components/Statuses.js

@@ -49,7 +49,7 @@ const Status = ({ variant = 'stable' }) => {
 
 Status.Description = ({ children }) => (
   <ThemeProvider theme={light}>
-    <Text size={Text.KILO} as="span" italic>
+    <Text size="kilo" as="span" italic>
       {' '}
       {children}
     </Text>

.storybook/components/Type.js

@@ -41,7 +41,7 @@ const Type = ({ size, component, name, fontWeight, ...props }) => {
         children: (
           <Fragment>
             This is {size}
-            <TypePx as="span" size={Text.KILO}>
+            <TypePx as="span" size="kilo">
               {weight ? `${weight}` : `${fontSize}, ${lineHeight}`}
             </TypePx>
           </Fragment>

.storybook/util/theme.js

@@ -27,7 +27,7 @@ const withThemeProvider = (Component, baseProps = {}) => (props = {}) => (
   </ThemeProvider>
 );
 
-const TEXT_SIZE = Text.MEGA;
+const TEXT_SIZE = 'mega';
 
 const headingStyles = theme => css`
   *:not(h1):not(h2):not(h3) + & {

README.md

@@ -61,7 +61,7 @@ yarn lint:fix
 ## Testing
 
 ```
-yarn test:watch
+yarn test
 ```
 
 ```javascript

docs/advanced/theme.story.mdx

@@ -221,9 +221,9 @@ Avoid using `theme.typography` directly in your styles, rather use the specializ
 #### Text
 
 <Preview>
-  <Type size={Text.GIGA} component={Text} name="text" />
-  <Type size={Text.MEGA} component={Text} name="text" />
-  <Type size={Text.KILO} component={Text} name="text" />
+  <Type size="giga" component={Text} name="text" />
+  <Type size="mega" component={Text} name="text" />
+  <Type size="kilo" component={Text} name="text" />
 </Preview>
 
 ### Font stack
@@ -243,8 +243,8 @@ theme.fontWeight.[regular|bold]
 You can only toggle the boldness of `Text`, but not `Heading` or `Subheading`.
 
 <Preview>
-  <Type size={Text.MEGA} bold component={Text} fontWeight="bold" name="text" />
-  <Type size={Text.MEGA} component={Text} fontWeight="regular" name="text" />
+  <Type size="mega" bold component={Text} fontWeight="bold" name="text" />
+  <Type size="mega" component={Text} fontWeight="regular" name="text" />
 </Preview>
 
 ### Grid

docs/introduction/contributing.story.mdx

@@ -79,7 +79,7 @@ yarn storybook
 We use [Jest](https://jestjs.io/) and [react-testing-library](https://github.com/testing-library/react-testing-library) to unit test our components. Since most components are purely visual, we rely a lot on snapshot tests. Business logic should be tested with more specific assertions. To start unit tests in watch mode, run:
 
 ```bash
-yarn test:watch
+yarn test
 ```
 
 As for linting and formatting, you can configure your editor to automatically lint and format your code on save. For this purpose, we're using [Prettier](https://prettier.io/) and [ESLint](https://eslint.org/). If you need to do it manually, you can run:

jest.config.js

@@ -34,9 +34,20 @@ module.exports = {
       'react-syntax-highlighter/dist/cjs/$1'
   },
   transform: {
-    '^.+\\.jsx?$': 'babel-jest',
-    '^.+\\.svg$': '<rootDir>/jest.fileTransformer.js',
-    '^.+\\.mdx?$': '<rootDir>/jest.mdxTransformer.js'
+    '^.+\\.(js|jsx)$': 'babel-jest',
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.(md|mdx)$': '<rootDir>/jest.mdxTransformer.js'
   },
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  globals: {
+    STORYBOOK: false,
+    __DEV__: false,
+    __PRODUCTION__: false,
+    __TEST__: true,
+    'ts-jest': {
+      tsConfig: {
+        jsx: 'react'
+      }
+    }
+  }
 };

jest.setup.js

@@ -14,50 +14,31 @@
  */
 
 import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
 import '@testing-library/jest-dom/extend-expect';
 import { createSerializer } from 'jest-emotion';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { render, fireEvent, wait, act } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ThemeProvider } from 'emotion-theming';
-import { light } from '@sumup/design-tokens';
+import { toHaveNoViolations } from 'jest-axe';
+import { fireEvent } from '@testing-library/react';
 
-import ComponentsContext, {
-  defaultComponents
-} from './src/components/ComponentsContext';
-
-// eslint-disable-next-line react/prop-types
-const WithProviders = ({ children }) => (
-  <ComponentsContext.Provider value={defaultComponents}>
-    <ThemeProvider theme={light}>{children}</ThemeProvider>
-  </ComponentsContext.Provider>
-);
-
-const renderWithProviders = renderFn => (component, ...rest) =>
-  renderFn(<WithProviders>{component}</WithProviders>, rest);
+import {
+  create,
+  render,
+  renderToHtml,
+  renderHook,
+  act,
+  actHook,
+  userEvent,
+  wait,
+  axe
+} from './src/util/test-utils';
 
 global.axe = axe;
 global.act = act;
 global.wait = wait;
 global.fireEvent = fireEvent;
 global.userEvent = userEvent;
-global.render = (component, options) =>
-  render(component, { wrapper: WithProviders, ...options });
-global.renderToHtml = renderWithProviders(renderToStaticMarkup);
-global.create = (...args) => {
-  const { container } = global.render(...args);
-  return container.children.length > 1
-    ? container.children
-    : container.firstChild;
-};
-
-// This is defined by webpack in storybook builds using the DefinePlugin plugin.
-global.STORYBOOK = false;
-
-global.__DEV__ = false;
-global.__PRODUCTION__ = false;
-global.__TEST__ = true;
+global.render = render;
+global.renderToHtml = renderToHtml;
+global.create = create;
 
 // react-popper relies on document.createRange
 if (global.document) {

package.json

@@ -24,8 +24,7 @@
     "lint:fix": "yarn lint --fix",
     "lint:watch": "onchange \"src/**/*\" -- yarn lint",
     "lint:ci": "yarn lint --format junit -o __reports__/eslint-results.xml",
-    "test": "jest --silent",
-    "test:watch": "yarn test --watch",
+    "test": "jest --watch",
     "test:output": "mkdir -p __reports__ && jest --json --outputFile=__reports__/jest-results.json",
     "test:ci": "yarn test:output --ci --coverage --runInBand",
     "check:security": "audit-ci --critical",
@@ -103,9 +102,10 @@
     "@testing-library/dom": "^6.5.0",
     "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^9.1.4",
-    "@testing-library/react-hooks": "^2.0.1",
+    "@testing-library/react-hooks": "^3.2.1",
     "@testing-library/user-event": "^7.0.1",
     "@types/jest": "^25.2.1",
+    "@types/jest-axe": "^3.2.2",
     "@types/lodash": "^4.14.149",
     "@types/react": "^16.9.32",
     "@types/react-dom": "^16.9.6",

scripts/static-styles/config.js

@@ -20,7 +20,6 @@ import { light } from '@sumup/design-tokens';
 import {
   Badge,
   Blockquote,
-  Button,
   ButtonGroup,
   Card,
   Checkbox,
@@ -36,14 +35,12 @@ import {
   Selector,
   SubHeading,
   Tag,
-  Text,
   TextArea,
   Toggle,
   styleConstants
 } from '../../src';
 
-const { colorNames, sizes } = styleConstants;
-const { KILO, MEGA, GIGA } = sizes;
+const { colorNames } = styleConstants;
 
 const element = props => <div {...props} />;
 
@@ -107,14 +104,19 @@ function getRequiredProps(props) {
 }
 
 export function getComponentInfo(component, propOverrides = {}) {
-  // eslint-disable-next-line no-underscore-dangle
-  const { displayName, props } = component.__docgenInfo;
-  return {
-    component,
-    name: kebabCase(displayName),
-    props: getProps(props, propOverrides),
-    requiredProps: getRequiredProps(props)
-  };
+  try {
+    // eslint-disable-next-line no-underscore-dangle
+    const { displayName, props } = component.__docgenInfo;
+    return {
+      component,
+      name: kebabCase(displayName),
+      props: getProps(props, propOverrides),
+      requiredProps: getRequiredProps(props)
+    };
+  } catch (error) {
+    console.error(component);
+    throw error;
+  }
 }
 
 export default {
@@ -128,7 +130,8 @@ export default {
         circle: PropTypes.bool
       }
     },
-    getComponentInfo(Button, { size: [KILO, MEGA, GIGA] }),
+    // TODO: Make React DocGen work with TypeScript
+    // getComponentInfo(Button, { size: [KILO, MEGA, GIGA] }),
     getComponentInfo(Blockquote, {
       size: [Blockquote.KILO, Blockquote.MEGA, Blockquote.GIGA]
     }),
@@ -184,9 +187,10 @@ export default {
       prefix: PropTypes.element,
       suffix: PropTypes.element
     }),
-    getComponentInfo(Text, {
-      size: [Text.KILO, Text.MEGA, Text.GIGA]
-    }),
+    // TODO: Make React DocGen work with TypeScript
+    // getComponentInfo(Text, {
+    //   size: ['kilo', 'mega', 'giga']
+    // }),
     getComponentInfo(TextArea),
     getComponentInfo(Toggle)
   ]