Deprecate components

Kubit · Kubit · commit aa83775cbda5 · 2024-07-30T13:34:56.000+02:00
diff --git a/src/components/checkboxWithLabel/checkboxWithLabelControlled.tsx b/src/components/checkboxWithLabel/checkboxWithLabelControlled.tsx
@@ -57,6 +57,9 @@ const CheckboxWithLabelBoundary = <V extends string | unknown>(
   </ErrorBoundary>
 );
 
+/**
+ * @deprecated This component has been deprecated and will be removed in the next MAJOR release. Will include all this on the CheckBox component
+ */
 const CheckboxWithLabelControlled = React.forwardRef(CheckboxWithLabelBoundary) as <
   V extends string | unknown,
 >(
diff --git a/src/components/checkboxWithLabel/checkboxWithLabelUncontrolled.tsx b/src/components/checkboxWithLabel/checkboxWithLabelUncontrolled.tsx
@@ -22,6 +22,9 @@ const CheckboxWithLabelUncontrolledComponent = <V extends string | unknown>(
   );
 };
 
+/**
+ * @deprecated This component has been deprecated and will be removed in the next MAJOR release. Will include all this on the CheckBox component
+ */
 const CheckboxWithLabelUncontrolled = React.forwardRef(CheckboxWithLabelUncontrolledComponent) as <
   V extends string | unknown,
 >(
diff --git a/src/components/confirmationMessage/confirmationMessage.tsx b/src/components/confirmationMessage/confirmationMessage.tsx
@@ -52,6 +52,9 @@ const ConfirmationMessageBoundary = <V extends string | unknown>(
   </ErrorBoundary>
 );
 
+/**
+ * @deprecated This component has been deprecated and will be removed in the next MAJOR release.
+ */
 const ConfirmationMessage = React.forwardRef(ConfirmationMessageBoundary) as <
   V extends string | unknown,
 >(
diff --git a/src/components/cssAnimation/cssAnimation.tsx b/src/components/cssAnimation/cssAnimation.tsx
@@ -107,7 +107,8 @@ const CssAnimationComponent = (
 };
 
 /**
- * @description
+ * @deprecated This component has been deprecated and will be removed in the next MAJOR release.
+ *
  * CssAnimation component is a wrapper component that can be used to wrap other components.
  *
  * @param {React.PropsWithChildren<ICssAnimation>} props
diff --git a/src/components/emptyState/emptyState.tsx b/src/components/emptyState/emptyState.tsx
@@ -39,6 +39,9 @@ const EmptyStateBoundary = <V extends string | unknown>(
   </ErrorBoundary>
 );
 
+/**
+ *  @deprecated This component has been deprecated and will be removed in the next MAJOR release.
+ */
 const EmptyState = React.forwardRef(EmptyStateBoundary) as <V extends string | unknown>(
   props: IEmptyState<V> & {
     ref?: React.ForwardedRef<HTMLDivElement> | undefined | null;
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
@@ -49,6 +49,9 @@ const FooterBoundary = <V extends string | unknown>(
   </ErrorBoundary>
 );
 
+/**
+ * @deprecated This component has been deprecated and will be removed in the next MAJOR release. Will include all this on the CheckBox component
+ */
 const Footer = React.forwardRef(FooterBoundary) as <V extends string | unknown>(
   props: React.PropsWithChildren<IFooter<V>> & {
     ref?: React.ForwardedRef<HTMLElement> | undefined | null;
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -42,6 +42,9 @@ const HeaderBoundary = <V extends string | unknown>(
   </ErrorBoundary>
 );
 
+/**
+ * @deprecated This component has been deprecated and will be removed in the next MAJOR release. Will include all this on the NavBar component
+ */
 const Header = React.forwardRef(HeaderBoundary) as <V extends string | unknown>(
   props: IHeader<V> & {
     ref?: React.ForwardedRef<HTMLDivElement> | undefined | null;
diff --git a/src/components/headerStructure/headerStructure.tsx b/src/components/headerStructure/headerStructure.tsx
@@ -54,6 +54,9 @@ const HeaderStructureBoundary = <V extends string | unknown>(
   </ErrorBoundary>
 );
 
+/**
+ * @deprecated This component has been deprecated and will be removed in the next MAJOR release. Will include all this on the NavBar component
+ */
 const HeaderStructure = React.forwardRef(HeaderStructureBoundary) as <V extends string | unknown>(
   props: IHeaderStructure<V> & {
     ref?: React.ForwardedRef<HTMLDivElement> | undefined | null;
diff --git a/src/components/icon/iconHost.tsx b/src/components/icon/iconHost.tsx
@@ -52,4 +52,11 @@ const IconHostComponent = (
   );
 };
 
+/**
+ * @deprecated This component has been deprecated and will be removed in the next MAJOR release.
+ *
+ * IconHost is a component that serves as a host for icons.
+ * @param {React.PropsWithChildren<IIconHost>} props
+ * @returns {JSX.Element}
+ */
 export const IconHost = React.forwardRef(IconHostComponent);
diff --git a/src/components/lineSeparator/lineSeparator.tsx b/src/components/lineSeparator/lineSeparator.tsx
@@ -71,7 +71,8 @@ const LineSeparator = React.forwardRef(LineSeparatorBoundary) as <
 ) => ReturnType<typeof LineSeparatorBoundary>;
 
 /**
- * @description
+ * @deprecated This component has been deprecated and will be removed in the next MAJOR release. Consider using an alternative component.
+ *
  * LineSeparator component is a wrapper component that adds a line separator between two components.
  * @param {React.PropsWithChildren<ILineSeparator<V, S>>} props
  * @returns {JSX.Element}
diff --git a/src/components/loader/loader.tsx b/src/components/loader/loader.tsx
@@ -33,19 +33,20 @@ const LoaderBoundary = <V extends string | unknown>(
   </ErrorBoundary>
 );
 
-const Loader = React.forwardRef(LoaderBoundary) as <V extends string | unknown>(
-  props: React.PropsWithChildren<ILoader<V>> & {
-    ref?: React.ForwardedRef<HTMLSpanElement> | undefined | null;
-  }
-) => ReturnType<typeof LoaderBoundary>;
-
 /**
- * @description
+ * @deprecated This component has been deprecated and will be removed in the next MAJOR release. Consider using an alternative component.
+ *
  * Loader component is used to show a loading state.
  * @param {React.PropsWithChildren<ILoader<V>>} props
  * @returns {JSX.Element}
  * @constructor
  * @example
  * <Loader variant="loader" />
  */
+const Loader = React.forwardRef(LoaderBoundary) as <V extends string | unknown>(
+  props: React.PropsWithChildren<ILoader<V>> & {
+    ref?: React.ForwardedRef<HTMLSpanElement> | undefined | null;
+  }
+) => ReturnType<typeof LoaderBoundary>;
+
 export { Loader };
diff --git a/src/components/loadingState/loadingState.tsx b/src/components/loadingState/loadingState.tsx
@@ -38,6 +38,9 @@ const LoadinfStateBoundary = <V extends string | unknown>(
   </ErrorBoundary>
 );
 
+/**
+ *  @deprecated This component has been deprecated and will be removed in the next MAJOR release.
+ */
 const LoadingState = React.forwardRef(LoadinfStateBoundary) as <V extends string | unknown>(
   props: React.PropsWithChildren<ILoadingState<V>> & {
     ref?: React.ForwardedRef<HTMLDivElement> | undefined | null;
diff --git a/src/components/operativeLayout/operativeLayout.tsx b/src/components/operativeLayout/operativeLayout.tsx
@@ -32,6 +32,9 @@ const OperativeLayoutComponent = ({
   );
 };
 
+/**
+ *  @deprecated This component has been deprecated and will be removed in the next MAJOR release.
+ */
 export const OperativeLayout = (props: IOperativeLayout): JSX.Element => (
   <ErrorBoundary
     fallBackComponent={
diff --git a/src/components/pillSelector/types/pillSelector.ts b/src/components/pillSelector/types/pillSelector.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { IPillUnControlled } from '@/components/pill/types';
+import { IPillUnControlled, PillTextType } from '@/components/pill/types';
 import { CustomTokenTypes } from '@/types';
 
 import { PillSelectorStyles } from './pillSelectorTheme';
@@ -23,7 +23,14 @@ export type PillType = Pick<
   | 'aria-disabled'
 > & {
   value: string | number;
+  /**
+   * @deprecated This property will be renamed to "content". This is the content inside the pill
+   */
   label: React.ReactNode;
+  /**
+   * @deprecated This property will be renamed to "label". This is the label outside the pill.
+   */
+  externalLabel?: PillTextType;
 };
 
 type PillSelectedType = number | string;
diff --git a/src/components/portal/portal.tsx b/src/components/portal/portal.tsx
@@ -16,6 +16,7 @@ const createWrapperAndAppendToBody = (wrapperId: string): HTMLElement => {
 };
 
 /**
+ * @deprecated This component has been deprecated and will be not exported in the next MAJOR release
  * Renders a portal component that can be appended to the <body> tag or a custom wrapper element.
  * @param children - The content to be rendered inside the portal.
  * @param wrapperId - The ID of the custom wrapper element (optional).
diff --git a/src/components/textCount/textCount.tsx b/src/components/textCount/textCount.tsx
@@ -37,6 +37,7 @@ const TextCountBoundary = (
 );
 
 /**
+ * @deprecated This component has been deprecated and will be not exported in the next MAJOR release.
  * @description
  * TextCount component is a component that can be used to create a counter of characters.
  * @param {React.PropsWithChildren<ITextCountControlled>} props
diff --git a/src/components/thirdPartyAnimation/thirdPartyAnimation.tsx b/src/components/thirdPartyAnimation/thirdPartyAnimation.tsx
@@ -22,9 +22,13 @@ const ThirdPartyAnimationComponent = <V extends string | unknown>(
   const { thirdPartyAnimationData } = variantTheme;
   const element = React.useRef<HTMLSpanElement>(null);
 
-  React.useImperativeHandle(ref, () => {
-    return element.current as HTMLSpanElement;
-  }, []);
+  React.useImperativeHandle(
+    ref,
+    () => {
+      return element.current as HTMLSpanElement;
+    },
+    []
+  );
 
   React.useEffect(() => {
     if (element.current) {
@@ -47,16 +51,17 @@ const ThirdPartyAnimationComponent = <V extends string | unknown>(
   return <ThirdPartyAnimationStandAlone ref={element} {...props} />;
 };
 
+/**
+ * @deprecated This component has been deprecated and will be removed in the next MAJOR release.
+ *
+ * ThirdPartyAnimation component is a component that can be used to create third-party animations.
+ * @param {React.PropsWithChildren<IThirdPartyAnimation<V>>} props
+ * @returns {JSX.Element}
+ */
 const ThirdPartyAnimation = React.forwardRef(ThirdPartyAnimationComponent) as <V>(
   props: React.PropsWithChildren<IThirdPartyAnimation<V>> & {
     ref?: React.ForwardedRef<HTMLSpanElement | null> | undefined | null;
   }
 ) => ReturnType<typeof ThirdPartyAnimationComponent>;
 
-/**
- * @description
- * ThirdPartyAnimation component is a component that can be used to create a third party animation.
- * @param {React.PropsWithChildren<IThirdPartyAnimation<V>>} props
- * @returns {JSX.Element}
- */
 export { ThirdPartyAnimation };
diff --git a/src/components/toggleWithLabel/toggleWithLabelControlled.tsx b/src/components/toggleWithLabel/toggleWithLabelControlled.tsx
@@ -56,4 +56,7 @@ const ToggleWithLabelBoundary = (
   </ErrorBoundary>
 );
 
+/**
+ * @deprecated This component has been deprecated and will be removed in the next MAJOR release. Will include all this on the Toggle component
+ */
 export const ToggleWithLabelControlled = React.forwardRef(ToggleWithLabelBoundary);
diff --git a/src/components/toggleWithLabel/toggleWithLabelUncontrolled.tsx b/src/components/toggleWithLabel/toggleWithLabelUncontrolled.tsx
@@ -31,4 +31,7 @@ const ToggleWithLabelUncontrolledComponent = (
   );
 };
 
+/**
+ * @deprecated This component has been deprecated and will be removed in the next MAJOR release. Will include all this on the Toggle component
+ */
 export const ToggleWithLabelUncontrolled = React.forwardRef(ToggleWithLabelUncontrolledComponent);

Original file line number	Diff line number	Diff line change
`@@ -107,7 +107,8 @@ const CssAnimationComponent = (`
`107`	`107`	`};`
`108`	`108`
`109`	`109`	`/**`
`110`		`- * @description`
	`110`	`+ * @deprecated This component has been deprecated and will be removed in the next MAJOR release.`
	`111`	`+ *`
`111`	`112`	`* CssAnimation component is a wrapper component that can be used to wrap other components.`
`112`	`113`	`*`
`113`	`114`	`* @param {React.PropsWithChildren<ICssAnimation>} props`