Elgato_dark/console
1
0
Fork 0
mirror of https://github.com/graphql-hive/console synced 2026-05-24 09:38:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Drop V2: button component (#4868)

Browse source
This commit is contained in:
Tuval Simha 2024-06-04 14:01:09 +03:00 committed by GitHub
parent 0d0229ccc6
commit c750673a42
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
33 changed files with 373 additions and 219 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/web/app/src/components/admin/AdminStats.tsx
View file

@ -11,7 +11,6 @@ import ReactECharts from 'echarts-for-react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { useQuery } from 'urql';
import {
Button,
DataWrapper,
Sortable,
Stat,
@ -38,6 +37,7 @@ import {
SortingState,
useTableInstance,
} from '@tanstack/react-table';
import { Button } from '../ui/button';
interface Organization {
name: ReactElement;

3
packages/web/app/src/components/organization/billing/BillingPaymentMethod.tsx
View file

@ -2,7 +2,8 @@ import { ReactElement } from 'react';
import clsx from 'clsx';
import { useMutation } from 'urql';
import { Section } from '@/components/common';
import { Button, Heading, Link } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Heading, Link } from '@/components/v2';
import { FragmentType, graphql, useFragment } from '@/gql';
import { BillingPlanType } from '@/gql/graphql';
import { ExternalLinkIcon } from '@radix-ui/react-icons';

18
packages/web/app/src/components/project/alerts/create-alert.tsx
View file

@ -2,7 +2,8 @@ import { ReactElement } from 'react';
import { useFormik } from 'formik';
import { useMutation } from 'urql';
import * as Yup from 'yup';
import { Button, Heading, Modal, Select } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Heading, Modal, Select } from '@/components/v2';
import { FragmentType, graphql, useFragment } from '@/gql';
import { AlertType } from '@/gql/graphql';
@ -157,10 +158,21 @@ export const CreateAlertModal = (props: {
{mutation.error && <div className="text-sm text-red-500">{mutation.error.message}</div>}
<div className="flex w-full gap-2">
<Button type="button" size="large" block onClick={toggleModalOpen}>
<Button
type="button"
size="lg"
className="w-full justify-center"
onClick={toggleModalOpen}
>
Cancel
</Button>
<Button type="submit" size="large" block variant="primary" disabled={isSubmitting}>
<Button
type="submit"
size="lg"
className="w-full justify-center"
variant="primary"
disabled={isSubmitting}
>
Create Alert
</Button>
</div>

18
packages/web/app/src/components/project/alerts/create-channel.tsx
View file

@ -2,7 +2,8 @@ import { ReactElement } from 'react';
import { useFormik } from 'formik';
import { useMutation } from 'urql';
import * as Yup from 'yup';
import { Button, Heading, Input, Modal, Select, Tag } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Heading, Input, Modal, Select, Tag } from '@/components/v2';
import { graphql } from '@/gql';
import { AlertChannelType } from '@/gql/graphql';
@ -192,10 +193,21 @@ export const CreateChannelModal = ({
)}
<div className="flex w-full gap-2">
<Button type="button" size="large" block onClick={toggleModalOpen}>
<Button
type="button"
size="lg"
className="w-full justify-center"
onClick={toggleModalOpen}
>
Cancel
</Button>
<Button type="submit" size="large" block variant="primary" disabled={isSubmitting}>
<Button
type="submit"
size="lg"
className="w-full justify-center"
variant="primary"
disabled={isSubmitting}
>
Create Channel
</Button>
</div>

14
packages/web/app/src/components/project/migration-toast.tsx
View file

@ -1,6 +1,13 @@
import { Button } from '@/components/v2';
import { useRouter } from '@tanstack/react-router';
import { Button } from '../ui/button';
export function ProjectMigrationToast({ projectId, orgId }: { projectId: string; orgId: string }) {
const router = useRouter();
const handleOnClick = () => {
void router.navigate({
to: `/${orgId}/${projectId}/view/settings`,
});
};
return (
<div className="fixed bottom-6 right-24 z-10 flex flex-row justify-center gap-6 rounded-md bg-gray-900 p-4">
<div>
@ -15,10 +22,9 @@ export function ProjectMigrationToast({ projectId, orgId }: { projectId: string;
</p>
</div>
<Button
as="a"
href={`/${orgId}/${projectId}/view/settings`}
onClick={handleOnClick}
variant="link"
size="small"
size="sm"
className="mr-2 self-center text-sm font-medium text-gray-300"
>
Migrate

7
packages/web/app/src/components/project/settings/model-migration.tsx
View file

@ -1,6 +1,7 @@
import { ReactElement, ReactNode, useCallback } from 'react';
import { useMutation } from 'urql';
import { Button, Card, Heading, Tooltip } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Card, Heading, Tooltip } from '@/components/v2';
import { FragmentType, graphql, useFragment } from '@/gql';
import { RegistryModel } from '@/gql/graphql';
import { useNotifications } from '@/lib/hooks';
@ -185,12 +186,12 @@ export function ModelMigrationSettings(props: {
</p>
</div>
<div className="flex shrink-0 gap-4">
<Button variant="primary" size="large" disabled={fetching} onClick={upgrade}>
<Button variant="primary" size="lg" disabled={fetching} onClick={upgrade}>
Upgrade my project
</Button>
<Button
variant="secondary"
size="large"
size="lg"
onClick={() => {
void router.navigate({
to: '/$organizationId/view/support',

3
packages/web/app/src/components/target/history/MarkAsValid.tsx
View file

@ -1,6 +1,7 @@
import { ReactElement, useCallback } from 'react';
import { useMutation } from 'urql';
import { Button, Tooltip } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Tooltip } from '@/components/v2';
import { FragmentType, graphql, useFragment } from '@/gql';
const UpdateSchemaVersionStatusMutation = graphql(`

4
packages/web/app/src/components/target/insights/Fallback.tsx
View file

@ -1,7 +1,7 @@
import { ReactElement, ReactNode } from 'react';
import { AlertCircleIcon } from 'lucide-react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
export function OperationsFallback({
@ -36,7 +36,7 @@ export function OperationsFallback({
) : null}
{state === 'error' ? (
<div className="absolute inset-0 flex items-center justify-center">
<Button danger onClick={refetch}>
<Button variant="destructive" onClick={refetch}>
Failed to load data. Click to retry.
</Button>
</div>

34
packages/web/app/src/components/target/insights/Filters.tsx
View file

@ -6,7 +6,7 @@ import { useQuery } from 'urql';
import { useDebouncedCallback } from 'use-debounce';
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Checkbox, Input, Button as LegacyButton, Spinner } from '@/components/v2';
import { Checkbox, Input, Spinner } from '@/components/v2';
import { FragmentType, graphql, useFragment } from '@/gql';
import { DateRangeInput } from '@/gql/graphql';
import { useFormattedNumber, useToggle } from '@/lib/hooks';
@ -133,16 +133,16 @@ function OperationsFilter({
}}
/>
<div className="flex w-full items-center gap-2">
<LegacyButton variant="link" onClick={selectAll}>
<Button variant="link" onClick={selectAll}>
All
</LegacyButton>
<LegacyButton variant="link" onClick={selectNone}>
</Button>
<Button variant="link" onClick={selectNone}>
None
</LegacyButton>
<LegacyButton className="ml-auto" onClick={selectAll}>
</Button>
<Button className="ml-auto" onClick={selectAll}>
Reset
</LegacyButton>
<LegacyButton
</Button>
<Button
variant="primary"
disabled={selectedItems.length === 0}
onClick={() => {
@ -151,7 +151,7 @@ function OperationsFilter({
}}
>
Save
</LegacyButton>
</Button>
</div>
<div className="grow pl-1">
<AutoSizer>
@ -480,16 +480,16 @@ function ClientsFilter({
}}
/>
<div className="flex w-full items-center gap-2">
<LegacyButton variant="link" onClick={selectAll}>
<Button variant="link" onClick={selectAll}>
All
</LegacyButton>
<LegacyButton variant="link" onClick={selectNone}>
</Button>
<Button variant="link" onClick={selectNone}>
None
</LegacyButton>
<LegacyButton className="ml-auto" onClick={selectAll}>
</Button>
<Button className="ml-auto" onClick={selectAll}>
Reset
</LegacyButton>
<LegacyButton
</Button>
<Button
variant="primary"
disabled={selectedItems.length === 0}
onClick={() => {
@ -498,7 +498,7 @@ function ClientsFilter({
}}
>
Save
</LegacyButton>
</Button>
</div>
<div className="grow pl-1">
<AutoSizer>

14
packages/web/app/src/components/target/laboratory/create-collection-modal.tsx
View file

@ -2,7 +2,8 @@ import { ReactElement, useEffect } from 'react';
import { useFormik } from 'formik';
import { useMutation, useQuery } from 'urql';
import * as Yup from 'yup';
import { Button, Heading, Input, Modal } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Heading, Input, Modal } from '@/components/v2';
import { graphql } from '@/gql';
const CollectionQuery = graphql(`
@ -237,13 +238,18 @@ export function CreateCollectionModal(props: {
{error && <div className="text-sm text-red-500">{error.message}</div>}
<div className="flex w-full gap-2">
<Button type="button" size="large" block onClick={toggleModalOpen}>
<Button
type="button"
size="lg"
className="w-full justify-center"
onClick={toggleModalOpen}
>
Cancel
</Button>
<Button
type="submit"
size="large"
block
size="lg"
className="w-full justify-center"
variant="primary"
disabled={isSubmitting}
data-cy="confirm"

11
packages/web/app/src/components/target/laboratory/create-operation-modal.tsx
View file

@ -2,7 +2,8 @@ import { ReactElement } from 'react';
import { useFormik } from 'formik';
import { useMutation } from 'urql';
import * as Yup from 'yup';
import { Button, Heading, Input, Modal, Select } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Heading, Input, Modal, Select } from '@/components/v2';
import { graphql } from '@/gql';
import { useCollections } from '@/pages/target-laboratory';
import { useEditorContext } from '@graphiql/react';
@ -166,8 +167,8 @@ export function CreateOperationModal(props: {
<div className="flex w-full gap-2">
<Button
type="button"
size="large"
block
size="lg"
className="w-full justify-center"
onClick={() => {
resetForm();
close();
@ -177,8 +178,8 @@ export function CreateOperationModal(props: {
</Button>
<Button
type="submit"
size="large"
block
size="lg"
className="w-full justify-center"
variant="primary"
disabled={isSubmitting || !isValid || values.collectionId === ''}
data-cy="confirm"

11
packages/web/app/src/components/target/laboratory/delete-collection-modal.tsx
View file

@ -1,6 +1,7 @@
import { ReactElement } from 'react';
import { useMutation } from 'urql';
import { Button, Heading, Modal } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Heading, Modal } from '@/components/v2';
import { graphql } from '@/gql';
import { TrashIcon } from '@radix-ui/react-icons';
@ -53,13 +54,13 @@ export function DeleteCollectionModal(props: {
Are you sure you wish to delete this collection? This action is irreversible!
</p>
<div className="flex w-full gap-2">
<Button type="button" size="large" block onClick={toggleModalOpen}>
<Button type="button" size="lg" className="w-full justify-center" onClick={toggleModalOpen}>
Cancel
</Button>
<Button
size="large"
block
danger
size="lg"
className="w-full justify-center"
variant="destructive"
onClick={async () => {
await mutate({
id: collectionId,

11
packages/web/app/src/components/target/laboratory/delete-operation-modal.tsx
View file

@ -1,6 +1,7 @@
import { ReactElement } from 'react';
import { useMutation } from 'urql';
import { Button, Heading, Modal } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Heading, Modal } from '@/components/v2';
import { graphql } from '@/gql';
import { useNotifications } from '@/lib/hooks';
import { TrashIcon } from '@radix-ui/react-icons';
@ -58,13 +59,13 @@ export function DeleteOperationModal(props: {
Are you sure you wish to delete this operation? This action is irreversible!
</p>
<div className="flex w-full gap-2">
<Button type="button" size="large" block onClick={close}>
<Button type="button" size="lg" className="w-full justify-center" onClick={close}>
Cancel
</Button>
<Button
size="large"
block
danger
size="lg"
className="w-full justify-center"
variant="destructive"
onClick={async () => {
const { error } = await mutate({
id: operationId,

11
packages/web/app/src/components/target/laboratory/edit-operation-modal.tsx
View file

@ -2,7 +2,8 @@ import { ReactElement, useMemo } from 'react';
import { useFormik } from 'formik';
import { useMutation } from 'urql';
import * as Yup from 'yup';
import { Button, Heading, Input, Modal } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Heading, Input, Modal } from '@/components/v2';
import { graphql } from '@/gql';
import { useCollections } from '../../../pages/target-laboratory';
@ -115,8 +116,8 @@ export const EditOperationModal = (props: {
<div className="flex w-full gap-2">
<Button
type="button"
size="large"
block
size="lg"
className="w-full justify-center"
onClick={() => {
close();
}}
@ -125,8 +126,8 @@ export const EditOperationModal = (props: {
</Button>
<Button
type="submit"
size="large"
block
size="lg"
className="w-full justify-center"
variant="primary"
disabled={isSubmitting || !isValid}
data-cy="confirm"

1
packages/web/app/src/components/ui/button.tsx
View file

@ -9,6 +9,7 @@ const buttonVariants = cva(
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
primary: 'bg-orange-600 text-white hover:brightness-110 active:bg-orange-700',
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',

11
packages/web/app/src/components/user/settings.tsx
View file

@ -2,8 +2,9 @@ import { ReactElement } from 'react';
import { useFormik } from 'formik';
import { useMutation, useQuery } from 'urql';
import * as Yup from 'yup';
import { Button, Heading, Input, Modal } from '@/components/v2';
import { Heading, Input, Modal } from '@/components/v2';
import { graphql } from '@/gql';
import { Button } from '../ui/button';
import { useToast } from '../ui/use-toast';
const UserSettings_MeQuery = graphql(`
@ -137,7 +138,13 @@ export function UserSettingsModal({
<span className="text-red-500">{mutation.data.updateMe.error.message}</span>
)}
<Button type="submit" variant="primary" size="large" block disabled={isSubmitting}>
<Button
type="submit"
variant="primary"
size="lg"
className="w-full justify-center"
disabled={isSubmitting}
>
Save Changes
</Button>
</form>

73
packages/web/app/src/components/v2/button.tsx
View file

@ -1,73 +0,0 @@
import { ComponentProps, forwardRef } from 'react';
import clsx from 'clsx';
import * as Toolbar from '@radix-ui/react-toolbar';
type ButtonProps = Omit<ComponentProps<'button'>, 'size'> & {
danger?: boolean;
variant?: 'primary' | 'secondary' | 'default' | 'link';
size?: 'large' | 'medium' | 'small';
block?: boolean;
as?: 'a';
href?: string;
};
export const Button = forwardRef<any, ButtonProps>(
(
{
children,
danger = false,
variant = 'default',
size = 'medium',
block = false,
className,
as,
...props
},
forwardedRef,
) => {
const TagToUse = as || Toolbar.Button;
return (
<Toolbar.Root asChild>
<TagToUse
// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- TODO: fix error Type 'string' is not assignable to type 'Ref<HTMLButtonElement>
// @ts-ignore
ref={forwardedRef} // required by DropdownMenu.Trigger with asChild prop
className={clsx(
`
transition
focus-within:ring
disabled:cursor-not-allowed
disabled:bg-gray-800
disabled:text-[#c4c4c4]
disabled:brightness-100
`,
block && 'w-full justify-center',
variant !== 'link' &&
{
small: 'rounded-sm p-1',
medium: 'rounded-sm p-2',
large: 'rounded-md p-3',
}[size],
danger
? 'bg-red-500 text-white hover:brightness-110 active:bg-red-600'
: {
primary: 'bg-orange-600 text-white hover:brightness-110 active:bg-orange-700',
secondary:
'bg-gray-800 text-gray-500 hover:text-orange-600 hover:brightness-110 active:bg-gray-900',
default:
'bg-transparent text-gray-500 hover:border-gray-800 hover:text-orange-600',
link: 'text-orange-600 hover:underline',
}[variant],
variant !== 'link' &&
'inline-flex items-center border border-transparent text-sm font-bold',
className,
)}
{...props}
>
{children}
</TagToUse>
</Toolbar.Root>
);
},
);

5
packages/web/app/src/components/v2/copy-value.tsx
View file

@ -1,7 +1,8 @@
import { ReactElement, useCallback, useEffect, useState } from 'react';
import { Button, Input } from '@/components/v2';
import { Input } from '@/components/v2';
import { CheckIcon, CopyIcon } from '@/components/v2/icon';
import { useClipboard } from '@/lib/hooks';
import { Button } from '../ui/button';
export const CopyValue = ({
value,
@ -36,6 +37,8 @@ export const CopyValue = ({
readOnly
suffix={
<Button
size="icon"
variant="link"
className="p-0 focus:ring-transparent"
onClick={handleClick}
title={isCopied ? 'Copied!' : 'Copy to clipboard'}

1
packages/web/app/src/components/v2/index.ts
View file

@ -3,7 +3,6 @@ export { Activities } from '@/components/ui/activities';
export { Autocomplete } from '@/components/v2/autocomplete';
export { Avatar } from '@/components/v2/avatar';
export { Badge } from '@/components/v2/badge';
export { Button } from '@/components/v2/button';
export { Callout } from '@/components/v2/callout';
export { Card } from '@/components/v2/card';
export { Checkbox } from '@/components/v2/checkbox';

8
packages/web/app/src/components/v2/modal.tsx
View file

@ -1,6 +1,5 @@
import { createContext, ReactElement, ReactNode, useState } from 'react';
import clsx from 'clsx';
import { Button } from '@/components/v2';
import { XIcon } from '@/components/v2/icon';
import {
Close,
@ -15,6 +14,7 @@ import {
Trigger,
} from '@radix-ui/react-dialog';
import { Provider as TooltipProvider } from '@radix-ui/react-tooltip';
import { Button } from '../ui/button';
const widthBySize = {
sm: clsx('w-[450px]'),
@ -68,7 +68,11 @@ const Modal = ({
{children}
<Close asChild>
<Button className="absolute right-5 top-5 text-gray-500 hover:border-gray-500 hover:text-orange-500">
<Button
variant="ghost"
size="icon"
className="absolute right-5 top-5 text-gray-500 hover:border-gray-500 hover:text-orange-500"
>
<XIcon />
</Button>
</Close>

12
packages/web/app/src/components/v2/modals/change-permissions.tsx
View file

@ -1,7 +1,8 @@
import { ReactElement } from 'react';
import { PermissionsSpace, usePermissionsManager } from '@/components/organization/Permissions';
import { Button } from '@/components/ui/button';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Button, Heading, Modal } from '@/components/v2';
import { Heading, Modal } from '@/components/v2';
import { FragmentType, graphql, useFragment } from '@/gql';
import { scopes } from '@/lib/access/common';
@ -79,10 +80,15 @@ export function ChangePermissionsModal({
/>
</Tabs>
<div className="flex w-full gap-2">
<Button type="button" size="large" block onClick={toggleModalOpen}>
<Button
type="button"
size="lg"
className="w-full justify-center"
onClick={toggleModalOpen}
>
Cancel
</Button>
<Button type="submit" size="large" block variant="primary">
<Button type="submit" size="lg" className="w-full justify-center" variant="primary">
Save permissions
</Button>
</div>

14
packages/web/app/src/components/v2/modals/connect-schema.tsx
View file

@ -1,15 +1,7 @@
import { ReactElement, useMemo, useState } from 'react';
import { useQuery } from 'urql';
import {
Button,
CopyValue,
DocsLink,
Heading,
Link,
Modal,
RadixSelect,
Tag,
} from '@/components/v2';
import { Button } from '@/components/ui/button';
import { CopyValue, DocsLink, Heading, Link, Modal, RadixSelect, Tag } from '@/components/v2';
import { graphql } from '@/gql';
import { ProjectType } from '@/gql/graphql';
import { getDocsUrl } from '@/lib/docs-url';
@ -209,7 +201,7 @@ export const ConnectSchemaModal = (props: {
<Button
type="button"
variant="secondary"
size="large"
size="lg"
onClick={toggleModalOpen}
className="self-end"
>

21
packages/web/app/src/components/v2/modals/create-access-token.tsx
View file

@ -3,7 +3,8 @@ import { useFormik } from 'formik';
import { useMutation, useQuery } from 'urql';
import * as Yup from 'yup';
import { PermissionScopeItem, usePermissionsManager } from '@/components/organization/Permissions';
import { Accordion, Button, CopyValue, Heading, Input, Modal, Tag } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Accordion, CopyValue, Heading, Input, Modal, Tag } from '@/components/v2';
import { FragmentType, graphql, useFragment } from '@/gql';
import { TargetAccessScope } from '@/gql/graphql';
import { RegistryAccessScope } from '@/lib/access/common';
@ -159,12 +160,7 @@ function ModalContent(props: {
need to create a new one.
</Tag>
<div className="grow" />
<Button
variant="primary"
size="large"
className="ml-auto"
onClick={props.toggleModalOpen}
>
<Button variant="primary" size="lg" className="ml-auto" onClick={props.toggleModalOpen}>
Ok, got it!
</Button>
</div>
@ -228,13 +224,18 @@ function ModalContent(props: {
{mutation.error && <div className="text-sm text-red-500">{mutation.error.message}</div>}
<div className="flex w-full gap-2">
<Button type="button" size="large" block onClick={props.toggleModalOpen}>
<Button
type="button"
size="lg"
className="w-full justify-center"
onClick={props.toggleModalOpen}
>
Cancel
</Button>
<Button
type="submit"
size="large"
block
size="lg"
className="w-full justify-center"
variant="primary"
disabled={isSubmitting || noPermissionsSelected}
>

18
packages/web/app/src/components/v2/modals/create-target.tsx
View file

@ -2,7 +2,8 @@ import { ReactElement } from 'react';
import { useFormik } from 'formik';
import { useMutation } from 'urql';
import * as Yup from 'yup';
import { Button, Heading, Input, Modal } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Heading, Input, Modal } from '@/components/v2';
import { graphql } from '@/gql';
import { useRouter } from '@tanstack/react-router';
@ -97,10 +98,21 @@ export const CreateTargetModal = (props: {
</div>
)}
<div className="flex gap-2">
<Button type="button" size="large" block onClick={toggleModalOpen}>
<Button
type="button"
size="lg"
className="w-full justify-center"
onClick={toggleModalOpen}
>
Cancel
</Button>
<Button type="submit" size="large" block variant="primary" disabled={isSubmitting}>
<Button
type="submit"
size="lg"
className="w-full justify-center"
variant="primary"
disabled={isSubmitting}
>
Create Target
</Button>
</div>

11
packages/web/app/src/components/v2/modals/delete-organization.tsx
View file

@ -1,6 +1,7 @@
import { ReactElement } from 'react';
import { useMutation } from 'urql';
import { Button, Heading, Modal } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Heading, Modal } from '@/components/v2';
import { FragmentType, graphql } from '@/gql';
import { TrashIcon } from '@radix-ui/react-icons';
import { useRouter } from '@tanstack/react-router';
@ -49,13 +50,13 @@ export const DeleteOrganizationModal = (props: {
</p>
<div className="flex w-full gap-2">
<Button type="button" size="large" block onClick={toggleModalOpen}>
<Button type="button" size="lg" className="w-full justify-center" onClick={toggleModalOpen}>
Cancel
</Button>
<Button
size="large"
block
danger
size="lg"
className="w-full justify-center"
variant="destructive"
onClick={async () => {
await mutate({
selector: {

11
packages/web/app/src/components/v2/modals/delete-project.tsx
View file

@ -1,6 +1,7 @@
import { ReactElement } from 'react';
import { useMutation } from 'urql';
import { Button, Heading, Modal } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Heading, Modal } from '@/components/v2';
import { graphql } from '@/gql';
import { TrashIcon } from '@radix-ui/react-icons';
import { useRouter } from '@tanstack/react-router';
@ -42,13 +43,13 @@ export const DeleteProjectModal = (props: {
Are you sure you wish to delete this project? This action is irreversible!
</p>
<div className="flex w-full gap-2">
<Button type="button" size="large" block onClick={toggleModalOpen}>
<Button type="button" size="lg" className="w-full justify-center" onClick={toggleModalOpen}>
Cancel
</Button>
<Button
size="large"
block
danger
size="lg"
className="w-full justify-center"
variant="destructive"
onClick={async () => {
await mutate({
selector: {

11
packages/web/app/src/components/v2/modals/delete-target.tsx
View file

@ -1,6 +1,7 @@
import { ReactElement } from 'react';
import { useMutation } from 'urql';
import { Button, Heading, Modal } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Heading, Modal } from '@/components/v2';
import { graphql } from '@/gql';
import { TrashIcon } from '@radix-ui/react-icons';
import { useRouter } from '@tanstack/react-router';
@ -49,13 +50,13 @@ export const DeleteTargetModal = ({
Are you sure you wish to delete this target? This action is irreversible!
</p>
<div className="flex w-full gap-2">
<Button type="button" size="large" block onClick={toggleModalOpen}>
<Button className="w-full justify-center" type="button" size="lg" onClick={toggleModalOpen}>
Cancel
</Button>
<Button
size="large"
block
danger
className="w-full justify-center"
size="lg"
variant="destructive"
onClick={async () => {
await mutate({
selector: {

11
packages/web/app/src/components/v2/modals/transfer-organization-ownership.tsx
View file

@ -3,7 +3,8 @@ import clsx from 'clsx';
import { useFormik } from 'formik';
import { useMutation, useQuery } from 'urql';
import * as Yup from 'yup';
import { Button, Heading, Input, Modal } from '@/components/v2';
import { Button } from '@/components/ui/button';
import { Heading, Input, Modal } from '@/components/v2';
import { ArrowDownIcon, CheckIcon } from '@/components/v2/icon';
import { FragmentType, graphql, useFragment } from '@/gql';
import { useNotifications } from '@/lib/hooks';
@ -295,13 +296,13 @@ export const TransferOrganizationOwnershipModal = ({
</ul>
<div className="flex w-full gap-2">
<Button type="button" size="large" block onClick={toggleModalOpen}>
<Button type="button" className="w-full justify-center" size="lg" onClick={toggleModalOpen}>
Cancel
</Button>
<Button
size="large"
block
variant="primary"
size="lg"
className="w-full justify-center"
variant="default"
disabled={isSubmitting || !isValid || !touched.confirmation || !touched.newOwner}
onClick={() => handleSubmit()}
>

15
packages/web/app/src/pages/organization-transfer.tsx
View file

@ -1,7 +1,7 @@
import { useCallback } from 'react';
import { useMutation, useQuery } from 'urql';
import { Button } from '@/components/ui/button';
import { Meta } from '@/components/ui/meta';
import { Button } from '@/components/v2/button';
import { DataWrapper } from '@/components/v2/data-wrapper';
import { graphql } from '@/gql';
import { useNotifications } from '@/lib/hooks/use-notifications';
@ -115,7 +115,7 @@ export function OrganizationTransferPage(props: { organizationId: string; code:
<p className={classes.description}>Not found</p>
<div className={classes.actions}>
<Button size="large" variant="secondary" onClick={goBack}>
<Button size="lg" variant="secondary" onClick={goBack}>
Back to Hive
</Button>
</div>
@ -131,14 +131,19 @@ export function OrganizationTransferPage(props: { organizationId: string; code:
<div className={classes.actions}>
<Button
size="large"
variant="primary"
size="lg"
variant="default"
onClick={accept}
disabled={mutation.fetching}
>
Accept
</Button>
<Button size="large" danger onClick={reject} disabled={mutation.fetching}>
<Button
size="lg"
variant="destructive"
onClick={reject}
disabled={mutation.fetching}
>
Reject
</Button>
</div>

8
packages/web/app/src/pages/target-checks.tsx
View file

@ -1,6 +1,7 @@
import { useState } from 'react';
import { useQuery } from 'urql';
import { Page, TargetLayout } from '@/components/layouts/target';
import { Button } from '@/components/ui/button';
import { DocsLink } from '@/components/ui/docs-note';
import { EmptyList } from '@/components/ui/empty-list';
import { Label } from '@/components/ui/label';
@ -10,7 +11,6 @@ import { QueryError } from '@/components/ui/query-error';
import { Switch } from '@/components/ui/switch';
import { TimeAgo } from '@/components/ui/time-ago';
import { Badge } from '@/components/v2/badge';
import { Button as LegacyButton } from '@/components/v2/button';
import { graphql } from '@/gql';
import { cn } from '@/lib/utils';
import { ExternalLinkIcon } from '@radix-ui/react-icons';
@ -149,14 +149,14 @@ const Navigation = (props: {
</div>
))}
{props.isLastPage && query.data.target.schemaChecks.pageInfo.hasNextPage && (
<LegacyButton
variant="link"
<Button
variant="orangeLink"
onClick={() => {
props.onLoadMore(query.data?.target?.schemaChecks.pageInfo.endCursor ?? '');
}}
>
Load more
</LegacyButton>
</Button>
)}
</>
)}

2
packages/web/app/src/pages/target-history.tsx
View file

@ -1,13 +1,13 @@
import { ReactElement, useEffect, useState } from 'react';
import { useQuery } from 'urql';
import { Page, TargetLayout } from '@/components/layouts/target';
import { Button } from '@/components/ui/button';
import { noSchemaVersion } from '@/components/ui/empty-list';
import { Meta } from '@/components/ui/meta';
import { Subtitle, Title } from '@/components/ui/page';
import { QueryError } from '@/components/ui/query-error';
import { TimeAgo } from '@/components/ui/time-ago';
import { Badge } from '@/components/v2/badge';
import { Button } from '@/components/v2/button';
import { graphql } from '@/gql';
import { cn } from '@/lib/utils';
import { ExternalLinkIcon } from '@radix-ui/react-icons';

149
packages/web/app/src/stories/button.stories.tsx Normal file
View file

@ -0,0 +1,149 @@
import { ArrowBigDown, ArrowDown } from 'lucide-react';
import { Button, ButtonProps, buttonVariants } from '@/components/ui/button';
import type { Meta, StoryObj } from '@storybook/react';
const meta: Meta<typeof Button> = {
title: 'Components/Button',
component: Button,
argTypes: {
variant: {
control: { type: 'select' },
options: Object.keys(
buttonVariants({
variant: 'default',
size: 'default',
className: 'className',
}),
),
},
size: {
control: { type: 'select' },
options: Object.keys(
buttonVariants({
variant: 'default',
size: 'default',
className: 'className',
}),
),
},
asChild: {
control: { type: 'boolean' },
},
},
};
export default meta;
type Story = StoryObj<typeof Button>;
const Template = (args: ButtonProps) => <Button {...args} />;
export const Default: Story = {
name: 'Default',
render: Template,
args: {
variant: 'default',
size: 'default',
children: 'Default Button',
},
};
export const Destructive: Story = {
name: 'Destructive',
render: Template,
args: {
variant: 'destructive',
size: 'default',
children: 'Destructive Button',
},
};
export const Outline: Story = {
name: 'Outline',
render: Template,
args: {
variant: 'outline',
size: 'default',
children: 'Outline Button',
},
};
export const Secondary: Story = {
name: 'Secondary',
render: Template,
args: {
variant: 'secondary',
size: 'default',
children: 'Secondary Button',
},
};
export const Ghost: Story = {
name: 'Ghost',
render: Template,
args: {
variant: 'ghost',
size: 'default',
children: 'Ghost Button',
},
};
export const Link: Story = {
name: 'Link',
render: Template,
args: {
variant: 'link',
size: 'default',
children: 'Link Button',
},
};
export const OrangeLink: Story = {
name: 'OrangeLink',
render: Template,
args: {
variant: 'orangeLink',
size: 'default',
children: 'Orange Link Button',
},
};
export const Small: Story = {
name: 'Small',
render: Template,
args: {
variant: 'default',
size: 'sm',
children: 'Small Button',
},
};
export const Large: Story = {
name: 'Large',
render: Template,
args: {
variant: 'default',
size: 'lg',
children: 'Large Button',
},
};
export const Icon: Story = {
name: 'Icon',
render: Template,
args: {
variant: 'default',
size: 'icon',
children: <ArrowBigDown />,
},
};
export const IconSmall: Story = {
name: 'IconSmall',
render: Template,
args: {
variant: 'default',
size: 'icon-sm',
children: <ArrowDown />,
},
};

49
pnpm-lock.yaml
View file

@ -4027,6 +4027,7 @@ packages:
'@fastify/vite@6.0.6':
resolution: {integrity: sha512-FsWJC92murm5tjeTezTTvMLyZido/ZWy0wYWpVkh/bDe1gAUAabYLB7Vp8hokXGsRE/mOpqYVsRDAKENY2qPUQ==}
bundledDependencies: []
'@floating-ui/core@1.2.6':
resolution: {integrity: sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==}
@ -17019,10 +17020,10 @@ snapshots:
dependencies:
'@aws-crypto/sha256-browser': 3.0.0
'@aws-crypto/sha256-js': 3.0.0
'@aws-sdk/client-sso-oidc': 3.582.0(@aws-sdk/client-sts@3.582.0)
'@aws-sdk/client-sts': 3.582.0
'@aws-sdk/client-sso-oidc': 3.582.0
'@aws-sdk/client-sts': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0)
'@aws-sdk/core': 3.582.0
'@aws-sdk/credential-provider-node': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0(@aws-sdk/client-sts@3.582.0))(@aws-sdk/client-sts@3.582.0)
'@aws-sdk/credential-provider-node': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0)(@aws-sdk/client-sts@3.582.0(@aws-sdk/client-sso-oidc@3.582.0))
'@aws-sdk/middleware-host-header': 3.577.0
'@aws-sdk/middleware-logger': 3.577.0
'@aws-sdk/middleware-recursion-detection': 3.577.0
@ -17127,13 +17128,13 @@ snapshots:
transitivePeerDependencies:
- aws-crt
'@aws-sdk/client-sso-oidc@3.582.0(@aws-sdk/client-sts@3.582.0)':
'@aws-sdk/client-sso-oidc@3.582.0':
dependencies:
'@aws-crypto/sha256-browser': 3.0.0
'@aws-crypto/sha256-js': 3.0.0
'@aws-sdk/client-sts': 3.582.0
'@aws-sdk/client-sts': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0)
'@aws-sdk/core': 3.582.0
'@aws-sdk/credential-provider-node': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0(@aws-sdk/client-sts@3.582.0))(@aws-sdk/client-sts@3.582.0)
'@aws-sdk/credential-provider-node': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0)(@aws-sdk/client-sts@3.582.0(@aws-sdk/client-sso-oidc@3.582.0))
'@aws-sdk/middleware-host-header': 3.577.0
'@aws-sdk/middleware-logger': 3.577.0
'@aws-sdk/middleware-recursion-detection': 3.577.0
@ -17170,7 +17171,6 @@ snapshots:
'@smithy/util-utf8': 3.0.0
tslib: 2.6.2
transitivePeerDependencies:
- '@aws-sdk/client-sts'
- aws-crt
'@aws-sdk/client-sso-oidc@3.588.0':
@ -17304,13 +17304,13 @@ snapshots:
transitivePeerDependencies:
- aws-crt
'@aws-sdk/client-sts@3.582.0':
'@aws-sdk/client-sts@3.582.0(@aws-sdk/client-sso-oidc@3.582.0)':
dependencies:
'@aws-crypto/sha256-browser': 3.0.0
'@aws-crypto/sha256-js': 3.0.0
'@aws-sdk/client-sso-oidc': 3.582.0(@aws-sdk/client-sts@3.582.0)
'@aws-sdk/client-sso-oidc': 3.582.0
'@aws-sdk/core': 3.582.0
'@aws-sdk/credential-provider-node': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0(@aws-sdk/client-sts@3.582.0))(@aws-sdk/client-sts@3.582.0)
'@aws-sdk/credential-provider-node': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0)(@aws-sdk/client-sts@3.582.0(@aws-sdk/client-sso-oidc@3.582.0))
'@aws-sdk/middleware-host-header': 3.577.0
'@aws-sdk/middleware-logger': 3.577.0
'@aws-sdk/middleware-recursion-detection': 3.577.0
@ -17347,6 +17347,7 @@ snapshots:
'@smithy/util-utf8': 3.0.0
tslib: 2.6.2
transitivePeerDependencies:
- '@aws-sdk/client-sso-oidc'
- aws-crt
'@aws-sdk/client-sts@3.588.0(@aws-sdk/client-sso-oidc@3.588.0)':
@ -17453,13 +17454,13 @@ snapshots:
'@smithy/util-stream': 3.0.1
tslib: 2.6.2
'@aws-sdk/credential-provider-ini@3.582.0(@aws-sdk/client-sso-oidc@3.582.0(@aws-sdk/client-sts@3.582.0))(@aws-sdk/client-sts@3.582.0)':
'@aws-sdk/credential-provider-ini@3.582.0(@aws-sdk/client-sso-oidc@3.582.0)(@aws-sdk/client-sts@3.582.0(@aws-sdk/client-sso-oidc@3.582.0))':
dependencies:
'@aws-sdk/client-sts': 3.582.0
'@aws-sdk/client-sts': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0)
'@aws-sdk/credential-provider-env': 3.577.0
'@aws-sdk/credential-provider-process': 3.577.0
'@aws-sdk/credential-provider-sso': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0(@aws-sdk/client-sts@3.582.0))
'@aws-sdk/credential-provider-web-identity': 3.577.0(@aws-sdk/client-sts@3.582.0)
'@aws-sdk/credential-provider-sso': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0)
'@aws-sdk/credential-provider-web-identity': 3.577.0(@aws-sdk/client-sts@3.582.0(@aws-sdk/client-sso-oidc@3.582.0))
'@aws-sdk/types': 3.577.0
'@smithy/credential-provider-imds': 3.0.0
'@smithy/property-provider': 3.0.0
@ -17488,14 +17489,14 @@ snapshots:
- '@aws-sdk/client-sso-oidc'
- aws-crt
'@aws-sdk/credential-provider-node@3.582.0(@aws-sdk/client-sso-oidc@3.582.0(@aws-sdk/client-sts@3.582.0))(@aws-sdk/client-sts@3.582.0)':
'@aws-sdk/credential-provider-node@3.582.0(@aws-sdk/client-sso-oidc@3.582.0)(@aws-sdk/client-sts@3.582.0(@aws-sdk/client-sso-oidc@3.582.0))':
dependencies:
'@aws-sdk/credential-provider-env': 3.577.0
'@aws-sdk/credential-provider-http': 3.582.0
'@aws-sdk/credential-provider-ini': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0(@aws-sdk/client-sts@3.582.0))(@aws-sdk/client-sts@3.582.0)
'@aws-sdk/credential-provider-ini': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0)(@aws-sdk/client-sts@3.582.0(@aws-sdk/client-sso-oidc@3.582.0))
'@aws-sdk/credential-provider-process': 3.577.0
'@aws-sdk/credential-provider-sso': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0(@aws-sdk/client-sts@3.582.0))
'@aws-sdk/credential-provider-web-identity': 3.577.0(@aws-sdk/client-sts@3.582.0)
'@aws-sdk/credential-provider-sso': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0)
'@aws-sdk/credential-provider-web-identity': 3.577.0(@aws-sdk/client-sts@3.582.0(@aws-sdk/client-sso-oidc@3.582.0))
'@aws-sdk/types': 3.577.0
'@smithy/credential-provider-imds': 3.0.0
'@smithy/property-provider': 3.0.0
@ -17542,10 +17543,10 @@ snapshots:
'@smithy/types': 3.0.0
tslib: 2.6.2
'@aws-sdk/credential-provider-sso@3.582.0(@aws-sdk/client-sso-oidc@3.582.0(@aws-sdk/client-sts@3.582.0))':
'@aws-sdk/credential-provider-sso@3.582.0(@aws-sdk/client-sso-oidc@3.582.0)':
dependencies:
'@aws-sdk/client-sso': 3.582.0
'@aws-sdk/token-providers': 3.577.0(@aws-sdk/client-sso-oidc@3.582.0(@aws-sdk/client-sts@3.582.0))
'@aws-sdk/token-providers': 3.577.0(@aws-sdk/client-sso-oidc@3.582.0)
'@aws-sdk/types': 3.577.0
'@smithy/property-provider': 3.0.0
'@smithy/shared-ini-file-loader': 3.0.0
@ -17568,9 +17569,9 @@ snapshots:
- '@aws-sdk/client-sso-oidc'
- aws-crt
'@aws-sdk/credential-provider-web-identity@3.577.0(@aws-sdk/client-sts@3.582.0)':
'@aws-sdk/credential-provider-web-identity@3.577.0(@aws-sdk/client-sts@3.582.0(@aws-sdk/client-sso-oidc@3.582.0))':
dependencies:
'@aws-sdk/client-sts': 3.582.0
'@aws-sdk/client-sts': 3.582.0(@aws-sdk/client-sso-oidc@3.582.0)
'@aws-sdk/types': 3.577.0
'@smithy/property-provider': 3.0.0
'@smithy/types': 3.0.0
@ -17720,9 +17721,9 @@ snapshots:
'@smithy/types': 3.0.0
tslib: 2.6.2
'@aws-sdk/token-providers@3.577.0(@aws-sdk/client-sso-oidc@3.582.0(@aws-sdk/client-sts@3.582.0))':
'@aws-sdk/token-providers@3.577.0(@aws-sdk/client-sso-oidc@3.582.0)':
dependencies:
'@aws-sdk/client-sso-oidc': 3.582.0(@aws-sdk/client-sts@3.582.0)
'@aws-sdk/client-sso-oidc': 3.582.0
'@aws-sdk/types': 3.577.0
'@smithy/property-provider': 3.0.0
'@smithy/shared-ini-file-loader': 3.0.0