feat(react): add Card variant prop, type fixes, and Pro app (#85)

* fix(react): fix NativeSelect children type and Table optional dataIndex

- NativeSelect children type now accepts arrays of ReactElements
- Table ColumnType.dataIndex is now optional for action columns
- Updated getValue helper to handle undefined dataIndex gracefully

* feat(card): add variant prop with outlined, elevated, and filled styles

- Add CardVariant type: 'outlined' | 'elevated' | 'filled'
- outlined: border (default, same as bordered=true)
- elevated: box-shadow using --ty-shadow-card token
- filled: subtle background using --ty-color-fill token
- variant takes precedence over deprecated bordered prop
- Full backward compatibility: existing bordered prop still works
- Added Variant demo and updated docs (EN + CN)

* feat(pro): add Tiny Design Pro app with UI block examples

Next.js 15 static site with 20 block categories and 25 blocks
showcasing @tiny-design/react components. Features include:
- Live preview with responsive viewport toggle (desktop/tablet/mobile)
- Source code view with syntax highlighting and copy button
- Light/dark theme support with anti-FOUC script
- Static export for GitHub Pages deployment at /tiny-design/pro/

* feat(docs): add Pro nav link and update deploy workflow

- Add "Pro" link with "New" badge to docs header navigation
- Update deploy-site.yml to build and merge pro app output into
  the combined GitHub Pages deployment at /tiny-design/pro/

* chore: update pnpm-lock.yaml

* chore: add changeset for card variant and type fixes

* fix(icon): add missing semicolons in svg-icons demo

* refactor(pro): use react-runner for block previews

Replace direct component imports with react-runner's useRunner hook.
Blocks are now rendered from their raw source strings, making the
source code the single source of truth for both preview and code view.
This removes the duplicate dynamic import per block.

* fix(pro): exclude ?raw imports from SWC transform in webpack config

Existing Next.js oneOf rules were compiling TSX before the asset/source
loader could read the original text. Now ?raw queries are excluded from
all oneOf sub-rules so the raw source is preserved as-is.

* fix(pro): strip Next.js HMR code from raw source in dev mode

In dev mode, Next.js appends import.meta.webpackHot HMR code to
asset/source modules, causing react-runner's sucrase transform to
fail with "Cannot use import.meta outside a module". Strip the
appended IIFE wrapper before passing the source to useRunner.

* fix(pro): fix hydration mismatch in theme toggle icon

Defer theme-dependent icon rendering until after mount to prevent
server/client mismatch when localStorage theme differs from default.

* fix: build issue

* feat: update pro page

* chore: update styles

* fix: build issues

* chore: fix file path

Author: wangdicoder

.changeset/card-variant-and-type-fixes.md

@@ -0,0 +1,5 @@
+---
+"@tiny-design/react": minor
+---
+
+Add `variant` prop to Card component (`outlined`, `elevated`, `filled`). Fix NativeSelect children type to accept arrays. Make Table ColumnType `dataIndex` optional for action columns.

.github/workflows/deploy-site.yml

@@ -43,6 +43,14 @@ jobs:
       - name: Copy 404.html for SPA routing
         run: cp apps/docs/build/index.html apps/docs/build/404.html
 
+      - name: Build pro site
+        run: pnpm --filter @tiny-design/pro build
+        env:
+          NEXT_PUBLIC_BASE_PATH: /tiny-design/pro
+
+      - name: Merge pro into docs output
+        run: cp -r apps/pro/out/ apps/docs/build/pro/
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

apps/docs/src/containers/theme-editor/components/preview-panel.tsx

@@ -126,7 +126,10 @@ export const PreviewPanel = (): React.ReactElement => {
         </Flex>
         <Table columns={tableColumns} dataSource={tableData} pagination={false} bordered />
         <Card title="Card Title" style={{ marginTop: 16 }}>
-          <p>Card content with some text to show how typography looks in a card component.</p>
+          <Card.Content>
+            <p>Card content with some text to show how typography looks in a card component.</p>
+            <p>Card content with some text to show how typography looks in a card component.</p>
+          </Card.Content>
         </Card>
         <Flex gap="sm" wrap="wrap" style={{ marginTop: 16 }}>
           <Tag>Default</Tag>

apps/docs/src/locale/en_US.ts

@@ -7,6 +7,7 @@ const en_US: SiteLocale = {
     guide: 'Guide',
     theme: 'Theme',
     components: 'Components',
+    pro: 'Pro',
   },
   home: {
     subtitle: 'A Friendly UI Component Set for React',

apps/docs/src/locale/types.ts

@@ -5,6 +5,7 @@ export type SiteLocale = {
     guide: string;
     theme: string;
     components: string;
+    pro: string;
   };
   home: {
     subtitle: string;

apps/docs/src/locale/zh_CN.ts

@@ -7,6 +7,7 @@ const zh_CN: SiteLocale = {
     guide: '指南',
     theme: '主题',
     components: '组件',
+    pro: 'Pro',
   },
   home: {
     subtitle: '一套友好的 React UI 组件库',

apps/pro/.gitignore

@@ -0,0 +1,2 @@
+.next/
+out/

apps/pro/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/pro/next.config.ts

@@ -0,0 +1,63 @@
+import type { NextConfig } from 'next';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
+
+const nextConfig: NextConfig = {
+  output: 'export',
+  basePath,
+  trailingSlash: true,
+  images: { unoptimized: true },
+  sassOptions: {
+    includePaths: [
+      path.resolve(__dirname, 'node_modules'),
+      path.resolve(__dirname, '../../node_modules'),
+      path.resolve(__dirname, '../../packages/react/src'),
+    ],
+  },
+  webpack(config) {
+    // Source alias: resolve to package source (same pattern as docs app)
+    config.resolve.alias['@tiny-design/react'] = path.resolve(
+      __dirname,
+      '../../packages/react/src'
+    );
+    config.resolve.alias['@tiny-design/icons'] = path.resolve(
+      __dirname,
+      '../../packages/icons/src'
+    );
+
+    // ?raw imports: embed original file contents as strings at build time.
+    // We must exclude ?raw from existing oneOf rules so Next.js/SWC doesn't
+    // compile the TSX before we read it as plain text.
+    const rawQuery = /raw/;
+
+    for (const rule of config.module.rules) {
+      if (rule && typeof rule === 'object' && rule.oneOf) {
+        for (const oneOfRule of rule.oneOf) {
+          if (oneOfRule && typeof oneOfRule === 'object') {
+            // Add resourceQuery exclusion to each sub-rule
+            if (!oneOfRule.resourceQuery) {
+              oneOfRule.resourceQuery = { not: [rawQuery] };
+            } else if (oneOfRule.resourceQuery instanceof RegExp) {
+              oneOfRule.resourceQuery = {
+                and: [oneOfRule.resourceQuery],
+                not: [rawQuery],
+              };
+            }
+          }
+        }
+      }
+    }
+
+    config.module.rules.push({
+      resourceQuery: rawQuery,
+      type: 'asset/source',
+    });
+
+    return config;
+  },
+};
+
+export default nextConfig;

apps/pro/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@tiny-design/pro",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3001",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@tiny-design/icons": "workspace:*",
+    "@tiny-design/react": "workspace:*",
+    "@tiny-design/tokens": "workspace:*",
+    "classnames": "^2.5.0",
+    "next": "^15.3.4",
+    "prism-react-renderer": "^2.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-runner": "^1.0.5",
+    "sass": "^1.49.9"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "typescript": "^5.4.0"
+  }
+}