npm.io
0.3.1 • Published yesterday

@umamichi-ui/common-components

Licence
MIT
Version
0.3.1
Deps
0
Size
134 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

@umamichi-ui/common-components

以下内容为 LLM 生成，且未经人工检查，请谨慎对待

Umamichi 站点共用的 React UI 组件库，与 @umamichi-ui/common-css 配合使用。

各子模块可单独引用，彼此尽量解耦：

子路径 内容
@umamichi-ui/common-components/presence 进出场动画 hook（不依赖叠层栈）
@umamichi-ui/common-components/overlay 叠层栈、SiteOverlayBackdrop
@umamichi-ui/common-components/icons Chevron、下拉箭头、信息图标
@umamichi-ui/common-components/menu FloatingMenu、MobileActionSheet
@umamichi-ui/common-components/dialog ConfirmDialog、AboutDialog
@umamichi-ui/common-components/styles.css 本库补充样式（overlay、action sheet、about）

依赖图

模块间单向依赖；presence 与 icons 为叶子模块，可被任意上层单独引用。

flowchart TB
  subgraph peer["Peer（消费方安装）"]
    react["react / react-dom"]
    commonCss["@umamichi-ui/common-css"]
  end

  subgraph pkg["@umamichi-ui/common-components"]
    presence["presence<br/>useOverlayPresence"]
    icons["icons<br/>Chevron · DropdownMenuChevron · InfoCircle"]
    overlay["overlay<br/>OverlayStackProvider · SiteOverlayBackdrop"]
    menu["menu<br/>FloatingMenu · MobileActionSheet"]
    dialog["dialog<br/>ConfirmDialog · ConfirmDialogOverlay · AboutDialog"]
    styles["styles.css"]
  end

  react --> presence
  react --> icons
  react --> overlay
  react --> menu
  react --> dialog

  commonCss -.->|"class 名约定"| styles
  styles -.-> overlay
  styles -.-> menu
  styles -.-> dialog

  presence --> overlay
  presence --> menu

  icons --> menu

  overlay --> menu
  overlay --> dialog
从 到 说明
presence overlay SiteOverlayBackdrop 进出场动画
presence menu FloatingMenu 面板淡入（不进叠层栈）
icons menu 下拉箭头；ActionSheet 子菜单 Chevron
overlay menu MobileActionSheet 底部 backdrop
overlay dialog ConfirmDialogOverlay
dialog（内部） — AboutDialog → ConfirmDialog + ConfirmDialogOverlay

无库内依赖： ConfirmDialog（纯 markup 壳）、computeFloatingMenuGeometry、OverlayStackProvider 自身逻辑。

menu 子模块内：FloatingMenu 只走 presence；MobileActionSheet 额外依赖 overlay。

使用

import '@umamichi-ui/common-css';
import '@umamichi-ui/common-components/styles.css';
import { OverlayStackProvider } from '@umamichi-ui/common-components/overlay';

// 根组件
<OverlayStackProvider>
  <App />
</OverlayStackProvider>

MobileActionSheet 与 ConfirmDialogOverlay 需要外层已挂载 OverlayStackProvider。FloatingMenu 仅需 presence hook，不进入叠层栈。

开发

npm install
npm run build

安装（npm 发布后）：

npm install @umamichi-ui/common-components @umamichi-ui/common-css

本地联调可在消费项目中添加：

"@umamichi-ui/common-components": "file:../umamichi-ui/common-components"

发布

npm run build
npm publish --access public

版本记录见 CHANGELOG.md。

Keywords

reactuioverlaymodaldialogumamichi