forked from cerc-io/snowballtools-base
### TL;DR Refactored the `DomainCard`, `EditDomainDialog`, and `WebhookCard` components to improve code readability and enhance UI using new shared components like `Tag`, `Heading`, `Button`, and `CustomIcon`. ### What changed? - `DomainCard` component: - Replaced `Chip` with `Tag` component. - Used `Heading`, `Button`, and `CustomIcon` components. - Updated refresh icon to show `LoadingIcon` when checking. - `EditDomainDialog` component: - Used `useToast` hook for toast messages. - `WebhookCard` component: - Used `Input`, `Button`, and `CustomIcon` components for better UI. - Added Storybook stories for the updated components. ### How to test? 1. Go to the project settings page. 2. Verify the `DomainCard` UI updates. 3. Edit a domain and check the toasts. 4. Verify the `WebhookCard` UI and functionality. 5. Run Storybook and inspect the added stories for the components. ### Why make this change? To improve the consistency and user experience of the project settings UI, and to make the components more maintainable by using shared components. ---
49 lines
894 B
TypeScript
49 lines
894 B
TypeScript
import { StoryObj, Meta } from '@storybook/react';
|
|
|
|
import DomainCard from 'components/projects/project/settings/DomainCard';
|
|
import { domain0, domain1, project } from '../../MockStoriesData';
|
|
|
|
const meta: Meta<typeof DomainCard> = {
|
|
title: 'Project/Settings/DomainCard',
|
|
component: DomainCard,
|
|
tags: ['autodocs'],
|
|
argTypes: {
|
|
domains: {
|
|
control: {
|
|
type: 'object',
|
|
},
|
|
},
|
|
domain: {
|
|
control: {
|
|
type: 'object',
|
|
},
|
|
},
|
|
branches: {
|
|
control: {
|
|
type: 'object',
|
|
},
|
|
},
|
|
project: {
|
|
control: {
|
|
type: 'object',
|
|
},
|
|
},
|
|
onUpdate: {
|
|
action: 'update',
|
|
},
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof DomainCard>;
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
domains: [domain0, domain1],
|
|
domain: domain0,
|
|
branches: ['main'],
|
|
project: project,
|
|
},
|
|
};
|