Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-08-29 10:08:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove unused @plane/ui P1 primitives

Browse Source 
Delete ToggleSwitch, Checkbox, circular/linear progress, and Tooltip from
@plane/ui. Nothing in the monorepo imported them after the merged P1 PRs.
Button source stays internal for InputColorPicker.
This commit is contained in:
anmolsinghbhatia
2026-08-28 16:48:11 +05:30
parent 3478d4fac4
commit f2eaf42d25
10 changed files with 0 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/ui/src/button/index.ts
View File

@@ -1,7 +0,0 @@
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
export * from "./toggle-switch";

62
packages/ui/src/button/toggle-switch.tsx
View File

@@ -1,62 +0,0 @@
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
import { Switch } from "@headlessui/react";
// helpers
import { cn } from "../utils";
interface IToggleSwitchProps {
value: boolean;
onChange: (value: boolean) => void;
label?: string;
size?: "sm" | "md" | "lg";
disabled?: boolean;
className?: string;
}
function ToggleSwitch(props: IToggleSwitchProps) {
const { value, onChange, label, size = "sm", disabled, className } = props;
return (
<Switch
checked={value}
disabled={disabled}
onChange={onChange}
className={cn(
"relative inline-flex h-6 w-10 flex-shrink-0 cursor-pointer rounded-full border border-subtle bg-layer-1 transition-colors duration-200 ease-in-out focus:outline-none",
{
"h-4 w-7": size === "sm",
"h-5 w-9": size === "md",
"bg-accent-primary": value && !disabled,
"bg-(--text-color-icon-placeholder)": !value && !disabled,
"cursor-not-allowed bg-accent-primary opacity-50": value && disabled,
"cursor-not-allowed bg-(--text-color-icon-placeholder) opacity-50": !value && disabled,
},
className
)}
>
<span className="sr-only">{label}</span>
<span
aria-hidden="true"
className={cn(
"inline-block h-5 w-5 transform self-center rounded-full bg-(--text-color-icon-on-color) ring-0 transition duration-200 ease-in-out",
{
"h-3 w-3 translate-x-3.5": size === "sm" && value,
"h-3 w-3 translate-x-0.5": size === "sm" && !value,
"h-4 w-4 translate-x-4": size === "md" && value,
"h-4 w-4 translate-x-0.5": size === "md" && !value,
"translate-x-4": size === "lg" && value,
"translate-x-0.5": size === "lg" && !value,
}
)}
/>
</Switch>
);
}
ToggleSwitch.displayName = "plane-ui-toggle-switch";
export { ToggleSwitch };

96
packages/ui/src/form-fields/checkbox.tsx
View File

@@ -1,96 +0,0 @@
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
import * as React from "react";
// helpers
import { cn } from "../utils";
export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
containerClassName?: string;
iconClassName?: string;
indeterminate?: boolean;
}
const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.ForwardedRef<HTMLInputElement>) {
const {
id,
name,
checked,
indeterminate = false,
disabled,
containerClassName,
iconClassName,
className,
...rest
} = props;
return (
<div className={cn("relative flex flex-shrink-0 gap-2", containerClassName)}>
<input
id={id}
ref={ref}
type="checkbox"
name={name}
checked={checked}
className={cn(
"size-4 shrink-0 cursor-pointer appearance-none rounded-[3px] border focus:outline-1 focus:outline-offset-4 focus:outline-accent-strong",
{
"cursor-not-allowed border-subtle bg-layer-1": disabled,
"border-strong bg-transparent hover:border-strong-1": !disabled,
"border-accent-strong-40 hover:border-accent-strong-40 bg-accent-primary hover:bg-accent-primary/80":
!disabled && (checked || indeterminate),
"border-none": checked,
},
className
)}
disabled={disabled}
{...rest}
/>
<svg
className={cn(
"pointer-events-none absolute top-1/2 left-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 p-0.5 text-on-color outline-none",
{
block: checked,
"text-placeholder opacity-40": disabled,
},
iconClassName
)}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
>
<polyline points="20 6 9 17 4 12" />
</svg>
<svg
className={cn(
"pointer-events-none absolute top-1/2 left-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 stroke-white p-0.5 outline-none",
{
"stroke-placeholder opacity-40": disabled,
block: indeterminate && !checked,
},
iconClassName
)}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 8 8"
fill="none"
stroke="currentColor"
strokeWidth="3"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5.75 4H2.25" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
);
});
Checkbox.displayName = "form-checkbox-field";
export { Checkbox };

1
packages/ui/src/form-fields/index.ts
View File

@@ -7,5 +7,4 @@
export * from "./input";
export * from "./textarea";
export * from "./input-color-picker";
export * from "./checkbox";
export * from "./password";

3
packages/ui/src/index.ts
View File

@@ -6,7 +6,6 @@
export * from "./avatar";
export * from "./breadcrumbs";
export * from "./button";
export * from "./card";
export * from "./collapsible";
export * from "./content-wrapper";
@@ -22,12 +21,10 @@ export * from "./link";
export * from "./loader";
export * from "./modals";
export * from "./popovers";
export * from "./progress";
export * from "./row";
export * from "./sortable";
export * from "./spinners";
export * from "./tables";
export * from "./tag";
export * from "./tooltip";
export * from "./utils";
export * from "./oauth";

90
packages/ui/src/progress/circular-progress-indicator.tsx
View File

@@ -1,90 +0,0 @@
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
import React from "react";
interface ICircularProgressIndicator {
size: number;
percentage: number;
strokeWidth?: number;
strokeColor?: string;
children?: React.ReactNode;
}
export function CircularProgressIndicator(props: ICircularProgressIndicator) {
const { size = 40, percentage = 25, strokeWidth = 6, strokeColor = "stroke-success-secondary", children } = props;
const sqSize = size;
const radius = (size - strokeWidth) / 2;
const viewBox = `0 0 ${sqSize} ${sqSize}`;
const dashArray = radius * Math.PI * 2;
const dashOffset = dashArray - (dashArray * percentage) / 100;
return (
<div className="relative">
<svg width={size} height={size} viewBox={viewBox} fill="none">
<circle
className="fill-none stroke-(--border-color-strong)"
cx={size / 2}
cy={size / 2}
r={radius}
strokeWidth={`${strokeWidth}px`}
style={{ filter: "url(#filter0_bi_377_19141)" }}
/>
{/* <defs>
<filter
id="filter0_bi_377_19141"
x="-3.57544"
y="-3.57422"
width="45.2227"
height="45.2227"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_377_19141" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_377_19141" result="shape" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dx="1" dy="1" />
<feGaussianBlur stdDeviation="2" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix type="matrix" values="0 0 0 0 0.63125 0 0 0 0 0.6625 0 0 0 0 0.75 0 0 0 0.35 0" />
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_377_19141" />
</filter>
</defs> */}
<circle
className={`fill-none ${strokeColor}`}
cx={size / 2}
cy={size / 2}
r={radius}
strokeWidth={`${strokeWidth}px`}
transform={`rotate(-90 ${size / 2} ${size / 2})`}
style={{
strokeDasharray: dashArray,
strokeDashoffset: dashOffset,
}}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<div
className="absolute"
style={{
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
}}
>
{children}
</div>
</div>
);
}

8
packages/ui/src/progress/index.ts
View File

@@ -1,8 +0,0 @@
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
export * from "./linear-progress-indicator";
export * from "./circular-progress-indicator";

61
packages/ui/src/progress/linear-progress-indicator.tsx
View File

@@ -1,61 +0,0 @@
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
import React from "react";
import { Tooltip } from "@plane/propel/tooltip";
import { cn } from "../utils";
type Props = {
data: any;
noTooltip?: boolean;
inPercentage?: boolean;
size?: "sm" | "md" | "lg" | "xl";
className?: string;
barClassName?: string;
};
export function LinearProgressIndicator({
data,
noTooltip = false,
inPercentage = false,
size = "sm",
className = "",
barClassName = "",
}: Props) {
const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let progress = 0;
const bars = data.map((item: any) => {
const width = `${(item.value / total) * 100}%`;
if (width === "0%") return <></>;
const style = {
width,
backgroundColor: item.color,
};
progress += item.value;
if (noTooltip) return <div style={style} key={item.id} />;
else
return (
<Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}${inPercentage ? "%" : ""}`}>
<div style={style} className={cn("first:rounded-l-xs last:rounded-r-xs", barClassName)} />
</Tooltip>
);
});
return (
<div
className={cn("flex w-full items-center justify-between gap-[1px] rounded-xs", {
"h-2": size === "sm",
"h-3": size === "md",
"h-3.5": size === "lg",
"h-[14px]": size === "xl",
})}
>
<div className={cn("flex h-full w-full gap-[1.5px] rounded-xs bg-surface-2 p-[2px]", className)}>{bars}</div>
</div>
);
}

7
packages/ui/src/tooltip/index.ts
View File

@@ -1,7 +0,0 @@
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
export * from "./tooltip";

92
packages/ui/src/tooltip/tooltip.tsx
View File

@@ -1,92 +0,0 @@
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
* See the LICENSE file for details.
*/
import React, { useEffect, useRef, useState } from "react";
import { Tooltip as PropelTooltip } from "@plane/propel/tooltip";
import type { TPlacement } from "@plane/propel/utils";
/**
* Kept as an alias so existing `TPosition` consumers keep compiling.
*
* The previous Blueprint-backed implementation also accepted `bottom-left`,
* `left-top`, `top-right` and friends. Those have no equivalent in the design
* system's placement vocabulary (which spells them `bottom-start`, `top-end`, ...)
* and no call site in the repo used them.
*/
export type TPosition = TPlacement;
interface ITooltipProps {
tooltipHeading?: string;
tooltipContent: string | React.ReactNode;
position?: TPosition;
// React 19 defaults ReactElement's props to `unknown`; propel's Tooltip needs a
// named props shape, so mirror it here rather than casting at the call site.
children: React.ReactElement<Record<string, unknown>>;
disabled?: boolean;
className?: string;
openDelay?: number;
closeDelay?: number;
isMobile?: boolean;
renderByDefault?: boolean;
}
export function Tooltip({
tooltipHeading,
tooltipContent,
position = "top",
children,
disabled = false,
className = "",
openDelay = 200,
closeDelay,
isMobile = false,
//FIXME: tooltip should always render on hover and not by default, this is a temporary fix
renderByDefault = true,
}: ITooltipProps) {
const toolTipRef = useRef<HTMLDivElement | null>(null);
const [shouldRender, setShouldRender] = useState(renderByDefault);
const onHover = () => {
setShouldRender(true);
};
useEffect(() => {
const element = toolTipRef.current as any;
if (!element) return;
element.addEventListener("mouseenter", onHover);
return () => {
element?.removeEventListener("mouseenter", onHover);
};
}, [toolTipRef, shouldRender]);
if (!shouldRender) {
return (
<div ref={toolTipRef} className="flex h-full items-center">
{children}
</div>
);
}
return (
<PropelTooltip
tooltipHeading={tooltipHeading}
tooltipContent={tooltipContent}
position={position}
disabled={disabled}
className={className}
openDelay={openDelay}
closeDelay={closeDelay}
isMobile={isMobile}
>
{children}
</PropelTooltip>
);
}