thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

Merge branch 'master' of github.com:makeplane/plane into build/merge_frontend_backend

Browse Source
This commit is contained in:
pablohashescobar 2022-12-01 23:05:37 +05:30
commit 45fe4b89db
55 changed files with 5928 additions and 937 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

294
apps/plane/components/command-palette/index.tsx
View File

@ -1,6 +1,10 @@
import React, { useState, useCallback, useEffect } from "react"; import React, { useState, useCallback, useEffect } from "react";
// next // next
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// swr
import { mutate } from "swr";
// react hook form
import { SubmitHandler, useForm } from "react-hook-form";
// headless ui // headless ui
import { Combobox, Dialog, Transition } from "@headlessui/react"; import { Combobox, Dialog, Transition } from "@headlessui/react";
// hooks // hooks
@ -9,7 +13,11 @@ import useTheme from "lib/hooks/useTheme";
import useToast from "lib/hooks/useToast"; import useToast from "lib/hooks/useToast";
// icons // icons
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid"; import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
import { DocumentPlusIcon, FolderPlusIcon, FolderIcon } from "@heroicons/react/24/outline"; import {
FolderIcon,
RectangleStackIcon,
ClipboardDocumentListIcon,
} from "@heroicons/react/24/outline";
// commons // commons
import { classNames, copyTextToClipboard } from "constants/common"; import { classNames, copyTextToClipboard } from "constants/common";
// components // components
@ -18,13 +26,22 @@ import CreateProjectModal from "components/project/CreateProjectModal";
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal"; import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal"; import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
// types // types
import { IIssue } from "types"; import { IIssue, IProject, IssueResponse } from "types";
import { Button } from "ui";
import issuesServices from "lib/services/issues.services";
// fetch keys
import { PROJECTS_LIST, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
type ItemType = { type ItemType = {
name: string; name: string;
url?: string; url?: string;
onClick?: () => void; onClick?: () => void;
}; };
type FormInput = {
issue_ids: string[];
};
const CommandPalette: React.FC = () => { const CommandPalette: React.FC = () => {
const router = useRouter(); const router = useRouter();
@ -36,7 +53,7 @@ const CommandPalette: React.FC = () => {
const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false); const [isShortcutsModalOpen, setIsShortcutsModalOpen] = useState(false);
const [isCreateCycleModalOpen, setIsCreateCycleModalOpen] = useState(false); const [isCreateCycleModalOpen, setIsCreateCycleModalOpen] = useState(false);
const { issues, activeProject } = useUser(); const { activeWorkspace, activeProject, issues, cycles } = useUser();
const { toggleCollapsed } = useTheme(); const { toggleCollapsed } = useTheme();
@ -48,10 +65,18 @@ const CommandPalette: React.FC = () => {
: issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ?? : issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
[]; [];
const {
register,
formState: { errors, isSubmitting },
handleSubmit,
reset,
setError,
} = useForm<FormInput>();
const quickActions = [ const quickActions = [
{ {
name: "Add new issue...", name: "Add new issue...",
icon: DocumentPlusIcon, icon: RectangleStackIcon,
shortcut: "I", shortcut: "I",
onClick: () => { onClick: () => {
setIsIssueModalOpen(true); setIsIssueModalOpen(true);
@ -59,7 +84,7 @@ const CommandPalette: React.FC = () => {
}, },
{ {
name: "Add new project...", name: "Add new project...",
icon: FolderPlusIcon, icon: ClipboardDocumentListIcon,
shortcut: "P", shortcut: "P",
onClick: () => { onClick: () => {
setIsProjectModalOpen(true); setIsProjectModalOpen(true);
@ -70,6 +95,7 @@ const CommandPalette: React.FC = () => {
const handleCommandPaletteClose = () => { const handleCommandPaletteClose = () => {
setIsPaletteOpen(false); setIsPaletteOpen(false);
setQuery(""); setQuery("");
reset();
}; };
const handleKeyDown = useCallback( const handleKeyDown = useCallback(
@ -116,6 +142,44 @@ const CommandPalette: React.FC = () => {
[toggleCollapsed, setToastAlert, router] [toggleCollapsed, setToastAlert, router]
); );
const handleDelete: SubmitHandler<FormInput> = (data) => {
if (activeWorkspace && activeProject && data.issue_ids) {
issuesServices
.bulkDeleteIssues(activeWorkspace.slug, activeProject.id, data)
.then((res) => {
mutate<IssueResponse>(
PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id),
(prevData) => {
return {
...(prevData as IssueResponse),
count: (prevData?.results ?? []).filter(
(p) => !data.issue_ids.some((id) => p.id === id)
).length,
results: (prevData?.results ?? []).filter(
(p) => !data.issue_ids.some((id) => p.id === id)
),
};
},
false
);
})
.catch((e) => {
console.log(e);
});
}
};
const handleAddToCycle: SubmitHandler<FormInput> = (data) => {
if (activeWorkspace && activeProject && data.issue_ids) {
issuesServices
.bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, "", data)
.then((res) => {})
.catch((e) => {
console.log(e);
});
}
};
useEffect(() => { useEffect(() => {
document.addEventListener("keydown", handleKeyDown); document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown); return () => document.removeEventListener("keydown", handleKeyDown);
@ -137,7 +201,6 @@ const CommandPalette: React.FC = () => {
setIsOpen={setIsIssueModalOpen} setIsOpen={setIsIssueModalOpen}
projectId={activeProject?.id} projectId={activeProject?.id}
/> />
<Transition.Root <Transition.Root
show={isPaletteOpen} show={isPaletteOpen}
as={React.Fragment} as={React.Fragment}
@ -168,129 +231,158 @@ const CommandPalette: React.FC = () => {
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<Dialog.Panel className="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 overflow-hidden rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all"> <Dialog.Panel className="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 overflow-hidden rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
<Combobox <form>
onChange={(item: ItemType) => { <Combobox
const { url, onClick } = item; // onChange={(item: ItemType) => {
if (url) router.push(url); // const { url, onClick } = item;
else if (onClick) onClick(); // if (url) router.push(url);
handleCommandPaletteClose(); // else if (onClick) onClick();
}} // handleCommandPaletteClose();
> // }}
<div className="relative m-1">
<MagnifyingGlassIcon
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
aria-hidden="true"
/>
<Combobox.Input
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm outline-none"
placeholder="Search..."
onChange={(event) => setQuery(event.target.value)}
/>
</div>
<Combobox.Options
static
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
> >
{filteredIssues.length > 0 && ( <div className="relative m-1">
<> <MagnifyingGlassIcon
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
aria-hidden="true"
/>
<Combobox.Input
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm outline-none"
placeholder="Search..."
onChange={(event) => setQuery(event.target.value)}
/>
</div>
<Combobox.Options
static
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
>
{filteredIssues.length > 0 && (
<>
<li className="p-2">
{query === "" && (
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
Issues
</h2>
)}
<ul className="text-sm text-gray-700">
{filteredIssues.map((issue) => (
<Combobox.Option
key={issue.id}
value={{
name: issue.name,
url: `/projects/${issue.project}/issues/${issue.id}`,
}}
className={({ active }) =>
classNames(
"flex cursor-pointer select-none items-center rounded-md px-3 py-2",
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
)
}
>
{({ active }) => (
<>
{/* <FolderIcon
className={classNames(
"h-6 w-6 flex-none text-gray-900 text-opacity-40",
active ? "text-opacity-100" : ""
)}
aria-hidden="true"
/> */}
<input
type="checkbox"
{...register("issue_ids")}
id={`issue-${issue.id}`}
value={issue.id}
/>
<label
htmlFor={`issue-${issue.id}`}
className="ml-3 flex-auto truncate"
>
{issue.name}
</label>
{active && (
<span className="ml-3 flex-none text-gray-500">
Jump to...
</span>
)}
</>
)}
</Combobox.Option>
))}
</ul>
</li>
</>
)}
{query === "" && (
<li className="p-2"> <li className="p-2">
{query === "" && ( <h2 className="sr-only">Quick actions</h2>
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
Issues
</h2>
)}
<ul className="text-sm text-gray-700"> <ul className="text-sm text-gray-700">
{filteredIssues.map((issue) => ( {quickActions.map((action) => (
<Combobox.Option <Combobox.Option
key={issue.id} key={action.shortcut}
value={{ value={{
name: issue.name, name: action.name,
url: `/projects/${issue.project}/issues/${issue.id}`, onClick: action.onClick,
}} }}
className={({ active }) => className={({ active }) =>
classNames( classNames(
"flex cursor-pointer select-none items-center rounded-md px-3 py-2", "flex cursor-default select-none items-center rounded-md px-3 py-2",
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : "" active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
) )
} }
> >
{({ active }) => ( {({ active }) => (
<> <>
<FolderIcon <action.icon
className={classNames( className={classNames(
"h-6 w-6 flex-none text-gray-900 text-opacity-40", "h-6 w-6 flex-none text-gray-900 text-opacity-40",
active ? "text-opacity-100" : "" active ? "text-opacity-100" : ""
)} )}
aria-hidden="true" aria-hidden="true"
/> />
<span className="ml-3 flex-auto truncate">{issue.name}</span> <span className="ml-3 flex-auto truncate">{action.name}</span>
{active && ( <span className="ml-3 flex-none text-xs font-semibold text-gray-500">
<span className="ml-3 flex-none text-gray-500"> <kbd className="font-sans">⌘</kbd>
Jump to... <kbd className="font-sans">{action.shortcut}</kbd>
</span> </span>
)}
</> </>
)} )}
</Combobox.Option> </Combobox.Option>
))} ))}
</ul> </ul>
</li> </li>
</> )}
)} </Combobox.Options>
{query === "" && (
<li className="p-2">
<h2 className="sr-only">Quick actions</h2>
<ul className="text-sm text-gray-700">
{quickActions.map((action) => (
<Combobox.Option
key={action.shortcut}
value={{
name: action.name,
onClick: action.onClick,
}}
className={({ active }) =>
classNames(
"flex cursor-default select-none items-center rounded-md px-3 py-2",
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
)
}
>
{({ active }) => (
<>
<action.icon
className={classNames(
"h-6 w-6 flex-none text-gray-900 text-opacity-40",
active ? "text-opacity-100" : ""
)}
aria-hidden="true"
/>
<span className="ml-3 flex-auto truncate">{action.name}</span>
<span className="ml-3 flex-none text-xs font-semibold text-gray-500">
<kbd className="font-sans">⌘</kbd>
<kbd className="font-sans">{action.shortcut}</kbd>
</span>
</>
)}
</Combobox.Option>
))}
</ul>
</li>
)}
</Combobox.Options>
{query !== "" && filteredIssues.length === 0 && ( {query !== "" && filteredIssues.length === 0 && (
<div className="py-14 px-6 text-center sm:px-14"> <div className="py-14 px-6 text-center sm:px-14">
<FolderIcon <FolderIcon
className="mx-auto h-6 w-6 text-gray-900 text-opacity-40" className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
aria-hidden="true" aria-hidden="true"
/> />
<p className="mt-4 text-sm text-gray-900"> <p className="mt-4 text-sm text-gray-900">
We couldn{"'"}t find any issue with that term. Please try again. We couldn{"'"}t find any issue with that term. Please try again.
</p> </p>
</div>
)}
</Combobox>
<div className="flex justify-between items-center gap-2 p-3">
<div className="flex items-center gap-2">
<Button onClick={handleSubmit(handleAddToCycle)} size="sm">
Add to Cycle
</Button>
<Button onClick={handleSubmit(handleDelete)} theme="danger" size="sm">
Delete
</Button>
</div> </div>
)} <div>
</Combobox> <Button type="button" size="sm" onClick={handleCommandPaletteClose}>
Close
</Button>
</div>
</div>
</form>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>
</div> </div>

31
apps/plane/components/lexical/config.ts Normal file
View File

@ -0,0 +1,31 @@
import { HeadingNode, QuoteNode } from "@lexical/rich-text";
import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
import { ListItemNode, ListNode } from "@lexical/list";
import { CodeHighlightNode, CodeNode } from "@lexical/code";
import { AutoLinkNode, LinkNode } from "@lexical/link";
// theme
import { defaultTheme } from "./theme";
export const initialConfig = {
namespace: "LexicalEditor",
// The editor theme
theme: defaultTheme,
// Handling of errors during update
onError(error: any) {
console.error(error);
},
// Any custom nodes go here
nodes: [
HeadingNode,
ListNode,
ListItemNode,
QuoteNode,
CodeNode,
CodeHighlightNode,
TableNode,
TableCellNode,
TableRowNode,
AutoLinkNode,
LinkNode,
],
};

75
apps/plane/components/lexical/editor.tsx Normal file
View File

@ -0,0 +1,75 @@
import { FC } from "react";
import { EditorState, LexicalEditor, $getRoot, $getSelection } from "lexical";
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
import { TRANSFORMERS, CHECK_LIST } from "@lexical/markdown";
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
import { $generateHtmlFromNodes } from "@lexical/html";
import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
// custom plugins
import { CodeHighlightPlugin } from "./plugins/code-highlight";
import { LexicalToolbar } from "./toolbar";
// config
import { initialConfig } from "./config";
// helpers
import { getValidatedValue } from "./helpers/editor";
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
export interface RichTextEditorProps {
onChange: (state: string) => void;
id: string;
value: string;
}
const RichTextEditor: FC<RichTextEditorProps> = (props) => {
// props
const { onChange, value, id } = props;
function handleChange(state: EditorState, editor: LexicalEditor) {
state.read(() => {
onChange(JSON.stringify(state.toJSON()));
});
}
return (
<LexicalComposer
initialConfig={{
...initialConfig,
namespace: id || "Lexical Editor",
editorState: getValidatedValue(value),
}}
>
<div className="border border-[#e2e2e2] rounded-md">
<LexicalToolbar />
<div className="relative">
<RichTextPlugin
contentEditable={
<ContentEditable className='className="h-[450px] outline-none py-[15px] px-2.5 resize-none overflow-hidden text-ellipsis' />
}
ErrorBoundary={LexicalErrorBoundary}
placeholder={
<div className="absolute top-[15px] left-[10px] pointer-events-none select-none text-gray-400">
Enter some text...
</div>
}
/>
<OnChangePlugin onChange={handleChange} />
<HistoryPlugin />
<CodeHighlightPlugin />
<ListPlugin />
<LinkPlugin />
<CheckListPlugin />
<MarkdownShortcutPlugin transformers={TRANSFORMERS} />
</div>
</div>
</LexicalComposer>
);
};
export default RichTextEditor;

33
apps/plane/components/lexical/helpers/editor.ts Normal file
View File

@ -0,0 +1,33 @@
export const positionEditorElement = (editor: any, rect: any) => {
if (window) {
if (rect === null) {
editor.style.opacity = "0";
editor.style.top = "-1000px";
editor.style.left = "-1000px";
} else {
editor.style.opacity = "1";
editor.style.top = `${
rect.top + rect.height + window.pageYOffset + 10
}px`;
editor.style.left = `${
rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2
}px`;
}
}
};
export const getValidatedValue = (value: string) => {
const defaultValue =
'{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
if (value) {
try {
const json = JSON.parse(value);
return JSON.stringify(json);
} catch (error) {
return defaultValue;
}
}
return defaultValue;
};

17
apps/plane/components/lexical/helpers/node.ts Normal file
View File

@ -0,0 +1,17 @@
import { $isAtNodeEnd } from "@lexical/selection";
export const getSelectedNode = (selection: any) => {
const anchor = selection.anchor;
const focus = selection.focus;
const anchorNode = selection.anchor.getNode();
const focusNode = selection.focus.getNode();
if (anchorNode === focusNode) {
return anchorNode;
}
const isBackward = selection.isBackward();
if (isBackward) {
return $isAtNodeEnd(focus) ? anchorNode : focusNode;
} else {
return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
}
};

11
apps/plane/components/lexical/plugins/code-highlight.tsx Normal file
View File

@ -0,0 +1,11 @@
import { useEffect } from "react";
import { registerCodeHighlighting } from "@lexical/code";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
export const CodeHighlightPlugin = () => {
const [editor] = useLexicalComposerContext();
useEffect(() => {
return registerCodeHighlighting(editor);
}, [editor]);
return null;
};

21
apps/plane/components/lexical/plugins/read-only.tsx Normal file
View File

@ -0,0 +1,21 @@
import { useEffect, useState } from "react";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { getValidatedValue } from "../helpers/editor";
const ReadOnlyPlugin = ({ value }: { value: string }) => {
const [editor] = useLexicalComposerContext();
useEffect(() => {
if (editor && value) {
const initialEditorState = editor?.parseEditorState(
getValidatedValue(value) || ""
);
editor.setEditorState(initialEditorState);
}
}, [editor, value]);
return <></>;
};
export default ReadOnlyPlugin;

67
apps/plane/components/lexical/theme.ts Normal file
View File

@ -0,0 +1,67 @@
export const defaultTheme = {
ltr: "ltr",
rtl: "rtl",
placeholder: "editor-placeholder",
paragraph: "mb-1",
quote: "editor-quote",
heading: {
h1: "text-3xl font-bold",
h2: "text-2xl font-bold",
h3: "text-xl font-bold",
h4: "text-lg font-bold",
h5: "text-base font-bold",
},
list: {
nested: {
listitem: "list-item",
},
ol: "list-decimal pl-4",
ul: "list-disc pl-4",
listitem: "list-item",
},
image: "editor-image",
link: "editor-link",
text: {
bold: "font-bold",
italic: "italic",
overflowed: "editor-text-overflowed",
hashtag: "editor-text-hashtag",
underline: "underline",
strikethrough: "line-through",
underlineStrikethrough: "editor-text-underlineStrikethrough",
code: "editor-text-code",
},
code: "editor-code",
codeHighlight: {
atrule: "editor-tokenAttr",
attr: "editor-tokenAttr",
boolean: "editor-tokenProperty",
builtin: "editor-tokenSelector",
cdata: "editor-tokenComment",
char: "editor-tokenSelector",
class: "editor-tokenFunction",
"class-name": "editor-tokenFunction",
comment: "editor-tokenComment",
constant: "editor-tokenProperty",
deleted: "editor-tokenProperty",
doctype: "editor-tokenComment",
entity: "editor-tokenOperator",
function: "editor-tokenFunction",
important: "editor-tokenVariable",
inserted: "editor-tokenSelector",
keyword: "editor-tokenAttr",
namespace: "editor-tokenVariable",
number: "editor-tokenProperty",
operator: "editor-tokenOperator",
prolog: "editor-tokenComment",
property: "editor-tokenProperty",
punctuation: "editor-tokenPunctuation",
regex: "editor-tokenVariable",
selector: "editor-tokenSelector",
string: "editor-tokenSelector",
symbol: "editor-tokenProperty",
tag: "editor-tokenProperty",
url: "editor-tokenOperator",
variable: "editor-tokenVariable",
},
};

333
apps/plane/components/lexical/toolbar/block-type-select.tsx Normal file
View File

@ -0,0 +1,333 @@
import { FC, Fragment, useState, useEffect, useRef } from "react";
import { createPortal } from "react-dom";
import {
CAN_REDO_COMMAND,
CAN_UNDO_COMMAND,
REDO_COMMAND,
UNDO_COMMAND,
SELECTION_CHANGE_COMMAND,
FORMAT_TEXT_COMMAND,
FORMAT_ELEMENT_COMMAND,
$getSelection,
$isRangeSelection,
$createParagraphNode,
$getNodeByKey,
} from "lexical";
import {
INSERT_ORDERED_LIST_COMMAND,
INSERT_UNORDERED_LIST_COMMAND,
INSERT_CHECK_LIST_COMMAND,
REMOVE_LIST_COMMAND,
$isListNode,
ListNode,
} from "@lexical/list";
import {
$isParentElementRTL,
$isAtNodeEnd,
$wrapNodes,
} from "@lexical/selection";
import {
$createHeadingNode,
$createQuoteNode,
$isHeadingNode,
} from "@lexical/rich-text";
import {
$createCodeNode,
$isCodeNode,
getDefaultCodeLanguage,
getCodeLanguages,
} from "@lexical/code";
const BLOCK_DATA = [
{ type: "paragraph", name: "Normal" },
{ type: "h1", name: "Large Heading" },
{ type: "h2", name: "Small Heading" },
{ type: "h3", name: "Heading" },
{ type: "h4", name: "Heading" },
{ type: "h5", name: "Heading" },
{ type: "Quote", name: "quote" },
{ type: "ol", name: "Numbered List" },
{ type: "ul", name: "Bulleted List" },
];
const supportedBlockTypes = new Set([
"paragraph",
"quote",
"code",
"h1",
"h2",
"ul",
"ol",
]);
const blockTypeToBlockName: any = {
code: "Code Block",
h1: "Large Heading",
h2: "Small Heading",
h3: "Heading",
h4: "Heading",
h5: "Heading",
ol: "Numbered List",
paragraph: "Normal",
quote: "Quote",
ul: "Bulleted List",
};
export interface BlockTypeSelectProps {
editor: any;
toolbarRef: any;
blockType: string;
}
export const BlockTypeSelect: FC<BlockTypeSelectProps> = (props) => {
const { editor, toolbarRef, blockType } = props;
// refs
const dropDownRef = useRef<any>(null);
// states
const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] =
useState(false);
useEffect(() => {
const toolbar = toolbarRef.current;
const dropDown = dropDownRef.current;
if (toolbar !== null && dropDown !== null) {
const { top, left } = toolbar.getBoundingClientRect();
dropDown.style.top = `${top + 40}px`;
dropDown.style.left = `${left}px`;
}
}, [dropDownRef, toolbarRef]);
useEffect(() => {
const dropDown = dropDownRef.current;
const toolbar = toolbarRef.current;
if (dropDown !== null && toolbar !== null) {
const handle = (event: any) => {
const target = event.target;
if (!dropDown.contains(target) && !toolbar.contains(target)) {
setShowBlockOptionsDropDown(false);
}
};
document.addEventListener("click", handle);
return () => {
document.removeEventListener("click", handle);
};
}
}, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
const formatParagraph = () => {
if (blockType !== "paragraph") {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
$wrapNodes(selection, () => $createParagraphNode());
}
});
}
setShowBlockOptionsDropDown(false);
};
const formatLargeHeading = () => {
console.log("blockType ", blockType);
if (blockType !== "h1") {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
$wrapNodes(selection, () => $createHeadingNode("h1"));
}
});
}
setShowBlockOptionsDropDown(false);
};
const formatSmallHeading = () => {
if (blockType !== "h2") {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
$wrapNodes(selection, () => $createHeadingNode("h2"));
}
});
}
setShowBlockOptionsDropDown(false);
};
const formatBulletList = () => {
if (blockType !== "ul") {
editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
} else {
editor.dispatchCommand(REMOVE_LIST_COMMAND);
}
setShowBlockOptionsDropDown(false);
};
const formatNumberedList = () => {
if (blockType !== "ol") {
editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
} else {
editor.dispatchCommand(REMOVE_LIST_COMMAND);
}
setShowBlockOptionsDropDown(false);
};
const formatQuote = () => {
if (blockType !== "quote") {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
$wrapNodes(selection, () => $createQuoteNode());
}
});
}
setShowBlockOptionsDropDown(false);
};
const formatCode = () => {
if (blockType !== "code") {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
$wrapNodes(selection, () => $createCodeNode());
}
});
}
setShowBlockOptionsDropDown(false);
};
return (
<div className="relative">
<button
className="p-2 mr-2 text-sm flex items-center"
onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
aria-label="Formatting Options"
>
<span className="mr-2">{blockTypeToBlockName[blockType]}</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-chevron-down"
viewBox="0 0 16 16"
>
<path
fillRule="evenodd"
d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z"
></path>
</svg>
</button>
{showBlockOptionsDropDown && (
<ul
className="absolute mt-1 w-full min-w-[160px] overflow-auto rounded-md bg-white z-10 p-1 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
ref={dropDownRef}
>
<li className="p-1 cursor-pointer" onClick={formatParagraph}>
<span className="icon paragraph" />
<span className="text">Normal</span>
{blockType === "paragraph" && <span className="active" />}
</li>
<li className="p-1 cursor-pointer" onClick={formatLargeHeading}>
<span className="icon large-heading" />
<span className="text">Large Heading</span>
{blockType === "h1" && <span className="active" />}
</li>
<li className="p-1 cursor-pointer" onClick={formatSmallHeading}>
<span className="icon small-heading" />
<span className="text">Small Heading</span>
{blockType === "h2" && <span className="active" />}
</li>
<li className="p-1 cursor-pointer" onClick={formatBulletList}>
<span className="icon bullet-list" />
<span className="text">Bullet List</span>
{blockType === "ul" && <span className="active" />}
</li>
<li className="p-1 cursor-pointer" onClick={formatNumberedList}>
<span className="icon numbered-list" />
<span className="text">Numbered List</span>
{blockType === "ol" && <span className="active" />}
</li>
<li className="p-1 cursor-pointer" onClick={formatQuote}>
<span className="icon quote" />
<span className="text">Quote</span>
{blockType === "quote" && <span className="active" />}
</li>
{/* <button className="item" onClick={formatCode}>
<span className="icon code" />
<span className="text">Code Block</span>
{blockType === 'code' && <span className="active" />}
</button> */}
</ul>
)}
</div>
);
};
// export const BlockTypeSelect: FC<any> = () => {
// const [selected, setSelected] = useState(BLOCK_DATA[0]);
// return (
// <div className="inline-flex pr-1">
// <Listbox value={selected} onChange={setSelected}>
// <div className="relative">
// <Listbox.Button className="relative w-full min-w-[160px] cursor-default rounded border border-[#e2e2e2] bg-white py-1 pl-3 pr-10 text-left outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 text-xs">
// <span className="block truncate">{selected.name}</span>
// <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
// <svg
// xmlns="http://www.w3.org/2000/svg"
// width="16"
// height="16"
// fill="currentColor"
// className="bi bi-chevron-down"
// viewBox="0 0 16 16"
// >
// <path
// fillRule="evenodd"
// d="M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z"
// ></path>
// </svg>
// </span>
// </Listbox.Button>
// <Transition
// as={Fragment}
// leave="transition ease-in duration-100"
// leaveFrom="opacity-100"
// leaveTo="opacity-0"
// >
// <Listbox.Options className="absolute mt-1 max-h-60 w-full min-w-[160px] overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
// {BLOCK_DATA.map((blockType, index) => (
// <Listbox.Option
// key={index}
// className={({ active }) =>
// `relative cursor-default select-none py-2 px-2 ${
// active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
// }`
// }
// value={blockType}
// >
// {({ selected }) => (
// <>
// <span
// className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}
// >
// {blockType.name}
// </span>
// </>
// )}
// </Listbox.Option>
// ))}
// </Listbox.Options>
// </Transition>
// </div>
// </Listbox>
// </div>
// );
// };

156
apps/plane/components/lexical/toolbar/floating-link-editor.tsx Normal file
View File

@ -0,0 +1,156 @@
import { useRef, useState, useCallback, useEffect } from 'react';
import { SELECTION_CHANGE_COMMAND, $getSelection, $isRangeSelection } from 'lexical';
import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
import { mergeRegister } from '@lexical/utils';
// helper functions
import { positionEditorElement } from '../helpers/editor';
import { getSelectedNode } from '../helpers/node';
const LowPriority = 1;
export interface FloatingLinkEditorProps {
editor: any;
}
export const FloatingLinkEditor = ({ editor }: FloatingLinkEditorProps) => {
// refs
const editorRef = useRef<any>(null);
const inputRef = useRef<any>(null);
const mouseDownRef = useRef(false);
// states
const [linkUrl, setLinkUrl] = useState('');
const [isEditMode, setEditMode] = useState(false);
const [lastSelection, setLastSelection] = useState<any>(null);
const updateLinkEditor = useCallback(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
const node = getSelectedNode(selection);
const parent = node.getParent();
if ($isLinkNode(parent)) {
setLinkUrl(parent.getURL());
} else if ($isLinkNode(node)) {
setLinkUrl(node.getURL());
} else {
setLinkUrl('');
}
}
const editorElem = editorRef.current;
const nativeSelection = window?.getSelection();
const activeElement = document.activeElement;
if (editorElem === null) {
return;
}
const rootElement = editor.getRootElement();
if (
selection !== null &&
!nativeSelection?.isCollapsed &&
rootElement !== null &&
rootElement.contains(nativeSelection?.anchorNode)
) {
const domRange = nativeSelection?.getRangeAt(0);
let rect;
if (nativeSelection?.anchorNode === rootElement) {
let inner = rootElement;
while (inner.firstElementChild != null) {
inner = inner.firstElementChild;
}
rect = inner.getBoundingClientRect();
} else {
rect = domRange?.getBoundingClientRect();
}
if (!mouseDownRef.current) {
positionEditorElement(editorElem, rect);
}
setLastSelection(selection);
} else if (!activeElement || activeElement.className !== 'link-input') {
positionEditorElement(editorElem, null);
setLastSelection(null);
setEditMode(false);
setLinkUrl('');
}
return true;
}, [editor]);
useEffect(() => {
return mergeRegister(
editor.registerUpdateListener(({ editorState }: any) => {
editorState.read(() => {
updateLinkEditor();
});
}),
editor.registerCommand(
SELECTION_CHANGE_COMMAND,
() => {
updateLinkEditor();
return true;
},
LowPriority
)
);
}, [editor, updateLinkEditor]);
useEffect(() => {
editor.getEditorState().read(() => {
updateLinkEditor();
});
}, [editor, updateLinkEditor]);
useEffect(() => {
if (isEditMode && inputRef?.current) {
inputRef.current.focus();
}
}, [isEditMode]);
return (
<div ref={editorRef} className="link-editor">
{isEditMode ? (
<input
ref={inputRef}
className="link-input"
value={linkUrl}
onChange={(event) => {
setLinkUrl(event.target.value);
}}
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
if (lastSelection !== null) {
if (linkUrl !== '') {
editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkUrl);
}
setEditMode(false);
}
} else if (event.key === 'Escape') {
event.preventDefault();
setEditMode(false);
}
}}
/>
) : (
<>
<div className="link-input">
<a href={linkUrl} target="_blank" rel="noopener noreferrer">
{linkUrl}
</a>
<div
className="link-edit"
role="button"
tabIndex={0}
onMouseDown={(event) => event.preventDefault()}
onClick={() => {
setEditMode(true);
}}
/>
</div>
</>
)}
</div>
);
};

430
apps/plane/components/lexical/toolbar/index.tsx Normal file
View File

@ -0,0 +1,430 @@
import { useEffect, useState, useRef, useCallback } from "react";
import { createPortal } from "react-dom";
import {
CAN_REDO_COMMAND,
CAN_UNDO_COMMAND,
REDO_COMMAND,
UNDO_COMMAND,
SELECTION_CHANGE_COMMAND,
FORMAT_TEXT_COMMAND,
FORMAT_ELEMENT_COMMAND,
$getSelection,
$isRangeSelection,
$createParagraphNode,
$getNodeByKey,
RangeSelection,
NodeSelection,
GridSelection,
} from "lexical";
import {
INSERT_ORDERED_LIST_COMMAND,
INSERT_UNORDERED_LIST_COMMAND,
REMOVE_LIST_COMMAND,
$isListNode,
ListNode,
} from "@lexical/list";
import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import {
$isParentElementRTL,
$wrapNodes,
$isAtNodeEnd,
} from "@lexical/selection";
import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
import {
$createHeadingNode,
$createQuoteNode,
$isHeadingNode,
} from "@lexical/rich-text";
// custom elements
import { FloatingLinkEditor } from "./floating-link-editor";
import { BlockTypeSelect } from "./block-type-select";
const LowPriority = 1;
function getSelectedNode(selection: any) {
const anchor = selection.anchor;
const focus = selection.focus;
const anchorNode = selection.anchor.getNode();
const focusNode = selection.focus.getNode();
if (anchorNode === focusNode) {
return anchorNode;
}
const isBackward = selection.isBackward();
if (isBackward) {
return $isAtNodeEnd(focus) ? anchorNode : focusNode;
} else {
return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
}
}
export const LexicalToolbar = () => {
// editor
const [editor] = useLexicalComposerContext();
// ref
const toolbarRef = useRef(null);
// states
const [canUndo, setCanUndo] = useState(false);
const [canRedo, setCanRedo] = useState(false);
const [blockType, setBlockType] = useState("paragraph");
const [selectedElementKey, setSelectedElementKey] = useState<string | null>(
null
);
const [isRTL, setIsRTL] = useState(false);
const [isLink, setIsLink] = useState(false);
const [isBold, setIsBold] = useState(false);
const [isItalic, setIsItalic] = useState(false);
const [isUnderline, setIsUnderline] = useState(false);
const [isStrikethrough, setIsStrikethrough] = useState(false);
const [isCode, setIsCode] = useState(false);
const updateToolbar = useCallback(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
const anchorNode = selection.anchor.getNode();
const element =
anchorNode.getKey() === "root"
? anchorNode
: anchorNode.getTopLevelElementOrThrow();
const elementKey = element.getKey();
const elementDOM = editor.getElementByKey(elementKey);
if (elementDOM !== null) {
setSelectedElementKey(elementKey);
if ($isListNode(element)) {
const parentList = $getNearestNodeOfType(anchorNode, ListNode);
const type = parentList ? parentList.getTag() : element.getTag();
setBlockType(type);
} else {
const type = $isHeadingNode(element)
? element.getTag()
: element.getType();
setBlockType(type);
}
}
// Update text format
setIsBold(selection.hasFormat("bold"));
setIsItalic(selection.hasFormat("italic"));
setIsUnderline(selection.hasFormat("underline"));
setIsStrikethrough(selection.hasFormat("strikethrough"));
setIsRTL($isParentElementRTL(selection));
// Update links
const node = getSelectedNode(selection);
const parent = node.getParent();
if ($isLinkNode(parent) || $isLinkNode(node)) {
setIsLink(true);
} else {
setIsLink(false);
}
}
}, [editor]);
useEffect(() => {
return mergeRegister(
editor.registerUpdateListener(({ editorState }) => {
editorState.read(() => {
updateToolbar();
});
}),
editor.registerCommand(
SELECTION_CHANGE_COMMAND,
(_payload, newEditor) => {
updateToolbar();
return false;
},
LowPriority
),
editor.registerCommand(
CAN_UNDO_COMMAND,
(payload) => {
setCanUndo(payload);
return false;
},
LowPriority
),
editor.registerCommand(
CAN_REDO_COMMAND,
(payload) => {
setCanRedo(payload);
return false;
},
LowPriority
)
);
}, [editor, updateToolbar]);
const insertLink = useCallback(
(e: any) => {
e.preventDefault();
if (!isLink) {
editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
} else {
editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
}
},
[editor, isLink]
);
return (
<div
className="flex items-center mb-1 p-1 w-full flex-wrap border-b "
ref={toolbarRef}
>
<button
disabled={!canUndo}
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(UNDO_COMMAND, undefined);
}}
className="p-2 mr-2"
aria-label="Undo"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-arrow-counterclockwise"
viewBox="0 0 16 16"
>
<path
fillRule="evenodd"
d="M8 3a5 5 0 11-4.546 2.914.5.5 0 00-.908-.417A6 6 0 108 2v1z"
></path>
<path d="M8 4.466V.534a.25.25 0 00-.41-.192L5.23 2.308a.25.25 0 000 .384l2.36 1.966A.25.25 0 008 4.466z"></path>
</svg>
</button>
<button
disabled={!canRedo}
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(REDO_COMMAND, undefined);
}}
className="p-2 mr-2"
aria-label="Redo"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-arrow-clockwise"
viewBox="0 0 16 16"
>
<path
fillRule="evenodd"
d="M8 3a5 5 0 104.546 2.914.5.5 0 01.908-.417A6 6 0 118 2v1z"
></path>
<path d="M8 4.466V.534a.25.25 0 01.41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 018 4.466z"></path>
</svg>
</button>
<BlockTypeSelect
editor={editor}
toolbarRef={toolbarRef}
blockType={blockType}
/>
<button
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
}}
className={`p-2 mr-2 ${isBold ? "active" : ""}`}
aria-label="Format Bold"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-type-bold"
viewBox="0 0 16 16"
>
<path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 001.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"></path>
</svg>
</button>
<button
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
}}
className={"p-2 mr-2" + (isItalic ? "active" : "")}
aria-label="Format Italics"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-type-italic"
viewBox="0 0 16 16"
>
<path d="M7.991 11.674L9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"></path>
</svg>
</button>
<button
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
}}
className={"p-2 mr-2" + (isUnderline ? "active" : "")}
aria-label="Format Underline"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-type-underline"
viewBox="0 0 16 16"
>
<path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"></path>
</svg>
</button>
<button
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
}}
className={"p-2 mr-2" + (isStrikethrough ? "active" : "")}
aria-label="Format Strikethrough"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-type-strikethrough"
viewBox="0 0 16 16"
>
<path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.776 2.776 0 01-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967z"></path>
</svg>
</button>
<button
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
}}
className={"p-2 mr-2 " + (isCode ? "active" : "")}
aria-label="Insert Code"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-code"
viewBox="0 0 16 16"
>
<path d="M5.854 4.854a.5.5 0 10-.708-.708l-3.5 3.5a.5.5 0 000 .708l3.5 3.5a.5.5 0 00.708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 01.708-.708l3.5 3.5a.5.5 0 010 .708l-3.5 3.5a.5.5 0 01-.708-.708L13.293 8l-3.147-3.146z"></path>
</svg>
</button>
<button
onClick={insertLink}
className={"p-2 mr-2 " + (isLink ? "active" : "")}
aria-label="Insert Link"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-link"
viewBox="0 0 16 16"
>
<path d="M6.354 5.5H4a3 3 0 000 6h3a3 3 0 002.83-4H9c-.086 0-.17.01-.25.031A2 2 0 017 10.5H4a2 2 0 110-4h1.535c.218-.376.495-.714.82-1z"></path>
<path d="M9 5.5a3 3 0 00-2.83 4h1.098A2 2 0 019 6.5h3a2 2 0 110 4h-1.535a4.02 4.02 0 01-.82 1H12a3 3 0 100-6H9z"></path>
</svg>
</button>
{isLink &&
createPortal(<FloatingLinkEditor editor={editor} />, document.body)}
<button
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
}}
className="p-2 mr-2"
aria-label="Left Align"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-text-left"
viewBox="0 0 16 16"
>
<path
fillRule="evenodd"
d="M2 12.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
></path>
</svg>
</button>
<button
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
}}
className="p-2 mr-2"
aria-label="Center Align"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-text-center"
viewBox="0 0 16 16"
>
<path
fillRule="evenodd"
d="M4 12.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-2-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm2-3a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-2-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
></path>
</svg>
</button>
<button
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
}}
className="p-2 mr-2"
aria-label="Right Align"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-text-right"
viewBox="0 0 16 16"
>
<path
fillRule="evenodd"
d="M6 12.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-4-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm4-3a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm-4-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
></path>
</svg>
</button>
<button
onClick={(e) => {
e.preventDefault();
editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
}}
className="p-2 mr-2"
aria-label="Justify Align"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-justify"
viewBox="0 0 16 16"
>
<path
fillRule="evenodd"
d="M2 12.5a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5zm0-3a.5.5 0 01.5-.5h11a.5.5 0 010 1h-11a.5.5 0 01-.5-.5z"
></path>
</svg>
</button>{" "}
</div>
);
};

60
apps/plane/components/lexical/viewer.tsx Normal file
View File

@ -0,0 +1,60 @@
import { FC } from "react";
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
import { TRANSFORMERS } from "@lexical/markdown";
// custom plugins
import { CodeHighlightPlugin } from "./plugins/code-highlight";
import ReadOnlyPlugin from "./plugins/read-only";
// config
import { initialConfig } from "./config";
// helpers
import { getValidatedValue } from "./helpers/editor";
import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
export interface RichTextViewerProps {
id: string;
value: string;
}
const RichTextViewer: FC<RichTextViewerProps> = (props) => {
// props
const { value, id } = props;
return (
<LexicalComposer
initialConfig={{
...initialConfig,
namespace: id || "Lexical Editor",
editorState: getValidatedValue(value),
editable: false,
}}
>
<div className="relative">
<RichTextPlugin
contentEditable={
<ContentEditable className='className="h-[450px] outline-none py-[15px] resize-none overflow-hidden text-ellipsis' />
}
ErrorBoundary={LexicalErrorBoundary}
placeholder={
<div className="absolute top-[15px] left-[10px] pointer-events-none select-none text-gray-400">
Enter some text...
</div>
}
/>
<ReadOnlyPlugin value={value} />
<HistoryPlugin />
<CodeHighlightPlugin />
<ListPlugin />
<LinkPlugin />
<MarkdownShortcutPlugin transformers={TRANSFORMERS} />
</div>
</LexicalComposer>
);
};
export default RichTextViewer;

2
apps/plane/components/project/cycles/CycleView.tsx
View File

@ -175,7 +175,7 @@ const SprintView: React.FC<Props> = ({
</div> </div>
)) ))
) : ( ) : (
<p className="text-sm text-gray-500">This sprint has no issues.</p> <p className="text-sm text-gray-500">This cycle has no issues.</p>
) )
) : ( ) : (
<div className="w-full h-full flex items-center justify-center"> <div className="w-full h-full flex items-center justify-center">

134
apps/plane/components/project/issues/BoardView/SingleBoard.tsx
View File

@ -18,6 +18,7 @@ import {
PlusIcon, PlusIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import Image from "next/image"; import Image from "next/image";
import { divide } from "lodash";
type Props = { type Props = {
selectedGroup: NestedKeyOf<IIssue> | null; selectedGroup: NestedKeyOf<IIssue> | null;
@ -54,9 +55,6 @@ const SingleBoard: React.FC<Props> = ({
// Collapse/Expand // Collapse/Expand
const [show, setState] = useState<any>(true); const [show, setState] = useState<any>(true);
// Edit state name
const [showInput, setInput] = useState<any>(false);
if (selectedGroup === "priority") if (selectedGroup === "priority")
groupTitle === "high" groupTitle === "high"
? (bgColor = "#dc2626") ? (bgColor = "#dc2626")
@ -79,57 +77,52 @@ const SingleBoard: React.FC<Props> = ({
<div className={`${!show ? "" : "h-full space-y-3 overflow-y-auto flex flex-col"}`}> <div className={`${!show ? "" : "h-full space-y-3 overflow-y-auto flex flex-col"}`}>
<div <div
className={`flex justify-between p-3 pb-0 ${ className={`flex justify-between p-3 pb-0 ${
snapshot.isDragging ? "bg-indigo-50 border-indigo-100 border-b" : "" !show ? "flex-col bg-gray-50 rounded-md border" : ""
} ${!show ? "flex-col bg-gray-50 rounded-md border" : ""}`} }`}
> >
{showInput ? null : ( <div className={`flex items-center ${!show ? "flex-col gap-2" : "gap-1"}`}>
<div className={`flex items-center ${!show ? "flex-col gap-2" : "gap-1"}`}> <button
<button type="button"
type="button" {...provided.dragHandleProps}
{...provided.dragHandleProps} className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${ !show ? "" : "rotate-90"
!show ? "" : "rotate-90" } ${selectedGroup !== "state_detail.name" ? "hidden" : ""}`}
} ${selectedGroup !== "state_detail.name" ? "hidden" : ""}`} >
> <EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" />
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" /> <EllipsisHorizontalIcon className="h-4 w-4 text-gray-600 mt-[-0.7rem]" />
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600 mt-[-0.7rem]" /> </button>
</button> <div
<div className={`flex items-center gap-x-1 px-2 bg-slate-900 rounded-md cursor-pointer ${
className={`flex items-center gap-x-1 px-2 bg-slate-900 rounded-md cursor-pointer ${ !show ? "py-2 mb-2 flex-col gap-y-2" : ""
!show ? "py-2 mb-2 flex-col gap-y-2" : "" }`}
}`} style={{
border: `2px solid ${bgColor}`,
backgroundColor: `${bgColor}20`,
}}
>
<span
className={`w-3 h-3 block rounded-full ${!show ? "" : "mr-1"}`}
style={{ style={{
border: `2px solid ${bgColor}`, backgroundColor: bgColor,
backgroundColor: `${bgColor}20`,
}} }}
onClick={() => { />
// setInput(true); <h2
className={`text-[0.9rem] font-medium capitalize`}
style={{
writingMode: !show ? "vertical-rl" : "horizontal-tb",
}} }}
> >
<span {groupTitle === null || groupTitle === "null"
className={`w-3 h-3 block rounded-full ${!show ? "" : "mr-1"}`} ? "None"
style={{ : createdBy
backgroundColor: bgColor, ? createdBy
}} : addSpaceIfCamelCase(groupTitle)}
/> </h2>
<h2 <span className="text-gray-500 text-sm ml-0.5">
className={`text-[0.9rem] font-medium capitalize`} {groupedByIssues[groupTitle].length}
style={{ </span>
writingMode: !show ? "vertical-rl" : "horizontal-tb",
}}
>
{groupTitle === null || groupTitle === "null"
? "None"
: createdBy
? createdBy
: addSpaceIfCamelCase(groupTitle)}
</h2>
<span className="text-gray-500 text-sm ml-0.5">
{groupedByIssues[groupTitle].length}
</span>
</div>
</div> </div>
)} </div>
<div className={`flex items-center ${!show ? "flex-col pb-2" : ""}`}> <div className={`flex items-center ${!show ? "flex-col pb-2" : ""}`}>
<button <button
@ -137,7 +130,6 @@ const SingleBoard: React.FC<Props> = ({
className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none" className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none"
onClick={() => { onClick={() => {
setState(!show); setState(!show);
setInput(false);
}} }}
> >
{show ? ( {show ? (
@ -190,7 +182,7 @@ const SingleBoard: React.FC<Props> = ({
<StrictModeDroppable key={groupTitle} droppableId={groupTitle}> <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
{(provided, snapshot) => ( {(provided, snapshot) => (
<div <div
className={`mt-3 space-y-3 h-full overflow-y-auto px-3 ${ className={`mt-3 space-y-3 h-full overflow-y-auto px-3 pb-3 ${
snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : "" snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
} ${!show ? "hidden" : "block"}`} } ${!show ? "hidden" : "block"}`}
{...provided.droppableProps} {...provided.droppableProps}
@ -219,7 +211,7 @@ const SingleBoard: React.FC<Props> = ({
key={key} key={key}
className={`${ className={`${
key === "name" key === "name"
? "text-sm font-medium mb-2" ? "text-sm mb-2"
: key === "description" : key === "description"
? "text-xs text-black" ? "text-xs text-black"
: key === "priority" : key === "priority"
@ -236,7 +228,7 @@ const SingleBoard: React.FC<Props> = ({
? "text-xs bg-indigo-50 px-2 py-1 mt-2 flex items-center gap-x-1 rounded w-min whitespace-nowrap" ? "text-xs bg-indigo-50 px-2 py-1 mt-2 flex items-center gap-x-1 rounded w-min whitespace-nowrap"
: "text-sm text-gray-500" : "text-sm text-gray-500"
} gap-1 } gap-1
`} `}
> >
{key === "target_date" ? ( {key === "target_date" ? (
<> <>
@ -300,27 +292,27 @@ const SingleBoard: React.FC<Props> = ({
</div> </div>
{/* <div {/* <div
className={`p-2 bg-indigo-50 flex items-center justify-between ${ className={`p-2 bg-indigo-50 flex items-center justify-between ${
snapshot.isDragging ? "bg-indigo-200" : "" snapshot.isDragging ? "bg-indigo-200" : ""
}`} }`}
>
<button
type="button"
className="flex flex-col"
{...provided.dragHandleProps}
> >
<button <EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" />
type="button" <EllipsisHorizontalIcon className="h-4 w-4 text-gray-600 mt-[-0.7rem]" />
className="flex flex-col" </button>
{...provided.dragHandleProps} <div className="flex gap-1 items-center">
> <button type="button">
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" /> <HeartIcon className="h-4 w-4 text-yellow-500" />
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600 mt-[-0.7rem]" />
</button> </button>
<div className="flex gap-1 items-center"> <button type="button">
<button type="button"> <CheckCircleIcon className="h-4 w-4 text-green-500" />
<HeartIcon className="h-4 w-4 text-yellow-500" /> </button>
</button> </div>
<button type="button"> </div> */}
<CheckCircleIcon className="h-4 w-4 text-green-500" />
</button>
</div>
</div> */}
</a> </a>
</Link> </Link>
)} )}

255
apps/plane/components/project/issues/BoardView/index.tsx
View File

@ -21,6 +21,8 @@ import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssue
import { Spinner } from "ui"; import { Spinner } from "ui";
// types // types
import type { IState, IIssue, Properties, NestedKeyOf, ProjectMember } from "types"; import type { IState, IIssue, Properties, NestedKeyOf, ProjectMember } from "types";
import ConfirmIssueDeletion from "../ConfirmIssueDeletion";
import { TrashIcon } from "@heroicons/react/24/outline";
type Props = { type Props = {
properties: Properties; properties: Properties;
@ -35,6 +37,8 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [isIssueOpen, setIsIssueOpen] = useState(false); const [isIssueOpen, setIsIssueOpen] = useState(false);
const [isIssueDeletionOpen, setIsIssueDeletionOpen] = useState(false);
const [issueDeletionData, setIssueDeletionData] = useState<IIssue | undefined>();
const [preloadedData, setPreloadedData] = useState< const [preloadedData, setPreloadedData] = useState<
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
@ -58,72 +62,96 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
if (!result.destination) return; if (!result.destination) return;
const { source, destination, type } = result; const { source, destination, type } = result;
if (type === "state") { if (destination.droppableId === "trashBox") {
const newStates = Array.from(states ?? []); const removedItem = groupedByIssues[source.droppableId][source.index];
const [reorderedState] = newStates.splice(source.index, 1);
newStates.splice(destination.index, 0, reorderedState);
const prevSequenceNumber = newStates[destination.index - 1]?.sequence;
const nextSequenceNumber = newStates[destination.index + 1]?.sequence;
const sequenceNumber = setIssueDeletionData(removedItem);
prevSequenceNumber && nextSequenceNumber setIsIssueDeletionOpen(true);
? (prevSequenceNumber + nextSequenceNumber) / 2
: nextSequenceNumber
? nextSequenceNumber - 15000 / 2
: prevSequenceNumber
? prevSequenceNumber + 15000 / 2
: 15000;
newStates[destination.index].sequence = sequenceNumber; console.log(removedItem);
mutateState(newStates, false);
if (!activeWorkspace) return;
stateServices
.patchState(activeWorkspace.slug, projectId as string, newStates[destination.index].id, {
sequence: sequenceNumber,
})
.then((response) => {
console.log(response);
})
.catch((err) => {
console.error(err);
});
} else { } else {
if (source.droppableId !== destination.droppableId) { if (type === "state") {
const sourceGroup = source.droppableId; // source group id const newStates = Array.from(states ?? []);
const destinationGroup = destination.droppableId; // destination group id const [reorderedState] = newStates.splice(source.index, 1);
if (!sourceGroup || !destinationGroup) return; newStates.splice(destination.index, 0, reorderedState);
const prevSequenceNumber = newStates[destination.index - 1]?.sequence;
const nextSequenceNumber = newStates[destination.index + 1]?.sequence;
// removed/dragged item const sequenceNumber =
const removedItem = groupedByIssues[source.droppableId][source.index]; prevSequenceNumber && nextSequenceNumber
? (prevSequenceNumber + nextSequenceNumber) / 2
: nextSequenceNumber
? nextSequenceNumber - 15000 / 2
: prevSequenceNumber
? prevSequenceNumber + 15000 / 2
: 15000;
if (selectedGroup === "priority") { newStates[destination.index].sequence = sequenceNumber;
// update the removed item for mutation
removedItem.priority = destinationGroup;
// patch request mutateState(newStates, false);
issuesServices.patchIssue(activeWorkspace!.slug, projectId as string, removedItem.id, { if (!activeWorkspace) return;
priority: destinationGroup, stateServices
.patchState(
activeWorkspace.slug,
projectId as string,
newStates[destination.index].id,
{
sequence: sequenceNumber,
}
)
.then((response) => {
console.log(response);
})
.catch((err) => {
console.error(err);
}); });
} else if (selectedGroup === "state_detail.name") { } else {
const destinationState = states?.find((s) => s.name === destinationGroup); if (source.droppableId !== destination.droppableId) {
const destinationStateId = destinationState?.id; const sourceGroup = source.droppableId; // source group id
const destinationGroup = destination.droppableId; // destination group id
if (!sourceGroup || !destinationGroup) return;
// update the removed item for mutation // removed/dragged item
if (!destinationStateId || !destinationState) return; const removedItem = groupedByIssues[source.droppableId][source.index];
removedItem.state = destinationStateId;
removedItem.state_detail = destinationState;
// patch request if (selectedGroup === "priority") {
issuesServices.patchIssue(activeWorkspace!.slug, projectId as string, removedItem.id, { // update the removed item for mutation
state: destinationStateId, removedItem.priority = destinationGroup;
});
// patch request
issuesServices.patchIssue(
activeWorkspace!.slug,
projectId as string,
removedItem.id,
{
priority: destinationGroup,
}
);
} else if (selectedGroup === "state_detail.name") {
const destinationState = states?.find((s) => s.name === destinationGroup);
const destinationStateId = destinationState?.id;
// update the removed item for mutation
if (!destinationStateId || !destinationState) return;
removedItem.state = destinationStateId;
removedItem.state_detail = destinationState;
// patch request
issuesServices.patchIssue(
activeWorkspace!.slug,
projectId as string,
removedItem.id,
{
state: destinationStateId,
}
);
}
// remove item from the source group
groupedByIssues[source.droppableId].splice(source.index, 1);
// add item to the destination group
groupedByIssues[destination.droppableId].splice(destination.index, 0, removedItem);
} }
// remove item from the source group
groupedByIssues[source.droppableId].splice(source.index, 1);
// add item to the destination group
groupedByIssues[destination.droppableId].splice(destination.index, 0, removedItem);
} }
} }
}, },
@ -155,6 +183,11 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
setIsOpen={setIsOpen} setIsOpen={setIsOpen}
data={preloadedData as Partial<IIssue>} data={preloadedData as Partial<IIssue>}
/> */} /> */}
<ConfirmIssueDeletion
isOpen={isIssueDeletionOpen}
handleClose={() => setIsIssueDeletionOpen(false)}
data={issueDeletionData}
/>
<CreateUpdateIssuesModal <CreateUpdateIssuesModal
isOpen={isIssueOpen && preloadedData?.actionType === "createIssue"} isOpen={isIssueOpen && preloadedData?.actionType === "createIssue"}
setIsOpen={setIsIssueOpen} setIsOpen={setIsIssueOpen}
@ -164,57 +197,69 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
projectId={projectId as string} projectId={projectId as string}
/> />
{groupedByIssues ? ( {groupedByIssues ? (
groupedByIssues ? ( <div className="h-full w-full">
<div className="w-full" style={{ height: "calc(82vh - 1.5rem)" }}> <DragDropContext onDragEnd={handleOnDragEnd}>
<DragDropContext onDragEnd={handleOnDragEnd}> {/* <StrictModeDroppable droppableId="trashBox">
<div className="h-full w-full overflow-hidden"> {(provided, snapshot) => (
<StrictModeDroppable droppableId="state" type="state" direction="horizontal"> <button
{(provided) => ( type="button"
<div className={`fixed bottom-2 right-8 z-10 px-2 py-1 flex items-center gap-2 rounded-lg mb-5 text-red-600 text-sm bg-red-100 border-2 border-transparent ${
className="h-full w-full" snapshot.isDraggingOver ? "border-red-600" : ""
{...provided.droppableProps} }`}
ref={provided.innerRef} {...provided.droppableProps}
> ref={provided.innerRef}
<div className="flex gap-x-4 h-full overflow-x-auto overflow-y-hidden pb-3"> >
{Object.keys(groupedByIssues).map((singleGroup, index) => ( <TrashIcon className="h-3 w-3" />
<SingleBoard Drop to delete
key={singleGroup} </button>
selectedGroup={selectedGroup} )}
groupTitle={singleGroup} </StrictModeDroppable> */}
createdBy={ <div className="h-full w-full overflow-hidden">
members <StrictModeDroppable droppableId="state" type="state" direction="horizontal">
? members?.find((m) => m.member.id === singleGroup)?.member {(provided) => (
.first_name <div
: undefined className="h-full w-full"
} {...provided.droppableProps}
groupedByIssues={groupedByIssues} ref={provided.innerRef}
index={index} >
setIsIssueOpen={setIsIssueOpen} <div className="flex gap-x-4 h-full overflow-x-auto overflow-y-hidden pb-3">
properties={properties} {Object.keys(groupedByIssues).map((singleGroup, index) => (
setPreloadedData={setPreloadedData} <SingleBoard
stateId={ key={singleGroup}
selectedGroup === "state_detail.name" selectedGroup={selectedGroup}
? states?.find((s) => s.name === singleGroup)?.id groupTitle={singleGroup}
: undefined createdBy={
} members
bgColor={ ? members?.find((m) => m.member.id === singleGroup)?.member.first_name
selectedGroup === "state_detail.name" : undefined
? states?.find((s) => s.name === singleGroup)?.color }
: undefined groupedByIssues={groupedByIssues}
} index={index}
/> setIsIssueOpen={setIsIssueOpen}
))} properties={properties}
</div> setPreloadedData={setPreloadedData}
{provided.placeholder} stateId={
selectedGroup === "state_detail.name"
? states?.find((s) => s.name === singleGroup)?.id
: undefined
}
bgColor={
selectedGroup === "state_detail.name"
? states?.find((s) => s.name === singleGroup)?.color
: undefined
}
/>
))}
</div> </div>
)} {provided.placeholder}
</StrictModeDroppable> </div>
</div> )}
</DragDropContext> </StrictModeDroppable>
</div> </div>
) : null </DragDropContext>
</div>
) : ( ) : (
<div className="w-full h-full flex justify-center items-center"> <div className="h-full w-full flex justify-center items-center">
<Spinner /> <Spinner />
</div> </div>
)} )}

12
apps/plane/components/project/issues/CreateUpdateIssueModal/SelectCycles.tsx
View File

@ -20,7 +20,7 @@ type Props = {
}; };
const SelectSprint: React.FC<Props> = ({ control, setIsOpen }) => { const SelectSprint: React.FC<Props> = ({ control, setIsOpen }) => {
const { sprints } = useUser(); const { cycles } = useUser();
return ( return (
<> <>
@ -35,7 +35,7 @@ const SelectSprint: React.FC<Props> = ({ control, setIsOpen }) => {
<Listbox.Button className="flex items-center gap-1 hover:bg-gray-100 relative border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm duration-300"> <Listbox.Button className="flex items-center gap-1 hover:bg-gray-100 relative border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm duration-300">
<ArrowPathIcon className="h-3 w-3" /> <ArrowPathIcon className="h-3 w-3" />
<span className="block truncate"> <span className="block truncate">
{sprints?.find((i) => i.id.toString() === value?.toString())?.name ?? "Cycle"} {cycles?.find((i) => i.id.toString() === value?.toString())?.name ?? "Cycle"}
</span> </span>
</Listbox.Button> </Listbox.Button>
@ -48,10 +48,10 @@ const SelectSprint: React.FC<Props> = ({ control, setIsOpen }) => {
> >
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none"> <Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1"> <div className="p-1">
{sprints?.map((sprint) => ( {cycles?.map((cycle) => (
<Listbox.Option <Listbox.Option
key={sprint.id} key={cycle.id}
value={sprint.id} value={cycle.id}
className={({ active }) => className={({ active }) =>
`relative cursor-pointer select-none p-2 rounded-md ${ `relative cursor-pointer select-none p-2 rounded-md ${
active ? "bg-theme text-white" : "text-gray-900" active ? "bg-theme text-white" : "text-gray-900"
@ -61,7 +61,7 @@ const SelectSprint: React.FC<Props> = ({ control, setIsOpen }) => {
{({ active, selected }) => ( {({ active, selected }) => (
<> <>
<span className={`block ${selected && "font-semibold"}`}> <span className={`block ${selected && "font-semibold"}`}>
{sprint.name} {cycle.name}
</span> </span>
</> </>
)} )}

1
apps/plane/components/project/issues/CreateUpdateIssueModal/SelectParentIssues.tsx
View File

@ -52,6 +52,7 @@ const SelectParent: React.FC<Props> = ({ control }) => {
}; };
})} })}
value={value} value={value}
width="xs"
buttonClassName="max-h-30 overflow-y-scroll" buttonClassName="max-h-30 overflow-y-scroll"
optionsClassName="max-h-30 overflow-y-scroll" optionsClassName="max-h-30 overflow-y-scroll"
onChange={onChange} onChange={onChange}

10
apps/plane/components/project/issues/ListView/index.tsx
View File

@ -77,11 +77,11 @@ const ListView: React.FC<Props> = ({
const handleHover = (issueId: string) => { const handleHover = (issueId: string) => {
document.addEventListener("keydown", (e) => { document.addEventListener("keydown", (e) => {
if (e.code === "Space") { // if (e.code === "Space") {
e.preventDefault(); // e.preventDefault();
setPreviewModalIssueId(issueId); // setPreviewModalIssueId(issueId);
setIssuePreviewModal(true); // setIssuePreviewModal(true);
} // }
}); });
}; };

612
apps/plane/components/project/issues/issue-detail/IssueDetailSidebar.tsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useState } from "react";
// swr // swr
import useSWR from "swr"; import useSWR from "swr";
// headless ui // headless ui
@ -21,7 +21,8 @@ import {
// commons // commons
import { classNames, copyTextToClipboard } from "constants/common"; import { classNames, copyTextToClipboard } from "constants/common";
// ui // ui
import { Input, Button } from "ui"; import { Input, Button, Spinner } from "ui";
import { Popover } from "@headlessui/react";
// icons // icons
import { import {
UserIcon, UserIcon,
@ -32,10 +33,12 @@ import {
ChartBarIcon, ChartBarIcon,
ClipboardDocumentIcon, ClipboardDocumentIcon,
LinkIcon, LinkIcon,
ArrowPathIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
// types // types
import type { Control } from "react-hook-form"; import type { Control } from "react-hook-form";
import type { IIssue, IIssueLabels, IssueResponse, IState, WorkspaceMember } from "types"; import type { IIssue, IIssueLabels, IssueResponse, IState, WorkspaceMember } from "types";
import { TwitterPicker } from "react-color";
type Props = { type Props = {
control: Control<IIssue, any>; control: Control<IIssue, any>;
@ -47,10 +50,11 @@ const PRIORITIES = ["high", "medium", "low"];
const defaultValues: Partial<IIssueLabels> = { const defaultValues: Partial<IIssueLabels> = {
name: "", name: "",
colour: "#ff0000",
}; };
const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDetail }) => { const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDetail }) => {
const { activeWorkspace, activeProject } = useUser(); const { activeWorkspace, activeProject, cycles } = useUser();
const { data: states } = useSWR<IState[]>( const { data: states } = useSWR<IState[]>(
activeWorkspace && activeProject ? STATE_LIST(activeProject.id) : null, activeWorkspace && activeProject ? STATE_LIST(activeProject.id) : null,
@ -85,6 +89,8 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
handleSubmit, handleSubmit,
formState: { isSubmitting }, formState: { isSubmitting },
reset, reset,
watch,
control: controlLabel,
} = useForm({ } = useForm({
defaultValues, defaultValues,
}); });
@ -100,250 +106,374 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
}); });
}; };
const sidebarOptions = [ const sidebarSections = [
{ [
label: "Priority", {
name: "priority", label: "Status",
canSelectMultipleOptions: false, name: "state",
icon: ChartBarIcon, canSelectMultipleOptions: false,
options: PRIORITIES.map((property) => ({ icon: Squares2X2Icon,
label: property, options: states?.map((state) => ({
value: property, label: state.name,
})), value: state.id,
}, })),
{ },
label: "Status", {
name: "state", label: "Assignees",
canSelectMultipleOptions: false, name: "assignees_list",
icon: Squares2X2Icon, canSelectMultipleOptions: true,
options: states?.map((state) => ({ icon: UserGroupIcon,
label: state.name, options: people?.map((person) => ({
value: state.id, label: person.member.first_name,
})), value: person.member.id,
}, })),
{ },
label: "Assignees", {
name: "assignees_list", label: "Priority",
canSelectMultipleOptions: true, name: "priority",
icon: UserGroupIcon, canSelectMultipleOptions: false,
options: people?.map((person) => ({ icon: ChartBarIcon,
label: person.member.first_name, options: PRIORITIES.map((property) => ({
value: person.member.id, label: property,
})), value: property,
}, })),
{ },
label: "Blocker", ],
name: "blockers_list", [
canSelectMultipleOptions: true, {
icon: UserIcon, label: "Blocker",
options: projectIssues?.results?.map((issue) => ({ name: "blockers_list",
label: issue.name, canSelectMultipleOptions: true,
value: issue.id, icon: UserIcon,
})), options: projectIssues?.results?.map((issue) => ({
}, label: issue.name,
{ value: issue.id,
label: "Blocked", })),
name: "blocked_list", },
canSelectMultipleOptions: true, {
icon: UserIcon, label: "Blocked",
options: projectIssues?.results?.map((issue) => ({ name: "blocked_list",
label: issue.name, canSelectMultipleOptions: true,
value: issue.id, icon: UserIcon,
})), options: projectIssues?.results?.map((issue) => ({
}, label: issue.name,
value: issue.id,
})),
},
{
label: "Due Date",
name: "target_date",
canSelectMultipleOptions: true,
icon: UserIcon,
},
],
[
{
label: "Cycle",
name: "cycle",
canSelectMultipleOptions: false,
icon: ArrowPathIcon,
options: cycles?.map((cycle) => ({
label: cycle.name,
value: cycle.id,
})),
},
],
]; ];
const handleCycleChange = (cycleId: string) => {
if (activeWorkspace && activeProject && issueDetail)
issuesServices.addIssueToSprint(activeWorkspace.slug, activeProject.id, cycleId, {
issue: issueDetail.id,
});
};
return ( return (
<div className="h-full w-full"> <div className="h-full w-full divide-y-2 divide-gray-100">
<div className="space-y-3"> <div className="flex justify-between items-center pb-3">
<div className="flex flex-col gap-y-4"> <h4 className="text-sm font-medium">
<h3 className="text-lg font-medium leading-6 text-gray-900">Quick Actions</h3> {activeProject?.identifier}-{issueDetail?.sequence_id}
<div className="flex items-center gap-2 flex-wrap"> </h4>
<button <div className="flex items-center gap-2 flex-wrap">
type="button" <button
className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300" type="button"
onClick={() => className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
copyTextToClipboard( onClick={() =>
`https://app.plane.so/projects/${activeProject?.id}/issues/${issueDetail?.id}` copyTextToClipboard(
) `https://app.plane.so/projects/${activeProject?.id}/issues/${issueDetail?.id}`
} )
> }
<LinkIcon className="h-3.5 w-3.5" /> >
</button> <LinkIcon className="h-3.5 w-3.5" />
<button </button>
type="button" <button
className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300" type="button"
onClick={() => copyTextToClipboard(`${issueDetail?.id}`)} className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
> onClick={() => copyTextToClipboard(`${issueDetail?.id}`)}
<ClipboardDocumentIcon className="h-3.5 w-3.5" /> >
</button> <ClipboardDocumentIcon className="h-3.5 w-3.5" />
</div> </button>
{sidebarOptions.map((item) => ( </div>
<div className="flex items-center justify-between gap-x-2" key={item.label}> </div>
<div className="flex items-center gap-x-2 text-sm"> <div className="divide-y-2 divide-gray-100">
<item.icon className="h-4 w-4" /> {sidebarSections.map((section, index) => (
<p>{item.label}</p> <div key={index} className="py-1">
</div> {section.map((item) => (
<div> <div key={item.label} className="flex justify-between items-center gap-x-2 py-2">
<Controller <div className="flex items-center gap-x-2 text-sm">
control={control} <item.icon className="h-4 w-4" />
name={item.name as keyof IIssue} <p>{item.label}</p>
render={({ field: { value } }) => ( </div>
<Listbox <div>
as="div" {item.name === "target_date" ? (
value={value} <Controller
multiple={item.canSelectMultipleOptions} control={control}
onChange={(value: any) => submitChanges({ [item.name]: value })} name="target_date"
className="flex-shrink-0" render={({ field: { value, onChange } }) => (
> <input
{({ open }) => ( type="date"
<div className="relative"> value={value ?? new Date().toString()}
<Listbox.Button className="relative flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm duration-300"> onChange={(e: any) => {
<span submitChanges({ target_date: e.target.value });
className={classNames( onChange(e.target.value);
value ? "" : "text-gray-900", }}
"hidden truncate sm:block w-16 text-left", className="hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300"
item.label === "Priority" ? "capitalize" : "" />
)}
>
{value
? Array.isArray(value)
? value
.map(
(i: any) =>
item.options?.find((option) => option.value === i)?.label
)
.join(", ") || item.label
: item.options?.find((option) => option.value === value)?.label
: "None"}
</span>
<ChevronDownIcon className="h-3 w-3" />
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{item.options?.map((option) => (
<Listbox.Option
key={option.value}
className={({ active, selected }) =>
`${
active || selected ? "text-white bg-theme" : "text-gray-900"
} ${
item.label === "Priority" && "capitalize"
} cursor-pointer select-none relative p-2 rounded-md truncate`
}
value={option.value}
>
{option.label}
</Listbox.Option>
))}
</div>
</Listbox.Options>
</Transition>
</div>
)} )}
</Listbox> />
)} ) : (
/> <Controller
</div> control={control}
</div> name={item.name as keyof IIssue}
))} render={({ field: { value } }) => (
<div> <Listbox
<form className="flex items-center gap-x-2" onSubmit={handleSubmit(onSubmit)}> as="div"
<Input value={value}
id="name" multiple={item.canSelectMultipleOptions}
name="name" onChange={(value: any) => {
placeholder="Add new label" if (item.name === "cycle") handleCycleChange(value);
register={register} else submitChanges({ [item.name]: value });
validations={{ }}
required: false, className="flex-shrink-0"
}} >
autoComplete="off" {({ open }) => (
/> <div className="relative">
<Button type="submit" disabled={isSubmitting}> <Listbox.Button className="relative flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm duration-300">
+ <span
</Button> className={classNames(
</form> value ? "" : "text-gray-900",
</div> "hidden truncate sm:block w-16 text-left",
<div className="flex justify-between items-center gap-x-2"> item.label === "Priority" ? "capitalize" : ""
<div className="flex items-center gap-x-2 text-sm"> )}
<TagIcon className="w-4 h-4" /> >
<p>Label</p> {value
</div> ? Array.isArray(value)
<div> ? value
<Controller .map(
control={control} (i: any) =>
name="labels_list" item.options?.find((option) => option.value === i)
render={({ field: { value } }) => ( ?.label
<Listbox )
as="div" .join(", ") || item.label
value={value} : item.options?.find((option) => option.value === value)
multiple ?.label
onChange={(value) => submitChanges({ labels_list: value })} : "None"}
className="flex-shrink-0" </span>
> <ChevronDownIcon className="h-3 w-3" />
{({ open }) => ( </Listbox.Button>
<>
<Listbox.Label className="sr-only">Label</Listbox.Label>
<div className="relative">
<Listbox.Button className="relative flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm duration-300">
<span
className={classNames(
value ? "" : "text-gray-900",
"hidden truncate capitalize sm:block w-16 text-left"
)}
>
{value && value.length > 0
? value
.map(
(i: string) =>
issueLabels?.find((option) => option.id === i)?.name
)
.join(", ")
: "None"}
</span>
<ChevronDownIcon className="h-3 w-3" />
</Listbox.Button>
<Transition <Transition
show={open} show={open}
as={React.Fragment} as={React.Fragment}
leave="transition ease-in duration-100" leave="transition ease-in duration-100"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none"> <Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1"> <div className="p-1">
{issueLabels?.map((label: any) => ( {item.options ? (
<Listbox.Option item.options.length > 0 ? (
key={label.id} item.options.map((option) => (
className={({ active, selected }) => <Listbox.Option
`${ key={option.value}
active || selected ? "text-white bg-theme" : "text-gray-900" className={({ active, selected }) =>
} cursor-pointer select-none relative p-2 rounded-md truncate` `${
} active || selected
value={label.id} ? "text-white bg-theme"
> : "text-gray-900"
{label.name} } ${
</Listbox.Option> item.label === "Priority" && "capitalize"
))} } cursor-pointer select-none relative p-2 rounded-md truncate`
</div> }
</Listbox.Options> value={option.value}
</Transition> >
</div> {option.label}
</> </Listbox.Option>
))
) : (
<div className="text-center">No {item.label}s found</div>
)
) : (
<Spinner />
)}
</div>
</Listbox.Options>
</Transition>
</div>
)}
</Listbox>
)}
/>
)}
</div>
</div>
))}
</div>
))}
</div>
<div className="space-y-2 pt-3">
<h5 className="text-xs font-medium">Add new label</h5>
<form className="flex items-center gap-x-2" onSubmit={handleSubmit(onSubmit)}>
<div>
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={`bg-white flex items-center gap-1 rounded-md p-1 outline-none focus:ring-2 focus:ring-indigo-500`}
>
{watch("colour") && watch("colour") !== "" && (
<span
className="w-6 h-6 rounded"
style={{
backgroundColor: watch("colour") ?? "green",
}}
></span>
)} )}
</Listbox> <ChevronDownIcon className="h-4 w-4" />
)} </Popover.Button>
/>
</div> <Transition
as={React.Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute z-10 transform right-0 mt-1 px-2 max-w-xs sm:px-0">
<Controller
name="colour"
control={controlLabel}
render={({ field: { value, onChange } }) => (
<TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
)}
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
<Input
id="name"
name="name"
placeholder="Title"
register={register}
validations={{
required: "This is required",
}}
autoComplete="off"
/>
<Button type="submit" disabled={isSubmitting}>
+
</Button>
</form>
<div className="flex justify-between items-center gap-x-2">
<div className="flex items-center gap-x-2 text-sm">
<TagIcon className="w-4 h-4" />
<p>Label</p>
</div>
<div>
<Controller
control={control}
name="labels_list"
render={({ field: { value } }) => (
<Listbox
as="div"
value={value}
multiple
onChange={(value: any) => submitChanges({ labels_list: value })}
className="flex-shrink-0"
>
{({ open }) => (
<>
<Listbox.Label className="sr-only">Label</Listbox.Label>
<div className="relative">
<Listbox.Button className="relative flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm duration-300">
<span
className={classNames(
value ? "" : "text-gray-900",
"hidden truncate capitalize sm:block w-16 text-left"
)}
>
{value && value.length > 0
? value
.map(
(i: string) =>
issueLabels?.find((option) => option.id === i)?.name
)
.join(", ")
: "None"}
</span>
<ChevronDownIcon className="h-3 w-3" />
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{issueLabels ? (
issueLabels.length > 0 ? (
issueLabels.map((label: IIssueLabels) => (
<Listbox.Option
key={label.id}
className={({ active, selected }) =>
`${
active || selected
? "text-white bg-theme"
: "text-gray-900"
} flex items-center gap-2 cursor-pointer select-none relative p-2 rounded-md truncate`
}
value={label.id}
>
<span
className="h-2 w-2 rounded-full flex-shrink-0"
style={{ backgroundColor: label.colour ?? "green" }}
></span>
{label.name}
</Listbox.Option>
))
) : (
<div className="text-center">No labels found</div>
)
) : (
<Spinner />
)}
</div>
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)}
/>
</div> </div>
</div> </div>
</div> </div>

50
apps/plane/components/project/issues/issue-detail/activity/index.tsx
View File

@ -1,6 +1,7 @@
// next // next
import Image from "next/image"; import Image from "next/image";
import { import {
CalendarDaysIcon,
ChartBarIcon, ChartBarIcon,
ChatBubbleBottomCenterTextIcon, ChatBubbleBottomCenterTextIcon,
Squares2X2Icon, Squares2X2Icon,
@ -19,6 +20,7 @@ const activityIcons = {
priority: <ChartBarIcon className="h-4 w-4" />, priority: <ChartBarIcon className="h-4 w-4" />,
name: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />, name: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
description: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />, description: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
target_date: <CalendarDaysIcon className="h-4 w-4" />,
}; };
const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => { const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
@ -45,7 +47,7 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
</div> </div>
</div> </div>
) : ( ) : (
<div className="relative z-10 flex-shrink-0 border-2 border-white -ml-1.5"> <div className="relative z-10 flex-shrink-0 border-2 border-white rounded-full h-[34px] -ml-1.5">
{activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? ( {activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
<Image <Image
src={activity.actor_detail.avatar} src={activity.actor_detail.avatar}
@ -64,43 +66,41 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
</div> </div>
)} )}
<div className="w-full"> <div className="w-full text-xs">
<p> <p>
{activity.actor_detail.first_name} {activity.actor_detail.last_name}{" "} <span className="font-medium">
{activity.actor_detail.first_name} {activity.actor_detail.last_name}
</span>{" "}
<span>{activity.verb}</span>{" "} <span>{activity.verb}</span>{" "}
{activity.verb !== "created" ? ( {activity.verb !== "created" ? (
<span>{activity.field ?? "commented"}</span> <span>{activity.field ?? "commented"}</span>
) : ( ) : (
" this issue" " this issue"
)} )}
<span className="ml-2 text-gray-500">{timeAgo(activity.created_at)}</span>
</p> </p>
<p className="text-xs text-gray-500">{timeAgo(activity.created_at)}</p>
<div className="w-full mt-2"> <div className="w-full mt-2">
{activity.verb !== "created" && ( {activity.verb !== "created" && (
<div className="text-sm"> <div>
<div> <div>
From:{" "} <span className="text-gray-500">From: </span>
<span className="text-gray-500"> {activity.field === "state"
{activity.field === "state" ? activity.old_value
? activity.old_value ? addSpaceIfCamelCase(
? addSpaceIfCamelCase( states?.find((s) => s.id === activity.old_value)?.name ?? ""
states?.find((s) => s.id === activity.old_value)?.name ?? "" )
) : "None"
: "None" : activity.old_value}
: activity.old_value}
</span>
</div> </div>
<div> <div>
To:{" "} <span className="text-gray-500">To: </span>
<span className="text-gray-500"> {activity.field === "state"
{activity.field === "state" ? activity.new_value
? activity.new_value ? addSpaceIfCamelCase(
? addSpaceIfCamelCase( states?.find((s) => s.id === activity.new_value)?.name ?? ""
states?.find((s) => s.id === activity.new_value)?.name ?? "" )
) : "None"
: "None" : activity.new_value}
: activity.new_value}
</span>
</div> </div>
</div> </div>
)} )}

2
apps/plane/components/project/memberInvitations.tsx
View File

@ -39,7 +39,7 @@ const ProjectMemberInvitations = ({
return ( return (
<> <>
<div <div
className={`w-full h-full flex flex-col px-4 py-3 rounded-lg bg-indigo-50 ${ className={`w-full h-full flex flex-col px-4 py-3 rounded-md bg-white ${
selected ? "ring-2 ring-indigo-400" : "" selected ? "ring-2 ring-indigo-400" : ""
}`} }`}
> >

77
apps/plane/components/workspace/SingleInvitation.tsx Normal file
View File

@ -0,0 +1,77 @@
// next
import Image from "next/image";
// react
import { useState } from "react";
// types
import { IWorkspaceInvitation } from "types";
type Props = {
invitation: IWorkspaceInvitation;
invitationsRespond: string[];
handleInvitation: any;
};
const SingleInvitation: React.FC<Props> = ({
invitation,
invitationsRespond,
handleInvitation,
}) => {
const [isChecked, setIsChecked] = useState(invitationsRespond.includes(invitation.id));
return (
<>
<li>
<label
className={`group relative flex border-2 border-transparent items-start space-x-3 cursor-pointer px-4 py-4 ${
isChecked ? "border-theme rounded-lg" : ""
}`}
htmlFor={invitation.id}
>
<div className="flex-shrink-0">
<span className="inline-flex items-center justify-center h-10 w-10 rounded-lg">
{invitation.workspace.logo && invitation.workspace.logo !== "" ? (
<Image
src={invitation.workspace.logo}
height="100%"
width="100%"
className="rounded"
alt={invitation.workspace.name}
/>
) : (
<span className="h-full w-full p-4 flex items-center justify-center bg-gray-500 text-white rounded uppercase">
{invitation.workspace.name.charAt(0)}
</span>
)}
</span>
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-medium text-gray-900">{invitation.workspace.name}</div>
<p className="text-sm text-gray-500">
Invited by {invitation.workspace.owner.first_name}
</p>
</div>
<div className="flex-shrink-0 self-center">
<input
id={invitation.id}
aria-describedby="workspaces"
name={invitation.id}
checked={invitationsRespond.includes(invitation.id)}
value={invitation.workspace.name}
onChange={(e) => {
handleInvitation(
invitation,
invitationsRespond.includes(invitation.id) ? "withdraw" : "accepted"
);
setIsChecked(e.target.checked);
}}
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
/>
</div>
</label>
</li>
</>
);
};
export default SingleInvitation;

7
apps/plane/constants/api-routes.ts
View File

@ -103,6 +103,13 @@ export const ISSUE_LABELS = (workspaceSlug: string, projectId: string) =>
export const FILTER_STATE_ISSUES = (workspaceSlug: string, projectId: string, state: string) => export const FILTER_STATE_ISSUES = (workspaceSlug: string, projectId: string, state: string) =>
`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/?state=${state}`; `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/?state=${state}`;
export const BULK_DELETE_ISSUES = (workspaceSlug: string, projectId: string) =>
`/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-delete-issues/`;
export const BULK_ADD_ISSUES_TO_CYCLE = (
workspaceSlug: string,
projectId: string,
cycleId: string
) => `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/bulk-assign-issues/`;
// states // states
export const STATES_ENDPOINT = (workspaceSlug: string, projectId: string) => export const STATES_ENDPOINT = (workspaceSlug: string, projectId: string) =>

14
apps/plane/contexts/user.context.tsx
View File

@ -16,7 +16,6 @@ import {
CURRENT_USER, CURRENT_USER,
PROJECTS_LIST, PROJECTS_LIST,
USER_WORKSPACES, USER_WORKSPACES,
USER_WORKSPACE_INVITATIONS,
PROJECT_ISSUES_LIST, PROJECT_ISSUES_LIST,
STATE_LIST, STATE_LIST,
CYCLE_LIST, CYCLE_LIST,
@ -24,7 +23,8 @@ import {
// types // types
import type { KeyedMutator } from "swr"; import type { KeyedMutator } from "swr";
import type { IUser, IWorkspace, IProject, IIssue, IssueResponse, ICycle, IState } from "types"; import type { IUser, IWorkspace, IProject, IssueResponse, ICycle, IState } from "types";
interface IUserContextProps { interface IUserContextProps {
user?: IUser; user?: IUser;
isUserLoading: boolean; isUserLoading: boolean;
@ -38,8 +38,8 @@ interface IUserContextProps {
activeProject?: IProject; activeProject?: IProject;
issues?: IssueResponse; issues?: IssueResponse;
mutateIssues: KeyedMutator<IssueResponse>; mutateIssues: KeyedMutator<IssueResponse>;
sprints?: ICycle[]; cycles?: ICycle[];
mutateSprints: KeyedMutator<ICycle[]>; mutateCycles: KeyedMutator<ICycle[]>;
states?: IState[]; states?: IState[];
mutateStates: KeyedMutator<IState[]>; mutateStates: KeyedMutator<IState[]>;
} }
@ -92,7 +92,7 @@ export const UserProvider = ({ children }: { children: ReactElement }) => {
: null : null
); );
const { data: sprints, mutate: mutateSprints } = useSWR<ICycle[]>( const { data: cycles, mutate: mutateCycles } = useSWR<ICycle[]>(
activeWorkspace && activeProject ? CYCLE_LIST(activeProject.id) : null, activeWorkspace && activeProject ? CYCLE_LIST(activeProject.id) : null,
activeWorkspace && activeProject activeWorkspace && activeProject
? () => sprintsServices.getCycles(activeWorkspace.slug, activeProject.id) ? () => sprintsServices.getCycles(activeWorkspace.slug, activeProject.id)
@ -141,8 +141,8 @@ export const UserProvider = ({ children }: { children: ReactElement }) => {
activeProject, activeProject,
issues, issues,
mutateIssues, mutateIssues,
sprints, cycles,
mutateSprints, mutateCycles,
states, states,
mutateStates, mutateStates,
setActiveProject, setActiveProject,

99
apps/plane/layouts/Navbar/Sidebar.tsx
View File

@ -28,11 +28,13 @@ import {
XMarkIcon, XMarkIcon,
ArrowLongLeftIcon, ArrowLongLeftIcon,
QuestionMarkCircleIcon, QuestionMarkCircleIcon,
EllipsisHorizontalIcon,
ClipboardDocumentIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
// constants // constants
import { classNames } from "constants/common"; import { classNames, copyTextToClipboard } from "constants/common";
// ui // ui
import { Spinner, Tooltip } from "ui"; import { CustomListbox, Spinner, Tooltip } from "ui";
// types // types
import type { IUser } from "types"; import type { IUser } from "types";
@ -423,23 +425,66 @@ const Sidebar: React.FC = () => {
<Disclosure key={project?.id} defaultOpen={projectId === project?.id}> <Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
{({ open }) => ( {({ open }) => (
<> <>
<Disclosure.Button <div className="flex items-center">
className={`w-full flex items-center gap-2 font-medium rounded-md p-2 text-sm ${ <Disclosure.Button
sidebarCollapse ? "justify-center" : "" className={`w-full flex items-center gap-2 font-medium rounded-md p-2 text-sm ${
}`} sidebarCollapse ? "justify-center" : ""
> }`}
<span className="bg-gray-700 text-white rounded h-7 w-7 grid place-items-center uppercase flex-shrink-0"> >
{project?.name.charAt(0)} <span className="bg-gray-700 text-white rounded h-7 w-7 grid place-items-center uppercase flex-shrink-0">
</span> {project?.name.charAt(0)}
{!sidebarCollapse && (
<span className="flex items-center justify-between w-full">
{project?.name}
<ChevronDownIcon
className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
/>
</span> </span>
{!sidebarCollapse && (
<span className="flex items-center justify-between w-full">
{project?.name}
<span>
<ChevronDownIcon
className={`h-4 w-4 duration-300 ${
open ? "rotate-180" : ""
}`}
/>
</span>
</span>
)}
</Disclosure.Button>
{!sidebarCollapse && (
<Menu as="div" className="relative inline-block">
<Menu.Button className="grid relative place-items-center focus:outline-none">
<EllipsisHorizontalIcon className="h-4 w-4" />
</Menu.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
<div className="p-1">
<Menu.Item as="div">
{(active) => (
<button
className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
onClick={() =>
copyTextToClipboard(
`https://app.plane.so/projects/${project?.id}/issues/`
)
}
>
<ClipboardDocumentIcon className="h-3 w-3" />
Copy Link
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
)} )}
</Disclosure.Button> </div>
<Transition <Transition
enter="transition duration-100 ease-out" enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0" enterFrom="transform scale-95 opacity-0"
@ -509,21 +554,21 @@ const Sidebar: React.FC = () => {
)} )}
</div> </div>
<div className="px-2 py-2 bg-gray-50 w-full self-baseline flex items-center gap-x-2"> <div className="px-2 py-2 bg-gray-50 w-full self-baseline flex items-center gap-x-2">
<button <Tooltip content="Click to toggle sidebar" position="right">
type="button" <button
className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 outline-none ${ type="button"
sidebarCollapse ? "justify-center w-full" : "" className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 outline-none ${
}`} sidebarCollapse ? "justify-center w-full" : ""
onClick={() => toggleCollapsed()} }`}
> onClick={() => toggleCollapsed()}
<Tooltip content="Click to toggle sidebar" position="right"> >
<ArrowLongLeftIcon <ArrowLongLeftIcon
className={`h-4 w-4 text-gray-500 group-hover:text-gray-900 flex-shrink-0 duration-300 ${ className={`h-4 w-4 text-gray-500 group-hover:text-gray-900 flex-shrink-0 duration-300 ${
sidebarCollapse ? "rotate-180" : "" sidebarCollapse ? "rotate-180" : ""
}`} }`}
/> />
</Tooltip> </button>
</button> </Tooltip>
<button <button
type="button" type="button"
onClick={() => { onClick={() => {

3
apps/plane/lib/services/api.service.ts
View File

@ -78,10 +78,11 @@ abstract class APIService {
}); });
} }
delete(url: string, config = {}): Promise<any> { delete(url: string, data?: any, config = {}): Promise<any> {
return axios({ return axios({
method: "delete", method: "delete",
url: this.baseURL + url, url: this.baseURL + url,
data: data,
headers: this.getAccessToken() ? this.getHeaders() : {}, headers: this.getAccessToken() ? this.getHeaders() : {},
...config, ...config,
}); });

29
apps/plane/lib/services/issues.services.ts
View File

@ -8,6 +8,8 @@ import {
ISSUE_PROPERTIES_ENDPOINT, ISSUE_PROPERTIES_ENDPOINT,
CYCLE_DETAIL, CYCLE_DETAIL,
ISSUE_LABELS, ISSUE_LABELS,
BULK_DELETE_ISSUES,
BULK_ADD_ISSUES_TO_CYCLE,
} from "constants/api-routes"; } from "constants/api-routes";
// services // services
import APIService from "lib/services/api.service"; import APIService from "lib/services/api.service";
@ -92,8 +94,6 @@ class ProjectIssuesServices extends APIService {
issue: string; issue: string;
} }
) { ) {
console.log(data);
return this.post(CYCLE_DETAIL(workspace_slug, projectId, cycleId), data) return this.post(CYCLE_DETAIL(workspace_slug, projectId, cycleId), data)
.then((response) => { .then((response) => {
return response?.data; return response?.data;
@ -237,6 +237,31 @@ class ProjectIssuesServices extends APIService {
throw error?.response?.data; throw error?.response?.data;
}); });
} }
async bulkDeleteIssues(workspace_slug: string, projectId: string, data: any): Promise<any> {
return this.delete(BULK_DELETE_ISSUES(workspace_slug, projectId), data)
.then((response) => {
return response?.data;
})
.catch((error) => {
throw error?.response?.data;
});
}
async bulkAddIssuesToCycle(
workspace_slug: string,
projectId: string,
cycleId: string,
data: any
): Promise<any> {
return this.post(BULK_ADD_ISSUES_TO_CYCLE(workspace_slug, projectId, cycleId), data)
.then((response) => {
return response?.data;
})
.catch((error) => {
throw error?.response?.data;
});
}
} }
export default new ProjectIssuesServices(); export default new ProjectIssuesServices();

5
apps/plane/package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "plane", "name": "app",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
@ -11,6 +11,9 @@
"dependencies": { "dependencies": {
"@headlessui/react": "^1.7.3", "@headlessui/react": "^1.7.3",
"@heroicons/react": "^2.0.12", "@heroicons/react": "^2.0.12",
"@lexical/list": "^0.6.4",
"@lexical/react": "^0.6.4",
"@lexical/utils": "^0.6.4",
"axios": "^1.1.3", "axios": "^1.1.3",
"js-cookie": "^3.0.1", "js-cookie": "^3.0.1",
"lexical": "^0.6.4", "lexical": "^0.6.4",

53
apps/plane/pages/editor.tsx
View File

@ -1,41 +1,26 @@
import React, { useEffect, useRef } from "react"; import React from "react";
// next import dynamic from "next/dynamic";
import type { NextPage } from "next";
// prose mirror
import { EditorState } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { Schema, DOMParser } from "prosemirror-model";
import { schema } from "prosemirror-schema-basic";
import { addListNodes } from "prosemirror-schema-list";
import { exampleSetup } from "prosemirror-example-setup";
const Editor: NextPage = () => { const RichTextEditor = dynamic(() => import("../components/lexical/editor"), {
const editorRef = useRef<HTMLDivElement>(null); ssr: false,
const contentRef = useRef<HTMLDivElement>(null); });
useEffect(() => { const LexicalViewer = dynamic(() => import("../components/lexical/viewer"), {
if (!editorRef.current || !contentRef.current) return; ssr: false,
});
const mySchema = new Schema({
nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
marks: schema.spec.marks,
});
const myEditorView = new EditorView(editorRef.current, {
state: EditorState.create({
doc: DOMParser.fromSchema(mySchema)?.parse(contentRef.current),
plugins: exampleSetup({ schema: mySchema }),
}),
});
return () => myEditorView.destroy();
}, []);
const Home = () => {
const [value, setValue] = React.useState("");
const onChange: any = (value: any) => {
console.log(value);
setValue(value);
};
return ( return (
<div id="editor" ref={editorRef}> <>
<div id="content" ref={contentRef} /> <RichTextEditor onChange={onChange} value={value} id="editor" />
</div> <LexicalViewer id="institution_viewer" value={value} />
</>
); );
}; };
export default Editor; export default Home;

40
apps/plane/pages/invitations.tsx
View File

@ -1,7 +1,6 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
// next // next
import type { NextPage } from "next"; import type { NextPage } from "next";
import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// swr // swr
import useSWR from "swr"; import useSWR from "swr";
@ -14,12 +13,15 @@ import useUser from "lib/hooks/useUser";
import { USER_WORKSPACE_INVITATIONS } from "constants/api-routes"; import { USER_WORKSPACE_INVITATIONS } from "constants/api-routes";
// layouts // layouts
import DefaultLayout from "layouts/DefaultLayout"; import DefaultLayout from "layouts/DefaultLayout";
// components
import SingleInvitation from "components/workspace/SingleInvitation";
// ui // ui
import { Button, Spinner } from "ui"; import { Button, Spinner, EmptySpace, EmptySpaceItem } from "ui";
// icons
import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
// types // types
import type { IWorkspaceInvitation } from "types"; import type { IWorkspaceInvitation } from "types";
import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline"; import Link from "next/link";
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
const OnBoard: NextPage = () => { const OnBoard: NextPage = () => {
const router = useRouter(); const router = useRouter();
@ -65,11 +67,9 @@ const OnBoard: NextPage = () => {
}); });
}; };
useEffect(() => { // useEffect(() => {
userService.updateUserOnBoard().then((response) => { // if (workspaces && workspaces.length === 0) setCanRedirect(false);
console.log(response); // }, [workspaces]);
});
}, []);
return ( return (
<DefaultLayout <DefaultLayout
@ -85,6 +85,7 @@ const OnBoard: NextPage = () => {
<p className="text-sm text-center">logged in as {user.email}</p> <p className="text-sm text-center">logged in as {user.email}</p>
</div> </div>
)} )}
<div className="w-full md:w-2/3 lg:w-1/3 p-8 rounded-lg"> <div className="w-full md:w-2/3 lg:w-1/3 p-8 rounded-lg">
{invitations && workspaces ? ( {invitations && workspaces ? (
invitations.length > 0 ? ( invitations.length > 0 ? (
@ -129,9 +130,26 @@ const OnBoard: NextPage = () => {
))} ))}
</div> </div>
</div> </div>
<div className="flex justify-between mt-4"> <h2 className="text-lg font-medium text-gray-900">Workspace Invitations</h2>
<p className="mt-1 text-sm text-gray-500">
Select invites that you want to accept.
</p>
<ul
role="list"
className="mt-6 divide-y divide-gray-200 border-t border-b border-gray-200"
>
{invitations.map((invitation) => (
<SingleInvitation
key={invitation.id}
invitation={invitation}
invitationsRespond={invitationsRespond}
handleInvitation={handleInvitation}
/>
))}
</ul>
<div className="mt-6">
<Button className="w-full" onClick={submitInvitations}> <Button className="w-full" onClick={submitInvitations}>
Continue to Dashboard Accept and Continue
</Button> </Button>
</div> </div>
</div> </div>

4
apps/plane/pages/me/my-issues.tsx
View File

@ -145,7 +145,9 @@ const MyIssues: NextPage = () => {
<a>{myIssue.name}</a> <a>{myIssue.name}</a>
</Link> </Link>
</td> </td>
<td className="px-3 py-4 max-w-[15rem]">{myIssue.description}</td> <td className="px-3 py-4 max-w-[15rem] truncate">
{myIssue.description}
</td>
<td className="px-3 py-4"> <td className="px-3 py-4">
{myIssue.project_detail?.name} {myIssue.project_detail?.name}
<br /> <br />

37
apps/plane/pages/projects/[projectId]/cycles.tsx
View File

@ -14,21 +14,18 @@ import { CYCLE_ISSUES, CYCLE_LIST } from "constants/fetch-keys";
// layouts // layouts
import AdminLayout from "layouts/AdminLayout"; import AdminLayout from "layouts/AdminLayout";
// components // components
import SprintView from "components/project/cycles/CycleView"; import CycleView from "components/project/cycles/CycleView";
import ConfirmIssueDeletion from "components/project/issues/ConfirmIssueDeletion"; import ConfirmIssueDeletion from "components/project/issues/ConfirmIssueDeletion";
import ConfirmSprintDeletion from "components/project/cycles/ConfirmCycleDeletion"; import ConfirmSprintDeletion from "components/project/cycles/ConfirmCycleDeletion";
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal"; import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
import CreateUpdateSprintsModal from "components/project/cycles/CreateUpdateCyclesModal"; import CreateUpdateSprintsModal from "components/project/cycles/CreateUpdateCyclesModal";
// ui // ui
import { Spinner } from "ui"; import { BreadcrumbItem, Breadcrumbs, HeaderButton, Spinner, EmptySpace, EmptySpaceItem } from "ui";
// icons // icons
import { PlusIcon } from "@heroicons/react/20/solid"; import { PlusIcon } from "@heroicons/react/20/solid";
import { ArrowPathIcon } from "@heroicons/react/24/outline";
// types // types
import { IIssue, ICycle, SelectSprintType, SelectIssue } from "types"; import { IIssue, ICycle, SelectSprintType, SelectIssue } from "types";
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
import { ArrowPathIcon } from "@heroicons/react/24/outline";
import HeaderButton from "ui/HeaderButton";
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
const ProjectSprints: NextPage = () => { const ProjectSprints: NextPage = () => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@ -44,7 +41,7 @@ const ProjectSprints: NextPage = () => {
const { projectId } = router.query; const { projectId } = router.query;
const { data: sprints } = useSWR<ICycle[]>( const { data: cycles } = useSWR<ICycle[]>(
projectId && activeWorkspace ? CYCLE_LIST(projectId as string) : null, projectId && activeWorkspace ? CYCLE_LIST(projectId as string) : null,
activeWorkspace && projectId activeWorkspace && projectId
? () => sprintService.getCycles(activeWorkspace.slug, projectId as string) ? () => sprintService.getCycles(activeWorkspace.slug, projectId as string)
@ -52,14 +49,14 @@ const ProjectSprints: NextPage = () => {
); );
const openIssueModal = ( const openIssueModal = (
sprintId: string, cycleId: string,
issue?: IIssue, issue?: IIssue,
actionType: "create" | "edit" | "delete" = "create" actionType: "create" | "edit" | "delete" = "create"
) => { ) => {
const sprint = sprints?.find((sprint) => sprint.id === sprintId); const cycle = cycles?.find((cycle) => cycle.id === cycleId);
if (sprint) { if (cycle) {
setSelectedSprint({ setSelectedSprint({
...sprint, ...cycle,
actionType: "create-issue", actionType: "create-issue",
}); });
if (issue) setSelectedIssues({ ...issue, actionType }); if (issue) setSelectedIssues({ ...issue, actionType });
@ -67,16 +64,16 @@ const ProjectSprints: NextPage = () => {
} }
}; };
const addIssueToSprint = (sprintId: string, issueId: string) => { const addIssueToSprint = (cycleId: string, issueId: string) => {
if (!activeWorkspace || !projectId) return; if (!activeWorkspace || !projectId) return;
issuesServices issuesServices
.addIssueToSprint(activeWorkspace.slug, projectId as string, sprintId, { .addIssueToSprint(activeWorkspace.slug, projectId as string, cycleId, {
issue: issueId, issue: issueId,
}) })
.then((response) => { .then((response) => {
console.log(response); console.log(response);
mutate(CYCLE_ISSUES(sprintId)); mutate(CYCLE_ISSUES(cycleId));
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);
@ -134,8 +131,8 @@ const ProjectSprints: NextPage = () => {
setIsOpen={setIsOpen} setIsOpen={setIsOpen}
projectId={projectId as string} projectId={projectId as string}
/> />
{sprints ? ( {cycles ? (
sprints.length > 0 ? ( cycles.length > 0 ? (
<div className="h-full w-full space-y-5"> <div className="h-full w-full space-y-5">
<Breadcrumbs> <Breadcrumbs>
<BreadcrumbItem title="Projects" link="/projects" /> <BreadcrumbItem title="Projects" link="/projects" />
@ -146,15 +143,15 @@ const ProjectSprints: NextPage = () => {
<HeaderButton Icon={PlusIcon} label="Add Cycle" onClick={() => setIsOpen(true)} /> <HeaderButton Icon={PlusIcon} label="Add Cycle" onClick={() => setIsOpen(true)} />
</div> </div>
<div className="h-full w-full"> <div className="h-full w-full">
{sprints.map((sprint) => ( {cycles.map((cycle) => (
<SprintView <CycleView
sprint={sprint} key={cycle.id}
sprint={cycle}
selectSprint={setSelectedSprint} selectSprint={setSelectedSprint}
projectId={projectId as string} projectId={projectId as string}
workspaceSlug={activeWorkspace?.slug as string} workspaceSlug={activeWorkspace?.slug as string}
openIssueModal={openIssueModal} openIssueModal={openIssueModal}
addIssueToSprint={addIssueToSprint} addIssueToSprint={addIssueToSprint}
key={sprint.id}
/> />
))} ))}
</div> </div>

48
apps/plane/pages/projects/[projectId]/issues/[issueId].tsx
View File

@ -53,7 +53,19 @@ const IssueDetail: NextPage = () => {
handleSubmit, handleSubmit,
reset, reset,
control, control,
} = useForm<IIssue>({}); } = useForm<IIssue>({
defaultValues: {
name: "",
description: "",
state: "",
assignees_list: [],
priority: "low",
blockers_list: [],
blocked_list: [],
target_date: new Date().toString(),
cycle: "",
},
});
const { data: issueActivities } = useSWR<any[]>( const { data: issueActivities } = useSWR<any[]>(
activeWorkspace && projectId && issueId ? PROJECT_ISSUES_ACTIVITY : null, activeWorkspace && projectId && issueId ? PROJECT_ISSUES_ACTIVITY : null,
@ -150,24 +162,23 @@ const IssueDetail: NextPage = () => {
/> />
<div className="space-y-5"> <div className="space-y-5">
<Breadcrumbs>
<BreadcrumbItem
title={`${activeProject?.name ?? "Project"} Issues`}
link={`/projects/${activeProject?.id}/issues`}
/>
<BreadcrumbItem
title={`Issue ${activeProject?.identifier ?? "Project"}-${
issueDetail?.sequence_id ?? "..."
} Details`}
/>
</Breadcrumbs>
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<h2 className="text-2xl font-medium">{`${activeProject?.name}/${activeProject?.identifier}-${issueDetail?.sequence_id}`}</h2> <Breadcrumbs>
<BreadcrumbItem
title={`${activeProject?.name ?? "Project"} Issues`}
link={`/projects/${activeProject?.id}/issues`}
/>
<BreadcrumbItem
title={`Issue ${activeProject?.identifier ?? "Project"}-${
issueDetail?.sequence_id ?? "..."
} Details`}
/>
</Breadcrumbs>
<div className="flex items-center gap-x-3"> <div className="flex items-center gap-x-3">
<HeaderButton <HeaderButton
Icon={ChevronLeftIcon} Icon={ChevronLeftIcon}
disabled={!prevIssue}
label="Previous" label="Previous"
className={`${!prevIssue ? "cursor-not-allowed opacity-70" : ""}`}
onClick={() => { onClick={() => {
if (!prevIssue) return; if (!prevIssue) return;
router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`); router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`);
@ -177,6 +188,7 @@ const IssueDetail: NextPage = () => {
Icon={ChevronRightIcon} Icon={ChevronRightIcon}
disabled={!nextIssue} disabled={!nextIssue}
label="Next" label="Next"
className={`${!nextIssue ? "cursor-not-allowed opacity-70" : ""}`}
onClick={() => { onClick={() => {
if (!nextIssue) return; if (!nextIssue) return;
router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`); router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`);
@ -188,7 +200,7 @@ const IssueDetail: NextPage = () => {
{issueDetail && activeProject ? ( {issueDetail && activeProject ? (
<div className="grid grid-cols-4 gap-5"> <div className="grid grid-cols-4 gap-5">
<div className="col-span-3 space-y-5"> <div className="col-span-3 space-y-5">
<div className="bg-secondary rounded-lg p-5"> <div className="bg-secondary rounded-lg p-4">
<TextArea <TextArea
id="name" id="name"
placeholder="Enter issue name" placeholder="Enter issue name"
@ -200,7 +212,7 @@ const IssueDetail: NextPage = () => {
handleSubmit(submitChanges)(); handleSubmit(submitChanges)();
}, 5000)} }, 5000)}
mode="transparent" mode="transparent"
className="text-3xl sm:text-3xl" className="text-xl font-medium"
/> />
<TextArea <TextArea
id="description" id="description"
@ -217,7 +229,7 @@ const IssueDetail: NextPage = () => {
register={register} register={register}
/> />
</div> </div>
<div className="bg-secondary rounded-lg p-5"> <div className="bg-secondary rounded-lg p-4">
<div className="relative"> <div className="relative">
<div className="absolute inset-0 flex items-center" aria-hidden="true"> <div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="w-full border-t border-gray-300" /> <div className="w-full border-t border-gray-300" />
@ -233,7 +245,7 @@ const IssueDetail: NextPage = () => {
<Tab <Tab
key={item} key={item}
className={({ selected }) => className={({ selected }) =>
`px-3 py-1 text-sm rounded-md border border-gray-700 ${ `px-3 py-1 text-sm rounded-md border-2 border-gray-700 ${
selected ? "bg-gray-700 text-white" : "" selected ? "bg-gray-700 text-white" : ""
}` }`
} }

298
apps/plane/pages/projects/[projectId]/issues/index.tsx
View File

@ -141,152 +141,154 @@ const ProjectIssues: NextPage = () => {
<Spinner /> <Spinner />
</div> </div>
) : projectIssues.count > 0 ? ( ) : projectIssues.count > 0 ? (
<div className="w-full space-y-5"> <>
<Breadcrumbs> <div className="w-full space-y-5 mb-5">
<BreadcrumbItem title="Projects" link="/projects" /> <Breadcrumbs>
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Issues`} /> <BreadcrumbItem title="Projects" link="/projects" />
</Breadcrumbs> <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Issues`} />
<div className="flex items-center justify-between w-full"> </Breadcrumbs>
<h2 className="text-2xl font-medium">Project Issues</h2> <div className="flex items-center justify-between w-full">
<div className="flex items-center gap-x-3"> <h2 className="text-2xl font-medium">Project Issues</h2>
<div className="flex items-center gap-x-1"> <div className="flex items-center gap-x-3">
<button <div className="flex items-center gap-x-1">
type="button" <button
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${ type="button"
issueView === "list" ? "bg-gray-200" : "" className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
}`} issueView === "list" ? "bg-gray-200" : ""
onClick={() => { }`}
setIssueView("list"); onClick={() => {
setGroupByProperty(null); setIssueView("list");
}} setGroupByProperty(null);
> }}
<ListBulletIcon className="h-4 w-4" /> >
</button> <ListBulletIcon className="h-4 w-4" />
<button </button>
type="button" <button
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${ type="button"
issueView === "kanban" ? "bg-gray-200" : "" className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
}`} issueView === "kanban" ? "bg-gray-200" : ""
onClick={() => { }`}
setIssueView("kanban"); onClick={() => {
setGroupByProperty("state_detail.name"); setIssueView("kanban");
}} setGroupByProperty("state_detail.name");
> }}
<Squares2X2Icon className="h-4 w-4" /> >
</button> <Squares2X2Icon className="h-4 w-4" />
</div> </button>
<Menu as="div" className="relative inline-block w-40">
<div className="w-full">
<Menu.Button className="inline-flex justify-between items-center w-full rounded-md shadow-sm p-2 border border-gray-300 text-xs font-semibold text-gray-700 hover:bg-gray-100 focus:outline-none">
<span className="flex gap-x-1 items-center">
{groupByOptions.find((option) => option.key === groupByProperty)?.name ??
"No Grouping"}
</span>
<div className="flex-grow flex justify-end">
<ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
</div>
</Menu.Button>
</div> </div>
<Menu as="div" className="relative inline-block w-40">
<div className="w-full">
<Menu.Button className="inline-flex justify-between items-center w-full rounded-md shadow-sm p-2 border border-gray-300 text-xs font-semibold text-gray-700 hover:bg-gray-100 focus:outline-none">
<span className="flex gap-x-1 items-center">
{groupByOptions.find((option) => option.key === groupByProperty)?.name ??
"No Grouping"}
</span>
<div className="flex-grow flex justify-end">
<ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
</div>
</Menu.Button>
</div>
<Transition <Transition
as={React.Fragment} as={React.Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75" leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items className="origin-top-left absolute left-0 mt-2 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50"> <Menu.Items className="origin-top-left absolute left-0 mt-2 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
<div className="p-1"> <div className="p-1">
{groupByOptions.map((option) => ( {groupByOptions.map((option) => (
<Menu.Item key={option.key}> <Menu.Item key={option.key}>
{({ active }) => ( {({ active }) => (
<button
type="button"
className={`${
active ? "bg-theme text-white" : "text-gray-900"
} group flex w-full items-center rounded-md p-2 text-xs`}
onClick={() => setGroupByProperty(option.key)}
>
{option.name}
</button>
)}
</Menu.Item>
))}
{issueView === "list" ? (
<Menu.Item>
{({ active }) => (
<button
type="button"
className={`hover:bg-theme hover:text-white ${
active ? "bg-theme text-white" : "text-gray-900"
} group flex w-full items-center rounded-md p-2 text-xs`}
onClick={() => setGroupByProperty(null)}
>
No grouping
</button>
)}
</Menu.Item>
) : null}
</div>
</Menu.Items>
</Transition>
</Menu>
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button className="inline-flex justify-between items-center rounded-md shadow-sm p-2 border border-gray-300 text-xs font-semibold text-gray-700 hover:bg-gray-100 focus:outline-none w-40">
<span>Properties</span>
<ChevronDownIcon className="h-4 w-4" />
</Popover.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute left-1/2 z-10 mt-1 -translate-x-1/2 transform px-2 sm:px-0 w-full">
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
<div className="relative grid bg-white p-1">
{Object.keys(properties).map((key) => (
<button <button
key={key} type="button"
className={`text-gray-900 hover:bg-theme hover:text-white flex justify-between w-full items-center rounded-md p-2 text-xs`} className={`${
onClick={() => setProperties(key as keyof Properties)} active ? "bg-theme text-white" : "text-gray-900"
} group flex w-full items-center rounded-md p-2 text-xs`}
onClick={() => setGroupByProperty(option.key)}
> >
<p className="capitalize">{key.replace("_", " ")}</p> {option.name}
<span className="self-end">
{properties[key as keyof Properties] ? (
<EyeIcon width="18" height="18" />
) : (
<EyeSlashIcon width="18" height="18" />
)}
</span>
</button> </button>
))} )}
</Menu.Item>
))}
{issueView === "list" ? (
<Menu.Item>
{({ active }) => (
<button
type="button"
className={`hover:bg-theme hover:text-white ${
active ? "bg-theme text-white" : "text-gray-900"
} group flex w-full items-center rounded-md p-2 text-xs`}
onClick={() => setGroupByProperty(null)}
>
No grouping
</button>
)}
</Menu.Item>
) : null}
</div>
</Menu.Items>
</Transition>
</Menu>
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button className="inline-flex justify-between items-center rounded-md shadow-sm p-2 border border-gray-300 text-xs font-semibold text-gray-700 hover:bg-gray-100 focus:outline-none w-40">
<span>Properties</span>
<ChevronDownIcon className="h-4 w-4" />
</Popover.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute left-1/2 z-10 mt-1 -translate-x-1/2 transform px-2 sm:px-0 w-full">
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
<div className="relative grid bg-white p-1">
{Object.keys(properties).map((key) => (
<button
key={key}
className={`text-gray-900 hover:bg-theme hover:text-white flex justify-between w-full items-center rounded-md p-2 text-xs`}
onClick={() => setProperties(key as keyof Properties)}
>
<p className="capitalize">{key.replace("_", " ")}</p>
<span className="self-end">
{properties[key as keyof Properties] ? (
<EyeIcon width="18" height="18" />
) : (
<EyeSlashIcon width="18" height="18" />
)}
</span>
</button>
))}
</div>
</div> </div>
</div> </Popover.Panel>
</Popover.Panel> </Transition>
</Transition> </>
</> )}
)} </Popover>
</Popover> <HeaderButton
<HeaderButton Icon={PlusIcon}
Icon={PlusIcon} label="Add Issue"
label="Add Issue" onClick={() => {
onClick={() => { const e = new KeyboardEvent("keydown", {
const e = new KeyboardEvent("keydown", { key: "i",
key: "i", ctrlKey: true,
ctrlKey: true, });
}); document.dispatchEvent(e);
document.dispatchEvent(e); }}
}} />
/> </div>
</div> </div>
</div> </div>
{issueView === "list" ? ( {issueView === "list" ? (
@ -298,14 +300,16 @@ const ProjectIssues: NextPage = () => {
handleDeleteIssue={setDeleteIssue} handleDeleteIssue={setDeleteIssue}
/> />
) : ( ) : (
<BoardView <div className="h-full pb-7 mb-7">
properties={properties} <BoardView
selectedGroup={groupByProperty} properties={properties}
groupedByIssues={groupedByIssues} selectedGroup={groupByProperty}
members={members} groupedByIssues={groupedByIssues}
/> members={members}
/>
</div>
)} )}
</div> </>
) : ( ) : (
<div className="h-full w-full grid place-items-center px-4 sm:px-0"> <div className="h-full w-full grid place-items-center px-4 sm:px-0">
<EmptySpace <EmptySpace

67
apps/plane/pages/projects/[projectId]/settings.tsx
View File

@ -33,6 +33,8 @@ import {
CheckIcon, CheckIcon,
PlusIcon, PlusIcon,
PencilSquareIcon, PencilSquareIcon,
RectangleGroupIcon,
PencilIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
// types // types
import type { IProject, IState, IWorkspace, WorkspaceMember } from "types"; import type { IProject, IState, IWorkspace, WorkspaceMember } from "types";
@ -58,6 +60,7 @@ const ProjectSettings: NextPage = () => {
const [isCreateStateModalOpen, setIsCreateStateModalOpen] = useState(false); const [isCreateStateModalOpen, setIsCreateStateModalOpen] = useState(false);
const [selectedState, setSelectedState] = useState<string | undefined>(); const [selectedState, setSelectedState] = useState<string | undefined>();
const [newGroupForm, setNewGroupForm] = useState(false);
const router = useRouter(); const router = useRouter();
@ -414,8 +417,8 @@ const ProjectSettings: NextPage = () => {
<div className="w-full space-y-5"> <div className="w-full space-y-5">
{states?.map((state) => ( {states?.map((state) => (
<div <div
className="border p-1 px-4 rounded flex justify-between items-center"
key={state.id} key={state.id}
className="bg-white px-4 py-2 rounded flex justify-between items-center"
> >
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<div <div
@ -433,25 +436,69 @@ const ProjectSettings: NextPage = () => {
</div> </div>
</div> </div>
))} ))}
<button <Button
type="button" type="button"
className="flex items-center gap-x-1" className="flex items-center gap-x-1"
onClick={() => setIsCreateStateModalOpen(true)} onClick={() => setIsCreateStateModalOpen(true)}
> >
<PlusIcon className="h-4 w-4 text-gray-400" /> <PlusIcon className="h-4 w-4" />
<span>Add State</span> <span>Add State</span>
</button> </Button>
</div> </div>
</div> </div>
</section> </section>
<section className="space-y-5"> <section className="space-y-5">
<div> <div className="flex items-center justify-between">
<h3 className="text-lg font-medium leading-6 text-gray-900">Labels</h3> <div>
<p className="mt-1 text-sm text-gray-500"> <h3 className="text-lg font-medium leading-6 text-gray-900">Labels</h3>
Manage the labels of this project. <p className="mt-1 text-sm text-gray-500">
</p> Manage the labels of this project.
</p>
</div>
<Button
className="flex items-center gap-x-1"
onClick={() => setNewGroupForm(true)}
>
<PlusIcon className="h-4 w-4" />
New group
</Button>
</div>
<div className="space-y-5">
<div
className={`bg-white px-4 py-2 flex items-center gap-2 ${
newGroupForm ? "" : "hidden"
}`}
>
<Input type="text" name="groupName" />
<Button
type="button"
theme="secondary"
onClick={() => setNewGroupForm(false)}
>
Cancel
</Button>
<Button type="button">Save</Button>
</div>
{["", ""].map((group, index) => (
<div key={index} className="bg-white p-4 text-gray-900 rounded-md">
<h3 className="font-medium leading-5 flex items-center gap-2">
<RectangleGroupIcon className="h-5 w-5" />
This is the label group title
</h3>
<div className="pl-5 mt-4">
<div className="group text-sm flex justify-between items-center p-2 hover:bg-gray-100 rounded">
<h5 className="flex items-center gap-2">
<div className="w-2 h-2 bg-red-600 rounded-full"></div>
This is the label title
</h5>
<div className="hidden group-hover:block">
<PencilIcon className="h-3 w-3" />
</div>
</div>
</div>
</div>
))}
</div> </div>
<div></div>
</section> </section>
</div> </div>
</form> </form>

2
apps/plane/pages/signin.tsx
View File

@ -95,7 +95,7 @@ const SignIn: NextPage = () => {
> >
{isGoogleAuthenticationLoading && ( {isGoogleAuthenticationLoading && (
<div className="absolute top-0 left-0 w-full h-full bg-white z-50 flex items-center justify-center"> <div className="absolute top-0 left-0 w-full h-full bg-white z-50 flex items-center justify-center">
<h2 className="text-2xl text-black">Sign in with Google. Please wait...</h2> <h2 className="text-2xl text-black">Signing in with Google. Please wait...</h2>
</div> </div>
)} )}
<div className="w-full h-screen flex justify-center items-center bg-gray-50 overflow-auto"> <div className="w-full h-screen flex justify-center items-center bg-gray-50 overflow-auto">

128
apps/plane/pages/workspace-member-invitation/[invitationId].tsx
View File

@ -18,11 +18,13 @@ import { Button } from "ui";
// icons // icons
import { import {
ChartBarIcon, ChartBarIcon,
CheckIcon,
ChevronRightIcon, ChevronRightIcon,
CubeIcon, CubeIcon,
ShareIcon, ShareIcon,
StarIcon, StarIcon,
UserIcon, UserIcon,
XMarkIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace"; import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
@ -60,87 +62,75 @@ const WorkspaceInvitation: NextPage = () => {
</div> </div>
) : ( ) : (
<> <>
<div className="bg-gray-50 rounded shadow-2xl border px-4 py-8 w-full md:w-1/3 space-y-4 flex flex-col justify-between"> {invitationDetail.accepted ? (
{invitationDetail.accepted ? ( <>
<> <EmptySpace
<h2 className="text-2xl"> title={`You are already a member of ${invitationDetail.workspace.name}`}
You are already a member of {invitationDetail.workspace.name} description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
</h2> >
<div className="w-full flex gap-x-4"> <EmptySpaceItem
<Link href="/signin"> Icon={CubeIcon}
<a className="w-full"> title="Continue to Dashboard"
<Button className="w-full">Go To Login Page</Button> action={() => router.push("/")}
</a> />
</Link> </EmptySpace>
</div> </>
</> ) : (
) : ( <EmptySpace
<> title={`You have been invited to ${invitationDetail.workspace.name}`}
<h2 className="text-2xl"> description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
You have been invited to{" "} >
<span className="font-semibold italic"> <EmptySpaceItem Icon={CheckIcon} title="Accept" action={handleAccept} />
{invitationDetail.workspace.name} <EmptySpaceItem
</span> Icon={XMarkIcon}
</h2> title="Ignore"
<div className="w-full flex gap-x-4"> action={() => {
<Link href="/"> router.push("/");
<a className="w-full"> }}
<Button theme="secondary" className="w-full"> />
Ignore </EmptySpace>
</Button> )}
</a>
</Link>
<Button className="w-full" onClick={handleAccept}>
Accept
</Button>
</div>
</>
)}
</div>
</> </>
)} )}
</> </>
) : ( ) : (
<> <EmptySpace
<EmptySpace title="This invitation link is not active anymore."
title="This invitation link is not active anymore." description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account." link={{ text: "Or start from an empty project", href: "/" }}
link={{ text: "Or start from an empty project", href: "/" }} >
> {!user ? (
{!user ? (
<EmptySpaceItem
Icon={UserIcon}
title="Sign in to continue"
action={() => {
router.push("/signin");
}}
/>
) : (
<EmptySpaceItem
Icon={CubeIcon}
title="Continue to Dashboard"
action={() => {
router.push("/");
}}
/>
)}
<EmptySpaceItem <EmptySpaceItem
Icon={StarIcon} Icon={UserIcon}
title="Star us on GitHub" title="Sign in to continue"
action={() => { action={() => {
router.push("https://github.com/makeplane"); router.push("/signin");
}} }}
/> />
) : (
<EmptySpaceItem <EmptySpaceItem
Icon={ShareIcon} Icon={CubeIcon}
title="Join our community of active creators" title="Continue to Dashboard"
action={() => { action={() => {
router.push("https://discord.com/invite/8SR2N9PAcJ"); router.push("/");
}} }}
/> />
</EmptySpace> )}
</> <EmptySpaceItem
Icon={StarIcon}
title="Star us on GitHub"
action={() => {
router.push("https://github.com/makeplane");
}}
/>
<EmptySpaceItem
Icon={ShareIcon}
title="Join our community of active creators"
action={() => {
router.push("https://discord.com/invite/8SR2N9PAcJ");
}}
/>
</EmptySpace>
)} )}
</div> </div>
</DefaultLayout> </DefaultLayout>

BIN
apps/plane/public/favicon/android-chrome-192x192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
apps/plane/public/favicon/android-chrome-512x512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
apps/plane/public/favicon/apple-touch-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
apps/plane/public/favicon/favicon-16x16.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 267 B

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
apps/plane/public/favicon/favicon-32x32.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 584 B

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
apps/plane/public/favicon/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

1
apps/plane/public/favicon/site.webmanifest Normal file
View File

@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

7
apps/plane/styles/globals.css
View File

@ -14,6 +14,13 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-variant-ligatures: none;
-webkit-font-variant-ligatures: none;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
} }
/* Scrollbar style */ /* Scrollbar style */

3
apps/plane/types/issues.d.ts vendored
View File

@ -45,6 +45,7 @@ export interface IIssue {
blockers: any[]; blockers: any[];
blocked_issue_details: any[]; blocked_issue_details: any[];
sprints: string | null; sprints: string | null;
cycle: string | null;
} }
export interface BlockeIssue { export interface BlockeIssue {
@ -118,8 +119,10 @@ export interface IIssueLabels {
updated_at: Date; updated_at: Date;
name: string; name: string;
description: string; description: string;
colour: string;
created_by: string; created_by: string;
updated_by: string; updated_by: string;
project: string; project: string;
workspace: string; workspace: string;
parent: string | null;
} }

6
apps/plane/ui/Button/index.tsx
View File

@ -19,7 +19,7 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
children, children,
onClick, onClick,
type = "button", type = "button",
size = "rg", size = "sm",
className, className,
theme = "primary", theme = "primary",
disabled = false, disabled = false,
@ -36,12 +36,12 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
"inline-flex items-center rounded justify-center font-medium", "inline-flex items-center rounded justify-center font-medium",
theme === "primary" theme === "primary"
? `${ ? `${
disabled ? "bg-indigo-700 hover:bg-indigo-800" : "bg-theme hover:bg-indigo-700" disabled ? "opacity-70" : "bg-theme hover:bg-indigo-700"
} text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 border border-transparent` } text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 border border-transparent`
: theme === "secondary" : theme === "secondary"
? "border border-gray-300 bg-white" ? "border border-gray-300 bg-white"
: `${ : `${
disabled ? "bg-red-700 hover:bg-red-800" : "bg-red-600 hover:bg-red-700" disabled ? "opacity-70" : "bg-red-600 hover:bg-red-700"
} text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 border border-transparent`, } text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 border border-transparent`,
size === "sm" size === "sm"
? "p-2 text-xs" ? "p-2 text-xs"

6
apps/plane/ui/SearchListbox/index.tsx
View File

@ -13,7 +13,7 @@ const SearchListbox: React.FC<Props> = ({
value, value,
multiple: canSelectMultiple, multiple: canSelectMultiple,
icon, icon,
width, width = "sm",
optionsFontsize, optionsFontsize,
buttonClassName, buttonClassName,
optionsClassName, optionsClassName,
@ -83,7 +83,9 @@ const SearchListbox: React.FC<Props> = ({
> >
<Combobox.Options <Combobox.Options
className={`absolute mt-1 bg-white shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none max-h-32 overflow-auto z-10 ${ className={`absolute mt-1 bg-white shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none max-h-32 overflow-auto z-10 ${
width === "sm" width === "xs"
? "w-20"
: width === "sm"
? "w-32" ? "w-32"
: width === "md" : width === "md"
? "w-48" ? "w-48"

2
apps/plane/ui/SearchListbox/types.d.ts vendored
View File

@ -9,6 +9,6 @@ export type Props = {
icon?: JSX.Element; icon?: JSX.Element;
buttonClassName?: string; buttonClassName?: string;
optionsClassName?: string; optionsClassName?: string;
width?: "sm" | "md" | "lg" | "xl" | "2xl"; width?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl"; optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
}; };

2
apps/plane/ui/Tooltip/index.tsx
View File

@ -20,7 +20,7 @@ const Tooltip: React.FC<Props> = ({ children, content, position = "top" }) => {
: "top-14" : "top-14"
}`} }`}
> >
<p className="truncate text-sx">{content}</p> <p className="truncate text-xs">{content}</p>
<span <span
className={`absolute w-2 h-2 bg-black ${ className={`absolute w-2 h-2 bg-black ${
position === "top" position === "top"

3
package.json
View File

@ -16,5 +16,6 @@
"eslint": "^8.28.0", "eslint": "^8.28.0",
"eslint-config-turbo": "latest", "eslint-config-turbo": "latest",
"turbo": "latest" "turbo": "latest"
} },
"packageManager": "pnpm@7.15.0"
} }

3103
pnpm-lock.yaml Normal file
View File

File diff suppressed because it is too large Load Diff

2
pnpm-workspace.yaml Normal file
View File

@ -0,0 +1,2 @@
packages:
- 'apps/*'

46
turbo.json
View File

@ -1,25 +1,25 @@
{ {
"$schema": "https://turbo.build/schema.json", "$schema": "https://turbo.build/schema.json",
"pipeline": { "pipeline": {
"build": { "build": {
"dependsOn": ["^build"], "dependsOn": ["^build"],
"outputs": [".next/**", "dist/**"] "outputs": [".next/**", "dist/**"]
}, },
"test": { "test": {
"dependsOn": ["^build"], "dependsOn": ["^build"],
"outputs": [] "outputs": []
}, },
"lint": { "lint": {
"outputs": [] "outputs": []
}, },
"dev": { "dev": {
"cache": false "cache": false
}, },
"start": { "start": {
"cache": false "cache": false
}, },
"clean": { "clean": {
"cache": false "cache": false
}
} }
} }
}

167
yarn.lock
View File

@ -10,7 +10,7 @@
core-js-pure "^3.25.1" core-js-pure "^3.25.1"
regenerator-runtime "^0.13.11" regenerator-runtime "^0.13.11"
"@babel/runtime@^7.10.2", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.9", "@babel/runtime@^7.9.2": "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.9", "@babel/runtime@^7.9.2":
version "7.20.6" version "7.20.6"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.6.tgz#facf4879bfed9b5326326273a64220f099b0fce3" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.6.tgz#facf4879bfed9b5326326273a64220f099b0fce3"
integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA== integrity sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==
@ -77,6 +77,159 @@
resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8" resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw== integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
"@lexical/clipboard@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/clipboard/-/clipboard-0.6.4.tgz#fdbe763bd0fde6f08f1f6fc2cad40d9977127941"
integrity sha512-pbJmbR1B9d3l4Ey/NrNfvLibA9CzGBamf3HanDtSEcXTDwKoSkUoPDgY9worUYdz9vnQlefntIRrOGjaDbFOxA==
dependencies:
"@lexical/html" "0.6.4"
"@lexical/list" "0.6.4"
"@lexical/selection" "0.6.4"
"@lexical/utils" "0.6.4"
"@lexical/code@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/code/-/code-0.6.4.tgz#9cdbcaf395248f8e194e3c3edde4c17f8511dd0f"
integrity sha512-fsGLvY6BgLSuKRn4/xqbZMnJSrY3u1b2htk7AKVOBxSeEENjLClMkdomVvbWF6CkGMX1c1wkP93MmeOe9VmF/g==
dependencies:
"@lexical/utils" "0.6.4"
prismjs "^1.27.0"
"@lexical/dragon@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/dragon/-/dragon-0.6.4.tgz#a69aeaf5ab89187cf2ff3d1ac92631c91a0dec0c"
integrity sha512-6M7rtmZck1CxHsKCpUaSUNIzU0zDfus77RWEKbdBAdvFROqQoOKmBJnBRjlghqDPpi5lz8pL+70eXfcfJepwlw==
"@lexical/hashtag@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/hashtag/-/hashtag-0.6.4.tgz#3d670b1c933db254a6fa027c798da0e1fa06829d"
integrity sha512-xB2/Es9PsDdtEHtcOxZk5AtqSEAkzbgadSJC7iYFssc+ltX1ZGOLqXHREZCwL8c++kUnuwr+tALL7iRuLpVouA==
dependencies:
"@lexical/utils" "0.6.4"
"@lexical/history@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/history/-/history-0.6.4.tgz#52ec268b3769663d6fd8d573018ef0a67f96d18e"
integrity sha512-NdFxuwNdnFFihHsawewy1tQTW3M0ubzxmkAHZNYnEnjTcF77NxetM24jdUbNS84aLckCJnc4uM84/B0N6P3H2Q==
dependencies:
"@lexical/utils" "0.6.4"
"@lexical/html@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/html/-/html-0.6.4.tgz#d9e26779f5dc816289643ebac2beb3f42fe47d97"
integrity sha512-NVW70XFd9Ekfe4t/FwZc2EuT2axC8wYxNQ3NI9FXnqAWvLP3F6caDUa0Qn58Gdyx8QQGKRa6GL0BFEXqaD3cxw==
dependencies:
"@lexical/selection" "0.6.4"
"@lexical/link@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/link/-/link-0.6.4.tgz#e7c1ab092d8281cc4ccf0d371e407b3aed4a2e7d"
integrity sha512-4ergNX/GOKyRFUIf2daflB1LzU96UAi4mGH3QdkvfDBo+a4eFj7GYXCf98ktilhvGlC7El4cgLVCq/BoidjS/w==
dependencies:
"@lexical/utils" "0.6.4"
"@lexical/list@0.6.4", "@lexical/list@^0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/list/-/list-0.6.4.tgz#ad1f89401bc3104130baffa260c9607240f1d30a"
integrity sha512-2WjQTABK4Zckup0YXp/UpAuCul4Ay8yTTUNEhsPpZegeYyglURugx5uYsh811+wN6acUZwFhkYRyyzxU9cDPsg==
dependencies:
"@lexical/utils" "0.6.4"
"@lexical/mark@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/mark/-/mark-0.6.4.tgz#d9c9d284a6a3f236290023b39f68647756c659cb"
integrity sha512-2Hpc21i2VmAHilnAevbuUlQijiRd6KVoIEJldx2+oK0vsXQnYnAF4T/RdZO3BStPVdSW3KnIa2TNqsmMJHqG2g==
dependencies:
"@lexical/utils" "0.6.4"
"@lexical/markdown@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/markdown/-/markdown-0.6.4.tgz#884a91028ee303e3446b817c3d8b284c9038b808"
integrity sha512-9kg+BsP4ePCztrK7UYW8a+8ad1/h/OLziJkMZkl3YAkfhJudkHoj4ljCTJZcLuXHtVXmvLZhyGZktitcJImnOg==
dependencies:
"@lexical/code" "0.6.4"
"@lexical/link" "0.6.4"
"@lexical/list" "0.6.4"
"@lexical/rich-text" "0.6.4"
"@lexical/text" "0.6.4"
"@lexical/utils" "0.6.4"
"@lexical/offset@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/offset/-/offset-0.6.4.tgz#06fdf49e8e18135e82c9925c6b168e7e012a5420"
integrity sha512-IdB1GL5yRRDQPOedXG4zT7opdjHGx+7DqLKOQwcSMWo/XprnJxIq8zpFew3XCp/nBKp+hyUsdf98vmEaG3XctQ==
"@lexical/overflow@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/overflow/-/overflow-0.6.4.tgz#0f0139a54916d3ff8e0a6fadb55804a45d2afa5e"
integrity sha512-Mdcpi2PyWTaDpEfTBAGSEX+5E0v/okSTLoIg1eDO3Q3VgGEkr5++FrJH8rVGIl6KIJeAa1WVM0vcu/W4O6y5ng==
"@lexical/plain-text@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/plain-text/-/plain-text-0.6.4.tgz#003e8f712d49e117d55a8add31516277757b384a"
integrity sha512-VB1zKqyef+3Vs8SVwob1HvCGRRfn4bypyKUyk93kk6LQDpjiGC6Go2OyuPX0EuJeFnQBYmYd3Bi205k/nVjfZA==
"@lexical/react@^0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/react/-/react-0.6.4.tgz#80e524701ec83797fd66b89d1bc04c63afc0d9fc"
integrity sha512-KAbNF/H5TzwCBFe5zuxz9ZSxj6a9ol8a2JkhACriO4HqWM0mURsxrXU8g3hySFpp4W7tdjpGSWsHLTdnaovHzw==
dependencies:
"@lexical/clipboard" "0.6.4"
"@lexical/code" "0.6.4"
"@lexical/dragon" "0.6.4"
"@lexical/hashtag" "0.6.4"
"@lexical/history" "0.6.4"
"@lexical/link" "0.6.4"
"@lexical/list" "0.6.4"
"@lexical/mark" "0.6.4"
"@lexical/markdown" "0.6.4"
"@lexical/overflow" "0.6.4"
"@lexical/plain-text" "0.6.4"
"@lexical/rich-text" "0.6.4"
"@lexical/selection" "0.6.4"
"@lexical/table" "0.6.4"
"@lexical/text" "0.6.4"
"@lexical/utils" "0.6.4"
"@lexical/yjs" "0.6.4"
react-error-boundary "^3.1.4"
"@lexical/rich-text@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/rich-text/-/rich-text-0.6.4.tgz#d00e2621d0113ed842178f505618060cde2f2b0f"
integrity sha512-GUTAEUPmSKzL1kldvdHqM9IgiAJC1qfMeDQFyUS2xwWKQnid0nVeUZXNxyBwxZLyOcyDkx5dXp9YiEO6X4x+TQ==
"@lexical/selection@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/selection/-/selection-0.6.4.tgz#2a3c8537c1e9e8bf492ccd6fbaafcfb02fea231a"
integrity sha512-dmrIQCQJOKARS7VRyE9WEKRaqP8SG9Xtzm8Bsk6+P0up1yWzlUvww+2INKr0bUUeQmI7DJxo5PX68qcoLeTAUg==
"@lexical/table@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/table/-/table-0.6.4.tgz#a07b642899e40c5981ab81b6ac541944bfef19ed"
integrity sha512-PjmRd5w5Gy4ht4i3IpQag/bsOi5V3/Fd0RQaD2gFaTFCh49NsYWrJcV6K1tH7xpO4PDJFibC5At2EiVKwhMyFA==
dependencies:
"@lexical/utils" "0.6.4"
"@lexical/text@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/text/-/text-0.6.4.tgz#49267e7a9395720b6361ca12631e0370c118c03a"
integrity sha512-gCANONCi3J2zf+yxv2CPEj2rsxpUBgQuR4TymGjsoVFsHqjRc3qHF5lNlbpWjPL5bJDSHFJySwn4/P20GNWggg==
"@lexical/utils@0.6.4", "@lexical/utils@^0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/utils/-/utils-0.6.4.tgz#7e1d79dd112efbcc048088714a3dc8e403b5aee5"
integrity sha512-JPFC+V65Eu+YTfThzV+LEGWj/QXre91Yq6c+P3VMWNfck4ZC1Enc6v7ntP9UI7FYFyM5NfwvWTzjUGEOYGajwg==
dependencies:
"@lexical/list" "0.6.4"
"@lexical/table" "0.6.4"
"@lexical/yjs@0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@lexical/yjs/-/yjs-0.6.4.tgz#0773a7a7abbd3d32bb16e7ff84d9f89ee2284996"
integrity sha512-QlhB/gIB+/3d9nP5zgnR8oJZ++14vw1VxgjBjXs1pW+32ho4ET4Wa+E0OHuVSwozEhJsC4wT1Q1C38oX+yRHdQ==
dependencies:
"@lexical/offset" "0.6.4"
"@next/env@12.2.2": "@next/env@12.2.2":
version "12.2.2" version "12.2.2"
resolved "https://registry.yarnpkg.com/@next/env/-/env-12.2.2.tgz#cc1a0a445bd254499e30f632968c03192455f4cc" resolved "https://registry.yarnpkg.com/@next/env/-/env-12.2.2.tgz#cc1a0a445bd254499e30f632968c03192455f4cc"
@ -1913,6 +2066,11 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
prismjs@^1.27.0:
version "1.29.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1: prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1" version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@ -2116,6 +2274,13 @@ react-dropzone@^14.2.3:
file-selector "^0.6.0" file-selector "^0.6.0"
prop-types "^15.8.1" prop-types "^15.8.1"
react-error-boundary@^3.1.4:
version "3.1.4"
resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
dependencies:
"@babel/runtime" "^7.12.5"
react-hook-form@^7.38.0: react-hook-form@^7.38.0:
version "7.39.7" version "7.39.7"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.39.7.tgz#8eabf2dbb9fce5baccfa60f401f6ef99c4e17fb4" resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.39.7.tgz#8eabf2dbb9fce5baccfa60f401f6ef99c4e17fb4"