@flamingo-stack / openframe-frontend-core
火烈鸟平台（OpenMSP, OpenFrame, Admin Hub, Flamingo Website， TMCG）的共享设计系统和组件库。
安装
npm install https://pkg.pr.new/flamingo-stack/openframe-oss-lib/@flamingo-stack/openframe-frontend-core@<x.y.z>
使用
组件
import { Button, Card, Input, Modal, Tag } from '@flamingo-stack/openframe-frontend-core/components/ui'
import { YouTubeEmbed, FigmaPrototypeViewer } from '@flamingo-stack/openframe-frontend-core/components/features'
import { GithubIcon, OpenframeLogoIcon } from '@flamingo-stack/openframe-frontend-core/components/icons-v2'
钩子
import { useDebounce, useMediaQuery, useToast } from '@flamingo-stack/openframe-frontend-core/hooks'
公用事业公司
import { cn, formatDate, formatPrice, getPlatformUrl } from '@flamingo-stack/openframe-frontend-core/utils'
风格
// Import in your layout or _app.tsx
import '@flamingo-stack/openframe-frontend-core/styles'
顺风配置
在项目中扩展共享的Tailwind配置：
import designSystemConfig from '@flamingo-stack/openframe-frontend-core/tailwind.config.ts'
import { appStyleSources } from '@flamingo-stack/openframe-frontend-core/style-sources'
export default {
presets: [designSystemConfig],
// The files your App Router routes import, yours and this library's: never this library's whole
// `dist` or `src`, which puts every component's classes in the stylesheet every page blocks on.
content: appStyleSources({ root: __dirname, appDir: 'src/app' }),
}
appStyleSources （scripts/style-sources.cjs)从路由文件中遍历导入图，摇树
就像你的捆绑者一样。主机可以将惰性加载的聊天从页面的样式表中删除
firstPaint: true，并给予 EmbeddableChat 一个 loadStyles 这将加载构建的完整样式表
没有它（参见文件的头文件）。
然后将样式表发送到每个页面的HTML中，这样页面就不会等待第二次绘制请求，
把它的规模控制在你支票的预算之内。scripts/next-styles.cjs 说明原因和成本)：
// next.config.mjs
import { withInlineStyles } from '@flamingo-stack/openframe-frontend-core/next-styles'
export default withInlineStyles(nextConfig)
node node_modules/@flamingo-stack/openframe-frontend-core/dist/build/next-styles.cjs budget \
--input src/app/globals.css --config tailwind.config.ts --budget 31500
包出口
| 导出路径 | 描述 |
|---|---|
. | 主入口（所有组件、钩子、utils） |
./components/ui | 基本UI组件（按钮、卡片、输入、模态、标签等） |
./components/features | 复杂组件（YouTubeEmbed, FigmaPrototypeViewer, AuthProvidersList） |
./components/icons-v2 | 生成的图标集 |
./components/navigation | 导航组件（Header, StickySectionNav） |
./components/toast | 祝酒通知系统 |
./hooks | React钩子（useDebounce, useMediaQuery， useToast等） |
./utils | 实用程序（cn, formatDate, formatPrice, getPlatformUrl, platform-config） |
./types | TypeScript类型定义 |
./styles | CSS样式和ODS设计标记 |
./style-sources | 顺风 content 对于一个应用程序：它的路由导入文件(appStyleSources） |
./next-styles | 每个页面的HTML (withInlineStyles)及其大小门(measureStylesheet， budget 命令) |
./nats | NATS WebSocket实用程序 |
./fonts | 字体配置 |
设计系统（ODS）
该软件包包括开放框架设计系统（ODS），具有：
- CSS变量 -将令牌设计为自定义属性
- 响应排版 - - - - - -
text-h1通过text-h6公用事业通过顺风插件 - 平台主题 —基于自动色彩适应
NEXT_PUBLIC_APP_TYPE - 断点 - - - - - -
md: 800px，lg: 1280px，xl: 1440px(尝试)
顺风归并配置
这个 cn() 实用程序扩展 tailwind-merge 识别ODS排版类(text-h1–text-h6)作为一个独立的群体，所以他们不冲突 text-color 类:
import { cn } from '@flamingo-stack/openframe-frontend-core/utils'
// text-h5 and text-red-500 coexist correctly
cn('text-h5', 'text-red-500') // => "text-h5 text-red-500"
平台支持
| 平台 | 应用程序类型 | 口音的颜色 |
|---|---|---|
| OpenMSP | openmsp | 黄色(# FFC008) |
| OpenFrame | openframe | 青色(# 5 efaf0) |
| 火烈鸟 | flamingo | 粉色(# FF6B6B) |
| 管理中心 | admin-hub | 粉色(# F357BB) |
| 火烈鸟急转弯 | flamingo-teaser | 粉红色的 |
| TMCG | tmcg | 紫色(# 8 b5cf6) |
平台检测是自动通过 NEXT_PUBLIC_APP_TYPE 环境变量。
开发
# Build the package
npm run build
# Build without type declarations (faster)
npm run build:fast
# Watch mode
npm run dev
# Type checking
npm run type-check
# Run tests
npm run test
# Storybook
npm run storybook
# Publish via yalc (local development)
npm run yalc:push
npm run yalc:watch
体系结构
src/
components/
ui/ # Base components (Button, Card, Input, Modal, Tag, etc.)
features/ # Complex components (YouTubeEmbed, FigmaPrototypeViewer)
icons/ # Centralized icon components
icons-v2-generated/ # Auto-generated icon set
navigation/ # Header, StickySectionNav
toast/ # Toast notification system
hooks/
ui/ # UI hooks (useDebounce, useMediaQuery)
api/ # Data fetching hooks
platform/ # Platform configuration hooks
styles/
index.css # Main stylesheet
ods-*.css # Design token modules
utils/
cn.ts # clsx + tailwind-merge
platform-config.tsx # Unified platform configuration
types/ # TypeScript type definitions
nats/ # NATS WebSocket integration
教程
端到端导览 docs/：
MIGRATING_COMPONENTS.md-如何将组件从hub移动到这个lib（3层模型，桶规则，运行时上下文注入）。EMBEDDING.md-运行时提供程序(EndpointsRuntimeContext，ChatRuntimeContext)用于非hub React应用。EMBEDDING_DOCS_HUB.md——嵌入<DocsHubPage>（侧边栏树+内容+ RAG搜索栏）在第三方应用程序。hub使用相同的组件在/knowledge-base和/data-room.CHAT_EMBEDDING_TUTORIAL.md-嵌入完整<EmbeddableChat>面板（向导+明戈模式）。EMBEDDING_HUBSPOT_MEETINGS.md——嵌入<HubSpotMeetingScheduler>（本土品牌HubSpot预订流）背后的主机代理；包括链接命名约定和代理端点契约。
关键依赖关系
- 18 + / 19反应 -同伴依赖
- 基数UI -可访问的组件原语
- 顺风CSS 3 -样式与自定义设计令牌
- 类别变更授权 -组件变体管理
- 筹划者运动 ——动画
- Lucide反应 ——图标
许可证
用于Flamingo CX项目的私有包。