SILVER/NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

base

Browse Source
This commit is contained in:
DCCONSTRUCTIONS
2026-04-18 18:39:25 +03:00
commit 3ba092b60c
4944 changed files with 497564 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plane-src/packages/propel/src/skeleton/index.ts
+7
View File
@@ -0,0 +1,7 @@
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
export * from "./root";
plane-src/packages/propel/src/skeleton/root.tsx
+40
View File
@@ -0,0 +1,40 @@
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
import React from "react";
// helpers
import { cn } from "../utils/classname";
type SkeletonProps = {
children: React.ReactNode;
className?: string;
ariaLabel?: string;
};
function SkeletonRoot({ children, className = "", ariaLabel = "Loading content" }: SkeletonProps) {
return (
<div data-slot="skeleton" className={cn("animate-pulse", className)} role="status" aria-label={ariaLabel}>
{children}
</div>
);
}
type ItemProps = {
height?: string;
width?: string;
className?: string;
};
function SkeletonItem({ height = "auto", width = "auto", className = "" }: ItemProps) {
return <div data-slot="skeleton-item" className={cn("rounded-md bg-layer-1", className)} style={{ height, width }} />;
}
const Skeleton = Object.assign(SkeletonRoot, { Item: SkeletonItem });
SkeletonRoot.displayName = "plane-ui-skeleton";
SkeletonItem.displayName = "plane-ui-skeleton-item";
export { Skeleton, SkeletonRoot, SkeletonItem };
plane-src/packages/propel/src/skeleton/skeleton.stories.tsx
+200
View File
@@ -0,0 +1,200 @@
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
import type { Meta, StoryObj } from "@storybook/react-vite";
import { Skeleton } from "./index";
const meta = {
title: "Components/Skeleton",
component: Skeleton,
parameters: {
layout: "centered",
},
args: {
children: null,
},
} satisfies Meta<typeof Skeleton>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
render() {
return (
<Skeleton className="flex w-80 flex-col gap-2">
<Skeleton.Item height="40px" width="100%" />
</Skeleton>
);
},
};
export const Card: Story = {
render() {
return (
<Skeleton className="flex w-80 flex-col gap-4">
<Skeleton.Item height="200px" width="100%" />
<div className="flex flex-col gap-2">
<Skeleton.Item height="20px" width="60%" />
<Skeleton.Item height="16px" width="40%" />
</div>
</Skeleton>
);
},
};
export const List: Story = {
render() {
return (
<Skeleton className="flex w-96 flex-col gap-3">
{[...Array(5)].map((_, i) => (
<div key={i} className="flex gap-3">
<Skeleton.Item height="40px" width="40px" className="rounded-full" />
<div className="flex flex-1 flex-col gap-2">
<Skeleton.Item height="16px" width="70%" />
<Skeleton.Item height="12px" width="50%" />
</div>
</div>
))}
</Skeleton>
);
},
};
export const Table: Story = {
render() {
return (
<Skeleton className="flex w-full flex-col gap-3">
<div className="flex gap-4">
<Skeleton.Item height="20px" width="150px" />
<Skeleton.Item height="20px" width="200px" />
<Skeleton.Item height="20px" width="120px" />
</div>
{[...Array(5)].map((_, i) => (
<div key={i} className="flex gap-4">
<Skeleton.Item height="40px" width="150px" />
<Skeleton.Item height="40px" width="200px" />
<Skeleton.Item height="40px" width="120px" />
</div>
))}
</Skeleton>
);
},
};
export const Profile: Story = {
render() {
return (
<Skeleton className="flex w-80 flex-col gap-4">
<div className="flex items-center gap-4">
<Skeleton.Item height="80px" width="80px" className="rounded-full" />
<div className="flex flex-1 flex-col gap-2">
<Skeleton.Item height="20px" width="60%" />
<Skeleton.Item height="16px" width="40%" />
</div>
</div>
<div className="flex flex-col gap-2">
<Skeleton.Item height="16px" width="100%" />
<Skeleton.Item height="16px" width="90%" />
<Skeleton.Item height="16px" width="70%" />
</div>
</Skeleton>
);
},
};
export const Avatar: Story = {
render() {
return (
<Skeleton className="flex gap-2">
<Skeleton.Item height="40px" width="40px" className="rounded-full" />
</Skeleton>
);
},
};
export const AvatarGroup: Story = {
render() {
return (
<Skeleton className="flex -space-x-2">
{[...Array(4)].map((_, i) => (
<Skeleton.Item key={i} height="40px" width="40px" className="rounded-full border-2 border-white" />
))}
</Skeleton>
);
},
};
export const Text: Story = {
render() {
return (
<Skeleton className="flex w-96 flex-col gap-2">
<Skeleton.Item height="16px" width="100%" />
<Skeleton.Item height="16px" width="95%" />
<Skeleton.Item height="16px" width="90%" />
<Skeleton.Item height="16px" width="60%" />
</Skeleton>
);
},
};
export const Button: Story = {
render() {
return (
<Skeleton className="inline-flex">
<Skeleton.Item height="40px" width="120px" className="rounded-md" />
</Skeleton>
);
},
};
export const Input: Story = {
render() {
return (
<Skeleton className="flex w-80 flex-col gap-2">
<Skeleton.Item height="14px" width="80px" />
<Skeleton.Item height="40px" width="100%" className="rounded-md" />
</Skeleton>
);
},
};
export const Form: Story = {
render() {
return (
<Skeleton className="flex w-96 flex-col gap-4">
<div className="flex flex-col gap-2">
<Skeleton.Item height="14px" width="80px" />
<Skeleton.Item height="40px" width="100%" className="rounded-md" />
</div>
<div className="flex flex-col gap-2">
<Skeleton.Item height="14px" width="100px" />
<Skeleton.Item height="40px" width="100%" className="rounded-md" />
</div>
<div className="flex flex-col gap-2">
<Skeleton.Item height="14px" width="60px" />
<Skeleton.Item height="80px" width="100%" className="rounded-md" />
</div>
<Skeleton.Item height="40px" width="120px" className="rounded-md" />
</Skeleton>
);
},
};
export const ProductCard: Story = {
render() {
return (
<Skeleton className="flex w-72 flex-col gap-3 rounded-lg border p-4">
<Skeleton.Item height="200px" width="100%" className="rounded-md" />
<div className="flex flex-col gap-2">
<Skeleton.Item height="20px" width="80%" />
<Skeleton.Item height="16px" width="60%" />
<Skeleton.Item height="24px" width="40%" />
</div>
<Skeleton.Item height="40px" width="100%" className="rounded-md" />
</Skeleton>
);
},
};