betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode/lifecycle-hooks-tab.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from '@admin/components/ui/accordion'
+import { Badge } from '@admin/components/ui/badge'
+import { getDevModeCodeBlockHeight } from '@admin/utils/dev-mode/code-block-height'
+import {
+  Eye,
+  FileCode2,
+  Inbox,
+  List,
+  type LucideIcon,
+  Pencil,
+  Plus,
+  Save,
+  Send,
+  Trash2
+} from 'lucide-react'
+import { CopyableCodeBlock } from './copyable-code-block'
+import type {
+  DevModeLifecycleHookExample,
+  DevModeLifecycleHookPhase,
+  DevModeSnippetIcon
+} from './dev-mode-types'
+
+interface LifecycleHooksTabProps {
+  lifecycleHooks: DevModeLifecycleHookExample[]
+}
+
+const LIFECYCLE_HOOK_ICONS = {
+  eye: Eye,
+  'file-code': FileCode2,
+  inbox: Inbox,
+  list: List,
+  pencil: Pencil,
+  plus: Plus,
+  save: Save,
+  send: Send,
+  trash: Trash2
+} satisfies Record<DevModeSnippetIcon, LucideIcon>
+
+const LIFECYCLE_HOOK_PHASE_LABELS = {
+  before: 'Before',
+  after: 'After'
+} satisfies Record<DevModeLifecycleHookPhase, string>
+
+export function LifecycleHooksTab({ lifecycleHooks }: LifecycleHooksTabProps) {
+  const firstHook = lifecycleHooks[0]
+
+  if (!firstHook) {
+    return (
+      <div className="flex min-h-80 items-center justify-center rounded-lg border border-dashed border-border px-6 text-center text-sm text-muted-foreground">
+        Lifecycle hook examples are generated for entity schemas in v1.
+      </div>
+    )
+  }
+
+  return (
+    <Accordion type="single" defaultValue={firstHook.id} className="min-h-0 shrink-0 rounded-lg">
+      {lifecycleHooks.map((hook) => {
+        const HookIcon = LIFECYCLE_HOOK_ICONS[hook.icon]
+        const phaseLabel = LIFECYCLE_HOOK_PHASE_LABELS[hook.phase]
+
+        return (
+          <AccordionItem key={hook.id} value={hook.id}>
+            <AccordionTrigger>
+              <span className="flex min-w-0 flex-1 items-center justify-between gap-3">
+                <span className="flex min-w-0 items-center gap-3">
+                  <HookIcon aria-hidden="true" className="size-3.5 shrink-0" />
+                  <div className="flex items-center gap-1.5">
+                    <span className="truncate">{hook.label}</span>
+                    <Badge variant={hook.phase === 'before' ? 'outline' : 'secondary'}>
+                      {phaseLabel}
+                    </Badge>
+                  </div>
+                </span>
+              </span>
+            </AccordionTrigger>
+            <AccordionContent className="pb-5">
+              <div className="flex min-h-0 flex-col gap-2">
+                <div
+                  className="flex min-h-0"
+                  style={{ height: getDevModeCodeBlockHeight(hook.code, 34) }}
+                >
+                  <CopyableCodeBlock label={hook.label} code={hook.code} language={hook.language} />
+                </div>
+
+                <div
+                  className="flex min-h-0"
+                  style={{
+                    height: getDevModeCodeBlockHeight(hook.contextExample.code, 24)
+                  }}
+                >
+                  <CopyableCodeBlock
+                    label={hook.contextExample.label}
+                    code={hook.contextExample.code}
+                    language={hook.contextExample.language}
+                  />
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        )
+      })}
+    </Accordion>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode/plain-code-fallback.tsx

@@ -0,0 +1,11 @@
+interface PlainCodeFallbackProps {
+  code: string
+}
+
+export function PlainCodeFallback({ code }: PlainCodeFallbackProps) {
+  return (
+    <pre className="min-h-full overflow-x-auto whitespace-pre p-3 font-mono text-xs leading-5 text-foreground">
+      {code}
+    </pre>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode/snippets-tab.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from '@admin/components/ui/accordion'
+import { Badge } from '@admin/components/ui/badge'
+import { getDevModeCodeBlockHeight } from '@admin/utils/dev-mode/code-block-height'
+import {
+  Eye,
+  FileCode2,
+  Inbox,
+  List,
+  type LucideIcon,
+  Pencil,
+  Plus,
+  Save,
+  Send,
+  Trash2
+} from 'lucide-react'
+import { CopyableCodeBlock } from './copyable-code-block'
+import type { DevModeSnippet, DevModeSnippetIcon, DevModeSnippetKind } from './dev-mode-types'
+
+interface SnippetsTabProps {
+  snippets: DevModeSnippet[]
+}
+
+const SNIPPET_ICONS = {
+  eye: Eye,
+  'file-code': FileCode2,
+  inbox: Inbox,
+  list: List,
+  pencil: Pencil,
+  plus: Plus,
+  save: Save,
+  send: Send,
+  trash: Trash2
+} satisfies Record<DevModeSnippetIcon, LucideIcon>
+
+const SNIPPET_KIND_LABELS = {
+  query: 'Query',
+  mutation: 'Mutation'
+} satisfies Record<DevModeSnippetKind, string>
+
+function getSnippetCodes(snippet: DevModeSnippet): string[] {
+  return snippet.codeTabs?.map((tab) => tab.code) ?? [snippet.code]
+}
+
+export function SnippetsTab({ snippets }: SnippetsTabProps) {
+  const firstSnippet = snippets[0]
+
+  if (!firstSnippet) {
+    return null
+  }
+
+  return (
+    <Accordion type="single" defaultValue={firstSnippet.id} className="min-h-0 shrink-0 rounded-lg">
+      {snippets.map((snippet) => {
+        const SnippetIcon = SNIPPET_ICONS[snippet.icon]
+        const snippetKindLabel = SNIPPET_KIND_LABELS[snippet.kind]
+
+        return (
+          <AccordionItem key={snippet.id} value={snippet.id}>
+            <AccordionTrigger>
+              <span className="flex min-w-0 flex-1 items-center justify-between gap-3">
+                <span className="flex min-w-0 items-center gap-3">
+                  <SnippetIcon aria-hidden="true" className="size-3.5 shrink-0" />
+                  <div className="flex items-center gap-1.5">
+                    <span className="truncate">{snippet.label}</span>
+                    <Badge variant={snippet.kind === 'query' ? 'outline' : 'secondary'}>
+                      {snippetKindLabel}
+                    </Badge>
+                  </div>
+                </span>
+              </span>
+            </AccordionTrigger>
+            <AccordionContent className="pb-5">
+              <div className="flex min-h-0 flex-col gap-2">
+                <div
+                  className="flex min-h-0"
+                  style={{
+                    height: getDevModeCodeBlockHeight(
+                      getSnippetCodes(snippet),
+                      34,
+                      (snippet.codeTabs?.length ?? 0) > 1
+                    )
+                  }}
+                >
+                  <CopyableCodeBlock
+                    label={snippet.label}
+                    code={snippet.code}
+                    language={snippet.language}
+                    tabs={snippet.codeTabs}
+                  />
+                </div>
+
+                {[snippet.payloadExample, snippet.responseExample].flatMap((example) =>
+                  example ? (
+                    <div
+                      key={example.label}
+                      className="flex min-h-0"
+                      style={{
+                        height: getDevModeCodeBlockHeight(example.code, 24)
+                      }}
+                    >
+                      <CopyableCodeBlock
+                        label={example.label}
+                        code={example.code}
+                        language={example.language}
+                      />
+                    </div>
+                  ) : (
+                    []
+                  )
+                )}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        )
+      })}
+    </Accordion>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode-integrate.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import type { Setting } from '@admin/actions/settings'
+import { Button } from '@admin/components/ui/button'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger
+} from '@admin/components/ui/drawer'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@admin/components/ui/tabs'
+import { useDevModeIntegration } from '@admin/hooks/use-dev-mode-integration'
+import { useSetting } from '@admin/hooks/use-settings'
+import { Code2 } from 'lucide-react'
+import { CopyableCodeBlock } from './dev-mode/copyable-code-block'
+import type {
+  DevModeIntegrationLoader,
+  DevModeIntegrationMetadata
+} from './dev-mode/dev-mode-types'
+import { LifecycleHooksTab } from './dev-mode/lifecycle-hooks-tab'
+import { SnippetsTab } from './dev-mode/snippets-tab'
+
+interface DevModeIntegrateButtonProps {
+  integration: DevModeIntegrationMetadata
+  loadIntegration: DevModeIntegrationLoader
+  initialSettings?: Setting | null
+}
+
+export function DevModeIntegrateButton({
+  integration,
+  loadIntegration,
+  initialSettings
+}: DevModeIntegrateButtonProps) {
+  const { data: settings } = useSetting({ initialData: initialSettings })
+  const {
+    integration: loadedIntegration,
+    isPending,
+    loadError,
+    handleOpenChange
+  } = useDevModeIntegration(loadIntegration)
+
+  if (settings?.devMode === false) {
+    return null
+  }
+
+  return (
+    <Drawer direction="right" handleOnly onOpenChange={handleOpenChange}>
+      <DrawerTrigger asChild>
+        <Button type="button" variant="outline">
+          <Code2 data-icon="inline-start" />
+          <span className="hidden sm:inline">Integration Snippets</span>
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent className="w-full overflow-hidden data-[vaul-drawer-direction=right]:sm:max-w-2xl data-[vaul-drawer-direction=right]:lg:max-w-4xl">
+        <DrawerHeader className="pb-4">
+          <DrawerTitle>{integration.schemaLabel}</DrawerTitle>
+          <DrawerDescription>
+            Generated {integration.schemaType} integration details.
+          </DrawerDescription>
+        </DrawerHeader>
+
+        {loadedIntegration ? (
+          <Tabs defaultValue="snippets" className="min-h-0 flex-1 overflow-hidden px-4 pb-4 gap-4">
+            <TabsList className="w-full">
+              <TabsTrigger value="snippets">Snippets</TabsTrigger>
+              <TabsTrigger value="lifecycle-hooks">Lifecycle Hooks</TabsTrigger>
+              <TabsTrigger value="schema">Schema</TabsTrigger>
+            </TabsList>
+            <TabsContent value="snippets" className="flex min-h-0 flex-col overflow-auto">
+              <SnippetsTab snippets={loadedIntegration.snippets} />
+            </TabsContent>
+            <TabsContent value="lifecycle-hooks" className="flex min-h-0 flex-col overflow-auto">
+              <LifecycleHooksTab lifecycleHooks={loadedIntegration.lifecycleHooks} />
+            </TabsContent>
+            <TabsContent value="schema" className="flex min-h-0 flex-col overflow-hidden">
+              <CopyableCodeBlock
+                label={`${integration.schemaLabel} schema`}
+                code={loadedIntegration.schemaJson}
+                language="json"
+              />
+            </TabsContent>
+          </Tabs>
+        ) : isPending ? (
+          <div className="flex min-h-80 items-center justify-center px-6 text-sm text-muted-foreground">
+            Loading integration details...
+          </div>
+        ) : loadError ? (
+          <div
+            role="alert"
+            className="flex min-h-80 items-center justify-center px-6 text-sm text-destructive"
+          >
+            {loadError}
+          </div>
+        ) : null}
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+export type {
+  DevModeIntegration,
+  DevModeIntegrationLoader,
+  DevModeIntegrationMetadata,
+  DevModeLifecycleHookExample,
+  DevModeSnippet
+} from './dev-mode/dev-mode-types'

package/dist/assets/adapters/next/templates/init/components/shared/entity-filters-bar.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import { DateRangePicker } from '@admin/components/custom/date-range-picker'
+import { Button } from '@admin/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger
+} from '@admin/components/ui/dropdown-menu'
+import { usePageScrollThreshold } from '@admin/hooks/use-page-scroll-threshold'
+import { cn } from '@admin/utils/shared/cn'
+import { ChevronDown, FilterX, X } from 'lucide-react'
+import * as React from 'react'
+import { SearchInput } from './search-input'
+
+const ALL_FILTER_VALUE = '__all__'
+const SCROLL_BORDER_OFFSET = 8
+
+interface SelectFilterDef {
+  key: string
+  label: string
+  type: 'select'
+  value: string
+  options: { label: string; value: string }[]
+}
+
+interface DateRangeFilterDef {
+  key: string
+  label: string
+  type: 'date-range'
+  from: string
+  to: string
+}
+
+type FilterDef = SelectFilterDef | DateRangeFilterDef
+
+interface EntityFiltersBarProps {
+  filters: FilterDef[]
+  activeFilterCount: number
+  onFilterChange: (updates: Record<string, string | null>) => void
+  onClearAll: () => void
+  search?: string
+  searchPlaceholder?: string
+  isPending?: boolean
+  onSearch?: (value: string | null) => void
+  actions?: React.ReactNode
+}
+
+export function EntityFiltersBar({
+  filters,
+  activeFilterCount,
+  onFilterChange,
+  onClearAll,
+  search,
+  searchPlaceholder = 'Search...',
+  isPending,
+  onSearch,
+  actions
+}: EntityFiltersBarProps) {
+  const hasScrolled = usePageScrollThreshold(SCROLL_BORDER_OFFSET)
+
+  return (
+    <div
+      className={cn(
+        'sticky z-10 flex gap-1 px-4 bg-background h-16 xl:flex-row xl:items-center xl:justify-between top-14 transition-shadow overflow-x-clip',
+        {
+          'shadow-modal/3': hasScrolled
+        }
+      )}
+    >
+      <div className="flex flex-1 items-center gap-1 w-full">
+        {onSearch ? (
+          <SearchInput
+            value={search}
+            placeholder={searchPlaceholder}
+            isPending={isPending}
+            onSearch={onSearch}
+          />
+        ) : null}
+
+        {filters.map((filter) => {
+          if (filter.type === 'date-range') {
+            return (
+              <DateRangePicker
+                key={filter.key}
+                from={filter.from || undefined}
+                to={filter.to || undefined}
+                onChange={(range) => {
+                  React.startTransition(() => {
+                    onFilterChange({
+                      [`${filter.key}From`]: range.from ?? null,
+                      [`${filter.key}To`]: range.to ?? null
+                    })
+                  })
+                }}
+                placeholder={`${filter.label} At`}
+                className="w-65"
+              />
+            )
+          }
+
+          return (
+            <div key={filter.key} className="flex items-center gap-1 relative">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" className="w-45 justify-between">
+                    {filter.value
+                      ? (filter.options.find((o) => o.value === filter.value)?.label ??
+                        filter.label)
+                      : `All ${filter.label}`}
+
+                    {!filter.value && (
+                      <ChevronDown className="size-4 absolute right-2.5 top-1/2 -translate-y-1/2 text-foreground" />
+                    )}
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuRadioGroup
+                    value={filter.value || ALL_FILTER_VALUE}
+                    onValueChange={(value) => {
+                      React.startTransition(() => {
+                        onFilterChange({
+                          [filter.key]: value === ALL_FILTER_VALUE ? null : value
+                        })
+                      })
+                    }}
+                  >
+                    <DropdownMenuRadioItem value={ALL_FILTER_VALUE}>
+                      All {filter.label}
+                    </DropdownMenuRadioItem>
+                    {filter.options.map((option) => (
+                      <DropdownMenuRadioItem key={option.value} value={option.value}>
+                        {option.label}
+                      </DropdownMenuRadioItem>
+                    ))}
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              {filter.value ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  className="absolute right-1 top-1/2 -translate-y-1/2 text-foreground size-7"
+                  onClick={() => {
+                    React.startTransition(() => {
+                      onFilterChange({ [filter.key]: null })
+                    })
+                  }}
+                  aria-label={`Clear ${filter.label.toLowerCase()} filter`}
+                >
+                  <X className="size-4" />
+                </Button>
+              ) : null}
+            </div>
+          )
+        })}
+      </div>
+
+      {activeFilterCount > 0 || actions ? (
+        <div className="flex items-center gap-1 self-auto">
+          {activeFilterCount > 0 && (
+            <Button
+              type="button"
+              variant="warning"
+              onClick={onClearAll}
+              disabled={activeFilterCount === 0}
+            >
+              <FilterX className="size-4" />
+              Clear Filters
+            </Button>
+          )}
+
+          {actions}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export type { FilterDef, SelectFilterDef, DateRangeFilterDef, EntityFiltersBarProps }

package/dist/assets/adapters/next/templates/init/components/shared/entity-metadata.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import type { EntityVersionWithAuthor } from '@admin/actions/entity-versions'
+import { EntityVersionsButton } from '@admin/components/shared/entity-versions/entity-versions-button'
+import { Badge } from '@admin/components/ui/badge'
+import { Separator } from '@admin/components/ui/separator'
+import { format } from 'date-fns'
+
+interface EntityMetadataData {
+  id: string | null
+  createdAt: Date | string
+  updatedAt: Date | string
+  createdByUser?: {
+    id: string
+    name: string
+    email: string
+  } | null
+  updatedByUser?: {
+    id: string
+    name: string
+    email: string
+  } | null
+  published?: boolean | null
+}
+
+interface EntityMetadataProps {
+  data: EntityMetadataData
+  entityType: string
+  entityId: string | null
+  getVersionsAction: (entityId: string) => Promise<EntityVersionWithAuthor[]>
+  restoreVersionAction: (versionId: string) => Promise<unknown>
+}
+
+export function EntityMetadata({
+  data,
+  entityType,
+  entityId,
+  getVersionsAction,
+  restoreVersionAction
+}: EntityMetadataProps) {
+  const updated = new Date(data.updatedAt)
+  const created = new Date(data.createdAt)
+  const fullFmt = 'PPpp'
+  const createdBy = data.createdByUser?.name || data.createdByUser?.email || 'System'
+  const updatedBy = data.updatedByUser?.name || data.updatedByUser?.email || 'System'
+  const status =
+    typeof data.published === 'boolean' ? (data.published ? 'Published' : 'Draft') : null
+
+  return (
+    <div className="flex w-full flex-wrap items-center justify-between gap-3 text-sm text-muted-foreground">
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="flex items-center gap-1">
+          <span>ID</span>
+          <span className="text-foreground">{data.id}</span>
+        </div>
+
+        <Separator orientation="vertical" className="h-4 rotate-20 my-auto" />
+
+        <div className="flex items-center gap-1">
+          <span>Created by</span>
+          <span className="text-foreground">{createdBy}</span>
+          <span>on</span>
+          <span className="text-foreground">{format(created, fullFmt)}</span>
+        </div>
+
+        <Separator orientation="vertical" className="h-4 rotate-20 my-auto" />
+
+        <div className="flex items-center gap-1">
+          <span>Last edited by</span>
+          <span className="text-foreground">{updatedBy}</span>
+          <span>on</span>
+          <span className="text-foreground">{format(updated, fullFmt)}</span>
+        </div>
+
+        {status ? (
+          <Badge variant="outline" className="h-6">
+            {status}
+          </Badge>
+        ) : null}
+      </div>
+      {entityId ? (
+        <EntityVersionsButton
+          entityType={entityType}
+          entityId={entityId}
+          updatedAt={data.updatedAt}
+          updatedByUser={data.updatedByUser ?? null}
+          getVersionsAction={getVersionsAction}
+          restoreVersionAction={restoreVersionAction}
+        />
+      ) : null}
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/entity-versions/entity-version-item.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import type { EntityVersionWithAuthor } from '@admin/actions/entity-versions'
+import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar'
+import { Badge } from '@admin/components/ui/badge'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@admin/components/ui/tooltip'
+import { getUserInitials } from '@admin/utils/user/user'
+import { format, formatDistanceToNow } from 'date-fns'
+import { EntityVersionRestoreDialog } from './entity-version-restore-dialog'
+
+interface EntityVersionItemProps {
+  version: EntityVersionWithAuthor
+  restoreVersionAction: (versionId: string) => Promise<unknown>
+  onRestored: () => void
+}
+
+export function EntityVersionItem({
+  version,
+  restoreVersionAction,
+  onRestored
+}: EntityVersionItemProps) {
+  const createdDate = new Date(version.createdAt)
+  const author = version.createdByUser
+  const authorLabel = author?.name || author?.email || 'System'
+
+  return (
+    <div className="flex items-center justify-between gap-3 rounded-2xl border border-border px-3 py-3">
+      <div className="flex min-w-0 items-center gap-3">
+        <Avatar size="sm">
+          {author?.image ? <AvatarImage src={author.image} alt={authorLabel} /> : null}
+          <AvatarFallback>{getUserInitials(authorLabel)}</AvatarFallback>
+        </Avatar>
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <p className="truncate font-medium text-foreground">{authorLabel}</p>
+            <Badge variant="secondary">v{version.version}</Badge>
+          </div>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <p className="w-fit text-xs text-muted-foreground">
+                Saved {formatDistanceToNow(createdDate, { addSuffix: true })}
+              </p>
+            </TooltipTrigger>
+            <TooltipContent>{format(createdDate, 'PPpp')}</TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+      <EntityVersionRestoreDialog
+        version={version}
+        restoreVersionAction={restoreVersionAction}
+        onRestored={onRestored}
+      />
+    </div>
+  )
+}