feat: e-commerce dashboard blocks (shadcn-ui#3236)

* feat(blocks): add e-commerce dashboard * feat(blocks): add products pages * style(blocks): run prettier * feat(www): update dashboard-05 * feat(www): update gap for dashboard-05 * feat(www): update dashboards * fix(www): review a11y for new blocks * fix(blocks): a11y for dashboard-07 * fix(www): blocks background * chore: update registry
ctate · Mar 28, 2024 · f47bb97 · f47bb97
1 parent 9813c59
commit f47bb97
Show file tree

Hide file tree

Showing 11 changed files with 4,041 additions and 21 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v18.17.0
+v20.5.1
diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
@@ -1697,6 +1697,33 @@ export const Index: Record<string, any> = {
       category: "undefined",
       subcategory: "undefined",
     },
+    "dashboard-05": {
+      name: "dashboard-05",
+      type: "components:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      component: React.lazy(() => import("@/registry/default/block/dashboard-05")),
+      files: ["registry/default/block/dashboard-05.tsx"],
+      category: "Application",
+      subcategory: "Dashboard",
+    },
+    "dashboard-06": {
+      name: "dashboard-06",
+      type: "components:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      component: React.lazy(() => import("@/registry/default/block/dashboard-06")),
+      files: ["registry/default/block/dashboard-06.tsx"],
+      category: "Application",
+      subcategory: "Dashboard",
+    },
+    "dashboard-07": {
+      name: "dashboard-07",
+      type: "components:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      component: React.lazy(() => import("@/registry/default/block/dashboard-07")),
+      files: ["registry/default/block/dashboard-07.tsx"],
+      category: "Application",
+      subcategory: "Dashboard",
+    },
     "dashboard-01": {
       name: "dashboard-01",
       type: "components:block",
@@ -3462,6 +3489,33 @@ export const Index: Record<string, any> = {
       category: "undefined",
       subcategory: "undefined",
     },
+    "dashboard-05": {
+      name: "dashboard-05",
+      type: "components:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/block/dashboard-05")),
+      files: ["registry/new-york/block/dashboard-05.tsx"],
+      category: "Application",
+      subcategory: "Dashboard",
+    },
+    "dashboard-06": {
+      name: "dashboard-06",
+      type: "components:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/block/dashboard-06")),
+      files: ["registry/new-york/block/dashboard-06.tsx"],
+      category: "Application",
+      subcategory: "Dashboard",
+    },
+    "dashboard-07": {
+      name: "dashboard-07",
+      type: "components:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      component: React.lazy(() => import("@/registry/new-york/block/dashboard-07")),
+      files: ["registry/new-york/block/dashboard-07.tsx"],
+      category: "Application",
+      subcategory: "Dashboard",
+    },
     "dashboard-01": {
       name: "dashboard-01",
       type: "components:block",

diff --git a/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx b/apps/www/app/(blocks)/blocks/[style]/[name]/page.tsx
@@ -1,11 +1,13 @@
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
 import { siteConfig } from "@/config/site"
 import { getAllBlockIds, getBlock } from "@/lib/blocks"
-import { absoluteUrl } from "@/lib/utils"
+import { absoluteUrl, cn } from "@/lib/utils"
 import { Style, styles } from "@/registry/styles"
 
 import "@/styles/mdx.css"
-import { Metadata } from "next"
-import { notFound } from "next/navigation"
+import "public/registry/themes.css"
 
 export async function generateMetadata({
   params,
@@ -79,7 +81,7 @@ export default async function BlockPage({
   const Component = block.component
 
   return (
-    <div className={block.container?.className || ""}>
+    <div className={cn(block.container?.className || "", "theme-zinc")}>
       <Component />
     </div>
   )

diff --git a/apps/www/components/block-preview.tsx b/apps/www/components/block-preview.tsx
@@ -62,7 +62,7 @@ export function BlockPreview({ block }: { block: Block }) {
     >
       <div className="flex flex-col items-center gap-4 sm:flex-row">
         <div className="flex items-center gap-2">
-          <TabsList className="hidden sm:flex">
+          <TabsList className="hidden h-8 sm:flex">
             <TabsTrigger value="preview">Preview</TabsTrigger>
             <TabsTrigger value="code">Code</TabsTrigger>
           </TabsList>
@@ -75,19 +75,6 @@ export function BlockPreview({ block }: { block: Block }) {
               <a href={`#${block.name}`}>
                 <Badge variant="outline">{block.name}</Badge>
               </a>
-              <Popover>
-                <PopoverTrigger className="hidden text-muted-foreground hover:text-foreground sm:flex">
-                  <Info className="h-3.5 w-3.5" />
-                  <span className="sr-only">Block description</span>
-                </PopoverTrigger>
-                <PopoverContent
-                  side="right"
-                  sideOffset={10}
-                  className="text-sm"
-                >
-                  {block.description}
-                </PopoverContent>
-              </Popover>
             </div>
           </div>
         </div>
@@ -116,7 +103,7 @@ export function BlockPreview({ block }: { block: Block }) {
                   <Tablet className="h-3.5 w-3.5" />
                 </ToggleGroupItem>
                 <ToggleGroupItem
-                  value="25"
+                  value="30"
                   className="h-[22px] w-[22px] rounded-sm p-0"
                 >
                   <Smartphone className="h-3.5 w-3.5" />
@@ -177,7 +164,7 @@ export function BlockPreview({ block }: { block: Block }) {
             ref={ref}
             className="relative rounded-lg border bg-background transition-all"
             defaultSize={100}
-            minSize={25}
+            minSize={30}
           >
             {isLoading ? (
               <div className="absolute inset-0 z-10 flex h-[--container-height] w-full items-center justify-center gap-2 text-sm text-muted-foreground">

diff --git a/apps/www/registry/blocks.ts b/apps/www/registry/blocks.ts
@@ -1,6 +1,69 @@
 import { Registry } from "@/registry/schema"
 
 export const blocks: Registry = [
+  {
+    name: "dashboard-05",
+    type: "components:block",
+    registryDependencies: [
+      "badge",
+      "breadcrumb",
+      "button",
+      "card",
+      "dropdown-menu",
+      "input",
+      "pagination",
+      "progress",
+      "separator",
+      "sheet",
+      "table",
+      "tabs",
+      "tooltip",
+    ],
+    files: ["block/dashboard-05.tsx"],
+    category: "Application",
+    subcategory: "Dashboard",
+  },
+  {
+    name: "dashboard-06",
+    type: "components:block",
+    registryDependencies: [
+      "badge",
+      "breadcrumb",
+      "button",
+      "card",
+      "dropdown-menu",
+      "input",
+      "sheet",
+      "table",
+      "tabs",
+      "tooltip",
+    ],
+    files: ["block/dashboard-06.tsx"],
+    category: "Application",
+    subcategory: "Dashboard",
+  },
+  {
+    name: "dashboard-07",
+    type: "components:block",
+    registryDependencies: [
+      "badge",
+      "breadcrumb",
+      "button",
+      "card",
+      "dropdown-menu",
+      "input",
+      "pagination",
+      "progress",
+      "separator",
+      "sheet",
+      "table",
+      "tabs",
+      "tooltip",
+    ],
+    files: ["block/dashboard-07.tsx"],
+    category: "Application",
+    subcategory: "Dashboard",
+  },
   {
     name: "dashboard-01",
     type: "components:block",