diff --git a/.changeset/25921-components-zero-consumer-exports.md b/.changeset/25921-components-zero-consumer-exports.md new file mode 100644 index 00000000000..56800e79679 --- /dev/null +++ b/.changeset/25921-components-zero-consumer-exports.md @@ -0,0 +1,49 @@ +--- +'@object-ui/components': patch +--- + +refactor(components)!: retire sixty-three zero-consumer shadcn sub-part exports, and delete the typography primitives nothing reads + +Clause-②: no (narrowing) +Metadata-protocol: none + + + +**BREAKING** for a host that imports any of these sixty-three names from `@object-ui/components`. None had an importer anywhere in the workspace or in hotcrm, so the Console and every `@object-ui/*` package are unaffected, and every schema node type (`menubar`, `navigation-menu`, `pagination`, `carousel`, `breadcrumb`, `context-menu`, `input-otp`, `table` and the rest) renders exactly as before. + +Twelve of them are **gone from the package, not only from the entry**, because nothing inside the package read them either: `src/ui/typography.tsx` is deleted with `TypographyH1`, `TypographyH2`, `TypographyH3`, `TypographyH4`, `TypographyP`, `TypographyBlockquote`, `TypographyList`, `TypographyInlineCode`, `TypographyLead`, `TypographyLarge`, `TypographySmall` and `TypographyMuted`. It was not a shadcn registry component (`shadcn-components.json` does not list it). + +The other fifty-one stay in their shadcn modules, which this package's own renderers read and which `pnpm shadcn:update` keeps in step with the registry, and only leave the entry: + +- `alert-dialog`: `AlertDialogOverlay`, `AlertDialogPortal` +- `breadcrumb`: `BreadcrumbEllipsis`, `BreadcrumbSeparator` +- `carousel`: `CarouselContent`, `CarouselNext`, `CarouselPrevious` +- `command`: `CommandShortcut` +- `context-menu`: `ContextMenuCheckboxItem`, `ContextMenuGroup`, `ContextMenuLabel`, `ContextMenuPortal`, `ContextMenuRadioGroup`, `ContextMenuRadioItem`, `ContextMenuShortcut` +- `drawer`: `DrawerOverlay`, `DrawerPortal` +- `form`: `useFormField` +- `input-otp`: `InputOTP`, `InputOTPSlot` +- `menubar`: `MenubarCheckboxItem`, `MenubarContent`, `MenubarGroup`, `MenubarLabel`, `MenubarPortal`, `MenubarRadioGroup`, `MenubarRadioItem`, `MenubarSeparator`, `MenubarShortcut`, `MenubarSub`, `MenubarSubContent`, `MenubarSubTrigger`, `MenubarTrigger` +- `navigation-menu`: `NavigationMenu`, `NavigationMenuContent`, `NavigationMenuIndicator`, `NavigationMenuLink`, `NavigationMenuList`, `NavigationMenuTrigger`, `NavigationMenuViewport`, `navigationMenuTriggerStyle` +- `pagination`: `PaginationContent`, `PaginationEllipsis`, `PaginationItem`, `PaginationLink`, `PaginationNext`, `PaginationPrevious` +- `select`: `SelectScrollDownButton`, `SelectScrollUpButton`, `SelectSeparator` +- `table`: `TableCaption` + +Every other name the entry exported stays exported unchanged, among them `AlertDialog` and its content parts, `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `Carousel`, `CarouselItem`, the type `CarouselApi` (the `setApi` prop of `Carousel` names it), `Command` and its parts, `ContextMenu` with its content, item, separator and sub-menu parts, `Drawer` and its parts, `Form` and its field parts, `InputOTPGroup`, `InputOTPSeparator`, `Menubar`, `MenubarMenu`, `MenubarItem`, `NavigationMenuItem`, `Pagination`, `Select` and its parts, `Table` and its parts, and `toggleVariants` (the props of `Toggle` and `ToggleGroup` are typed by it). + +What leaves, and what to write instead: + +- FROM `TypographyH1`, `TypographyH2`, `TypographyH3`, `TypographyH4`, `TypographyP`, `TypographyBlockquote`, `TypographyList`, `TypographyInlineCode`, `TypographyLead`, `TypographyLarge`, `TypographySmall`, `TypographyMuted` TO the plain element with the Tailwind classes you want (`h1`, `p`, `blockquote`, `code` and so on), or an `element:text` node with a heading `variant` such as `h2`. +- FROM `AlertDialogOverlay`, `AlertDialogPortal` TO `AlertDialogContent`, which already mounts the portal and the overlay. +- FROM `BreadcrumbEllipsis`, `BreadcrumbSeparator` TO the same parts in the host's own tree (`npx shadcn@latest add breadcrumb`), or a `breadcrumb` schema node, which draws the separators and the collapsed-crumb ellipsis itself. +- FROM `CarouselContent`, `CarouselNext`, `CarouselPrevious` TO the same parts in the host's own tree (`npx shadcn@latest add carousel`), or a `carousel` schema node. +- FROM `CommandShortcut` TO a `kbd` element (or `Kbd`) inside `CommandItem`. +- FROM `ContextMenuCheckboxItem`, `ContextMenuGroup`, `ContextMenuLabel`, `ContextMenuPortal`, `ContextMenuRadioGroup`, `ContextMenuRadioItem`, `ContextMenuShortcut` TO the same parts in the host's own tree (`npx shadcn@latest add context-menu`), or the `@radix-ui/react-context-menu` primitive they wrap. +- FROM `DrawerOverlay`, `DrawerPortal` TO `DrawerContent`, which already mounts the portal and the overlay. +- FROM `useFormField` TO `FormLabel`, `FormControl`, `FormDescription` and `FormMessage`, which read the same field state. +- FROM `InputOTP`, `InputOTPSlot` TO the same parts in the host's own tree (`npx shadcn@latest add input-otp`), or an `input-otp` schema node. +- FROM `MenubarCheckboxItem`, `MenubarContent`, `MenubarGroup`, `MenubarLabel`, `MenubarPortal`, `MenubarRadioGroup`, `MenubarRadioItem`, `MenubarSeparator`, `MenubarShortcut`, `MenubarSub`, `MenubarSubContent`, `MenubarSubTrigger`, `MenubarTrigger` TO the same parts in the host's own tree (`npx shadcn@latest add menubar`), or a `menubar` schema node. +- FROM `NavigationMenu`, `NavigationMenuContent`, `NavigationMenuIndicator`, `NavigationMenuLink`, `NavigationMenuList`, `NavigationMenuTrigger`, `NavigationMenuViewport`, `navigationMenuTriggerStyle` TO the same parts in the host's own tree (`npx shadcn@latest add navigation-menu`), or a `navigation-menu` schema node. +- FROM `PaginationContent`, `PaginationEllipsis`, `PaginationItem`, `PaginationLink`, `PaginationNext`, `PaginationPrevious` TO the same parts in the host's own tree (`npx shadcn@latest add pagination`), or a `pagination` schema node. +- FROM `SelectScrollDownButton`, `SelectScrollUpButton`, `SelectSeparator` TO `SelectContent`, which already draws the scroll buttons, and `Separator` between groups. +- FROM `TableCaption` TO a `caption` element inside `Table`. diff --git a/ui/apps/console/src/__tests__/preview-samples-registry-resolvable.test.ts b/ui/apps/console/src/__tests__/preview-samples-registry-resolvable.test.ts index e39137f8037..dd84c78fa5c 100644 --- a/ui/apps/console/src/__tests__/preview-samples-registry-resolvable.test.ts +++ b/ui/apps/console/src/__tests__/preview-samples-registry-resolvable.test.ts @@ -22,7 +22,7 @@ * through every spec release while resolving to nothing: `heading` has never * been registered in this repo (the nearest real things are `element:text` * with a heading `variant` such as `h2` (`heading` until 17.7.0 retired it), and the `ui/typography` - * primitives, which never go through the registry at all). Both `heading` + * primitives, which never went through the registry and are now deleted). Both `heading` * nodes in the `page` sample fell through to the ComponentRegistry fallback, * so the gallery's page card — the worked example of a composed page — showed * two fallback boxes where its title and its section heading should have been. diff --git a/ui/packages/components/src/__tests__/snapshot-critical.test.tsx b/ui/packages/components/src/__tests__/snapshot-critical.test.tsx index f5eaedc1df5..8ffe7ff3d39 100644 --- a/ui/packages/components/src/__tests__/snapshot-critical.test.tsx +++ b/ui/packages/components/src/__tests__/snapshot-critical.test.tsx @@ -61,10 +61,10 @@ import { BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, - BreadcrumbSeparator, Separator, Skeleton, } from '../index'; +import { BreadcrumbSeparator } from '../ui/breadcrumb'; // ─── Alert Snapshots ──────────────────────────────────────────────────── diff --git a/ui/packages/components/src/renderers/complex/carousel.tsx b/ui/packages/components/src/renderers/complex/carousel.tsx index b3e80379aec..184b4658b97 100644 --- a/ui/packages/components/src/renderers/complex/carousel.tsx +++ b/ui/packages/components/src/renderers/complex/carousel.tsx @@ -14,7 +14,7 @@ import { CarouselItem, CarouselPrevious, CarouselNext -} from '../../ui'; +} from '../../ui/carousel'; import { renderChildren } from '../../lib/utils'; ComponentRegistry.register('carousel', diff --git a/ui/packages/components/src/renderers/complex/table.tsx b/ui/packages/components/src/renderers/complex/table.tsx index 129aa903939..6b823101409 100644 --- a/ui/packages/components/src/renderers/complex/table.tsx +++ b/ui/packages/components/src/renderers/complex/table.tsx @@ -24,7 +24,7 @@ import { TableRow, TableCell, TableCaption -} from '../../ui'; +} from '../../ui/table'; // A simple data-driven table ComponentRegistry.register('table', diff --git a/ui/packages/components/src/renderers/form/input-otp.tsx b/ui/packages/components/src/renderers/form/input-otp.tsx index a60bf1310ce..389c0d8e28e 100644 --- a/ui/packages/components/src/renderers/form/input-otp.tsx +++ b/ui/packages/components/src/renderers/form/input-otp.tsx @@ -8,7 +8,7 @@ import { ComponentRegistry } from '@object-ui/core'; import type { InputOTPSchema } from '@object-ui/types'; -import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '../../ui'; +import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '../../ui/input-otp'; import { toFormControlDomProps } from '../../lib/form-control-dom-props'; import type { RendererHostProps } from '../../lib/renderer-host-props'; diff --git a/ui/packages/components/src/renderers/navigation/header-bar.tsx b/ui/packages/components/src/renderers/navigation/header-bar.tsx index ce3850854ae..3dde30a436f 100644 --- a/ui/packages/components/src/renderers/navigation/header-bar.tsx +++ b/ui/packages/components/src/renderers/navigation/header-bar.tsx @@ -17,7 +17,6 @@ import { BreadcrumbList, BreadcrumbItem, BreadcrumbLink, - BreadcrumbSeparator, BreadcrumbPage, DropdownMenu, DropdownMenuTrigger, @@ -25,6 +24,7 @@ import { DropdownMenuItem, Input, } from '../../ui'; +import { BreadcrumbSeparator } from '../../ui/breadcrumb'; import { ChevronDown, Search } from 'lucide-react'; // `crumbs` is typed `BreadcrumbItem[]` — the SAME declaration `ui:breadcrumb`'s // `items` uses — and `BreadcrumbItem.icon` is not merely declared but DESCRIBED diff --git a/ui/packages/components/src/renderers/overlay/context-menu.tsx b/ui/packages/components/src/renderers/overlay/context-menu.tsx index fe9ebeb30dd..22cecc5c1b7 100644 --- a/ui/packages/components/src/renderers/overlay/context-menu.tsx +++ b/ui/packages/components/src/renderers/overlay/context-menu.tsx @@ -18,7 +18,7 @@ import { ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuShortcut -} from '../../ui'; +} from '../../ui/context-menu'; import { renderChildren } from '../../lib/utils'; // Same-package sibling import, the path `renderers/complex/data-table.tsx` // already uses. `icon` on a menu item is an authored lucide NAME. The twin diff --git a/ui/packages/components/src/ui/index.ts b/ui/packages/components/src/ui/index.ts index dee07bec81e..7c1e3163bbb 100644 --- a/ui/packages/components/src/ui/index.ts +++ b/ui/packages/components/src/ui/index.ts @@ -6,32 +6,86 @@ * LICENSE file in the root directory of this source tree. */ +// A primitive whose sub-parts nothing outside this package imports is +// re-exported as a named list, not `export *` (objectstack#25921): the parts +// left off stay in their module for this package's own renderers. export * from './accordion'; -export * from './alert-dialog'; +export { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from './alert-dialog'; export * from './alert'; export * from './aspect-ratio'; export * from './avatar'; export * from './badge'; -export * from './breadcrumb'; +export { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, +} from './breadcrumb'; export * from './button'; export * from './calendar'; export * from './card'; -export * from './carousel'; +export { Carousel, type CarouselApi, CarouselItem } from './carousel'; export * from './checkbox'; export * from './collapsible'; -export * from './command'; -export * from './context-menu'; +export { + Command, + CommandDialog, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, + CommandSeparator, +} from './command'; +export { + ContextMenu, + ContextMenuContent, + ContextMenuItem, + ContextMenuSeparator, + ContextMenuSub, + ContextMenuSubContent, + ContextMenuSubTrigger, + ContextMenuTrigger, +} from './context-menu'; export * from './dialog'; -export * from './drawer'; +export { + Drawer, + DrawerClose, + DrawerContent, + DrawerDescription, + DrawerFooter, + DrawerHeader, + DrawerTitle, + DrawerTrigger, +} from './drawer'; export * from './dropdown-menu'; -export * from './form'; +export { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from './form'; export * from './hover-card'; -export * from './input-otp'; +export { InputOTPGroup, InputOTPSeparator } from './input-otp'; export * from './input'; export * from './label'; -export * from './menubar'; -export * from './navigation-menu'; -export * from './pagination'; +export { Menubar, MenubarItem, MenubarMenu } from './menubar'; +export { NavigationMenuItem } from './navigation-menu'; +export { Pagination } from './pagination'; export * from './popover'; export * from './progress'; export * from './radio-group'; @@ -39,7 +93,15 @@ export * from './radio-group'; // and exporting them from both places would collide (TS2308) — `src/index.ts` // star-exports `./ui` and `./custom` side by side. export * from './scroll-area'; -export * from './select'; +export { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectTrigger, + SelectValue, +} from './select'; export * from './separator'; export * from './sheet'; export * from './sidebar'; @@ -48,10 +110,17 @@ export * from './slider'; export * from './sonner'; export { Toaster } from './sonner'; export * from './switch'; -export * from './table'; +export { + Table, + TableBody, + TableCell, + TableFooter, + TableHead, + TableHeader, + TableRow, +} from './table'; export * from './tabs'; export * from './textarea'; export * from './toggle-group'; export * from './toggle'; export * from './tooltip'; -export * from './typography'; diff --git a/ui/packages/components/src/ui/typography.tsx b/ui/packages/components/src/ui/typography.tsx deleted file mode 100644 index 5b1615a64ce..00000000000 --- a/ui/packages/components/src/ui/typography.tsx +++ /dev/null @@ -1,85 +0,0 @@ -/** - * ObjectUI - * Copyright (c) 2024-present ObjectStack Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import * as React from "react" -import { cn } from "../lib/utils" - -const TypographyH1 = React.forwardRef>(({ className, ...props }, ref) => ( -

-)) -TypographyH1.displayName = "TypographyH1" - -const TypographyH2 = React.forwardRef>(({ className, ...props }, ref) => ( -

-)) -TypographyH2.displayName = "TypographyH2" - -const TypographyH3 = React.forwardRef>(({ className, ...props }, ref) => ( -

-)) -TypographyH3.displayName = "TypographyH3" - -const TypographyH4 = React.forwardRef>(({ className, ...props }, ref) => ( -

-)) -TypographyH4.displayName = "TypographyH4" - -const TypographyP = React.forwardRef>(({ className, ...props }, ref) => ( -

-)) -TypographyP.displayName = "TypographyP" - -const TypographyBlockquote = React.forwardRef>(({ className, ...props }, ref) => ( -

-)) -TypographyBlockquote.displayName = "TypographyBlockquote" - -const TypographyList = React.forwardRef>(({ className, ...props }, ref) => ( -
    li]:mt-2", className)} {...props} /> -)) -TypographyList.displayName = "TypographyList" - -const TypographyInlineCode = React.forwardRef>(({ className, ...props }, ref) => ( - -)) -TypographyInlineCode.displayName = "TypographyInlineCode" - -const TypographyLead = React.forwardRef>(({ className, ...props }, ref) => ( -

    -)) -TypographyLead.displayName = "TypographyLead" - -const TypographyLarge = React.forwardRef>(({ className, ...props }, ref) => ( -

    -)) -TypographyLarge.displayName = "TypographyLarge" - -const TypographySmall = React.forwardRef>(({ className, ...props }, ref) => ( - -)) -TypographySmall.displayName = "TypographySmall" - -const TypographyMuted = React.forwardRef>(({ className, ...props }, ref) => ( -

    -)) -TypographyMuted.displayName = "TypographyMuted" - -export { - TypographyH1, - TypographyH2, - TypographyH3, - TypographyH4, - TypographyP, - TypographyBlockquote, - TypographyList, - TypographyInlineCode, - TypographyLead, - TypographyLarge, - TypographySmall, - TypographyMuted, -}