@spree/dashboard-core 0.13.0 → 1.0.0-beta.1

package/src/components/file-upload-field.tsx

@@ -10,11 +10,11 @@ import {
   Field,
   FieldDescription,
   FieldLabel,
+  toastManager,
 } from '@spree/dashboard-ui'
-import { FileIcon, UploadCloudIcon, XIcon } from 'lucide-react'
+import { FileIcon, UploadCloudIcon, XIcon } from '@spree/dashboard-ui/icons'
 import { type ReactNode, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from 'sonner'
 import { useDirectUpload } from '../hooks/use-direct-upload'
 
 /**
@@ -43,7 +43,9 @@ export const EMPTY_FILE_UPLOAD_VALUE: FileUploadValue = {
 export function formatFileSize(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  // Digital products are sold in gigabytes — sample packs, video, disk images.
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`
 }
 
 export interface FileUploadFieldProps {
@@ -72,6 +74,18 @@ export interface FileUploadFieldProps {
   disabled?: boolean
   /** Re-wrap the picked file before upload (e.g. force a content type). */
   transformFile?: (file: File) => File
+  /**
+   * Upload to private storage rather than the public bucket. Required for
+   * anything served through an authorized endpoint — attaching a signed id
+   * never moves a blob between services, so this has to be right up front.
+   */
+  private?: boolean
+  /**
+   * Called with true while a picked file is uploading. A consumer whose save
+   * sends `signedId` must disable it meanwhile — the id does not exist until
+   * the upload resolves, so an early submit silently drops the file.
+   */
+  onUploadingChange?: (uploading: boolean) => void
 }
 
 /**
@@ -97,9 +111,11 @@ export function FileUploadField({
   mediaClassName,
   disabled = false,
   transformFile,
+  private: privateStorage = false,
+  onUploadingChange,
 }: FileUploadFieldProps) {
   const { t } = useTranslation()
-  const directUpload = useDirectUpload()
+  const directUpload = useDirectUpload({ private: privateStorage })
   const [pending, setPending] = useState<File | null>(null)
 
   const isImage = variant === 'image'
@@ -126,12 +142,16 @@ export function FileUploadField({
   async function handlePicked(picked: File) {
     if (disabled || pending) return
     if (!matchesAccept(picked)) {
-      toast.error(t('admin.components.file_upload.invalid_type', { accept }))
+      toastManager.add({
+        type: 'error',
+        title: t('admin.components.file_upload.invalid_type', { accept }),
+      })
       return
     }
 
     const file = transformFile ? transformFile(picked) : picked
     setPending(file)
+    onUploadingChange?.(true)
     try {
       const result = await directUpload.mutateAsync(file)
       // Revoke a preview we're replacing in-place; the object URL otherwise
@@ -146,13 +166,15 @@ export function FileUploadField({
         byteSize: file.size,
       })
     } catch (err) {
-      toast.error(
-        t('admin.components.file_upload.upload_failed', {
+      toastManager.add({
+        type: 'error',
+        title: t('admin.components.file_upload.upload_failed', {
           message: err instanceof Error ? err.message : String(err),
         }),
-      )
+      })
     } finally {
       setPending(null)
+      onUploadingChange?.(false)
     }
   }
 
@@ -191,7 +213,7 @@ export function FileUploadField({
             Enter/Space; the label paints a focus ring via has-[:focus-visible]. */}
         <label
           className={cn(
-            'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-border border-dashed bg-muted/40 px-4 py-8 text-center transition-colors hover:bg-muted',
+            'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-border border-dashed px-4 py-8 text-center transition-colors hover:bg-accent/50',
             'has-[:focus-visible]:border-ring has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/50',
             (disabled || !!pending) && 'pointer-events-none opacity-60',
           )}
@@ -206,7 +228,7 @@ export function FileUploadField({
           <span className="text-muted-foreground text-sm">
             {dropLabel ?? t('admin.components.file_upload.drop_label')}
           </span>
-          <span className="mt-1 inline-flex h-8 items-center rounded-md border border-border bg-background px-3 font-medium text-sm shadow-xs">
+          <span className="mt-1 inline-flex h-8 items-center rounded-md border border-border bg-background px-3 font-medium text-sm hover:bg-accent">
             {browseLabel ?? t('admin.components.file_upload.browse')}
           </span>
           <input

package/src/components/import-button.tsx

@@ -1,4 +1,3 @@
-import type { Import, ImportType } from '@spree/admin-sdk'
 import {
   Button,
   Field,
@@ -14,13 +13,20 @@ import {
   SheetFooter,
   SheetHeader,
   SheetTitle,
+  toastManager,
 } from '@spree/dashboard-ui'
-import { DownloadIcon, FileSpreadsheetIcon, UploadIcon } from 'lucide-react'
+import { DownloadIcon, FileSpreadsheetIcon, UploadIcon } from '@spree/dashboard-ui/icons'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { toast } from 'sonner'
-import { useCreateImport, useDownloadImportTemplate } from '../hooks/use-import'
+import type { PanelImport } from '../api-client'
+import {
+  type ImportCreateExtras,
+  useCreateImport,
+  useDownloadImportExample,
+  useDownloadImportTemplate,
+} from '../hooks/use-import'
 import type { SubjectName } from '../lib/permissions'
+import { hasSampleCsv } from '../lib/sample-csv'
 import { Can } from './can'
 import { EMPTY_FILE_UPLOAD_VALUE, FileUploadField, type FileUploadValue } from './file-upload-field'
 
@@ -35,7 +41,7 @@ type Delimiter = (typeof DELIMITERS)[number]['value']
 
 interface ImportButtonProps {
   /** Which dataset to import. Server validates against `Spree::Import.available_types`. */
-  type: ImportType
+  type: string
   /**
    * CanCanCan subject gating the button — the *imported resource*
    * (e.g. `Subject.Product`), mirroring the server's `write_<resource>`
@@ -47,9 +53,24 @@ interface ImportButtonProps {
    * wizard — typically a full-window dialog driven by an `?import=` search
    * param.
    */
-  onCreated: (imp: Import) => void
+  onCreated: (imp: PanelImport) => void
   /** Label shown on the button. Defaults to the translated "Import" action. */
   label?: string
+  /** Optional variant for the button. Defaults to "outline". */
+  variant?: 'default' | 'outline' | 'ghost'
+  /** Optional size for the button. Defaults to "sm". */
+  size?: 'sm' | 'default' | 'lg'
+  /**
+   * Whatever else the type needs at create — a parent record's id, say. The
+   * button then belongs on that record's page, and the sheet asks nothing.
+   */
+  params?: ImportCreateExtras
+  /**
+   * Path the import-done email links back to, relative to this panel's origin.
+   * Defaults to the operator dashboard's imports view under the current
+   * tenant; a panel filing that page elsewhere passes its own.
+   */
+  resultsPath?: string
 }
 
 /**
@@ -58,13 +79,24 @@ interface ImportButtonProps {
  * `FileUploadField`; submitting creates the import from the signed blob id
  * and hands it to `onCreated`.
  */
-export function ImportButton({ type, subject, onCreated, label }: ImportButtonProps) {
+export function ImportButton({
+  type,
+  subject,
+  onCreated,
+  label,
+  variant,
+  size,
+  params,
+  resultsPath,
+}: ImportButtonProps) {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
   const [file, setFile] = useState<FileUploadValue>(EMPTY_FILE_UPLOAD_VALUE)
   const [delimiter, setDelimiter] = useState<Delimiter>(',')
   const createImport = useCreateImport()
   const downloadTemplate = useDownloadImportTemplate()
+  const downloadExample = useDownloadImportExample()
+  const hasExample = hasSampleCsv(type)
 
   const delimiterOptions = DELIMITERS.map(({ value, labelKey }) => ({
     value,
@@ -80,18 +112,19 @@ export function ImportButton({ type, subject, onCreated, label }: ImportButtonPr
     if (!file.signedId || createImport.isPending) return
 
     createImport.mutate(
-      { type, signedId: file.signedId, preferredDelimiter: delimiter },
+      { type, signedId: file.signedId, preferredDelimiter: delimiter, params, resultsPath },
       {
         onSuccess: (imp) => {
           handleOpenChange(false)
           onCreated(imp)
         },
         onError: (err) => {
-          toast.error(
-            t('admin.components.import_button.failed', {
+          toastManager.add({
+            type: 'error',
+            title: t('admin.components.import_button.failed', {
               message: err instanceof Error ? err.message : String(err),
             }),
-          )
+          })
         },
       },
     )
@@ -100,25 +133,42 @@ export function ImportButton({ type, subject, onCreated, label }: ImportButtonPr
   function handleTemplateDownload() {
     downloadTemplate.mutate(type, {
       onError: (err) => {
-        toast.error(
-          t('admin.components.import_button.template_failed', {
+        toastManager.add({
+          type: 'error',
+          title: t('admin.components.import_button.template_failed', {
             message: err instanceof Error ? err.message : String(err),
           }),
-        )
+        })
+      },
+    })
+  }
+
+  function handleExampleDownload() {
+    downloadExample.mutate(type, {
+      onError: (err) => {
+        toastManager.add({
+          type: 'error',
+          title: t('admin.components.import_button.example_failed', {
+            message: err instanceof Error ? err.message : String(err),
+          }),
+        })
       },
     })
   }
 
   return (
     <Can I="create" a={subject}>
+      {/* Desktop only: the wizard needs a file from disk and column
+          mapping across a wide grid, neither of which works on a phone. */}
       <Button
-        size="sm"
-        variant="outline"
-        className="h-[2.125rem]"
+        type="button"
+        size={size ?? 'sm'}
+        variant={variant ?? 'outline'}
+        className="hidden h-[2.125rem] lg:inline-flex"
         onClick={() => setOpen(true)}
         disabled={createImport.isPending}
       >
-        <UploadIcon className="size-4" />
+        <UploadIcon />
         {label ?? t('admin.actions.import')}
       </Button>
 
@@ -162,31 +212,42 @@ export function ImportButton({ type, subject, onCreated, label }: ImportButtonPr
               </Select>
             </Field>
 
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="self-start"
-              onClick={handleTemplateDownload}
-              disabled={downloadTemplate.isPending}
-            >
-              <DownloadIcon className="size-4" />
-              {t('admin.components.import_button.download_template')}
-            </Button>
+            <div className="flex flex-col items-start gap-1">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={handleTemplateDownload}
+                disabled={downloadTemplate.isPending}
+              >
+                <DownloadIcon className="size-4" />
+                {t('admin.components.import_button.download_template')}
+              </Button>
+
+              {/* The populated counterpart to the headers-only template above.
+                  Fetched through the API so the file matches the installed
+                  Spree version's schema. */}
+              {hasExample && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleExampleDownload}
+                  disabled={downloadExample.isPending}
+                >
+                  <FileSpreadsheetIcon className="size-4" />
+                  {t('admin.components.import_button.download_example')}
+                </Button>
+              )}
+            </div>
           </div>
 
           <SheetFooter>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={() => handleOpenChange(false)}
-            >
+            <Button type="button" variant="outline" onClick={() => handleOpenChange(false)}>
               {t('admin.actions.cancel')}
             </Button>
             <Button
               type="button"
-              size="sm"
               onClick={handleSubmit}
               disabled={!file.signedId || createImport.isPending}
             >