refactor: jsx => tsx

components/builder-bar.tsx

@@ -2,7 +2,16 @@ import React from 'react'
 
 const DEFAULT_SIZE = 42
 
-export default class BuilderBar extends React.Component {
+interface BuilderBarProps {
+  placeholder: string;
+  badgeURL: string;
+  host: string;
+  onChange: (value: string) => void;
+  onFocus: () => void;
+  onBlur: () => void;
+}
+
+export default class BuilderBar extends React.Component<BuilderBarProps> {
   shouldComponentUpdate ({ badgeURL }) {
     const url = badgeURL ? `#${badgeURL}` : window.location.pathname
     window.history.replaceState({}, document.title, url)
@@ -24,7 +33,7 @@ export default class BuilderBar extends React.Component {
         <span>{host}</span>
         <input
           tabIndex={1}
-          spellCheck='false'
+          spellCheck={false}
           size={(inputSize || placeholder.length) + 1}
           placeholder={placeholder}
           onChange={this.handleChange}

components/builder-hints.tsx

@@ -1,6 +1,8 @@
+import * as CSS from 'csstype'
+
 export default function BuilderHints ({ focus, badgeURL }) {
   const visible = !focus && !badgeURL
-  const style = {
+  const style: CSS.Properties = {
     opacity: visible ? 1 : 0,
     pointerEvents: visible ? 'auto' : 'none'
   }
@@ -42,11 +44,11 @@ export default function BuilderHints ({ focus, badgeURL }) {
 }
 
 const Hint = ({ left, width, height, children, align = 'left' }) => {
-  const wrapperPos = {
+  const wrapperPos: CSS.Properties = {
     left: `calc(50% + ${left}px)`,
     height: `${height * 54}px`,
     width: `${width}px`,
-    textAlign: align
+    textAlign: align as CSS.TextAlignProperty
   }
   return (
     <div className='hint' style={wrapperPos}>

components/builder-preview.tsx

@@ -1,5 +1,5 @@
 import debounceRender from 'react-debounce-render'
-import BadgenTitle from './badgen-title.jsx'
+import BadgenTitle from './badgen-title'
 
 const BadgePreview = ({ host, badgeURL, focus }) => {
   const showPreview = focus || !!badgeURL

components/gallery-layout.js

@@ -1,24 +0,0 @@
-import React from 'react'
-import GalleryHeader from './gallery-header.js'
-import Footer from './footer.js'
-
-export default class GalleryLayout extends React.Component {
-  render () {
-    const { tab, children } = this.props
-    return (
-      <div>
-        <GalleryHeader current={tab} />
-        <div className='content'>
-          {children}
-        </div>
-        <Footer />
-        <style jsx>{`
-          .content {
-            padding: 5rem 0;
-          }
-        `}
-        </style>
-      </div>
-    )
-  }
-}

components/home-intro.tsx

@@ -38,6 +38,11 @@ export default function HomeIntro ({ isFlat }) {
         Override default label color.
         <a href='/npm/dm/express?labelColor=pink'>e.g.</a>
       </li>
+      <li>
+        <code>scale</code>
+        Custom badge scale
+        <a href='/badge/docker/v1.2.3/blue?icon=docker&scale=2'>e.g.</a>
+      </li>
     </ul>
 
     <h3>Advanced usage</h3>

libs/badgen-serve.ts

@@ -80,7 +80,7 @@ export function badgenServe (handlers: BadgenServeHandlers): Function {
           }
         }
 
-        return serveBadge(req, res, { params, query })
+        return serveBadge(req, res, { params, query: query as any })
       } catch (error) {
         if (error instanceof BadgenError) {
           console.error(`BGE${error.code} "${error.status}" ${req.url}`)

libs/serve-404.ts

@@ -17,5 +17,5 @@ export default function (req, res) {
     }
   }
 
-  serveBadge(req, res, { code: 404, params, query })
+  serveBadge(req, res, { code: 404, params, query: query as any })
 }

package.json

@@ -57,6 +57,7 @@
     "@typescript-eslint/eslint-plugin": "^2.3.2",
     "@typescript-eslint/parser": "^2.3.2",
     "@zeit/next-typescript": "^1.1.1",
+    "csstype": "^2.6.6",
     "eslint": "^6.5.1",
     "eslint-plugin-react": "^7.15.1",
     "fs-extra": "^8.1.0",

pages/builder.js

@@ -1,9 +1,9 @@
 import React from 'react'
-import Preview from '../components/builder-preview.js'
-import Bar from '../components/builder-bar.js'
-import Hints from '../components/builder-hints.js'
-import Helper from '../components/builder-helper.js'
-import Footer from '../components/footer.js'
+import Preview from '../components/builder-preview'
+import Bar from '../components/builder-bar'
+import Hints from '../components/builder-hints'
+import Helper from '../components/builder-helper'
+import Footer from '../components/footer'
 
 export default class BuilderPage extends React.Component {
   state = {

pages/index.js

@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react'
-import BadgeExamples from '../components/badge-examples.js'
-import BadgenTitle from '../components/badgen-title.jsx'
-import TopBar from '../components/top-bar.jsx'
-import Intro from '../components/home-intro.js'
-import Footer from '../components/footer.js'
+import BadgeExamples from '../components/badge-examples'
+import BadgenTitle from '../components/badgen-title'
+import TopBar from '../components/top-bar'
+import Intro from '../components/home-intro'
+import Footer from '../components/footer'
 import examples from '../static/.meta/badges.json'
 
 const Index = () => {