@vendure/dashboard 3.2.0

package/src/lib/components/data-display/boolean.tsx

@@ -0,0 +1,23 @@
+import { CheckIcon, XIcon } from 'lucide-react';
+import React from 'react';
+import { Badge } from '../ui/badge.js';
+
+export function BooleanDisplayCheckbox({ value }: { value: boolean }) {
+    return value ? <CheckIcon className="opacity-70" /> : <XIcon className="opacity-70" />;
+}
+
+export function BooleanDisplayBadge({
+    value,
+    labelTrue,
+    labelFalse,
+}: {
+    value: boolean;
+    labelTrue?: string | React.ReactNode;
+    labelFalse?: string | React.ReactNode;
+}) {
+    return (
+        <Badge variant={value ? 'success' : 'destructive'}>
+            {value ? (labelTrue ?? 'Enabled') : (labelFalse ?? 'Disabled')}
+        </Badge>
+    );
+}

package/src/lib/components/data-display/date-time.tsx

@@ -0,0 +1,13 @@
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+
+export function DateTime({ value }: { value: string | Date }) {
+    const { formatDate } = useLocalFormat();
+    let renderedDate: string;
+    try {
+        renderedDate = formatDate(value);
+    } catch (e) {
+        renderedDate = value.toString();
+        console.error(e);
+    }
+    return renderedDate;
+}

package/src/lib/components/data-display/json.tsx

@@ -0,0 +1,5 @@
+import { JsonEditor } from 'json-edit-react';
+
+export function Json({ value }: { value: any }) {
+    return <JsonEditor data={value} />;
+}

package/src/lib/components/data-display/money.tsx

@@ -0,0 +1,15 @@
+import { useLocalFormat } from "@/hooks/use-local-format.js";
+
+// Original component
+function MoneyInternal({ value, currency }: { value: number, currency: string }) {
+    const { formatCurrency } = useLocalFormat();
+    return formatCurrency(value, currency);
+}
+
+// Wrapper that makes it compatible with DataDisplayComponent
+export function Money(props: { value: any; [key: string]: any }) {
+    const { value, ...rest } = props;
+    const currency = rest.currency || 'USD'; // Default currency if none provided
+    return MoneyInternal({ value, currency });
+}
+

package/src/lib/components/data-input/affixed-input.tsx

@@ -0,0 +1,49 @@
+import { cn } from '@/lib/utils.js';
+import { Input } from '../ui/input.js';
+import { ReactNode, useRef, useEffect, useState } from 'react';
+
+interface AffixedInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+}
+
+export function AffixedInput({ prefix, suffix, className = '', ...props }: AffixedInputProps) {
+    const prefixRef = useRef<HTMLSpanElement>(null);
+    const suffixRef = useRef<HTMLSpanElement>(null);
+    const [prefixWidth, setPrefixWidth] = useState(0);
+    const [suffixWidth, setSuffixWidth] = useState(0);
+
+    useEffect(() => {
+        if (prefixRef.current) {
+            setPrefixWidth(Math.round(prefixRef.current.getBoundingClientRect().width));
+        }
+        if (suffixRef.current) {
+            setSuffixWidth(Math.round(suffixRef.current.getBoundingClientRect().width));
+        }
+    }, [prefix, suffix]);
+
+    const style = {
+        paddingLeft: prefix ? `calc(1rem + ${prefixWidth}px)` : undefined,
+        paddingRight: suffix ? `calc(1rem + ${suffixWidth}px)` : undefined,
+    };
+
+    return (
+        <div className="relative flex items-center">
+            {prefix && (
+                <span ref={prefixRef} className="absolute left-3 text-muted-foreground whitespace-nowrap">
+                    {prefix}
+                </span>
+            )}
+            <Input
+                {...props}
+                className={className}
+                style={style}
+            />
+            {suffix && (
+                <span ref={suffixRef} className="absolute right-3 text-muted-foreground whitespace-nowrap">
+                    {suffix}
+                </span>
+            )}
+        </div>
+    );
+}

package/src/lib/components/data-input/customer-group-input.tsx

@@ -0,0 +1,72 @@
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { useQuery } from '@tanstack/react-query';
+import { CustomerGroupChip } from '../shared/customer-group-chip.js';
+import { CustomerGroupSelector } from '../shared/customer-group-selector.js';
+
+const customerGroupsDocument = graphql(`
+    query GetCustomerGroups($options: CustomerGroupListOptions) {
+        customerGroups(options: $options) {
+            items {
+                id
+                name
+            }
+        }
+    }
+`);
+
+export interface CustomerGroup {
+    id: string;
+    name: string;
+}
+
+export interface CustomerGroupInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    readOnly?: boolean;
+}
+
+export function CustomerGroupInput(props: CustomerGroupInputProps) {
+    const ids = decodeIds(props.value);
+    const { data: groups } = useQuery({
+        queryKey: ['customerGroups', ids],
+        queryFn: () =>
+            api.query(customerGroupsDocument, {
+                options: {
+                    filter: {
+                        id: { in: ids },
+                    },
+                },
+            }),
+    });
+
+    const onValueSelectHandler = (value: CustomerGroup) => {
+        const newIds = new Set([...ids, value.id]);
+        props.onChange(JSON.stringify(Array.from(newIds)));
+    };
+
+    const onValueRemoveHandler = (id: string) => {
+        const newIds = new Set(ids.filter(existingId => existingId !== id));
+        props.onChange(JSON.stringify(Array.from(newIds)));
+    };
+
+    return (
+        <div>
+            <div className="flex flex-wrap gap-2 mb-2">
+                {groups?.customerGroups.items.map(group => (
+                    <CustomerGroupChip key={group.id} group={group} onRemove={onValueRemoveHandler} />
+                ))}
+            </div>
+
+            <CustomerGroupSelector onSelect={onValueSelectHandler} readOnly={props.readOnly} />
+        </div>
+    );
+}
+
+function decodeIds(idsString: string): string[] {
+    try {
+        return JSON.parse(idsString);
+    } catch (error) {
+        return [];
+    }
+}

package/src/lib/components/data-input/datetime-input.tsx

@@ -0,0 +1,150 @@
+"use client";
+ 
+import * as React from "react";
+import { format } from "date-fns";
+ 
+import { cn } from "@/lib/utils.js";
+import { Button } from "@/components/ui/button.js";
+import { Calendar } from "@/components/ui/calendar.js";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover.js";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area.js";
+import { CalendarClock } from "lucide-react";
+
+export interface DateTimeInputProps {
+  value: Date | string | undefined;
+  onChange: (value: Date) => void;
+}
+ 
+export function DateTimeInput(props: DateTimeInputProps) {
+  const date = props.value && props.value instanceof Date ? props.value.toISOString() : props.value ?? '';
+  const [isOpen, setIsOpen] = React.useState(false);
+ 
+  const hours = Array.from({ length: 12 }, (_, i) => i + 1);
+  const handleDateSelect = (selectedDate: Date | undefined) => {
+    if (selectedDate) {
+      props.onChange(selectedDate);
+    }
+  };
+ 
+  const handleTimeChange = (
+    type: "hour" | "minute" | "ampm",
+    value: string
+  ) => {
+    if (date) {
+      const newDate = new Date(date);
+      if (type === "hour") {
+        newDate.setHours(
+          (parseInt(value) % 12) + (newDate.getHours() >= 12 ? 12 : 0)
+        );
+      } else if (type === "minute") {
+        newDate.setMinutes(parseInt(value));
+      } else if (type === "ampm") {
+        const currentHours = newDate.getHours();
+        newDate.setHours(
+          value === "PM" ? currentHours + 12 : currentHours - 12
+        );
+      }
+      props.onChange(newDate);
+    }
+  };
+ 
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarClock className="mr-2 h-4 w-4" />
+          {date ? (
+            format(date, "MM/dd/yyyy hh:mm aa")
+          ) : (
+            <span>MM/DD/YYYY hh:mm aa</span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <div className="sm:flex">
+          <Calendar
+            mode="single"
+            selected={new Date(date)}
+            onSelect={handleDateSelect}
+            initialFocus
+          />
+          <div className="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x">
+            <ScrollArea className="w-64 sm:w-auto">
+              <div className="flex sm:flex-col p-2">
+                {hours.reverse().map((hour) => (
+                  <Button
+                    key={hour}
+                    size="icon"
+                    variant={
+                      date && new Date(date).getHours() % 12 === hour % 12
+                        ? "default"
+                        : "ghost"
+                    }
+                    className="sm:w-full shrink-0 aspect-square"
+                    onClick={() => handleTimeChange("hour", hour.toString())}
+                  >
+                    {hour}
+                  </Button>
+                ))}
+              </div>
+              <ScrollBar orientation="horizontal" className="sm:hidden" />
+            </ScrollArea>
+            <ScrollArea className="w-64 sm:w-auto">
+              <div className="flex sm:flex-col p-2">
+                {Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (
+                  <Button
+                    key={minute}
+                    size="icon"
+                    variant={
+                      date && new Date(date).getMinutes() === minute
+                        ? "default"
+                        : "ghost"
+                    }
+                    className="sm:w-full shrink-0 aspect-square"
+                    onClick={() =>
+                      handleTimeChange("minute", minute.toString())
+                    }
+                  >
+                    {minute}
+                  </Button>
+                ))}
+              </div>
+              <ScrollBar orientation="horizontal" className="sm:hidden" />
+            </ScrollArea>
+            <ScrollArea className="">
+              <div className="flex sm:flex-col p-2">
+                {["AM", "PM"].map((ampm) => (
+                  <Button
+                    key={ampm}
+                    size="icon"
+                    variant={
+                      date &&
+                      ((ampm === "AM" && new Date(date).getHours() < 12) ||
+                        (ampm === "PM" && new Date(date).getHours() >= 12))
+                        ? "default"
+                        : "ghost"
+                    }
+                    className="sm:w-full shrink-0 aspect-square"
+                    onClick={() => handleTimeChange("ampm", ampm)}
+                  >
+                    {ampm}
+                  </Button>
+                ))}
+              </div>
+            </ScrollArea>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/lib/components/data-input/facet-value-input.tsx

@@ -0,0 +1,68 @@
+import { graphql } from "@/graphql/graphql.js";
+import { FacetValue, FacetValueSelector } from "../shared/facet-value-selector.js";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/graphql/api.js";
+import { FacetValueChip } from "../shared/facet-value-chip.js";
+
+const facetValuesDocument = graphql(`
+    query FacetValues($options: FacetValueListOptions) {
+        facetValues(options: $options) {
+            items {
+                id
+                name
+                code
+                facet {
+                    id
+                    name
+                    code
+                }
+            }
+        }
+    }`
+);
+
+export interface FacetValueInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    readOnly?: boolean;
+}
+
+export function FacetValueInput(props: FacetValueInputProps) {
+    const ids = decodeIds(props.value);
+    const { data } = useQuery({
+        queryKey: ['facetValues', ids],
+        queryFn: () => api.query(facetValuesDocument, {
+            options: {
+                filter: {
+                    id: { in: ids }
+                }
+            }
+        })
+    });
+
+    const onValueSelectHandler = (value: FacetValue) => {
+        const newIds = new Set([...ids, value.id]);
+        props.onChange(JSON.stringify(Array.from(newIds)));
+    }
+
+    const onValueRemoveHandler = (id: string) => {
+        const newIds = new Set(ids.filter(existingId => existingId !== id));
+        props.onChange(JSON.stringify(Array.from(newIds)));
+    }
+
+    return (<div>
+        
+        <div className="flex flex-wrap gap-2 mb-2">
+            {data?.facetValues.items.map(item => <FacetValueChip key={item.id} facetValue={item} onRemove={() => onValueRemoveHandler(item.id)} />)}
+        </div>
+        <FacetValueSelector onValueSelect={onValueSelectHandler} disabled={props.readOnly} />
+    </div>);
+}
+
+function decodeIds(idsString: string): string[] {
+    try {
+        return JSON.parse(idsString);
+    } catch (error) {
+        return [];
+    }
+}

package/src/lib/components/data-input/money-input.tsx

@@ -0,0 +1,112 @@
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { useMemo, useState, useEffect } from 'react';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { AffixedInput } from './affixed-input.js';
+
+// Original component
+function MoneyInputInternal({
+    value,
+    currency,
+    onChange,
+}: {
+    value: number;
+    currency: string;
+    onChange: (value: number) => void;
+}) {
+    const {
+        settings: { displayLanguage, displayLocale },
+    } = useUserSettings();
+    const { toMajorUnits, toMinorUnits } = useLocalFormat();
+    const [displayValue, setDisplayValue] = useState(toMajorUnits(value).toFixed(2));
+
+    // Update display value when prop value changes
+    useEffect(() => {
+        setDisplayValue(toMajorUnits(value).toFixed(2));
+    }, [value, toMajorUnits]);
+
+    // Determine if the currency symbol should be a prefix based on locale
+    const shouldPrefix = useMemo(() => {
+        if (!currency) return false;
+        const locale = displayLocale || displayLanguage.replace(/_/g, '-');
+        const parts = new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            currencyDisplay: 'symbol',
+        }).formatToParts();
+        const NaNString = parts.find(p => p.type === 'nan')?.value ?? 'NaN';
+        const localised = new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            currencyDisplay: 'symbol',
+        }).format(undefined as any);
+        return localised.indexOf(NaNString) > 0;
+    }, [currency, displayLocale, displayLanguage]);
+
+    // Get the currency symbol
+    const currencySymbol = useMemo(() => {
+        if (!currency) return '';
+        const locale = displayLocale || displayLanguage.replace(/_/g, '-');
+        const parts = new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+            currencyDisplay: 'symbol',
+        }).formatToParts();
+        return parts.find(p => p.type === 'currency')?.value ?? currency;
+    }, [currency, displayLocale, displayLanguage]);
+
+    return (
+        <AffixedInput
+            type="text"
+            value={displayValue}
+            onChange={e => {
+                const inputValue = e.target.value;
+                // Allow empty input
+                if (inputValue === '') {
+                    setDisplayValue('');
+                    return;
+                }
+                // Only allow numbers and one decimal point
+                if (!/^[0-9.]*$/.test(inputValue)) {
+                    return;
+                }
+                setDisplayValue(inputValue);
+            }}
+            onKeyDown={e => {
+                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    const currentValue = parseFloat(displayValue) || 0;
+                    const step = e.key === 'ArrowUp' ? 0.01 : -0.01;
+                    const newValue = currentValue + step;
+                    if (newValue >= 0) {
+                        onChange(toMinorUnits(newValue));
+                        setDisplayValue(newValue.toString());
+                    }
+                }
+            }}
+            onBlur={e => {
+                const inputValue = e.target.value;
+                if (inputValue === '') {
+                    onChange(0);
+                    setDisplayValue('0');
+                    return;
+                }
+                const newValue = parseFloat(inputValue);
+                if (!isNaN(newValue)) {
+                    onChange(toMinorUnits(newValue));
+                    setDisplayValue(newValue.toFixed(2));
+                }
+            }}
+            step="0.01"
+            min="0"
+            prefix={shouldPrefix ? currencySymbol : undefined}
+            suffix={!shouldPrefix ? currencySymbol : undefined}
+        />
+    );
+}
+
+// Wrapper that makes it compatible with DataInputComponent
+export function MoneyInput(props: { value: any; onChange: (value: any) => void; [key: string]: any }) {
+    const { value, onChange, ...rest } = props;
+    const currency = rest.currency || 'USD'; // Default currency if none provided
+    return <MoneyInputInternal value={value} currency={currency} onChange={onChange} />;
+}

package/src/lib/components/data-input/richt-text-input.tsx

@@ -0,0 +1,99 @@
+import { BubbleMenu, Editor, EditorContent, useCurrentEditor, useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import ListItem from '@tiptap/extension-list-item';
+import TextStyle from '@tiptap/extension-text-style';
+import { BoldIcon, ItalicIcon, StrikethroughIcon } from 'lucide-react';
+import { useEffect, useLayoutEffect } from 'react';
+import { Button } from '../ui/button.js';
+
+// define your extension array
+const extensions = [
+    TextStyle.configure(),
+    StarterKit.configure({
+        bulletList: {
+            keepMarks: true,
+            keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
+        },
+        orderedList: {
+            keepMarks: true,
+            keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
+        },
+    }),
+];
+
+export interface RichTextInputProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+
+export function RichTextInput({ value, onChange }: RichTextInputProps) {
+    const editor = useEditor({
+        parseOptions: {
+            preserveWhitespace: 'full',
+        },
+        extensions: extensions,
+        content: value,
+        onUpdate: ({ editor }) => {
+            onChange(editor.getHTML());
+        },
+        editorProps: {
+            attributes: {
+                class: 'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/10 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm max-h-[500px] overflow-y-auto',
+            },
+        },
+    });
+
+    if (!editor) return null;
+
+    useLayoutEffect(() => {
+        const { from, to } = editor.state.selection;
+    
+        editor.commands.setContent(value, false);
+    
+        editor.commands.setTextSelection({ from, to });
+      }, [value]);
+
+    return (
+        <>
+            <EditorContent editor={editor} />
+            <CustomBubbleMenu editor={editor} />
+        </>
+    );
+}
+
+function CustomBubbleMenu({ editor }: { editor: Editor | null }) {
+    if (!editor) return null;
+    return (
+        <BubbleMenu editor={editor}>
+            <div className="flex items-center gap-2 bg-background p-2 rounded-md border">
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => editor.chain().focus().toggleBold().run()}
+                    className={editor.isActive('bold') ? 'bg-accent' : ''}
+                >
+                    <BoldIcon className="w-4 h-4" />
+                </Button>
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => editor.chain().focus().toggleItalic().run()}
+                    className={editor.isActive('italic') ? 'bg-accent' : ''}
+                >
+                    <ItalicIcon className="w-4 h-4" />
+                </Button>
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => editor.chain().focus().toggleStrike().run()}
+                    className={editor.isActive('strike') ? 'bg-accent' : ''}
+                >
+                    <StrikethroughIcon className="w-4 h-4" />
+                </Button>
+            </div>
+        </BubbleMenu>
+    );
+}

package/src/lib/components/data-table/data-table-column-header.tsx

@@ -0,0 +1,73 @@
+import { Button } from '@/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog.js';
+import { DataTableFilterDialog } from '@/components/data-table/data-table-filter-dialog.js';
+import { FieldInfo } from '@/framework/document-introspection/get-document-structure.js';
+import { camelCaseToTitleCase } from '@/lib/utils.js';
+import { Trans } from '@/lib/trans.js';
+import { ColumnDef, HeaderContext } from '@tanstack/table-core';
+import { ArrowDown, ArrowUp, ArrowUpDown, EllipsisVertical, Filter } from 'lucide-react';
+import React from 'react';
+
+export interface DataTableColumnHeaderProps {
+    customConfig: Partial<ColumnDef<any>>;
+    headerContext: HeaderContext<any, any>;
+}
+
+export function DataTableColumnHeader({ headerContext, customConfig }: DataTableColumnHeaderProps) {
+    const { column } = headerContext;
+    const isSortable = column.getCanSort();
+    const isFilterable = column.getCanFilter();
+
+    const customHeader = customConfig.header;
+    let display = camelCaseToTitleCase(column.id);
+    if (typeof customHeader === 'function') {
+        display = customHeader(headerContext);
+    } else if (typeof customHeader === 'string') {
+        display = customHeader;
+    }
+
+    const columSort = column.getIsSorted();
+    const columnFilter = column.getFilterValue();
+    const nextSort = columSort === 'asc' ? true : columSort === 'desc' ? undefined : false;
+
+    return (
+        <div className="flex items-center">
+            {isSortable && (
+                <Button size="icon-sm" variant="ghost" onClick={() => column.toggleSorting(nextSort)}>
+                    {columSort === 'desc' ? (
+                        <ArrowUp />
+                    ) : columSort === 'asc' ? (
+                        <ArrowDown />
+                    ) : (
+                        <ArrowUpDown className="opacity-50" />
+                    )}
+                </Button>
+            )}
+            <div>{display}</div>
+
+            {isFilterable && (
+                <Dialog>
+                    <DialogTrigger asChild>
+                        <Button size="icon-sm" variant="ghost">
+                            <Filter className={columnFilter ? '' : 'opacity-50'} />
+                        </Button>
+                    </DialogTrigger>
+                    <DataTableFilterDialog column={column} />
+                </Dialog>
+            )}
+        </div>
+    );
+}