chore: button migration

apps/agent/go.mod

@@ -107,7 +107,6 @@ require (
 	github.com/fvbommel/sortorder v1.1.0 // indirect
 	github.com/fxamacker/cbor/v2 v2.7.0 // indirect
 	github.com/gammazero/deque v0.2.1 // indirect
-	github.com/getkin/kin-openapi v0.124.0 // indirect
 	github.com/go-faster/city v1.0.1 // indirect
 	github.com/go-faster/errors v0.7.1 // indirect
 	github.com/go-logr/logr v1.4.2 // indirect
@@ -152,7 +151,6 @@ require (
 	github.com/in-toto/in-toto-golang v0.9.0 // indirect
 	github.com/inconshreveable/mousetrap v1.1.0 // indirect
 	github.com/influxdata/tdigest v0.0.1 // indirect
-	github.com/invopop/yaml v0.2.0 // indirect
 	github.com/jonboulle/clockwork v0.4.0 // indirect
 	github.com/josharian/intern v1.0.0 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
@@ -184,16 +182,13 @@ require (
 	github.com/moby/term v0.5.0 // indirect
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
-	github.com/mohae/deepcopy v0.0.0-20170929034955-c48cc78d4826 // indirect
 	github.com/morikuni/aec v1.0.0 // indirect
 	github.com/munnerz/goautoneg v0.0.0-20191010083416-a7dc8b61c822 // indirect
 	github.com/mxk/go-flowrate v0.0.0-20140419014527-cca7078d478f // indirect
-	github.com/oapi-codegen/oapi-codegen/v2 v2.3.0 // indirect
 	github.com/opencontainers/go-digest v1.0.0 // indirect
 	github.com/opencontainers/image-spec v1.1.0 // indirect
 	github.com/paulmach/orb v0.11.1 // indirect
 	github.com/pelletier/go-toml v1.9.5 // indirect
-	github.com/perimeterx/marshmallow v1.1.5 // indirect
 	github.com/pierrec/lz4/v4 v4.1.21 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 // indirect

apps/dashboard/app/(app)/[...not-found]/page.tsx

@@ -1,5 +1,5 @@
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
-import { Button } from "@/components/ui/button";
+import { Button } from "@unkey/ui";
 import Link from "next/link";
 export default function NotFound() {
   return (
@@ -10,9 +10,7 @@ export default function NotFound() {
       </EmptyPlaceholder.Description>
       <div className="flex flex-col items-center justify-center gap-2 md:flex-row">
         <Link href="/">
-          <Button variant="secondary" className="items-center w-full gap-2 ">
-            Go Back
-          </Button>
+          <Button variant="default">Go Back</Button>
         </Link>
       </div>
     </EmptyPlaceholder>

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/chart.tsx

@@ -11,7 +11,6 @@ import ReactFlow, {
   Controls,
 } from "reactflow";
 
-import { Button } from "@/components/ui/button";
 import { Card, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   DropdownMenu,
@@ -21,6 +20,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
+import { Button } from "@unkey/ui";
 import dagre from "dagre";
 import { MoreVertical, Settings2 } from "lucide-react";
 import Link from "next/link";
@@ -206,8 +206,8 @@ const KeyNode: React.FC<
 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon">
-              <MoreVertical className="w-4 h-4" />
+            <Button variant="ghost">
+              <MoreVertical />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent>
@@ -246,8 +246,8 @@ const RoleNode: React.FC<
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon">
-            <MoreVertical className="w-4 h-4" />
+          <Button variant="ghost" shape="square">
+            <MoreVertical />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent>
@@ -283,7 +283,7 @@ const PermissionNode: React.FC<NodeProps<{ name: string; active: boolean; permis
 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon">
+            <Button variant="ghost" shape="square">
               <MoreVertical className="w-4 h-4" />
             </Button>
           </DropdownMenuTrigger>

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx

@@ -8,14 +8,14 @@ import { CreateNewRole } from "@/app/(app)/authorization/roles/create-new-role";
 import { StackedColumnChart } from "@/components/dashboard/charts";
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import { Badge } from "@/components/ui/badge";
-import { Button, buttonVariants } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { getTenantId } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
 import { and, db, eq, isNull, schema } from "@/lib/db";
 import { formatNumber } from "@/lib/fmt";
 import { cn } from "@/lib/utils";
+import { Button, buttonVariants } from "@unkey/ui";
 import { BarChart, Minus } from "lucide-react";
 import ms from "ms";
 import { notFound } from "next/navigation";
@@ -241,9 +241,9 @@ export default async function APIKeyDetailPage(props: {
         </Link>
         <Link
           href={`/apis/${props.params.apiId}/keys/${props.params.keyAuthId}/${props.params.keyId}/settings`}
-          className={cn(buttonVariants({ variant: "outline" }), "gap-1")}
+          className={cn(buttonVariants({ variant: "default" }))}
         >
-          <Settings2 className="w-4 h-4" />
+          <Settings2 />
           Key settings
         </Link>
       </div>
@@ -339,12 +339,10 @@ export default async function APIKeyDetailPage(props: {
           </div>
           <div className="flex items-center gap-2">
             <CreateNewRole
-              trigger={<Button variant="secondary">Create New Role</Button>}
+              trigger={<Button>Create New Role</Button>}
               permissions={key.workspace.permissions}
             />
-            <CreateNewPermission
-              trigger={<Button variant="secondary">Create New Permission</Button>}
-            />
+            <CreateNewPermission trigger={<Button>Create New Permission</Button>} />
           </div>
         </div>
 

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/delete-key.tsx

@@ -1,8 +1,8 @@
 "use client";
 import { revalidate } from "@/app/actions";
-import { Button } from "@/components/ui/button";
 import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { toast } from "@/components/ui/toaster";
+import { Button } from "@unkey/ui";
 import type React from "react";
 import { useState } from "react";
 
@@ -51,7 +51,7 @@ export const DeleteKey: React.FC<Props> = ({ apiKey, keyAuthId }) => {
         </CardHeader>
 
         <CardFooter className="z-10 justify-end">
-          <Button type="button" onClick={() => setOpen(!open)} variant="alert">
+          <Button type="button" onClick={() => setOpen(!open)} variant="destructive">
             Delete Key
           </Button>
         </CardFooter>
@@ -73,12 +73,12 @@ export const DeleteKey: React.FC<Props> = ({ apiKey, keyAuthId }) => {
           <input type="hidden" name="keyId" value={apiKey.id} />
 
           <DialogFooter className="justify-end">
-            <Button type="button" onClick={() => setOpen(!open)} variant="secondary">
+            <Button type="button" onClick={() => setOpen(!open)}>
               Cancel
             </Button>
             <Button
               type="submit"
-              variant="alert"
+              variant="destructive"
               disabled={deleteKey.isLoading}
               onClick={() => deleteKey.mutate({ keyIds: [apiKey.id] })}
             >

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-enabled.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -14,6 +13,7 @@ import { Switch } from "@/components/ui/switch";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-expiration.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -24,6 +23,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { format } from "date-fns";
 
 import { useRouter } from "next/navigation";

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-metadata.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -15,6 +14,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -97,7 +97,6 @@ export const UpdateKeyMetadata: React.FC<Props> = ({ apiKey }) => {
           </CardContent>
           <CardFooter className="items-center justify-end gap-4">
             <Button
-              variant="secondary"
               type="button"
               onClick={() => {
                 try {

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-name.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -16,6 +15,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-owner-id.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -16,6 +15,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-ratelimit.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -25,6 +24,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-remaining.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -32,6 +31,7 @@ import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/keys.tsx

@@ -2,8 +2,8 @@ import { CreateKeyButton } from "@/components/dashboard/create-key-button";
 import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder";
 import BackButton from "@/components/ui/back-button";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { db } from "@/lib/db";
+import { Button } from "@unkey/ui";
 import { ChevronRight, Scan, User, VenetianMask } from "lucide-react";
 import Link from "next/link";
 

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx

@@ -5,7 +5,6 @@ import { Loading } from "@/components/dashboard/loading";
 import { VisibleButton } from "@/components/dashboard/visible-button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Code } from "@/components/ui/code";
 import {
@@ -25,6 +24,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Button } from "@unkey/ui";
 
 import { Separator } from "@/components/ui/separator";
 import { Switch } from "@/components/ui/switch";
@@ -198,10 +198,10 @@ export const CreateKey = ({ apiId, keyAuthId, defaultBytes, defaultPrefix }: Pro
           </Code>
           <div className="flex justify-end my-4 space-x-4">
             <Link href={`/keys/${keyAuthId}`}>
-              <Button variant="secondary">Back</Button>
+              <Button>Back</Button>
             </Link>
             <Link href={`/apis/${apiId}/keys/${keyAuthId}/${key.data.keyId}`}>
-              <Button variant="secondary">View key details</Button>
+              <Button>View key details</Button>
             </Link>
             <Button
               onClick={() => {
@@ -718,7 +718,6 @@ export const CreateKey = ({ apiId, keyAuthId, defaultBytes, defaultPrefix }: Pro
                                     </FormDescription>
                                     <FormMessage />
                                     <Button
-                                      variant="secondary"
                                       type="button"
                                       onClick={(_e) => {
                                         try {

apps/dashboard/app/(app)/apis/[apiId]/settings/default-bytes.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -14,6 +13,7 @@ import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -93,9 +93,7 @@ export const DefaultBytes: React.FC<Props> = ({ keyAuth }) => {
         </CardContent>
         <CardFooter className="justify-end">
           <Button
-            variant={
-              form.formState.isValid && !form.formState.isSubmitting ? "primary" : "disabled"
-            }
+            variant="primary"
             disabled={!form.formState.isValid || form.formState.isSubmitting}
             type="submit"
           >

apps/dashboard/app/(app)/apis/[apiId]/settings/default-prefix.tsx

@@ -1,6 +1,4 @@
 "use client";
-import { Loading } from "@/components/dashboard/loading";
-import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
@@ -14,6 +12,7 @@ import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -80,13 +79,12 @@ export const DefaultPrefix: React.FC<Props> = ({ keyAuth }) => {
         </CardContent>
         <CardFooter className="justify-end">
           <Button
-            variant={
-              form.formState.isValid && !form.formState.isSubmitting ? "primary" : "disabled"
-            }
+            variant="primary"
             disabled={!form.formState.isValid || form.formState.isSubmitting}
             type="submit"
+            loading={form.formState.isSubmitting}
           >
-            {form.formState.isSubmitting ? <Loading /> : "Save"}
+            Save
           </Button>
         </CardFooter>
       </Card>