Google Fonts picker - remove need for google api (codesandbox#3050)

* remove need for google

* only show 200 fonts for speed

Author: SaraVieira

packages/app/package.json

@@ -72,7 +72,6 @@
     "@codesandbox/executors": "^0.1.0",
     "@codesandbox/template-icons": "^1.0.1",
     "@emmetio/codemirror-plugin": "^0.3.5",
-    "@samuelmeuli/font-manager": "^1.2.0",
     "@sentry/webpack-plugin": "^1.8.0",
     "@styled-system/css": "^5.0.23",
     "@svgr/core": "^2.4.1",

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/List.tsx

@@ -1,56 +1,46 @@
 import React, { FunctionComponent, useState, useMemo } from 'react';
-import { Font } from '@samuelmeuli/font-manager';
 import { List, SearchFonts, FontLI, FontFamily, Arrow } from './elements';
+import { fonts } from './fonts';
 
 type Props = {
-  fonts: Font[];
   onSelection: (e: any) => void;
   activeFontFamily: string;
-  expanded: boolean;
 };
 
 export const FontList: FunctionComponent<Props> = ({
-  fonts,
   onSelection,
   activeFontFamily,
-  expanded,
 }) => {
   const [searchTerm, setSearchTerm] = useState('');
+  const usedFonts = fonts.slice(0, 200);
 
   const updateSearch = (e: any) => setSearchTerm(e.target.value);
 
-  const getFontId = (fontFamily: string): string =>
-    fontFamily.replace(/\s+/g, '-').toLowerCase();
-
-  const getFonts: Font[] = useMemo(
+  const getFonts: string[] = useMemo(
     () =>
-      fonts.filter(f =>
-        f.family.toLowerCase().includes(searchTerm.trim().toLowerCase())
+      usedFonts.filter(f =>
+        f.toLowerCase().includes(searchTerm.trim().toLowerCase())
       ),
-    [fonts, searchTerm]
+    [searchTerm, usedFonts]
   );
   return (
     <>
       <Arrow />
-      <List expanded={expanded}>
+      <List>
         <SearchFonts
           type="text"
           value={searchTerm}
           onChange={updateSearch}
           placeholder="Search Typefaces"
         />
-        {getFonts.map((font: Font) => (
+        {getFonts.map((font: string) => (
           <FontLI
-            key={font.family}
-            onClick={onSelection}
-            onKeyPress={onSelection}
+            key={font}
+            onClick={() => onSelection(font)}
+            onKeyPress={() => onSelection(font)}
           >
-            <FontFamily
-              type="button"
-              id={`font-button-${getFontId(font.family)}`}
-              active={font.family === activeFontFamily}
-            >
-              {font.family}
+            <FontFamily type="button" active={font === activeFontFamily}>
+              {font}
             </FontFamily>
           </FontLI>
         ))}

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/elements.ts

@@ -1,6 +1,11 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import Color from 'color';
 
+const svg = props =>
+  `data:image/svg+xml,%3Csvg width='7' height='4' viewBox='0 0 7 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.50007 4L1.27146e-07 1.35122e-07L7 -4.76837e-07L3.50007 4Z' fill='${
+    props.theme.light ? 'black' : 'white'
+  }'/%3E%3C/svg%3E%0A`;
+
 const makeDarker = ({ theme }) =>
   Color(theme['input.background'])
     .darken(theme.light ? 0.1 : 0.3)
@@ -80,13 +85,8 @@ export const List = styled.ul<{ expanded?: boolean }>`
   background-color: ${props => makeLighter(props)};
   width: 240px;
   z-index: 10;
-
-  ${props =>
-    props.expanded &&
-    css`
-      max-height: 130px;
-      display: block;
-    `}
+  max-height: 130px;
+  display: block;
 `;
 
 export const SelectedFont = styled.button<{ done?: boolean }>`
@@ -105,23 +105,18 @@ export const SelectedFont = styled.button<{ done?: boolean }>`
   position: relative;
   box-sizing: border-box;
   outline: none;
+  cursor: pointer;
 
-  ${props =>
-    props.done &&
-    css`
-      :after {
-        content: '';
-        background-image: url("${`data:image/svg+xml,%3Csvg width='7' height='4' viewBox='0 0 7 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.50007 4L1.27146e-07 1.35122e-07L7 -4.76837e-07L3.50007 4Z' fill='${
-          props.theme.light ? 'black' : 'white'
-        }'/%3E%3C/svg%3E%0A`}");
-        width: 7px;
-        height: 4px;
-        position: absolute;
-        right: 0.5rem;
-        top: 50%;
-        transform: translateY(-50%);
-      }
-    `}
+  :after {
+      content: '';
+      background-image: url("${props => svg(props)}");
+      width: 7px;
+      height: 4px;
+      position: absolute;
+      right: 0.5rem;
+      top: 50%;
+      transform: translateY(-50%);
+    }
 `;
 
 export const Arrow = styled.div`