Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/web/core/components/project/create/common-attributes.tsx

@@ -0,0 +1,151 @@
+import type { ChangeEvent } from "react";
+import type { UseFormSetValue } from "react-hook-form";
+import { Controller, useFormContext } from "react-hook-form";
+import { Info } from "lucide-react";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { Tooltip } from "@plane/propel/tooltip";
+import { Input, TextArea } from "@plane/ui";
+import { cn, projectIdentifierSanitizer, getTabIndex } from "@plane/utils";
+// plane utils
+// helpers
+// plane-web types
+import type { TProject } from "@/plane-web/types/projects";
+
+type Props = {
+  setValue: UseFormSetValue<TProject>;
+  isMobile: boolean;
+  isChangeInIdentifierRequired: boolean;
+  setIsChangeInIdentifierRequired: (value: boolean) => void;
+  handleFormOnChange?: () => void;
+};
+const ProjectCommonAttributes: React.FC<Props> = (props) => {
+  const { setValue, isMobile, isChangeInIdentifierRequired, setIsChangeInIdentifierRequired, handleFormOnChange } =
+    props;
+  const {
+    formState: { errors },
+    control,
+  } = useFormContext<TProject>();
+
+  const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
+  const { t } = useTranslation();
+
+  const handleNameChange = (onChange: (...event: any[]) => void) => (e: ChangeEvent<HTMLInputElement>) => {
+    if (!isChangeInIdentifierRequired) {
+      onChange(e);
+      return;
+    }
+    if (e.target.value === "") setValue("identifier", "");
+    else setValue("identifier", projectIdentifierSanitizer(e.target.value).substring(0, 5));
+    onChange(e);
+    handleFormOnChange?.();
+  };
+
+  const handleIdentifierChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    const alphanumericValue = projectIdentifierSanitizer(value);
+    setIsChangeInIdentifierRequired(false);
+    onChange(alphanumericValue);
+    handleFormOnChange?.();
+  };
+  return (
+    <div className="grid grid-cols-1 gap-x-2 gap-y-3 md:grid-cols-4">
+      <div className="md:col-span-3">
+        <Controller
+          control={control}
+          name="name"
+          rules={{
+            required: t("name_is_required"),
+            maxLength: {
+              value: 255,
+              message: t("title_should_be_less_than_255_characters"),
+            },
+          }}
+          render={({ field: { value, onChange } }) => (
+            <Input
+              id="name"
+              name="name"
+              type="text"
+              value={value}
+              onChange={handleNameChange(onChange)}
+              hasError={Boolean(errors.name)}
+              placeholder={t("project_name")}
+              className="w-full focus:border-blue-400"
+              tabIndex={getIndex("name")}
+            />
+          )}
+        />
+        <span className="text-xs text-red-500">{errors?.name?.message}</span>
+      </div>
+      <div className="relative">
+        <Controller
+          control={control}
+          name="identifier"
+          rules={{
+            required: t("project_id_is_required"),
+            // allow only alphanumeric & non-latin characters
+            validate: (value) =>
+              /^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) || t("only_alphanumeric_non_latin_characters_allowed"),
+            minLength: {
+              value: 1,
+              message: t("project_id_must_be_at_least_1_character"),
+            },
+            maxLength: {
+              value: 5,
+              message: t("project_id_must_be_at_most_5_characters"),
+            },
+          }}
+          render={({ field: { value, onChange } }) => (
+            <Input
+              id="identifier"
+              name="identifier"
+              type="text"
+              value={value}
+              onChange={handleIdentifierChange(onChange)}
+              hasError={Boolean(errors.identifier)}
+              placeholder={t("project_id")}
+              className={cn("w-full text-xs focus:border-blue-400 pr-7", {
+                uppercase: value,
+              })}
+              tabIndex={getIndex("identifier")}
+            />
+          )}
+        />
+        <Tooltip
+          isMobile={isMobile}
+          tooltipContent={t("project_id_tooltip_content")}
+          className="text-sm"
+          position="right-start"
+        >
+          <Info className="absolute right-2 top-2.5 h-3 w-3 text-custom-text-400" />
+        </Tooltip>
+        <span className="text-xs text-red-500">{errors?.identifier?.message}</span>
+      </div>
+      <div className="md:col-span-4">
+        <Controller
+          name="description"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <TextArea
+              id="description"
+              name="description"
+              value={value}
+              placeholder={t("description")}
+              onChange={(e) => {
+                onChange(e);
+                handleFormOnChange?.();
+              }}
+              className="!h-24 text-sm focus:border-blue-400"
+              hasError={Boolean(errors?.description)}
+              tabIndex={getIndex("description")}
+            />
+          )}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCommonAttributes;

apps/web/core/components/project/create/header.tsx

@@ -0,0 +1,106 @@
+import { useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
+import { CloseIcon } from "@plane/propel/icons";
+// plane types
+import type { IProject } from "@plane/types";
+// plane ui
+import { getFileURL, getTabIndex } from "@plane/utils";
+// components
+import { ImagePickerPopover } from "@/components/core/image-picker-popover";
+// plane web imports
+import { ProjectTemplateSelect } from "@/plane-web/components/projects/create/template-select";
+
+type Props = {
+  handleClose: () => void;
+  isMobile?: boolean;
+};
+const ProjectCreateHeader: React.FC<Props> = (props) => {
+  const { handleClose, isMobile = false } = props;
+  const { watch, control } = useFormContext<IProject>();
+  const { t } = useTranslation();
+  // derived values
+  const coverImage = watch("cover_image_url");
+
+  const [isOpen, setIsOpen] = useState(false);
+  const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
+
+  return (
+    <div className="group relative h-44 w-full rounded-lg bg-custom-background-80">
+      {coverImage && (
+        <img
+          src={getFileURL(coverImage)}
+          className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
+          alt={t("project_cover_image_alt")}
+        />
+      )}
+      <div className="absolute left-2.5 top-2.5">
+        <ProjectTemplateSelect handleModalClose={handleClose} />
+      </div>
+      <div className="absolute right-2 top-2 p-2">
+        <button data-posthog="PROJECT_MODAL_CLOSE" type="button" onClick={handleClose} tabIndex={getIndex("close")}>
+          <CloseIcon className="h-5 w-5 text-white" />
+        </button>
+      </div>
+      <div className="absolute bottom-2 right-2">
+        <Controller
+          name="cover_image_url"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <ImagePickerPopover
+              label={t("change_cover")}
+              onChange={onChange}
+              control={control}
+              value={value ?? null}
+              tabIndex={getIndex("cover_image")}
+            />
+          )}
+        />
+      </div>
+      <div className="absolute -bottom-[22px] left-3">
+        <Controller
+          name="logo_props"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <EmojiPicker
+              iconType="material"
+              isOpen={isOpen}
+              handleToggle={(val: boolean) => setIsOpen(val)}
+              className="flex items-center justify-center"
+              buttonClassName="flex items-center justify-center"
+              label={
+                <span className="grid h-11 w-11 place-items-center rounded-md bg-custom-background-80">
+                  <Logo logo={value} size={20} />
+                </span>
+              }
+              onChange={(val: any) => {
+                let logoValue = {};
+
+                if (val?.type === "emoji")
+                  logoValue = {
+                    value: val.value,
+                  };
+                else if (val?.type === "icon") logoValue = val.value;
+
+                onChange({
+                  in_use: val?.type,
+                  [val?.type]: logoValue,
+                });
+                setIsOpen(false);
+              }}
+              defaultIconColor={value.in_use && value.in_use === "icon" ? value.icon?.color : undefined}
+              defaultOpen={
+                value.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
+              }
+            />
+          )}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCreateHeader;

apps/web/core/components/project/create/project-create-buttons.tsx

@@ -0,0 +1,37 @@
+import { useFormContext } from "react-hook-form";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { IProject } from "@plane/types";
+// ui
+// helpers
+import { getTabIndex } from "@plane/utils";
+
+type Props = {
+  handleClose: () => void;
+  isMobile?: boolean;
+};
+
+const ProjectCreateButtons: React.FC<Props> = (props) => {
+  const { t } = useTranslation();
+  const { handleClose, isMobile = false } = props;
+  const {
+    formState: { isSubmitting },
+  } = useFormContext<IProject>();
+
+  const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
+
+  return (
+    <div className="flex justify-end gap-2 py-4 border-t border-custom-border-100">
+      <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={getIndex("cancel")}>
+        {t("common.cancel")}
+      </Button>
+      <Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={getIndex("submit")}>
+        {isSubmitting ? t("creating") : t("create_project")}
+      </Button>
+    </div>
+  );
+};
+
+export default ProjectCreateButtons;