feat(website): restore blocks (#382)

components/react/.storybook/main.ts

@@ -3,7 +3,7 @@ import { mergeConfig } from 'vite'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
 const config: StorybookConfig = {
-  stories: ['../src/stories/*.tsx'],
+  stories: ['../src/components/stories/*.tsx', '../src/plus/stories/*.tsx'],
   addons: [
     {
       name: '@storybook/addon-essentials',

package.json

@@ -12,7 +12,8 @@
     "react": "bun run --cwd components/react",
     "solid": "bun run --cwd components/solid",
     "vue": "bun run --cwd components/vue",
-    "demos:sync": "rsync -av --delete ./components/react/src/demos ./website/src/"
+    "demos:sync": "rsync -av --delete ./components/react/src/demos ./website/src/",
+    "blocks:sync": "rsync -av --delete ./components/react/src/plus/blocks ./website/src/components"
   },
   "dependencies": {
     "@biomejs/biome": "1.8.3",

website/.gitignore

@@ -39,4 +39,7 @@ next-env.d.ts
 styled-system
 styled-system-studio
 
-.velite
+.velite
+
+# Blocks
+src/components/blocks/*

website/package.json

@@ -7,30 +7,35 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "blocks:sync": "cp -a ../components/react/src/plus/blocks ./src/components"
   },
   "dependencies": {
     "@ark-ui/react": "3.5.0",
     "@biomejs/biome": "1.8.3",
     "@icons-pack/react-simple-icons": "9.6.0",
     "@pandacss/dev": "0.42.0",
     "@park-ui/panda-preset": "workspace:*",
+    "@types/file-saver": "2.0.7",
+    "file-saver": "2.0.5",
+    "jszip": "3.10.1",
     "@types/node": "20.14.10",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@uidotdev/usehooks": "2.4.1",
     "effect": "3.5.3",
+    "globby": "14.0.2",
     "lucide-react": "0.408.0",
     "next": "14.2.5",
     "next-themes": "0.3.0",
     "pandacss-preset-typography": "0.1.6",
+    "re-resizable": "6.9.17",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-frame-component": "5.2.7",
     "react-runner": "1.0.5",
     "rehype-autolink-headings": "7.1.0",
     "rehype-slug": "6.0.0",
-    "re-resizable": "6.9.17",
     "shiki": "1.10.3",
     "typescript": "5.5.3",
     "usehooks-ts": "3.1.0",

website/src/app/[framework]/blocks/[id]/page.tsx

@@ -0,0 +1,44 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { Container, Stack } from 'styled-system/jsx'
+import { BlockPlayground } from '~/components/examples/block-playground'
+import { PageHeader } from '~/components/page-header'
+import { blocks } from '.velite'
+
+interface Props {
+  params: {
+    id: string
+  }
+}
+
+export default async function Page(props: Props) {
+  const { params } = props
+  const block = blocks.find((block) => block.id === params.id)
+
+  if (!block) {
+    return notFound()
+  }
+
+  return (
+    <Container py={{ base: '16', md: '24' }}>
+      <Stack gap={{ base: '16', md: '24' }}>
+        <PageHeader heading={block.name} description={block.description} subHeading="Blocks" />
+        {block.variants.map((variant) => (
+          <BlockPlayground key={variant.id} block={block} variant={variant} />
+        ))}
+      </Stack>
+    </Container>
+  )
+}
+
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const { params } = props
+  const block = blocks.find((block) => block.id === params.id)
+
+  return block ? { title: block.name, description: block.description } : {}
+}
+
+export const generateStaticParams = () =>
+  ['react', 'solid', 'vue'].flatMap((framework) =>
+    blocks.map((block) => ({ framework, id: block.id })),
+  )

website/src/app/[framework]/blocks/layout.tsx

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from 'react'
+import { styled } from 'styled-system/jsx'
+
+export default function Layout(props: PropsWithChildren) {
+  const { children } = props
+
+  return <styled.main mt="16">{children}</styled.main>
+}

website/src/app/[framework]/blocks/page.tsx

@@ -0,0 +1,56 @@
+import { ImageIcon } from 'lucide-react'
+import type { Metadata } from 'next'
+import NextLink from 'next/link'
+import { Center, Container, Grid, GridItem, HStack, Stack } from 'styled-system/jsx'
+import { PageHeader } from '~/components/page-header'
+import { Card, Icon, Text } from '~/components/ui'
+import { blocks } from '.velite'
+
+export default async function Page() {
+  return (
+    <Container py={{ base: '16', md: '24' }}>
+      <Stack gap={{ base: '16', md: '24' }}>
+        <PageHeader
+          heading="Get started with Blocks"
+          subHeading="Blocks"
+          description="Explore our collection of building blocks to help you design and develop faster."
+        />
+        <Grid gridTemplateColumns={{ base: '1', sm: '2', md: '3' }} gap="8">
+          {blocks.map((block) => (
+            <NextLink key={block.id} href={`blocks/${block.id}`}>
+              <GridItem>
+                <Card.Root boxShadow="sm" overflow="hidden">
+                  <Card.Header pt="4" p="4">
+                    <Center bg="bg.subtle" h="48" borderRadius="l2">
+                      <Icon size="2xl" color="fg.disabled">
+                        <ImageIcon />
+                      </Icon>
+                    </Center>
+                  </Card.Header>
+                  <Card.Body>
+                    <HStack gap="2">
+                      <Text size="lg" fontWeight="semibold">
+                        {block.name}
+                      </Text>
+                    </HStack>
+                    <Text size="sm" color="fg.muted">
+                      {block.variantCount} variant{block.variantCount > 1 ? 's' : ''}
+                    </Text>
+                  </Card.Body>
+                </Card.Root>
+              </GridItem>
+            </NextLink>
+          ))}
+        </Grid>
+      </Stack>
+    </Container>
+  )
+}
+
+export const metadata: Metadata = {
+  title: 'Blocks',
+  description: 'Explore our collection of building blocks to help you design and develop faster.',
+}
+
+export const generateStaticParams = () =>
+  ['react', 'solid', 'vue'].map((framework) => ({ framework }))

website/src/app/[framework]/pricing/layout.tsx

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react'
+import { styled } from 'styled-system/jsx'
+
+export default function Layout(props: PropsWithChildren) {
+  const { children } = props
+  return <styled.main mt="16">{children}</styled.main>
+}

website/src/app/[framework]/pricing/page.tsx

@@ -26,4 +26,9 @@ export default async function Page() {
 
 export const metadata: Metadata = {
   title: 'Pricing',
+  description:
+    'Get access to all components and free updates. Customize it to your needs, and make it yours today!',
 }
+
+export const generateStaticParams = () =>
+  ['react', 'solid', 'vue'].map((framework) => ({ framework }))

website/src/components/copy-to-clipboard-button.tsx

@@ -1,7 +1,7 @@
 'use client'
-import { useCopyToClipboard } from '@uidotdev/usehooks'
 import { CheckIcon, CopyIcon } from 'lucide-react'
 import { useEffect, useState } from 'react'
+import { useCopyToClipboard } from 'usehooks-ts'
 import { IconButton } from '~/components/ui'
 
 interface Props {

website/src/components/examples/block-code-preview.tsx

@@ -0,0 +1,49 @@
+import { HStack } from 'styled-system/jsx'
+import { Tabs } from '~/components/ui'
+import { CodePreview } from '../code-preview'
+import { DownloadButton } from './download-button'
+
+interface Props {
+  files: { filename: string; content: string; html: string }[]
+}
+
+export const BlockCodePreview = (props: Props) => {
+  const { files } = props
+  return (
+    <Tabs.Root
+      defaultValue={files[0]?.filename}
+      borderRadius="l3"
+      overflow="hidden"
+      borderWidth="1px"
+      size="sm"
+    >
+      <HStack
+        justify="space-between"
+        bg="gray.dark.1"
+        boxShadow="0 -1px 0 0 inset var(--colors-gray-dark-4)"
+        pe="1"
+      >
+        <Tabs.List pt="1.5" boxShadow="none" ps="4">
+          {files.map(({ filename }) => (
+            <Tabs.Trigger
+              key={filename}
+              value={filename}
+              color="gray.dark.11"
+              _selected={{ color: 'white' }}
+              pb="2"
+            >
+              {filename}
+            </Tabs.Trigger>
+          ))}
+          <Tabs.Indicator bg="accent.default" />
+        </Tabs.List>
+        <DownloadButton name="File" files={files} />
+      </HStack>
+      {files.map(({ filename, content, html }) => (
+        <Tabs.Content key={filename} value={filename} p="0!">
+          <CodePreview code={content} html={html} />
+        </Tabs.Content>
+      ))}
+    </Tabs.Root>
+  )
+}