[WEB-5459] feat(codemods): add function declaration transformer with tests (#8137)
- Add jscodeshift-based codemod to convert arrow function components to function declarations - Support React.FC, observer-wrapped, and forwardRef components - Include comprehensive test suite covering edge cases - Add npm script to run transformer across codebase - Target only .tsx files in source directories, excluding node_modules and declaration files * [WEB-5459] chore: updates after running codemod --------- Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>
This commit is contained in:
Aaron
GitHub
parent
90866fb925
commit
83fdebf64d
1771 changed files with 17003 additions and 13856 deletions
|
|
@ -11,33 +11,35 @@ type EmptySpaceProps = {
|
|||
link?: { text: string; href: string };
|
||||
};
|
||||
|
||||
const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, Icon, link }) => (
|
||||
<>
|
||||
<div className="max-w-lg">
|
||||
{Icon ? (
|
||||
<div className="mb-4">
|
||||
<Icon className="h-14 w-14 text-custom-text-200" />
|
||||
</div>
|
||||
) : null}
|
||||
function EmptySpace({ title, description, children, Icon, link }: EmptySpaceProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="max-w-lg">
|
||||
{Icon ? (
|
||||
<div className="mb-4">
|
||||
<Icon className="h-14 w-14 text-custom-text-200" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<h2 className="text-lg font-medium text-custom-text-100">{title}</h2>
|
||||
<div className="mt-1 text-sm text-custom-text-200">{description}</div>
|
||||
<ul role="list" className="mt-6 divide-y divide-custom-border-200 border-b border-t border-custom-border-200">
|
||||
{children}
|
||||
</ul>
|
||||
{link ? (
|
||||
<div className="mt-6 flex">
|
||||
<Link href={link.href}>
|
||||
<span className="text-sm font-medium text-custom-primary hover:text-custom-primary">
|
||||
{link.text}
|
||||
<span aria-hidden="true"> →</span>
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
<h2 className="text-lg font-medium text-custom-text-100">{title}</h2>
|
||||
<div className="mt-1 text-sm text-custom-text-200">{description}</div>
|
||||
<ul role="list" className="mt-6 divide-y divide-custom-border-200 border-b border-t border-custom-border-200">
|
||||
{children}
|
||||
</ul>
|
||||
{link ? (
|
||||
<div className="mt-6 flex">
|
||||
<Link href={link.href}>
|
||||
<span className="text-sm font-medium text-custom-primary hover:text-custom-primary">
|
||||
{link.text}
|
||||
<span aria-hidden="true"> →</span>
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type EmptySpaceItemProps = {
|
||||
title: string;
|
||||
|
|
@ -47,7 +49,7 @@ type EmptySpaceItemProps = {
|
|||
href?: string;
|
||||
};
|
||||
|
||||
const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Icon, action, href }) => {
|
||||
function EmptySpaceItem({ title, description, Icon, action, href }: EmptySpaceItemProps) {
|
||||
let spaceItem = (
|
||||
<div className={`group relative flex ${description ? "items-start" : "items-center"} space-x-3 py-4`}>
|
||||
<div className="flex-shrink-0">
|
||||
|
|
@ -79,6 +81,6 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
|
|||
</li>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export { EmptySpace, EmptySpaceItem };
|
||||
|
|
|
|||
|
|
@ -5,14 +5,16 @@ type Props = {
|
|||
description?: string;
|
||||
};
|
||||
|
||||
export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName, description }) => (
|
||||
<div className="flex items-start gap-3 border-b border-custom-border-100 py-3.5">
|
||||
<h3 className="text-xl font-medium">{bannerName}</h3>
|
||||
{description && (
|
||||
<div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-custom-text-100">
|
||||
<AlertCircle className="h-6 w-6 text-custom-text-100" />
|
||||
<p className="leading-5">{description}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
export function IntegrationAndImportExportBanner({ bannerName, description }: Props) {
|
||||
return (
|
||||
<div className="flex items-start gap-3 border-b border-custom-border-100 py-3.5">
|
||||
<h3 className="text-xl font-medium">{bannerName}</h3>
|
||||
{description && (
|
||||
<div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-custom-text-100">
|
||||
<AlertCircle className="h-6 w-6 text-custom-text-100" />
|
||||
<p className="leading-5">{description}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ type IssueLabelsListProps = {
|
|||
showLength?: boolean;
|
||||
};
|
||||
|
||||
export const IssueLabelsList: FC<IssueLabelsListProps> = (props) => {
|
||||
export function IssueLabelsList(props: IssueLabelsListProps) {
|
||||
const { labels } = props;
|
||||
const { isMobile } = usePlatformOS();
|
||||
return (
|
||||
|
|
@ -37,4 +37,4 @@ export const IssueLabelsList: FC<IssueLabelsListProps> = (props) => {
|
|||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,45 @@
|
|||
import { range } from "lodash-es";
|
||||
|
||||
export const CycleModuleBoardLayoutLoader = () => (
|
||||
<div className="h-full w-full animate-pulse">
|
||||
<div className="flex h-full w-full justify-between">
|
||||
<div className="grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 auto-rows-max transition-all">
|
||||
{range(5).map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex h-44 w-full flex-col justify-between rounded border border-custom-border-100 bg-custom-background-100 p-4 text-sm"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="h-6 w-24 bg-custom-background-80 rounded" />
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-6 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
export function CycleModuleBoardLayoutLoader() {
|
||||
return (
|
||||
<div className="h-full w-full animate-pulse">
|
||||
<div className="flex h-full w-full justify-between">
|
||||
<div className="grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 auto-rows-max transition-all">
|
||||
{range(5).map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex h-44 w-full flex-col justify-between rounded border border-custom-border-100 bg-custom-background-100 p-4 text-sm"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="h-6 w-24 bg-custom-background-80 rounded" />
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-6 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded-full" />
|
||||
</div>
|
||||
<span className="h-1.5 bg-custom-background-80 rounded" />
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<span className="h-4 w-16 bg-custom-background-80 rounded" />
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded-full" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-4 w-4 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-4 bg-custom-background-80 rounded" />
|
||||
<span className="h-1.5 bg-custom-background-80 rounded" />
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<span className="h-4 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-4 w-4 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-4 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,35 @@
|
|||
import { range } from "lodash-es";
|
||||
|
||||
export const CycleModuleListLayoutLoader = () => (
|
||||
<div className="h-full overflow-y-auto animate-pulse">
|
||||
<div className="flex h-full w-full justify-between">
|
||||
<div className="flex h-full w-full flex-col overflow-y-auto">
|
||||
{range(5).map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex w-full items-center justify-between gap-5 border-b border-custom-border-100 flex-col sm:flex-row px-5 py-6"
|
||||
>
|
||||
<div className="relative flex w-full items-center gap-3 justify-between overflow-hidden">
|
||||
<div className="relative w-full flex items-center gap-3 overflow-hidden">
|
||||
<div className="flex items-center gap-4 truncate">
|
||||
<span className="h-10 w-10 bg-custom-background-80 rounded-full" />
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
export function CycleModuleListLayoutLoader() {
|
||||
return (
|
||||
<div className="h-full overflow-y-auto animate-pulse">
|
||||
<div className="flex h-full w-full justify-between">
|
||||
<div className="flex h-full w-full flex-col overflow-y-auto">
|
||||
{range(5).map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex w-full items-center justify-between gap-5 border-b border-custom-border-100 flex-col sm:flex-row px-5 py-6"
|
||||
>
|
||||
<div className="relative flex w-full items-center gap-3 justify-between overflow-hidden">
|
||||
<div className="relative w-full flex items-center gap-3 overflow-hidden">
|
||||
<div className="flex items-center gap-4 truncate">
|
||||
<span className="h-10 w-10 bg-custom-background-80 rounded-full" />
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="h-6 w-20 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex w-full sm:w-auto relative overflow-hidden items-center gap-2.5 justify-between sm:justify-end sm:flex-shrink-0 ">
|
||||
<div className="flex-shrink-0 relative flex items-center gap-3">
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="h-6 w-20 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex w-full sm:w-auto relative overflow-hidden items-center gap-2.5 justify-between sm:justify-end sm:flex-shrink-0 ">
|
||||
<div className="flex-shrink-0 relative flex items-center gap-3">
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { range } from "lodash-es";
|
||||
import { getRandomInt } from "../utils";
|
||||
|
||||
const CalendarDay = () => {
|
||||
function CalendarDay() {
|
||||
const dataCount = getRandomInt(0, 1);
|
||||
const dataBlocks = range(dataCount).map((index) => (
|
||||
<span key={index} className="h-8 w-full bg-custom-background-80 rounded mb-2" />
|
||||
|
|
@ -15,25 +15,27 @@ const CalendarDay = () => {
|
|||
<div className="flex flex-col gap-2.5 p-2">{dataBlocks}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export const CalendarLayoutLoader = () => (
|
||||
<div className="h-full w-full overflow-y-auto bg-custom-background-100 animate-pulse">
|
||||
<span className="relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium grid-cols-5">
|
||||
{range(5).map((index) => (
|
||||
<span key={index} className="h-11 w-full bg-custom-background-80" />
|
||||
))}
|
||||
</span>
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
<div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200 overflow-y-auto">
|
||||
{range(6).map((index) => (
|
||||
<div key={index} className="grid divide-x-[0.5px] divide-custom-border-200 grid-cols-5">
|
||||
{range(5).map((index) => (
|
||||
<CalendarDay key={index} />
|
||||
))}
|
||||
</div>
|
||||
export function CalendarLayoutLoader() {
|
||||
return (
|
||||
<div className="h-full w-full overflow-y-auto bg-custom-background-100 animate-pulse">
|
||||
<span className="relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium grid-cols-5">
|
||||
{range(5).map((index) => (
|
||||
<span key={index} className="h-11 w-full bg-custom-background-80" />
|
||||
))}
|
||||
</span>
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
<div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200 overflow-y-auto">
|
||||
{range(6).map((index) => (
|
||||
<div key={index} className="grid divide-x-[0.5px] divide-custom-border-200 grid-cols-5">
|
||||
{range(5).map((index) => (
|
||||
<CalendarDay key={index} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,58 +3,62 @@ import { Row } from "@plane/ui";
|
|||
import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
|
||||
import { getRandomLength } from "../utils";
|
||||
|
||||
export const GanttLayoutListItemLoader = () => (
|
||||
<div className="flex w-full items-center gap-4 px-6 " style={{ height: `${BLOCK_HEIGHT}px` }}>
|
||||
<div className="px-3 h-6 w-8 bg-custom-background-80 rounded" />
|
||||
<div className={`px-3 h-6 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
|
||||
</div>
|
||||
);
|
||||
|
||||
export const GanttLayoutLoader = () => (
|
||||
<div className="flex flex-col h-full overflow-x-auto animate-pulse">
|
||||
<div className="min-h-10 w-full border-b border-custom-border-200 ">
|
||||
<span className="h-6 w-12 bg-custom-background-80 rounded" />
|
||||
export function GanttLayoutListItemLoader() {
|
||||
return (
|
||||
<div className="flex w-full items-center gap-4 px-6 " style={{ height: `${BLOCK_HEIGHT}px` }}>
|
||||
<div className="px-3 h-6 w-8 bg-custom-background-80 rounded" />
|
||||
<div className={`px-3 h-6 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
|
||||
</div>
|
||||
<div className="flex h-full">
|
||||
<div className="h-full w-[25.5rem] border-r border-custom-border-200">
|
||||
<Row className="flex items-end h-header py-2 border-b border-custom-border-200">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<span className="h-5 w-14 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</Row>
|
||||
<Row className="flex flex-col gap-3 h-11 py-4 w-full">
|
||||
{range(6).map((index) => (
|
||||
<div key={index} className="flex items-center gap-3 h-11 w-full">
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
<span className={`h-6 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
|
||||
</div>
|
||||
))}
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
export function GanttLayoutLoader() {
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-x-auto animate-pulse">
|
||||
<div className="min-h-10 w-full border-b border-custom-border-200 ">
|
||||
<span className="h-6 w-12 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="h-full w-full border-r border-custom-border-200">
|
||||
<div className="flex flex-col justify-between gap-2 h-header py-1.5 px-4 border-b border-custom-border-200">
|
||||
<div className="flex items-center justify-start">
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
<div className="flex h-full">
|
||||
<div className="h-full w-[25.5rem] border-r border-custom-border-200">
|
||||
<Row className="flex items-end h-header py-2 border-b border-custom-border-200">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<span className="h-5 w-14 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</Row>
|
||||
<Row className="flex flex-col gap-3 h-11 py-4 w-full">
|
||||
{range(6).map((index) => (
|
||||
<div key={index} className="flex items-center gap-3 h-11 w-full">
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
<span className={`h-6 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
|
||||
</div>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
<div className="h-full w-full border-r border-custom-border-200">
|
||||
<div className="flex flex-col justify-between gap-2 h-header py-1.5 px-4 border-b border-custom-border-200">
|
||||
<div className="flex items-center justify-start">
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center gap-3 justify-between w-full">
|
||||
{range(15).map((index) => (
|
||||
<span key={index} className="h-5 w-10 bg-custom-background-80 rounded" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 justify-between w-full">
|
||||
{range(15).map((index) => (
|
||||
<span key={index} className="h-5 w-10 bg-custom-background-80 rounded" />
|
||||
<div className="flex flex-col gap-3 h-11 p-4 w-full">
|
||||
{range(6).map((index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center gap-3 h-11 w-full`}
|
||||
style={{ paddingLeft: getRandomLength(["115px", "208px", "260px"]) }}
|
||||
>
|
||||
<span className={`h-6 w-40 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 h-11 p-4 w-full">
|
||||
{range(6).map((index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center gap-3 h-11 w-full`}
|
||||
style={{ paddingLeft: getRandomLength(["115px", "208px", "260px"]) }}
|
||||
>
|
||||
<span className={`h-6 w-40 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,17 +5,20 @@ import { ContentWrapper } from "@plane/ui";
|
|||
// plane utils
|
||||
import { cn } from "@plane/utils";
|
||||
|
||||
export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement, { cardHeight?: number; shouldAnimate?: boolean }>(
|
||||
({ cardHeight = 100, shouldAnimate = true }, ref) => (
|
||||
export const KanbanIssueBlockLoader = forwardRef(function KanbanIssueBlockLoader(
|
||||
{ cardHeight = 100, shouldAnimate = true }: { cardHeight?: number; shouldAnimate?: boolean },
|
||||
ref: React.ForwardedRef<HTMLSpanElement>
|
||||
) {
|
||||
return (
|
||||
<span
|
||||
ref={ref}
|
||||
className={cn(`block bg-custom-background-80 rounded`, { " animate-pulse": shouldAnimate })}
|
||||
style={{ height: `${cardHeight}px` }}
|
||||
/>
|
||||
)
|
||||
);
|
||||
);
|
||||
});
|
||||
|
||||
export const KanbanColumnLoader = ({
|
||||
export function KanbanColumnLoader({
|
||||
cardsInColumn = 3,
|
||||
ignoreHeader = false,
|
||||
cardHeight = 100,
|
||||
|
|
@ -25,28 +28,32 @@ export const KanbanColumnLoader = ({
|
|||
ignoreHeader?: boolean;
|
||||
cardHeight?: number;
|
||||
shouldAnimate?: boolean;
|
||||
}) => (
|
||||
<div className="flex flex-col gap-3">
|
||||
{!ignoreHeader && (
|
||||
<div className="flex items-center justify-between h-9 w-80">
|
||||
<div className="flex item-center gap-3">
|
||||
<span className={cn("h-6 w-6 bg-custom-background-80 rounded", { " animate-pulse": shouldAnimate })} />
|
||||
<span className={cn("h-6 w-24 bg-custom-background-80 rounded", { " animate-pulse": shouldAnimate })} />
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
{!ignoreHeader && (
|
||||
<div className="flex items-center justify-between h-9 w-80">
|
||||
<div className="flex item-center gap-3">
|
||||
<span className={cn("h-6 w-6 bg-custom-background-80 rounded", { " animate-pulse": shouldAnimate })} />
|
||||
<span className={cn("h-6 w-24 bg-custom-background-80 rounded", { " animate-pulse": shouldAnimate })} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{range(cardsInColumn).map((cardIndex) => (
|
||||
<KanbanIssueBlockLoader key={cardIndex} cardHeight={cardHeight} shouldAnimate={shouldAnimate} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
)}
|
||||
{range(cardsInColumn).map((cardIndex) => (
|
||||
<KanbanIssueBlockLoader key={cardIndex} cardHeight={cardHeight} shouldAnimate={shouldAnimate} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
|
||||
|
||||
export const KanbanLayoutLoader = ({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { cardsInEachColumn?: number[] }) => (
|
||||
<ContentWrapper className="flex-row gap-5 py-1.5 overflow-x-auto">
|
||||
{cardsInEachColumn.map((cardsInColumn, columnIndex) => (
|
||||
<KanbanColumnLoader key={columnIndex} cardsInColumn={cardsInColumn} />
|
||||
))}
|
||||
</ContentWrapper>
|
||||
);
|
||||
export function KanbanLayoutLoader({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { cardsInEachColumn?: number[] }) {
|
||||
return (
|
||||
<ContentWrapper className="flex-row gap-5 py-1.5 overflow-x-auto">
|
||||
{cardsInEachColumn.map((cardsInColumn, columnIndex) => (
|
||||
<KanbanColumnLoader key={columnIndex} cardsInColumn={cardsInColumn} />
|
||||
))}
|
||||
</ContentWrapper>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,78 +6,88 @@ import { Row } from "@plane/ui";
|
|||
import { cn } from "@plane/utils";
|
||||
import { getRandomInt, getRandomLength } from "../utils";
|
||||
|
||||
export const ListLoaderItemRow = forwardRef<
|
||||
HTMLDivElement,
|
||||
{ shouldAnimate?: boolean; renderForPlaceHolder?: boolean; defaultPropertyCount?: number }
|
||||
>(({ shouldAnimate = true, renderForPlaceHolder = false, defaultPropertyCount = 6 }, ref) => (
|
||||
<Row
|
||||
ref={ref}
|
||||
className={cn("flex items-center justify-between h-11 py-3 ", {
|
||||
"bg-custom-background-100": renderForPlaceHolder,
|
||||
"border-b border-custom-border-200": !renderForPlaceHolder,
|
||||
})}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={cn("h-5 w-10 bg-custom-background-80 rounded", {
|
||||
"animate-pulse": shouldAnimate,
|
||||
"bg-custom-background-90": renderForPlaceHolder,
|
||||
})}
|
||||
/>
|
||||
<span
|
||||
className={cn(`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`, {
|
||||
"animate-pulse": shouldAnimate,
|
||||
"bg-custom-background-90": renderForPlaceHolder,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{range(defaultPropertyCount).map((index) => (
|
||||
<Fragment key={index}>
|
||||
{getRandomInt(1, 2) % 2 === 0 ? (
|
||||
<span
|
||||
key={index}
|
||||
className={cn("h-5 w-5 bg-custom-background-80 rounded", {
|
||||
"animate-pulse": shouldAnimate,
|
||||
"bg-custom-background-90": renderForPlaceHolder,
|
||||
})}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className={cn("h-5 w-16 bg-custom-background-80 rounded", {
|
||||
"animate-pulse": shouldAnimate,
|
||||
"bg-custom-background-90": renderForPlaceHolder,
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
</Row>
|
||||
));
|
||||
export const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
|
||||
{
|
||||
shouldAnimate = true,
|
||||
renderForPlaceHolder = false,
|
||||
defaultPropertyCount = 6,
|
||||
}: { shouldAnimate?: boolean; renderForPlaceHolder?: boolean; defaultPropertyCount?: number },
|
||||
ref: React.ForwardedRef<HTMLDivElement>
|
||||
) {
|
||||
return (
|
||||
<Row
|
||||
ref={ref}
|
||||
className={cn("flex items-center justify-between h-11 py-3 ", {
|
||||
"bg-custom-background-100": renderForPlaceHolder,
|
||||
"border-b border-custom-border-200": !renderForPlaceHolder,
|
||||
})}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={cn("h-5 w-10 bg-custom-background-80 rounded", {
|
||||
"animate-pulse": shouldAnimate,
|
||||
"bg-custom-background-90": renderForPlaceHolder,
|
||||
})}
|
||||
/>
|
||||
<span
|
||||
className={cn(`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`, {
|
||||
"animate-pulse": shouldAnimate,
|
||||
"bg-custom-background-90": renderForPlaceHolder,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{range(defaultPropertyCount).map((index) => (
|
||||
<Fragment key={index}>
|
||||
{getRandomInt(1, 2) % 2 === 0 ? (
|
||||
<span
|
||||
key={index}
|
||||
className={cn("h-5 w-5 bg-custom-background-80 rounded", {
|
||||
"animate-pulse": shouldAnimate,
|
||||
"bg-custom-background-90": renderForPlaceHolder,
|
||||
})}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className={cn("h-5 w-16 bg-custom-background-80 rounded", {
|
||||
"animate-pulse": shouldAnimate,
|
||||
"bg-custom-background-90": renderForPlaceHolder,
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
</Row>
|
||||
);
|
||||
});
|
||||
|
||||
ListLoaderItemRow.displayName = "ListLoaderItemRow";
|
||||
|
||||
const ListSection = ({ itemCount }: { itemCount: number }) => (
|
||||
<div className="flex flex-shrink-0 flex-col">
|
||||
<Row className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 py-1">
|
||||
<div className="flex items-center gap-2 py-1.5 w-full">
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded animate-pulse" />
|
||||
<span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
|
||||
function ListSection({ itemCount }: { itemCount: number }) {
|
||||
return (
|
||||
<div className="flex flex-shrink-0 flex-col">
|
||||
<Row className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 py-1">
|
||||
<div className="flex items-center gap-2 py-1.5 w-full">
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded animate-pulse" />
|
||||
<span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
|
||||
</div>
|
||||
</Row>
|
||||
<div className="relative h-full w-full">
|
||||
{range(itemCount).map((index) => (
|
||||
<ListLoaderItemRow key={index} />
|
||||
))}
|
||||
</div>
|
||||
</Row>
|
||||
<div className="relative h-full w-full">
|
||||
{range(itemCount).map((index) => (
|
||||
<ListLoaderItemRow key={index} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ListLayoutLoader() {
|
||||
return (
|
||||
<div className="flex flex-shrink-0 flex-col">
|
||||
{[6, 5, 2].map((itemCount, index) => (
|
||||
<ListSection key={index} itemCount={itemCount} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const ListLayoutLoader = () => (
|
||||
<div className="flex flex-shrink-0 flex-col">
|
||||
{[6, 5, 2].map((itemCount, index) => (
|
||||
<ListSection key={index} itemCount={itemCount} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
import { range } from "lodash-es";
|
||||
export const MembersLayoutLoader = () => (
|
||||
<div className="flex gap-5 py-1.5 overflow-x-auto">
|
||||
{range(5).map((columnIndex) => (
|
||||
<div key={columnIndex} className="flex flex-col gap-3">
|
||||
<div className={`flex items-center justify-between h-9 ${columnIndex === 0 ? "w-80" : "w-36"}`}>
|
||||
<span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
|
||||
export function MembersLayoutLoader() {
|
||||
return (
|
||||
<div className="flex gap-5 py-1.5 overflow-x-auto">
|
||||
{range(5).map((columnIndex) => (
|
||||
<div key={columnIndex} className="flex flex-col gap-3">
|
||||
<div className={`flex items-center justify-between h-9 ${columnIndex === 0 ? "w-80" : "w-36"}`}>
|
||||
<span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
|
||||
</div>
|
||||
{range(2).map((cardIndex) => (
|
||||
<span className="h-8 w-full bg-custom-background-80 rounded animate-pulse" key={cardIndex} />
|
||||
))}
|
||||
</div>
|
||||
{range(2).map((cardIndex) => (
|
||||
<span className="h-8 w-full bg-custom-background-80 rounded animate-pulse" key={cardIndex} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,21 +5,23 @@ import React from "react";
|
|||
import { Loader } from "@plane/ui";
|
||||
import { InboxSidebarLoader } from "./inbox-sidebar-loader";
|
||||
|
||||
export const InboxLayoutLoader = () => (
|
||||
<div className="relative w-full h-full flex overflow-hidden">
|
||||
<div className="flex-shrink-0 w-2/6 h-full border-r border-custom-border-300">
|
||||
<InboxSidebarLoader />
|
||||
export function InboxLayoutLoader() {
|
||||
return (
|
||||
<div className="relative w-full h-full flex overflow-hidden">
|
||||
<div className="flex-shrink-0 w-2/6 h-full border-r border-custom-border-300">
|
||||
<InboxSidebarLoader />
|
||||
</div>
|
||||
<div className="w-4/6">
|
||||
<Loader className="flex flex-col h-full gap-5 p-5">
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="30px" width="40%" />
|
||||
<Loader.Item height="15px" width="60%" />
|
||||
<Loader.Item height="15px" width="60%" />
|
||||
<Loader.Item height="15px" width="40%" />
|
||||
</div>
|
||||
<Loader.Item height="150px" />
|
||||
</Loader>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-4/6">
|
||||
<Loader className="flex flex-col h-full gap-5 p-5">
|
||||
<div className="space-y-2">
|
||||
<Loader.Item height="30px" width="40%" />
|
||||
<Loader.Item height="15px" width="60%" />
|
||||
<Loader.Item height="15px" width="60%" />
|
||||
<Loader.Item height="15px" width="40%" />
|
||||
</div>
|
||||
<Loader.Item height="150px" />
|
||||
</Loader>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,23 @@
|
|||
import React from "react";
|
||||
import { range } from "lodash-es";
|
||||
|
||||
export const InboxSidebarLoader = () => (
|
||||
<div className="flex flex-col">
|
||||
{range(6).map((index) => (
|
||||
<div key={index} className="flex flex-col gap-2.5 h-[105px] space-y-3 border-b border-custom-border-200 p-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-36 bg-custom-background-80 rounded" />
|
||||
export function InboxSidebarLoader() {
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{range(6).map((index) => (
|
||||
<div key={index} className="flex flex-col gap-2.5 h-[105px] space-y-3 border-b border-custom-border-200 p-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-36 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-4 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-2 w-2 bg-custom-background-80 rounded-full" />
|
||||
<span className="h-4 w-16 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-4 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-2 w-2 bg-custom-background-80 rounded-full" />
|
||||
<span className="h-4 w-16 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,45 +2,49 @@ import { range } from "lodash-es";
|
|||
import { Row } from "@plane/ui";
|
||||
import { getRandomLength } from "../utils";
|
||||
|
||||
export const SpreadsheetIssueRowLoader = (props: { columnCount: number }) => (
|
||||
<tr className="border-b border-custom-border-200 bg-custom-background-100">
|
||||
<td className="h-11 min-w-[28rem] z-[10] sticky left-0 flex items-center border-r-[0.5px] border-custom-border-200 bg-custom-background-100">
|
||||
<Row className="flex items-center gap-3">
|
||||
<span className="h-5 w-10 bg-custom-background-80 rounded animate-pulse" />
|
||||
<span
|
||||
className={`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded animate-pulse`}
|
||||
/>
|
||||
</Row>
|
||||
</td>
|
||||
{range(props.columnCount).map((colIndex) => (
|
||||
<td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-custom-border-200 ">
|
||||
<div className="flex items-center justify-center gap-3 px-3">
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded animate-pulse" />
|
||||
</div>
|
||||
export function SpreadsheetIssueRowLoader(props: { columnCount: number }) {
|
||||
return (
|
||||
<tr className="border-b border-custom-border-200 bg-custom-background-100">
|
||||
<td className="h-11 min-w-[28rem] z-[10] sticky left-0 flex items-center border-r-[0.5px] border-custom-border-200 bg-custom-background-100">
|
||||
<Row className="flex items-center gap-3">
|
||||
<span className="h-5 w-10 bg-custom-background-80 rounded animate-pulse" />
|
||||
<span
|
||||
className={`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded animate-pulse`}
|
||||
/>
|
||||
</Row>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
);
|
||||
{range(props.columnCount).map((colIndex) => (
|
||||
<td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-custom-border-200 ">
|
||||
<div className="flex items-center justify-center gap-3 px-3">
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded animate-pulse" />
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
export const SpreadsheetLayoutLoader = () => (
|
||||
<div className="horizontal-scroll-enable h-full w-full overflow-y-auto ">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="h-11 min-w-[28rem] bg-custom-background-90 border-r border-custom-border-200 animate-pulse" />
|
||||
{range(10).map((index) => (
|
||||
<th
|
||||
key={index}
|
||||
className="h-11 w-full min-w-[8rem] bg-custom-background-90 border-r border-custom-border-200 animate-pulse"
|
||||
/>
|
||||
export function SpreadsheetLayoutLoader() {
|
||||
return (
|
||||
<div className="horizontal-scroll-enable h-full w-full overflow-y-auto ">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="h-11 min-w-[28rem] bg-custom-background-90 border-r border-custom-border-200 animate-pulse" />
|
||||
{range(10).map((index) => (
|
||||
<th
|
||||
key={index}
|
||||
className="h-11 w-full min-w-[8rem] bg-custom-background-90 border-r border-custom-border-200 animate-pulse"
|
||||
/>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{range(16).map((rowIndex) => (
|
||||
<SpreadsheetIssueRowLoader key={rowIndex} columnCount={10} />
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{range(16).map((rowIndex) => (
|
||||
<SpreadsheetIssueRowLoader key={rowIndex} columnCount={10} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
import { range } from "lodash-es";
|
||||
|
||||
export const NotificationsLoader = () => (
|
||||
<div className="divide-y divide-custom-border-100 animate-pulse overflow-hidden">
|
||||
{range(3).map((i) => (
|
||||
<div key={i} className="flex w-full items-center gap-4 p-3">
|
||||
<span className="min-h-12 min-w-12 bg-custom-background-80 rounded-full" />
|
||||
<div className="flex flex-col gap-2.5 w-full">
|
||||
<span className="h-5 w-36 bg-custom-background-80 rounded" />
|
||||
<div className="flex items-center justify-between gap-2 w-full">
|
||||
<span className="h-5 w-28 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
export function NotificationsLoader() {
|
||||
return (
|
||||
<div className="divide-y divide-custom-border-100 animate-pulse overflow-hidden">
|
||||
{range(3).map((i) => (
|
||||
<div key={i} className="flex w-full items-center gap-4 p-3">
|
||||
<span className="min-h-12 min-w-12 bg-custom-background-80 rounded-full" />
|
||||
<div className="flex flex-col gap-2.5 w-full">
|
||||
<span className="h-5 w-36 bg-custom-background-80 rounded" />
|
||||
<div className="flex items-center justify-between gap-2 w-full">
|
||||
<span className="h-5 w-28 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,32 @@
|
|||
import { range } from "lodash-es";
|
||||
|
||||
export const PagesLoader = () => (
|
||||
<div className="flex h-full flex-col space-y-5 overflow-hidden p-6">
|
||||
<div className="flex justify-between gap-4">
|
||||
<h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{range(5).map((i) => (
|
||||
<span key={i} className="h-8 w-20 bg-custom-background-80 rounded-full" />
|
||||
))}
|
||||
</div>
|
||||
<div className="divide-y divide-custom-border-200">
|
||||
{range(5).map((i) => (
|
||||
<div key={i} className="h-12 w-full flex items-center justify-between px-3">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
export function PagesLoader() {
|
||||
return (
|
||||
<div className="flex h-full flex-col space-y-5 overflow-hidden p-6">
|
||||
<div className="flex justify-between gap-4">
|
||||
<h3 className="text-2xl font-semibold text-custom-text-100">Pages</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{range(5).map((i) => (
|
||||
<span key={i} className="h-8 w-20 bg-custom-background-80 rounded-full" />
|
||||
))}
|
||||
</div>
|
||||
<div className="divide-y divide-custom-border-200">
|
||||
{range(5).map((i) => (
|
||||
<div key={i} className="h-12 w-full flex items-center justify-between px-3">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +1,41 @@
|
|||
import { range } from "lodash-es";
|
||||
|
||||
export const ProjectsLoader = () => (
|
||||
<div className="h-full w-full overflow-y-auto p-8 animate-pulse">
|
||||
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
|
||||
{range(3).map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex cursor-pointer flex-col rounded border border-custom-border-200 bg-custom-background-100"
|
||||
>
|
||||
<div className="relative min-h-[118px] w-full rounded-t border-b border-custom-border-200 ">
|
||||
<div className="absolute inset-0 z-[1] bg-gradient-to-t from-black/20 to-transparent">
|
||||
<div className="absolute bottom-4 z-10 flex h-10 w-full items-center justify-between gap-3 px-4">
|
||||
<div className="flex flex-grow items-center gap-2.5 truncate">
|
||||
<span className="min-h-9 min-w-9 bg-custom-background-80 rounded" />
|
||||
<div className="flex w-full flex-col justify-between gap-0.5 truncate">
|
||||
<span className="h-4 w-28 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-16 bg-custom-background-80 rounded" />
|
||||
export function ProjectsLoader() {
|
||||
return (
|
||||
<div className="h-full w-full overflow-y-auto p-8 animate-pulse">
|
||||
<div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
|
||||
{range(3).map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex cursor-pointer flex-col rounded border border-custom-border-200 bg-custom-background-100"
|
||||
>
|
||||
<div className="relative min-h-[118px] w-full rounded-t border-b border-custom-border-200 ">
|
||||
<div className="absolute inset-0 z-[1] bg-gradient-to-t from-black/20 to-transparent">
|
||||
<div className="absolute bottom-4 z-10 flex h-10 w-full items-center justify-between gap-3 px-4">
|
||||
<div className="flex flex-grow items-center gap-2.5 truncate">
|
||||
<span className="min-h-9 min-w-9 bg-custom-background-80 rounded" />
|
||||
<div className="flex w-full flex-col justify-between gap-0.5 truncate">
|
||||
<span className="h-4 w-28 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full flex-shrink-0 items-center gap-2">
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full flex-shrink-0 items-center gap-2">
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-[104px] w-full flex-col justify-between rounded-b p-4">
|
||||
<span className="h-4 w-36 bg-custom-background-80 rounded" />
|
||||
<div className="item-center flex justify-between">
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<div className="flex h-[104px] w-full flex-col justify-between rounded-b p-4">
|
||||
<span className="h-4 w-36 bg-custom-background-80 rounded" />
|
||||
<div className="item-center flex justify-between">
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
import { range } from "lodash-es";
|
||||
import { getRandomLength } from "../utils";
|
||||
|
||||
export const ActivitySettingsLoader = () => (
|
||||
<div className="flex flex-col gap-3 animate-pulse">
|
||||
{range(10).map((i) => (
|
||||
<div key={i} className="relative flex items-center gap-2 h-12 border-b border-custom-border-200">
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
<span className={`h-6 w-${getRandomLength(["52", "72", "96"])} bg-custom-background-80 rounded`} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
export function ActivitySettingsLoader() {
|
||||
return (
|
||||
<div className="flex flex-col gap-3 animate-pulse">
|
||||
{range(10).map((i) => (
|
||||
<div key={i} className="relative flex items-center gap-2 h-12 border-b border-custom-border-200">
|
||||
<span className="h-6 w-6 bg-custom-background-80 rounded" />
|
||||
<span className={`h-6 w-${getRandomLength(["52", "72", "96"])} bg-custom-background-80 rounded`} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { range } from "lodash-es";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
export const APITokenSettingsLoader = () => {
|
||||
export function APITokenSettingsLoader() {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<section className="w-full overflow-y-auto">
|
||||
|
|
@ -21,4 +21,4 @@ export const APITokenSettingsLoader = () => {
|
|||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,31 @@
|
|||
import { range } from "lodash-es";
|
||||
|
||||
export const EmailSettingsLoader = () => (
|
||||
<div className="mx-auto mt-8 h-full w-full overflow-y-auto px-6 lg:px-20 pb- animate-pulse">
|
||||
<div className="flex flex-col gap-2 pt-6 mb-2 pb-6 border-b border-custom-border-100">
|
||||
<span className="h-7 w-40 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-96 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center py-3">
|
||||
<span className="h-7 w-32 bg-custom-background-80 rounded" />
|
||||
export function EmailSettingsLoader() {
|
||||
return (
|
||||
<div className="mx-auto mt-8 h-full w-full overflow-y-auto px-6 lg:px-20 pb- animate-pulse">
|
||||
<div className="flex flex-col gap-2 pt-6 mb-2 pb-6 border-b border-custom-border-100">
|
||||
<span className="h-7 w-40 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-96 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
{range(4).map((i) => (
|
||||
<div key={i} className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-2 py-3">
|
||||
<span className="h-6 w-28 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-96 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center py-3">
|
||||
<span className="h-7 w-32 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
{range(4).map((i) => (
|
||||
<div key={i} className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-2 py-3">
|
||||
<span className="h-6 w-28 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-96 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex items-center py-12">
|
||||
<span className="h-8 w-32 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
))}
|
||||
<div className="flex items-center py-12">
|
||||
<span className="h-8 w-32 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,22 @@
|
|||
import { range } from "lodash-es";
|
||||
|
||||
export const ImportExportSettingsLoader = () => (
|
||||
<div className="divide-y-[0.5px] divide-custom-border-200 animate-pulse">
|
||||
{range(2).map((i) => (
|
||||
<div key={i} className="flex items-center justify-between gap-2 px-4 py-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-4 w-28 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-28 bg-custom-background-80 rounded" />
|
||||
export function ImportExportSettingsLoader() {
|
||||
return (
|
||||
<div className="divide-y-[0.5px] divide-custom-border-200 animate-pulse">
|
||||
{range(2).map((i) => (
|
||||
<div key={i} className="flex items-center justify-between gap-2 px-4 py-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-4 w-28 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-28 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,23 @@
|
|||
import { range } from "lodash-es";
|
||||
|
||||
export const IntegrationsSettingsLoader = () => (
|
||||
<div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
|
||||
{range(2).map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<span className="h-10 w-10 bg-custom-background-80 rounded-full" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-60 bg-custom-background-80 rounded" />
|
||||
export function IntegrationsSettingsLoader() {
|
||||
return (
|
||||
<div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
|
||||
{range(2).map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<span className="h-10 w-10 bg-custom-background-80 rounded-full" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-4 w-60 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="h-8 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<span className="h-8 w-16 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
import { range } from "lodash-es";
|
||||
|
||||
export const MembersSettingsLoader = () => (
|
||||
<div className="divide-y-[0.5px] divide-custom-border-100">
|
||||
{range(3).map((i) => (
|
||||
<div key={i} className="group grid grid-cols-5 items-center justify-evenly px-3 py-4">
|
||||
<div className="flex col-span-2 items-center gap-x-2.5">
|
||||
<span className="size-6 bg-custom-background-80 rounded-full" />
|
||||
export function MembersSettingsLoader() {
|
||||
return (
|
||||
<div className="divide-y-[0.5px] divide-custom-border-100">
|
||||
{range(3).map((i) => (
|
||||
<div key={i} className="group grid grid-cols-5 items-center justify-evenly px-3 py-4">
|
||||
<div className="flex col-span-2 items-center gap-x-2.5">
|
||||
<span className="size-6 bg-custom-background-80 rounded-full" />
|
||||
<span className="h-5 w-24 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<span className="h-5 w-24 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-28 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<span className="h-5 w-24 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-20 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-28 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,22 @@
|
|||
export const WebhookSettingsLoader = () => (
|
||||
<div className="h-full w-full overflow-hidden py-8 pr-9">
|
||||
<div className="flex h-full w-full flex-col">
|
||||
<div className="flex items-center justify-between gap-4 border-b border-custom-border-200 pb-3.5">
|
||||
<div className="text-xl font-medium">Webhooks</div>
|
||||
<span className="h-8 w-28 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
<div className="border-b border-custom-border-200">
|
||||
<div>
|
||||
<span className="flex items-center justify-between gap-4 px-3.5 py-[18px]">
|
||||
<span className="h-5 w-36 bg-custom-background-80 rounded" />
|
||||
<span className="h-6 w-12 bg-custom-background-80 rounded" />
|
||||
</span>
|
||||
export function WebhookSettingsLoader() {
|
||||
return (
|
||||
<div className="h-full w-full overflow-hidden py-8 pr-9">
|
||||
<div className="flex h-full w-full flex-col">
|
||||
<div className="flex items-center justify-between gap-4 border-b border-custom-border-200 pb-3.5">
|
||||
<div className="text-xl font-medium">Webhooks</div>
|
||||
<span className="h-8 w-28 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
<div className="border-b border-custom-border-200">
|
||||
<div>
|
||||
<span className="flex items-center justify-between gap-4 px-3.5 py-[18px]">
|
||||
<span className="h-5 w-36 bg-custom-background-80 rounded" />
|
||||
<span className="h-6 w-12 bg-custom-background-80 rounded" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,22 @@
|
|||
import { range } from "lodash-es";
|
||||
|
||||
export const ViewListLoader = () => (
|
||||
<div className="flex h-full w-full flex-col animate-pulse">
|
||||
{range(8).map((i) => (
|
||||
<div key={i} className="group border-b border-custom-border-200">
|
||||
<div className="relative flex w-full items-center justify-between rounded p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="min-h-10 min-w-10 bg-custom-background-80 rounded" />
|
||||
<span className="h-6 w-28 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
export function ViewListLoader() {
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col animate-pulse">
|
||||
{range(8).map((i) => (
|
||||
<div key={i} className="group border-b border-custom-border-200">
|
||||
<div className="relative flex w-full items-center justify-between rounded p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="min-h-10 min-w-10 bg-custom-background-80 rounded" />
|
||||
<span className="h-6 w-28 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
<span className="h-5 w-5 bg-custom-background-80 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,31 +33,35 @@ interface Props {
|
|||
options?: any;
|
||||
}
|
||||
|
||||
const HeadingPrimary: CustomComponent = ({ children }) => (
|
||||
<h1 className="text-lg font-semibold text-custom-text-100">{children}</h1>
|
||||
);
|
||||
function HeadingPrimary({ children }) {
|
||||
return <h1 className="text-lg font-semibold text-custom-text-100">{children}</h1>;
|
||||
}
|
||||
|
||||
const HeadingSecondary: CustomComponent = ({ children }) => (
|
||||
<h3 className="text-base font-semibold text-custom-text-100">{children}</h3>
|
||||
);
|
||||
function HeadingSecondary({ children }) {
|
||||
return <h3 className="text-base font-semibold text-custom-text-100">{children}</h3>;
|
||||
}
|
||||
|
||||
const Paragraph: CustomComponent = ({ children }) => <p className="text-sm text-custom-text-200">{children}</p>;
|
||||
function Paragraph({ children }) {
|
||||
return <p className="text-sm text-custom-text-200">{children}</p>;
|
||||
}
|
||||
|
||||
const OrderedList: CustomComponent = ({ children }) => (
|
||||
<ol className="mb-4 ml-8 list-decimal text-sm text-custom-text-200">{children}</ol>
|
||||
);
|
||||
function OrderedList({ children }) {
|
||||
return <ol className="mb-4 ml-8 list-decimal text-sm text-custom-text-200">{children}</ol>;
|
||||
}
|
||||
|
||||
const UnorderedList: CustomComponent = ({ children }) => (
|
||||
<ul className="mb-4 ml-8 list-disc text-sm text-custom-text-200">{children}</ul>
|
||||
);
|
||||
function UnorderedList({ children }) {
|
||||
return <ul className="mb-4 ml-8 list-disc text-sm text-custom-text-200">{children}</ul>;
|
||||
}
|
||||
|
||||
const Link: CustomComponent = ({ href, children }) => (
|
||||
<a href={href} className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
function Link({ href, children }) {
|
||||
return (
|
||||
<a href={href} className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
export const MarkdownRenderer: React.FC<Props> = ({ markdown, options = {} }) => {
|
||||
export function MarkdownRenderer({ markdown, options = {} }: Props) {
|
||||
const customComponents = {
|
||||
h1: HeadingPrimary,
|
||||
h3: HeadingSecondary,
|
||||
|
|
@ -72,4 +76,4 @@ export const MarkdownRenderer: React.FC<Props> = ({ markdown, options = {} }) =>
|
|||
{markdown}
|
||||
</ReactMarkdown>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,14 +6,16 @@ type Props = {
|
|||
image: any;
|
||||
};
|
||||
|
||||
export const ProfileEmptyState: React.FC<Props> = ({ title, description, image }) => (
|
||||
<div className={`mx-auto grid h-full w-full place-items-center p-8 `}>
|
||||
<div className="flex w-full flex-col items-center text-center">
|
||||
<div className="flex h-14 w-14 items-center justify-center rounded-full bg-custom-background-90">
|
||||
<img src={image} width="32" height="32" className="w-full h-full object-cover" alt={title} />
|
||||
export function ProfileEmptyState({ title, description, image }: Props) {
|
||||
return (
|
||||
<div className={`mx-auto grid h-full w-full place-items-center p-8 `}>
|
||||
<div className="flex w-full flex-col items-center text-center">
|
||||
<div className="flex h-14 w-14 items-center justify-center rounded-full bg-custom-background-90">
|
||||
<img src={image} width="32" height="32" className="w-full h-full object-cover" alt={title} />
|
||||
</div>
|
||||
<h6 className="mb-3 mt-3.5 text-base font-semibold">{title}</h6>
|
||||
{description && <p className="text-sm text-custom-text-300">{description}</p>}
|
||||
</div>
|
||||
<h6 className="mb-3 mt-3.5 text-base font-semibold">{title}</h6>
|
||||
{description && <p className="text-sm text-custom-text-300">{description}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue