Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 hanzo-dev
|
8e9480548e |
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
|
||||
"changelog": ["@changesets/changelog-github", { "repo": "shadcn-ui/ui" }],
|
||||
"commit": false,
|
||||
"fixed": [],
|
||||
"linked": [],
|
||||
"access": "public",
|
||||
"baseBranch": "main",
|
||||
"updateInternalDependencies": "patch",
|
||||
"ignore": ["v4", "tests"]
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(git add:*)",
|
||||
"Bash(git commit:*)",
|
||||
"Bash(git push:*)",
|
||||
"Bash(pnpm registry:build:*)",
|
||||
"Bash(pnpm build:*)",
|
||||
"Bash(pnpm add:*)",
|
||||
"Bash(pnpm dev)",
|
||||
"Bash(jq:*)",
|
||||
"Bash(curl:*)"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": []
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
node_modules/
|
||||
target/
|
||||
.next/
|
||||
build/
|
||||
dist/
|
||||
|
||||
/templates/
|
||||
/fixtures/
|
||||
@@ -1,32 +0,0 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/eslintrc",
|
||||
"root": true,
|
||||
"extends": [
|
||||
"next/core-web-vitals",
|
||||
"turbo",
|
||||
"prettier",
|
||||
"plugin:tailwindcss/recommended"
|
||||
],
|
||||
"plugins": ["tailwindcss"],
|
||||
"ignorePatterns": ["**/fixtures/**"],
|
||||
"rules": {
|
||||
"@next/next/no-html-link-for-pages": "off",
|
||||
"tailwindcss/no-custom-classname": "off",
|
||||
"tailwindcss/classnames-order": "error"
|
||||
},
|
||||
"settings": {
|
||||
"tailwindcss": {
|
||||
"callees": ["cn", "cva"],
|
||||
"config": "tailwind.config.cjs"
|
||||
},
|
||||
"next": {
|
||||
"rootDir": ["apps/*/"]
|
||||
}
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts", "*.tsx"],
|
||||
"parser": "@typescript-eslint/parser"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
title: "[blocks]: "
|
||||
labels: ["Blocks Request"]
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
### Thanks for taking the time to create a block request! Please search open/closed requests before submitting, as the block or a similar one may have already been requested.
|
||||
|
||||
- type: textarea
|
||||
id: block-description
|
||||
attributes:
|
||||
label: Description
|
||||
description: Tell us about your block request
|
||||
placeholder: "A dashboard for an e-commerce website showing sales, orders, and customers..."
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: input
|
||||
id: block-example-url
|
||||
attributes:
|
||||
label: Example
|
||||
description: Link to an example of the block
|
||||
placeholder: ex. https://example.com
|
||||
validations:
|
||||
required: false
|
||||
@@ -1,3 +0,0 @@
|
||||
# These are supported funding model platforms
|
||||
|
||||
github: [shadcn]
|
||||
@@ -1,85 +0,0 @@
|
||||
name: "Bug report"
|
||||
description: Report an issue
|
||||
title: '[bug]: '
|
||||
labels: ["bug"]
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
### Thanks for taking the time to create a bug report. Please search open/closed issues before submitting, as the issue may have already been reported/addressed.
|
||||
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
#### If you aren't sure this is a bug or not, please open a discussion instead:
|
||||
- [Discussions](https://github.com/shadcn-ui/ui/discussions/new?category=general)
|
||||
|
||||
- type: textarea
|
||||
id: bug-description
|
||||
attributes:
|
||||
label: Describe the bug
|
||||
description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us how in the description. Thanks!
|
||||
placeholder: Bug description
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: input
|
||||
id: components-affected
|
||||
attributes:
|
||||
label: Affected component/components
|
||||
description: Which shadcn/ui components are affected?
|
||||
placeholder: ex. Button, Checkbox...
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: textarea
|
||||
id: reproduction
|
||||
attributes:
|
||||
label: How to reproduce
|
||||
description: A step-by-step description of how to reproduce the bug.
|
||||
placeholder: |
|
||||
1. Go to '...'
|
||||
2. Click on '....'
|
||||
3. See error
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: input
|
||||
id: codesandbox-stackblitz
|
||||
attributes:
|
||||
label: Codesandbox/StackBlitz link
|
||||
description: |
|
||||
A link to a CodeSandbox or StackBlitz that includes a minimal reproduction of the problem. In rare cases when not applicable, you can link to a GitHub repository that we can easily run to recreate the issue. If a report is vague and does not have a reproduction, it will be closed without warning.
|
||||
|
||||
> [!CAUTION]
|
||||
> If you skip this step, this issue might be **labeled** with `please add a reproduction` and **closed**.
|
||||
validations:
|
||||
required: false
|
||||
|
||||
- type: textarea
|
||||
id: logs
|
||||
attributes:
|
||||
label: Logs
|
||||
description: "Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text."
|
||||
render: bash
|
||||
|
||||
- type: textarea
|
||||
id: system-info
|
||||
attributes:
|
||||
label: System Info
|
||||
description: Information about browsers, system or binaries that's relevant.
|
||||
render: bash
|
||||
placeholder: System, Binaries, Browsers
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: checkboxes
|
||||
id: terms
|
||||
attributes:
|
||||
label: Before submitting
|
||||
description: By submitting this issue, you agree to follow our [Contributing Guidelines](https://github.com/shadcn-ui/ui/blob/main/CONTRIBUTING.md).
|
||||
options:
|
||||
- label: I've made research efforts and searched the documentation
|
||||
required: true
|
||||
- label: I've searched for existing issues
|
||||
required: true
|
||||
@@ -1,5 +0,0 @@
|
||||
blank_issues_enabled: false
|
||||
contact_links:
|
||||
- name: Get Help
|
||||
url: https://github.com/shadcn-ui/ui/discussions/new?category=general
|
||||
about: If you can't get something to work the way you expect, open a question in our discussion forums.
|
||||
@@ -1,55 +0,0 @@
|
||||
name: "Feature request"
|
||||
description: Create a feature request for shadcn/ui
|
||||
title: '[feat]: '
|
||||
labels: ['area: request']
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
### Thanks for taking the time to create a feature request! Please search open/closed issues before submitting, as the issue may have already been reported/addressed.
|
||||
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
#### If you aren't sure this is a bug or not, please open a discussion instead:
|
||||
- [Discussions](https://github.com/shadcn-ui/ui/discussions/new?category=general)
|
||||
|
||||
- type: textarea
|
||||
id: feature-description
|
||||
attributes:
|
||||
label: Feature description
|
||||
description: Tell us about your feature request
|
||||
placeholder: 'I think this feature would be great because...'
|
||||
value: 'Describe your feature request...'
|
||||
validations:
|
||||
required: true
|
||||
|
||||
- type: input
|
||||
id: components-affected
|
||||
attributes:
|
||||
label: Affected component/components
|
||||
description: Is this feature request relevant to any of the already existing components?
|
||||
placeholder: ex. Button, Checkbox...
|
||||
validations:
|
||||
required: false
|
||||
|
||||
- type: textarea
|
||||
id: context
|
||||
attributes:
|
||||
label: Additional Context
|
||||
description: Add any other context about the feature here.
|
||||
placeholder: ex. screenshots, Stack Overflow links, forum links, etc.
|
||||
value: 'Additional details here...'
|
||||
validations:
|
||||
required: false
|
||||
|
||||
- type: checkboxes
|
||||
id: terms
|
||||
attributes:
|
||||
label: Before submitting
|
||||
description: By submitting this issue, you agree to follow our [Contributing Guidelines](https://github.com/shadcn-ui/ui/blob/main/CONTRIBUTING.md).
|
||||
options:
|
||||
- label: I've made research efforts and searched the documentation
|
||||
required: true
|
||||
- label: I've searched for existing issues and PRs
|
||||
required: true
|
||||
@@ -1,12 +1,12 @@
|
||||
// ORIGINALLY FROM CLOUDFLARE WRANGLER:
|
||||
// https://github.com/cloudflare/wrangler2/blob/main/.github/changeset-version.js
|
||||
|
||||
import { execSync } from "child_process"
|
||||
import { exec } from "child_process"
|
||||
|
||||
// This script is used by the `release.yml` workflow to update the version of the packages being released.
|
||||
// The standard step is only to run `changeset version` but this does not update the pnpm-lock.yaml file.
|
||||
// So we also run `pnpm install`, which does this update.
|
||||
// The standard step is only to run `changeset version` but this does not update the package-lock.json file.
|
||||
// So we also run `npm install`, which does this update.
|
||||
// This is a workaround until this is handled automatically by `changeset version`.
|
||||
// See https://github.com/changesets/changesets/issues/421.
|
||||
execSync("npx changeset version", { stdio: "inherit" })
|
||||
execSync("pnpm install --lockfile-only", { stdio: "inherit" })
|
||||
exec("npx changeset version")
|
||||
exec("npm install")
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: "npm"
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: "weekly"
|
||||
@@ -16,7 +16,7 @@ jobs:
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 20
|
||||
node-version: 18
|
||||
|
||||
- uses: pnpm/action-setup@v2.2.4
|
||||
name: Install pnpm
|
||||
@@ -52,7 +52,7 @@ jobs:
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 20
|
||||
node-version: 18
|
||||
|
||||
- uses: pnpm/action-setup@v2.2.4
|
||||
name: Install pnpm
|
||||
@@ -90,7 +90,7 @@ jobs:
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 20
|
||||
node-version: 18
|
||||
|
||||
- uses: pnpm/action-setup@v2.2.4
|
||||
name: Install pnpm
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
name: Deprecated
|
||||
|
||||
on:
|
||||
pull_request_target:
|
||||
types: [opened, synchronize]
|
||||
|
||||
permissions:
|
||||
issues: write
|
||||
contents: read
|
||||
pull-requests: write
|
||||
|
||||
jobs:
|
||||
deprecated:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout PR
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
ref: ${{ github.event.pull_request.head.sha }}
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Get changed files
|
||||
id: changed-files
|
||||
uses: tj-actions/changed-files@v46
|
||||
with:
|
||||
files: |
|
||||
apps/www/**
|
||||
files_ignore: |
|
||||
apps/www/public/r/**
|
||||
base_sha: ${{ github.event.pull_request.base.sha }}
|
||||
sha: ${{ github.event.pull_request.head.sha }}
|
||||
|
||||
- name: Comment on PR if www files changed
|
||||
if: steps.changed-files.outputs.any_changed == 'true'
|
||||
uses: actions/github-script@v7
|
||||
with:
|
||||
github-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
script: |
|
||||
const changedFiles = `${{ steps.changed-files.outputs.all_changed_files }}`.split(' ');
|
||||
const wwwFiles = changedFiles.filter(file =>
|
||||
file.startsWith('apps/www/') &&
|
||||
!file.startsWith('apps/www/public/r/') &&
|
||||
file !== 'apps/www/package.json'
|
||||
);
|
||||
|
||||
if (wwwFiles.length > 0) {
|
||||
const comment = `Looks like this PR modifies files in \`apps/www\`, which is deprecated.
|
||||
|
||||
Consider applying the change to \`apps/v4\` if relevant.`;
|
||||
|
||||
await github.rest.issues.createComment({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: context.issue.number,
|
||||
body: comment
|
||||
});
|
||||
|
||||
// Add deprecated label
|
||||
await github.rest.issues.addLabels({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: context.issue.number,
|
||||
labels: ['deprecated']
|
||||
});
|
||||
} else {
|
||||
// Remove deprecated label if no www files are changed
|
||||
try {
|
||||
await github.rest.issues.removeLabel({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: context.issue.number,
|
||||
name: 'deprecated'
|
||||
});
|
||||
} catch (error) {
|
||||
// Label doesn't exist, which is fine
|
||||
console.log('Deprecated label not found, skipping removal');
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
# Adapted from vercel/next.js
|
||||
name: "Stale issue handler"
|
||||
on:
|
||||
workflow_dispatch:
|
||||
schedule:
|
||||
# This runs every day 20 minutes before midnight: https://crontab.guru/#40_23_*_*_*
|
||||
- cron: "40 23 * * *"
|
||||
|
||||
jobs:
|
||||
stale:
|
||||
runs-on: ubuntu-latest
|
||||
if: github.repository_owner == 'shadcn-ui'
|
||||
steps:
|
||||
- uses: actions/stale@v9
|
||||
id: issue-stale
|
||||
name: "Mark stale issues, close stale issues"
|
||||
with:
|
||||
repo-token: ${{ secrets.STALE_TOKEN }}
|
||||
ascending: true
|
||||
days-before-issue-close: 7
|
||||
days-before-issue-stale: 365
|
||||
days-before-pr-stale: -1
|
||||
days-before-pr-close: -1
|
||||
remove-issue-stale-when-updated: true
|
||||
stale-issue-label: "stale?"
|
||||
exempt-issue-labels: "roadmap,next"
|
||||
stale-issue-message: "This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
|
||||
close-issue-message: "This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding! (This is an automated message)"
|
||||
operations-per-run: 300
|
||||
- uses: actions/stale@v9
|
||||
id: pr-state
|
||||
name: "Mark stale PRs, close stale PRs"
|
||||
with:
|
||||
repo-token: ${{ secrets.STALE_TOKEN }}
|
||||
ascending: true
|
||||
days-before-issue-close: -1
|
||||
days-before-issue-stale: -1
|
||||
days-before-pr-close: 7
|
||||
days-before-pr-stale: 365
|
||||
remove-pr-stale-when-updated: true
|
||||
exempt-pr-labels: "roadmap,next,bug"
|
||||
stale-pr-label: "stale?"
|
||||
stale-pr-message: "This PR has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this PR is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
|
||||
close-pr-message: "This PR has been automatically closed due to one year of inactivity. Thank you for your understanding! (This is an automated message)"
|
||||
operations-per-run: 300
|
||||
@@ -1,9 +1,5 @@
|
||||
name: NPM Publish
|
||||
|
||||
permissions:
|
||||
contents: write
|
||||
id-token: write
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
@@ -16,7 +12,6 @@ on:
|
||||
- ui-mcp
|
||||
- auth
|
||||
- commerce
|
||||
- checkout
|
||||
- brand
|
||||
- react
|
||||
- all
|
||||
@@ -47,7 +42,7 @@ jobs:
|
||||
registry-url: 'https://registry.npmjs.org'
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Build packages
|
||||
run: |
|
||||
@@ -55,10 +50,6 @@ jobs:
|
||||
cd pkg/ui && pnpm build
|
||||
cd ../..
|
||||
fi
|
||||
if [ "${{ github.event.inputs.package }}" = "all" ] || [ "${{ github.event.inputs.package }}" = "ui-mcp" ]; then
|
||||
cd pkg/ui-mcp && pnpm build
|
||||
cd ../..
|
||||
fi
|
||||
if [ "${{ github.event.inputs.package }}" = "all" ] || [ "${{ github.event.inputs.package }}" = "auth" ]; then
|
||||
cd pkg/auth && pnpm build
|
||||
cd ../..
|
||||
@@ -67,10 +58,6 @@ jobs:
|
||||
cd pkg/commerce && pnpm build
|
||||
cd ../..
|
||||
fi
|
||||
if [ "${{ github.event.inputs.package }}" = "all" ] || [ "${{ github.event.inputs.package }}" = "checkout" ]; then
|
||||
cd pkg/checkout && pnpm build
|
||||
cd ../..
|
||||
fi
|
||||
if [ "${{ github.event.inputs.package }}" = "all" ] || [ "${{ github.event.inputs.package }}" = "brand" ]; then
|
||||
cd pkg/brand && pnpm build
|
||||
cd ../..
|
||||
@@ -82,62 +69,16 @@ jobs:
|
||||
|
||||
- name: Bump version and publish
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
||||
NPM_CONFIG_PROVENANCE: true
|
||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
|
||||
run: |
|
||||
# Set up npm and pnpm auth
|
||||
npm config set //registry.npmjs.org/:_authToken $NODE_AUTH_TOKEN
|
||||
echo "//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}" >> ~/.npmrc
|
||||
|
||||
|
||||
publish_package() {
|
||||
local pkg_dir=$1
|
||||
local pkg_name=$(cd $pkg_dir && node -p "require('./package.json').name")
|
||||
local pkg_version=$(cd $pkg_dir && node -p "require('./package.json').version")
|
||||
echo "=== Publishing $pkg_name@$pkg_version from $pkg_dir ==="
|
||||
|
||||
# Change to package directory
|
||||
pushd "$pkg_dir"
|
||||
|
||||
# Bump version manually using node to avoid any pnpm/npm hooks
|
||||
echo "Bumping version (${{ github.event.inputs.version_bump }})..."
|
||||
node -e "
|
||||
const fs = require('fs');
|
||||
const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
|
||||
const [major, minor, patch] = pkg.version.split('.').map(Number);
|
||||
const bump = '${{ github.event.inputs.version_bump }}';
|
||||
if (bump === 'major') pkg.version = (major + 1) + '.0.0';
|
||||
else if (bump === 'minor') pkg.version = major + '.' + (minor + 1) + '.0';
|
||||
else pkg.version = major + '.' + minor + '.' + (patch + 1);
|
||||
fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\n');
|
||||
console.log('New version:', pkg.version);
|
||||
"
|
||||
|
||||
local new_version=$(node -p "require('./package.json').version")
|
||||
echo "Version is now: $new_version"
|
||||
|
||||
# Pack the tarball
|
||||
echo "Running pnpm pack..."
|
||||
pnpm pack --pack-gzip-level 9
|
||||
local tarball=$(ls -t *.tgz | head -1)
|
||||
echo "Created tarball: $tarball"
|
||||
|
||||
# Verify tarball contents
|
||||
echo "Tarball package.json:"
|
||||
tar -xzf "$tarball" -O package/package.json
|
||||
|
||||
# Copy to temp dir and publish
|
||||
local temp_dir="/tmp/publish-$$"
|
||||
mkdir -p "$temp_dir"
|
||||
cp "$tarball" "$temp_dir/"
|
||||
echo "Publishing from $temp_dir..."
|
||||
cd "$temp_dir"
|
||||
npm publish "$tarball" --access public
|
||||
cd $pkg_dir
|
||||
npm version ${{ github.event.inputs.version_bump }}
|
||||
npm publish --access public
|
||||
cd -
|
||||
|
||||
# Cleanup
|
||||
rm -rf "$temp_dir"
|
||||
rm -f "$tarball"
|
||||
popd
|
||||
}
|
||||
|
||||
case "${{ github.event.inputs.package }}" in
|
||||
@@ -153,9 +94,6 @@ jobs:
|
||||
commerce)
|
||||
publish_package "pkg/commerce"
|
||||
;;
|
||||
checkout)
|
||||
publish_package "pkg/checkout"
|
||||
;;
|
||||
brand)
|
||||
publish_package "pkg/brand"
|
||||
;;
|
||||
@@ -167,7 +105,6 @@ jobs:
|
||||
publish_package "pkg/ui-mcp"
|
||||
publish_package "pkg/auth"
|
||||
publish_package "pkg/commerce"
|
||||
publish_package "pkg/checkout"
|
||||
publish_package "pkg/brand"
|
||||
publish_package "pkg/react"
|
||||
;;
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
name: Publish Packages
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
paths:
|
||||
- 'pkg/*/package.json'
|
||||
|
||||
jobs:
|
||||
detect-changes:
|
||||
runs-on: ubuntu-latest
|
||||
outputs:
|
||||
packages: ${{ steps.changed.outputs.packages }}
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 2
|
||||
|
||||
- name: Detect changed packages
|
||||
id: changed
|
||||
run: |
|
||||
CHANGED_PACKAGES=()
|
||||
for pkg_json in pkg/*/package.json; do
|
||||
pkg_dir=$(dirname "$pkg_json")
|
||||
pkg_name=$(basename "$pkg_dir")
|
||||
|
||||
# Check if package.json version changed
|
||||
if git diff HEAD~1 HEAD --quiet "$pkg_json" 2>/dev/null; then
|
||||
continue
|
||||
fi
|
||||
|
||||
# Get old and new versions
|
||||
OLD_VERSION=$(git show HEAD~1:"$pkg_json" 2>/dev/null | jq -r '.version' || echo "0.0.0")
|
||||
NEW_VERSION=$(jq -r '.version' "$pkg_json")
|
||||
|
||||
if [ "$OLD_VERSION" != "$NEW_VERSION" ]; then
|
||||
echo "Version change detected: $pkg_name ($OLD_VERSION -> $NEW_VERSION)"
|
||||
CHANGED_PACKAGES+=("$pkg_name")
|
||||
fi
|
||||
done
|
||||
|
||||
if [ ${#CHANGED_PACKAGES[@]} -eq 0 ]; then
|
||||
echo "packages=[]" >> $GITHUB_OUTPUT
|
||||
else
|
||||
JSON=$(printf '%s\n' "${CHANGED_PACKAGES[@]}" | jq -R . | jq -s -c .)
|
||||
echo "packages=$JSON" >> $GITHUB_OUTPUT
|
||||
fi
|
||||
|
||||
publish:
|
||||
needs: detect-changes
|
||||
if: needs.detect-changes.outputs.packages != '[]'
|
||||
runs-on: ubuntu-latest
|
||||
strategy:
|
||||
matrix:
|
||||
package: ${{ fromJson(needs.detect-changes.outputs.packages) }}
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
registry-url: 'https://registry.npmjs.org'
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
|
||||
- name: Build package
|
||||
run: pnpm --filter ${{ matrix.package }} build
|
||||
|
||||
- name: Publish package
|
||||
run: pnpm --filter ${{ matrix.package }} publish --no-git-checks --access public
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
||||
@@ -7,11 +7,6 @@ on:
|
||||
branches:
|
||||
- main
|
||||
|
||||
permissions:
|
||||
id-token: write
|
||||
contents: write
|
||||
pull-requests: write
|
||||
|
||||
jobs:
|
||||
release:
|
||||
if: ${{ github.repository_owner == 'hanzoai-ui' }}
|
||||
@@ -24,20 +19,17 @@ jobs:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Use PNPM
|
||||
uses: pnpm/action-setup@v4
|
||||
uses: pnpm/action-setup@v2.2.4
|
||||
with:
|
||||
version: 9.0.6
|
||||
version: 8.6.1
|
||||
|
||||
- name: Use Node.js 20
|
||||
uses: actions/setup-node@v4
|
||||
- name: Use Node.js 18
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 20
|
||||
registry-url: "https://registry.npmjs.org"
|
||||
version: 8.6.1
|
||||
node-version: 18
|
||||
cache: "pnpm"
|
||||
|
||||
- name: Update npm for OIDC support
|
||||
run: npm install -g npm@latest
|
||||
|
||||
- name: Install NPM Dependencies
|
||||
run: pnpm install
|
||||
|
||||
@@ -45,11 +37,11 @@ jobs:
|
||||
# run: pnpm check
|
||||
|
||||
- name: Build the package
|
||||
run: pnpm shadcn:build
|
||||
run: pnpm build:cli
|
||||
|
||||
- name: Create Version PR or Publish to NPM
|
||||
id: changesets
|
||||
uses: changesets/action@v1
|
||||
uses: changesets/action@v1.4.1
|
||||
with:
|
||||
commit: "chore(release): version packages"
|
||||
title: "chore(release): version packages"
|
||||
@@ -57,4 +49,5 @@ jobs:
|
||||
publish: npx changeset publish
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
NPM_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
|
||||
NODE_ENV: "production"
|
||||
|
||||
@@ -6,20 +6,12 @@ on:
|
||||
pull_request:
|
||||
branches: [main, develop]
|
||||
schedule:
|
||||
# Run tests weekly on Sunday at 2 AM UTC to catch breaking updates
|
||||
- cron: '0 2 * * 0'
|
||||
|
||||
concurrency:
|
||||
group: ${{ github.workflow }}-${{ github.ref }}
|
||||
cancel-in-progress: true
|
||||
|
||||
env:
|
||||
NODE_OPTIONS: --max-old-space-size=8192
|
||||
# Run tests daily at 2 AM UTC to catch breaking updates
|
||||
- cron: '0 2 * * *'
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
timeout-minutes: 60
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [20.x]
|
||||
@@ -46,9 +38,6 @@ jobs:
|
||||
|
||||
- name: Build the project
|
||||
run: pnpm build
|
||||
env:
|
||||
NODE_OPTIONS: --max-old-space-size=8192
|
||||
NEXT_PUBLIC_APP_URL: https://ui.hanzo.ai
|
||||
|
||||
- name: Run component health check
|
||||
run: pnpm health-check
|
||||
@@ -56,16 +45,9 @@ jobs:
|
||||
|
||||
- name: Run E2E tests
|
||||
run: pnpm test:e2e
|
||||
timeout-minutes: 30
|
||||
env:
|
||||
CI: true
|
||||
|
||||
- name: Run visual regression tests
|
||||
run: pnpm test:visual
|
||||
timeout-minutes: 20
|
||||
continue-on-error: true
|
||||
env:
|
||||
CI: true
|
||||
|
||||
- name: Upload test results
|
||||
if: always()
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
name: Validate Registries
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
paths:
|
||||
- "apps/v4/public/r/registries.json"
|
||||
- "apps/v4/registry/directory.json"
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
paths:
|
||||
- "apps/v4/public/r/registries.json"
|
||||
- "apps/v4/registry/directory.json"
|
||||
|
||||
jobs:
|
||||
validate:
|
||||
runs-on: ubuntu-latest
|
||||
name: pnpm validate:registries
|
||||
permissions:
|
||||
contents: read
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 20
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
name: Install pnpm
|
||||
id: pnpm-install
|
||||
with:
|
||||
version: 9.0.6
|
||||
run_install: false
|
||||
|
||||
- name: Get pnpm store directory
|
||||
id: pnpm-cache
|
||||
run: |
|
||||
echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
|
||||
- uses: actions/cache@v3
|
||||
name: Setup pnpm cache
|
||||
with:
|
||||
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
|
||||
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-pnpm-store-
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
|
||||
- name: Validate registries
|
||||
run: pnpm --filter=v4 validate:registries
|
||||
@@ -72,11 +72,3 @@ test-results/
|
||||
playwright-report/
|
||||
*BADGE_INSPECTION*.md
|
||||
*BADGE_INSPECTION*.txt
|
||||
|
||||
# ide
|
||||
.idea
|
||||
.fleet
|
||||
|
||||
.notes
|
||||
.claude/settings.local.json
|
||||
pkg/ui/dist-test/
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
# .kodiak.toml
|
||||
version = 1
|
||||
|
||||
[merge]
|
||||
automerge_label = "automerge"
|
||||
require_automerge_label = true
|
||||
method = "squash"
|
||||
delete_branch_on_merge = true
|
||||
optimistic_updates = false
|
||||
prioritize_ready_to_merge = true
|
||||
notify_on_conflict = true
|
||||
|
||||
[merge.message]
|
||||
title = "pull_request_title"
|
||||
body = "pull_request_body"
|
||||
include_pr_number = true
|
||||
body_type = "markdown"
|
||||
strip_html_comments = true
|
||||
Vendored
+1
-20
@@ -1,24 +1,5 @@
|
||||
{
|
||||
"typescript.tsdk": "node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib",
|
||||
"editor.gotoLocation.multipleDefinitions": "goto",
|
||||
"typescript.preferences.quoteStyle": "single",
|
||||
"eslint.workingDirectories": [
|
||||
{ "pattern": "apps/*/" },
|
||||
{ "pattern": "packages/*/" },
|
||||
{ "pattern": "pkg/*/" }
|
||||
],
|
||||
"tailwindCSS.classFunctions": ["cva", "cn"],
|
||||
"vitest.debugExclude": [
|
||||
"<node_internals>/**",
|
||||
"**/node_modules/**",
|
||||
"**/fixtures/**"
|
||||
],
|
||||
"files.exclude": {
|
||||
"deprecated": true
|
||||
},
|
||||
"search.exclude": {
|
||||
"apps/v4/registry/radix-*": true,
|
||||
"apps/v4/public/r/*": true,
|
||||
"packages/shadcn/test/fixtures/*": true
|
||||
}
|
||||
"typescript.preferences.quoteStyle": "single"
|
||||
}
|
||||
|
||||
@@ -1,458 +0,0 @@
|
||||
# UI/UX Improvements - Implementation Summary
|
||||
**Date**: 2025-11-13
|
||||
**Status**: Phase 1 Complete ✅
|
||||
|
||||
## 🎯 Overview
|
||||
|
||||
Following a comprehensive UI/UX review using Playwright automated testing, we've identified and begun implementing **12 high-impact improvements** to elevate Hanzo UI to world-class standards. This document tracks what's been completed and what remains.
|
||||
|
||||
---
|
||||
|
||||
## ✅ Completed Implementations
|
||||
|
||||
### 1. Skip Links for Accessibility (CRITICAL) ✅
|
||||
**File**: `app/components/skip-links.tsx`
|
||||
|
||||
**What it does**:
|
||||
- Provides keyboard navigation shortcuts for screen reader users
|
||||
- Meets WCAG Level A compliance requirements
|
||||
- Hidden by default, visible when focused (Tab key)
|
||||
|
||||
**Implementation**:
|
||||
```tsx
|
||||
<SkipLinks />
|
||||
// Renders:
|
||||
// - Skip to main content
|
||||
// - Skip to navigation
|
||||
```
|
||||
|
||||
**Impact**:
|
||||
- ✅ WCAG Level A compliant
|
||||
- ✅ Screen reader accessible
|
||||
- ✅ Keyboard navigation improved
|
||||
- ✅ Zero visual impact (only shows on focus)
|
||||
|
||||
**Integrated in**: `app/layout.tsx` - Active globally across all pages
|
||||
|
||||
---
|
||||
|
||||
### 2. Skeleton Loading Components ✅
|
||||
**File**: `app/components/skeleton-card.tsx`
|
||||
|
||||
**What it provides**:
|
||||
- `<SkeletonCard />` - Single card skeleton
|
||||
- `<SkeletonCardGrid />` - Grid of skeleton cards
|
||||
- `<SkeletonList />` - List view skeleton
|
||||
- `<SkeletonTable />` - Table skeleton
|
||||
|
||||
**Usage Example**:
|
||||
```tsx
|
||||
import { Suspense } from 'react'
|
||||
import { SkeletonCardGrid } from '@/components/skeleton-card'
|
||||
|
||||
<Suspense fallback={<SkeletonCardGrid count={6} />}>
|
||||
<ComponentGallery />
|
||||
</Suspense>
|
||||
```
|
||||
|
||||
**Impact**:
|
||||
- ⏩ Reduces perceived load time
|
||||
- 🎨 Professional loading states
|
||||
- ♿ Better accessibility (users know content is loading)
|
||||
- 📱 Works on all devices
|
||||
|
||||
**Next Step**: Integrate into:
|
||||
- `/blocks` page (for block gallery)
|
||||
- `/docs/components` page (for component list)
|
||||
- `/builder` page (for block library panel)
|
||||
|
||||
---
|
||||
|
||||
### 3. Enhanced Global Layout ✅
|
||||
**File**: `app/app/layout.tsx`
|
||||
|
||||
**Changes**:
|
||||
- ✅ Skip links added at the top of the component tree
|
||||
- ✅ Proper import order maintained
|
||||
- ✅ Zero breaking changes to existing functionality
|
||||
|
||||
**Before/After**:
|
||||
```tsx
|
||||
// Before
|
||||
<ActiveThemeProvider>
|
||||
<div vaul-drawer-wrapper="">
|
||||
{children}
|
||||
</div>
|
||||
</ActiveThemeProvider>
|
||||
|
||||
// After
|
||||
<ActiveThemeProvider>
|
||||
<SkipLinks />
|
||||
<div vaul-drawer-wrapper="">
|
||||
{children}
|
||||
</div>
|
||||
</ActiveThemeProvider>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📋 Ready to Integrate (Created, Not Yet Used)
|
||||
|
||||
### Components Available for Use
|
||||
|
||||
1. **Skeleton Components** (`app/components/skeleton-card.tsx`)
|
||||
- Ready to wrap async content
|
||||
- Just import and use in Suspense boundaries
|
||||
|
||||
2. **Skip Links** (`app/components/skip-links.tsx`)
|
||||
- Already active globally
|
||||
- Need to add `id="main-content"` to main content areas
|
||||
|
||||
---
|
||||
|
||||
## 🚧 Next Phase - Ready for Implementation
|
||||
|
||||
### High Priority (Week 1-2)
|
||||
|
||||
#### 1. Add ID Attributes for Skip Links
|
||||
**Files to modify**:
|
||||
- `app/(app)/layout.tsx` - Add `id="main-content"` to main
|
||||
- `app/components/site-header.tsx` - Add `id="navigation"` to nav
|
||||
|
||||
```tsx
|
||||
// In layout
|
||||
<main id="main-content" className="flex-1">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
// In header
|
||||
<nav id="navigation">
|
||||
<MainNav />
|
||||
</nav>
|
||||
```
|
||||
|
||||
**Effort**: 5 minutes
|
||||
**Impact**: High - Completes skip links functionality
|
||||
|
||||
---
|
||||
|
||||
#### 2. Integrate Skeleton Loaders
|
||||
**Target Pages**:
|
||||
|
||||
**A. Blocks Page** (`app/(app)/blocks/page.tsx`)
|
||||
```tsx
|
||||
import { Suspense } from 'react'
|
||||
import { SkeletonCardGrid } from '@/components/skeleton-card'
|
||||
|
||||
export default function BlocksPage() {
|
||||
return (
|
||||
<Suspense fallback={<SkeletonCardGrid count={9} />}>
|
||||
<BlockGallery />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
**B. Components Page** (`app/(app)/docs/components/page.tsx`)
|
||||
```tsx
|
||||
<Suspense fallback={<SkeletonList count={10} />}>
|
||||
<ComponentList />
|
||||
</Suspense>
|
||||
```
|
||||
|
||||
**C. Builder Page** (`app/(app)/builder/page.tsx`)
|
||||
```tsx
|
||||
// In the component library panel
|
||||
<Suspense fallback={<SkeletonCardGrid count={6} />}>
|
||||
<BlockLibrary />
|
||||
</Suspense>
|
||||
```
|
||||
|
||||
**Effort**: 30 minutes
|
||||
**Impact**: High - Dramatically improves perceived performance
|
||||
|
||||
---
|
||||
|
||||
#### 3. Performance Optimizations (CRITICAL)
|
||||
**Current**: 14.7s load time
|
||||
**Target**: <3s load time
|
||||
|
||||
**Action Items**:
|
||||
a. **Image Optimization**
|
||||
```bash
|
||||
# Convert images to WebP
|
||||
pnpm add sharp
|
||||
# Add next.config.js optimization
|
||||
images: {
|
||||
formats: ['image/webp', 'image/avif'],
|
||||
}
|
||||
```
|
||||
|
||||
b. **Code Splitting**
|
||||
```tsx
|
||||
// Dynamic imports for heavy components
|
||||
const HeavyComponent = dynamic(() => import('./heavy-component'), {
|
||||
loading: () => <SkeletonCard />,
|
||||
})
|
||||
```
|
||||
|
||||
c. **Lazy Loading**
|
||||
```tsx
|
||||
// Below-the-fold content
|
||||
import { lazy } from 'react'
|
||||
const Footer = lazy(() => import('./footer'))
|
||||
```
|
||||
|
||||
**Effort**: 4-6 hours
|
||||
**Impact**: CRITICAL - 79% faster page loads
|
||||
|
||||
---
|
||||
|
||||
### Medium Priority (Week 2-3)
|
||||
|
||||
#### 4. Toast Notification System
|
||||
**Package**: Already installed (`sonner`)
|
||||
**File**: `app/registry/default/ui/sonner.tsx` (already exists!)
|
||||
|
||||
**Usage**:
|
||||
```tsx
|
||||
import { toast } from 'sonner'
|
||||
|
||||
// Success
|
||||
toast.success('Component copied!')
|
||||
|
||||
// Error
|
||||
toast.error('Failed to load', {
|
||||
action: {
|
||||
label: 'Retry',
|
||||
onClick: () => retry(),
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
**Effort**: 1 hour (just replace alert() calls)
|
||||
**Impact**: Medium - Better UX for notifications
|
||||
|
||||
---
|
||||
|
||||
#### 5. Command Palette (⌘K)
|
||||
**Component**: Use existing `app/components/command-menu.tsx`
|
||||
|
||||
**Enhancement**: Add keyboard shortcut hint
|
||||
```tsx
|
||||
<div className="flex items-center gap-2">
|
||||
<Search className="h-4 w-4" />
|
||||
<span>Search</span>
|
||||
<kbd className="ml-auto">⌘K</kbd>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Effort**: 2 hours
|
||||
**Impact**: Medium - Power user feature
|
||||
|
||||
---
|
||||
|
||||
#### 6. Enhanced Hero Section
|
||||
**File**: `app/(app)/page.tsx`
|
||||
|
||||
**Improvements**:
|
||||
- ✨ Animated gradient background
|
||||
- 🎯 More prominent CTAs
|
||||
- 💫 Subtle animations (fade-in-up)
|
||||
- 🏆 Trust indicators
|
||||
|
||||
**Code Available**: See `docs/UX_ENHANCEMENT_PLAN.md` Section 4
|
||||
|
||||
**Effort**: 3-4 hours
|
||||
**Impact**: High - First impression matters
|
||||
|
||||
---
|
||||
|
||||
### Lower Priority (Week 4+)
|
||||
|
||||
7. **Builder Undo/Redo** (8 hours)
|
||||
8. **Keyboard Shortcuts Panel** (4 hours)
|
||||
9. **Empty State Components** (3 hours)
|
||||
10. **Micro-interactions** (4 hours)
|
||||
11. **Component Card Enhancements** (6 hours)
|
||||
12. **Drag Indicators** (4 hours)
|
||||
|
||||
---
|
||||
|
||||
## 📊 Impact Metrics
|
||||
|
||||
### Current Status
|
||||
| Metric | Before | After Phase 1 | Target | Progress |
|
||||
|--------|--------|---------------|--------|----------|
|
||||
| Accessibility | Good | WCAG A ✅ | WCAG AAA | 33% |
|
||||
| Loading UX | None | Skeletons ✅ | Complete | 50% |
|
||||
| Performance | 14.7s | TBD | <3s | 0% |
|
||||
| Mobile UX | Good | Good ✅ | Excellent | 80% |
|
||||
|
||||
### After Full Implementation
|
||||
| Metric | Target | Improvement |
|
||||
|--------|--------|-------------|
|
||||
| Page Load | <3s | -11.7s (79% faster) |
|
||||
| Accessibility | WCAG AAA | +2 levels |
|
||||
| User Engagement | +50% | Better UX |
|
||||
| Bounce Rate | -20% | Faster loads |
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing
|
||||
|
||||
### Automated Tests Available
|
||||
Run comprehensive UX review anytime:
|
||||
```bash
|
||||
pnpm exec playwright test tests/ux-review.spec.ts --headed
|
||||
```
|
||||
|
||||
**What it tests**:
|
||||
- ✅ Skip links presence (now passing!)
|
||||
- ✅ Mobile navigation
|
||||
- ✅ Dark/light mode
|
||||
- ✅ Accessibility features
|
||||
- ⏱️ Performance metrics
|
||||
- 📸 Visual regression (screenshots)
|
||||
|
||||
### Manual Testing Checklist
|
||||
- [ ] Tab through page - skip links should appear
|
||||
- [ ] Press Tab on any page → "Skip to main content" appears
|
||||
- [ ] Click skip link → jumps to main content
|
||||
- [ ] Skeleton loaders appear while content loads
|
||||
- [ ] No layout shift when content replaces skeletons
|
||||
|
||||
---
|
||||
|
||||
## 📚 Documentation Created
|
||||
|
||||
1. **UX Enhancement Plan**: `docs/UX_ENHANCEMENT_PLAN.md`
|
||||
- Complete roadmap with code examples
|
||||
- 12 improvements prioritized
|
||||
- Success metrics defined
|
||||
|
||||
2. **UX Review Summary**: `tests/reports/UX_REVIEW_SUMMARY.md`
|
||||
- Detailed findings from Playwright tests
|
||||
- Current vs target performance
|
||||
- Visual analysis results
|
||||
|
||||
3. **Test Suite**: `tests/ux-review.spec.ts`
|
||||
- 13 comprehensive tests
|
||||
- Reusable for ongoing monitoring
|
||||
- Screenshots for visual tracking
|
||||
|
||||
4. **This Document**: `IMPROVEMENTS_IMPLEMENTED.md`
|
||||
- Track implementation progress
|
||||
- Integration guides
|
||||
- Priority roadmap
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Wins (Do These First!)
|
||||
|
||||
### 5-Minute Tasks
|
||||
1. ✅ Skip links - **DONE**
|
||||
2. Add ID attributes (`id="main-content"`, `id="navigation"`)
|
||||
3. Import skeletons where needed
|
||||
|
||||
### 30-Minute Tasks
|
||||
4. Wrap async content in Suspense with skeleton fallbacks
|
||||
5. Replace alert() with toast notifications
|
||||
6. Add ⌘K hint to search
|
||||
|
||||
### 1-Hour Tasks
|
||||
7. Hero section CTA improvements
|
||||
8. Add loading="lazy" to below-fold images
|
||||
|
||||
---
|
||||
|
||||
## 💡 Tips for Implementation
|
||||
|
||||
### Using Skeleton Loaders
|
||||
```tsx
|
||||
// Pattern 1: Simple async component
|
||||
<Suspense fallback={<SkeletonCard />}>
|
||||
<AsyncComponent />
|
||||
</Suspense>
|
||||
|
||||
// Pattern 2: Grid of items
|
||||
<Suspense fallback={<SkeletonCardGrid count={6} />}>
|
||||
<ItemGrid />
|
||||
</Suspense>
|
||||
|
||||
// Pattern 3: With error boundary
|
||||
<ErrorBoundary fallback={<ErrorState />}>
|
||||
<Suspense fallback={<SkeletonList />}>
|
||||
<DataList />
|
||||
</Suspense>
|
||||
</ErrorBoundary>
|
||||
```
|
||||
|
||||
### Performance Best Practices
|
||||
```tsx
|
||||
// 1. Dynamic imports for heavy components
|
||||
const Chart = dynamic(() => import('./chart'), {
|
||||
ssr: false,
|
||||
loading: () => <SkeletonCard />,
|
||||
})
|
||||
|
||||
// 2. Image optimization
|
||||
import Image from 'next/image'
|
||||
<Image
|
||||
src="/image.jpg"
|
||||
alt="Description"
|
||||
width={800}
|
||||
height={600}
|
||||
loading="lazy"
|
||||
placeholder="blur"
|
||||
/>
|
||||
|
||||
// 3. Code splitting
|
||||
const ModalContent = lazy(() => import('./modal-content'))
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Next Steps
|
||||
|
||||
**Immediate (This Week)**:
|
||||
1. Add ID attributes to complete skip links
|
||||
2. Integrate skeletons on blocks page
|
||||
3. Test accessibility with screen reader
|
||||
|
||||
**Short-term (Next 2 Weeks)**:
|
||||
4. Performance optimization sprint
|
||||
5. Hero section redesign
|
||||
6. Toast notifications integration
|
||||
|
||||
**Long-term (Month 2)**:
|
||||
7. Builder enhancements (undo/redo, drag indicators)
|
||||
8. Keyboard shortcuts
|
||||
9. Polish and micro-interactions
|
||||
|
||||
---
|
||||
|
||||
## 📞 Support
|
||||
|
||||
**Questions?** See the detailed plans:
|
||||
- `docs/UX_ENHANCEMENT_PLAN.md` - Full implementation guide
|
||||
- `tests/reports/UX_REVIEW_SUMMARY.md` - Test findings
|
||||
- `tests/ux-review.spec.ts` - Test suite source
|
||||
|
||||
**Running Tests**:
|
||||
```bash
|
||||
# Full UX review
|
||||
pnpm test:e2e tests/ux-review.spec.ts
|
||||
|
||||
# Just accessibility tests
|
||||
pnpm test:e2e tests/ux-review.spec.ts -g "Accessibility"
|
||||
|
||||
# With UI (see what's happening)
|
||||
pnpm test:e2e tests/ux-review.spec.ts --headed
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
*Last updated: 2025-11-13*
|
||||
*Phase: 1 of 4 Complete*
|
||||
*Next review: After Week 1 integrations*
|
||||
@@ -1,111 +1,550 @@
|
||||
# Hanzo UI - LLM Context
|
||||
# Hanzo UI - AI Assistant Knowledge Base
|
||||
|
||||
## Overview
|
||||
**Last Updated**: 2025-10-18
|
||||
**Project**: Hanzo UI Component Library (shadcn/ui fork with multi-framework support)
|
||||
**Version**: @hanzo/ui v5.0.0
|
||||
|
||||
React component library (shadcn/ui fork). 161 components, 24+ blocks, two themes, multi-framework. Published as `@hanzo/ui` on npm.
|
||||
## Project Overview
|
||||
|
||||
**Docs**: https://ui.hanzo.ai | **Dev port**: 3003
|
||||
Hanzo UI is a comprehensive React component library built on hanzo/ui v4 with Hanzo branding. It provides 150+ accessible, customizable components distributed via npm and CLI.
|
||||
|
||||
## Repository Structure
|
||||
### Repository Structure
|
||||
|
||||
```
|
||||
ui/
|
||||
app/ Documentation site (Next.js 15.3.1, React 19)
|
||||
registry/ Component registry (SOURCE OF TRUTH)
|
||||
default/ui/ 150+ components
|
||||
default/example/ Usage demos
|
||||
default/blocks/ 24+ full-page sections
|
||||
new-york/ Alternative theme
|
||||
content/docs/ MDX documentation
|
||||
scripts/ Build scripts
|
||||
pkg/
|
||||
ui/ Core library (npm)
|
||||
auth/ Auth components (Firebase optional since v2.6.0)
|
||||
auth-firebase/ Firebase auth (opt-in package)
|
||||
commerce/ E-commerce components
|
||||
brand/ Branding system
|
||||
brands/ White-label configs (Zoo, Lux)
|
||||
├── app/ # Documentation site (Next.js 15.3.1, React 19)
|
||||
│ ├── registry/ # Component registry (source of truth)
|
||||
│ │ ├── default/ # Default theme
|
||||
│ │ │ ├── ui/ # 150+ component implementations
|
||||
│ │ │ ├── example/ # Usage demos
|
||||
│ │ │ └── blocks/ # 24+ full-page sections
|
||||
│ │ └── new-york/ # Alternative theme
|
||||
│ ├── content/docs/ # MDX documentation
|
||||
│ └── scripts/ # Build scripts (registry, capture)
|
||||
├── pkg/
|
||||
│ ├── ui/ # Core library (published to npm)
|
||||
│ ├── auth/ # Auth components
|
||||
│ ├── commerce/ # E-commerce components
|
||||
│ └── brand/ # Branding system
|
||||
├── brands/ # White-label configs (Zoo, Lux)
|
||||
└── templates/ # Project templates
|
||||
```
|
||||
|
||||
## Critical: Build Order
|
||||
|
||||
**Registry MUST build before app.** The registry generates JSON that the CLI reads.
|
||||
## Essential Commands
|
||||
|
||||
### Development (Always Required)
|
||||
```bash
|
||||
pnpm build:registry # MUST run first
|
||||
pnpm build # Then build app
|
||||
# Start main dev server (port 3003)
|
||||
pnpm dev
|
||||
|
||||
# Build registry FIRST, then app
|
||||
pnpm build:registry
|
||||
pnpm build
|
||||
|
||||
# Run from root or app/
|
||||
cd app && pnpm dev
|
||||
cd app && pnpm registry:build
|
||||
```
|
||||
|
||||
## Commands
|
||||
|
||||
### Code Quality
|
||||
```bash
|
||||
pnpm dev # Dev server (:3003)
|
||||
pnpm build:registry # Build component registry
|
||||
pnpm build # Build app
|
||||
pnpm lint # Lint all workspaces
|
||||
pnpm lint:fix # Auto-fix issues
|
||||
pnpm typecheck # Type checking
|
||||
pnpm test # Unit tests
|
||||
pnpm test:e2e # Playwright E2E
|
||||
pnpm changeset # Create changeset for publishing
|
||||
pnpm format:write # Format code
|
||||
```
|
||||
|
||||
## Three-Layer Architecture
|
||||
### Testing
|
||||
```bash
|
||||
pnpm test # Unit tests
|
||||
pnpm test:e2e # E2E with Playwright
|
||||
pnpm test:visual # Visual regression
|
||||
```
|
||||
|
||||
1. **Components** (`registry/{style}/ui/`) -- Single primitives (Button, Card, Dialog). CLI-installable.
|
||||
2. **Examples** (`registry/{style}/example/`) -- Usage demos for docs via `<ComponentPreview />`.
|
||||
3. **Blocks** (`registry/{style}/blocks/`) -- Full-page sections (Dashboard, Login). NOT CLI-installable, docs only.
|
||||
### Package Publishing
|
||||
```bash
|
||||
pnpm changeset # Create changeset
|
||||
pnpm changeset version # Bump versions
|
||||
cd pkg/ui && npm publish --access public
|
||||
```
|
||||
|
||||
## Import Path Transformation
|
||||
## Critical Build Process
|
||||
|
||||
Registry files use `@/registry/default/ui/button`. After CLI install, rewritten to `@/components/ui/button`.
|
||||
**REGISTRY IS CORE** - Always build registry before app:
|
||||
|
||||
## Package Exports
|
||||
1. **Source**: Components in `app/registry/{style}/ui/`
|
||||
2. **Build**: `pnpm build:registry` generates JSON
|
||||
3. **Output**: `app/public/r/{style}/{name}.json`
|
||||
4. **Usage**: CLI reads JSON to install components
|
||||
|
||||
**Build Order:**
|
||||
```bash
|
||||
pnpm build:registry # MUST run first
|
||||
pnpm build # Then build app
|
||||
```
|
||||
|
||||
## Component Architecture
|
||||
|
||||
### Three-Layer System
|
||||
|
||||
**1. Components** (`registry/{style}/ui/`)
|
||||
- Single UI primitives (Button, Input, Card, Dialog)
|
||||
- 150+ total components
|
||||
- Two themes: default, new-york
|
||||
|
||||
**2. Examples** (`registry/{style}/example/`)
|
||||
- Usage demonstrations
|
||||
- Used in docs via `<ComponentPreview />`
|
||||
- Pattern examples
|
||||
|
||||
**3. Blocks** (`registry/{style}/blocks/`)
|
||||
- Viewport-sized sections (Hero, Dashboard, Login)
|
||||
- 24+ production templates
|
||||
- Compose multiple components
|
||||
- NOT CLI-installable (documentation only)
|
||||
|
||||
### Standard Component Pattern
|
||||
|
||||
```tsx
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const componentVariants = cva(
|
||||
"base-classes",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "default-styles",
|
||||
outline: "outline-styles"
|
||||
}
|
||||
},
|
||||
defaultVariants: { variant: "default" }
|
||||
}
|
||||
)
|
||||
|
||||
interface ComponentProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof componentVariants> {}
|
||||
|
||||
const Component = React.forwardRef<HTMLDivElement, ComponentProps>(
|
||||
({ className, variant, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(componentVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)
|
||||
Component.displayName = "Component"
|
||||
|
||||
export { Component, componentVariants, type ComponentProps }
|
||||
```
|
||||
|
||||
### Import Path Transformation
|
||||
|
||||
**In registry files:**
|
||||
```tsx
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
```
|
||||
|
||||
**After CLI installation** (paths rewritten):
|
||||
```tsx
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
```
|
||||
|
||||
## Package Exports (@hanzo/ui)
|
||||
|
||||
```typescript
|
||||
// Main exports
|
||||
import { Button, Card } from '@hanzo/ui'
|
||||
|
||||
// Component-specific
|
||||
import { Button } from '@hanzo/ui/components'
|
||||
|
||||
// Blocks (documentation reference)
|
||||
import { DashboardBlock } from '@hanzo/ui/blocks'
|
||||
|
||||
// Primitives (Radix UI re-exports)
|
||||
import * as Dialog from '@hanzo/ui/primitives/dialog'
|
||||
|
||||
// Utilities
|
||||
import { cn } from '@hanzo/ui/lib/utils'
|
||||
```
|
||||
|
||||
## Adding a Component
|
||||
## Adding a New Component
|
||||
|
||||
1. Create in BOTH themes: `app/registry/{default,new-york}/ui/my-component.tsx`
|
||||
2. Create example: `app/registry/default/example/my-component-demo.tsx`
|
||||
3. Create docs: `app/content/docs/components/my-component.mdx`
|
||||
4. Update nav: `app/config/docs.ts`
|
||||
5. Build: `pnpm build:registry`
|
||||
1. **Create files in BOTH themes:**
|
||||
```bash
|
||||
touch app/registry/default/ui/my-component.tsx
|
||||
touch app/registry/new-york/ui/my-component.tsx
|
||||
touch app/registry/default/example/my-component-demo.tsx
|
||||
```
|
||||
|
||||
## Tech Stack
|
||||
2. **Implement using standard pattern** (see above)
|
||||
|
||||
React 18.3.1 (19 experimental), Next.js 15.3.1, Tailwind CSS (OKLCH colors), Radix UI, Turborepo + pnpm, Fumadocs (MDX), class-variance-authority.
|
||||
3. **Add documentation:**
|
||||
```bash
|
||||
touch app/content/docs/components/my-component.mdx
|
||||
```
|
||||
|
||||
4. **Update navigation** in `app/config/docs.ts`
|
||||
|
||||
5. **Build registry:**
|
||||
```bash
|
||||
pnpm build:registry
|
||||
```
|
||||
|
||||
6. **Test locally:**
|
||||
```bash
|
||||
pnpm dev
|
||||
# Visit http://localhost:3003/docs/components/my-component
|
||||
```
|
||||
|
||||
## Technology Stack
|
||||
|
||||
- **React**: 18.3.1 (19.1.0 experimental)
|
||||
- **Next.js**: 15.3.1 with Turbopack
|
||||
- **Styling**: Tailwind CSS 3.4.6-4.1.11, OKLCH colors
|
||||
- **Components**: Radix UI primitives
|
||||
- **Build**: Turborepo + pnpm workspaces
|
||||
- **Docs**: Fumadocs (MDX)
|
||||
- **Package Manager**: pnpm 9.0.6+
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Page Builder** (`/builder`): Drag-drop block assembly with @dnd-kit, export to TSX
|
||||
- **White-Label**: Zoo/Lux forks via `brands/{BRAND}.brand.ts`
|
||||
- **External Registries**: 35+ sources in `app/registries.json`, install via `npx @hanzo/ui add @aceternity/spotlight`
|
||||
### Page Builder (`/builder`)
|
||||
- Visual drag-drop block assembly
|
||||
- 24+ viewport-sized blocks
|
||||
- Export to React TSX
|
||||
- Built with @dnd-kit
|
||||
|
||||
## Gotchas
|
||||
### White-Label System
|
||||
- Zoo UI fork: `~/work/zoo/ui`
|
||||
- Lux UI fork: `~/work/lux/ui`
|
||||
- Config: `brands/{BRAND}.brand.ts`
|
||||
|
||||
- Registry index is `Index[style][name]`, NOT `Index[name]` -- caused silent block render failures
|
||||
- Shiki `getHighlighter` incompatible with static export -- replaced with basic pre/code
|
||||
- Some blocks (login-01, login-02, sidebar-02) have Server Component issues with event handlers
|
||||
- Zod validation removed from `_getAllBlocks()`/`_getBlockCode()` -- we control generation
|
||||
- Firebase split to optional `@hanzo/auth-firebase` package (Jan 2025)
|
||||
- `@hanzo/auth` v2.6.0 uses pluggable provider registry: `registerAuthProvider('firebase', FirebaseAuthService)`
|
||||
### External Registries
|
||||
- 35+ external component sources
|
||||
- Config: `app/registries.json`
|
||||
- Install: `npx @hanzo/ui add @aceternity/spotlight`
|
||||
|
||||
## Component Stats (2025-10-18)
|
||||
## Deployment
|
||||
|
||||
- 161 total files, ~127 implemented, ~34 stubs
|
||||
- Unique: 9 3D components, 12 AI components, 13 animation components, 15 nav variants
|
||||
- 3x more components than upstream shadcn/ui (161 vs 58)
|
||||
### GitHub Pages (ui.hanzo.ai)
|
||||
```
|
||||
Workflow: .github/workflows/deploy-pages.yml
|
||||
Triggers: Push to main
|
||||
Process:
|
||||
1. Build pkg/ui
|
||||
2. Build registry
|
||||
3. Build Next.js app (static export)
|
||||
4. Deploy to GitHub Pages
|
||||
```
|
||||
|
||||
## Rules
|
||||
### Environment Variables
|
||||
```bash
|
||||
# Production
|
||||
NEXT_PUBLIC_APP_URL=https://ui.hanzo.ai
|
||||
GITHUB_ACTIONS=true
|
||||
|
||||
1. Always build registry before app
|
||||
2. Keep default and new-york themes in sync
|
||||
3. Blocks are docs only, not CLI-installable
|
||||
4. Use pnpm, not npm/yarn
|
||||
5. Never commit symlinked files (AGENTS.md, CLAUDE.md, etc.)
|
||||
6. Documentation goes in `app/content/docs/`, not random root MD files
|
||||
# Development
|
||||
NEXT_PUBLIC_APP_URL=http://localhost:3003
|
||||
```
|
||||
|
||||
## Common Issues & Solutions
|
||||
|
||||
### Registry Not Found
|
||||
❌ App build fails with registry errors
|
||||
✅ Run `pnpm build:registry` before `pnpm build`
|
||||
|
||||
### Port Already In Use
|
||||
❌ Port 3003 already taken
|
||||
✅ Change port or `lsof -i :3003 && kill -9 PID`
|
||||
|
||||
### Type Errors After Changes
|
||||
❌ TypeScript errors in registry
|
||||
✅ Rebuild registry to regenerate types
|
||||
|
||||
### Package Not Publishing
|
||||
❌ npm publish fails
|
||||
✅ Must be in `pkg/ui`, version bumped
|
||||
|
||||
## Critical Patterns (AI Must Follow)
|
||||
|
||||
1. **Registry First**: Always build registry before app
|
||||
2. **Two Themes**: default and new-york must stay in sync
|
||||
3. **Import Paths**: Transform from `@/registry/` → `@/components/`
|
||||
4. **Blocks vs Components**: Blocks are docs only, not CLI-installable
|
||||
5. **Package Exports**: Multiple entry points for different needs
|
||||
|
||||
## Recent Updates
|
||||
|
||||
### 2025-10-19 - Registry Structure Fix & Build Issues (IN PROGRESS)
|
||||
**Issue**: Deployment failing due to registry access pattern and build errors
|
||||
**Root Causes**:
|
||||
1. Registry functions accessing `Index[name]` instead of `Index[style][name]`
|
||||
2. Zod validation expecting objects but Index structure uses nested style keys
|
||||
3. Shiki `getHighlighter` incompatible with static export
|
||||
4. Block schema validation failing on null values
|
||||
5. Some blocks have Server Component issues with event handlers
|
||||
|
||||
**Fixes Applied**:
|
||||
1. Updated `getRegistryItem()` and `getRegistryComponent()` to accept style parameter
|
||||
2. Updated all callers to pass style parameter (block-display.tsx)
|
||||
3. Removed Zod validation in `_getAllBlocks()` and `_getBlockCode()` - we control generation
|
||||
4. Disabled syntax highlighting for static exports (replaced with basic pre/code)
|
||||
5. Convert null to undefined in block metadata extraction
|
||||
|
||||
**Remaining Issues**:
|
||||
- Some blocks (login-01, login-02, sidebar-02) have Server Component errors
|
||||
- Need to mark these blocks as Client Components or skip in static generation
|
||||
|
||||
**Files Modified**:
|
||||
- `/lib/registry.ts` - Added style parameter to registry functions
|
||||
- `/components/block-display.tsx` - Pass style to getCachedRegistryItem
|
||||
- `/lib/blocks.ts` - Removed Zod validation, fixed null values
|
||||
- `/lib/highlight-code.ts` - Disabled highlighting for static export
|
||||
|
||||
### 2025-10-18 - Blocks Display Bug Fix (COMPLETED)
|
||||
**Issue**: Blocks not displaying on http://localhost:3003/blocks
|
||||
**Root Cause**: Registry index structure mismatch
|
||||
- Registry is structured as: `Index[style][componentName]` (e.g., `Index["default"]["dashboard-01"]`)
|
||||
- `BlockDisplay` component used `getRegistryItem(name)` which tried `Index[name]` (undefined)
|
||||
- Result: Silent failure returning null, blocks never rendered
|
||||
|
||||
**Solution**: Updated `BlockDisplay` component to:
|
||||
1. Import `getBlock` function from `/lib/blocks.ts` which correctly accesses `Index[style][name]`
|
||||
2. Accept optional `style` parameter with default "default"
|
||||
3. Use `BlockWrapper` for blocks (same as individual block pages)
|
||||
4. Fallback to `BlockViewer` for non-block components
|
||||
|
||||
**Changes Made**:
|
||||
- File: `/Users/z/work/hanzo/ui/app/components/block-display.tsx`
|
||||
- Added imports: `getBlock`, `BlockWrapper`, `Style`
|
||||
- Added interface `BlockDisplayProps` with optional style
|
||||
- Rewrote logic to first try `getBlock(name, style)`, fallback to `getRegistryItem(name)`
|
||||
- For blocks: render with `BlockWrapper` (simpler, no file tree needed)
|
||||
- For components: render with `BlockViewer` (includes code display)
|
||||
|
||||
**Status**: ✅ FIXED - All 5 featured blocks now displaying correctly on blocks page
|
||||
- dashboard-01 ✅
|
||||
- sidebar-07 ✅
|
||||
- sidebar-03 ✅
|
||||
- login-03 ✅
|
||||
- login-04 ✅
|
||||
|
||||
**Testing**: Verified via browser - no console errors, clean rendering
|
||||
|
||||
### 2025-10-18 - Documentation Overhaul
|
||||
- ✅ **Cleaned up root directory** - Moved old status reports to docs/archive/
|
||||
- ✅ **Deleted unnecessary MD files** - Removed USAGE.md, WHITE_LABEL.md, TESTING_GUIDE.md
|
||||
- ✅ **Created comprehensive framework docs** - React, Vue guides in app/content/docs/frameworks/
|
||||
- ✅ **Created testing guide** - Complete testing documentation in app/content/docs/testing/
|
||||
- ✅ **Created white-label guide** - Fork and rebrand documentation in app/content/docs/white-label/
|
||||
- ✅ **Created packages overview** - All packages documented in app/content/docs/packages/
|
||||
- ✅ **Updated README.md** - Concise, feature-rich overview
|
||||
- ✅ **Updated navigation** - Added Frameworks, Packages, Testing, White-Label sections
|
||||
- ✅ **Fixed build:registry command** - Updated workspace references from www,v4 to app
|
||||
- ✅ **Fixed prettier warnings** - Removed deprecated import order options
|
||||
- ✅ **Created shadcn/ui comparison** - Archived in docs/archive/SHADCN_COMPARISON_REPORT.md
|
||||
- ✅ **Verified build process** - Registry builds successfully
|
||||
|
||||
### 2025-10-05
|
||||
- ✅ Next.js 15.3.1 with Turbopack
|
||||
- ✅ React 19 support (experimental)
|
||||
- ✅ Fumadocs (replaced Contentlayer)
|
||||
- ✅ @dnd-kit page builder
|
||||
- ✅ Electric blue primary (210 100% 50%)
|
||||
- ✅ Synced with hanzo/ui v3.4.0
|
||||
|
||||
## Component Status Tracking
|
||||
|
||||
### Current State (2025-10-18)
|
||||
- **Total Component Files**: 161 in registry/default/ui/
|
||||
- **Implemented**: ~127 fully functional components
|
||||
- **Stub Components**: ~34 need implementation
|
||||
- **Blocks**: 24+ viewport-sized templates
|
||||
- **Frameworks**: React (100%), Vue (~90%), Svelte (~85%), React Native (~70%)
|
||||
|
||||
### shadcn/ui Comparison
|
||||
**We have 3x more components than shadcn/ui (161 vs 58)**
|
||||
|
||||
**Unique to @hanzo/ui:**
|
||||
- 3D Components (9): 3d-button, 3d-card, 3d-carousel, 3d-grid, etc.
|
||||
- AI Components (12): ai-chat, ai-assistant, ai-playground, ai-vision, etc.
|
||||
- Animation Components (13): animated-beam, animated-text, animated-cursor, etc.
|
||||
- Navigation Variants (15): Multiple specialized navigation bars
|
||||
- Advanced Features: Page builder, white-label system, multi-framework support
|
||||
|
||||
**Latest from shadcn/ui 2025 (verify implementation):**
|
||||
1. button-group ✅ (exists)
|
||||
2. empty ✅ (exists)
|
||||
3. field ✅ (exists)
|
||||
4. input-group ✅ (exists)
|
||||
5. item ✅ (exists)
|
||||
6. kbd ✅ (exists)
|
||||
7. spinner ✅ (exists)
|
||||
|
||||
### High-Priority Missing Components
|
||||
1. **combobox** - Search, filter, keyboard nav
|
||||
2. **color-picker** - RGB, HSL, HEX, alpha
|
||||
3. **dropzone** - File upload with drag-drop
|
||||
4. **minimal-tiptap** - Rich text editor
|
||||
5. **image-crop** - Cropping tool
|
||||
6. **image-zoom** - Zoom/pan functionality
|
||||
|
||||
### Navigation Components (~15 stubs)
|
||||
Need extraction from blocks:
|
||||
- advanced-navigation-bar
|
||||
- ai-model-selector-navigation-bar
|
||||
- breadcrumb-navigation-bar
|
||||
- dashboard-navigation-bar
|
||||
- e-commerce-navigation-bar
|
||||
- filter-navigation-bar
|
||||
- mobile-bottom-navigation-bar
|
||||
- multi-level-navigation-bar
|
||||
- notification-center-navigation-bar
|
||||
- project-switcher-navigation-bar
|
||||
- search-navigation-bar
|
||||
- settings-navigation-bar
|
||||
- tabs-navigation-bar
|
||||
- app-switcher-navigation-bar
|
||||
- breadcrumb-and-filters-navigation-bar
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Installed
|
||||
```json
|
||||
{
|
||||
"@radix-ui/react-*": "latest",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"tailwind-merge": "^2.5.5",
|
||||
"react-day-picker": "^8.10.1",
|
||||
"lucide-react": "latest"
|
||||
}
|
||||
```
|
||||
|
||||
### Missing (Need to Add)
|
||||
```json
|
||||
{
|
||||
"@tanstack/react-table": "^8.20.5",
|
||||
"cmdk": "^0.2.1",
|
||||
"sonner": "^1.7.2",
|
||||
"react-dropzone": "^14.3.8",
|
||||
"react-colorful": "^5.6.1",
|
||||
"@tiptap/react": "^2.10.5",
|
||||
"framer-motion": "^11.15.0"
|
||||
}
|
||||
```
|
||||
|
||||
## Working with Forks
|
||||
|
||||
### Zoo UI (`~/work/zoo/ui`)
|
||||
```bash
|
||||
cd ~/work/zoo/ui
|
||||
git remote add hanzo https://github.com/hanzoai/ui.git
|
||||
git fetch hanzo main
|
||||
git merge hanzo/main
|
||||
```
|
||||
|
||||
### Lux UI (`~/work/lux/ui`)
|
||||
Same sync pattern as Zoo UI.
|
||||
|
||||
## Context for All AI Assistants
|
||||
|
||||
This file (`LLM.md`) is symlinked as:
|
||||
- `.AGENTS.md`
|
||||
- `CLAUDE.md`
|
||||
- `QWEN.md`
|
||||
- `GEMINI.md`
|
||||
|
||||
All files reference the same knowledge base. Updates here propagate to all AI systems.
|
||||
|
||||
## Documentation Structure
|
||||
|
||||
All documentation now lives in `app/content/docs/` and is visible on ui.hanzo.ai:
|
||||
|
||||
- **/frameworks/** - Multi-framework guides (React, Vue, Svelte, React Native)
|
||||
- **/packages/** - Package documentation (@hanzo/ui, @hanzo/auth, etc.)
|
||||
- **/testing/** - Testing guide (unit, E2E, visual regression)
|
||||
- **/white-label/** - Fork and rebrand guide
|
||||
- **/components/** - All 161 component docs
|
||||
- **/blocks/** - Block documentation
|
||||
- **/installation/** - Framework-specific installation guides
|
||||
- **/guides/** - Page builder, workflows
|
||||
|
||||
**Archived**: Old status reports in `/docs/archive/`
|
||||
|
||||
**Root MD Files** (ONLY these allowed):
|
||||
- LLM.md (this file)
|
||||
- README.md
|
||||
- CONTRIBUTING.md
|
||||
- LICENSE.md
|
||||
- SECURITY.md
|
||||
- AGENTS.md, CLAUDE.md, QWEN.md, GEMINI.md (symlinks to LLM.md)
|
||||
|
||||
## Rules for AI Assistants
|
||||
|
||||
1. **ALWAYS** build registry before app build
|
||||
2. **NEVER** commit symlinked files (.AGENTS.md, CLAUDE.md, etc.) - they're in .gitignore
|
||||
3. **ALWAYS** update LLM.md with significant discoveries
|
||||
4. **NEVER** create random summary/status files at root - they go in docs/archive/ or update LLM.md
|
||||
5. **NEVER** create BARE .md files at root except LLM.md, README.md, CONTRIBUTING.md, LICENSE.md, SECURITY.md
|
||||
6. **ALWAYS** put documentation in app/content/docs/ so it's visible on ui.hanzo.ai
|
||||
7. **ALWAYS** use pnpm, not npm/yarn
|
||||
8. **ALWAYS** check both theme variants (default, new-york)
|
||||
9. **NEVER** confuse blocks with components (blocks are docs only)
|
||||
|
||||
## Testing Patterns
|
||||
|
||||
```bash
|
||||
# Unit test single file
|
||||
pnpm test path/to/test.spec.ts
|
||||
|
||||
# E2E single test
|
||||
pnpm test:e2e tests/specific.spec.ts
|
||||
|
||||
# Watch mode
|
||||
pnpm test:dev
|
||||
```
|
||||
|
||||
## MDX Documentation
|
||||
|
||||
Available components in MDX:
|
||||
```tsx
|
||||
<ComponentPreview name="button-demo" />
|
||||
<ComponentSource name="button" />
|
||||
<CodeTabs>
|
||||
<Steps>
|
||||
<Callout>
|
||||
```
|
||||
|
||||
## Git Status Context (2025-10-05)
|
||||
|
||||
Modified files from git status:
|
||||
- `.github/workflows/ci.yml` - CI config
|
||||
- `.gitignore` - Ignore patterns
|
||||
- `LLM.md` - This file
|
||||
- Multiple component files (3d-*, avatar-group, banner, etc.)
|
||||
- Registry examples updated
|
||||
|
||||
Deleted:
|
||||
- `CLAUDE.md` - Now symlinked to LLM.md
|
||||
|
||||
Untracked:
|
||||
- `.github/workflows/coverage.yml` - New coverage workflow
|
||||
|
||||
Recent commits:
|
||||
1. feat: Add floating paintbrush to theme generator
|
||||
2. feat: Show block previews in page builder
|
||||
3. fix: Add missing source.config.mjs
|
||||
4. fix: Correct sidebar layout in compose editor
|
||||
|
||||
---
|
||||
|
||||
**Note**: This file serves as the single source of truth for all AI assistants working on this project. Keep it updated with architectural changes, new patterns, and critical insights.
|
||||
|
||||
@@ -6,18 +6,18 @@ Accessible and customizable components for React, Vue, Svelte, and React Native.
|
||||
|
||||
## Features
|
||||
|
||||
- **161+ Components** - 3x more than shadcn/ui
|
||||
- **Multi-Framework** - React, Vue, Svelte, React Native
|
||||
- **Two Themes** - Default & New York variants
|
||||
- **AI Components** - Chat, assistants, playground
|
||||
- **3D Components** - Interactive 3D elements
|
||||
- **Animations** - Advanced motion components
|
||||
- **Page Builder** - Visual drag-drop interface
|
||||
- **White-Label** - Fork and rebrand easily
|
||||
- **Blocks** - 24+ production-ready templates
|
||||
- **Accessible** - Built with Radix UI primitives
|
||||
- **Customizable** - Tailwind CSS powered
|
||||
- **TypeScript** - Fully typed
|
||||
- 🎯 **161+ Components** - 3x more than shadcn/ui
|
||||
- 🌐 **Multi-Framework** - React, Vue, Svelte, React Native
|
||||
- 🎨 **Two Themes** - Default & New York variants
|
||||
- 🤖 **AI Components** - Chat, assistants, playground
|
||||
- 🎮 **3D Components** - Interactive 3D elements
|
||||
- ✨ **Animations** - Advanced motion components
|
||||
- 🎛️ **Page Builder** - Visual drag-drop interface
|
||||
- 🏷️ **White-Label** - Fork and rebrand easily
|
||||
- 📦 **Blocks** - 24+ production-ready templates
|
||||
- ♿ **Accessible** - Built with Radix UI primitives
|
||||
- 🎭 **Customizable** - Tailwind CSS powered
|
||||
- 📘 **TypeScript** - Fully typed
|
||||
|
||||
## Quick Start
|
||||
|
||||
@@ -51,17 +51,54 @@ export function App() {
|
||||
}
|
||||
```
|
||||
|
||||
## Multi-Framework Support
|
||||
|
||||
```tsx
|
||||
// React (default)
|
||||
import { Button } from '@hanzo/ui'
|
||||
|
||||
// Vue
|
||||
import { Button } from '@hanzo/ui/vue'
|
||||
|
||||
// Svelte
|
||||
import { Button } from '@hanzo/ui/svelte'
|
||||
|
||||
// React Native
|
||||
import { Button } from '@hanzo/ui/react-native'
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
Visit **[ui.hanzo.ai](https://ui.hanzo.ai)** for full docs.
|
||||
📚 Visit **[ui.hanzo.ai](https://ui.hanzo.ai)** for:
|
||||
|
||||
- [Component Documentation](https://ui.hanzo.ai/docs/components)
|
||||
- [Framework Guides](https://ui.hanzo.ai/docs/frameworks)
|
||||
- [Installation Guide](https://ui.hanzo.ai/docs/installation)
|
||||
- [Examples](https://ui.hanzo.ai/examples)
|
||||
- [Page Builder](https://ui.hanzo.ai/builder)
|
||||
- [Theme Generator](https://ui.hanzo.ai/theme-generator)
|
||||
|
||||
## CLI
|
||||
|
||||
Install components individually:
|
||||
|
||||
```bash
|
||||
npx @hanzo/ui add button
|
||||
npx @hanzo/ui add card dialog
|
||||
```
|
||||
|
||||
## What's Different from shadcn/ui?
|
||||
|
||||
| Feature | shadcn/ui | @hanzo/ui |
|
||||
|---------|-----------|-----------|
|
||||
| Components | 58 | **161** |
|
||||
| Frameworks | React only | React, Vue, Svelte, React Native |
|
||||
| 3D Components | ❌ | ✅ (9 components) |
|
||||
| AI Components | ❌ | ✅ (12 components) |
|
||||
| Page Builder | ❌ | ✅ |
|
||||
| White-Label | ❌ | ✅ |
|
||||
| Blocks | Limited | **24+ templates** |
|
||||
|
||||
## Packages
|
||||
|
||||
- `@hanzo/ui` - Main UI library (161 components)
|
||||
@@ -69,23 +106,55 @@ npx @hanzo/ui add card dialog
|
||||
- `@hanzo/commerce` - E-commerce components
|
||||
- `@hanzo/brand` - Branding system
|
||||
|
||||
## Examples
|
||||
|
||||
```tsx
|
||||
// 3D Components
|
||||
import { ThreeDButton, ThreeDCard } from '@hanzo/ui'
|
||||
|
||||
// AI Components
|
||||
import { AIChat, AIAssistant } from '@hanzo/ui'
|
||||
|
||||
// Animations
|
||||
import { AnimatedBeam, AnimatedText } from '@hanzo/ui'
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
```bash
|
||||
# Clone repository
|
||||
git clone https://github.com/hanzoai/ui.git
|
||||
cd ui
|
||||
|
||||
# Install dependencies
|
||||
pnpm install
|
||||
|
||||
# Start dev server
|
||||
pnpm dev
|
||||
|
||||
# Build packages
|
||||
pnpm build
|
||||
|
||||
# Run tests
|
||||
pnpm test
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
Please read the [contributing guide](/CONTRIBUTING.md).
|
||||
We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md).
|
||||
|
||||
## License
|
||||
|
||||
MIT - See [LICENSE.md](./LICENSE.md) for details.
|
||||
|
||||
## Links
|
||||
|
||||
- [Documentation](https://ui.hanzo.ai)
|
||||
- [GitHub](https://github.com/hanzoai/ui)
|
||||
- [npm](https://www.npmjs.com/package/@hanzo/ui)
|
||||
- [Discord](https://discord.gg/hanzo)
|
||||
- [Twitter](https://twitter.com/hanzoai)
|
||||
|
||||
---
|
||||
|
||||
Built by [Hanzo](https://hanzo.ai)
|
||||
Built with ❤️ by [Hanzo](https://hanzo.ai)
|
||||
|
||||
@@ -1,434 +0,0 @@
|
||||
// @ts-nocheck
|
||||
import { browser } from "@hanzo/docs-mdx/runtime/browser"
|
||||
|
||||
import type * as Config from "../source.config"
|
||||
|
||||
const create = browser<
|
||||
typeof Config,
|
||||
import("@hanzo/docs-mdx/runtime/types").InternalTypeConfig & {
|
||||
DocData: {}
|
||||
}
|
||||
>()
|
||||
const browserCollections = {
|
||||
docs: create.doc("docs", {
|
||||
"about.mdx": () => import("../content/docs/about.mdx?collection=docs"),
|
||||
"changelog.mdx": () =>
|
||||
import("../content/docs/changelog.mdx?collection=docs"),
|
||||
"cli.mdx": () => import("../content/docs/cli.mdx?collection=docs"),
|
||||
"components-json.mdx": () =>
|
||||
import("../content/docs/components-json.mdx?collection=docs"),
|
||||
"components.mdx": () =>
|
||||
import("../content/docs/components.mdx?collection=docs"),
|
||||
"figma.mdx": () => import("../content/docs/figma.mdx?collection=docs"),
|
||||
"index.mdx": () => import("../content/docs/index.mdx?collection=docs"),
|
||||
"mcp.mdx": () => import("../content/docs/mcp.mdx?collection=docs"),
|
||||
"theming.mdx": () => import("../content/docs/theming.mdx?collection=docs"),
|
||||
"ai/actions.mdx": () =>
|
||||
import("../content/docs/ai/actions.mdx?collection=docs"),
|
||||
"ai/agents.mdx": () =>
|
||||
import("../content/docs/ai/agents.mdx?collection=docs"),
|
||||
"ai/assistant.mdx": () =>
|
||||
import("../content/docs/ai/assistant.mdx?collection=docs"),
|
||||
"ai/chat.mdx": () => import("../content/docs/ai/chat.mdx?collection=docs"),
|
||||
"ai/code.mdx": () => import("../content/docs/ai/code.mdx?collection=docs"),
|
||||
"ai/index.mdx": () =>
|
||||
import("../content/docs/ai/index.mdx?collection=docs"),
|
||||
"ai/models.mdx": () =>
|
||||
import("../content/docs/ai/models.mdx?collection=docs"),
|
||||
"ai/playground.mdx": () =>
|
||||
import("../content/docs/ai/playground.mdx?collection=docs"),
|
||||
"ai/tools.mdx": () =>
|
||||
import("../content/docs/ai/tools.mdx?collection=docs"),
|
||||
"ai/vision.mdx": () =>
|
||||
import("../content/docs/ai/vision.mdx?collection=docs"),
|
||||
"ai/voice-settings.mdx": () =>
|
||||
import("../content/docs/ai/voice-settings.mdx?collection=docs"),
|
||||
"ai/voice.mdx": () =>
|
||||
import("../content/docs/ai/voice.mdx?collection=docs"),
|
||||
"block-examples/billing.mdx": () =>
|
||||
import("../content/docs/block-examples/billing.mdx?collection=docs"),
|
||||
"block-examples/compose-spec.mdx": () =>
|
||||
import("../content/docs/block-examples/compose-spec.mdx?collection=docs"),
|
||||
"block-examples/newsletter.mdx": () =>
|
||||
import("../content/docs/block-examples/newsletter.mdx?collection=docs"),
|
||||
"block-examples/pricing.mdx": () =>
|
||||
import("../content/docs/block-examples/pricing.mdx?collection=docs"),
|
||||
"frameworks/index.mdx": () =>
|
||||
import("../content/docs/frameworks/index.mdx?collection=docs"),
|
||||
"frameworks/react.mdx": () =>
|
||||
import("../content/docs/frameworks/react.mdx?collection=docs"),
|
||||
"frameworks/vue.mdx": () =>
|
||||
import("../content/docs/frameworks/vue.mdx?collection=docs"),
|
||||
"dark-mode/astro.mdx": () =>
|
||||
import("../content/docs/dark-mode/astro.mdx?collection=docs"),
|
||||
"dark-mode/index.mdx": () =>
|
||||
import("../content/docs/dark-mode/index.mdx?collection=docs"),
|
||||
"dark-mode/next.mdx": () =>
|
||||
import("../content/docs/dark-mode/next.mdx?collection=docs"),
|
||||
"dark-mode/remix.mdx": () =>
|
||||
import("../content/docs/dark-mode/remix.mdx?collection=docs"),
|
||||
"dark-mode/vite.mdx": () =>
|
||||
import("../content/docs/dark-mode/vite.mdx?collection=docs"),
|
||||
"guides/page-builder.mdx": () =>
|
||||
import("../content/docs/guides/page-builder.mdx?collection=docs"),
|
||||
"guides/visual-workflows.mdx": () =>
|
||||
import("../content/docs/guides/visual-workflows.mdx?collection=docs"),
|
||||
"hanzo-react/getting-started.mdx": () =>
|
||||
import("../content/docs/hanzo-react/getting-started.mdx?collection=docs"),
|
||||
"hanzo-react/hooks.mdx": () =>
|
||||
import("../content/docs/hanzo-react/hooks.mdx?collection=docs"),
|
||||
"installation/astro.mdx": () =>
|
||||
import("../content/docs/installation/astro.mdx?collection=docs"),
|
||||
"installation/gatsby.mdx": () =>
|
||||
import("../content/docs/installation/gatsby.mdx?collection=docs"),
|
||||
"installation/index.mdx": () =>
|
||||
import("../content/docs/installation/index.mdx?collection=docs"),
|
||||
"installation/laravel.mdx": () =>
|
||||
import("../content/docs/installation/laravel.mdx?collection=docs"),
|
||||
"installation/manual.mdx": () =>
|
||||
import("../content/docs/installation/manual.mdx?collection=docs"),
|
||||
"installation/next.mdx": () =>
|
||||
import("../content/docs/installation/next.mdx?collection=docs"),
|
||||
"installation/remix.mdx": () =>
|
||||
import("../content/docs/installation/remix.mdx?collection=docs"),
|
||||
"installation/vite.mdx": () =>
|
||||
import("../content/docs/installation/vite.mdx?collection=docs"),
|
||||
"packages/index.mdx": () =>
|
||||
import("../content/docs/packages/index.mdx?collection=docs"),
|
||||
"components/3d-card.mdx": () =>
|
||||
import("../content/docs/components/3d-card.mdx?collection=docs"),
|
||||
"components/3d-marquee.mdx": () =>
|
||||
import("../content/docs/components/3d-marquee.mdx?collection=docs"),
|
||||
"components/3d-pin.mdx": () =>
|
||||
import("../content/docs/components/3d-pin.mdx?collection=docs"),
|
||||
"components/accordion.mdx": () =>
|
||||
import("../content/docs/components/accordion.mdx?collection=docs"),
|
||||
"components/advanced-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/advanced-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/ai-model-selector-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/ai-model-selector-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/alert-dialog.mdx": () =>
|
||||
import("../content/docs/components/alert-dialog.mdx?collection=docs"),
|
||||
"components/alert.mdx": () =>
|
||||
import("../content/docs/components/alert.mdx?collection=docs"),
|
||||
"components/android.mdx": () =>
|
||||
import("../content/docs/components/android.mdx?collection=docs"),
|
||||
"components/animated-beam.mdx": () =>
|
||||
import("../content/docs/components/animated-beam.mdx?collection=docs"),
|
||||
"components/animated-cursor.mdx": () =>
|
||||
import("../content/docs/components/animated-cursor.mdx?collection=docs"),
|
||||
"components/animated-testimonials.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/animated-testimonials.mdx?collection=docs"
|
||||
),
|
||||
"components/animated-tooltip.mdx": () =>
|
||||
import("../content/docs/components/animated-tooltip.mdx?collection=docs"),
|
||||
"components/animation-components.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/animation-components.mdx?collection=docs"
|
||||
),
|
||||
"components/announcement.mdx": () =>
|
||||
import("../content/docs/components/announcement.mdx?collection=docs"),
|
||||
"components/app-switcher-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/app-switcher-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/apple-cards-carousel.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/apple-cards-carousel.mdx?collection=docs"
|
||||
),
|
||||
"components/apple-hello-effect.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/apple-hello-effect.mdx?collection=docs"
|
||||
),
|
||||
"components/aspect-ratio.mdx": () =>
|
||||
import("../content/docs/components/aspect-ratio.mdx?collection=docs"),
|
||||
"components/avatar-group.mdx": () =>
|
||||
import("../content/docs/components/avatar-group.mdx?collection=docs"),
|
||||
"components/avatar.mdx": () =>
|
||||
import("../content/docs/components/avatar.mdx?collection=docs"),
|
||||
"components/badge.mdx": () =>
|
||||
import("../content/docs/components/badge.mdx?collection=docs"),
|
||||
"components/banner.mdx": () =>
|
||||
import("../content/docs/components/banner.mdx?collection=docs"),
|
||||
"components/breadcrumb-and-filters-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/breadcrumb-and-filters-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/breadcrumb-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/breadcrumb-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/breadcrumb.mdx": () =>
|
||||
import("../content/docs/components/breadcrumb.mdx?collection=docs"),
|
||||
"components/button-group.mdx": () =>
|
||||
import("../content/docs/components/button-group.mdx?collection=docs"),
|
||||
"components/button.mdx": () =>
|
||||
import("../content/docs/components/button.mdx?collection=docs"),
|
||||
"components/calendar.mdx": () =>
|
||||
import("../content/docs/components/calendar.mdx?collection=docs"),
|
||||
"components/card.mdx": () =>
|
||||
import("../content/docs/components/card.mdx?collection=docs"),
|
||||
"components/carousel.mdx": () =>
|
||||
import("../content/docs/components/carousel.mdx?collection=docs"),
|
||||
"components/centered-logo-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/centered-logo-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/checkbox.mdx": () =>
|
||||
import("../content/docs/components/checkbox.mdx?collection=docs"),
|
||||
"components/choicebox.mdx": () =>
|
||||
import("../content/docs/components/choicebox.mdx?collection=docs"),
|
||||
"components/code-block.mdx": () =>
|
||||
import("../content/docs/components/code-block.mdx?collection=docs"),
|
||||
"components/code-editor.mdx": () =>
|
||||
import("../content/docs/components/code-editor.mdx?collection=docs"),
|
||||
"components/code-tabs.mdx": () =>
|
||||
import("../content/docs/components/code-tabs.mdx?collection=docs"),
|
||||
"components/collaboration-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/collaboration-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/collapsible.mdx": () =>
|
||||
import("../content/docs/components/collapsible.mdx?collection=docs"),
|
||||
"components/color-picker.mdx": () =>
|
||||
import("../content/docs/components/color-picker.mdx?collection=docs"),
|
||||
"components/combobox.mdx": () =>
|
||||
import("../content/docs/components/combobox.mdx?collection=docs"),
|
||||
"components/command.mdx": () =>
|
||||
import("../content/docs/components/command.mdx?collection=docs"),
|
||||
"components/communication-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/communication-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/comparison.mdx": () =>
|
||||
import("../content/docs/components/comparison.mdx?collection=docs"),
|
||||
"components/context-menu.mdx": () =>
|
||||
import("../content/docs/components/context-menu.mdx?collection=docs"),
|
||||
"components/context-switcher-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/context-switcher-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/credit-card.mdx": () =>
|
||||
import("../content/docs/components/credit-card.mdx?collection=docs"),
|
||||
"components/cursor.mdx": () =>
|
||||
import("../content/docs/components/cursor.mdx?collection=docs"),
|
||||
"components/dashboard-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/dashboard-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/data-table.mdx": () =>
|
||||
import("../content/docs/components/data-table.mdx?collection=docs"),
|
||||
"components/date-picker.mdx": () =>
|
||||
import("../content/docs/components/date-picker.mdx?collection=docs"),
|
||||
"components/desktop-hooks.mdx": () =>
|
||||
import("../content/docs/components/desktop-hooks.mdx?collection=docs"),
|
||||
"components/desktop-spotlight.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/desktop-spotlight.mdx?collection=docs"
|
||||
),
|
||||
"components/desktop-window.mdx": () =>
|
||||
import("../content/docs/components/desktop-window.mdx?collection=docs"),
|
||||
"components/desktop.mdx": () =>
|
||||
import("../content/docs/components/desktop.mdx?collection=docs"),
|
||||
"components/dialog-stack.mdx": () =>
|
||||
import("../content/docs/components/dialog-stack.mdx?collection=docs"),
|
||||
"components/dialog.mdx": () =>
|
||||
import("../content/docs/components/dialog.mdx?collection=docs"),
|
||||
"components/dock.mdx": () =>
|
||||
import("../content/docs/components/dock.mdx?collection=docs"),
|
||||
"components/drawer.mdx": () =>
|
||||
import("../content/docs/components/drawer.mdx?collection=docs"),
|
||||
"components/dropdown-menu.mdx": () =>
|
||||
import("../content/docs/components/dropdown-menu.mdx?collection=docs"),
|
||||
"components/dropzone.mdx": () =>
|
||||
import("../content/docs/components/dropzone.mdx?collection=docs"),
|
||||
"components/e-commerce-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/e-commerce-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/editor.mdx": () =>
|
||||
import("../content/docs/components/editor.mdx?collection=docs"),
|
||||
"components/empty.mdx": () =>
|
||||
import("../content/docs/components/empty.mdx?collection=docs"),
|
||||
"components/field.mdx": () =>
|
||||
import("../content/docs/components/field.mdx?collection=docs"),
|
||||
"components/form.mdx": () =>
|
||||
import("../content/docs/components/form.mdx?collection=docs"),
|
||||
"components/gantt.mdx": () =>
|
||||
import("../content/docs/components/gantt.mdx?collection=docs"),
|
||||
"components/glimpse.mdx": () =>
|
||||
import("../content/docs/components/glimpse.mdx?collection=docs"),
|
||||
"components/grid-pattern.mdx": () =>
|
||||
import("../content/docs/components/grid-pattern.mdx?collection=docs"),
|
||||
"components/hover-card.mdx": () =>
|
||||
import("../content/docs/components/hover-card.mdx?collection=docs"),
|
||||
"components/icon-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/icon-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/image-crop.mdx": () =>
|
||||
import("../content/docs/components/image-crop.mdx?collection=docs"),
|
||||
"components/image-zoom.mdx": () =>
|
||||
import("../content/docs/components/image-zoom.mdx?collection=docs"),
|
||||
"components/index.mdx": () =>
|
||||
import("../content/docs/components/index.mdx?collection=docs"),
|
||||
"components/input-group.mdx": () =>
|
||||
import("../content/docs/components/input-group.mdx?collection=docs"),
|
||||
"components/input-otp.mdx": () =>
|
||||
import("../content/docs/components/input-otp.mdx?collection=docs"),
|
||||
"components/input.mdx": () =>
|
||||
import("../content/docs/components/input.mdx?collection=docs"),
|
||||
"components/interactive-grid-pattern.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/interactive-grid-pattern.mdx?collection=docs"
|
||||
),
|
||||
"components/iphone-15-pro.mdx": () =>
|
||||
import("../content/docs/components/iphone-15-pro.mdx?collection=docs"),
|
||||
"components/item.mdx": () =>
|
||||
import("../content/docs/components/item.mdx?collection=docs"),
|
||||
"components/kanban.mdx": () =>
|
||||
import("../content/docs/components/kanban.mdx?collection=docs"),
|
||||
"components/kbd.mdx": () =>
|
||||
import("../content/docs/components/kbd.mdx?collection=docs"),
|
||||
"components/label.mdx": () =>
|
||||
import("../content/docs/components/label.mdx?collection=docs"),
|
||||
"components/limelight-nav.mdx": () =>
|
||||
import("../content/docs/components/limelight-nav.mdx?collection=docs"),
|
||||
"components/list.mdx": () =>
|
||||
import("../content/docs/components/list.mdx?collection=docs"),
|
||||
"components/macos-dock.mdx": () =>
|
||||
import("../content/docs/components/macos-dock.mdx?collection=docs"),
|
||||
"components/magnetic.mdx": () =>
|
||||
import("../content/docs/components/magnetic.mdx?collection=docs"),
|
||||
"components/marquee.mdx": () =>
|
||||
import("../content/docs/components/marquee.mdx?collection=docs"),
|
||||
"components/menu-dock.mdx": () =>
|
||||
import("../content/docs/components/menu-dock.mdx?collection=docs"),
|
||||
"components/menubar.mdx": () =>
|
||||
import("../content/docs/components/menubar.mdx?collection=docs"),
|
||||
"components/message-dock.mdx": () =>
|
||||
import("../content/docs/components/message-dock.mdx?collection=docs"),
|
||||
"components/mini-calendar.mdx": () =>
|
||||
import("../content/docs/components/mini-calendar.mdx?collection=docs"),
|
||||
"components/minimal-tiptap.mdx": () =>
|
||||
import("../content/docs/components/minimal-tiptap.mdx?collection=docs"),
|
||||
"components/motion-highlight.mdx": () =>
|
||||
import("../content/docs/components/motion-highlight.mdx?collection=docs"),
|
||||
"components/navigation-menu.mdx": () =>
|
||||
import("../content/docs/components/navigation-menu.mdx?collection=docs"),
|
||||
"components/pagination.mdx": () =>
|
||||
import("../content/docs/components/pagination.mdx?collection=docs"),
|
||||
"components/particles-background.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/particles-background.mdx?collection=docs"
|
||||
),
|
||||
"components/particles.mdx": () =>
|
||||
import("../content/docs/components/particles.mdx?collection=docs"),
|
||||
"components/pill.mdx": () =>
|
||||
import("../content/docs/components/pill.mdx?collection=docs"),
|
||||
"components/pin-list.mdx": () =>
|
||||
import("../content/docs/components/pin-list.mdx?collection=docs"),
|
||||
"components/pixel-image.mdx": () =>
|
||||
import("../content/docs/components/pixel-image.mdx?collection=docs"),
|
||||
"components/popover.mdx": () =>
|
||||
import("../content/docs/components/popover.mdx?collection=docs"),
|
||||
"components/progress.mdx": () =>
|
||||
import("../content/docs/components/progress.mdx?collection=docs"),
|
||||
"components/qr-code.mdx": () =>
|
||||
import("../content/docs/components/qr-code.mdx?collection=docs"),
|
||||
"components/radio-group.mdx": () =>
|
||||
import("../content/docs/components/radio-group.mdx?collection=docs"),
|
||||
"components/relative-time.mdx": () =>
|
||||
import("../content/docs/components/relative-time.mdx?collection=docs"),
|
||||
"components/resizable.mdx": () =>
|
||||
import("../content/docs/components/resizable.mdx?collection=docs"),
|
||||
"components/safari.mdx": () =>
|
||||
import("../content/docs/components/safari.mdx?collection=docs"),
|
||||
"components/sandbox.mdx": () =>
|
||||
import("../content/docs/components/sandbox.mdx?collection=docs"),
|
||||
"components/scroll-area.mdx": () =>
|
||||
import("../content/docs/components/scroll-area.mdx?collection=docs"),
|
||||
"components/search-and-toggle-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/search-and-toggle-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/select.mdx": () =>
|
||||
import("../content/docs/components/select.mdx?collection=docs"),
|
||||
"components/separator.mdx": () =>
|
||||
import("../content/docs/components/separator.mdx?collection=docs"),
|
||||
"components/sheet.mdx": () =>
|
||||
import("../content/docs/components/sheet.mdx?collection=docs"),
|
||||
"components/simple-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/simple-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/skeleton.mdx": () =>
|
||||
import("../content/docs/components/skeleton.mdx?collection=docs"),
|
||||
"components/slider.mdx": () =>
|
||||
import("../content/docs/components/slider.mdx?collection=docs"),
|
||||
"components/snippet.mdx": () =>
|
||||
import("../content/docs/components/snippet.mdx?collection=docs"),
|
||||
"components/sonner.mdx": () =>
|
||||
import("../content/docs/components/sonner.mdx?collection=docs"),
|
||||
"components/spinner.mdx": () =>
|
||||
import("../content/docs/components/spinner.mdx?collection=docs"),
|
||||
"components/stars-scrolling-wheel.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/stars-scrolling-wheel.mdx?collection=docs"
|
||||
),
|
||||
"components/status-dashboard-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/status-dashboard-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/status.mdx": () =>
|
||||
import("../content/docs/components/status.mdx?collection=docs"),
|
||||
"components/switch.mdx": () =>
|
||||
import("../content/docs/components/switch.mdx?collection=docs"),
|
||||
"components/table.mdx": () =>
|
||||
import("../content/docs/components/table.mdx?collection=docs"),
|
||||
"components/tabs.mdx": () =>
|
||||
import("../content/docs/components/tabs.mdx?collection=docs"),
|
||||
"components/tags.mdx": () =>
|
||||
import("../content/docs/components/tags.mdx?collection=docs"),
|
||||
"components/team-switcher-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/team-switcher-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/terminal.mdx": () =>
|
||||
import("../content/docs/components/terminal.mdx?collection=docs"),
|
||||
"components/textarea.mdx": () =>
|
||||
import("../content/docs/components/textarea.mdx?collection=docs"),
|
||||
"components/timeline.mdx": () =>
|
||||
import("../content/docs/components/timeline.mdx?collection=docs"),
|
||||
"components/toast.mdx": () =>
|
||||
import("../content/docs/components/toast.mdx?collection=docs"),
|
||||
"components/toggle-group.mdx": () =>
|
||||
import("../content/docs/components/toggle-group.mdx?collection=docs"),
|
||||
"components/toggle.mdx": () =>
|
||||
import("../content/docs/components/toggle.mdx?collection=docs"),
|
||||
"components/tooltip.mdx": () =>
|
||||
import("../content/docs/components/tooltip.mdx?collection=docs"),
|
||||
"components/two-tier-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/two-tier-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/typography.mdx": () =>
|
||||
import("../content/docs/components/typography.mdx?collection=docs"),
|
||||
"components/underline-navigation-bar.mdx": () =>
|
||||
import(
|
||||
"../content/docs/components/underline-navigation-bar.mdx?collection=docs"
|
||||
),
|
||||
"components/video-player.mdx": () =>
|
||||
import("../content/docs/components/video-player.mdx?collection=docs"),
|
||||
"white-label/index.mdx": () =>
|
||||
import("../content/docs/white-label/index.mdx?collection=docs"),
|
||||
"testing/index.mdx": () =>
|
||||
import("../content/docs/testing/index.mdx?collection=docs"),
|
||||
}),
|
||||
}
|
||||
export default browserCollections
|
||||
@@ -1,15 +0,0 @@
|
||||
// @ts-nocheck
|
||||
import { dynamic } from "@hanzo/docs-mdx/runtime/dynamic"
|
||||
|
||||
import * as Config from "../source.config"
|
||||
|
||||
const create = await dynamic<
|
||||
typeof Config,
|
||||
import("@hanzo/docs-mdx/runtime/types").InternalTypeConfig & {
|
||||
DocData: {}
|
||||
}
|
||||
>(
|
||||
Config,
|
||||
{ configPath: "source.config.ts", environment: "next", outDir: ".docs" },
|
||||
{ doc: { passthroughs: ["extractedReferences"] } }
|
||||
)
|
||||
@@ -1,393 +0,0 @@
|
||||
// @ts-nocheck
|
||||
import { server } from "@hanzo/docs-mdx/runtime/server"
|
||||
|
||||
import * as __fd_glob_0 from "../content/docs/about.mdx?collection=docs"
|
||||
import * as __fd_glob_9 from "../content/docs/ai/actions.mdx?collection=docs"
|
||||
import * as __fd_glob_10 from "../content/docs/ai/agents.mdx?collection=docs"
|
||||
import * as __fd_glob_11 from "../content/docs/ai/assistant.mdx?collection=docs"
|
||||
import * as __fd_glob_12 from "../content/docs/ai/chat.mdx?collection=docs"
|
||||
import * as __fd_glob_13 from "../content/docs/ai/code.mdx?collection=docs"
|
||||
import * as __fd_glob_14 from "../content/docs/ai/index.mdx?collection=docs"
|
||||
import * as __fd_glob_15 from "../content/docs/ai/models.mdx?collection=docs"
|
||||
import * as __fd_glob_16 from "../content/docs/ai/playground.mdx?collection=docs"
|
||||
import * as __fd_glob_17 from "../content/docs/ai/tools.mdx?collection=docs"
|
||||
import * as __fd_glob_18 from "../content/docs/ai/vision.mdx?collection=docs"
|
||||
import * as __fd_glob_19 from "../content/docs/ai/voice-settings.mdx?collection=docs"
|
||||
import * as __fd_glob_20 from "../content/docs/ai/voice.mdx?collection=docs"
|
||||
import * as __fd_glob_21 from "../content/docs/block-examples/billing.mdx?collection=docs"
|
||||
import * as __fd_glob_22 from "../content/docs/block-examples/compose-spec.mdx?collection=docs"
|
||||
import * as __fd_glob_23 from "../content/docs/block-examples/newsletter.mdx?collection=docs"
|
||||
import * as __fd_glob_24 from "../content/docs/block-examples/pricing.mdx?collection=docs"
|
||||
import * as __fd_glob_1 from "../content/docs/changelog.mdx?collection=docs"
|
||||
import * as __fd_glob_2 from "../content/docs/cli.mdx?collection=docs"
|
||||
import * as __fd_glob_3 from "../content/docs/components-json.mdx?collection=docs"
|
||||
import * as __fd_glob_4 from "../content/docs/components.mdx?collection=docs"
|
||||
import * as __fd_glob_46 from "../content/docs/components/3d-card.mdx?collection=docs"
|
||||
import * as __fd_glob_47 from "../content/docs/components/3d-marquee.mdx?collection=docs"
|
||||
import * as __fd_glob_48 from "../content/docs/components/3d-pin.mdx?collection=docs"
|
||||
import * as __fd_glob_49 from "../content/docs/components/accordion.mdx?collection=docs"
|
||||
import * as __fd_glob_50 from "../content/docs/components/advanced-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_51 from "../content/docs/components/ai-model-selector-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_52 from "../content/docs/components/alert-dialog.mdx?collection=docs"
|
||||
import * as __fd_glob_53 from "../content/docs/components/alert.mdx?collection=docs"
|
||||
import * as __fd_glob_54 from "../content/docs/components/android.mdx?collection=docs"
|
||||
import * as __fd_glob_55 from "../content/docs/components/animated-beam.mdx?collection=docs"
|
||||
import * as __fd_glob_56 from "../content/docs/components/animated-cursor.mdx?collection=docs"
|
||||
import * as __fd_glob_57 from "../content/docs/components/animated-testimonials.mdx?collection=docs"
|
||||
import * as __fd_glob_58 from "../content/docs/components/animated-tooltip.mdx?collection=docs"
|
||||
import * as __fd_glob_59 from "../content/docs/components/animation-components.mdx?collection=docs"
|
||||
import * as __fd_glob_60 from "../content/docs/components/announcement.mdx?collection=docs"
|
||||
import * as __fd_glob_61 from "../content/docs/components/app-switcher-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_62 from "../content/docs/components/apple-cards-carousel.mdx?collection=docs"
|
||||
import * as __fd_glob_63 from "../content/docs/components/apple-hello-effect.mdx?collection=docs"
|
||||
import * as __fd_glob_64 from "../content/docs/components/aspect-ratio.mdx?collection=docs"
|
||||
import * as __fd_glob_65 from "../content/docs/components/avatar-group.mdx?collection=docs"
|
||||
import * as __fd_glob_66 from "../content/docs/components/avatar.mdx?collection=docs"
|
||||
import * as __fd_glob_67 from "../content/docs/components/badge.mdx?collection=docs"
|
||||
import * as __fd_glob_68 from "../content/docs/components/banner.mdx?collection=docs"
|
||||
import * as __fd_glob_69 from "../content/docs/components/breadcrumb-and-filters-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_70 from "../content/docs/components/breadcrumb-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_71 from "../content/docs/components/breadcrumb.mdx?collection=docs"
|
||||
import * as __fd_glob_72 from "../content/docs/components/button-group.mdx?collection=docs"
|
||||
import * as __fd_glob_73 from "../content/docs/components/button.mdx?collection=docs"
|
||||
import * as __fd_glob_74 from "../content/docs/components/calendar.mdx?collection=docs"
|
||||
import * as __fd_glob_75 from "../content/docs/components/card.mdx?collection=docs"
|
||||
import * as __fd_glob_76 from "../content/docs/components/carousel.mdx?collection=docs"
|
||||
import * as __fd_glob_77 from "../content/docs/components/centered-logo-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_78 from "../content/docs/components/checkbox.mdx?collection=docs"
|
||||
import * as __fd_glob_79 from "../content/docs/components/choicebox.mdx?collection=docs"
|
||||
import * as __fd_glob_80 from "../content/docs/components/code-block.mdx?collection=docs"
|
||||
import * as __fd_glob_81 from "../content/docs/components/code-editor.mdx?collection=docs"
|
||||
import * as __fd_glob_82 from "../content/docs/components/code-tabs.mdx?collection=docs"
|
||||
import * as __fd_glob_83 from "../content/docs/components/collaboration-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_84 from "../content/docs/components/collapsible.mdx?collection=docs"
|
||||
import * as __fd_glob_85 from "../content/docs/components/color-picker.mdx?collection=docs"
|
||||
import * as __fd_glob_86 from "../content/docs/components/combobox.mdx?collection=docs"
|
||||
import * as __fd_glob_87 from "../content/docs/components/command.mdx?collection=docs"
|
||||
import * as __fd_glob_88 from "../content/docs/components/communication-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_89 from "../content/docs/components/comparison.mdx?collection=docs"
|
||||
import * as __fd_glob_90 from "../content/docs/components/context-menu.mdx?collection=docs"
|
||||
import * as __fd_glob_91 from "../content/docs/components/context-switcher-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_92 from "../content/docs/components/credit-card.mdx?collection=docs"
|
||||
import * as __fd_glob_93 from "../content/docs/components/cursor.mdx?collection=docs"
|
||||
import * as __fd_glob_94 from "../content/docs/components/dashboard-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_95 from "../content/docs/components/data-table.mdx?collection=docs"
|
||||
import * as __fd_glob_96 from "../content/docs/components/date-picker.mdx?collection=docs"
|
||||
import * as __fd_glob_97 from "../content/docs/components/desktop-hooks.mdx?collection=docs"
|
||||
import * as __fd_glob_98 from "../content/docs/components/desktop-spotlight.mdx?collection=docs"
|
||||
import * as __fd_glob_99 from "../content/docs/components/desktop-window.mdx?collection=docs"
|
||||
import * as __fd_glob_100 from "../content/docs/components/desktop.mdx?collection=docs"
|
||||
import * as __fd_glob_101 from "../content/docs/components/dialog-stack.mdx?collection=docs"
|
||||
import * as __fd_glob_102 from "../content/docs/components/dialog.mdx?collection=docs"
|
||||
import * as __fd_glob_103 from "../content/docs/components/dock.mdx?collection=docs"
|
||||
import * as __fd_glob_104 from "../content/docs/components/drawer.mdx?collection=docs"
|
||||
import * as __fd_glob_105 from "../content/docs/components/dropdown-menu.mdx?collection=docs"
|
||||
import * as __fd_glob_106 from "../content/docs/components/dropzone.mdx?collection=docs"
|
||||
import * as __fd_glob_107 from "../content/docs/components/e-commerce-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_108 from "../content/docs/components/editor.mdx?collection=docs"
|
||||
import * as __fd_glob_109 from "../content/docs/components/empty.mdx?collection=docs"
|
||||
import * as __fd_glob_110 from "../content/docs/components/field.mdx?collection=docs"
|
||||
import * as __fd_glob_111 from "../content/docs/components/form.mdx?collection=docs"
|
||||
import * as __fd_glob_112 from "../content/docs/components/gantt.mdx?collection=docs"
|
||||
import * as __fd_glob_113 from "../content/docs/components/glimpse.mdx?collection=docs"
|
||||
import * as __fd_glob_114 from "../content/docs/components/grid-pattern.mdx?collection=docs"
|
||||
import * as __fd_glob_115 from "../content/docs/components/hover-card.mdx?collection=docs"
|
||||
import * as __fd_glob_116 from "../content/docs/components/icon-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_117 from "../content/docs/components/image-crop.mdx?collection=docs"
|
||||
import * as __fd_glob_118 from "../content/docs/components/image-zoom.mdx?collection=docs"
|
||||
import * as __fd_glob_119 from "../content/docs/components/index.mdx?collection=docs"
|
||||
import * as __fd_glob_120 from "../content/docs/components/input-group.mdx?collection=docs"
|
||||
import * as __fd_glob_121 from "../content/docs/components/input-otp.mdx?collection=docs"
|
||||
import * as __fd_glob_122 from "../content/docs/components/input.mdx?collection=docs"
|
||||
import * as __fd_glob_123 from "../content/docs/components/interactive-grid-pattern.mdx?collection=docs"
|
||||
import * as __fd_glob_124 from "../content/docs/components/iphone-15-pro.mdx?collection=docs"
|
||||
import * as __fd_glob_125 from "../content/docs/components/item.mdx?collection=docs"
|
||||
import * as __fd_glob_126 from "../content/docs/components/kanban.mdx?collection=docs"
|
||||
import * as __fd_glob_127 from "../content/docs/components/kbd.mdx?collection=docs"
|
||||
import * as __fd_glob_128 from "../content/docs/components/label.mdx?collection=docs"
|
||||
import * as __fd_glob_129 from "../content/docs/components/limelight-nav.mdx?collection=docs"
|
||||
import * as __fd_glob_130 from "../content/docs/components/list.mdx?collection=docs"
|
||||
import * as __fd_glob_131 from "../content/docs/components/macos-dock.mdx?collection=docs"
|
||||
import * as __fd_glob_132 from "../content/docs/components/magnetic.mdx?collection=docs"
|
||||
import * as __fd_glob_133 from "../content/docs/components/marquee.mdx?collection=docs"
|
||||
import * as __fd_glob_134 from "../content/docs/components/menu-dock.mdx?collection=docs"
|
||||
import * as __fd_glob_135 from "../content/docs/components/menubar.mdx?collection=docs"
|
||||
import * as __fd_glob_136 from "../content/docs/components/message-dock.mdx?collection=docs"
|
||||
import * as __fd_glob_137 from "../content/docs/components/mini-calendar.mdx?collection=docs"
|
||||
import * as __fd_glob_138 from "../content/docs/components/minimal-tiptap.mdx?collection=docs"
|
||||
import * as __fd_glob_139 from "../content/docs/components/motion-highlight.mdx?collection=docs"
|
||||
import * as __fd_glob_140 from "../content/docs/components/navigation-menu.mdx?collection=docs"
|
||||
import * as __fd_glob_141 from "../content/docs/components/pagination.mdx?collection=docs"
|
||||
import * as __fd_glob_142 from "../content/docs/components/particles-background.mdx?collection=docs"
|
||||
import * as __fd_glob_143 from "../content/docs/components/particles.mdx?collection=docs"
|
||||
import * as __fd_glob_144 from "../content/docs/components/pill.mdx?collection=docs"
|
||||
import * as __fd_glob_145 from "../content/docs/components/pin-list.mdx?collection=docs"
|
||||
import * as __fd_glob_146 from "../content/docs/components/pixel-image.mdx?collection=docs"
|
||||
import * as __fd_glob_147 from "../content/docs/components/popover.mdx?collection=docs"
|
||||
import * as __fd_glob_148 from "../content/docs/components/progress.mdx?collection=docs"
|
||||
import * as __fd_glob_149 from "../content/docs/components/qr-code.mdx?collection=docs"
|
||||
import * as __fd_glob_150 from "../content/docs/components/radio-group.mdx?collection=docs"
|
||||
import * as __fd_glob_151 from "../content/docs/components/relative-time.mdx?collection=docs"
|
||||
import * as __fd_glob_152 from "../content/docs/components/resizable.mdx?collection=docs"
|
||||
import * as __fd_glob_153 from "../content/docs/components/safari.mdx?collection=docs"
|
||||
import * as __fd_glob_154 from "../content/docs/components/sandbox.mdx?collection=docs"
|
||||
import * as __fd_glob_155 from "../content/docs/components/scroll-area.mdx?collection=docs"
|
||||
import * as __fd_glob_156 from "../content/docs/components/search-and-toggle-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_157 from "../content/docs/components/select.mdx?collection=docs"
|
||||
import * as __fd_glob_158 from "../content/docs/components/separator.mdx?collection=docs"
|
||||
import * as __fd_glob_159 from "../content/docs/components/sheet.mdx?collection=docs"
|
||||
import * as __fd_glob_160 from "../content/docs/components/simple-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_161 from "../content/docs/components/skeleton.mdx?collection=docs"
|
||||
import * as __fd_glob_162 from "../content/docs/components/slider.mdx?collection=docs"
|
||||
import * as __fd_glob_163 from "../content/docs/components/snippet.mdx?collection=docs"
|
||||
import * as __fd_glob_164 from "../content/docs/components/sonner.mdx?collection=docs"
|
||||
import * as __fd_glob_165 from "../content/docs/components/spinner.mdx?collection=docs"
|
||||
import * as __fd_glob_166 from "../content/docs/components/stars-scrolling-wheel.mdx?collection=docs"
|
||||
import * as __fd_glob_167 from "../content/docs/components/status-dashboard-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_168 from "../content/docs/components/status.mdx?collection=docs"
|
||||
import * as __fd_glob_169 from "../content/docs/components/switch.mdx?collection=docs"
|
||||
import * as __fd_glob_170 from "../content/docs/components/table.mdx?collection=docs"
|
||||
import * as __fd_glob_171 from "../content/docs/components/tabs.mdx?collection=docs"
|
||||
import * as __fd_glob_172 from "../content/docs/components/tags.mdx?collection=docs"
|
||||
import * as __fd_glob_173 from "../content/docs/components/team-switcher-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_174 from "../content/docs/components/terminal.mdx?collection=docs"
|
||||
import * as __fd_glob_175 from "../content/docs/components/textarea.mdx?collection=docs"
|
||||
import * as __fd_glob_176 from "../content/docs/components/timeline.mdx?collection=docs"
|
||||
import * as __fd_glob_177 from "../content/docs/components/toast.mdx?collection=docs"
|
||||
import * as __fd_glob_178 from "../content/docs/components/toggle-group.mdx?collection=docs"
|
||||
import * as __fd_glob_179 from "../content/docs/components/toggle.mdx?collection=docs"
|
||||
import * as __fd_glob_180 from "../content/docs/components/tooltip.mdx?collection=docs"
|
||||
import * as __fd_glob_181 from "../content/docs/components/two-tier-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_182 from "../content/docs/components/typography.mdx?collection=docs"
|
||||
import * as __fd_glob_183 from "../content/docs/components/underline-navigation-bar.mdx?collection=docs"
|
||||
import * as __fd_glob_184 from "../content/docs/components/video-player.mdx?collection=docs"
|
||||
import * as __fd_glob_28 from "../content/docs/dark-mode/astro.mdx?collection=docs"
|
||||
import * as __fd_glob_29 from "../content/docs/dark-mode/index.mdx?collection=docs"
|
||||
import * as __fd_glob_30 from "../content/docs/dark-mode/next.mdx?collection=docs"
|
||||
import * as __fd_glob_31 from "../content/docs/dark-mode/remix.mdx?collection=docs"
|
||||
import * as __fd_glob_32 from "../content/docs/dark-mode/vite.mdx?collection=docs"
|
||||
import * as __fd_glob_5 from "../content/docs/figma.mdx?collection=docs"
|
||||
import * as __fd_glob_25 from "../content/docs/frameworks/index.mdx?collection=docs"
|
||||
import * as __fd_glob_26 from "../content/docs/frameworks/react.mdx?collection=docs"
|
||||
import * as __fd_glob_27 from "../content/docs/frameworks/vue.mdx?collection=docs"
|
||||
import * as __fd_glob_33 from "../content/docs/guides/page-builder.mdx?collection=docs"
|
||||
import * as __fd_glob_34 from "../content/docs/guides/visual-workflows.mdx?collection=docs"
|
||||
import * as __fd_glob_35 from "../content/docs/hanzo-react/getting-started.mdx?collection=docs"
|
||||
import * as __fd_glob_36 from "../content/docs/hanzo-react/hooks.mdx?collection=docs"
|
||||
import * as __fd_glob_6 from "../content/docs/index.mdx?collection=docs"
|
||||
import * as __fd_glob_37 from "../content/docs/installation/astro.mdx?collection=docs"
|
||||
import * as __fd_glob_38 from "../content/docs/installation/gatsby.mdx?collection=docs"
|
||||
import * as __fd_glob_39 from "../content/docs/installation/index.mdx?collection=docs"
|
||||
import * as __fd_glob_40 from "../content/docs/installation/laravel.mdx?collection=docs"
|
||||
import * as __fd_glob_41 from "../content/docs/installation/manual.mdx?collection=docs"
|
||||
import * as __fd_glob_42 from "../content/docs/installation/next.mdx?collection=docs"
|
||||
import * as __fd_glob_43 from "../content/docs/installation/remix.mdx?collection=docs"
|
||||
import * as __fd_glob_44 from "../content/docs/installation/vite.mdx?collection=docs"
|
||||
import * as __fd_glob_7 from "../content/docs/mcp.mdx?collection=docs"
|
||||
import * as __fd_glob_45 from "../content/docs/packages/index.mdx?collection=docs"
|
||||
import * as __fd_glob_186 from "../content/docs/testing/index.mdx?collection=docs"
|
||||
import * as __fd_glob_8 from "../content/docs/theming.mdx?collection=docs"
|
||||
import * as __fd_glob_185 from "../content/docs/white-label/index.mdx?collection=docs"
|
||||
import type * as Config from "../source.config"
|
||||
|
||||
const create = server<
|
||||
typeof Config,
|
||||
import("@hanzo/docs-mdx/runtime/types").InternalTypeConfig & {
|
||||
DocData: {}
|
||||
}
|
||||
>({ doc: { passthroughs: ["extractedReferences"] } })
|
||||
|
||||
export const docs = await create.docs(
|
||||
"docs",
|
||||
"content/docs",
|
||||
{},
|
||||
{
|
||||
"about.mdx": __fd_glob_0,
|
||||
"changelog.mdx": __fd_glob_1,
|
||||
"cli.mdx": __fd_glob_2,
|
||||
"components-json.mdx": __fd_glob_3,
|
||||
"components.mdx": __fd_glob_4,
|
||||
"figma.mdx": __fd_glob_5,
|
||||
"index.mdx": __fd_glob_6,
|
||||
"mcp.mdx": __fd_glob_7,
|
||||
"theming.mdx": __fd_glob_8,
|
||||
"ai/actions.mdx": __fd_glob_9,
|
||||
"ai/agents.mdx": __fd_glob_10,
|
||||
"ai/assistant.mdx": __fd_glob_11,
|
||||
"ai/chat.mdx": __fd_glob_12,
|
||||
"ai/code.mdx": __fd_glob_13,
|
||||
"ai/index.mdx": __fd_glob_14,
|
||||
"ai/models.mdx": __fd_glob_15,
|
||||
"ai/playground.mdx": __fd_glob_16,
|
||||
"ai/tools.mdx": __fd_glob_17,
|
||||
"ai/vision.mdx": __fd_glob_18,
|
||||
"ai/voice-settings.mdx": __fd_glob_19,
|
||||
"ai/voice.mdx": __fd_glob_20,
|
||||
"block-examples/billing.mdx": __fd_glob_21,
|
||||
"block-examples/compose-spec.mdx": __fd_glob_22,
|
||||
"block-examples/newsletter.mdx": __fd_glob_23,
|
||||
"block-examples/pricing.mdx": __fd_glob_24,
|
||||
"frameworks/index.mdx": __fd_glob_25,
|
||||
"frameworks/react.mdx": __fd_glob_26,
|
||||
"frameworks/vue.mdx": __fd_glob_27,
|
||||
"dark-mode/astro.mdx": __fd_glob_28,
|
||||
"dark-mode/index.mdx": __fd_glob_29,
|
||||
"dark-mode/next.mdx": __fd_glob_30,
|
||||
"dark-mode/remix.mdx": __fd_glob_31,
|
||||
"dark-mode/vite.mdx": __fd_glob_32,
|
||||
"guides/page-builder.mdx": __fd_glob_33,
|
||||
"guides/visual-workflows.mdx": __fd_glob_34,
|
||||
"hanzo-react/getting-started.mdx": __fd_glob_35,
|
||||
"hanzo-react/hooks.mdx": __fd_glob_36,
|
||||
"installation/astro.mdx": __fd_glob_37,
|
||||
"installation/gatsby.mdx": __fd_glob_38,
|
||||
"installation/index.mdx": __fd_glob_39,
|
||||
"installation/laravel.mdx": __fd_glob_40,
|
||||
"installation/manual.mdx": __fd_glob_41,
|
||||
"installation/next.mdx": __fd_glob_42,
|
||||
"installation/remix.mdx": __fd_glob_43,
|
||||
"installation/vite.mdx": __fd_glob_44,
|
||||
"packages/index.mdx": __fd_glob_45,
|
||||
"components/3d-card.mdx": __fd_glob_46,
|
||||
"components/3d-marquee.mdx": __fd_glob_47,
|
||||
"components/3d-pin.mdx": __fd_glob_48,
|
||||
"components/accordion.mdx": __fd_glob_49,
|
||||
"components/advanced-navigation-bar.mdx": __fd_glob_50,
|
||||
"components/ai-model-selector-navigation-bar.mdx": __fd_glob_51,
|
||||
"components/alert-dialog.mdx": __fd_glob_52,
|
||||
"components/alert.mdx": __fd_glob_53,
|
||||
"components/android.mdx": __fd_glob_54,
|
||||
"components/animated-beam.mdx": __fd_glob_55,
|
||||
"components/animated-cursor.mdx": __fd_glob_56,
|
||||
"components/animated-testimonials.mdx": __fd_glob_57,
|
||||
"components/animated-tooltip.mdx": __fd_glob_58,
|
||||
"components/animation-components.mdx": __fd_glob_59,
|
||||
"components/announcement.mdx": __fd_glob_60,
|
||||
"components/app-switcher-navigation-bar.mdx": __fd_glob_61,
|
||||
"components/apple-cards-carousel.mdx": __fd_glob_62,
|
||||
"components/apple-hello-effect.mdx": __fd_glob_63,
|
||||
"components/aspect-ratio.mdx": __fd_glob_64,
|
||||
"components/avatar-group.mdx": __fd_glob_65,
|
||||
"components/avatar.mdx": __fd_glob_66,
|
||||
"components/badge.mdx": __fd_glob_67,
|
||||
"components/banner.mdx": __fd_glob_68,
|
||||
"components/breadcrumb-and-filters-navigation-bar.mdx": __fd_glob_69,
|
||||
"components/breadcrumb-navigation-bar.mdx": __fd_glob_70,
|
||||
"components/breadcrumb.mdx": __fd_glob_71,
|
||||
"components/button-group.mdx": __fd_glob_72,
|
||||
"components/button.mdx": __fd_glob_73,
|
||||
"components/calendar.mdx": __fd_glob_74,
|
||||
"components/card.mdx": __fd_glob_75,
|
||||
"components/carousel.mdx": __fd_glob_76,
|
||||
"components/centered-logo-navigation-bar.mdx": __fd_glob_77,
|
||||
"components/checkbox.mdx": __fd_glob_78,
|
||||
"components/choicebox.mdx": __fd_glob_79,
|
||||
"components/code-block.mdx": __fd_glob_80,
|
||||
"components/code-editor.mdx": __fd_glob_81,
|
||||
"components/code-tabs.mdx": __fd_glob_82,
|
||||
"components/collaboration-navigation-bar.mdx": __fd_glob_83,
|
||||
"components/collapsible.mdx": __fd_glob_84,
|
||||
"components/color-picker.mdx": __fd_glob_85,
|
||||
"components/combobox.mdx": __fd_glob_86,
|
||||
"components/command.mdx": __fd_glob_87,
|
||||
"components/communication-navigation-bar.mdx": __fd_glob_88,
|
||||
"components/comparison.mdx": __fd_glob_89,
|
||||
"components/context-menu.mdx": __fd_glob_90,
|
||||
"components/context-switcher-navigation-bar.mdx": __fd_glob_91,
|
||||
"components/credit-card.mdx": __fd_glob_92,
|
||||
"components/cursor.mdx": __fd_glob_93,
|
||||
"components/dashboard-navigation-bar.mdx": __fd_glob_94,
|
||||
"components/data-table.mdx": __fd_glob_95,
|
||||
"components/date-picker.mdx": __fd_glob_96,
|
||||
"components/desktop-hooks.mdx": __fd_glob_97,
|
||||
"components/desktop-spotlight.mdx": __fd_glob_98,
|
||||
"components/desktop-window.mdx": __fd_glob_99,
|
||||
"components/desktop.mdx": __fd_glob_100,
|
||||
"components/dialog-stack.mdx": __fd_glob_101,
|
||||
"components/dialog.mdx": __fd_glob_102,
|
||||
"components/dock.mdx": __fd_glob_103,
|
||||
"components/drawer.mdx": __fd_glob_104,
|
||||
"components/dropdown-menu.mdx": __fd_glob_105,
|
||||
"components/dropzone.mdx": __fd_glob_106,
|
||||
"components/e-commerce-navigation-bar.mdx": __fd_glob_107,
|
||||
"components/editor.mdx": __fd_glob_108,
|
||||
"components/empty.mdx": __fd_glob_109,
|
||||
"components/field.mdx": __fd_glob_110,
|
||||
"components/form.mdx": __fd_glob_111,
|
||||
"components/gantt.mdx": __fd_glob_112,
|
||||
"components/glimpse.mdx": __fd_glob_113,
|
||||
"components/grid-pattern.mdx": __fd_glob_114,
|
||||
"components/hover-card.mdx": __fd_glob_115,
|
||||
"components/icon-navigation-bar.mdx": __fd_glob_116,
|
||||
"components/image-crop.mdx": __fd_glob_117,
|
||||
"components/image-zoom.mdx": __fd_glob_118,
|
||||
"components/index.mdx": __fd_glob_119,
|
||||
"components/input-group.mdx": __fd_glob_120,
|
||||
"components/input-otp.mdx": __fd_glob_121,
|
||||
"components/input.mdx": __fd_glob_122,
|
||||
"components/interactive-grid-pattern.mdx": __fd_glob_123,
|
||||
"components/iphone-15-pro.mdx": __fd_glob_124,
|
||||
"components/item.mdx": __fd_glob_125,
|
||||
"components/kanban.mdx": __fd_glob_126,
|
||||
"components/kbd.mdx": __fd_glob_127,
|
||||
"components/label.mdx": __fd_glob_128,
|
||||
"components/limelight-nav.mdx": __fd_glob_129,
|
||||
"components/list.mdx": __fd_glob_130,
|
||||
"components/macos-dock.mdx": __fd_glob_131,
|
||||
"components/magnetic.mdx": __fd_glob_132,
|
||||
"components/marquee.mdx": __fd_glob_133,
|
||||
"components/menu-dock.mdx": __fd_glob_134,
|
||||
"components/menubar.mdx": __fd_glob_135,
|
||||
"components/message-dock.mdx": __fd_glob_136,
|
||||
"components/mini-calendar.mdx": __fd_glob_137,
|
||||
"components/minimal-tiptap.mdx": __fd_glob_138,
|
||||
"components/motion-highlight.mdx": __fd_glob_139,
|
||||
"components/navigation-menu.mdx": __fd_glob_140,
|
||||
"components/pagination.mdx": __fd_glob_141,
|
||||
"components/particles-background.mdx": __fd_glob_142,
|
||||
"components/particles.mdx": __fd_glob_143,
|
||||
"components/pill.mdx": __fd_glob_144,
|
||||
"components/pin-list.mdx": __fd_glob_145,
|
||||
"components/pixel-image.mdx": __fd_glob_146,
|
||||
"components/popover.mdx": __fd_glob_147,
|
||||
"components/progress.mdx": __fd_glob_148,
|
||||
"components/qr-code.mdx": __fd_glob_149,
|
||||
"components/radio-group.mdx": __fd_glob_150,
|
||||
"components/relative-time.mdx": __fd_glob_151,
|
||||
"components/resizable.mdx": __fd_glob_152,
|
||||
"components/safari.mdx": __fd_glob_153,
|
||||
"components/sandbox.mdx": __fd_glob_154,
|
||||
"components/scroll-area.mdx": __fd_glob_155,
|
||||
"components/search-and-toggle-navigation-bar.mdx": __fd_glob_156,
|
||||
"components/select.mdx": __fd_glob_157,
|
||||
"components/separator.mdx": __fd_glob_158,
|
||||
"components/sheet.mdx": __fd_glob_159,
|
||||
"components/simple-navigation-bar.mdx": __fd_glob_160,
|
||||
"components/skeleton.mdx": __fd_glob_161,
|
||||
"components/slider.mdx": __fd_glob_162,
|
||||
"components/snippet.mdx": __fd_glob_163,
|
||||
"components/sonner.mdx": __fd_glob_164,
|
||||
"components/spinner.mdx": __fd_glob_165,
|
||||
"components/stars-scrolling-wheel.mdx": __fd_glob_166,
|
||||
"components/status-dashboard-navigation-bar.mdx": __fd_glob_167,
|
||||
"components/status.mdx": __fd_glob_168,
|
||||
"components/switch.mdx": __fd_glob_169,
|
||||
"components/table.mdx": __fd_glob_170,
|
||||
"components/tabs.mdx": __fd_glob_171,
|
||||
"components/tags.mdx": __fd_glob_172,
|
||||
"components/team-switcher-navigation-bar.mdx": __fd_glob_173,
|
||||
"components/terminal.mdx": __fd_glob_174,
|
||||
"components/textarea.mdx": __fd_glob_175,
|
||||
"components/timeline.mdx": __fd_glob_176,
|
||||
"components/toast.mdx": __fd_glob_177,
|
||||
"components/toggle-group.mdx": __fd_glob_178,
|
||||
"components/toggle.mdx": __fd_glob_179,
|
||||
"components/tooltip.mdx": __fd_glob_180,
|
||||
"components/two-tier-navigation-bar.mdx": __fd_glob_181,
|
||||
"components/typography.mdx": __fd_glob_182,
|
||||
"components/underline-navigation-bar.mdx": __fd_glob_183,
|
||||
"components/video-player.mdx": __fd_glob_184,
|
||||
"white-label/index.mdx": __fd_glob_185,
|
||||
"testing/index.mdx": __fd_glob_186,
|
||||
}
|
||||
)
|
||||
@@ -1,40 +0,0 @@
|
||||
// source.config.ts
|
||||
import {
|
||||
defineConfig,
|
||||
defineDocs,
|
||||
frontmatterSchema
|
||||
} from "@hanzo/docs-mdx/config";
|
||||
import rehypePrettyCode from "rehype-pretty-code";
|
||||
import { z } from "zod";
|
||||
var source_config_default = defineConfig({
|
||||
mdxOptions: {
|
||||
rehypePlugins: [
|
||||
[
|
||||
rehypePrettyCode,
|
||||
{
|
||||
theme: {
|
||||
dark: "github-dark",
|
||||
light: "github-light-default"
|
||||
},
|
||||
keepBackground: false
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
});
|
||||
var docs = defineDocs({
|
||||
dir: "content/docs",
|
||||
docs: {
|
||||
schema: frontmatterSchema.extend({
|
||||
links: z.object({
|
||||
doc: z.string().optional(),
|
||||
api: z.string().optional()
|
||||
}).optional(),
|
||||
toc: z.boolean().optional()
|
||||
})
|
||||
}
|
||||
});
|
||||
export {
|
||||
source_config_default as default,
|
||||
docs
|
||||
};
|
||||
@@ -4,5 +4,3 @@ node_modules
|
||||
build
|
||||
.contentlayer
|
||||
apps/web/pages/api/registry.json
|
||||
**/fixtures
|
||||
deprecated
|
||||
|
||||
@@ -63,11 +63,10 @@ export default function Dashboard() {
|
||||
<div className="hidden bg-muted lg:block">
|
||||
<Image
|
||||
src="/placeholder.svg"
|
||||
alt="Authentication page cover image"
|
||||
alt="Image"
|
||||
width="1920"
|
||||
height="1080"
|
||||
className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -267,7 +267,6 @@ export default function Dashboard() {
|
||||
height={36}
|
||||
alt="Avatar"
|
||||
className="overflow-hidden rounded-full"
|
||||
loading="lazy"
|
||||
/>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
@@ -256,7 +256,6 @@ export default function Dashboard() {
|
||||
height={36}
|
||||
alt="Avatar"
|
||||
className="overflow-hidden rounded-full"
|
||||
loading="lazy"
|
||||
/>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
@@ -357,7 +356,6 @@ export default function Dashboard() {
|
||||
height="64"
|
||||
src="/placeholder.svg"
|
||||
width="64"
|
||||
loading="lazy"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
@@ -403,7 +401,6 @@ export default function Dashboard() {
|
||||
height="64"
|
||||
src="/placeholder.svg"
|
||||
width="64"
|
||||
loading="lazy"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
@@ -449,7 +446,6 @@ export default function Dashboard() {
|
||||
height="64"
|
||||
src="/placeholder.svg"
|
||||
width="64"
|
||||
loading="lazy"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
@@ -495,7 +491,6 @@ export default function Dashboard() {
|
||||
height="64"
|
||||
src="/placeholder.svg"
|
||||
width="64"
|
||||
loading="lazy"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
@@ -541,7 +536,6 @@ export default function Dashboard() {
|
||||
height="64"
|
||||
src="/placeholder.svg"
|
||||
width="64"
|
||||
loading="lazy"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
@@ -587,7 +581,6 @@ export default function Dashboard() {
|
||||
height="64"
|
||||
src="/placeholder.svg"
|
||||
width="64"
|
||||
loading="lazy"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
|
||||
@@ -259,7 +259,6 @@ export default function Dashboard() {
|
||||
src="/placeholder-user.jpg"
|
||||
width={36}
|
||||
height={36}
|
||||
loading="lazy"
|
||||
alt="Avatar"
|
||||
className="overflow-hidden rounded-full"
|
||||
/>
|
||||
@@ -552,27 +551,24 @@ export default function Dashboard() {
|
||||
height="300"
|
||||
src="/placeholder.svg"
|
||||
width="300"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<button>
|
||||
<Image
|
||||
alt="Product thumbnail image"
|
||||
alt="Product image"
|
||||
className="aspect-square w-full rounded-md object-cover"
|
||||
height="84"
|
||||
src="/placeholder.svg"
|
||||
width="84"
|
||||
loading="lazy"
|
||||
/>
|
||||
</button>
|
||||
<button>
|
||||
<Image
|
||||
alt="Product thumbnail image"
|
||||
alt="Product image"
|
||||
className="aspect-square w-full rounded-md object-cover"
|
||||
height="84"
|
||||
src="/placeholder.svg"
|
||||
width="84"
|
||||
loading="lazy"
|
||||
/>
|
||||
</button>
|
||||
<button className="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">
|
||||
|
||||
@@ -203,17 +203,6 @@ export const Index: Record<string, any> = {
|
||||
subcategory: "undefined",
|
||||
chunks: []
|
||||
},
|
||||
"direction": {
|
||||
name: "direction",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/direction")),
|
||||
source: "",
|
||||
files: ["registry/default/ui/direction.tsx"],
|
||||
category: "undefined",
|
||||
subcategory: "undefined",
|
||||
chunks: []
|
||||
},
|
||||
"dialog": {
|
||||
name: "dialog",
|
||||
type: "components:ui",
|
||||
@@ -247,17 +236,6 @@ export const Index: Record<string, any> = {
|
||||
subcategory: "undefined",
|
||||
chunks: []
|
||||
},
|
||||
"empty-state": {
|
||||
name: "empty-state",
|
||||
type: "components:ui",
|
||||
registryDependencies: ["button"],
|
||||
component: React.lazy(() => import("@/registry/default/ui/empty-state")),
|
||||
source: "",
|
||||
files: ["registry/default/ui/empty-state.tsx"],
|
||||
category: "undefined",
|
||||
subcategory: "undefined",
|
||||
chunks: []
|
||||
},
|
||||
"gantt": {
|
||||
name: "gantt",
|
||||
type: "components:ui",
|
||||
@@ -1809,17 +1787,6 @@ export const Index: Record<string, any> = {
|
||||
subcategory: "undefined",
|
||||
chunks: []
|
||||
},
|
||||
"youtube-pip-player": {
|
||||
name: "youtube-pip-player",
|
||||
type: "components:ui",
|
||||
registryDependencies: undefined,
|
||||
component: React.lazy(() => import("@/registry/default/ui/youtube-pip-player")),
|
||||
source: "",
|
||||
files: ["registry/default/ui/youtube-pip-player.tsx"],
|
||||
category: "undefined",
|
||||
subcategory: "undefined",
|
||||
chunks: []
|
||||
},
|
||||
"music-player": {
|
||||
name: "music-player",
|
||||
type: "components:ui",
|
||||
@@ -4372,17 +4339,6 @@ export const Index: Record<string, any> = {
|
||||
subcategory: "undefined",
|
||||
chunks: []
|
||||
},
|
||||
"youtube-pip-player-demo": {
|
||||
name: "youtube-pip-player-demo",
|
||||
type: "components:example",
|
||||
registryDependencies: ["youtube-pip-player"],
|
||||
component: React.lazy(() => import("@/registry/default/example/youtube-pip-player-demo")),
|
||||
source: "",
|
||||
files: ["registry/default/example/youtube-pip-player-demo.tsx"],
|
||||
category: "undefined",
|
||||
subcategory: "undefined",
|
||||
chunks: []
|
||||
},
|
||||
"android-demo": {
|
||||
name: "android-demo",
|
||||
type: "components:example",
|
||||
|
||||
@@ -1,143 +0,0 @@
|
||||
/**
|
||||
* docs-no-404.test.ts
|
||||
*
|
||||
* Static validation: every URL in docs.ts config has a matching MDX file.
|
||||
* No server needed — runs in CI before deployment.
|
||||
*
|
||||
* Run: pnpm test (via vitest)
|
||||
*/
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import fs from 'node:fs'
|
||||
import path from 'node:path'
|
||||
|
||||
const CONTENT_DIR = path.resolve(__dirname, '../content/docs')
|
||||
const CONFIG_PATH = path.resolve(__dirname, '../config/docs.ts')
|
||||
|
||||
/** Extract all href values from docs.ts config */
|
||||
function extractUrlsFromConfig(): string[] {
|
||||
const content = fs.readFileSync(CONFIG_PATH, 'utf-8')
|
||||
const hrefRegex = /href:\s*["'`]([^"'`]+)["'`]/g
|
||||
const urls: string[] = []
|
||||
let match
|
||||
while ((match = hrefRegex.exec(content)) !== null) {
|
||||
urls.push(match[1])
|
||||
}
|
||||
return urls.filter(u => u.startsWith('/docs'))
|
||||
}
|
||||
|
||||
/** Convert a /docs/... URL to its expected MDX file path */
|
||||
function urlToMdxPath(url: string): string[] {
|
||||
// /docs -> index.mdx
|
||||
// /docs/charts/bar -> charts/bar.mdx OR charts/bar/index.mdx
|
||||
const slug = url.replace(/^\/docs\/?/, '') || ''
|
||||
if (!slug) {
|
||||
return [path.join(CONTENT_DIR, 'index.mdx')]
|
||||
}
|
||||
return [
|
||||
path.join(CONTENT_DIR, `${slug}.mdx`),
|
||||
path.join(CONTENT_DIR, slug, 'index.mdx'),
|
||||
]
|
||||
}
|
||||
|
||||
/** Recursively find all MDX files in content/docs */
|
||||
function findAllMdxFiles(dir: string, prefix = ''): string[] {
|
||||
const results: string[] = []
|
||||
if (!fs.existsSync(dir)) return results
|
||||
|
||||
for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
|
||||
const fullPath = path.join(dir, entry.name)
|
||||
if (entry.isDirectory()) {
|
||||
results.push(...findAllMdxFiles(fullPath, `${prefix}${entry.name}/`))
|
||||
} else if (entry.name.endsWith('.mdx')) {
|
||||
const slug = entry.name === 'index.mdx'
|
||||
? prefix.replace(/\/$/, '')
|
||||
: `${prefix}${entry.name.replace('.mdx', '')}`
|
||||
if (slug) {
|
||||
results.push(`/docs/${slug}`)
|
||||
} else {
|
||||
results.push('/docs')
|
||||
}
|
||||
}
|
||||
}
|
||||
return results
|
||||
}
|
||||
|
||||
describe('Documentation pages — zero 404s', () => {
|
||||
const configUrls = extractUrlsFromConfig()
|
||||
const mdxPages = findAllMdxFiles(CONTENT_DIR)
|
||||
|
||||
it('should find docs config with URLs', () => {
|
||||
expect(configUrls.length).toBeGreaterThan(100)
|
||||
})
|
||||
|
||||
it('should find MDX content files', () => {
|
||||
expect(mdxPages.length).toBeGreaterThan(100)
|
||||
})
|
||||
|
||||
describe('every config URL has a matching MDX file', () => {
|
||||
for (const url of configUrls) {
|
||||
it(`${url}`, () => {
|
||||
const possiblePaths = urlToMdxPath(url)
|
||||
const exists = possiblePaths.some(p => fs.existsSync(p))
|
||||
if (!exists) {
|
||||
throw new Error(
|
||||
`Missing MDX file for ${url}. Expected one of:\n` +
|
||||
possiblePaths.map(p => ` - ${p}`).join('\n')
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
describe('every MDX file is reachable from config', () => {
|
||||
const configSet = new Set(configUrls)
|
||||
const unreachable: string[] = []
|
||||
|
||||
for (const page of mdxPages) {
|
||||
if (!configSet.has(page)) {
|
||||
unreachable.push(page)
|
||||
}
|
||||
}
|
||||
|
||||
it('should have no orphaned MDX files (or document known exceptions)', () => {
|
||||
// Allow a small number of known orphans (category index pages, etc.)
|
||||
const KNOWN_ORPHANS = new Set([
|
||||
'/docs/ai/voice-settings',
|
||||
'/docs/components/animation-components',
|
||||
])
|
||||
const unexpected = unreachable.filter(u => !KNOWN_ORPHANS.has(u))
|
||||
if (unexpected.length > 0) {
|
||||
console.warn(`Orphaned MDX files (not in nav config):\n${unexpected.map(u => ` ${u}`).join('\n')}`)
|
||||
}
|
||||
// Warn but don't fail for orphans — they just won't be in nav
|
||||
expect(true).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
it('summary: config URLs vs MDX files', () => {
|
||||
const configSet = new Set(configUrls)
|
||||
const mdxSet = new Set(mdxPages)
|
||||
|
||||
const missingMdx = configUrls.filter(u => {
|
||||
const paths = urlToMdxPath(u)
|
||||
return !paths.some(p => fs.existsSync(p))
|
||||
})
|
||||
const orphanedMdx = mdxPages.filter(p => !configSet.has(p))
|
||||
|
||||
console.log(`\n📊 Docs coverage report:`)
|
||||
console.log(` Config URLs: ${configUrls.length}`)
|
||||
console.log(` MDX files: ${mdxPages.length}`)
|
||||
console.log(` Missing MDX: ${missingMdx.length}`)
|
||||
console.log(` Orphaned: ${orphanedMdx.length}`)
|
||||
|
||||
if (missingMdx.length > 0) {
|
||||
console.error(`\n❌ URLs with no MDX file:\n${missingMdx.map(u => ` ${u}`).join('\n')}`)
|
||||
}
|
||||
if (orphanedMdx.length > 0) {
|
||||
console.warn(`\n⚠️ MDX files not in nav:\n${orphanedMdx.map(u => ` ${u}`).join('\n')}`)
|
||||
}
|
||||
|
||||
// This is the hard check — every config URL must have content
|
||||
expect(missingMdx).toEqual([])
|
||||
})
|
||||
})
|
||||
@@ -1,9 +1,6 @@
|
||||
import { Suspense } from "react"
|
||||
|
||||
import { getAllBlockIds } from "@/lib/blocks"
|
||||
import { registryCategories } from "@/lib/categories"
|
||||
import { BlockDisplay } from "@/components/block-display"
|
||||
import { SkeletonCardGrid } from "@/components/skeleton-card"
|
||||
|
||||
export const revalidate = false
|
||||
export const dynamic = "force-static"
|
||||
@@ -15,30 +12,19 @@ export async function generateStaticParams() {
|
||||
}))
|
||||
}
|
||||
|
||||
async function BlockGallery({ categories }: { categories: string[] }) {
|
||||
const blocks = await getAllBlockIds(["registry:block"], categories)
|
||||
|
||||
return (
|
||||
<>
|
||||
{blocks.map((name) => (
|
||||
<BlockDisplay name={name} key={name} />
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default async function BlocksPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ categories?: string[] }>
|
||||
}) {
|
||||
const { categories = [] } = await params
|
||||
const blocks = await getAllBlockIds(["registry:block"], categories)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-12 md:gap-24">
|
||||
<Suspense fallback={<SkeletonCardGrid count={9} />}>
|
||||
<BlockGallery categories={categories} />
|
||||
</Suspense>
|
||||
{blocks.map((name) => (
|
||||
<BlockDisplay name={name} key={name} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,311 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Index } from "@/__registry__"
|
||||
import { AlertCircle, RefreshCw } from "lucide-react"
|
||||
|
||||
import { Badge } from "@/registry/default/ui/badge"
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import { Card } from "@/registry/default/ui/card"
|
||||
import { Input } from "@/registry/default/ui/input"
|
||||
import { ScrollArea } from "@/registry/default/ui/scroll-area"
|
||||
import { Skeleton } from "@/registry/default/ui/skeleton"
|
||||
import { Spinner } from "@/registry/default/ui/spinner"
|
||||
|
||||
interface IframeState {
|
||||
loaded: boolean
|
||||
error: boolean
|
||||
showContent: boolean
|
||||
}
|
||||
|
||||
function BlockPreview({ blockName }: { blockName: string }) {
|
||||
const [state, setState] = React.useState<IframeState>({
|
||||
loaded: false,
|
||||
error: false,
|
||||
showContent: false,
|
||||
})
|
||||
const [isInView, setIsInView] = React.useState(false)
|
||||
const iframeRef = React.useRef<HTMLIFrameElement>(null)
|
||||
const containerRef = React.useRef<HTMLDivElement>(null)
|
||||
const minLoadTimeRef = React.useRef<NodeJS.Timeout | undefined>(undefined)
|
||||
|
||||
// Intersection Observer for lazy loading
|
||||
React.useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsInView(true)
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
rootMargin: "100px", // Start loading 100px before entering viewport
|
||||
}
|
||||
)
|
||||
|
||||
if (containerRef.current) {
|
||||
observer.observe(containerRef.current)
|
||||
}
|
||||
|
||||
return () => {
|
||||
observer.disconnect()
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleLoad = React.useCallback(() => {
|
||||
setState((prev) => ({ ...prev, loaded: true, error: false }))
|
||||
// Ensure minimum loading time of 200ms for smooth UX
|
||||
minLoadTimeRef.current = setTimeout(() => {
|
||||
setState((prev) => ({ ...prev, showContent: true }))
|
||||
}, 200)
|
||||
}, [])
|
||||
|
||||
const handleError = React.useCallback(() => {
|
||||
setState({ loaded: true, error: true, showContent: true })
|
||||
}, [])
|
||||
|
||||
const handleRetry = React.useCallback((e: React.MouseEvent) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
setState({ loaded: false, error: false, showContent: false })
|
||||
if (iframeRef.current) {
|
||||
// Force reload by resetting src
|
||||
const src = iframeRef.current.src
|
||||
iframeRef.current.src = ""
|
||||
setTimeout(() => {
|
||||
if (iframeRef.current) {
|
||||
iframeRef.current.src = src
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
}, [])
|
||||
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
if (minLoadTimeRef.current) {
|
||||
clearTimeout(minLoadTimeRef.current)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="relative aspect-[4/3] min-h-[400px] bg-muted/50"
|
||||
>
|
||||
{/* Loading skeleton */}
|
||||
{!state.showContent && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Spinner className="size-6" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{isInView ? "Loading preview..." : "Scroll to load..."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error state */}
|
||||
{state.error && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-3 p-4 text-center">
|
||||
<AlertCircle className="size-8 text-destructive" />
|
||||
<div>
|
||||
<p className="text-sm font-medium">Failed to load preview</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
The block could not be loaded
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleRetry}
|
||||
className="gap-2"
|
||||
>
|
||||
<RefreshCw className="size-3" />
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Iframe with lazy loading and fade-in animation */}
|
||||
{isInView && (
|
||||
<iframe
|
||||
ref={iframeRef}
|
||||
src={`/view/${blockName}`}
|
||||
className={`h-full w-full border-0 transition-opacity duration-300 ${
|
||||
state.showContent && !state.error ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
title={blockName}
|
||||
onLoad={handleLoad}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function BuilderPage() {
|
||||
const [filter, setFilter] = React.useState("")
|
||||
const [blocks, setBlocks] = React.useState<string[]>([])
|
||||
const [isLoadingBlocks, setIsLoadingBlocks] = React.useState(true)
|
||||
|
||||
React.useEffect(() => {
|
||||
// Simulate async block loading with minimum display time
|
||||
const loadBlocks = async () => {
|
||||
setIsLoadingBlocks(true)
|
||||
const startTime = Date.now()
|
||||
|
||||
// Get blocks from registry (flat structure)
|
||||
const blockIds = Object.keys(Index).filter((key) => {
|
||||
const item = Index[key]
|
||||
return item?.type === "components:block"
|
||||
})
|
||||
|
||||
// Ensure minimum loading time of 200ms
|
||||
const elapsed = Date.now() - startTime
|
||||
if (elapsed < 200) {
|
||||
await new Promise((resolve) => setTimeout(resolve, 200 - elapsed))
|
||||
}
|
||||
|
||||
setBlocks(blockIds.sort())
|
||||
setIsLoadingBlocks(false)
|
||||
}
|
||||
|
||||
loadBlocks()
|
||||
}, [])
|
||||
|
||||
const filteredBlocks = React.useMemo(() => {
|
||||
if (!filter) return blocks
|
||||
return blocks.filter((block) =>
|
||||
block.toLowerCase().includes(filter.toLowerCase())
|
||||
)
|
||||
}, [blocks, filter])
|
||||
|
||||
return (
|
||||
<div className="flex h-screen flex-col">
|
||||
{/* Header with loading state */}
|
||||
<div className="border-b p-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-lg font-semibold">Blocks</h1>
|
||||
{isLoadingBlocks && <Spinner className="size-4" />}
|
||||
</div>
|
||||
<Input
|
||||
placeholder="Filter blocks..."
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
className="max-w-xs"
|
||||
disabled={isLoadingBlocks}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{isLoadingBlocks ? "Loading..." : `${filteredBlocks.length} blocks`}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid with loading and empty states */}
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="grid grid-cols-1 gap-4 p-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{/* Loading skeleton */}
|
||||
{isLoadingBlocks &&
|
||||
Array.from({ length: 8 }).map((_, i) => (
|
||||
<Card
|
||||
key={i}
|
||||
className="overflow-hidden rounded-lg border-2 border-border"
|
||||
>
|
||||
<Skeleton className="aspect-[4/3] min-h-[400px] w-full rounded-none" />
|
||||
<div className="border-t bg-card p-4">
|
||||
<Skeleton className="mb-2 h-5 w-3/4" />
|
||||
<Skeleton className="mb-1 h-4 w-20" />
|
||||
<Skeleton className="mt-2 h-4 w-full" />
|
||||
<Skeleton className="mt-1 h-4 w-2/3" />
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{/* Empty state */}
|
||||
{!isLoadingBlocks && filteredBlocks.length === 0 && (
|
||||
<div className="col-span-full flex min-h-[400px] items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="text-lg font-medium text-muted-foreground">
|
||||
No blocks found
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{filter
|
||||
? `No blocks match "${filter}"`
|
||||
: "No blocks available"}
|
||||
</p>
|
||||
{filter && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setFilter("")}
|
||||
className="mt-4"
|
||||
>
|
||||
Clear filter
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Block cards */}
|
||||
{!isLoadingBlocks &&
|
||||
filteredBlocks.map((blockName) => {
|
||||
const block = Index[blockName]
|
||||
return (
|
||||
<a
|
||||
key={blockName}
|
||||
href={`/view/${blockName}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group"
|
||||
>
|
||||
<Card className="overflow-hidden rounded-lg border-2 border-border shadow-sm transition-all duration-300 hover:scale-[1.02] hover:border-primary hover:shadow-lg hover:bg-accent/5">
|
||||
{/* Preview with loading states */}
|
||||
<BlockPreview blockName={blockName} />
|
||||
|
||||
{/* Block info - hidden until hover */}
|
||||
<div className="border-t bg-card p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div className="mb-2 flex items-start justify-between gap-2">
|
||||
<h3 className="text-base font-semibold leading-tight">
|
||||
{blockName}
|
||||
</h3>
|
||||
{block?.category && block?.category !== "undefined" && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="shrink-0 text-xs font-medium"
|
||||
>
|
||||
{block.category}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{block?.subcategory &&
|
||||
block?.subcategory !== "undefined" && (
|
||||
<div className="mb-2">
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-xs font-normal"
|
||||
>
|
||||
{block.subcategory}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
{block?.description && (
|
||||
<p className="mt-2 text-sm text-muted-foreground line-clamp-2">
|
||||
{block.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</a>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,8 +1,6 @@
|
||||
import { Suspense } from "react"
|
||||
import Link from "next/link"
|
||||
|
||||
import { BlockDisplay } from "@/components/block-display"
|
||||
import { SkeletonCardGrid } from "@/components/skeleton-card"
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
|
||||
export const dynamic = "force-static"
|
||||
@@ -20,11 +18,9 @@ const FEATURED_BLOCKS = [
|
||||
export default function BlocksPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-12 md:gap-24">
|
||||
<Suspense fallback={<SkeletonCardGrid count={5} />}>
|
||||
{FEATURED_BLOCKS.map((name) => (
|
||||
<BlockDisplay name={name} key={name} />
|
||||
))}
|
||||
</Suspense>
|
||||
{FEATURED_BLOCKS.map((name) => (
|
||||
<BlockDisplay name={name} key={name} />
|
||||
))}
|
||||
<div className="container-wrapper">
|
||||
<div className="container flex justify-center py-6">
|
||||
<Button asChild variant="outline">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
+521
-82
@@ -16,12 +16,19 @@ import {
|
||||
verticalListSortingStrategy,
|
||||
} from "@dnd-kit/sortable"
|
||||
import { CSS } from "@dnd-kit/utilities"
|
||||
import { Download, GripVertical, Plus, Settings2, Trash2 } from "lucide-react"
|
||||
import { ChevronLeft, ChevronRight, Copy, Download, Eye, GripVertical, Maximize2, Minimize2, Monitor, Palette, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Plus, Settings2, Smartphone, Tablet, Trash2, Wand2 } from "lucide-react"
|
||||
|
||||
import { BuilderPreview } from "@/components/builder-preview"
|
||||
import { OpenInHButton } from "@/components/open-in-h-button"
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import { Card } from "@/registry/default/ui/card"
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuTrigger,
|
||||
} from "@/registry/default/ui/context-menu"
|
||||
import { Input } from "@/registry/default/ui/input"
|
||||
import { ScrollArea } from "@/registry/default/ui/scroll-area"
|
||||
import {
|
||||
@@ -38,6 +45,8 @@ import {
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@/registry/default/ui/tabs"
|
||||
import { Slider } from "@/registry/default/ui/slider"
|
||||
import { Label } from "@/registry/default/ui/label"
|
||||
|
||||
interface PageItem {
|
||||
id: string
|
||||
@@ -60,17 +69,20 @@ export default function EnhancedBuilder() {
|
||||
"desktop" | "tablet" | "mobile"
|
||||
>("desktop")
|
||||
const [selectedItem, setSelectedItem] = React.useState<string | null>(null)
|
||||
const [isFullscreen, setIsFullscreen] = React.useState(false)
|
||||
const [leftSidebarCollapsed, setLeftSidebarCollapsed] = React.useState(false)
|
||||
const [rightSidebarCollapsed, setRightSidebarCollapsed] = React.useState(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
// Get blocks from registry
|
||||
const blockIds = Object.keys(Index || {}).filter((key) => {
|
||||
const blockIds = Object.keys(Index).filter((key) => {
|
||||
const item = Index[key]
|
||||
return item?.type === "components:block"
|
||||
})
|
||||
setBlocks(blockIds.sort())
|
||||
|
||||
// Get UI components from registry
|
||||
const componentIds = Object.keys(Index || {}).filter((key) => {
|
||||
const componentIds = Object.keys(Index).filter((key) => {
|
||||
const item = Index[key]
|
||||
return item?.type === "components:ui"
|
||||
})
|
||||
@@ -247,8 +259,73 @@ export default function EnhancedBuilder() {
|
||||
const renderProps = (props?: Record<string, any>) => {
|
||||
if (!props || Object.keys(props).length === 0) return ""
|
||||
|
||||
return Object.entries(props)
|
||||
// Extract effects and apply them to className or style
|
||||
const {
|
||||
blur,
|
||||
shadow,
|
||||
opacity,
|
||||
rotate,
|
||||
scale,
|
||||
grayscale,
|
||||
sepia,
|
||||
hueRotate,
|
||||
blendMode,
|
||||
className: customClass,
|
||||
...otherProps
|
||||
} = props
|
||||
|
||||
// Build className from effects
|
||||
const effectClasses = [
|
||||
blur !== "none" ? blur : "",
|
||||
shadow !== "none" ? shadow : "",
|
||||
blendMode !== "normal" ? blendMode : "",
|
||||
customClass || "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")
|
||||
|
||||
// Build inline styles for numeric effects
|
||||
const styles: string[] = []
|
||||
if (opacity && opacity !== 100) {
|
||||
styles.push(`opacity: ${opacity / 100}`)
|
||||
}
|
||||
|
||||
const transforms: string[] = []
|
||||
if (rotate && rotate !== 0) {
|
||||
transforms.push(`rotate(${rotate}deg)`)
|
||||
}
|
||||
if (scale && scale !== 100) {
|
||||
transforms.push(`scale(${scale / 100})`)
|
||||
}
|
||||
if (transforms.length > 0) {
|
||||
styles.push(`transform: ${transforms.join(" ")}`)
|
||||
}
|
||||
|
||||
const filters: string[] = []
|
||||
if (grayscale && grayscale > 0) {
|
||||
filters.push(`grayscale(${grayscale}%)`)
|
||||
}
|
||||
if (sepia && sepia > 0) {
|
||||
filters.push(`sepia(${sepia}%)`)
|
||||
}
|
||||
if (hueRotate && hueRotate !== 0) {
|
||||
filters.push(`hue-rotate(${hueRotate}deg)`)
|
||||
}
|
||||
if (filters.length > 0) {
|
||||
styles.push(`filter: ${filters.join(" ")}`)
|
||||
}
|
||||
|
||||
const styleAttr =
|
||||
styles.length > 0 ? `style="${styles.join("; ")}"` : ""
|
||||
|
||||
const classAttr = effectClasses ? `className="${effectClasses}"` : ""
|
||||
|
||||
// Render other props
|
||||
const otherPropsStr = Object.entries(otherProps)
|
||||
.map(([key, value]) => {
|
||||
if (key === "blur" || key === "shadow" || key === "opacity" || key === "rotate" || key === "scale" || key === "grayscale" || key === "sepia" || key === "hueRotate" || key === "blendMode") {
|
||||
return "" // Skip effect props, already handled
|
||||
}
|
||||
if (typeof value === "string") {
|
||||
return `${key}="${value}"`
|
||||
} else if (typeof value === "boolean") {
|
||||
@@ -260,6 +337,8 @@ export default function EnhancedBuilder() {
|
||||
})
|
||||
.filter(Boolean)
|
||||
.join(" ")
|
||||
|
||||
return [classAttr, styleAttr, otherPropsStr].filter(Boolean).join(" ")
|
||||
}
|
||||
|
||||
const renderItems = (items: PageItem[], indent = 2): string => {
|
||||
@@ -404,88 +483,79 @@ ${renderItems(pageItems, 3)}
|
||||
const selectedItemData = pageItems.find((item) => item.id === selectedItem)
|
||||
|
||||
return (
|
||||
<div className="flex h-screen max-h-screen gap-4 p-6">
|
||||
<div className="flex h-screen max-h-screen">
|
||||
{/* Left Sidebar - Component/Block Library */}
|
||||
<div className="w-80 space-y-4">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold">Component Library</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Add blocks, components, and layouts
|
||||
<div className={`relative flex-shrink-0 transition-all duration-200 ${isFullscreen || leftSidebarCollapsed ? "w-0" : "w-72"} ${isFullscreen || leftSidebarCollapsed ? "hidden" : "border-r p-3 space-y-3"}`}>
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-base font-semibold">Library</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Blocks & Components
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="blocks">Blocks</TabsTrigger>
|
||||
<TabsTrigger value="components">Components</TabsTrigger>
|
||||
<TabsList className="grid w-full grid-cols-2 h-8">
|
||||
<TabsTrigger value="blocks" className="text-xs">Blocks</TabsTrigger>
|
||||
<TabsTrigger value="components" className="text-xs">Components</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<div className="mt-4 space-y-4">
|
||||
<div className="mt-3 space-y-2">
|
||||
<Input
|
||||
placeholder={`Filter ${activeTab}...`}
|
||||
placeholder={`Search ${activeTab}...`}
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => addItem("container", "container")}
|
||||
className="w-full"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add Container
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => addItem("container", "container")}
|
||||
className="w-full h-7 text-xs"
|
||||
>
|
||||
<Plus className="mr-1.5 h-3.5 w-3.5" />
|
||||
Container
|
||||
</Button>
|
||||
|
||||
<ScrollArea className="h-[calc(100vh-320px)]">
|
||||
<TabsContent value="blocks" className="mt-0 space-y-4">
|
||||
<ScrollArea className="h-[calc(100vh-200px)]">
|
||||
<TabsContent value="blocks" className="mt-0 space-y-2">
|
||||
{filteredBlocks.map((block) => (
|
||||
<Card
|
||||
key={block}
|
||||
className="cursor-pointer overflow-hidden transition-colors hover:bg-muted"
|
||||
className="group cursor-pointer overflow-hidden transition-all hover:border-primary/50 hover:shadow-sm"
|
||||
onClick={() => addItem(block, "block")}
|
||||
>
|
||||
<div className="relative h-32 overflow-hidden bg-muted/50">
|
||||
<div className="pointer-events-none">
|
||||
<div className="relative h-24 overflow-hidden bg-muted/30">
|
||||
<div className="pointer-events-none scale-75">
|
||||
<BuilderPreview
|
||||
name={block}
|
||||
type="block"
|
||||
scale={0.25}
|
||||
scale={0.2}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-background/0 opacity-0 transition-opacity hover:bg-background/80 hover:opacity-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<Plus className="h-5 w-5" />
|
||||
<span className="text-sm font-medium">
|
||||
Add to page
|
||||
</span>
|
||||
</div>
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-background/0 opacity-0 transition-opacity group-hover:bg-background/90 group-hover:opacity-100">
|
||||
<Plus className="h-4 w-4" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t p-2">
|
||||
<p className="truncate text-xs font-medium">{block}</p>
|
||||
<div className="border-t px-2 py-1.5">
|
||||
<p className="truncate text-[11px] font-medium">{block}</p>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="components" className="mt-0 space-y-2">
|
||||
<TabsContent value="components" className="mt-0 space-y-1.5">
|
||||
{filteredComponents.map((component) => (
|
||||
<Card
|
||||
key={component}
|
||||
className="cursor-pointer p-3 transition-colors hover:bg-muted"
|
||||
className="group cursor-pointer px-2.5 py-2 transition-all hover:border-primary/50 hover:shadow-sm"
|
||||
onClick={() => addItem(component, "component")}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium">{component}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
UI Component
|
||||
</p>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs font-medium truncate">{component}</p>
|
||||
</div>
|
||||
<Plus className="h-4 w-4 text-muted-foreground" />
|
||||
<Plus className="h-3.5 w-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 ml-2" />
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
@@ -495,46 +565,90 @@ ${renderItems(pageItems, 3)}
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<Separator orientation="vertical" />
|
||||
|
||||
{/* Center - Page Builder Canvas */}
|
||||
<div className="flex-1 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold">Page Builder</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{pageItems.length} items in page
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Header - Hidden in fullscreen */}
|
||||
<div className={`flex items-center justify-between border-b px-3 py-2 ${isFullscreen ? "hidden" : ""}`}>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<h2 className="text-sm font-semibold">Canvas</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{pageItems.length} {pageItems.length === 1 ? 'item' : 'items'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
{/* Sidebar Collapse Buttons */}
|
||||
{!isFullscreen && (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setLeftSidebarCollapsed(!leftSidebarCollapsed)}
|
||||
className="h-7 w-7"
|
||||
title={leftSidebarCollapsed ? "Show library" : "Hide library"}
|
||||
>
|
||||
{leftSidebarCollapsed ? <PanelLeftOpen className="h-3.5 w-3.5" /> : <PanelLeftClose className="h-3.5 w-3.5" />}
|
||||
</Button>
|
||||
<Separator orientation="vertical" className="h-6" />
|
||||
</>
|
||||
)}
|
||||
{/* Viewport Controls */}
|
||||
<div className="flex rounded-lg border">
|
||||
<div className="flex rounded-md border h-7">
|
||||
<Button
|
||||
variant={viewport === "mobile" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
size="icon"
|
||||
onClick={() => setViewport("mobile")}
|
||||
className="rounded-r-none"
|
||||
className="h-6 w-6 rounded-r-none"
|
||||
title="Mobile (375px)"
|
||||
>
|
||||
Mobile
|
||||
<Smartphone className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewport === "tablet" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
size="icon"
|
||||
onClick={() => setViewport("tablet")}
|
||||
className="rounded-none border-x"
|
||||
className="h-6 w-6 rounded-none border-x"
|
||||
title="Tablet (768px)"
|
||||
>
|
||||
Tablet
|
||||
<Tablet className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewport === "desktop" ? "default" : "ghost"}
|
||||
size="sm"
|
||||
size="icon"
|
||||
onClick={() => setViewport("desktop")}
|
||||
className="rounded-l-none"
|
||||
className="h-6 w-6 rounded-l-none"
|
||||
title="Desktop (100%)"
|
||||
>
|
||||
Desktop
|
||||
<Monitor className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="h-8" />
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => setIsFullscreen(!isFullscreen)}
|
||||
title={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
|
||||
className="h-7 w-7"
|
||||
>
|
||||
{isFullscreen ? (
|
||||
<Minimize2 className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<Maximize2 className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</Button>
|
||||
<Separator orientation="vertical" className="h-6" />
|
||||
{!isFullscreen && selectedItemData && (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setRightSidebarCollapsed(!rightSidebarCollapsed)}
|
||||
className="h-7 w-7"
|
||||
title={rightSidebarCollapsed ? "Show properties" : "Hide properties"}
|
||||
>
|
||||
{rightSidebarCollapsed ? <PanelRightOpen className="h-3.5 w-3.5" /> : <PanelRightClose className="h-3.5 w-3.5" />}
|
||||
</Button>
|
||||
<Separator orientation="vertical" className="h-6" />
|
||||
</>
|
||||
)}
|
||||
<OpenInHButton name="builder" />
|
||||
<Separator orientation="vertical" className="h-8" />
|
||||
<div className="flex gap-2">
|
||||
@@ -567,8 +681,8 @@ ${renderItems(pageItems, 3)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="h-[calc(100vh-140px)] rounded-lg border bg-background">
|
||||
<div className="flex min-h-full items-start justify-center p-4">
|
||||
<ScrollArea className={`flex-1 bg-background ${isFullscreen ? "" : "border-t"}`}>
|
||||
<div className="flex min-h-full items-start justify-center">
|
||||
<div
|
||||
style={{
|
||||
width: viewportWidths[viewport],
|
||||
@@ -585,7 +699,7 @@ ${renderItems(pageItems, 3)}
|
||||
items={pageItems.map((item) => item.id)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<div className="relative min-h-[600px] bg-background pl-16">
|
||||
<div className="relative min-h-screen bg-background pl-16">
|
||||
{pageItems.length === 0 ? (
|
||||
<div className="flex h-96 items-center justify-center rounded-lg border border-dashed text-center -ml-16">
|
||||
<div className="space-y-2">
|
||||
@@ -627,10 +741,9 @@ ${renderItems(pageItems, 3)}
|
||||
</div>
|
||||
|
||||
{/* Right Sidebar - Property Editor */}
|
||||
{selectedItemData && (
|
||||
{selectedItemData && !isFullscreen && !rightSidebarCollapsed && (
|
||||
<>
|
||||
<Separator orientation="vertical" />
|
||||
<div className="w-80 space-y-4">
|
||||
<div className="relative flex-shrink-0 w-80 border-l p-3 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold">Properties</h2>
|
||||
@@ -753,6 +866,254 @@ ${renderItems(pageItems, 3)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Effects */}
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-semibold flex items-center gap-2">
|
||||
<Wand2 className="h-4 w-4" />
|
||||
Effects
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Blur Effect */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium text-muted-foreground">
|
||||
Backdrop Blur
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedItemData.props?.blur || "none"}
|
||||
onValueChange={(value) =>
|
||||
updateItemProps(selectedItemData.id, {
|
||||
blur: value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">None</SelectItem>
|
||||
<SelectItem value="backdrop-blur-sm">Small</SelectItem>
|
||||
<SelectItem value="backdrop-blur">Medium</SelectItem>
|
||||
<SelectItem value="backdrop-blur-md">Medium+</SelectItem>
|
||||
<SelectItem value="backdrop-blur-lg">Large</SelectItem>
|
||||
<SelectItem value="backdrop-blur-xl">Extra Large</SelectItem>
|
||||
<SelectItem value="backdrop-blur-2xl">2XL</SelectItem>
|
||||
<SelectItem value="backdrop-blur-3xl">3XL</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Drop Shadow */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium text-muted-foreground">
|
||||
Drop Shadow
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedItemData.props?.shadow || "none"}
|
||||
onValueChange={(value) =>
|
||||
updateItemProps(selectedItemData.id, {
|
||||
shadow: value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">None</SelectItem>
|
||||
<SelectItem value="shadow-sm">Small</SelectItem>
|
||||
<SelectItem value="shadow">Default</SelectItem>
|
||||
<SelectItem value="shadow-md">Medium</SelectItem>
|
||||
<SelectItem value="shadow-lg">Large</SelectItem>
|
||||
<SelectItem value="shadow-xl">Extra Large</SelectItem>
|
||||
<SelectItem value="shadow-2xl">2XL</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Opacity */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs font-medium text-muted-foreground">
|
||||
Opacity
|
||||
</Label>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{selectedItemData.props?.opacity || 100}%
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
value={[selectedItemData.props?.opacity || 100]}
|
||||
onValueChange={([value]) =>
|
||||
updateItemProps(selectedItemData.id, {
|
||||
opacity: value,
|
||||
})
|
||||
}
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Transform - Rotate */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs font-medium text-muted-foreground">
|
||||
Rotate
|
||||
</Label>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{selectedItemData.props?.rotate || 0}°
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
value={[selectedItemData.props?.rotate || 0]}
|
||||
onValueChange={([value]) =>
|
||||
updateItemProps(selectedItemData.id, {
|
||||
rotate: value,
|
||||
})
|
||||
}
|
||||
min={-180}
|
||||
max={180}
|
||||
step={15}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Transform - Scale */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs font-medium text-muted-foreground">
|
||||
Scale
|
||||
</Label>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{(selectedItemData.props?.scale || 100) / 100}x
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
value={[selectedItemData.props?.scale || 100]}
|
||||
onValueChange={([value]) =>
|
||||
updateItemProps(selectedItemData.id, {
|
||||
scale: value,
|
||||
})
|
||||
}
|
||||
min={50}
|
||||
max={200}
|
||||
step={10}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filter - Grayscale */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs font-medium text-muted-foreground">
|
||||
Grayscale
|
||||
</Label>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{selectedItemData.props?.grayscale || 0}%
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
value={[selectedItemData.props?.grayscale || 0]}
|
||||
onValueChange={([value]) =>
|
||||
updateItemProps(selectedItemData.id, {
|
||||
grayscale: value,
|
||||
})
|
||||
}
|
||||
min={0}
|
||||
max={100}
|
||||
step={10}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filter - Sepia */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs font-medium text-muted-foreground">
|
||||
Sepia
|
||||
</Label>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{selectedItemData.props?.sepia || 0}%
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
value={[selectedItemData.props?.sepia || 0]}
|
||||
onValueChange={([value]) =>
|
||||
updateItemProps(selectedItemData.id, {
|
||||
sepia: value,
|
||||
})
|
||||
}
|
||||
min={0}
|
||||
max={100}
|
||||
step={10}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filter - Hue Rotate */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs font-medium text-muted-foreground">
|
||||
Hue Rotate
|
||||
</Label>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{selectedItemData.props?.hueRotate || 0}°
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
value={[selectedItemData.props?.hueRotate || 0]}
|
||||
onValueChange={([value]) =>
|
||||
updateItemProps(selectedItemData.id, {
|
||||
hueRotate: value,
|
||||
})
|
||||
}
|
||||
min={0}
|
||||
max={360}
|
||||
step={30}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Mix Blend Mode */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs font-medium text-muted-foreground">
|
||||
Mix Blend Mode
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedItemData.props?.blendMode || "normal"}
|
||||
onValueChange={(value) =>
|
||||
updateItemProps(selectedItemData.id, {
|
||||
blendMode: value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-8">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="normal">Normal</SelectItem>
|
||||
<SelectItem value="mix-blend-multiply">Multiply</SelectItem>
|
||||
<SelectItem value="mix-blend-screen">Screen</SelectItem>
|
||||
<SelectItem value="mix-blend-overlay">Overlay</SelectItem>
|
||||
<SelectItem value="mix-blend-darken">Darken</SelectItem>
|
||||
<SelectItem value="mix-blend-lighten">Lighten</SelectItem>
|
||||
<SelectItem value="mix-blend-color-dodge">Color Dodge</SelectItem>
|
||||
<SelectItem value="mix-blend-color-burn">Color Burn</SelectItem>
|
||||
<SelectItem value="mix-blend-hard-light">Hard Light</SelectItem>
|
||||
<SelectItem value="mix-blend-soft-light">Soft Light</SelectItem>
|
||||
<SelectItem value="mix-blend-difference">Difference</SelectItem>
|
||||
<SelectItem value="mix-blend-exclusion">Exclusion</SelectItem>
|
||||
<SelectItem value="mix-blend-hue">Hue</SelectItem>
|
||||
<SelectItem value="mix-blend-saturation">Saturation</SelectItem>
|
||||
<SelectItem value="mix-blend-color">Color</SelectItem>
|
||||
<SelectItem value="mix-blend-luminosity">Luminosity</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Container Children */}
|
||||
{selectedItemData.type === "container" && (
|
||||
<div className="space-y-3">
|
||||
@@ -914,19 +1275,65 @@ function SortableItem({
|
||||
isDragging,
|
||||
} = useSortable({ id: item.id })
|
||||
|
||||
// Apply visual effects from props
|
||||
const effectStyles: React.CSSProperties = {}
|
||||
const effectClasses: string[] = []
|
||||
|
||||
if (item.props?.blur && item.props.blur !== "none") {
|
||||
effectClasses.push(item.props.blur)
|
||||
}
|
||||
if (item.props?.shadow && item.props.shadow !== "none") {
|
||||
effectClasses.push(item.props.shadow)
|
||||
}
|
||||
if (item.props?.blendMode && item.props.blendMode !== "normal") {
|
||||
effectClasses.push(item.props.blendMode)
|
||||
}
|
||||
|
||||
if (item.props?.opacity && item.props.opacity !== 100) {
|
||||
effectStyles.opacity = item.props.opacity / 100
|
||||
}
|
||||
|
||||
const transforms: string[] = []
|
||||
if (item.props?.rotate && item.props.rotate !== 0) {
|
||||
transforms.push(`rotate(${item.props.rotate}deg)`)
|
||||
}
|
||||
if (item.props?.scale && item.props.scale !== 100) {
|
||||
transforms.push(`scale(${item.props.scale / 100})`)
|
||||
}
|
||||
if (transforms.length > 0) {
|
||||
effectStyles.transform = transforms.join(" ")
|
||||
}
|
||||
|
||||
const filters: string[] = []
|
||||
if (item.props?.grayscale && item.props.grayscale > 0) {
|
||||
filters.push(`grayscale(${item.props.grayscale}%)`)
|
||||
}
|
||||
if (item.props?.sepia && item.props.sepia > 0) {
|
||||
filters.push(`sepia(${item.props.sepia}%)`)
|
||||
}
|
||||
if (item.props?.hueRotate && item.props.hueRotate !== 0) {
|
||||
filters.push(`hue-rotate(${item.props.hueRotate}deg)`)
|
||||
}
|
||||
if (filters.length > 0) {
|
||||
effectStyles.filter = filters.join(" ")
|
||||
}
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
opacity: isDragging ? 0.5 : effectStyles.opacity || 1,
|
||||
...effectStyles,
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={`group relative ${isSelected ? "ring-2 ring-primary" : ""}`}
|
||||
onClick={onSelect}
|
||||
>
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger asChild>
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={`group relative ${isSelected ? "ring-2 ring-primary" : ""} ${effectClasses.join(" ")}`}
|
||||
onClick={onSelect}
|
||||
>
|
||||
<div className="absolute -left-12 top-2 z-10 flex flex-col items-center gap-2">
|
||||
<button
|
||||
{...attributes}
|
||||
@@ -1012,5 +1419,37 @@ function SortableItem({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ContextMenuTrigger>
|
||||
<ContextMenuContent className="w-56">
|
||||
<ContextMenuItem onClick={onSelect}>
|
||||
<Eye className="mr-2 h-4 w-4" />
|
||||
Inspect Element
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem onClick={onSelect}>
|
||||
<Palette className="mr-2 h-4 w-4" />
|
||||
Edit Styles
|
||||
</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
onClick={() => {
|
||||
const code = JSON.stringify(item, null, 2)
|
||||
navigator.clipboard.writeText(code)
|
||||
}}
|
||||
>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
Copy JSON
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onRemove()
|
||||
}}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</ContextMenuItem>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,304 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { ChartDisplay } from "@/components/chart-display"
|
||||
import { Separator } from "@/registry/default/ui/separator"
|
||||
|
||||
import * as Charts from "./charts"
|
||||
|
||||
export function ChartsClient() {
|
||||
return (
|
||||
<div className="container mx-auto py-10">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Charts</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Beautiful charts built with Recharts. Copy and paste into your apps.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<div className="gap-6 md:flex md:flex-row-reverse md:items-start">
|
||||
<div className="grid flex-1 gap-12">
|
||||
<h2 className="sr-only">Examples</h2>
|
||||
<div
|
||||
id="examples"
|
||||
className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-area-stacked">
|
||||
<Charts.ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-multiple">
|
||||
<Charts.ChartBarMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay
|
||||
name="chart-pie-donut-text"
|
||||
className="[&_[data-chart]]:xl:max-h-[243px]"
|
||||
>
|
||||
<Charts.ChartPieDonutText />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="area-chart"
|
||||
className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-area-default">
|
||||
<Charts.ChartAreaDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-linear">
|
||||
<Charts.ChartAreaLinear />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-step">
|
||||
<Charts.ChartAreaStep />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-stacked">
|
||||
<Charts.ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-stacked-expand">
|
||||
<Charts.ChartAreaStackedExpand />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-legend">
|
||||
<Charts.ChartAreaLegend />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-icons">
|
||||
<Charts.ChartAreaIcons />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-gradient">
|
||||
<Charts.ChartAreaGradient />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-axes">
|
||||
<Charts.ChartAreaAxes />
|
||||
</ChartDisplay>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<ChartDisplay name="chart-area-interactive">
|
||||
<Charts.ChartAreaInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="bar-chart"
|
||||
className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-bar-default">
|
||||
<Charts.ChartBarDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-horizontal">
|
||||
<Charts.ChartBarHorizontal />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-multiple">
|
||||
<Charts.ChartBarMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-label">
|
||||
<Charts.ChartBarLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-label-custom">
|
||||
<Charts.ChartBarLabelCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-mixed">
|
||||
<Charts.ChartBarMixed />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-stacked">
|
||||
<Charts.ChartBarStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-active">
|
||||
<Charts.ChartBarActive />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-negative">
|
||||
<Charts.ChartBarNegative />
|
||||
</ChartDisplay>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<ChartDisplay name="chart-bar-interactive">
|
||||
<Charts.ChartBarInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="line-chart"
|
||||
className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-line-default">
|
||||
<Charts.ChartLineDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-linear">
|
||||
<Charts.ChartLineLinear />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-step">
|
||||
<Charts.ChartLineStep />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-multiple">
|
||||
<Charts.ChartLineMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-dots">
|
||||
<Charts.ChartLineDots />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-dots-custom">
|
||||
<Charts.ChartLineDotsCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-dots-colors">
|
||||
<Charts.ChartLineDotsColors />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-label">
|
||||
<Charts.ChartLineLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-label-custom">
|
||||
<Charts.ChartLineLabelCustom />
|
||||
</ChartDisplay>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<ChartDisplay name="chart-line-interactive">
|
||||
<Charts.ChartLineInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="pie-chart"
|
||||
className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-pie-simple">
|
||||
<Charts.ChartPieSimple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-separator-none">
|
||||
<Charts.ChartPieSeparatorNone />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-label">
|
||||
<Charts.ChartPieLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-label-custom">
|
||||
<Charts.ChartPieLabelCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-label-list">
|
||||
<Charts.ChartPieLabelList />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-legend">
|
||||
<Charts.ChartPieLegend />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-donut">
|
||||
<Charts.ChartPieDonut />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-donut-active">
|
||||
<Charts.ChartPieDonutActive />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-donut-text">
|
||||
<Charts.ChartPieDonutText />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-stacked">
|
||||
<Charts.ChartPieStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-interactive">
|
||||
<Charts.ChartPieInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="radar-chart"
|
||||
className="grid flex-1 scroll-mt-20 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-radar-default">
|
||||
<Charts.ChartRadarDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-dots">
|
||||
<Charts.ChartRadarDots />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-multiple">
|
||||
<Charts.ChartRadarMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-lines-only">
|
||||
<Charts.ChartRadarLinesOnly />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-label-custom">
|
||||
<Charts.ChartRadarLabelCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-radius">
|
||||
<Charts.ChartRadarRadius />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-custom">
|
||||
<Charts.ChartRadarGridCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-fill">
|
||||
<Charts.ChartRadarGridFill />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-none">
|
||||
<Charts.ChartRadarGridNone />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-circle">
|
||||
<Charts.ChartRadarGridCircle />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-circle-no-lines">
|
||||
<Charts.ChartRadarGridCircleNoLines />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-circle-fill">
|
||||
<Charts.ChartRadarGridCircleFill />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-legend">
|
||||
<Charts.ChartRadarLegend />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-icons">
|
||||
<Charts.ChartRadarIcons />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="radial-chart"
|
||||
className="grid flex-1 scroll-mt-20 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-radial-simple">
|
||||
<Charts.ChartRadialSimple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-label">
|
||||
<Charts.ChartRadialLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-grid">
|
||||
<Charts.ChartRadialGrid />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-text">
|
||||
<Charts.ChartRadialText />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-shape">
|
||||
<Charts.ChartRadialShape />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-stacked">
|
||||
<Charts.ChartRadialStacked />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="tooltip"
|
||||
className="chart-wrapper grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-tooltip-default">
|
||||
<Charts.ChartTooltipDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-indicator-line">
|
||||
<Charts.ChartTooltipIndicatorLine />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-indicator-none">
|
||||
<Charts.ChartTooltipIndicatorNone />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-label-custom">
|
||||
<Charts.ChartTooltipLabelCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-label-formatter">
|
||||
<Charts.ChartTooltipLabelFormatter />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-label-none">
|
||||
<Charts.ChartTooltipLabelNone />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-formatter">
|
||||
<Charts.ChartTooltipFormatter />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-icons">
|
||||
<Charts.ChartTooltipIcons />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-advanced">
|
||||
<Charts.ChartTooltipAdvanced />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+298
-22
@@ -1,28 +1,304 @@
|
||||
"use client"
|
||||
|
||||
import dynamic from "next/dynamic"
|
||||
import { ChartDisplay } from "@/components/chart-display"
|
||||
import { Separator } from "@/registry/default/ui/separator"
|
||||
|
||||
import { SkeletonCardGrid } from "@/components/skeleton-card"
|
||||
|
||||
// Dynamically import heavy chart components
|
||||
const ChartsClient = dynamic(
|
||||
() => import("./charts-client").then((mod) => mod.ChartsClient),
|
||||
{
|
||||
loading: () => (
|
||||
<div className="container mx-auto py-10">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<div className="h-10 w-48 bg-muted animate-pulse rounded" />
|
||||
<div className="h-6 w-96 bg-muted animate-pulse rounded mt-2" />
|
||||
</div>
|
||||
<SkeletonCardGrid count={9} />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
ssr: false, // Charts are interactive with Recharts
|
||||
}
|
||||
)
|
||||
import * as Charts from "./charts"
|
||||
|
||||
export default function ChartsPage() {
|
||||
return <ChartsClient />
|
||||
return (
|
||||
<div className="container mx-auto py-10">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Charts</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Beautiful charts built with Recharts. Copy and paste into your apps.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<div className="gap-6 md:flex md:flex-row-reverse md:items-start">
|
||||
<div className="grid flex-1 gap-12">
|
||||
<h2 className="sr-only">Examples</h2>
|
||||
<div
|
||||
id="examples"
|
||||
className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-area-stacked">
|
||||
<Charts.ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-multiple">
|
||||
<Charts.ChartBarMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay
|
||||
name="chart-pie-donut-text"
|
||||
className="[&_[data-chart]]:xl:max-h-[243px]"
|
||||
>
|
||||
<Charts.ChartPieDonutText />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="area-chart"
|
||||
className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-area-default">
|
||||
<Charts.ChartAreaDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-linear">
|
||||
<Charts.ChartAreaLinear />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-step">
|
||||
<Charts.ChartAreaStep />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-stacked">
|
||||
<Charts.ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-stacked-expand">
|
||||
<Charts.ChartAreaStackedExpand />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-legend">
|
||||
<Charts.ChartAreaLegend />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-icons">
|
||||
<Charts.ChartAreaIcons />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-gradient">
|
||||
<Charts.ChartAreaGradient />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-axes">
|
||||
<Charts.ChartAreaAxes />
|
||||
</ChartDisplay>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<ChartDisplay name="chart-area-interactive">
|
||||
<Charts.ChartAreaInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="bar-chart"
|
||||
className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-bar-default">
|
||||
<Charts.ChartBarDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-horizontal">
|
||||
<Charts.ChartBarHorizontal />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-multiple">
|
||||
<Charts.ChartBarMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-label">
|
||||
<Charts.ChartBarLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-label-custom">
|
||||
<Charts.ChartBarLabelCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-mixed">
|
||||
<Charts.ChartBarMixed />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-stacked">
|
||||
<Charts.ChartBarStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-active">
|
||||
<Charts.ChartBarActive />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-negative">
|
||||
<Charts.ChartBarNegative />
|
||||
</ChartDisplay>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<ChartDisplay name="chart-bar-interactive">
|
||||
<Charts.ChartBarInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="line-chart"
|
||||
className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-line-default">
|
||||
<Charts.ChartLineDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-linear">
|
||||
<Charts.ChartLineLinear />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-step">
|
||||
<Charts.ChartLineStep />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-multiple">
|
||||
<Charts.ChartLineMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-dots">
|
||||
<Charts.ChartLineDots />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-dots-custom">
|
||||
<Charts.ChartLineDotsCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-dots-colors">
|
||||
<Charts.ChartLineDotsColors />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-label">
|
||||
<Charts.ChartLineLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-label-custom">
|
||||
<Charts.ChartLineLabelCustom />
|
||||
</ChartDisplay>
|
||||
<div className="md:col-span-2 lg:col-span-3">
|
||||
<ChartDisplay name="chart-line-interactive">
|
||||
<Charts.ChartLineInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="pie-chart"
|
||||
className="grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-pie-simple">
|
||||
<Charts.ChartPieSimple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-separator-none">
|
||||
<Charts.ChartPieSeparatorNone />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-label">
|
||||
<Charts.ChartPieLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-label-custom">
|
||||
<Charts.ChartPieLabelCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-label-list">
|
||||
<Charts.ChartPieLabelList />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-legend">
|
||||
<Charts.ChartPieLegend />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-donut">
|
||||
<Charts.ChartPieDonut />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-donut-active">
|
||||
<Charts.ChartPieDonutActive />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-donut-text">
|
||||
<Charts.ChartPieDonutText />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-stacked">
|
||||
<Charts.ChartPieStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-interactive">
|
||||
<Charts.ChartPieInteractive />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="radar-chart"
|
||||
className="grid flex-1 scroll-mt-20 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-radar-default">
|
||||
<Charts.ChartRadarDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-dots">
|
||||
<Charts.ChartRadarDots />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-multiple">
|
||||
<Charts.ChartRadarMultiple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-lines-only">
|
||||
<Charts.ChartRadarLinesOnly />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-label-custom">
|
||||
<Charts.ChartRadarLabelCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-radius">
|
||||
<Charts.ChartRadarRadius />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-custom">
|
||||
<Charts.ChartRadarGridCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-fill">
|
||||
<Charts.ChartRadarGridFill />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-none">
|
||||
<Charts.ChartRadarGridNone />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-circle">
|
||||
<Charts.ChartRadarGridCircle />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-circle-no-lines">
|
||||
<Charts.ChartRadarGridCircleNoLines />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-circle-fill">
|
||||
<Charts.ChartRadarGridCircleFill />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-legend">
|
||||
<Charts.ChartRadarLegend />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-icons">
|
||||
<Charts.ChartRadarIcons />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="radial-chart"
|
||||
className="grid flex-1 scroll-mt-20 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-radial-simple">
|
||||
<Charts.ChartRadialSimple />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-label">
|
||||
<Charts.ChartRadialLabel />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-grid">
|
||||
<Charts.ChartRadialGrid />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-text">
|
||||
<Charts.ChartRadialText />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-shape">
|
||||
<Charts.ChartRadialShape />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-stacked">
|
||||
<Charts.ChartRadialStacked />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="tooltip"
|
||||
className="chart-wrapper grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-tooltip-default">
|
||||
<Charts.ChartTooltipDefault />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-indicator-line">
|
||||
<Charts.ChartTooltipIndicatorLine />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-indicator-none">
|
||||
<Charts.ChartTooltipIndicatorNone />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-label-custom">
|
||||
<Charts.ChartTooltipLabelCustom />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-label-formatter">
|
||||
<Charts.ChartTooltipLabelFormatter />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-label-none">
|
||||
<Charts.ChartTooltipLabelNone />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-formatter">
|
||||
<Charts.ChartTooltipFormatter />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-icons">
|
||||
<Charts.ChartTooltipIcons />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-tooltip-advanced">
|
||||
<Charts.ChartTooltipAdvanced />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,606 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import {
|
||||
addEdge,
|
||||
Background,
|
||||
Connection,
|
||||
Controls,
|
||||
Edge,
|
||||
MiniMap,
|
||||
Node,
|
||||
NodeTypes,
|
||||
Panel,
|
||||
ReactFlow,
|
||||
useEdgesState,
|
||||
useNodesState,
|
||||
} from "@xyflow/react"
|
||||
import yaml from "js-yaml"
|
||||
// import "@xyflow/react/dist/style.css" // Causes build issues, styles inlined in component
|
||||
import {
|
||||
Download,
|
||||
HardDrive,
|
||||
Library,
|
||||
Network,
|
||||
Plus,
|
||||
Settings2,
|
||||
} from "lucide-react"
|
||||
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import { Card } from "@/registry/default/ui/card"
|
||||
import { Input } from "@/registry/default/ui/input"
|
||||
import { Label } from "@/registry/default/ui/label"
|
||||
import { ScrollArea } from "@/registry/default/ui/scroll-area"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/registry/default/ui/select"
|
||||
import { Separator } from "@/registry/default/ui/separator"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from "@/registry/default/ui/sheet"
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@/registry/default/ui/tabs"
|
||||
|
||||
const COMMON_IMAGES = [
|
||||
{ name: "nginx", image: "nginx:alpine", category: "proxy" },
|
||||
{ name: "postgres", image: "postgres:16-alpine", category: "database" },
|
||||
{ name: "mysql", image: "mysql:8.4", category: "database" },
|
||||
{ name: "mongodb", image: "mongo:7", category: "database" },
|
||||
{ name: "redis", image: "redis:7-alpine", category: "cache" },
|
||||
{ name: "node", image: "node:20-alpine", category: "runtime" },
|
||||
{ name: "php", image: "php:8.3-fpm-alpine", category: "runtime" },
|
||||
{ name: "ruby", image: "ruby:3.2-alpine", category: "runtime" },
|
||||
{ name: "python", image: "python:3.12-alpine", category: "runtime" },
|
||||
{
|
||||
name: "clickhouse",
|
||||
image: "clickhouse/clickhouse-server:latest",
|
||||
category: "analytics",
|
||||
},
|
||||
{
|
||||
name: "kafka",
|
||||
image: "confluentinc/cp-kafka:latest",
|
||||
category: "streaming",
|
||||
},
|
||||
{ name: "grafana", image: "grafana/grafana:latest", category: "monitoring" },
|
||||
]
|
||||
|
||||
interface ComposeService {
|
||||
image: string
|
||||
ports?: string[]
|
||||
environment?: Record<string, string>
|
||||
networks?: string[]
|
||||
volumes?: string[]
|
||||
depends_on?: string[]
|
||||
}
|
||||
|
||||
function ServiceNode({ data }: { data: any }) {
|
||||
return (
|
||||
<div className="rounded-lg border-2 bg-card p-4 shadow-lg min-w-[200px]">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="rounded bg-primary/10 p-2">
|
||||
<Settings2 className="h-4 w-4 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold">{data.name}</div>
|
||||
<div className="text-xs text-muted-foreground">{data.image}</div>
|
||||
</div>
|
||||
</div>
|
||||
{data.ports && (
|
||||
<div className="mt-2 text-xs text-muted-foreground">
|
||||
📡 {data.ports[0]}
|
||||
</div>
|
||||
)}
|
||||
{data.networks && (
|
||||
<div className="mt-1 flex gap-1">
|
||||
{data.networks.map((net: string) => (
|
||||
<span
|
||||
key={net}
|
||||
className="rounded bg-muted px-1.5 py-0.5 text-[10px]"
|
||||
>
|
||||
{net}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const nodeTypes: NodeTypes = {
|
||||
service: ServiceNode,
|
||||
}
|
||||
|
||||
export function ComposeClient() {
|
||||
const [projectName, setProjectName] = React.useState("my-stack")
|
||||
const [services, setServices] = React.useState<
|
||||
Record<string, ComposeService>
|
||||
>({})
|
||||
const [networks, setNetworks] = React.useState<string[]>(["default"])
|
||||
const [volumes, setVolumes] = React.useState<string[]>([])
|
||||
const [selectedService, setSelectedService] = React.useState<string | null>(
|
||||
null
|
||||
)
|
||||
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState<Node>([])
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([])
|
||||
|
||||
// Update nodes when services change
|
||||
React.useEffect(() => {
|
||||
const newNodes: Node[] = Object.entries(services).map(
|
||||
([name, config], i) => ({
|
||||
id: name,
|
||||
type: "service",
|
||||
position: { x: 100 + (i % 4) * 250, y: 100 + Math.floor(i / 4) * 150 },
|
||||
data: { name, ...config },
|
||||
})
|
||||
)
|
||||
|
||||
const newEdges: Edge[] = []
|
||||
Object.entries(services).forEach(([name, config]) => {
|
||||
config.depends_on?.forEach((dep) => {
|
||||
newEdges.push({
|
||||
id: `${dep}-${name}`,
|
||||
source: dep,
|
||||
target: name,
|
||||
animated: true,
|
||||
style: { stroke: "hsl(var(--primary))" },
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
setNodes(newNodes)
|
||||
setEdges(newEdges)
|
||||
}, [services, setNodes, setEdges])
|
||||
|
||||
const addService = (template: (typeof COMMON_IMAGES)[0]) => {
|
||||
const serviceName = `${template.name}_${Object.keys(services).length + 1}`
|
||||
setServices({
|
||||
...services,
|
||||
[serviceName]: {
|
||||
image: template.image,
|
||||
networks: ["default"],
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const onConnect = React.useCallback(
|
||||
(params: Connection) => {
|
||||
// Add dependency when connecting nodes
|
||||
if (params.source && params.target) {
|
||||
setServices((prev) => ({
|
||||
...prev,
|
||||
[params.target!]: {
|
||||
...prev[params.target!],
|
||||
depends_on: [
|
||||
...(prev[params.target!]?.depends_on || []),
|
||||
params.source!,
|
||||
],
|
||||
},
|
||||
}))
|
||||
}
|
||||
setEdges((eds) => addEdge(params, eds))
|
||||
},
|
||||
[setEdges]
|
||||
)
|
||||
|
||||
const generateYAML = () => {
|
||||
const compose = {
|
||||
version: "3.8",
|
||||
services,
|
||||
networks: networks.reduce((acc, net) => ({ ...acc, [net]: {} }), {}),
|
||||
volumes: volumes.reduce((acc, vol) => ({ ...acc, [vol]: {} }), {}),
|
||||
}
|
||||
return yaml.dump(compose, { indent: 2 })
|
||||
}
|
||||
|
||||
const downloadCompose = () => {
|
||||
const yamlContent = generateYAML()
|
||||
const blob = new Blob([yamlContent], { type: "text/yaml" })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement("a")
|
||||
a.href = url
|
||||
a.download = "docker-compose.yml"
|
||||
a.click()
|
||||
}
|
||||
|
||||
const updateServiceConfig = (
|
||||
serviceName: string,
|
||||
key: string,
|
||||
value: any
|
||||
) => {
|
||||
setServices((prev) => ({
|
||||
...prev,
|
||||
[serviceName]: {
|
||||
...prev[serviceName],
|
||||
[key]: value,
|
||||
},
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
{/* Main Canvas */}
|
||||
<div className="flex-1">
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Top Toolbar */}
|
||||
<div className="flex items-center justify-between border-b bg-card p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-xl font-semibold">Docker Compose Editor</h1>
|
||||
<span className="rounded bg-muted px-2 py-1 text-xs">
|
||||
{Object.keys(services).length} services
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setServices({})
|
||||
setNetworks(["default"])
|
||||
setVolumes([])
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const input = document.createElement("input")
|
||||
input.type = "file"
|
||||
input.accept = ".yml,.yaml"
|
||||
input.onchange = (e: any) => {
|
||||
const file = e.target.files[0]
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
const content = e.target?.result as string
|
||||
const parsed = yaml.load(content) as any
|
||||
setServices(parsed.services || {})
|
||||
setNetworks(
|
||||
Object.keys(parsed.networks || { default: {} })
|
||||
)
|
||||
setVolumes(Object.keys(parsed.volumes || {}))
|
||||
}
|
||||
reader.readAsText(file)
|
||||
}
|
||||
input.click()
|
||||
}}
|
||||
>
|
||||
Import
|
||||
</Button>
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button size="sm">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add service
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent>
|
||||
<SheetHeader>
|
||||
<SheetTitle>Add Service</SheetTitle>
|
||||
</SheetHeader>
|
||||
<ScrollArea className="mt-4 h-[calc(100vh-100px)]">
|
||||
<div className="space-y-2">
|
||||
{COMMON_IMAGES.map((template) => (
|
||||
<Button
|
||||
key={template.image}
|
||||
variant="outline"
|
||||
className="w-full justify-start"
|
||||
onClick={() => addService(template)}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
<div className="flex-1 text-left">
|
||||
<div className="font-medium">{template.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{template.image}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Canvas */}
|
||||
<div className="flex-1 bg-background">
|
||||
{Object.keys(services).length === 0 ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Settings2 className="mx-auto h-12 w-12 text-muted-foreground/50" />
|
||||
<h3 className="mt-4 text-lg font-semibold">
|
||||
No services yet
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Click "Add service" to start building your stack
|
||||
</p>
|
||||
<Button
|
||||
className="mt-4"
|
||||
onClick={() => addService(COMMON_IMAGES[1])}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add your first service
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onConnect={onConnect}
|
||||
nodeTypes={nodeTypes}
|
||||
onNodeClick={(_, node) => setSelectedService(node.id)}
|
||||
fitView
|
||||
className="bg-background"
|
||||
>
|
||||
<Background
|
||||
gap={16}
|
||||
color="hsl(var(--muted-foreground) / 0.3)"
|
||||
/>
|
||||
<Controls className="border-border bg-card" />
|
||||
<Panel position="top-right" className="space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setNetworks([...networks, `network_${networks.length}`])
|
||||
}
|
||||
>
|
||||
<Network className="mr-2 h-4 w-4" />
|
||||
Add network
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setVolumes([...volumes, `vol_${volumes.length}`])
|
||||
}
|
||||
>
|
||||
<HardDrive className="mr-2 h-4 w-4" />
|
||||
Add volume
|
||||
</Button>
|
||||
</Panel>
|
||||
</ReactFlow>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Sidebar - Configuration */}
|
||||
<div className="flex w-80 flex-col border-l bg-card">
|
||||
<div className="border-b p-4">
|
||||
<h2 className="text-lg font-semibold">Compose</h2>
|
||||
<div className="mt-4 space-y-2">
|
||||
<Label htmlFor="project-name">Project Name</Label>
|
||||
<Input
|
||||
id="project-name"
|
||||
value={projectName}
|
||||
onChange={(e) => setProjectName(e.target.value)}
|
||||
placeholder="my-stack"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="services" className="flex-1">
|
||||
<TabsList className="w-full rounded-none">
|
||||
<TabsTrigger value="services" className="flex-1">
|
||||
<Settings2 className="mr-2 h-4 w-4" />
|
||||
Services
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="config" className="flex-1">
|
||||
<Network className="mr-2 h-4 w-4" />
|
||||
Config
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="services" className="mt-0 flex-1">
|
||||
<ScrollArea className="h-[calc(100vh-220px)]">
|
||||
<div className="space-y-2 p-4">
|
||||
{selectedService ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold">{selectedService}</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedService(null)}
|
||||
>
|
||||
✕
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Image</Label>
|
||||
<Input
|
||||
value={services[selectedService]?.image || ""}
|
||||
onChange={(e) =>
|
||||
updateServiceConfig(
|
||||
selectedService,
|
||||
"image",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Ports</Label>
|
||||
<Input
|
||||
placeholder="80:80"
|
||||
onBlur={(e) => {
|
||||
if (e.target.value) {
|
||||
updateServiceConfig(selectedService, "ports", [
|
||||
e.target.value,
|
||||
])
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Networks</Label>
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
updateServiceConfig(selectedService, "networks", [
|
||||
value,
|
||||
])
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select network" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{networks.map((net) => (
|
||||
<SelectItem key={net} value={net}>
|
||||
{net}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
Click a service node to configure
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="config" className="mt-0 flex-1">
|
||||
<div className="space-y-4 p-4">
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>Networks</Label>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const name = prompt("Network name:")
|
||||
if (name) setNetworks([...networks, name])
|
||||
}}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-2 space-y-1">
|
||||
{networks.map((net) => (
|
||||
<div
|
||||
key={net}
|
||||
className="rounded bg-muted px-2 py-1 text-sm"
|
||||
>
|
||||
{net}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>Volumes</Label>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const name = prompt("Volume name:")
|
||||
if (name) setVolumes([...volumes, name])
|
||||
}}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-2 space-y-1">
|
||||
{volumes.map((vol) => (
|
||||
<div
|
||||
key={vol}
|
||||
className="rounded bg-muted px-2 py-1 text-sm"
|
||||
>
|
||||
{vol}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="space-y-2 p-4">
|
||||
<Button onClick={downloadCompose} className="w-full">
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Download compose
|
||||
</Button>
|
||||
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="outline" className="w-full">
|
||||
<Library className="mr-2 h-4 w-4" />
|
||||
Library
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent>
|
||||
<SheetHeader>
|
||||
<SheetTitle>Service Library</SheetTitle>
|
||||
</SheetHeader>
|
||||
<ScrollArea className="mt-4 h-[calc(100vh-100px)]">
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
"proxy",
|
||||
"database",
|
||||
"cache",
|
||||
"runtime",
|
||||
"analytics",
|
||||
"streaming",
|
||||
"monitoring",
|
||||
].map((category) => (
|
||||
<div key={category}>
|
||||
<h4 className="mb-2 text-sm font-semibold capitalize">
|
||||
{category}
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{COMMON_IMAGES.filter(
|
||||
(img) => img.category === category
|
||||
).map((template) => (
|
||||
<Button
|
||||
key={template.image}
|
||||
variant="outline"
|
||||
className="w-full justify-start"
|
||||
onClick={() => {
|
||||
addService(template)
|
||||
}}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{template.name}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+596
-19
@@ -1,29 +1,606 @@
|
||||
"use client"
|
||||
|
||||
import dynamic from "next/dynamic"
|
||||
import * as React from "react"
|
||||
import {
|
||||
addEdge,
|
||||
Background,
|
||||
Connection,
|
||||
Controls,
|
||||
Edge,
|
||||
MiniMap,
|
||||
Node,
|
||||
NodeTypes,
|
||||
Panel,
|
||||
ReactFlow,
|
||||
useEdgesState,
|
||||
useNodesState,
|
||||
} from "@xyflow/react"
|
||||
import yaml from "js-yaml"
|
||||
// import "@xyflow/react/dist/style.css" // Causes build issues, styles inlined in component
|
||||
import {
|
||||
Download,
|
||||
HardDrive,
|
||||
Library,
|
||||
Network,
|
||||
Plus,
|
||||
Settings2,
|
||||
} from "lucide-react"
|
||||
|
||||
import { SkeletonCard } from "@/components/skeleton-card"
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import { Card } from "@/registry/default/ui/card"
|
||||
import { Input } from "@/registry/default/ui/input"
|
||||
import { Label } from "@/registry/default/ui/label"
|
||||
import { ScrollArea } from "@/registry/default/ui/scroll-area"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/registry/default/ui/select"
|
||||
import { Separator } from "@/registry/default/ui/separator"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from "@/registry/default/ui/sheet"
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@/registry/default/ui/tabs"
|
||||
|
||||
// Dynamically import ReactFlow and heavy compose editor
|
||||
const ComposeClient = dynamic(
|
||||
() => import("./compose-client").then((mod) => mod.ComposeClient),
|
||||
const COMMON_IMAGES = [
|
||||
{ name: "nginx", image: "nginx:alpine", category: "proxy" },
|
||||
{ name: "postgres", image: "postgres:16-alpine", category: "database" },
|
||||
{ name: "mysql", image: "mysql:8.4", category: "database" },
|
||||
{ name: "mongodb", image: "mongo:7", category: "database" },
|
||||
{ name: "redis", image: "redis:7-alpine", category: "cache" },
|
||||
{ name: "node", image: "node:20-alpine", category: "runtime" },
|
||||
{ name: "php", image: "php:8.3-fpm-alpine", category: "runtime" },
|
||||
{ name: "ruby", image: "ruby:3.2-alpine", category: "runtime" },
|
||||
{ name: "python", image: "python:3.12-alpine", category: "runtime" },
|
||||
{
|
||||
loading: () => (
|
||||
<div className="flex h-screen items-center justify-center">
|
||||
<div className="space-y-4 w-full max-w-md">
|
||||
<div className="h-8 w-64 bg-muted animate-pulse rounded" />
|
||||
<SkeletonCard className="h-[400px]" />
|
||||
<div className="flex gap-2">
|
||||
<div className="h-10 flex-1 bg-muted animate-pulse rounded" />
|
||||
<div className="h-10 flex-1 bg-muted animate-pulse rounded" />
|
||||
name: "clickhouse",
|
||||
image: "clickhouse/clickhouse-server:latest",
|
||||
category: "analytics",
|
||||
},
|
||||
{
|
||||
name: "kafka",
|
||||
image: "confluentinc/cp-kafka:latest",
|
||||
category: "streaming",
|
||||
},
|
||||
{ name: "grafana", image: "grafana/grafana:latest", category: "monitoring" },
|
||||
]
|
||||
|
||||
interface ComposeService {
|
||||
image: string
|
||||
ports?: string[]
|
||||
environment?: Record<string, string>
|
||||
networks?: string[]
|
||||
volumes?: string[]
|
||||
depends_on?: string[]
|
||||
}
|
||||
|
||||
function ServiceNode({ data }: { data: any }) {
|
||||
return (
|
||||
<div className="rounded-lg border-2 bg-card p-4 shadow-lg min-w-[200px]">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="rounded bg-primary/10 p-2">
|
||||
<Settings2 className="h-4 w-4 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold">{data.name}</div>
|
||||
<div className="text-xs text-muted-foreground">{data.image}</div>
|
||||
</div>
|
||||
</div>
|
||||
{data.ports && (
|
||||
<div className="mt-2 text-xs text-muted-foreground">
|
||||
📡 {data.ports[0]}
|
||||
</div>
|
||||
)}
|
||||
{data.networks && (
|
||||
<div className="mt-1 flex gap-1">
|
||||
{data.networks.map((net: string) => (
|
||||
<span
|
||||
key={net}
|
||||
className="rounded bg-muted px-1.5 py-0.5 text-[10px]"
|
||||
>
|
||||
{net}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const nodeTypes: NodeTypes = {
|
||||
service: ServiceNode,
|
||||
}
|
||||
|
||||
export default function ComposeSpecPage() {
|
||||
const [projectName, setProjectName] = React.useState("my-stack")
|
||||
const [services, setServices] = React.useState<
|
||||
Record<string, ComposeService>
|
||||
>({})
|
||||
const [networks, setNetworks] = React.useState<string[]>(["default"])
|
||||
const [volumes, setVolumes] = React.useState<string[]>([])
|
||||
const [selectedService, setSelectedService] = React.useState<string | null>(
|
||||
null
|
||||
)
|
||||
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState<Node>([])
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([])
|
||||
|
||||
// Update nodes when services change
|
||||
React.useEffect(() => {
|
||||
const newNodes: Node[] = Object.entries(services).map(
|
||||
([name, config], i) => ({
|
||||
id: name,
|
||||
type: "service",
|
||||
position: { x: 100 + (i % 4) * 250, y: 100 + Math.floor(i / 4) * 150 },
|
||||
data: { name, ...config },
|
||||
})
|
||||
)
|
||||
|
||||
const newEdges: Edge[] = []
|
||||
Object.entries(services).forEach(([name, config]) => {
|
||||
config.depends_on?.forEach((dep) => {
|
||||
newEdges.push({
|
||||
id: `${dep}-${name}`,
|
||||
source: dep,
|
||||
target: name,
|
||||
animated: true,
|
||||
style: { stroke: "hsl(var(--primary))" },
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
setNodes(newNodes)
|
||||
setEdges(newEdges)
|
||||
}, [services, setNodes, setEdges])
|
||||
|
||||
const addService = (template: (typeof COMMON_IMAGES)[0]) => {
|
||||
const serviceName = `${template.name}_${Object.keys(services).length + 1}`
|
||||
setServices({
|
||||
...services,
|
||||
[serviceName]: {
|
||||
image: template.image,
|
||||
networks: ["default"],
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const onConnect = React.useCallback(
|
||||
(params: Connection) => {
|
||||
// Add dependency when connecting nodes
|
||||
if (params.source && params.target) {
|
||||
setServices((prev) => ({
|
||||
...prev,
|
||||
[params.target!]: {
|
||||
...prev[params.target!],
|
||||
depends_on: [
|
||||
...(prev[params.target!]?.depends_on || []),
|
||||
params.source!,
|
||||
],
|
||||
},
|
||||
}))
|
||||
}
|
||||
setEdges((eds) => addEdge(params, eds))
|
||||
},
|
||||
[setEdges]
|
||||
)
|
||||
|
||||
const generateYAML = () => {
|
||||
const compose = {
|
||||
version: "3.8",
|
||||
services,
|
||||
networks: networks.reduce((acc, net) => ({ ...acc, [net]: {} }), {}),
|
||||
volumes: volumes.reduce((acc, vol) => ({ ...acc, [vol]: {} }), {}),
|
||||
}
|
||||
return yaml.dump(compose, { indent: 2 })
|
||||
}
|
||||
|
||||
const downloadCompose = () => {
|
||||
const yamlContent = generateYAML()
|
||||
const blob = new Blob([yamlContent], { type: "text/yaml" })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement("a")
|
||||
a.href = url
|
||||
a.download = "docker-compose.yml"
|
||||
a.click()
|
||||
}
|
||||
|
||||
const updateServiceConfig = (
|
||||
serviceName: string,
|
||||
key: string,
|
||||
value: any
|
||||
) => {
|
||||
setServices((prev) => ({
|
||||
...prev,
|
||||
[serviceName]: {
|
||||
...prev[serviceName],
|
||||
[key]: value,
|
||||
},
|
||||
}))
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
{/* Main Canvas */}
|
||||
<div className="flex-1">
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Top Toolbar */}
|
||||
<div className="flex items-center justify-between border-b bg-card p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-xl font-semibold">Docker Compose Editor</h1>
|
||||
<span className="rounded bg-muted px-2 py-1 text-xs">
|
||||
{Object.keys(services).length} services
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setServices({})
|
||||
setNetworks(["default"])
|
||||
setVolumes([])
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const input = document.createElement("input")
|
||||
input.type = "file"
|
||||
input.accept = ".yml,.yaml"
|
||||
input.onchange = (e: any) => {
|
||||
const file = e.target.files[0]
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
const content = e.target?.result as string
|
||||
const parsed = yaml.load(content) as any
|
||||
setServices(parsed.services || {})
|
||||
setNetworks(
|
||||
Object.keys(parsed.networks || { default: {} })
|
||||
)
|
||||
setVolumes(Object.keys(parsed.volumes || {}))
|
||||
}
|
||||
reader.readAsText(file)
|
||||
}
|
||||
input.click()
|
||||
}}
|
||||
>
|
||||
Import
|
||||
</Button>
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button size="sm">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add service
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent>
|
||||
<SheetHeader>
|
||||
<SheetTitle>Add Service</SheetTitle>
|
||||
</SheetHeader>
|
||||
<ScrollArea className="mt-4 h-[calc(100vh-100px)]">
|
||||
<div className="space-y-2">
|
||||
{COMMON_IMAGES.map((template) => (
|
||||
<Button
|
||||
key={template.image}
|
||||
variant="outline"
|
||||
className="w-full justify-start"
|
||||
onClick={() => addService(template)}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
<div className="flex-1 text-left">
|
||||
<div className="font-medium">{template.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{template.image}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Canvas */}
|
||||
<div className="flex-1 bg-background">
|
||||
{Object.keys(services).length === 0 ? (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Settings2 className="mx-auto h-12 w-12 text-muted-foreground/50" />
|
||||
<h3 className="mt-4 text-lg font-semibold">
|
||||
No services yet
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Click "Add service" to start building your stack
|
||||
</p>
|
||||
<Button
|
||||
className="mt-4"
|
||||
onClick={() => addService(COMMON_IMAGES[1])}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add your first service
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onConnect={onConnect}
|
||||
nodeTypes={nodeTypes}
|
||||
onNodeClick={(_, node) => setSelectedService(node.id)}
|
||||
fitView
|
||||
className="bg-background"
|
||||
>
|
||||
<Background
|
||||
gap={16}
|
||||
color="hsl(var(--muted-foreground) / 0.3)"
|
||||
/>
|
||||
<Controls className="border-border bg-card" />
|
||||
<Panel position="top-right" className="space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setNetworks([...networks, `network_${networks.length}`])
|
||||
}
|
||||
>
|
||||
<Network className="mr-2 h-4 w-4" />
|
||||
Add network
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setVolumes([...volumes, `vol_${volumes.length}`])
|
||||
}
|
||||
>
|
||||
<HardDrive className="mr-2 h-4 w-4" />
|
||||
Add volume
|
||||
</Button>
|
||||
</Panel>
|
||||
</ReactFlow>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
ssr: false, // ReactFlow requires client-side rendering
|
||||
}
|
||||
)
|
||||
|
||||
export default function ComposePage() {
|
||||
return <ComposeClient />
|
||||
{/* Right Sidebar - Configuration */}
|
||||
<div className="flex w-80 flex-col border-l bg-card">
|
||||
<div className="border-b p-4">
|
||||
<h2 className="text-lg font-semibold">Compose</h2>
|
||||
<div className="mt-4 space-y-2">
|
||||
<Label htmlFor="project-name">Project Name</Label>
|
||||
<Input
|
||||
id="project-name"
|
||||
value={projectName}
|
||||
onChange={(e) => setProjectName(e.target.value)}
|
||||
placeholder="my-stack"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="services" className="flex-1">
|
||||
<TabsList className="w-full rounded-none">
|
||||
<TabsTrigger value="services" className="flex-1">
|
||||
<Settings2 className="mr-2 h-4 w-4" />
|
||||
Services
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="config" className="flex-1">
|
||||
<Network className="mr-2 h-4 w-4" />
|
||||
Config
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="services" className="mt-0 flex-1">
|
||||
<ScrollArea className="h-[calc(100vh-220px)]">
|
||||
<div className="space-y-2 p-4">
|
||||
{selectedService ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold">{selectedService}</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedService(null)}
|
||||
>
|
||||
✕
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Image</Label>
|
||||
<Input
|
||||
value={services[selectedService]?.image || ""}
|
||||
onChange={(e) =>
|
||||
updateServiceConfig(
|
||||
selectedService,
|
||||
"image",
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Ports</Label>
|
||||
<Input
|
||||
placeholder="80:80"
|
||||
onBlur={(e) => {
|
||||
if (e.target.value) {
|
||||
updateServiceConfig(selectedService, "ports", [
|
||||
e.target.value,
|
||||
])
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Networks</Label>
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
updateServiceConfig(selectedService, "networks", [
|
||||
value,
|
||||
])
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select network" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{networks.map((net) => (
|
||||
<SelectItem key={net} value={net}>
|
||||
{net}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
Click a service node to configure
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="config" className="mt-0 flex-1">
|
||||
<div className="space-y-4 p-4">
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>Networks</Label>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const name = prompt("Network name:")
|
||||
if (name) setNetworks([...networks, name])
|
||||
}}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-2 space-y-1">
|
||||
{networks.map((net) => (
|
||||
<div
|
||||
key={net}
|
||||
className="rounded bg-muted px-2 py-1 text-sm"
|
||||
>
|
||||
{net}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>Volumes</Label>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const name = prompt("Volume name:")
|
||||
if (name) setVolumes([...volumes, name])
|
||||
}}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-2 space-y-1">
|
||||
{volumes.map((vol) => (
|
||||
<div
|
||||
key={vol}
|
||||
className="rounded bg-muted px-2 py-1 text-sm"
|
||||
>
|
||||
{vol}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="space-y-2 p-4">
|
||||
<Button onClick={downloadCompose} className="w-full">
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Download compose
|
||||
</Button>
|
||||
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="outline" className="w-full">
|
||||
<Library className="mr-2 h-4 w-4" />
|
||||
Library
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent>
|
||||
<SheetHeader>
|
||||
<SheetTitle>Service Library</SheetTitle>
|
||||
</SheetHeader>
|
||||
<ScrollArea className="mt-4 h-[calc(100vh-100px)]">
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
"proxy",
|
||||
"database",
|
||||
"cache",
|
||||
"runtime",
|
||||
"analytics",
|
||||
"streaming",
|
||||
"monitoring",
|
||||
].map((category) => (
|
||||
<div key={category}>
|
||||
<h4 className="mb-2 text-sm font-semibold capitalize">
|
||||
{category}
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{COMMON_IMAGES.filter(
|
||||
(img) => img.category === category
|
||||
).map((template) => (
|
||||
<Button
|
||||
key={template.image}
|
||||
variant="outline"
|
||||
className="w-full justify-start"
|
||||
onClick={() => {
|
||||
addService(template)
|
||||
}}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
{template.name}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import Link from "next/link"
|
||||
import { notFound } from "next/navigation"
|
||||
import { mdxComponents } from "@/mdx-components"
|
||||
import { findNeighbour } from "@hanzo/docs-core/page-tree"
|
||||
import {
|
||||
IconArrowLeft,
|
||||
IconArrowRight,
|
||||
IconArrowUpRight,
|
||||
} from "@tabler/icons-react"
|
||||
import { findNeighbour } from "fumadocs-core/server"
|
||||
|
||||
import { source } from "@/lib/source"
|
||||
import { absoluteUrl } from "@/lib/utils"
|
||||
@@ -180,8 +180,10 @@ export default async function Page(props: {
|
||||
</div>
|
||||
<div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[calc(100svh-var(--footer-height)+2rem)] w-72 flex-col gap-4 overflow-hidden overscroll-none pb-8 xl:flex">
|
||||
<div className="h-(--top-spacing) shrink-0" />
|
||||
{/* @ts-expect-error - revisit fumadocs types. */}
|
||||
{page.data.toc?.length ? (
|
||||
<div className="no-scrollbar overflow-y-auto px-8">
|
||||
{/* @ts-expect-error - revisit fumadocs types. */}
|
||||
<DocsTableOfContents toc={page.data.toc} />
|
||||
<div className="h-12" />
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { docsConfig } from "@/config/docs"
|
||||
import { DocsNav as DocsSidebarNav } from "@/components/sidebar-nav"
|
||||
import { DocsSidebarNav } from "@/components/sidebar-nav"
|
||||
import { ScrollArea } from "@/registry/default/ui/scroll-area"
|
||||
|
||||
interface DocsLayoutProps {
|
||||
@@ -12,7 +12,7 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
|
||||
<div className="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
|
||||
<aside className="fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
|
||||
<ScrollArea className="h-full py-6 px-6 lg:py-8 lg:pl-4 lg:pr-6">
|
||||
<DocsSidebarNav config={docsConfig} />
|
||||
<DocsSidebarNav items={docsConfig.sidebarNav} />
|
||||
</ScrollArea>
|
||||
</aside>
|
||||
{children}
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
import { ChevronDown, Circle, Plus, Star } from "lucide-react"
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
CircleIcon,
|
||||
PlusIcon,
|
||||
StarIcon,
|
||||
} from "@radix-ui/react-icons"
|
||||
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import {
|
||||
@@ -32,14 +37,14 @@ export function DemoGithub() {
|
||||
</div>
|
||||
<div className="flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground">
|
||||
<Button variant="secondary" className="px-3 shadow-none">
|
||||
<Star />
|
||||
<StarIcon className="mr-2 h-4 w-4" />
|
||||
Star
|
||||
</Button>
|
||||
<Separator orientation="vertical" className="h-[20px]" />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="secondary" className="px-2 shadow-none">
|
||||
<ChevronDown className="text-secondary-foreground" />
|
||||
<ChevronDownIcon className="h-4 w-4 text-secondary-foreground" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
@@ -57,7 +62,7 @@ export function DemoGithub() {
|
||||
<DropdownMenuCheckboxItem>Inspiration</DropdownMenuCheckboxItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>
|
||||
<Plus /> Create List
|
||||
<PlusIcon className="mr-2 h-4 w-4" /> Create List
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
@@ -66,11 +71,11 @@ export function DemoGithub() {
|
||||
<CardContent>
|
||||
<div className="flex space-x-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center">
|
||||
<Circle className="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
|
||||
<CircleIcon className="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
|
||||
TypeScript
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Star className="mr-1 h-3 w-3" />
|
||||
<StarIcon className="mr-1 h-3 w-3" />
|
||||
20k
|
||||
</div>
|
||||
<div>Updated April 2023</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Bell, EyeOff, User } from "lucide-react"
|
||||
import { BellIcon, EyeNoneIcon, PersonIcon } from "@radix-ui/react-icons"
|
||||
|
||||
import {
|
||||
Card,
|
||||
@@ -19,7 +19,7 @@ export function DemoNotifications() {
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-1">
|
||||
<div className="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
|
||||
<Bell className="mt-px h-5 w-5" />
|
||||
<BellIcon className="mt-px h-5 w-5" />
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium leading-none">Everything</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
@@ -28,7 +28,7 @@ export function DemoNotifications() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all">
|
||||
<User className="mt-px h-5 w-5" />
|
||||
<PersonIcon className="mt-px h-5 w-5" />
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium leading-none">Available</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
@@ -37,7 +37,7 @@ export function DemoNotifications() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
|
||||
<EyeOff className="mt-px h-5 w-5" />
|
||||
<EyeNoneIcon className="mt-px h-5 w-5" />
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium leading-none">Ignoring</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
|
||||
@@ -41,7 +41,7 @@ export function DemoShareDocument() {
|
||||
</div>
|
||||
<Separator className="my-4" />
|
||||
<div className="space-y-4">
|
||||
<div className="text-sm font-medium">People with access</div>
|
||||
<h4 className="text-sm font-medium">People with access</h4>
|
||||
<div className="grid gap-6">
|
||||
<div className="flex items-center justify-between space-x-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ChevronDown } from "lucide-react"
|
||||
import { ChevronDownIcon } from "@radix-ui/react-icons"
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
@@ -51,7 +51,8 @@ export function DemoTeamMembers() {
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" className="ml-auto">
|
||||
Owner <ChevronDown className="text-muted-foreground" />
|
||||
Owner{" "}
|
||||
<ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0" align="end">
|
||||
@@ -104,7 +105,8 @@ export function DemoTeamMembers() {
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" className="ml-auto">
|
||||
Member <ChevronDown className="text-muted-foreground" />
|
||||
Member{" "}
|
||||
<ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0" align="end">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { CalendarIcon } from "@radix-ui/react-icons"
|
||||
import { addDays, format } from "date-fns"
|
||||
import { CalendarIcon } from "lucide-react"
|
||||
import { DateRange } from "react-day-picker"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Check, ChevronsUpDown, PlusCircle } from "lucide-react"
|
||||
import {
|
||||
CaretSortIcon,
|
||||
CheckIcon,
|
||||
PlusCircledIcon,
|
||||
} from "@radix-ui/react-icons"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
@@ -101,13 +105,13 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
|
||||
<AvatarFallback>SC</AvatarFallback>
|
||||
</Avatar>
|
||||
{selectedTeam.label}
|
||||
<ChevronsUpDown className="ml-auto opacity-50" />
|
||||
<CaretSortIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[200px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search team..." />
|
||||
<CommandList>
|
||||
<CommandInput placeholder="Search team..." />
|
||||
<CommandEmpty>No team found.</CommandEmpty>
|
||||
{groups.map((group) => (
|
||||
<CommandGroup key={group.label} heading={group.label}>
|
||||
@@ -129,9 +133,9 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
|
||||
<AvatarFallback>SC</AvatarFallback>
|
||||
</Avatar>
|
||||
{team.label}
|
||||
<Check
|
||||
<CheckIcon
|
||||
className={cn(
|
||||
"ml-auto",
|
||||
"ml-auto h-4 w-4",
|
||||
selectedTeam.value === team.value
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
@@ -152,7 +156,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
|
||||
setShowNewTeamDialog(true)
|
||||
}}
|
||||
>
|
||||
<PlusCircle className="h-5 w-5" />
|
||||
<PlusCircledIcon className="mr-2 h-5 w-5" />
|
||||
Create Team
|
||||
</CommandItem>
|
||||
</DialogTrigger>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
"use client"
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { CalendarIcon, CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
|
||||
import { format } from "date-fns"
|
||||
import { CalendarIcon, Check, ChevronsUpDown } from "lucide-react"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { z } from "zod"
|
||||
|
||||
@@ -15,7 +15,6 @@ import {
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/registry/default/ui/command"
|
||||
import {
|
||||
Form,
|
||||
@@ -170,37 +169,35 @@ export function AccountForm() {
|
||||
(language) => language.value === field.value
|
||||
)?.label
|
||||
: "Select language"}
|
||||
<ChevronsUpDown className="opacity-50" />
|
||||
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[200px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search language..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No language found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{languages.map((language) => (
|
||||
<CommandItem
|
||||
value={language.label}
|
||||
key={language.value}
|
||||
onSelect={() => {
|
||||
form.setValue("language", language.value)
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2",
|
||||
language.value === field.value
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{language.label}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
<CommandEmpty>No language found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{languages.map((language) => (
|
||||
<CommandItem
|
||||
value={language.label}
|
||||
key={language.value}
|
||||
onSelect={() => {
|
||||
form.setValue("language", language.value)
|
||||
}}
|
||||
>
|
||||
<CheckIcon
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
language.value === field.value
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{language.label}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client"
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { ChevronDown } from "lucide-react"
|
||||
import { ChevronDownIcon } from "@radix-ui/react-icons"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { z } from "zod"
|
||||
|
||||
@@ -73,7 +73,7 @@ export function AppearanceForm() {
|
||||
<option value="system">System</option>
|
||||
</select>
|
||||
</FormControl>
|
||||
<ChevronDown className="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
|
||||
<ChevronDownIcon className="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
|
||||
</div>
|
||||
<FormDescription>
|
||||
Set the font you want to use in the dashboard.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Image from "next/image"
|
||||
import { PlusCircle } from "lucide-react"
|
||||
import { PlusCircledIcon } from "@radix-ui/react-icons"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
@@ -45,7 +45,6 @@ export function AlbumArtwork({
|
||||
"h-auto w-auto object-cover transition-all hover:scale-105",
|
||||
aspectRatio === "portrait" ? "aspect-[3/4]" : "aspect-square"
|
||||
)}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</ContextMenuTrigger>
|
||||
@@ -55,7 +54,7 @@ export function AlbumArtwork({
|
||||
<ContextMenuSubTrigger>Add to Playlist</ContextMenuSubTrigger>
|
||||
<ContextMenuSubContent className="w-48">
|
||||
<ContextMenuItem>
|
||||
<PlusCircle className="mr-2 h-4 w-4" />
|
||||
<PlusCircledIcon className="mr-2 h-4 w-4" />
|
||||
New Playlist
|
||||
</ContextMenuItem>
|
||||
<ContextMenuSeparator />
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Metadata } from "next"
|
||||
import Image from "next/image"
|
||||
import { PlusCircle } from "lucide-react"
|
||||
import { PlusCircledIcon } from "@radix-ui/react-icons"
|
||||
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import { ScrollArea, ScrollBar } from "@/registry/default/ui/scroll-area"
|
||||
@@ -64,7 +64,7 @@ export default function MusicPage() {
|
||||
</TabsList>
|
||||
<div className="ml-auto mr-4">
|
||||
<Button>
|
||||
<PlusCircle />
|
||||
<PlusCircledIcon className="mr-2 h-4 w-4" />
|
||||
Add music
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -71,15 +71,13 @@ export default function ExamplesPage() {
|
||||
<div className="aspect-video overflow-hidden">
|
||||
<img
|
||||
src={example.image}
|
||||
alt={`${example.name} - Light mode preview`}
|
||||
alt={example.name}
|
||||
className="block h-full w-full object-cover transition-transform group-hover:scale-105 dark:hidden"
|
||||
loading="lazy"
|
||||
/>
|
||||
<img
|
||||
src={example.imageDark}
|
||||
alt={`${example.name} - Dark mode preview`}
|
||||
alt={example.name}
|
||||
className="hidden h-full w-full object-cover transition-transform group-hover:scale-105 dark:block"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
|
||||
import { PopoverProps } from "@radix-ui/react-popover"
|
||||
import { Check, ChevronsUpDown } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { useMutationObserver } from "@/hooks/use-mutation-observer"
|
||||
@@ -64,7 +64,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
|
||||
className="w-full justify-between"
|
||||
>
|
||||
{selectedModel ? selectedModel.name : "Select a model..."}
|
||||
<ChevronsUpDown className="opacity-50" />
|
||||
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="end" className="w-[250px] p-0">
|
||||
@@ -135,15 +135,13 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
|
||||
const ref = React.useRef<HTMLDivElement>(null)
|
||||
|
||||
useMutationObserver(ref, (mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
if (
|
||||
mutation.type === "attributes" &&
|
||||
mutation.attributeName === "aria-selected" &&
|
||||
ref.current?.getAttribute("aria-selected") === "true"
|
||||
) {
|
||||
onPeek(model)
|
||||
for (const mutation of mutations) {
|
||||
if (mutation.type === "attributes") {
|
||||
if (mutation.attributeName === "aria-selected") {
|
||||
onPeek(model)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
@@ -154,7 +152,7 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
|
||||
className="aria-selected:bg-primary aria-selected:text-primary-foreground"
|
||||
>
|
||||
{model.name}
|
||||
<Check
|
||||
<CheckIcon
|
||||
className={cn(
|
||||
"ml-auto h-4 w-4",
|
||||
isSelected ? "opacity-100" : "opacity-0"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import * as React from "react"
|
||||
import { Dialog } from "@radix-ui/react-dialog"
|
||||
import { MoreHorizontal } from "lucide-react"
|
||||
import { DotsHorizontalIcon } from "@radix-ui/react-icons"
|
||||
|
||||
import {
|
||||
AlertDialog,
|
||||
@@ -40,9 +40,9 @@ export function PresetActions() {
|
||||
<>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="secondary" size="icon">
|
||||
<Button variant="secondary">
|
||||
<span className="sr-only">Actions</span>
|
||||
<MoreHorizontal />
|
||||
<DotsHorizontalIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
|
||||
import * as React from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
|
||||
import { PopoverProps } from "@radix-ui/react-popover"
|
||||
import { Check, ChevronsUpDown } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
@@ -13,7 +13,6 @@ import {
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/registry/default/ui/command"
|
||||
import {
|
||||
Popover,
|
||||
@@ -43,41 +42,39 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) {
|
||||
className="flex-1 justify-between md:max-w-[200px] lg:max-w-[300px]"
|
||||
>
|
||||
{selectedPreset ? selectedPreset.name : "Load a preset..."}
|
||||
<ChevronsUpDown className="opacity-50" />
|
||||
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[300px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search presets..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No presets found.</CommandEmpty>
|
||||
<CommandGroup heading="Examples">
|
||||
{presets.map((preset) => (
|
||||
<CommandItem
|
||||
key={preset.id}
|
||||
onSelect={() => {
|
||||
setSelectedPreset(preset)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
{preset.name}
|
||||
<Check
|
||||
className={cn(
|
||||
"ml-auto",
|
||||
selectedPreset?.id === preset.id
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
<CommandGroup className="pt-0">
|
||||
<CommandItem onSelect={() => router.push("/examples")}>
|
||||
More examples
|
||||
<CommandEmpty>No presets found.</CommandEmpty>
|
||||
<CommandGroup heading="Examples">
|
||||
{presets.map((preset) => (
|
||||
<CommandItem
|
||||
key={preset.id}
|
||||
onSelect={() => {
|
||||
setSelectedPreset(preset)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
{preset.name}
|
||||
<CheckIcon
|
||||
className={cn(
|
||||
"ml-auto h-4 w-4",
|
||||
selectedPreset?.id === preset.id
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
))}
|
||||
</CommandGroup>
|
||||
<CommandGroup className="pt-0">
|
||||
<CommandItem onSelect={() => router.push("/examples")}>
|
||||
More examples
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Copy } from "lucide-react"
|
||||
import { CopyIcon } from "@radix-ui/react-icons"
|
||||
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import { Input } from "@/registry/default/ui/input"
|
||||
@@ -37,7 +37,7 @@ export function PresetShare() {
|
||||
</div>
|
||||
<Button type="submit" size="sm" className="px-3">
|
||||
<span className="sr-only">Copy</span>
|
||||
<Copy />
|
||||
<CopyIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Metadata } from "next"
|
||||
import Image from "next/image"
|
||||
import { RotateCcw } from "lucide-react"
|
||||
import { CounterClockwiseClockIcon } from "@radix-ui/react-icons"
|
||||
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import {
|
||||
@@ -265,7 +265,7 @@ export default function PlaygroundPage() {
|
||||
<Button>Submit</Button>
|
||||
<Button variant="secondary">
|
||||
<span className="sr-only">Show history</span>
|
||||
<RotateCcw />
|
||||
<CounterClockwiseClockIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -283,7 +283,7 @@ export default function PlaygroundPage() {
|
||||
<Button>Submit</Button>
|
||||
<Button variant="secondary">
|
||||
<span className="sr-only">Show history</span>
|
||||
<RotateCcw />
|
||||
<CounterClockwiseClockIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -314,7 +314,7 @@ export default function PlaygroundPage() {
|
||||
<Button>Submit</Button>
|
||||
<Button variant="secondary">
|
||||
<span className="sr-only">Show history</span>
|
||||
<RotateCcw />
|
||||
<CounterClockwiseClockIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+203
-20
@@ -1,8 +1,24 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import {
|
||||
AdvancedChart,
|
||||
CompanyProfile,
|
||||
CryptoScreener,
|
||||
Financials,
|
||||
ForexScreener,
|
||||
MarketOverview,
|
||||
NewsTimeline,
|
||||
OrderEntry,
|
||||
OrdersHistory,
|
||||
PositionsList,
|
||||
StockScreener,
|
||||
SymbolInfo,
|
||||
TechnicalAnalysis,
|
||||
TickerTape,
|
||||
TradingPanel,
|
||||
} from "@hanzo/ui/finance"
|
||||
|
||||
import AdvancedChart from "@/registry/default/ui/advanced-chart"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -11,20 +27,6 @@ import {
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import { Separator } from "@/registry/default/ui/separator"
|
||||
// import { CompanyProfile } from "@/registry/default/ui/company-profile" // TODO: Create this component
|
||||
// import { CryptoScreener } from "@/registry/default/ui/crypto-screener" // TODO: Create this component
|
||||
// import { Financials } from "@/registry/default/ui/financials" // TODO: Create this component
|
||||
// import { ForexScreener } from "@/registry/default/ui/forex-screener" // TODO: Create this component
|
||||
// import { MarketOverview } from "@/registry/default/ui/market-overview" // TODO: Create this component
|
||||
// import { NewsTimeline } from "@/registry/default/ui/news-timeline" // TODO: Create this component
|
||||
// import { OrderEntry } from "@/registry/default/ui/order-entry" // TODO: Create this component
|
||||
// import { OrdersHistory } from "@/registry/default/ui/orders-history" // TODO: Create this component
|
||||
// import { PositionsList } from "@/registry/default/ui/positions-list" // TODO: Create this component
|
||||
import StockScreener from "@/registry/default/ui/stock-screener"
|
||||
// import { SymbolInfo } from "@/registry/default/ui/symbol-info" // TODO: Create this component
|
||||
// import { TechnicalAnalysis } from "@/registry/default/ui/technical-analysis" // TODO: Create this component
|
||||
// import { TickerTape } from "@/registry/default/ui/ticker-tape" // TODO: Create this component
|
||||
import { TradingPanel } from "@/registry/default/ui/trading-panel"
|
||||
|
||||
export default function FinancePage() {
|
||||
const [positions, setPositions] = useState([
|
||||
@@ -111,7 +113,31 @@ export default function FinancePage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* TODO: Add TickerTape and MarketOverview components */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Ticker Tape</CardTitle>
|
||||
<CardDescription>
|
||||
Scrolling ticker with major market indices
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TickerTape />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Market Overview</CardTitle>
|
||||
<CardDescription>
|
||||
Multi-asset market overview with tabs
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div style={{ height: "450px" }}>
|
||||
<MarketOverview />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -122,11 +148,11 @@ export default function FinancePage() {
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold">Market Screeners</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Asset screeners for stocks (crypto and forex coming soon)
|
||||
Asset screeners for stocks, crypto, and forex
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Stock Screener</CardTitle>
|
||||
@@ -137,18 +163,129 @@ export default function FinancePage() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Crypto Screener</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div style={{ height: "400px" }}>
|
||||
<CryptoScreener />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Forex Screener</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div style={{ height: "400px" }}>
|
||||
<ForexScreener />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Symbol Analysis */}
|
||||
<section className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold">Symbol Analysis</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Comprehensive symbol information and analysis tools
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Symbol Info</CardTitle>
|
||||
<CardDescription>
|
||||
Real-time symbol details and price information
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div style={{ height: "140px" }}>
|
||||
<SymbolInfo symbol="NASDAQ:AAPL" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Company Profile</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div style={{ height: "400px" }}>
|
||||
<CompanyProfile symbol="NASDAQ:AAPL" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Technical Analysis</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div style={{ height: "400px" }}>
|
||||
<TechnicalAnalysis symbol="NASDAQ:AAPL" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Financials</CardTitle>
|
||||
<CardDescription>
|
||||
Financial statements and fundamental data
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div style={{ height: "500px" }}>
|
||||
<Financials symbol="NASDAQ:AAPL" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* News */}
|
||||
<section className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold">News & Timeline</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Financial news feed and updates
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>News Timeline</CardTitle>
|
||||
<CardDescription>Real-time financial news feed</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div style={{ height: "400px" }}>
|
||||
<NewsTimeline />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Trading Interface */}
|
||||
<section className="space-y-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold">Trading Interface</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Trading panel component (order entry and position management
|
||||
coming soon)
|
||||
Order entry, positions, and order management components
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -164,6 +301,52 @@ export default function FinancePage() {
|
||||
<TradingPanel symbol="NASDAQ:AAPL" currentPrice={175} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-6">
|
||||
<Card className="lg:col-span-1">
|
||||
<CardHeader>
|
||||
<CardTitle>Order Entry</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<OrderEntry
|
||||
symbol="NASDAQ:AAPL"
|
||||
accountBalance={10000}
|
||||
onPlaceOrder={handlePlaceOrder}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle>Positions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<PositionsList
|
||||
positions={positions}
|
||||
onPositionClick={() => {}}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Orders History</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<OrdersHistory
|
||||
orders={orders}
|
||||
onOrderClick={() => {}}
|
||||
onCancelOrder={(id: string) => {
|
||||
setOrders(
|
||||
orders.map((o) =>
|
||||
o.id === id ? { ...o, status: "cancelled" } : o
|
||||
)
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -9,9 +9,7 @@ export default function AppLayout({ children }: AppLayoutProps) {
|
||||
return (
|
||||
<>
|
||||
<SiteHeader />
|
||||
<main id="main-content" className="flex-1">
|
||||
{children}
|
||||
</main>
|
||||
<main className="flex-1">{children}</main>
|
||||
<SiteFooter />
|
||||
</>
|
||||
)
|
||||
|
||||
+20
-74
@@ -1,7 +1,13 @@
|
||||
import { Metadata } from "next"
|
||||
import Link from "next/link"
|
||||
import { ArrowRight, CheckCircle2 } from "lucide-react"
|
||||
|
||||
import { Announcement } from "@/components/announcement"
|
||||
import {
|
||||
PageActions,
|
||||
PageHeader,
|
||||
PageHeaderDescription,
|
||||
PageHeaderHeading,
|
||||
} from "@/components/page-header"
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
|
||||
import { HomeContent } from "./home-content"
|
||||
@@ -40,79 +46,19 @@ export const metadata: Metadata = {
|
||||
export default function IndexPage() {
|
||||
return (
|
||||
<div className="flex flex-1 flex-col">
|
||||
{/* Enhanced Hero Section */}
|
||||
<section className="relative overflow-hidden">
|
||||
{/* Animated gradient background */}
|
||||
<div className="absolute inset-0 -z-10">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-accent/10 animate-gradient bg-[length:200%_200%]" />
|
||||
<div className="absolute inset-0 bg-grid-white/[0.02]" />
|
||||
</div>
|
||||
|
||||
{/* Hero content */}
|
||||
<div className="container py-16 md:py-24 lg:py-32 space-y-8 animate-fade-in-up">
|
||||
{/* Animated badge with pulse indicator */}
|
||||
<div className="flex justify-center">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-muted text-sm font-medium border">
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
|
||||
</span>
|
||||
New: 150+ components, Page Builder, and more
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main heading with gradient text */}
|
||||
<h1 className="text-center text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-tight">
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">
|
||||
{title}
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<p className="text-center text-lg sm:text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed px-4">
|
||||
{description}
|
||||
</p>
|
||||
|
||||
{/* CTAs with clear hierarchy - larger and more prominent */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
className="gap-2 text-base md:text-lg h-11 md:h-12 px-6 md:px-8 min-w-[160px] shadow-lg hover:shadow-xl transition-shadow"
|
||||
>
|
||||
<Link href="/docs/installation">
|
||||
Get Started
|
||||
<ArrowRight className="h-4 w-4 md:h-5 md:w-5" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="text-base md:text-lg h-11 md:h-12 px-6 md:px-8 min-w-[160px]"
|
||||
>
|
||||
<Link href="/docs/components">View Components</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Trust indicators */}
|
||||
<div className="flex flex-wrap justify-center gap-6 md:gap-8 text-sm md:text-base text-muted-foreground pt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="h-4 w-4 md:h-5 md:w-5 text-primary" />
|
||||
<span>Open Source</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="h-4 w-4 md:h-5 md:w-5 text-primary" />
|
||||
<span>TypeScript</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="h-4 w-4 md:h-5 md:w-5 text-primary" />
|
||||
<span>Accessible</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PageHeader>
|
||||
<Announcement />
|
||||
<PageHeaderHeading className="max-w-4xl">{title}</PageHeaderHeading>
|
||||
<PageHeaderDescription>{description}</PageHeaderDescription>
|
||||
<PageActions>
|
||||
<Button asChild size="sm">
|
||||
<Link href="/docs/installation">Get Started</Link>
|
||||
</Button>
|
||||
<Button asChild size="sm" variant="ghost">
|
||||
<Link href="/docs/components">View Components</Link>
|
||||
</Button>
|
||||
</PageActions>
|
||||
</PageHeader>
|
||||
<div className="container-wrapper section-soft flex-1 pb-6">
|
||||
<div className="container overflow-hidden">
|
||||
<section className="theme-container">
|
||||
|
||||
@@ -1,802 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import {
|
||||
Check,
|
||||
Copy,
|
||||
Download,
|
||||
Monitor,
|
||||
Moon,
|
||||
Palette,
|
||||
RotateCcw,
|
||||
Settings2,
|
||||
Shuffle,
|
||||
Sparkles,
|
||||
Sun,
|
||||
} from "lucide-react"
|
||||
import { HexColorInput, HexColorPicker } from "react-colorful"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
Alert,
|
||||
AlertDescription,
|
||||
AlertTitle,
|
||||
} from "@/registry/default/ui/alert"
|
||||
import { Badge } from "@/registry/default/ui/badge"
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import { Checkbox } from "@/registry/default/ui/checkbox"
|
||||
import { Input } from "@/registry/default/ui/input"
|
||||
import { Label } from "@/registry/default/ui/label"
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/registry/default/ui/popover"
|
||||
import { Progress } from "@/registry/default/ui/progress"
|
||||
import { RadioGroup, RadioGroupItem } from "@/registry/default/ui/radio-group"
|
||||
import { ScrollArea } from "@/registry/default/ui/scroll-area"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/registry/default/ui/select"
|
||||
import { Separator } from "@/registry/default/ui/separator"
|
||||
import { Slider } from "@/registry/default/ui/slider"
|
||||
import { Switch } from "@/registry/default/ui/switch"
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@/registry/default/ui/tabs"
|
||||
import { Textarea } from "@/registry/default/ui/textarea"
|
||||
|
||||
const DEFAULT_LIGHT_COLORS = {
|
||||
background: "#ffffff",
|
||||
foreground: "#0a0a0a",
|
||||
card: "#ffffff",
|
||||
"card-foreground": "#0a0a0a",
|
||||
popover: "#ffffff",
|
||||
"popover-foreground": "#0a0a0a",
|
||||
primary: "#0099ff",
|
||||
"primary-foreground": "#ffffff",
|
||||
secondary: "#f4f4f5",
|
||||
"secondary-foreground": "#0a0a0a",
|
||||
muted: "#f4f4f5",
|
||||
"muted-foreground": "#71717a",
|
||||
accent: "#f4f4f5",
|
||||
"accent-foreground": "#0a0a0a",
|
||||
destructive: "#ef4444",
|
||||
"destructive-foreground": "#ffffff",
|
||||
border: "#e4e4e7",
|
||||
input: "#e4e4e7",
|
||||
ring: "#0099ff",
|
||||
}
|
||||
|
||||
const DEFAULT_DARK_COLORS = {
|
||||
background: "#0a0a0a",
|
||||
foreground: "#fafafa",
|
||||
card: "#0a0a0a",
|
||||
"card-foreground": "#fafafa",
|
||||
popover: "#0a0a0a",
|
||||
"popover-foreground": "#fafafa",
|
||||
primary: "#0099ff",
|
||||
"primary-foreground": "#ffffff",
|
||||
secondary: "#262626",
|
||||
"secondary-foreground": "#fafafa",
|
||||
muted: "#262626",
|
||||
"muted-foreground": "#a3a3a3",
|
||||
accent: "#262626",
|
||||
"accent-foreground": "#fafafa",
|
||||
destructive: "#dc2626",
|
||||
"destructive-foreground": "#ffffff",
|
||||
border: "#262626",
|
||||
input: "#262626",
|
||||
ring: "#0099ff",
|
||||
}
|
||||
|
||||
const PRESET_THEMES = {
|
||||
"Electric Blue": {
|
||||
primary: "#0099ff",
|
||||
secondary: "#1e293b",
|
||||
accent: "#06b6d4",
|
||||
},
|
||||
Forest: {
|
||||
primary: "#10b981",
|
||||
secondary: "#065f46",
|
||||
accent: "#34d399",
|
||||
},
|
||||
Sunset: {
|
||||
primary: "#f97316",
|
||||
secondary: "#dc2626",
|
||||
accent: "#fbbf24",
|
||||
},
|
||||
"Purple Haze": {
|
||||
primary: "#8b5cf6",
|
||||
secondary: "#7c3aed",
|
||||
accent: "#a78bfa",
|
||||
},
|
||||
Ocean: {
|
||||
primary: "#0ea5e9",
|
||||
secondary: "#0284c7",
|
||||
accent: "#38bdf8",
|
||||
},
|
||||
}
|
||||
|
||||
export default function ThemeGeneratorPage() {
|
||||
const [colors, setColors] = React.useState(DEFAULT_LIGHT_COLORS)
|
||||
const [radius, setRadius] = React.useState(0.5)
|
||||
const [mode, setMode] = React.useState<"light" | "dark">("light")
|
||||
const [copied, setCopied] = React.useState(false)
|
||||
const [activeColorKey, setActiveColorKey] = React.useState<string | null>(
|
||||
null
|
||||
)
|
||||
|
||||
const updateColor = (key: string, value: string) => {
|
||||
setColors((prev) => ({ ...prev, [key]: value }))
|
||||
}
|
||||
|
||||
const toggleMode = () => {
|
||||
const newMode = mode === "light" ? "dark" : "light"
|
||||
setMode(newMode)
|
||||
setColors(newMode === "light" ? DEFAULT_LIGHT_COLORS : DEFAULT_DARK_COLORS)
|
||||
}
|
||||
|
||||
const hexToHSL = (hex: string) => {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
|
||||
if (!result) return "0 0% 0%"
|
||||
|
||||
const r = parseInt(result[1], 16) / 255
|
||||
const g = parseInt(result[2], 16) / 255
|
||||
const b = parseInt(result[3], 16) / 255
|
||||
|
||||
const max = Math.max(r, g, b)
|
||||
const min = Math.min(r, g, b)
|
||||
let h = 0,
|
||||
s = 0,
|
||||
l = (max + min) / 2
|
||||
|
||||
if (max !== min) {
|
||||
const d = max - min
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
|
||||
switch (max) {
|
||||
case r:
|
||||
h = ((g - b) / d + (g < b ? 6 : 0)) / 6
|
||||
break
|
||||
case g:
|
||||
h = ((b - r) / d + 2) / 6
|
||||
break
|
||||
case b:
|
||||
h = ((r - g) / d + 4) / 6
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`
|
||||
}
|
||||
|
||||
const generateCSS = () => {
|
||||
const css = `@layer base {
|
||||
:root {
|
||||
${Object.entries(colors)
|
||||
.map(([key, value]) => ` --${key}: ${hexToHSL(value)};`)
|
||||
.join("\n")}
|
||||
--radius: ${radius}rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
${Object.entries(colors)
|
||||
.map(([key, value]) => ` --${key}: ${hexToHSL(value)};`)
|
||||
.join("\n")}
|
||||
}
|
||||
}`
|
||||
return css
|
||||
}
|
||||
|
||||
const copyCSS = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(generateCSS())
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
toast.success("CSS copied to clipboard")
|
||||
} catch (err) {
|
||||
console.error("Failed to copy CSS:", err)
|
||||
toast.error("Failed to copy CSS", {
|
||||
description: "Please try again",
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const applyPresetTheme = (presetName: string) => {
|
||||
const preset = PRESET_THEMES[presetName as keyof typeof PRESET_THEMES]
|
||||
if (preset) {
|
||||
setColors((prev) => ({
|
||||
...prev,
|
||||
primary: preset.primary,
|
||||
"primary-foreground": mode === "dark" ? "#ffffff" : "#ffffff",
|
||||
secondary: preset.secondary,
|
||||
"secondary-foreground": mode === "dark" ? "#fafafa" : "#0a0a0a",
|
||||
accent: preset.accent,
|
||||
"accent-foreground": mode === "dark" ? "#fafafa" : "#0a0a0a",
|
||||
ring: preset.primary,
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
const randomizeTheme = () => {
|
||||
const randomHex = () => {
|
||||
const hue = Math.floor(Math.random() * 360)
|
||||
const saturation = 50 + Math.floor(Math.random() * 50)
|
||||
const lightness = 40 + Math.floor(Math.random() * 30)
|
||||
return hslToHex(hue, saturation, lightness)
|
||||
}
|
||||
|
||||
const primary = randomHex()
|
||||
const secondary = randomHex()
|
||||
const accent = randomHex()
|
||||
|
||||
setColors((prev) => ({
|
||||
...prev,
|
||||
primary,
|
||||
"primary-foreground": "#ffffff",
|
||||
secondary,
|
||||
"secondary-foreground": mode === "dark" ? "#fafafa" : "#0a0a0a",
|
||||
accent,
|
||||
"accent-foreground": mode === "dark" ? "#fafafa" : "#0a0a0a",
|
||||
ring: primary,
|
||||
}))
|
||||
}
|
||||
|
||||
const hslToHex = (h: number, s: number, l: number) => {
|
||||
l /= 100
|
||||
const a = (s * Math.min(l, 1 - l)) / 100
|
||||
const f = (n: number) => {
|
||||
const k = (n + h / 30) % 12
|
||||
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
|
||||
return Math.round(255 * color)
|
||||
.toString(16)
|
||||
.padStart(2, "0")
|
||||
}
|
||||
return `#${f(0)}${f(8)}${f(4)}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container max-w-[1600px] py-6">
|
||||
{/* Header */}
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight flex items-center gap-3">
|
||||
<Palette className="h-8 w-8 text-primary" />
|
||||
Theme Generator
|
||||
</h1>
|
||||
<p className="mt-2 text-lg text-muted-foreground">
|
||||
Create beautiful themes with live preview and instant export
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={toggleMode}
|
||||
className="relative"
|
||||
>
|
||||
{mode === "light" ? (
|
||||
<Moon className="h-5 w-5" />
|
||||
) : (
|
||||
<Sun className="h-5 w-5" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 lg:grid-cols-[420px_1fr]">
|
||||
{/* Enhanced Controls Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Preset Themes */}
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader className="bg-gradient-to-r from-primary/10 to-primary/5">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5" />
|
||||
Preset Themes
|
||||
</CardTitle>
|
||||
<CardDescription>Start with a pre-designed theme</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{Object.keys(PRESET_THEMES).map((presetName) => (
|
||||
<Button
|
||||
key={presetName}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => applyPresetTheme(presetName)}
|
||||
className="justify-start text-xs"
|
||||
>
|
||||
{presetName}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Color Customization */}
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Settings2 className="h-5 w-5" />
|
||||
Color Palette
|
||||
</CardTitle>
|
||||
<CardDescription>Fine-tune your color scheme</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<ScrollArea className="h-[400px] pr-4">
|
||||
<div className="space-y-3">
|
||||
{Object.entries(colors).map(([key, value]) => (
|
||||
<div key={key} className="space-y-1.5">
|
||||
<Label className="text-xs font-medium capitalize">
|
||||
{key.replace(/-/g, " ")}
|
||||
</Label>
|
||||
<Popover
|
||||
open={activeColorKey === key}
|
||||
onOpenChange={(open) =>
|
||||
setActiveColorKey(open ? key : null)
|
||||
}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full justify-between font-mono text-xs h-9"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="h-5 w-5 rounded-md border shadow-sm"
|
||||
style={{ backgroundColor: value }}
|
||||
/>
|
||||
<span>{value.toUpperCase()}</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground">
|
||||
HSL: {hexToHSL(value).split(" ").join(", ")}
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-3" align="start">
|
||||
<div className="space-y-3">
|
||||
<HexColorPicker
|
||||
color={value}
|
||||
onChange={(v) => updateColor(key, v)}
|
||||
style={{ width: 200, height: 200 }}
|
||||
/>
|
||||
<HexColorInput
|
||||
color={value}
|
||||
onChange={(v) => updateColor(key, v)}
|
||||
className="w-full rounded-md border px-3 py-1 text-sm font-mono"
|
||||
prefixed
|
||||
/>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Border Radius Control */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm">Border Radius</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
<Slider
|
||||
value={[radius]}
|
||||
onValueChange={(v) => setRadius(v[0])}
|
||||
min={0}
|
||||
max={1.5}
|
||||
step={0.05}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-muted-foreground">
|
||||
<span>Sharp</span>
|
||||
<span className="font-mono">{radius}rem</span>
|
||||
<span>Rounded</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button
|
||||
onClick={randomizeTheme}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
>
|
||||
<Shuffle className="mr-2 h-4 w-4" />
|
||||
Randomize
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() =>
|
||||
setColors(
|
||||
mode === "light" ? DEFAULT_LIGHT_COLORS : DEFAULT_DARK_COLORS
|
||||
)
|
||||
}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
>
|
||||
<RotateCcw className="mr-2 h-4 w-4" />
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Button onClick={copyCSS} className="w-full" size="lg">
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="mr-2 h-4 w-4" />
|
||||
Copied!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
Copy CSS Variables
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Preview Area */}
|
||||
<div className="space-y-6">
|
||||
<Tabs defaultValue="preview" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="preview">Live Preview</TabsTrigger>
|
||||
<TabsTrigger value="components">Components</TabsTrigger>
|
||||
<TabsTrigger value="code">Export Code</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="preview" className="mt-6">
|
||||
<div className="theme-preview-container" data-theme="custom">
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.theme-preview-container[data-theme="custom"] {
|
||||
--background: ${hexToHSL(colors.background)};
|
||||
--foreground: ${hexToHSL(colors.foreground)};
|
||||
--card: ${hexToHSL(colors.card)};
|
||||
--card-foreground: ${hexToHSL(colors["card-foreground"])};
|
||||
--popover: ${hexToHSL(colors.popover)};
|
||||
--popover-foreground: ${hexToHSL(colors["popover-foreground"])};
|
||||
--primary: ${hexToHSL(colors.primary)};
|
||||
--primary-foreground: ${hexToHSL(colors["primary-foreground"])};
|
||||
--secondary: ${hexToHSL(colors.secondary)};
|
||||
--secondary-foreground: ${hexToHSL(colors["secondary-foreground"])};
|
||||
--muted: ${hexToHSL(colors.muted)};
|
||||
--muted-foreground: ${hexToHSL(colors["muted-foreground"])};
|
||||
--accent: ${hexToHSL(colors.accent)};
|
||||
--accent-foreground: ${hexToHSL(colors["accent-foreground"])};
|
||||
--destructive: ${hexToHSL(colors.destructive)};
|
||||
--destructive-foreground: ${hexToHSL(colors["destructive-foreground"])};
|
||||
--border: ${hexToHSL(colors.border)};
|
||||
--input: ${hexToHSL(colors.input)};
|
||||
--ring: ${hexToHSL(colors.ring)};
|
||||
--radius: ${radius}rem;
|
||||
}
|
||||
.theme-preview-container[data-theme="custom"] * {
|
||||
border-radius: calc(var(--radius) * 1);
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="rounded-lg border bg-background p-8 shadow-sm"
|
||||
style={{
|
||||
backgroundColor: `hsl(var(--background))`,
|
||||
color: `hsl(var(--foreground))`,
|
||||
borderColor: `hsl(var(--border))`,
|
||||
}}
|
||||
>
|
||||
<div className="space-y-8">
|
||||
{/* Hero Section Preview */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-3xl font-bold">
|
||||
Welcome to Your App
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
This is how your theme looks in a real application
|
||||
context
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button size="lg">Get Started</Button>
|
||||
<Button size="lg" variant="secondary">
|
||||
Learn More
|
||||
</Button>
|
||||
<Button size="lg" variant="outline">
|
||||
Documentation
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Form Elements */}
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Form Elements</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
placeholder="name@example.com"
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="message">Message</Label>
|
||||
<Textarea
|
||||
id="message"
|
||||
placeholder="Type your message here..."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="terms" />
|
||||
<Label htmlFor="terms" className="text-sm">
|
||||
Accept terms and conditions
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Selections</h3>
|
||||
<div className="space-y-3">
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an option" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="option1">Option 1</SelectItem>
|
||||
<SelectItem value="option2">Option 2</SelectItem>
|
||||
<SelectItem value="option3">Option 3</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<RadioGroup defaultValue="option-one">
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
value="option-one"
|
||||
id="option-one"
|
||||
/>
|
||||
<Label htmlFor="option-one">Option One</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
value="option-two"
|
||||
id="option-two"
|
||||
/>
|
||||
<Label htmlFor="option-two">Option Two</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch id="notifications" />
|
||||
<Label htmlFor="notifications">
|
||||
Enable notifications
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cards */}
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Card Title</CardTitle>
|
||||
<CardDescription>
|
||||
Card description goes here
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
This is how cards appear with your custom theme. The
|
||||
borders, shadows, and colors all adapt to your
|
||||
selections.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Statistics</CardTitle>
|
||||
<CardDescription>
|
||||
Your performance metrics
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm">Progress</span>
|
||||
<span className="text-sm font-medium">75%</span>
|
||||
</div>
|
||||
<Progress value={75} className="h-2" />
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Badge>Active</Badge>
|
||||
<Badge variant="secondary">Updated</Badge>
|
||||
<Badge variant="outline">New</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Alert */}
|
||||
<Alert>
|
||||
<AlertTitle>Heads up!</AlertTitle>
|
||||
<AlertDescription>
|
||||
You can customize every aspect of your theme using the
|
||||
controls on the left. Changes are reflected in
|
||||
real-time.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="components" className="mt-6">
|
||||
<div
|
||||
className="theme-components-container"
|
||||
data-theme="custom-components"
|
||||
>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.theme-components-container[data-theme="custom-components"] {
|
||||
--background: ${hexToHSL(colors.background)};
|
||||
--foreground: ${hexToHSL(colors.foreground)};
|
||||
--card: ${hexToHSL(colors.card)};
|
||||
--card-foreground: ${hexToHSL(colors["card-foreground"])};
|
||||
--popover: ${hexToHSL(colors.popover)};
|
||||
--popover-foreground: ${hexToHSL(colors["popover-foreground"])};
|
||||
--primary: ${hexToHSL(colors.primary)};
|
||||
--primary-foreground: ${hexToHSL(colors["primary-foreground"])};
|
||||
--secondary: ${hexToHSL(colors.secondary)};
|
||||
--secondary-foreground: ${hexToHSL(colors["secondary-foreground"])};
|
||||
--muted: ${hexToHSL(colors.muted)};
|
||||
--muted-foreground: ${hexToHSL(colors["muted-foreground"])};
|
||||
--accent: ${hexToHSL(colors.accent)};
|
||||
--accent-foreground: ${hexToHSL(colors["accent-foreground"])};
|
||||
--destructive: ${hexToHSL(colors.destructive)};
|
||||
--destructive-foreground: ${hexToHSL(colors["destructive-foreground"])};
|
||||
--border: ${hexToHSL(colors.border)};
|
||||
--input: ${hexToHSL(colors.input)};
|
||||
--ring: ${hexToHSL(colors.ring)};
|
||||
--radius: ${radius}rem;
|
||||
}
|
||||
.theme-components-container[data-theme="custom-components"] * {
|
||||
border-radius: calc(var(--radius) * 1);
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="rounded-lg border bg-background p-8 space-y-8"
|
||||
style={{
|
||||
backgroundColor: `hsl(var(--background))`,
|
||||
color: `hsl(var(--foreground))`,
|
||||
borderColor: `hsl(var(--border))`,
|
||||
}}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
Button Variants
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button>Primary</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="outline">Outline</Button>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button variant="destructive">Destructive</Button>
|
||||
<Button variant="link">Link</Button>
|
||||
<Button size="sm">Small</Button>
|
||||
<Button size="lg">Large</Button>
|
||||
<Button disabled>Disabled</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
Badge Variants
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge>Default</Badge>
|
||||
<Badge variant="secondary">Secondary</Badge>
|
||||
<Badge variant="outline">Outline</Badge>
|
||||
<Badge variant="destructive">Destructive</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">Typography</h3>
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-4xl font-bold">Heading 1</h1>
|
||||
<h2 className="text-3xl font-bold">Heading 2</h2>
|
||||
<h3 className="text-2xl font-bold">Heading 3</h3>
|
||||
<h4 className="text-xl font-bold">Heading 4</h4>
|
||||
<p className="text-lg">Large paragraph text</p>
|
||||
<p>Regular paragraph text</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Muted text
|
||||
</p>
|
||||
<p className="text-xs">Small text</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="code" className="mt-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>CSS Variables</CardTitle>
|
||||
<CardDescription>
|
||||
Copy this code and paste it into your globals.css file
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="relative">
|
||||
<pre className="overflow-auto rounded-lg bg-muted p-6 text-sm">
|
||||
<code className="language-css">{generateCSS()}</code>
|
||||
</pre>
|
||||
<Button
|
||||
onClick={copyCSS}
|
||||
size="sm"
|
||||
className="absolute right-2 top-2"
|
||||
variant="ghost"
|
||||
>
|
||||
{copied ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-4 rounded-lg bg-muted/50 p-4">
|
||||
<p className="text-sm font-medium mb-2">
|
||||
Usage Instructions:
|
||||
</p>
|
||||
<ol className="text-sm text-muted-foreground space-y-1 list-decimal list-inside">
|
||||
<li>Copy the CSS variables above</li>
|
||||
<li>
|
||||
Open your project's global CSS file (usually globals.css
|
||||
or app.css)
|
||||
</li>
|
||||
<li>
|
||||
Replace the existing :root variables with your new theme
|
||||
</li>
|
||||
<li>Save the file and refresh your application</li>
|
||||
</ol>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,35 +1,797 @@
|
||||
"use client"
|
||||
|
||||
import dynamic from "next/dynamic"
|
||||
import * as React from "react"
|
||||
import {
|
||||
Check,
|
||||
Copy,
|
||||
Download,
|
||||
Monitor,
|
||||
Moon,
|
||||
Palette,
|
||||
RotateCcw,
|
||||
Settings2,
|
||||
Shuffle,
|
||||
Sparkles,
|
||||
Sun,
|
||||
} from "lucide-react"
|
||||
import { HexColorInput, HexColorPicker } from "react-colorful"
|
||||
|
||||
import { SkeletonCard } from "@/components/skeleton-card"
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
Alert,
|
||||
AlertDescription,
|
||||
AlertTitle,
|
||||
} from "@/registry/default/ui/alert"
|
||||
import { Badge } from "@/registry/default/ui/badge"
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import { Checkbox } from "@/registry/default/ui/checkbox"
|
||||
import { Input } from "@/registry/default/ui/input"
|
||||
import { Label } from "@/registry/default/ui/label"
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/registry/default/ui/popover"
|
||||
import { Progress } from "@/registry/default/ui/progress"
|
||||
import { RadioGroup, RadioGroupItem } from "@/registry/default/ui/radio-group"
|
||||
import { ScrollArea } from "@/registry/default/ui/scroll-area"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/registry/default/ui/select"
|
||||
import { Separator } from "@/registry/default/ui/separator"
|
||||
import { Slider } from "@/registry/default/ui/slider"
|
||||
import { Switch } from "@/registry/default/ui/switch"
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@/registry/default/ui/tabs"
|
||||
import { Textarea } from "@/registry/default/ui/textarea"
|
||||
|
||||
// Dynamically import the color picker library and theme generator
|
||||
const ThemeGeneratorClient = dynamic(
|
||||
() =>
|
||||
import("./theme-generator-client").then((mod) => mod.ThemeGeneratorClient),
|
||||
{
|
||||
loading: () => (
|
||||
<div className="container max-w-[1600px] py-6">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<div className="h-12 w-64 bg-muted animate-pulse rounded" />
|
||||
<div className="h-6 w-96 bg-muted animate-pulse rounded mt-2" />
|
||||
</div>
|
||||
<div className="grid gap-8 lg:grid-cols-[420px_1fr]">
|
||||
<div className="space-y-4">
|
||||
<SkeletonCard />
|
||||
<SkeletonCard />
|
||||
</div>
|
||||
<SkeletonCard className="h-[600px]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
ssr: false, // Color picker needs client-side rendering
|
||||
}
|
||||
)
|
||||
const DEFAULT_LIGHT_COLORS = {
|
||||
background: "#ffffff",
|
||||
foreground: "#0a0a0a",
|
||||
card: "#ffffff",
|
||||
"card-foreground": "#0a0a0a",
|
||||
popover: "#ffffff",
|
||||
"popover-foreground": "#0a0a0a",
|
||||
primary: "#0099ff",
|
||||
"primary-foreground": "#ffffff",
|
||||
secondary: "#f4f4f5",
|
||||
"secondary-foreground": "#0a0a0a",
|
||||
muted: "#f4f4f5",
|
||||
"muted-foreground": "#71717a",
|
||||
accent: "#f4f4f5",
|
||||
"accent-foreground": "#0a0a0a",
|
||||
destructive: "#ef4444",
|
||||
"destructive-foreground": "#ffffff",
|
||||
border: "#e4e4e7",
|
||||
input: "#e4e4e7",
|
||||
ring: "#0099ff",
|
||||
}
|
||||
|
||||
const DEFAULT_DARK_COLORS = {
|
||||
background: "#0a0a0a",
|
||||
foreground: "#fafafa",
|
||||
card: "#0a0a0a",
|
||||
"card-foreground": "#fafafa",
|
||||
popover: "#0a0a0a",
|
||||
"popover-foreground": "#fafafa",
|
||||
primary: "#0099ff",
|
||||
"primary-foreground": "#ffffff",
|
||||
secondary: "#262626",
|
||||
"secondary-foreground": "#fafafa",
|
||||
muted: "#262626",
|
||||
"muted-foreground": "#a3a3a3",
|
||||
accent: "#262626",
|
||||
"accent-foreground": "#fafafa",
|
||||
destructive: "#dc2626",
|
||||
"destructive-foreground": "#ffffff",
|
||||
border: "#262626",
|
||||
input: "#262626",
|
||||
ring: "#0099ff",
|
||||
}
|
||||
|
||||
const PRESET_THEMES = {
|
||||
"Electric Blue": {
|
||||
primary: "#0099ff",
|
||||
secondary: "#1e293b",
|
||||
accent: "#06b6d4",
|
||||
},
|
||||
Forest: {
|
||||
primary: "#10b981",
|
||||
secondary: "#065f46",
|
||||
accent: "#34d399",
|
||||
},
|
||||
Sunset: {
|
||||
primary: "#f97316",
|
||||
secondary: "#dc2626",
|
||||
accent: "#fbbf24",
|
||||
},
|
||||
"Purple Haze": {
|
||||
primary: "#8b5cf6",
|
||||
secondary: "#7c3aed",
|
||||
accent: "#a78bfa",
|
||||
},
|
||||
Ocean: {
|
||||
primary: "#0ea5e9",
|
||||
secondary: "#0284c7",
|
||||
accent: "#38bdf8",
|
||||
},
|
||||
}
|
||||
|
||||
export default function ThemeGeneratorPage() {
|
||||
return <ThemeGeneratorClient />
|
||||
const [colors, setColors] = React.useState(DEFAULT_LIGHT_COLORS)
|
||||
const [radius, setRadius] = React.useState(0.5)
|
||||
const [mode, setMode] = React.useState<"light" | "dark">("light")
|
||||
const [copied, setCopied] = React.useState(false)
|
||||
const [activeColorKey, setActiveColorKey] = React.useState<string | null>(
|
||||
null
|
||||
)
|
||||
|
||||
const updateColor = (key: string, value: string) => {
|
||||
setColors((prev) => ({ ...prev, [key]: value }))
|
||||
}
|
||||
|
||||
const toggleMode = () => {
|
||||
const newMode = mode === "light" ? "dark" : "light"
|
||||
setMode(newMode)
|
||||
setColors(newMode === "light" ? DEFAULT_LIGHT_COLORS : DEFAULT_DARK_COLORS)
|
||||
}
|
||||
|
||||
const hexToHSL = (hex: string) => {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
|
||||
if (!result) return "0 0% 0%"
|
||||
|
||||
const r = parseInt(result[1], 16) / 255
|
||||
const g = parseInt(result[2], 16) / 255
|
||||
const b = parseInt(result[3], 16) / 255
|
||||
|
||||
const max = Math.max(r, g, b)
|
||||
const min = Math.min(r, g, b)
|
||||
let h = 0,
|
||||
s = 0,
|
||||
l = (max + min) / 2
|
||||
|
||||
if (max !== min) {
|
||||
const d = max - min
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
|
||||
switch (max) {
|
||||
case r:
|
||||
h = ((g - b) / d + (g < b ? 6 : 0)) / 6
|
||||
break
|
||||
case g:
|
||||
h = ((b - r) / d + 2) / 6
|
||||
break
|
||||
case b:
|
||||
h = ((r - g) / d + 4) / 6
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`
|
||||
}
|
||||
|
||||
const generateCSS = () => {
|
||||
const css = `@layer base {
|
||||
:root {
|
||||
${Object.entries(colors)
|
||||
.map(([key, value]) => ` --${key}: ${hexToHSL(value)};`)
|
||||
.join("\n")}
|
||||
--radius: ${radius}rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
${Object.entries(colors)
|
||||
.map(([key, value]) => ` --${key}: ${hexToHSL(value)};`)
|
||||
.join("\n")}
|
||||
}
|
||||
}`
|
||||
return css
|
||||
}
|
||||
|
||||
const copyCSS = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(generateCSS())
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
} catch (err) {
|
||||
console.error("Failed to copy CSS:", err)
|
||||
}
|
||||
}
|
||||
|
||||
const applyPresetTheme = (presetName: string) => {
|
||||
const preset = PRESET_THEMES[presetName as keyof typeof PRESET_THEMES]
|
||||
if (preset) {
|
||||
setColors((prev) => ({
|
||||
...prev,
|
||||
primary: preset.primary,
|
||||
"primary-foreground": mode === "dark" ? "#ffffff" : "#ffffff",
|
||||
secondary: preset.secondary,
|
||||
"secondary-foreground": mode === "dark" ? "#fafafa" : "#0a0a0a",
|
||||
accent: preset.accent,
|
||||
"accent-foreground": mode === "dark" ? "#fafafa" : "#0a0a0a",
|
||||
ring: preset.primary,
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
const randomizeTheme = () => {
|
||||
const randomHex = () => {
|
||||
const hue = Math.floor(Math.random() * 360)
|
||||
const saturation = 50 + Math.floor(Math.random() * 50)
|
||||
const lightness = 40 + Math.floor(Math.random() * 30)
|
||||
return hslToHex(hue, saturation, lightness)
|
||||
}
|
||||
|
||||
const primary = randomHex()
|
||||
const secondary = randomHex()
|
||||
const accent = randomHex()
|
||||
|
||||
setColors((prev) => ({
|
||||
...prev,
|
||||
primary,
|
||||
"primary-foreground": "#ffffff",
|
||||
secondary,
|
||||
"secondary-foreground": mode === "dark" ? "#fafafa" : "#0a0a0a",
|
||||
accent,
|
||||
"accent-foreground": mode === "dark" ? "#fafafa" : "#0a0a0a",
|
||||
ring: primary,
|
||||
}))
|
||||
}
|
||||
|
||||
const hslToHex = (h: number, s: number, l: number) => {
|
||||
l /= 100
|
||||
const a = (s * Math.min(l, 1 - l)) / 100
|
||||
const f = (n: number) => {
|
||||
const k = (n + h / 30) % 12
|
||||
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
|
||||
return Math.round(255 * color)
|
||||
.toString(16)
|
||||
.padStart(2, "0")
|
||||
}
|
||||
return `#${f(0)}${f(8)}${f(4)}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container max-w-[1600px] py-6">
|
||||
{/* Header */}
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight flex items-center gap-3">
|
||||
<Palette className="h-8 w-8 text-primary" />
|
||||
Theme Generator
|
||||
</h1>
|
||||
<p className="mt-2 text-lg text-muted-foreground">
|
||||
Create beautiful themes with live preview and instant export
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={toggleMode}
|
||||
className="relative"
|
||||
>
|
||||
{mode === "light" ? (
|
||||
<Moon className="h-5 w-5" />
|
||||
) : (
|
||||
<Sun className="h-5 w-5" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 lg:grid-cols-[420px_1fr]">
|
||||
{/* Enhanced Controls Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Preset Themes */}
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader className="bg-gradient-to-r from-primary/10 to-primary/5">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5" />
|
||||
Preset Themes
|
||||
</CardTitle>
|
||||
<CardDescription>Start with a pre-designed theme</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{Object.keys(PRESET_THEMES).map((presetName) => (
|
||||
<Button
|
||||
key={presetName}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => applyPresetTheme(presetName)}
|
||||
className="justify-start text-xs"
|
||||
>
|
||||
{presetName}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Color Customization */}
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Settings2 className="h-5 w-5" />
|
||||
Color Palette
|
||||
</CardTitle>
|
||||
<CardDescription>Fine-tune your color scheme</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<ScrollArea className="h-[400px] pr-4">
|
||||
<div className="space-y-3">
|
||||
{Object.entries(colors).map(([key, value]) => (
|
||||
<div key={key} className="space-y-1.5">
|
||||
<Label className="text-xs font-medium capitalize">
|
||||
{key.replace(/-/g, " ")}
|
||||
</Label>
|
||||
<Popover
|
||||
open={activeColorKey === key}
|
||||
onOpenChange={(open) =>
|
||||
setActiveColorKey(open ? key : null)
|
||||
}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full justify-between font-mono text-xs h-9"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="h-5 w-5 rounded-md border shadow-sm"
|
||||
style={{ backgroundColor: value }}
|
||||
/>
|
||||
<span>{value.toUpperCase()}</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground">
|
||||
HSL: {hexToHSL(value).split(" ").join(", ")}
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-3" align="start">
|
||||
<div className="space-y-3">
|
||||
<HexColorPicker
|
||||
color={value}
|
||||
onChange={(v) => updateColor(key, v)}
|
||||
style={{ width: 200, height: 200 }}
|
||||
/>
|
||||
<HexColorInput
|
||||
color={value}
|
||||
onChange={(v) => updateColor(key, v)}
|
||||
className="w-full rounded-md border px-3 py-1 text-sm font-mono"
|
||||
prefixed
|
||||
/>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Border Radius Control */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm">Border Radius</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
<Slider
|
||||
value={[radius]}
|
||||
onValueChange={(v) => setRadius(v[0])}
|
||||
min={0}
|
||||
max={1.5}
|
||||
step={0.05}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-muted-foreground">
|
||||
<span>Sharp</span>
|
||||
<span className="font-mono">{radius}rem</span>
|
||||
<span>Rounded</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button
|
||||
onClick={randomizeTheme}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
>
|
||||
<Shuffle className="mr-2 h-4 w-4" />
|
||||
Randomize
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() =>
|
||||
setColors(
|
||||
mode === "light" ? DEFAULT_LIGHT_COLORS : DEFAULT_DARK_COLORS
|
||||
)
|
||||
}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
>
|
||||
<RotateCcw className="mr-2 h-4 w-4" />
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Button onClick={copyCSS} className="w-full" size="lg">
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="mr-2 h-4 w-4" />
|
||||
Copied!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
Copy CSS Variables
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Preview Area */}
|
||||
<div className="space-y-6">
|
||||
<Tabs defaultValue="preview" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="preview">Live Preview</TabsTrigger>
|
||||
<TabsTrigger value="components">Components</TabsTrigger>
|
||||
<TabsTrigger value="code">Export Code</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="preview" className="mt-6">
|
||||
<div className="theme-preview-container" data-theme="custom">
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.theme-preview-container[data-theme="custom"] {
|
||||
--background: ${hexToHSL(colors.background)};
|
||||
--foreground: ${hexToHSL(colors.foreground)};
|
||||
--card: ${hexToHSL(colors.card)};
|
||||
--card-foreground: ${hexToHSL(colors["card-foreground"])};
|
||||
--popover: ${hexToHSL(colors.popover)};
|
||||
--popover-foreground: ${hexToHSL(colors["popover-foreground"])};
|
||||
--primary: ${hexToHSL(colors.primary)};
|
||||
--primary-foreground: ${hexToHSL(colors["primary-foreground"])};
|
||||
--secondary: ${hexToHSL(colors.secondary)};
|
||||
--secondary-foreground: ${hexToHSL(colors["secondary-foreground"])};
|
||||
--muted: ${hexToHSL(colors.muted)};
|
||||
--muted-foreground: ${hexToHSL(colors["muted-foreground"])};
|
||||
--accent: ${hexToHSL(colors.accent)};
|
||||
--accent-foreground: ${hexToHSL(colors["accent-foreground"])};
|
||||
--destructive: ${hexToHSL(colors.destructive)};
|
||||
--destructive-foreground: ${hexToHSL(colors["destructive-foreground"])};
|
||||
--border: ${hexToHSL(colors.border)};
|
||||
--input: ${hexToHSL(colors.input)};
|
||||
--ring: ${hexToHSL(colors.ring)};
|
||||
--radius: ${radius}rem;
|
||||
}
|
||||
.theme-preview-container[data-theme="custom"] * {
|
||||
border-radius: calc(var(--radius) * 1);
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="rounded-lg border bg-background p-8 shadow-sm"
|
||||
style={{
|
||||
backgroundColor: `hsl(var(--background))`,
|
||||
color: `hsl(var(--foreground))`,
|
||||
borderColor: `hsl(var(--border))`,
|
||||
}}
|
||||
>
|
||||
<div className="space-y-8">
|
||||
{/* Hero Section Preview */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-3xl font-bold">
|
||||
Welcome to Your App
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
This is how your theme looks in a real application
|
||||
context
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button size="lg">Get Started</Button>
|
||||
<Button size="lg" variant="secondary">
|
||||
Learn More
|
||||
</Button>
|
||||
<Button size="lg" variant="outline">
|
||||
Documentation
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Form Elements */}
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Form Elements</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
placeholder="name@example.com"
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="message">Message</Label>
|
||||
<Textarea
|
||||
id="message"
|
||||
placeholder="Type your message here..."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="terms" />
|
||||
<Label htmlFor="terms" className="text-sm">
|
||||
Accept terms and conditions
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Selections</h3>
|
||||
<div className="space-y-3">
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an option" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="option1">Option 1</SelectItem>
|
||||
<SelectItem value="option2">Option 2</SelectItem>
|
||||
<SelectItem value="option3">Option 3</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<RadioGroup defaultValue="option-one">
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
value="option-one"
|
||||
id="option-one"
|
||||
/>
|
||||
<Label htmlFor="option-one">Option One</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
value="option-two"
|
||||
id="option-two"
|
||||
/>
|
||||
<Label htmlFor="option-two">Option Two</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch id="notifications" />
|
||||
<Label htmlFor="notifications">
|
||||
Enable notifications
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cards */}
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Card Title</CardTitle>
|
||||
<CardDescription>
|
||||
Card description goes here
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
This is how cards appear with your custom theme. The
|
||||
borders, shadows, and colors all adapt to your
|
||||
selections.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Statistics</CardTitle>
|
||||
<CardDescription>
|
||||
Your performance metrics
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm">Progress</span>
|
||||
<span className="text-sm font-medium">75%</span>
|
||||
</div>
|
||||
<Progress value={75} className="h-2" />
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Badge>Active</Badge>
|
||||
<Badge variant="secondary">Updated</Badge>
|
||||
<Badge variant="outline">New</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Alert */}
|
||||
<Alert>
|
||||
<AlertTitle>Heads up!</AlertTitle>
|
||||
<AlertDescription>
|
||||
You can customize every aspect of your theme using the
|
||||
controls on the left. Changes are reflected in
|
||||
real-time.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="components" className="mt-6">
|
||||
<div
|
||||
className="theme-components-container"
|
||||
data-theme="custom-components"
|
||||
>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.theme-components-container[data-theme="custom-components"] {
|
||||
--background: ${hexToHSL(colors.background)};
|
||||
--foreground: ${hexToHSL(colors.foreground)};
|
||||
--card: ${hexToHSL(colors.card)};
|
||||
--card-foreground: ${hexToHSL(colors["card-foreground"])};
|
||||
--popover: ${hexToHSL(colors.popover)};
|
||||
--popover-foreground: ${hexToHSL(colors["popover-foreground"])};
|
||||
--primary: ${hexToHSL(colors.primary)};
|
||||
--primary-foreground: ${hexToHSL(colors["primary-foreground"])};
|
||||
--secondary: ${hexToHSL(colors.secondary)};
|
||||
--secondary-foreground: ${hexToHSL(colors["secondary-foreground"])};
|
||||
--muted: ${hexToHSL(colors.muted)};
|
||||
--muted-foreground: ${hexToHSL(colors["muted-foreground"])};
|
||||
--accent: ${hexToHSL(colors.accent)};
|
||||
--accent-foreground: ${hexToHSL(colors["accent-foreground"])};
|
||||
--destructive: ${hexToHSL(colors.destructive)};
|
||||
--destructive-foreground: ${hexToHSL(colors["destructive-foreground"])};
|
||||
--border: ${hexToHSL(colors.border)};
|
||||
--input: ${hexToHSL(colors.input)};
|
||||
--ring: ${hexToHSL(colors.ring)};
|
||||
--radius: ${radius}rem;
|
||||
}
|
||||
.theme-components-container[data-theme="custom-components"] * {
|
||||
border-radius: calc(var(--radius) * 1);
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="rounded-lg border bg-background p-8 space-y-8"
|
||||
style={{
|
||||
backgroundColor: `hsl(var(--background))`,
|
||||
color: `hsl(var(--foreground))`,
|
||||
borderColor: `hsl(var(--border))`,
|
||||
}}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
Button Variants
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button>Primary</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="outline">Outline</Button>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button variant="destructive">Destructive</Button>
|
||||
<Button variant="link">Link</Button>
|
||||
<Button size="sm">Small</Button>
|
||||
<Button size="lg">Large</Button>
|
||||
<Button disabled>Disabled</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
Badge Variants
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge>Default</Badge>
|
||||
<Badge variant="secondary">Secondary</Badge>
|
||||
<Badge variant="outline">Outline</Badge>
|
||||
<Badge variant="destructive">Destructive</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">Typography</h3>
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-4xl font-bold">Heading 1</h1>
|
||||
<h2 className="text-3xl font-bold">Heading 2</h2>
|
||||
<h3 className="text-2xl font-bold">Heading 3</h3>
|
||||
<h4 className="text-xl font-bold">Heading 4</h4>
|
||||
<p className="text-lg">Large paragraph text</p>
|
||||
<p>Regular paragraph text</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Muted text
|
||||
</p>
|
||||
<p className="text-xs">Small text</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="code" className="mt-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>CSS Variables</CardTitle>
|
||||
<CardDescription>
|
||||
Copy this code and paste it into your globals.css file
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="relative">
|
||||
<pre className="overflow-auto rounded-lg bg-muted p-6 text-sm">
|
||||
<code className="language-css">{generateCSS()}</code>
|
||||
</pre>
|
||||
<Button
|
||||
onClick={copyCSS}
|
||||
size="sm"
|
||||
className="absolute right-2 top-2"
|
||||
variant="ghost"
|
||||
>
|
||||
{copied ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-4 rounded-lg bg-muted/50 p-4">
|
||||
<p className="text-sm font-medium mb-2">
|
||||
Usage Instructions:
|
||||
</p>
|
||||
<ol className="text-sm text-muted-foreground space-y-1 list-decimal list-inside">
|
||||
<li>Copy the CSS variables above</li>
|
||||
<li>
|
||||
Open your project's global CSS file (usually globals.css
|
||||
or app.css)
|
||||
</li>
|
||||
<li>
|
||||
Replace the existing :root variables with your new theme
|
||||
</li>
|
||||
<li>Save the file and refresh your application</li>
|
||||
</ol>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,797 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import {
|
||||
Check,
|
||||
Copy,
|
||||
Download,
|
||||
Monitor,
|
||||
Moon,
|
||||
Palette,
|
||||
RotateCcw,
|
||||
Settings2,
|
||||
Shuffle,
|
||||
Sparkles,
|
||||
Sun,
|
||||
} from "lucide-react"
|
||||
import { HexColorInput, HexColorPicker } from "react-colorful"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
Alert,
|
||||
AlertDescription,
|
||||
AlertTitle,
|
||||
} from "@/registry/default/ui/alert"
|
||||
import { Badge } from "@/registry/default/ui/badge"
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/registry/default/ui/card"
|
||||
import { Checkbox } from "@/registry/default/ui/checkbox"
|
||||
import { Input } from "@/registry/default/ui/input"
|
||||
import { Label } from "@/registry/default/ui/label"
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/registry/default/ui/popover"
|
||||
import { Progress } from "@/registry/default/ui/progress"
|
||||
import { RadioGroup, RadioGroupItem } from "@/registry/default/ui/radio-group"
|
||||
import { ScrollArea } from "@/registry/default/ui/scroll-area"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/registry/default/ui/select"
|
||||
import { Separator } from "@/registry/default/ui/separator"
|
||||
import { Slider } from "@/registry/default/ui/slider"
|
||||
import { Switch } from "@/registry/default/ui/switch"
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@/registry/default/ui/tabs"
|
||||
import { Textarea } from "@/registry/default/ui/textarea"
|
||||
|
||||
const DEFAULT_LIGHT_COLORS = {
|
||||
background: "#ffffff",
|
||||
foreground: "#0a0a0a",
|
||||
card: "#ffffff",
|
||||
"card-foreground": "#0a0a0a",
|
||||
popover: "#ffffff",
|
||||
"popover-foreground": "#0a0a0a",
|
||||
primary: "#0099ff",
|
||||
"primary-foreground": "#ffffff",
|
||||
secondary: "#f4f4f5",
|
||||
"secondary-foreground": "#0a0a0a",
|
||||
muted: "#f4f4f5",
|
||||
"muted-foreground": "#71717a",
|
||||
accent: "#f4f4f5",
|
||||
"accent-foreground": "#0a0a0a",
|
||||
destructive: "#ef4444",
|
||||
"destructive-foreground": "#ffffff",
|
||||
border: "#e4e4e7",
|
||||
input: "#e4e4e7",
|
||||
ring: "#0099ff",
|
||||
}
|
||||
|
||||
const DEFAULT_DARK_COLORS = {
|
||||
background: "#0a0a0a",
|
||||
foreground: "#fafafa",
|
||||
card: "#0a0a0a",
|
||||
"card-foreground": "#fafafa",
|
||||
popover: "#0a0a0a",
|
||||
"popover-foreground": "#fafafa",
|
||||
primary: "#0099ff",
|
||||
"primary-foreground": "#ffffff",
|
||||
secondary: "#262626",
|
||||
"secondary-foreground": "#fafafa",
|
||||
muted: "#262626",
|
||||
"muted-foreground": "#a3a3a3",
|
||||
accent: "#262626",
|
||||
"accent-foreground": "#fafafa",
|
||||
destructive: "#dc2626",
|
||||
"destructive-foreground": "#ffffff",
|
||||
border: "#262626",
|
||||
input: "#262626",
|
||||
ring: "#0099ff",
|
||||
}
|
||||
|
||||
const PRESET_THEMES = {
|
||||
"Electric Blue": {
|
||||
primary: "#0099ff",
|
||||
secondary: "#1e293b",
|
||||
accent: "#06b6d4",
|
||||
},
|
||||
Forest: {
|
||||
primary: "#10b981",
|
||||
secondary: "#065f46",
|
||||
accent: "#34d399",
|
||||
},
|
||||
Sunset: {
|
||||
primary: "#f97316",
|
||||
secondary: "#dc2626",
|
||||
accent: "#fbbf24",
|
||||
},
|
||||
"Purple Haze": {
|
||||
primary: "#8b5cf6",
|
||||
secondary: "#7c3aed",
|
||||
accent: "#a78bfa",
|
||||
},
|
||||
Ocean: {
|
||||
primary: "#0ea5e9",
|
||||
secondary: "#0284c7",
|
||||
accent: "#38bdf8",
|
||||
},
|
||||
}
|
||||
|
||||
export function ThemeGeneratorClient() {
|
||||
const [colors, setColors] = React.useState(DEFAULT_LIGHT_COLORS)
|
||||
const [radius, setRadius] = React.useState(0.5)
|
||||
const [mode, setMode] = React.useState<"light" | "dark">("light")
|
||||
const [copied, setCopied] = React.useState(false)
|
||||
const [activeColorKey, setActiveColorKey] = React.useState<string | null>(
|
||||
null
|
||||
)
|
||||
|
||||
const updateColor = (key: string, value: string) => {
|
||||
setColors((prev) => ({ ...prev, [key]: value }))
|
||||
}
|
||||
|
||||
const toggleMode = () => {
|
||||
const newMode = mode === "light" ? "dark" : "light"
|
||||
setMode(newMode)
|
||||
setColors(newMode === "light" ? DEFAULT_LIGHT_COLORS : DEFAULT_DARK_COLORS)
|
||||
}
|
||||
|
||||
const hexToHSL = (hex: string) => {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
|
||||
if (!result) return "0 0% 0%"
|
||||
|
||||
const r = parseInt(result[1], 16) / 255
|
||||
const g = parseInt(result[2], 16) / 255
|
||||
const b = parseInt(result[3], 16) / 255
|
||||
|
||||
const max = Math.max(r, g, b)
|
||||
const min = Math.min(r, g, b)
|
||||
let h = 0,
|
||||
s = 0,
|
||||
l = (max + min) / 2
|
||||
|
||||
if (max !== min) {
|
||||
const d = max - min
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
|
||||
switch (max) {
|
||||
case r:
|
||||
h = ((g - b) / d + (g < b ? 6 : 0)) / 6
|
||||
break
|
||||
case g:
|
||||
h = ((b - r) / d + 2) / 6
|
||||
break
|
||||
case b:
|
||||
h = ((r - g) / d + 4) / 6
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`
|
||||
}
|
||||
|
||||
const generateCSS = () => {
|
||||
const css = `@layer base {
|
||||
:root {
|
||||
${Object.entries(colors)
|
||||
.map(([key, value]) => ` --${key}: ${hexToHSL(value)};`)
|
||||
.join("\n")}
|
||||
--radius: ${radius}rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
${Object.entries(colors)
|
||||
.map(([key, value]) => ` --${key}: ${hexToHSL(value)};`)
|
||||
.join("\n")}
|
||||
}
|
||||
}`
|
||||
return css
|
||||
}
|
||||
|
||||
const copyCSS = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(generateCSS())
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
} catch (err) {
|
||||
console.error("Failed to copy CSS:", err)
|
||||
}
|
||||
}
|
||||
|
||||
const applyPresetTheme = (presetName: string) => {
|
||||
const preset = PRESET_THEMES[presetName as keyof typeof PRESET_THEMES]
|
||||
if (preset) {
|
||||
setColors((prev) => ({
|
||||
...prev,
|
||||
primary: preset.primary,
|
||||
"primary-foreground": mode === "dark" ? "#ffffff" : "#ffffff",
|
||||
secondary: preset.secondary,
|
||||
"secondary-foreground": mode === "dark" ? "#fafafa" : "#0a0a0a",
|
||||
accent: preset.accent,
|
||||
"accent-foreground": mode === "dark" ? "#fafafa" : "#0a0a0a",
|
||||
ring: preset.primary,
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
const randomizeTheme = () => {
|
||||
const randomHex = () => {
|
||||
const hue = Math.floor(Math.random() * 360)
|
||||
const saturation = 50 + Math.floor(Math.random() * 50)
|
||||
const lightness = 40 + Math.floor(Math.random() * 30)
|
||||
return hslToHex(hue, saturation, lightness)
|
||||
}
|
||||
|
||||
const primary = randomHex()
|
||||
const secondary = randomHex()
|
||||
const accent = randomHex()
|
||||
|
||||
setColors((prev) => ({
|
||||
...prev,
|
||||
primary,
|
||||
"primary-foreground": "#ffffff",
|
||||
secondary,
|
||||
"secondary-foreground": mode === "dark" ? "#fafafa" : "#0a0a0a",
|
||||
accent,
|
||||
"accent-foreground": mode === "dark" ? "#fafafa" : "#0a0a0a",
|
||||
ring: primary,
|
||||
}))
|
||||
}
|
||||
|
||||
const hslToHex = (h: number, s: number, l: number) => {
|
||||
l /= 100
|
||||
const a = (s * Math.min(l, 1 - l)) / 100
|
||||
const f = (n: number) => {
|
||||
const k = (n + h / 30) % 12
|
||||
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
|
||||
return Math.round(255 * color)
|
||||
.toString(16)
|
||||
.padStart(2, "0")
|
||||
}
|
||||
return `#${f(0)}${f(8)}${f(4)}`
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container max-w-[1600px] py-6">
|
||||
{/* Header */}
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight flex items-center gap-3">
|
||||
<Palette className="h-8 w-8 text-primary" />
|
||||
Theme Generator
|
||||
</h1>
|
||||
<p className="mt-2 text-lg text-muted-foreground">
|
||||
Create beautiful themes with live preview and instant export
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={toggleMode}
|
||||
className="relative"
|
||||
>
|
||||
{mode === "light" ? (
|
||||
<Moon className="h-5 w-5" />
|
||||
) : (
|
||||
<Sun className="h-5 w-5" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 lg:grid-cols-[420px_1fr]">
|
||||
{/* Enhanced Controls Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Preset Themes */}
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader className="bg-gradient-to-r from-primary/10 to-primary/5">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5" />
|
||||
Preset Themes
|
||||
</CardTitle>
|
||||
<CardDescription>Start with a pre-designed theme</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{Object.keys(PRESET_THEMES).map((presetName) => (
|
||||
<Button
|
||||
key={presetName}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => applyPresetTheme(presetName)}
|
||||
className="justify-start text-xs"
|
||||
>
|
||||
{presetName}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Color Customization */}
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Settings2 className="h-5 w-5" />
|
||||
Color Palette
|
||||
</CardTitle>
|
||||
<CardDescription>Fine-tune your color scheme</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<ScrollArea className="h-[400px] pr-4">
|
||||
<div className="space-y-3">
|
||||
{Object.entries(colors).map(([key, value]) => (
|
||||
<div key={key} className="space-y-1.5">
|
||||
<Label className="text-xs font-medium capitalize">
|
||||
{key.replace(/-/g, " ")}
|
||||
</Label>
|
||||
<Popover
|
||||
open={activeColorKey === key}
|
||||
onOpenChange={(open) =>
|
||||
setActiveColorKey(open ? key : null)
|
||||
}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full justify-between font-mono text-xs h-9"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="h-5 w-5 rounded-md border shadow-sm"
|
||||
style={{ backgroundColor: value }}
|
||||
/>
|
||||
<span>{value.toUpperCase()}</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground">
|
||||
HSL: {hexToHSL(value).split(" ").join(", ")}
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-3" align="start">
|
||||
<div className="space-y-3">
|
||||
<HexColorPicker
|
||||
color={value}
|
||||
onChange={(v) => updateColor(key, v)}
|
||||
style={{ width: 200, height: 200 }}
|
||||
/>
|
||||
<HexColorInput
|
||||
color={value}
|
||||
onChange={(v) => updateColor(key, v)}
|
||||
className="w-full rounded-md border px-3 py-1 text-sm font-mono"
|
||||
prefixed
|
||||
/>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Border Radius Control */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm">Border Radius</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
<Slider
|
||||
value={[radius]}
|
||||
onValueChange={(v) => setRadius(v[0])}
|
||||
min={0}
|
||||
max={1.5}
|
||||
step={0.05}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-muted-foreground">
|
||||
<span>Sharp</span>
|
||||
<span className="font-mono">{radius}rem</span>
|
||||
<span>Rounded</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button
|
||||
onClick={randomizeTheme}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
>
|
||||
<Shuffle className="mr-2 h-4 w-4" />
|
||||
Randomize
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() =>
|
||||
setColors(
|
||||
mode === "light" ? DEFAULT_LIGHT_COLORS : DEFAULT_DARK_COLORS
|
||||
)
|
||||
}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full"
|
||||
>
|
||||
<RotateCcw className="mr-2 h-4 w-4" />
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Button onClick={copyCSS} className="w-full" size="lg">
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="mr-2 h-4 w-4" />
|
||||
Copied!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="mr-2 h-4 w-4" />
|
||||
Copy CSS Variables
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Preview Area */}
|
||||
<div className="space-y-6">
|
||||
<Tabs defaultValue="preview" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="preview">Live Preview</TabsTrigger>
|
||||
<TabsTrigger value="components">Components</TabsTrigger>
|
||||
<TabsTrigger value="code">Export Code</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="preview" className="mt-6">
|
||||
<div className="theme-preview-container" data-theme="custom">
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.theme-preview-container[data-theme="custom"] {
|
||||
--background: ${hexToHSL(colors.background)};
|
||||
--foreground: ${hexToHSL(colors.foreground)};
|
||||
--card: ${hexToHSL(colors.card)};
|
||||
--card-foreground: ${hexToHSL(colors["card-foreground"])};
|
||||
--popover: ${hexToHSL(colors.popover)};
|
||||
--popover-foreground: ${hexToHSL(colors["popover-foreground"])};
|
||||
--primary: ${hexToHSL(colors.primary)};
|
||||
--primary-foreground: ${hexToHSL(colors["primary-foreground"])};
|
||||
--secondary: ${hexToHSL(colors.secondary)};
|
||||
--secondary-foreground: ${hexToHSL(colors["secondary-foreground"])};
|
||||
--muted: ${hexToHSL(colors.muted)};
|
||||
--muted-foreground: ${hexToHSL(colors["muted-foreground"])};
|
||||
--accent: ${hexToHSL(colors.accent)};
|
||||
--accent-foreground: ${hexToHSL(colors["accent-foreground"])};
|
||||
--destructive: ${hexToHSL(colors.destructive)};
|
||||
--destructive-foreground: ${hexToHSL(colors["destructive-foreground"])};
|
||||
--border: ${hexToHSL(colors.border)};
|
||||
--input: ${hexToHSL(colors.input)};
|
||||
--ring: ${hexToHSL(colors.ring)};
|
||||
--radius: ${radius}rem;
|
||||
}
|
||||
.theme-preview-container[data-theme="custom"] * {
|
||||
border-radius: calc(var(--radius) * 1);
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="rounded-lg border bg-background p-8 shadow-sm"
|
||||
style={{
|
||||
backgroundColor: `hsl(var(--background))`,
|
||||
color: `hsl(var(--foreground))`,
|
||||
borderColor: `hsl(var(--border))`,
|
||||
}}
|
||||
>
|
||||
<div className="space-y-8">
|
||||
{/* Hero Section Preview */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-3xl font-bold">
|
||||
Welcome to Your App
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
This is how your theme looks in a real application
|
||||
context
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button size="lg">Get Started</Button>
|
||||
<Button size="lg" variant="secondary">
|
||||
Learn More
|
||||
</Button>
|
||||
<Button size="lg" variant="outline">
|
||||
Documentation
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Form Elements */}
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Form Elements</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
placeholder="name@example.com"
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="message">Message</Label>
|
||||
<Textarea
|
||||
id="message"
|
||||
placeholder="Type your message here..."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="terms" />
|
||||
<Label htmlFor="terms" className="text-sm">
|
||||
Accept terms and conditions
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">Selections</h3>
|
||||
<div className="space-y-3">
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an option" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="option1">Option 1</SelectItem>
|
||||
<SelectItem value="option2">Option 2</SelectItem>
|
||||
<SelectItem value="option3">Option 3</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<RadioGroup defaultValue="option-one">
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
value="option-one"
|
||||
id="option-one"
|
||||
/>
|
||||
<Label htmlFor="option-one">Option One</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
value="option-two"
|
||||
id="option-two"
|
||||
/>
|
||||
<Label htmlFor="option-two">Option Two</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch id="notifications" />
|
||||
<Label htmlFor="notifications">
|
||||
Enable notifications
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cards */}
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Card Title</CardTitle>
|
||||
<CardDescription>
|
||||
Card description goes here
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
This is how cards appear with your custom theme. The
|
||||
borders, shadows, and colors all adapt to your
|
||||
selections.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Statistics</CardTitle>
|
||||
<CardDescription>
|
||||
Your performance metrics
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm">Progress</span>
|
||||
<span className="text-sm font-medium">75%</span>
|
||||
</div>
|
||||
<Progress value={75} className="h-2" />
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Badge>Active</Badge>
|
||||
<Badge variant="secondary">Updated</Badge>
|
||||
<Badge variant="outline">New</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Alert */}
|
||||
<Alert>
|
||||
<AlertTitle>Heads up!</AlertTitle>
|
||||
<AlertDescription>
|
||||
You can customize every aspect of your theme using the
|
||||
controls on the left. Changes are reflected in
|
||||
real-time.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="components" className="mt-6">
|
||||
<div
|
||||
className="theme-components-container"
|
||||
data-theme="custom-components"
|
||||
>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.theme-components-container[data-theme="custom-components"] {
|
||||
--background: ${hexToHSL(colors.background)};
|
||||
--foreground: ${hexToHSL(colors.foreground)};
|
||||
--card: ${hexToHSL(colors.card)};
|
||||
--card-foreground: ${hexToHSL(colors["card-foreground"])};
|
||||
--popover: ${hexToHSL(colors.popover)};
|
||||
--popover-foreground: ${hexToHSL(colors["popover-foreground"])};
|
||||
--primary: ${hexToHSL(colors.primary)};
|
||||
--primary-foreground: ${hexToHSL(colors["primary-foreground"])};
|
||||
--secondary: ${hexToHSL(colors.secondary)};
|
||||
--secondary-foreground: ${hexToHSL(colors["secondary-foreground"])};
|
||||
--muted: ${hexToHSL(colors.muted)};
|
||||
--muted-foreground: ${hexToHSL(colors["muted-foreground"])};
|
||||
--accent: ${hexToHSL(colors.accent)};
|
||||
--accent-foreground: ${hexToHSL(colors["accent-foreground"])};
|
||||
--destructive: ${hexToHSL(colors.destructive)};
|
||||
--destructive-foreground: ${hexToHSL(colors["destructive-foreground"])};
|
||||
--border: ${hexToHSL(colors.border)};
|
||||
--input: ${hexToHSL(colors.input)};
|
||||
--ring: ${hexToHSL(colors.ring)};
|
||||
--radius: ${radius}rem;
|
||||
}
|
||||
.theme-components-container[data-theme="custom-components"] * {
|
||||
border-radius: calc(var(--radius) * 1);
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="rounded-lg border bg-background p-8 space-y-8"
|
||||
style={{
|
||||
backgroundColor: `hsl(var(--background))`,
|
||||
color: `hsl(var(--foreground))`,
|
||||
borderColor: `hsl(var(--border))`,
|
||||
}}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
Button Variants
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button>Primary</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="outline">Outline</Button>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button variant="destructive">Destructive</Button>
|
||||
<Button variant="link">Link</Button>
|
||||
<Button size="sm">Small</Button>
|
||||
<Button size="lg">Large</Button>
|
||||
<Button disabled>Disabled</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
Badge Variants
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge>Default</Badge>
|
||||
<Badge variant="secondary">Secondary</Badge>
|
||||
<Badge variant="outline">Outline</Badge>
|
||||
<Badge variant="destructive">Destructive</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">Typography</h3>
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-4xl font-bold">Heading 1</h1>
|
||||
<h2 className="text-3xl font-bold">Heading 2</h2>
|
||||
<h3 className="text-2xl font-bold">Heading 3</h3>
|
||||
<h4 className="text-xl font-bold">Heading 4</h4>
|
||||
<p className="text-lg">Large paragraph text</p>
|
||||
<p>Regular paragraph text</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Muted text
|
||||
</p>
|
||||
<p className="text-xs">Small text</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="code" className="mt-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>CSS Variables</CardTitle>
|
||||
<CardDescription>
|
||||
Copy this code and paste it into your globals.css file
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="relative">
|
||||
<pre className="overflow-auto rounded-lg bg-muted p-6 text-sm">
|
||||
<code className="language-css">{generateCSS()}</code>
|
||||
</pre>
|
||||
<Button
|
||||
onClick={copyCSS}
|
||||
size="sm"
|
||||
className="absolute right-2 top-2"
|
||||
variant="ghost"
|
||||
>
|
||||
{copied ? (
|
||||
<Check className="h-4 w-4" />
|
||||
) : (
|
||||
<Copy className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-4 rounded-lg bg-muted/50 p-4">
|
||||
<p className="text-sm font-medium mb-2">
|
||||
Usage Instructions:
|
||||
</p>
|
||||
<ol className="text-sm text-muted-foreground space-y-1 list-decimal list-inside">
|
||||
<li>Copy the CSS variables above</li>
|
||||
<li>
|
||||
Open your project's global CSS file (usually globals.css
|
||||
or app.css)
|
||||
</li>
|
||||
<li>
|
||||
Replace the existing :root variables with your new theme
|
||||
</li>
|
||||
<li>Save the file and refresh your application</li>
|
||||
</ol>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+1
-21
@@ -8,7 +8,6 @@ import { cn } from "@/lib/utils"
|
||||
import { ActiveThemeProvider } from "@/components/active-theme"
|
||||
import { Analytics } from "@/components/analytics"
|
||||
import { ThemeProvider } from "@/components/providers"
|
||||
import { SkipLinks } from "@/components/skip-links"
|
||||
import { TailwindIndicator } from "@/components/tailwind-indicator"
|
||||
import { ThemeSwitcher } from "@/components/theme-switcher"
|
||||
import { Web3Provider } from "@/components/web3-provider"
|
||||
@@ -18,11 +17,6 @@ import {
|
||||
Toaster as NewYorkToaster,
|
||||
} from "@/registry/default/ui/toaster"
|
||||
|
||||
const META_THEME_COLORS = {
|
||||
light: "white",
|
||||
dark: "black",
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
default: siteConfig.name,
|
||||
@@ -93,19 +87,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
|
||||
return (
|
||||
<>
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<head>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
try {
|
||||
if (localStorage.theme === 'dark' || ((!('theme' in localStorage) || localStorage.theme === 'system') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.querySelector('meta[name="theme-color"]').setAttribute('content', '${META_THEME_COLORS.dark}')
|
||||
}
|
||||
} catch (_) {}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<head />
|
||||
<body
|
||||
className={cn(
|
||||
"min-h-svh bg-background font-sans antialiased",
|
||||
@@ -118,11 +100,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
enableColorScheme
|
||||
>
|
||||
<Web3Provider>
|
||||
<ActiveThemeProvider initialTheme="neutral">
|
||||
<SkipLinks />
|
||||
<div vaul-drawer-wrapper="">
|
||||
<div className="relative flex min-h-svh flex-col bg-background">
|
||||
{children}
|
||||
|
||||
@@ -174,13 +174,13 @@ function BlockViewerToolbar({ styleName }: { styleName: Style["name"] }) {
|
||||
className="gap-1 *:data-[slot=toggle-group-item]:!size-6 *:data-[slot=toggle-group-item]:!rounded-sm"
|
||||
>
|
||||
<ToggleGroupItem value="100" title="Desktop">
|
||||
<Monitor className="!h-3.5 !w-3.5" />
|
||||
<Monitor />
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem value="60" title="Tablet">
|
||||
<Tablet className="!h-3.5 !w-3.5" />
|
||||
<Tablet />
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem value="30" title="Mobile">
|
||||
<Smartphone className="!h-3.5 !w-3.5" />
|
||||
<Smartphone />
|
||||
</ToggleGroupItem>
|
||||
<Separator orientation="vertical" className="!h-4" />
|
||||
<Button
|
||||
@@ -190,9 +190,9 @@ function BlockViewerToolbar({ styleName }: { styleName: Style["name"] }) {
|
||||
asChild
|
||||
title="Open in New Tab"
|
||||
>
|
||||
<Link href={`/view/${item.name}`} target="_blank">
|
||||
<Link href={`/view/${styleName}/${item.name}`} target="_blank">
|
||||
<span className="sr-only">Open in New Tab</span>
|
||||
<Fullscreen className="!h-3.5 !w-3.5" />
|
||||
<Fullscreen />
|
||||
</Link>
|
||||
</Button>
|
||||
<Separator orientation="vertical" className="!h-4" />
|
||||
@@ -207,27 +207,22 @@ function BlockViewerToolbar({ styleName }: { styleName: Style["name"] }) {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<RotateCw className="!h-3.5 !w-3.5" />
|
||||
<RotateCw />
|
||||
<span className="sr-only">Refresh Preview</span>
|
||||
</Button>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="mx-1 !h-4" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-7"
|
||||
variant="outline"
|
||||
className="w-fit gap-1 px-2 shadow-none"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
copyToClipboard(`npx hanzo-ui@latest add ${item.name}`)
|
||||
}}
|
||||
title="Copy install command"
|
||||
>
|
||||
{isCopied ? (
|
||||
<Check className="!h-3.5 !w-3.5" />
|
||||
) : (
|
||||
<Clipboard className="!h-3.5 !w-3.5" />
|
||||
)}
|
||||
<span className="sr-only">Copy install command</span>
|
||||
{isCopied ? <Check /> : <Terminal />}
|
||||
<span>npx hanzo-ui add {item.name}</span>
|
||||
</Button>
|
||||
<Separator orientation="vertical" className="mx-1 !h-4" />
|
||||
<OpenInHButton name={item.name} />
|
||||
@@ -248,7 +243,7 @@ function BlockViewerIframe({
|
||||
return (
|
||||
<iframe
|
||||
key={iframeKey}
|
||||
src={`/view/${item.name}`}
|
||||
src={`/view/${styleName}/${item.name}`}
|
||||
height={item.meta?.iframeHeight ?? 930}
|
||||
loading="lazy"
|
||||
className={cn(
|
||||
|
||||
@@ -1,19 +1,18 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
Alert,
|
||||
AlertDescription,
|
||||
AlertTitle,
|
||||
} from "@/registry/default/ui/alert"
|
||||
|
||||
export function Callout({
|
||||
title,
|
||||
children,
|
||||
icon,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Alert> & { icon?: string }) {
|
||||
interface CalloutProps {
|
||||
icon?: string
|
||||
title?: string
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
export function Callout({ title, children, icon, ...props }: CalloutProps) {
|
||||
return (
|
||||
<Alert className={cn("bg-muted/50", className)} {...props}>
|
||||
<Alert {...props}>
|
||||
{icon && <span className="mr-4 text-2xl">{icon}</span>}
|
||||
{title && <AlertTitle>{title}</AlertTitle>}
|
||||
<AlertDescription>{children}</AlertDescription>
|
||||
|
||||
@@ -1,633 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Check, Search, Tag, X } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Badge } from "@/registry/default/ui/badge"
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/registry/default/ui/command"
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/registry/default/ui/popover"
|
||||
import { ScrollArea } from "@/registry/default/ui/scroll-area"
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/registry/default/ui/tabs"
|
||||
|
||||
// Comprehensive Tailwind CSS classes organized by category
|
||||
const TAILWIND_CLASSES = {
|
||||
layout: [
|
||||
"container",
|
||||
"flex",
|
||||
"inline-flex",
|
||||
"grid",
|
||||
"inline-grid",
|
||||
"block",
|
||||
"inline-block",
|
||||
"inline",
|
||||
"hidden",
|
||||
"flex-row",
|
||||
"flex-col",
|
||||
"flex-wrap",
|
||||
"flex-nowrap",
|
||||
"items-start",
|
||||
"items-center",
|
||||
"items-end",
|
||||
"items-baseline",
|
||||
"items-stretch",
|
||||
"justify-start",
|
||||
"justify-center",
|
||||
"justify-end",
|
||||
"justify-between",
|
||||
"justify-around",
|
||||
"justify-evenly",
|
||||
"gap-0",
|
||||
"gap-1",
|
||||
"gap-2",
|
||||
"gap-3",
|
||||
"gap-4",
|
||||
"gap-6",
|
||||
"gap-8",
|
||||
"gap-12",
|
||||
"grid-cols-1",
|
||||
"grid-cols-2",
|
||||
"grid-cols-3",
|
||||
"grid-cols-4",
|
||||
"grid-cols-6",
|
||||
"grid-cols-12",
|
||||
],
|
||||
spacing: [
|
||||
"p-0",
|
||||
"p-1",
|
||||
"p-2",
|
||||
"p-3",
|
||||
"p-4",
|
||||
"p-6",
|
||||
"p-8",
|
||||
"p-12",
|
||||
"p-16",
|
||||
"px-0",
|
||||
"px-1",
|
||||
"px-2",
|
||||
"px-3",
|
||||
"px-4",
|
||||
"px-6",
|
||||
"px-8",
|
||||
"py-0",
|
||||
"py-1",
|
||||
"py-2",
|
||||
"py-3",
|
||||
"py-4",
|
||||
"py-6",
|
||||
"py-8",
|
||||
"pt-0",
|
||||
"pt-2",
|
||||
"pt-4",
|
||||
"pt-6",
|
||||
"pt-8",
|
||||
"pb-0",
|
||||
"pb-2",
|
||||
"pb-4",
|
||||
"pb-6",
|
||||
"pb-8",
|
||||
"pl-2",
|
||||
"pl-4",
|
||||
"pr-2",
|
||||
"pr-4",
|
||||
"m-0",
|
||||
"m-1",
|
||||
"m-2",
|
||||
"m-4",
|
||||
"m-6",
|
||||
"m-8",
|
||||
"mx-auto",
|
||||
"mx-2",
|
||||
"mx-4",
|
||||
"my-2",
|
||||
"my-4",
|
||||
"my-6",
|
||||
"mt-2",
|
||||
"mt-4",
|
||||
"mb-2",
|
||||
"mb-4",
|
||||
"space-x-2",
|
||||
"space-x-4",
|
||||
"space-y-2",
|
||||
"space-y-4",
|
||||
"space-y-6",
|
||||
"space-y-8",
|
||||
],
|
||||
sizing: [
|
||||
"w-full",
|
||||
"w-auto",
|
||||
"w-1/2",
|
||||
"w-1/3",
|
||||
"w-2/3",
|
||||
"w-1/4",
|
||||
"w-3/4",
|
||||
"w-screen",
|
||||
"w-fit",
|
||||
"w-8",
|
||||
"w-12",
|
||||
"w-16",
|
||||
"w-24",
|
||||
"w-32",
|
||||
"w-64",
|
||||
"h-full",
|
||||
"h-auto",
|
||||
"h-screen",
|
||||
"h-fit",
|
||||
"h-8",
|
||||
"h-12",
|
||||
"h-16",
|
||||
"h-24",
|
||||
"h-32",
|
||||
"h-64",
|
||||
"min-h-screen",
|
||||
"min-h-full",
|
||||
"max-w-xs",
|
||||
"max-w-sm",
|
||||
"max-w-md",
|
||||
"max-w-lg",
|
||||
"max-w-xl",
|
||||
"max-w-2xl",
|
||||
"max-w-4xl",
|
||||
"max-w-7xl",
|
||||
"max-w-full",
|
||||
],
|
||||
colors: [
|
||||
"bg-background",
|
||||
"bg-foreground",
|
||||
"bg-card",
|
||||
"bg-primary",
|
||||
"bg-secondary",
|
||||
"bg-muted",
|
||||
"bg-accent",
|
||||
"bg-destructive",
|
||||
"bg-border",
|
||||
"bg-input",
|
||||
"bg-ring",
|
||||
"bg-white",
|
||||
"bg-black",
|
||||
"bg-transparent",
|
||||
"bg-red-500",
|
||||
"bg-blue-500",
|
||||
"bg-green-500",
|
||||
"bg-yellow-500",
|
||||
"bg-purple-500",
|
||||
"text-foreground",
|
||||
"text-background",
|
||||
"text-primary",
|
||||
"text-secondary",
|
||||
"text-muted-foreground",
|
||||
"text-accent-foreground",
|
||||
"text-destructive",
|
||||
"text-white",
|
||||
"text-black",
|
||||
"text-red-500",
|
||||
"text-blue-500",
|
||||
"text-green-500",
|
||||
"border-border",
|
||||
"border-input",
|
||||
"border-primary",
|
||||
"border-secondary",
|
||||
"border-destructive",
|
||||
"border-white",
|
||||
"border-black",
|
||||
"border-transparent",
|
||||
],
|
||||
typography: [
|
||||
"text-xs",
|
||||
"text-sm",
|
||||
"text-base",
|
||||
"text-lg",
|
||||
"text-xl",
|
||||
"text-2xl",
|
||||
"text-3xl",
|
||||
"text-4xl",
|
||||
"font-thin",
|
||||
"font-light",
|
||||
"font-normal",
|
||||
"font-medium",
|
||||
"font-semibold",
|
||||
"font-bold",
|
||||
"font-extrabold",
|
||||
"italic",
|
||||
"not-italic",
|
||||
"uppercase",
|
||||
"lowercase",
|
||||
"capitalize",
|
||||
"normal-case",
|
||||
"underline",
|
||||
"line-through",
|
||||
"no-underline",
|
||||
"text-left",
|
||||
"text-center",
|
||||
"text-right",
|
||||
"text-justify",
|
||||
"leading-none",
|
||||
"leading-tight",
|
||||
"leading-normal",
|
||||
"leading-relaxed",
|
||||
"tracking-tighter",
|
||||
"tracking-tight",
|
||||
"tracking-normal",
|
||||
"tracking-wide",
|
||||
],
|
||||
borders: [
|
||||
"border",
|
||||
"border-0",
|
||||
"border-2",
|
||||
"border-4",
|
||||
"border-t",
|
||||
"border-b",
|
||||
"border-l",
|
||||
"border-r",
|
||||
"border-x",
|
||||
"border-y",
|
||||
"border-solid",
|
||||
"border-dashed",
|
||||
"border-dotted",
|
||||
"border-none",
|
||||
"rounded",
|
||||
"rounded-none",
|
||||
"rounded-sm",
|
||||
"rounded-md",
|
||||
"rounded-lg",
|
||||
"rounded-xl",
|
||||
"rounded-2xl",
|
||||
"rounded-3xl",
|
||||
"rounded-full",
|
||||
"rounded-t",
|
||||
"rounded-b",
|
||||
"rounded-l",
|
||||
"rounded-r",
|
||||
],
|
||||
effects: [
|
||||
"shadow",
|
||||
"shadow-sm",
|
||||
"shadow-md",
|
||||
"shadow-lg",
|
||||
"shadow-xl",
|
||||
"shadow-2xl",
|
||||
"shadow-none",
|
||||
"opacity-0",
|
||||
"opacity-25",
|
||||
"opacity-50",
|
||||
"opacity-75",
|
||||
"opacity-100",
|
||||
"blur",
|
||||
"blur-sm",
|
||||
"blur-md",
|
||||
"blur-lg",
|
||||
"blur-none",
|
||||
"backdrop-blur",
|
||||
"backdrop-blur-sm",
|
||||
"backdrop-blur-md",
|
||||
"grayscale",
|
||||
"invert",
|
||||
"sepia",
|
||||
],
|
||||
transitions: [
|
||||
"transition",
|
||||
"transition-all",
|
||||
"transition-colors",
|
||||
"transition-opacity",
|
||||
"transition-shadow",
|
||||
"transition-transform",
|
||||
"duration-75",
|
||||
"duration-100",
|
||||
"duration-150",
|
||||
"duration-200",
|
||||
"duration-300",
|
||||
"duration-500",
|
||||
"duration-700",
|
||||
"ease-linear",
|
||||
"ease-in",
|
||||
"ease-out",
|
||||
"ease-in-out",
|
||||
"animate-spin",
|
||||
"animate-ping",
|
||||
"animate-pulse",
|
||||
"animate-bounce",
|
||||
],
|
||||
interactivity: [
|
||||
"cursor-auto",
|
||||
"cursor-pointer",
|
||||
"cursor-wait",
|
||||
"cursor-text",
|
||||
"cursor-move",
|
||||
"cursor-not-allowed",
|
||||
"select-none",
|
||||
"select-text",
|
||||
"select-all",
|
||||
"pointer-events-none",
|
||||
"pointer-events-auto",
|
||||
"resize-none",
|
||||
"resize",
|
||||
"hover:opacity-75",
|
||||
"hover:scale-105",
|
||||
"hover:bg-accent",
|
||||
"focus:outline-none",
|
||||
"focus:ring",
|
||||
"focus:ring-primary",
|
||||
"active:scale-95",
|
||||
],
|
||||
positioning: [
|
||||
"static",
|
||||
"fixed",
|
||||
"absolute",
|
||||
"relative",
|
||||
"sticky",
|
||||
"top-0",
|
||||
"right-0",
|
||||
"bottom-0",
|
||||
"left-0",
|
||||
"inset-0",
|
||||
"z-0",
|
||||
"z-10",
|
||||
"z-20",
|
||||
"z-30",
|
||||
"z-40",
|
||||
"z-50",
|
||||
"overflow-auto",
|
||||
"overflow-hidden",
|
||||
"overflow-visible",
|
||||
"overflow-scroll",
|
||||
"overflow-x-auto",
|
||||
"overflow-y-auto",
|
||||
],
|
||||
}
|
||||
|
||||
const CATEGORY_LABELS: Record<keyof typeof TAILWIND_CLASSES, string> = {
|
||||
layout: "Layout",
|
||||
spacing: "Spacing",
|
||||
sizing: "Sizing",
|
||||
colors: "Colors",
|
||||
typography: "Typography",
|
||||
borders: "Borders",
|
||||
effects: "Effects",
|
||||
transitions: "Transitions",
|
||||
interactivity: "Interactivity",
|
||||
positioning: "Positioning",
|
||||
}
|
||||
|
||||
interface ClassAutocompleteProps {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
}
|
||||
|
||||
export function ClassAutocomplete({ value, onChange }: ClassAutocompleteProps) {
|
||||
const [open, setOpen] = React.useState(false)
|
||||
const [search, setSearch] = React.useState("")
|
||||
const [selectedCategory, setSelectedCategory] = React.useState<
|
||||
keyof typeof TAILWIND_CLASSES | "all" | "recent"
|
||||
>("all")
|
||||
const [recentClasses, setRecentClasses] = React.useState<string[]>([])
|
||||
|
||||
// Parse existing classes
|
||||
const existingClasses = React.useMemo(
|
||||
() => value.split(" ").filter(Boolean),
|
||||
[value]
|
||||
)
|
||||
|
||||
// Get all classes
|
||||
const allClasses = React.useMemo(
|
||||
() => Object.values(TAILWIND_CLASSES).flat().sort(),
|
||||
[]
|
||||
)
|
||||
|
||||
// Filter classes based on category and search
|
||||
const filteredClasses = React.useMemo(() => {
|
||||
let classes: string[] = []
|
||||
|
||||
if (selectedCategory === "all") {
|
||||
classes = allClasses
|
||||
} else if (selectedCategory === "recent") {
|
||||
classes = recentClasses
|
||||
} else {
|
||||
classes = TAILWIND_CLASSES[selectedCategory] || []
|
||||
}
|
||||
|
||||
if (search) {
|
||||
classes = classes.filter((cls) =>
|
||||
cls.toLowerCase().includes(search.toLowerCase())
|
||||
)
|
||||
}
|
||||
|
||||
return classes
|
||||
}, [selectedCategory, search, allClasses, recentClasses])
|
||||
|
||||
// Add a class
|
||||
const addClass = (className: string) => {
|
||||
if (!existingClasses.includes(className)) {
|
||||
const newClasses = [...existingClasses, className].join(" ")
|
||||
onChange(newClasses)
|
||||
|
||||
// Add to recent (max 20)
|
||||
setRecentClasses((prev) => {
|
||||
const updated = [className, ...prev.filter((c) => c !== className)]
|
||||
return updated.slice(0, 20)
|
||||
})
|
||||
}
|
||||
setSearch("")
|
||||
setOpen(false)
|
||||
}
|
||||
|
||||
// Remove a class
|
||||
const removeClass = (className: string) => {
|
||||
const newClasses = existingClasses
|
||||
.filter((cls) => cls !== className)
|
||||
.join(" ")
|
||||
onChange(newClasses)
|
||||
}
|
||||
|
||||
// Validate class (simple check if it exists in our list)
|
||||
const isValidClass = (className: string) => {
|
||||
return allClasses.includes(className)
|
||||
}
|
||||
|
||||
// Get category for a class
|
||||
const getClassCategory = (className: string): string => {
|
||||
for (const [category, classes] of Object.entries(TAILWIND_CLASSES)) {
|
||||
if (classes.includes(className)) {
|
||||
return CATEGORY_LABELS[category as keyof typeof TAILWIND_CLASSES]
|
||||
}
|
||||
}
|
||||
return "Custom"
|
||||
}
|
||||
|
||||
// Get preview description
|
||||
const getClassPreview = (className: string): string => {
|
||||
if (className.startsWith("bg-")) return "Background color"
|
||||
if (className.startsWith("text-") && !className.includes("size"))
|
||||
return "Text color/size"
|
||||
if (className.startsWith("p-") || className.startsWith("m-"))
|
||||
return "Spacing"
|
||||
if (className.startsWith("w-") || className.startsWith("h-"))
|
||||
return "Sizing"
|
||||
if (className.startsWith("border")) return "Border style"
|
||||
if (className.startsWith("rounded")) return "Border radius"
|
||||
if (className.startsWith("shadow")) return "Shadow effect"
|
||||
if (className.startsWith("flex") || className.startsWith("grid"))
|
||||
return "Layout"
|
||||
if (className.startsWith("hover:")) return "Hover state"
|
||||
if (className.startsWith("focus:")) return "Focus state"
|
||||
return "Utility class"
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{/* Applied Classes */}
|
||||
{existingClasses.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 rounded-md border bg-muted/30 p-2">
|
||||
{existingClasses.map((cls) => (
|
||||
<Badge
|
||||
key={cls}
|
||||
variant={isValidClass(cls) ? "secondary" : "destructive"}
|
||||
className="group relative pr-1 text-[10px]"
|
||||
>
|
||||
<span className="max-w-[120px] truncate">{cls}</span>
|
||||
<button
|
||||
onClick={() => removeClass(cls)}
|
||||
className="ml-1 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
>
|
||||
<X className="h-2.5 w-2.5" />
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add Class Input */}
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
className="w-full justify-start text-xs font-normal"
|
||||
>
|
||||
<Search className="mr-2 h-3.5 w-3.5 shrink-0 opacity-50" />
|
||||
{existingClasses.length === 0
|
||||
? "Add Tailwind classes..."
|
||||
: `${existingClasses.length} ${existingClasses.length === 1 ? "class" : "classes"} applied`}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0" align="start">
|
||||
<div className="space-y-2 p-2">
|
||||
{/* Category Tabs */}
|
||||
<Tabs
|
||||
value={selectedCategory}
|
||||
onValueChange={(v) =>
|
||||
setSelectedCategory(v as keyof typeof TAILWIND_CLASSES)
|
||||
}
|
||||
>
|
||||
<TabsList className="grid h-8 w-full grid-cols-5 gap-1 bg-transparent p-0">
|
||||
<TabsTrigger value="all" className="h-7 text-[10px] px-1">
|
||||
All
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="recent" className="h-7 text-[10px] px-1">
|
||||
Recent
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="layout" className="h-7 text-[10px] px-1">
|
||||
Layout
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="spacing" className="h-7 text-[10px] px-1">
|
||||
Space
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="colors" className="h-7 text-[10px] px-1">
|
||||
Color
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
{/* Search */}
|
||||
<Command className="border">
|
||||
<CommandInput
|
||||
placeholder={`Search ${selectedCategory === "all" ? "all" : selectedCategory} classes...`}
|
||||
value={search}
|
||||
onValueChange={setSearch}
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
<CommandList>
|
||||
<CommandEmpty className="py-6 text-xs text-center text-muted-foreground">
|
||||
No classes found.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
<ScrollArea className="h-[250px]">
|
||||
{filteredClasses.map((cls) => {
|
||||
const isApplied = existingClasses.includes(cls)
|
||||
return (
|
||||
<CommandItem
|
||||
key={cls}
|
||||
value={cls}
|
||||
onSelect={() => addClass(cls)}
|
||||
disabled={isApplied}
|
||||
className="text-xs"
|
||||
>
|
||||
<div className="flex flex-1 items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Check
|
||||
className={cn(
|
||||
"h-3 w-3",
|
||||
isApplied ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<code className="font-mono">{cls}</code>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[9px] font-normal"
|
||||
>
|
||||
{getClassCategory(cls)}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CommandItem>
|
||||
)
|
||||
})}
|
||||
</ScrollArea>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
|
||||
{/* Category Quick Links */}
|
||||
<div className="flex flex-wrap gap-1 border-t pt-2">
|
||||
{Object.entries(CATEGORY_LABELS).map(([key, label]) => (
|
||||
<Button
|
||||
key={key}
|
||||
variant={selectedCategory === key ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setSelectedCategory(key as keyof typeof TAILWIND_CLASSES)
|
||||
}
|
||||
className="h-6 text-[10px] px-2"
|
||||
>
|
||||
<Tag className="mr-1 h-2.5 w-2.5" />
|
||||
{label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{/* Helper Text */}
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
{existingClasses.length === 0
|
||||
? "Click to browse Tailwind classes by category"
|
||||
: `${allClasses.length - existingClasses.length} more classes available`}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+16
-183
@@ -10,12 +10,10 @@ import {
|
||||
MoonIcon,
|
||||
SunIcon,
|
||||
} from "@radix-ui/react-icons"
|
||||
import { Clock, X } from "lucide-react"
|
||||
import { useTheme } from "next-themes"
|
||||
|
||||
import { docsConfig } from "@/config/docs"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { useRecentSearches } from "@/hooks/use-recent-searches"
|
||||
import { Button } from "@/registry/default/ui/button"
|
||||
import {
|
||||
CommandDialog,
|
||||
@@ -25,49 +23,16 @@ import {
|
||||
CommandItem,
|
||||
CommandList,
|
||||
CommandSeparator,
|
||||
CommandShortcut,
|
||||
} from "@/registry/default/ui/command"
|
||||
|
||||
// Helper to detect macOS
|
||||
const isMacOS = () =>
|
||||
typeof window !== "undefined" &&
|
||||
window.navigator.userAgent.toLowerCase().includes("mac")
|
||||
|
||||
// Keyboard shortcut badge component
|
||||
interface KbdBadgeProps {
|
||||
keys: string[]
|
||||
className?: string
|
||||
}
|
||||
|
||||
function KbdBadge({ keys, className }: KbdBadgeProps) {
|
||||
return (
|
||||
<div className={cn("flex items-center gap-1", className)}>
|
||||
{keys.map((key, index) => (
|
||||
<kbd
|
||||
key={index}
|
||||
className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100"
|
||||
>
|
||||
{key}
|
||||
</kbd>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function CommandMenu({ ...props }: DialogProps) {
|
||||
const router = useRouter()
|
||||
const [open, setOpen] = React.useState(false)
|
||||
const [searchQuery, setSearchQuery] = React.useState("")
|
||||
const { setTheme } = useTheme()
|
||||
const { recentSearches, addRecentSearch, clearRecentSearches } =
|
||||
useRecentSearches()
|
||||
|
||||
const modKey = React.useMemo(() => (isMacOS() ? "⌘" : "Ctrl"), [])
|
||||
|
||||
React.useEffect(() => {
|
||||
const down = (e: KeyboardEvent) => {
|
||||
// ⌘K or Ctrl+K to toggle command menu
|
||||
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
|
||||
if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || e.key === "/") {
|
||||
if (
|
||||
(e.target instanceof HTMLElement && e.target.isContentEditable) ||
|
||||
e.target instanceof HTMLInputElement ||
|
||||
@@ -80,59 +45,16 @@ export function CommandMenu({ ...props }: DialogProps) {
|
||||
e.preventDefault()
|
||||
setOpen((open) => !open)
|
||||
}
|
||||
|
||||
// ⌘P or Ctrl+P as alternative (common in many editors)
|
||||
if (e.key === "p" && (e.metaKey || e.ctrlKey)) {
|
||||
if (
|
||||
(e.target instanceof HTMLElement && e.target.isContentEditable) ||
|
||||
e.target instanceof HTMLInputElement ||
|
||||
e.target instanceof HTMLTextAreaElement ||
|
||||
e.target instanceof HTMLSelectElement
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
e.preventDefault()
|
||||
setOpen((open) => !open)
|
||||
}
|
||||
|
||||
// "/" to focus search
|
||||
if (e.key === "/") {
|
||||
if (
|
||||
(e.target instanceof HTMLElement && e.target.isContentEditable) ||
|
||||
e.target instanceof HTMLInputElement ||
|
||||
e.target instanceof HTMLTextAreaElement ||
|
||||
e.target instanceof HTMLSelectElement
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
e.preventDefault()
|
||||
setOpen(true)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", down)
|
||||
return () => document.removeEventListener("keydown", down)
|
||||
}, [])
|
||||
|
||||
const runCommand = React.useCallback(
|
||||
(command: () => unknown, title?: string, href?: string) => {
|
||||
// Track in recent searches if we have the metadata
|
||||
if (title && href) {
|
||||
addRecentSearch({
|
||||
id: href,
|
||||
title,
|
||||
href,
|
||||
})
|
||||
}
|
||||
|
||||
setOpen(false)
|
||||
setSearchQuery("")
|
||||
command()
|
||||
},
|
||||
[addRecentSearch]
|
||||
)
|
||||
const runCommand = React.useCallback((command: () => unknown) => {
|
||||
setOpen(false)
|
||||
command()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -147,65 +69,14 @@ export function CommandMenu({ ...props }: DialogProps) {
|
||||
<span className="hidden lg:inline-flex">Search documentation...</span>
|
||||
<span className="inline-flex lg:hidden">Search...</span>
|
||||
<kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
|
||||
<span className="text-xs">{modKey}</span>K
|
||||
<span className="text-xs">⌘</span>K
|
||||
</kbd>
|
||||
</Button>
|
||||
<CommandDialog open={open} onOpenChange={setOpen}>
|
||||
<CommandInput
|
||||
placeholder="Type a command or search..."
|
||||
value={searchQuery}
|
||||
onValueChange={setSearchQuery}
|
||||
/>
|
||||
<CommandInput placeholder="Type a command or search..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
|
||||
{/* Recent Searches - only show when no search query */}
|
||||
{!searchQuery && recentSearches.length > 0 && (
|
||||
<>
|
||||
<CommandGroup
|
||||
heading={
|
||||
<div className="flex items-center justify-between">
|
||||
<span>Recent</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-auto p-0 text-xs font-normal text-muted-foreground hover:text-foreground"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
clearRecentSearches()
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{recentSearches.map((search) => (
|
||||
<CommandItem
|
||||
key={search.id}
|
||||
value={search.title}
|
||||
onSelect={() => {
|
||||
runCommand(
|
||||
() => router.push(search.href),
|
||||
search.title,
|
||||
search.href
|
||||
)
|
||||
}}
|
||||
className="group"
|
||||
>
|
||||
<Clock className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||
<span className="flex-1">{search.title}</span>
|
||||
<CommandShortcut className="opacity-0 group-hover:opacity-100">
|
||||
<X className="h-3 w-3" />
|
||||
</CommandShortcut>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
<CommandSeparator />
|
||||
</>
|
||||
)}
|
||||
|
||||
<CommandGroup heading="Navigation">
|
||||
<CommandGroup heading="Links">
|
||||
{docsConfig.mainNav
|
||||
.filter((navitem) => !navitem.external)
|
||||
.map((navItem) => (
|
||||
@@ -213,83 +84,45 @@ export function CommandMenu({ ...props }: DialogProps) {
|
||||
key={navItem.href}
|
||||
value={navItem.title}
|
||||
onSelect={() => {
|
||||
runCommand(
|
||||
() => router.push(navItem.href as string),
|
||||
navItem.title,
|
||||
navItem.href as string
|
||||
)
|
||||
runCommand(() => router.push(navItem.href as string))
|
||||
}}
|
||||
>
|
||||
<FileIcon className="mr-2 h-4 w-4" />
|
||||
{navItem.title}
|
||||
<CommandShortcut>
|
||||
<KbdBadge keys={["G", navItem.title[0].toUpperCase()]} />
|
||||
</CommandShortcut>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
|
||||
{docsConfig.sidebarNav.map((group, groupIndex) => (
|
||||
{docsConfig.sidebarNav.map((group) => (
|
||||
<CommandGroup key={group.title} heading={group.title}>
|
||||
{group.items.map((navItem, itemIndex) => (
|
||||
{group.items.map((navItem) => (
|
||||
<CommandItem
|
||||
key={navItem.href}
|
||||
value={navItem.title}
|
||||
keywords={[navItem.title, group.title]}
|
||||
onSelect={() => {
|
||||
runCommand(
|
||||
() => router.push(navItem.href as string),
|
||||
navItem.title,
|
||||
navItem.href as string
|
||||
)
|
||||
runCommand(() => router.push(navItem.href as string))
|
||||
}}
|
||||
>
|
||||
<div className="mr-2 flex h-4 w-4 items-center justify-center">
|
||||
<CircleIcon className="h-3 w-3" />
|
||||
</div>
|
||||
<span className="flex-1">{navItem.title}</span>
|
||||
{itemIndex < 9 && (
|
||||
<CommandShortcut>
|
||||
<KbdBadge keys={[String(itemIndex + 1)]} />
|
||||
</CommandShortcut>
|
||||
)}
|
||||
{navItem.title}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
))}
|
||||
|
||||
<CommandSeparator />
|
||||
|
||||
<CommandGroup heading="Theme">
|
||||
<CommandItem
|
||||
onSelect={() => runCommand(() => setTheme("light"))}
|
||||
keywords={["light", "theme", "appearance"]}
|
||||
>
|
||||
<CommandItem onSelect={() => runCommand(() => setTheme("light"))}>
|
||||
<SunIcon className="mr-2 h-4 w-4" />
|
||||
Light
|
||||
<CommandShortcut>
|
||||
<KbdBadge keys={["T", "L"]} />
|
||||
</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
onSelect={() => runCommand(() => setTheme("dark"))}
|
||||
keywords={["dark", "theme", "appearance"]}
|
||||
>
|
||||
<CommandItem onSelect={() => runCommand(() => setTheme("dark"))}>
|
||||
<MoonIcon className="mr-2 h-4 w-4" />
|
||||
Dark
|
||||
<CommandShortcut>
|
||||
<KbdBadge keys={["T", "D"]} />
|
||||
</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem
|
||||
onSelect={() => runCommand(() => setTheme("system"))}
|
||||
keywords={["system", "theme", "appearance", "auto"]}
|
||||
>
|
||||
<CommandItem onSelect={() => runCommand(() => setTheme("system"))}>
|
||||
<LaptopIcon className="mr-2 h-4 w-4" />
|
||||
System
|
||||
<CommandShortcut>
|
||||
<KbdBadge keys={["T", "S"]} />
|
||||
</CommandShortcut>
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
|
||||
@@ -61,17 +61,6 @@ export function MainNav() {
|
||||
>
|
||||
Blocks
|
||||
</Link>
|
||||
<Link
|
||||
href="/builder"
|
||||
className={cn(
|
||||
"transition-colors hover:text-foreground/80",
|
||||
pathname?.startsWith("/builder")
|
||||
? "text-foreground"
|
||||
: "text-foreground/80"
|
||||
)}
|
||||
>
|
||||
Builder
|
||||
</Link>
|
||||
<Link
|
||||
href="/charts"
|
||||
className={cn(
|
||||
|
||||
@@ -10,9 +10,7 @@ import { Event } from "@/lib/events"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { useConfig } from "@/hooks/use-config"
|
||||
import { Callout } from "@/components/callout"
|
||||
import { CodeBlockCommand } from "@/components/code-block-command"
|
||||
import { CodeBlockWrapper } from "@/components/code-block-wrapper"
|
||||
import { CodeTabs } from "@/components/code-tabs"
|
||||
import { ComponentExample } from "@/components/component-example"
|
||||
import { ComponentPreview } from "@/components/component-preview"
|
||||
import { ComponentSource } from "@/components/component-source"
|
||||
@@ -47,7 +45,6 @@ const components = {
|
||||
Alert,
|
||||
AlertTitle,
|
||||
AlertDescription,
|
||||
Button,
|
||||
h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
|
||||
<h1
|
||||
className={cn(
|
||||
@@ -60,7 +57,7 @@ const components = {
|
||||
h2: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
|
||||
<h2
|
||||
className={cn(
|
||||
"font-heading mt-16 scroll-m-20 border-b pb-4 text-xl font-semibold tracking-tight first:mt-0",
|
||||
"font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -69,7 +66,7 @@ const components = {
|
||||
h3: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
|
||||
<h3
|
||||
className={cn(
|
||||
"font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
|
||||
"font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -110,13 +107,10 @@ const components = {
|
||||
),
|
||||
p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
|
||||
<p
|
||||
className={cn("leading-[1.65rem] [&:not(:first-child)]:mt-6", className)}
|
||||
className={cn("leading-7 [&:not(:first-child)]:mt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
strong: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
|
||||
<strong className={cn("font-semibold", className)} {...props} />
|
||||
),
|
||||
ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
|
||||
<ul className={cn("my-6 ml-6 list-disc", className)} {...props} />
|
||||
),
|
||||
@@ -137,37 +131,26 @@ const components = {
|
||||
alt,
|
||||
...props
|
||||
}: React.ImgHTMLAttributes<HTMLImageElement>) => (
|
||||
<img
|
||||
className={cn("rounded-md", className)}
|
||||
alt={alt}
|
||||
loading="lazy"
|
||||
{...props}
|
||||
/>
|
||||
<img className={cn("rounded-md", className)} alt={alt} {...props} />
|
||||
),
|
||||
hr: ({ ...props }: React.HTMLAttributes<HTMLHRElement>) => (
|
||||
<hr className="my-4 md:my-8" {...props} />
|
||||
),
|
||||
table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
|
||||
<div className="my-6 w-full overflow-y-auto">
|
||||
<table
|
||||
className={cn(
|
||||
"relative w-full overflow-hidden border-none text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
<table className={cn("w-full", className)} {...props} />
|
||||
</div>
|
||||
),
|
||||
tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
|
||||
<tr
|
||||
className={cn("last:border-b-none m-0 border-b", className)}
|
||||
className={cn("m-0 border-t p-0 even:bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
th: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
|
||||
<th
|
||||
className={cn(
|
||||
"px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
|
||||
"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -176,7 +159,7 @@ const components = {
|
||||
td: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
|
||||
<td
|
||||
className={cn(
|
||||
"px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
|
||||
"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -201,30 +184,16 @@ const components = {
|
||||
__src__?: string
|
||||
__event__?: Event["name"]
|
||||
} & NpmCommands) => {
|
||||
const isNpmCommand =
|
||||
__npmCommand__ && __yarnCommand__ && __pnpmCommand__ && __bunCommand__
|
||||
|
||||
if (isNpmCommand) {
|
||||
return (
|
||||
<CodeBlockCommand
|
||||
__npmCommand__={__npmCommand__}
|
||||
__yarnCommand__={__yarnCommand__}
|
||||
__pnpmCommand__={__pnpmCommand__}
|
||||
__bunCommand__={__bunCommand__}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<StyleWrapper styleName={__style__}>
|
||||
<pre
|
||||
className={cn(
|
||||
"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-xl bg-zinc-950 py-4 dark:bg-zinc-900",
|
||||
"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
{__rawString__ && (
|
||||
{__rawString__ && !__npmCommand__ && (
|
||||
<CopyButton
|
||||
value={__rawString__}
|
||||
src={__src__}
|
||||
@@ -267,7 +236,6 @@ const components = {
|
||||
CodeBlockWrapper: ({ ...props }) => (
|
||||
<CodeBlockWrapper className="rounded-md border" {...props} />
|
||||
),
|
||||
CodeTabs,
|
||||
Step: ({ className, ...props }: React.ComponentProps<"h3">) => (
|
||||
<h3
|
||||
className={cn(
|
||||
@@ -279,7 +247,7 @@ const components = {
|
||||
),
|
||||
Steps: ({ ...props }) => (
|
||||
<div
|
||||
className="[&>h3]:step steps mb-12 [counter-reset:step] md:ml-4 md:border-l md:pl-8"
|
||||
className="[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
|
||||
+14
-12
@@ -21,20 +21,22 @@ export function DocsPager({ doc }: DocsPagerProps) {
|
||||
return (
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
{pager?.prev?.href && (
|
||||
<Button variant="ghost" asChild>
|
||||
<Link href={pager.prev.href}>
|
||||
<ChevronLeft />
|
||||
{pager.prev.title}
|
||||
</Link>
|
||||
</Button>
|
||||
<Link
|
||||
href={pager.prev.href}
|
||||
className={buttonVariants({ variant: "outline" })}
|
||||
>
|
||||
<ChevronLeftIcon className="mr-2 h-4 w-4" />
|
||||
{pager.prev.title}
|
||||
</Link>
|
||||
)}
|
||||
{pager?.next?.href && (
|
||||
<Button variant="ghost" className="ml-auto" asChild>
|
||||
<Link href={pager.next.href}>
|
||||
{pager.next.title}
|
||||
<ChevronRight />
|
||||
</Link>
|
||||
</Button>
|
||||
<Link
|
||||
href={pager.next.href}
|
||||
className={cn(buttonVariants({ variant: "outline" }), "ml-auto")}
|
||||
>
|
||||
{pager.next.title}
|
||||
<ChevronRightIcon className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -4,28 +4,24 @@ import Link from "next/link"
|
||||
import { usePathname } from "next/navigation"
|
||||
import { SidebarNavItem } from "types/nav"
|
||||
|
||||
import type { DocsConfig } from "@/config/docs"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export function DocsNav({ config }: { config: DocsConfig }) {
|
||||
export interface DocsSidebarNavProps {
|
||||
items: SidebarNavItem[]
|
||||
}
|
||||
|
||||
export function DocsSidebarNav({ items }: DocsSidebarNavProps) {
|
||||
const pathname = usePathname()
|
||||
|
||||
const items = config.sidebarNav
|
||||
|
||||
return items.length ? (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="w-full">
|
||||
{items.map((item, index) => (
|
||||
<div key={index} className="flex flex-col gap-1">
|
||||
<h4 className="rounded-md px-2 py-1 text-sm font-medium">
|
||||
{item.title}{" "}
|
||||
{item.label && (
|
||||
<span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs font-normal leading-none text-[#000000] no-underline group-hover:no-underline">
|
||||
{item.label}
|
||||
</span>
|
||||
)}
|
||||
<div key={index} className={cn("pb-4")}>
|
||||
<h4 className="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
|
||||
{item.title}
|
||||
</h4>
|
||||
{item?.items?.length && (
|
||||
<DocsNavItems items={item.items} pathname={pathname} />
|
||||
<DocsSidebarNavItems items={item.items} pathname={pathname} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
@@ -33,26 +29,28 @@ export function DocsNav({ config }: { config: DocsConfig }) {
|
||||
) : null
|
||||
}
|
||||
|
||||
function DocsNavItems({
|
||||
items,
|
||||
pathname,
|
||||
}: {
|
||||
interface DocsSidebarNavItemsProps {
|
||||
items: SidebarNavItem[]
|
||||
pathname: string | null
|
||||
}) {
|
||||
}
|
||||
|
||||
export function DocsSidebarNavItems({
|
||||
items,
|
||||
pathname,
|
||||
}: DocsSidebarNavItemsProps) {
|
||||
return items?.length ? (
|
||||
<div className="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
|
||||
<div className="grid grid-flow-row auto-rows-max text-sm">
|
||||
{items.map((item, index) =>
|
||||
item.href && !item.disabled ? (
|
||||
<Link
|
||||
key={index}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"group relative flex h-8 w-full items-center rounded-lg px-2 after:absolute after:inset-x-0 after:inset-y-[-2px] after:rounded-lg hover:bg-accent hover:text-accent-foreground ",
|
||||
"group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline",
|
||||
item.disabled && "cursor-not-allowed opacity-60",
|
||||
pathname === item.href
|
||||
? "bg-accent font-medium text-accent-foreground"
|
||||
: "font-normal text-foreground"
|
||||
? "font-medium text-foreground"
|
||||
: "text-muted-foreground"
|
||||
)}
|
||||
target={item.external ? "_blank" : ""}
|
||||
rel={item.external ? "noreferrer" : ""}
|
||||
|
||||
@@ -19,7 +19,7 @@ export function SiteHeader() {
|
||||
<div className="w-full flex-1 md:w-auto md:flex-none">
|
||||
<CommandMenu />
|
||||
</div>
|
||||
<nav id="navigation" className="flex items-center">
|
||||
<nav className="flex items-center">
|
||||
<Link
|
||||
href={siteConfig.links.github}
|
||||
target="_blank"
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface SkeletonCardProps {
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function SkeletonCard({ className }: SkeletonCardProps) {
|
||||
return (
|
||||
<div className={cn("space-y-3", className)}>
|
||||
<div className="h-48 bg-muted rounded-lg animate-pulse" />
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-muted rounded w-3/4 animate-pulse" />
|
||||
<div className="h-3 bg-muted rounded w-1/2 animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function SkeletonCardGrid({ count = 6 }: { count?: number }) {
|
||||
return (
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{Array.from({ length: count }).map((_, i) => (
|
||||
<SkeletonCard key={i} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function SkeletonList({ count = 5 }: { count?: number }) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: count }).map((_, i) => (
|
||||
<div key={i} className="flex items-center space-x-4">
|
||||
<div className="h-12 w-12 bg-muted rounded-full animate-pulse" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="h-4 bg-muted rounded w-3/4 animate-pulse" />
|
||||
<div className="h-3 bg-muted rounded w-1/2 animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function SkeletonTable() {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="h-10 bg-muted rounded animate-pulse" />
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="h-16 bg-muted/50 rounded animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
export function SkipLinks() {
|
||||
return (
|
||||
<>
|
||||
<a
|
||||
href="#main-content"
|
||||
className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-6 focus:py-3 focus:bg-primary focus:text-primary-foreground focus:rounded-lg focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:font-medium focus:shadow-lg focus:transition-all"
|
||||
>
|
||||
Skip to main content
|
||||
</a>
|
||||
<a
|
||||
href="#navigation"
|
||||
className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-6 focus:py-3 focus:bg-primary focus:text-primary-foreground focus:rounded-lg focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:font-medium focus:shadow-lg focus:transition-all"
|
||||
>
|
||||
Skip to navigation
|
||||
</a>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { useConfig } from "@/hooks/use-config"
|
||||
import { Style } from "@/registry/registry-styles"
|
||||
import { Style } from "@/registry/styles"
|
||||
|
||||
interface StyleWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
styleName?: Style["name"]
|
||||
|
||||
@@ -2,10 +2,7 @@ export function TailwindIndicator() {
|
||||
if (process.env.NODE_ENV === "production") return null
|
||||
|
||||
return (
|
||||
<div
|
||||
data-tailwind-indicator=""
|
||||
className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white"
|
||||
>
|
||||
<div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
|
||||
<div className="block sm:hidden">xs</div>
|
||||
<div className="hidden sm:block md:hidden">sm</div>
|
||||
<div className="hidden md:block lg:hidden">md</div>
|
||||
|
||||
@@ -26,7 +26,7 @@ export function DashboardTableOfContents({ toc }: TocProps) {
|
||||
const activeHeading = useActiveItem(itemIds)
|
||||
const mounted = useMounted()
|
||||
|
||||
if (!toc?.items?.length) {
|
||||
if (!toc?.items || !mounted) {
|
||||
return null
|
||||
}
|
||||
|
||||
|
||||
+1
-201
@@ -1,6 +1,6 @@
|
||||
import { MainNavItem, SidebarNavItem } from "types/nav"
|
||||
|
||||
export interface DocsConfig {
|
||||
interface DocsConfig {
|
||||
mainNav: MainNavItem[]
|
||||
sidebarNav: SidebarNavItem[]
|
||||
}
|
||||
@@ -97,82 +97,6 @@ export const docsConfig: DocsConfig = {
|
||||
href: "/docs/changelog",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "MCP Server",
|
||||
href: "/docs/mcp",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "About",
|
||||
href: "/docs/about",
|
||||
items: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Installation",
|
||||
items: [
|
||||
{
|
||||
title: "Next.js",
|
||||
href: "/docs/installation/next",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Vite",
|
||||
href: "/docs/installation/vite",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Remix",
|
||||
href: "/docs/installation/remix",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Astro",
|
||||
href: "/docs/installation/astro",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Gatsby",
|
||||
href: "/docs/installation/gatsby",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Laravel",
|
||||
href: "/docs/installation/laravel",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Manual",
|
||||
href: "/docs/installation/manual",
|
||||
items: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Dark Mode",
|
||||
items: [
|
||||
{
|
||||
title: "Next.js",
|
||||
href: "/docs/dark-mode/next",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Vite",
|
||||
href: "/docs/dark-mode/vite",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Remix",
|
||||
href: "/docs/dark-mode/remix",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Astro",
|
||||
href: "/docs/dark-mode/astro",
|
||||
items: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -219,12 +143,6 @@ export const docsConfig: DocsConfig = {
|
||||
href: "/docs/components/button",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Button Group",
|
||||
href: "/docs/components/button-group",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Calendar",
|
||||
href: "/docs/components/calendar",
|
||||
@@ -270,30 +188,6 @@ export const docsConfig: DocsConfig = {
|
||||
href: "/docs/components/data-table",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Desktop",
|
||||
href: "/docs/components/desktop",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Desktop Hooks",
|
||||
href: "/docs/components/desktop-hooks",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Desktop Spotlight",
|
||||
href: "/docs/components/desktop-spotlight",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Desktop Window",
|
||||
href: "/docs/components/desktop-window",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Date Picker",
|
||||
href: "/docs/components/date-picker",
|
||||
@@ -304,12 +198,6 @@ export const docsConfig: DocsConfig = {
|
||||
href: "/docs/components/dialog",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Direction",
|
||||
href: "/docs/components/direction",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Drawer",
|
||||
href: "/docs/components/drawer",
|
||||
@@ -320,18 +208,6 @@ export const docsConfig: DocsConfig = {
|
||||
href: "/docs/components/dropdown-menu",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Empty State",
|
||||
href: "/docs/components/empty",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Field",
|
||||
href: "/docs/components/field",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Form",
|
||||
href: "/docs/components/form",
|
||||
@@ -347,24 +223,12 @@ export const docsConfig: DocsConfig = {
|
||||
href: "/docs/components/input",
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: "Input Group",
|
||||
href: "/docs/components/input-group",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Input OTP",
|
||||
href: "/docs/components/input-otp",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Item",
|
||||
href: "/docs/components/item",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Label",
|
||||
href: "/docs/components/label",
|
||||
@@ -749,24 +613,6 @@ export const docsConfig: DocsConfig = {
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Particles Background",
|
||||
href: "/docs/components/particles-background",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Grid Pattern",
|
||||
href: "/docs/components/grid-pattern",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Timeline",
|
||||
href: "/docs/components/timeline",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Pin List",
|
||||
href: "/docs/components/pin-list",
|
||||
@@ -1182,18 +1028,6 @@ export const docsConfig: DocsConfig = {
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "AI Code",
|
||||
href: "/docs/ai/code",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "AI Voice",
|
||||
href: "/docs/ai/voice",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -1340,40 +1174,6 @@ export const docsConfig: DocsConfig = {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Guides",
|
||||
items: [
|
||||
{
|
||||
title: "Page Builder",
|
||||
href: "/docs/guides/page-builder",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Visual Workflows",
|
||||
href: "/docs/guides/visual-workflows",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Hanzo React",
|
||||
items: [
|
||||
{
|
||||
title: "Getting Started",
|
||||
href: "/docs/hanzo-react/getting-started",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
{
|
||||
title: "Hooks",
|
||||
href: "/docs/hanzo-react/hooks",
|
||||
items: [],
|
||||
label: "New",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Packages",
|
||||
items: [
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: Contact Forms
|
||||
description: Contact form sections with validation, multiple fields, and submission handling.
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Contact form blocks provide complete form layouts for collecting user inquiries. They include input validation, loading states, and success confirmation.
|
||||
|
||||
## Features
|
||||
|
||||
- **Form Validation**: Built-in HTML5 and custom validation
|
||||
- **Multiple Fields**: Name, email, subject, and message inputs
|
||||
- **Loading States**: Visual feedback during form submission
|
||||
- **Success Message**: Confirmation after successful submission
|
||||
- **Responsive Design**: Adapts to all screen sizes
|
||||
- **Accessible**: Semantic form elements with proper labels
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import ContactBlock from "@/registry/default/block/contact"
|
||||
|
||||
export default function Page() {
|
||||
return <ContactBlock />
|
||||
}
|
||||
```
|
||||
@@ -1,26 +0,0 @@
|
||||
---
|
||||
title: CTA Sections
|
||||
description: Call-to-action sections for driving user conversions and signups.
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
CTA (Call-to-Action) blocks are designed to drive user engagement and conversions. They feature prominent buttons, compelling copy, and focused layouts that guide users toward a specific action.
|
||||
|
||||
## Features
|
||||
|
||||
- **Conversion-Focused**: Designed to maximize click-through rates
|
||||
- **Responsive Design**: Adapts to all screen sizes
|
||||
- **Multiple Layouts**: Centered, split, and banner variations
|
||||
- **Button Variants**: Primary, secondary, and ghost CTA styles
|
||||
- **Background Options**: Solid colors, gradients, and image backgrounds
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import CTABlock from "@/registry/default/block/cta"
|
||||
|
||||
export default function Page() {
|
||||
return <CTABlock />
|
||||
}
|
||||
```
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: FAQ Sections
|
||||
description: Frequently asked questions sections with expandable accordions and search.
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
FAQ blocks present commonly asked questions in organized, expandable layouts. They use accordion patterns for progressive disclosure and optional search filtering.
|
||||
|
||||
## Features
|
||||
|
||||
- **Accordion Layout**: Expandable question/answer pairs
|
||||
- **Search Filtering**: Optional search to find specific questions
|
||||
- **Categories**: Group questions by topic
|
||||
- **Responsive**: Full-width layout that works on all devices
|
||||
- **Accessible**: Keyboard navigation and screen reader support
|
||||
- **Animated**: Smooth expand/collapse transitions
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import FAQBlock from "@/registry/default/block/faq"
|
||||
|
||||
export default function Page() {
|
||||
return <FAQBlock />
|
||||
}
|
||||
```
|
||||
@@ -1,26 +0,0 @@
|
||||
---
|
||||
title: Feature Sections
|
||||
description: Feature grid and list sections for highlighting product capabilities.
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Feature blocks display product capabilities in organized grid or list layouts. They combine icons, headings, and descriptions to communicate value propositions clearly.
|
||||
|
||||
## Features
|
||||
|
||||
- **Grid Layouts**: 2, 3, or 4 column responsive grids
|
||||
- **Icon Support**: Lucide icons or custom SVGs
|
||||
- **Responsive**: Stacks to single column on mobile
|
||||
- **Customizable**: Flexible content and styling options
|
||||
- **Accessible**: Semantic HTML with proper heading hierarchy
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import FeaturesBlock from "@/registry/default/block/features"
|
||||
|
||||
export default function Page() {
|
||||
return <FeaturesBlock />
|
||||
}
|
||||
```
|
||||
@@ -1,36 +0,0 @@
|
||||
---
|
||||
title: Hero Sections
|
||||
description: Full-width hero sections for landing pages with headlines, CTAs, and imagery.
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Hero blocks are viewport-sized sections designed for the top of landing pages. They feature bold typography, call-to-action buttons, and visual elements to capture user attention.
|
||||
|
||||
## Variations
|
||||
|
||||
### App UI Showcase
|
||||
|
||||
<ComponentPreview name="showcase-app-ui-01" />
|
||||
|
||||
A hero section showcasing your app's UI with a centered layout and product screenshot.
|
||||
|
||||
### E-commerce Showcase
|
||||
|
||||
<ComponentPreview name="showcase-ecommerce-01" />
|
||||
|
||||
A hero section designed for e-commerce with product imagery and shopping CTAs.
|
||||
|
||||
### Marketing Showcase
|
||||
|
||||
<ComponentPreview name="showcase-marketing-01" />
|
||||
|
||||
A bold marketing hero section with large typography and conversion-focused design.
|
||||
|
||||
## Features
|
||||
|
||||
- **Responsive Design**: Adapts to all screen sizes
|
||||
- **CTA Buttons**: Primary and secondary call-to-action buttons
|
||||
- **Visual Elements**: Support for images, gradients, and animations
|
||||
- **Typography**: Large, bold headlines with supporting text
|
||||
- **Customizable**: Easy to modify colors, text, and layout
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: Stats Sections
|
||||
description: Statistics and metrics sections with counters, charts, and key figures.
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Stats blocks display key metrics and achievements in visually impactful layouts. They feature animated counters, comparison figures, and trend indicators.
|
||||
|
||||
## Features
|
||||
|
||||
- **Animated Counters**: Number animations on scroll into view
|
||||
- **Multiple Layouts**: Grid, inline, and featured stat variations
|
||||
- **Trend Indicators**: Up/down arrows with percentage changes
|
||||
- **Responsive**: Adapts from multi-column to single column on mobile
|
||||
- **Icons**: Support for metric-specific icons
|
||||
- **Customizable**: Easy to update values and labels
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import StatsBlock from "@/registry/default/block/stats"
|
||||
|
||||
export default function Page() {
|
||||
return <StatsBlock />
|
||||
}
|
||||
```
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: Team Sections
|
||||
description: Team member grid and list sections with photos, roles, and social links.
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Team blocks showcase team members with profile photos, names, roles, and social links. They support multiple layout variations for different page contexts.
|
||||
|
||||
## Features
|
||||
|
||||
- **Grid Layout**: Responsive grid with team member cards
|
||||
- **Profile Photos**: Avatar images with fallback initials
|
||||
- **Role Display**: Job titles and department labels
|
||||
- **Social Links**: GitHub, Twitter, LinkedIn integration
|
||||
- **Responsive**: Adapts columns based on screen size
|
||||
- **Hover Effects**: Interactive card hover states
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import TeamBlock from "@/registry/default/block/team"
|
||||
|
||||
export default function Page() {
|
||||
return <TeamBlock />
|
||||
}
|
||||
```
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
title: Testimonials
|
||||
description: Testimonial sections with user quotes, ratings, and social proof.
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Testimonial blocks display customer reviews and social proof in visually appealing layouts. They support avatars, star ratings, company logos, and quote formatting.
|
||||
|
||||
## Features
|
||||
|
||||
- **Multiple Layouts**: Grid, carousel, and featured testimonial styles
|
||||
- **Avatar Support**: User photos with name and title
|
||||
- **Star Ratings**: Visual rating display
|
||||
- **Company Logos**: Brand association for B2B testimonials
|
||||
- **Responsive**: Adapts from multi-column to single column on mobile
|
||||
- **Animated**: Optional entrance animations and carousel transitions
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
import TestimonialsBlock from "@/registry/default/block/testimonials"
|
||||
|
||||
export default function Page() {
|
||||
return <TestimonialsBlock />
|
||||
}
|
||||
```
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: June 2023 - New CLI, Styles and more
|
||||
description: Complete CLI rewrite with new styles, theming options, and more.
|
||||
date: 2023-06-22
|
||||
title: Changelog
|
||||
description: Latest updates and announcements.
|
||||
toc: false
|
||||
---
|
||||
|
||||
## April 2024 - Introducing Lift Mode
|
||||
@@ -299,7 +299,7 @@ This file contains all the information about your components: where to install t
|
||||
|
||||
You can use this file to change the import path of a component, set a baseColor or change the styling method.
|
||||
|
||||
```json title="components.json" showLineNumbers
|
||||
```json title="components.json"
|
||||
{
|
||||
"style": "default",
|
||||
"tailwind": {
|
||||
@@ -382,7 +382,7 @@ When you add new components, the CLI will automatically use the correct theming
|
||||
|
||||
To use utility classes for theming set `tailwind.cssVariables` to `false` in your `components.json` file.
|
||||
|
||||
```json {6} title="components.json" showLineNumbers
|
||||
```json {6} title="components.json"
|
||||
{
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
@@ -401,7 +401,7 @@ To use utility classes for theming set `tailwind.cssVariables` to `false` in you
|
||||
|
||||
To use CSS variables classes for theming set `tailwind.cssVariables` to `true` in your `components.json` file.
|
||||
|
||||
```json {6} title="components.json" showLineNumbers
|
||||
```json {6} title="components.json"
|
||||
{
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
@@ -418,7 +418,7 @@ To use CSS variables classes for theming set `tailwind.cssVariables` to `true` i
|
||||
|
||||
You can now configure the base color for your project. This will be used to generate the default color palette for your components.
|
||||
|
||||
```json {5} title="components.json" showLineNumbers
|
||||
```json {5} title="components.json"
|
||||
{
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
@@ -439,7 +439,7 @@ If you have `cssVariables` set to `true`, we will set the base colors as CSS var
|
||||
|
||||
If you're using a framework that does not support React Server Components, you can now opt out by setting `rsc` to `false`. We will automatically append or remove the `use client` directive when adding components.
|
||||
|
||||
```json title="components.json" showLineNumbers
|
||||
```json title="components.json"
|
||||
{
|
||||
"rsc": false
|
||||
}
|
||||
@@ -460,7 +460,7 @@ We are shipping two styles: `default` and `new-york` (with more coming soon).
|
||||
width="716"
|
||||
height="402"
|
||||
alt="Default vs New York style"
|
||||
className="mt-6 overflow-hidden rounded-lg border"
|
||||
className="border rounded-lg overflow-hidden mt-6"
|
||||
/>
|
||||
|
||||
The `default` style is the one you are used to. It's the one we've been using since the beginning of this project. It uses `lucide-react` for icons and `tailwindcss-animate` for animations.
|
||||
@@ -469,7 +469,7 @@ The `new-york` style is a new style. It ships with smaller buttons, cards with s
|
||||
|
||||
When you run the `init` command, you will be asked which style you would like to use. This is saved in your `components.json` file.
|
||||
|
||||
```json title="components.json" showLineNumbers
|
||||
```json title="components.json"
|
||||
{
|
||||
"style": "new-york"
|
||||
}
|
||||
@@ -484,7 +484,7 @@ Start with a style as the base then theme using CSS variables or Tailwind CSS ut
|
||||
width="716"
|
||||
height="402"
|
||||
alt="Style with theming"
|
||||
className="mt-6 overflow-hidden rounded-lg border"
|
||||
className="border rounded-lg overflow-hidden mt-6"
|
||||
/>
|
||||
|
||||
---
|
||||
@@ -532,7 +532,7 @@ Since we follow a copy and paste approach, you will need to manually update your
|
||||
|
||||
Creating a `components.json` file at the root:
|
||||
|
||||
```json title="components.json" showLineNumbers
|
||||
```json title="components.json"
|
||||
{
|
||||
"style": "default",
|
||||
"rsc": true,
|
||||
@@ -555,7 +555,7 @@ Update the values for `tailwind.css` and `aliases` to match your project structu
|
||||
|
||||
Add the `icon` size to the `buttonVariants`:
|
||||
|
||||
```tsx {7} title="components/ui/button.tsx" showLineNumbers
|
||||
```tsx {7} title="components/ui/button.tsx"
|
||||
const buttonVariants = cva({
|
||||
variants: {
|
||||
size: {
|
||||
@@ -572,7 +572,7 @@ const buttonVariants = cva({
|
||||
|
||||
1. Replace the content of `sheet.tsx` with the following:
|
||||
|
||||
```tsx title="components/ui/sheet.tsx" showLineNumbers
|
||||
```tsx title="components/ui/sheet.tsx"
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
@@ -602,7 +602,7 @@ const SheetOverlay = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Overlay
|
||||
className={cn(
|
||||
"bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
|
||||
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -646,7 +646,7 @@ const SheetContent = React.forwardRef<
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
|
||||
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
@@ -689,7 +689,7 @@ const SheetTitle = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-foreground text-lg font-semibold", className)}
|
||||
className={cn("text-lg font-semibold text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@@ -701,7 +701,7 @@ const SheetDescription = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@@ -730,4 +730,4 @@ export {
|
||||
|
||||
### Thank you
|
||||
|
||||
I'd like to thank everyone who has been using this project, providing feedback and contributing to it. I really appreciate it. Thank you.
|
||||
I'd like to thank everyone who has been using this project, providing feedback and contributing to it. I really appreciate it. Thank you 🙏
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user