Merge pull request #594 from hogashi/tailwind

use Tailwind
hogashi · Nov 28, 2023 · dba0017 · dba0017
2 parents c46e689 + 33b5a4c
commit dba0017
Show file tree

Hide file tree

Showing 9 changed files with 1,239 additions and 629 deletions.
diff --git a/__tests__/__snapshots__/popup.test.js.snap b/__tests__/__snapshots__/popup.test.js.snap
diff --git a/dist/css/popup.css b/dist/css/popup.css
diff --git a/dist/html/popup.html b/dist/html/popup.html
@@ -1,11 +1,15 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <title>Options - twitter画像原寸ボタン</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="../js/popup.bundle.js"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>Options - twitter画像原寸ボタン</title>
+  <link rel="stylesheet" href="../css/popup.css" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="../js/popup.bundle.js"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -5,8 +5,12 @@
   "author": "hogashi <[email protected]>",
   "license": "MIT",
   "scripts": {
-    "build": "webpack --version && webpack --mode production",
-    "build-dev": "webpack --version && webpack --mode development",
+    "build:webpack": "webpack --version && webpack --mode production",
+    "build:tailwindcss": "tailwindcss -i ./src/input.css -o ./dist/css/popup.css",
+    "build": "run-p build:webpack build:tailwindcss",
+    "watch:webpack": "webpack --version && webpack --mode production --watch",
+    "watch:tailwindcss": "tailwindcss -i ./src/input.css -o ./dist/css/popup.css --watch",
+    "watch": "run-p watch:webpack watch:tailwindcss",
     "lint": "biome check --apply-unsafe src __tests__",
     "format": "biome format --write src __tests__",
     "rome:fix": "run-s lint format",
@@ -46,13 +50,15 @@
     "react-test-renderer": "17.0.2",
     "typescript": "5.3.2",
     "webpack": "5.89.0",
-    "webpack-cli": "5.1.4"
+    "webpack-cli": "5.1.4",
+    "tailwindcss": "3.3.5"
   },
   "dependencies": {
     "@babel/polyfill": "7.12.1",
     "@babel/runtime": "7.23.4",
     "@biomejs/biome": "1.4.0",
-    "@material-ui/core": "4.12.4",
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   }

diff --git a/src/extension-contexts/options.ts b/src/extension-contexts/options.ts
@@ -1,8 +1,11 @@
 import { OPTION_KEYS, OptionsBool, initialOptionsBool } from '../constants';
 
-export const setOptions = (options: OptionsBool): void => {
+export const setOptions = (options: OptionsBool, callback?: () => void): void => {
   chrome.storage.sync.set(options, () => {
     console.log('options set');
+    if (callback) {
+      callback();
+    }
   });
 };
 

diff --git a/src/extension-contexts/popup.tsx b/src/extension-contexts/popup.tsx
@@ -1,12 +1,3 @@
-import AppBar from '@material-ui/core/AppBar';
-import Button from '@material-ui/core/Button';
-import Checkbox from '@material-ui/core/Checkbox';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
 import React, { useCallback, useState } from 'react';
 import ReactDOM from 'react-dom';
 import {
@@ -39,9 +30,15 @@ interface Props {
 export const Popup = (props: Props): JSX.Element => {
   const { optionsText, optionKeys, optionsEnabled } = props;
   const [enabled, setEnabled] = useState(optionsEnabled);
+  const [buttonText, setButtonText] = useState('設定を保存');
 
   const onSave = useCallback(() => {
-    setOptions(enabled);
+    setOptions(enabled, () => {
+      setButtonText('しました');
+      setTimeout(() => {
+        setButtonText('設定を保存');
+      }, 500);
+    });
     chrome.tabs.query({}, (result) =>
       result.forEach((tab) => {
         // console.log(tab);
@@ -68,67 +65,58 @@ export const Popup = (props: Props): JSX.Element => {
   const optionsItems: { [key: string]: JSX.Element } = {};
   optionKeys.forEach((key) => {
     optionsItems[key] = (
-      <ListItem
-        className={`checkboxListItem ${key}`}
-        dense
-        button
-        onClick={(): void => {
-          setEnabled(Object.assign({ ...enabled }, { [key]: !enabled[key] }));
-        }}
-      >
-        <Checkbox checked={enabled[key]} style={{ padding: '4px 12px' }} tabIndex={-1} disableRipple />
-        <ListItemText primary={optionsText[key]} />
-      </ListItem>
+      <div className="checkboxListItem relative flex gap-x-2">
+        <div className="flex h-6 items-center">
+          <input
+            id={key}
+            name={key}
+            type="checkbox"
+            checked={enabled[key]}
+            className={`${key} h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600`}
+            onClick={(): void => {
+              setEnabled(Object.assign({ ...enabled }, { [key]: !enabled[key] }));
+            }}
+          />
+        </div>
+        <div className="text-sm leading-6">
+          <label htmlFor={key} className="font-medium text-gray-900">
+            {optionsText[key]}
+          </label>
+        </div>
+      </div>
     );
   });
 
   return (
     <div
+      className="p-3 flex flex-col justify-center items-center"
       style={{
-        display: 'flex',
-        flexFlow: 'column',
-        justifyContent: 'center',
-        minWidth: '300px',
+        minWidth: '260px',
       }}
     >
-      <AppBar position="static">
-        <Toolbar
-          variant="dense"
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-          }}
-        >
-          <Typography color="inherit" variant="h5" style={{ flex: '0 1 auto' }}>
-            Options - 設定
-          </Typography>
-        </Toolbar>
-      </AppBar>
-      <List subheader={<ListSubheader component="div">TwitterWeb公式</ListSubheader>}>
-        {optionsItems[SHOW_ON_TIMELINE]}
-        {optionsItems[SHOW_ON_TWEET_DETAIL]}
-      </List>
-      <List subheader={<ListSubheader component="div">TweetDeck</ListSubheader>}>
-        {optionsItems[SHOW_ON_TWEETDECK_TIMELINE]}
-        {optionsItems[SHOW_ON_TWEETDECK_TWEET_DETAIL]}
-      </List>
-      <Button
-        className="saveSettingButton"
-        variant="contained"
-        color="primary"
+      <h1 className="text-xl font-bold leading-7 text-gray-900 self-center sm:truncate sm:text-3xl sm:tracking-tight">
+        Options - 設定
+      </h1>
+      <div className="my-1">
+        <fieldset className="my-1">
+          <h2 className="text-base font-semibold leading-7 text-gray-900">TwitterWeb公式</h2>
+          {optionsItems[SHOW_ON_TIMELINE]}
+          {optionsItems[SHOW_ON_TWEET_DETAIL]}
+        </fieldset>
+        <fieldset className="my-1">
+          <h2 className="text-base font-semibold leading-7 text-gray-900">TweetDeck</h2>
+          {optionsItems[SHOW_ON_TWEETDECK_TIMELINE]}
+          {optionsItems[SHOW_ON_TWEETDECK_TWEET_DETAIL]}
+        </fieldset>
+      </div>
+      <button
+        type="submit"
+        className="saveSettingButton rounded-md bg-indigo-600 w-1/2 mt-1 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
         onClick={onSave}
-        style={{ flex: '0 1 auto' }}
-      >
-        設定を保存
-      </Button>
-      <footer
-        style={{
-          textAlign: 'center',
-          marginTop: '3px',
-        }}
       >
-        twitter画像原寸ボタン - hogashi
-      </footer>
+        {buttonText}
+      </button>
+      <footer className="text-center mt-1">twitter画像原寸ボタン - hogashi</footer>
     </div>
   );
 };

diff --git a/src/input.css b/src/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.tsx"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}