@vendure/dashboard 3.2.0 → 3.2.2

package/src/lib/components/shared/assigned-facet-values.tsx

@@ -1,68 +1,68 @@
-import { useState } from 'react';
-import { FacetValueChip } from './facet-value-chip.js';
-import { FacetValueSelector } from './facet-value-selector.js';
-
-// Interface for facet value type
-interface FacetValue {
-    id: string;
-    name: string;
-    code: string;
-    facet: {
-        id: string;
-        name: string;
-        code: string;
-    };
-}
-
-interface AssignedFacetValuesProps {
-    value?: string[] | null;
-    facetValues: FacetValue[];
-    canUpdate?: boolean;
-    onBlur?: () => void;
-    onChange?: (value: string[]) => void;
-}
-
-export function AssignedFacetValues({
-    value = [],
-    facetValues,
-    canUpdate = true,
-    onBlur,
-    onChange,
-}: AssignedFacetValuesProps) {
-    const [knownFacetValues, setKnownFacetValues] = useState<FacetValue[]>(facetValues);
-    
-    function onSelectHandler(facetValue: FacetValue) {
-        setKnownFacetValues(prev => [...prev, facetValue]);
-        onChange?.([...new Set([...(value ?? []), facetValue.id])]);
-    }
-    
-    function onRemoveHandler(id: string) {
-        onChange?.(value?.filter(fvId => fvId !== id) ?? []);
-    }
-
-    return (
-        <>
-            <div className="flex flex-wrap">
-                {(value ?? []).map(id => {
-                    const facetValue = knownFacetValues.find(fv => fv.id === id);
-                    if (!facetValue) return null;
-                    return (
-                        <div className="mb-2 mr-1">
-                        <FacetValueChip
-                            key={facetValue.id}
-                            facetValue={facetValue}
-                            removable={canUpdate}
-                            onRemove={onRemoveHandler}
-                            />
-                        </div>
-                    );
-                })}
-            </div>
-            {canUpdate && (
-                <FacetValueSelector
-                    onValueSelect={onSelectHandler}
-                />
-            )}
-        </>
-    );
-}
+import { useState } from 'react';
+import { FacetValueChip } from './facet-value-chip.js';
+import { FacetValueSelector } from './facet-value-selector.js';
+
+// Interface for facet value type
+interface FacetValue {
+    id: string;
+    name: string;
+    code: string;
+    facet: {
+        id: string;
+        name: string;
+        code: string;
+    };
+}
+
+interface AssignedFacetValuesProps {
+    value?: string[] | null;
+    facetValues: FacetValue[];
+    canUpdate?: boolean;
+    onBlur?: () => void;
+    onChange?: (value: string[]) => void;
+}
+
+export function AssignedFacetValues({
+    value = [],
+    facetValues,
+    canUpdate = true,
+    onBlur,
+    onChange,
+}: AssignedFacetValuesProps) {
+    const [knownFacetValues, setKnownFacetValues] = useState<FacetValue[]>(facetValues);
+    
+    function onSelectHandler(facetValue: FacetValue) {
+        setKnownFacetValues(prev => [...prev, facetValue]);
+        onChange?.([...new Set([...(value ?? []), facetValue.id])]);
+    }
+    
+    function onRemoveHandler(id: string) {
+        onChange?.(value?.filter(fvId => fvId !== id) ?? []);
+    }
+
+    return (
+        <>
+            <div className="flex flex-wrap">
+                {(value ?? []).map(id => {
+                    const facetValue = knownFacetValues.find(fv => fv.id === id);
+                    if (!facetValue) return null;
+                    return (
+                        <div className="mb-2 mr-1">
+                        <FacetValueChip
+                            key={facetValue.id}
+                            facetValue={facetValue}
+                            removable={canUpdate}
+                            onRemove={onRemoveHandler}
+                            />
+                        </div>
+                    );
+                })}
+            </div>
+            {canUpdate && (
+                <FacetValueSelector
+                    onValueSelect={onSelectHandler}
+                />
+            )}
+        </>
+    );
+}

package/src/lib/components/shared/channel-code-label.tsx

@@ -1,7 +1,7 @@
-import { DEFAULT_CHANNEL_CODE } from '@/constants.js';
-import { Trans } from '@/lib/trans.js';
-
-export function ChannelCodeLabel({ code }: { code: string } | { code: undefined }) {
-    return code === DEFAULT_CHANNEL_CODE ? <Trans>Default channel</Trans> : code;
-}
-
+import { DEFAULT_CHANNEL_CODE } from '@/constants.js';
+import { Trans } from '@/lib/trans.js';
+
+export function ChannelCodeLabel({ code }: { code: string } | { code: undefined }) {
+    return code === DEFAULT_CHANNEL_CODE ? <Trans>Default channel</Trans> : code;
+}
+

package/src/lib/components/shared/channel-selector.tsx

@@ -1,51 +1,51 @@
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
-import { useLingui } from '@/lib/trans.js';
-import { useQuery } from '@tanstack/react-query';
-import { MultiSelect } from './multi-select.js';
-import { ChannelCodeLabel } from './channel-code-label.js';
-
-const channelsDocument = graphql(`
-    query channels($options: ChannelListOptions) {
-        channels(options: $options) {
-            items {
-                id
-                code
-            }
-        }
-    }
-`);
-
-export interface ChannelSelectorProps<T extends boolean> {    
-    value: T extends true ? string[] : string;
-    onChange: (value: T extends true ? string[] : string) => void;
-    multiple?: T;
-}
-
-export function ChannelSelector<T extends boolean>(props: ChannelSelectorProps<T>) {
-    const { value, onChange, multiple } = props;
-    const { i18n } = useLingui();
-
-    const { data: channelsData } = useQuery({
-        queryKey: ['channels'],
-        queryFn: () => api.query(channelsDocument, {}),
-        staleTime: 1000 * 60 * 5,
-    });
-
-    const items = (channelsData?.channels.items ?? []).map(channel => ({
-        value: channel.id,
-        label: channel.code,
-        display: <ChannelCodeLabel code={channel.code} />
-    }));
-
-    return (
-        <MultiSelect
-            value={value}
-            onChange={onChange}
-            multiple={multiple}
-            items={items}
-            placeholder={i18n.t('Select a channel')}
-            searchPlaceholder={i18n.t('Search channels...')}
-        />
-    );
-}
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { useLingui } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { MultiSelect } from './multi-select.js';
+import { ChannelCodeLabel } from './channel-code-label.js';
+
+const channelsDocument = graphql(`
+    query channels($options: ChannelListOptions) {
+        channels(options: $options) {
+            items {
+                id
+                code
+            }
+        }
+    }
+`);
+
+export interface ChannelSelectorProps<T extends boolean> {    
+    value: T extends true ? string[] : string;
+    onChange: (value: T extends true ? string[] : string) => void;
+    multiple?: T;
+}
+
+export function ChannelSelector<T extends boolean>(props: ChannelSelectorProps<T>) {
+    const { value, onChange, multiple } = props;
+    const { i18n } = useLingui();
+
+    const { data: channelsData } = useQuery({
+        queryKey: ['channels'],
+        queryFn: () => api.query(channelsDocument, {}),
+        staleTime: 1000 * 60 * 5,
+    });
+
+    const items = (channelsData?.channels.items ?? []).map(channel => ({
+        value: channel.id,
+        label: channel.code,
+        display: <ChannelCodeLabel code={channel.code} />
+    }));
+
+    return (
+        <MultiSelect
+            value={value}
+            onChange={onChange}
+            multiple={multiple}
+            items={items}
+            placeholder={i18n.t('Select a channel')}
+            searchPlaceholder={i18n.t('Search channels...')}
+        />
+    );
+}

package/src/lib/components/shared/configurable-operation-arg-input.tsx

@@ -1,51 +1,51 @@
-import { InputComponent } from '@/framework/component-registry/dynamic-component.js';
-import { ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
-import { ConfigArgType } from '@vendure/core';
-import { FacetValueInput } from '../data-input/facet-value-input.js';
-
-export interface ConfigurableOperationArgInputProps {
-    definition: ConfigurableOperationDefFragment['args'][number];
-    readOnly?: boolean;
-    value: string;
-    onChange: (value: any) => void;
-}
-
-export function ConfigurableOperationArgInput({
-    definition,
-    value,
-    onChange,
-    readOnly,
-}: ConfigurableOperationArgInputProps) {
-    if ((definition.ui as any)?.component === 'facet-value-form-input') {
-        return <FacetValueInput value={value} onChange={onChange} readOnly={readOnly} />;
-    }
-    switch (definition.type as ConfigArgType) {
-        case 'boolean':
-            return (
-                <InputComponent
-                    id="vendure:checkboxInput"
-                    value={value}
-                    onChange={(value: any) => onChange(value)}
-                    readOnly={readOnly}
-                />
-            );
-        case 'string':
-            return (
-                <InputComponent
-                    id="vendure:textInput"
-                    value={value}
-                    onChange={(value: any) => onChange(value)}
-                    readOnly={readOnly}
-                />
-            );
-        default:
-            return (
-                <InputComponent
-                    id="vendure:textInput"
-                    value={value}
-                    onChange={(value: any) => onChange(value)}
-                    readOnly={readOnly}
-                />
-            );
-    }
-}
+import { InputComponent } from '@/framework/component-registry/dynamic-component.js';
+import { ConfigurableOperationDefFragment } from '@/graphql/fragments.js';
+import { ConfigArgType } from '@vendure/core';
+import { FacetValueInput } from '../data-input/facet-value-input.js';
+
+export interface ConfigurableOperationArgInputProps {
+    definition: ConfigurableOperationDefFragment['args'][number];
+    readOnly?: boolean;
+    value: string;
+    onChange: (value: any) => void;
+}
+
+export function ConfigurableOperationArgInput({
+    definition,
+    value,
+    onChange,
+    readOnly,
+}: ConfigurableOperationArgInputProps) {
+    if ((definition.ui as any)?.component === 'facet-value-form-input') {
+        return <FacetValueInput value={value} onChange={onChange} readOnly={readOnly} />;
+    }
+    switch (definition.type as ConfigArgType) {
+        case 'boolean':
+            return (
+                <InputComponent
+                    id="vendure:checkboxInput"
+                    value={value}
+                    onChange={(value: any) => onChange(value)}
+                    readOnly={readOnly}
+                />
+            );
+        case 'string':
+            return (
+                <InputComponent
+                    id="vendure:textInput"
+                    value={value}
+                    onChange={(value: any) => onChange(value)}
+                    readOnly={readOnly}
+                />
+            );
+        default:
+            return (
+                <InputComponent
+                    id="vendure:textInput"
+                    value={value}
+                    onChange={(value: any) => onChange(value)}
+                    readOnly={readOnly}
+                />
+            );
+    }
+}

package/src/lib/components/shared/configurable-operation-input.tsx

@@ -1,133 +1,133 @@
-import { ConfigurableOperationDefFragment, ConfigurableOperationFragment } from '@/graphql/fragments.js';
-import { useForm } from 'react-hook-form';
-import * as React from 'react';
-import { Form, FormControl, FormField, FormItem, FormLabel } from '../ui/form.js';
-import { Input } from '../ui/input.js';
-import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
-import { ConfigurableOperationArgInput } from './configurable-operation-arg-input.js';
-import { Button } from '../ui/button.js';
-import { Trash } from 'lucide-react';
-
-export interface ConfigurableOperationInputProps {
-    operationDefinition: ConfigurableOperationDefFragment;
-    readonly?: boolean;
-    removable?: boolean;
-    position?: number;
-    hideDescription?: boolean;
-    value: ConfigurableOperationInputType;
-    onChange: (val: ConfigurableOperationInputType) => void;
-    onRemove?: () => void;
-}
-
-export function ConfigurableOperationInput({
-    operationDefinition,
-    readonly,
-    removable,
-    position,
-    hideDescription,
-    value,
-    onChange,
-    onRemove,
-}: ConfigurableOperationInputProps) {
-    const form = useForm({
-        defaultValues: {
-            ...value,
-        },
-    });
-
-    const handleInputChange = (name: string, inputValue: string) => {
-        const argIndex = value.arguments.findIndex(arg => arg.name === name);
-        const stringValue = inputValue.toString();
-        let updatedArgs: ConfigurableOperationInputType['arguments'];
-        if (argIndex === -1) {
-            updatedArgs = [...value.arguments, { name, value: stringValue }];
-        } else {
-            updatedArgs = value.arguments.map(arg => (arg.name === name ? { ...arg, value: stringValue } : arg));
-        }
-        const newVal: ConfigurableOperationInputType = { ...value, arguments: updatedArgs };
-        onChange(newVal);
-    };
-
-
-    return (
-        <Form {...form}>
-            <div className="space-y-4">
-                <div className="flex flex-row justify-between">
-                    {!hideDescription && (
-                        <div className="font-medium">
-                            {' '}
-                            {interpolateDescription(operationDefinition, value.arguments)}
-                        </div>
-                    )}
-                    {removable !== false && (
-                        <Button variant="outline" size="icon" onClick={onRemove}>
-                            <Trash />
-                        </Button>
-                    )}
-                </div>
-                <div className="grid grid-cols-2 gap-4">
-                    {operationDefinition.args.map(arg => {
-                        const argValue = value.arguments.find(a => a.name === arg.name)?.value || '';
-                        return (
-                            <FormField
-                                key={arg.name}
-                                name={`args.${arg.name}`}
-                                render={() => (
-                                <FormItem>
-                                    <FormLabel>{arg.label || arg.name}</FormLabel>
-                                    <FormControl>
-                                        <ConfigurableOperationArgInput
-                                            definition={arg}
-                                            value={argValue}
-                                            onChange={value => handleInputChange(arg.name, value)}
-                                        />
-                                        </FormControl>
-                                    </FormItem>
-                                )}
-                            />
-                        );
-                    })}
-                </div>
-            </div>
-        </Form>
-    );
-}
-
-/**
- * Interpolates the description of an ConfigurableOperation with the given values.
- */
-export function interpolateDescription(
-    operation: any,
-    values: Array<{ name: string; value: string }>,
-    precisionFactor = 2,
-): string {
-    if (!operation) {
-        return '';
-    }
-    const templateString = operation.description;
-    const interpolated = templateString.replace(
-        /{\s*([a-zA-Z0-9]+)\s*}/gi,
-        (substring: string, argName: string) => {
-            const normalizedArgName = argName.toLowerCase();
-            const value = values.find(v => v.name === normalizedArgName)?.value;
-            if (value == null) {
-                return '_';
-            }
-            let formatted = value;
-            const argDef = operation.args.find((arg: any) => arg.name === normalizedArgName);
-            if (
-                argDef &&
-                argDef.type === 'int' &&
-                argDef.ui &&
-                argDef.ui.component === 'currency-form-input'
-            ) {
-                formatted = (Number(value) / Math.pow(10, precisionFactor)).toString();
-            }
-            if (argDef && argDef.type === 'datetime' && (value as any) instanceof Date) {
-                formatted = (value as any).toLocaleDateString();
-            }
-            return formatted;
-        },
-    );
-    return interpolated;
-}
+import { ConfigurableOperationDefFragment, ConfigurableOperationFragment } from '@/graphql/fragments.js';
+import { useForm } from 'react-hook-form';
+import * as React from 'react';
+import { Form, FormControl, FormField, FormItem, FormLabel } from '../ui/form.js';
+import { Input } from '../ui/input.js';
+import { ConfigurableOperationInput as ConfigurableOperationInputType } from '@vendure/common/lib/generated-types';
+import { ConfigurableOperationArgInput } from './configurable-operation-arg-input.js';
+import { Button } from '../ui/button.js';
+import { Trash } from 'lucide-react';
+
+export interface ConfigurableOperationInputProps {
+    operationDefinition: ConfigurableOperationDefFragment;
+    readonly?: boolean;
+    removable?: boolean;
+    position?: number;
+    hideDescription?: boolean;
+    value: ConfigurableOperationInputType;
+    onChange: (val: ConfigurableOperationInputType) => void;
+    onRemove?: () => void;
+}
+
+export function ConfigurableOperationInput({
+    operationDefinition,
+    readonly,
+    removable,
+    position,
+    hideDescription,
+    value,
+    onChange,
+    onRemove,
+}: ConfigurableOperationInputProps) {
+    const form = useForm({
+        defaultValues: {
+            ...value,
+        },
+    });
+
+    const handleInputChange = (name: string, inputValue: string) => {
+        const argIndex = value.arguments.findIndex(arg => arg.name === name);
+        const stringValue = inputValue.toString();
+        let updatedArgs: ConfigurableOperationInputType['arguments'];
+        if (argIndex === -1) {
+            updatedArgs = [...value.arguments, { name, value: stringValue }];
+        } else {
+            updatedArgs = value.arguments.map(arg => (arg.name === name ? { ...arg, value: stringValue } : arg));
+        }
+        const newVal: ConfigurableOperationInputType = { ...value, arguments: updatedArgs };
+        onChange(newVal);
+    };
+
+
+    return (
+        <Form {...form}>
+            <div className="space-y-4">
+                <div className="flex flex-row justify-between">
+                    {!hideDescription && (
+                        <div className="font-medium">
+                            {' '}
+                            {interpolateDescription(operationDefinition, value.arguments)}
+                        </div>
+                    )}
+                    {removable !== false && (
+                        <Button variant="outline" size="icon" onClick={onRemove}>
+                            <Trash />
+                        </Button>
+                    )}
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                    {operationDefinition.args.map(arg => {
+                        const argValue = value.arguments.find(a => a.name === arg.name)?.value || '';
+                        return (
+                            <FormField
+                                key={arg.name}
+                                name={`args.${arg.name}`}
+                                render={() => (
+                                <FormItem>
+                                    <FormLabel>{arg.label || arg.name}</FormLabel>
+                                    <FormControl>
+                                        <ConfigurableOperationArgInput
+                                            definition={arg}
+                                            value={argValue}
+                                            onChange={value => handleInputChange(arg.name, value)}
+                                        />
+                                        </FormControl>
+                                    </FormItem>
+                                )}
+                            />
+                        );
+                    })}
+                </div>
+            </div>
+        </Form>
+    );
+}
+
+/**
+ * Interpolates the description of an ConfigurableOperation with the given values.
+ */
+export function interpolateDescription(
+    operation: any,
+    values: Array<{ name: string; value: string }>,
+    precisionFactor = 2,
+): string {
+    if (!operation) {
+        return '';
+    }
+    const templateString = operation.description;
+    const interpolated = templateString.replace(
+        /{\s*([a-zA-Z0-9]+)\s*}/gi,
+        (substring: string, argName: string) => {
+            const normalizedArgName = argName.toLowerCase();
+            const value = values.find(v => v.name === normalizedArgName)?.value;
+            if (value == null) {
+                return '_';
+            }
+            let formatted = value;
+            const argDef = operation.args.find((arg: any) => arg.name === normalizedArgName);
+            if (
+                argDef &&
+                argDef.type === 'int' &&
+                argDef.ui &&
+                argDef.ui.component === 'currency-form-input'
+            ) {
+                formatted = (Number(value) / Math.pow(10, precisionFactor)).toString();
+            }
+            if (argDef && argDef.type === 'datetime' && (value as any) instanceof Date) {
+                formatted = (value as any).toLocaleDateString();
+            }
+            return formatted;
+        },
+    );
+    return interpolated;
+}