feat(ui)!: component namespacing (#199)

BREAKING CHANGES: namespaced components now require `.Root` element. removed double-label-link from the library
darenmalfait · Aug 30, 2024 · 94d0299 · 94d0299
1 parent c391a77
commit 94d0299
Show file tree

Hide file tree

Showing 166 changed files with 2,351 additions and 1,519 deletions.
diff --git a/.changeset/fifty-houses-act.md b/.changeset/fifty-houses-act.md
@@ -0,0 +1,18 @@
+---
+'@nerdfish/ui': major
+---
+
+## Namespacing components with dot notation
+
+Using the current way of using `Object.assign` to namespace components breaks consuming React Server Components. It also has limitations to tree-shaking capabilities.
+
+[https://github.com/vercel/next.js/issues/51593](See github issue)
+
+We need to change the way we namespace components to be compatible with React Server Components.
+
+Now, all components are being exported directly from the package, but also as a namespaced component in another way.
+The limitations is that namespaced component now always have a `.Root` element.
+
+for example, a `Dialog` would now be available as `Dialog.Root`, which to why these are breaking changes.
+
+
diff --git a/.changeset/green-cougars-rescue.md b/.changeset/green-cougars-rescue.md
@@ -0,0 +1,5 @@
+---
+'@nerdfish/ui': patch
+---
+
+fix the padding in `Alert` when there is an icon
diff --git a/.changeset/wild-camels-grow.md b/.changeset/wild-camels-grow.md
@@ -0,0 +1,5 @@
+---
+'@nerdfish/ui': major
+---
+
+removed `DoubleLabelLink`
diff --git a/apps/docs/content/components/accordion.mdx b/apps/docs/content/components/accordion.mdx
@@ -21,7 +21,7 @@ import { Accordion } from '@nerdfishui/ui'
 ```
 
 ```tsx
-<Accordion type="single" collapsible>
+<Accordion.Root type="single" collapsible>
 	<Accordion.Item value="item-1">
 		<Accordion.Trigger>Fish</Accordion.Trigger>
 		<Accordion.Content>

diff --git a/apps/docs/content/components/alert-dialog.mdx b/apps/docs/content/components/alert-dialog.mdx
@@ -21,7 +21,7 @@ import { AlertDialog } from '@nerdfishui/ui'
 ```
 
 ```tsx
-<AlertDialog>
+<AlertDialog.Root>
 	<AlertDialog.Trigger>Open</AlertDialog.Trigger>
 	<AlertDialog.Content>
 		<AlertDialog.Header>
@@ -36,5 +36,5 @@ import { AlertDialog } from '@nerdfishui/ui'
 			<AlertDialog.Action>Continue</AlertDialog.Action>
 		</AlertDialog.Footer>
 	</AlertDialog.Content>
-</AlertDialog>
+</AlertDialog.Root>
 ```
diff --git a/apps/docs/content/components/alert.mdx b/apps/docs/content/components/alert.mdx
@@ -19,7 +19,10 @@ import { Alert } from '@nerdfish/ui'
 ```
 
 ```tsx
-<Alert variant="danger">Alert</Alert>
+<Alert.Root variant="danger">
+	<Alert.Title>Example alert</Alert.Title>
+	<Alert.Description>Example description</Alert.Description>
+</Alert.Root>
 ```
 
 ## Examples

diff --git a/apps/docs/content/components/avatar.mdx b/apps/docs/content/components/avatar.mdx
@@ -22,11 +22,11 @@ import Image from 'next/image'
 ```
 
 ```tsx
-<Avatar>
+<Avatar.Root>
 	<Avatar.Image
 		src="https://avatars.githubusercontent.com/u/56068461?s=40&v=4"
 		alt="@darenmalfait"
 	/>
 	<Avatar.Fallback>DM</Avatar.Fallback>
-</Avatar>
+</Avatar.Root>
 ```
diff --git a/apps/docs/content/components/breadcrumb.mdx b/apps/docs/content/components/breadcrumb.mdx
@@ -21,14 +21,14 @@ import { Breadcrumb, DropdownMenu } from '@nerdfish/ui'
 ```
 
 ```tsx
-<Breadcrumb>
+<Breadcrumb.Root>
 	<Breadcrumb.List>
 		<Breadcrumb.Item>
 			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
 		</Breadcrumb.Item>
 		<Breadcrumb.Separator />
 		<Breadcrumb.Item>
-			<DropdownMenu>
+			<DropdownMenu.Root>
 				<DropdownMenu.Trigger className="flex items-center gap-1">
 					<Breadcrumb.Ellipsis className="size-4" />
 					<span className="sr-only">Toggle menu</span>
@@ -38,7 +38,7 @@ import { Breadcrumb, DropdownMenu } from '@nerdfish/ui'
 					<DropdownMenu.Item>Themes</DropdownMenu.Item>
 					<DropdownMenu.Item>GitHub</DropdownMenu.Item>
 				</DropdownMenu.Content>
-			</DropdownMenu>
+			</DropdownMenu.Root>
 		</Breadcrumb.Item>
 		<Breadcrumb.Separator />
 		<Breadcrumb.Item>
@@ -49,5 +49,5 @@ import { Breadcrumb, DropdownMenu } from '@nerdfish/ui'
 			<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
 		</Breadcrumb.Item>
 	</Breadcrumb.List>
-</Breadcrumb>
+</Breadcrumb.Root>
 ```
diff --git a/apps/docs/content/components/card.mdx b/apps/docs/content/components/card.mdx
@@ -22,16 +22,16 @@ import { Card } from '@nerdfish/ui'
 ```
 
 ```tsx
-<Card>
-	<CardHeader>
-		<CardTitle>Card Title</CardTitle>
-		<CardDescription>Card Description</CardDescription>
-	</CardHeader>
-	<CardContent>
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Card Title</Card.Title>
+		<Card.Description>Card Description</Card.Description>
+	</Card.Header>
+	<Card.Content>
 		<p>Card Content</p>
-	</CardContent>
-	<CardFooter>
+	</Card.Content>
+	<Card.Footer>
 		<p>Card Footer</p>
-	</CardFooter>
-</Card>
+	</Card.Footer>
+</Card.Root>
 ```
diff --git a/apps/docs/content/components/collapsible.mdx b/apps/docs/content/components/collapsible.mdx
@@ -20,11 +20,11 @@ import Image from 'next/image'
 ```
 
 ```tsx
-<Collapsible>
+<Collapsible.Root>
 	<Collapsible.Trigger>Can I use this in my project?</Collapsible.Trigger>
 	<Collapsible.Content>
 		Yes. Free to use for personal and commercial projects. No attribution
 		required.
 	</Collapsible.Content>
-</Collapsible>
+</Collapsible.Root>
 ```
diff --git a/apps/docs/content/components/command.mdx b/apps/docs/content/components/command.mdx
@@ -20,7 +20,7 @@ import { Command } from '@nerdfish/ui'
 ```
 
 ```tsx
-<Command>
+<Command.Root>
 	<Command.Input placeholder="Type a command or search..." />
 	<Command.Empty>No results found.</Command.Empty>
 	<Command.List>
@@ -36,7 +36,7 @@ import { Command } from '@nerdfish/ui'
 			<Command.Item>Settings</Command.Item>
 		</Command.Group>
 	</Command.List>
-</Command>
+</Command.Root>
 ```
 
 ## Dialog

diff --git a/apps/docs/content/components/dialog.mdx b/apps/docs/content/components/dialog.mdx
@@ -21,7 +21,7 @@ import { Dialog } from '@nerdfish/ui'
 ```
 
 ```tsx
-<Dialog>
+<Dialog.Root>
 	<Dialog.Trigger>Remove order</Dialog.Trigger>
 	<Dialog.Content>
 		<Dialog.Header>
@@ -32,5 +32,5 @@ import { Dialog } from '@nerdfish/ui'
 			</Dialog.Description>
 		</Dialog.Header>
 	</Dialog.Content>
-</Dialog>
+</Dialog.Root>
 ```
diff --git a/apps/docs/content/components/double-label-link.mdx b/apps/docs/content/components/double-label-link.mdx
diff --git a/apps/docs/content/components/drawer.mdx b/apps/docs/content/components/drawer.mdx
@@ -21,7 +21,7 @@ import { Drawer, Button } from '@nerdfish/ui'
 ```
 
 ```tsx
-<Drawer>
+<Drawer.Root>
 	<Drawer.Trigger>Open</Drawer.Trigger>
 	<Drawer.Content>
 		<Drawer.Header>
@@ -35,7 +35,7 @@ import { Drawer, Button } from '@nerdfish/ui'
 			</Drawer.Close>
 		</Drawer.Footer>
 	</Drawer.Content>
-</Drawer>
+</Drawer.Root>
 ```
 
 ## Direction

diff --git a/apps/docs/content/components/dropdown-menu.mdx b/apps/docs/content/components/dropdown-menu.mdx
@@ -19,7 +19,7 @@ import { DropdownMenu } from '@nerdfish/ui'
 ```
 
 ```tsx
-<DropdownMenu>
+<DropdownMenu.Root>
 	<DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
 	<DropdownMenu.Content>
 		<DropdownMenu.Label>Cake Flavors</DropdownMenu.Label>
@@ -29,5 +29,5 @@ import { DropdownMenu } from '@nerdfish/ui'
 		<DropdownMenu.Item>Strawberry</DropdownMenu.Item>
 		<DropdownMenu.Item>Red Velvet</DropdownMenu.Item>
 	</DropdownMenu.Content>
-</DropdownMenu>
+</DropdownMenu.Root>
 ```
diff --git a/apps/docs/content/components/grid.mdx b/apps/docs/content/components/grid.mdx
@@ -19,12 +19,12 @@ import { Grid } from '@nerdfish/ui'
 ```
 
 ```tsx
-<Grid className="lg:grid-rows-3">
+<Grid.Root className="lg:grid-rows-3">
 	<Grid.Card className="lg:col-start-2 lg:col-end-3 lg:row-start-1 lg:row-end-4">
 		Content
 	</Grid.Card>
 	<Grid.Card className="lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3">
 		Content
 	</Grid.Card>
-</Grid>
+</Grid.Root>
 ```
diff --git a/apps/docs/content/components/hover-card.mdx b/apps/docs/content/components/hover-card.mdx
@@ -22,7 +22,7 @@ import { HoverCard } from '@nerdfish/ui'
 ```
 
 ```tsx
-<HoverCard>
+<HoverCard.Root>
 	<HoverCard.Trigger>Hover over the cake</HoverCard.Trigger>
 	<HoverCard.Content>
 		<div className="space-y-2">
@@ -33,5 +33,5 @@ import { HoverCard } from '@nerdfish/ui'
 			</p>
 		</div>
 	</HoverCard.Content>
-</HoverCard>
+</HoverCard.Root>
 ```
diff --git a/apps/docs/content/components/indicator.mdx b/apps/docs/content/components/indicator.mdx
@@ -19,14 +19,14 @@ import { Indicator } from '@nerdfish/ui'
 ```
 
 ```tsx
-<Indicator>
+<Indicator.Root>
 	<Indicator.Item>
 		<Badge variant="secondary" />
 	</Indicator.Item>
 	<div className="bg-inverted text-inverted grid h-32 w-32 place-items-center">
 		content
 	</div>
-</Indicator>
+</Indicator.Root>
 ```
 
 ## Item

diff --git a/apps/docs/content/components/input-otp.mdx b/apps/docs/content/components/input-otp.mdx
@@ -19,7 +19,7 @@ import { InputOTP } from '@nerdfish/ui'
 ```
 
 ```tsx
-<InputOTP
+<InputOTP.Root
 	maxLength={6}
 	render={({ slots }) => (
 		<>

diff --git a/apps/docs/content/components/input.mdx b/apps/docs/content/components/input.mdx
@@ -34,12 +34,6 @@ import { Input } from '@nerdfish/ui'
 	<InputDisabled />
 </ComponentExample>
 
-## Error
-
-<ComponentExample src="/src/components/examples/input/error.tsx">
-	<InputError />
-</ComponentExample>
-
 ## Size
 
 <ComponentExample src="/src/components/examples/input/size.tsx">

diff --git a/apps/docs/content/components/navigation-list.mdx b/apps/docs/content/components/navigation-list.mdx
@@ -20,7 +20,7 @@ import { NavigationList } from '@nerdfish/ui'
 ```
 
 ```tsx
-<NavigationList>
+<NavigationList.Root>
 	<NavigationList.Item href="https://www.nerdfish.be" title="Chocolate Cake" />
 	<NavigationList.Item
 		as="button"
@@ -34,5 +34,5 @@ import { NavigationList } from '@nerdfish/ui'
 		<NavigationList.Item title="Vanilla Cake" />
 		<NavigationList.Item title="Lemon Cake" />
 	</NavigationList.Section>
-</NavigationList>
+</NavigationList.Root>
 ```
diff --git a/apps/docs/content/components/navigation-menu.mdx b/apps/docs/content/components/navigation-menu.mdx
@@ -21,7 +21,7 @@ import { NavigationMenu } from '@nerdfish/ui'
 ```
 
 ```tsx
-<NavigationMenu>
+<NavigationMenu.Root>
 	<NavigationMenu.List>
 		<NavigationMenu.Item>
 			<NavigationMenu.Trigger>Item One</NavigationMenu.Trigger>
@@ -30,5 +30,5 @@ import { NavigationMenu } from '@nerdfish/ui'
 			</NavigationMenu.Content>
 		</NavigationMenu.Item>
 	</NavigationMenu.List>
-</NavigationMenu>
+</NavigationMenu.Root>
 ```
diff --git a/apps/docs/content/components/popover.mdx b/apps/docs/content/components/popover.mdx
@@ -19,8 +19,8 @@ import { Popover } from '@nerdfish/ui'
 ```
 
 ```tsx
-<Popover>
-	<PopoverTrigger>Open</PopoverTrigger>
-	<PopoverContent>Popover content</PopoverContent>
-</Popover>
+<Popover.Root>
+	<Popover.Trigger>Open</Popover.Trigger>
+	<Popover.Content>Popover content</Popover.Content>
+</Popover.Root>
 ```
diff --git a/apps/docs/content/components/radio-group.mdx b/apps/docs/content/components/radio-group.mdx
@@ -15,22 +15,22 @@ package:
 ## Usage
 
 ```tsx
-import { RadioGroup } from '@nerdfish/ui'
+import { RadioGroup, FieldLabel } from '@nerdfish/ui'
 ```
 
 ```tsx
-<RadioGroup defaultValue="comfortable" label="Spacing">
+<RadioGroup.Root defaultValue="comfortable" label="Spacing">
 	<div className="flex items-center space-x-2">
 		<RadioGroup.Item value="default" id="r1" />
-		<Label htmlFor="r1">Default</Label>
+		<FieldLabel htmlFor="r1">Default</FieldLabel>
 	</div>
 	<div className="flex items-center space-x-2">
 		<RadioGroup.Item value="comfortable" id="r2" />
-		<Label htmlFor="r2">Comfortable</Label>
+		<FieldLabel htmlFor="r2">Comfortable</FieldLabel>
 	</div>
 	<div className="flex items-center space-x-2">
 		<RadioGroup.Item value="compact" id="r3" />
-		<Label htmlFor="r3">Compact</Label>
+		<FieldLabel htmlFor="r3">Compact</FieldLabel>
 	</div>
-</RadioGroup>
+</RadioGroup.Root>
 ```