snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

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

@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ChangeEvent } from "react";
+import type { UseFormSetValue } from "react-hook-form";
+import { Controller, useFormContext } from "react-hook-form";
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
+import { InfoOutline } from "@makeplane/propel/icons";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TProject } from "@plane/types";
+// ui
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { projectIdentifierSanitizer, getTabIndex } from "@plane/utils";
+
+type Props = {
+  setValue: UseFormSetValue<TProject>;
+  isMobile: boolean;
+  shouldAutoSyncIdentifier: boolean;
+  setShouldAutoSyncIdentifier: (value: boolean) => void;
+  handleFormOnChange?: () => void;
+};
+
+function ProjectCommonAttributes(props: Props) {
+  const { setValue, isMobile, shouldAutoSyncIdentifier, setShouldAutoSyncIdentifier, handleFormOnChange } = props;
+  const {
+    formState: { errors },
+    control,
+  } = useFormContext<TProject>();
+
+  const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
+  const { t } = useTranslation();
+
+  const handleNameChange =
+    (onChange: (event: ChangeEvent<HTMLInputElement>) => void) => (e: ChangeEvent<HTMLInputElement>) => {
+      if (!shouldAutoSyncIdentifier) {
+        onChange(e);
+        return;
+      }
+      if (e.target.value === "") setValue("identifier", "");
+      else setValue("identifier", projectIdentifierSanitizer(e.target.value).substring(0, 10));
+      onChange(e);
+      handleFormOnChange?.();
+    };
+
+  const handleIdentifierChange = (onChange: (value: string) => void) => (e: ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    const alphanumericValue = projectIdentifierSanitizer(value);
+    setShouldAutoSyncIdentifier(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 } }) => (
+            <Field name="name" invalid={Boolean(errors.name)}>
+              <InputGroup size="2xl">
+                <Input
+                  size="2xl"
+                  id="name"
+                  name="name"
+                  type="text"
+                  value={value}
+                  onChange={handleNameChange(onChange)}
+                  placeholder={t("project_name")}
+                  tabIndex={getIndex("name")}
+                />
+              </InputGroup>
+            </Field>
+          )}
+        />
+        <span className="text-11 text-danger-primary">{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_min_char"),
+            },
+            maxLength: {
+              value: 10,
+              message: t("project_id_max_char"),
+            },
+          }}
+          render={({ field: { value, onChange } }) => (
+            <Field name="identifier" invalid={Boolean(errors.identifier)}>
+              <InputGroup size="2xl">
+                <Input
+                  size="2xl"
+                  id="identifier"
+                  name="identifier"
+                  type="text"
+                  value={value}
+                  onChange={handleIdentifierChange(onChange)}
+                  placeholder={t("project_id")}
+                  tabIndex={getIndex("identifier")}
+                />
+              </InputGroup>
+            </Field>
+          )}
+        />
+        <Tooltip
+          label={t("project_id_tooltip_content")}
+          layout="stacked"
+          side="right"
+          align="start"
+          disabled={isMobile}
+        >
+          <InfoOutline className="absolute top-2.5 right-2 h-3 w-3 text-placeholder" />
+        </Tooltip>
+        <span className="text-11 text-danger-primary">{errors?.identifier?.message}</span>
+      </div>
+      <div className="md:col-span-4">
+        <Controller
+          name="description"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <Field name="description" invalid={Boolean(errors?.description)}>
+              <TextAreaGroup resize="none">
+                <TextArea
+                  size="lg"
+                  surface="field"
+                  autoResize
+                  maxRows={8}
+                  id="description"
+                  name="description"
+                  value={value}
+                  placeholder={t("description")}
+                  onChange={(e) => {
+                    onChange(e);
+                    handleFormOnChange?.();
+                  }}
+                  tabIndex={getIndex("description")}
+                />
+              </TextAreaGroup>
+            </Field>
+          )}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ProjectCommonAttributes;

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

@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 { CloseOutline } from "@makeplane/propel/icons";
+// plane types
+import type { IProject } from "@plane/types";
+// plane ui
+import { getTabIndex } from "@plane/utils";
+// components
+import { CoverImage } from "@/components/common/cover-image";
+import { ImagePickerPopover } from "@/components/core/image-picker-popover";
+
+type Props = {
+  handleClose: () => void;
+  isMobile?: boolean;
+  handleFormOnChange?: () => void;
+  isClosable?: boolean;
+  handleTemplateSelect?: () => void;
+  showActionButtons?: boolean;
+};
+
+function ProjectCreateHeader(props: Props) {
+  const { handleClose, isMobile = false, handleFormOnChange, isClosable = true } = props;
+  const { watch, control, setValue } = 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">
+      <CoverImage
+        src={coverImage}
+        alt={t("project_cover_image_alt")}
+        className="absolute top-0 left-0 h-full w-full rounded-lg"
+      />
+      {isClosable && (
+        <div className="absolute top-2 right-2 p-2">
+          <button type="button" onClick={handleClose} tabIndex={getIndex("close")}>
+            <CloseOutline className="h-5 w-5 text-on-color" />
+          </button>
+        </div>
+      )}
+      <div className="absolute right-2 bottom-2">
+        <Controller
+          name="cover_image_url"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <ImagePickerPopover
+              label={t("change_cover")}
+              onChange={(data) => {
+                onChange(data);
+                handleFormOnChange?.();
+              }}
+              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 border border-subtle bg-layer-2">
+                  <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;
+
+                const newLogoProps = {
+                  in_use: val?.type,
+                  [val?.type]: logoValue,
+                };
+                setValue("logo_props", newLogoProps, {
+                  shouldDirty: true,
+                });
+                onChange(newLogoProps);
+                handleFormOnChange?.();
+                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,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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;
+};
+
+function ProjectCreateButtons(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 border-t border-subtle py-4">
+      <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
+        {t("common.cancel")}
+      </Button>
+      <Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
+        {isSubmitting ? t("creating") : t("create_project")}
+      </Button>
+    </div>
+  );
+}
+
+export default ProjectCreateButtons;