From b85e811ee69c137d2205bd29eac396b72eeef976 Mon Sep 17 00:00:00 2001 From: Andreas Thomas Date: Wed, 11 Dec 2024 14:28:33 +0100 Subject: [PATCH] chore: button migration (#2739) * chore: replace button references * chore: replace all button props * docs: add shape example --- apps/agent/go.mod | 5 -- .../app/(app)/[...not-found]/page.tsx | 6 +- .../keys/[keyAuthId]/[keyId]/chart.tsx | 12 ++-- .../[apiId]/keys/[keyAuthId]/[keyId]/page.tsx | 12 ++-- .../[keyId]/settings/delete-key.tsx | 8 +-- .../[keyId]/settings/update-key-enabled.tsx | 2 +- .../settings/update-key-expiration.tsx | 2 +- .../[keyId]/settings/update-key-metadata.tsx | 3 +- .../[keyId]/settings/update-key-name.tsx | 2 +- .../[keyId]/settings/update-key-owner-id.tsx | 2 +- .../[keyId]/settings/update-key-ratelimit.tsx | 2 +- .../[keyId]/settings/update-key-remaining.tsx | 2 +- .../apis/[apiId]/keys/[keyAuthId]/keys.tsx | 2 +- .../[apiId]/keys/[keyAuthId]/new/client.tsx | 7 +-- .../apis/[apiId]/settings/default-bytes.tsx | 6 +- .../apis/[apiId]/settings/default-prefix.tsx | 10 ++-- .../apis/[apiId]/settings/delete-api.tsx | 17 ++---- .../[apiId]/settings/delete-protection.tsx | 10 ++-- .../apis/[apiId]/settings/update-api-name.tsx | 10 ++-- .../[apiId]/settings/update-ip-whitelist.tsx | 10 ++-- .../app/(app)/audit/[bucket]/filter.tsx | 4 +- .../app/(app)/audit/[bucket]/page.tsx | 16 ++---- .../permissions/[permissionId]/client.tsx | 2 +- .../[permissionId]/delete-permission.tsx | 9 ++- .../permissions/[permissionId]/page.tsx | 4 +- .../permissions/create-new-permission.tsx | 2 +- .../(app)/authorization/permissions/page.tsx | 2 +- .../roles/[roleId]/delete-role.tsx | 15 ++--- .../authorization/roles/[roleId]/page.tsx | 6 +- .../roles/[roleId]/update-role.tsx | 2 +- .../authorization/roles/create-new-role.tsx | 2 +- .../app/(app)/authorization/roles/page.tsx | 2 +- .../(app)/identities/[identityId]/page.tsx | 6 +- .../filters/components/custom-date-filter.tsx | 8 +-- .../components/search-combobox/badge.tsx | 4 +- .../search-combobox/search-combobox.tsx | 3 +- .../(app)/logs/components/filters/index.tsx | 10 ++-- .../log-details/components/log-header.tsx | 4 +- .../log-details/components/log-meta.tsx | 5 +- .../log-details/components/log-section.tsx | 5 +- apps/dashboard/app/(app)/mobile-sidebar.tsx | 2 +- .../ratelimits/[namespaceId]/filters.tsx | 5 +- .../ratelimits/[namespaceId]/logs/filter.tsx | 24 +++----- .../ratelimits/[namespaceId]/logs/menu.tsx | 4 +- .../overrides/[overrideId]/settings.tsx | 8 +-- .../overrides/create-new-override.tsx | 2 +- .../[namespaceId]/overrides/table.tsx | 2 +- .../settings/delete-namespace.tsx | 7 +-- .../settings/update-namespace-name.tsx | 6 +- .../ratelimits/create-namespace-button.tsx | 2 +- apps/dashboard/app/(app)/ratelimits/page.tsx | 4 +- .../[gatewayId]/settings/delete-gateway.tsx | 7 +-- .../app/(app)/settings/billing/page.tsx | 8 +-- .../(app)/settings/billing/plans/button.tsx | 19 ++----- .../app/(app)/settings/billing/plans/page.tsx | 4 +- .../general/update-workspace-name.tsx | 8 +-- .../(app)/settings/root-keys/[keyId]/page.tsx | 4 +- .../root-keys/[keyId]/permissions/legacy.tsx | 4 +- .../permissions/permission-manager-card.tsx | 6 +- .../[keyId]/update-root-key-name.tsx | 2 +- .../(app)/settings/root-keys/new/client.tsx | 2 +- .../app/(app)/settings/root-keys/page.tsx | 2 +- .../app/(app)/settings/team/invite.tsx | 5 +- .../app/(app)/settings/team/page.tsx | 13 ++--- .../(app)/settings/user/update-user-email.tsx | 16 ++---- .../(app)/settings/user/update-user-name.tsx | 8 +-- .../app/(app)/settings/vercel/client.tsx | 10 ++-- .../app/(app)/settings/vercel/page.tsx | 2 +- .../integrations/vercel/callback/client.tsx | 7 +-- apps/dashboard/app/new/create-api.tsx | 4 +- apps/dashboard/app/new/create-ratelimit.tsx | 2 +- apps/dashboard/app/new/create-workspace.tsx | 4 +- apps/dashboard/app/new/keys.tsx | 12 ++-- apps/dashboard/app/new/page.tsx | 2 +- apps/dashboard/app/ratelimit/page.tsx | 2 +- apps/dashboard/components/array-input.tsx | 6 +- .../dashboard/api-key-table/index.tsx | 4 +- .../dashboard/api-key-table/table.tsx | 25 ++------ .../components/dashboard/confirm.tsx | 6 +- .../dashboard/create-key-button.tsx | 2 +- .../dashboard/feedback-component.tsx | 2 +- .../dashboard/root-key-table/index.tsx | 4 +- .../dashboard/root-key-table/table.tsx | 25 ++------ .../components/data-table/column-header.tsx | 4 +- .../components/data-table/faceted-filter.tsx | 4 +- .../components/data-table/pagination.tsx | 6 +- .../components/data-table/view-options.tsx | 4 +- apps/dashboard/components/opt-in.tsx | 4 +- apps/dashboard/components/ui/alert-dialog.tsx | 4 +- apps/dashboard/components/ui/back-button.tsx | 4 +- apps/dashboard/components/ui/button.tsx | 57 ------------------- apps/dashboard/components/ui/calendar.tsx | 4 +- apps/dashboard/components/ui/group-button.tsx | 2 +- apps/dashboard/components/ui/pagination.tsx | 23 ++++---- .../design/components/button.icons.tsx | 3 + .../design/components/button.loading.tsx | 45 +++++++++------ .../content/design/components/button.mdx | 5 ++ .../design/components/button.shape.tsx | 15 +++++ apps/engineering/tailwind.config.js | 4 +- internal/ui/src/components/button.tsx | 48 +++++++++++++--- 100 files changed, 322 insertions(+), 448 deletions(-) delete mode 100644 apps/dashboard/components/ui/button.tsx create mode 100644 apps/engineering/content/design/components/button.shape.tsx diff --git a/apps/agent/go.mod b/apps/agent/go.mod index dddfa1c91f..0e55e76bfe 100644 --- a/apps/agent/go.mod +++ b/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 diff --git a/apps/dashboard/app/(app)/[...not-found]/page.tsx b/apps/dashboard/app/(app)/[...not-found]/page.tsx index d9f4dce6bd..9d6134567d 100644 --- a/apps/dashboard/app/(app)/[...not-found]/page.tsx +++ b/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() {
- +
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/chart.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/chart.tsx index a3385368ed..faacf07bee 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/chart.tsx +++ b/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< - @@ -246,8 +246,8 @@ const RoleNode: React.FC< - @@ -283,7 +283,7 @@ const PermissionNode: React.FC - diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx index 1bbdd5ad66..46595ddd37 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/page.tsx @@ -8,7 +8,6 @@ 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"; @@ -16,6 +15,7 @@ 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: { - + Key settings @@ -339,12 +339,10 @@ export default async function APIKeyDetailPage(props: {
Create New Role} + trigger={} permissions={key.workspace.permissions} /> - Create New Permission} - /> + Create New Permission} />
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/delete-key.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/delete-key.tsx index 531ce15e4f..31bb5f492f 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/delete-key.tsx +++ b/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 = ({ apiKey, keyAuthId }) => { - @@ -73,12 +73,12 @@ export const DeleteKey: React.FC = ({ apiKey, keyAuthId }) => { - + - + diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-api.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-api.tsx index 1a210362c3..decee0cfe8 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-api.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-api.tsx @@ -1,7 +1,5 @@ "use client"; -import { Loading } from "@/components/dashboard/loading"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; -import { Button } from "@/components/ui/button"; import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { Dialog, @@ -24,6 +22,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 type React from "react"; import { useState } from "react"; @@ -107,7 +106,7 @@ export const DeleteApi: React.FC = ({ api, keys }) => { type="button" disabled={!!api.deleteProtection} onClick={() => setOpen(!open)} - variant="alert" + variant="destructive" > Delete API @@ -173,20 +172,16 @@ export const DeleteApi: React.FC = ({ api, keys }) => { /> - diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-protection.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-protection.tsx index a7d3b8d7e6..58662392ec 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-protection.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/delete-protection.tsx @@ -1,5 +1,5 @@ "use client"; -import { Button } from "@/components/ui/button"; +import { Button } from "@unkey/ui"; import type React from "react"; import { useState } from "react"; @@ -92,7 +92,7 @@ export const DeleteProtection: React.FC = ({ api }) => { - @@ -135,13 +135,12 @@ export const DeleteProtection: React.FC = ({ api }) => { form.reset(); setOpen(!open); }} - variant="secondary" > Cancel diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/update-api-name.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/update-api-name.tsx index 1711664eea..19e3865635 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/settings/update-api-name.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/update-api-name.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"; @@ -87,13 +86,12 @@ export const UpdateApiName: React.FC = ({ api }) => { diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/update-ip-whitelist.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/update-ip-whitelist.tsx index df8224e196..4f429a4f16 100644 --- a/apps/dashboard/app/(app)/apis/[apiId]/settings/update-ip-whitelist.tsx +++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/update-ip-whitelist.tsx @@ -1,7 +1,5 @@ "use client"; -import { Loading } from "@/components/dashboard/loading"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; -import { Button } from "@/components/ui/button"; import { Card, CardContent, @@ -17,6 +15,7 @@ import { trpc } from "@/lib/trpc/client"; import { cn } from "@/lib/utils"; import { zodResolver } from "@hookform/resolvers/zod"; import type { Workspace } from "@unkey/db"; +import { Button } from "@unkey/ui"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { useForm } from "react-hook-form"; @@ -114,13 +113,12 @@ export const UpdateIpWhitelist: React.FC = ({ api, workspace }) => { diff --git a/apps/dashboard/app/(app)/audit/[bucket]/filter.tsx b/apps/dashboard/app/(app)/audit/[bucket]/filter.tsx index 44444a2b99..f911f489b4 100644 --- a/apps/dashboard/app/(app)/audit/[bucket]/filter.tsx +++ b/apps/dashboard/app/(app)/audit/[bucket]/filter.tsx @@ -1,7 +1,6 @@ "use client"; import { ArrayInput } from "@/components/array-input"; import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; import { Command, CommandEmpty, @@ -14,6 +13,7 @@ import { import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; +import { Button } from "@unkey/ui"; import { Check, ChevronDown } from "lucide-react"; import { parseAsArrayOf, parseAsString, useQueryState } from "nuqs"; import type React from "react"; @@ -36,7 +36,7 @@ export const Filter: React.FC = ({ options, title, param }) => { return ( - @@ -236,7 +232,7 @@ const AuditLogTable: React.FC<{ No events matched these filters, try changing them.{" "} - + ) : ( @@ -328,11 +324,7 @@ const AuditLogTable: React.FC<{
- diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/client.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/client.tsx index c40b07a7ab..d46fa10052 100644 --- a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/client.tsx +++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/client.tsx @@ -2,9 +2,9 @@ import { revalidateTag } from "@/app/actions"; import { Loading } from "@/components/dashboard/loading"; -import { Button } from "@/components/ui/button"; import { Card, CardContent, CardFooter } from "@/components/ui/card"; import { tags } from "@/lib/cache"; +import { Button } from "@unkey/ui"; import { Form, diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx index 421309b107..1227dd061e 100644 --- a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx +++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx @@ -1,9 +1,7 @@ "use client"; import { revalidate } from "@/app/actions"; -import { Loading } from "@/components/dashboard/loading"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; -import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, @@ -25,6 +23,7 @@ import { toast } from "@/components/ui/toaster"; import { trpc } from "@/lib/trpc/client"; import { zodResolver } from "@hookform/resolvers/zod"; import { DialogTrigger } from "@radix-ui/react-dialog"; +import { Button } from "@unkey/ui"; import { useRouter } from "next/navigation"; import { useState } from "react"; import { useForm } from "react-hook-form"; @@ -115,16 +114,16 @@ export const DeletePermission: React.FC = ({ trigger, permission }) => { type="button" disabled={deletePermission.isLoading} onClick={() => setOpen(!open)} - variant="secondary" > Cancel diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx index c02b0dc434..374ef47b51 100644 --- a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx +++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx @@ -1,10 +1,10 @@ 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 { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { getTenantId } from "@/lib/auth"; import { db } from "@/lib/db"; +import { Button } from "@unkey/ui"; import { Activity, CalendarPlus, @@ -109,7 +109,7 @@ export default async function RolesPage(props: Props) { , Delete} + trigger={} permission={permission} />, ]} diff --git a/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx b/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx index 6d9bd30737..bb1fe8febd 100644 --- a/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx +++ b/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx @@ -2,7 +2,7 @@ import { Loading } from "@/components/dashboard/loading"; import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; +import { Button } from "@unkey/ui"; import { Dialog, diff --git a/apps/dashboard/app/(app)/authorization/permissions/page.tsx b/apps/dashboard/app/(app)/authorization/permissions/page.tsx index 9865d67916..140b96b733 100644 --- a/apps/dashboard/app/(app)/authorization/permissions/page.tsx +++ b/apps/dashboard/app/(app)/authorization/permissions/page.tsx @@ -1,9 +1,9 @@ import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder"; import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; import { getTenantId } from "@/lib/auth"; import { asc, db } from "@/lib/db"; import { permissions } from "@unkey/db/src/schema"; +import { Button } from "@unkey/ui"; import { ChevronRight, Scan } from "lucide-react"; import Link from "next/link"; import { redirect } from "next/navigation"; diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx index 3d8255b197..8a7c7934ac 100644 --- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx +++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx @@ -1,8 +1,6 @@ "use client"; -import { Loading } from "@/components/dashboard/loading"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; -import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, @@ -24,6 +22,7 @@ import { toast } from "@/components/ui/toaster"; import { trpc } from "@/lib/trpc/client"; import { zodResolver } from "@hookform/resolvers/zod"; import { DialogTrigger } from "@radix-ui/react-dialog"; +import { Button } from "@unkey/ui"; import { useRouter } from "next/navigation"; import { useState } from "react"; import { useForm } from "react-hook-form"; @@ -112,20 +111,16 @@ export const DeleteRole: React.FC = ({ trigger, role }) => { /> - diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx index 383f70a3d5..222c4b8c71 100644 --- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx +++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/page.tsx @@ -1,6 +1,6 @@ -import { Button } from "@/components/ui/button"; import { getTenantId } from "@/lib/auth"; import { db } from "@/lib/db"; +import { Button } from "@unkey/ui"; import { notFound, redirect } from "next/navigation"; import { DeleteRole } from "./delete-role"; import { type NestedPermissions, Tree } from "./tree"; @@ -117,8 +117,8 @@ export default async function RolesPage(props: Props) {

{role.description}

- Update Role} /> - Delete Role} /> + Update Role} /> + Delete Role} />
diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/update-role.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/update-role.tsx index d21db6a8e3..ca64b1b856 100644 --- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/update-role.tsx +++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/update-role.tsx @@ -1,7 +1,6 @@ "use client"; import { revalidateTag } from "@/app/actions"; import { Loading } from "@/components/dashboard/loading"; -import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, @@ -27,6 +26,7 @@ import { trpc } from "@/lib/trpc/client"; import { zodResolver } from "@hookform/resolvers/zod"; import { DialogTrigger } from "@radix-ui/react-dialog"; import type { Role } from "@unkey/db"; +import { Button } from "@unkey/ui"; import { validation } from "@unkey/validation"; import { useRouter } from "next/navigation"; import { useState } from "react"; diff --git a/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx b/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx index 159e5649d3..7213af97e4 100644 --- a/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx +++ b/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx @@ -2,7 +2,7 @@ import { Loading } from "@/components/dashboard/loading"; import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; +import { Button } from "@unkey/ui"; import { Dialog, diff --git a/apps/dashboard/app/(app)/authorization/roles/page.tsx b/apps/dashboard/app/(app)/authorization/roles/page.tsx index ea93280c1f..77a5fb9739 100644 --- a/apps/dashboard/app/(app)/authorization/roles/page.tsx +++ b/apps/dashboard/app/(app)/authorization/roles/page.tsx @@ -1,8 +1,8 @@ import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder"; import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; import { getTenantId } from "@/lib/auth"; import { db } from "@/lib/db"; +import { Button } from "@unkey/ui"; import { ChevronRight, Scan } from "lucide-react"; import Link from "next/link"; import { redirect } from "next/navigation"; diff --git a/apps/dashboard/app/(app)/identities/[identityId]/page.tsx b/apps/dashboard/app/(app)/identities/[identityId]/page.tsx index d7694e597e..7e7c15ffd9 100644 --- a/apps/dashboard/app/(app)/identities/[identityId]/page.tsx +++ b/apps/dashboard/app/(app)/identities/[identityId]/page.tsx @@ -3,7 +3,6 @@ import { notFound } from "next/navigation"; import { CopyButton } from "@/components/dashboard/copy-button"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; import { Code } from "@/components/ui/code"; import { Table, @@ -16,6 +15,7 @@ import { import { getTenantId } from "@/lib/auth"; import { clickhouse } from "@/lib/clickhouse"; import { db } from "@/lib/db"; +import { Button } from "@unkey/ui"; import { ChevronRight, Minus } from "lucide-react"; import ms from "ms"; import Link from "next/link"; @@ -146,8 +146,8 @@ export default async function Page(props: Props) { - diff --git a/apps/dashboard/app/(app)/logs/components/filters/components/custom-date-filter.tsx b/apps/dashboard/app/(app)/logs/components/filters/components/custom-date-filter.tsx index fa917252ba..0d0bc50ee7 100644 --- a/apps/dashboard/app/(app)/logs/components/filters/components/custom-date-filter.tsx +++ b/apps/dashboard/app/(app)/logs/components/filters/components/custom-date-filter.tsx @@ -3,10 +3,10 @@ import { format, setHours, setMinutes, setSeconds } from "date-fns"; import type { DateRange } from "react-day-picker"; -import { Button } from "@/components/ui/button"; import { Calendar } from "@/components/ui/calendar"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { cn } from "@/lib/utils"; +import { Button } from "@unkey/ui"; import { ArrowRight, Calendar as CalendarIcon } from "lucide-react"; import { useEffect, useState } from "react"; import { useLogSearchParams } from "../../../query-state"; @@ -147,10 +147,8 @@ export function DatePickerWithRange({ className }: React.HTMLAttributes
- - +
diff --git a/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/badge.tsx b/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/badge.tsx index 589e5c6aba..b450dacca9 100644 --- a/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/badge.tsx +++ b/apps/dashboard/app/(app)/logs/components/filters/components/search-combobox/badge.tsx @@ -1,7 +1,7 @@ import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; +import { Button } from "@unkey/ui"; import { X } from "lucide-react"; import { useCallback, useEffect, useRef, useState } from "react"; import { OPTIONS } from "./constants"; @@ -115,7 +115,7 @@ const RemoveButton = ({ item, onRemove }: Pick) - - - diff --git a/apps/dashboard/app/(app)/logs/components/log-details/components/log-header.tsx b/apps/dashboard/app/(app)/logs/components/log-details/components/log-header.tsx index 3314efba42..0af95a05e1 100644 --- a/apps/dashboard/app/(app)/logs/components/log-details/components/log-header.tsx +++ b/apps/dashboard/app/(app)/logs/components/log-details/components/log-header.tsx @@ -1,6 +1,6 @@ import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; +import { Button } from "@unkey/ui"; import { X } from "lucide-react"; import type { Log } from "../../../types"; @@ -29,7 +29,7 @@ export const LogHeader = ({ onClose, log }: Props) => { | - diff --git a/apps/dashboard/app/(app)/logs/components/log-details/components/log-meta.tsx b/apps/dashboard/app/(app)/logs/components/log-details/components/log-meta.tsx index bc7cfd9307..4d954cb4dc 100644 --- a/apps/dashboard/app/(app)/logs/components/log-details/components/log-meta.tsx +++ b/apps/dashboard/app/(app)/logs/components/log-details/components/log-meta.tsx @@ -1,6 +1,6 @@ -import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { toast } from "@/components/ui/toaster"; +import { Button } from "@unkey/ui"; import { Copy } from "lucide-react"; export const LogMetaSection = ({ content }: { content: string }) => { @@ -23,8 +23,7 @@ export const LogMetaSection = ({ content }: { content: string }) => { 
{content}
@@ -112,8 +112,6 @@ export const Filters: React.FC = () => { {identifierVisible ? ( ) : null} diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/menu.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/menu.tsx index 36d8d9428f..6ef955597a 100644 --- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/menu.tsx +++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/menu.tsx @@ -1,7 +1,6 @@ "use client"; import { Copy, Filter, MoreHorizontal, UserRoundCog } from "lucide-react"; -import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, @@ -9,6 +8,7 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { toast } from "@/components/ui/toaster"; +import { Button } from "@unkey/ui"; import Link from "next/link"; import { parseAsArrayOf, parseAsString, useQueryState } from "nuqs"; @@ -30,7 +30,7 @@ export const Menu: React.FC = ({ namespace, identifier }) => { return ( - diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/[overrideId]/settings.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/[overrideId]/settings.tsx index 9336f4730b..3349d6a4f5 100644 --- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/[overrideId]/settings.tsx +++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/[overrideId]/settings.tsx @@ -1,6 +1,5 @@ "use client"; import { Loading } from "@/components/dashboard/loading"; -import { Button } from "@/components/ui/button"; import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { Form, @@ -22,6 +21,7 @@ import { 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 type React from "react"; import { useForm } from "react-hook-form"; @@ -162,11 +162,7 @@ export const UpdateCard: React.FC = ({ overrideId, defaultValues }) => { - @@ -158,13 +158,12 @@ export const DeleteNamespace: React.FC = ({ namespace }) => { type="button" disabled={deleteNamespace.isLoading} onClick={() => setOpen(!open)} - variant="secondary" > Cancel diff --git a/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx b/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx index a0af5cd114..531ad5bdfa 100644 --- a/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx +++ b/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx @@ -1,5 +1,5 @@ "use client"; -import { Button } from "@/components/ui/button"; +import { Button } from "@unkey/ui"; import type React from "react"; import { useState } from "react"; @@ -97,7 +97,7 @@ export const DeleteGateway: React.FC = ({ gateway }) => { - @@ -160,13 +160,12 @@ export const DeleteGateway: React.FC = ({ gateway }) => { type="button" disabled={deleteGateway.isLoading} onClick={() => setOpen(!open)} - variant="secondary" > Cancel - + diff --git a/apps/dashboard/app/(app)/settings/billing/plans/button.tsx b/apps/dashboard/app/(app)/settings/billing/plans/button.tsx index e173ed1562..b0cf72616b 100644 --- a/apps/dashboard/app/(app)/settings/billing/plans/button.tsx +++ b/apps/dashboard/app/(app)/settings/billing/plans/button.tsx @@ -2,7 +2,6 @@ import { Loading } from "@/components/dashboard/loading"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; -import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, @@ -14,6 +13,7 @@ import { toast } from "@/components/ui/toaster"; import { trpc } from "@/lib/trpc/client"; import { PostHogEvent } from "@/providers/PostHogProvider"; import type { Workspace } from "@unkey/db"; +import { Button } from "@unkey/ui"; import { useRouter } from "next/navigation"; import type React from "react"; import { useState } from "react"; @@ -63,21 +63,12 @@ export const ChangePlanButton: React.FC = ({ workspace, newPlan, label }) @@ -99,7 +90,7 @@ export const ChangePlanButton: React.FC = ({ workspace, newPlan, label }) )} - diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx index acfe0e69c3..bb1de70698 100644 --- a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx +++ b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx @@ -1,10 +1,10 @@ -import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { DialogTrigger } from "@/components/ui/dialog"; import { getTenantId } from "@/lib/auth"; import { clickhouse } from "@/lib/clickhouse"; import { type Permission, db, eq, schema } from "@/lib/db"; import { env } from "@/lib/env"; +import { Button } from "@unkey/ui"; import { notFound } from "next/navigation"; import { AccessTable } from "./history/access-table"; import { DialogAddPermissionsForAPI } from "./permissions/add-permission-for-api"; @@ -144,7 +144,7 @@ export default async function RootKeyPage(props: { {apisWithoutActivePermissions.length > 0 && ( - diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/legacy.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/legacy.tsx index 3198381f7d..8843ef9544 100644 --- a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/legacy.tsx +++ b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/legacy.tsx @@ -1,7 +1,6 @@ "use client"; import { Alert, AlertDescription } from "@/components/ui/alert"; -import { Button } from "@/components/ui/button"; import { Card, CardContent, @@ -13,6 +12,7 @@ import { import { toast } from "@/components/ui/toaster"; import { trpc } from "@/lib/trpc/client"; import type { Permission } from "@unkey/db"; +import { Button } from "@unkey/ui"; import { Loader2 } from "lucide-react"; import { useRouter } from "next/navigation"; @@ -63,7 +63,7 @@ export const Legacy: React.FC = ({ keyId, permissions }) => { + diff --git a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx index 9ad1f0e22e..a9f6938920 100644 --- a/apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx +++ b/apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-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"; diff --git a/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx b/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx index 35192bcf9a..7e135bcbf2 100644 --- a/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx +++ b/apps/dashboard/app/(app)/settings/root-keys/new/client.tsx @@ -3,8 +3,8 @@ import { CopyButton } from "@/components/dashboard/copy-button"; import { Loading } from "@/components/dashboard/loading"; import { VisibleButton } from "@/components/dashboard/visible-button"; -import { Button } from "@/components/ui/button"; import { Code } from "@/components/ui/code"; +import { Button } from "@unkey/ui"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; diff --git a/apps/dashboard/app/(app)/settings/root-keys/page.tsx b/apps/dashboard/app/(app)/settings/root-keys/page.tsx index c9792619e8..6dc6d1c548 100644 --- a/apps/dashboard/app/(app)/settings/root-keys/page.tsx +++ b/apps/dashboard/app/(app)/settings/root-keys/page.tsx @@ -1,8 +1,8 @@ import { PageHeader } from "@/components/dashboard/page-header"; import { RootKeyTable } from "@/components/dashboard/root-key-table"; -import { Button } from "@/components/ui/button"; import { getTenantId } from "@/lib/auth"; import { db } from "@/lib/db"; +import { Button } from "@unkey/ui"; import Link from "next/link"; import { redirect } from "next/navigation"; diff --git a/apps/dashboard/app/(app)/settings/team/invite.tsx b/apps/dashboard/app/(app)/settings/team/invite.tsx index d011e1d32c..a1f53a117c 100644 --- a/apps/dashboard/app/(app)/settings/team/invite.tsx +++ b/apps/dashboard/app/(app)/settings/team/invite.tsx @@ -1,6 +1,5 @@ "use client"; import { Loading } from "@/components/dashboard/loading"; -import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, @@ -30,6 +29,7 @@ import { import { toast } from "@/components/ui/toaster"; import { useOrganization } from "@clerk/nextjs"; import { zodResolver } from "@hookform/resolvers/zod"; +import { Button } from "@unkey/ui"; import { Plus } from "lucide-react"; import { useRouter } from "next/navigation"; import type React from "react"; @@ -143,7 +143,6 @@ export const InviteButton = ({ ...rest }: React.ButtonHTMLAttributes - } + trigger={} /> ) : null} @@ -218,8 +214,7 @@ const Invitations: React.FC = () => { @@ -367,11 +363,7 @@ const VerificationForm: React.FC = ({ email, onSuccess }) )} /> - diff --git a/apps/dashboard/app/(app)/settings/user/update-user-name.tsx b/apps/dashboard/app/(app)/settings/user/update-user-name.tsx index e7b81d6b41..eb2df513ad 100644 --- a/apps/dashboard/app/(app)/settings/user/update-user-name.tsx +++ b/apps/dashboard/app/(app)/settings/user/update-user-name.tsx @@ -1,7 +1,6 @@ "use client"; import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder"; import { Loading } from "@/components/dashboard/loading"; -import { Button } from "@/components/ui/button"; import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { Form, @@ -17,6 +16,7 @@ import { toast } from "@/components/ui/toaster"; import type { ClerkError } from "@/lib/clerk"; import { useUser } from "@clerk/nextjs"; import { zodResolver } from "@hookform/resolvers/zod"; +import { Button } from "@unkey/ui"; import type React from "react"; import { useForm } from "react-hook-form"; import { z } from "zod"; @@ -90,11 +90,7 @@ export const UpdateUserName: React.FC = () => { /> - diff --git a/apps/dashboard/app/(app)/settings/vercel/client.tsx b/apps/dashboard/app/(app)/settings/vercel/client.tsx index 29dc4eaa66..d5834086ea 100644 --- a/apps/dashboard/app/(app)/settings/vercel/client.tsx +++ b/apps/dashboard/app/(app)/settings/vercel/client.tsx @@ -3,7 +3,6 @@ import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder"; import { Loading } from "@/components/dashboard/loading"; import { PageHeader } from "@/components/dashboard/page-header"; import { Avatar, AvatarImage } from "@/components/ui/avatar"; -import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, @@ -26,6 +25,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip import { trpc } from "@/lib/trpc/client"; import { cn } from "@/lib/utils"; import type { Api, Key, VercelBinding } from "@unkey/db"; +import { Button } from "@unkey/ui"; import { ExternalLink, Link2, MoreHorizontal, Plus, RefreshCw, Trash, Unlink2 } from "lucide-react"; import ms from "ms"; import Link from "next/link"; @@ -77,7 +77,7 @@ export const Client: React.FC = ({ projects, integration, apis, rootKeys No connected projects found Connect a Vercel project now - + ); @@ -100,7 +100,7 @@ export const Client: React.FC = ({ projects, integration, apis, rootKeys href={`https://vercel.com/dashboard/integrations/${integration.id}`} target="_blank" > - + , ]} /> @@ -122,7 +122,7 @@ export const Client: React.FC = ({ projects, integration, apis, rootKeys {project.name} - @@ -287,7 +287,7 @@ const ConnectedResource: React.FC<{ - diff --git a/apps/dashboard/app/(app)/settings/vercel/page.tsx b/apps/dashboard/app/(app)/settings/vercel/page.tsx index a392afd247..7ab4a902a4 100644 --- a/apps/dashboard/app/(app)/settings/vercel/page.tsx +++ b/apps/dashboard/app/(app)/settings/vercel/page.tsx @@ -1,9 +1,9 @@ import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder"; -import { Button } from "@/components/ui/button"; import { Code } from "@/components/ui/code"; import { getTenantId } from "@/lib/auth"; import { type Api, type Key, type VercelBinding, db, eq, schema } from "@/lib/db"; import { clerkClient } from "@clerk/nextjs"; +import { Button } from "@unkey/ui"; import { Vercel } from "@unkey/vercel"; import Link from "next/link"; import { notFound } from "next/navigation"; diff --git a/apps/dashboard/app/integrations/vercel/callback/client.tsx b/apps/dashboard/app/integrations/vercel/callback/client.tsx index 0a2840b622..5b82261513 100644 --- a/apps/dashboard/app/integrations/vercel/callback/client.tsx +++ b/apps/dashboard/app/integrations/vercel/callback/client.tsx @@ -1,7 +1,6 @@ "use client"; import { Loading } from "@/components/dashboard/loading"; import { PageHeader } from "@/components/dashboard/page-header"; -import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import { ScrollArea } from "@/components/ui/scroll-area"; import { @@ -14,6 +13,7 @@ import { import { toast } from "@/components/ui/toaster"; import { trpc } from "@/lib/trpc/client"; import type { Api, VercelBinding } from "@unkey/db"; +import { Button } from "@unkey/ui"; import { X } from "lucide-react"; import { useRouter } from "next/navigation"; import { useState } from "react"; @@ -134,7 +134,7 @@ export const Client: React.FC = ({ + - + diff --git a/apps/dashboard/app/new/page.tsx b/apps/dashboard/app/new/page.tsx index 389348ce76..588f74cfc5 100644 --- a/apps/dashboard/app/new/page.tsx +++ b/apps/dashboard/app/new/page.tsx @@ -1,10 +1,10 @@ import { PageHeader } from "@/components/dashboard/page-header"; -import { Button } from "@/components/ui/button"; import { Separator } from "@/components/ui/separator"; import { insertAuditLogs } from "@/lib/audit"; import { db, schema } from "@/lib/db"; import { auth } from "@clerk/nextjs"; import { newId } from "@unkey/id"; +import { Button } from "@unkey/ui"; import { ArrowRight, GlobeLock, KeySquare } from "lucide-react"; import { headers } from "next/headers"; import Link from "next/link"; diff --git a/apps/dashboard/app/ratelimit/page.tsx b/apps/dashboard/app/ratelimit/page.tsx index 69eae91a1b..195015b5b0 100644 --- a/apps/dashboard/app/ratelimit/page.tsx +++ b/apps/dashboard/app/ratelimit/page.tsx @@ -5,7 +5,6 @@ import { LineChart } from "@/components/dashboard/charts"; import { EmptyPlaceholder } from "@/components/dashboard/empty-placeholder"; import { Loading } from "@/components/dashboard/loading"; import { PageHeader } from "@/components/dashboard/page-header"; -import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; @@ -16,6 +15,7 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select"; +import { Button } from "@unkey/ui"; import Link from "next/link"; import { parseAsInteger, parseAsStringEnum, useQueryState } from "nuqs"; import { useLocalStorage } from "usehooks-ts"; diff --git a/apps/dashboard/components/array-input.tsx b/apps/dashboard/components/array-input.tsx index 6f2282fdcf..42da3b7888 100644 --- a/apps/dashboard/components/array-input.tsx +++ b/apps/dashboard/components/array-input.tsx @@ -1,7 +1,7 @@ import { Badge } from "@/components/ui/badge"; +import { Button } from "@unkey/ui"; import { CornerDownLeft, X } from "lucide-react"; import { useCallback, useEffect, useState } from "react"; -import { Button } from "./ui/button"; import { Input } from "./ui/input"; type Props = { @@ -78,8 +78,8 @@ export const ArrayInput: React.FC = ({ title, placeholder, selected, setS className="flex-1 w-full bg-transparent outline-none placeholder:text-content-subtle" /> - diff --git a/apps/dashboard/components/dashboard/api-key-table/index.tsx b/apps/dashboard/components/dashboard/api-key-table/index.tsx index 27720c5579..ae4f10956f 100644 --- a/apps/dashboard/components/dashboard/api-key-table/index.tsx +++ b/apps/dashboard/components/dashboard/api-key-table/index.tsx @@ -2,7 +2,6 @@ import { Alert } from "@/components/ui/alert"; import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { Dialog, @@ -23,6 +22,7 @@ import { toast } from "@/components/ui/toaster"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { trpc } from "@/lib/trpc/client"; import type { ColumnDef } from "@tanstack/react-table"; +import { Button } from "@unkey/ui"; import { ArrowUpDown, Check, @@ -275,7 +275,7 @@ export const ApiKeyTable: React.FC = ({ data }) => { + @@ -136,10 +134,7 @@ export function DataTable({ data, columns }: DataTableProps - @@ -200,20 +195,10 @@ export function DataTable({ data, columns }: DataTableProps
- -
diff --git a/apps/dashboard/components/dashboard/confirm.tsx b/apps/dashboard/components/dashboard/confirm.tsx index 414c4965fc..84fad996dd 100644 --- a/apps/dashboard/components/dashboard/confirm.tsx +++ b/apps/dashboard/components/dashboard/confirm.tsx @@ -1,5 +1,4 @@ "use client"; -import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, @@ -10,6 +9,7 @@ import { DialogTrigger, } from "@/components/ui/dialog"; import { cn } from "@/lib/utils"; +import { Button } from "@unkey/ui"; import type React from "react"; import { useState } from "react"; import { Loading } from "./loading"; @@ -19,7 +19,7 @@ export type ConfirmProps = { description?: string; trigger: React.ReactNode; onConfirm: () => void | Promise; - variant?: "alert"; + variant?: "destructive"; disabled?: boolean; }; @@ -41,7 +41,7 @@ export const Confirm: React.FC = (props): JSX.Element => { {props.trigger} {props.title} diff --git a/apps/dashboard/components/dashboard/create-key-button.tsx b/apps/dashboard/components/dashboard/create-key-button.tsx index 9960ba0a77..8ecbfbe226 100644 --- a/apps/dashboard/components/dashboard/create-key-button.tsx +++ b/apps/dashboard/components/dashboard/create-key-button.tsx @@ -1,7 +1,7 @@ "use client"; +import { Button } from "@unkey/ui"; import Link from "next/link"; import { usePathname } from "next/navigation"; -import { Button } from "../ui/button"; export const CreateKeyButton = (props: { apiId: string; keyAuthId: string }) => { // Add missing import diff --git a/apps/dashboard/components/dashboard/feedback-component.tsx b/apps/dashboard/components/dashboard/feedback-component.tsx index 8d1e8da58b..340422cdc8 100644 --- a/apps/dashboard/components/dashboard/feedback-component.tsx +++ b/apps/dashboard/components/dashboard/feedback-component.tsx @@ -1,6 +1,5 @@ "use client"; import { Loading } from "@/components/dashboard/loading"; -import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, @@ -13,6 +12,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 { MessagesSquare } from "lucide-react"; import { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; diff --git a/apps/dashboard/components/dashboard/root-key-table/index.tsx b/apps/dashboard/components/dashboard/root-key-table/index.tsx index 6655965e6a..c30a217ad0 100644 --- a/apps/dashboard/components/dashboard/root-key-table/index.tsx +++ b/apps/dashboard/components/dashboard/root-key-table/index.tsx @@ -2,7 +2,6 @@ import { Alert } from "@/components/ui/alert"; import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { Dialog, @@ -23,6 +22,7 @@ import { toast } from "@/components/ui/toaster"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { trpc } from "@/lib/trpc/client"; import type { ColumnDef } from "@tanstack/react-table"; +import { Button } from "@unkey/ui"; import { ArrowUpDown, Minus, MoreHorizontal, MoreVertical, Trash } from "lucide-react"; import ms from "ms"; import Link from "next/link"; @@ -195,7 +195,7 @@ export const RootKeyTable: React.FC = ({ data }) => { + @@ -136,10 +134,7 @@ export function DataTable({ data, columns }: DataTableProps - @@ -200,20 +195,10 @@ export function DataTable({ data, columns }: DataTableProps
- -
diff --git a/apps/dashboard/components/data-table/column-header.tsx b/apps/dashboard/components/data-table/column-header.tsx index f047945210..5770ef6973 100644 --- a/apps/dashboard/components/data-table/column-header.tsx +++ b/apps/dashboard/components/data-table/column-header.tsx @@ -1,6 +1,5 @@ import type { Column } from "@tanstack/react-table"; -import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, @@ -8,6 +7,7 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { cn } from "@/lib/utils"; +import { Button } from "@unkey/ui"; import { ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react"; interface DataTableColumnHeaderProps extends React.HTMLAttributes { @@ -28,7 +28,7 @@ export function DataTableColumnHeader({
- diff --git a/apps/dashboard/components/opt-in.tsx b/apps/dashboard/components/opt-in.tsx index baf088aab9..102a7174cd 100644 --- a/apps/dashboard/components/opt-in.tsx +++ b/apps/dashboard/components/opt-in.tsx @@ -1,8 +1,8 @@ "use client"; -import { Button } from "@/components/ui/button"; import { trpc } from "@/lib/trpc/client"; import type { Workspace } from "@unkey/db"; +import { Button } from "@unkey/ui"; import { Power } from "lucide-react"; import Link from "next/link"; import { useRouter } from "next/navigation"; @@ -49,7 +49,7 @@ export const OptIn: React.FC = ({ title, description, feature }) => {
- + ); diff --git a/apps/dashboard/components/ui/button.tsx b/apps/dashboard/components/ui/button.tsx deleted file mode 100644 index f5524e7cf3..0000000000 --- a/apps/dashboard/components/ui/button.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { Slot } from "@radix-ui/react-slot"; -import { type VariantProps, cva } from "class-variance-authority"; -import * as React from "react"; - -import { cn } from "@/lib/utils"; - -const buttonVariants = cva( - "inline-flex items-center justify-center rounded-md font-medium text-sm max-sm:text-xs transition-colors focus-visible:outline-none gap-2 disabled:pointer-events-none disabled:opacity-50 duration-200 whitespace-nowrap", - { - variants: { - variant: { - primary: - "bg-primary text-primary-foreground hover:bg-secondary hover:text-secondary-foreground border border-primary", - secondary: - " text-secondary-foreground bg-secondary hover:bg-primary hover:text-primary-foreground border border-border", - outline: "border border-input bg-background hover:bg-primary hover:text-primary-foreground", - alert: - "bg-background border border-alert text-content-alert hover:bg-alert hover:text-white", - disabled: "text-secondary-foreground bg-secondary border border-border opacity-50", - - ghost: "hover:bg-gray-200 hover:text-gray-900", - link: "text-subtle underline-offset-4 hover:underline", - }, - size: { - default: "h-8 px-3 py-1.5", - sm: "h-6 px-3 py-2 text-xs", - lg: "h-10 px-8", - xl: "h-12 px-8", - icon: "h-8 w-8", - block: "h-8 px-3 py-1.5 w-full", - }, - }, - - defaultVariants: { - variant: "primary", - size: "default", - }, - }, -); - -export interface ButtonProps - extends React.ButtonHTMLAttributes, - VariantProps { - asChild?: boolean; -} - -const Button = React.forwardRef( - ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button"; - return ( - - ); - }, -); -Button.displayName = "Button"; - -export { Button, buttonVariants }; diff --git a/apps/dashboard/components/ui/calendar.tsx b/apps/dashboard/components/ui/calendar.tsx index 9260b45371..4fd18528ef 100644 --- a/apps/dashboard/components/ui/calendar.tsx +++ b/apps/dashboard/components/ui/calendar.tsx @@ -4,8 +4,8 @@ import { ChevronLeft, ChevronRight } from "lucide-react"; import type * as React from "react"; import { DayPicker } from "react-day-picker"; -import { buttonVariants } from "@/components/ui/button"; import { cn } from "@/lib/utils"; +import { buttonVariants } from "@unkey/ui"; export type CalendarProps = React.ComponentProps; @@ -21,7 +21,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C caption_label: "text-sm font-medium", nav: "space-x-1 flex items-center", nav_button: cn( - buttonVariants({ variant: "outline" }), + buttonVariants({ variant: "default" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100", ), nav_button_previous: "absolute left-1", diff --git a/apps/dashboard/components/ui/group-button.tsx b/apps/dashboard/components/ui/group-button.tsx index 181058324e..a927879ecd 100644 --- a/apps/dashboard/components/ui/group-button.tsx +++ b/apps/dashboard/components/ui/group-button.tsx @@ -1,7 +1,7 @@ import { Children, type ReactElement, cloneElement } from "react"; -import type { ButtonProps } from "@/components/ui/button"; import { cn } from "@/lib/utils"; +import type { ButtonProps } from "@unkey/ui"; interface ButtonGroupProps { className?: string; diff --git a/apps/dashboard/components/ui/pagination.tsx b/apps/dashboard/components/ui/pagination.tsx index 97bf2c8e49..c8fb22940e 100644 --- a/apps/dashboard/components/ui/pagination.tsx +++ b/apps/dashboard/components/ui/pagination.tsx @@ -1,8 +1,8 @@ import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"; import * as React from "react"; -import { type ButtonProps, buttonVariants } from "@/components/ui/button"; import { cn } from "@/lib/utils"; +import { type ButtonProps, buttonVariants } from "@unkey/ui"; import Link, { type LinkProps } from "next/link"; const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => ( @@ -31,16 +31,21 @@ type PaginationLinkProps = React.PropsWithChildren<{ isActive?: boolean; className?: string; }> & - Pick & + Pick & LinkProps; -const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => ( +const PaginationLink = ({ + className, + isActive, + shape = "square", + ...props +}: PaginationLinkProps) => ( ) => ( @@ -66,12 +70,7 @@ const PaginationPrevious = ({ PaginationPrevious.displayName = "PaginationPrevious"; const PaginationNext = ({ className, ...props }: React.ComponentProps) => ( - + Next diff --git a/apps/engineering/content/design/components/button.icons.tsx b/apps/engineering/content/design/components/button.icons.tsx index be3260a18d..152e10eca0 100644 --- a/apps/engineering/content/design/components/button.icons.tsx +++ b/apps/engineering/content/design/components/button.icons.tsx @@ -20,6 +20,9 @@ export const IconsExample: React.FC = () => ( Update Role + ); diff --git a/apps/engineering/content/design/components/button.loading.tsx b/apps/engineering/content/design/components/button.loading.tsx index ffd2316cdd..c2f93f7c94 100644 --- a/apps/engineering/content/design/components/button.loading.tsx +++ b/apps/engineering/content/design/components/button.loading.tsx @@ -2,20 +2,33 @@ import { RenderComponentWithSnippet } from "@/app/components/render"; import { Row } from "@/app/components/row"; import { Button } from "@unkey/ui"; +import { useEffect, useState } from "react"; -export const LoadingExample: React.FC = () => ( - - - - - - - - -); +export const LoadingExample: React.FC = () => { + const [loading, setLoading] = useState(false); + useEffect(() => { + if (!loading) { + return; + } + const id = setTimeout(() => setLoading(false), 5000); + return () => { + clearTimeout(id); + }; + }, [loading]); + return ( + + + + + + + + + ); +}; diff --git a/apps/engineering/content/design/components/button.mdx b/apps/engineering/content/design/components/button.mdx index 3ac83c6202..2ebf8289e9 100644 --- a/apps/engineering/content/design/components/button.mdx +++ b/apps/engineering/content/design/components/button.mdx @@ -10,6 +10,7 @@ import { KeyboardExample } from "./button.keyboard" import { IconsExample } from "./button.icons" import { LoadingExample } from "./button.loading" import { DisabledExample } from "./button.disabled" +import { ShapeExample } from "./button.shape" ## onClick @@ -33,7 +34,11 @@ Icons can be added anywhere as a child of the button. In most scenarios you shou +## Shape +For single icons without text, you should make the button square via `shape="square"` + + ## Keyboard diff --git a/apps/engineering/content/design/components/button.shape.tsx b/apps/engineering/content/design/components/button.shape.tsx new file mode 100644 index 0000000000..73f544995b --- /dev/null +++ b/apps/engineering/content/design/components/button.shape.tsx @@ -0,0 +1,15 @@ +"use client"; +import { RenderComponentWithSnippet } from "@/app/components/render"; +import { Row } from "@/app/components/row"; +import { Button } from "@unkey/ui"; +import { Settings2 } from "lucide-react"; + +export const ShapeExample: React.FC = () => ( + + + + + +); diff --git a/apps/engineering/tailwind.config.js b/apps/engineering/tailwind.config.js index cea84a09b2..9fa5dd1d5e 100644 --- a/apps/engineering/tailwind.config.js +++ b/apps/engineering/tailwind.config.js @@ -8,8 +8,8 @@ export default { "./content/**/*.{md,mdx}", "./mdx-components.{ts,tsx}", "./node_modules/fumadocs-ui/dist/**/*.js", - "../../internal/ui/**/*.tsx", - "../../internal/icons/**/*.tsx", + "../../internal/ui/src/**/*.tsx", + "../../internal/icons/src/**/*.tsx", ], theme: unkeyUiTailwindConfig.theme, diff --git a/internal/ui/src/components/button.tsx b/internal/ui/src/components/button.tsx index 0b33ba8536..a9057ffcee 100644 --- a/internal/ui/src/components/button.tsx +++ b/internal/ui/src/components/button.tsx @@ -6,7 +6,7 @@ import * as React from "react"; import { cn } from "../lib/utils"; const buttonVariants = cva( - "inline-flex group items-center transition duration-150 justify-center gap-3 whitespace-nowrap tracking-normal rounded-lg font-medium transition-colors disabled:pointer-events-none focus:outline-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", + "inline-flex group relative transition duration-150 whitespace-nowrap tracking-normal rounded-lg font-medium transition-colors disabled:pointer-events-none focus:outline-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", { variants: { variant: { @@ -23,8 +23,8 @@ const buttonVariants = cva( default: "h-8 px-3 py-1 text-sm", }, shape: { - square: "", - circle: "", + square: "size-8 p-1", + // circle: "", }, }, defaultVariants: { @@ -54,6 +54,9 @@ const keyboardIconVariants = cva( export type ButtonProps = VariantProps & React.ButtonHTMLAttributes & { + /** + * Display a loading spinner instead of the children + */ loading?: boolean; disabled?: boolean; @@ -80,7 +83,15 @@ export type ButtonProps = VariantProps & asChild?: boolean; }; -const Button: React.FC = ({ className, variant, size, asChild = false, ...props }) => { +const Button: React.FC = ({ + className, + variant, + size, + shape, + asChild = false, + loading, + ...props +}) => { React.useEffect(() => { if (!props.keyboard) { return; @@ -101,15 +112,34 @@ const Button: React.FC = ({ className, variant, size, asChild = fal return ( - {props.loading ? : null} - {props.children} - {props.keyboard ? ( - {props.keyboard.display} + {loading ? ( +
+ +
) : null} +
+ {props.children} + {props.keyboard ? ( + {props.keyboard.display} + ) : null} +
); };