feat(ui,dashboard): Move InlineTip to UI package (#11462)

packages/admin/dashboard/src/components/common/inline-tip/index.ts

@@ -1 +0,0 @@
-export * from "./inline-tip"

packages/admin/dashboard/src/components/common/inline-tip/inline-tip.tsx

@@ -1,60 +0,0 @@
-import { clx } from "@medusajs/ui"
-import { ComponentPropsWithoutRef, forwardRef } from "react"
-import { useTranslation } from "react-i18next"
-
-interface InlineTipProps extends ComponentPropsWithoutRef<"div"> {
-  /**
-   * The label to display in the tip.
-   */
-  label?: string
-  /**
-   * The variant of the tip.
-   */
-  variant?: "tip" | "warning"
-}
-
-/**
- * A component for rendering inline tips. Useful for providing additional information or context.
- *
- * @example
- * ```tsx
- * <InlineTip label="Info">
- *  This is an info tip.
- * </InlineTip>
- * ```
- *
- * TODO: Move to `@medusajs/ui` package.
- */
-export const InlineTip = forwardRef<HTMLDivElement, InlineTipProps>(
-  ({ variant = "tip", label, className, children, ...props }, ref) => {
-    const { t } = useTranslation()
-    const labelValue =
-      label || (variant === "warning" ? t("general.warning") : t("general.tip"))
-
-    return (
-      <div
-        ref={ref}
-        className={clx(
-          "bg-ui-bg-component txt-small text-ui-fg-subtle grid grid-cols-[4px_1fr] items-start gap-3 rounded-lg border p-3",
-          className
-        )}
-        {...props}
-      >
-        <div
-          role="presentation"
-          className={clx("w-4px bg-ui-tag-neutral-icon h-full rounded-full", {
-            "bg-ui-tag-orange-icon": variant === "warning",
-          })}
-        />
-        <div className="text-pretty">
-          <strong className="txt-small-plus text-ui-fg-base">
-            {labelValue}:
-          </strong>{" "}
-          {children}
-        </div>
-      </div>
-    )
-  }
-)
-
-InlineTip.displayName = "InlineTip"

packages/admin/dashboard/src/components/forms/metadata-form/metadata-form.tsx

@@ -4,6 +4,7 @@ import {
   DropdownMenu,
   Heading,
   IconButton,
+  InlineTip,
   clx,
   toast,
 } from "@medusajs/ui"
@@ -21,7 +22,6 @@ import { FetchError } from "@medusajs/js-sdk"
 import { ComponentPropsWithoutRef, forwardRef } from "react"
 import { ConditionalTooltip } from "../../common/conditional-tooltip"
 import { Form } from "../../common/form"
-import { InlineTip } from "../../common/inline-tip"
 import { Skeleton } from "../../common/skeleton"
 import { RouteDrawer, useRouteModal } from "../../modals"
 import { KeyboundForm } from "../../utilities/keybound-form"

packages/admin/dashboard/src/extensions/forms/form-extension-zone/form-extension-zone.tsx

@@ -1,8 +1,8 @@
-import { Input, Switch } from "@medusajs/ui"
+import { InlineTip, Input, Switch } from "@medusajs/ui"
 import { ComponentType } from "react"
 import { ControllerRenderProps, UseFormReturn } from "react-hook-form"
+import { useTranslation } from "react-i18next"
 import { Form } from "../../../components/common/form"
-import { InlineTip } from "../../../components/common/inline-tip"
 import { FormField } from "../../types"
 import { FormFieldType } from "./types"
 import { getFieldType } from "./utils"
@@ -86,6 +86,8 @@ const FormExtensionFieldComponent = ({
   component,
   placeholder,
 }: FormExtensionFieldComponentProps) => {
+  const { t } = useTranslation()
+
   if (component) {
     const Component = component
 
@@ -104,7 +106,7 @@ const FormExtensionFieldComponent = ({
     }
     default: {
       return (
-        <InlineTip variant="warning">
+        <InlineTip variant="warning" label={t("general.warning")}>
           The field type does not support rendering a fallback component. Please
           provide a component prop.
         </InlineTip>

packages/admin/dashboard/src/routes/locations/location-service-zone-create/components/create-service-zone-form/create-service-zone-form.tsx

@@ -1,12 +1,11 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { HttpTypes } from "@medusajs/types"
-import { Button, Heading, Input, toast } from "@medusajs/ui"
+import { Button, Heading, InlineTip, Input, toast } from "@medusajs/ui"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
 
 import { Form } from "../../../../../components/common/form"
-import { InlineTip } from "../../../../../components/common/inline-tip"
 import {
   RouteFocusModal,
   StackedFocusModal,
@@ -118,7 +117,7 @@ export function CreateServiceZoneForm({
                   />
                 </div>
 
-                <InlineTip>
+                <InlineTip label={t("general.tip")}>
                   {t("stockLocations.serviceZones.fields.tip")}
                 </InlineTip>
 

packages/admin/dashboard/src/routes/locations/location-service-zone-edit/components/edit-region-form/edit-service-zone-form.tsx

@@ -1,11 +1,10 @@
 import { HttpTypes } from "@medusajs/types"
-import { Button, Input, toast } from "@medusajs/ui"
+import { Button, InlineTip, Input, toast } from "@medusajs/ui"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import * as zod from "zod"
 
 import { Form } from "../../../../../components/common/form"
-import { InlineTip } from "../../../../../components/common/inline-tip"
 import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useUpdateFulfillmentSetServiceZone } from "../../../../../hooks/api/fulfillment-sets"
@@ -83,7 +82,9 @@ export const EditServiceZoneForm = ({
                 }}
               />
             </div>
-            <InlineTip>{t("stockLocations.serviceZones.fields.tip")}</InlineTip>
+            <InlineTip label={t("general.tip")}>
+              {t("stockLocations.serviceZones.fields.tip")}
+            </InlineTip>
           </div>
         </RouteDrawer.Body>
         <RouteDrawer.Footer>

packages/admin/dashboard/src/routes/products/product-create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx

@@ -6,6 +6,7 @@ import {
   Heading,
   Hint,
   IconButton,
+  InlineTip,
   Input,
   Label,
   Text,
@@ -21,7 +22,6 @@ import {
 import { useTranslation } from "react-i18next"
 
 import { Form } from "../../../../../../../components/common/form"
-import { InlineTip } from "../../../../../../../components/common/inline-tip"
 import { SortableList } from "../../../../../../../components/common/sortable-list"
 import { SwitchBox } from "../../../../../../../components/common/switch-box"
 import { ChipInput } from "../../../../../../../components/inputs/chip-input"
@@ -522,7 +522,7 @@ export const ProductCreateVariantsSection = ({
                 </Alert>
               )}
               {variants.fields.length > 0 && (
-                <InlineTip variant="tip">
+                <InlineTip label={t("general.tip")}>
                   {t("products.create.variants.productVariants.tip")}
                 </InlineTip>
               )}