diff --git a/apps/admin/app/(all)/(home)/auth-header.tsx b/apps/admin/app/(all)/(home)/auth-header.tsx new file mode 100644 index 0000000000..50fa066cd8 --- /dev/null +++ b/apps/admin/app/(all)/(home)/auth-header.tsx @@ -0,0 +1,12 @@ +"use client"; + +import Link from "next/link"; +import { PlaneLockup } from "@plane/ui"; + +export const AuthHeader = () => ( +
+ + + +
+); diff --git a/apps/admin/app/(all)/(home)/layout.tsx b/apps/admin/app/(all)/(home)/layout.tsx index dd9c1b0dfc..25638c6776 100644 --- a/apps/admin/app/(all)/(home)/layout.tsx +++ b/apps/admin/app/(all)/(home)/layout.tsx @@ -1,33 +1,9 @@ "use client"; -import Image from "next/image"; -import Link from "next/link"; -import { useTheme } from "next-themes"; -import { PlaneLockup } from "@plane/ui"; -// logo assets -import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg"; -import PlaneBackgroundPattern from "public/auth/background-pattern.svg"; - export default function RootLayout({ children }: { children: React.ReactNode }) { - const { resolvedTheme } = useTheme(); - - const patternBackground = resolvedTheme === "light" ? PlaneBackgroundPattern : PlaneBackgroundPatternDark; - return ( -
-
-
-
- - - -
-
-
- Plane background pattern -
-
{children}
-
+
+ {children}
); } diff --git a/apps/admin/app/(all)/(home)/page.tsx b/apps/admin/app/(all)/(home)/page.tsx index 80ea40ee61..e6ebdf4559 100644 --- a/apps/admin/app/(all)/(home)/page.tsx +++ b/apps/admin/app/(all)/(home)/page.tsx @@ -2,8 +2,8 @@ import { observer } from "mobx-react"; // components +import { LogoSpinner } from "@/components/common/logo-spinner"; import { InstanceFailureView } from "@/components/instance/failure"; -import { InstanceLoading } from "@/components/instance/loading"; import { InstanceSetupForm } from "@/components/instance/setup-form"; // hooks import { useInstance } from "@/hooks/store"; @@ -17,46 +17,24 @@ const HomePage = () => { // if instance is not fetched, show loading if (!instance && !error) { return ( -
- +
+
); } // if instance fetch fails, show failure view if (error) { - return ( -
- -
- ); + return ; } // if instance is fetched and setup is not done, show setup form if (instance && !instance?.is_setup_done) { - return ( -
- -
- ); + return ; } // if instance is fetched and setup is done, show sign in form - return ( -
-
-
-

- Manage your Plane instance -

-

- Configure instance-wide settings to secure your instance -

-
- -
-
- ); + return ; }; export default observer(HomePage); diff --git a/apps/admin/app/(all)/(home)/sign-in-form.tsx b/apps/admin/app/(all)/(home)/sign-in-form.tsx index 12b250a93b..a5a6ca3e33 100644 --- a/apps/admin/app/(all)/(home)/sign-in-form.tsx +++ b/apps/admin/app/(all)/(home)/sign-in-form.tsx @@ -10,7 +10,9 @@ import { Button, Input, Spinner } from "@plane/ui"; // components import { Banner } from "@/components/common/banner"; // local components +import { FormHeader } from "../../../core/components/instance/form-header"; import { AuthBanner } from "./auth-banner"; +import { AuthHeader } from "./auth-header"; import { authErrorHandler } from "./auth-helpers"; // service initialization @@ -101,78 +103,91 @@ export const InstanceSignInForm: FC = () => { }, [errorCode]); return ( -
setIsSubmitting(true)} - onError={() => setIsSubmitting(false)} - > - {errorData.type && errorData?.message ? ( - - ) : ( - <>{errorInfo && setErrorInfo(value)} />} - )} - - -
- - handleFormChange("email", e.target.value)} - autoComplete="on" - autoFocus - /> -
- -
- -
- handleFormChange("password", e.target.value)} - autoComplete="on" + <> + +
+
+ - {showPassword ? ( - - ) : ( - - )} + setIsSubmitting(true)} + onError={() => setIsSubmitting(false)} + > + {errorData.type && errorData?.message ? ( + + ) : ( + <> + {errorInfo && setErrorInfo(value)} />} + + )} + + +
+ + handleFormChange("email", e.target.value)} + autoComplete="on" + autoFocus + /> +
+ +
+ +
+ handleFormChange("password", e.target.value)} + autoComplete="on" + /> + {showPassword ? ( + + ) : ( + + )} +
+
+
+ +
+
-
- -
- + ); }; diff --git a/apps/admin/core/components/common/logo-spinner.tsx b/apps/admin/core/components/common/logo-spinner.tsx index 621b685b8b..fda44fca59 100644 --- a/apps/admin/core/components/common/logo-spinner.tsx +++ b/apps/admin/core/components/common/logo-spinner.tsx @@ -7,11 +7,11 @@ import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif"; export const LogoSpinner = () => { const { resolvedTheme } = useTheme(); - const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight; + const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark; return (
- logo + logo
); }; diff --git a/apps/admin/core/components/instance/failure.tsx b/apps/admin/core/components/instance/failure.tsx index 735a74c8db..fac8287a58 100644 --- a/apps/admin/core/components/instance/failure.tsx +++ b/apps/admin/core/components/instance/failure.tsx @@ -1,13 +1,15 @@ "use client"; import { FC } from "react"; +import { observer } from "mobx-react"; import Image from "next/image"; import { useTheme } from "next-themes"; import { Button } from "@plane/ui"; // assets +import { AuthHeader } from "@/app/(all)/(home)/auth-header"; import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg"; import InstanceFailureImage from "@/public/instance/instance-failure.svg"; -export const InstanceFailureView: FC = () => { +export const InstanceFailureView: FC = observer(() => { const { resolvedTheme } = useTheme(); const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage; @@ -17,22 +19,24 @@ export const InstanceFailureView: FC = () => { }; return ( -
-
-
- Plane Logo -

Unable to fetch instance details.

-

- We were unable to fetch the details of the instance.
- Fret not, it might just be a connectivity issue. -

-
-
- + <> + +
+
+
+ Plane Logo +

Unable to fetch instance details.

+

+ We were unable to fetch the details of the instance. Fret not, it might just be a connectivity issue. +

+
+
+ +
-
+ ); -}; +}); diff --git a/apps/admin/core/components/instance/form-header.tsx b/apps/admin/core/components/instance/form-header.tsx new file mode 100644 index 0000000000..d915ad293b --- /dev/null +++ b/apps/admin/core/components/instance/form-header.tsx @@ -0,0 +1,8 @@ +"use client"; + +export const FormHeader = ({ heading, subHeading }: { heading: string; subHeading: string }) => ( +
+ {heading} + {subHeading} +
+); diff --git a/apps/admin/core/components/instance/instance-not-ready.tsx b/apps/admin/core/components/instance/instance-not-ready.tsx index 874013f52f..2940e81e74 100644 --- a/apps/admin/core/components/instance/instance-not-ready.tsx +++ b/apps/admin/core/components/instance/instance-not-ready.tsx @@ -13,7 +13,7 @@ export const InstanceNotReady: FC = () => (

Welcome aboard Plane!

Plane Logo -

+

Get started by setting up your instance and workspace

diff --git a/apps/admin/core/components/instance/loading.tsx b/apps/admin/core/components/instance/loading.tsx index a21319d9ee..27dc4ae6e6 100644 --- a/apps/admin/core/components/instance/loading.tsx +++ b/apps/admin/core/components/instance/loading.tsx @@ -6,16 +6,12 @@ import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif"; export const InstanceLoading = () => { const { resolvedTheme } = useTheme(); - const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight; + + const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark; return ( -
-
-
- logo -

Fetching instance details...

-
-
+
+ logo
); }; diff --git a/apps/admin/core/components/instance/setup-form.tsx b/apps/admin/core/components/instance/setup-form.tsx index 899866a410..7d0b5e8c1b 100644 --- a/apps/admin/core/components/instance/setup-form.tsx +++ b/apps/admin/core/components/instance/setup-form.tsx @@ -10,7 +10,9 @@ import { AuthService } from "@plane/services"; import { Button, Checkbox, Input, PasswordStrengthIndicator, Spinner } from "@plane/ui"; import { getPasswordStrength } from "@plane/utils"; // components +import { AuthHeader } from "@/app/(all)/(home)/auth-header"; import { Banner } from "@/components/common/banner"; +import { FormHeader } from "@/components/instance/form-header"; // service initialization const authService = new AuthService(); @@ -131,227 +133,221 @@ export const InstanceSetupForm: FC = (props) => { const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length; return ( -
-
-
-

- Setup your Plane Instance -

-

- Post setup you will be able to manage this Plane instance. -

+ <> + +
+
+ + {errorData.type && + errorData?.message && + ![EErrorCodes.INVALID_EMAIL, EErrorCodes.INVALID_PASSWORD].includes(errorData.type) && ( + + )} +
setIsSubmitting(true)} + onError={() => setIsSubmitting(false)} + > + + + +
+
+ + handleFormChange("first_name", e.target.value)} + autoComplete="on" + autoFocus + /> +
+
+ + handleFormChange("last_name", e.target.value)} + autoComplete="on" + /> +
+
+ +
+ + handleFormChange("email", e.target.value)} + hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false} + autoComplete="on" + /> + {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && ( +

{errorData.message}

+ )} +
+ +
+ + handleFormChange("company_name", e.target.value)} + /> +
+ +
+ +
+ handleFormChange("password", e.target.value)} + hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false} + onFocus={() => setIsPasswordInputFocused(true)} + onBlur={() => setIsPasswordInputFocused(false)} + autoComplete="on" + /> + {showPassword.password ? ( + + ) : ( + + )} +
+ {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && ( +

{errorData.message}

+ )} + +
+ +
+ +
+ handleFormChange("confirm_password", e.target.value)} + placeholder="Confirm password" + className="w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400" + onFocus={() => setIsRetryPasswordInputFocused(true)} + onBlur={() => setIsRetryPasswordInputFocused(false)} + /> + {showPassword.retypePassword ? ( + + ) : ( + + )} +
+ {!!formData.confirm_password && + formData.password !== formData.confirm_password && + renderPasswordMatchError && Passwords don{"'"}t match} +
+ +
+
+ handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)} + checked={formData.is_telemetry_enabled} + /> +
+ +
+ +
+ +
+
- - {errorData.type && - errorData?.message && - ![EErrorCodes.INVALID_EMAIL, EErrorCodes.INVALID_PASSWORD].includes(errorData.type) && ( - - )} - -
setIsSubmitting(true)} - onError={() => setIsSubmitting(false)} - > - - - -
-
- - handleFormChange("first_name", e.target.value)} - autoComplete="on" - autoFocus - /> -
-
- - handleFormChange("last_name", e.target.value)} - autoComplete="on" - /> -
-
- -
- - handleFormChange("email", e.target.value)} - hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false} - autoComplete="on" - /> - {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && ( -

{errorData.message}

- )} -
- -
- - handleFormChange("company_name", e.target.value)} - /> -
- -
- -
- handleFormChange("password", e.target.value)} - hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false} - onFocus={() => setIsPasswordInputFocused(true)} - onBlur={() => setIsPasswordInputFocused(false)} - autoComplete="on" - /> - {showPassword.password ? ( - - ) : ( - - )} -
- {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && ( -

{errorData.message}

- )} - -
- -
- -
- handleFormChange("confirm_password", e.target.value)} - placeholder="Confirm password" - className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400" - onFocus={() => setIsRetryPasswordInputFocused(true)} - onBlur={() => setIsRetryPasswordInputFocused(false)} - /> - {showPassword.retypePassword ? ( - - ) : ( - - )} -
- {!!formData.confirm_password && - formData.password !== formData.confirm_password && - renderPasswordMatchError && Passwords don{"'"}t match} -
- -
-
- handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)} - checked={formData.is_telemetry_enabled} - /> -
- - - See More - -
- -
- -
-
-
+ ); }; diff --git a/apps/admin/public/images/logo-spinner-dark.gif b/apps/admin/public/images/logo-spinner-dark.gif index 4e0a1deb7b..8bd0832556 100644 Binary files a/apps/admin/public/images/logo-spinner-dark.gif and b/apps/admin/public/images/logo-spinner-dark.gif differ diff --git a/apps/admin/public/images/logo-spinner-light.gif b/apps/admin/public/images/logo-spinner-light.gif index 7c9bfbe0ed..8b57103142 100644 Binary files a/apps/admin/public/images/logo-spinner-light.gif and b/apps/admin/public/images/logo-spinner-light.gif differ diff --git a/apps/admin/public/plane-logos/black-horizontal-with-blue-logo.png b/apps/admin/public/plane-logos/black-horizontal-with-blue-logo.png deleted file mode 100644 index c14505a6f6..0000000000 Binary files a/apps/admin/public/plane-logos/black-horizontal-with-blue-logo.png and /dev/null differ diff --git a/apps/admin/public/plane-logos/blue-without-text.png b/apps/admin/public/plane-logos/blue-without-text.png deleted file mode 100644 index ea94aec792..0000000000 Binary files a/apps/admin/public/plane-logos/blue-without-text.png and /dev/null differ diff --git a/apps/admin/public/plane-logos/white-horizontal-with-blue-logo.png b/apps/admin/public/plane-logos/white-horizontal-with-blue-logo.png deleted file mode 100644 index 97560fb9f9..0000000000 Binary files a/apps/admin/public/plane-logos/white-horizontal-with-blue-logo.png and /dev/null differ diff --git a/apps/admin/styles/globals.css b/apps/admin/styles/globals.css index 258fa2d856..737015d261 100644 --- a/apps/admin/styles/globals.css +++ b/apps/admin/styles/globals.css @@ -135,28 +135,6 @@ --color-border-300: 212, 212, 212; /* strong border- 1 */ --color-border-400: 185, 185, 185; /* strong border- 2 */ - /* onboarding colors */ - --gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%); - --gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%); - --gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%); - --gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%); - - --color-onboarding-text-100: 23, 23, 23; - --color-onboarding-text-200: 58, 58, 58; - --color-onboarding-text-300: 82, 82, 82; - --color-onboarding-text-400: 163, 163, 163; - - --color-onboarding-background-100: 236, 241, 255; - --color-onboarding-background-200: 255, 255, 255; - --color-onboarding-background-300: 236, 241, 255; - --color-onboarding-background-400: 177, 206, 250; - - --color-onboarding-border-100: 229, 229, 229; - --color-onboarding-border-200: 217, 228, 255; - --color-onboarding-border-300: 229, 229, 229, 0.5; - - --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1); - /* toast theme */ --color-toast-success-text: 62, 155, 79; --color-toast-error-text: 220, 62, 66; @@ -244,27 +222,6 @@ --color-border-300: 46, 46, 46; /* strong border- 1 */ --color-border-400: 58, 58, 58; /* strong border- 2 */ - /* onboarding colors */ - --gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%); - --gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%); - --gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%); - - --color-onboarding-text-100: 237, 238, 240; - --color-onboarding-text-200: 176, 180, 187; - --color-onboarding-text-300: 118, 123, 132; - --color-onboarding-text-400: 105, 110, 119; - - --color-onboarding-background-100: 54, 58, 64; - --color-onboarding-background-200: 40, 42, 45; - --color-onboarding-background-300: 40, 42, 45; - --color-onboarding-background-400: 67, 72, 79; - - --color-onboarding-border-100: 54, 58, 64; - --color-onboarding-border-200: 54, 58, 64; - --color-onboarding-border-300: 34, 35, 38, 0.5; - - --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1); - /* toast theme */ --color-toast-success-text: 178, 221, 181; --color-toast-error-text: 206, 44, 49; diff --git a/apps/space/core/components/common/logo-spinner.tsx b/apps/space/core/components/common/logo-spinner.tsx index bac5e414b9..7b6a8e8ff9 100644 --- a/apps/space/core/components/common/logo-spinner.tsx +++ b/apps/space/core/components/common/logo-spinner.tsx @@ -8,7 +8,7 @@ import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif"; export const LogoSpinner = () => { const { resolvedTheme } = useTheme(); - const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight; + const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark; return (
diff --git a/packages/propel/src/charts/bar-chart/root.tsx b/packages/propel/src/charts/bar-chart/root.tsx index 8deb9fb48e..96efff32c7 100644 --- a/packages/propel/src/charts/bar-chart/root.tsx +++ b/packages/propel/src/charts/bar-chart/root.tsx @@ -68,7 +68,8 @@ export const BarChart = React.memo((props: T opacity={!!activeLegend && activeLegend !== bar.key ? 0.1 : 1} shape={(shapeProps: any) => { const shapeVariant = barShapeVariants[bar.shapeVariant ?? "bar"]; - return shapeVariant(shapeProps, bar, stackKeys) as any; + const node = shapeVariant(shapeProps, bar, stackKeys); + return React.isValidElement(node) ? node : <>{node}; }} className="[&_path]:transition-opacity [&_path]:duration-200" onMouseEnter={() => setActiveBar(bar.key)} diff --git a/packages/types/package.json b/packages/types/package.json index accf075aad..ab65dad159 100644 --- a/packages/types/package.json +++ b/packages/types/package.json @@ -26,9 +26,15 @@ "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"", "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist" }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, "devDependencies": { "@plane/eslint-config": "*", "@plane/typescript-config": "*", + "@types/react": "18.3.11", + "@types/react-dom": "18.3.1", "tsup": "8.4.0", "typescript": "5.8.3" } diff --git a/packages/ui/src/auth-form/auth-forgot-password.tsx b/packages/ui/src/auth-form/auth-forgot-password.tsx index 44f27a1f58..02df0380e3 100644 --- a/packages/ui/src/auth-form/auth-forgot-password.tsx +++ b/packages/ui/src/auth-form/auth-forgot-password.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; export interface AuthForgotPasswordProps { onForgotPassword?: () => void; diff --git a/packages/ui/src/auth-form/auth-form.tsx b/packages/ui/src/auth-form/auth-form.tsx index 7f0e584800..efa0a908db 100644 --- a/packages/ui/src/auth-form/auth-form.tsx +++ b/packages/ui/src/auth-form/auth-form.tsx @@ -1,6 +1,6 @@ import React, { useState, useMemo } from "react"; import { E_PASSWORD_STRENGTH } from "@plane/constants"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { Button } from "../button/button"; import { Spinner } from "../spinners/circular-spinner"; import { AuthConfirmPasswordInput } from "./auth-confirm-password-input"; diff --git a/packages/ui/src/auth-form/auth-input.tsx b/packages/ui/src/auth-form/auth-input.tsx index 2972ce393b..fab3b693cc 100644 --- a/packages/ui/src/auth-form/auth-input.tsx +++ b/packages/ui/src/auth-form/auth-input.tsx @@ -1,6 +1,6 @@ import { Eye, EyeOff } from "lucide-react"; import React, { useState } from "react"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { Input } from "../form-fields/input"; export interface AuthInputProps extends Omit, "autoComplete"> { diff --git a/packages/ui/src/avatar/avatar-group.tsx b/packages/ui/src/avatar/avatar-group.tsx index 501f694900..7d7d0c8f0a 100644 --- a/packages/ui/src/avatar/avatar-group.tsx +++ b/packages/ui/src/avatar/avatar-group.tsx @@ -2,7 +2,7 @@ import React from "react"; // ui import { Tooltip } from "../tooltip"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; // types import { TAvatarSize, getSizeInfo, isAValidNumber } from "./avatar"; diff --git a/packages/ui/src/avatar/avatar.tsx b/packages/ui/src/avatar/avatar.tsx index 088f11fc03..4ba9dc324c 100644 --- a/packages/ui/src/avatar/avatar.tsx +++ b/packages/ui/src/avatar/avatar.tsx @@ -2,7 +2,7 @@ import React from "react"; // ui import { Tooltip } from "../tooltip"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; export type TAvatarSize = "sm" | "md" | "base" | "lg" | number; diff --git a/packages/ui/src/badge/badge.tsx b/packages/ui/src/badge/badge.tsx index 73c12f3e2a..93f2d6bdfe 100644 --- a/packages/ui/src/badge/badge.tsx +++ b/packages/ui/src/badge/badge.tsx @@ -1,7 +1,7 @@ import * as React from "react"; // helpers import { getIconStyling, getBadgeStyling, TBadgeVariant, TBadgeSizes } from "./helper"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; export interface BadgeProps extends React.ButtonHTMLAttributes { variant?: TBadgeVariant; diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx index af0ba9b4f3..9e5b88b5d9 100644 --- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx +++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx @@ -1,6 +1,6 @@ import { ChevronRight } from "lucide-react"; import * as React from "react"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { Tooltip } from "../tooltip"; type BreadcrumbsProps = { diff --git a/packages/ui/src/breadcrumbs/navigation-dropdown.tsx b/packages/ui/src/breadcrumbs/navigation-dropdown.tsx index c07513e4aa..5581b1f306 100644 --- a/packages/ui/src/breadcrumbs/navigation-dropdown.tsx +++ b/packages/ui/src/breadcrumbs/navigation-dropdown.tsx @@ -2,7 +2,7 @@ import { CheckIcon } from "lucide-react"; import * as React from "react"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; // ui import { CustomMenu, TContextMenuItem } from "../dropdowns"; import { Tooltip } from "../tooltip"; diff --git a/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx b/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx index 6ed3b26fe8..76148acf81 100644 --- a/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx +++ b/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { useState } from "react"; import { ICustomSearchSelectOption } from "@plane/types"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { CustomSearchSelect } from "../dropdowns"; import { Tooltip } from "../tooltip"; import { Breadcrumbs } from "./breadcrumbs"; diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx index 10ee815f69..c5605b92fa 100644 --- a/packages/ui/src/button/button.tsx +++ b/packages/ui/src/button/button.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { getIconStyling, getButtonStyling, TButtonVariant, TButtonSizes } from "./helper"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; export interface ButtonProps extends React.ButtonHTMLAttributes { variant?: TButtonVariant; diff --git a/packages/ui/src/button/toggle-switch.tsx b/packages/ui/src/button/toggle-switch.tsx index c779cb4360..f0558a959b 100644 --- a/packages/ui/src/button/toggle-switch.tsx +++ b/packages/ui/src/button/toggle-switch.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { Switch } from "@headlessui/react"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; interface IToggleSwitchProps { value: boolean; diff --git a/packages/ui/src/calendar.tsx b/packages/ui/src/calendar.tsx index 80b160cc1b..ea6dcd7d62 100644 --- a/packages/ui/src/calendar.tsx +++ b/packages/ui/src/calendar.tsx @@ -4,7 +4,7 @@ import { ChevronLeft } from "lucide-react"; import * as React from "react"; import { DayPicker } from "react-day-picker"; -import { cn } from "../helpers"; +import { cn } from "./utils"; export type CalendarProps = React.ComponentProps; diff --git a/packages/ui/src/card/card.tsx b/packages/ui/src/card/card.tsx index 6030e65bb0..63ca5fb64e 100644 --- a/packages/ui/src/card/card.tsx +++ b/packages/ui/src/card/card.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { ECardDirection, ECardSpacing, diff --git a/packages/ui/src/collapsible/collapsible-button.tsx b/packages/ui/src/collapsible/collapsible-button.tsx index 48f0d0c703..61a803c631 100644 --- a/packages/ui/src/collapsible/collapsible-button.tsx +++ b/packages/ui/src/collapsible/collapsible-button.tsx @@ -1,5 +1,5 @@ import React, { FC } from "react"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { DropdownIcon, ISvgIcons } from "../icons"; type Props = { diff --git a/packages/ui/src/content-wrapper/content-wrapper.tsx b/packages/ui/src/content-wrapper/content-wrapper.tsx index e081dcc503..7e724f3cdd 100644 --- a/packages/ui/src/content-wrapper/content-wrapper.tsx +++ b/packages/ui/src/content-wrapper/content-wrapper.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { Row } from "../row"; import { ERowVariant, TRowVariant } from "../row/helper"; diff --git a/packages/ui/src/drag-handle.tsx b/packages/ui/src/drag-handle.tsx index 89037a5ca4..5ec26ecd35 100644 --- a/packages/ui/src/drag-handle.tsx +++ b/packages/ui/src/drag-handle.tsx @@ -1,7 +1,7 @@ -import React, { forwardRef } from "react"; import { MoreVertical } from "lucide-react"; +import React, { forwardRef } from "react"; // helpers -import { cn } from "../helpers"; +import { cn } from "./utils"; interface IDragHandle { className?: string; diff --git a/packages/ui/src/drop-indicator.tsx b/packages/ui/src/drop-indicator.tsx index 7ffc83a4ba..b8982be065 100644 --- a/packages/ui/src/drop-indicator.tsx +++ b/packages/ui/src/drop-indicator.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { cn } from "../helpers"; +import { cn } from "./utils"; type Props = { isVisible: boolean; diff --git a/packages/ui/src/dropdown/common/button.tsx b/packages/ui/src/dropdown/common/button.tsx index 39d9cd5383..f8d508f73f 100644 --- a/packages/ui/src/dropdown/common/button.tsx +++ b/packages/ui/src/dropdown/common/button.tsx @@ -1,8 +1,7 @@ -import React, { Fragment } from "react"; -// headless ui import { Combobox } from "@headlessui/react"; +import React, { Fragment } from "react"; // helper -import { cn } from "../../../helpers"; +import { cn } from "../../utils"; import { IMultiSelectDropdownButton, ISingleSelectDropdownButton } from "../dropdown"; export const DropdownButton: React.FC = (props) => { diff --git a/packages/ui/src/dropdown/common/input-search.tsx b/packages/ui/src/dropdown/common/input-search.tsx index 984f997356..d5e19d0e84 100644 --- a/packages/ui/src/dropdown/common/input-search.tsx +++ b/packages/ui/src/dropdown/common/input-search.tsx @@ -1,10 +1,8 @@ -import React, { FC, useEffect, useRef } from "react"; -// headless ui import { Combobox } from "@headlessui/react"; -// icons import { Search } from "lucide-react"; +import React, { FC, useEffect, useRef } from "react"; // helpers -import { cn } from "../../../helpers"; +import { cn } from "../../utils"; interface IInputSearch { isOpen: boolean; @@ -32,9 +30,11 @@ export const InputSearch: FC = (props) => { useEffect(() => { if (isOpen && !isMobile) { + // eslint-disable-next-line @typescript-eslint/no-unused-expressions inputRef.current && inputRef.current.focus(); } }, [isOpen, isMobile]); + return (
= (props) => { const { diff --git a/packages/ui/src/dropdown/multi-select.tsx b/packages/ui/src/dropdown/multi-select.tsx index 400e2c7284..e464cc3c99 100644 --- a/packages/ui/src/dropdown/multi-select.tsx +++ b/packages/ui/src/dropdown/multi-select.tsx @@ -5,7 +5,7 @@ import { usePopper } from "react-popper"; // plane imports import { useOutsideClickDetector } from "@plane/hooks"; // local imports -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed"; import { DropdownButton } from "./common"; import { DropdownOptions } from "./common/options"; diff --git a/packages/ui/src/dropdown/single-select.tsx b/packages/ui/src/dropdown/single-select.tsx index 9614feb516..7e352390b3 100644 --- a/packages/ui/src/dropdown/single-select.tsx +++ b/packages/ui/src/dropdown/single-select.tsx @@ -5,7 +5,7 @@ import { usePopper } from "react-popper"; // plane imports import { useOutsideClickDetector } from "@plane/hooks"; // local imports -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed"; import { DropdownButton } from "./common"; import { DropdownOptions } from "./common/options"; diff --git a/packages/ui/src/dropdowns/context-menu/item.tsx b/packages/ui/src/dropdowns/context-menu/item.tsx index 8e2050d9dd..68626a61dc 100644 --- a/packages/ui/src/dropdowns/context-menu/item.tsx +++ b/packages/ui/src/dropdowns/context-menu/item.tsx @@ -2,7 +2,7 @@ import { ChevronRight } from "lucide-react"; import React, { useState, useRef, useContext } from "react"; import { usePopper } from "react-popper"; // helpers -import { cn } from "../../../helpers"; +import { cn } from "../../utils"; // types import { TContextMenuItem, ContextMenuContext, Portal } from "./root"; diff --git a/packages/ui/src/dropdowns/context-menu/root.tsx b/packages/ui/src/dropdowns/context-menu/root.tsx index 480607dbac..b801a62df1 100644 --- a/packages/ui/src/dropdowns/context-menu/root.tsx +++ b/packages/ui/src/dropdowns/context-menu/root.tsx @@ -1,11 +1,9 @@ import React, { useEffect, useRef, useState } from "react"; import ReactDOM from "react-dom"; -// plane helpers -import { useOutsideClickDetector } from "@plane/hooks"; -// helpers -import { cn } from "../../../helpers"; // hooks import { usePlatformOS } from "../../hooks/use-platform-os"; +// helpers +import { cn } from "../../utils"; // components import { ContextMenuItem } from "./item"; diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx index 103bd20e19..44a85b76f2 100644 --- a/packages/ui/src/dropdowns/custom-menu.tsx +++ b/packages/ui/src/dropdowns/custom-menu.tsx @@ -6,7 +6,7 @@ import { usePopper } from "react-popper"; // plane helpers import { useOutsideClickDetector } from "@plane/hooks"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; // hooks import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down"; // types diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx index 68fb90cb5d..39b505ea91 100644 --- a/packages/ui/src/dropdowns/custom-search-select.tsx +++ b/packages/ui/src/dropdowns/custom-search-select.tsx @@ -6,7 +6,7 @@ import { usePopper } from "react-popper"; // plane imports import { useOutsideClickDetector } from "@plane/hooks"; // local imports -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down"; import { Tooltip } from "../tooltip"; import { ICustomSearchSelectProps } from "./helper"; diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx index 835cb82a7a..6502017268 100644 --- a/packages/ui/src/dropdowns/custom-select.tsx +++ b/packages/ui/src/dropdowns/custom-select.tsx @@ -7,7 +7,7 @@ import { useOutsideClickDetector } from "@plane/hooks"; // hooks import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; // types import { ICustomSelectItemProps, ICustomSelectProps } from "./helper"; diff --git a/packages/ui/src/emoji/emoji-icon-picker-new.tsx b/packages/ui/src/emoji/emoji-icon-picker-new.tsx index 7144ebd36a..4f29d766d1 100644 --- a/packages/ui/src/emoji/emoji-icon-picker-new.tsx +++ b/packages/ui/src/emoji/emoji-icon-picker-new.tsx @@ -5,7 +5,7 @@ import EmojiPicker from "emoji-picker-react"; // plane helpers import { useOutsideClickDetector } from "@plane/hooks"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; // hooks import { LucideIconsList } from "./lucide-icons-list"; // helpers diff --git a/packages/ui/src/emoji/emoji-icon-picker.tsx b/packages/ui/src/emoji/emoji-icon-picker.tsx index 5d1a0d472f..98451c28da 100644 --- a/packages/ui/src/emoji/emoji-icon-picker.tsx +++ b/packages/ui/src/emoji/emoji-icon-picker.tsx @@ -7,7 +7,7 @@ import { useOutsideClickDetector } from "@plane/hooks"; // components import { IconsList } from "./icons-list"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; // hooks import { EmojiIconPickerTypes, TABS_LIST, TCustomEmojiPicker } from "./emoji-icon-helper"; diff --git a/packages/ui/src/emoji/icons-list.tsx b/packages/ui/src/emoji/icons-list.tsx index 7c6d25ba5f..6e0722e309 100644 --- a/packages/ui/src/emoji/icons-list.tsx +++ b/packages/ui/src/emoji/icons-list.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react"; // icons import useFontFaceObserver from "use-font-face-observer"; import { MATERIAL_ICONS_LIST } from ".."; -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { Input } from "../form-fields"; import { InfoIcon } from "../icons"; // components diff --git a/packages/ui/src/emoji/lucide-icons-list.tsx b/packages/ui/src/emoji/lucide-icons-list.tsx index ee5b2fc204..012ced1eb9 100644 --- a/packages/ui/src/emoji/lucide-icons-list.tsx +++ b/packages/ui/src/emoji/lucide-icons-list.tsx @@ -2,7 +2,7 @@ import { Search } from "lucide-react"; import React, { useEffect, useState } from "react"; // local imports import { LUCIDE_ICONS_LIST } from ".."; -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { Input } from "../form-fields"; import { InfoIcon } from "../icons"; import { DEFAULT_COLORS, TIconsListProps, adjustColorForContrast } from "./emoji-icon-helper"; diff --git a/packages/ui/src/favorite-star.tsx b/packages/ui/src/favorite-star.tsx index b71714ab09..8614f65656 100644 --- a/packages/ui/src/favorite-star.tsx +++ b/packages/ui/src/favorite-star.tsx @@ -1,7 +1,7 @@ -import React from "react"; import { Star } from "lucide-react"; +import React from "react"; // helpers -import { cn } from "../helpers"; +import { cn } from "./utils"; type Props = { buttonClassName?: string; diff --git a/packages/ui/src/form-fields/checkbox.tsx b/packages/ui/src/form-fields/checkbox.tsx index b2e01908df..7f9b8134dc 100644 --- a/packages/ui/src/form-fields/checkbox.tsx +++ b/packages/ui/src/form-fields/checkbox.tsx @@ -1,6 +1,6 @@ import * as React from "react"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; export interface CheckboxProps extends React.InputHTMLAttributes { containerClassName?: string; diff --git a/packages/ui/src/form-fields/input-color-picker.tsx b/packages/ui/src/form-fields/input-color-picker.tsx index eb7b83977f..c069dd9b07 100644 --- a/packages/ui/src/form-fields/input-color-picker.tsx +++ b/packages/ui/src/form-fields/input-color-picker.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import { ColorResult, SketchPicker } from "react-color"; import { usePopper } from "react-popper"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; // components import { Button } from "../button"; import { Input } from "./input"; diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx index 4e71ea89a0..d42c4c098e 100644 --- a/packages/ui/src/form-fields/input.tsx +++ b/packages/ui/src/form-fields/input.tsx @@ -1,6 +1,6 @@ import * as React from "react"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; export interface InputProps extends React.InputHTMLAttributes { mode?: "primary" | "transparent" | "true-transparent"; diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx index 786e00a1de..ed7d75133e 100644 --- a/packages/ui/src/form-fields/textarea.tsx +++ b/packages/ui/src/form-fields/textarea.tsx @@ -1,6 +1,6 @@ import React, { useRef } from "react"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; // hooks import { useAutoResizeTextArea } from "../hooks/use-auto-resize-textarea"; diff --git a/packages/ui/src/header/header.tsx b/packages/ui/src/header/header.tsx index b60d41b960..1987297e9e 100644 --- a/packages/ui/src/header/header.tsx +++ b/packages/ui/src/header/header.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { EHeaderVariant, getHeaderStyle, THeaderVariant } from "./helper"; import { ERowVariant, Row } from "../row"; diff --git a/packages/ui/src/icons/priority-icon.tsx b/packages/ui/src/icons/priority-icon.tsx index a6ea01329d..e7da9debba 100644 --- a/packages/ui/src/icons/priority-icon.tsx +++ b/packages/ui/src/icons/priority-icon.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { AlertCircle, Ban, SignalHigh, SignalLow, SignalMedium } from "lucide-react"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none"; diff --git a/packages/ui/src/loader.tsx b/packages/ui/src/loader.tsx index f8ca5ea7be..6eaa74c65d 100644 --- a/packages/ui/src/loader.tsx +++ b/packages/ui/src/loader.tsx @@ -1,6 +1,6 @@ import React from "react"; // helpers -import { cn } from "../helpers"; +import { cn } from "./utils"; type Props = { children: React.ReactNode; diff --git a/packages/ui/src/modals/alert-modal.tsx b/packages/ui/src/modals/alert-modal.tsx index 0bd007f26d..55c994f9a7 100644 --- a/packages/ui/src/modals/alert-modal.tsx +++ b/packages/ui/src/modals/alert-modal.tsx @@ -6,7 +6,7 @@ import { ModalCore } from "./modal-core"; // constants import { EModalPosition, EModalWidth } from "./constants"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; export type TModalVariant = "danger" | "primary"; diff --git a/packages/ui/src/modals/modal-core.tsx b/packages/ui/src/modals/modal-core.tsx index 798917481d..1cae5bcb79 100644 --- a/packages/ui/src/modals/modal-core.tsx +++ b/packages/ui/src/modals/modal-core.tsx @@ -3,7 +3,7 @@ import { Dialog, Transition } from "@headlessui/react"; // constants import { EModalPosition, EModalWidth } from "./constants"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; type Props = { children: React.ReactNode; diff --git a/packages/ui/src/oauth/oauth-button.tsx b/packages/ui/src/oauth/oauth-button.tsx index 6ce4803382..1bf454dad3 100644 --- a/packages/ui/src/oauth/oauth-button.tsx +++ b/packages/ui/src/oauth/oauth-button.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; export interface OAuthButtonProps extends React.ButtonHTMLAttributes { text: string; diff --git a/packages/ui/src/oauth/oauth-options.tsx b/packages/ui/src/oauth/oauth-options.tsx index 0e282792d6..1c42cb19d5 100644 --- a/packages/ui/src/oauth/oauth-options.tsx +++ b/packages/ui/src/oauth/oauth-options.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { OAuthButton } from "./oauth-button"; export type TOAuthOption = { diff --git a/packages/ui/src/popovers/popover-menu.tsx b/packages/ui/src/popovers/popover-menu.tsx index 079aa3e25e..6828aabb04 100644 --- a/packages/ui/src/popovers/popover-menu.tsx +++ b/packages/ui/src/popovers/popover-menu.tsx @@ -2,7 +2,7 @@ import React, { Fragment } from "react"; // components import { Popover } from "./popover"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; // types import { TPopoverMenu } from "./types"; diff --git a/packages/ui/src/popovers/popover.tsx b/packages/ui/src/popovers/popover.tsx index 4860a25a89..d1a49b13f0 100644 --- a/packages/ui/src/popovers/popover.tsx +++ b/packages/ui/src/popovers/popover.tsx @@ -2,7 +2,7 @@ import React, { Fragment, Ref, useState } from "react"; import { usePopper } from "react-popper"; import { Popover as HeadlessReactPopover, Transition } from "@headlessui/react"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; // types import { TPopover } from "./types"; import { EllipsisVertical } from "lucide-react"; diff --git a/packages/ui/src/progress/linear-progress-indicator.tsx b/packages/ui/src/progress/linear-progress-indicator.tsx index e32087d49c..d1127ad2d7 100644 --- a/packages/ui/src/progress/linear-progress-indicator.tsx +++ b/packages/ui/src/progress/linear-progress-indicator.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Tooltip } from "../tooltip"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; type Props = { data: any; diff --git a/packages/ui/src/row/row.tsx b/packages/ui/src/row/row.tsx index 309aa5f57a..f482fc808c 100644 --- a/packages/ui/src/row/row.tsx +++ b/packages/ui/src/row/row.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { ERowVariant, rowStyle, TRowVariant } from "./helper"; export interface RowProps extends React.HTMLAttributes { diff --git a/packages/ui/src/scroll-area.tsx b/packages/ui/src/scroll-area.tsx index 435ecf4916..ac5419f730 100644 --- a/packages/ui/src/scroll-area.tsx +++ b/packages/ui/src/scroll-area.tsx @@ -1,7 +1,7 @@ "use client"; import * as RadixScrollArea from "@radix-ui/react-scroll-area"; import React, { FC } from "react"; -import { cn } from "../helpers"; +import { cn } from "./utils"; type TScrollAreaProps = { type?: "auto" | "always" | "scroll" | "hover"; diff --git a/packages/ui/src/sortable/draggable.tsx b/packages/ui/src/sortable/draggable.tsx index 7fded837e6..7af1fa6277 100644 --- a/packages/ui/src/sortable/draggable.tsx +++ b/packages/ui/src/sortable/draggable.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react"; import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; import { isEqual } from "lodash"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"; import { DropIndicator } from "../drop-indicator"; diff --git a/packages/ui/src/spinners/circular-spinner.tsx b/packages/ui/src/spinners/circular-spinner.tsx index 010ff6bfae..2226d39ea5 100644 --- a/packages/ui/src/spinners/circular-spinner.tsx +++ b/packages/ui/src/spinners/circular-spinner.tsx @@ -1,6 +1,6 @@ import * as React from "react"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; export interface ISpinner extends React.SVGAttributes { height?: string; diff --git a/packages/ui/src/tables/table.tsx b/packages/ui/src/tables/table.tsx index 7c8c161868..c184081441 100644 --- a/packages/ui/src/tables/table.tsx +++ b/packages/ui/src/tables/table.tsx @@ -1,6 +1,6 @@ import React from "react"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; // types import { TTableData } from "./types"; diff --git a/packages/ui/src/tabs/tab-list.tsx b/packages/ui/src/tabs/tab-list.tsx index ac3cb81736..c7ae107245 100644 --- a/packages/ui/src/tabs/tab-list.tsx +++ b/packages/ui/src/tabs/tab-list.tsx @@ -2,7 +2,7 @@ import { Tab } from "@headlessui/react"; import { LucideProps } from "lucide-react"; import React, { FC } from "react"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; export type TabListItem = { key: string; diff --git a/packages/ui/src/tabs/tabs.tsx b/packages/ui/src/tabs/tabs.tsx index 32b5c23d67..dc7b3206bf 100644 --- a/packages/ui/src/tabs/tabs.tsx +++ b/packages/ui/src/tabs/tabs.tsx @@ -2,7 +2,7 @@ import { Tab } from "@headlessui/react"; import React, { FC, Fragment, useEffect, useState } from "react"; // helpers import { useLocalStorage } from "@plane/hooks"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; // types import { TabList, TabListItem } from "./tab-list"; diff --git a/packages/ui/src/tag/tag.tsx b/packages/ui/src/tag/tag.tsx index deb3d1b0f6..6f1b0e62f0 100644 --- a/packages/ui/src/tag/tag.tsx +++ b/packages/ui/src/tag/tag.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; import { ETagSize, ETagVariant, getTagStyle, TTagSize, TTagVariant } from "./helper"; export interface TagProps extends React.ComponentProps<"div"> { diff --git a/packages/ui/src/toast/index.tsx b/packages/ui/src/toast/index.tsx index d4d837eb07..710eb23622 100644 --- a/packages/ui/src/toast/index.tsx +++ b/packages/ui/src/toast/index.tsx @@ -5,7 +5,7 @@ import { AlertTriangle, CheckCircle2, X, XCircle } from "lucide-react"; // spinner import { CircularBarSpinner } from "../spinners"; // helper -import { cn } from "../../helpers"; +import { cn } from "../utils"; export enum TOAST_TYPE { SUCCESS = "success", diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx index 45bc9d6b90..677a9ef661 100644 --- a/packages/ui/src/tooltip/tooltip.tsx +++ b/packages/ui/src/tooltip/tooltip.tsx @@ -1,7 +1,7 @@ import { Tooltip2 } from "@blueprintjs/popover2"; import React, { useEffect, useRef, useState } from "react"; // helpers -import { cn } from "../../helpers"; +import { cn } from "../utils"; export type TPosition = | "top" @@ -22,9 +22,9 @@ export type TPosition = interface ITooltipProps { tooltipHeading?: string; - tooltipContent: string | any; + tooltipContent: string | React.ReactNode; position?: TPosition; - children: any; + children: React.ReactElement; disabled?: boolean; className?: string; openDelay?: number; diff --git a/packages/ui/src/typography/sub-heading.tsx b/packages/ui/src/typography/sub-heading.tsx index 9e7075583c..094d041efd 100644 --- a/packages/ui/src/typography/sub-heading.tsx +++ b/packages/ui/src/typography/sub-heading.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { cn } from "../../helpers"; +import { cn } from "../utils"; type Props = { children: React.ReactNode; diff --git a/packages/ui/helpers.ts b/packages/ui/src/utils/classname.tsx similarity index 100% rename from packages/ui/helpers.ts rename to packages/ui/src/utils/classname.tsx diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts index 6ef8d54d41..62ca197ac9 100644 --- a/packages/ui/src/utils/index.ts +++ b/packages/ui/src/utils/index.ts @@ -1 +1,2 @@ +export * from "./classname"; export * from "./icons"; diff --git a/yarn.lock b/yarn.lock index 72f6c27742..ce68498ab0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4768,7 +4768,7 @@ dependencies: "@types/reactcss" "*" -"@types/react-dom@18.3.0", "@types/react-dom@18.3.5", "@types/react-dom@^18.2.18": +"@types/react-dom@18.3.0", "@types/react-dom@18.3.1", "@types/react-dom@18.3.5", "@types/react-dom@^18.2.18": version "18.3.5" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.5.tgz#45f9f87398c5dcea085b715c58ddcf1faf65f716" integrity sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q== @@ -4785,7 +4785,7 @@ resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.12.tgz#b5d76568485b02a307238270bfe96cb51ee2a044" integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w== -"@types/react@*", "@types/react@18.3.1", "@types/react@18.3.18", "@types/react@^18.3.11": +"@types/react@*", "@types/react@18.3.1", "@types/react@18.3.11", "@types/react@18.3.18", "@types/react@^18.3.11": version "18.3.18" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.18.tgz#9b382c4cd32e13e463f97df07c2ee3bbcd26904b" integrity sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==