DaisyUI

CharlesTaylor7 · Feb 1, 2024 · e5d6c88 · e5d6c88
1 parent 5d537c4
commit e5d6c88
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 106 deletions.
diff --git a/TODO.md b/TODO.md
@@ -0,0 +1,3 @@
+- [ ] Active search
+- [ ] Loading indicator
+
diff --git a/mprocs.yaml b/mprocs.yaml
@@ -10,7 +10,7 @@ procs:
     autostart: false
 
   ESLint:
-    shell: find src/ | entr -s 'yarn lint'
+    shell: watchexec -c -e ts,tsx -- yarn lint
     autostart: false
 
   Dev Server:

diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
+    "daisyui": "^4.6.1",
     "dotenv-cli": "^7.2.1",
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",

diff --git a/src/components/CitySearch.tsx b/src/components/CitySearch.tsx
@@ -45,9 +45,9 @@ export default function CitySearch() {
   return (
     <>
       <div className="flex gap-2 items-center w-full">
-        <label>City:</label>
         <input
-          className="grow border rounded p-2"
+          placeholder='Search for a city here...'
+          className="input input-bordered w-full"
           type="text"
           autoFocus
           value={dashboard.citySearchTerm}
@@ -59,7 +59,7 @@ export default function CitySearch() {
           onKeyDown={(e) => (e.key === 'Enter' ? search() : undefined)}
         />
         <button
-          className="p-2 bg-blue-200 border rounded-lg"
+          className="btn btn-primary"
           onClick={search}
           disabled={dashboard.searchIsDisabled()}
         >
@@ -83,7 +83,7 @@ function CitySearchResult(props: Props) {
         Multiple matching cities, select from:
         {cityQueryResult.locations.map((city, i) => (
           <button
-            className="bg-blue-200 py-1 px-2 rounded border"
+            className="btn btn-primary"
             key={i}
             onClick={() => props.onClick(city)}
           >
@@ -95,7 +95,7 @@ function CitySearchResult(props: Props) {
   }
 
   if (cityQueryResult.type === 'loading') {
-    return 'loading...';
+    return <span className="loading loading-dots loading-lg" />
   }
 
   if (cityQueryResult.type === 'error') {

diff --git a/src/components/Pill.tsx b/src/components/Pill.tsx
@@ -5,10 +5,10 @@ type Props = {
 
 export default function Pill(props: Props) {
   return (
-    <div className="flex items-center border rounded-3xl px-2 py-1 gap-2 bg-slate-200">
+    <div className="badge badge-lg badge-secondary">
       <span>{props.label}</span>
       <button
-        className="flex items-center justify-center h-5 w-5 border rounded-full hover:bg-red-200"
+        className="btn btn-sm btn-secondary hover:btn-error h-full min-h-0"
         onClick={props.onClickRemove}
       >
         ×

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -1,5 +1,3 @@
-import caretIcon from '@/icons/dropdown-caret.svg';
-
 type Props = {
   testId?: string;
   options: Array<Option>;
@@ -13,16 +11,9 @@ type Option = {
 };
 
 export default function Select(props: Props) {
-  // there are some negative margin shenanigans to replace the browser defualt caret icon.
-  // "appearance-none" removes the default caret from the <select>
-  // the right padding + negative margin, "pr-9 -mr-9",
-  // shifts the custom caret to be within the border of the <select> element.
-  //
-  // There's some cleanup margin on the outer div: "mr-2". This ensures a list of multiple Select components don't overlap each other.
   return (
-    <div className="flex items-center mr-2">
       <select
-        className="outline-0 appearance-none border rounded-lg bg-green-300 p-2 pr-9 -mr-9"
+        className="select select-accent"
         data-testid={props.testId}
         defaultValue={props.default}
         onChange={(event) => props.onSelect(event.target.value)}
@@ -33,9 +24,5 @@ export default function Select(props: Props) {
           </option>
         ))}
       </select>
-      <span className="pointer-events-none pl-2">
-        <img src={caretIcon} height="20" width="20" />
-      </span>
-    </div>
   );
 }
diff --git a/src/components/WeatherDashboard.tsx b/src/components/WeatherDashboard.tsx
@@ -9,9 +9,9 @@ import type { View } from '@/weather-dashboard';
 export default function WeatherDashboard() {
   const [dashboard, updateDashboard] = useDashboardState();
   return (
-    <div className="flex w-full justify-center items-center">
-      <div className="w-4/5 md:w-2/3 flex flex-col gap-5 m-5 justify-center items-start">
-        <header className="self-center bold text-2xl">Weather Dashboard</header>
+    <main data-theme="dark" className="flex h-screen w-full justify-center">
+      <div className="w-4/5 md:w-2/3 flex flex-col gap-5 m-5 items-start">
+        <header className="w-full text-center bold text-2xl">Weather Dashboard</header>
         <CitySearch />
         <div className="flex flex-wrap gap-2">
           {dashboard.cities.map((city, index) => (
@@ -45,6 +45,6 @@ export default function WeatherDashboard() {
           </div>
         ) : null}
       </div>
-    </div>
+    </main>
   );
 }
diff --git a/src/icons/dropdown-caret.svg b/src/icons/dropdown-caret.svg
diff --git a/src/types.ts b/src/types.ts
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./src/**/*.tsx'],
+  plugins: [require('daisyui')],
 };
diff --git a/yarn.lock b/yarn.lock
@@ -819,72 +819,6 @@
   dependencies:
     "@sinonjs/commons" "^3.0.0"
 
-"@swc/[email protected]":
-  version "1.3.74"
-  resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.74.tgz#5ec6f504fb8cd74fd5133080f6cc670327a867cd"
-  integrity sha512-2rMV4QxM583jXcREfo0MhV3Oj5pgRSfSh/kVrB1twL2rQxOrbzkAPT/8flmygdVoL4f2F7o1EY5lKlYxEBiIKQ==
-
-"@swc/[email protected]":
-  version "1.3.74"
-  resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.3.74.tgz#5da7bdc4ad0fb3b4375d9c1039672ae8f61efaeb"
-  integrity sha512-KKEGE1wXneYXe15fWDRM8/oekd/Q4yAuccA0vWY/7i6nOSPqWYcSDR0nRtR030ltDxWt0rk/eCTmNkrOWrKs3A==
-
-"@swc/[email protected]":
-  version "1.3.74"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.74.tgz#52d818692aaaf9138e1175956271cae8107c1096"
-  integrity sha512-HehH5DR6r/5fIVu7tu8ZqgrHkhSCQNewf1ztFQJgcmaQWn+H4AJERBjwkjosqh4TvUJucZv8vyRTvrFeBXaCSA==
-
-"@swc/[email protected]":
-  version "1.3.74"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.74.tgz#b230ba8623edb3c4b9ceffaf9aced8bf7a9fc829"
-  integrity sha512-+xkbCRz/wczgdknoV4NwYxbRI2dD7x/qkIFcVM2buzLCq8oWLweuV8+aL4pRqu0qDh7ZSb1jcaVTUIsySCJznA==
-
-"@swc/[email protected]":
-  version "1.3.74"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.74.tgz#05ff0f3046aba1dd9d2d8793c10cd4a21a46fd7f"
-  integrity sha512-maKFZSCD3tQznzPV7T3V+TtiWZFEFM8YrnSS5fQNNb+K9J65sL+170uTb3M7H4cFkG+9Sm5k5yCrCIutlvV48g==
-
-"@swc/[email protected]":
-  version "1.3.74"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.74.tgz#a98d9a984d47404aa2de478dd3cd33dbd195bba2"
-  integrity sha512-LEXpcShF6DLTWJSiBhMSYZkLQ27UvaQ24fCFhoIV/R3dhYaUpHmIyLPPBNC82T03lB3ONUFVwrRw6fxDJ/f00A==
-
-"@swc/[email protected]":
-  version "1.3.74"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.74.tgz#95e04431eba994b4fae23c578ad1ba73fb72c21d"
-  integrity sha512-sxsFctbFMZEFmDE7CmYljG0dMumH8XBTwwtGr8s6z0fYAzXBGNq2AFPcmEh2np9rPWkt7pE1m0ByESD+dMkbxQ==
-
-"@swc/[email protected]":
-  version "1.3.74"
-  resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.74.tgz#62cb708094a8902a307fba6eea08682dbccd472d"
-  integrity sha512-F7hY9/BjFCozA4YPFYFH5FGCyWwa44vIXHqG66F5cDwXDGFn8ZtBsYIsiPfUYcx0AeAo1ojnVWKPxokZhYNYqA==
-
-"@swc/[email protected]":
-  version "1.3.74"
-  resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.74.tgz#fe5a2d8bbddb609e554e0d8d678093973096330c"
-  integrity sha512-qBAsiD1AlIdqED6wy3UNRHyAys9pWMUidX0LJ6mj24r/vfrzzTBAUrLJe5m7bzE+F1Rgi001avYJeEW1DLEJ+Q==
-
-"@swc/[email protected]":
-  version "1.3.74"
-  resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.74.tgz#4fd459c7264d4c97d1b2965ed6aa86b1725ce38b"
-  integrity sha512-S3YAvvLprTnPRwQuy9Dkwubb5SRLpVK3JJsqYDbGfgj8PGQyKHZcVJ5X3nfFsoWLy3j9B/3Os2nawprRSzeC5A==
-
-"@swc/core@^1.3.61":
-  version "1.3.74"
-  resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.3.74.tgz#b1d1a3c46ca32b7f10d970c8a209d2913c9de251"
-  integrity sha512-P+MIExOTdWlfq8Heb1/NhBAke6UTckd4cRDuJoFcFMGBRvgoCMNWhnfP3FRRXPLI7GGg27dRZS+xHiqYyQmSrA==
-  optionalDependencies:
-    "@swc/core-darwin-arm64" "1.3.74"
-    "@swc/core-darwin-x64" "1.3.74"
-    "@swc/core-linux-arm-gnueabihf" "1.3.74"
-    "@swc/core-linux-arm64-gnu" "1.3.74"
-    "@swc/core-linux-arm64-musl" "1.3.74"
-    "@swc/core-linux-x64-gnu" "1.3.74"
-    "@swc/core-linux-x64-musl" "1.3.74"
-    "@swc/core-win32-arm64-msvc" "1.3.74"
-    "@swc/core-win32-ia32-msvc" "1.3.74"
-    "@swc/core-win32-x64-msvc" "1.3.74"
-
 "@swc/jest@^0.2.27":
   version "0.2.27"
   resolved "https://registry.yarnpkg.com/@swc/jest/-/jest-0.2.27.tgz#f6cbd0b6f95cf689c3344c63fc379fa680cdbf52"
@@ -1205,13 +1139,6 @@
     "@typescript-eslint/types" "6.2.1"
     eslint-visitor-keys "^3.4.1"
 
-"@vitejs/plugin-react-swc@^3.3.2":
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react-swc/-/plugin-react-swc-3.3.2.tgz#34a82c1728066f48a86dfecb2f15df60f89207fb"
-  integrity sha512-VJFWY5sfoZerQRvJrh518h3AcQt6f/yTuWn4/TRB+dqmYU0NX1qz7qM5Wfd+gOQqUzQW4gxKqKN3KpE/P3+zrA==
-  dependencies:
-    "@swc/core" "^1.3.61"
-
 abab@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
@@ -1658,6 +1585,14 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-selector-tokenizer@^0.8:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd"
+  integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==
+  dependencies:
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
+
 css.escape@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
@@ -1690,6 +1625,21 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+culori@^3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/culori/-/culori-3.3.0.tgz#e33530adbd124d53bd6550394397e695eaaed739"
+  integrity sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==
+
+daisyui@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-4.6.1.tgz#1f9fbb6a211af281e8759d42abee4666c807f301"
+  integrity sha512-IXI8ypN/hkl1AKsag1XPlWt0wfvL4NedTUtUkv/VFP5q/xDbBZrZthq3/9M2yU1egcbbLhp01rluIz0GICUc+g==
+  dependencies:
+    css-selector-tokenizer "^0.8"
+    culori "^3"
+    picocolors "^1"
+    postcss-js "^4"
+
 data-urls@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"
@@ -2102,6 +2052,11 @@ fast-levenshtein@^2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
+fastparse@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
 fastq@^1.6.0:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.15.0.tgz#d04d07c6a2a68fe4599fea8d2e103a937fae6b3a"
@@ -3482,7 +3437,7 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-picocolors@^1.0.0:
+picocolors@^1, picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
@@ -3518,7 +3473,7 @@ postcss-import@^15.1.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-js@^4.0.1:
+postcss-js@^4, postcss-js@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
   integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==