add initial TS types detection based on package.json content

components/Filters.tsx

@@ -71,6 +71,7 @@ export const FilterButton = (props: FilterButtonProps) => {
     ...platforms.map(platform => platform.param),
     'hasExample',
     'hasImage',
+    'hasTypes',
     'isMaintained',
     'isPopular',
     'isRecommended',
@@ -149,6 +150,12 @@ export const Filters = (props: FiltersProps) => {
                 paramName="hasImage"
                 title="Has image preview"
               />
+              <ToggleLink
+                key="hasTypes"
+                query={query}
+                paramName="hasTypes"
+                title="Has TypeScript types"
+              />
               <ToggleLink
                 key="isMaintained"
                 query={query}

components/Icons/index.tsx

@@ -273,3 +273,15 @@ export function Warning({ width = 17, height = 17, fill = colors.warningDark }:
     </Svg>
   );
 }
+
+export function TypeScript(props: Props) {
+  const { width = 16, height = 16, fill = colors.black } = props;
+  return (
+    <Svg width={width} height={height} viewBox="0 0 16 16" fill="none">
+      <Path
+        fill={fill}
+        d="M0,0v8v8h16V0H0z M9.1,8.7H7v5.9H5.6V8.7H3.5V7.4h5.6V8.7z M14.5,13.4c-0.3,0.7-0.9,1.1-1.8,1.3c-0.3,0-0.9,0-1.2,0c-0.6-0.1-1.3-0.4-1.6-0.9c-0.1-0.2-0.4-0.6-0.4-0.6l0.2-0.1l0.6-0.3l0.5-0.3l0.1,0.1c0.1,0.2,0.4,0.5,0.6,0.6c0.5,0.3,1.2,0.2,1.6-0.1c0.1-0.1,0.2-0.3,0.2-0.5c0-0.2,0-0.3-0.1-0.4c-0.1-0.2-0.4-0.3-1.1-0.6c-0.8-0.4-1.2-0.6-1.5-0.9c-0.2-0.2-0.4-0.5-0.4-0.8c-0.1-0.2-0.1-0.8,0-1c0.2-0.8,0.8-1.4,1.6-1.5c0.3-0.1,0.9,0,1.2,0l0,0c0.4,0.1,0.7,0.3,1,0.6c0.1,0.2,0.4,0.4,0.4,0.5c0,0-0.7,0.5-1.1,0.8c0,0-0.1-0.2-0.1-0.2c-0.2-0.3-0.4-0.4-0.8-0.4c-0.5,0-0.8,0.2-0.8,0.6c0,0.1,0,0.2,0.1,0.3c0.1,0.2,0.3,0.4,0.9,0.6c1.1,0.5,1.6,0.8,1.9,1.3C14.7,12,14.8,12.8,14.5,13.4z"
+      />
+    </Svg>
+  );
+}

components/Library/MetaData.tsx

@@ -5,7 +5,7 @@ import { colors, A, P, Caption, darkColors } from '../../common/styleguide';
 import CustomAppearanceContext from '../../context/CustomAppearanceContext';
 import { Library as LibraryType } from '../../types';
 import { getTimeSinceToday } from '../../util/datetime';
-import { Calendar, Star, Download, Issue, Web, License, Fork, Code } from '../Icons';
+import { Calendar, Star, Download, Issue, Web, License, Fork, Code, TypeScript } from '../Icons';
 import { DirectoryScore } from './DirectoryScore';
 
 type Props = {
@@ -54,6 +54,13 @@ const generateData = (library, secondary, isDark) => {
               ),
           }
         : null,
+      github.hasTypes
+        ? {
+            id: 'types',
+            icon: <TypeScript fill={iconColor} width={16} height={16} />,
+            content: <P style={paragraphStyles}>TypeScript Types</P>,
+          }
+        : null,
       library.examples && library.examples.length
         ? {
             id: 'examples',

pages/api/libraries/index.ts

@@ -53,6 +53,7 @@ function handler(req: NextApiRequest, res: NextApiResponse) {
     },
     hasExample: req.query.hasExample,
     hasImage: req.query.hasImage,
+    hasTypes: req.query.hasTypes,
     isMaintained: req.query.isMaintained,
     isPopular: req.query.isPopular,
     isRecommended: req.query.isRecommended,

scripts/fetch-github-data.js

@@ -225,29 +225,35 @@ const getLicenseFromPackageJson = packageJson => {
 };
 
 const createRepoDataWithResponse = (json, monorepo) => {
-  if (monorepo && json.packageJson) {
+  if (json.packageJson) {
     const packageJson = JSON.parse(json.packageJson.text);
-    json.homepageUrl = packageJson.homepage;
-    json.name = packageJson.name;
-    json.topics = packageJson.keywords;
-    json.description = packageJson.description;
-    json.licenseInfo = getLicenseFromPackageJson(packageJson);
-  }
-
-  if (!monorepo && json.packageJson) {
-    const packageJson = JSON.parse(json.packageJson.text);
-    json.topics = json.repositoryTopics.nodes.map(({ topic }) => topic.name);
 
-    if (!json.description) {
+    if (monorepo) {
+      json.homepageUrl = packageJson.homepage;
+      json.name = packageJson.name;
+      json.topics = packageJson.keywords;
       json.description = packageJson.description;
+      json.licenseInfo = getLicenseFromPackageJson(packageJson);
     }
 
-    if (json.topics.length === 0) {
-      json.topics = packageJson.keywords;
+    if (!monorepo) {
+      json.topics = json.repositoryTopics.nodes.map(({ topic }) => topic.name);
+
+      if (!json.description) {
+        json.description = packageJson.description;
+      }
+
+      if (json.topics.length === 0) {
+        json.topics = packageJson.keywords;
+      }
+
+      if (!json.licenseInfo || (json.licenseInfo && json.licenseInfo.key === 'other')) {
+        json.licenseInfo = getLicenseFromPackageJson(packageJson) || json.licenseInfo;
+      }
     }
 
-    if (!json.licenseInfo || (json.licenseInfo && json.licenseInfo.key === 'other')) {
-      json.licenseInfo = getLicenseFromPackageJson(packageJson) || json.licenseInfo;
+    if (packageJson.types || packageJson.typings) {
+      json.types = true;
     }
   }
 
@@ -289,5 +295,6 @@ const createRepoDataWithResponse = (json, monorepo) => {
     topics,
     license: json.licenseInfo,
     lastRelease: json.lastRelease,
+    hasTypes: json.types,
   };
 };

types/index.ts

@@ -1,11 +1,20 @@
 export type Query = {
-  ios?: string;
-  expo?: string;
   android?: string;
+  expo?: string;
+  ios?: string;
+  macos?: string;
   web?: string;
+  windows?: string;
   order?: 'quality' | 'recommended' | 'issues' | 'downloads' | 'stars';
   search?: string;
   offset?: string;
+  hasExample?: string;
+  hasImage?: string;
+  hasTypes?: string;
+  isMaintained?: string;
+  isPopular?: string;
+  isRecommended?: string;
+  wasRecentlyUpdated?: string;
 };
 
 export type Library = {
@@ -49,6 +58,14 @@ export type Library = {
       url: string;
       id: string;
     };
+    lastRelease: {
+      name: string;
+      tagName: string;
+      createdAt: Date;
+      publishedAt: Date;
+      isPrerelease: boolean;
+    };
+    hasTypes: boolean;
   };
   images: string[];
   npmPkg: string;

util/search.js

@@ -7,6 +7,7 @@ export const handleFilterLibraries = ({
   support,
   hasExample,
   hasImage,
+  hasTypes,
   isMaintained,
   isPopular,
   isRecommended,
@@ -55,6 +56,10 @@ export const handleFilterLibraries = ({
       return false;
     }
 
+    if (hasTypes && !library.github.hasTypes) {
+      return false;
+    }
+
     if (isMaintained && library.unmaintained) {
       return false;
     }