Merge pull request #158 from xsnippet/convert-components-to-ts

Convert some components to ts && add image module

Author: lotrien

.eslintrc.json

@@ -30,6 +30,7 @@
       "named": "never"
     }],
     "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off"
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-var-requires": "off"
   }
 }

package-lock.json

@@ -27,7 +27,10 @@
     "moduleNameMapper": {
       "^.+\\.(css|styl|svg|jpg)$": "identity-obj-proxy"
     },
-    "testURL": "http://localhost"
+    "testURL": "http://localhost",
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": "ts-jest"
+    }
   },
   "dependencies": {
     "brace": "^0.11.0",
@@ -51,13 +54,15 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/runtime": "^7.12.5",
+    "@types/enzyme": "^3.10.8",
+    "@types/jest": "^26.0.20",
     "@types/parse-link-header": "^1.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.1.7",
     "@typescript-eslint/eslint-plugin": "^4.14.0",
     "@typescript-eslint/parser": "^4.14.0",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^23.4.2",
     "babel-loader": "^8.0.0",
     "clean-webpack-plugin": "^0.1.17",
     "css-loader": "^0.28.7",
@@ -70,11 +75,12 @@
     "html-webpack-plugin": "^3.2.0",
     "identity-obj-proxy": "^3.0.0",
     "image-webpack-loader": "^5.0.0",
-    "jest": "^22.0.4",
+    "jest": "^26.6.3",
     "mini-css-extract-plugin": "^0.4.0",
     "style-loader": "^0.19.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
+    "ts-jest": "^26.4.4",
     "typescript": "^4.1.3",
     "webpack": "^4.45.0",
     "webpack-cli": "^3.1.1",

package.json

@@ -0,0 +1,15 @@
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FC<React.SVGProps<
+    SVGElement
+  > & { title?: string }>;
+
+  const src: string;
+  export default src;
+}

src/assets.d.ts

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, FC } from 'react'
 
 import Title from './common/Title'
 
@@ -9,7 +9,7 @@ import KaterynaImage from '../assets/photos/kateryna.jpg'
 
 import '../styles/AboutUs.styl'
 
-const About = () => (
+const About: FC = () => (
   <Fragment>
     <div className="about">
       <Title title="About" />

src/components/About.jsx renamed to src/components/About.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { FC } from 'react'
 import { NavLink } from 'react-router-dom'
 
 import Logo from '../assets/icons/xsnippet.svg'
 
 import '../styles/Header.styl'
 
-const Header = () => (
+const Header: FC = () => (
   <header className="header">
     <div className="header-logo">
       <NavLink exact to="/">

src/components/Header.jsx renamed to src/components/Header.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { FC } from 'react'
 import { NavLink } from 'react-router-dom'
 
 import '../styles/Sidebar.styl'
 
-const Sidebar = () => (
+const Sidebar: FC = () => (
   <nav className="sidebar">
     <ul className="sidebar-list">
       <li className="sidebar-item">

src/components/Sidebar.jsx renamed to src/components/Sidebar.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { FC } from 'react'
 import SpinnerImg from '../../assets/icons/ripple.svg'
 
 import '../../styles/common/Spinner.styl'
 
-const Spinner = () => (
+const Spinner: FC = () => (
   <div className="spinner">
     <img src={SpinnerImg} alt="Loading..." />
   </div>

src/components/common/Spinner.jsx renamed to src/components/common/Spinner.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from 'react'
+
+import '../../styles/common/Title.styl'
+
+const Title: FC<{title:string, additionalClass?:string}> = ({ title, additionalClass = '' }) => (
+  <div className={`title ${additionalClass}`}>{title}</div>
+)
+
+export default Title

src/components/common/Title.jsx

@@ -3,19 +3,21 @@ import { shallow } from 'enzyme'
 
 import Title from '../../../src/components/common/Title'
 
+const title = 'Snippet page';
+
 describe('Title', () => {
   it('should return correct title', () => {
-    const wrapper = shallow(<Title title="Snippet page" />)
-    expect(wrapper.text()).toEqual('Snippet page')
+    const wrapper = shallow(<Title title={title} />)
+    expect(wrapper.text()).toEqual(title)
   })
 
   it('should have additional class if one was provided', () => {
-    const wrapper = shallow(<Title additionalClass="custom-title" />)
+    const wrapper = shallow(<Title title={title} additionalClass="custom-title" />)
     expect(wrapper.hasClass('custom-title')).toEqual(true)
   })
 
   it('should not have additional class if one wasn\'t provided', () => {
-    const wrapper = shallow(<Title />)
+    const wrapper = shallow(<Title title={title} />)
     expect(wrapper.hasClass('custom-title')).toEqual(false)
   })
 })

src/components/common/Title.tsx

@@ -6,7 +6,7 @@ describe('misc', () => {
     const snippet = {
       content: 'const memoizedSyntaxes = useMemo()',
       created_at: '2019-09-29T19:23:31',
-      id: 364066,
+      id: '364066',
       syntax: 'javascript',
       tags: ['trg', 'rtyger'],
       title: 'some misterious title',
@@ -26,7 +26,7 @@ describe('misc', () => {
     })
 
     it('should return propper title', () => {
-      const untitled = { ...snippet, title: undefined }
+      const untitled = { ...snippet, title: '' }
       const expected = `#${untitled.id}, Untitled`
 
       expect(getSnippetTitle(untitled)).toEqual(expected)

tests/components/Sidebar.test.jsx renamed to tests/components/Sidebar.test.tsx

@@ -5,7 +5,8 @@
     "target": "es5",
     "jsx": "react",
     "allowJs": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
   },
   "include": [
     "src/"