Skip to content

refactor(propel): move off the deprecated Base UI beta, so the apps stop shipping two copies #256

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
houko merged 5 commits into from
Sep 19, 2026
Merged

refactor(propel): move off the deprecated Base UI beta, so the apps stop shipping two copies #256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7ba28db
refactor(propel): move off the deprecated Base UI beta onto @base-ui/…
houko Sep 18, 2026
635289d
fix(propel): ship the separator subpath and mark the package side-eff…
houko Sep 18, 2026
058d5b5
chore: bump the workspace version, which check-version requires of ev…
houko Sep 18, 2026
51a8a6b
refactor: retire the duplicate @pace/ui components onto @pace/propel …
houko Sep 19, 2026
c9a6245
refactor(web): take the last @pace/ui Loader onto propel's Skeleton
houko Sep 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/admin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "admin",
"version": "1.4.39",
"version": "1.4.40",
"private": true,
"description": "Admin UI for Pace",
"license": "AGPL-3.0",
Expand Down
3 changes: 2 additions & 1 deletion apps/space/core/components/account/auth-forms/email.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ import { CloseCircleOutline, WarningCircleOutline } from "@makeplane/propel/icon
import { Button } from "@pace/propel/button";
import type { IEmailCheckData } from "@pace/types";
// ui
import { Input, Spinner } from "@pace/ui";
import { Spinner } from "@pace/propel/spinners";
import { Input } from "@pace/propel/input";
// helpers
import { checkEmailValidity, cn } from "@pace/utils";

Expand Down
4 changes: 3 additions & 1 deletion apps/space/core/components/account/auth-forms/password.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ import { CloseCircleOutline, HideOutline, ShowOutline } from "@makeplane/propel/
import { API_BASE_URL, EAuthModes, EAuthSteps, E_PASSWORD_STRENGTH } from "@pace/constants";
import { Button } from "@pace/propel/button";
import { AuthService } from "@pace/services";
import { Input, Spinner, PasswordStrengthIndicator } from "@pace/ui";
import { Spinner } from "@pace/propel/spinners";
import { Input } from "@pace/propel/input";
import { PasswordStrengthIndicator } from "@pace/ui";
import { getPasswordStrength } from "@pace/utils";
// types

Expand Down
3 changes: 2 additions & 1 deletion apps/space/core/components/account/auth-forms/unique-code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import { CloseCircleOutline, TickCircleOutline } from "@makeplane/propel/icons";
import { API_BASE_URL, EAuthModes } from "@pace/constants";
import { Button } from "@pace/propel/button";
import { AuthService } from "@pace/services";
import { Input, Spinner } from "@pace/ui";
import { Spinner } from "@pace/propel/spinners";
import { Input } from "@pace/propel/input";
// hooks
import { useTimer } from "@pace/hooks";
// types
Expand Down
12 changes: 6 additions & 6 deletions apps/space/core/components/issues/filters/labels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

import React, { useState } from "react";
// pace imports
import { Loader } from "@pace/ui";
import { Skeleton } from "@pace/propel/skeleton";
// types
import type { IIssueLabel } from "@/types/issue";
// local imports
Expand Down Expand Up @@ -76,11 +76,11 @@ export function FilterLabels(props: Props) {
<p className="text-11 text-placeholder italic">No matches found</p>
)
) : (
<Loader className="space-y-2">
<Loader.Item height="20px" />
<Loader.Item height="20px" />
<Loader.Item height="20px" />
</Loader>
<Skeleton className="space-y-2">
<Skeleton.Item height="20px" />
<Skeleton.Item height="20px" />
<Skeleton.Item height="20px" />
</Skeleton>
)}
</div>
)}
Expand Down
12 changes: 6 additions & 6 deletions apps/space/core/components/issues/filters/state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { observer } from "mobx-react";
// ui
import { EIconSize } from "@pace/constants";
import { StateGroupIcon } from "@pace/propel/icons";
import { Loader } from "@pace/ui";
import { Skeleton } from "@pace/propel/skeleton";
// hooks
import { useStates } from "@/hooks/store/use-state";
// local imports
Expand Down Expand Up @@ -76,11 +76,11 @@ export const FilterState = observer(function FilterState(props: Props) {
<p className="text-11 text-placeholder italic">No matches found</p>
)
) : (
<Loader className="space-y-2">
<Loader.Item height="20px" />
<Loader.Item height="20px" />
<Loader.Item height="20px" />
</Loader>
<Skeleton className="space-y-2">
<Skeleton.Item height="20px" />
<Skeleton.Item height="20px" />
<Skeleton.Item height="20px" />
</Skeleton>
)}
</div>
)}
Expand Down
3 changes: 1 addition & 2 deletions apps/space/core/components/issues/issue-layouts/properties/member.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import { observer } from "mobx-react";
// icons
import type { LucideIcon } from "lucide-react";
import { MembersOutline } from "@makeplane/propel/icons";
// pace ui
import { Avatar, AvatarGroup } from "@pace/ui";
import { Avatar, AvatarGroup } from "@pace/propel/avatar";
// pace utils
import { cn } from "@pace/utils";
// hooks
Expand Down
2 changes: 1 addition & 1 deletion apps/space/core/components/issues/issue-layouts/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import { isNil } from "lodash-es";
// types
import { EIconSize, ISSUE_PRIORITIES } from "@pace/constants";
import { Avatar } from "@pace/propel/avatar";
import { CycleGroupIcon, PriorityIcon, StateGroupIcon } from "@pace/propel/icons";
import { CyclesOutline, ModuleOutline } from "@makeplane/propel/icons";
import type {
Expand All @@ -17,7 +18,6 @@ import type {
TGroupedIssues,
} from "@pace/types";
// ui
import { Avatar } from "@pace/ui";
// components
// constants
// stores
Expand Down
2 changes: 1 addition & 1 deletion apps/space/core/components/issues/navbar/user-avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import { LogOutOutline } from "@makeplane/propel/icons";
import { Popover, Transition } from "@headlessui/react";
// pace imports
import { API_BASE_URL } from "@pace/constants";
import { Avatar } from "@pace/propel/avatar";
import { Button } from "@pace/propel/button";
import { AuthService } from "@pace/services";
import { Avatar } from "@pace/ui";
import { getFileURL } from "@pace/utils";
// helpers
import { queryParamGenerator } from "@/helpers/query-param-generator";
Expand Down
26 changes: 13 additions & 13 deletions apps/space/core/components/issues/peek-overview/full-screen-peek-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

import { observer } from "mobx-react";
// pace imports
import { Loader } from "@pace/ui";
import { Skeleton } from "@pace/propel/skeleton";
// types
import type { IIssue } from "@/types/issue";
// local imports
Expand Down Expand Up @@ -44,14 +44,14 @@ export const FullScreenPeekView = observer(function FullScreenPeekView(props: Pr
</div>
</div>
) : (
<Loader className="px-6">
<Loader.Item height="30px" />
<Skeleton className="px-6">

@github-actions github-actions Bot Sep 19, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React Doctor · react-doctor/duplicate-jsx-subtree (warning)

2 copies of this 6-node JSX tree appear across 2 files, repeating about 8 lines. Composition path: FullScreenPeekView > div > div > Skeleton.

Fix → Consider extracting a shared component if these trees represent the same UI concept. Keep them separate when the resemblance is incidental or the variants are likely to evolve independently.

Docs

<Skeleton.Item height="30px" />
<div className="mt-3 space-y-2">
<Loader.Item height="20px" width="70%" />
<Loader.Item height="20px" width="60%" />
<Loader.Item height="20px" width="60%" />
<Skeleton.Item height="20px" width="70%" />
<Skeleton.Item height="20px" width="60%" />
<Skeleton.Item height="20px" width="60%" />
</div>
</Loader>
</Skeleton>
)}
</div>
<div className="col-span-3 h-full w-full overflow-y-auto">
Expand All @@ -60,12 +60,12 @@ export const FullScreenPeekView = observer(function FullScreenPeekView(props: Pr
{issueDetails ? (
<PeekOverviewIssueProperties issueDetails={issueDetails} />
) : (
<Loader className="mt-11 space-y-4">
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
</Loader>
<Skeleton className="mt-11 space-y-4">
<Skeleton.Item height="30px" />
<Skeleton.Item height="30px" />
<Skeleton.Item height="30px" />
<Skeleton.Item height="30px" />
</Skeleton>
)}
</div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions apps/space/core/components/issues/peek-overview/side-peek-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

import { observer } from "mobx-react";
// pace imports
import { Loader } from "@pace/ui";
import { Skeleton } from "@pace/propel/skeleton";
// store hooks
import { usePublish } from "@/hooks/store/publish";
// types
Expand Down Expand Up @@ -53,14 +53,14 @@ export const SidePeekView = observer(function SidePeekView(props: Props) {
)}
</div>
) : (
<Loader className="px-6">
<Loader.Item height="30px" />
<Skeleton className="px-6">
<Skeleton.Item height="30px" />
<div className="mt-3 space-y-2">
<Loader.Item height="20px" width="70%" />
<Loader.Item height="20px" width="60%" />
<Loader.Item height="20px" width="60%" />
<Skeleton.Item height="20px" width="70%" />
<Skeleton.Item height="20px" width="60%" />
<Skeleton.Item height="20px" width="60%" />
</div>
</Loader>
</Skeleton>
)}
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/space/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "space",
"version": "1.4.39",
"version": "1.4.40",
"private": true,
"license": "AGPL-3.0",
"type": "module",
Expand Down
22 changes: 11 additions & 11 deletions apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import useSWR from "swr";
import { useTranslation } from "@pace/i18n";
import type { TIssue } from "@pace/types";
import { EIssueServiceType } from "@pace/types";
import { Loader } from "@pace/ui";
import { Skeleton } from "@pace/propel/skeleton";
// assets
import emptyIssueDark from "@/app/assets/empty-state/search/issues-dark.webp?url";
import emptyIssueLight from "@/app/assets/empty-state/search/issues-light.webp?url";
Expand Down Expand Up @@ -107,20 +107,20 @@ export const IssueDetailsPage = observer(function IssueDetailsPage({ params }: R

if (issueLoader) {
return (
<Loader className="flex h-full gap-5 p-5">
<Skeleton className="flex h-full gap-5 p-5">

@github-actions github-actions Bot Sep 19, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React Doctor · react-doctor/duplicate-jsx-subtree (warning)

2 copies of this 11-node JSX tree appear across 2 files, repeating about 14 lines. Composition path: IssueDetailsPage > Skeleton.

Fix → Consider extracting a shared component if these trees represent the same UI concept. Keep them separate when the resemblance is incidental or the variants are likely to evolve independently.

Docs

<div className="basis-2/3 space-y-2">
<Loader.Item height="30px" width="40%" />
<Loader.Item height="15px" width="60%" />
<Loader.Item height="15px" width="60%" />
<Loader.Item height="15px" width="40%" />
<Skeleton.Item height="30px" width="40%" />
<Skeleton.Item height="15px" width="60%" />
<Skeleton.Item height="15px" width="60%" />
<Skeleton.Item height="15px" width="40%" />
</div>
<div className="basis-1/3 space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Skeleton.Item height="30px" />
<Skeleton.Item height="30px" />
<Skeleton.Item height="30px" />
<Skeleton.Item height="30px" />
</div>
</Loader>
</Skeleton>
);
}

Expand Down
22 changes: 11 additions & 11 deletions ...ojects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { Banner } from "@makeplane/propel/components/banner";
import { ArchiveOutline } from "@makeplane/propel/icons";
import { useTranslation } from "@pace/i18n";
import { Button } from "@pace/propel/button";
import { Loader } from "@pace/ui";
import { Skeleton } from "@pace/propel/skeleton";
// components
import { PageHead } from "@/components/core/page-title";
import { IssueDetailRoot } from "@/components/issues/issue-detail";
Expand Down Expand Up @@ -53,20 +53,20 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
<>
<PageHead title={pageTitle} />
{issueLoader ? (
<Loader className="flex h-full gap-5 p-5">
<Skeleton className="flex h-full gap-5 p-5">
<div className="basis-2/3 space-y-2">
<Loader.Item height="30px" width="40%" />
<Loader.Item height="15px" width="60%" />
<Loader.Item height="15px" width="60%" />
<Loader.Item height="15px" width="40%" />
<Skeleton.Item height="30px" width="40%" />
<Skeleton.Item height="15px" width="60%" />
<Skeleton.Item height="15px" width="60%" />
<Skeleton.Item height="15px" width="40%" />
</div>
<div className="basis-1/3 space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Skeleton.Item height="30px" />
<Skeleton.Item height="30px" />
<Skeleton.Item height="30px" />
<Skeleton.Item height="30px" />
</div>
</Loader>
</Skeleton>
) : (
<>
<Banner
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/account/auth-forms/email.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
import { useTranslation } from "@pace/i18n";
import { Button } from "@pace/propel/button";
import type { IEmailCheckData } from "@pace/types";
import { Spinner } from "@pace/ui";
import { Spinner } from "@pace/propel/spinners";
import { checkEmailValidity } from "@pace/utils";
// helpers
type TAuthEmailForm = {
Expand Down
3 changes: 2 additions & 1 deletion apps/web/core/components/account/auth-forms/password.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@pace/constants";
import { useTranslation } from "@pace/i18n";
import { Button } from "@pace/propel/button";
import { PasswordStrengthIndicator, Spinner } from "@pace/ui";
import { Spinner } from "@pace/propel/spinners";
import { PasswordStrengthIndicator } from "@pace/ui";
import { getPasswordStrength } from "@pace/utils";
// components
import { ForgotPasswordPopover } from "@/components/account/auth-forms/forgot-password-popover";
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/account/auth-forms/unique-code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Input, InputGroup } from "@makeplane/propel/components/input";
import { API_BASE_URL } from "@pace/constants";
import { useTranslation } from "@pace/i18n";
import { Button } from "@pace/propel/button";
import { Spinner } from "@pace/ui";
import { Spinner } from "@pace/propel/spinners";
// constants
// helpers
import { EAuthModes } from "@/helpers/authentication.helper";
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/analytics/insight-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
// pace package imports
import React from "react";
import type { IAnalyticsResponseFields } from "@pace/types";
import { Loader } from "@pace/ui";
import { Skeleton } from "@pace/propel/skeleton";

export type InsightCardProps = {
data?: IAnalyticsResponseFields;
Expand All @@ -27,7 +27,7 @@ function InsightCard(props: InsightCardProps) {
<div className="text-20 font-bold text-primary">{count}</div>
</div>
) : (
<Loader.Item height="50px" width="100%" />
<Skeleton.Item height="50px" width="100%" />
)}
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/analytics/insight-table/loader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import * as React from "react";
import type { ColumnDef } from "@tanstack/react-table";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@pace/propel/table";
import { Loader } from "@pace/ui";
import { Skeleton } from "@pace/propel/skeleton";

interface TableSkeletonProps {
columns: ColumnDef<any>[];
Expand All @@ -31,7 +31,7 @@ export function TableLoader({ columns, rows }: TableSkeletonProps) {
<TableRow key={rowIndex}>
{columns.map((_, colIndex) => (
<TableCell key={colIndex}>
<Loader.Item height="20px" width="100%" />
<Skeleton.Item height="20px" width="100%" />
</TableCell>
))}
</TableRow>
Expand Down
Loading
Loading