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/app/mirrors/page.tsx b/ui/app/mirrors/page.tsx index 16a771dd5e..6c40108f07 100644 --- a/ui/app/mirrors/page.tsx +++ b/ui/app/mirrors/page.tsx @@ -14,25 +14,6 @@ import prisma from '../utils/prisma'; export const dynamic = 'force-dynamic'; -const Badges = [ - - - Active - , - - - Paused - , - - - Broken - , - - - Incomplete - , -]; - async function CDCFlows() { const flows = await prisma.flows.findMany({ include: { @@ -105,7 +86,10 @@ async function CDCFlows() { - + + + Active + ))} diff --git a/ui/app/utils/prisma.ts b/ui/app/utils/prisma.ts index 4e54f7a77e..8748e8c87c 100644 --- a/ui/app/utils/prisma.ts +++ b/ui/app/utils/prisma.ts @@ -1,5 +1,17 @@ import { PrismaClient } from '@prisma/client'; -const prisma = new PrismaClient(); +const prismaClientSingleton = () => { + return new PrismaClient(); +}; + +type PrismaClientSingleton = ReturnType; + +const globalForPrisma = globalThis as unknown as { + prisma: PrismaClientSingleton | undefined; +}; + +const prisma = globalForPrisma.prisma ?? prismaClientSingleton(); export default prisma; + +if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma; 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/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"