@tanstack/devtools 0.6.20 → 0.6.22

package/src/tabs/marketplace/card-utils.test.ts

@@ -0,0 +1,219 @@
+import { describe, expect, it } from 'vitest'
+import {
+  getBadgeClass,
+  getBadgeText,
+  getButtonText,
+  getButtonVariant,
+} from './card-utils'
+import type { PluginCard } from './types'
+
+const createMockCard = (overrides: Partial<PluginCard>): PluginCard => ({
+  requiredPackageName: '@tanstack/react-query',
+  devtoolsPackage: '@tanstack/react-query-devtools',
+  framework: 'react',
+  hasPackage: false,
+  hasDevtools: false,
+  isRegistered: false,
+  actionType: 'install',
+  status: 'idle',
+  isCurrentFramework: true,
+  metadata: {
+    packageName: '@tanstack/react-query-devtools',
+    title: 'Query Devtools',
+    framework: 'react',
+  },
+  ...overrides,
+})
+
+describe('getButtonText', () => {
+  it('should return Installing... when status is installing', () => {
+    const card = createMockCard({ status: 'installing' })
+    expect(getButtonText(card)).toBe('Installing...')
+  })
+
+  it('should return Installed! when status is success', () => {
+    const card = createMockCard({ status: 'success' })
+    expect(getButtonText(card)).toBe('Installed!')
+  })
+
+  it('should return Error when status is error', () => {
+    const card = createMockCard({ status: 'error' })
+    expect(getButtonText(card)).toBe('Error')
+  })
+
+  it('should return Install for install action', () => {
+    const card = createMockCard({ actionType: 'install' })
+    expect(getButtonText(card)).toBe('Install')
+  })
+
+  it('should return Install Devtools for install-devtools action', () => {
+    const card = createMockCard({ actionType: 'install-devtools' })
+    expect(getButtonText(card)).toBe('Install Devtools')
+  })
+
+  it('should return Add to Devtools for add-to-devtools action', () => {
+    const card = createMockCard({ actionType: 'add-to-devtools' })
+    expect(getButtonText(card)).toBe('Add to Devtools')
+  })
+
+  it('should return package name for requires-package action', () => {
+    const card = createMockCard({
+      actionType: 'requires-package',
+      requiredPackageName: '@tanstack/react-query',
+    })
+    expect(getButtonText(card)).toBe('Requires @tanstack/react-query')
+  })
+
+  it('should return Different Framework for wrong-framework action', () => {
+    const card = createMockCard({ actionType: 'wrong-framework' })
+    expect(getButtonText(card)).toBe('Different Framework')
+  })
+
+  it('should return Already Installed for already-installed action', () => {
+    const card = createMockCard({ actionType: 'already-installed' })
+    expect(getButtonText(card)).toBe('Already Installed')
+  })
+
+  it('should return Bump Version for bump-version action', () => {
+    const card = createMockCard({ actionType: 'bump-version' })
+    expect(getButtonText(card)).toBe('Bump Version')
+  })
+
+  it('should return Version Mismatch for version-mismatch action', () => {
+    const card = createMockCard({ actionType: 'version-mismatch' })
+    expect(getButtonText(card)).toBe('Version Mismatch')
+  })
+})
+
+describe('getButtonVariant', () => {
+  it('should return danger for requires-package', () => {
+    const card = createMockCard({ actionType: 'requires-package' })
+    expect(getButtonVariant(card)).toBe('danger')
+  })
+
+  it('should return danger for wrong-framework', () => {
+    const card = createMockCard({ actionType: 'wrong-framework' })
+    expect(getButtonVariant(card)).toBe('danger')
+  })
+
+  it('should return danger for version-mismatch', () => {
+    const card = createMockCard({ actionType: 'version-mismatch' })
+    expect(getButtonVariant(card)).toBe('danger')
+  })
+
+  it('should return warning for bump-version', () => {
+    const card = createMockCard({ actionType: 'bump-version' })
+    expect(getButtonVariant(card)).toBe('warning')
+  })
+
+  it('should return secondary for already-installed', () => {
+    const card = createMockCard({ actionType: 'already-installed' })
+    expect(getButtonVariant(card)).toBe('secondary')
+  })
+
+  it('should return primary for install actions', () => {
+    const installCard = createMockCard({ actionType: 'install' })
+    expect(getButtonVariant(installCard)).toBe('primary')
+
+    const installDevtoolsCard = createMockCard({
+      actionType: 'install-devtools',
+    })
+    expect(getButtonVariant(installDevtoolsCard)).toBe('primary')
+
+    const addToDevtoolsCard = createMockCard({ actionType: 'add-to-devtools' })
+    expect(getButtonVariant(addToDevtoolsCard)).toBe('primary')
+  })
+})
+
+describe('getBadgeClass', () => {
+  const mockStyles = () => ({
+    pluginMarketplaceCardBadge: 'badge',
+    pluginMarketplaceCardBadgeInstall: 'badge-install',
+    pluginMarketplaceCardBadgeAdd: 'badge-add',
+    pluginMarketplaceCardBadgeRequires: 'badge-requires',
+  })
+
+  it('should return install badge class for install', () => {
+    const card = createMockCard({ actionType: 'install' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-install')
+  })
+
+  it('should return install badge class for install-devtools', () => {
+    const card = createMockCard({ actionType: 'install-devtools' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-install')
+  })
+
+  it('should return add badge class for add-to-devtools', () => {
+    const card = createMockCard({ actionType: 'add-to-devtools' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-add')
+  })
+
+  it('should return add badge class for already-installed', () => {
+    const card = createMockCard({ actionType: 'already-installed' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-add')
+  })
+
+  it('should return requires badge class for bump-version', () => {
+    const card = createMockCard({ actionType: 'bump-version' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-requires')
+  })
+
+  it('should return requires badge class for version-mismatch', () => {
+    const card = createMockCard({ actionType: 'version-mismatch' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-requires')
+  })
+
+  it('should return requires badge class for requires-package', () => {
+    const card = createMockCard({ actionType: 'requires-package' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-requires')
+  })
+
+  it('should return requires badge class for wrong-framework', () => {
+    const card = createMockCard({ actionType: 'wrong-framework' })
+    expect(getBadgeClass(card, mockStyles)).toBe('badge badge-requires')
+  })
+})
+
+describe('getBadgeText', () => {
+  it('should return Available for install', () => {
+    const card = createMockCard({ actionType: 'install' })
+    expect(getBadgeText(card)).toBe('Available')
+  })
+
+  it('should return Available for install-devtools', () => {
+    const card = createMockCard({ actionType: 'install-devtools' })
+    expect(getBadgeText(card)).toBe('Available')
+  })
+
+  it('should return Installed for add-to-devtools', () => {
+    const card = createMockCard({ actionType: 'add-to-devtools' })
+    expect(getBadgeText(card)).toBe('Installed')
+  })
+
+  it('should return Active for already-installed', () => {
+    const card = createMockCard({ actionType: 'already-installed' })
+    expect(getBadgeText(card)).toBe('Active')
+  })
+
+  it('should return Incompatible for version-mismatch', () => {
+    const card = createMockCard({ actionType: 'version-mismatch' })
+    expect(getBadgeText(card)).toBe('Incompatible')
+  })
+
+  it('should return Unavailable for requires-package', () => {
+    const card = createMockCard({ actionType: 'requires-package' })
+    expect(getBadgeText(card)).toBe('Unavailable')
+  })
+
+  it('should return Other Framework for wrong-framework', () => {
+    const card = createMockCard({ actionType: 'wrong-framework' })
+    expect(getBadgeText(card)).toBe('Other Framework')
+  })
+
+  it('should return empty string for unknown action type', () => {
+    const card = createMockCard({ actionType: 'install' })
+    // @ts-expect-error - testing invalid action type
+    card.actionType = 'invalid'
+    expect(getBadgeText(card)).toBe('')
+  })
+})

package/src/tabs/marketplace/card-utils.ts

@@ -0,0 +1,85 @@
+import type { PluginCard } from './types'
+
+export const getButtonText = (card: PluginCard): string => {
+  if (card.status === 'installing') return 'Installing...'
+  if (card.status === 'success') return 'Installed!'
+  if (card.status === 'error') return 'Error'
+
+  switch (card.actionType) {
+    case 'install':
+      return 'Install'
+    case 'install-devtools':
+      return 'Install Devtools'
+    case 'add-to-devtools':
+      return 'Add to Devtools'
+    case 'requires-package':
+      return `Requires ${card.requiredPackageName}`
+    case 'wrong-framework':
+      return 'Different Framework'
+    case 'already-installed':
+      return 'Already Installed'
+    case 'bump-version':
+      return 'Bump Version'
+    case 'version-mismatch':
+      return 'Version Mismatch'
+    default:
+      return 'Install'
+  }
+}
+
+export const getButtonVariant = (
+  card: PluginCard,
+): 'primary' | 'secondary' | 'danger' | 'warning' => {
+  if (
+    card.actionType === 'requires-package' ||
+    card.actionType === 'wrong-framework' ||
+    card.actionType === 'version-mismatch'
+  )
+    return 'danger'
+  if (card.actionType === 'bump-version') return 'warning'
+  if (card.actionType === 'already-installed') return 'secondary'
+  return 'primary'
+}
+
+export const getBadgeClass = (card: PluginCard, styles: any): string => {
+  const s = styles()
+  const base = s.pluginMarketplaceCardBadge
+  switch (card.actionType) {
+    case 'install':
+    case 'install-devtools':
+      return `${base} ${s.pluginMarketplaceCardBadgeInstall}`
+    case 'add-to-devtools':
+      return `${base} ${s.pluginMarketplaceCardBadgeAdd}`
+    case 'already-installed':
+      return `${base} ${s.pluginMarketplaceCardBadgeAdd}`
+    case 'bump-version':
+      return `${base} ${s.pluginMarketplaceCardBadgeRequires}`
+    case 'version-mismatch':
+      return `${base} ${s.pluginMarketplaceCardBadgeRequires}`
+    case 'requires-package':
+    case 'wrong-framework':
+      return `${base} ${s.pluginMarketplaceCardBadgeRequires}`
+    default:
+      return base
+  }
+}
+
+export const getBadgeText = (card: PluginCard): string => {
+  switch (card.actionType) {
+    case 'install':
+    case 'install-devtools':
+      return 'Available'
+    case 'add-to-devtools':
+      return 'Installed'
+    case 'already-installed':
+      return 'Active'
+    case 'version-mismatch':
+      return 'Incompatible'
+    case 'requires-package':
+      return 'Unavailable'
+    case 'wrong-framework':
+      return 'Other Framework'
+    default:
+      return ''
+  }
+}

package/src/tabs/marketplace/marketplace-header.tsx

@@ -0,0 +1,54 @@
+import { SearchIcon, SettingsIcon } from '@tanstack/devtools-ui'
+import { useStyles } from '../../styles/use-styles'
+import { TagFilters } from './tag-filters'
+import type { Accessor } from 'solid-js'
+
+interface MarketplaceHeaderProps {
+  searchInput: Accessor<string>
+  onSearchInput: (value: string) => void
+  onSettingsClick: () => void
+  tags: Accessor<Array<string>>
+  selectedTags: Accessor<Set<string>>
+  onToggleTag: (tag: string) => void
+}
+
+export const MarketplaceHeader = (props: MarketplaceHeaderProps) => {
+  const styles = useStyles()
+
+  return (
+    <div class={styles().pluginMarketplaceHeader}>
+      <div class={styles().pluginMarketplaceTitleRow}>
+        <h2 class={styles().pluginMarketplaceTitle}>Plugin Marketplace</h2>
+        <div style={{ display: 'flex', 'align-items': 'center' }}>
+          <div class={styles().pluginMarketplaceSearchWrapper}>
+            <SearchIcon />
+            <input
+              type="text"
+              class={styles().pluginMarketplaceSearch}
+              placeholder="Search plugins..."
+              value={props.searchInput()}
+              onInput={(e) => props.onSearchInput(e.currentTarget.value)}
+            />
+          </div>
+          <button
+            class={styles().pluginMarketplaceSettingsButton}
+            onClick={props.onSettingsClick}
+          >
+            <SettingsIcon />
+          </button>
+        </div>
+      </div>
+
+      <p class={styles().pluginMarketplaceDescription}>
+        Discover and install devtools for TanStack Query, Router, Form, and
+        Pacer
+      </p>
+
+      <TagFilters
+        tags={props.tags}
+        selectedTags={props.selectedTags}
+        onToggleTag={props.onToggleTag}
+      />
+    </div>
+  )
+}

package/src/tabs/marketplace/plugin-card.tsx

@@ -0,0 +1,165 @@
+import { For, Show } from 'solid-js'
+import {
+  Button,
+  CheckCircleIcon,
+  ExternalLinkIcon,
+  PackageIcon,
+  XCircleIcon,
+} from '@tanstack/devtools-ui'
+import { useStyles } from '../../styles/use-styles'
+import {
+  getBadgeClass,
+  getBadgeText,
+  getButtonText,
+  getButtonVariant,
+} from './card-utils'
+import type { PluginCard } from './types'
+
+interface PluginCardComponentProps {
+  card: PluginCard
+  onAction: (card: PluginCard) => void
+}
+
+export const PluginCardComponent = (props: PluginCardComponentProps) => {
+  const styles = useStyles()
+  const { card } = props
+
+  return (
+    <div
+      class={styles().pluginMarketplaceCard}
+      classList={{
+        [styles().pluginMarketplaceCardDisabled]:
+          !card.isCurrentFramework && card.actionType !== 'already-installed',
+        [styles().pluginMarketplaceCardFeatured]:
+          !!card.metadata?.featured && card.actionType !== 'already-installed',
+        [styles().pluginMarketplaceCardActive]:
+          card.actionType === 'already-installed',
+      }}
+      style={{ position: 'relative' }}
+    >
+      {/* New Banner */}
+      <Show when={card.metadata?.isNew}>
+        <div class={styles().pluginMarketplaceNewBanner}>New</div>
+      </Show>
+
+      <span class={getBadgeClass(card, styles)}>{getBadgeText(card)}</span>
+      <div
+        class={styles().pluginMarketplaceCardIcon}
+        classList={{
+          'custom-logo': !!card.metadata?.logoUrl,
+        }}
+      >
+        <Show when={card.metadata?.logoUrl} fallback={<PackageIcon />}>
+          <img
+            src={card.metadata?.logoUrl}
+            alt={card.metadata?.title || card.devtoolsPackage}
+            class={styles().pluginMarketplaceCardImage}
+          />
+        </Show>
+      </div>
+      <div class={styles().pluginMarketplaceCardHeader}>
+        <h3 class={styles().pluginMarketplaceCardTitle}>
+          {card.metadata?.title || card.devtoolsPackage}
+        </h3>
+        <p class={styles().pluginMarketplaceCardPackageBadge}>
+          {card.devtoolsPackage}
+        </p>
+        <p class={styles().pluginMarketplaceCardDescriptionText}>
+          {card.actionType === 'requires-package'
+            ? `Requires ${card.requiredPackageName}`
+            : card.actionType === 'wrong-framework'
+              ? `For different framework projects`
+              : card.actionType === 'already-installed'
+                ? `Active in your devtools`
+                : card.actionType === 'version-mismatch'
+                  ? card.versionInfo?.reason || 'Version incompatible'
+                  : card.metadata?.description ||
+                    `For ${card.requiredPackageName}`}
+        </p>
+        <Show when={card.versionInfo}>
+          <p class={styles().pluginMarketplaceCardVersionInfo}>
+            <Show
+              when={card.versionInfo?.satisfied}
+              fallback={
+                <span class={styles().pluginMarketplaceCardVersionUnsatisfied}>
+                  ⚠️ v{card.versionInfo?.current} • Requires v
+                  {card.versionInfo?.required}+
+                </span>
+              }
+            >
+              <span class={styles().pluginMarketplaceCardVersionSatisfied}>
+                ✓ v{card.versionInfo?.current} • Min v
+                {card.versionInfo?.required}
+              </span>
+            </Show>
+          </p>
+        </Show>
+        <Show when={card.metadata?.docsUrl}>
+          <a
+            href={card.metadata?.docsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            class={styles().pluginMarketplaceCardDocsLink}
+          >
+            Documentation <ExternalLinkIcon />
+          </a>
+        </Show>
+
+        {/* Tags */}
+        <Show when={card.metadata?.tags && card.metadata.tags.length > 0}>
+          <div class={styles().pluginMarketplaceCardTags}>
+            <For each={card.metadata?.tags}>
+              {(tag) => (
+                <span class={styles().pluginMarketplaceCardTag}>{tag}</span>
+              )}
+            </For>
+          </div>
+        </Show>
+      </div>
+      <Show
+        when={card.status === 'idle'}
+        fallback={
+          <div class={styles().pluginMarketplaceCardStatus}>
+            <Show when={card.status === 'installing'}>
+              <div class={styles().pluginMarketplaceCardSpinner} />
+              <span class={styles().pluginMarketplaceCardStatusText}>
+                Installing...
+              </span>
+            </Show>
+            <Show when={card.status === 'success'}>
+              <CheckCircleIcon />
+              <span class={styles().pluginMarketplaceCardStatusText}>
+                Installed!
+              </span>
+            </Show>
+            <Show when={card.status === 'error'}>
+              <XCircleIcon />
+              <span class={styles().pluginMarketplaceCardStatusTextError}>
+                {card.error || 'Failed to install'}
+              </span>
+            </Show>
+          </div>
+        }
+      >
+        <Button
+          variant={getButtonVariant(card)}
+          onClick={() => props.onAction(card)}
+          disabled={
+            card.status !== 'idle' ||
+            card.actionType === 'requires-package' ||
+            card.actionType === 'wrong-framework' ||
+            card.actionType === 'already-installed' ||
+            card.actionType === 'version-mismatch'
+          }
+          class={
+            card.actionType === 'already-installed'
+              ? styles().pluginMarketplaceButtonInstalled
+              : ''
+          }
+        >
+          {getButtonText(card)}
+        </Button>
+      </Show>
+    </div>
+  )
+}

package/src/tabs/marketplace/plugin-section.tsx

@@ -0,0 +1,51 @@
+import { For, Show } from 'solid-js'
+import { ChevronDownIcon } from '@tanstack/devtools-ui'
+import { useStyles } from '../../styles/use-styles'
+import { PluginCardComponent } from './plugin-card'
+import type { Accessor } from 'solid-js'
+import type { PluginCard, PluginSection } from './types'
+
+interface PluginSectionComponentProps {
+  section: PluginSection
+  isCollapsed: Accessor<boolean>
+  onToggleCollapse: () => void
+  onCardAction: (card: PluginCard) => void
+}
+
+export const PluginSectionComponent = (props: PluginSectionComponentProps) => {
+  const styles = useStyles()
+
+  return (
+    <div class={styles().pluginMarketplaceSection}>
+      <div
+        class={styles().pluginMarketplaceSectionHeader}
+        onClick={props.onToggleCollapse}
+      >
+        <div class={styles().pluginMarketplaceSectionHeaderLeft}>
+          <div
+            class={styles().pluginMarketplaceSectionChevron}
+            classList={{
+              [styles().pluginMarketplaceSectionChevronCollapsed]:
+                props.isCollapsed(),
+            }}
+          >
+            <ChevronDownIcon />
+          </div>
+          <h3 class={styles().pluginMarketplaceSectionTitle}>
+            {props.section.displayName}
+          </h3>
+        </div>
+      </div>
+
+      <Show when={!props.isCollapsed()}>
+        <div class={styles().pluginMarketplaceGrid}>
+          <For each={props.section.cards}>
+            {(card) => (
+              <PluginCardComponent card={card} onAction={props.onCardAction} />
+            )}
+          </For>
+        </div>
+      </Show>
+    </div>
+  )
+}