Refactor renamed the component groups to something less obtuse:
Elements -> Groups -> Screens -> Views
This commit is contained in:
cliffhall
parent
ca6de91a96
commit
dd46acba87
2 changed files with 151 additions and 144 deletions
|
|
@ -0,0 +1,112 @@
|
|||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import { fn } from "storybook/test";
|
||||
import { ResourcesScreen } from "./ResourcesScreen";
|
||||
import type { ResourceListItemProps } from "../../groups/ResourceListItem/ResourceListItem";
|
||||
import type { ResourceTemplateInputProps } from "../../groups/ResourceTemplateInput/ResourceTemplateInput";
|
||||
import type { ResourcePreviewPanelProps } from "../../groups/ResourcePreviewPanel/ResourcePreviewPanel";
|
||||
|
||||
const meta: Meta<typeof ResourcesScreen> = {
|
||||
title: "Screens/ResourcesScreen",
|
||||
component: ResourcesScreen,
|
||||
parameters: { layout: "fullscreen" },
|
||||
args: {
|
||||
searchText: "",
|
||||
onSearchChange: fn(),
|
||||
onRefreshList: fn(),
|
||||
onSelectResource: fn(),
|
||||
listChanged: false,
|
||||
subscriptions: [],
|
||||
templates: [],
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ResourcesScreen>;
|
||||
|
||||
const sampleResources: ResourceListItemProps[] = [
|
||||
{
|
||||
name: "config.json",
|
||||
uri: "file:///config.json",
|
||||
annotations: { audience: "developer", priority: 0.8 },
|
||||
selected: false,
|
||||
onClick: fn(),
|
||||
},
|
||||
{
|
||||
name: "README.md",
|
||||
uri: "file:///README.md",
|
||||
selected: false,
|
||||
onClick: fn(),
|
||||
},
|
||||
{
|
||||
name: "schema.sql",
|
||||
uri: "file:///schema.sql",
|
||||
annotations: { priority: 0.5 },
|
||||
selected: false,
|
||||
onClick: fn(),
|
||||
},
|
||||
];
|
||||
|
||||
const sampleTemplates: ResourceTemplateInputProps[] = [
|
||||
{
|
||||
template: "file:///users/{userId}/profile",
|
||||
variables: { userId: "" },
|
||||
onVariableChange: fn(),
|
||||
onSubmit: fn(),
|
||||
},
|
||||
{
|
||||
template: "db://tables/{tableName}/rows/{rowId}",
|
||||
variables: { tableName: "", rowId: "" },
|
||||
onVariableChange: fn(),
|
||||
onSubmit: fn(),
|
||||
},
|
||||
];
|
||||
|
||||
const selectedResourceProps: ResourcePreviewPanelProps = {
|
||||
uri: "file:///config.json",
|
||||
mimeType: "application/json",
|
||||
annotations: { audience: "developer", priority: 0.8 },
|
||||
content: JSON.stringify(
|
||||
{
|
||||
name: "my-project",
|
||||
version: "1.0.0",
|
||||
settings: { debug: true, logLevel: "info" },
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
lastUpdated: "2026-03-17T10:30:00Z",
|
||||
isSubscribed: true,
|
||||
onSubscribe: fn(),
|
||||
onUnsubscribe: fn(),
|
||||
};
|
||||
|
||||
export const WithResources: Story = {
|
||||
args: {
|
||||
resources: sampleResources,
|
||||
},
|
||||
};
|
||||
|
||||
export const ResourceSelected: Story = {
|
||||
args: {
|
||||
resources: sampleResources.map((r) =>
|
||||
r.uri === "file:///config.json" ? { ...r, selected: true } : r,
|
||||
),
|
||||
selectedResource: selectedResourceProps,
|
||||
subscriptions: [
|
||||
{ name: "config.json", lastUpdated: "2026-03-17T10:30:00Z" },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const WithTemplates: Story = {
|
||||
args: {
|
||||
resources: sampleResources,
|
||||
templates: sampleTemplates,
|
||||
},
|
||||
};
|
||||
|
||||
export const Empty: Story = {
|
||||
args: {
|
||||
resources: [],
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
import {
|
||||
Accordion,
|
||||
Card,
|
||||
Container,
|
||||
Grid,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
|
||||
import { ResourceListItem } from "../../groups/ResourceListItem/ResourceListItem";
|
||||
import { ResourcePreviewPanel } from "../../groups/ResourcePreviewPanel/ResourcePreviewPanel";
|
||||
import { ResourceTemplateInput } from "../../groups/ResourceTemplateInput/ResourceTemplateInput";
|
||||
import type { ResourceListItemProps } from "../../groups/ResourceListItem/ResourceListItem";
|
||||
import type { ResourcePreviewPanelProps } from "../../groups/ResourcePreviewPanel/ResourcePreviewPanel";
|
||||
import type { ResourceTemplateInputProps } from "../../groups/ResourceTemplateInput/ResourceTemplateInput";
|
||||
|
||||
export interface SubscriptionInfo {
|
||||
name: string;
|
||||
lastUpdated?: string;
|
||||
}
|
||||
|
||||
export interface ResourcesScreenProps {
|
||||
resources: ResourceListItemProps[];
|
||||
templates: ResourceTemplateInputProps[];
|
||||
subscriptions: SubscriptionInfo[];
|
||||
selectedResource?: ResourcePreviewPanelProps;
|
||||
listChanged: boolean;
|
||||
searchText: string;
|
||||
onSearchChange: (text: string) => void;
|
||||
onRefreshList: () => void;
|
||||
onSelectResource: (uri: string) => void;
|
||||
}
|
||||
|
||||
const PageContainer = Container.withProps({
|
||||
size: "xl",
|
||||
py: "xl",
|
||||
});
|
||||
|
||||
const FullHeightCard = Card.withProps({
|
||||
withBorder: true,
|
||||
padding: "lg",
|
||||
h: "100%",
|
||||
});
|
||||
|
||||
const DetailCard = Card.withProps({
|
||||
withBorder: true,
|
||||
padding: "lg",
|
||||
});
|
||||
|
||||
const EmptyState = Text.withProps({
|
||||
c: "dimmed",
|
||||
ta: "center",
|
||||
py: "xl",
|
||||
});
|
||||
|
||||
const SubscriptionMeta = Text.withProps({
|
||||
span: true,
|
||||
c: "dimmed",
|
||||
size: "xs",
|
||||
});
|
||||
|
||||
function formatSectionCount(label: string, count: number): string {
|
||||
return `${label} (${count})`;
|
||||
}
|
||||
|
||||
function formatLastUpdated(lastUpdated: string): string {
|
||||
return ` — ${lastUpdated}`;
|
||||
}
|
||||
|
||||
export function ResourcesScreen({
|
||||
resources,
|
||||
templates,
|
||||
subscriptions,
|
||||
selectedResource,
|
||||
listChanged,
|
||||
searchText,
|
||||
onSearchChange,
|
||||
onRefreshList,
|
||||
}: ResourcesScreenProps) {
|
||||
const filteredResources = resources.filter((r) =>
|
||||
r.name.toLowerCase().includes(searchText.toLowerCase()),
|
||||
);
|
||||
|
||||
const openSections = [
|
||||
...(filteredResources.length > 0 ? ["resources"] : []),
|
||||
...(templates.length > 0 ? ["templates"] : []),
|
||||
...(subscriptions.length > 0 ? ["subscriptions"] : []),
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<Grid align="stretch">
|
||||
<Grid.Col span={4}>
|
||||
<FullHeightCard>
|
||||
<Stack gap="sm">
|
||||
<Title order={4}>Resources</Title>
|
||||
<ListChangedIndicator
|
||||
visible={listChanged}
|
||||
onRefresh={onRefreshList}
|
||||
/>
|
||||
<TextInput
|
||||
placeholder="Search..."
|
||||
value={searchText}
|
||||
onChange={(e) => onSearchChange(e.currentTarget.value)}
|
||||
/>
|
||||
<Accordion multiple defaultValue={openSections}>
|
||||
<Accordion.Item value="resources">
|
||||
<Accordion.Control disabled={filteredResources.length === 0}>
|
||||
{formatSectionCount("URIs", filteredResources.length)}
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<Stack gap="xs">
|
||||
{filteredResources.map((resource) => (
|
||||
<ResourceListItem key={resource.uri} {...resource} />
|
||||
))}
|
||||
</Stack>
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
|
||||
<Accordion.Item value="templates">
|
||||
<Accordion.Control disabled={templates.length === 0}>
|
||||
{formatSectionCount("Templates", templates.length)}
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<Stack gap="xs">
|
||||
{templates.map((template) => (
|
||||
<ResourceTemplateInput
|
||||
key={template.template}
|
||||
{...template}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
|
||||
<Accordion.Item value="subscriptions">
|
||||
<Accordion.Control disabled={subscriptions.length === 0}>
|
||||
{formatSectionCount("Subscriptions", subscriptions.length)}
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<Stack gap="xs">
|
||||
{subscriptions.map((sub) => (
|
||||
<Text key={sub.name} size="sm">
|
||||
{sub.name}
|
||||
{sub.lastUpdated && (
|
||||
<SubscriptionMeta>
|
||||
{formatLastUpdated(sub.lastUpdated)}
|
||||
</SubscriptionMeta>
|
||||
)}
|
||||
</Text>
|
||||
))}
|
||||
</Stack>
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</Stack>
|
||||
</FullHeightCard>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={8}>
|
||||
<DetailCard>
|
||||
{selectedResource ? (
|
||||
<ResourcePreviewPanel {...selectedResource} />
|
||||
) : (
|
||||
<EmptyState>Select a resource to preview</EmptyState>
|
||||
)}
|
||||
</DetailCard>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue