chore: refactor web (#152)

* chore: renaming components, refactoring and running rome * fix: moved form to ui folder * chore: moved components to dashboard-components folder * chore: renamed dashboard-components to dashboard * fix: imports and styling --------- Co-authored-by: chronark <dev@chronark.com>
unkeyed · Jul 21, 2023 · b95acfc · b95acfc · vercel · Jul 21, 2023
1 parent e23008d
commit b95acfc
Show file tree

Hide file tree

Showing 72 changed files with 208 additions and 599 deletions.
diff --git a/...thenticated)/(app)/app/[apiId]/navbar.tsx → ...ticated)/(app)/app/[apiId]/api-navbar.tsx b/...thenticated)/(app)/app/[apiId]/navbar.tsx → ...ticated)/(app)/app/[apiId]/api-navbar.tsx
diff --git a/.../(app)/app/[apiId]/keys/new/CreateKey.tsx → ...ticated)/(app)/app/[apiId]/create-key.tsx b/.../(app)/app/[apiId]/keys/new/CreateKey.tsx → ...ticated)/(app)/app/[apiId]/create-key.tsx
@@ -9,8 +9,8 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/Form";
-import { Loading } from "@/components/loading";
+} from "@/components/ui/form";
+import { Loading } from "@/components/dashboard/loading";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import {
@@ -20,18 +20,17 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Input } from "@/components/ui/input";
-import { CopyButton } from "@/components/CopyButton";
+import { CopyButton } from "@/components/dashboard/copy-button";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { useState } from "react";
-import { VisibleButton } from "@/components/VisibleButton";
+import { VisibleButton } from "@/components/dashboard/visible-button";
 import Link from "next/link";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { AlertCircle } from "lucide-react";
 import { Code } from "@/components/ui/code";
-import { Card, CardContent } from "@/components/ui/card";
 import { Textarea } from "@/components/ui/textarea";
 
 const formSchema = z.object({

diff --git a/...nticated)/(app)/app/[apiId]/DeleteApi.tsx → ...)/(app)/app/[apiId]/delete-api-button.tsx b/...nticated)/(app)/app/[apiId]/DeleteApi.tsx → ...)/(app)/app/[apiId]/delete-api-button.tsx
@@ -3,7 +3,7 @@
 import { useToast } from "@/components/ui/use-toast";
 import { useRouter } from "next/navigation";
 
-import { Loading } from "@/components/loading";
+import { Loading } from "../../../../../components/dashboard/loading";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { trpc } from "@/lib/trpc/client";

diff --git a/apps/web/app/(authenticated)/(app)/app/[apiId]/keys/[keyId]/page.tsx b/apps/web/app/(authenticated)/(app)/app/[apiId]/keys/[keyId]/page.tsx
@@ -2,9 +2,8 @@ import { getTenantId } from "@/lib/auth";
 import { db, schema, eq } from "@unkey/db";
 import { notFound } from "next/navigation";
 import { getDailyUsage } from "@/lib/tinybird";
-import { env } from "@/lib/env";
 import { fillRange } from "@/lib/utils";
-import { ColumnChart } from "@/components/charts";
+import { ColumnChart } from "@/components/dashboard/charts";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 
 export const revalidate = 0;

diff --git a/apps/web/app/(authenticated)/(app)/app/[apiId]/keys/new/page.tsx b/apps/web/app/(authenticated)/(app)/app/[apiId]/keys/new/page.tsx
@@ -1,7 +1,7 @@
 import { getTenantId } from "@/lib/auth";
 import { db, schema, eq } from "@unkey/db";
 import { redirect } from "next/navigation";
-import { CreateKey } from "./CreateKey";
+import { CreateKey } from "@/app/(authenticated)/(app)/app/[apiId]/create-key";
 
 export default async function ApiPage(props: { params: { apiId: string } }) {
   const tenantId = getTenantId();

diff --git a/apps/web/app/(authenticated)/(app)/app/[apiId]/keys/page.tsx b/apps/web/app/(authenticated)/(app)/app/[apiId]/keys/page.tsx
@@ -1,14 +1,8 @@
-import { PageHeader } from "@/components/PageHeader";
 import { getTenantId } from "@/lib/auth";
 import { db, schema, eq, type Key } from "@unkey/db";
-import { notFound, redirect } from "next/navigation";
-import { DeleteApiButton } from "../DeleteApi";
-import { Separator } from "@/components/ui/separator";
-import Link from "next/link";
-import { ApiKeyTable } from "@/components/ApiKeyTable";
-import { Badge } from "@/components/ui/badge";
-import { CopyButton } from "@/components/CopyButton";
-import { Button } from "@/components/ui/button";
+import { redirect } from "next/navigation";
+
+import { ApiKeyTable } from "@/components/dashboard/api-key-table";
 
 export const revalidate = 0;
 export default async function ApiPage(props: { params: { apiId: string } }) {

diff --git a/apps/web/app/(authenticated)/(app)/app/[apiId]/layout.tsx b/apps/web/app/(authenticated)/(app)/app/[apiId]/layout.tsx
@@ -1,5 +1,5 @@
-import { CopyButton } from "@/components/CopyButton";
-import { PageHeader } from "@/components/PageHeader";
+import { CopyButton } from "@/components/dashboard/copy-button";
+import { PageHeader } from "@/components/dashboard/page-header";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
@@ -8,8 +8,8 @@ import { db, eq, schema } from "@unkey/db";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { PropsWithChildren } from "react";
-import { DeleteApiButton } from "./DeleteApi";
-import { NavLink } from "./navbar";
+import { DeleteApiButton } from "./delete-api-button";
+import { NavLink } from "./api-navbar";
 
 type Props = PropsWithChildren<{
   params: {

diff --git a/apps/web/app/(authenticated)/(app)/app/[apiId]/page.tsx b/apps/web/app/(authenticated)/(app)/app/[apiId]/page.tsx
@@ -1,4 +1,4 @@
-import { ColumnChart } from "@/components/charts";
+import { ColumnChart } from "@/components/dashboard/charts";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { getTenantId } from "@/lib/auth";
 import { fillRange } from "@/lib/utils";

diff --git a/...app/(authenticated)/(app)/app/AppLink.tsx → ...pp/(authenticated)/(app)/app/api-link.tsx b/...app/(authenticated)/(app)/app/AppLink.tsx → ...pp/(authenticated)/(app)/app/api-link.tsx
diff --git a/apps/web/app/(authenticated)/(app)/app/apis/DeleteAPI.tsx b/apps/web/app/(authenticated)/(app)/app/apis/DeleteAPI.tsx
diff --git a/...thenticated)/(app)/app/apis/CreateAPI.tsx → ...ted)/(app)/app/apis/create-api-button.tsx b/...thenticated)/(app)/app/apis/CreateAPI.tsx → ...ted)/(app)/app/apis/create-api-button.tsx
@@ -7,8 +7,8 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/Form";
-import { Loading } from "@/components/loading";
+} from "@/components/ui/form";
+import { Loading } from "@/components/dashboard/loading";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -47,7 +47,11 @@ export const CreateApiButton: React.FC<Props> = () => {
     },
     onError(err) {
       console.error(err);
-      toast({ title: "Error", description: err.message, variant: "destructive" });
+      toast({
+        title: "Error",
+        description: err.message,
+        variant: "destructive",
+      });
     },
   });
   async function onSubmit(values: z.infer<typeof formSchema>) {
@@ -84,10 +88,10 @@ export const CreateApiButton: React.FC<Props> = () => {
                 )}
               />
 
-              <DialogFooter className="p-4 justify-end">
+              <DialogFooter className="justify-end p-4">
                 <Button
                   disabled={create.isLoading || !form.formState.isValid}
-                  className="mt-4 w-1/4"
+                  className="w-1/4 mt-4"
                   type="submit"
                 >
                   {create.isLoading ? <Loading /> : "Create"}

diff --git a/apps/web/app/(authenticated)/(app)/app/apis/page.tsx b/apps/web/app/(authenticated)/(app)/app/apis/page.tsx
@@ -1,5 +1,5 @@
-import { PageHeader } from "@/components/PageHeader";
-import { CreateApiButton } from "./CreateAPI";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { CreateApiButton } from "./create-api-button";
 
 import { getTenantId } from "@/lib/auth";
 import { db, schema, eq, sql } from "@unkey/db";
@@ -49,7 +49,7 @@ export default async function TenantOverviewPage() {
 
           <Separator className="my-6" />
 
-          <div className="flex justify-center items-center">
+          <div className="flex items-center justify-center">
             <Card className="duration-500 hover:border-primary bg-muted w-3xl ">
               <CardHeader>
                 <CardTitle>Please add billing to your account</CardTitle>

diff --git a/...thenticated)/(app)/app/DesktopSidebar.tsx → ...henticated)/(app)/app/desktop-sidebar.tsx b/...thenticated)/(app)/app/DesktopSidebar.tsx → ...henticated)/(app)/app/desktop-sidebar.tsx
@@ -2,8 +2,8 @@ import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { BarChart, BookOpen, FileJson, Settings } from "lucide-react";
 import Link from "next/link";
-import { ApiLink } from "./AppLink";
-import { WorkspaceSwitcher } from "./TeamSwitcher";
+import { ApiLink } from "./api-link";
+import { WorkspaceSwitcher } from "./team-switcher";
 import type { Workspace } from "@unkey/db";
 type Props = {
   workspace: Workspace & {

diff --git a/apps/web/app/(authenticated)/(app)/app/keys/[keyId]/client.tsx b/apps/web/app/(authenticated)/(app)/app/keys/[keyId]/client.tsx
@@ -1,10 +1,9 @@
 "use client";
-import { PageHeader } from "@/components/PageHeader";
+import { PageHeader } from "@/components/dashboard/page-header";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { useToast } from "@/components/ui/use-toast";
 import { Trash } from "lucide-react";
-import { DeleteKeyButton } from "../DeleteKey";
+import { DeleteKeyButton } from "./delete-key-button";
 
 const _allActions = ["create", "read", "update", "delete"];
 
@@ -16,10 +15,6 @@ type Props = {
   };
 };
 export const Client: React.FC<Props> = ({ apiKey }) => {
-  const { toast } = useToast();
-
-  // const policy = apiKey.policy ? Policy.parse(apiKey.policy) : null;
-
   return (
     <div className="px-4 mx-auto mt-8 max-w-7xl sm:px-6 lg:px-8">
       <PageHeader

diff --git a/...thenticated)/(app)/app/keys/DeleteKey.tsx → ...p)/app/keys/[keyId]/delete-key-button.tsx b/...thenticated)/(app)/app/keys/DeleteKey.tsx → ...p)/app/keys/[keyId]/delete-key-button.tsx
@@ -4,7 +4,7 @@ import { useToast } from "@/components/ui/use-toast";
 import { useRouter } from "next/navigation";
 import React, { PropsWithChildren } from "react";
 
-import { Loading } from "@/components/loading";
+import { Loading } from "../../../../../../components/dashboard/loading";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,

diff --git a/...thenticated)/(app)/app/keys/CreateKey.tsx → ...(app)/app/keys/create-root-key-button.tsx b/...thenticated)/(app)/app/keys/CreateKey.tsx → ...(app)/app/keys/create-root-key-button.tsx
@@ -4,9 +4,9 @@ import { useToast } from "@/components/ui/use-toast";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-import { CopyButton } from "@/components/CopyButton";
-import { VisibleButton } from "@/components/VisibleButton";
-import { Loading } from "@/components/loading";
+import { CopyButton } from "@/components/dashboard/copy-button";
+import { VisibleButton } from "@/components/dashboard/visible-button";
+import { Loading } from "@/components/dashboard/loading";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Code } from "@/components/ui/code";
@@ -26,7 +26,7 @@ type Props = {
   apiId?: string;
 };
 
-export const CreateKeyButton: React.FC<Props> = ({ apiId }) => {
+export const CreateRootKeyButton: React.FC<Props> = ({ apiId }) => {
   const { toast } = useToast();
 
   const router = useRouter();

diff --git a/apps/web/app/(authenticated)/(app)/app/keys/page.tsx b/apps/web/app/(authenticated)/(app)/app/keys/page.tsx
@@ -1,10 +1,10 @@
-import { PageHeader } from "@/components/PageHeader";
+import { PageHeader } from "@/components/dashboard/page-header";
 import { Separator } from "@/components/ui/separator";
 import { getTenantId } from "@/lib/auth";
 import { db, eq, schema, type Key } from "@unkey/db";
 import { redirect } from "next/navigation";
-import { CreateKeyButton } from "./CreateKey";
-import { ApiKeyTable } from "@/components/ApiKeyTable";
+import { ApiKeyTable } from "@/components/dashboard/api-key-table";
+import { CreateRootKeyButton } from "./create-root-key-button";
 
 export const revalidate = 0;
 
@@ -47,7 +47,7 @@ export default async function SettingsKeysPage() {
       <PageHeader
         title="Keys"
         description="These keys are used to interact with the unkey API"
-        actions={[<CreateKeyButton key="create-key" apiId={workspace.apis.at(0)?.id} />]}
+        actions={[<CreateRootKeyButton key="create-key" apiId={workspace.apis.at(0)?.id} />]}
       />
       <Separator className="my-6" />
 

diff --git a/apps/web/app/(authenticated)/(app)/app/layout.tsx b/apps/web/app/(authenticated)/(app)/app/layout.tsx
@@ -1,7 +1,4 @@
-// import { Logo } from "@/components/logo";
-import { DesktopSidebar } from "./DesktopSidebar";
-// import { MobileNav } from "@/components/mobile-nav";
-// import { MobileSidebar } from "./MobileSidebar";
+import { DesktopSidebar } from "@/app/(authenticated)/(app)/app/desktop-sidebar";
 import { getTenantId } from "@/lib/auth";
 import { db, eq, schema } from "@unkey/db";
 import { redirect } from "next/navigation";
@@ -13,7 +10,7 @@ interface LayoutProps {
   };
 }
 
-export default async function Layout({ params, children }: LayoutProps) {
+export default async function Layout({ children }: LayoutProps) {
   const tenantId = getTenantId();
 
   const workspace = await db.query.workspaces.findFirst({
@@ -30,9 +27,6 @@ export default async function Layout({ params, children }: LayoutProps) {
     <>
       <div className="flex min-h-screen bg-gradient-to-tl from-stone-200 to-stone-100">
         <DesktopSidebar workspace={workspace} />
-
-        {/* <MobileSidebar channels={channels.map((c) => ({ name: c.name }))} navigation={[]} /> */}
-
         <div className="w-full m-2 bg-white shadow ml-72 rounded-xl">
           <ScrollArea className="max-h-screen p-4 m-4 overflow-y-auto ">
             {children}

diff --git a/apps/web/app/(authenticated)/(app)/app/page.tsx b/apps/web/app/(authenticated)/(app)/app/page.tsx
@@ -10,12 +10,5 @@ export default async function TenantOverviewPage() {
   if (!workspace) {
     return redirect("/onboarding");
   }
-
   return redirect("/app/apis");
-
-  // return (
-  //   <div>
-  //     <PageHeader title={workspace.name} description="Your Workspace" />
-  //   </div>
-  // );
 }
diff --git a/apps/web/app/(authenticated)/(app)/app/settings/page.tsx b/apps/web/app/(authenticated)/(app)/app/settings/page.tsx
@@ -1,15 +1,14 @@
-import { PageHeader } from "@/components/PageHeader";
-import { ColumnChart } from "@/components/charts";
-import { Text } from "@/components/text";
+import { PageHeader } from "@/components/dashboard/page-header";
+import { ColumnChart } from "@/components/dashboard/charts";
+import { Text } from "@/components/dashboard/text";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { getTenantId } from "@/lib/auth";
-import { env } from "@/lib/env";
 import { fillRange } from "@/lib/utils";
 import { db, eq, schema } from "@unkey/db";
 import { getDailyUsage } from "@/lib/tinybird";
 import { redirect } from "next/navigation";
 import { Badge } from "@/components/ui/badge";
-import { CopyButton } from "@/components/CopyButton";
+import { CopyButton } from "@/components/dashboard/copy-button";
 
 export const revalidate = 0;
 
@@ -92,6 +91,7 @@ export default async function SettingsPage() {
                   width="24"
                   height="24"
                 >
+                  <title>usage</title>
                   <path d="M13.833 8.875S15.085 7 18.043 7C21 7 23 9.5 23 12s-1.784 5-4.864 5-4.914-3.124-6.136-5c-1.222-1.875-3.392-5-6.446-5S1 9.5 1 12s1.351 5 4.648 5c3.296 0 4.519-1.875 4.519-1.875" />
                 </svg>
               </div>

diff --git a/apps/web/app/(authenticated)/(app)/app/stripe/loading.tsx b/apps/web/app/(authenticated)/(app)/app/stripe/loading.tsx
@@ -1,4 +1,4 @@
-import { Loading } from "@/components/loading";
+import { Loading } from "@/components/dashboard/loading";
 
 export default function () {
   // You can add any UI inside Loading, including a Skeleton.