@vendure/dashboard 3.2.0 → 3.2.1

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

@@ -1,68 +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 [];
-    }
-}
+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

@@ -1,112 +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} />;
-}
+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

@@ -1,99 +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>
-    );
-}
+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>
+    );
+}