fix: build erros

packages/ui/package.json

@@ -1,23 +1,33 @@
 {
-  "name": "ui",
-  "version": "0.13.2",
-  "main": "./index.tsx",
-  "types": "./index.tsx",
+  "name": "@plane/ui",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "license": "MIT",
+  "files": [
+    "dist/**"
+  ],
   "scripts": {
-    "lint": "eslint *.ts*"
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "lint": "eslint src/",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "devDependencies": {
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@types/node": "^20.5.2",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
     "classnames": "^2.3.2",
-    "eslint": "^7.32.0",
     "eslint-config-custom": "*",
-    "next": "12.3.2",
     "react": "^18.2.0",
     "tsconfig": "*",
     "tailwind-config-custom": "*",
+    "tsup": "^5.10.1",
     "typescript": "4.7.4"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

web/components/core/filters/issues-view-filter.tsx

@@ -76,304 +76,5 @@ export const IssuesFilterView: React.FC = () => {
 
   const { isEstimateActive } = useEstimateOption();
 
-  return (
-    <div className="flex items-center gap-2">
-      {!isArchivedIssues && !isDraftIssues && (
-        <div className="flex items-center gap-x-1">
-          {issueViewOptions.map((option) => (
-            <Tooltip
-              key={option.type}
-              tooltipContent={
-                <span className="capitalize">
-                  {replaceUnderscoreIfSnakeCase(option.type)} Layout
-                </span>
-              }
-              position="bottom"
-            >
-              <button
-                type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
-                  displayFilters.layout === option.type
-                    ? "bg-custom-sidebar-background-80"
-                    : "text-custom-sidebar-text-200"
-                }`}
-                onClick={() => setDisplayFilters({ layout: option.type })}
-              >
-                <option.Icon
-                  sx={{
-                    fontSize: 16,
-                  }}
-                  className={option.type === "gantt_chart" ? "rotate-90" : ""}
-                />
-              </button>
-            </Tooltip>
-          ))}
-        </div>
-      )}
-      {isDraftIssues && (
-        <div className="flex items-center gap-x-1">
-          {issueViewForDraftIssues.map((option) => (
-            <Tooltip
-              key={option.type}
-              tooltipContent={<span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>}
-              position="bottom"
-            >
-              <button
-                type="button"
-                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
-                  displayFilters.layout === option.type
-                    ? "bg-custom-sidebar-background-80"
-                    : "text-custom-sidebar-text-200"
-                }`}
-                onClick={() => setDisplayFilters({ layout: option.type })}
-              >
-                <option.Icon
-                  sx={{
-                    fontSize: 16,
-                  }}
-                  className={option.type === "gantt_chart" ? "rotate-90" : ""}
-                />
-              </button>
-            </Tooltip>
-          ))}
-        </div>
-      )}
-      <SelectFilters
-        filters={filters}
-        onSelect={(option) => {
-          const key = option.key as keyof typeof filters;
-
-          if (key === "start_date" || key === "target_date") {
-            const valueExists = checkIfArraysHaveSameElements(filters[key] ?? [], option.value);
-
-            setFilters({
-              [key]: valueExists ? null : option.value,
-            });
-          } else {
-            const valueExists = filters[key]?.includes(option.value);
-
-            if (valueExists)
-              setFilters(
-                {
-                  [option.key]: ((filters[key] ?? []) as any[])?.filter((val) => val !== option.value),
-                },
-                !Boolean(viewId)
-              );
-            else
-              setFilters(
-                {
-                  [option.key]: [...((filters[key] ?? []) as any[]), option.value],
-                },
-                !Boolean(viewId)
-              );
-          }
-        }}
-        direction="left"
-        height="rg"
-      />
-      <Popover className="relative">
-        {({ open }) => (
-          <>
-            <Popover.Button
-              className={`group flex items-center gap-2 rounded-md border border-custom-border-200 px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
-                open ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100" : "text-custom-sidebar-text-200"
-              }`}
-            >
-              Display
-              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-            </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 right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
-                <div className="relative divide-y-2 divide-custom-border-200">
-                  <div className="space-y-4 pb-3 text-xs">
-                    {displayFilters.layout !== "calendar" &&
-                      displayFilters.layout !== "spreadsheet" &&
-                      displayFilters.layout !== "gantt_chart" && (
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Group by</h4>
-                          <div className="w-28">
-                            <CustomMenu
-                              label={
-                                ISSUE_GROUP_BY_OPTIONS.find((option) => option.key === displayFilters.group_by)
-                                  ?.title ?? "Select"
-                              }
-                              className="!w-full"
-                              buttonClassName="w-full"
-                            >
-                              {ISSUE_GROUP_BY_OPTIONS.map((option) => {
-                                if (displayFilters.layout === "kanban" && option.key === null) return null;
-                                if (option.key === "project") return null;
-
-                                if (isDraftIssues && option.key === "state_detail.group")
-                                  return null;
-
-                                return (
-                                  <CustomMenu.MenuItem
-                                    key={option.key}
-                                    onClick={() => {
-                                      // setDisplayFilters({ group_by: option.key })
-                                    }}
-                                  >
-                                    {option.title}
-                                  </CustomMenu.MenuItem>
-                                );
-                              })}
-                            </CustomMenu>
-                          </div>
-                        </div>
-                      )}
-                    {displayFilters.layout !== "calendar" && displayFilters.layout !== "spreadsheet" && (
-                      <div className="flex items-center justify-between">
-                        <h4 className="text-custom-text-200">Order by</h4>
-                        <div className="w-28">
-                          <CustomMenu
-                            label={
-                              ISSUE_ORDER_BY_OPTIONS.find((option) => option.key === displayFilters.order_by)?.title ??
-                              "Select"
-                            }
-                            className="!w-full"
-                            buttonClassName="w-full"
-                          >
-                            {ISSUE_ORDER_BY_OPTIONS.map((option) =>
-                              displayFilters.group_by === "priority" && option.key === "priority" ? null : (
-                                <CustomMenu.MenuItem
-                                  key={option.key}
-                                  onClick={() => {
-                                    // setDisplayFilters({ order_by: option.key });
-                                  }}
-                                >
-                                  {option.title}
-                                </CustomMenu.MenuItem>
-                              )
-                            )}
-                          </CustomMenu>
-                        </div>
-                      )}
-                    {!isArchivedIssues && (
-                      <div className="flex items-center justify-between">
-                        <h4 className="text-custom-text-200">Issue type</h4>
-                        <div className="w-28">
-                          <CustomMenu
-                            label={
-                              FILTER_ISSUE_OPTIONS.find(
-                                (option) => option.key === displayFilters.type
-                              )?.name ?? "Select"
-                            }
-                            className="!w-full"
-                            buttonClassName="w-full"
-                          >
-                            {FILTER_ISSUE_OPTIONS.map((option) => (
-                              <CustomMenu.MenuItem
-                                key={option.key}
-                                onClick={() =>
-                                  setDisplayFilters({
-                                    type: option.key,
-                                  })
-                                }
-                              >
-                                {option.name}
-                              </CustomMenu.MenuItem>
-                            ))}
-                          </CustomMenu>
-                        </div>
-                      </div>
-                    )}
-
-                    {displayFilters.layout !== "calendar" && displayFilters.layout !== "spreadsheet" && (
-                      <div className="flex items-center justify-between">
-                        <h4 className="text-custom-text-200">Show sub-issues</h4>
-                        <div className="w-28">
-                          <ToggleSwitch
-                            value={displayFilters.sub_issue ?? true}
-                            onChange={() => setDisplayFilters({ sub_issue: !displayFilters.sub_issue })}
-                          />
-                        </div>
-                      </div>
-                    )}
-                    {displayFilters.layout !== "calendar" &&
-                      displayFilters.layout !== "spreadsheet" &&
-                      displayFilters.layout !== "gantt_chart" && (
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Show empty groups</h4>
-                          <div className="w-28">
-                            <ToggleSwitch
-                              value={displayFilters.show_empty_groups ?? true}
-                              onChange={() =>
-                                setDisplayFilters({
-                                  show_empty_groups: !displayFilters.show_empty_groups,
-                                })
-                              }
-                            />
-                          </div>
-                        </div>
-                      )}
-                    {displayFilters.layout !== "calendar" &&
-                      displayFilters.layout !== "spreadsheet" &&
-                      displayFilters.layout !== "gantt_chart" && (
-                        <div className="relative flex justify-end gap-x-3">
-                          <button type="button" onClick={() => resetFilterToDefault()}>
-                            Reset to default
-                          </button>
-                          <button
-                            type="button"
-                            className="font-medium text-custom-primary"
-                            onClick={() => setNewFilterDefaultView()}
-                          >
-                            Set as default
-                          </button>
-                        </div>
-                      )}
-                  </div>
-
-                  {displayFilters.layout !== "gantt_chart" && (
-                    <div className="space-y-2 py-3">
-                      <h4 className="text-sm text-custom-text-200">Display Properties</h4>
-                      <div className="flex flex-wrap items-center gap-2 text-custom-text-200">
-                        {Object.keys(properties).map((key) => {
-                          if (key === "estimate" && !isEstimateActive) return null;
-
-                          if (
-                            displayFilters.layout === "spreadsheet" &&
-                            (key === "attachment_count" || key === "link" || key === "sub_issue_count")
-                          )
-                            return null;
-
-                          if (displayFilters.layout !== "spreadsheet" && (key === "created_on" || key === "updated_on"))
-                            return null;
-
-                          return (
-                            <button
-                              key={key}
-                              type="button"
-                              className={`rounded border px-2 py-1 text-xs capitalize ${
-                                properties[key as keyof Properties]
-                                  ? "border-custom-primary bg-custom-primary text-white"
-                                  : "border-custom-border-200"
-                              }`}
-                              onClick={() => setProperties(key as keyof Properties)}
-                            >
-                              {key === "key" ? "ID" : replaceUnderscoreIfSnakeCase(key)}
-                            </button>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </Popover.Panel>
-            </Transition>
-          </>
-        )}
-      </Popover>
-    </div>
-  );
+  return null;
 };

web/components/core/views/inline-issue-create-wrapper.tsx

@@ -14,7 +14,7 @@ import { Transition } from "@headlessui/react";
 
 // services
 import modulesService from "services/modules.service";
-import issuesService from "services/issues.service";
+import issuesService from "services/issue.service";
 
 // hooks
 import useToast from "hooks/use-toast";
@@ -23,9 +23,7 @@ import useKeypress from "hooks/use-keypress";
 import useIssuesView from "hooks/use-issues-view";
 import useMyIssues from "hooks/my-issues/use-my-issues";
 import useGanttChartIssues from "hooks/gantt-chart/issue-view";
-import useCalendarIssuesView from "hooks/use-calendar-issues-view";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 
 // helpers
 import { getFetchKeysForIssueMutation } from "helpers/string.helper";
@@ -127,14 +125,9 @@ export const InlineCreateIssueFormWrapper: React.FC<Props> = (props) => {
   const { setToastAlert } = useToast();
 
   const { displayFilters, params } = useIssuesView();
-  const { params: calendarParams } = useCalendarIssuesView();
   const { ...viewGanttParams } = params;
-  const { params: spreadsheetParams } = useSpreadsheetIssuesView();
   const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
-  const { params: ganttParams } = useGanttChartIssues(
-    workspaceSlug?.toString(),
-    projectId?.toString()
-  );
+  const { params: ganttParams } = useGanttChartIssues(workspaceSlug?.toString(), projectId?.toString());
 
   const method = useForm<IIssue>({ defaultValues });
   const {
@@ -171,13 +164,11 @@ export const InlineCreateIssueFormWrapper: React.FC<Props> = (props) => {
     });
   }, [errors, setToastAlert]);
 
-  const { calendarFetchKey, ganttFetchKey, spreadsheetFetchKey } = getFetchKeysForIssueMutation({
+  const { ganttFetchKey } = getFetchKeysForIssueMutation({
     cycleId: cycleId,
     moduleId: moduleId,
     viewId: viewId,
     projectId: projectId?.toString() ?? "",
-    calendarParams,
-    spreadsheetParams,
     viewGanttParams,
     ganttParams,
   });
@@ -189,39 +180,17 @@ export const InlineCreateIssueFormWrapper: React.FC<Props> = (props) => {
 
     await (!isDraftIssues
       ? issuesService.createIssues(workspaceSlug.toString(), projectId.toString(), formData, user)
-      : issuesService.createDraftIssue(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          formData,
-          user
-        )
+      : issuesService.createDraftIssue(workspaceSlug.toString(), projectId.toString(), formData, user)
     )
       .then(async (res) => {
         await mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params));
         if (formData.cycle && formData.cycle !== "")
-          await addIssueToCycle(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            res.id,
-            formData.cycle,
-            user,
-            params
-          );
+          await addIssueToCycle(workspaceSlug.toString(), projectId.toString(), res.id, formData.cycle, user, params);
         if (formData.module && formData.module !== "")
-          await addIssueToModule(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            res.id,
-            formData.module,
-            user,
-            params
-          );
+          await addIssueToModule(workspaceSlug.toString(), projectId.toString(), res.id, formData.module, user, params);
 
-        if (isDraftIssues)
-          await mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(projectId.toString() ?? "", params));
-        if (displayFilters.layout === "calendar") await mutate(calendarFetchKey);
+        if (isDraftIssues) await mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(projectId.toString() ?? "", params));
         if (displayFilters.layout === "gantt_chart") await mutate(ganttFetchKey);
-        if (displayFilters.layout === "spreadsheet") await mutate(spreadsheetFetchKey);
         if (groupedIssues) await mutateMyIssues();
 
         setToastAlert({

web/components/core/views/spreadsheet-view/assignee-column/assignee-column.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 // components
 import { MembersSelect } from "components/project";
 // services
-import trackEventServices from "services/track-event.service";
+import trackEventServices from "services/track_event.service";
 // types
 import { ICurrentUserResponse, IIssue, Properties } from "types";
 

web/components/core/views/spreadsheet-view/priority-column/priority-column.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 // components
 import { PrioritySelect } from "components/project";
 // services
-import trackEventServices from "services/track-event.service";
+import trackEventServices from "services/track_event.service";
 // types
 import { ICurrentUserResponse, IIssue, Properties, TIssuePriorities } from "types";
 

web/components/core/views/spreadsheet-view/state-column/state-column.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 // components
 import { StateSelect } from "components/states";
 // services
-import trackEventServices from "services/track-event.service";
+import trackEventServices from "services/track_event.service";
 // types
 import { ICurrentUserResponse, IIssue, IState, Properties } from "types";
 

web/helpers/string.helper.ts

@@ -135,47 +135,10 @@ export const getFetchKeysForIssueMutation = (options: {
   moduleId?: string | string[];
   viewId?: string | string[];
   projectId: string;
-  calendarParams: any;
-  spreadsheetParams: any;
   viewGanttParams: any;
   ganttParams: any;
 }) => {
-  const {
-    cycleId,
-    moduleId,
-    viewId,
-    projectId,
-    calendarParams,
-    spreadsheetParams,
-    viewGanttParams,
-    ganttParams,
-  } = options;
-
-  const calendarFetchKey = cycleId
-    ? { calendarFetchKey: CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams) }
-    : moduleId
-    ? { calendarFetchKey: MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams) }
-    : viewId
-    ? { calendarFetchKey: VIEW_ISSUES(viewId.toString(), calendarParams) }
-    : {
-        calendarFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(
-          projectId?.toString() ?? "",
-          calendarParams
-        ),
-      };
-
-  const spreadsheetFetchKey = cycleId
-    ? { spreadsheetFetchKey: CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams) }
-    : moduleId
-    ? { spreadsheetFetchKey: MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams) }
-    : viewId
-    ? { spreadsheetFetchKey: VIEW_ISSUES(viewId.toString(), spreadsheetParams) }
-    : {
-        spreadsheetFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(
-          projectId?.toString() ?? "",
-          spreadsheetParams
-        ),
-      };
+  const { cycleId, moduleId, viewId, projectId, viewGanttParams, ganttParams } = options;
 
   const ganttFetchKey = cycleId
     ? { ganttFetchKey: CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), ganttParams) }
@@ -186,8 +149,6 @@ export const getFetchKeysForIssueMutation = (options: {
     : { ganttFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", ganttParams) };
 
   return {
-    ...calendarFetchKey,
-    ...spreadsheetFetchKey,
     ...ganttFetchKey,
   };
 };

web/hooks/gantt-chart/issue-view.tsx

@@ -1,7 +1,7 @@
 import useSWR from "swr";
 
 // services
-import issuesService from "services/issues.service";
+import issuesService from "services/issue.service";
 // hooks
 import useIssuesView from "hooks/use-issues-view";
 // fetch-keys
@@ -28,8 +28,7 @@ const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: strin
   const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
     workspaceSlug && projectId ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId, params) : null,
     workspaceSlug && projectId
-      ? () =>
-          issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
+      ? () => issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
       : null
   );
 

yarn.lock

@@ -2573,9 +2573,9 @@
   integrity sha512-QH+37Qds3E0eDlReeboBxfHbX9omAcBCXEzswCu6jySP642jiM3cYSIkU/REqwhCUqXdonHFuBfJDiAJxMNhaQ==
 
 "@types/node@^20.5.2":
-  version "20.7.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.7.0.tgz#c03de4572f114a940bc2ca909a33ddb2b925e470"
-  integrity sha512-zI22/pJW2wUZOVyguFaUL1HABdmSVxpXrzIqkjsHmyUjNhPoWM1CKfvVuXfetHhIok4RY573cqS0mZ1SJEnoTg==
+  version "20.8.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.2.tgz#d76fb80d87d0d8abfe334fc6d292e83e5524efc4"
+  integrity sha512-Vvycsc9FQdwhxE3y3DzeIxuEJbWGDsnrxvMADzTDF/lcdR9/K+AQIeAghTQsHtotg/q0j3WEOYS/jQgSdWue3w==
 
 "@types/nprogress@^0.2.0":
   version "0.2.0"