@deepdanci/common

Next.js UI component library with Tailwind CSS and Supabase integration.

安装

npm install @deepdanci/common
# 或
yarn add @deepdanci/common
# 或
pnpm add @deepdanci/common

使用方法

重要：关于样式兼容性

组件库中使用了特定的 Tailwind CSS 类名配置。为了确保样式正确渲染，请注意：

1. 确保您的项目使用 Tailwind CSS
2. 对于自定义颜色，请使用大写十六进制值，如 #FF6600 而非 #ff6600
3. 组件中使用了标准颜色名称（如 text-gray-500）而非主题变量（如 text-muted-foreground）

重要：样式设置

确保在项目中导入组件库的样式：

// 在项目的入口文件 (如 _app.tsx 或 layout.tsx) 中导入样式
import "@deepdanci/common/dist/styles/index.css";

// 也需要确保您的项目已正确配置 Tailwind CSS

方式一：使用命名导入（推荐）

import {
  Button,
  Dialog,
  ScrollArea,
  PromotionalHeader,
} from "@deepdanci/common";
import { createClient } from "@supabase/supabase-js";

// 创建 Supabase 客户端
const supabaseClient = createClient(
  "https://your-project-url.supabase.co",
  "your-supabase-anon-key"
);

// 在组件中使用
function MyComponent() {
  return (
    <div>
      <PromotionalHeader supabaseClient={supabaseClient} />

      <Button variant='default'>点击我</Button>

      <ScrollArea className='h-[200px]'>{/* 内容 */}</ScrollArea>
    </div>
  );
}

方式二：直接导入 PromotionalHeader 组件

如果您在导入 PromotionalHeader 时遇到问题，可以使用直接导入方式：

// 直接从子路径导入
import { PromotionalHeader } from "@deepdanci/common/components/promotional-header";
// 或者默认导入
import PromotionalHeader from "@deepdanci/common/components/promotional-header";

// 使用方式
function MyComponent({ supabaseClient }) {
  return <PromotionalHeader supabaseClient={supabaseClient} />;
}

兼容性说明

• 支持 React 18 及以上版本
• 支持 Next.js 14 及以上版本
• 如果遇到构建错误，尝试清除项目缓存：

  # 删除 Next.js 缓存
  rm -rf .next
  # 或在 Windows 中
  rmdir /s /q .next

组件列表

• Button - 按钮组件
• Dialog - 对话框组件
• ScrollArea - 滚动区域组件
• PromotionalHeader - 促销头部组件（需要 Supabase 客户端）

要求

• React 18 或更高版本
• Next.js 14 或更高版本
• Tailwind CSS 4

开发

# 安装依赖
yarn

# 开发模式运行
yarn dev

# 构建组件库
yarn build:package

License

MIT