Merge pull request #70 from questbeat/tailwindcss

Tailwindcss
nek023 · May 6, 2023 · d305825 · d305825
2 parents b647570 + 63d563c
commit d305825
Show file tree

Hide file tree

Showing 15 changed files with 1,650 additions and 723 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,9 +6,13 @@
   "author": "Katsuma Tanaka",
   "license": "MIT",
   "scripts": {
-    "build": "esbuild src/popup/index.tsx src/service_worker/index.ts --bundle --minify --outdir=dist",
+    "build": "run-p build:css build:js",
+    "build:css": "tailwindcss -i src/popup/index.css -o dist/popup/index.css --minify",
+    "build:css:watch": "npm run build:css -- --watch",
+    "build:js": "esbuild src/popup/index.tsx src/service_worker/index.ts --bundle --minify --outdir=dist",
+    "build:js:watch": "npm run build:js -- --watch",
     "clean": "rimraf dist",
-    "dev": "npm run build -- --watch",
+    "dev": "run-p build:css:watch build:js:watch",
     "format": "prettier --write src",
     "lint": "eslint --ext .ts,.tsx src",
     "pack": "npm run clean && npm run build && zip -r anchor.zip dist public manifest.json",
@@ -18,8 +22,7 @@
     "fuse.js": "^6.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "scroll-into-view-if-needed": "^3.0.10",
-    "styled-components": "^5.3.10"
+    "scroll-into-view-if-needed": "^3.0.10"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
@@ -29,7 +32,6 @@
     "@types/node": "^18.16.3",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.1",
-    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.59.2",
     "@typescript-eslint/parser": "^5.59.2",
     "esbuild": "^0.17.18",
@@ -39,9 +41,10 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "jest-styled-components": "^7.1.1",
     "npm-check-updates": "^16.10.9",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
+    "tailwindcss": "^3.3.2",
     "ts-jest": "^29.1.0",
     "typescript": "^5.0.4"
   }

diff --git a/public/popup.html b/public/popup.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>anchor</title>
-    <link href="../dist/popup/index.css" rel="stylesheet">
+    <link href="../dist/popup/index.css" rel="stylesheet" />
     <script src="../dist/popup/index.js" defer></script>
   </head>
   <body>

diff --git a/src/popup/components/App.tsx b/src/popup/components/App.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useState } from "react";
-import styled from "styled-components";
 import { ResultList } from "./ResultList";
 import { SearchBar } from "./SearchBar";
 import { KeyboardEventHandler } from "./KeyboardEventHandler";
@@ -17,10 +16,6 @@ import {
   useSearchResults,
 } from "../lib/useQueryResults";
 
-const Container = styled.div`
-  padding: 8px;
-`;
-
 const initialQuery = new URL(document.URL).searchParams.get("q") || "";
 
 export const App: React.FC = () => {
@@ -83,14 +78,14 @@ export const App: React.FC = () => {
       onUp={handleUp}
       onDown={handleDown}
     >
-      <Container>
+      <div className="w-screen h-screen p-2 flex flex-col gap-2">
         <SearchBar value={query} onValueChange={handleValueChange} />
         <ResultList
           items={items}
           onItemClick={handleItemClick}
           selectedItemIndex={selectedItemIndex}
         />
-      </Container>
+      </div>
     </KeyboardEventHandler>
   );
 };
diff --git a/src/popup/components/ResultList.tsx b/src/popup/components/ResultList.tsx
@@ -1,21 +1,7 @@
 import React, { useCallback } from "react";
-import styled from "styled-components";
 import { Item } from "../../shared/types";
 import { ResultListItem } from "./ResultListItem";
 
-const Container = styled.ul`
-  width: 100%;
-  height: 432px; /* (46 + 2) * 9 */
-  padding: 0;
-  margin: 8px 0 0;
-  display: block;
-  list-style: none;
-  overflow-x: hidden;
-  overflow-y: auto;
-  white-space: nowrap;
-  cursor: default;
-`;
-
 interface ResultListProps {
   items: Item[];
   selectedItemIndex: number;
@@ -37,7 +23,7 @@ export const ResultList: React.FC<ResultListProps> = ({
   );
 
   return (
-    <Container>
+    <div className="w-full flex flex-col grow overflow-y-auto">
       {items.map((item, index) => (
         <ResultListItem
           key={index}
@@ -46,6 +32,6 @@ export const ResultList: React.FC<ResultListProps> = ({
           onClick={handleClick}
         />
       ))}
-    </Container>
+    </div>
   );
 };
diff --git a/src/popup/components/ResultListItem.tsx b/src/popup/components/ResultListItem.tsx
@@ -1,74 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import scrollIntoView from "scroll-into-view-if-needed";
-import styled, { css } from "styled-components";
 import { Item, ItemType } from "../../shared/types";
 import { getFaviconUrl } from "../lib/getFaviconUrl";
 
-const ItemLeft = styled.div`
-  width: 30px;
-  min-width: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const ItemRight = styled.div`
-  margin-left: 8px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  flex: 1;
-`;
-
-const ItemImage = styled.img`
-  width: 24px;
-  height: 24px;
-`;
-
-const ItemTitle = styled.div`
-  color: #333333;
-  font-size: 15px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-`;
-
-const ItemUrl = styled.div`
-  color: #9999aa;
-  margin-top: 2px;
-  font-size: 13px;
-  font-weight: lighter;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-`;
-
-const ItemContainer = styled.li<{ selected: boolean }>`
-  width: 100%;
-  height: 46px;
-  padding: 3px;
-  margin-bottom: 2px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-
-  ${(props) =>
-    props.selected &&
-    css`
-      background-color: #0067ff;
-
-      ${ItemTitle} {
-        color: #fafafa;
-      }
-
-      ${ItemUrl} {
-        color: #bcd5fb;
-      }
-    `}
-`;
-
 interface ResultListItemProps {
   item: Item;
   selected: boolean;
@@ -80,7 +14,7 @@ export const ResultListItem: React.FC<ResultListItemProps> = ({
   onClick,
   selected,
 }) => {
-  const itemContainerRef = useRef<HTMLLIElement>(null);
+  const itemContainerRef = useRef<HTMLDivElement>(null);
 
   const handleClick = useCallback(() => {
     if (onClick == null) return;
@@ -97,28 +31,44 @@ export const ResultListItem: React.FC<ResultListItemProps> = ({
     }
   }, [selected]);
 
-  const itemImage = useMemo(() => {
+  const faviconUrl = useMemo(() => {
     let faviconUrl: string | undefined = undefined;
     if (item.type === ItemType.Tab) faviconUrl = item.faviconUrl;
     if (faviconUrl == null && item.url != null)
       faviconUrl = getFaviconUrl(item.url);
-    return <ItemImage src={faviconUrl} />;
+    return faviconUrl;
   }, [item]);
 
   return useMemo(
     () => (
-      <ItemContainer
+      <div
+        className={`w-full min-h-[3rem] px-1 pb-px flex flex-row items-center gap-2 ${
+          selected ? "bg-blue-700" : ""
+        }`}
         onClick={handleClick}
         ref={itemContainerRef}
-        selected={selected}
       >
-        <ItemLeft>{itemImage}</ItemLeft>
-        <ItemRight>
-          <ItemTitle>{item.title}</ItemTitle>
-          <ItemUrl>{item.url}</ItemUrl>
-        </ItemRight>
-      </ItemContainer>
+        <div className="min-w-[2rem] flex justify-center">
+          <img className="w-6 h-6" src={faviconUrl} alt={item.title} />
+        </div>
+        <div className="grow flex flex-col gap-0.5 overflow-hidden">
+          <div
+            className={`text-sm truncate ${
+              selected ? "text-gray-100" : "text-gray-700"
+            }`}
+          >
+            {item.title}
+          </div>
+          <div
+            className={`text-xs font-light truncate ${
+              selected ? "text-gray-300" : "text-gray-400"
+            }`}
+          >
+            {item.url}
+          </div>
+        </div>
+      </div>
     ),
-    [handleClick, item, itemImage, selected]
+    [faviconUrl, handleClick, item, selected]
   );
 };
diff --git a/src/popup/components/SearchBar.tsx b/src/popup/components/SearchBar.tsx
@@ -1,19 +1,4 @@
 import React, { useCallback, useEffect, useRef } from "react";
-import styled from "styled-components";
-
-const SearchBarInput = styled.input`
-  width: 100%;
-  height: 40px;
-  margin: 0;
-  padding: 5px;
-  font-size: 26px;
-  border-radius: 4px;
-  border: 1px solid #cccccc;
-
-  &:focus {
-    outline: none;
-  }
-`;
 
 interface SearchBarProps {
   value: string;
@@ -46,8 +31,10 @@ export const SearchBar: React.FC<SearchBarProps> = ({
   );
 
   return (
-    <SearchBarInput
+    <input
+      className="w-full p-1 rounded border border-gray-300 text-2xl focus:outline-none"
       type="text"
+      title="query"
       value={value}
       ref={inputRef}
       autoFocus={true}