asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(dashboard): Hitting escape restores previous value (#8654)

Browse Source 
* feat(dashboard): Hitting escape restores previous value

* update lock
This commit is contained in:
Kasper Fabricius Kristensen
2024-08-19 14:02:30 +02:00
committed by GitHub
parent a77c23c915
commit 894db4a150
39 changed files with 203 additions and 973 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/admin-next/dashboard/src/components/data-grid/data-grid-cells/data-grid-readonly-cell.tsx
View File

@@ -1,10 +1,10 @@
import { PropsWithChildren } from "react"
type DataGridReadOnlyCellProps = PropsWithChildren
type DataGridReadonlyCellProps = PropsWithChildren
export const DataGridReadOnlyCell = ({
export const DataGridReadonlyCell = ({
children,
}: DataGridReadOnlyCellProps) => {
}: DataGridReadonlyCellProps) => {
return (
<div className="bg-ui-bg-subtle txt-compact-small text-ui-fg-subtle flex size-full cursor-not-allowed items-center overflow-hidden px-4 py-2.5 outline-none">
<span className="truncate">{children}</span>

6
packages/admin-next/dashboard/src/components/data-grid/data-grid-cells/index.ts Normal file
View File

@@ -0,0 +1,6 @@
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 { DataGridTextCell } from "./data-grid-text-cell"

12
packages/admin-next/dashboard/src/components/data-grid/data-grid-columns/price-columns.tsx → packages/admin-next/dashboard/src/components/data-grid/data-grid-column-helpers/create-data-grid-price-columns.tsx
View File

@@ -1,12 +1,12 @@
import { HttpTypes } from "@medusajs/types"
import { CellContext, ColumnDef } from "@tanstack/react-table"
import { TFunction } from "i18next"
import { IncludesTaxTooltip } from "../../../components/common/tax-badge/tax-badge"
import { IncludesTaxTooltip } from "../../common/tax-badge/tax-badge"
import { DataGridCurrencyCell } from "../data-grid-cells/data-grid-currency-cell"
import { DataGridReadOnlyCell } from "../data-grid-cells/data-grid-readonly-cell"
import { DataGridReadonlyCell } from "../data-grid-cells/data-grid-readonly-cell"
import { createDataGridHelper } from "../utils"
export const getPriceColumns = <TData,>({
export const createDataGridPriceColumns = <TData,>({
currencies,
regions,
pricePreferences,
@@ -44,7 +44,7 @@ export const getPriceColumns = <TData,>({
),
cell: (context) => {
if (isReadyOnly?.(context)) {
return <DataGridReadOnlyCell />
return <DataGridReadonlyCell />
}
return (
@@ -55,7 +55,6 @@ export const getPriceColumns = <TData,>({
/>
)
},
type: "string",
})
}) ?? []),
...(regions?.map((region) => {
@@ -78,7 +77,7 @@ export const getPriceColumns = <TData,>({
),
cell: (context) => {
if (isReadyOnly?.(context)) {
return <DataGridReadOnlyCell />
return <DataGridReadonlyCell />
}
const currency = currencies?.find((c) => c === region.currency_code)
@@ -94,7 +93,6 @@ export const getPriceColumns = <TData,>({
/>
)
},
type: "string",
})
}) ?? []),
]

1
packages/admin-next/dashboard/src/components/data-grid/data-grid-column-helpers/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from "./create-data-grid-price-columns"

79
packages/admin-next/dashboard/src/components/data-grid/data-grid-root/data-grid-root.tsx → packages/admin-next/dashboard/src/components/data-grid/data-grid-root.tsx
View File

@@ -29,19 +29,19 @@ import {
} from "react"
import { FieldValues, Path, PathValue, UseFormReturn } from "react-hook-form"
import { useTranslation } from "react-i18next"
import { useCommandHistory } from "../../../hooks/use-command-history"
import { DataGridContext } from "../context"
import { useGridQueryTool } from "../hooks"
import { BulkUpdateCommand, Matrix, UpdateCommand } from "../models"
import { CellCoords, CellType } from "../types"
import { useCommandHistory } from "../../hooks/use-command-history"
import { DataGridContext } from "./context"
import { useGridQueryTool } from "./hooks"
import { BulkUpdateCommand, Matrix, UpdateCommand } from "./models"
import { CellCoords, CellSnapshot, CellType } from "./types"
import {
convertArrayToPrimitive,
generateCellId,
getColumnName,
isCellMatch,
} from "../utils"
} from "./utils"
interface DataGridRootProps<
export interface DataGridRootProps<
TData,
TFieldValues extends FieldValues = FieldValues
> {
@@ -91,17 +91,8 @@ export const DataGridRoot = <
const [isDragging, setIsDragging] = useState(false)
const [isEditing, setIsEditing] = useState(false)
const onEditingChangeHandler = useCallback(
(value: boolean) => {
if (onEditingChange) {
onEditingChange(value)
}
setIsEditing(value)
},
[onEditingChange]
)
const [cellValueSnapshot, setCellValueSnapshot] =
useState<CellSnapshot<TFieldValues> | null>(null)
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
@@ -233,6 +224,53 @@ export const DataGridRoot = <
const queryTool = useGridQueryTool(containerRef)
const createCellSnapshot =
useCallback((): CellSnapshot<TFieldValues> | null => {
if (!anchor) {
return null
}
const field = matrix.getCellField(anchor)
if (!field) {
return null
}
const value = getValues(field as Path<TFieldValues>)
return {
field,
value,
}
}, [getValues, matrix, anchor])
const restoreSnapshot = useCallback(() => {
if (!cellValueSnapshot) {
return
}
const { field, value } = cellValueSnapshot
requestAnimationFrame(() => {
setValue(field as Path<TFieldValues>, value)
})
}, [setValue, cellValueSnapshot])
const onEditingChangeHandler = useCallback(
(value: boolean) => {
if (onEditingChange) {
onEditingChange(value)
}
if (value) {
setCellValueSnapshot(createCellSnapshot())
}
setIsEditing(value)
},
[createCellSnapshot, onEditingChange]
)
const registerCell = useCallback(
(coords: CellCoords, field: string, type: CellType) => {
matrix.registerField(coords.row, coords.col, field, type)
@@ -694,11 +732,14 @@ export const DataGridRoot = <
e.preventDefault()
e.stopPropagation()
// try to restore the previous value
restoreSnapshot()
// Restore focus to the container element
const container = queryTool?.getContainer(anchor)
container?.focus()
},
[queryTool, isEditing, anchor]
[queryTool, isEditing, anchor, restoreSnapshot]
)
const handleTabKey = useCallback(

1
packages/admin-next/dashboard/src/components/data-grid/data-grid-root/index.ts
View File

@@ -1 +0,0 @@
export * from "./data-grid-root"

14
packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-skeleton/data-grid-skeleton.tsx → packages/admin-next/dashboard/src/components/data-grid/data-grid-skeleton.tsx
View File

@@ -1,16 +1,16 @@
import { Table } from "@medusajs/ui"
import { ColumnDef } from "@tanstack/react-table"
import { Skeleton } from "../../../common/skeleton"
import { Skeleton } from "../common/skeleton"
type DataTableSkeletonProps = {
columns: ColumnDef<any, any>[]
rowCount: number
type DataGridSkeletonProps<TData> = {
columns: ColumnDef<TData>[]
rows?: number
}
export const DataGridSkeleton = ({
export const DataGridSkeleton = <TData,>({
columns,
rowCount,
}: DataTableSkeletonProps) => {
rows: rowCount = 10,
}: DataGridSkeletonProps<TData>) => {
const rows = Array.from({ length: rowCount }, (_, i) => i)
const colCount = columns.length

35
packages/admin-next/dashboard/src/components/data-grid/data-grid.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { FieldValues } from "react-hook-form"
import {
DataGridBooleanCell,
DataGridCurrencyCell,
DataGridNumberCell,
DataGridReadOnlyCell,
DataGridTextCell,
} from "./data-grid-cells"
import { DataGridRoot, DataGridRootProps } from "./data-grid-root"
import { DataGridSkeleton } from "./data-grid-skeleton"
interface DataGridProps<TData, TFieldValues extends FieldValues = FieldValues>
extends DataGridRootProps<TData, TFieldValues> {
isLoading?: boolean
}
const _DataGrid = <TData, TFieldValues extends FieldValues = FieldValues>({
isLoading,
...props
}: DataGridProps<TData, TFieldValues>) => {
return isLoading ? (
<DataGridSkeleton columns={props.columns} />
) : (
<DataGridRoot {...props} />
)
}
export const DataGrid = Object.assign(_DataGrid, {
BooleanCell: DataGridBooleanCell,
TextCell: DataGridTextCell,
NumberCell: DataGridNumberCell,
CurrencyCell: DataGridCurrencyCell,
ReadonlyCell: DataGridReadOnlyCell,
})

3
packages/admin-next/dashboard/src/components/data-grid/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export * from "./data-grid"
export * from "./data-grid-column-helpers"
export { createDataGridHelper } from "./utils"

6
packages/admin-next/dashboard/src/components/data-grid/types.ts
View File

@@ -1,5 +1,6 @@
import { CellContext } from "@tanstack/react-table"
import React, { PropsWithChildren, ReactNode, RefObject } from "react"
import { FieldValues, Path, PathValue } from "react-hook-form"
export type CellType = "text" | "number" | "select" | "boolean"
@@ -70,3 +71,8 @@ export interface DataGridCellContainerProps extends PropsWithChildren<{}> {
}
export type DataGridColumnType = "string" | "number" | "boolean"
export type CellSnapshot<TFieldValues extends FieldValues = FieldValues> = {
field: string
value: PathValue<TFieldValues, Path<TFieldValues>>
}

11
packages/admin-next/dashboard/src/components/grid/constants.ts
View File

@@ -1,11 +0,0 @@
export enum GridCellType {
VOID = "void",
READONLY = "readonly",
EDITABLE = "editable",
OVERLAY = "overlay",
}
export const NON_INTERACTIVE_CELL_TYPES = [
GridCellType.VOID,
GridCellType.READONLY,
]

653
packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-root/data-grid-root.tsx
View File

@@ -1,653 +0,0 @@
import { clx } from "@medusajs/ui"
import {
ColumnDef,
Row,
flexRender,
getCoreRowModel,
useReactTable,
} from "@tanstack/react-table"
import { useVirtualizer } from "@tanstack/react-virtual"
import {
MouseEvent as ReactMouseEvent,
useCallback,
useEffect,
useRef,
useState,
} from "react"
import { FieldValues, Path, UseFormReturn } from "react-hook-form"
import {
Command,
useCommandHistory,
} from "../../../../hooks/use-command-history"
import { GridCellType, NON_INTERACTIVE_CELL_TYPES } from "../../constants"
type FieldCoordinates = {
column: number
row: number
}
export interface DataGridRootProps<
TData,
TFieldValues extends FieldValues = FieldValues
> {
data?: TData[]
columns: ColumnDef<TData>[]
state: UseFormReturn<TFieldValues>
getSubRows?: (row: TData) => TData[]
}
const ROW_HEIGHT = 40
/**
* TODO: THIS IS OLD DATAGRID COMPONENT - REMOVE THIS AFTER ALL TABLE HAVE BEEN MIGRATED TO THE NEW DATAGRIDROOT FROM ../../data-grid
*/
export const DataGridRoot = <
TData,
TFieldValues extends FieldValues = FieldValues
>({
data = [],
columns,
state,
getSubRows,
}: DataGridRootProps<TData, TFieldValues>) => {
const tableContainerRef = useRef<HTMLDivElement>(null)
const { execute, undo, redo, canRedo, canUndo } = useCommandHistory()
const { register, control, getValues, setValue } = state
const grid = useReactTable({
data: data,
columns,
getSubRows,
getCoreRowModel: getCoreRowModel(),
meta: {
register: register,
control: control,
},
})
const { flatRows } = grid.getRowModel()
const rowVirtualizer = useVirtualizer({
count: flatRows.length,
estimateSize: () => ROW_HEIGHT,
getScrollElement: () => tableContainerRef.current,
measureElement:
typeof window !== "undefined" &&
navigator.userAgent.indexOf("Firefox") === -1
? (element) => element?.getBoundingClientRect().height
: undefined,
overscan: 5,
})
const [anchor, setAnchor] = useState<FieldCoordinates | null>(null)
const [isSelecting, setIsSelecting] = useState(false)
const [selection, setSelection] = useState<FieldCoordinates[]>([])
const [isDragging, setIsDragging] = useState(false)
const [dragSelection, setDragSelection] = useState<FieldCoordinates[]>([])
const handleFocusInner = (target: HTMLElement) => {
const editableField = target.querySelector("[data-field-id]")
if (editableField instanceof HTMLInputElement) {
requestAnimationFrame(() => {
editableField.focus()
editableField.setSelectionRange(
editableField.value.length,
editableField.value.length
)
})
}
}
const handleBlurAnchor = () => {
const activeElement = document.activeElement
if (anchor && activeElement instanceof HTMLElement) {
activeElement.blur()
}
}
const isNonInteractive = (element: HTMLElement) => {
const type = element.getAttribute("data-cell-type")
if (!type) {
return true
}
return NON_INTERACTIVE_CELL_TYPES.includes(type as GridCellType)
}
const handleMouseDown = (e: ReactMouseEvent<HTMLTableCellElement>) => {
e.stopPropagation()
e.preventDefault()
const target = e.target
/**
* Check if the click was on a presentation element.
* If so, we don't want to set the anchor.
*/
if (target instanceof HTMLElement && isNonInteractive(target)) {
return
}
const rowIndex = parseInt(e.currentTarget.dataset.rowIndex!)
const columnIndex = parseInt(e.currentTarget.dataset.columnIndex!)
const isAnchor = getIsAnchor(rowIndex, columnIndex)
if (e.detail === 2 || isAnchor) {
handleFocusInner(e.currentTarget)
return
} else {
// reset focus so the previous cell doesn't keep the focus
handleBlurAnchor()
}
const coordinates: FieldCoordinates = {
row: rowIndex,
column: columnIndex,
}
setSelection([coordinates])
setAnchor(coordinates)
setIsSelecting(true)
}
const handleDragDown = (e: ReactMouseEvent<HTMLDivElement>) => {
e.stopPropagation()
setIsDragging(true)
}
const getIsAnchor = (rowIndex: number, columnIndex: number) => {
return anchor?.row === rowIndex && anchor?.column === columnIndex
}
const handleMouseOver = (e: ReactMouseEvent<HTMLTableCellElement>) => {
/**
* If we're not dragging and not selecting or there is no anchor,
* then we don't want to do anything.
*/
if ((!isSelecting && !isDragging) || !anchor) {
return
}
const target = e.target
/**
* Check if the click was on a presentation element.
* If so, we don't want to add it to the selection.
*/
if (target instanceof HTMLElement && isNonInteractive(target)) {
return
}
const rowIndex = parseInt(e.currentTarget.dataset.rowIndex!)
const columnIndex = parseInt(e.currentTarget.dataset.columnIndex!)
/**
* If the target column is not the same as the anchor column,
* we don't want to add it to the selection.
*/
if (anchor?.column !== columnIndex) {
return
}
const direction =
rowIndex > anchor.row ? "down" : rowIndex < anchor.row ? "up" : "none"
const last = selection[selection.length - 1] ?? anchor
/**
* Check if the current cell is a direct neighbour of the last cell
* in the selection.
*/
const isNeighbour = Math.abs(rowIndex - last.row) === 1
/**
* If the current cell is a neighbour, we can simply update
* the selection based on the direction.
*/
if (isNeighbour) {
if (isSelecting) {
setSelection((prev) => {
return prev
.filter((cell) => {
if (direction === "down") {
return (
(cell.row <= rowIndex && cell.row >= anchor.row) ||
cell.row === anchor.row
)
}
if (direction === "up") {
return (
(cell.row >= rowIndex && cell.row <= anchor.row) ||
cell.row === anchor.row
)
}
return cell.row === anchor.row
})
.concat({ row: rowIndex, column: columnIndex })
})
return
}
if (isDragging) {
if (anchor.row === rowIndex) {
return
}
setDragSelection((prev) => {
return prev
.filter((cell) => {
if (direction === "down") {
return (
(cell.row <= rowIndex && cell.row >= anchor.row) ||
cell.row === anchor.row
)
}
if (direction === "up") {
return (
(cell.row >= rowIndex && cell.row <= anchor.row) ||
cell.row === anchor.row
)
}
return cell.row === anchor.row
})
.concat({ row: rowIndex, column: columnIndex })
})
return
}
}
/**
* If the current cell is not a neighbour, we instead
* need to calculate all the valid cells between the
* anchor and the current cell.
*/
let cells: FieldCoordinates[] = []
function selectCell(i: number, columnIndex: number) {
const possibleCell = tableContainerRef.current?.querySelector(
`[data-row-index="${i}"][data-column-index="${columnIndex}"]`
)
if (!possibleCell) {
return
}
const isPresentation = possibleCell.querySelector(
"[data-role=presentation]"
)
if (isPresentation) {
return
}
cells.push({ row: i, column: columnIndex })
}
if (direction === "down") {
for (let i = anchor.row; i <= rowIndex; i++) {
selectCell(i, columnIndex)
}
}
if (direction === "up") {
for (let i = anchor.row; i >= rowIndex; i--) {
selectCell(i, columnIndex)
}
}
if (isSelecting) {
setSelection(cells)
return
}
if (isDragging) {
cells = cells.filter((cell) => cell.row !== anchor.row)
setDragSelection(cells)
return
}
}
const getIsDragTarget = (rowIndex: number, columnIndex: number) => {
return dragSelection.some(
(cell) => cell.row === rowIndex && cell.column === columnIndex
)
}
const getIsSelected = (rowIndex: number, columnIndex: number) => {
return selection.some(
(cell) => cell.row === rowIndex && cell.column === columnIndex
)
}
const getSelectionIds = useCallback((fields: FieldCoordinates[]) => {
return fields
.map((field) => {
const element = document.querySelector(
`[data-row-index="${field.row}"][data-column-index="${field.column}"]`
) as HTMLTableCellElement
return element
?.querySelector("[data-field-id]")
?.getAttribute("data-field-id")
})
.filter(Boolean) as string[]
}, [])
const getSelectionValues = useCallback(
(ids: string[]): string[] => {
const rawValues = ids.map((id) => {
return getValues(id as Path<TFieldValues>)
})
return rawValues.map((v) => JSON.stringify(v))
},
[getValues]
)
const setSelectionValues = useCallback(
(ids: string[], values: string[]) => {
ids.forEach((id, i) => {
const value = values[i]
if (!value) {
return
}
setValue(id as Path<TFieldValues>, JSON.parse(value), {
shouldDirty: true,
shouldTouch: true,
})
})
},
[setValue]
)
const handleCopy = useCallback(
(e: ClipboardEvent) => {
if (selection.length === 0) {
return
}
const fieldIds = getSelectionIds(selection)
const values = getSelectionValues(fieldIds)
const clipboardData = values.join("\n")
e.clipboardData?.setData("text/plain", clipboardData)
e.preventDefault()
},
[selection, getSelectionIds, getSelectionValues]
)
const handlePaste = useCallback(
(e: ClipboardEvent) => {
const data = e.clipboardData?.getData("text/plain")
if (!data) {
return
}
const fieldIds = getSelectionIds(selection)
const prev = getSelectionValues(fieldIds)
const next = data.split("\n")
const command = new GridCommand({
next,
prev,
selection: fieldIds,
setter: setSelectionValues,
})
execute(command)
},
[
selection,
execute,
getSelectionValues,
setSelectionValues,
getSelectionIds,
]
)
const handleCommandHistory = useCallback(
(e: KeyboardEvent) => {
if (!canRedo && !canUndo) {
return
}
if (e.key.toLowerCase() === "z" && e.metaKey && !e.shiftKey) {
console.log(canUndo)
e.preventDefault()
undo()
}
if (e.key.toLowerCase() === "z" && e.metaKey && e.shiftKey) {
e.preventDefault()
redo()
}
},
[undo, redo, canRedo, canUndo]
)
const handleEndDrag = useCallback(() => {
if (!anchor) {
return
}
const fieldIds = getSelectionIds(dragSelection)
const anchorId = getSelectionIds([anchor])
const anchorValue = getSelectionValues(anchorId)?.[0]
const prev = getSelectionValues(fieldIds)
const next = prev.map(() => anchorValue)
const command = new GridCommand({
next,
prev,
selection: fieldIds,
setter: setSelectionValues,
})
execute(command)
setSelection(dragSelection)
setDragSelection([])
setIsDragging(false)
}, [
anchor,
getSelectionIds,
dragSelection,
getSelectionValues,
setSelectionValues,
execute,
])
const handleMouseUp = useCallback(
(_e: MouseEvent) => {
if (isSelecting) {
setIsSelecting(false)
return
}
if (isDragging) {
handleEndDrag()
return
}
},
[isDragging, isSelecting, handleEndDrag]
)
useEffect(() => {
document.addEventListener("mouseup", handleMouseUp)
document.addEventListener("copy", handleCopy)
document.addEventListener("paste", handlePaste)
document.addEventListener("keydown", handleCommandHistory)
return () => {
document.removeEventListener("mouseup", handleMouseUp)
document.removeEventListener("copy", handleCopy)
document.removeEventListener("paste", handlePaste)
document.removeEventListener("keydown", handleCommandHistory)
}
}, [handleMouseUp, handleCopy, handlePaste, handleCommandHistory])
return (
<div className="bg-ui-bg-subtle size-full overflow-hidden">
<div
ref={tableContainerRef}
style={{
overflow: "auto",
position: "relative",
height: "100%",
userSelect: isSelecting || isDragging ? "none" : "auto",
}}
>
<table className="text-ui-fg-subtle grid">
<thead className="txt-compact-small-plus bg-ui-bg-subtle sticky top-0 z-[1] grid">
{grid.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id} className="flex h-10 w-full">
{headerGroup.headers.map((header) => {
return (
<th
key={header.id}
style={{
width: header.getSize(),
}}
className="bg-ui-bg-base flex items-center border-b border-r px-4 py-2.5"
>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
</th>
)
})}
</tr>
))}
</thead>
<tbody
className="relative grid"
style={{
height: `${rowVirtualizer.getTotalSize()}px`,
}}
>
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
const row = flatRows[virtualRow.index] as Row<TData>
return (
<tr
data-index={virtualRow.index}
ref={(node) => rowVirtualizer.measureElement(node)}
key={row.id}
style={{
transform: `translateY(${virtualRow.start}px)`,
}}
className="bg-ui-bg-subtle txt-compact-small absolute flex h-10 w-full"
>
{row.getVisibleCells().map((cell, index) => {
const isAnchor = getIsAnchor(virtualRow.index, index)
const isSelected = getIsSelected(virtualRow.index, index)
const isDragTarget = getIsDragTarget(
virtualRow.index,
index
)
return (
<td
key={cell.id}
style={{
width: cell.column.getSize(),
}}
onMouseDown={handleMouseDown}
onMouseOver={handleMouseOver}
data-row-index={virtualRow.index}
data-column-index={index}
className={clx(
"bg-ui-bg-base has-[[data-role='presentation']]:bg-ui-bg-subtle relative flex items-center border-b border-r p-0 outline-none",
"after:transition-fg after:border-ui-fg-interactive after:pointer-events-none after:invisible after:absolute after:-bottom-px after:-left-px after:-right-px after:-top-px after:box-border after:border-[2px] after:content-['']",
{
"after:visible": isAnchor,
"bg-ui-bg-highlight focus-within:bg-ui-bg-base":
isSelected || isAnchor,
"bg-ui-bg-base-hover": isDragTarget,
}
)}
tabIndex={-1}
>
<div className="relative h-full w-full">
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
{isAnchor && (
<div
onMouseDown={handleDragDown}
className="bg-ui-fg-interactive absolute bottom-0 right-0 z-[3] size-1.5 cursor-ns-resize"
/>
)}
</div>
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
</div>
</div>
)
}
type GridCommandArgs = {
selection: string[]
setter: (selection: string[], values: string[]) => void
prev: string[]
next: string[]
}
class GridCommand implements Command {
private _selection: string[]
private _prev: string[]
private _next: string[]
private _setter: (selection: string[], values: string[]) => void
constructor({ selection, setter, prev, next }: GridCommandArgs) {
this._selection = selection
this._setter = setter
this._prev = prev
this._next = next
}
execute() {
this._setter(this._selection, this._next)
}
undo() {
this._setter(this._selection, this._prev)
}
redo() {
this.execute()
}
}

1
packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-root/index.ts
View File

@@ -1 +0,0 @@
export * from "./data-grid-root"

1
packages/admin-next/dashboard/src/components/grid/data-grid/data-grid-skeleton/index.ts
View File

@@ -1 +0,0 @@
export * from "./data-grid-skeleton"

19
packages/admin-next/dashboard/src/components/grid/data-grid/data-grid.tsx
View File

@@ -1,19 +0,0 @@
import { FieldValues } from "react-hook-form"
import { DataGridRoot, DataGridRootProps } from "./data-grid-root"
import { DataGridSkeleton } from "./data-grid-skeleton"
interface DataGridProps<TData, TFieldValues extends FieldValues = any>
extends DataGridRootProps<TData, TFieldValues> {
isLoading?: boolean
}
export const DataGrid = <TData, TFieldValues extends FieldValues = any>({
isLoading,
...props
}: DataGridProps<TData, TFieldValues>) => {
return isLoading ? (
<DataGridSkeleton columns={props.columns} rowCount={10} />
) : (
<DataGridRoot {...props} />
)
}

1
packages/admin-next/dashboard/src/components/grid/data-grid/index.ts
View File

@@ -1 +0,0 @@
export * from "./data-grid"

23
packages/admin-next/dashboard/src/components/grid/grid-cells/common/boolean-cell/boolean-cell.tsx
View File

@@ -1,23 +0,0 @@
import { Select } from "@medusajs/ui"
import { Controller, FieldValues } from "react-hook-form"
import { CellProps } from "../../../types"
interface BooleanCellProps<TFieldValues extends FieldValues = any>
extends CellProps<TFieldValues> {}
export const BooleanCell = <TFieldValues extends FieldValues = any>({
field,
meta,
}: BooleanCellProps<TFieldValues>) => {
const { control } = meta
return (
<Controller
control={control}
name={field}
render={({ field: { value, onChange, ref, ...rest } }) => {
return <Select value={value} onValueChange={onChange}></Select>
}}
/>
)
}

1
packages/admin-next/dashboard/src/components/grid/grid-cells/common/boolean-cell/index.ts
View File

@@ -1 +0,0 @@
export * from "./boolean-cell"

57
packages/admin-next/dashboard/src/components/grid/grid-cells/common/currency-cell/currency-cell.tsx
View File

@@ -1,57 +0,0 @@
import { CurrencyDTO } from "@medusajs/types"
import { useRef } from "react"
import Primitive from "react-currency-input-field"
import { Controller, FieldValues } from "react-hook-form"
import { GridCellType } from "../../../constants"
import { CellProps } from "../../../types"
interface CurrencyCellProps<TFieldValues extends FieldValues = any>
extends CellProps<TFieldValues> {
currency: CurrencyDTO
}
export const CurrencyCell = ({ currency, field, meta }: CurrencyCellProps) => {
const symbolRef = useRef<HTMLSpanElement>(null)
// @ts-ignore - Type is wrong
const decimalScale = currency.decimal_digits
const { control } = meta
return (
<Controller
control={control}
name={field}
render={({ field: { onChange, ...rest } }) => {
return (
<div className="relative size-full">
<span
ref={symbolRef}
role="presentation"
className="text-ui-fg-muted txt-compact-small pointer-events-none absolute left-0 top-0 select-none py-2.5 pl-4"
>
{currency.symbol_native}
</span>
<Primitive
data-input-field="true"
data-field-id={field}
data-cell-type={GridCellType.EDITABLE}
className="size-full bg-transparent py-2.5 pr-4 text-right outline-none"
style={{
paddingLeft: symbolRef.current?.offsetWidth
? `${symbolRef.current.offsetWidth + 8}px`
: "16px",
}}
decimalScale={decimalScale}
allowDecimals={decimalScale > 0}
onValueChange={(_value, _name, values) => {
onChange(values?.value)
}}
{...rest}
/>
</div>
)
}}
/>
)
}

1
packages/admin-next/dashboard/src/components/grid/grid-cells/common/currency-cell/index.ts
View File

@@ -1 +0,0 @@
export * from "./currency-cell"

1
packages/admin-next/dashboard/src/components/grid/grid-cells/common/readonly-cell/index.ts
View File

@@ -1 +0,0 @@
export * from "./readonly-cell"

14
packages/admin-next/dashboard/src/components/grid/grid-cells/common/readonly-cell/readonly-cell.tsx
View File

@@ -1,14 +0,0 @@
import { PropsWithChildren } from "react"
import { GridCellType } from "../../../constants"
export const ReadonlyCell = ({ children }: PropsWithChildren) => {
return (
<div
role="cell"
data-cell-type={GridCellType.READONLY}
className="bg-ui-bg-base size-full cursor-not-allowed px-4 py-2.5"
>
{children}
</div>
)
}

1
packages/admin-next/dashboard/src/components/grid/grid-cells/common/text-cell/index.ts
View File

@@ -1 +0,0 @@
export * from "./text-cell"

24
packages/admin-next/dashboard/src/components/grid/grid-cells/common/text-cell/text-cell.tsx
View File

@@ -1,24 +0,0 @@
import { FieldValues } from "react-hook-form"
import { CellProps } from "../../../types"
interface TextCellProps<TFieldValues extends FieldValues = any>
extends CellProps<TFieldValues> {}
export const TextCell = <TFieldValues extends FieldValues = any>({
field,
meta,
}: TextCellProps<TFieldValues>) => {
const { register } = meta
return (
<div className="flex items-center justify-center px-4 py-2.5">
<input
className="txt-compact-small text-ui-fg-subtle w-full bg-transparent outline-none"
data-input-field="true"
data-field-id={field}
data-field-type="text"
{...register(field)}
/>
</div>
)
}

1
packages/admin-next/dashboard/src/components/grid/grid-cells/common/void-cell/index.ts
View File

@@ -1 +0,0 @@
export * from "./void-cell"

14
packages/admin-next/dashboard/src/components/grid/grid-cells/common/void-cell/void-cell.tsx
View File

@@ -1,14 +0,0 @@
import { PropsWithChildren } from "react"
import { GridCellType } from "../../../constants"
export const VoidCell = ({ children }: PropsWithChildren) => {
return (
<div
role="cell"
data-cell-type={GridCellType.VOID}
className="bg-ui-bg-subtle size-full cursor-not-allowed px-4 py-2.5"
>
{children}
</div>
)
}

11
packages/admin-next/dashboard/src/components/grid/types.ts
View File

@@ -1,11 +0,0 @@
import { Control, FieldValues, Path, UseFormRegister } from "react-hook-form"
export type DataGridMeta<TFieldValues extends FieldValues = FieldValues> = {
register: UseFormRegister<TFieldValues>
control: Control<TFieldValues>
}
export interface CellProps<TFieldValues extends FieldValues = FieldValues> {
field: Path<TFieldValues>
meta: DataGridMeta<TFieldValues>
}

26
packages/admin-next/dashboard/src/routes/inventory/inventory-create/components/create-inventory-item-form/create-inventory-availability-form.tsx
View File

@@ -3,9 +3,7 @@ import { useMemo } from "react"
import { HttpTypes } from "@medusajs/types"
import { UseFormReturn } from "react-hook-form"
import { useTranslation } from "react-i18next"
import { DataGridNumberCell } from "../../../../../components/data-grid/data-grid-cells/data-grid-number-cell"
import { DataGridReadOnlyCell } from "../../../../../components/data-grid/data-grid-cells/data-grid-readonly-cell"
import { DataGridRoot } from "../../../../../components/data-grid/data-grid-root"
import { DataGrid } from "../../../../../components/data-grid"
import { createDataGridHelper } from "../../../../../components/data-grid/utils"
import { useRouteModal } from "../../../../../components/modals"
import { useStockLocations } from "../../../../../hooks/api/stock-locations"
@@ -22,16 +20,13 @@ export const CreateInventoryAvailabilityForm = ({ form }: Props) => {
return (
<div className="size-full">
{isPending ? (
<div>Loading...</div>
) : (
<DataGridRoot
columns={columns}
data={stock_locations}
state={form}
onEditingChange={(editing) => setCloseOnEscape(!editing)}
/>
)}
<DataGrid
isLoading={isPending}
columns={columns}
data={stock_locations}
state={form}
onEditingChange={(editing) => setCloseOnEscape(!editing)}
/>
</div>
)
}
@@ -52,7 +47,7 @@ const useColumns = () => {
),
cell: ({ row }) => {
return (
<DataGridReadOnlyCell>{row.original.name}</DataGridReadOnlyCell>
<DataGrid.ReadonlyCell>{row.original.name}</DataGrid.ReadonlyCell>
)
},
disableHiding: true,
@@ -63,7 +58,7 @@ const useColumns = () => {
header: t("fields.inStock"),
cell: (context) => {
return (
<DataGridNumberCell
<DataGrid.NumberCell
min={0}
placeholder="0"
context={context}
@@ -72,7 +67,6 @@ const useColumns = () => {
)
},
disableHiding: true,
type: "number",
}),
],
[t]

4
packages/admin-next/dashboard/src/routes/locations/common/hooks/use-shipping-option-price-columns.tsx
View File

@@ -1,7 +1,7 @@
import { HttpTypes } from "@medusajs/types"
import { useMemo } from "react"
import { useTranslation } from "react-i18next"
import { getPriceColumns } from "../../../../components/data-grid/data-grid-columns/price-columns"
import { createDataGridPriceColumns } from "../../../../components/data-grid/data-grid-column-helpers/create-data-grid-price-columns"
export const useShippingOptionPriceColumns = ({
currencies = [],
@@ -15,7 +15,7 @@ export const useShippingOptionPriceColumns = ({
const { t } = useTranslation()
return useMemo(() => {
return getPriceColumns({
return createDataGridPriceColumns({
currencies,
regions,
pricePreferences,

7
packages/admin-next/dashboard/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-options-prices-form.tsx
View File

@@ -1,7 +1,7 @@
import { useMemo } from "react"
import { UseFormReturn } from "react-hook-form"
import { DataGridRoot } from "../../../../../components/data-grid/data-grid-root"
import { DataGrid } from "../../../../../components/data-grid"
import { useRouteModal } from "../../../../../components/modals"
import { usePricePreferences } from "../../../../../hooks/api/price-preferences"
import { useRegions } from "../../../../../hooks/api/regions"
@@ -48,7 +48,7 @@ export const CreateShippingOptionsPricesForm = ({
pricePreferences,
})
const initializing = isStoreLoading || !store || isRegionsLoading || !regions
const isLoading = isStoreLoading || !store || isRegionsLoading || !regions
const data = useMemo(
() => [[...(currencies || []), ...(regions || [])]],
@@ -65,7 +65,8 @@ export const CreateShippingOptionsPricesForm = ({
return (
<div className="flex size-full flex-col divide-y overflow-hidden">
<DataGridRoot
<DataGrid
isLoading={isLoading}
data={data}
columns={columns}
state={form}

38
packages/admin-next/dashboard/src/routes/locations/location-service-zone-shipping-option-pricing/components/create-shipping-options-form/edit-shipping-options-pricing-form.tsx
View File

@@ -7,7 +7,7 @@ import { HttpTypes } from "@medusajs/types"
import { Button, toast } from "@medusajs/ui"
import { useTranslation } from "react-i18next"
import { DataGridRoot } from "../../../../../components/data-grid/data-grid-root"
import { DataGrid } from "../../../../../components/data-grid"
import {
RouteFocusModal,
useRouteModal,
@@ -83,9 +83,7 @@ export function EditShippingOptionsPricingForm({
resolver: zodResolver(EditShippingOptionPricingSchema),
})
const { mutateAsync, isPending: isLoading } = useUpdateShippingOptions(
shippingOption.id
)
const { mutateAsync, isPending } = useUpdateShippingOptions(shippingOption.id)
const {
store,
@@ -198,7 +196,7 @@ export function EditShippingOptionsPricingForm({
)
})
const initializing =
const isLoading =
isStoreLoading || isRegionsLoading || !currencies || !regions
if (isStoreError) {
@@ -215,7 +213,20 @@ export function EditShippingOptionsPricingForm({
className="flex h-full flex-col overflow-hidden"
onSubmit={handleSubmit}
>
<RouteFocusModal.Header>
<RouteFocusModal.Header />
<RouteFocusModal.Body>
<div className="flex size-full flex-col divide-y overflow-hidden">
<DataGrid
isLoading={isLoading}
data={data}
columns={columns}
state={form}
onEditingChange={(editing) => setCloseOnEscape(!editing)}
/>
</div>
</RouteFocusModal.Body>
<RouteFocusModal.Footer>
<div className="flex items-center justify-end gap-x-2">
<RouteFocusModal.Close asChild>
<Button variant="secondary" size="small">
@@ -225,25 +236,14 @@ export function EditShippingOptionsPricingForm({
<Button
size="small"
className="whitespace-nowrap"
isLoading={isLoading}
isLoading={isPending}
onClick={handleSubmit}
type="button"
>
{t("actions.save")}
</Button>
</div>
</RouteFocusModal.Header>
<RouteFocusModal.Body>
<div className="flex size-full flex-col divide-y overflow-hidden">
<DataGridRoot
data={data}
columns={columns}
state={form}
onEditingChange={(editing) => setCloseOnEscape(!editing)}
/>
</div>
</RouteFocusModal.Body>
</RouteFocusModal.Footer>
</form>
</RouteFocusModal.Form>
)

14
packages/admin-next/dashboard/src/routes/price-lists/common/hooks/use-price-list-grid-columns.tsx
View File

@@ -4,8 +4,8 @@ import { useMemo } from "react"
import { useTranslation } from "react-i18next"
import { Thumbnail } from "../../../../components/common/thumbnail"
import { DataGridReadOnlyCell } from "../../../../components/data-grid/data-grid-cells/data-grid-readonly-cell"
import { getPriceColumns } from "../../../../components/data-grid/data-grid-columns/price-columns"
import { DataGrid } from "../../../../components/data-grid"
import { createDataGridPriceColumns } from "../../../../components/data-grid/data-grid-column-helpers/create-data-grid-price-columns"
import { createDataGridHelper } from "../../../../components/data-grid/utils"
import { isProductRow } from "../utils"
@@ -35,26 +35,26 @@ export const usePriceListGridColumns = ({
const entity = row.original
if (isProductRow(entity)) {
return (
<DataGridReadOnlyCell>
<DataGrid.ReadonlyCell>
<div className="flex h-full w-full items-center gap-x-2 overflow-hidden">
<Thumbnail src={entity.thumbnail} />
<span className="truncate">{entity.title}</span>
</div>
</DataGridReadOnlyCell>
</DataGrid.ReadonlyCell>
)
}
return (
<DataGridReadOnlyCell>
<DataGrid.ReadonlyCell>
<div className="flex h-full w-full items-center gap-x-2 overflow-hidden">
<span className="truncate">{entity.title}</span>
</div>
</DataGridReadOnlyCell>
</DataGrid.ReadonlyCell>
)
},
disableHiding: true,
}),
...getPriceColumns<
...createDataGridPriceColumns<
HttpTypes.AdminProduct | HttpTypes.AdminProductVariant
>({
currencies: currencies.map((c) => c.currency_code),

4
packages/admin-next/dashboard/src/routes/price-lists/price-list-create/components/price-list-create-form/price-list-prices-form.tsx
View File

@@ -1,7 +1,7 @@
import { HttpTypes } from "@medusajs/types"
import { useEffect } from "react"
import { UseFormReturn, useWatch } from "react-hook-form"
import { DataGridRoot } from "../../../../../components/data-grid/data-grid-root"
import { DataGrid } from "../../../../../components/data-grid"
import { useRouteModal } from "../../../../../components/modals"
import { useProducts } from "../../../../../hooks/api/products"
import { usePriceListGridColumns } from "../../../common/hooks/use-price-list-grid-columns"
@@ -77,7 +77,7 @@ export const PriceListPricesForm = ({
return (
<div className="flex size-full flex-col divide-y overflow-hidden">
<DataGridRoot
<DataGrid
columns={columns}
data={products}
getSubRows={(row) => {

4
packages/admin-next/dashboard/src/routes/price-lists/price-list-prices-add/components/price-list-prices-add-form/price-list-prices-add-prices-form.tsx
View File

@@ -2,7 +2,7 @@ import { HttpTypes } from "@medusajs/types"
import { useEffect } from "react"
import { UseFormReturn, useWatch } from "react-hook-form"
import { DataGridRoot } from "../../../../../components/data-grid/data-grid-root"
import { DataGrid } from "../../../../../components/data-grid"
import { useRouteModal } from "../../../../../components/modals"
import { useProducts } from "../../../../../hooks/api/products"
import { usePriceListGridColumns } from "../../../common/hooks/use-price-list-grid-columns"
@@ -78,7 +78,7 @@ export const PriceListPricesAddPricesForm = ({
return (
<div className="flex size-full flex-col divide-y overflow-hidden">
<DataGridRoot
<DataGrid
columns={columns}
data={products}
getSubRows={(row) => {

4
packages/admin-next/dashboard/src/routes/price-lists/price-list-prices-edit/components/price-list-prices-edit-form/price-list-prices-edit-form.tsx
View File

@@ -6,7 +6,7 @@ import { useForm } from "react-hook-form"
import { useTranslation } from "react-i18next"
import { z } from "zod"
import { DataGridRoot } from "../../../../../components/data-grid/data-grid-root"
import { DataGrid } from "../../../../../components/data-grid"
import {
RouteFocusModal,
useRouteModal,
@@ -92,7 +92,7 @@ export const PriceListPricesEditForm = ({
<form onSubmit={handleSubmit} className="flex size-full flex-col">
<RouteFocusModal.Header />
<RouteFocusModal.Body className="flex flex-col overflow-hidden">
<DataGridRoot
<DataGrid
columns={columns}
data={products}
getSubRows={(row) => {

21
packages/admin-next/dashboard/src/routes/products/common/variant-pricing-form.tsx
View File

@@ -3,15 +3,16 @@ import { useMemo } from "react"
import { UseFormReturn, useWatch } from "react-hook-form"
import { useTranslation } from "react-i18next"
import { getPriceColumns } from "../../../components/data-grid/data-grid-columns/price-columns"
import { DataGridRoot } from "../../../components/data-grid/data-grid-root/data-grid-root"
import { createDataGridHelper } from "../../../components/data-grid/utils.ts"
import { ReadonlyCell } from "../../../components/grid/grid-cells/common/readonly-cell"
import { useRouteModal } from "../../../components/modals/index.ts"
import {
DataGrid,
createDataGridHelper,
createDataGridPriceColumns,
} from "../../../components/data-grid"
import { useRouteModal } from "../../../components/modals/index"
import { usePricePreferences } from "../../../hooks/api/price-preferences"
import { useRegions } from "../../../hooks/api/regions.tsx"
import { useStore } from "../../../hooks/api/store"
import { ProductCreateSchemaType } from "../product-create/types.ts"
import { ProductCreateSchemaType } from "../product-create/types"
type VariantPricingFormProps = {
form: UseFormReturn<ProductCreateSchemaType>
@@ -36,7 +37,7 @@ export const VariantPricingForm = ({ form }: VariantPricingFormProps) => {
}) as any
return (
<DataGridRoot
<DataGrid
columns={columns}
data={variants}
state={form}
@@ -66,16 +67,16 @@ const useVariantPriceGridColumns = ({
cell: ({ row }) => {
const entity = row.original
return (
<ReadonlyCell>
<DataGrid.ReadonlyCell>
<div className="flex h-full w-full items-center gap-x-2 overflow-hidden">
<span className="truncate">{entity.title}</span>
</div>
</ReadonlyCell>
</DataGrid.ReadonlyCell>
)
},
disableHiding: true,
}),
...getPriceColumns<HttpTypes.AdminProductVariant>({
...createDataGridPriceColumns<HttpTypes.AdminProductVariant>({
currencies: currencies.map((c) => c.currency_code),
regions,
pricePreferences,

43
packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx
View File

@@ -3,11 +3,8 @@ import { useMemo } from "react"
import { UseFormReturn, useWatch } from "react-hook-form"
import { useTranslation } from "react-i18next"
import { DataGridBooleanCell } from "../../../../../components/data-grid/data-grid-cells/data-grid-boolean-cell"
import { DataGridReadOnlyCell } from "../../../../../components/data-grid/data-grid-cells/data-grid-readonly-cell"
import { DataGridTextCell } from "../../../../../components/data-grid/data-grid-cells/data-grid-text-cell"
import { getPriceColumns } from "../../../../../components/data-grid/data-grid-columns/price-columns"
import { DataGridRoot } from "../../../../../components/data-grid/data-grid-root"
import { DataGrid } from "../../../../../components/data-grid"
import { createDataGridPriceColumns } from "../../../../../components/data-grid/data-grid-column-helpers/create-data-grid-price-columns"
import { createDataGridHelper } from "../../../../../components/data-grid/utils"
import { useRouteModal } from "../../../../../components/modals"
import { usePricePreferences } from "../../../../../hooks/api/price-preferences"
@@ -103,16 +100,13 @@ export const ProductCreateVariantsForm = ({
return (
<div className="flex size-full flex-col divide-y overflow-hidden">
{isPending ? (
<div>Loading...</div>
) : (
<DataGridRoot
columns={columns}
data={variantData}
state={form}
onEditingChange={(editing) => setCloseOnEscape(!editing)}
/>
)}
<DataGrid
isLoading={isPending}
columns={columns}
data={variantData}
state={form}
onEditingChange={(editing) => setCloseOnEscape(!editing)}
/>
</div>
)
}
@@ -145,9 +139,9 @@ const useColumns = ({
),
cell: ({ row }) => {
return (
<DataGridReadOnlyCell>
<DataGrid.ReadonlyCell>
{options.map((o) => row.original.options[o.title]).join(" / ")}
</DataGridReadOnlyCell>
</DataGrid.ReadonlyCell>
)
},
disableHiding: true,
@@ -158,7 +152,7 @@ const useColumns = ({
header: t("fields.title"),
cell: (context) => {
return (
<DataGridTextCell
<DataGrid.TextCell
context={context}
field={`variants.${context.row.index}.title`}
/>
@@ -171,7 +165,7 @@ const useColumns = ({
header: t("fields.sku"),
cell: (context) => {
return (
<DataGridTextCell
<DataGrid.TextCell
context={context}
field={`variants.${context.row.index}.sku`}
/>
@@ -184,13 +178,12 @@ const useColumns = ({
header: t("fields.managedInventory"),
cell: (context) => {
return (
<DataGridBooleanCell
<DataGrid.BooleanCell
context={context}
field={`variants.${context.row.index}.manage_inventory`}
/>
)
},
type: "boolean",
}),
columnHelper.column({
id: "allow_backorder",
@@ -198,13 +191,12 @@ const useColumns = ({
header: t("fields.allowBackorder"),
cell: (context) => {
return (
<DataGridBooleanCell
<DataGrid.BooleanCell
context={context}
field={`variants.${context.row.index}.allow_backorder`}
/>
)
},
type: "boolean",
}),
columnHelper.column({
@@ -213,17 +205,16 @@ const useColumns = ({
header: t("fields.inventoryKit"),
cell: (context) => {
return (
<DataGridBooleanCell
<DataGrid.BooleanCell
context={context}
field={`variants.${context.row.index}.inventory_kit`}
disabled={!context.row.original.manage_inventory}
/>
)
},
type: "boolean",
}),
...getPriceColumns<ProductCreateVariantSchema>({
...createDataGridPriceColumns<ProductCreateVariantSchema>({
currencies,
regions,
pricePreferences,

3
packages/design-system/ui/package.json
View File

@@ -106,8 +106,7 @@
"react-stately": "^3.31.1",
"sonner": "^1.5.0",
"tailwind-merge": "^2.2.1",
"upgrade": "^1.1.0",
"yarn": "^1.22.22"
"upgrade": "^1.1.0"
},
"peerDependencies": {
"react": "^18.0.0",

11
yarn.lock
View File

@@ -5372,7 +5372,6 @@ __metadata:
vite: ^4.3.9
vite-plugin-turbosnap: ^1.0.2
vitest: ^0.32.2
yarn: ^1.22.22
peerDependencies:
react: ^18.0.0
react-dom: ^18.0.0
@@ -31549,16 +31548,6 @@ __metadata:
languageName: node
linkType: hard
"yarn@npm:^1.22.22":
version: 1.22.22
resolution: "yarn@npm:1.22.22"
bin:
yarn: bin/yarn.js
yarnpkg: bin/yarn.js
checksum: 8c77198c93d7542e7f4e131c63b66de357b7076ecfbcfe709ec0d674115c2dd9edaa45196e5510e6e9366d368707a802579e3402071002e1c9d9a99d491478de
languageName: node
linkType: hard
"yauzl@npm:^2.10.0":
version: 2.10.0
resolution: "yauzl@npm:2.10.0"