Merge pull request #16 from sadmann7/add-masonry

feat: add masonry

Author: sadmann7

.github/setup/action.yml

@@ -13,4 +13,4 @@ runs:
         version: 9.15.4
 
     - run: pnpm install
-      shell: bash
+      shell: bash

.github/workflows/main.yml

@@ -81,4 +81,4 @@ jobs:
           version: 9.15.4
       - uses: ./.github/setup
 
-      - run: pnpm turbo typecheck
+      - run: pnpm turbo typecheck

.github/workflows/release.yml

@@ -19,42 +19,10 @@ jobs:
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          token: ${{ secrets.MY_GITHUB_TOKEN }}
-          
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 9.15.4
-          
       - uses: ./.github/setup
 
-      - name: Setup npm
-        run: |
-          # Create or update .npmrc
-          echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc
-          echo "@diceui:registry=https://registry.npmjs.org/" >> ~/.npmrc
-          npm config set access public
-          
-          # Debug info (without exposing token)
-          echo "--- NPM Config ---"
-          npm config list
-          echo "--- NPM User ---"
-          npm whoami || echo "Not authenticated"
-          echo "--- Registry ---"
-          npm config get registry
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Format and lint
-        run: pnpm lint:fix
-
       - name: Build
-        run: pnpm turbo build --no-cache --force
-        env:
-          TURBO_TOKEN: ""
-          TURBO_TEAM: ""
+        run: pnpm build
 
       - name: Create Release
         id: changesets
@@ -65,4 +33,5 @@ jobs:
           publish: pnpm changeset publish
         env:
           GITHUB_TOKEN: ${{ secrets.MY_GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}         
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+         

docs/__registry__/index.tsx

@@ -57,6 +57,22 @@ export const Index: Record<string, any> = {
       subcategory: "",
       chunks: []
     },
+    "masonry": {
+      name: "masonry",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/ui/masonry.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/ui/masonry.tsx")),
+      source: "",
+      category: "",
+      subcategory: "",
+      chunks: []
+    },
     "mention": {
       name: "mention",
       description: "",
@@ -333,6 +349,70 @@ export const Index: Record<string, any> = {
       subcategory: "",
       chunks: []
     },
+    "masonry-demo": {
+      name: "masonry-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: undefined,
+      files: [{
+        path: "registry/default/example/masonry-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/example/masonry-demo.tsx")),
+      source: "",
+      category: "",
+      subcategory: "",
+      chunks: []
+    },
+    "masonry-responsive-demo": {
+      name: "masonry-responsive-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["skeleton"],
+      files: [{
+        path: "registry/default/example/masonry-responsive-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/example/masonry-responsive-demo.tsx")),
+      source: "",
+      category: "",
+      subcategory: "",
+      chunks: []
+    },
+    "masonry-linear-demo": {
+      name: "masonry-linear-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["skeleton"],
+      files: [{
+        path: "registry/default/example/masonry-linear-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/example/masonry-linear-demo.tsx")),
+      source: "",
+      category: "",
+      subcategory: "",
+      chunks: []
+    },
+    "masonry-ssr-demo": {
+      name: "masonry-ssr-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["skeleton"],
+      files: [{
+        path: "registry/default/example/masonry-ssr-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/example/masonry-ssr-demo.tsx")),
+      source: "",
+      category: "",
+      subcategory: "",
+      chunks: []
+    },
     "mention-demo": {
       name: "mention-demo",
       description: "",

docs/app/(home)/pg/page.tsx

@@ -1,3 +1,4 @@
+import { HydrationBoundary } from "@/components/hydration-boundary";
 import { Shell } from "@/components/shell";
 import { Button } from "@/components/ui/button";
 import {
@@ -15,6 +16,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Textarea } from "@/components/ui/textarea";
 import { tricks } from "@/lib/data";
 import {
@@ -26,85 +28,117 @@ import {
   ComboboxItem,
   ComboboxTrigger,
 } from "@/registry/default/ui/combobox";
+import * as Masonry from "@/registry/default/ui/masonry";
 import * as Mention from "@diceui/mention";
 import { ChevronDown } from "lucide-react";
+import * as React from "react";
 
 export default function PlaygroundPage() {
+  const items = React.useMemo(
+    () =>
+      Array.from({ length: 10 }, (_, i) => ({
+        id: i.toString(),
+        content: `Item ${i + 1}`,
+        height: Math.floor(Math.random() * 100) + 100,
+      })),
+    [],
+  );
+
   return (
     <Shell>
-      <Textarea
-        placeholder="Type here..."
-        className="min-h-[80px] max-w-[40rem]"
-      />
-      <Mention.Root className="flex max-w-[40rem] flex-col gap-2 [&_[data-tag]]:rounded [&_[data-tag]]:bg-blue-200 [&_[data-tag]]:py-px [&_[data-tag]]:text-blue-950 dark:[&_[data-tag]]:bg-blue-800 dark:[&_[data-tag]]:text-blue-50">
-        <Mention.Label>Tricks</Mention.Label>
-        <Mention.Input
-          placeholder="Enter @ to mention a trick..."
-          className="flex min-h-[80px] w-full rounded-md border border-zinc-200 bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-600 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-zinc-800 focus-visible:dark:ring-zinc-300"
-          asChild
-        >
-          <textarea />
-        </Mention.Input>
-        <Mention.Portal>
-          <Mention.Content className="data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-40 rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in">
-            {tricks.map((trick) => (
-              <Mention.Item
-                key={trick.value}
-                label={trick.label}
-                value={trick.value}
-                className="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50"
-              >
-                {trick.label}
-              </Mention.Item>
-            ))}
-          </Mention.Content>
-        </Mention.Portal>
-      </Mention.Root>
-      <Combobox className="w-[15rem]">
-        <ComboboxAnchor>
-          <ComboboxInput placeholder="Search tricks..." />
-          <ComboboxTrigger>
-            <ChevronDown className="h-4 w-4" />
-          </ComboboxTrigger>
-        </ComboboxAnchor>
-        <ComboboxContent>
-          <ComboboxEmpty>No tricks found</ComboboxEmpty>
-          {tricks.map((trick) => (
-            <ComboboxItem key={trick.value} value={trick.value}>
-              {trick.label}
-            </ComboboxItem>
-          ))}
-        </ComboboxContent>
-      </Combobox>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline" size="sm" className="w-fit">
-            Open
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem>Apple</DropdownMenuItem>
-          <DropdownMenuItem>Banana</DropdownMenuItem>
-          <DropdownMenuItem>Blueberry</DropdownMenuItem>
-          <DropdownMenuItem>Grapes</DropdownMenuItem>
-          <DropdownMenuItem>Pineapple</DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <Select>
-        <SelectTrigger className="w-[11.25rem]">
-          <SelectValue placeholder="Select a trick" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Tricks</SelectLabel>
+      <Masonry.Root
+        columnCount={{ initial: 1, md: 2, lg: 4 }}
+        defaultColumnCount={4}
+        gap={16}
+      >
+        {items.map((item) => (
+          <Masonry.Item
+            key={item.id}
+            fallback={<Skeleton className="w-full" style={{ height: 160 }} />}
+            className="rounded-lg border bg-card p-4 text-card-foreground shadow"
+            style={{
+              height: item.height,
+            }}
+          >
+            {item.content}
+          </Masonry.Item>
+        ))}
+      </Masonry.Root>
+      <HydrationBoundary fallback={<Skeleton className="h-svh w-full" />}>
+        <Textarea
+          placeholder="Type here..."
+          className="min-h-[80px] max-w-[40rem]"
+        />
+        <Mention.Root className="flex max-w-[40rem] flex-col gap-2 [&_[data-tag]]:rounded [&_[data-tag]]:bg-blue-200 [&_[data-tag]]:py-px [&_[data-tag]]:text-blue-950 dark:[&_[data-tag]]:bg-blue-800 dark:[&_[data-tag]]:text-blue-50">
+          <Mention.Label>Tricks</Mention.Label>
+          <Mention.Input
+            placeholder="Enter @ to mention a trick..."
+            className="flex min-h-[80px] w-full rounded-md border border-zinc-200 bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-600 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-zinc-800 focus-visible:dark:ring-zinc-300"
+            asChild
+          >
+            <textarea />
+          </Mention.Input>
+          <Mention.Portal>
+            <Mention.Content className="data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-40 rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in">
+              {tricks.map((trick) => (
+                <Mention.Item
+                  key={trick.value}
+                  label={trick.label}
+                  value={trick.value}
+                  className="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50"
+                >
+                  {trick.label}
+                </Mention.Item>
+              ))}
+            </Mention.Content>
+          </Mention.Portal>
+        </Mention.Root>
+        <Combobox className="w-[15rem]">
+          <ComboboxAnchor>
+            <ComboboxInput placeholder="Search tricks..." />
+            <ComboboxTrigger>
+              <ChevronDown className="h-4 w-4" />
+            </ComboboxTrigger>
+          </ComboboxAnchor>
+          <ComboboxContent>
+            <ComboboxEmpty>No tricks found</ComboboxEmpty>
             {tricks.map((trick) => (
-              <SelectItem key={trick.value} value={trick.value}>
+              <ComboboxItem key={trick.value} value={trick.value}>
                 {trick.label}
-              </SelectItem>
+              </ComboboxItem>
             ))}
-          </SelectGroup>
-        </SelectContent>
-      </Select>
+          </ComboboxContent>
+        </Combobox>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm" className="w-fit">
+              Open
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            <DropdownMenuItem>Apple</DropdownMenuItem>
+            <DropdownMenuItem>Banana</DropdownMenuItem>
+            <DropdownMenuItem>Blueberry</DropdownMenuItem>
+            <DropdownMenuItem>Grapes</DropdownMenuItem>
+            <DropdownMenuItem>Pineapple</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Select>
+          <SelectTrigger className="w-[11.25rem]">
+            <SelectValue placeholder="Select a trick" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Tricks</SelectLabel>
+              {tricks.map((trick) => (
+                <SelectItem key={trick.value} value={trick.value}>
+                  {trick.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </HydrationBoundary>
     </Shell>
   );
 }

docs/app/layout.tsx

@@ -1,4 +1,5 @@
 import { Providers } from "@/components/providers";
+import { TailwindIndicator } from "@/components/tailwind-indicator";
 import { Toaster } from "@/components/ui/sonner";
 import { siteConfig } from "@/config/site";
 import { fontMono, fontSans } from "@/lib/fonts";
@@ -73,6 +74,8 @@ export default function RootLayout({ children }: RootLayoutProps) {
           data-site-id="diceui.com"
           src="https://assets.onedollarstats.com/tracker.js"
         />
+        <TailwindIndicator />
+        <Toaster />
         <Providers
           theme={{
             attribute: "class",
@@ -83,7 +86,6 @@ export default function RootLayout({ children }: RootLayoutProps) {
         >
           {children}
         </Providers>
-        <Toaster />
       </body>
     </html>
   );