Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(dashboard): Product create from - details (#7121)
**What** - First part of the product creation form. - New components: - ChipInput - Allows users to input chips into a input field. Chips are created by hitting the `,` or `Enter / Return` keys. Deleting a chip is done by hitting `Backspace` when the cursor is next to chip, or clicking the `X` button in the chip. Used for inputting option values. - SortableList - A sortable drag-n-drop list that allows the user to re-arrange the order of items. Used for re-arranging the ranking of variants. - ChipGroup - New re-usable component that is used to render a group of values as Chips. This should be used for SplitView form items. - CategoryCombobox - (WIP) Nested Combobox component for selecting multiple categories a product should be associated with. - New hooks: - useComboboxData - Hook for easily managing the state of comboboxes. - useDebouncedSearch - Hook for managing debounced search queries.
- Loading branch information
1 parent
e423085
commit fdee748
Showing
84 changed files
with
2,832 additions
and
1,583 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
111 changes: 111 additions & 0 deletions
111
packages/admin-next/dashboard/src/components/common/chip-group/chip-group.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| import { XMarkMini } from "@medusajs/icons" | ||
| import { Button, clx } from "@medusajs/ui" | ||
| import { Children, PropsWithChildren, createContext, useContext } from "react" | ||
| import { useTranslation } from "react-i18next" | ||
|
|
||
| type ChipGroupVariant = "base" | "component" | ||
|
|
||
| type ChipGroupProps = PropsWithChildren<{ | ||
| onClearAll?: () => void | ||
| onRemove?: (index: number) => void | ||
| variant?: ChipGroupVariant | ||
| className?: string | ||
| }> | ||
|
|
||
| type GroupContextValue = { | ||
| onRemove?: (index: number) => void | ||
| variant: ChipGroupVariant | ||
| } | ||
|
|
||
| const GroupContext = createContext<GroupContextValue | null>(null) | ||
|
|
||
| const useGroupContext = () => { | ||
| const context = useContext(GroupContext) | ||
|
|
||
| if (!context) { | ||
| throw new Error("useGroupContext must be used within a ChipGroup component") | ||
| } | ||
|
|
||
| return context | ||
| } | ||
|
|
||
| const Group = ({ | ||
| onClearAll, | ||
| onRemove, | ||
| variant = "component", | ||
| className, | ||
| children, | ||
| }: ChipGroupProps) => { | ||
| const { t } = useTranslation() | ||
|
|
||
| const showClearAll = !!onClearAll && Children.count(children) > 0 | ||
|
|
||
| return ( | ||
| <GroupContext.Provider value={{ onRemove, variant }}> | ||
| <ul | ||
| role="application" | ||
| className={clx("flex flex-wrap items-center gap-2", className)} | ||
| > | ||
| {children} | ||
| {showClearAll && ( | ||
| <li> | ||
| <Button | ||
| size="small" | ||
| variant="transparent" | ||
| type="button" | ||
| onClick={onClearAll} | ||
| className="text-ui-fg-muted active:text-ui-fg-subtle" | ||
| > | ||
| {t("actions.clearAll")} | ||
| </Button> | ||
| </li> | ||
| )} | ||
| </ul> | ||
| </GroupContext.Provider> | ||
| ) | ||
| } | ||
|
|
||
| type ChipProps = PropsWithChildren<{ | ||
| index: number | ||
| className?: string | ||
| }> | ||
|
|
||
| const Chip = ({ index, className, children }: ChipProps) => { | ||
| const { onRemove, variant } = useGroupContext() | ||
|
|
||
| return ( | ||
| <li | ||
| className={clx( | ||
| "bg-ui-bg-component shadow-borders-base flex items-center divide-x overflow-hidden rounded-md", | ||
| { | ||
| "bg-ui-bg-component": variant === "component", | ||
| "bg-ui-bg-base-": variant === "base", | ||
| }, | ||
| className | ||
| )} | ||
| > | ||
| <span className="txt-compact-small-plus flex items-center justify-center px-2 py-1"> | ||
| {children} | ||
| </span> | ||
| {!!onRemove && ( | ||
| <button | ||
| onClick={() => onRemove(index)} | ||
| type="button" | ||
| className={clx( | ||
| "text-ui-fg-muted active:text-ui-fg-subtle transition-fg flex items-center justify-center p-1", | ||
| { | ||
| "hover:bg-ui-bg-component-hover active:bg-ui-bg-component-pressed": | ||
| variant === "component", | ||
| "hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed": | ||
| variant === "base", | ||
| } | ||
| )} | ||
| > | ||
| <XMarkMini /> | ||
| </button> | ||
| )} | ||
| </li> | ||
| ) | ||
| } | ||
|
|
||
| export const ChipGroup = Object.assign(Group, { Chip }) |
1 change: 1 addition & 0 deletions
1
packages/admin-next/dashboard/src/components/common/chip-group/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./chip-group" |
1 change: 0 additions & 1 deletion
1
packages/admin-next/dashboard/src/components/common/keypair/index.tsx
This file was deleted.
Oops, something went wrong.
149 changes: 0 additions & 149 deletions
149
packages/admin-next/dashboard/src/components/common/keypair/keypair.tsx
This file was deleted.
Oops, something went wrong.
1 change: 0 additions & 1 deletion
1
packages/admin-next/dashboard/src/components/common/list/index.tsx
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.