refactor(space): migrate from @plane/propel to @makeplane/propel

apps/admin/components/common/skeleton.tsx

@@ -8,8 +8,7 @@ import React from "react";
 // helpers
 import { cn } from "@plane/utils";
 
-// Loading-placeholder skeleton. @makeplane/propel has no skeleton component yet;
-// this matches the API the workspace @plane/propel skeleton exposed.
+// Loading-placeholder skeleton. @makeplane/propel has no skeleton component yet, so it is kept local.
 
 type SkeletonProps = {
   children: React.ReactNode;

apps/admin/providers/toast.tsx

@@ -10,8 +10,7 @@ import { IconButton } from "@makeplane/propel/components/icon-button";
 import { Icon } from "@makeplane/propel/components/icon";
 import { CloseOutline } from "@makeplane/propel/icons";
 
-// Keep the call-site API the workspace @plane/propel toast exposed, backed by
-// @makeplane/propel's toast manager, so consumers only change their import path.
+// Thin wrapper over @makeplane/propel's toast manager to keep the call-site API stable.
 export enum TOAST_TYPE {
   SUCCESS = "success",
   ERROR = "error",

apps/space/app/error.tsx

@@ -5,7 +5,7 @@
  */
 
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 
 function ErrorPage() {
   const handleRetry = () => {
@@ -31,12 +31,7 @@ function ErrorPage() {
           </p>
         </div>
         <div className="flex items-center justify-center gap-2">
-          <Button variant="primary" size="lg" onClick={handleRetry}>
-            Refresh
-          </Button>
-          {/* <Button variant="secondary" size="lg" onClick={() => {}}>
-            Sign out
-          </Button> */}
+          <Button variant="primary" size="lg" stretch="auto" onClick={handleRetry} label="Refresh" />
         </div>
       </div>
     </div>

apps/space/components/account/auth-forms/auth-banner.tsx

@@ -5,7 +5,7 @@
  */
 
 import { Info } from "lucide-react";
-import { CloseIcon } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
 // helpers
 import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
 
@@ -28,7 +28,7 @@ export function AuthBanner(props: TAuthBanner) {
         className="relative ml-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-xs text-accent-primary/80 transition-all hover:bg-accent-primary/20"
         onClick={() => handleBannerData && handleBannerData(undefined)}
       >
-        <CloseIcon className="h-4 w-4 flex-shrink-0" />
+        <CloseOutline className="h-4 w-4 flex-shrink-0" />
       </div>
     </div>
   );

apps/space/components/account/auth-forms/email.tsx

@@ -10,10 +10,10 @@ import { observer } from "mobx-react";
 // icons
 import { CircleAlert, XCircle } from "lucide-react";
 // types
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 import type { IEmailCheckData } from "@plane/types";
 // ui
-import { Input, Spinner } from "@plane/ui";
+import { Input } from "@plane/ui";
 // helpers
 import { cn } from "@plane/utils";
 import { checkEmailValidity } from "@/helpers/string.helper";
@@ -100,9 +100,15 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
           </p>
         )}
       </div>
-      <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-        {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
-      </Button>
+      <Button
+        type="submit"
+        variant="primary"
+        size="lg"
+        stretch="full"
+        disabled={isButtonDisabled}
+        loading={isSubmitting}
+        label="Continue"
+      />
     </form>
   );
 });

apps/space/components/account/auth-forms/password.tsx

@@ -8,10 +8,10 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { Eye, EyeOff, XCircle } from "lucide-react";
 // plane imports
+import { Button } from "@makeplane/propel/components/button";
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
-import { Button } from "@plane/propel/button";
 import { AuthService } from "@plane/services";
-import { Input, Spinner, PasswordStrengthIndicator } from "@plane/ui";
+import { Input, PasswordStrengthIndicator } from "@plane/ui";
 import { getPasswordStrength } from "@plane/utils";
 // types
 import { EAuthModes, EAuthSteps } from "@/types/auth";
@@ -215,31 +215,36 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
       <div className="space-y-2.5">
         {mode === EAuthModes.SIGN_IN ? (
           <>
-            <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-              {isSubmitting ? (
-                <Spinner height="20px" width="20px" />
-              ) : isSMTPConfigured ? (
-                "Continue"
-              ) : (
-                "Go to workspace"
-              )}
-            </Button>
+            <Button
+              type="submit"
+              variant="primary"
+              size="lg"
+              stretch="full"
+              disabled={isButtonDisabled}
+              loading={isSubmitting}
+              label={isSMTPConfigured ? "Continue" : "Go to workspace"}
+            />
             {isSMTPConfigured && (
               <Button
                 type="button"
                 onClick={redirectToUniqueCodeSignIn}
                 variant="secondary"
-                className="w-full"
-                size="xl"
-              >
-                Sign in with unique code
-              </Button>
+                size="lg"
+                stretch="full"
+                label="Sign in with unique code"
+              />
             )}
           </>
         ) : (
-          <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-            {isSubmitting ? <Spinner height="20px" width="20px" /> : "Create account"}
-          </Button>
+          <Button
+            type="submit"
+            variant="primary"
+            size="lg"
+            stretch="full"
+            disabled={isButtonDisabled}
+            loading={isSubmitting}
+            label="Create account"
+          />
         )}
       </div>
     </form>

apps/space/components/account/auth-forms/unique-code.tsx

@@ -7,10 +7,10 @@
 import React, { useEffect, useState } from "react";
 import { CircleCheck, XCircle } from "lucide-react";
 // plane imports
+import { Button } from "@makeplane/propel/components/button";
 import { API_BASE_URL } from "@plane/constants";
-import { Button } from "@plane/propel/button";
 import { AuthService } from "@plane/services";
-import { Input, Spinner } from "@plane/ui";
+import { Input } from "@plane/ui";
 // hooks
 import useTimer from "@/hooks/use-timer";
 // types
@@ -148,9 +148,15 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
       </div>
 
       <div className="space-y-2.5">
-        <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
-          {isRequestingNewCode ? "Sending code" : isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
-        </Button>
+        <Button
+          type="submit"
+          variant="primary"
+          size="lg"
+          stretch="full"
+          disabled={isButtonDisabled}
+          loading={isSubmitting}
+          label={isRequestingNewCode ? "Sending code" : "Continue"}
+        />
       </div>
     </form>
   );

apps/space/components/account/user-logged-in.tsx

@@ -5,11 +5,11 @@
  */
 
 import { observer } from "mobx-react";
-import { PlaneLockup } from "@plane/propel/icons";
 // assets
 import UserLoggedInImage from "@/app/assets/user-logged-in.svg?url";
 // components
 import { PoweredBy } from "@/components/common/powered-by";
+import { PlaneLockup } from "@/components/icons";
 import { UserAvatar } from "@/components/issues/navbar/user-avatar";
 // hooks
 import { useUser } from "@/hooks/store/use-user";

apps/space/components/common/powered-by.tsx

@@ -5,8 +5,8 @@
  */
 
 import { WEBSITE_URL } from "@plane/constants";
-// assets
-import { PlaneLogo } from "@plane/propel/icons";
+// components
+import { PlaneLogo } from "@/components/icons";
 
 type TPoweredBy = {
   disabled?: boolean;

apps/space/components/editor/toolbar.tsx

@@ -8,8 +8,8 @@ import React, { useEffect, useState, useCallback } from "react";
 // plane imports
 import { TOOLBAR_ITEMS } from "@plane/editor";
 import type { ToolbarMenuItem, EditorRefApi } from "@plane/editor";
-import { Button } from "@plane/propel/button";
-import { Tooltip } from "@plane/propel/tooltip";
+import { Button } from "@makeplane/propel/components/button";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -68,15 +68,7 @@ export function IssueCommentToolbar(props: Props) {
                 const isItemActive = activeStates[item.renderKey];
 
                 return (
-                  <Tooltip
-                    key={item.renderKey}
-                    tooltipContent={
-                      <p className="flex flex-col gap-1 text-center text-11">
-                        <span className="font-medium">{item.name}</span>
-                        {item.shortcut && <kbd className="text-placeholder">{item.shortcut.join(" + ")}</kbd>}
-                      </p>
-                    }
-                  >
+                  <Tooltip key={item.renderKey} label={item.name} shortcut={item.shortcut?.join(" + ")}>
                     <button
                       type="button"
                       onClick={() => executeCommand(item)}
@@ -104,13 +96,14 @@ export function IssueCommentToolbar(props: Props) {
           <div className="sticky right-1">
             <Button
               type="button"
+              label="Comment"
               variant="primary"
+              size="md"
+              stretch="auto"
               onClick={handleSubmit}
               disabled={isCommentEmpty}
               loading={isSubmitting}
-            >
-              Comment
-            </Button>
+            />
           </div>
         )}
       </div>