forked from MystenLabs/sui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[explorer] Implement badge component (MystenLabs#5274)
* Start migrating to new storybook * Migrate all stories to CSF 3 * Implement badge * update lockfile * Remove component anti-aliasing * Format * Add license header
- Loading branch information
1 parent
74180e5
commit 32a141a
Showing
23 changed files
with
2,835 additions
and
4,924 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { addons } from '@storybook/addons'; | ||
| import { themes } from '@storybook/theming'; | ||
|
|
||
| // Force the theme to light, as our components do not suppor theming | ||
| addons.setConfig({ | ||
| theme: themes.light, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { cva, type VariantProps } from 'class-variance-authority'; | ||
| import { type ReactNode } from 'react'; | ||
|
|
||
| import { ReactComponent as CheckIcon } from './icons/check.svg'; | ||
| import { ReactComponent as XIcon } from './icons/x.svg'; | ||
|
|
||
| const badgeStyles = cva( | ||
| [ | ||
| 'inline-flex justify-center items-center gap-1.5 py-1 px-2 rounded-md text-body font-medium', | ||
| ], | ||
| { | ||
| variants: { | ||
| variant: { | ||
| current: 'bg-sui-grey-45 text-sui-grey-75', | ||
| success: 'bg-success-light text-success-dark', | ||
| failure: 'bg-issue-light text-issue-dark', | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| variant: 'current', | ||
| }, | ||
| } | ||
| ); | ||
|
|
||
| export interface BadgeProps extends VariantProps<typeof badgeStyles> { | ||
| children?: ReactNode; | ||
| } | ||
|
|
||
| export function Badge({ variant, children }: BadgeProps) { | ||
| return ( | ||
| <div className={badgeStyles({ variant })}> | ||
| {variant === 'current' && ( | ||
| <div className="bg-success rounded-full w-2 h-2" /> | ||
| )} | ||
| {variant === 'failure' && <XIcon />} | ||
| {variant === 'success' && <CheckIcon />} | ||
|
|
||
| <span>{children}</span> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { type Meta, type StoryObj } from '@storybook/react'; | ||
|
|
||
| import { Badge, type BadgeProps } from '../Badge'; | ||
|
|
||
| export default { | ||
| component: Badge, | ||
| } as Meta; | ||
|
|
||
| export const Current: StoryObj<BadgeProps> = { | ||
| render: (props) => <Badge {...props}>Badge</Badge>, | ||
| }; | ||
|
|
||
| export const Success: StoryObj<BadgeProps> = { | ||
| ...Current, | ||
| args: { variant: 'success' }, | ||
| }; | ||
|
|
||
| export const Failure: StoryObj<BadgeProps> = { | ||
| ...Current, | ||
| args: { variant: 'failure' }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,24 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { type ComponentStory, type ComponentMeta } from '@storybook/react'; | ||
| import { type Meta, type StoryObj } from '@storybook/react'; | ||
|
|
||
| import { Card } from '../Card'; | ||
| import { Card, type CardProps } from '../Card'; | ||
|
|
||
| export default { | ||
| title: 'UI/Card', | ||
| component: Card, | ||
| } as ComponentMeta<typeof Card>; | ||
| } as Meta; | ||
|
|
||
| const Template: ComponentStory<typeof Card> = (args) => ( | ||
| <Card {...args}>This is card content.</Card> | ||
| ); | ||
| export const Default: StoryObj<CardProps> = { | ||
| render: (props) => <Card {...props}>This is card content.</Card>, | ||
| }; | ||
|
|
||
| export const Default = Template.bind({}); | ||
| Default.args = {}; | ||
| export const Small: StoryObj<CardProps> = { | ||
| ...Default, | ||
| args: { spacing: 'sm' }, | ||
| }; | ||
|
|
||
| export const Small = Template.bind({}); | ||
| Small.args = { spacing: 'sm' }; | ||
|
|
||
| export const Large = Template.bind({}); | ||
| Large.args = { spacing: 'lg' }; | ||
| export const Large: StoryObj<CardProps> = { | ||
| ...Default, | ||
| args: { spacing: 'lg' }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,26 @@ | ||
| // Copyright (c) Mysten Labs, Inc. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { type Meta, type StoryObj } from '@storybook/react'; | ||
|
|
||
| import { | ||
| DateFilter, | ||
| useDateFilterState, | ||
| type DateFilterProps, | ||
| } from '../DateFilter'; | ||
|
|
||
| import type { ComponentMeta, ComponentStory } from '@storybook/react'; | ||
|
|
||
| export default { | ||
| title: 'UI/DateFilter', | ||
| component: DateFilter, | ||
| } as ComponentMeta<typeof DateFilter>; | ||
|
|
||
| function DateFilterWithState( | ||
| props: Omit<DateFilterProps, 'value' | 'onChange'> | ||
| ) { | ||
| const [value, onChange] = useDateFilterState('D'); | ||
| return <DateFilter {...props} value={value} onChange={onChange} />; | ||
| } | ||
| } as Meta; | ||
|
|
||
| const Template: ComponentStory<typeof DateFilter> = (args) => ( | ||
| <DateFilterWithState {...args} /> | ||
| ); | ||
|
|
||
| export const Default = Template.bind({}); | ||
| export const Default: StoryObj<DateFilterProps> = { | ||
| render: (props) => { | ||
| const [value, onChange] = useDateFilterState('D'); | ||
| return <DateFilter {...props} value={value} onChange={onChange} />; | ||
| }, | ||
| }; | ||
|
|
||
| export const CustomOptions = Template.bind({}); | ||
| CustomOptions.args = { | ||
| options: ['D', 'ALL'], | ||
| export const CustomOptions: StoryObj<DateFilterProps> = { | ||
| ...Default, | ||
| args: { options: ['D', 'ALL'] }, | ||
| }; |
Oops, something went wrong.