✨ add Blank component

.eslintrc

@@ -205,13 +205,13 @@
           "./src"
         ]
       },
+      "react": {
+        "version": "detect"
+      },
       "typescript": {
         "alwaysTryTypes": true,
         "project": "./"
       }
-    },
-    "react": {
-      "version": "detect"
     }
   }
 }

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": false
+    "source.fixAll.eslint": true
   },
   "eslint.enable": true
 }

playground/.eslintrc

@@ -15,6 +15,7 @@
     "import/resolver": {
       "node": {
         "paths": [
+          "./playground/src",
           "./src"
         ]
       }

playground/src/components/Blank/Blank.spec.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { mount, shallow, configure } from 'enzyme';
+import Blank from './Blank';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+
+const wrapper = mount(<Blank />);
+
+describe('Blank', () => {
+  it('should be defined', () => {
+    expect(Blank).toBeDefined();
+  });
+
+  it('should render correctly', () => {
+    const dom = shallow(<Blank />);
+    expect(dom).toMatchSnapshot();
+  });
+
+  // it('should update hooks', () => {
+  //   wrapper.simulate('click');
+  // });
+});

playground/src/components/Blank/Blank.styles.tsx

@@ -0,0 +1,6 @@
+import { css } from '@emotion/core';
+import tw from 'twin.macro';
+
+export default css`
+  ${tw`bg-indigo-200`}
+`;

playground/src/components/Blank/Blank.tsx

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/core';
+
+import styles from './Blank.styles';
+
+const Blank = (): JSX.Element => {
+  const title = 'Hello world';
+
+  return <div css={styles}>{title}</div>;
+};
+
+Blank.defaultProps = {};
+
+export default Blank;

playground/src/components/Blank/index.js

@@ -0,0 +1 @@
+export { default } from './Blank';

playground/src/pages/index.tsx

@@ -3,17 +3,11 @@ import React from 'react';
 import { jsx } from '@emotion/core';
 import tw from 'twin.macro';
 
-import type { TypeA } from 'types';
-
-const Example: TypeA = {
-  name: 'next',
-};
+import Blank from 'components/Blank';
 
 const Home = (): JSX.Element => (
   <div>
-    <h1>
-      <p>{Example.name}</p>
-    </h1>
+    <Blank />
   </div>
 );