tembro 4.2.0 → 5.0.0

package/packages/cli/vendor/src/components/patterns/resource-detail-page.tsx

@@ -1,164 +0,0 @@
-import * as React from "react"
-
-import { Button } from "@/components/ui/button"
-import { DescriptionList, type DescriptionListItem } from "@/components/display/description-list"
-import { PageHeader, type PageHeaderProps } from "@/components/layout/page-header"
-import { cn } from "@/lib/utils"
-
-export type ResourceDetailPageDensity = "default" | "compact" | "comfortable"
-
-export type ResourceDetailPageSection = {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  actions?: React.ReactNode
-  hidden?: boolean
-  className?: string
-  bodyClassName?: string
-  items?: DescriptionListItem[]
-  children?: React.ReactNode
-}
-
-export type ResourceDetailPageProps = Omit<React.ComponentProps<"div">, "children"> & {
-  title?: React.ReactNode
-  description?: React.ReactNode
-  eyebrow?: React.ReactNode
-  actions?: React.ReactNode
-  breadcrumbs?: React.ReactNode
-  status?: React.ReactNode
-  summary?: React.ReactNode
-  meta?: React.ReactNode
-  sections?: ResourceDetailPageSection[]
-  children?: React.ReactNode
-  aside?: React.ReactNode
-  footer?: React.ReactNode
-  backLabel?: React.ReactNode
-  onBack?: () => void
-  headerProps?: Omit<PageHeaderProps, "title" | "description" | "actions" | "eyebrow">
-  density?: ResourceDetailPageDensity
-  pageHeaderClassName?: string
-  contentClassName?: string
-  asideClassName?: string
-  sectionClassName?: string
-}
-
-const densityClassName: Record<ResourceDetailPageDensity, string> = {
-  compact: "gap-3",
-  default: "gap-4",
-  comfortable: "gap-6",
-}
-
-function ResourceDetailPage({
-  className,
-  title,
-  description,
-  eyebrow,
-  actions,
-  breadcrumbs,
-  status,
-  summary,
-  meta,
-  sections,
-  children,
-  aside,
-  footer,
-  backLabel = "Back",
-  onBack,
-  headerProps,
-  density = "default",
-  pageHeaderClassName,
-  contentClassName,
-  asideClassName,
-  sectionClassName,
-  ...props
-}: ResourceDetailPageProps) {
-  const visibleSections = sections?.filter((section) => !section.hidden) ?? []
-  const hasHeader = Boolean(title || description || eyebrow || actions || onBack)
-  const headerActions = onBack || actions ? (
-    <>
-      {onBack && (
-        <Button type="button" variant="outline" onClick={onBack}>
-          {backLabel}
-        </Button>
-      )}
-      {actions}
-    </>
-  ) : undefined
-  const hasMainContent = Boolean(children || visibleSections.length > 0)
-
-  return (
-    <div
-      data-slot="resource-detail-page"
-      data-density={density}
-      className={cn("grid min-w-0", densityClassName[density], className)}
-      {...props}
-    >
-      {breadcrumbs && <div data-slot="resource-detail-page-breadcrumbs">{breadcrumbs}</div>}
-
-      {hasHeader && (
-        <PageHeader
-          data-slot="resource-detail-page-header"
-          eyebrow={eyebrow}
-          title={title}
-          description={description}
-          actions={headerActions}
-          className={pageHeaderClassName}
-          {...headerProps}
-        />
-      )}
-
-      {(status || summary || meta) && (
-        <div data-slot="resource-detail-page-summary" className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto]">
-          <div className="grid min-w-0 gap-3">
-            {status && <div data-slot="resource-detail-page-status">{status}</div>}
-            {summary && <div data-slot="resource-detail-page-summary-content">{summary}</div>}
-          </div>
-          {meta && <div data-slot="resource-detail-page-meta" className="min-w-0 lg:w-80">{meta}</div>}
-        </div>
-      )}
-
-      {(hasMainContent || aside) && (
-        <div
-          data-slot="resource-detail-page-content"
-          className={cn("grid min-w-0 gap-4", aside && "xl:grid-cols-[minmax(0,1fr)_20rem]", contentClassName)}
-        >
-          <div data-slot="resource-detail-page-main" className="grid min-w-0 gap-4">
-            {children}
-
-            {visibleSections.map((section) => (
-              <section
-                key={section.id}
-                data-slot="resource-detail-page-section"
-                className={cn("rounded-xl border bg-card text-card-foreground shadow-sm", section.className, sectionClassName)}
-              >
-                {(section.title || section.description || section.actions) && (
-                  <div className="flex flex-col gap-3 border-b p-4 sm:flex-row sm:items-start sm:justify-between">
-                    <div className="min-w-0 space-y-1">
-                      {section.title && <h2 className="text-base font-semibold leading-none tracking-tight">{section.title}</h2>}
-                      {section.description && <p className="text-sm text-muted-foreground">{section.description}</p>}
-                    </div>
-                    {section.actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{section.actions}</div>}
-                  </div>
-                )}
-
-                <div className={cn("p-4", section.bodyClassName)}>
-                  {section.children ?? (section.items ? <DescriptionList items={section.items} /> : null)}
-                </div>
-              </section>
-            ))}
-          </div>
-
-          {aside && (
-            <aside data-slot="resource-detail-page-aside" className={cn("min-w-0", asideClassName)}>
-              {aside}
-            </aside>
-          )}
-        </div>
-      )}
-
-      {footer && <div data-slot="resource-detail-page-footer">{footer}</div>}
-    </div>
-  )
-}
-
-export { ResourceDetailPage }

package/packages/cli/vendor/src/components/patterns/resource-page.tsx

@@ -1,149 +0,0 @@
-import * as React from "react"
-
-import { DataTable, type DataTableProps } from "@/components/data-table/data-table"
-import { PageHeader, type PageHeaderProps } from "@/components/layout/page-header"
-import { Section, type SectionProps } from "@/components/layout/section"
-import { cn } from "@/lib/utils"
-
-export type ResourcePageDensity = "default" | "compact" | "comfortable"
-
-export type ResourcePageSectionProps = Omit<SectionProps, "variant">
-
-function ResourcePageSection({
-  className,
-  title,
-  description,
-  actions,
-  headerClassName,
-  bodyClassName,
-  children,
-  ...props
-}: ResourcePageSectionProps) {
-  return (
-    <Section
-      data-slot="resource-page-section"
-      variant="panel"
-      title={title}
-      description={description}
-      actions={actions}
-      headerClassName={headerClassName}
-      bodyClassName={bodyClassName}
-      className={className}
-      {...props}
-    >
-      {children}
-    </Section>
-  )
-}
-
-export type ResourcePageProps<TData, TValue = unknown> = Omit<React.ComponentProps<"div">, "children"> & {
-  title?: React.ReactNode
-  description?: React.ReactNode
-  eyebrow?: React.ReactNode
-  actions?: React.ReactNode
-  breadcrumbs?: React.ReactNode
-  stats?: React.ReactNode
-  filters?: React.ReactNode
-  tabs?: React.ReactNode
-  table?: DataTableProps<TData, TValue>
-  children?: React.ReactNode
-  aside?: React.ReactNode
-  footer?: React.ReactNode
-  headerProps?: Omit<PageHeaderProps, "title" | "description" | "actions" | "eyebrow">
-  density?: ResourcePageDensity
-  pageHeaderClassName?: string
-  toolbarClassName?: string
-  contentClassName?: string
-  asideClassName?: string
-  asideWidth?: React.CSSProperties["width"]
-}
-
-const densityClassName: Record<ResourcePageDensity, string> = {
-  compact: "gap-3",
-  default: "gap-4",
-  comfortable: "gap-6",
-}
-
-function ResourcePage<TData, TValue = unknown>({
-  className,
-  title,
-  description,
-  eyebrow,
-  actions,
-  breadcrumbs,
-  stats,
-  filters,
-  tabs,
-  table,
-  children,
-  aside,
-  footer,
-  headerProps,
-  density = "default",
-  pageHeaderClassName,
-  toolbarClassName,
-  contentClassName,
-  asideClassName,
-  asideWidth = "20rem",
-  style,
-  ...props
-}: ResourcePageProps<TData, TValue>) {
-  const hasHeader = Boolean(title || description || eyebrow || actions)
-  const hasToolbar = Boolean(filters || tabs)
-  const hasMainContent = Boolean(children || table)
-
-  return (
-    <div
-      data-slot="resource-page"
-      data-density={density}
-      className={cn("grid min-w-0", densityClassName[density], className)}
-      style={{ "--resource-aside-width": asideWidth, ...style } as React.CSSProperties}
-      {...props}
-    >
-      {breadcrumbs && <div data-slot="resource-page-breadcrumbs">{breadcrumbs}</div>}
-
-      {hasHeader && (
-        <PageHeader
-          data-slot="resource-page-header"
-          eyebrow={eyebrow}
-          title={title}
-          description={description}
-          actions={actions}
-          className={pageHeaderClassName}
-          {...headerProps}
-        />
-      )}
-
-      {stats && <div data-slot="resource-page-stats">{stats}</div>}
-
-      {hasToolbar && (
-        <div data-slot="resource-page-toolbar" className={cn("grid gap-3", toolbarClassName)}>
-          {tabs && <div data-slot="resource-page-tabs">{tabs}</div>}
-          {filters && <div data-slot="resource-page-filters">{filters}</div>}
-        </div>
-      )}
-
-      {(hasMainContent || aside) && (
-        <div
-          data-slot="resource-page-content"
-          className={cn("grid min-w-0 gap-4", aside && "xl:grid-cols-[minmax(0,1fr)_var(--resource-aside-width)]", contentClassName)}
-        >
-          <div data-slot="resource-page-main" className="grid min-w-0 gap-4">
-            {children}
-            {table && <DataTable {...table} />}
-          </div>
-
-          {aside && (
-            <aside data-slot="resource-page-aside" className={cn("min-w-0", asideClassName)}>
-              {aside}
-            </aside>
-          )}
-        </div>
-      )}
-
-      {footer && <div data-slot="resource-page-footer">{footer}</div>}
-    </div>
-  )
-}
-
-export { ResourcePage, ResourcePageSection }

package/packages/cli/vendor/src/components/patterns/settings-page.tsx

@@ -1,84 +0,0 @@
-import * as React from "react"
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { cn } from "@/lib/utils"
-
-export type SettingsPageSection = {
-  value: string
-  label: React.ReactNode
-  description?: React.ReactNode
-  disabled?: boolean
-  content: React.ReactNode
-}
-
-export type SettingsPageProps = Omit<React.ComponentProps<"div">, "children"> & {
-  title?: React.ReactNode
-  description?: React.ReactNode
-  actions?: React.ReactNode
-  sections: SettingsPageSection[]
-  defaultValue?: string
-  value?: string
-  onValueChange?: (value: string) => void
-  navClassName?: string
-  contentClassName?: string
-}
-
-function SettingsPage({
-  className,
-  title,
-  description,
-  actions,
-  sections,
-  defaultValue,
-  value,
-  onValueChange,
-  navClassName,
-  contentClassName,
-  ...props
-}: SettingsPageProps) {
-  const firstEnabled = sections.find((section) => !section.disabled)
-  const resolvedDefaultValue = defaultValue ?? firstEnabled?.value
-  const hasHeader = Boolean(title || description || actions)
-
-  return (
-    <div data-slot="settings-page" className={cn("grid min-w-0 gap-5", className)} {...props}>
-      {hasHeader && (
-        <div data-slot="settings-page-header" className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          <div className="grid min-w-0 gap-1">
-            {title && <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>}
-            {description && <p className="max-w-3xl text-sm leading-6 text-muted-foreground">{description}</p>}
-          </div>
-          {actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
-        </div>
-      )}
-      <Tabs value={value} defaultValue={resolvedDefaultValue} onValueChange={onValueChange}>
-        <div className="grid gap-4 lg:grid-cols-[16rem_minmax(0,1fr)]">
-          <TabsList className={cn("h-auto w-full flex-col items-stretch justify-start gap-1 p-1", navClassName)}>
-            {sections.map((section) => (
-              <TabsTrigger
-                key={section.value}
-                value={section.value}
-                disabled={section.disabled}
-                className="w-full justify-start"
-              >
-                <span className="grid min-w-0 gap-0.5 text-left">
-                  <span className="truncate">{section.label}</span>
-                  {section.description && <span className="truncate text-xs font-normal text-muted-foreground">{section.description}</span>}
-                </span>
-              </TabsTrigger>
-            ))}
-          </TabsList>
-          <div data-slot="settings-page-content" className={cn("min-w-0", contentClassName)}>
-            {sections.map((section) => (
-              <TabsContent key={section.value} value={section.value}>
-                {section.content}
-              </TabsContent>
-            ))}
-          </div>
-        </div>
-      </Tabs>
-    </div>
-  )
-}
-
-export { SettingsPage }