{children}
)
- : "div";
+ : 'div';
if (action.onClick) {
return (
- {list.slice(0, n).map((item) => {
+ {list.slice(0, n).map(item => {
return (
-
+
{item}
- )
+ );
})}
{list.length > n && (
@@ -60,14 +64,14 @@ export const BadgeListSummary = ({
- {list.slice(n).map((c) => (
+ {list.slice(n).map(c => (
{c}
))}
}
>
@@ -77,5 +81,5 @@ export const BadgeListSummary = ({
)}
- )
-}
+ );
+};
diff --git a/src/components/common/badge-list-summary/index.ts b/src/components/common/badge-list-summary/index.ts
index a156dab6..aef2528a 100644
--- a/src/components/common/badge-list-summary/index.ts
+++ b/src/components/common/badge-list-summary/index.ts
@@ -1 +1 @@
-export * from "./badge-list-summary"
+export * from './badge-list-summary';
diff --git a/src/components/common/chip-group/chip-group.tsx b/src/components/common/chip-group/chip-group.tsx
index 48ed2ef3..19313532 100644
--- a/src/components/common/chip-group/chip-group.tsx
+++ b/src/components/common/chip-group/chip-group.tsx
@@ -1,50 +1,51 @@
-import { XMarkMini } from "@medusajs/icons"
-import { Button, clx } from "@medusajs/ui"
-import { Children, PropsWithChildren, createContext, useContext } from "react"
-import { useTranslation } from "react-i18next"
+import { Children, createContext, useContext, type PropsWithChildren } from 'react';
-type ChipGroupVariant = "base" | "component"
+import { XMarkMini } from '@medusajs/icons';
+import { Button, clx } from '@medusajs/ui';
+import { useTranslation } from 'react-i18next';
+
+type ChipGroupVariant = 'base' | 'component';
type ChipGroupProps = PropsWithChildren<{
- onClearAll?: () => void
- onRemove?: (index: number) => void
- variant?: ChipGroupVariant
- className?: string
-}>
+ onClearAll?: () => void;
+ onRemove?: (index: number) => void;
+ variant?: ChipGroupVariant;
+ className?: string;
+}>;
type GroupContextValue = {
- onRemove?: (index: number) => void
- variant: ChipGroupVariant
-}
+ onRemove?: (index: number) => void;
+ variant: ChipGroupVariant;
+};
-const GroupContext = createContext-
{children}
{showClearAll && (
@@ -56,35 +57,35 @@ const Group = ({
onClick={onClearAll}
className="text-ui-fg-muted active:text-ui-fg-subtle"
>
- {t("actions.clearAll")}
+ {t('actions.clearAll')}
)}
-
+
-
+
+
+
- )
+ );
}
-export default DisplayId
+export default DisplayId;
diff --git a/src/components/common/display-id/index.ts b/src/components/common/display-id/index.ts
index c423966f..3820b1ae 100644
--- a/src/components/common/display-id/index.ts
+++ b/src/components/common/display-id/index.ts
@@ -1 +1 @@
-export * from "./display-id"
+export * from './display-id';
diff --git a/src/components/common/empty-table-content/empty-table-content.tsx b/src/components/common/empty-table-content/empty-table-content.tsx
index 8b93b849..be210533 100644
--- a/src/components/common/empty-table-content/empty-table-content.tsx
+++ b/src/components/common/empty-table-content/empty-table-content.tsx
@@ -1,10 +1,9 @@
-import React from "react";
+import type { ReactNode } from 'react';
-import { ExclamationCircle, MagnifyingGlass, PlusMini } from "@medusajs/icons";
-import { Button, Text, clx } from "@medusajs/ui";
-
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { ExclamationCircle, MagnifyingGlass, PlusMini } from '@medusajs/icons';
+import { Button, clx, Text } from '@medusajs/ui';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
export type NoResultsProps = {
title?: string;
@@ -16,19 +15,21 @@ export const NoResults = ({ title, message, className }: NoResultsProps) => {
const { t } = useTranslation();
return (
-
-
- {t("fields.startDate")}
+
+ {t('fields.startDate')}
-
+
{startDate
? getFullDate({
date: startDate,
- includeTime: showTime,
+ includeTime: showTime
})
- : "-"}
+ : '-'}
+
- )
-}
+ );
+};
const Bar = ({ date }: { date: Date | null }) => {
- const now = new Date()
+ const now = new Date();
- const isDateInFuture = date && date > now
+ const isDateInFuture = date && date > now;
return (
- )
-}
+ );
+};
diff --git a/src/components/common/date-range-display/index.ts b/src/components/common/date-range-display/index.ts
index f703c451..ab774d1d 100644
--- a/src/components/common/date-range-display/index.ts
+++ b/src/components/common/date-range-display/index.ts
@@ -1 +1 @@
-export * from "./date-range-display"
+export * from './date-range-display';
diff --git a/src/components/common/display-id/display-id.tsx b/src/components/common/display-id/display-id.tsx
index 844dc048..a5238eeb 100644
--- a/src/components/common/display-id/display-id.tsx
+++ b/src/components/common/display-id/display-id.tsx
@@ -1,30 +1,38 @@
-import { useTranslation } from "react-i18next"
-import { useState } from "react"
-import copy from "copy-to-clipboard"
+import { useState } from 'react';
-import { clx, toast, Tooltip } from "@medusajs/ui"
+import { clx, toast, Tooltip } from '@medusajs/ui';
+import copy from 'copy-to-clipboard';
+import { useTranslation } from 'react-i18next';
type DisplayIdProps = {
- id: string
- className?: string
-}
+ id: string;
+ className?: string;
+};
function DisplayId({ id, className }: DisplayIdProps) {
- const { t } = useTranslation()
- const [open, setOpen] = useState(false)
+ const { t } = useTranslation();
+ const [open, setOpen] = useState(false);
const onClick = () => {
- copy(id)
- toast.success(t("actions.idCopiedToClipboard"))
- }
+ copy(id);
+ toast.success(t('actions.idCopiedToClipboard'));
+ };
return (
-
-
- {t("fields.endDate")}
+
+ {t('fields.endDate')}
-
+
{endDate
? getFullDate({
date: endDate,
- includeTime: showTime,
+ includeTime: showTime
})
- : "-"}
+ : '-'}
+
- {title ?? t("general.noResultsTitle")}
+
+ {title ?? t('general.noResultsTitle')}
-
- {message ?? t("general.noResultsMessage")}
+
+ {message ?? t('general.noResultsMessage')}
@@ -48,14 +49,14 @@ type NoRecordsProps = {
message?: string;
className?: string;
buttonVariant?: string;
- icon?: React.ReactNode;
- "data-testid"?: string;
+ icon?: ReactNode;
+ 'data-testid'?: string;
} & ActionProps;
const DefaultButton = ({
action,
- "data-testid": dataTestId,
-}: ActionProps & { "data-testid"?: string }) =>
+ 'data-testid': dataTestId
+}: ActionProps & { 'data-testid'?: string }) =>
action && (
{action.label}
@@ -75,8 +74,8 @@ const DefaultButton = ({
const TransparentIconLeftButton = ({
action,
- "data-testid": dataTestId,
-}: ActionProps & { "data-testid"?: string }) =>
+ 'data-testid': dataTestId
+}: ActionProps & { 'data-testid'?: string }) =>
action && (
);
diff --git a/src/components/common/empty-table-content/index.ts b/src/components/common/empty-table-content/index.ts
index 405e5ca3..88ebe538 100644
--- a/src/components/common/empty-table-content/index.ts
+++ b/src/components/common/empty-table-content/index.ts
@@ -1 +1 @@
-export * from "./empty-table-content"
+export * from './empty-table-content';
diff --git a/src/components/common/file-preview/file-preview.tsx b/src/components/common/file-preview/file-preview.tsx
index e7a2fa83..0f462caf 100644
--- a/src/components/common/file-preview/file-preview.tsx
+++ b/src/components/common/file-preview/file-preview.tsx
@@ -1,6 +1,6 @@
-import { ArrowDownTray, Spinner } from "@medusajs/icons"
-import { IconButton, Text } from "@medusajs/ui"
-import { ActionGroup, ActionMenu } from "../action-menu"
+import { ActionMenu, type ActionGroup } from '@components/common/action-menu';
+import { ArrowDownTray, Spinner } from '@medusajs/icons';
+import { IconButton, Text } from '@medusajs/ui';
export const FilePreview = ({
filename,
@@ -8,54 +8,58 @@ export const FilePreview = ({
loading,
activity,
actions,
- hideThumbnail,
+ hideThumbnail
}: {
- filename: string
- url?: string
- loading?: boolean
- activity?: string
- actions?: ActionGroup[]
- hideThumbnail?: boolean
-}) => {
- return (
-
@@ -117,9 +114,7 @@ export const NoRecords = ({
className="flex flex-col items-center gap-y-3"
data-testid={dataTestId ? `${dataTestId}-content` : undefined}
>
-
- {buttonVariant === "default" && (
-
- {icon}
-
+ {icon}
- {title ?? t("general.noRecordsTitle")}
+ {title ?? t('general.noRecordsTitle')}
- {message ?? t("general.noRecordsMessage")}
+ {message ?? t('general.noRecordsMessage')}
-
-
-
- {!hideThumbnail &&
{
y2="32"
gradientUnits="userSpaceOnUse"
>
-
{
y2="32"
gradientUnits="userSpaceOnUse"
>
-
{
y2="21.25"
gradientUnits="userSpaceOnUse"
>
-
{
y2="21.25"
gradientUnits="userSpaceOnUse"
>
-
- )
-}
+ );
+};
diff --git a/src/components/common/file-preview/index.ts b/src/components/common/file-preview/index.ts
index 1a365200..cbac03dc 100644
--- a/src/components/common/file-preview/index.ts
+++ b/src/components/common/file-preview/index.ts
@@ -1 +1 @@
-export * from "./file-preview"
+export * from "./file-preview";
diff --git a/src/components/common/file-upload/file-upload.tsx b/src/components/common/file-upload/file-upload.tsx
index f05c45ac..213c6e9d 100644
--- a/src/components/common/file-upload/file-upload.tsx
+++ b/src/components/common/file-upload/file-upload.tsx
@@ -1,20 +1,22 @@
-import { ArrowDownTray } from "@medusajs/icons"
-import { Text, clx } from "@medusajs/ui"
-import { ChangeEvent, DragEvent, useRef, useState } from "react"
+import type { ChangeEvent, DragEvent } from "react";
+import { useRef, useState } from "react";
+
+import { ArrowDownTray } from "@medusajs/icons";
+import { Text, clx } from "@medusajs/ui";
export interface FileType {
- id: string
- url: string
- file: File
+ id: string;
+ url: string;
+ file: File;
}
export interface FileUploadProps {
- label: string
- multiple?: boolean
- hint?: string
- hasError?: boolean
- formats: string[]
- onUploaded: (files: FileType[]) => void
+ label: string;
+ multiple?: boolean;
+ hint?: string;
+ hasError?: boolean;
+ formats: string[];
+ onUploaded: (files: FileType[]) => void;
}
export const FileUpload = ({
@@ -25,72 +27,73 @@ export const FileUpload = ({
formats,
onUploaded,
}: FileUploadProps) => {
- const [isDragOver, setIsDragOver] = useState(false)
- const inputRef = useRef(null)
- const dropZoneRef = useRef(null)
+ const [isDragOver, setIsDragOver] = useState(false);
+ const inputRef = useRef(null);
+ const dropZoneRef = useRef(null);
const handleOpenFileSelector = () => {
- inputRef.current?.click()
- }
+ inputRef.current?.click();
+ };
const handleDragEnter = (event: DragEvent) => {
- event.preventDefault()
- event.stopPropagation()
+ event.preventDefault();
+ event.stopPropagation();
- const files = event.dataTransfer?.files
+ const files = event.dataTransfer?.files;
if (!files) {
- return
+ return;
}
- setIsDragOver(true)
- }
+ setIsDragOver(true);
+ };
const handleDragLeave = (event: DragEvent) => {
- event.preventDefault()
- event.stopPropagation()
+ event.preventDefault();
+ event.stopPropagation();
if (
!dropZoneRef.current ||
dropZoneRef.current.contains(event.relatedTarget as Node)
) {
- return
+ return;
}
- setIsDragOver(false)
- }
+ setIsDragOver(false);
+ };
const handleUploaded = (files: FileList | null) => {
if (!files) {
- return
+ return;
}
- const fileList = Array.from(files)
+ const fileList = Array.from(files);
const fileObj = fileList.map((file) => {
- const id = Math.random().toString(36).substring(7)
+ const id = Math.random().toString(36).substring(7);
+
+ const previewUrl = URL.createObjectURL(file);
- const previewUrl = URL.createObjectURL(file)
return {
id: id,
url: previewUrl,
file,
- }
- })
+ };
+ });
- onUploaded(fileObj)
- }
+ onUploaded(fileObj);
+ };
const handleDrop = (event: DragEvent) => {
- event.preventDefault()
- event.stopPropagation()
+ event.preventDefault();
+ event.stopPropagation();
- setIsDragOver(false)
+ setIsDragOver(false);
- handleUploaded(event.dataTransfer?.files)
- }
+ handleUploaded(event.dataTransfer?.files);
+ };
const handleFileChange = async (event: ChangeEvent) => {
- handleUploaded(event.target.files)
- }
+ handleUploaded(event.target.files);
+ };
return (
- )
-}
+ );
+};
diff --git a/src/components/common/json-view-section/index.ts b/src/components/common/json-view-section/index.ts
index be52949a..51f597db 100644
--- a/src/components/common/json-view-section/index.ts
+++ b/src/components/common/json-view-section/index.ts
@@ -1 +1 @@
-export * from "./json-view-section"
+export * from "./json-view-section";
diff --git a/src/components/common/json-view-section/json-view-section.tsx b/src/components/common/json-view-section/json-view-section.tsx
index 65ee10a6..32f638d1 100644
--- a/src/components/common/json-view-section/json-view-section.tsx
+++ b/src/components/common/json-view-section/json-view-section.tsx
@@ -1,38 +1,47 @@
+import { Suspense, useState, type CSSProperties, type MouseEvent } from 'react';
+
import {
ArrowUpRightOnBox,
Check,
SquareTwoStack,
TriangleDownMini,
- XMarkMini,
-} from "@medusajs/icons"
-import {
- Badge,
- Container,
- Drawer,
- Heading,
- IconButton,
- Kbd,
-} from "@medusajs/ui"
-import Primitive from "@uiw/react-json-view"
-import { CSSProperties, MouseEvent, Suspense, useState } from "react"
-import { Trans, useTranslation } from "react-i18next"
+ XMarkMini
+} from '@medusajs/icons';
+import { Badge, Container, Drawer, Heading, IconButton, Kbd } from '@medusajs/ui';
+import Primitive from '@uiw/react-json-view';
+import { Trans, useTranslation } from 'react-i18next';
type JsonViewSectionProps = {
- data: object
- title?: string
-}
+ data: object;
+ title?: string;
+};
export const JsonViewSection = ({ data }: JsonViewSectionProps) => {
- const { t } = useTranslation()
- const numberOfKeys = Object.keys(data).length
+ const { t } = useTranslation();
+ const numberOfKeys = Object.keys(data).length;
return (
-
+ filename: string;
+ url?: string;
+ loading?: boolean;
+ activity?: string;
+ actions?: ActionGroup[];
+ hideThumbnail?: boolean;
+}) => (
+
+);
const FileThumbnail = () => {
return (
@@ -70,14 +74,14 @@ const FileThumbnail = () => {
d="M20 31.75H4C1.92893 31.75 0.25 30.0711 0.25 28V4C0.25 1.92893 1.92893 0.25 4 0.25H15.9431C16.9377 0.25 17.8915 0.645088 18.5948 1.34835L22.6516 5.4052C23.3549 6.10847 23.75 7.06229 23.75 8.05685V28C23.75 30.0711 22.0711 31.75 20 31.75Z"
fill="url(#paint0_linear_6594_388107)"
stroke="url(#paint1_linear_6594_388107)"
- stroke-width="0.5"
+ strokeWidth="0.5"
/>
+
+
+
+ )}
- )
-}
+
+
-
-
- )}
+
+ {loading &&
+ {!hideThumbnail &&
-
- {loading &&
+
+ {filename}
+
+
+ {loading && !!activity && (
- {filename}
+ {activity}
-
- {loading && !!activity && (
-
- {activity}
-
- )}
-
+ )}
@@ -103,16 +106,16 @@ export const FileUpload = ({
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
className={clx(
- "bg-ui-bg-component border-ui-border-strong transition-fg group flex w-full flex-col items-center gap-y-2 rounded-lg border border-dashed p-8",
+ "group flex w-full flex-col items-center gap-y-2 rounded-lg border border-dashed border-ui-border-strong bg-ui-bg-component p-8 transition-fg",
"hover:border-ui-border-interactive focus:border-ui-border-interactive",
- "focus:shadow-borders-focus outline-none focus:border-solid",
+ "outline-none focus:border-solid focus:shadow-borders-focus",
{
"!border-ui-border-error": hasError,
"!border-ui-border-interactive": isDragOver,
- }
+ },
)}
>
- = FieldPath
+ TName extends FieldPath = FieldPath,
> = {
- name: TName
-}
+ name: TName;
+};
const FormFieldContext = createContext(
- {} as FormFieldContextValue
-)
+ {} as FormFieldContextValue,
+);
const Field = <
TFieldValues extends FieldValues = FieldValues,
- TName extends FieldPath = FieldPath
+ TName extends FieldPath = FieldPath,
>({
...props
}: ControllerProps) => {
@@ -48,30 +45,30 @@ const Field = <
- )
-}
+ );
+};
type FormItemContextValue = {
- id: string
-}
+ id: string;
+};
const FormItemContext = createContext(
- {} as FormItemContextValue
-)
+ {} as FormItemContextValue,
+);
const useFormField = () => {
- const fieldContext = useContext(FormFieldContext)
- const itemContext = useContext(FormItemContext)
- const { getFieldState } = useFormContext()
+ const fieldContext = useContext(FormFieldContext);
+ const itemContext = useContext(FormItemContext);
+ const { getFieldState } = useFormContext();
- const formState = useFormState({ name: fieldContext.name })
- const fieldState = getFieldState(fieldContext.name, formState)
+ const formState = useFormState({ name: fieldContext.name });
+ const fieldState = getFieldState(fieldContext.name, formState);
if (!fieldContext) {
- throw new Error("useFormField should be used within a FormField")
+ throw new Error("useFormField should be used within a FormField");
}
- const { id } = itemContext
+ const { id } = itemContext;
return {
id,
@@ -81,12 +78,12 @@ const useFormField = () => {
formDescriptionId: `${id}-form-item-description`,
formErrorMessageId: `${id}-form-item-message`,
...fieldState,
- }
-}
+ };
+};
const Item = forwardRef>(
({ className, ...props }, ref) => {
- const id = useId()
+ const id = useId();
return (
@@ -96,21 +93,21 @@ const Item = forwardRef>(
{...props}
/>
- )
- }
-)
-Item.displayName = "Form.Item"
+ );
+ },
+);
+Item.displayName = "Form.Item";
const Label = forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef & {
- optional?: boolean
- tooltip?: ReactNode
- icon?: ReactNode
+ optional?: boolean;
+ tooltip?: ReactNode;
+ icon?: ReactNode;
}
>(({ className, optional = false, tooltip, icon, ...props }, ref) => {
- const { formLabelId, formItemId } = useFormField()
- const { t } = useTranslation()
+ const { formLabelId, formItemId } = useFormField();
+ const { t } = useTranslation();
return (
,
@@ -149,7 +146,7 @@ const Control = forwardRef<
formDescriptionId,
formErrorMessageId,
formLabelId,
- } = useFormField()
+ } = useFormField();
return (
>(({ className, ...props }, ref) => {
- const { formDescriptionId } = useFormField()
+ const { formDescriptionId } = useFormField();
return (
>(({ className, children, ...props }, ref) => {
- const { error, formErrorMessageId } = useFormField()
- const msg = error ? String(error?.message) : children
+ const { error, formErrorMessageId } = useFormField();
+ const msg = error ? String(error?.message) : children;
if (!msg || msg === "undefined") {
- return null
+ return null;
}
return (
@@ -206,9 +203,9 @@ const ErrorMessage = forwardRef<
>
{msg}
- )
-})
-ErrorMessage.displayName = "Form.ErrorMessage"
+ );
+});
+ErrorMessage.displayName = "Form.ErrorMessage";
const Form = Object.assign(Provider, {
Item,
@@ -217,6 +214,6 @@ const Form = Object.assign(Provider, {
Hint,
ErrorMessage,
Field,
-})
+});
-export { Form }
+export { Form };
diff --git a/src/components/common/icon-avatar/icon-avatar.tsx b/src/components/common/icon-avatar/icon-avatar.tsx
index 65b3e3e2..f00895b0 100644
--- a/src/components/common/icon-avatar/icon-avatar.tsx
+++ b/src/components/common/icon-avatar/icon-avatar.tsx
@@ -1,11 +1,12 @@
-import { clx } from "@medusajs/ui"
-import { PropsWithChildren } from "react"
+import type { PropsWithChildren } from 'react';
+
+import { clx } from '@medusajs/ui';
type IconAvatarProps = PropsWithChildren<{
- className?: string
- size?: "small" | "large" | "xlarge"
- "data-testid"?: string
-}>
+ className?: string;
+ size?: 'small' | 'large' | 'xlarge';
+ 'data-testid'?: string;
+}>;
/**
* Use this component when a design calls for an avatar with an icon.
@@ -13,23 +14,20 @@ type IconAvatarProps = PropsWithChildren<{
* The ` = {
- queryKey: QueryKey
- queryFn: (params: TParams) => Promise
- queryOptions?: { enabled?: boolean }
- renderItem: (item: TEntity) => ReactNode
- renderEmpty: () => ReactNode
- responseKey: keyof TResponse
- pageSize?: number
-}
+ queryKey: QueryKey;
+ queryFn: (params: TParams) => Promise;
+ queryOptions?: { enabled?: boolean };
+ renderItem: (item: TEntity) => ReactNode;
+ renderEmpty: () => ReactNode;
+ responseKey: keyof TResponse;
+ pageSize?: number;
+};
export const InfiniteList = <
TResponse extends { count: number; offset: number; limit: number },
@@ -41,34 +45,36 @@ export const InfiniteList = <
return await queryFn({
limit: pageSize,
offset: pageParam,
- } as TParams)
+ } as TParams);
},
initialPageParam: 0,
maxPages: 5,
getNextPageParam: (lastPage) => {
- const moreItemsExist = lastPage.count > lastPage.offset + lastPage.limit
- return moreItemsExist ? lastPage.offset + lastPage.limit : undefined
+ const moreItemsExist = lastPage.count > lastPage.offset + lastPage.limit;
+
+ return moreItemsExist ? lastPage.offset + lastPage.limit : undefined;
},
getPreviousPageParam: (firstPage) => {
- const moreItemsExist = firstPage.offset !== 0
+ const moreItemsExist = firstPage.offset !== 0;
+
return moreItemsExist
? Math.max(firstPage.offset - firstPage.limit, 0)
- : undefined
+ : undefined;
},
...queryOptions,
- })
+ });
const items = useMemo(() => {
- return data?.pages.flatMap((p) => p[responseKey] as TEntity[]) ?? []
- }, [data, responseKey])
+ return data?.pages.flatMap((p) => p[responseKey] as TEntity[]) ?? [];
+ }, [data, responseKey]);
- const parentRef = useRef(null)
- const startObserver = useRef()
- const endObserver = useRef()
+ const parentRef = useRef(null);
+ const startObserver = useRef();
+ const endObserver = useRef();
useEffect(() => {
if (isPending) {
- return
+ return;
}
// Define the new observers after we stop fetching
@@ -77,41 +83,41 @@ export const InfiniteList = <
startObserver.current = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting && hasPreviousPage) {
- startObserver.current?.disconnect()
- fetchPreviousPage()
+ startObserver.current?.disconnect();
+ fetchPreviousPage();
}
},
{
threshold: 0.5,
- }
- )
+ },
+ );
endObserver.current = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting && hasNextPage) {
- endObserver.current?.disconnect()
- fetchNextPage()
+ endObserver.current?.disconnect();
+ fetchNextPage();
}
},
{
threshold: 0.5,
- }
- )
+ },
+ );
// Register the new observers to observe the new first and last children
if (parentRef.current?.firstChild) {
- startObserver.current?.observe(parentRef.current.firstChild as Element)
+ startObserver.current?.observe(parentRef.current.firstChild as Element);
}
if (parentRef.current?.lastChild) {
- endObserver.current?.observe(parentRef.current.lastChild as Element)
+ endObserver.current?.observe(parentRef.current.lastChild as Element);
}
}
// Clear the old observers
return () => {
- startObserver.current?.disconnect()
- endObserver.current?.disconnect()
- }
+ startObserver.current?.disconnect();
+ endObserver.current?.disconnect();
+ };
}, [
fetchNextPage,
fetchPreviousPage,
@@ -119,20 +125,20 @@ export const InfiniteList = <
hasPreviousPage,
isFetching,
isPending,
- ])
+ ]);
useEffect(() => {
if (error) {
- toast.error(error.message)
+ toast.error(error.message);
}
- }, [error])
+ }, [error]);
if (isPending) {
return (
)}
+
{label}
@@ -135,5 +138,5 @@ export const FileUpload = ({
multiple={multiple}
/>
- )
-}
+ );
+};
diff --git a/src/components/common/file-upload/index.ts b/src/components/common/file-upload/index.ts
index 622ec7e6..b64999d1 100644
--- a/src/components/common/file-upload/index.ts
+++ b/src/components/common/file-upload/index.ts
@@ -1 +1 @@
-export * from "./file-upload"
+export * from "./file-upload";
diff --git a/src/components/common/form/form.tsx b/src/components/common/form/form.tsx
index 2e7fbf05..419c8983 100644
--- a/src/components/common/form/form.tsx
+++ b/src/components/common/form/form.tsx
@@ -1,46 +1,43 @@
-import { InformationCircleSolid } from "@medusajs/icons"
+import type { ReactNode } from "react";
+import type React from "react";
+import { createContext, forwardRef, useContext, useId } from "react";
+
+import { InformationCircleSolid } from "@medusajs/icons";
import {
Hint as HintComponent,
Label as LabelComponent,
Text,
Tooltip,
clx,
-} from "@medusajs/ui"
-import { Label as RadixLabel, Slot } from "radix-ui"
-import React, {
- ReactNode,
- createContext,
- forwardRef,
- useContext,
- useId,
-} from "react"
+} from "@medusajs/ui";
+
+import type { Label as RadixLabel } from "radix-ui";
+import { Slot } from "radix-ui";
+import type { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
import {
Controller,
- ControllerProps,
- FieldPath,
- FieldValues,
FormProvider,
useFormContext,
useFormState,
-} from "react-hook-form"
-import { useTranslation } from "react-i18next"
+} from "react-hook-form";
+import { useTranslation } from "react-i18next";
-const Provider = FormProvider
+const Provider = FormProvider;
type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
- TName extends FieldPath
@@ -135,9 +132,9 @@ const Label = forwardRef<
)}
- )
-})
-Label.displayName = "Form.Label"
+ );
+});
+Label.displayName = "Form.Label";
const Control = forwardRef<
React.ElementRefdiv]:bg-ui-bg-field [&>div]:text-ui-fg-subtle [&>div]:flex [&>div]:size-6 [&>div]:items-center [&>div]:justify-center",
+ 'flex size-7 items-center justify-center shadow-borders-base',
+ '[&>div]:flex [&>div]:size-6 [&>div]:items-center [&>div]:justify-center [&>div]:bg-ui-bg-field [&>div]:text-ui-fg-subtle',
{
- "size-7 rounded-md [&>div]:size-6 [&>div]:rounded-[4px]":
- size === "small",
- "size-10 rounded-lg [&>div]:size-9 [&>div]:rounded-[6px]":
- size === "large",
- "size-12 rounded-xl [&>div]:size-11 [&>div]:rounded-[10px]":
- size === "xlarge",
+ 'size-7 rounded-md [&>div]:size-6 [&>div]:rounded-[4px]': size === 'small',
+ 'size-10 rounded-lg [&>div]:size-9 [&>div]:rounded-[6px]': size === 'large',
+ 'size-12 rounded-xl [&>div]:size-11 [&>div]:rounded-[10px]': size === 'xlarge'
},
className
)}
@@ -37,5 +35,5 @@ export const IconAvatar = ({
>
- )
-}
+ );
+};
diff --git a/src/components/common/icon-avatar/index.ts b/src/components/common/icon-avatar/index.ts
index ee6f4861..ab1c1be2 100644
--- a/src/components/common/icon-avatar/index.ts
+++ b/src/components/common/icon-avatar/index.ts
@@ -1 +1 @@
-export * from "./icon-avatar"
+export * from "./icon-avatar";
diff --git a/src/components/common/infinite-list/index.ts b/src/components/common/infinite-list/index.ts
index c60bfb6b..06265b70 100644
--- a/src/components/common/infinite-list/index.ts
+++ b/src/components/common/infinite-list/index.ts
@@ -1 +1 @@
-export * from "./infinite-list"
+export * from "./infinite-list";
diff --git a/src/components/common/infinite-list/infinite-list.tsx b/src/components/common/infinite-list/infinite-list.tsx
index c2a7cf07..da9351e3 100644
--- a/src/components/common/infinite-list/infinite-list.tsx
+++ b/src/components/common/infinite-list/infinite-list.tsx
@@ -1,17 +1,21 @@
-import { QueryKey, useInfiniteQuery } from "@tanstack/react-query"
-import { ReactNode, useEffect, useMemo, useRef } from "react"
-import { toast } from "@medusajs/ui"
-import { Spinner } from "@medusajs/icons"
+import type { ReactNode } from "react";
+import { useEffect, useMemo, useRef } from "react";
+
+import { Spinner } from "@medusajs/icons";
+import { toast } from "@medusajs/ui";
+
+import type { QueryKey } from "@tanstack/react-query";
+import { useInfiniteQuery } from "@tanstack/react-query";
type InfiniteListProps{children}
- {t("json.header")}
-
- {t("json.numberOfKeys", {
- count: numberOfKeys,
+
+
-
+
+ {t('json.header')}
+
+
+ {t('json.numberOfKeys', {
+ count: numberOfKeys
})}
@@ -49,35 +58,53 @@ export const JsonViewSection = ({ data }: JsonViewSectionProps) => {
+
-
+
-
- {t("json.drawer.description")}
+
+ {t('json.drawer.description')}
-
-
+
} />
(
- null
- )}
+ render={() => null}
/>
(
- undefined
- )}
+ render={() => undefined}
/>
{
return (
-
- {t("general.items", {
- count: Object.keys(value as object).length,
+
+ {t('general.items', {
+ count: Object.keys(value as object).length
})}
- )
+ );
}}
/>
-
:
{
- return
@@ -159,46 +189,49 @@ export const JsonViewSection = ({ data }: JsonViewSectionProps) => {
- )
-}
+ );
+};
type CopiedProps = {
- style?: CSSProperties
- value: object | undefined
-}
+ style?: CSSProperties;
+ value: object | undefined;
+};
const Copied = ({ style, value }: CopiedProps) => {
- const [copied, setCopied] = useState(false)
+ const [copied, setCopied] = useState(false);
const handler = (e: MouseEvent) => {
- e.stopPropagation()
- setCopied(true)
+ e.stopPropagation();
+ setCopied(true);
- if (typeof value === "string") {
- navigator.clipboard.writeText(value)
+ if (typeof value === 'string') {
+ navigator.clipboard.writeText(value);
} else {
- const json = JSON.stringify(value, null, 2)
- navigator.clipboard.writeText(json)
+ const json = JSON.stringify(value, null, 2);
+ navigator.clipboard.writeText(json);
}
setTimeout(() => {
- setCopied(false)
- }, 2000)
- }
+ setCopied(false);
+ }, 2000);
+ };
- const styl = { whiteSpace: "nowrap", width: "20px" }
+ const styl = { whiteSpace: 'nowrap', width: '20px' };
if (copied) {
return (
{
- variant?: "primary" | "interactive"
+ variant?: "primary" | "interactive";
}
export const LinkButton = ({
className,
variant = "interactive",
...props
-}: LinkButtonProps) => {
- return (
-
- )
-}
+}: LinkButtonProps) => (
+
+);
diff --git a/src/components/common/list-summary/index.ts b/src/components/common/list-summary/index.ts
index 0fbd1961..a4fd7f5f 100644
--- a/src/components/common/list-summary/index.ts
+++ b/src/components/common/list-summary/index.ts
@@ -1 +1 @@
-export { ListSummary } from "./list-summary"
+export { ListSummary } from './list-summary';
diff --git a/src/components/common/list-summary/list-summary.tsx b/src/components/common/list-summary/list-summary.tsx
index 27cd5f66..81e31698 100644
--- a/src/components/common/list-summary/list-summary.tsx
+++ b/src/components/common/list-summary/list-summary.tsx
@@ -1,61 +1,61 @@
-import { Tooltip, clx } from "@medusajs/ui"
-import { useTranslation } from "react-i18next"
+import { clx, Tooltip } from '@medusajs/ui';
+import { useTranslation } from 'react-i18next';
type ListSummaryProps = {
/**
* Number of initial items to display
* @default 2
*/
- n?: number
+ n?: number;
/**
* List of strings to display as abbreviated list
*/
- list: string[]
+ list: string[];
/**
* Is the summary displayed inline.
* Determines whether the center text is truncated if there is no space in the container
*/
- inline?: boolean
- variant?: "base" | "compact"
+ inline?: boolean;
+ variant?: 'base' | 'compact';
- className?: string
-}
+ className?: string;
+};
export const ListSummary = ({
list,
className,
- variant = "compact",
+ variant = 'compact',
inline,
- n = 2,
+ n = 2
}: ListSummaryProps) => {
- const { t } = useTranslation()
+ const { t } = useTranslation();
- const title = t("general.plusCountMore", {
- count: list.length - n,
- })
+ const title = t('general.plusCountMore', {
+ count: list.length - n
+ });
return (
- {list.slice(n).map((c) => (
+ {list.slice(n).map(c => (
{c}
))}
@@ -66,5 +66,5 @@ export const ListSummary = ({
)}
- )
-}
+ );
+};
diff --git a/src/components/common/listicle/index.ts b/src/components/common/listicle/index.ts
index 49b9a3a3..65a929c7 100644
--- a/src/components/common/listicle/index.ts
+++ b/src/components/common/listicle/index.ts
@@ -1 +1 @@
-export * from "./listicle"
+export * from "./listicle";
diff --git a/src/components/common/listicle/listicle.tsx b/src/components/common/listicle/listicle.tsx
index 05b7836d..adb804b6 100644
--- a/src/components/common/listicle/listicle.tsx
+++ b/src/components/common/listicle/listicle.tsx
@@ -1,34 +1,35 @@
-import { Text } from "@medusajs/ui"
-import { ReactNode } from "react"
+import type { ReactNode } from 'react';
+
+import { Text } from '@medusajs/ui';
export interface ListicleProps {
- labelKey: string
- descriptionKey: string
- children?: ReactNode
+ labelKey: string;
+ descriptionKey: string;
+ children?: ReactNode;
}
-export const Listicle = ({
- labelKey,
- descriptionKey,
- children,
-}: ListicleProps) => {
- return (
-
-
+
-
+
esc
-
}
- >
+
+
}>
- {list.slice(0, n).join(", ")}
+ {list.slice(0, n).join(', ')}
{list.length > n && (
-
-
-
- {checked && (
- (
+
+ {checked && (
+
+
- )}
-
+
+
+ )}
+
-
- )
-}
+
+
+
+
+);
+
+export default AvatarBox;
diff --git a/src/components/common/logo-box/index.ts b/src/components/common/logo-box/index.ts
index 96e7eccd..d0b48aed 100644
--- a/src/components/common/logo-box/index.ts
+++ b/src/components/common/logo-box/index.ts
@@ -1,2 +1,2 @@
-export * from "./logo-box"
-export * from "./avatar-box"
+export * from './logo-box';
+export * from './avatar-box';
diff --git a/src/components/common/logo-box/logo-box.tsx b/src/components/common/logo-box/logo-box.tsx
index 9df3cc54..9b52ad75 100644
--- a/src/components/common/logo-box/logo-box.tsx
+++ b/src/components/common/logo-box/logo-box.tsx
@@ -1,12 +1,12 @@
-import { clx } from "@medusajs/ui"
-import { Transition, motion } from "motion/react"
+import { clx } from '@medusajs/ui';
+import { motion, type Transition } from 'motion/react';
type LogoBoxProps = {
- className?: string
- checked?: boolean
- containerTransition?: Transition
- pathTransition?: Transition
-}
+ className?: string;
+ checked?: boolean;
+ containerTransition?: Transition;
+ pathTransition?: Transition;
+};
export const LogoBox = ({
className,
@@ -14,61 +14,59 @@ export const LogoBox = ({
containerTransition = {
duration: 0.8,
delay: 0.5,
- ease: [0, 0.71, 0.2, 1.01],
+ ease: [0, 0.71, 0.2, 1.01]
},
pathTransition = {
duration: 0.8,
delay: 0.6,
- ease: [0.1, 0.8, 0.2, 1.01],
- },
-}: LogoBoxProps) => {
- return (
- {
- form: UseFormReturn
- name?: ArrayPath
- title?: string
+ form: UseFormReturn;
+ name?: ArrayPath;
+ title?: string;
}
-export const MetadataEditor = ({
- form,
- name = "metadata" as ArrayPath,
- title = "Metadata"
+export const MetadataEditor = ({
+ form,
+ name = 'metadata' as ArrayPath,
+ title = 'Metadata'
}: MetadataEditorProps) => {
const { fields, append, remove } = useFieldArray({
control: form.control,
- name,
- })
+ name
+ });
const getErrorMessage = (error: FieldError | undefined) => {
- return error?.message ? String(error.message) : ""
- }
+ return error?.message ? String(error.message) : '';
+ };
const getFieldErrors = (index: number) => {
- const errors = form.formState.errors[name] as FieldErrors | undefined
+ const errors = form.formState.errors[name] as FieldErrors | undefined;
+
return {
key: errors?.[index]?.key,
value: errors?.[index]?.value
- }
- }
+ };
+ };
return (
-
- {labelKey}
-
-
- {descriptionKey}
-
-
-
- {children}
-
+export const Listicle = ({ labelKey, descriptionKey, children }: ListicleProps) => (
+
+
+);
diff --git a/src/components/common/loading-spinner/loading-spinner.tsx b/src/components/common/loading-spinner/loading-spinner.tsx
index cbc20f06..14271ec6 100644
--- a/src/components/common/loading-spinner/loading-spinner.tsx
+++ b/src/components/common/loading-spinner/loading-spinner.tsx
@@ -1,9 +1,7 @@
-import { Spinner } from "@medusajs/icons"
+import { Spinner } from "@medusajs/icons";
-export const LoadingSpinner = () => {
-return (
-
+
- )
-}
+
+
+
+ {labelKey}
+
+
+ {descriptionKey}
+
+ {children}
-
- )
-}
+export const LoadingSpinner = () => (
+
+
+);
diff --git a/src/components/common/logo-box/avatar-box.tsx b/src/components/common/logo-box/avatar-box.tsx
index 725f099f..7e30d3e5 100644
--- a/src/components/common/logo-box/avatar-box.tsx
+++ b/src/components/common/logo-box/avatar-box.tsx
@@ -1,82 +1,86 @@
-import { motion } from "motion/react"
+import { IconAvatar } from '@components/common/icon-avatar';
+import { motion } from 'motion/react';
-import { IconAvatar } from "@components/common/icon-avatar"
-
-export default function AvatarBox({
- checked,
- size = 44,
-}: {
- checked?: boolean
- size?: number
-}) {
- return (
-
- {checked && (
-
-
-
- )}
-
+);
diff --git a/src/components/common/metadata-editor/index.tsx b/src/components/common/metadata-editor/index.tsx
index 0a7101db..60355985 100644
--- a/src/components/common/metadata-editor/index.tsx
+++ b/src/components/common/metadata-editor/index.tsx
@@ -1,61 +1,80 @@
-import { Button, Input, Text, Heading, DropdownMenu } from "@medusajs/ui"
-import { useFieldArray, UseFormReturn, FieldValues, Path, FieldError, FieldErrors, ArrayPath, FieldArray } from "react-hook-form"
-import { EllipsisHorizontal, Trash } from "@medusajs/icons"
+import { EllipsisHorizontal, Trash } from '@medusajs/icons';
+import { Button, DropdownMenu, Heading, Input, Text } from '@medusajs/ui';
+import {
+ useFieldArray,
+ type ArrayPath,
+ type FieldArray,
+ type FieldError,
+ type FieldErrors,
+ type FieldValues,
+ type Path,
+ type UseFormReturn
+} from 'react-hook-form';
interface MetadataField {
- key: string
- value: string
+ key: string;
+ value: string;
}
interface MetadataEditorProps
- {title}
-
-
+
+ {title}
+
+
+ = {
- data: TData
- href?: string
-}
+ data: TData;
+ href?: string;
+};
export const MetadataSection = ({
data,
- href = "metadata/edit",
+ href = 'metadata/edit'
}: MetadataSectionProps) => {
- const { t } = useTranslation()
+ const { t } = useTranslation();
if (!data) {
- return null
+ return null;
}
- if (!("metadata" in data)) {
- return null
+ if (!('metadata' in data)) {
+ return null;
}
- const numberOfKeys = data.metadata ? Object.keys(data.metadata).length : 0
+ const numberOfKeys = data.metadata ? Object.keys(data.metadata).length : 0;
return (
-
-
Key
Value
{fields.map((field, index) => {
- const fieldErrors = getFieldErrors(index)
+ const fieldErrors = getFieldErrors(index);
+
return (
-
-
- )
-}
\ No newline at end of file
+ );
+};
diff --git a/src/components/common/metadata-section/index.ts b/src/components/common/metadata-section/index.ts
index 2281a512..527d968b 100644
--- a/src/components/common/metadata-section/index.ts
+++ b/src/components/common/metadata-section/index.ts
@@ -1 +1 @@
-export * from "./metadata-section"
+export * from "./metadata-section";
diff --git a/src/components/common/metadata-section/metadata-section.tsx b/src/components/common/metadata-section/metadata-section.tsx
index 181beac2..1bfa33c6 100644
--- a/src/components/common/metadata-section/metadata-section.tsx
+++ b/src/components/common/metadata-section/metadata-section.tsx
@@ -1,36 +1,51 @@
-import { ArrowUpRightOnBox } from "@medusajs/icons"
-import { Badge, Container, Heading, IconButton } from "@medusajs/ui"
-import { useTranslation } from "react-i18next"
-import { Link } from "react-router-dom"
+import { ArrowUpRightOnBox } from '@medusajs/icons';
+import { Badge, Container, Heading, IconButton } from '@medusajs/ui';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
type MetadataSectionProps
+
+
- )
+ );
})}
)}
/>
{fieldErrors.key && (
-
+
{getErrorMessage(fieldErrors.key)}
)}
@@ -63,11 +82,11 @@ export const MetadataEditor =
)}
/>
{fieldErrors.value && (
-
+
{getErrorMessage(fieldErrors.value)}
)}
@@ -75,12 +94,18 @@ export const MetadataEditor =
-
- remove(index)} className="gap-x-2">
+ remove(index)}
+ className="gap-x-2"
+ >
@@ -88,14 +113,20 @@ export const MetadataEditor =
-
- {t("metadata.header")}
-
- {t("metadata.numberOfKeys", {
- count: numberOfKeys,
+
+ ({
asChild
data-testid="metadata-edit-button"
>
-
+
- )
-}
+ );
+};
diff --git a/src/components/common/order-status-badge/index.ts b/src/components/common/order-status-badge/index.ts
index 20614e02..148fbbf6 100644
--- a/src/components/common/order-status-badge/index.ts
+++ b/src/components/common/order-status-badge/index.ts
@@ -1 +1 @@
-export * from "./order-status-badge";
+export * from './order-status-badge';
diff --git a/src/components/common/order-status-badge/order-status-badge.tsx b/src/components/common/order-status-badge/order-status-badge.tsx
index a1f1153a..70ee1c59 100644
--- a/src/components/common/order-status-badge/order-status-badge.tsx
+++ b/src/components/common/order-status-badge/order-status-badge.tsx
@@ -1,13 +1,13 @@
-import { StatusCell } from "@components/table/table-cells/common/status-cell";
+import { StatusCell } from '@components/table/table-cells/common/status-cell';
export const OrderStatusBadge = ({ status }: { status: string }) => {
const formattedStatus = status.charAt(0).toUpperCase() + status.slice(1);
switch (formattedStatus) {
- case "Pending":
+ case 'Pending':
return {formattedStatus} ;
- case "Completed":
+ case 'Completed':
return {formattedStatus} ;
- case "Canceled":
+ case 'Canceled':
return {formattedStatus} ;
default:
return {formattedStatus} ;
diff --git a/src/components/common/payments-status-badge/index.ts b/src/components/common/payments-status-badge/index.ts
index 911e888c..7370041e 100644
--- a/src/components/common/payments-status-badge/index.ts
+++ b/src/components/common/payments-status-badge/index.ts
@@ -1 +1 @@
-export * from "./payment-status-badge";
+export * from './payment-status-badge';
diff --git a/src/components/common/payments-status-badge/payment-status-badge.tsx b/src/components/common/payments-status-badge/payment-status-badge.tsx
index 0d4daebe..1c9ae7e0 100644
--- a/src/components/common/payments-status-badge/payment-status-badge.tsx
+++ b/src/components/common/payments-status-badge/payment-status-badge.tsx
@@ -1,15 +1,15 @@
-import { StatusCell } from "@components/table/table-cells/common/status-cell";
+import { StatusCell } from '@components/table/table-cells/common/status-cell';
export const PaymentStatusBadge = ({ status }: { status: string }) => {
const formattedStatus = status.charAt(0).toUpperCase() + status.slice(1);
switch (formattedStatus) {
- case "Pending":
+ case 'Pending':
return {formattedStatus} ;
- case "Captured":
+ case 'Captured':
return {formattedStatus} ;
- case "Completed":
+ case 'Completed':
return {formattedStatus} ;
- case "Cancelled":
+ case 'Cancelled':
return {formattedStatus} ;
default:
return {formattedStatus} ;
diff --git a/src/components/common/product-status-badge/index.ts b/src/components/common/product-status-badge/index.ts
index 4c87ebc8..ea1ebeb6 100644
--- a/src/components/common/product-status-badge/index.ts
+++ b/src/components/common/product-status-badge/index.ts
@@ -1 +1 @@
-export * from "./product-status-badge";
+export * from './product-status-badge';
diff --git a/src/components/common/product-status-badge/product-status-badge.tsx b/src/components/common/product-status-badge/product-status-badge.tsx
index 27eea40b..f775676d 100644
--- a/src/components/common/product-status-badge/product-status-badge.tsx
+++ b/src/components/common/product-status-badge/product-status-badge.tsx
@@ -1,15 +1,15 @@
-import { StatusCell } from "@components/table/table-cells/common/status-cell";
+import { StatusCell } from '@components/table/table-cells/common/status-cell';
export const ProductStatusBadge = ({ status }: { status: string }) => {
const formattedStatus = status.charAt(0).toUpperCase() + status.slice(1);
switch (formattedStatus) {
- case "":
+ case '':
return {formattedStatus} ;
- case "Published":
+ case 'Published':
return {formattedStatus} ;
- case "Canceled":
+ case 'Canceled':
return {formattedStatus} ;
- case "Draft":
+ case 'Draft':
return {formattedStatus} ;
default:
return {formattedStatus} ;
diff --git a/src/components/common/progress-bar/index.ts b/src/components/common/progress-bar/index.ts
index ad8afe82..d71d9b1b 100644
--- a/src/components/common/progress-bar/index.ts
+++ b/src/components/common/progress-bar/index.ts
@@ -1 +1 @@
-export * from "./progress-bar"
+export * from './progress-bar';
diff --git a/src/components/common/progress-bar/progress-bar.tsx b/src/components/common/progress-bar/progress-bar.tsx
index ebfec4c3..12736387 100644
--- a/src/components/common/progress-bar/progress-bar.tsx
+++ b/src/components/common/progress-bar/progress-bar.tsx
@@ -1,4 +1,4 @@
-import { motion } from "motion/react"
+import { motion } from 'motion/react';
interface ProgressBarProps {
/**
@@ -6,28 +6,26 @@ interface ProgressBarProps {
*
* @default 2
*/
- duration?: number
+ duration?: number;
}
-export const ProgressBar = ({ duration = 2 }: ProgressBarProps) => {
- return (
- {status} ;
- case "ACTIVE":
- return {status} ;
- case "SUSPENDED":
- return {status} ;
+ case 'INACTIVE':
+ return (
+
+ {status}
+
+ );
+ case 'ACTIVE':
+ return (
+
+ {status}
+
+ );
+ case 'SUSPENDED':
+ return (
+
+ {status}
+
+ );
default:
- return {status} ;
+ return (
+
+ {status}
+
+ );
}
};
diff --git a/src/components/common/sidebar-link/index.ts b/src/components/common/sidebar-link/index.ts
new file mode 100644
index 00000000..2703e49f
--- /dev/null
+++ b/src/components/common/sidebar-link/index.ts
@@ -0,0 +1 @@
+export * from './sidebar-link';
diff --git a/src/components/common/sidebar-link/indext.ts b/src/components/common/sidebar-link/indext.ts
deleted file mode 100644
index e5d18112..00000000
--- a/src/components/common/sidebar-link/indext.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./sidebar-link"
diff --git a/src/components/common/sidebar-link/sidebar-link.tsx b/src/components/common/sidebar-link/sidebar-link.tsx
index 09b82300..363c187c 100644
--- a/src/components/common/sidebar-link/sidebar-link.tsx
+++ b/src/components/common/sidebar-link/sidebar-link.tsx
@@ -1,16 +1,16 @@
-import { ReactNode } from "react"
-import { Link } from "react-router-dom"
+import type { ReactNode } from 'react';
-import { TriangleRightMini } from "@medusajs/icons"
-import { Text } from "@medusajs/ui"
-import { IconAvatar } from "../icon-avatar"
+import { IconAvatar } from '@components/common/icon-avatar';
+import { TriangleRightMini } from '@medusajs/icons';
+import { Text } from '@medusajs/ui';
+import { Link } from 'react-router-dom';
export interface SidebarLinkProps {
- to: string
- labelKey: string
- descriptionKey: string
- icon: ReactNode
- "data-testid"?: string
+ to: string;
+ labelKey: string;
+ descriptionKey: string;
+ icon: ReactNode;
+ 'data-testid'?: string;
}
export const SidebarLink = ({
@@ -18,33 +18,54 @@ export const SidebarLink = ({
labelKey,
descriptionKey,
icon,
- "data-testid": dataTestId,
-}: SidebarLinkProps) => {
- return (
-
-
+
+ {t('metadata.header')}
+
+
+ {t('metadata.numberOfKeys', {
+ count: numberOfKeys
})}
@@ -41,10 +56,13 @@ export const MetadataSection =
-
@@ -37,10 +40,10 @@ export const SectionRow = ({ title, value, actions, "data-testid": dataTestId }:
className="whitespace-pre-line text-pretty"
data-testid={dataTestId ? `${dataTestId}-value` : undefined}
>
- {value ?? "-"}
+ {value ?? '-'}
) : (
-
- )
-}
+ );
+};
diff --git a/src/components/common/seller-status-badge/index.ts b/src/components/common/seller-status-badge/index.ts
index c67f38f5..d0cc339d 100644
--- a/src/components/common/seller-status-badge/index.ts
+++ b/src/components/common/seller-status-badge/index.ts
@@ -1 +1 @@
-export * from "./seller-status-badge";
+export * from './seller-status-badge';
diff --git a/src/components/common/seller-status-badge/seller-status-badge.tsx b/src/components/common/seller-status-badge/seller-status-badge.tsx
index 89b56a1f..cdf87526 100644
--- a/src/components/common/seller-status-badge/seller-status-badge.tsx
+++ b/src/components/common/seller-status-badge/seller-status-badge.tsx
@@ -1,20 +1,48 @@
-import { StatusCell } from "@components/table/table-cells/common/status-cell";
+import { StatusCell } from '@components/table/table-cells/common/status-cell';
-export const SellerStatusBadge = ({
- status,
- "data-testid": dataTestId
-}: {
- status: string
- "data-testid"?: string
+export const SellerStatusBadge = ({
+ status,
+ 'data-testid': dataTestId
+}: {
+ status: string;
+ 'data-testid'?: string;
}) => {
switch (status) {
- case "INACTIVE":
- return
@@ -48,7 +51,9 @@ export const SectionRow = ({ title, value, actions, "data-testid": dataTestId }:
)}
- {actions && {actions}
}
+ {actions && (
+ {actions}
+ )}
-
-
- {icon}
- ["size"]
- leading?: ComponentPropsWithoutRef["leading"]
- characters?: number
-}
+ size?: ComponentPropsWithoutRef['size'];
+ leading?: ComponentPropsWithoutRef['leading'];
+ characters?: number;
+};
type HeadingSkeletonProps = {
- level?: ComponentPropsWithoutRef["level"]
- characters?: number
-}
+ level?: ComponentPropsWithoutRef['level'];
+ characters?: number;
+};
-export const HeadingSkeleton = ({
- level = "h1",
- characters = 10,
-}: HeadingSkeletonProps) => {
- let charWidth = 9
+export const HeadingSkeleton = ({ level = 'h1', characters = 10 }: HeadingSkeletonProps) => {
+ let charWidth = 9;
switch (level) {
- case "h1":
- charWidth = 11
- break
- case "h2":
- charWidth = 10
- break
- case "h3":
- charWidth = 9
- break
+ case 'h1':
+ charWidth = 11;
+ break;
+ case 'h2':
+ charWidth = 10;
+ break;
+ case 'h3':
+ charWidth = 9;
+ break;
}
return (
+
- )
-}
+ );
+};
-export const TableFooterSkeleton = ({ layout }: { layout: "fill" | "fit" }) => {
- return (
-
-
- )
-}
+export const TableSectionSkeleton = (props: TableSkeletonProps) => (
+
+
+);
-export const JsonViewSectionSkeleton = () => {
- return (
-
-
-
- {labelKey}
-
-
- {descriptionKey}
-
-
-
-
+ 'data-testid': dataTestId
+}: SidebarLinkProps) => (
+
+
+
+
+);
diff --git a/src/components/common/skeleton/index.ts b/src/components/common/skeleton/index.ts
index d889ad70..25c51ad0 100644
--- a/src/components/common/skeleton/index.ts
+++ b/src/components/common/skeleton/index.ts
@@ -1 +1 @@
-export * from "./skeleton"
+export * from './skeleton';
diff --git a/src/components/common/skeleton/skeleton.tsx b/src/components/common/skeleton/skeleton.tsx
index 90671af6..94038d8c 100644
--- a/src/components/common/skeleton/skeleton.tsx
+++ b/src/components/common/skeleton/skeleton.tsx
@@ -1,166 +1,164 @@
-import { Container, Heading, Text, clx } from "@medusajs/ui"
-import { CSSProperties, ComponentPropsWithoutRef } from "react"
+import type { ComponentPropsWithoutRef, CSSProperties } from 'react';
+
+import { clx, Container, type Heading, type Text } from '@medusajs/ui';
type SkeletonProps = {
- className?: string
- style?: CSSProperties
-}
+ className?: string;
+ style?: CSSProperties;
+};
-export const Skeleton = ({ className, style }: SkeletonProps) => {
- return (
-
- )
-}
+export const Skeleton = ({ className, style }: SkeletonProps) => (
+
+);
type TextSkeletonProps = {
- size?: ComponentPropsWithoutRef
+
-
- )
-}
+
+
+ {icon}
+
+
+
+ {labelKey}
+
+
+ {descriptionKey}
+
+
+
+
-
))}
-
- )
-}
+ );
+};
-export const TableSectionSkeleton = (props: TableSkeletonProps) => {
- return (
-
-
+export const TableFooterSkeleton = ({ layout }: { layout: 'fill' | 'fit' }) => (
+
+
+);
type TableSkeletonProps = {
- rowCount?: number
- search?: boolean
- filters?: boolean
- orderBy?: boolean
- pagination?: boolean
- layout?: "fit" | "fill"
-}
+ rowCount?: number;
+ search?: boolean;
+ filters?: boolean;
+ orderBy?: boolean;
+ pagination?: boolean;
+ layout?: 'fit' | 'fill';
+};
export const TableSkeleton = ({
rowCount = 10,
@@ -168,19 +166,19 @@ export const TableSkeleton = ({
filters = true,
orderBy = true,
pagination = true,
- layout = "fit",
+ layout = 'fit'
}: TableSkeletonProps) => {
// Row count + header row
- const totalRowCount = rowCount + 1
+ const totalRowCount = rowCount + 1;
- const rows = Array.from({ length: totalRowCount }, (_, i) => i)
- const hasToolbar = search || filters || orderBy
+ const rows = Array.from({ length: totalRowCount }, (_, i) => i);
+ const hasToolbar = search || filters || orderBy;
return (
+
- )
-}
+
{hasToolbar && (
@@ -195,133 +193,141 @@ export const TableSkeleton = ({
)}
- {rows.map((row) => (
-
{pagination &&
-
-
+
+
-
+
+);
type SingleColumnPageSkeletonProps = {
- sections?: number
- showJSON?: boolean
- showMetadata?: boolean
-}
+ sections?: number;
+ showJSON?: boolean;
+ showMetadata?: boolean;
+};
export const SingleColumnPageSkeleton = ({
sections = 2,
showJSON = false,
- showMetadata = false,
-}: SingleColumnPageSkeletonProps) => {
- return (
-
- )
-}
+ );
+};
diff --git a/src/components/common/sortable-list/index.ts b/src/components/common/sortable-list/index.ts
index c9eb55be..ea079c48 100644
--- a/src/components/common/sortable-list/index.ts
+++ b/src/components/common/sortable-list/index.ts
@@ -1 +1 @@
-export * from "./sortable-list"
+export * from './sortable-list';
diff --git a/src/components/common/sortable-list/sortable-list.tsx b/src/components/common/sortable-list/sortable-list.tsx
index e588fc8b..1180ffe5 100644
--- a/src/components/common/sortable-list/sortable-list.tsx
+++ b/src/components/common/sortable-list/sortable-list.tsx
@@ -1,90 +1,91 @@
import {
- Active,
+ createContext,
+ Fragment,
+ useContext,
+ useMemo,
+ useState,
+ type CSSProperties,
+ type PropsWithChildren,
+ type ReactNode
+} from 'react';
+
+import {
+ defaultDropAnimationSideEffects,
DndContext,
- DragEndEvent,
DragOverlay,
- DragStartEvent,
- DraggableSyntheticListeners,
KeyboardSensor,
PointerSensor,
- defaultDropAnimationSideEffects,
useSensor,
useSensors,
+ type Active,
+ type DragEndEvent,
+ type DraggableSyntheticListeners,
+ type DragStartEvent,
type DropAnimation,
- type UniqueIdentifier,
-} from "@dnd-kit/core"
+ type UniqueIdentifier
+} from '@dnd-kit/core';
import {
- SortableContext,
arrayMove,
+ SortableContext,
sortableKeyboardCoordinates,
- useSortable,
-} from "@dnd-kit/sortable"
-import { CSS } from "@dnd-kit/utilities"
-import { DotsSix } from "@medusajs/icons"
-import { IconButton, clx } from "@medusajs/ui"
-import {
- CSSProperties,
- Fragment,
- PropsWithChildren,
- ReactNode,
- createContext,
- useContext,
- useMemo,
- useState,
-} from "react"
+ useSortable
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { DotsSix } from '@medusajs/icons';
+import { clx, IconButton } from '@medusajs/ui';
type SortableBaseItem = {
- id: UniqueIdentifier
-}
+ id: UniqueIdentifier;
+};
interface SortableListProps {
- items: TItem[]
- onChange: (items: TItem[]) => void
- renderItem: (item: TItem, index: number) => ReactNode
+ items: TItem[];
+ onChange: (items: TItem[]) => void;
+ renderItem: (item: TItem, index: number) => ReactNode;
}
const List = ({
items,
onChange,
- renderItem,
+ renderItem
}: SortableListProps) => {
- const [active, setActive] = useState(null)
+ const [active, setActive] = useState(null);
const [activeItem, activeIndex] = useMemo(() => {
if (active === null) {
- return [null, null]
+ return [null, null];
}
- const index = items.findIndex(({ id }) => id === active.id)
+ const index = items.findIndex(({ id }) => id === active.id);
- return [items[index], index]
- }, [active, items])
+ return [items[index], index];
+ }, [active, items]);
const sensors = useSensors(
useSensor(PointerSensor),
useSensor(KeyboardSensor, {
- coordinateGetter: sortableKeyboardCoordinates,
+ coordinateGetter: sortableKeyboardCoordinates
})
- )
+ );
const handleDragStart = ({ active }: DragStartEvent) => {
- setActive(active)
- }
+ setActive(active);
+ };
const handleDragEnd = ({ active, over }: DragEndEvent) => {
if (over && active.id !== over.id) {
- const activeIndex = items.findIndex(({ id }) => id === active.id)
- const overIndex = items.findIndex(({ id }) => id === over.id)
+ const activeIndex = items.findIndex(({ id }) => id === active.id);
+ const overIndex = items.findIndex(({ id }) => id === over.id);
- onChange(arrayMove(items, activeIndex, overIndex))
+ onChange(arrayMove(items, activeIndex, overIndex));
}
- setActive(null)
- }
+ setActive(null);
+ };
const handleDragCancel = () => {
- setActive(null)
- }
+ setActive(null);
+ };
return (
({
onDragCancel={handleDragCancel}
>
- {activeItem && activeIndex !== null
- ? renderItem(activeItem, activeIndex)
- : null}
+ {activeItem && activeIndex !== null ? renderItem(activeItem, activeIndex) : null}
- )
-}
+ );
+};
const dropAnimationConfig: DropAnimation = {
sideEffects: defaultDropAnimationSideEffects({
styles: {
active: {
- opacity: "0.4",
- },
- },
- }),
-}
+ opacity: '0.4'
+ }
+ }
+ })
+};
-type SortableOverlayProps = PropsWithChildren
+type SortableOverlayProps = PropsWithChildren;
-const Overlay = ({ children }: SortableOverlayProps) => {
- return (
-
- {children}
-
- )
-}
+const Overlay = ({ children }: SortableOverlayProps) => (
+
+ {children}
+
+);
type SortableItemProps = PropsWithChildren<{
- id: TItem["id"]
- className?: string
-}>
+ id: TItem['id'];
+ className?: string;
+}>;
type SortableItemContextValue = {
- attributes: Record
- listeners: DraggableSyntheticListeners
- ref: (node: HTMLElement | null) => void
- isDragging: boolean
-}
+ // @todo fix any type
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ attributes: Record;
+ listeners: DraggableSyntheticListeners;
+ ref: (node: HTMLElement | null) => void;
+ isDragging: boolean;
+};
-const SortableItemContext = createContext(null)
+const SortableItemContext = createContext(null);
const useSortableItemContext = () => {
- const context = useContext(SortableItemContext)
+ const context = useContext(SortableItemContext);
if (!context) {
- throw new Error(
- "useSortableItemContext must be used within a SortableItemContext"
- )
+ throw new Error('useSortableItemContext must be used within a SortableItemContext');
}
- return context
-}
+ return context;
+};
const Item = ({
id,
className,
- children,
+ children
}: SortableItemProps) => {
const {
attributes,
@@ -173,40 +170,40 @@ const Item = ({
setNodeRef,
setActivatorNodeRef,
transform,
- transition,
- } = useSortable({ id })
+ transition
+ } = useSortable({ id });
const context = useMemo(
() => ({
attributes,
listeners,
ref: setActivatorNodeRef,
- isDragging,
+ isDragging
}),
[attributes, listeners, setActivatorNodeRef, isDragging]
- )
+ );
const style: CSSProperties = {
opacity: isDragging ? 0.4 : undefined,
transform: CSS.Translate.toString(transform),
- transition,
- }
+ transition
+ };
return (
{children}
- )
-}
+ );
+};
const DragHandle = () => {
- const { attributes, listeners, ref } = useSortableItemContext()
+ const { attributes, listeners, ref } = useSortableItemContext();
return (
{
>
- )
-}
+ );
+};
export const SortableList = Object.assign(List, {
Item,
- DragHandle,
-})
+ DragHandle
+});
diff --git a/src/components/common/sortable-tree/index.ts b/src/components/common/sortable-tree/index.ts
index 46f2ac3c..2315bd49 100644
--- a/src/components/common/sortable-tree/index.ts
+++ b/src/components/common/sortable-tree/index.ts
@@ -1 +1 @@
-export * from "./sortable-tree"
+export * from './sortable-tree';
diff --git a/src/components/common/sortable-tree/keyboard-coordinates.ts b/src/components/common/sortable-tree/keyboard-coordinates.ts
index a836cc5a..fdb3d1e2 100644
--- a/src/components/common/sortable-tree/keyboard-coordinates.ts
+++ b/src/components/common/sortable-tree/keyboard-coordinates.ts
@@ -1,22 +1,22 @@
import {
- DroppableContainer,
- KeyboardCode,
- KeyboardCoordinateGetter,
closestCorners,
getFirstCollision,
-} from "@dnd-kit/core"
+ KeyboardCode,
+ type DroppableContainer,
+ type KeyboardCoordinateGetter
+} from '@dnd-kit/core';
-import type { SensorContext } from "./types"
-import { getProjection } from "./utils"
+import type { SensorContext } from './types';
+import { getProjection } from './utils';
const directions: string[] = [
KeyboardCode.Down,
KeyboardCode.Right,
KeyboardCode.Up,
- KeyboardCode.Left,
-]
+ KeyboardCode.Left
+];
-const horizontal: string[] = [KeyboardCode.Left, KeyboardCode.Right]
+const horizontal: string[] = [KeyboardCode.Left, KeyboardCode.Right];
export const sortableTreeKeyboardCoordinates: (
context: SensorContext,
@@ -27,25 +27,19 @@ export const sortableTreeKeyboardCoordinates: (
event,
{
currentCoordinates,
- context: {
- active,
- over,
- collisionRect,
- droppableRects,
- droppableContainers,
- },
+ context: { active, over, collisionRect, droppableRects, droppableContainers }
}
) => {
if (directions.includes(event.code)) {
if (!active || !collisionRect) {
- return
+ return;
}
- event.preventDefault()
+ event.preventDefault();
const {
- current: { items, offset },
- } = context
+ current: { items, offset }
+ } = context;
if (horizontal.includes(event.code) && over?.id) {
const { depth, maxDepth, minDepth } = getProjection(
@@ -54,80 +48,80 @@ export const sortableTreeKeyboardCoordinates: (
over.id,
offset,
indentationWidth
- )
+ );
switch (event.code) {
case KeyboardCode.Left:
if (depth > minDepth) {
return {
...currentCoordinates,
- x: currentCoordinates.x - indentationWidth,
- }
+ x: currentCoordinates.x - indentationWidth
+ };
}
- break
+ break;
case KeyboardCode.Right:
if (depth < maxDepth) {
return {
...currentCoordinates,
- x: currentCoordinates.x + indentationWidth,
- }
+ x: currentCoordinates.x + indentationWidth
+ };
}
- break
+ break;
}
- return undefined
+ return undefined;
}
- const containers: DroppableContainer[] = []
+ const containers: DroppableContainer[] = [];
- droppableContainers.forEach((container) => {
+ droppableContainers.forEach(container => {
if (container?.disabled || container.id === over?.id) {
- return
+ return;
}
- const rect = droppableRects.get(container.id)
+ const rect = droppableRects.get(container.id);
if (!rect) {
- return
+ return;
}
switch (event.code) {
case KeyboardCode.Down:
if (collisionRect.top < rect.top) {
- containers.push(container)
+ containers.push(container);
}
- break
+ break;
case KeyboardCode.Up:
if (collisionRect.top > rect.top) {
- containers.push(container)
+ containers.push(container);
}
- break
+ break;
}
- })
+ });
const collisions = closestCorners({
active,
collisionRect,
pointerCoordinates: null,
droppableRects,
- droppableContainers: containers,
- })
- let closestId = getFirstCollision(collisions, "id")
+ droppableContainers: containers
+ });
+ let closestId = getFirstCollision(collisions, 'id');
if (closestId === over?.id && collisions.length > 1) {
- closestId = collisions[1].id
+ closestId = collisions[1].id;
}
if (closestId && over?.id) {
- const activeRect = droppableRects.get(active.id)
- const newRect = droppableRects.get(closestId)
- const newDroppable = droppableContainers.get(closestId)
+ const activeRect = droppableRects.get(active.id);
+ const newRect = droppableRects.get(closestId);
+ const newDroppable = droppableContainers.get(closestId);
if (activeRect && newRect && newDroppable) {
- const newIndex = items.findIndex(({ id }) => id === closestId)
- const newItem = items[newIndex]
- const activeIndex = items.findIndex(({ id }) => id === active.id)
- const activeItem = items[activeIndex]
+ const newIndex = items.findIndex(({ id }) => id === closestId);
+ const newItem = items[newIndex];
+ const activeIndex = items.findIndex(({ id }) => id === active.id);
+ const activeItem = items[activeIndex];
if (newItem && activeItem) {
const { depth } = getProjection(
@@ -136,21 +130,19 @@ export const sortableTreeKeyboardCoordinates: (
closestId,
(newItem.depth - activeItem.depth) * indentationWidth,
indentationWidth
- )
- const isBelow = newIndex > activeIndex
- const modifier = isBelow ? 1 : -1
- const offset = 0
+ );
+ const isBelow = newIndex > activeIndex;
+ const modifier = isBelow ? 1 : -1;
+ const offset = 0;
- const newCoordinates = {
+ return {
x: newRect.left + depth * indentationWidth,
- y: newRect.top + modifier * offset,
- }
-
- return newCoordinates
+ y: newRect.top + modifier * offset
+ };
}
}
}
}
- return undefined
- }
+ return undefined;
+ };
diff --git a/src/components/common/sortable-tree/sortable-tree-item.tsx b/src/components/common/sortable-tree/sortable-tree-item.tsx
index d87821a9..0606b5bf 100644
--- a/src/components/common/sortable-tree/sortable-tree-item.tsx
+++ b/src/components/common/sortable-tree/sortable-tree-item.tsx
@@ -1,28 +1,21 @@
-import type { UniqueIdentifier } from "@dnd-kit/core"
-import { AnimateLayoutChanges, useSortable } from "@dnd-kit/sortable"
-import { CSS } from "@dnd-kit/utilities"
-import { CSSProperties } from "react"
+import type { CSSProperties } from 'react';
-import { TreeItem, TreeItemProps } from "./tree-item"
-import { iOS } from "./utils"
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import { useSortable, type AnimateLayoutChanges } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import { TreeItem, type TreeItemProps } from './tree-item';
+import { iOS } from './utils';
interface SortableTreeItemProps extends TreeItemProps {
- id: UniqueIdentifier
+ id: UniqueIdentifier;
}
-const animateLayoutChanges: AnimateLayoutChanges = ({
- isSorting,
- wasDragging,
-}) => {
- return isSorting || wasDragging ? false : true
-}
+const animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) => {
+ return !(isSorting || wasDragging);
+};
-export function SortableTreeItem({
- id,
- depth,
- disabled,
- ...props
-}: SortableTreeItemProps) {
+export function SortableTreeItem({ id, depth, disabled, ...props }: SortableTreeItemProps) {
const {
attributes,
isDragging,
@@ -31,16 +24,16 @@ export function SortableTreeItem({
setDraggableNodeRef,
setDroppableNodeRef,
transform,
- transition,
+ transition
} = useSortable({
id,
animateLayoutChanges,
- disabled,
- })
+ disabled
+ });
const style: CSSProperties = {
transform: CSS.Translate.toString(transform),
- transition,
- }
+ transition
+ };
return (
{
- collapsible?: boolean
- childrenProp?: string
- items: T[]
- indentationWidth?: number
+ collapsible?: boolean;
+ childrenProp?: string;
+ items: T[];
+ indentationWidth?: number;
/**
* Enable drag for all items or provide a function to enable drag for specific items.
* @default true
*/
- enableDrag?: boolean | ((item: T) => boolean)
+ enableDrag?: boolean | ((item: T) => boolean);
onChange: (
updatedItem: {
- id: UniqueIdentifier
- parentId: UniqueIdentifier | null
- index: number
+ id: UniqueIdentifier;
+ parentId: UniqueIdentifier | null;
+ index: number;
},
items: T[]
- ) => void
- renderValue: (item: T) => ReactNode
+ ) => void;
+ renderValue: (item: T) => ReactNode;
}
export function SortableTree({
collapsible = true,
- childrenProp = "children", // "children" is the default children prop name
+ childrenProp = 'children', // "children" is the default children prop name
enableDrag = true,
items = [],
indentationWidth = 40,
onChange,
- renderValue,
+ renderValue
}: Props) {
- const [collapsedState, setCollapsedState] = useState<
- Record
- >({})
+ const [collapsedState, setCollapsedState] = useState>({});
- const [activeId, setActiveId] = useState(null)
- const [overId, setOverId] = useState(null)
- const [offsetLeft, setOffsetLeft] = useState(0)
+ const [activeId, setActiveId] = useState(null);
+ const [overId, setOverId] = useState(null);
+ const [offsetLeft, setOffsetLeft] = useState(0);
const [currentPosition, setCurrentPosition] = useState<{
- parentId: UniqueIdentifier | null
- overId: UniqueIdentifier
- } | null>(null)
+ parentId: UniqueIdentifier | null;
+ overId: UniqueIdentifier;
+ } | null>(null);
const flattenedItems = useMemo(() => {
- const flattenedTree = flattenTree(items, childrenProp)
- const collapsedItems = flattenedTree.reduce(
- (acc, item) => {
- const { id } = item
- const children = (item[childrenProp] || []) as FlattenedItem[]
- const collapsed = collapsedState[id]
-
- return collapsed && children.length ? [...acc, id] : acc
- },
- []
- )
+ const flattenedTree = flattenTree(items, childrenProp);
+ const collapsedItems = flattenedTree.reduce((acc, item) => {
+ const { id } = item;
+ const children = (item[childrenProp] || []) as FlattenedItem[];
+ const collapsed = collapsedState[id];
+
+ return collapsed && children.length ? [...acc, id] : acc;
+ }, []);
return removeChildrenOf(
flattenedTree,
activeId ? [activeId, ...collapsedItems] : collapsedItems,
childrenProp
- )
- }, [activeId, items, childrenProp, collapsedState])
+ );
+ }, [activeId, items, childrenProp, collapsedState]);
const projected =
activeId && overId
- ? getProjection(
- flattenedItems,
- activeId,
- overId,
- offsetLeft,
- indentationWidth
- )
- : null
+ ? getProjection(flattenedItems, activeId, overId, offsetLeft, indentationWidth)
+ : null;
const sensorContext: SensorContext = useRef({
items: flattenedItems,
- offset: offsetLeft,
- })
+ offset: offsetLeft
+ });
const [coordinateGetter] = useState(() =>
sortableTreeKeyboardCoordinates(sensorContext, indentationWidth)
- )
+ );
const sensors = useSensors(
useSensor(PointerSensor),
useSensor(KeyboardSensor, {
- coordinateGetter,
+ coordinateGetter
})
- )
+ );
- const sortedIds = useMemo(
- () => flattenedItems.map(({ id }) => id),
- [flattenedItems]
- )
+ const sortedIds = useMemo(() => flattenedItems.map(({ id }) => id), [flattenedItems]);
- const activeItem = activeId
- ? flattenedItems.find(({ id }) => id === activeId)
- : null
+ const activeItem = activeId ? flattenedItems.find(({ id }) => id === activeId) : null;
useEffect(() => {
sensorContext.current = {
items: flattenedItems,
- offset: offsetLeft,
- }
- }, [flattenedItems, offsetLeft])
+ offset: offsetLeft
+ };
+ }, [flattenedItems, offsetLeft]);
function handleDragStart({ active: { id: activeId } }: DragStartEvent) {
- setActiveId(activeId)
- setOverId(activeId)
+ setActiveId(activeId);
+ setOverId(activeId);
- const activeItem = flattenedItems.find(({ id }) => id === activeId)
+ const activeItem = flattenedItems.find(({ id }) => id === activeId);
if (activeItem) {
setCurrentPosition({
parentId: activeItem.parentId,
- overId: activeId,
- })
+ overId: activeId
+ });
}
- document.body.style.setProperty("cursor", "grabbing")
+ document.body.style.setProperty('cursor', 'grabbing');
}
function handleDragMove({ delta }: DragMoveEvent) {
- setOffsetLeft(delta.x)
+ setOffsetLeft(delta.x);
}
function handleDragOver({ over }: DragOverEvent) {
- setOverId(over?.id ?? null)
+ setOverId(over?.id ?? null);
}
function handleDragEnd({ active, over }: DragEndEvent) {
- resetState()
+ resetState();
if (projected && over) {
- const { depth, parentId } = projected
+ const { depth, parentId } = projected;
const clonedItems: FlattenedItem[] = JSON.parse(
JSON.stringify(flattenTree(items, childrenProp))
- )
- const overIndex = clonedItems.findIndex(({ id }) => id === over.id)
+ );
+ const overIndex = clonedItems.findIndex(({ id }) => id === over.id);
- const activeIndex = clonedItems.findIndex(({ id }) => id === active.id)
- const activeTreeItem = clonedItems[activeIndex]
+ const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);
+ const activeTreeItem = clonedItems[activeIndex];
- clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId }
+ clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };
- const sortedItems = arrayMove(clonedItems, activeIndex, overIndex)
+ const sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
- const { items: newItems, update } = buildTree(
- sortedItems,
- overIndex,
- childrenProp
- )
+ const { items: newItems, update } = buildTree(sortedItems, overIndex, childrenProp);
- onChange(update, newItems)
+ onChange(update, newItems);
}
}
function handleDragCancel() {
- resetState()
+ resetState();
}
function resetState() {
- setOverId(null)
- setActiveId(null)
- setOffsetLeft(0)
- setCurrentPosition(null)
+ setOverId(null);
+ setActiveId(null);
+ setOffsetLeft(0);
+ setCurrentPosition(null);
- document.body.style.setProperty("cursor", "")
+ document.body.style.setProperty('cursor', '');
}
function handleCollapse(id: UniqueIdentifier) {
- setCollapsedState((state) => ({
+ setCollapsedState(state => ({
...state,
- [id]: state[id] ? false : true,
- }))
+ [id]: !state[id]
+ }));
}
function getMovementAnnouncement(
@@ -247,76 +218,76 @@ export function SortableTree({
overId?: UniqueIdentifier
) {
if (overId && projected) {
- if (eventName !== "onDragEnd") {
+ if (eventName !== 'onDragEnd') {
if (
currentPosition &&
projected.parentId === currentPosition.parentId &&
overId === currentPosition.overId
) {
- return
+ return;
} else {
setCurrentPosition({
parentId: projected.parentId,
- overId,
- })
+ overId
+ });
}
}
const clonedItems: FlattenedItem[] = JSON.parse(
JSON.stringify(flattenTree(items, childrenProp))
- )
- const overIndex = clonedItems.findIndex(({ id }) => id === overId)
- const activeIndex = clonedItems.findIndex(({ id }) => id === activeId)
- const sortedItems = arrayMove(clonedItems, activeIndex, overIndex)
+ );
+ const overIndex = clonedItems.findIndex(({ id }) => id === overId);
+ const activeIndex = clonedItems.findIndex(({ id }) => id === activeId);
+ const sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
- const previousItem = sortedItems[overIndex - 1]
+ const previousItem = sortedItems[overIndex - 1];
- let announcement
- const movedVerb = eventName === "onDragEnd" ? "dropped" : "moved"
- const nestedVerb = eventName === "onDragEnd" ? "dropped" : "nested"
+ let announcement;
+ const movedVerb = eventName === 'onDragEnd' ? 'dropped' : 'moved';
+ const nestedVerb = eventName === 'onDragEnd' ? 'dropped' : 'nested';
if (!previousItem) {
- const nextItem = sortedItems[overIndex + 1]
- announcement = `${activeId} was ${movedVerb} before ${nextItem.id}.`
+ const nextItem = sortedItems[overIndex + 1];
+ announcement = `${activeId} was ${movedVerb} before ${nextItem.id}.`;
} else {
if (projected.depth > previousItem.depth) {
- announcement = `${activeId} was ${nestedVerb} under ${previousItem.id}.`
+ announcement = `${activeId} was ${nestedVerb} under ${previousItem.id}.`;
} else {
- let previousSibling: FlattenedItem | undefined = previousItem
+ let previousSibling: FlattenedItem | undefined = previousItem;
while (previousSibling && projected.depth < previousSibling.depth) {
- const parentId: UniqueIdentifier | null = previousSibling.parentId
- previousSibling = sortedItems.find(({ id }) => id === parentId)
+ const parentId: UniqueIdentifier | null = previousSibling.parentId;
+ previousSibling = sortedItems.find(({ id }) => id === parentId);
}
if (previousSibling) {
- announcement = `${activeId} was ${movedVerb} after ${previousSibling.id}.`
+ announcement = `${activeId} was ${movedVerb} after ${previousSibling.id}.`;
}
}
}
- return announcement
+ return announcement;
}
- return
+ return;
}
const announcements: Announcements = {
onDragStart({ active }) {
- return `Picked up ${active.id}.`
+ return `Picked up ${active.id}.`;
},
onDragMove({ active, over }) {
- return getMovementAnnouncement("onDragMove", active.id, over?.id)
+ return getMovementAnnouncement('onDragMove', active.id, over?.id);
},
onDragOver({ active, over }) {
- return getMovementAnnouncement("onDragOver", active.id, over?.id)
+ return getMovementAnnouncement('onDragOver', active.id, over?.id);
},
onDragEnd({ active, over }) {
- return getMovementAnnouncement("onDragEnd", active.id, over?.id)
+ return getMovementAnnouncement('onDragEnd', active.id, over?.id);
},
onDragCancel({ active }) {
- return `Moving was cancelled. ${active.id} was dropped in its original position.`
- },
- }
+ return `Moving was cancelled. ${active.id} was dropped in its original position.`;
+ }
+ };
return (
({
onDragEnd={handleDragEnd}
onDragCancel={handleDragCancel}
>
-
- {flattenedItems.map((item) => {
- const { id, depth } = item
- const children = (item[childrenProp] || []) as FlattenedItem[]
+
+ {flattenedItems.map(item => {
+ const { id, depth } = item;
+ const children = (item[childrenProp] || []) as FlattenedItem[];
const disabled =
- typeof enableDrag === "function"
- ? !enableDrag(item as unknown as T)
- : !enableDrag
+ typeof enableDrag === 'function' ? !enableDrag(item as unknown as T) : !enableDrag;
return (
({
indentationWidth={indentationWidth}
collapsed={Boolean(collapsedState[id] && children.length)}
childCount={children.length}
- onCollapse={
- collapsible && children.length
- ? () => handleCollapse(id)
- : undefined
- }
+ onCollapse={collapsible && children.length ? () => handleCollapse(id) : undefined}
/>
- )
+ );
})}
{createPortal(
@@ -375,5 +343,5 @@ export function SortableTree({
)}
- )
+ );
}
diff --git a/src/components/common/sortable-tree/tree-item.tsx b/src/components/common/sortable-tree/tree-item.tsx
index 1516e68a..a573ac75 100644
--- a/src/components/common/sortable-tree/tree-item.tsx
+++ b/src/components/common/sortable-tree/tree-item.tsx
@@ -1,30 +1,31 @@
-import React, { forwardRef, HTMLAttributes, ReactNode } from "react"
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import type React from 'react';
import {
DotsSix,
FolderIllustration,
FolderOpenIllustration,
TagIllustration,
- TriangleRightMini,
-} from "@medusajs/icons"
-import { Badge, clx, IconButton } from "@medusajs/ui"
-import { HandleProps } from "./types"
-
-export interface TreeItemProps
- extends Omit, "id"> {
- childCount?: number
- clone?: boolean
- collapsed?: boolean
- depth: number
- disableInteraction?: boolean
- disableSelection?: boolean
- ghost?: boolean
- handleProps?: HandleProps
- indentationWidth: number
- value: ReactNode
- disabled?: boolean
- onCollapse?(): void
- wrapperRef?(node: HTMLLIElement): void
+ TriangleRightMini
+} from '@medusajs/icons';
+import { Badge, clx, IconButton } from '@medusajs/ui';
+
+import type { HandleProps } from './types';
+
+export interface TreeItemProps extends Omit, 'id'> {
+ childCount?: number;
+ clone?: boolean;
+ collapsed?: boolean;
+ depth: number;
+ disableInteraction?: boolean;
+ disableSelection?: boolean;
+ ghost?: boolean;
+ handleProps?: HandleProps;
+ indentationWidth: number;
+ value: ReactNode;
+ disabled?: boolean;
+ onCollapse?(): void;
+ wrapperRef?(node: HTMLLIElement): void;
}
export const TreeItem = forwardRef(
@@ -47,85 +48,83 @@ export const TreeItem = forwardRef(
...props
},
ref
- ) => {
- return (
- (
+ div]:border-t-0': !clone
+ })}
+ {...props}
+ >
+
)
-}
+);
+TreeItem.displayName = 'TreeItem';
+
+const Handle = ({ listeners, attributes, disabled }: HandleProps & { disabled?: boolean }) => (
+
+
+);
type IconProps = {
- childrenCount?: number
- collapsed?: boolean
- clone?: boolean
-}
+ childrenCount?: number;
+ collapsed?: boolean;
+ clone?: boolean;
+};
const Icon = ({ childrenCount, collapsed, clone }: IconProps) => {
- const isBranch = clone ? childrenCount && childrenCount > 1 : childrenCount
- const isOpen = clone ? false : !collapsed
+ const isBranch = clone ? childrenCount && childrenCount > 1 : childrenCount;
+ const isOpen = clone ? false : !collapsed;
return (
+
{childrenCount}
- )
-}
+ );
+};
diff --git a/src/components/common/sortable-tree/types.ts b/src/components/common/sortable-tree/types.ts
index 8b78d701..2559900a 100644
--- a/src/components/common/sortable-tree/types.ts
+++ b/src/components/common/sortable-tree/types.ts
@@ -1,23 +1,24 @@
-import type { DraggableAttributes, UniqueIdentifier } from "@dnd-kit/core"
-import { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities"
-import type { MutableRefObject } from "react"
+import type { MutableRefObject } from 'react';
+
+import type { DraggableAttributes, UniqueIdentifier } from '@dnd-kit/core';
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
export interface TreeItem extends Record {
- id: UniqueIdentifier
+ id: UniqueIdentifier;
}
export interface FlattenedItem extends TreeItem {
- parentId: UniqueIdentifier | null
- depth: number
- index: number
+ parentId: UniqueIdentifier | null;
+ depth: number;
+ index: number;
}
export type SensorContext = MutableRefObject<{
- items: FlattenedItem[]
- offset: number
-}>
+ items: FlattenedItem[];
+ offset: number;
+}>;
export type HandleProps = {
- attributes?: DraggableAttributes | undefined
- listeners?: SyntheticListenerMap | undefined
-}
+ attributes?: DraggableAttributes | undefined;
+ listeners?: SyntheticListenerMap | undefined;
+};
diff --git a/src/components/common/sortable-tree/utils.ts b/src/components/common/sortable-tree/utils.ts
index 064546dc..a90df665 100644
--- a/src/components/common/sortable-tree/utils.ts
+++ b/src/components/common/sortable-tree/utils.ts
@@ -1,12 +1,12 @@
-import type { UniqueIdentifier } from "@dnd-kit/core"
-import { arrayMove } from "@dnd-kit/sortable"
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
-import type { FlattenedItem, TreeItem } from "./types"
+import type { FlattenedItem, TreeItem } from './types';
-export const iOS = /iPad|iPhone|iPod/.test(navigator.platform)
+export const iOS = /iPad|iPhone|iPod/.test(navigator.platform);
function getDragDepth(offset: number, indentationWidth: number) {
- return Math.round(offset / indentationWidth)
+ return Math.round(offset / indentationWidth);
}
export function getProjection(
@@ -16,64 +16,64 @@ export function getProjection(
dragOffset: number,
indentationWidth: number
) {
- const overItemIndex = items.findIndex(({ id }) => id === overId)
- const activeItemIndex = items.findIndex(({ id }) => id === activeId)
- const activeItem = items[activeItemIndex]
- const newItems = arrayMove(items, activeItemIndex, overItemIndex)
- const previousItem = newItems[overItemIndex - 1]
- const nextItem = newItems[overItemIndex + 1]
- const dragDepth = getDragDepth(dragOffset, indentationWidth)
- const projectedDepth = activeItem.depth + dragDepth
+ const overItemIndex = items.findIndex(({ id }) => id === overId);
+ const activeItemIndex = items.findIndex(({ id }) => id === activeId);
+ const activeItem = items[activeItemIndex];
+ const newItems = arrayMove(items, activeItemIndex, overItemIndex);
+ const previousItem = newItems[overItemIndex - 1];
+ const nextItem = newItems[overItemIndex + 1];
+ const dragDepth = getDragDepth(dragOffset, indentationWidth);
+ const projectedDepth = activeItem.depth + dragDepth;
const maxDepth = getMaxDepth({
- previousItem,
- })
- const minDepth = getMinDepth({ nextItem })
- let depth = projectedDepth
+ previousItem
+ });
+ const minDepth = getMinDepth({ nextItem });
+ let depth = projectedDepth;
if (projectedDepth >= maxDepth) {
- depth = maxDepth
+ depth = maxDepth;
} else if (projectedDepth < minDepth) {
- depth = minDepth
+ depth = minDepth;
}
- return { depth, maxDepth, minDepth, parentId: getParentId() }
+ return { depth, maxDepth, minDepth, parentId: getParentId() };
function getParentId() {
if (depth === 0 || !previousItem) {
- return null
+ return null;
}
if (depth === previousItem.depth) {
- return previousItem.parentId
+ return previousItem.parentId;
}
if (depth > previousItem.depth) {
- return previousItem.id
+ return previousItem.id;
}
const newParent = newItems
.slice(0, overItemIndex)
.reverse()
- .find((item) => item.depth === depth)?.parentId
+ .find(item => item.depth === depth)?.parentId;
- return newParent ?? null
+ return newParent ?? null;
}
}
function getMaxDepth({ previousItem }: { previousItem: FlattenedItem }) {
if (previousItem) {
- return previousItem.depth + 1
+ return previousItem.depth + 1;
}
- return 0
+ return 0;
}
function getMinDepth({ nextItem }: { nextItem: FlattenedItem }) {
if (nextItem) {
- return nextItem.depth
+ return nextItem.depth;
}
- return 0
+ return 0;
}
function flatten(
@@ -83,97 +83,85 @@ function flatten(
childrenProp: string
): FlattenedItem[] {
return items.reduce((acc, item, index) => {
- const children = (item[childrenProp] || []) as T[]
+ const children = (item[childrenProp] || []) as T[];
return [
...acc,
{ ...item, parentId, depth, index },
- ...flatten(children, item.id, depth + 1, childrenProp),
- ]
- }, [])
+ ...flatten(children, item.id, depth + 1, childrenProp)
+ ];
+ }, []);
}
-export function flattenTree(
- items: T[],
- childrenProp: string
-): FlattenedItem[] {
- return flatten(items, undefined, undefined, childrenProp)
+export function flattenTree(items: T[], childrenProp: string): FlattenedItem[] {
+ return flatten(items, undefined, undefined, childrenProp);
}
type ItemUpdate = {
- id: UniqueIdentifier
- parentId: UniqueIdentifier | null
- index: number
-}
+ id: UniqueIdentifier;
+ parentId: UniqueIdentifier | null;
+ index: number;
+};
export function buildTree(
flattenedItems: FlattenedItem[],
newIndex: number,
childrenProp: string
): { items: T[]; update: ItemUpdate } {
- const root = { id: "root", [childrenProp]: [] } as T
- const nodes: Record = { [root.id]: root }
- const items = flattenedItems.map((item) => ({ ...item, [childrenProp]: [] }))
+ const root = { id: 'root', [childrenProp]: [] } as T;
+ const nodes: Record = { [root.id]: root };
+ const items = flattenedItems.map(item => ({ ...item, [childrenProp]: [] }));
let update: {
- id: UniqueIdentifier | null
- parentId: UniqueIdentifier | null
- index: number
+ id: UniqueIdentifier | null;
+ parentId: UniqueIdentifier | null;
+ index: number;
} = {
id: null,
parentId: null,
- index: 0,
- }
+ index: 0
+ };
items.forEach((item, index) => {
- const {
- id,
- index: _index,
- depth: _depth,
- parentId: _parentId,
- ...rest
- } = item
- const children = (item[childrenProp] || []) as T[]
-
- const parentId = _parentId ?? root.id
- const parent = nodes[parentId] ?? findItem(items, parentId)
-
- nodes[id] = { id, [childrenProp]: children } as T
- ;(parent[childrenProp] as T[]).push({
+ const { id, index: _index, depth: _depth, parentId: _parentId, ...rest } = item;
+ const children = (item[childrenProp] || []) as T[];
+
+ const parentId = _parentId ?? root.id;
+ const parent = nodes[parentId] ?? findItem(items, parentId);
+
+ nodes[id] = { id, [childrenProp]: children } as T;
+ (parent[childrenProp] as T[]).push({
id,
...rest,
- [childrenProp]: children,
- } as T)
+ [childrenProp]: children
+ } as T);
/**
* Get the information for them item that was moved to the `newIndex`.
*/
if (index === newIndex) {
- const parentChildren = parent[childrenProp] as FlattenedItem[]
+ const parentChildren = parent[childrenProp] as FlattenedItem[];
update = {
id: item.id,
- parentId: parent.id === "root" ? null : parent.id,
- index: parentChildren.length - 1,
- }
+ parentId: parent.id === 'root' ? null : parent.id,
+ index: parentChildren.length - 1
+ };
}
- })
+ });
if (!update.id) {
- throw new Error("Could not find item")
+ throw new Error('Could not find item');
}
return {
items: root[childrenProp] as T[],
- update: update as ItemUpdate,
- }
+ update: update as ItemUpdate
+ };
}
-export function findItem(
- items: T[],
- itemId: UniqueIdentifier
-) {
- return items.find(({ id }) => id === itemId)
+export function findItem(items: T[], itemId: UniqueIdentifier) {
+ return items.find(({ id }) => id === itemId);
}
export function findItemDeep(
@@ -182,23 +170,23 @@ export function findItemDeep(
childrenProp: string
): TreeItem | undefined {
for (const item of items) {
- const { id } = item
- const children = (item[childrenProp] || []) as T[]
+ const { id } = item;
+ const children = (item[childrenProp] || []) as T[];
if (id === itemId) {
- return item
+ return item;
}
if (children.length) {
- const child = findItemDeep(children, itemId, childrenProp)
+ const child = findItemDeep(children, itemId, childrenProp);
if (child) {
- return child
+ return child;
}
}
}
- return undefined
+ return undefined;
}
export function setProperty(
@@ -208,47 +196,37 @@ export function setProperty(
childrenProp: keyof TItem, // Make childrenProp a key of TItem
setter: (value: TItem[T]) => TItem[T]
): TItem[] {
- return items.map((item) => {
+ return items.map(item => {
if (item.id === id) {
return {
...item,
- [property]: setter(item[property]),
- }
+ [property]: setter(item[property])
+ };
}
- const children = item[childrenProp] as TItem[] | undefined
+ const children = item[childrenProp] as TItem[] | undefined;
if (children && children.length) {
return {
...item,
- [childrenProp]: setProperty(
- children,
- id,
- property,
- childrenProp,
- setter
- ),
- } as TItem // Explicitly cast to TItem
+ [childrenProp]: setProperty(children, id, property, childrenProp, setter)
+ } as TItem; // Explicitly cast to TItem
}
- return item
- })
+ return item;
+ });
}
-function countChildren(
- items: T[],
- count = 0,
- childrenProp: string
-): number {
+function countChildren(items: T[], count = 0, childrenProp: string): number {
return items.reduce((acc, item) => {
- const children = (item[childrenProp] || []) as T[]
+ const children = (item[childrenProp] || []) as T[];
if (children.length) {
- return countChildren(children, acc + 1, childrenProp)
+ return countChildren(children, acc + 1, childrenProp);
}
- return acc + 1
- }, count)
+ return acc + 1;
+ }, count);
}
export function getChildCount(
@@ -256,11 +234,11 @@ export function getChildCount(
id: UniqueIdentifier,
childrenProp: string
) {
- const item = findItemDeep(items, id, childrenProp)
+ const item = findItemDeep(items, id, childrenProp);
- const children = (item?.[childrenProp] || []) as T[]
+ const children = (item?.[childrenProp] || []) as T[];
- return item ? countChildren(children, 0, childrenProp) : 0
+ return item ? countChildren(children, 0, childrenProp) : 0;
}
export function removeChildrenOf(
@@ -268,32 +246,30 @@ export function removeChildrenOf(
ids: UniqueIdentifier[],
childrenProp: string
) {
- const excludeParentIds = [...ids]
+ const excludeParentIds = [...ids];
- return items.filter((item) => {
+ return items.filter(item => {
if (item.parentId && excludeParentIds.includes(item.parentId)) {
- const children = (item[childrenProp] || []) as FlattenedItem[]
+ const children = (item[childrenProp] || []) as FlattenedItem[];
if (children.length) {
- excludeParentIds.push(item.id)
+ excludeParentIds.push(item.id);
}
- return false
+
+ return false;
}
- return true
- })
+ return true;
+ });
}
-export function listItemsWithChildren(
- items: T[],
- childrenProp: string
-): T[] {
- return items.map((item) => {
+export function listItemsWithChildren(items: T[], childrenProp: string): T[] {
+ return items.map(item => {
return {
...item,
[childrenProp]: item[childrenProp]
? listItemsWithChildren(item[childrenProp] as TreeItem[], childrenProp)
- : [],
- }
- })
+ : []
+ };
+ });
}
diff --git a/src/components/common/switch-box/index.ts b/src/components/common/switch-box/index.ts
index c245e8b7..fd12bcca 100644
--- a/src/components/common/switch-box/index.ts
+++ b/src/components/common/switch-box/index.ts
@@ -1 +1 @@
-export * from "./switch-box"
+export * from './switch-box';
diff --git a/src/components/common/switch-box/switch-box.tsx b/src/components/common/switch-box/switch-box.tsx
index c03bfd6e..b7535838 100644
--- a/src/components/common/switch-box/switch-box.tsx
+++ b/src/components/common/switch-box/switch-box.tsx
@@ -1,28 +1,28 @@
-import { Switch } from "@medusajs/ui"
-import { ReactNode } from "react"
-import { ControllerProps, FieldPath, FieldValues } from "react-hook-form"
+import type { ReactNode } from 'react';
-import { Form } from "../../common/form"
+import { Form } from '@components/common/form';
+import { Switch } from '@medusajs/ui';
+import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
interface HeadlessControllerProps<
TFieldValues extends FieldValues = FieldValues,
- TName extends FieldPath = FieldPath,
-> extends Omit, "render"> {}
+ TName extends FieldPath = FieldPath
+> extends Omit, 'render'> {}
interface SwitchBoxProps<
TFieldValues extends FieldValues = FieldValues,
- TName extends FieldPath = FieldPath,
+ TName extends FieldPath = FieldPath
> extends HeadlessControllerProps {
- label: string
- description: string
- optional?: boolean
- tooltip?: ReactNode
+ label: string;
+ description: string;
+ optional?: boolean;
+ tooltip?: ReactNode;
/**
* Callback for performing additional actions when the checked state changes.
* This does not intercept the form control, it is only used for injecting side-effects.
*/
- onCheckedChange?: (checked: boolean) => void
- "data-testid"?: string
+ onCheckedChange?: (checked: boolean) => void;
+ 'data-testid'?: string;
}
/**
@@ -33,14 +33,14 @@ interface SwitchBoxProps<
*/
export const SwitchBox = <
TFieldValues extends FieldValues = FieldValues,
- TName extends FieldPath = FieldPath,
+ TName extends FieldPath = FieldPath
>({
label,
description,
optional = false,
tooltip,
onCheckedChange,
- "data-testid": dataTestId,
+ 'data-testid': dataTestId,
...props
}: SwitchBoxProps) => {
return (
@@ -49,31 +49,40 @@ export const SwitchBox = <
render={({ field: { value, onChange, ...field } }) => {
return (
-
-
-
+
+
+
-
- )
-}
+
- {Array.from({ length: sections }, (_, i) => i).map((section) => {
- return (
-
- )
-}
+ showMetadata = false
+}: SingleColumnPageSkeletonProps) => (
+
+ {Array.from({ length: sections }, (_, i) => i).map(section => {
+ return (
+
+);
type TwoColumnPageSkeletonProps = {
- mainSections?: number
- sidebarSections?: number
- showJSON?: boolean
- showMetadata?: boolean
-}
+ mainSections?: number;
+ sidebarSections?: number;
+ showJSON?: boolean;
+ showMetadata?: boolean;
+};
export const TwoColumnPageSkeleton = ({
mainSections = 2,
sidebarSections = 1,
showJSON = false,
- showMetadata = true,
+ showMetadata = true
}: TwoColumnPageSkeletonProps) => {
- const showExtraData = showJSON || showMetadata
+ const showExtraData = showJSON || showMetadata;
return (
- {Array.from({ length: mainSections }, (_, i) => i).map((section) => {
- return (
-
- {showMetadata && (
-
)}
- {Array.from({ length: sidebarSections }, (_, i) => i).map(
- (section) => {
- return (
-
- {showMetadata && (
-
)}
- ({
div]:border-t-0": !clone,
- })}
- {...props}
+ 'border-l': depth > 0,
+ 'w-fit rounded-lg border-none bg-ui-bg-base pr-6 opacity-80 shadow-elevation-flyout':
+ clone,
+ 'z-[1] bg-ui-bg-base-hover opacity-50': ghost,
+ 'bg-ui-bg-disabled': disabled
+ }
+ )}
>
-
-
+
+ 0,
- "shadow-elevation-flyout bg-ui-bg-base w-fit rounded-lg border-none pr-6 opacity-80":
- clone,
- "bg-ui-bg-base-hover z-[1] opacity-50": ghost,
- "bg-ui-bg-disabled": disabled,
- }
- )}
- >
-
-
- )
- }
-)
-TreeItem.displayName = "TreeItem"
-
-const Handle = ({
- listeners,
- attributes,
- disabled,
-}: HandleProps & { disabled?: boolean }) => {
- return (
-
@@ -139,22 +138,27 @@ const Icon = ({ childrenCount, collapsed, clone }: IconProps) => {
- )
-}
+ );
+};
type CollapseProps = {
- collapsed?: boolean
- onCollapse?: () => void
- clone?: boolean
-}
+ collapsed?: boolean;
+ onCollapse?: () => void;
+ clone?: boolean;
+};
const Collapse = ({ collapsed, onCollapse, clone }: CollapseProps) => {
if (clone) {
- return null
+ return null;
}
if (!onCollapse) {
- return
+ return (
+
+ );
}
return (
@@ -165,43 +169,43 @@ const Collapse = ({ collapsed, onCollapse, clone }: CollapseProps) => {
type="button"
>
- {value}
-
- )
-}
+const Value = ({ value }: ValueProps) => (
+ {value}
+);
type ChildrenCountProps = {
- clone?: boolean
- childrenCount?: number
-}
+ clone?: boolean;
+ childrenCount?: number;
+};
const ChildrenCount = ({ clone, childrenCount }: ChildrenCountProps) => {
if (!clone || !childrenCount) {
- return null
+ return null;
}
if (clone && childrenCount <= 1) {
- return null
+ return null;
}
return (
-
+
{
- onCheckedChange?.(e)
- onChange(e)
+ onCheckedChange={e => {
+ onCheckedChange?.(e);
+ onChange(e);
}}
data-testid={dataTestId ? `${dataTestId}-switch` : undefined}
/>
{includesTax ? (
-
- )
-}
+ );
+};
diff --git a/src/components/common/thumbnail/index.ts b/src/components/common/thumbnail/index.ts
index 2ce6a861..d4ab7a50 100644
--- a/src/components/common/thumbnail/index.ts
+++ b/src/components/common/thumbnail/index.ts
@@ -1 +1 @@
-export * from "./thumbnail";
+export * from './thumbnail';
diff --git a/src/components/common/thumbnail/thumbnail.tsx b/src/components/common/thumbnail/thumbnail.tsx
index 5e32de1c..3337ace4 100644
--- a/src/components/common/thumbnail/thumbnail.tsx
+++ b/src/components/common/thumbnail/thumbnail.tsx
@@ -1,32 +1,30 @@
-import { Photo } from "@medusajs/icons"
-import { clx } from "@medusajs/ui"
+import { Photo } from '@medusajs/icons';
+import { clx } from '@medusajs/ui';
type ThumbnailProps = {
- src?: string | null
- alt?: string
- size?: "small" | "base"
-}
+ src?: string | null;
+ alt?: string;
+ size?: 'small' | 'base';
+};
-export const Thumbnail = ({ src, alt, size = "base" }: ThumbnailProps) => {
- return (
-
+
{name || email}
- )
-}
+ );
+};
export const By = ({ id }: { id: string }) => {
- const { user } = useUser(id) // todo: extend to support customers
+ const { user } = useUser(id); // todo: extend to support customers
if (!user) {
- return null
+ return null;
}
- return ({
+export const DataGridBooleanCell = ({
context,
- disabled,
+ disabled
}: DataGridCellProps & { disabled?: boolean }) => {
const { field, control, renderProps } = useDataGridCell({
- context,
- })
- const errorProps = useDataGridCellError({ context })
+ context
+ });
+ const errorProps = useDataGridCellError({ context });
- const { container, input } = renderProps
+ const { container, input } = renderProps;
return (
{
- return (
-
-
- )
- }}
+ render={({ field }) => (
+
+
+ )}
/>
- )
-}
+ );
+};
const Inner = ({
field,
inputProps,
- disabled,
+ disabled
}: {
- field: ControllerRenderProps
- inputProps: InputProps
- disabled?: boolean
+ //@todo fix type
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ field: ControllerRenderProps;
+ inputProps: InputProps;
+ disabled?: boolean;
}) => {
- const { ref, value, onBlur, name, disabled: fieldDisabled } = field
- const {
- ref: inputRef,
- onBlur: onInputBlur,
- onChange,
- onFocus,
- ...attributes
- } = inputProps
+ const { ref, value, onBlur, name, disabled: fieldDisabled } = field;
+ const { ref: inputRef, onBlur: onInputBlur, onChange, onFocus, ...attributes } = inputProps;
- const combinedRefs = useCombinedRefs(ref, inputRef)
+ const combinedRefs = useCombinedRefs(ref, inputRef);
return (
onChange(newValue === true, value)}
+ onCheckedChange={newValue => onChange(newValue === true, value)}
onFocus={onFocus}
onBlur={() => {
- onBlur()
- onInputBlur()
+ onBlur();
+ onInputBlur();
}}
ref={combinedRefs}
tabIndex={-1}
{...attributes}
/>
- )
-}
+ );
+};
diff --git a/src/components/data-grid/components/data-grid-cell-container.tsx b/src/components/data-grid/components/data-grid-cell-container.tsx
index 6c67b101..68622367 100644
--- a/src/components/data-grid/components/data-grid-cell-container.tsx
+++ b/src/components/data-grid/components/data-grid-cell-container.tsx
@@ -1,12 +1,13 @@
-import { ErrorMessage } from "@hookform/error-message"
-import { ExclamationCircle } from "@medusajs/icons"
-import { Tooltip, clx } from "@medusajs/ui"
-import { PropsWithChildren } from "react"
-import { get } from "react-hook-form"
+import type { PropsWithChildren } from 'react';
-import { DataGridCellContainerProps, DataGridErrorRenderProps } from "../types"
-import { DataGridRowErrorIndicator } from "./data-grid-row-error-indicator"
-import { useDataGridContext } from "../context"
+import { ErrorMessage } from '@hookform/error-message';
+import { ExclamationCircle } from '@medusajs/icons';
+import { clx, Tooltip } from '@medusajs/ui';
+import { get } from 'react-hook-form';
+
+import { useDataGridContext } from '../context';
+import type { DataGridCellContainerProps, DataGridErrorRenderProps } from '../types';
+import { DataGridRowErrorIndicator } from './data-grid-row-error-indicator';
export const DataGridCellContainer = ({
isAnchor,
@@ -20,29 +21,29 @@ export const DataGridCellContainer = ({
children,
errors,
rowErrors,
- outerComponent,
+ outerComponent
}: DataGridCellContainerProps & DataGridErrorRenderProps) => {
- const context = useDataGridContext()
- const error = get(errors, field)
- const hasError = !!error
-
- const fieldName = field.replace(/\./g, '-').replace(/\[|\]/g, '')
- const dataTestId = context.dataTestId
- ? `${context.dataTestId}-cell-${fieldName}`
- : undefined
+ const context = useDataGridContext();
+ const error = get(errors, field);
+ const hasError = !!error;
+
+ const fieldName = field.replace(/\./g, '-').replace(/\[|\]/g, '');
+ const dataTestId = context.dataTestId ? `${context.dataTestId}-cell-${fieldName}` : undefined;
return (
-
-
+
{label}
- {description}
+
+ {description}
+
- {src ? (
- 
- ) : (
-
- )
-}
+export const Thumbnail = ({ src, alt, size = 'base' }: ThumbnailProps) => (
+
+ {src ? (
+
+ ) : (
+
+);
diff --git a/src/components/common/user-link/index.ts b/src/components/common/user-link/index.ts
index 951235f8..3863b20d 100644
--- a/src/components/common/user-link/index.ts
+++ b/src/components/common/user-link/index.ts
@@ -1 +1 @@
-export * from "./user-link"
+export * from './user-link';
diff --git a/src/components/common/user-link/user-link.tsx b/src/components/common/user-link/user-link.tsx
index 239abb8b..01140131 100644
--- a/src/components/common/user-link/user-link.tsx
+++ b/src/components/common/user-link/user-link.tsx
@@ -1,45 +1,46 @@
-import { Avatar, Text } from "@medusajs/ui"
-import { Link } from "react-router-dom"
-import { useUser } from "../../../hooks/api/users"
+import { useUser } from '@hooks/api';
+import { Avatar, Text } from '@medusajs/ui';
+import { Link } from 'react-router-dom';
type UserLinkProps = {
- id: string
- first_name?: string | null
- last_name?: string | null
- email: string
- type?: "customer" | "user"
-}
+ id: string;
+ first_name?: string | null;
+ last_name?: string | null;
+ email: string;
+ type?: 'customer' | 'user';
+};
-export const UserLink = ({
- id,
- first_name,
- last_name,
- email,
- type = "user",
-}: UserLinkProps) => {
- const name = [first_name, last_name].filter(Boolean).join(" ")
- const fallback = name ? name.slice(0, 1) : email.slice(0, 1)
- const link = type === "user" ? `/settings/users/${id}` : `/customers/${id}`
+export const UserLink = ({ id, first_name, last_name, email, type = 'user' }: UserLinkProps) => {
+ const name = [first_name, last_name].filter(Boolean).join(' ');
+ const fallback = name ? name.slice(0, 1) : email.slice(0, 1);
+ const link = type === 'user' ? `/settings/users/${id}` : `/customers/${id}`;
return (
-
+
- )
-}
+ );
+};
const RenderChildren = ({
isAnchor,
placeholder,
- children,
-}: PropsWithChildren<
- Pick
->) => {
+ children
+}: PropsWithChildren>) => {
if (!isAnchor && placeholder) {
- return placeholder
+ return placeholder;
}
- return children
-}
+ return children;
+};
diff --git a/src/components/data-grid/components/data-grid-currency-cell.tsx b/src/components/data-grid/components/data-grid-currency-cell.tsx
index 2c50b5df..7eb116a1 100644
--- a/src/components/data-grid/components/data-grid-currency-cell.tsx
+++ b/src/components/data-grid/components/data-grid-currency-cell.tsx
@@ -1,116 +1,115 @@
-import CurrencyInput, {
- CurrencyInputProps,
- formatValue,
-} from "react-currency-input-field"
-import { Controller, ControllerRenderProps } from "react-hook-form"
-
-import { useCallback, useEffect, useState } from "react"
-import { useCombinedRefs } from "../../../hooks/use-combined-refs"
-import { CurrencyInfo, currencies } from "../../../lib/data/currencies"
-import { useDataGridCell, useDataGridCellError } from "../hooks"
-import { DataGridCellProps, InputProps } from "../types"
-import { DataGridCellContainer } from "./data-grid-cell-container"
-
-interface DataGridCurrencyCellProps
- extends DataGridCellProps {
- code: string
+import { useCallback, useEffect, useState } from 'react';
+
+import { useDataGridCell, useDataGridCellError } from '@components/data-grid/hooks';
+import type { DataGridCellProps, InputProps } from '@components/data-grid/types';
+import { useCombinedRefs } from '@hooks/use-combined-refs.tsx';
+import { currencies, type CurrencyInfo } from '@lib/data/currencies.ts';
+import CurrencyInput, { formatValue, type CurrencyInputProps } from 'react-currency-input-field';
+import { Controller, type ControllerRenderProps } from 'react-hook-form';
+
+import { DataGridCellContainer } from './data-grid-cell-container';
+
+//@todo fix type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+interface DataGridCurrencyCellProps extends DataGridCellProps {
+ code: string;
}
+//@todo fix type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const DataGridCurrencyCell = ({
context,
- code,
+ code
}: DataGridCurrencyCellProps) => {
const { field, control, renderProps } = useDataGridCell({
- context,
- })
- const errorProps = useDataGridCellError({ context })
+ context
+ });
+ const errorProps = useDataGridCellError({ context });
- const { container, input } = renderProps
+ const { container, input } = renderProps;
- const currency = currencies[code.toUpperCase()]
+ const currency = currencies[code.toUpperCase()];
return (
{
- return (
-
-
- )
- }}
+ render={({ field }) => (
+
+
+ )}
/>
- )
-}
+ );
+};
const Inner = ({
field,
inputProps,
- currencyInfo,
+ currencyInfo
}: {
- field: ControllerRenderProps
- inputProps: InputProps
- currencyInfo: CurrencyInfo
+ //@todo fix type
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ field: ControllerRenderProps;
+ inputProps: InputProps;
+ currencyInfo: CurrencyInfo;
}) => {
- const { value, onChange: _, onBlur, ref, ...rest } = field
- const {
- ref: inputRef,
- onBlur: onInputBlur,
- onFocus,
- onChange,
- ...attributes
- } = inputProps
+ const { value, onBlur, ref, ...rest } = field;
+ const { ref: inputRef, onBlur: onInputBlur, onFocus, onChange, ...attributes } = inputProps;
const formatter = useCallback(
(value?: string | number) => {
- const ensuredValue =
- typeof value === "number" ? value.toString() : value || ""
+ const ensuredValue = typeof value === 'number' ? value.toString() : value || '';
return formatValue({
value: ensuredValue,
decimalScale: currencyInfo.decimal_digits,
disableGroupSeparators: true,
- decimalSeparator: ".",
- })
+ decimalSeparator: '.'
+ });
},
[currencyInfo]
- )
+ );
- const [localValue, setLocalValue] = useState(value || "")
+ const [localValue, setLocalValue] = useState(value || '');
- const handleValueChange: CurrencyInputProps["onValueChange"] = (
- value,
- _name,
- _values
- ) => {
+ const handleValueChange: CurrencyInputProps['onValueChange'] = value => {
if (!value) {
- setLocalValue("")
- return
+ setLocalValue('');
+
+ return;
}
- setLocalValue(value)
- }
+ setLocalValue(value);
+ };
useEffect(() => {
- let update = value
+ let update = value;
// The component we use is a bit fidly when the value is updated externally
// so we need to ensure a format that will result in the cell being formatted correctly
// according to the users locale on the next render.
if (!isNaN(Number(value))) {
- update = formatter(update)
+ update = formatter(update);
}
- setLocalValue(update)
- }, [value, formatter])
+ // eslint-disable-next-line react-hooks/set-state-in-effect
+ setLocalValue(update);
+ }, [value, formatter]);
- const combinedRed = useCombinedRefs(inputRef, ref)
+ const combinedRed = useCombinedRefs(inputRef, ref);
return (
{
- duplicateOf: string
- children?: ReactNode | ((props: { value: TValue }) => ReactNode)
+ duplicateOf: string;
+ children?: ReactNode | ((props: { value: TValue }) => ReactNode);
}
export const DataGridDuplicateCell = ({
duplicateOf,
- children,
+ children
}: DataGridDuplicateCellProps) => {
- const { watchedValue } = useDataGridDuplicateCell({ duplicateOf })
+ const { watchedValue } = useDataGridDuplicateCell({ duplicateOf });
return (
-
{
- return (
-
{outerComponent}
-
-
-
- )
- }}
+ render={({ message }) => (
+
+
+
+
+ )}
/>
-
+
{children}
@@ -78,19 +83,17 @@ export const DataGridCellContainer = ({
{currencyInfo.symbol_native}
@@ -124,10 +123,10 @@ const Inner = ({
onValueChange={handleValueChange}
formatValueOnBlur
onBlur={() => {
- onBlur()
- onInputBlur()
+ onBlur();
+ onInputBlur();
- onChange(localValue, value)
+ onChange(localValue, value);
}}
onFocus={onFocus}
decimalScale={currencyInfo.decimal_digits}
@@ -136,5 +135,5 @@ const Inner = ({
tabIndex={-1}
/>
- )
-}
+ );
+};
diff --git a/src/components/data-grid/components/data-grid-duplicate-cell.tsx b/src/components/data-grid/components/data-grid-duplicate-cell.tsx
index 19e8218f..ddf3facc 100644
--- a/src/components/data-grid/components/data-grid-duplicate-cell.tsx
+++ b/src/components/data-grid/components/data-grid-duplicate-cell.tsx
@@ -1,21 +1,20 @@
-import { ReactNode } from "react"
-import { useDataGridDuplicateCell } from "../hooks"
+import type { ReactNode } from 'react';
+
+import { useDataGridDuplicateCell } from '@components/data-grid/hooks';
interface DataGridDuplicateCellProps
- {typeof children === "function"
- ? children({ value: watchedValue })
- : children}
+
+
-
+
- {t("app.menus.user.shortcuts")}
+ {t('app.menus.user.shortcuts')}
{shortcut.label}
- )
-}
+ );
+};
diff --git a/src/components/data-grid/components/data-grid-number-cell.tsx b/src/components/data-grid/components/data-grid-number-cell.tsx
index 86d1f6ab..41855d8a 100644
--- a/src/components/data-grid/components/data-grid-number-cell.tsx
+++ b/src/components/data-grid/components/data-grid-number-cell.tsx
@@ -1,88 +1,93 @@
-import { clx } from "@medusajs/ui"
-import { useEffect, useState } from "react"
-import { Controller, ControllerRenderProps } from "react-hook-form"
-import { useCombinedRefs } from "../../../hooks/use-combined-refs"
-import { useDataGridCell, useDataGridCellError } from "../hooks"
-import { DataGridCellProps, InputProps } from "../types"
-import { DataGridCellContainer } from "./data-grid-cell-container"
+import { useEffect, useState } from 'react';
+import { useDataGridCell, useDataGridCellError } from '@components/data-grid/hooks';
+import type { DataGridCellProps, InputProps } from '@components/data-grid/types';
+import { useCombinedRefs } from '@hooks/use-combined-refs.tsx';
+import { clx } from '@medusajs/ui';
+import { Controller, type ControllerRenderProps } from 'react-hook-form';
+
+import { DataGridCellContainer } from './data-grid-cell-container';
+
+//@todo fix type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const DataGridNumberCell = ({
context,
...rest
}: DataGridCellProps & {
- min?: number
- max?: number
- placeholder?: string
+ min?: number;
+ max?: number;
+ placeholder?: string;
}) => {
const { field, control, renderProps } = useDataGridCell({
- context,
- })
- const errorProps = useDataGridCellError({ context })
+ context
+ });
+ const errorProps = useDataGridCellError({ context });
- const { container, input } = renderProps
+ const { container, input } = renderProps;
return (
{
- return (
-
-
- )
- }}
+ render={({ field }) => (
+
+
+ )}
/>
- )
-}
+ );
+};
const Inner = ({
field,
inputProps,
...props
}: {
- field: ControllerRenderProps
- inputProps: InputProps
- min?: number
- max?: number
- placeholder?: string
+ //@todo fix type
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ field: ControllerRenderProps;
+ inputProps: InputProps;
+ min?: number;
+ max?: number;
+ placeholder?: string;
}) => {
- const { ref, value, onChange: _, onBlur, ...fieldProps } = field
- const {
- ref: inputRef,
- onChange,
- onBlur: onInputBlur,
- onFocus,
- ...attributes
- } = inputProps
+ const { ref, value, onChange: _, onBlur, ...fieldProps } = field;
+ const { ref: inputRef, onChange, onBlur: onInputBlur, onFocus, ...attributes } = inputProps;
- const [localValue, setLocalValue] = useState(value)
+ const [localValue, setLocalValue] = useState(value);
useEffect(() => {
- setLocalValue(value)
- }, [value])
+ setLocalValue(value);
+ }, [value]);
- const combinedRefs = useCombinedRefs(inputRef, ref)
+ const combinedRefs = useCombinedRefs(inputRef, ref);
return (
= PropsWithChildren<
DataGridCellProps
> & {
- color?: "muted" | "normal"
-}
+ color?: 'muted' | 'normal';
+};
+//@todo fix type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const DataGridReadonlyCell = ({
context,
- color = "muted",
- children,
+ color = 'muted',
+ children
}: DataGridReadonlyCellProps) => {
- const { rowErrors } = useDataGridCellError({ context })
+ const { rowErrors } = useDataGridCellError({ context });
return (
{
if (isSpecialFocusKey(e)) {
handleSpecialFocusKeys(e);
+
return;
}
};
@@ -676,6 +677,7 @@ const DataGridHeader = ({
onHeaderInteractionChange(value);
setColumnsOpen(value);
};
+
return (
+ {typeof children === 'function' ? children({ value: watchedValue }) : children}
- )
-}
+ );
+};
diff --git a/src/components/data-grid/components/data-grid-keyboard-shortcut-modal.tsx b/src/components/data-grid/components/data-grid-keyboard-shortcut-modal.tsx
index a8b5f123..12dea066 100644
--- a/src/components/data-grid/components/data-grid-keyboard-shortcut-modal.tsx
+++ b/src/components/data-grid/components/data-grid-keyboard-shortcut-modal.tsx
@@ -1,208 +1,208 @@
-import { XMark } from "@medusajs/icons"
-import {
- Button,
- clx,
- Heading,
- IconButton,
- Input,
- Kbd,
- Text,
-} from "@medusajs/ui"
-import { Dialog as RadixDialog } from "radix-ui"
-import { useMemo, useState } from "react"
-import { useTranslation } from "react-i18next"
+import { useMemo, useState } from 'react';
+
+import { XMark } from '@medusajs/icons';
+import { Button, clx, Heading, IconButton, Input, Kbd, Text } from '@medusajs/ui';
+import { Dialog as RadixDialog } from 'radix-ui';
+import { useTranslation } from 'react-i18next';
const useDataGridShortcuts = () => {
- const { t } = useTranslation()
+ const { t } = useTranslation();
- const shortcuts = useMemo(
+ return useMemo(
() => [
{
- label: t("dataGrid.shortcuts.commands.undo"),
+ label: t('dataGrid.shortcuts.commands.undo'),
keys: {
- Mac: ["⌘", "Z"],
- Windows: ["Ctrl", "Z"],
- },
+ Mac: ['⌘', 'Z'],
+ Windows: ['Ctrl', 'Z']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.redo"),
+ label: t('dataGrid.shortcuts.commands.redo'),
keys: {
- Mac: ["⇧", "⌘", "Z"],
- Windows: ["Shift", "Ctrl", "Z"],
- },
+ Mac: ['⇧', '⌘', 'Z'],
+ Windows: ['Shift', 'Ctrl', 'Z']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.copy"),
+ label: t('dataGrid.shortcuts.commands.copy'),
keys: {
- Mac: ["⌘", "C"],
- Windows: ["Ctrl", "C"],
- },
+ Mac: ['⌘', 'C'],
+ Windows: ['Ctrl', 'C']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.paste"),
+ label: t('dataGrid.shortcuts.commands.paste'),
keys: {
- Mac: ["⌘", "V"],
- Windows: ["Ctrl", "V"],
- },
+ Mac: ['⌘', 'V'],
+ Windows: ['Ctrl', 'V']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.edit"),
+ label: t('dataGrid.shortcuts.commands.edit'),
keys: {
- Mac: ["↵"],
- Windows: ["Enter"],
- },
+ Mac: ['↵'],
+ Windows: ['Enter']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.delete"),
+ label: t('dataGrid.shortcuts.commands.delete'),
keys: {
- Mac: ["⌫"],
- Windows: ["Backspace"],
- },
+ Mac: ['⌫'],
+ Windows: ['Backspace']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.clear"),
+ label: t('dataGrid.shortcuts.commands.clear'),
keys: {
- Mac: ["Space"],
- Windows: ["Space"],
- },
+ Mac: ['Space'],
+ Windows: ['Space']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.moveUp"),
+ label: t('dataGrid.shortcuts.commands.moveUp'),
keys: {
- Mac: ["↑"],
- Windows: ["↑"],
- },
+ Mac: ['↑'],
+ Windows: ['↑']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.moveDown"),
+ label: t('dataGrid.shortcuts.commands.moveDown'),
keys: {
- Mac: ["↓"],
- Windows: ["↓"],
- },
+ Mac: ['↓'],
+ Windows: ['↓']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.moveLeft"),
+ label: t('dataGrid.shortcuts.commands.moveLeft'),
keys: {
- Mac: ["←"],
- Windows: ["←"],
- },
+ Mac: ['←'],
+ Windows: ['←']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.moveRight"),
+ label: t('dataGrid.shortcuts.commands.moveRight'),
keys: {
- Mac: ["→"],
- Windows: ["→"],
- },
+ Mac: ['→'],
+ Windows: ['→']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.moveTop"),
+ label: t('dataGrid.shortcuts.commands.moveTop'),
keys: {
- Mac: ["⌘", "↑"],
- Windows: ["Ctrl", "↑"],
- },
+ Mac: ['⌘', '↑'],
+ Windows: ['Ctrl', '↑']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.moveBottom"),
+ label: t('dataGrid.shortcuts.commands.moveBottom'),
keys: {
- Mac: ["⌘", "↓"],
- Windows: ["Ctrl", "↓"],
- },
+ Mac: ['⌘', '↓'],
+ Windows: ['Ctrl', '↓']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.selectDown"),
+ label: t('dataGrid.shortcuts.commands.selectDown'),
keys: {
- Mac: ["⇧", "↓"],
- Windows: ["Shift", "↓"],
- },
+ Mac: ['⇧', '↓'],
+ Windows: ['Shift', '↓']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.selectUp"),
+ label: t('dataGrid.shortcuts.commands.selectUp'),
keys: {
- Mac: ["⇧", "↑"],
- Windows: ["Shift", "↑"],
- },
+ Mac: ['⇧', '↑'],
+ Windows: ['Shift', '↑']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.selectColumnDown"),
+ label: t('dataGrid.shortcuts.commands.selectColumnDown'),
keys: {
- Mac: ["⇧", "⌘", "↓"],
- Windows: ["Shift", "Ctrl", "↓"],
- },
+ Mac: ['⇧', '⌘', '↓'],
+ Windows: ['Shift', 'Ctrl', '↓']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.selectColumnUp"),
+ label: t('dataGrid.shortcuts.commands.selectColumnUp'),
keys: {
- Mac: ["⇧", "⌘", "↑"],
- Windows: ["Shift", "Ctrl", "↑"],
- },
+ Mac: ['⇧', '⌘', '↑'],
+ Windows: ['Shift', 'Ctrl', '↑']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.focusToolbar"),
+ label: t('dataGrid.shortcuts.commands.focusToolbar'),
keys: {
- Mac: ["⌃", "⌥", ","],
- Windows: ["Ctrl", "Alt", ","],
- },
+ Mac: ['⌃', '⌥', ','],
+ Windows: ['Ctrl', 'Alt', ',']
+ }
},
{
- label: t("dataGrid.shortcuts.commands.focusCancel"),
+ label: t('dataGrid.shortcuts.commands.focusCancel'),
keys: {
- Mac: ["⌃", "⌥", "."],
- Windows: ["Ctrl", "Alt", "."],
- },
- },
+ Mac: ['⌃', '⌥', '.'],
+ Windows: ['Ctrl', 'Alt', '.']
+ }
+ }
],
[t]
- )
-
- return shortcuts
-}
+ );
+};
type DataGridKeyboardShortcutModalProps = {
- open: boolean
- onOpenChange: (open: boolean) => void
-}
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+};
export const DataGridKeyboardShortcutModal = ({
open,
- onOpenChange,
+ onOpenChange
}: DataGridKeyboardShortcutModalProps) => {
- const { t } = useTranslation()
- const [searchValue, onSearchValueChange] = useState("")
- const shortcuts = useDataGridShortcuts()
+ const { t } = useTranslation();
+ const [searchValue, onSearchValueChange] = useState('');
+ const shortcuts = useDataGridShortcuts();
const searchResults = useMemo(() => {
- return shortcuts.filter((shortcut) =>
+ return shortcuts.filter(shortcut =>
shortcut.label.toLowerCase().includes(searchValue.toLowerCase())
- )
- }, [searchValue, shortcuts])
+ );
+ }, [searchValue, shortcuts]);
return (
-
esc
-
+
@@ -213,7 +213,7 @@ export const DataGridKeyboardShortcutModal = ({
type="search"
value={searchValue}
autoFocus
- onChange={(e) => onSearchValueChange(e.target.value)}
+ onChange={e => onSearchValueChange(e.target.value)}
/>
{shortcut.keys.Mac?.map((key, index) => {
return (
-
- )
+ );
})}
+
{key}
- )
+ );
})}
setLocalValue(e.target.value)}
+ onChange={e => setLocalValue(e.target.value)}
onBlur={() => {
- onBlur()
- onInputBlur()
+ onBlur();
+ onInputBlur();
// We propagate the change to the field only when the input is blurred
- onChange(localValue, value)
+ onChange(localValue, value);
}}
onFocus={onFocus}
type="number"
inputMode="decimal"
className={clx(
- "txt-compact-small size-full bg-transparent outline-none",
- "placeholder:text-ui-fg-muted"
+ 'txt-compact-small size-full bg-transparent outline-none',
+ 'placeholder:text-ui-fg-muted'
)}
tabIndex={-1}
{...props}
@@ -90,5 +95,5 @@ const Inner = ({
{...attributes}
/>
- )
-}
+ );
+};
diff --git a/src/components/data-grid/components/data-grid-readonly-cell.tsx b/src/components/data-grid/components/data-grid-readonly-cell.tsx
index cf842684..b5c004b6 100644
--- a/src/components/data-grid/components/data-grid-readonly-cell.tsx
+++ b/src/components/data-grid/components/data-grid-readonly-cell.tsx
@@ -1,33 +1,38 @@
-import { PropsWithChildren } from "react"
+import type { PropsWithChildren } from 'react';
-import { clx } from "@medusajs/ui"
-import { useDataGridCellError } from "../hooks"
-import { DataGridCellProps } from "../types"
-import { DataGridRowErrorIndicator } from "./data-grid-row-error-indicator"
+import { useDataGridCellError } from '@components/data-grid/hooks';
+import type { DataGridCellProps } from '@components/data-grid/types';
+import { clx } from '@medusajs/ui';
+import { DataGridRowErrorIndicator } from './data-grid-row-error-indicator';
+
+//@todo fix type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
type DataGridReadonlyCellProps{children}
diff --git a/src/components/data-grid/components/data-grid-row-error-indicator.tsx b/src/components/data-grid/components/data-grid-row-error-indicator.tsx
index 05315110..b756f28a 100644
--- a/src/components/data-grid/components/data-grid-row-error-indicator.tsx
+++ b/src/components/data-grid/components/data-grid-row-error-indicator.tsx
@@ -1,18 +1,16 @@
-import { Badge, Tooltip } from "@medusajs/ui"
-import { useTranslation } from "react-i18next"
-import { DataGridRowError } from "../types"
+import type { DataGridRowError } from '@components/data-grid/types';
+import { Badge, Tooltip } from '@medusajs/ui';
+import { useTranslation } from 'react-i18next';
type DataGridRowErrorIndicatorProps = {
- rowErrors: DataGridRowError[]
-}
+ rowErrors: DataGridRowError[];
+};
-export const DataGridRowErrorIndicator = ({
- rowErrors,
-}: DataGridRowErrorIndicatorProps) => {
- const rowErrorCount = rowErrors ? rowErrors.length : 0
+export const DataGridRowErrorIndicator = ({ rowErrors }: DataGridRowErrorIndicatorProps) => {
+ const rowErrorCount = rowErrors ? rowErrors.length : 0;
if (!rowErrors || rowErrorCount <= 0) {
- return null
+ return null;
}
return (
@@ -20,25 +18,28 @@ export const DataGridRowErrorIndicator = ({
content={
+
{rowErrorCount}
- )
-}
+ );
+};
-const DataGridRowErrorLine = ({
- error,
-}: {
- error: { message: string; to: () => void }
-}) => {
- const { t } = useTranslation()
+const DataGridRowErrorLine = ({ error }: { error: { message: string; to: () => void } }) => {
+ const { t } = useTranslation();
return (
@@ -46,10 +47,10 @@ const DataGridRowErrorLine = ({
- )
-}
+ );
+};
diff --git a/src/components/data-grid/components/data-grid-skeleton.tsx b/src/components/data-grid/components/data-grid-skeleton.tsx
index a54f203c..771303ba 100644
--- a/src/components/data-grid/components/data-grid-skeleton.tsx
+++ b/src/components/data-grid/components/data-grid-skeleton.tsx
@@ -1,41 +1,39 @@
-import { ColumnDef } from "@tanstack/react-table"
-import { Skeleton } from "../../common/skeleton"
+import { Skeleton } from '@components/common/skeleton';
+import type { ColumnDef } from '@tanstack/react-table';
type DataGridSkeletonProps = {
- columns: ColumnDef[]
- rows?: number
-}
+ columns: ColumnDef[];
+ rows?: number;
+};
export const DataGridSkeleton = ({
columns,
- rows: rowCount = 10,
+ rows: rowCount = 10
}: DataGridSkeletonProps) => {
- const rows = Array.from({ length: rowCount }, (_, i) => i)
+ const rows = Array.from({ length: rowCount }, (_, i) => i);
- const colCount = columns.length
+ const colCount = columns.length;
return (
-
-
{rowErrors.map((error, index) => (
-
-
- inputProps: InputProps
- min?: number
- max?: number
- placeholder?: string
+ //@todo fix type
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ field: ControllerRenderProps;
+ inputProps: InputProps;
+ min?: number;
+ max?: number;
+ placeholder?: string;
}) => {
- const { ref, value, onChange: _, onBlur, ...fieldProps } = field
- const {
- ref: inputRef,
- onChange,
- onBlur: onInputBlur,
- onFocus,
- ...attributes
- } = inputProps
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const { ref, value, onChange: _, onBlur, ...fieldProps } = field;
+ const { ref: inputRef, onChange, onBlur: onInputBlur, onFocus, ...attributes } = inputProps;
- const [localValue, setLocalValue] = useState(value)
+ const [localValue, setLocalValue] = useState(value);
useEffect(() => {
- setLocalValue(value)
- }, [value])
+ setLocalValue(value);
+ }, [value]);
- const combinedRefs = useCombinedRefs(inputRef, ref)
+ const combinedRefs = useCombinedRefs(inputRef, ref);
- const handleInputChange: CurrencyInputProps["onValueChange"] = (
- updatedValue,
- _name,
- _values
- ) => {
- const ensuredValue = updatedValue !== undefined ? updatedValue : ""
- const newValue = { ...localValue, quantity: ensuredValue }
+ const handleInputChange: CurrencyInputProps['onValueChange'] = updatedValue => {
+ const ensuredValue = updatedValue !== undefined ? updatedValue : '';
+ const newValue = { ...localValue, quantity: ensuredValue };
/**
* If the value is not empty, then the location should be enabled.
@@ -162,22 +164,24 @@ const Inner = ({
* Else, if the value is empty and the location is enabled, then the
* location should be disabled, unless toggling the location is disabled.
*/
- if (ensuredValue !== "") {
- newValue.checked = true
+ if (ensuredValue !== '') {
+ newValue.checked = true;
} else if (newValue.checked && newValue.disabledToggle === false) {
- newValue.checked = false
+ newValue.checked = false;
}
- setLocalValue(newValue)
- }
+ setLocalValue(newValue);
+ };
const handleOnChange = () => {
- if (localValue.disabledToggle && localValue.quantity === "") {
- localValue.quantity = 0
+ if (localValue.disabledToggle && localValue.quantity === '') {
+ //@todo fix type
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any,react-hooks/immutability
+ localValue.quantity = 0;
}
- onChange(localValue, value)
- }
+ onChange(localValue, value);
+ };
return (
= {
// Grid state
- anchor: DataGridCoordinates | null
- trapActive: boolean
- setTrapActive: (value: boolean) => void
- errors: FieldErrors
+ anchor: DataGridCoordinates | null;
+ trapActive: boolean;
+ setTrapActive: (value: boolean) => void;
+ errors: FieldErrors;
// Cell handlers
- getIsCellSelected: (coords: DataGridCoordinates) => boolean
- getIsCellDragSelected: (coords: DataGridCoordinates) => boolean
+ getIsCellSelected: (coords: DataGridCoordinates) => boolean;
+ getIsCellDragSelected: (coords: DataGridCoordinates) => boolean;
// Grid handlers
- setIsEditing: (value: boolean) => void
- setIsSelecting: (value: boolean) => void
- setRangeEnd: (coords: DataGridCoordinates) => void
- setSingleRange: (coords: DataGridCoordinates) => void
+ setIsEditing: (value: boolean) => void;
+ setIsSelecting: (value: boolean) => void;
+ setRangeEnd: (coords: DataGridCoordinates) => void;
+ setSingleRange: (coords: DataGridCoordinates) => void;
// Form state and handlers
- register: UseFormRegister
- control: Control
- getInputChangeHandler: (
- field: Path
- ) => (next: any, prev: any) => void
+ register: UseFormRegister;
+ control: Control;
+ getInputChangeHandler: (field: Path) => (next: any, prev: any) => void;
// Wrapper handlers
getWrapperFocusHandler: (
coordinates: DataGridCoordinates
- ) => (e: FocusEvent) => void
+ ) => (e: FocusEvent) => void;
getWrapperMouseOverHandler: (
coordinates: DataGridCoordinates
- ) => ((e: MouseEvent) => void) | undefined
- getCellMetadata: (coords: DataGridCoordinates) => CellMetadata
- getCellErrorMetadata: (coords: DataGridCoordinates) => CellErrorMetadata
- navigateToField: (field: string) => void
- dataTestId?: string
-}
+ ) => ((e: MouseEvent) => void) | undefined;
+ getCellMetadata: (coords: DataGridCoordinates) => CellMetadata;
+ getCellErrorMetadata: (coords: DataGridCoordinates) => CellErrorMetadata;
+ navigateToField: (field: string) => void;
+ dataTestId?: string;
+};
-export const DataGridContext = createContext | null>(
- null
-)
+export const DataGridContext = createContext | null>(null);
diff --git a/src/components/data-grid/context/index.ts b/src/components/data-grid/context/index.ts
index dda988e4..2d09d9f2 100644
--- a/src/components/data-grid/context/index.ts
+++ b/src/components/data-grid/context/index.ts
@@ -1,2 +1,2 @@
-export * from "./data-grid-context"
-export * from "./use-data-grid-context"
+export * from './data-grid-context';
+export * from './use-data-grid-context';
diff --git a/src/components/data-grid/context/use-data-grid-context.tsx b/src/components/data-grid/context/use-data-grid-context.tsx
index 3a0f8bfa..061fc383 100644
--- a/src/components/data-grid/context/use-data-grid-context.tsx
+++ b/src/components/data-grid/context/use-data-grid-context.tsx
@@ -1,14 +1,13 @@
-import { useContext } from "react"
-import { DataGridContext } from "./data-grid-context"
+import { useContext } from 'react';
+
+import { DataGridContext } from './data-grid-context';
export const useDataGridContext = () => {
- const context = useContext(DataGridContext)
+ const context = useContext(DataGridContext);
if (!context) {
- throw new Error(
- "useDataGridContext must be used within a DataGridContextProvider"
- )
+ throw new Error('useDataGridContext must be used within a DataGridContextProvider');
}
- return context
-}
+ return context;
+};
diff --git a/src/components/data-grid/data-grid.tsx b/src/components/data-grid/data-grid.tsx
index 74a08383..aee6d165 100644
--- a/src/components/data-grid/data-grid.tsx
+++ b/src/components/data-grid/data-grid.tsx
@@ -1,5 +1,3 @@
-import { FieldValues } from "react-hook-form"
-
import {
DataGridBooleanCell,
DataGridCurrencyCell,
@@ -8,34 +6,32 @@ import {
DataGridRoot,
DataGridSkeleton,
DataGridTextCell,
- type DataGridRootProps,
-} from "./components"
+ type DataGridRootProps
+} from '@components/data-grid/components';
+import type { FieldValues } from 'react-hook-form';
interface DataGridProps
extends DataGridRootProps {
- isLoading?: boolean
+ isLoading?: boolean;
}
const _DataGrid = ({
isLoading,
...props
-}: DataGridProps) => {
- return isLoading ? (
+}: DataGridProps) =>
+ isLoading ? (
0 ? props.data.length : 10
- }
+ rows={props.data?.length && props.data.length > 0 ? props.data.length : 10}
/>
) : (
= {
/**
* The id of the column.
*/
- id: string
+ id: string;
/**
* The name of the column, shown in the column visibility menu.
*/
- name?: string
+ name?: string;
/**
* The header template for the column.
*/
- header: ColumnDefTemplate> | undefined
+ header: ColumnDefTemplate> | undefined;
/**
* The cell template for the column.
*/
- cell: ColumnDefTemplate> | undefined
+ cell: ColumnDefTemplate> | undefined;
/**
* Callback to set the field path for each cell in the column.
* If a callback is not provided, or returns null, the cell will not be editable.
*/
- field?: FieldFunction
+ field?: FieldFunction;
/**
* Whether the column cannot be hidden by the user.
*
* @default false
*/
- disableHiding?: boolean
+ disableHiding?: boolean;
} & (
| {
- field: FieldFunction
- type: DataGridColumnType
+ field: FieldFunction;
+ type: DataGridColumnType;
}
| { field?: null | undefined; type?: never }
-)
+);
-export function createDataGridHelper<
- TData,
- TFieldValues extends FieldValues
->() {
- const columnHelper = createColumnHelper()
+export function createDataGridHelper() {
+ const columnHelper = createColumnHelper();
return {
column: ({
@@ -58,7 +54,7 @@ export function createDataGridHelper<
cell,
disableHiding = false,
field,
- type,
+ type
}: DataGridHelperColumnsProps) =>
columnHelper.display({
id,
@@ -68,8 +64,8 @@ export function createDataGridHelper<
meta: {
name,
field,
- type,
- },
- }),
- }
+ type
+ }
+ })
+ };
}
diff --git a/src/components/data-grid/helpers/create-data-grid-price-columns.tsx b/src/components/data-grid/helpers/create-data-grid-price-columns.tsx
index 0c1fff4e..57b15a74 100644
--- a/src/components/data-grid/helpers/create-data-grid-price-columns.tsx
+++ b/src/components/data-grid/helpers/create-data-grid-price-columns.tsx
@@ -1,126 +1,124 @@
-import { HttpTypes } from "@medusajs/types"
-import { ColumnDef } from "@tanstack/react-table"
-import { TFunction } from "i18next"
-import { FieldPath, FieldValues } from "react-hook-form"
-import { IncludesTaxTooltip } from "../../common/tax-badge/tax-badge"
-import { DataGridCurrencyCell } from "../components/data-grid-currency-cell"
-import { DataGridReadonlyCell } from "../components/data-grid-readonly-cell"
-import { FieldContext } from "../types"
-import { createDataGridHelper } from "./create-data-grid-column-helper"
+import { IncludesTaxTooltip } from '@components/common/tax-badge';
+import { createDataGridHelper } from '@components/data-grid';
+import { DataGridCurrencyCell, DataGridReadonlyCell } from '@components/data-grid/components';
+import type { FieldContext } from '@components/data-grid/types';
+import type { HttpTypes } from '@medusajs/types';
+import type { ColumnDef } from '@tanstack/react-table';
+import type { TFunction } from 'i18next';
+import type { FieldPath, FieldValues } from 'react-hook-form';
-type CreateDataGridPriceColumnsProps<
- TData,
- TFieldValues extends FieldValues
-> = {
- currencies?: string[]
- regions?: HttpTypes.AdminRegion[]
- pricePreferences?: HttpTypes.AdminPricePreference[]
- isReadyOnly?: (context: FieldContext) => boolean
- getFieldName: (
- context: FieldContext,
- value: string
- ) => FieldPath | null
- t: TFunction
-}
+type CreateDataGridPriceColumnsProps = {
+ currencies?: string[];
+ regions?: HttpTypes.AdminRegion[];
+ pricePreferences?: HttpTypes.AdminPricePreference[];
+ isReadyOnly?: (context: FieldContext) => boolean;
+ getFieldName: (context: FieldContext, value: string) => FieldPath | null;
+ t: TFunction;
+};
-export const createDataGridPriceColumns = <
- TData,
- TFieldValues extends FieldValues
->({
+export const createDataGridPriceColumns = ({
currencies,
regions,
pricePreferences,
isReadyOnly,
getFieldName,
- t,
-}: CreateDataGridPriceColumnsProps): ColumnDef<
- TData,
- unknown
->[] => {
- const columnHelper = createDataGridHelper()
+ t
+}: CreateDataGridPriceColumnsProps): ColumnDef[] => {
+ const columnHelper = createDataGridHelper();
return [
- ...(currencies?.map((currency) => {
+ ...(currencies?.map(currency => {
const preference = pricePreferences?.find(
- (p) => p.attribute === "currency_code" && p.value === currency
- )
+ p => p.attribute === 'currency_code' && p.value === currency
+ );
- const translatedCurrencyName = t("fields.priceTemplate", {
- regionOrCurrency: currency.toUpperCase(),
- })
+ const translatedCurrencyName = t('fields.priceTemplate', {
+ regionOrCurrency: currency.toUpperCase()
+ });
return columnHelper.column({
id: `currency_prices.${currency}`,
- name: t("fields.priceTemplate", {
- regionOrCurrency: currency.toUpperCase(),
+ name: t('fields.priceTemplate', {
+ regionOrCurrency: currency.toUpperCase()
}),
- field: (context) => {
- const isReadyOnlyValue = isReadyOnly?.(context)
+ field: context => {
+ const isReadyOnlyValue = isReadyOnly?.(context);
if (isReadyOnlyValue) {
- return null
+ return null;
}
- return getFieldName(context, currency)
+ return getFieldName(context, currency);
},
- type: "number",
+ type: 'number',
header: () => (
= {
- context: CellContext
-}
+ context: CellContext;
+};
export const useDataGridCellError = ({
- context,
+ context
}: UseDataGridCellErrorOptions) => {
- const { errors, getCellErrorMetadata, navigateToField } = useDataGridContext()
+ const { errors, getCellErrorMetadata, navigateToField } = useDataGridContext();
- const { rowIndex, columnIndex } = context as DataGridCellContext<
- TextData,
- TValue
- >
+ const { rowIndex, columnIndex } = context as DataGridCellContext;
const { accessor, field } = useMemo(() => {
- return getCellErrorMetadata({ row: rowIndex, col: columnIndex })
- }, [rowIndex, columnIndex, getCellErrorMetadata])
+ return getCellErrorMetadata({ row: rowIndex, col: columnIndex });
+ }, [rowIndex, columnIndex, getCellErrorMetadata]);
const rowErrorsObject: FieldErrors | undefined =
- accessor && columnIndex === 0 ? get(errors, accessor) : undefined
+ accessor && columnIndex === 0 ? get(errors, accessor) : undefined;
- const rowErrors: DataGridRowError[] = []
+ const rowErrors: DataGridRowError[] = [];
- function collectErrors(
- errorObject: FieldErrors | FieldError | undefined,
- baseAccessor: string
- ) {
+ function collectErrors(errorObject: FieldErrors | FieldError | undefined, baseAccessor: string) {
if (!errorObject) {
- return
+ return;
}
if (isFieldError(errorObject)) {
// Handle a single FieldError directly
- const message = errorObject.message
+ const message = errorObject.message;
- const to = () => navigateToField(baseAccessor)
+ const to = () => navigateToField(baseAccessor);
if (message) {
- rowErrors.push({ message, to })
+ rowErrors.push({ message, to });
}
} else {
// Traverse nested objects
- Object.keys(errorObject).forEach((key) => {
- const nestedError = errorObject[key]
- const fieldAccessor = `${baseAccessor}.${key}`
+ Object.keys(errorObject).forEach(key => {
+ const nestedError = errorObject[key];
+ const fieldAccessor = `${baseAccessor}.${key}`;
- if (nestedError && typeof nestedError === "object") {
- collectErrors(nestedError, fieldAccessor)
+ if (nestedError && typeof nestedError === 'object') {
+ collectErrors(nestedError, fieldAccessor);
}
- })
+ });
}
}
if (rowErrorsObject && accessor) {
- collectErrors(rowErrorsObject, accessor)
+ collectErrors(rowErrorsObject, accessor);
}
- const cellError: FieldError | undefined = field
- ? get(errors, field)
- : undefined
+ const cellError: FieldError | undefined = field ? get(errors, field) : undefined;
return {
errors,
rowErrors,
- cellError,
- }
-}
+ cellError
+ };
+};
function isFieldError(errors: FieldErrors | FieldError): errors is FieldError {
- return typeof errors === "object" && "message" in errors && "type" in errors
+ return typeof errors === 'object' && 'message' in errors && 'type' in errors;
}
diff --git a/src/components/data-grid/hooks/use-data-grid-cell-handlers.tsx b/src/components/data-grid/hooks/use-data-grid-cell-handlers.tsx
index 1aee1dc2..f0c416af 100644
--- a/src/components/data-grid/hooks/use-data-grid-cell-handlers.tsx
+++ b/src/components/data-grid/hooks/use-data-grid-cell-handlers.tsx
@@ -1,29 +1,27 @@
-import { FocusEvent, MouseEvent, useCallback } from "react"
-import { FieldValues, UseFormSetValue } from "react-hook-form"
-import { DataGridMatrix, DataGridUpdateCommand } from "../models"
-import { DataGridCoordinates } from "../types"
+import { useCallback, type FocusEvent, type MouseEvent } from 'react';
+
+import { DataGridUpdateCommand, type DataGridMatrix } from '@components/data-grid/models';
+import type { DataGridCoordinates } from '@components/data-grid/types';
+import type { FieldValues, UseFormSetValue } from 'react-hook-form';
type UseDataGridCellHandlersOptions = {
- matrix: DataGridMatrix
- anchor: DataGridCoordinates | null
- rangeEnd: DataGridCoordinates | null
- setRangeEnd: (coords: DataGridCoordinates | null) => void
- isSelecting: boolean
- setIsSelecting: (isSelecting: boolean) => void
- isDragging: boolean
- setIsDragging: (isDragging: boolean) => void
- setSingleRange: (coords: DataGridCoordinates) => void
- dragEnd: DataGridCoordinates | null
- setDragEnd: (coords: DataGridCoordinates | null) => void
- setValue: UseFormSetValue
- execute: (command: DataGridUpdateCommand) => void
- multiColumnSelection?: boolean
-}
-
-export const useDataGridCellHandlers = <
- TData,
- TFieldValues extends FieldValues
->({
+ matrix: DataGridMatrix;
+ anchor: DataGridCoordinates | null;
+ rangeEnd: DataGridCoordinates | null;
+ setRangeEnd: (coords: DataGridCoordinates | null) => void;
+ isSelecting: boolean;
+ setIsSelecting: (isSelecting: boolean) => void;
+ isDragging: boolean;
+ setIsDragging: (isDragging: boolean) => void;
+ setSingleRange: (coords: DataGridCoordinates) => void;
+ dragEnd: DataGridCoordinates | null;
+ setDragEnd: (coords: DataGridCoordinates | null) => void;
+ setValue: UseFormSetValue;
+ execute: (command: DataGridUpdateCommand) => void;
+ multiColumnSelection?: boolean;
+};
+
+export const useDataGridCellHandlers =
-
+ ({
- context,
+import { DataGridCellContainer } from './data-grid-cell-container';
+
+export const DataGridTextCell = ({
+ context
}: DataGridCellProps) => {
const { field, control, renderProps } = useDataGridCell({
- context,
- })
- const errorProps = useDataGridCellError({ context })
+ context
+ });
+ const errorProps = useDataGridCellError({ context });
- const { container, input } = renderProps
+ const { container, input } = renderProps;
return (
{
- return (
-
-
- )
- }}
+ render={({ field }) => (
+
+
+ )}
/>
- )
-}
+ );
+};
const Inner = ({
field,
- inputProps,
+ inputProps
}: {
- field: ControllerRenderProps
- inputProps: InputProps
+ //@todo fix type
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ field: ControllerRenderProps;
+ inputProps: InputProps;
}) => {
- const { onChange: _, onBlur, ref, value, ...rest } = field
- const { ref: inputRef, onBlur: onInputBlur, onChange, ...input } = inputProps
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const { onChange: _, onBlur, ref, value, ...rest } = field;
+ const { ref: inputRef, onBlur: onInputBlur, onChange, ...input } = inputProps;
- const [localValue, setLocalValue] = useState(value)
+ const [localValue, setLocalValue] = useState(value);
useEffect(() => {
- setLocalValue(value)
- }, [value])
+ setLocalValue(value);
+ }, [value]);
- const combinedRefs = useCombinedRefs(inputRef, ref)
+ const combinedRefs = useCombinedRefs(inputRef, ref);
return (
setLocalValue(e.target.value)}
+ onChange={e => setLocalValue(e.target.value)}
ref={combinedRefs}
onBlur={() => {
- onBlur()
- onInputBlur()
+ onBlur();
+ onInputBlur();
// We propagate the change to the field only when the input is blurred
- onChange(localValue, value)
+ onChange(localValue, value);
}}
{...input}
{...rest}
/>
- )
-}
+ );
+};
diff --git a/src/components/data-grid/components/data-grid-toggleable-number-cell.tsx b/src/components/data-grid/components/data-grid-toggleable-number-cell.tsx
index aac12fa3..c9930abf 100644
--- a/src/components/data-grid/components/data-grid-toggleable-number-cell.tsx
+++ b/src/components/data-grid/components/data-grid-toggleable-number-cell.tsx
@@ -1,103 +1,112 @@
-import { Switch } from "@medusajs/ui"
-import { useEffect, useRef, useState } from "react"
-import CurrencyInput, { CurrencyInputProps } from "react-currency-input-field"
-import { Controller, ControllerRenderProps } from "react-hook-form"
-import { useCombinedRefs } from "../../../hooks/use-combined-refs"
-import { ConditionalTooltip } from "../../common/conditional-tooltip"
-import { useDataGridCell, useDataGridCellError } from "../hooks"
-import { DataGridCellProps, InputProps } from "../types"
-import { DataGridCellContainer } from "./data-grid-cell-container"
+import { useEffect, useRef, useState } from 'react';
+import { ConditionalTooltip } from '@components/common/conditional-tooltip';
+import { useDataGridCell, useDataGridCellError } from '@components/data-grid/hooks';
+import type { DataGridCellProps, InputProps } from '@components/data-grid/types';
+import { useCombinedRefs } from '@hooks/use-combined-refs.tsx';
+import { Switch } from '@medusajs/ui';
+import CurrencyInput, { type CurrencyInputProps } from 'react-currency-input-field';
+import { Controller, type ControllerRenderProps } from 'react-hook-form';
+
+import { DataGridCellContainer } from './data-grid-cell-container';
+
+//@todo fix type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const DataGridTogglableNumberCell = ({
context,
disabledToggleTooltip,
...rest
}: DataGridCellProps & {
- min?: number
- max?: number
- placeholder?: string
- disabledToggleTooltip?: string
+ min?: number;
+ max?: number;
+ placeholder?: string;
+ disabledToggleTooltip?: string;
}) => {
const { field, control, renderProps } = useDataGridCell({
- context,
- })
- const errorProps = useDataGridCellError({ context })
+ context
+ });
+ const errorProps = useDataGridCellError({ context });
- const { container, input } = renderProps
+ const { container, input } = renderProps;
return (
{
- return (
-
- inputProps: InputProps
- isAnchor: boolean
- tooltip?: string
+ //@todo fix type
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ field: ControllerRenderProps;
+ inputProps: InputProps;
+ isAnchor: boolean;
+ tooltip?: string;
}) => {
- const buttonRef = useRef(null)
- const { value } = field
- const { onChange } = inputProps
+ const buttonRef = useRef(null);
+ const { value } = field;
+ const { onChange } = inputProps;
- const [localValue, setLocalValue] = useState(value)
+ const [localValue, setLocalValue] = useState(value);
useEffect(() => {
- setLocalValue(value)
- }, [value])
+ setLocalValue(value);
+ }, [value]);
const handleCheckedChange = (update: boolean) => {
- const newValue = { ...localValue, checked: update }
+ const newValue = { ...localValue, checked: update };
if (!update && !newValue.disabledToggle) {
- newValue.quantity = ""
+ newValue.quantity = '';
}
- if (update && newValue.quantity === "") {
- newValue.quantity = 0
+ if (update && newValue.quantity === '') {
+ newValue.quantity = 0;
}
- setLocalValue(newValue)
- onChange(newValue, value)
- }
+ setLocalValue(newValue);
+ onChange(newValue, value);
+ };
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
- if (isAnchor && e.key.toLowerCase() === "x") {
- e.preventDefault()
- buttonRef.current?.click()
+ if (isAnchor && e.key.toLowerCase() === 'x') {
+ e.preventDefault();
+ buttonRef.current?.click();
}
- }
+ };
+
+ document.addEventListener('keydown', handleKeyDown);
- document.addEventListener("keydown", handleKeyDown)
- return () => document.removeEventListener("keydown", handleKeyDown)
- }, [isAnchor])
+ return () => document.removeEventListener('keydown', handleKeyDown);
+ }, [isAnchor]);
return (
- )
-}
+ );
+};
const Inner = ({
field,
@@ -125,36 +134,29 @@ const Inner = ({
placeholder,
...props
}: {
- field: ControllerRenderProps
+
- )
-}
+ );
+};
diff --git a/src/components/data-grid/components/data-grid-text-cell.tsx b/src/components/data-grid/components/data-grid-text-cell.tsx
index 3b1fb279..d535f6e5 100644
--- a/src/components/data-grid/components/data-grid-text-cell.tsx
+++ b/src/components/data-grid/components/data-grid-text-cell.tsx
@@ -1,75 +1,83 @@
-import { clx } from "@medusajs/ui"
-import { useEffect, useState } from "react"
-import { Controller, ControllerRenderProps } from "react-hook-form"
+import { useEffect, useState } from 'react';
-import { useCombinedRefs } from "../../../hooks/use-combined-refs"
-import { useDataGridCell, useDataGridCellError } from "../hooks"
-import { DataGridCellProps, InputProps } from "../types"
-import { DataGridCellContainer } from "./data-grid-cell-container"
+import { useDataGridCell, useDataGridCellError } from '@components/data-grid/hooks';
+import type { DataGridCellProps, InputProps } from '@components/data-grid/types';
+import { useCombinedRefs } from '@hooks/use-combined-refs.tsx';
+import { clx } from '@medusajs/ui';
+import { Controller, type ControllerRenderProps } from 'react-hook-form';
-export const DataGridTextCell =
+
-
+
- {columns.map((_col, i) => {
- return (
-
-
- )
- })}
+ {columns.map((_col, i) => (
+
+
+ ))}
{rows.map((_, j) => (
@@ -44,20 +42,18 @@ export const DataGridSkeleton = ({
style={{ gridTemplateColumns: `repeat(${colCount}, 1fr)` }}
key={j}
>
- {columns.map((_col, k) => {
- return (
-
))}
-
- )
- })}
+ {columns.map((_col, k) => (
+
+
+ ))}
@@ -191,9 +195,9 @@ const Inner = ({
onValueChange={handleInputChange}
formatValueOnBlur
onBlur={() => {
- onBlur()
- onInputBlur()
- handleOnChange()
+ onBlur();
+ onInputBlur();
+ handleOnChange();
}}
onFocus={onFocus}
decimalsLimit={0}
@@ -202,5 +206,5 @@ const Inner = ({
placeholder={!localValue.checked ? placeholder : undefined}
/>
- )
-}
+ );
+};
diff --git a/src/components/data-grid/components/index.ts b/src/components/data-grid/components/index.ts
index 3968df05..b520901e 100644
--- a/src/components/data-grid/components/index.ts
+++ b/src/components/data-grid/components/index.ts
@@ -1,7 +1,8 @@
-export { DataGridBooleanCell } from "./data-grid-boolean-cell"
-export { DataGridCurrencyCell } from "./data-grid-currency-cell"
-export { DataGridNumberCell } from "./data-grid-number-cell"
-export { DataGridReadonlyCell as DataGridReadOnlyCell } from "./data-grid-readonly-cell"
-export { DataGridRoot, type DataGridRootProps } from "./data-grid-root"
-export { DataGridSkeleton } from "./data-grid-skeleton"
-export { DataGridTextCell } from "./data-grid-text-cell"
+export { DataGridBooleanCell } from './data-grid-boolean-cell';
+export { DataGridCurrencyCell } from './data-grid-currency-cell';
+export { DataGridNumberCell } from './data-grid-number-cell';
+export { DataGridReadonlyCell as DataGridReadOnlyCell } from './data-grid-readonly-cell';
+export { DataGridRoot, type DataGridRootProps } from './data-grid-root';
+export { DataGridSkeleton } from './data-grid-skeleton';
+export { DataGridTextCell } from './data-grid-text-cell';
+export { DataGridReadonlyCell } from './data-grid-readonly-cell';
diff --git a/src/components/data-grid/context/data-grid-context.tsx b/src/components/data-grid/context/data-grid-context.tsx
index bdfc4192..da2b0575 100644
--- a/src/components/data-grid/context/data-grid-context.tsx
+++ b/src/components/data-grid/context/data-grid-context.tsx
@@ -1,46 +1,41 @@
-import { FocusEvent, MouseEvent, createContext } from "react"
-import {
- Control,
- FieldErrors,
- FieldValues,
- Path,
- UseFormRegister,
-} from "react-hook-form"
-import { CellErrorMetadata, CellMetadata, DataGridCoordinates } from "../types"
+import { createContext, type FocusEvent, type MouseEvent } from 'react';
+
+import type {
+ CellErrorMetadata,
+ CellMetadata,
+ DataGridCoordinates
+} from '@components/data-grid/types.ts';
+import type { Control, FieldErrors, FieldValues, Path, UseFormRegister } from 'react-hook-form';
type DataGridContextType
-
+
{translatedCurrencyName}
),
- cell: (context) => {
+ cell: context => {
if (isReadyOnly?.(context)) {
- return
-
+
{translatedRegionName}
),
- cell: (context) => {
+ cell: context => {
if (isReadyOnly?.(context)) {
- return