fix(dashboard,types,js-sdk): Locations & Shipping fixes and cleanup (#7715)

This commit is contained in:
Kasper Fabricius Kristensen
2024-06-17 16:10:39 +02:00
committed by GitHub
parent bc0c65c6b3
commit 2e8e7b27b6
116 changed files with 3512 additions and 3288 deletions

View File

@@ -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>

View File

@@ -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",

View File

@@ -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} />}

View File

@@ -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>
)
}

View File

@@ -0,0 +1 @@
export * from "./icon-avatar"

View File

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

View File

@@ -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}
/>
)
}

View File

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

View File

@@ -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"

View File

@@ -0,0 +1 @@
export * from "./link-button"

View File

@@ -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}
/>
)
}

View File

@@ -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
)}