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: Badge component (#5079)

Browse source
This commit is contained in:
Tuval Simha 2024-06-26 14:17:48 +03:00 committed by GitHub
parent f3f93e2409
commit 942d1d717c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 162 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
packages/web/app/src/components/ui/badge.tsx
View file

@ -29,4 +29,32 @@ function Badge({ className, variant, ...props }: BadgeProps) {
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
}
export { Badge, badgeVariants };
const badgeRoundedVariants = cva(
'inline-block rounded-full mx-1 border-[3px] p-[3px] align-middle text-xs font-bold leading-none text-white',
{
variants: {
color: {
red: 'border-red-900 bg-red-500',
yellow: 'border-yellow-900 bg-yellow-500',
green: 'border-green-900 bg-green-500',
gray: 'border-gray-900 bg-gray-500',
orange: 'border-orange-900 bg-orange-500',
},
},
defaultVariants: {
color: 'green',
},
},
);
export interface BadgeRoundedProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeRoundedVariants> {
color: 'red' | 'yellow' | 'green' | 'gray' | 'orange';
}
function BadgeRounded({ className, color, ...props }: BadgeRoundedProps) {
return <div className={cn(badgeRoundedVariants({ color }), className)} {...props} />;
}
export { Badge, BadgeRounded, badgeRoundedVariants, badgeVariants };

34
packages/web/app/src/components/v2/badge.tsx
View file

@ -1,34 +0,0 @@
import { ReactElement, ReactNode } from 'react';
import clsx from 'clsx';
export const Badge = ({
children,
color = 'gray',
...props
}: {
children?: ReactNode;
color?: 'red' | 'yellow' | 'green' | 'gray' | 'orange';
}): ReactElement => {
return (
<span
className={clsx(
'inline-block rounded-full border-[3px] p-[3px] align-middle text-xs font-bold leading-none text-white',
{
red: 'border-red-900 bg-red-500',
yellow: 'border-yellow-900 bg-yellow-500',
green: 'border-green-900 bg-green-500',
gray: 'border-gray-900 bg-gray-500',
orange: 'border-orange-900 bg-orange-500',
// TODO: add variants and uncomment https://javisperez.github.io/tailwindcolorshades/?jumbo=7f818c&alizarin-crimson=ed2e39
// cyan: 'bg-cyan-500 border-cyan-900',
// purple: 'border-purple-900 bg-purple-500',
// blue: 'border-blue-900 bg-blue-500',
// magenta: 'bg-magenta-500 border-magenta-900',
}[color],
)}
{...props}
>
{children}
</span>
);
};

7
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 { BadgeRounded } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { DocsLink } from '@/components/ui/docs-note';
import { EmptyList } from '@/components/ui/empty-list';
@ -10,7 +11,6 @@ import { Subtitle, Title } from '@/components/ui/page';
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 { graphql } from '@/gql';
import { cn } from '@/lib/utils';
import { ExternalLinkIcon } from '@radix-ui/react-icons';
@ -123,9 +123,12 @@ const Navigation = (props: {
<div
className={cn(
edge.node.__typename === 'FailedSchemaCheck' ? 'text-red-500' : null,
'flex flex-row items-center gap-1',
)}
>
<Badge color={edge.node.__typename === 'FailedSchemaCheck' ? 'red' : 'green'} />{' '}
<BadgeRounded
color={edge.node.__typename === 'FailedSchemaCheck' ? 'red' : 'green'}
/>
<TimeAgo date={edge.node.createdAt} />
</div>

8
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 { BadgeRounded } from '@/components/ui/badge';
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 { graphql } from '@/gql';
import { cn } from '@/lib/utils';
import { ExternalLinkIcon } from '@radix-ui/react-icons';
@ -114,8 +114,10 @@ function ListPage(props: {
</div>
) : null}
<div className="mb-1.5 mt-2.5 flex align-middle text-xs font-medium text-[#c4c4c4]">
<div className={cn(!version.valid && 'text-red-500')}>
<Badge color={version.valid ? 'green' : 'red'} /> Published{' '}
<div
className={cn(!version.valid && 'text-red-500', 'flex flex-row items-center gap-1')}
>
<BadgeRounded color={version.valid ? 'green' : 'red'} /> Published
<TimeAgo date={version.date} />
</div>

107
packages/web/app/src/stories/badge.stories.tsx Normal file
View file

@ -0,0 +1,107 @@
import {
Badge,
BadgeProps,
BadgeRounded,
BadgeRoundedProps,
badgeRoundedVariants,
badgeVariants,
} from '@/components/ui/badge';
import { Meta, StoryObj } from '@storybook/react';
const meta: Meta = {
title: 'Components/Badge',
argTypes: {
variant: {
control: { type: 'select' },
options: Object.keys(badgeVariants({ variant: 'default' })),
},
color: {
control: { type: 'select' },
options: Object.keys(badgeRoundedVariants({ color: 'green' })),
},
},
};
export default meta;
// Badge Stories
const BadgeTemplate = (args: BadgeProps) => <Badge {...args} />;
export const DefaultBadge: StoryObj<typeof Badge> = {
name: 'Default Badge',
render: BadgeTemplate,
args: {
variant: 'default',
children: 'Default Badge',
},
};
export const SecondaryBadge: StoryObj<typeof Badge> = {
name: 'Secondary Badge',
render: BadgeTemplate,
args: {
variant: 'secondary',
children: 'Secondary Badge',
},
};
export const DestructiveBadge: StoryObj<typeof Badge> = {
name: 'Destructive Badge',
render: BadgeTemplate,
args: {
variant: 'destructive',
children: 'Destructive Badge',
},
};
export const OutlineBadge: StoryObj<typeof Badge> = {
name: 'Outline Badge',
render: BadgeTemplate,
args: {
variant: 'outline',
children: 'Outline Badge',
},
};
// BadgeRounded Stories
const BadgeRoundedTemplate = (args: BadgeRoundedProps) => <BadgeRounded {...args} />;
export const RedBadgeRounded: StoryObj<typeof BadgeRounded> = {
name: 'Red BadgeRounded',
render: BadgeRoundedTemplate,
args: {
color: 'red',
},
};
export const YellowBadgeRounded: StoryObj<typeof BadgeRounded> = {
name: 'Yellow BadgeRounded',
render: BadgeRoundedTemplate,
args: {
color: 'yellow',
},
};
export const GreenBadgeRounded: StoryObj<typeof BadgeRounded> = {
name: 'Green BadgeRounded',
render: BadgeRoundedTemplate,
args: {
color: 'green',
},
};
export const GrayBadgeRounded: StoryObj<typeof BadgeRounded> = {
name: 'Gray BadgeRounded',
render: BadgeRoundedTemplate,
args: {
color: 'gray',
},
};
export const OrangeBadgeRounded: StoryObj<typeof BadgeRounded> = {
name: 'Orange BadgeRounded',
render: BadgeRoundedTemplate,
args: {
color: 'orange',
},
};

32
pnpm-lock.yaml
View file

@ -17531,10 +17531,10 @@ snapshots:
'@aws-crypto/sha1-browser': 5.2.0
'@aws-crypto/sha256-browser': 5.2.0
'@aws-crypto/sha256-js': 5.2.0
'@aws-sdk/client-sso-oidc': 3.600.0(@aws-sdk/client-sts@3.600.0)
'@aws-sdk/client-sts': 3.600.0
'@aws-sdk/client-sso-oidc': 3.600.0
'@aws-sdk/client-sts': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)
'@aws-sdk/core': 3.598.0
'@aws-sdk/credential-provider-node': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0)
'@aws-sdk/credential-provider-node': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0(@aws-sdk/client-sso-oidc@3.600.0))
'@aws-sdk/middleware-bucket-endpoint': 3.598.0
'@aws-sdk/middleware-expect-continue': 3.598.0
'@aws-sdk/middleware-flexible-checksums': 3.598.0
@ -17634,13 +17634,13 @@ snapshots:
transitivePeerDependencies:
- aws-crt
'@aws-sdk/client-sso-oidc@3.600.0(@aws-sdk/client-sts@3.600.0)':
'@aws-sdk/client-sso-oidc@3.600.0':
dependencies:
'@aws-crypto/sha256-browser': 5.2.0
'@aws-crypto/sha256-js': 5.2.0
'@aws-sdk/client-sts': 3.600.0
'@aws-sdk/client-sts': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)
'@aws-sdk/core': 3.598.0
'@aws-sdk/credential-provider-node': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0)
'@aws-sdk/credential-provider-node': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0(@aws-sdk/client-sso-oidc@3.600.0))
'@aws-sdk/middleware-host-header': 3.598.0
'@aws-sdk/middleware-logger': 3.598.0
'@aws-sdk/middleware-recursion-detection': 3.598.0
@ -17677,7 +17677,6 @@ snapshots:
'@smithy/util-utf8': 3.0.0
tslib: 2.6.3
transitivePeerDependencies:
- '@aws-sdk/client-sts'
- aws-crt
'@aws-sdk/client-sso@3.592.0':
@ -17812,13 +17811,13 @@ snapshots:
- '@aws-sdk/client-sso-oidc'
- aws-crt
'@aws-sdk/client-sts@3.600.0':
'@aws-sdk/client-sts@3.600.0(@aws-sdk/client-sso-oidc@3.600.0)':
dependencies:
'@aws-crypto/sha256-browser': 5.2.0
'@aws-crypto/sha256-js': 5.2.0
'@aws-sdk/client-sso-oidc': 3.600.0(@aws-sdk/client-sts@3.600.0)
'@aws-sdk/client-sso-oidc': 3.600.0
'@aws-sdk/core': 3.598.0
'@aws-sdk/credential-provider-node': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0)
'@aws-sdk/credential-provider-node': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0(@aws-sdk/client-sso-oidc@3.600.0))
'@aws-sdk/middleware-host-header': 3.598.0
'@aws-sdk/middleware-logger': 3.598.0
'@aws-sdk/middleware-recursion-detection': 3.598.0
@ -17855,6 +17854,7 @@ snapshots:
'@smithy/util-utf8': 3.0.0
tslib: 2.6.3
transitivePeerDependencies:
- '@aws-sdk/client-sso-oidc'
- aws-crt
'@aws-sdk/core@3.592.0':
@ -17933,9 +17933,9 @@ snapshots:
- '@aws-sdk/client-sso-oidc'
- aws-crt
'@aws-sdk/credential-provider-ini@3.598.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0)':
'@aws-sdk/credential-provider-ini@3.598.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0(@aws-sdk/client-sso-oidc@3.600.0))':
dependencies:
'@aws-sdk/client-sts': 3.600.0
'@aws-sdk/client-sts': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)
'@aws-sdk/credential-provider-env': 3.598.0
'@aws-sdk/credential-provider-http': 3.598.0
'@aws-sdk/credential-provider-process': 3.598.0
@ -17970,11 +17970,11 @@ snapshots:
- '@aws-sdk/client-sts'
- aws-crt
'@aws-sdk/credential-provider-node@3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0)':
'@aws-sdk/credential-provider-node@3.600.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0(@aws-sdk/client-sso-oidc@3.600.0))':
dependencies:
'@aws-sdk/credential-provider-env': 3.598.0
'@aws-sdk/credential-provider-http': 3.598.0
'@aws-sdk/credential-provider-ini': 3.598.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0)
'@aws-sdk/credential-provider-ini': 3.598.0(@aws-sdk/client-sso-oidc@3.600.0)(@aws-sdk/client-sts@3.600.0(@aws-sdk/client-sso-oidc@3.600.0))
'@aws-sdk/credential-provider-process': 3.598.0
'@aws-sdk/credential-provider-sso': 3.598.0(@aws-sdk/client-sso-oidc@3.600.0)
'@aws-sdk/credential-provider-web-identity': 3.598.0(@aws-sdk/client-sts@3.600.0)
@ -18041,7 +18041,7 @@ snapshots:
'@aws-sdk/credential-provider-web-identity@3.598.0(@aws-sdk/client-sts@3.600.0)':
dependencies:
'@aws-sdk/client-sts': 3.600.0
'@aws-sdk/client-sts': 3.600.0(@aws-sdk/client-sso-oidc@3.600.0)
'@aws-sdk/types': 3.598.0
'@smithy/property-provider': 3.1.2
'@smithy/types': 3.2.0
@ -18214,7 +18214,7 @@ snapshots:
'@aws-sdk/token-providers@3.598.0(@aws-sdk/client-sso-oidc@3.600.0)':
dependencies:
'@aws-sdk/client-sso-oidc': 3.600.0(@aws-sdk/client-sts@3.600.0)
'@aws-sdk/client-sso-oidc': 3.600.0
'@aws-sdk/types': 3.598.0
'@smithy/property-provider': 3.1.2
'@smithy/shared-ini-file-loader': 3.1.2