medusa-ui-common 2.0.0

package/src/common/icons/package.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Package: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M13.3634 8.02695L6.73047 4.21271"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.724 12.9577V6.98101C16.7237 6.71899 16.6546 6.46164 16.5234 6.23479C16.3923 6.00794 16.2038 5.81956 15.9769 5.68855L10.7473 2.70018C10.5201 2.56904 10.2625 2.5 10.0002 2.5C9.7379 2.5 9.48024 2.56904 9.25309 2.70018L4.02346 5.68855C3.79654 5.81956 3.60806 6.00794 3.47693 6.23479C3.3458 6.46164 3.27664 6.71899 3.27637 6.98101V12.9577C3.27664 13.2198 3.3458 13.4771 3.47693 13.704C3.60806 13.9308 3.79654 14.1192 4.02346 14.2502L9.25309 17.2386C9.48024 17.3697 9.7379 17.4388 10.0002 17.4388C10.2625 17.4388 10.5201 17.3697 10.7473 17.2386L15.9769 14.2502C16.2038 14.1192 16.3923 13.9308 16.5234 13.704C16.6546 13.4771 16.7237 13.2198 16.724 12.9577Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.47852 6.20404L10.0006 9.97685L16.5227 6.20404"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Package

package/src/common/icons/paypal.tsx

@@ -0,0 +1,30 @@
+const PayPal = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="20"
+      width="20"
+      viewBox="0 0 26 25"
+      id="paypalIcon"
+    >
+      <path
+        fill="none"
+        stroke="#303c42"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6.9 20.5H2c-.6 0-.5-.1-.5-.5s2.9-18 3-18.5.5-1 1-1h10c2.8 0 5 2.2 5 5h0c0 4.4-3.6 8-8 8H7.9"
+      ></path>
+      <path
+        fill="none"
+        stroke="#303c42"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M7 23.5c-.3 0-.5-.2-.5-.5 0 0 0 0 0 0 0-.3 2.4-16 2.5-16.5s.3-1 1-1h7.5c2.8 0 5 2.2 5 5h0c0 3.9-3.1 7-7 7h-2l-1 6H7z"
+      ></path>
+    </svg>
+  )
+}
+
+export default PayPal

package/src/common/icons/phone.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Phone: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...props
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M22 16.92V19.92C22.0011 20.1985 21.944 20.4741 21.8325 20.7294C21.721 20.9846 21.5573 21.2137 21.3521 21.4019C21.1469 21.5901 20.9045 21.7335 20.6407 21.8228C20.3769 21.9122 20.0974 21.9456 19.82 21.92C16.742 21.5855 13.787 20.5341 11.19 18.85C8.77381 17.2995 6.72053 15.2462 5.17 12.83C3.47997 10.2215 2.42752 7.25414 2.09 4.16C2.0645 3.88295 2.09756 3.60368 2.18696 3.34005C2.27636 3.07641 2.4199 2.83416 2.60783 2.62886C2.79576 2.42356 3.02396 2.25965 3.27814 2.14725C3.53232 2.03485 3.80665 1.97645 4.084 1.976H7.084C7.57354 1.97193 8.04753 2.15286 8.4116 2.48261C8.77567 2.81236 9.00412 3.26871 9.051 3.76C9.13825 4.71714 9.37181 5.65868 9.746 6.56C9.88603 6.89241 9.92882 7.25624 9.86901 7.61053C9.80919 7.96482 9.64939 8.29524 9.408 8.56L8.138 9.83C9.57461 12.3555 11.6645 14.4454 14.19 15.88L15.46 14.61C15.7248 14.3686 16.0552 14.2088 16.4095 14.149C16.7638 14.0892 17.1276 14.132 17.46 14.272C18.3613 14.6462 19.3029 14.8797 20.26 14.967C20.756 15.0145 21.2159 15.247 21.5469 15.6175C21.8778 15.988 22.0567 16.4716 22.049 16.971L22 16.92Z"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Phone

package/src/common/icons/placeholder-image.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const PlaceholderImage: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M15.3141 3.16699H4.68453C3.84588 3.16699 3.16602 3.84685 3.16602 4.6855V15.3151C3.16602 16.1537 3.84588 16.8336 4.68453 16.8336H15.3141C16.1527 16.8336 16.8326 16.1537 16.8326 15.3151V4.6855C16.8326 3.84685 16.1527 3.16699 15.3141 3.16699Z"
+        stroke={color}
+        strokeWidth="1.53749"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.91699 9.16699C8.60735 9.16699 9.16699 8.60735 9.16699 7.91699C9.16699 7.22664 8.60735 6.66699 7.91699 6.66699C7.22664 6.66699 6.66699 7.22664 6.66699 7.91699C6.66699 8.60735 7.22664 9.16699 7.91699 9.16699Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.6667 12.5756L13.0208 9.1665L5 16.6665"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default PlaceholderImage

package/src/common/icons/refresh.tsx

@@ -0,0 +1,51 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Refresh: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M19.8007 3.33301V8.53308H14.6006"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.2002 12C4.20157 10.4949 4.63839 9.02228 5.45797 7.75984C6.27755 6.4974 7.44488 5.49905 8.81917 4.8852C10.1935 4.27135 11.716 4.06823 13.2031 4.30034C14.6903 4.53244 16.0785 5.18986 17.2004 6.19329L19.8004 8.53332"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.2002 20.6669V15.4668H9.40027"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.8004 12C19.799 13.5051 19.3622 14.9778 18.5426 16.2402C17.7231 17.5026 16.5557 18.501 15.1814 19.1148C13.8072 19.7287 12.2846 19.9318 10.7975 19.6997C9.31033 19.4676 7.9221 18.8102 6.80023 17.8067L4.2002 15.4667"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Refresh

package/src/common/icons/spinner.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Spinner: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      className="animate-spin"
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...attributes}
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke={color}
+        strokeWidth="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill={color}
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  )
+}
+
+export default Spinner

package/src/common/icons/trash.tsx

@@ -0,0 +1,51 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Trash: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M3.33301 5.49054H4.81449H16.6663"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.14286 5.5V4C7.14286 3.60218 7.29337 3.22064 7.56128 2.93934C7.82919 2.65804 8.19255 2.5 8.57143 2.5H11.4286C11.8075 2.5 12.1708 2.65804 12.4387 2.93934C12.7066 3.22064 12.8571 3.60218 12.8571 4V5.5M15 5.5V16C15 16.3978 14.8495 16.7794 14.5816 17.0607C14.3137 17.342 13.9503 17.5 13.5714 17.5H6.42857C6.04969 17.5 5.68633 17.342 5.41842 17.0607C5.15051 16.7794 5 16.3978 5 16V5.5H15Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.33203 9.23724V13.4039"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.666 9.23724V13.4039"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Trash

package/src/common/icons/user.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const User: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M16.6663 18V16.3333C16.6663 15.4493 16.3152 14.6014 15.69 13.9763C15.0649 13.3512 14.2171 13 13.333 13H6.66634C5.78229 13 4.93444 13.3512 4.30932 13.9763C3.6842 14.6014 3.33301 15.4493 3.33301 16.3333V18"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.0003 9.66667C11.8413 9.66667 13.3337 8.17428 13.3337 6.33333C13.3337 4.49238 11.8413 3 10.0003 3C8.15938 3 6.66699 4.49238 6.66699 6.33333C6.66699 8.17428 8.15938 9.66667 10.0003 9.66667Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default User

package/src/common/icons/x.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const X: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M15 5L5 15"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 5L15 15"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default X

package/src/constants/payments.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { CreditCard } from "@medusajs/icons";
+import Ideal from "medusa-ui-common/common/icons/ideal";
+import Bancontact from "medusa-ui-common/common/icons/bancontact";
+import PayPal from "medusa-ui-common/common/icons/paypal";
+
+export const paymentInfoMap: Record<string, { title: string; icon: React.JSX.Element }> = {
+  pp_stripe_stripe: { title: "Credit card", icon: <CreditCard /> },
+  "pp_medusa-payments_default": { title: "Credit card", icon: <CreditCard /> },
+  "pp_stripe-ideal_stripe": { title: "iDeal", icon: <Ideal /> },
+  "pp_stripe-bancontact_stripe": { title: "Bancontact", icon: <Bancontact /> },
+  pp_paypal_paypal: { title: "PayPal", icon: <PayPal /> },
+  pp_system_default: { title: "Cash on Delivery (Cash/UPI)", icon: <CreditCard /> },
+  razorpay: { title: "Razorpay", icon: <CreditCard /> },
+  pp_razorpay_razorpay: { title: "Razorpay", icon: <CreditCard /> },
+};
+
+export const isStripeLike = (providerId?: string) =>
+  providerId?.startsWith("pp_stripe_") || providerId?.startsWith("pp_medusa-");
+
+export const isPaypal = (providerId?: string) => providerId?.startsWith("pp_paypal");
+
+export const isManual = (providerId?: string) => providerId?.startsWith("pp_system_default");
+
+export const isRazorpay = (providerId?: string) =>
+  providerId?.startsWith("razorpay") || providerId?.startsWith("pp_razorpay");
+
+export const noDivisionCurrencies = [
+  "krw", "jpy", "vnd", "clp", "pyg", "xaf", "xof", "bif", "djf", "gnf", "kmf", "mga", "rwf",
+  "xpf", "htg", "vuv", "xag", "xdr", "xau",
+];

package/src/context/modal-context.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import React, { createContext, useContext, useState } from "react"
+
+interface ModalContextType {
+  isModalOpen: boolean
+  setIsModalOpen: (isOpen: boolean) => void
+  close: () => void
+}
+
+const ModalContext = createContext<ModalContextType | undefined>(undefined)
+
+export const ModalProvider: React.FC<{ children: React.ReactNode; close?: () => void }> = ({ children, close: closeProp }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  const close = () => {
+    if (closeProp) {
+      closeProp()
+    } else {
+      setIsModalOpen(false)
+    }
+  }
+
+  return (
+    <ModalContext.Provider value={{ isModalOpen, setIsModalOpen, close }}>
+      {children}
+    </ModalContext.Provider>
+  )
+}
+
+export const useModal = () => {
+  const context = useContext(ModalContext)
+  if (context === undefined) {
+    throw new Error("useModal must be used within a ModalProvider")
+  }
+  return context
+}

package/src/context/wishlist-context.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import React, { createContext, useContext, useState, useEffect, useCallback } from "react"
+import { getWishlistProductIds, addToWishlist as addToWishlistApi, removeFromWishlist as removeFromWishlistApi } from "medusa-wishlist-logic/server"
+import { trackAddToWishlist } from "medusa-storefront-analytics"
+
+interface WishlistContextType {
+    wishlistIds: string[]
+    count: number
+    isWishlisted: (productId: string) => boolean
+    toggleWishlist: (productId: string) => Promise<{ success: boolean; error?: string }>
+    refreshWishlist: () => Promise<void>
+}
+
+const WishlistContext = createContext<WishlistContextType | undefined>(undefined)
+
+export const WishlistProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [wishlistIds, setWishlistIds] = useState<string[]>([])
+
+    const refreshWishlist = useCallback(async () => {
+        try {
+            const ids = await getWishlistProductIds()
+            setWishlistIds(ids)
+        } catch (error) {
+            // Error silently ignored for production
+        }
+    }, [])
+
+    useEffect(() => {
+        refreshWishlist()
+    }, [refreshWishlist])
+
+    const isWishlisted = useCallback((productId: string) => {
+        return wishlistIds.includes(productId)
+    }, [wishlistIds])
+
+    const toggleWishlist = async (productId: string) => {
+        const currentlyWishlisted = isWishlisted(productId)
+
+        try {
+            if (currentlyWishlisted) {
+                const result = await removeFromWishlistApi(productId)
+                if (result.success) {
+                    setWishlistIds(prev => prev.filter(id => id !== productId))
+                    return { success: true }
+                }
+                return { success: false, error: result.error }
+            } else {
+                const result = await addToWishlistApi(productId)
+                if (result.success) {
+                    setWishlistIds(prev => [...prev, productId])
+                    trackAddToWishlist({ content_ids: [productId] })
+                    return { success: true }
+                }
+                return { success: false, error: result.error }
+            }
+        } catch (error: any) {
+            return { success: false, error: error.message || "An error occurred" }
+        }
+    }
+
+    return (
+        <WishlistContext.Provider
+            value={{
+                wishlistIds,
+                count: wishlistIds.length,
+                isWishlisted,
+                toggleWishlist,
+                refreshWishlist,
+            }}
+        >
+            {children}
+        </WishlistContext.Provider>
+    )
+}
+
+export const useWishlist = () => {
+    const context = useContext(WishlistContext)
+    if (context === undefined) {
+        throw new Error("useWishlist must be used within a WishlistProvider")
+    }
+    return context
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+/** Shared contexts */
+export { ModalProvider, useModal } from "./context/modal-context";
+export { WishlistProvider, useWishlist } from "./context/wishlist-context";
+
+/** Utilities */
+export { getBaseURL } from "./util/env";
+export { getProductPrice, getPricesForVariant } from "./util/get-product-price";
+export { convertToLocale } from "./util/money";
+export {
+  paymentInfoMap,
+  isStripeLike,
+  isPaypal,
+  isManual,
+  isRazorpay,
+  noDivisionCurrencies,
+} from "./constants/payments";

package/src/skeletons/components/skeleton-button/index.tsx

@@ -0,0 +1,5 @@
+const SkeletonButton = () => {
+  return <div className="w-full min-h-[50px] px-5 py-[10px] bg-gray-100"></div>
+}
+
+export default SkeletonButton

package/src/skeletons/components/skeleton-card-details/index.tsx

@@ -0,0 +1,10 @@
+const SkeletonCardDetails = () => {
+  return (
+    <div className="flex flex-col gap-1 my-4 transition-all duration-150 ease-in-out">
+      <div className="h-4 bg-ui-bg-component-pressed rounded-md w-1/4 animate-pulse mb-1"></div>
+      <div className="pt-3 pb-1 block w-full h-11 px-4 mt-0 bg-ui-bg-field border rounded-md appearance-none border-ui-border-base animate-pulse" />
+    </div>
+  )
+}
+
+export default SkeletonCardDetails

package/src/skeletons/components/skeleton-cart-item/index.tsx

@@ -0,0 +1,35 @@
+import { Table } from "@medusajs/ui"
+
+const SkeletonCartItem = () => {
+  return (
+    <Table.Row className="w-full m-4">
+      <Table.Cell className="!pl-0 p-4 w-24">
+        <div className="flex w-24 h-24 p-4 bg-gray-200 rounded-large animate-pulse" />
+      </Table.Cell>
+      <Table.Cell className="text-left">
+        <div className="flex flex-col gap-y-2">
+          <div className="w-32 h-4 bg-gray-200 animate-pulse" />
+          <div className="w-24 h-4 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2 items-center">
+          <div className="w-6 h-8 bg-gray-200 animate-pulse" />
+          <div className="w-14 h-10 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2">
+          <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell className="!pr-0 text-right">
+        <div className="flex gap-2 justify-end">
+          <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+    </Table.Row>
+  )
+}
+
+export default SkeletonCartItem

package/src/skeletons/components/skeleton-cart-totals/index.tsx

@@ -0,0 +1,30 @@
+const SkeletonCartTotals = ({ header = true }) => {
+  return (
+    <div className="flex flex-col">
+      {header && <div className="w-32 h-4 bg-gray-100 mb-4"></div>}
+      <div className="flex items-center justify-between">
+        <div className="w-32 h-3 bg-gray-100"></div>
+        <div className="w-32 h-3 bg-gray-100"></div>
+      </div>
+
+      <div className="flex items-center justify-between my-4">
+        <div className="w-24 h-3 bg-gray-100"></div>
+        <div className="w-24 h-3 bg-gray-100"></div>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div className="w-28 h-3 bg-gray-100 "></div>
+        <div className="w-20 h-3 bg-gray-100"></div>
+      </div>
+
+      <div className="w-full border-b border-gray-200 border-dashed my-4"></div>
+
+      <div className="flex items-center justify-between">
+        <div className="w-32 h-6 bg-gray-100 mb-4"></div>
+        <div className="w-24 h-6 bg-gray-100 mb-4"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonCartTotals

package/src/skeletons/components/skeleton-code-form/index.tsx

@@ -0,0 +1,13 @@
+const SkeletonCodeForm = () => {
+  return (
+    <div className="w-full flex flex-col">
+      <div className="bg-gray-100 h-7 w-24 mb-4"></div>
+      <div className="grid grid-cols-[1fr_80px] gap-x-2">
+        <div className="bg-gray-100 h-12"></div>
+        <div className="bg-gray-100 h-12"></div>
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonCodeForm

package/src/skeletons/components/skeleton-line-item/index.tsx

@@ -0,0 +1,35 @@
+import { Table } from "@medusajs/ui"
+
+const SkeletonLineItem = () => {
+  return (
+    <Table.Row className="w-full m-4">
+      <Table.Cell className="p-4 w-24">
+        <div className="flex w-24 h-24 p-4 bg-gray-200 animate-pulse" />
+      </Table.Cell>
+      <Table.Cell className="text-left">
+        <div className="flex flex-col gap-y-2">
+          <div className="w-32 h-4 bg-gray-200 animate-pulse" />
+          <div className="w-24 h-4 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2 items-center">
+          <div className="w-6 h-8 bg-gray-200 animate-pulse" />
+          <div className="w-14 h-10 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2">
+          <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <div className="flex gap-2 justify-end">
+          <div className="w-12 h-6 bg-gray-200 animate-pulse" />
+        </div>
+      </Table.Cell>
+    </Table.Row>
+  )
+}
+
+export default SkeletonLineItem