[ui] Minor bugfixes and improvements

PeerDB-io · Oct 17, 2023 · b0d49d2 · b0d49d2
1 parent ae666e0
commit b0d49d2
Show file tree

Hide file tree

Showing 11 changed files with 39 additions and 20 deletions.
diff --git a/ui/README.md b/ui/README.md
@@ -36,15 +36,3 @@ yarn storybook
 Open [http://localhost:6000](http://localhost:6000) with your browser to see the result.
 
 The stories and their corresponding components resides inside the `lib` folder.
-
-## Storybook Github pages
-
-The Storybook in this repositories Github pages at [Storybook](https://peerdb-io.github.io/peerdb-cloud-template).
-
-To deploy a new version of Storybook to Github pages run the script
-
-```bash
-yarn storybook:deploy
-```
-
-It will automatically run the storybook build, push the content to the branch `gh-pages` to automatically deply the newly built Storybook to Github pages.
diff --git a/ui/app/layout.tsx b/ui/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import { AppThemeProvider, StyledComponentsRegistry } from '../lib/AppTheme';
 
 export const metadata: Metadata = {
-  title: 'Peerdb Cloud Template',
+  title: 'Peerdb UI',
 };
 
 export default function RootLayout({

diff --git a/ui/app/mirrors/create/config.tsx b/ui/app/mirrors/create/config.tsx
@@ -96,7 +96,7 @@ export default function MirrorConfig(props: MirrorConfigProps) {
                     onValueChange={(val) => handleChange(val, setting)}
                   >
                     {(setting.label.includes('Peer')
-                      ? props.peers?.map((peer) => peer.name)
+                      ? (props.peers ?? []).map((peer) => peer.name)
                       : ['avro', 'sql']
                     ).map((item, id) => {
                       return (

diff --git a/ui/app/mirrors/create/page.tsx b/ui/app/mirrors/create/page.tsx
@@ -39,7 +39,7 @@ export default function CreateMirrors() {
     fetch('/api/peers')
       .then((res) => res.json())
       .then((res) => {
-        setPeers(res.peers);
+        setPeers(res);
       });
   }, []);
   return (

diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
@@ -112,7 +112,7 @@ type SnapshotStatusProps = {
 };
 const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => (
   <Table
-    title={<Label variant='headline'>Initial Snapshot</Label>}
+    title={<Label variant='headline'>Initial Copy</Label>}
     toolbar={{
       left: (
         <>

diff --git a/ui/lib/Icon/DeterminateProgressCircle.tsx b/ui/lib/Icon/DeterminateProgressCircle.tsx
@@ -19,12 +19,12 @@ export function DeterminateProgressCircle({
         cy='12'
         r='9'
         stroke='currentColor'
-        stroke-width='2'
+        strokeWidth='2'
       />
       <path
         d='M12 3C13.4203 3 14.8204 3.33614 16.0859 3.98094C17.3514 4.62574 18.4463 5.56089 19.2812 6.70993C20.116 7.85897 20.667 9.18928 20.8892 10.5921C21.1114 11.9949 20.9984 13.4304 20.5595 14.7812C20.1206 16.1319 19.3683 17.3597 18.364 18.364C17.3597 19.3683 16.1319 20.1206 14.7812 20.5595C13.4304 20.9984 11.9949 21.1114 10.5921 20.8892C9.18929 20.667 7.85898 20.116 6.70994 19.2812'
         stroke='currentColor'
-        stroke-width='2'
+        strokeWidth='2'
       />
     </svg>
   );

diff --git a/ui/lib/utils/cn.ts b/ui/lib/utils/cn.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/ui/package.json b/ui/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "peerdb-cloud-template",
+  "name": "peerdb-ui",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-form": "^0.0.3",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -33,7 +34,9 @@
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "classnames": "^2.3.2",
+    "clsx": "^2.0.0",
     "long": "^5.2.3",
+    "lucide-react": "^0.287.0",
     "material-symbols": "0.11.0",
     "moment": "^2.29.4",
     "next": "13.4.16",
@@ -70,6 +73,7 @@
     "storybook": "^7.3.0",
     "string-width": "^6.1.0",
     "tailwindcss": "^3.3.3",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.2.2",
     "webpack": "^5.76.0"
   },

diff --git a/ui/tailwind.config.ts b/ui/tailwind.config.ts
@@ -101,5 +101,5 @@ module.exports = {
         /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
     },
   ],
-  plugins: [require('@headlessui/tailwindcss')],
+  plugins: [require('@headlessui/tailwindcss'), require('tailwindcss-animate')],
 } satisfies Config;
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
@@ -19,6 +19,7 @@
         "name": "next"
       }
     ],
+    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     }

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -1909,6 +1909,11 @@
     "@radix-ui/react-label" "2.0.2"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-icons@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69"
+  integrity sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==
+
 "@radix-ui/[email protected]":
   version "1.0.1"
   resolved "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz"
@@ -4823,6 +4828,11 @@ clone@^1.0.2:
   resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clsx@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
@@ -7766,6 +7776,11 @@ lru-cache@^6.0.0:
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-10.0.1.tgz"
   integrity sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==
 
+lucide-react@^0.287.0:
+  version "0.287.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.287.0.tgz#efa49872a91fa97b7ef650c4b40396b6880d0088"
+  integrity sha512-auxP2bTGiMoELzX+6ItTeNzLmhGd/O+PHBsrXV2YwPXYCxarIFJhiMOSzFT9a1GWeYPSZtnWdLr79IVXr/5JqQ==
+
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz"
@@ -10046,6 +10061,11 @@ tailwind-merge@^1.9.1:
   resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz"
   integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
 
+tailwindcss-animate@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
+  integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
+
 tailwindcss@^3.3.3:
   version "3.3.3"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz"