32 | Cancel
33 | Action
34 |
35 |
31 | {[DefaultDescription, InitDescription, ReadOnly].map(
32 | (DescriptionStory, index) => (
33 |
37 | ),
38 | };
39 |
40 | export const DefaultDescription: Story = {};
41 |
42 | export const InitDescription: Story = {
43 | args: {
44 | initDescription: "Default description",
45 | },
46 | };
47 |
48 | export const ReadOnly: Story = {
49 | args: {
50 | initDescription: "Read only description",
51 | readOnly: true,
52 | },
53 | };
54 |
--------------------------------------------------------------------------------
/src/app/components/description/description.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { TextareaAutosize } from "@app/components/textarea-autosize";
3 |
4 | export const Description = ({
5 | initDescription = "",
6 | readOnly,
7 | }: DescriptionProps): JSX.Element => {
8 | const [description, setDescription] = useState
16 |
24 | );
25 | };
26 |
27 | interface DescriptionProps {
28 | initDescription?: string;
29 | readOnly?: boolean;
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/components/description/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./description";
2 |
--------------------------------------------------------------------------------
/src/app/components/dialog/dialog.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 | import * as Dialog from "./dialog";
3 | import { Button } from "../button";
4 |
5 | const meta: Meta
30 |
31 |
32 |
35 |
36 |
37 | 32 | Press Shift + S to save 33 |
34 | ), 35 | }; 36 | -------------------------------------------------------------------------------- /src/app/components/kbd-placeholder/kbd-placeholder.tsx: -------------------------------------------------------------------------------- 1 | export const Kbd = ({ children }: Props): JSX.Element => { 2 | return ( 3 | 7 | {children} 8 | 9 | ); 10 | }; 11 | 12 | interface Props { 13 | children: string; 14 | } 15 | -------------------------------------------------------------------------------- /src/app/components/priority-icon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./priority-icon"; 2 | -------------------------------------------------------------------------------- /src/app/components/priority-icon/priority-icon.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta, StoryObj } from "@storybook/react"; 2 | import { PriorityId } from "@domain/priority"; 3 | import { PriorityIcon } from "./priority-icon"; 4 | 5 | const meta: Meta
35 |
36 | {sizes.map((size) => (
37 | {size}px
38 | ))}
39 | {priorities.map((priority) => (
40 | <>
41 | {priority}
42 | {sizes.map((size) => (
43 |
52 | ),
53 | };
54 |
55 | export const Low: Story = {
56 | args: {
57 | priority: "low",
58 | },
59 | };
60 |
61 | export const Medium: Story = {
62 | args: {
63 | priority: "medium",
64 | },
65 | };
66 |
67 | export const High: Story = {
68 | args: {
69 | priority: "high",
70 | },
71 | };
72 |
73 | export const Size24: Story = {
74 | args: {
75 | priority: "low",
76 | size: 24,
77 | },
78 | };
79 |
80 | export const Size32: Story = {
81 | args: {
82 | priority: "low",
83 | size: 32,
84 | },
85 | };
86 |
87 | export const Size48: Story = {
88 | args: {
89 | priority: "low",
90 | size: 48,
91 | },
92 | };
93 |
--------------------------------------------------------------------------------
/src/app/components/priority-icon/priority-icon.tsx:
--------------------------------------------------------------------------------
1 | import cx from "classix";
2 | import { HiFlag } from "react-icons/hi";
3 | import { PriorityId } from "@domain/priority";
4 |
5 | export const PriorityIcon = ({
6 | priority,
7 | size = 18,
8 | }: PriorityIconProps): JSX.Element => (
9 |
17 | Height: {height}px
35 |
39 |
40 | {Array.from({ length: 100 }, (_, index) => (
41 |
52 |
53 |
54 | ),
55 | };
56 |
--------------------------------------------------------------------------------
/src/app/components/scroll-area/scroll-area.tsx:
--------------------------------------------------------------------------------
1 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
2 | import cx from "classix";
3 |
4 | export const ScrollArea = ({
5 | className,
6 | children,
7 | }: ScrollAreaProps): JSX.Element => (
8 |
48 | Scroll item content
49 |
50 | ))}
51 |
43 |
45 |
45 |
60 |
70 | );
71 | };
72 |
73 | interface TitleProps {
74 | name: string;
75 | value: string;
76 | setValue: (value: string) => void;
77 | placeholder: string;
78 | autofocus?: boolean;
79 | readOnly?: boolean;
80 | textareaClassName?: string;
81 | onFocus?: () => void;
82 | onBlur?: () => void;
83 | }
84 |
--------------------------------------------------------------------------------
/src/app/components/title/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./title";
2 |
--------------------------------------------------------------------------------
/src/app/components/title/title.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 | import { Title } from "./title";
3 |
4 | const meta: Meta67 | {(valueIsNotOnlySpaces() && value) || placeholder} 68 |
69 |
43 | {[DefaultTitle, ReadOnly, Error, CustomMaxLength].map(
44 | (TitleStory, index) => (
45 |
49 | ),
50 | };
51 |
52 | export const DefaultTitle: Story = {};
53 |
54 | export const InitTitle: Story = {
55 | args: {
56 | initTitle: "Default title",
57 | },
58 | };
59 |
60 | export const ReadOnly: Story = {
61 | args: {
62 | initTitle: "Read only title",
63 | readOnly: true,
64 | },
65 | };
66 |
67 | export const Error: Story = {
68 | args: {
69 | placeholder: "Error title",
70 | error: "Title is required",
71 | },
72 | };
73 |
74 | export const CustomMaxLength: Story = {
75 | args: {
76 | placeholder: "Custom max length",
77 | maxLength: 10,
78 | },
79 | };
80 |
--------------------------------------------------------------------------------
/src/app/components/title/title.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import cx from "classix";
3 | import { TextareaAutosize } from "@app/components/textarea-autosize";
4 | import { textAreOnlySpaces } from "@utils/text-are-only-spaces";
5 |
6 | const DEFAULT_MAX_LENGTH = 80;
7 |
8 | export const Title = ({
9 | initTitle = "",
10 | readOnly,
11 | maxLength = DEFAULT_MAX_LENGTH,
12 | error,
13 | placeholder = "Write the title",
14 | }: TitleProps): JSX.Element => {
15 | const [title, setTitle] = useState
36 |
67 | );
68 | };
69 |
70 | interface TitleProps {
71 | initTitle?: string;
72 | readOnly?: boolean;
73 | maxLength?: number;
74 | error?: string;
75 | placeholder?: string;
76 | }
77 |
--------------------------------------------------------------------------------
/src/app/components/toast/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./toast";
2 |
--------------------------------------------------------------------------------
/src/app/components/toast/toast.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 | import { toast } from "react-toastify";
3 | import { Theme } from "@app/store/theme.store";
4 | import { Button } from "../button";
5 | import { Toast } from "./toast";
6 | import "react-toastify/dist/ReactToastify.css";
7 |
8 | const meta: Meta
17 |
20 | ),
21 | ],
22 | };
23 |
24 | export default meta;
25 | type Story = StoryObj
32 | {[SuccessAlert, WarningAlert, DangerAlert, InfoAlert].map(
33 | (ComponentAlert, index) => (
34 |
38 | ),
39 | };
40 |
41 | const SuccessAlert = () => (
42 |
49 | );
50 | export const Success: Story = {
51 | render: () =>
19 | Hover over me!
20 |
21 |
21 |
40 | );
41 | };
42 |
43 | interface TooltipProps {
44 | title: string;
45 | show?: boolean;
46 | className?: string;
47 | children: JSX.Element;
48 | }
49 |
--------------------------------------------------------------------------------
/src/app/components/user-avatar/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./user-avatar";
2 |
--------------------------------------------------------------------------------
/src/app/components/user-avatar/user-avatar.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 | import { usersMock } from "@domain/user";
3 | import { UserAvatar } from "./user-avatar";
4 |
5 | const meta: Meta
22 | {children}
23 |
24 |
30 |
39 |
36 | {title}
37 |
38 |
49 | {[Image, Fallback, Tooltip, MediumSize, LargeSize].map(
50 | (UserAvatarStory, index) => (
51 |
55 | ),
56 | };
57 |
58 | export const Image: Story = {
59 | args: {
60 | image: userImage,
61 | },
62 | };
63 |
64 | export const Fallback: Story = {
65 | args: {
66 | image: undefined,
67 | color: "#dae3f9",
68 | },
69 | };
70 |
71 | export const Tooltip: Story = {
72 | args: {
73 | image: userImage,
74 | tooltip: true,
75 | },
76 | };
77 |
78 | export const MediumSize: Story = {
79 | args: {
80 | image: userImage,
81 | size: 48,
82 | },
83 | };
84 |
85 | export const LargeSize: Story = {
86 | args: {
87 | image: userImage,
88 | size: 82,
89 | },
90 | };
91 |
--------------------------------------------------------------------------------
/src/app/components/user-avatar/user-avatar.tsx:
--------------------------------------------------------------------------------
1 | import * as Avatar from "@radix-ui/react-avatar";
2 | import { User, getRandomPastelColor } from "@domain/user";
3 | import { Tooltip } from "@app/components/tooltip";
4 |
5 | export const UserAvatar = ({
6 | name,
7 | image,
8 | color,
9 | size = 36,
10 | tooltip = false,
11 | }: UserAvatarProps): JSX.Element => {
12 | const imageMinName = image?.replace(".webp", "-min.webp");
13 | const imageSrc = size > 80 ? `/avatars/${image}` : `/avatars/${imageMinName}`;
14 | const imageSize = {
15 | width: `${size}px`,
16 | minWidth: `${size}px`,
17 | height: `${size}px`,
18 | };
19 | const acronym = name
20 | .split(" ")
21 | .slice(0, 2)
22 | .map((word) => word[0].toUpperCase())
23 | .join("");
24 |
25 | return (
26 | NOT FOUNDDDD
;
4 | }
5 |
--------------------------------------------------------------------------------
/src/app/routes/__main.tsx:
--------------------------------------------------------------------------------
1 | import type { LoaderFunction } from "@remix-run/node";
2 | import { json, redirect } from "@remix-run/node";
3 | import { useLoaderData } from "@remix-run/react";
4 | import { User } from "@domain/user";
5 | import { getUserSession } from "@app/session-storage/user-storage.server";
6 | import { getUser } from "@infrastructure/db/user";
7 | import { MainLayout } from "@app/ui/main";
8 |
9 | type LoaderData = {
10 | user: User;
11 | };
12 |
13 | export const loader: LoaderFunction = async ({ request }) => {
14 | const userSession = await getUserSession(request);
15 | const userId = userSession.getUser();
16 |
17 | if (!userId) {
18 | return redirect("/login");
19 | }
20 |
21 | const user = await getUser(userId);
22 |
23 | if (!user) {
24 | throw new Response("Not Found", {
25 | status: 404,
26 | });
27 | }
28 |
29 | return json
25 |
27 | );
28 | }
29 |
30 | // This will never render
31 | export default function Error404Route() {
32 | return null;
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/routes/__main/projects.$projectId/analytics.tsx:
--------------------------------------------------------------------------------
1 | import type { LoaderFunction, V2_MetaFunction } from "@remix-run/node";
2 | import { json, redirect } from "@remix-run/node";
3 | import invariant from "tiny-invariant";
4 | import { Project, ProjectId } from "@domain/project";
5 | import { getProject } from "@infrastructure/db/project";
6 | import { AnalyticsView } from "@app/ui/main/project/analytics";
7 | import { Error500 } from "@app/components/error-500";
8 | import { formatTags, formatProperties } from "@utils/meta";
9 |
10 | export const meta: V2_MetaFunction
79 |
81 | );
82 | }
83 |
84 | export default function AnalyticsRoute() {
85 | return
37 |
39 | );
40 | }
41 |
42 | export default function Error500Route() {
43 | return This will never show because of the server error 500
;
44 | }
45 |
46 | // -^-
47 | // O
48 | // /|\ -> Felicidad
49 | // / \
50 |
--------------------------------------------------------------------------------
/src/app/routes/__main/projects.tsx:
--------------------------------------------------------------------------------
1 | import type {
2 | LoaderFunction,
3 | ActionFunction,
4 | V2_MetaFunction,
5 | } from "@remix-run/node";
6 | import { json, redirect } from "@remix-run/node";
7 | import { useLoaderData } from "@remix-run/react";
8 | import { ProjectId, ProjectSummary } from "@domain/project";
9 | import { getProjectsSummary, deleteProject } from "@infrastructure/db/project";
10 | import { getUserSession } from "@app/session-storage";
11 | import { ProjectsView } from "@app/ui/main/projects";
12 | import { formatTags, formatProperties } from "@utils/meta";
13 |
14 | export const meta: V2_MetaFunction = () => {
15 | const title = "Jira clone - Projects";
16 | const description =
17 | "See all your projects in one place. Create new ones and assigne team members.";
18 | const image = "https://jira-clone.fly.dev/static/images/readme/projects.png";
19 | const url = "https://jira-clone.fly.dev/projects";
20 |
21 | const tags = {
22 | charset: "utf-8",
23 | viewport: "width=device-width,initial-scale=1",
24 | title: title,
25 | description: description,
26 | "twitter:card": "summary_large_image",
27 | "twitter:site": url,
28 | "twitter:domain": "jira-clone.fly.dev",
29 | "twitter:title": title,
30 | "twitter:description": description,
31 | "twitter:image": image,
32 | "twitter:image:width": "1297",
33 | "twitter:image:height": "635",
34 | "twitter:image:alt": title,
35 | "twitter:creator": "@Jack_DanielSG",
36 | "twitter:creator:id": "Jack_DanielSG",
37 | };
38 |
39 | const properties = {
40 | "og:url": url,
41 | "og:type": "website",
42 | "og:site_name": title,
43 | "og:title": title,
44 | "og:description": description,
45 | "og:image": image,
46 | };
47 |
48 | return [{ title }, ...formatTags(tags), ...formatProperties(properties)];
49 | };
50 |
51 | type LoaderData = {
52 | projectsSummary: ProjectSummary[];
53 | };
54 |
55 | export const loader: LoaderFunction = async ({ request }) => {
56 | const userSession = await getUserSession(request);
57 | const userId = userSession.getUser();
58 |
59 | if (!userId) {
60 | return redirect("/login");
61 | }
62 |
63 | const projectsSummary = await getProjectsSummary(userId);
64 |
65 | return json
86 |
91 | );
92 | }
93 |
94 | export default function ProjectsRoute() {
95 | const { projectsSummary } = useLoaderData() as LoaderData;
96 | return /projects ERROR
87 | 88 | Navigate to home 89 | 90 |Oops... You should not see this.
;
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/routes/action/set-theme.tsx:
--------------------------------------------------------------------------------
1 | import type { ActionFunction } from "@remix-run/node";
2 | import { json, redirect } from "@remix-run/node";
3 | import { Theme, Preference } from "@app/store/theme.store";
4 | import { getThemeSession } from "@app/session-storage/theme-storage.server";
5 |
6 | export const loader = () => redirect("/", { status: 404 });
7 |
8 | export const action: ActionFunction = async ({ request }) => {
9 | const form = await request.formData();
10 | const theme = form.get("theme") as Theme;
11 | const preference = form.get("preference") as Preference;
12 | const themeSession = await getThemeSession(request);
13 | themeSession.setTheme({ theme, preference });
14 |
15 | return json(
16 | { success: true },
17 | {
18 | headers: { "Set-Cookie": await themeSession.commit() },
19 | }
20 | );
21 | };
22 |
23 | export default function SetThemeAction() {
24 | return Oops... You should not see this.
;
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/routes/index.tsx:
--------------------------------------------------------------------------------
1 | import { LoaderFunction, redirect } from "@remix-run/node";
2 | import { Error404 } from "@app/components/error-404";
3 |
4 | export const loader: LoaderFunction = async ({ request }) => {
5 | const url = new URL(request.url);
6 | if (url.pathname === "/") {
7 | return redirect("projects");
8 | }
9 | return null;
10 | };
11 |
12 | // Currently there is no landing. Just redirecting to /projects
13 | export default function IndexRoute() {
14 | return (
15 |
16 |
18 | );
19 | }
20 |
21 | export function CatchBoundary() {
22 | return (
23 | LANDING
17 |
24 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/routes/login.spec.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from "@playwright/test";
2 |
3 | test("has title", async ({ page }) => {
4 | await page.goto("/login");
5 | await expect(page).toHaveTitle(/Jira clone - Login/);
6 | });
7 |
8 | test("page renders", async ({ page }) => {
9 | await page.goto("/login");
10 | await expect(page.getByRole("heading", { name: "Select login user" })).toBeVisible();
11 | });
12 |
13 | test("login and redirect", async ({ page }) => {
14 | await page.goto("/login");
15 | await page.getByRole("button", { name: "Login" }).click();
16 |
17 | await expect(page).toHaveURL(/.*projects/);
18 | });
19 |
--------------------------------------------------------------------------------
/src/app/routes/login.tsx:
--------------------------------------------------------------------------------
1 | import type {
2 | LoaderFunction,
3 | ActionFunction,
4 | V2_MetaFunction,
5 | } from "@remix-run/node";
6 | import { json, redirect } from "@remix-run/node";
7 | import { useLoaderData } from "@remix-run/react";
8 | import { User } from "@domain/user";
9 | import { getUsers } from "@infrastructure/db/user";
10 | import { getUserSession } from "@app/session-storage";
11 | import { LoginView } from "@app/ui/login";
12 | import { formatTags, formatProperties } from "@utils/meta";
13 |
14 | export const meta: V2_MetaFunction = () => {
15 | const title = "Jira clone - Login";
16 | const description =
17 | "Select your user profile and login to see your projects.";
18 | const image = "https://jira-clone.fly.dev/static/images/readme/projects.png";
19 | const url = "https://jira-clone.fly.dev/login";
20 |
21 | const tags = {
22 | charset: "utf-8",
23 | viewport: "width=device-width,initial-scale=1",
24 | title: title,
25 | description: description,
26 | "twitter:card": "summary_large_image",
27 | "twitter:site": url,
28 | "twitter:domain": "jira-clone.fly.dev",
29 | "twitter:title": title,
30 | "twitter:description": description,
31 | "twitter:image": image,
32 | "twitter:image:width": "1297",
33 | "twitter:image:height": "635",
34 | "twitter:image:alt": title,
35 | "twitter:creator": "@Jack_DanielSG",
36 | "twitter:creator:id": "Jack_DanielSG",
37 | };
38 |
39 | const properties = {
40 | "og:url": url,
41 | "og:type": "website",
42 | "og:site_name": title,
43 | "og:title": title,
44 | "og:description": description,
45 | "og:image": image,
46 | };
47 |
48 | return [{ title }, ...formatTags(tags), ...formatProperties(properties)];
49 | };
50 |
51 | type LoaderData = {
52 | users: User[];
53 | };
54 |
55 | export const loader: LoaderFunction = async () => {
56 | const users = await getUsers();
57 | return json
18 |
20 |
21 |
72 | );
73 | };
74 |
75 | interface Props {
76 | users: User[];
77 | }
78 |
--------------------------------------------------------------------------------
/src/app/ui/main/header/header.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 | import { withMainContext, withRemixStub } from "@app/stories/utils";
3 | import { Header } from "./header";
4 |
5 | const meta: Meta22 | Select login user 23 |
24 |25 | There is no authentication involved. You can login with any user you 26 | want! Keep in mind you can only access the projects the user is member 27 | of. Try to create issues and comments with different users to see how it 28 | reflects in the UI and database. You can logout on the user avatar. 29 |
30 | 71 |{withRemixStub(withMainContext(Story))}
14 | ),
15 | ],
16 | };
17 |
18 | export default meta;
19 | type Story = StoryObj
21 | Jira Clone
22 |
23 |
10 |
13 | Comming soon...
;
10 | };
11 |
--------------------------------------------------------------------------------
/src/app/ui/main/project/analytics/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./analytics.view";
2 |
--------------------------------------------------------------------------------
/src/app/ui/main/project/board/avatar-list.tsx:
--------------------------------------------------------------------------------
1 | import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
2 | import { User } from "@domain/user";
3 | import { UserAvatar } from "@app/components/user-avatar";
4 | import { ScrollArea } from "@app/components/scroll-area";
5 |
6 | const AVATAR_SIZE = 40;
7 | const MAX_DISPLAY_USERS = 4;
8 |
9 | export const UserAvatarList = ({ users }: Props): JSX.Element => {
10 | const displayUsers = users.slice(0, MAX_DISPLAY_USERS);
11 |
12 | return (
13 |
14 | {displayUsers.map((user, index) => (
15 |
19 |
21 | ))}
22 | {users.length > MAX_DISPLAY_USERS &&
33 |
34 |
41 | {users.length - MAX_DISPLAY_USERS}+
42 |
43 |
44 |
45 | {users.map((user) => (
46 |
50 |
53 | ))}
54 |
55 |
57 |
58 |
59 | );
60 |
61 | interface MoreUsersProps {
62 | users: User[];
63 | }
64 |
--------------------------------------------------------------------------------
/src/app/ui/main/project/board/category-column/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./category-column";
2 |
--------------------------------------------------------------------------------
/src/app/ui/main/project/board/category-column/issue-card/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./issue-card";
2 |
--------------------------------------------------------------------------------
/src/app/ui/main/project/board/category-column/issue-card/issue-card.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 | import { withRemixStub } from "@app/stories/utils";
3 | import { IssueCardContent } from "./issue-card";
4 |
5 | const meta: Meta
47 |
49 | ),
50 | ],
51 | };
52 |
53 | export default meta;
54 | type Story = StoryObj
59 | {[Standard, LongName, Submitting].map(({ args }, index) => (
60 |
70 | ),
71 | };
72 |
73 | export const Standard: Story = {
74 | args: {
75 | link: "https://google.com",
76 | name: "Issue 1",
77 | priorityId: "high",
78 | idPrefix: "1234",
79 | isSubmitting: false,
80 | },
81 | };
82 |
83 | export const LongName: Story = {
84 | args: {
85 | link: "https://google.com",
86 | name: "This is a very long issue name that should be truncated",
87 | priorityId: "high",
88 | idPrefix: "1234",
89 | isSubmitting: false,
90 | },
91 | };
92 |
93 | export const Submitting: Story = {
94 | args: {
95 | link: "https://google.com",
96 | name: "Submitting issue",
97 | priorityId: "low",
98 | idPrefix: "1234",
99 | isSubmitting: true,
100 | },
101 | };
102 |
--------------------------------------------------------------------------------
/src/app/ui/main/project/board/category-column/issue-card/issue-card.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { Link } from "@remix-run/react";
3 | import cx from "classix";
4 | import { useDrag } from "react-dnd";
5 | import { CategoryId } from "@domain/category";
6 | import { Issue, IssueId } from "@domain/issue";
7 | import { PriorityId } from "@domain/priority";
8 | import { TaskIcon } from "@app/components/icons";
9 | import { PriorityIcon } from "@app/components/priority-icon";
10 | import { useSortBy } from "@app/hooks/useSortBy";
11 |
12 | export interface DropItem {
13 | issueId: IssueId;
14 | categoryId: CategoryId;
15 | }
16 |
17 | export const IssueCard = ({
18 | issue,
19 | categoryId,
20 | isSubmitting,
21 | handleDragging,
22 | }: Props): JSX.Element => {
23 | const issueIdPrefix = issue.id.split("-")[0];
24 | const sortBy = useSortBy();
25 | const issueLink = sortBy
26 | ? `issue/${issue.id}?sortBy=${sortBy}`
27 | : `issue/${issue.id}`;
28 |
29 | type Collected = { isDragging: boolean };
30 |
31 | const [{ isDragging }, dragRef] = useDrag
51 |
59 | );
60 | };
61 |
62 | interface Props {
63 | issue: Issue;
64 | categoryId: CategoryId;
65 | isSubmitting: boolean;
66 | handleDragging: (isDragging: boolean) => void;
67 | }
68 |
69 | export const IssueCardContent = ({
70 | link,
71 | name,
72 | priorityId,
73 | idPrefix,
74 | isSubmitting,
75 | }: IssueCardContentProps): JSX.Element => (
76 |
83 |
84 | <>
85 |
98 | );
99 |
100 | interface IssueCardContentProps {
101 | link: string;
102 | name: string;
103 | priorityId: PriorityId;
104 | idPrefix: string;
105 | isSubmitting: boolean;
106 | }
107 |
108 | export const DRAG_ISSUE_CARD = "ISSUE_CARD";
109 |
--------------------------------------------------------------------------------
/src/app/ui/main/project/board/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./board.view";
2 |
--------------------------------------------------------------------------------
/src/app/ui/main/project/board/issue-panel/comment/create-comment.tsx:
--------------------------------------------------------------------------------
1 | import { v4 as uuid } from "uuid";
2 | import { Comment } from "@domain/comment";
3 | import { useUserStore } from "@app/store/user.store";
4 | import { UserAvatar } from "@app/components/user-avatar";
5 | import { EditBox } from "./edit-box";
6 |
7 | export const CreateComment = ({
8 | addComment,
9 | }: CreateCommentProps): JSX.Element => {
10 | const { user } = useUserStore();
11 |
12 | const save = (message: string) => {
13 | addComment({
14 | id: "temp-" + uuid(),
15 | user,
16 | message,
17 | createdAt: Date.now(),
18 | updatedAt: Date.now(),
19 | });
20 | };
21 |
22 | return (
23 | {name}
86 |
87 |
88 |
95 |
96 |
97 |
24 |
27 | );
28 | };
29 |
30 | interface CreateCommentProps {
31 | addComment: (comment: Comment) => void;
32 | }
33 |
--------------------------------------------------------------------------------
/src/app/ui/main/project/board/issue-panel/comment/edit-box.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import cx from "classix";
3 | import { TextareaAutosize } from "@app/components/textarea-autosize";
4 | import { Button } from "@app/components/button";
5 | import { textAreOnlySpaces } from "@utils/text-are-only-spaces";
6 |
7 | export const EditBox = ({
8 | defaultMessage,
9 | autofocus,
10 | save,
11 | cancel,
12 | }: EditBoxProps): JSX.Element => {
13 | const [message, setMessage] = useState
49 |
87 | );
88 | };
89 |
90 | interface EditBoxProps {
91 | defaultMessage: string;
92 | autofocus?: boolean;
93 | save: (commentText: string) => void;
94 | cancel?: () => void;
95 | }
96 |
--------------------------------------------------------------------------------
/src/app/ui/main/project/board/issue-panel/created-updated-at.tsx:
--------------------------------------------------------------------------------
1 | import { Issue } from "@domain/issue";
2 | import { formatDateTime } from "@utils/formatDateTime";
3 |
4 | export const CreatedUpdatedAt = ({ issue }: Props): JSX.Element => {
5 | const values = [
6 | { label: "Created at:", value: issue?.createdAt },
7 | { label: "Updated at:", value: issue?.updatedAt },
8 | ];
9 |
10 | return (
11 |
68 |
76 |
85 |
86 | |
16 | {label} 17 | |
18 |
19 | 20 | {value ? formatDateTime(value) : "Just now"} 21 | 22 | |
23 |
18 |
19 |
20 |
33 | );
34 | };
35 |
36 | interface PanelHeaderIssueProps {
37 | id: IssueId;
38 | deleteDisabled?: boolean;
39 | }
40 |
41 | const DeleteIssueModalDialog = ({
42 | disabled,
43 | }: DeleteIssueModalDialogProps): JSX.Element => {
44 | return (
45 |
31 |
33 |
25 |
27 |
25 |
39 |
40 | {renderIcon()}
41 |
42 |
43 | );
44 | };
45 |
46 | const iconBaseClass = cx(
47 | "flex border-none justify-center items-center font-icon z-10"
48 | );
49 |
50 | const SearchIcon = (): JSX.Element => (
51 |
52 |
23 |
42 | );
43 | };
44 |
45 | interface Props {
46 | name: string;
47 | description?: string;
48 | image: string;
49 | }
50 |
--------------------------------------------------------------------------------
/src/app/ui/main/project/sidebar/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./sidebar";
2 |
--------------------------------------------------------------------------------
/src/app/ui/main/project/sidebar/sidebar.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 | import { projectMock1 } from "@domain/project";
3 | import { withRemixStub } from "@app/stories/utils";
4 | import { Sidebar } from "./sidebar";
5 |
6 | const meta: Meta
29 |
30 |
31 | Projects
32 |
33 | /
34 | {name}
35 |
39 |
41 | 36 | {sectionTitle} 37 |
38 |
40 |
46 | ),
47 | };
48 |
--------------------------------------------------------------------------------
/src/app/ui/main/projects/create-project-panel/create-project-panel-header.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "@remix-run/react";
2 | import { IoCloseOutline } from "react-icons/io5";
3 | import { IssueId } from "@domain/issue";
4 |
5 | export const CreateProjectPanelHeader = ({
6 | id,
7 | }: PanelHeaderProjectProps): JSX.Element => {
8 | // TODO: Add edit mode
9 | return (
10 |
11 |
12 | {id}
13 |
14 |
18 |
21 | );
22 | };
23 |
24 | interface PanelHeaderProjectProps {
25 | id: IssueId;
26 | }
27 |
--------------------------------------------------------------------------------
/src/app/ui/main/projects/create-project-panel/create-project-panel.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from "@storybook/react";
2 | import { projectMock1 } from "@domain/project";
3 | import { usersMock } from "@domain/user";
4 | import { withRemixStub, withMainContext } from "@app/stories/utils";
5 | import { CreateProjectPanelView } from "./create-project-panel.view";
6 |
7 | const meta: Meta
40 | {[Standard, WithLongDescription, NonDeletable].map(({ args }, index) => (
41 |
44 | ),
45 | };
46 |
47 | export const Standard: Story = {
48 | args: {
49 | project: mockProjectSummary,
50 | },
51 | };
52 |
53 | export const WithLongDescription: Story = {
54 | args: {
55 | project: {
56 | ...mockProjectSummary,
57 | name: "Project 2",
58 | description:
59 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliqu",
60 | },
61 | },
62 | };
63 |
64 | export const NonDeletable: Story = {
65 | args: {
66 | project: projectToProjectSummary(projectMock1),
67 | },
68 | };
69 |
--------------------------------------------------------------------------------
/src/app/ui/main/projects/project-card/project-card.tsx:
--------------------------------------------------------------------------------
1 | import { Link, Form } from "@remix-run/react";
2 | import { MdDeleteOutline } from "react-icons/md";
3 | import cx from "classix";
4 | import { ProjectId, ProjectSummary, projectsMock } from "@domain/project";
5 | import * as AlertDialog from "@app/components/alert-dialog";
6 |
7 | const defaultProjectsIds: ProjectId[] = projectsMock.map(
8 | (projectMock) => projectMock.id
9 | );
10 |
11 | export const ProjectCard = ({ project }: Props): JSX.Element => {
12 | const isDefaultProject = defaultProjectsIds.includes(project.id);
13 |
14 | return (
15 |
16 |
23 | 
30 |
38 |
53 |
56 |
57 |
58 |
60 | Delete issue?
61 |
62 | This action is permanent and cannot be undone. Are you sure you
63 | want to remove this issue completely?
64 |
65 |
82 |
83 |
84 |
85 |
86 | );
87 | };
88 |
89 | interface Props {
90 | project: ProjectSummary;
91 | }
92 |
--------------------------------------------------------------------------------
/src/app/ui/main/projects/projects.view.tsx:
--------------------------------------------------------------------------------
1 | import { Link, Outlet } from "@remix-run/react";
2 | import { AiOutlinePlus } from "react-icons/ai";
3 | import { ProjectSummary } from "@domain/project";
4 | import { Button } from "@app/components/button";
5 | import { ProjectCard } from "./project-card";
6 |
7 | export const ProjectsView = ({
8 | projectsSummary,
9 | }: ProjectsViewProps): JSX.Element => {
10 | return (
11 |
31 |
36 |
37 | {project.name}
32 |33 | {project.description} 34 |
35 |
12 |
30 | );
31 | };
32 |
33 | interface ProjectsViewProps {
34 | projectsSummary: ProjectSummary[];
35 | }
36 |
--------------------------------------------------------------------------------
/src/domain/category/category.mock.ts:
--------------------------------------------------------------------------------
1 | import { Category, categoryTypes, categoryTypeDict } from "@domain/category";
2 | import {
3 | todoIssuesMock1,
4 | inProgressIssuesMock1,
5 | doneIssuesMock1,
6 | todoIssuesMock2,
7 | inProgressIssuesMock2,
8 | doneIssuesMock2,
9 | } from "@domain/issue";
10 |
11 | const createdAt = new Date("2022-01-01").valueOf();
12 | const updatedAt = new Date("2022-01-01").valueOf();
13 |
14 | const ids1 = [
15 | "1e8877a7-91dc-46de-bce0-f077ad922fc8",
16 | "46964edd-62e0-4c2f-90bf-e275ee087433",
17 | "c1278ad3-29b3-422c-8219-54bb66b26ff4",
18 | ];
19 | const issuesMock1 = [todoIssuesMock1, inProgressIssuesMock1, doneIssuesMock1];
20 |
21 | const ids2 = [
22 | "bbb348d5-ef02-447c-94f5-5fbf1ceeac07",
23 | "14055a19-1a79-4b16-90fb-811652e33128",
24 | "aa102bcb-335c-4d82-8392-058f6172ebe8",
25 | ];
26 | const issuesMock2 = [todoIssuesMock2, inProgressIssuesMock2, doneIssuesMock2];
27 |
28 | export const categoriesMock1: Category[] = categoryTypes.map((categoryType, index) => {
29 | const id = ids1[index];
30 | const name = categoryTypeDict[categoryType];
31 | const type = categoryType;
32 | const order = index;
33 | const issues = issuesMock1[index];
34 |
35 | return {
36 | id,
37 | name,
38 | issues,
39 | type,
40 | order,
41 | createdAt,
42 | updatedAt,
43 | };
44 | });
45 |
46 | export const categoriesMock2: Category[] = categoryTypes.map((categoryType, index) => {
47 | const id = ids2[index];
48 | const name = categoryTypeDict[categoryType];
49 | const type = categoryType;
50 | const order = index;
51 | const issues = issuesMock2[index];
52 |
53 | return {
54 | id,
55 | name,
56 | type,
57 | issues,
58 | order,
59 | createdAt,
60 | updatedAt,
61 | };
62 | });
63 |
--------------------------------------------------------------------------------
/src/domain/category/category.ts:
--------------------------------------------------------------------------------
1 | import { Issue } from "@domain/issue";
2 |
3 | export type CategoryId = string;
4 | export type CategoryType = typeof categoryTypes[number];
5 | export const categoryTypes = ["TODO", "IN_PROGRESS", "DONE"] as const;
6 |
7 | export const categoryTypeDict: RecordPROJECTS
13 |
14 |
15 |
21 |
22 |
23 |
24 | {projectsSummary.map((project) => (
25 |
28 |