refactor: replace @plane/ui and @plane/propel with @makeplane/propel and @plane/blocks

AGENTS.md

@@ -9,7 +9,6 @@
 - `pnpm check:types` - TypeScript type checking
 - `pnpm fix` - Auto-fix format and lint issues
 - `pnpm turbo run <command> --filter=<package>` - Target specific package/app
-- `pnpm --filter=@plane/ui storybook` - Start Storybook on port 6006
 
 ## Code Style
 
@@ -21,7 +20,7 @@
 - **Error Handling**: Use try-catch with proper error types, log errors appropriately
 - **State Management**: MobX stores in `packages/shared-state`, reactive patterns
 - **Testing**: All features require unit tests, use existing test framework per package
-- **Components**: Build in `@plane/ui` with Storybook for isolated development
+- **Components**: Primitives come from the published `@makeplane/propel` npm package (`@makeplane/propel/components/*`, `elements/*`, `icons`); composite/Plane-specific components live in `@plane/blocks` (`packages/blocks`, subpath imports only, e.g. `@plane/blocks/toast`)
 
 ## Backend tests (Docker)
 

apps/admin/components/common/skeleton.tsx

@@ -9,7 +9,7 @@ import React from "react";
 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.
+// this matches the API the legacy workspace skeleton component exposed.
 
 type SkeletonProps = {
   children: React.ReactNode;

apps/admin/providers/toast.tsx

@@ -10,7 +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
+// Keep the call-site API the legacy workspace toast exposed, backed by
 // @makeplane/propel's toast manager, so consumers only change their import path.
 export enum TOAST_TYPE {
   SUCCESS = "success",

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,9 +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="primary" size="md" stretch="auto" label="Refresh" onClick={handleRetry} />
           {/* <Button variant="secondary" size="lg" onClick={() => {}}>
             Sign out
           </Button> */}

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

@@ -10,7 +10,7 @@ import { useSearchParams } from "next/navigation";
 // plane imports
 import { SitesAuthService } from "@plane/services";
 import type { IEmailCheckData } from "@plane/types";
-import { OAuthOptions } from "@plane/ui";
+import { OAuthOptions } from "@plane/blocks/oauth";
 // helpers
 import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
 import { EErrorAlertType, authErrorHandler, EAuthenticationErrorCodes } from "@/helpers/authentication.helper";

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

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

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

@@ -9,9 +9,11 @@ import { observer } from "mobx-react";
 import { CloseCircleOutline, HideOutline, ShowOutline } from "@makeplane/propel/icons";
 // plane imports
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
+import { Button as ButtonElement } from "@makeplane/propel/elements/button";
 import { AuthService } from "@plane/services";
-import { Input, Spinner, PasswordStrengthIndicator } from "@plane/ui";
+import { Input, PasswordStrengthIndicator } from "@plane/blocks/form-fields";
+import { Spinner } from "@plane/blocks/spinner";
 import { getPasswordStrength } from "@plane/utils";
 // types
 import { EAuthModes, EAuthSteps } from "@/types/auth";
@@ -236,31 +238,30 @@ 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}>
+            <ButtonElement type="submit" variant="primary" size="lg" stretch="full" disabled={isButtonDisabled}>
               {isSubmitting ? (
                 <Spinner height="20px" width="20px" />
               ) : isSMTPConfigured ? (
                 "Continue"
               ) : (
                 "Go to workspace"
               )}
-            </Button>
+            </ButtonElement>
             {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"
+                onClick={redirectToUniqueCodeSignIn}
+              />
             )}
           </>
         ) : (
-          <Button type="submit" variant="primary" className="w-full" size="xl" disabled={isButtonDisabled}>
+          <ButtonElement type="submit" variant="primary" size="lg" stretch="full" disabled={isButtonDisabled}>
             {isSubmitting ? <Spinner height="20px" width="20px" /> : "Create account"}
-          </Button>
+          </ButtonElement>
         )}
       </div>
     </form>

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

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

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

@@ -5,7 +5,7 @@
  */
 
 import { observer } from "mobx-react";
-import { PlaneLockup } from "@plane/propel/icons";
+import { PlaneLockup } from "@plane/blocks/icons";
 // assets
 import UserLoggedInImage from "@/app/assets/user-logged-in.svg?url";
 // components

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

@@ -6,7 +6,7 @@
 
 import { WEBSITE_URL } from "@plane/constants";
 // assets
-import { PlaneLogo } from "@plane/propel/icons";
+import { PlaneLogo } from "@plane/blocks/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 = {
@@ -70,12 +70,8 @@ export function IssueCommentToolbar(props: Props) {
                 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>
-                    }
+                    label={item.name}
+                    shortcut={item.shortcut ? item.shortcut.join(" + ") : undefined}
                   >
                     <button
                       type="button"
@@ -105,12 +101,13 @@ export function IssueCommentToolbar(props: Props) {
             <Button
               type="button"
               variant="primary"
+              size="sm"
+              stretch="auto"
+              label="Comment"
               onClick={handleSubmit}
               disabled={isCommentEmpty}
               loading={isSubmitting}
-            >
-              Comment
-            </Button>
+            />
           </div>
         )}
       </div>

apps/space/components/instance/instance-failure-view.tsx

@@ -5,7 +5,7 @@
  */
 
 import { useTheme } from "next-themes";
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/components/button";
 // assets
 import InstanceFailureDarkImage from "@/app/assets/instance/instance-failure-dark.svg?url";
 import InstanceFailureImage from "@/app/assets/instance/instance-failure.svg?url";
@@ -31,9 +31,7 @@ export function InstanceFailureView() {
           </p>
         </div>
         <div className="flex justify-center">
-          <Button size="lg" onClick={handleRetry}>
-            Retry
-          </Button>
+          <Button variant="primary" size="md" stretch="auto" label="Retry" onClick={handleRetry} />
         </div>
       </div>
     </div>

apps/space/components/issues/filters/applied-filters/priority.tsx

@@ -4,9 +4,9 @@
  * See the LICENSE file for details.
  */
 
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon } from "@plane/blocks/icons";
 import { CloseOutline } from "@makeplane/propel/icons";
-import type { TIssuePriorities } from "@plane/propel/icons";
+import type { TIssuePriorities } from "@plane/blocks/icons";
 
 type Props = {
   handleRemove: (val: string) => void;

apps/space/components/issues/filters/applied-filters/state.tsx

@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // plane imports
 import { EIconSize } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon } from "@plane/blocks/icons";
 import { CloseOutline } from "@makeplane/propel/icons";
 // hooks
 import { useStates } from "@/hooks/store/use-state";

apps/space/components/issues/filters/helpers/dropdown.tsx

@@ -9,7 +9,7 @@ import type { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";
 import { Popover, Transition } from "@headlessui/react";
 // ui
-import { Button } from "@plane/propel/button";
+import { Button } from "@makeplane/propel/elements/button";
 
 type Props = {
   children: React.ReactNode;
@@ -35,7 +35,7 @@ export function FiltersDropdown(props: Props) {
         return (
           <>
             <Popover.Button as={React.Fragment}>
-              <Button ref={setReferenceElement} variant="secondary">
+              <Button ref={setReferenceElement} variant="secondary" size="sm" stretch="auto">
                 <div className={`${open ? "text-primary" : "text-secondary"}`}>
                   <span>{title}</span>
                 </div>

apps/space/components/issues/filters/labels.tsx

@@ -6,7 +6,7 @@
 
 import React, { useState } from "react";
 // plane imports
-import { Loader } from "@plane/ui";
+import { Loader } from "@plane/blocks/loader";
 // types
 import type { IIssueLabel } from "@/types/issue";
 // local imports

apps/space/components/issues/filters/priority.tsx

@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { ISSUE_PRIORITY_FILTERS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon } from "@plane/blocks/icons";
 // local imports
 import { FilterHeader } from "./helpers/filter-header";
 import { FilterOption } from "./helpers/filter-option";

apps/space/components/issues/filters/state.tsx

@@ -8,8 +8,8 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 // ui
 import { EIconSize } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
-import { Loader } from "@plane/ui";
+import { StateGroupIcon } from "@plane/blocks/icons";
+import { Loader } from "@plane/blocks/loader";
 // hooks
 import { useStates } from "@/hooks/store/use-state";
 // local imports

apps/space/components/issues/issue-layouts/kanban/block.tsx

@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { Link } from "react-router";
 import { useParams, useSearchParams } from "next/navigation";
 // plane types
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IIssueDisplayProperties } from "@plane/types";
 // plane ui
 // plane utils
@@ -57,7 +57,7 @@ const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props:
       </WithDisplayPropertiesHOC>
 
       <div className="mb-1.5 line-clamp-1 w-full text-13 text-primary">
-        <Tooltip tooltipContent={issue.name}>
+        <Tooltip label={issue.name}>
           <span>{issue.name}</span>
         </Tooltip>
       </div>

apps/space/components/issues/issue-layouts/list/block.tsx

@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { Link } from "react-router";
 import { useParams, useSearchParams } from "next/navigation";
 // plane types
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IIssueDisplayProperties } from "@plane/types";
 // plane ui
 // plane utils
@@ -79,7 +79,7 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
             onClick={handleIssuePeekOverview}
             className="w-full cursor-pointer truncate text-13 text-primary"
           >
-            <Tooltip tooltipContent={issue.name} position="top-start">
+            <Tooltip label={issue.name} side="top" align="start">
               <p className="truncate">{issue.name}</p>
             </Tooltip>
           </Link>

apps/space/components/issues/issue-layouts/properties/all-properties.tsx

@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { AttachOutline, LinkOutline, ViewsOutline } from "@makeplane/propel/icons";
 // plane imports
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
 import type { IIssueDisplayProperties } from "@plane/types";
 import { cn } from "@plane/utils";
 // components
@@ -137,7 +137,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
         displayPropertyKey="sub_issue_count"
         shouldRenderProperty={(properties) => !!properties.sub_issue_count && !!issue.sub_issues_count}
       >
-        <Tooltip tooltipHeading="Sub-work items" tooltipContent={`${issue.sub_issues_count}`}>
+        <Tooltip label={`Sub-work items: ${issue.sub_issues_count}`}>
           <div
             className={cn(
               "flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1",
@@ -158,7 +158,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
         displayPropertyKey="attachment_count"
         shouldRenderProperty={(properties) => !!properties.attachment_count && !!issue.attachment_count}
       >
-        <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+        <Tooltip label={`Attachments: ${issue.attachment_count}`}>
           <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1">
             <AttachOutline className="h-3 w-3 flex-shrink-0" />
             <div className="text-11">{issue.attachment_count}</div>
@@ -172,7 +172,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
         displayPropertyKey="link"
         shouldRenderProperty={(properties) => !!properties.link && !!issue.link_count}
       >
-        <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+        <Tooltip label={`Links: ${issue.link_count}`}>
           <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1">
             <LinkOutline className="h-3 w-3 flex-shrink-0" />
             <div className="text-11">{issue.link_count}</div>