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

packages/design-system/ui/src/components/inline-tip/index.ts

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

packages/design-system/ui/src/components/inline-tip/inline-tip.spec.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react"
+import * as React from "react"
+import { InlineTip } from "./inline-tip"
+
+describe("InlineTip", () => {
+  it("renders a InlineTip", () => {
+    render(<InlineTip label="Test">This is a test</InlineTip>)
+    expect(screen.getByText("This is a test")).toBeInTheDocument()
+  })
+
+  it("renders a InlineTip with a warning variant", () => {
+    render(
+      <InlineTip variant="warning" label="Test">
+        This is a test
+      </InlineTip>
+    )
+    expect(screen.getByText("This is a test")).toBeInTheDocument()
+  })
+
+  it("renders a InlineTip with an error variant", () => {
+    render(
+      <InlineTip variant="error" label="Test">
+        This is a test
+      </InlineTip>
+    )
+    expect(screen.getByText("This is a test")).toBeInTheDocument()
+  })
+
+  it("renders a InlineTip with a success variant", () => {
+    render(
+      <InlineTip variant="success" label="Test">
+        This is a test
+      </InlineTip>
+    )
+    expect(screen.getByText("This is a test")).toBeInTheDocument()
+  })
+})

packages/design-system/ui/src/components/inline-tip/inline-tip.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+import { InlineTip } from "./inline-tip"
+
+const meta: Meta<typeof InlineTip> = {
+  title: "Components/InlineTip",
+  component: InlineTip,
+  parameters: {
+    layout: "centered",
+  },
+  render: (args) => {
+    return (
+      <div className="flex max-w-md">
+        <InlineTip {...args} />
+      </div>
+    )
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof InlineTip>
+
+export const Info: Story = {
+  args: {
+    variant: "info",
+    label: "Info",
+    children:
+      "You can always install the storefront at a later point. Medusa is a headless backend, so it operates without a storefront by default. You can connect any storefront to it. The Next.js Starter storefront is a good option to use, but you can also build your own storefront later on.",
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    variant: "warning",
+    label: "Warning",
+    children:
+      "If you have multiple storage plugins configured, the last plugin declared in the medusa-config.js file will be used.",
+  },
+}
+
+export const Error: Story = {
+  args: {
+    variant: "error",
+    label: "Don'ts",
+    children:
+      "Don’t use data models if you want to store simple key-value pairs related to a Medusa data model. Instead, use the metadata field that modles have, which is an object of custom key-value pairs.",
+  },
+}
+
+export const Success: Story = {
+  args: {
+    variant: "success",
+    label: "Do's",
+    children:
+      "Use data models when you want to store data related to your customization in the database.",
+  },
+}

packages/design-system/ui/src/components/inline-tip/inline-tip.tsx

@@ -0,0 +1,47 @@
+import { clx } from "@/utils/clx"
+import * as React from "react"
+
+interface InlineTipProps extends React.ComponentPropsWithoutRef<"div"> {
+  /**
+   * The label to display in the tip.
+   */
+  label: string
+  /**
+   * The variant of the tip.
+   * @default "info"
+   */
+  variant?: "info" | "warning" | "error" | "success"
+}
+
+/**
+ * This component is based on the `div` element and supports all of its props.
+ */
+export const InlineTip = React.forwardRef<HTMLDivElement, InlineTipProps>(
+  ({ variant = "info", label, className, children, ...props }, ref) => {
+    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("bg-ui-tag-neutral-icon h-full w-1 rounded-full", {
+            "bg-ui-tag-orange-icon": variant === "warning",
+            "bg-ui-tag-red-icon": variant === "error",
+            "bg-ui-tag-green-icon": variant === "success",
+          })}
+        />
+        <div className="text-pretty">
+          <strong className="txt-small-plus text-ui-fg-base">{label}:</strong>{" "}
+          {children}
+        </div>
+      </div>
+    )
+  }
+)
+
+InlineTip.displayName = "InlineTip"

packages/design-system/ui/src/index.ts

@@ -22,6 +22,7 @@ export { Hint } from "./components/hint"
 export { I18nProvider } from "./components/i18n-provider"
 export { IconBadge } from "./components/icon-badge"
 export { IconButton } from "./components/icon-button"
+export { InlineTip } from "./components/inline-tip"
 export { Input } from "./components/input"
 export { Kbd } from "./components/kbd"
 export { Label } from "./components/label"