fix(dashboard,types,js-sdk): Locations & Shipping fixes and cleanup (#7715)
This commit is contained in:
committed by
GitHub
parent
bc0c65c6b3
commit
2e8e7b27b6
@@ -16,7 +16,10 @@ type BadgeListSummaryProps = {
|
||||
* Determines whether the center text is truncated if there is no space in the container
|
||||
*/
|
||||
inline?: boolean
|
||||
|
||||
/**
|
||||
* Whether the badges should be rounded
|
||||
*/
|
||||
rounded?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
@@ -24,6 +27,7 @@ export const BadgeListSummary = ({
|
||||
list,
|
||||
className,
|
||||
inline,
|
||||
rounded = false,
|
||||
n = 2,
|
||||
}: BadgeListSummaryProps) => {
|
||||
const { t } = useTranslation()
|
||||
@@ -35,7 +39,7 @@ export const BadgeListSummary = ({
|
||||
return (
|
||||
<div
|
||||
className={clx(
|
||||
"ml-2 text-ui-fg-subtle txt-compact-small gap-x-2 overflow-hidden",
|
||||
"text-ui-fg-subtle txt-compact-small gap-x-2 overflow-hidden",
|
||||
{
|
||||
"inline-flex": inline,
|
||||
flex: !inline,
|
||||
@@ -45,7 +49,7 @@ export const BadgeListSummary = ({
|
||||
>
|
||||
{list.slice(0, n).map((item) => {
|
||||
return (
|
||||
<Badge key={item} size="2xsmall">
|
||||
<Badge rounded={rounded ? "full" : "base"} key={item} size="2xsmall">
|
||||
{item}
|
||||
</Badge>
|
||||
)
|
||||
@@ -62,7 +66,11 @@ export const BadgeListSummary = ({
|
||||
</ul>
|
||||
}
|
||||
>
|
||||
<Badge size="2xsmall" className="cursor-default whitespace-nowrap">
|
||||
<Badge
|
||||
rounded={rounded ? "full" : "base"}
|
||||
size="2xsmall"
|
||||
className="cursor-default whitespace-nowrap"
|
||||
>
|
||||
{title}
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
|
||||
@@ -18,7 +18,7 @@ export const Divider = ({
|
||||
aria-orientation={orientation}
|
||||
role="separator"
|
||||
className={clx(
|
||||
"border-ui-border-strong",
|
||||
"border-ui-border-base",
|
||||
{
|
||||
"w-full border-t":
|
||||
orientation === "horizontal" && variant === "solid",
|
||||
|
||||
@@ -76,20 +76,22 @@ export const NoRecords = ({
|
||||
return (
|
||||
<div
|
||||
className={clx(
|
||||
"flex h-[400px] w-full flex-col items-center justify-center gap-y-6",
|
||||
"flex h-[400px] w-full flex-col items-center justify-center gap-y-4",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col items-center gap-y-2">
|
||||
<ExclamationCircle />
|
||||
<div className="flex flex-col items-center gap-y-3">
|
||||
<ExclamationCircle className="text-ui-fg-subtle" />
|
||||
|
||||
<Text size="small" leading="compact" weight="plus">
|
||||
{title ?? t("general.noRecordsTitle")}
|
||||
</Text>
|
||||
<div className="flex flex-col items-center gap-y-1">
|
||||
<Text size="small" leading="compact" weight="plus">
|
||||
{title ?? t("general.noRecordsTitle")}
|
||||
</Text>
|
||||
|
||||
<Text size="small" className="text-ui-fg-muted">
|
||||
{message ?? t("general.noRecordsMessage")}
|
||||
</Text>
|
||||
<Text size="small" className="text-ui-fg-muted">
|
||||
{message ?? t("general.noRecordsMessage")}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{buttonVariant === "default" && <DefaultButton action={action} />}
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import { clx } from "@medusajs/ui"
|
||||
import { PropsWithChildren } from "react"
|
||||
|
||||
type IconAvatarProps = PropsWithChildren<{
|
||||
className?: string
|
||||
}>
|
||||
|
||||
/**
|
||||
* Use this component when a design calls for an avatar with an icon.
|
||||
*
|
||||
* The `<Avatar/>` component from `@medusajs/ui` does not support passing an icon as a child.
|
||||
*/
|
||||
export const IconAvatar = ({ children, className }: IconAvatarProps) => {
|
||||
return (
|
||||
<div
|
||||
className={clx(
|
||||
"shadow-borders-base flex size-7 items-center justify-center rounded-md",
|
||||
"[&>div]:bg-ui-bg-field [&>div]:text-ui-fg-subtle [&>div]:flex [&>div]:size-6 [&>div]:items-center [&>div]:justify-center [&>div]:rounded-[4px]",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./icon-avatar"
|
||||
@@ -1 +0,0 @@
|
||||
export * from "./inline-link"
|
||||
@@ -1,21 +0,0 @@
|
||||
import { clx } from "@medusajs/ui"
|
||||
import { ComponentPropsWithoutRef } from "react"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
export const InlineLink = ({
|
||||
className,
|
||||
...props
|
||||
}: ComponentPropsWithoutRef<typeof Link>) => {
|
||||
return (
|
||||
<Link
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
}}
|
||||
className={clx(
|
||||
"text-ui-fg-interactive transition-fg hover:text-ui-fg-interactive-hover focus-visible:text-ui-fg-interactive-hover rounded-md outline-none",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./inline-tip"
|
||||
@@ -0,0 +1,60 @@
|
||||
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"
|
||||
@@ -0,0 +1 @@
|
||||
export * from "./link-button"
|
||||
@@ -0,0 +1,29 @@
|
||||
import { clx } from "@medusajs/ui"
|
||||
import { ComponentPropsWithoutRef } from "react"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
interface LinkButtonProps extends ComponentPropsWithoutRef<typeof Link> {
|
||||
variant?: "primary" | "interactive"
|
||||
}
|
||||
|
||||
export const LinkButton = ({
|
||||
className,
|
||||
variant = "interactive",
|
||||
...props
|
||||
}: LinkButtonProps) => {
|
||||
return (
|
||||
<Link
|
||||
className={clx(
|
||||
" transition-fg txt-compact-small-plus rounded-[4px] outline-none",
|
||||
"focus-visible:shadow-borders-focus",
|
||||
{
|
||||
"text-ui-fg-interactive hover:text-ui-fg-interactive-hover":
|
||||
variant === "interactive",
|
||||
"text-ui-fg-base hover:text-ui-fg-subtle": variant === "primary",
|
||||
},
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -16,6 +16,7 @@ type ListSummaryProps = {
|
||||
* Determines whether the center text is truncated if there is no space in the container
|
||||
*/
|
||||
inline?: boolean
|
||||
variant?: "base" | "compact"
|
||||
|
||||
className?: string
|
||||
}
|
||||
@@ -23,6 +24,7 @@ type ListSummaryProps = {
|
||||
export const ListSummary = ({
|
||||
list,
|
||||
className,
|
||||
variant = "compact",
|
||||
inline,
|
||||
n = 2,
|
||||
}: ListSummaryProps) => {
|
||||
@@ -35,10 +37,12 @@ export const ListSummary = ({
|
||||
return (
|
||||
<div
|
||||
className={clx(
|
||||
"text-ui-fg-subtle txt-compact-small gap-x-1 overflow-hidden",
|
||||
"text-ui-fg-subtle gap-x-1 overflow-hidden",
|
||||
{
|
||||
"inline-flex": inline,
|
||||
flex: !inline,
|
||||
"txt-compact-small": variant === "compact",
|
||||
"txt-small": variant === "base",
|
||||
},
|
||||
className
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user