CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Update stories to match new component organization

Browse Source
This commit is contained in:
adilallo
2026-02-05 22:46:16 -07:00
parent 6f178e934f
commit aef04c525a
51 changed files with 111 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stories/utility/AvatarContainer.stories.js
+206
View File
@@ -0,0 +1,206 @@
import AvatarContainer from "../../app/components/utility/AvatarContainer";
import Avatar from "../../app/components/icons/Avatar";
export default {
title: "Components/Utility/AvatarContainer",
component: AvatarContainer,
parameters: {
layout: "centered",
docs: {
description: {
component:
"A container component that groups multiple avatars together with overlapping spacing. Useful for displaying multiple users or team members in a compact format.",
},
},
},
argTypes: {
size: {
control: { type: "select" },
options: ["small", "medium", "large", "xlarge"],
description: "The size of the avatar container and its children",
},
className: {
control: { type: "text" },
description: "Additional CSS classes",
},
},
tags: ["autodocs"],
};
export const Default = {
args: {
size: "medium",
},
render: (args) => (
<AvatarContainer {...args}>
<Avatar size={args.size} src="assets/Avatar_1.png" alt="User 1" />
<Avatar size={args.size} src="assets/Avatar_2.png" alt="User 2" />
<Avatar size={args.size} src="assets/Avatar_3.png" alt="User 3" />
</AvatarContainer>
),
};
export const Sizes = {
args: {},
render: () => (
<div className="space-y-6">
<div>
<h3 className="text-white font-semibold mb-3">Small Size</h3>
<AvatarContainer size="small">
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
<Avatar size="small" src="assets/Avatar_3.png" alt="User 3" />
</AvatarContainer>
</div>
<div>
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
<AvatarContainer size="medium">
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
</AvatarContainer>
</div>
<div>
<h3 className="text-white font-semibold mb-3">Large Size</h3>
<AvatarContainer size="large">
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
</AvatarContainer>
</div>
<div>
<h3 className="text-white font-semibold mb-3">XLarge Size</h3>
<AvatarContainer size="xlarge">
<Avatar size="xlarge" src="assets/Avatar_1.png" alt="User 1" />
<Avatar size="xlarge" src="assets/Avatar_2.png" alt="User 2" />
<Avatar size="xlarge" src="assets/Avatar_3.png" alt="User 3" />
</AvatarContainer>
</div>
</div>
),
parameters: {
docs: {
description: {
story:
"Different size variants of the avatar container with overlapping spacing.",
},
},
},
};
export const DifferentGroupSizes = {
args: {},
render: () => (
<div className="space-y-6">
<div>
<h3 className="text-white font-semibold mb-3">2 Users</h3>
<AvatarContainer size="large">
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
</AvatarContainer>
</div>
<div>
<h3 className="text-white font-semibold mb-3">3 Users</h3>
<AvatarContainer size="large">
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
</AvatarContainer>
</div>
<div>
<h3 className="text-white font-semibold mb-3">4 Users</h3>
<AvatarContainer size="large">
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
</AvatarContainer>
</div>
<div>
<h3 className="text-white font-semibold mb-3">5 Users</h3>
<AvatarContainer size="large">
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
<Avatar size="large" src="assets/Avatar_2.png" alt="User 5" />
</AvatarContainer>
</div>
</div>
),
parameters: {
docs: {
description: {
story:
"Avatar containers with different numbers of users to show the overlapping effect.",
},
},
},
};
export const InContext = {
args: {},
render: () => (
<div className="min-h-screen bg-[var(--color-surface-default-primary)] p-8">
<div className="max-w-4xl mx-auto">
<h2 className="text-white font-semibold mb-6">
Avatar Container in Context
</h2>
<div className="space-y-8">
<div className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg">
<h3 className="text-white font-semibold mb-4">Team Members</h3>
<div className="flex items-center space-x-4">
<AvatarContainer size="medium">
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
</AvatarContainer>
<span className="text-white">3 team members</span>
</div>
</div>
<div className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg">
<h3 className="text-white font-semibold mb-4">
Project Contributors
</h3>
<div className="flex items-center space-x-4">
<AvatarContainer size="large">
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
</AvatarContainer>
<span className="text-white">4 contributors</span>
</div>
</div>
<div className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg">
<h3 className="text-white font-semibold mb-4">Small Team</h3>
<div className="flex items-center space-x-4">
<AvatarContainer size="small">
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
</AvatarContainer>
<span className="text-white">2 members</span>
</div>
</div>
</div>
</div>
</div>
),
parameters: {
docs: {
description: {
story:
"Avatar containers used in realistic contexts to show how they integrate with other UI elements.",
},
},
},
};
stories/utility/ErrorBoundary.stories.js
+40
View File
@@ -0,0 +1,40 @@
import ErrorBoundary from "../../app/components/utility/ErrorBoundary";
export default {
title: "Components/Utility/ErrorBoundary",
component: ErrorBoundary,
parameters: {
layout: "centered",
docs: {
description: {
component:
"An error boundary component that catches JavaScript errors in its child component tree. Displays a fallback UI when errors occur and logs error information for debugging.",
},
},
},
argTypes: {
children: {
control: { type: "text" },
description: "Child components to wrap with error boundary",
},
},
};
export const Default = {
args: {
children: <div>Normal content</div>,
},
};
export const WithError = {
render: () => {
const ThrowError = () => {
throw new Error("Test error for ErrorBoundary");
};
return (
<ErrorBoundary>
<ThrowError />
</ErrorBoundary>
);
},
};