feat(search): show typescript support

Author: Haroenv

_sass/_search.scss

@@ -348,6 +348,13 @@ $ais-muted-color: rgba(black, 0.5);
     width: 26px;
     height: 26px;
   }
+
+  &-typescript {
+    margin-left: 0.2em;
+    width: 0.8em;
+    height: 0.8em;
+    vertical-align: baseline;
+  }
 }
 
 .ais-Pagination {

assets/search/ico-typescript.svg

@@ -1,5 +1,5 @@
 import React from 'react';
-import { License, Deprecated, Owner, Downloads } from '../Hit';
+import { License, Deprecated, Owner, Downloads, TypeScript } from '../Hit';
 import { Keywords, safeMarkdown } from '../util';
 
 const Description = ({ description, deprecated }) => (
@@ -26,6 +26,7 @@ const Header = ({
   deprecated,
   keywords,
   version,
+  types,
 }) => (
   <header className="details-main--header">
     <h2 className="details-main--title d-inline-block m-2">{name}</h2>
@@ -38,6 +39,7 @@ const Header = ({
       <License type={license} />
       <Deprecated deprecated={deprecated} />
       <span className="ais-Hit-version">{version}</span>
+      <TypeScript ts={types.ts} />
     </div>
     <Description description={description} deprecated={deprecated} />
     <Keywords keywords={keywords} />

js/src/lib/Details/Header.js

@@ -335,6 +335,7 @@ class Details extends Component {
             deprecated={this.state.deprecated}
             keywords={this.state.keywords}
             version={this.state.version}
+            types={this.state.types}
           />
           <section id="readme" className="details-doc">
             <h3 className="details-doc--title details-doc--title__readme py-1">

js/src/lib/Details/index.js

@@ -55,6 +55,17 @@ export const Downloads = ({ downloads = 0, humanDownloads }) => (
   </span>
 );
 
+export const TypeScript = ({ ts = false }) => {
+  return ts !== false ? (
+    <img
+      className="ais-Hit-typescript"
+      src="/assets/search/ico-typescript.svg"
+      alt={`TypeScript support: ${ts}`}
+      title={`TypeScript support: ${ts}`}
+    />
+  ) : null;
+};
+
 const Repository = ({ repository, name }) => {
   const [provider] = repository.host.split('.');
 
@@ -110,6 +121,7 @@ const Hit = ({ hit, onTagClick, onOwnerClick }) => (
     <License type={hit.license} />
     <Deprecated deprecated={hit.deprecated} />
     <span className="ais-Hit-version">{hit.version}</span>
+    <TypeScript ts={hit.types.ts} />
     <p className="ais-Hit-description">
       {hit.deprecated ? (
         hit.deprecated

js/src/lib/Hit/index.js

@@ -89,6 +89,7 @@ class Search extends Component {
             'name',
             'owner',
             'version',
+            'types',
           ]}
           attributesToHighlight={['name', 'description', 'keywords']}
         />

js/src/lib/Search/index.js

@@ -51,5 +51,6 @@ export default {
   version: '',
   versions: {},
   tags: {},
+  types: {},
   loaded: false,
 };