diff --git a/ui/README.md b/ui/README.md
index 5352c77e22..0cf45cf159 100644
--- 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
index 0bb7715000..92915917a6 100644
--- 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
index bf1ba570dd..6b27069bc1 100644
--- 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
index 446f4a7510..69a3202f1e 100644
--- 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
index a83e31cc08..7d46c6714d 100644
--- 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) => (
Initial Snapshot}
+ title={}
toolbar={{
left: (
<>
diff --git a/ui/lib/Icon/DeterminateProgressCircle.tsx b/ui/lib/Icon/DeterminateProgressCircle.tsx
index ee6f114999..b74b9e6931 100644
--- 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'
/>
);
diff --git a/ui/lib/utils/cn.ts b/ui/lib/utils/cn.ts
new file mode 100644
index 0000000000..2819a830d2
--- /dev/null
+++ 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
index a5c1f7ee02..3b80a449cb 100644
--- 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
index 08d37404ce..49e081636c 100644
--- 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
index 23ba4fd549..b9ad2505e2 100644
--- 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
index 1f49c3a584..be5568eae4 100644
--- 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/react-id@1.0.1":
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"