@orbit-work/ui 0.1.2-preview.0 → 0.1.2

package/src/components/composite/PptxRenderer/types.ts

@@ -1,326 +0,0 @@
-/**
- * pptxtojson 输出的类型定义
- * 基于 pptxtojson v2.1.0
- */
-
-// ─── Fill Types ───
-
-export interface ColorFill {
-  type: "color"
-  value: string
-}
-
-export interface ImageFillValue {
-  ref: string
-  base64: string
-  blob: string
-  opacity: number
-}
-
-export interface ImageFill {
-  type: "image"
-  value: ImageFillValue
-}
-
-export interface GradientFillValue {
-  path: "line" | "circle" | "rect" | "shape"
-  rot: number
-  colors: { pos: string; color: string }[]
-}
-
-export interface GradientFill {
-  type: "gradient"
-  value: GradientFillValue
-}
-
-export interface PatternFillValue {
-  type: string
-  foregroundColor: string
-  backgroundColor: string
-}
-
-export interface PatternFill {
-  type: "pattern"
-  value: PatternFillValue
-}
-
-export type Fill = ColorFill | ImageFill | GradientFill | PatternFill
-
-// ─── Shared Types ───
-
-export interface Shadow {
-  h: number
-  v: number
-  blur: number
-  color: string
-}
-
-export interface AutoFit {
-  type: "shape" | "text"
-  fontScale?: number
-}
-
-export interface TextInset {
-  l: number
-  t: number
-  r: number
-  b: number
-}
-
-export interface PathViewBox {
-  x: number
-  y: number
-  width: number
-  height: number
-}
-
-export interface LineEnd {
-  type: "none" | "triangle" | "stealth" | "diamond" | "oval" | "arrow"
-  width?: "sm" | "med" | "lg"
-  length?: "sm" | "med" | "lg"
-}
-
-export interface Border {
-  borderColor: string
-  borderWidth: number
-  borderType: "solid" | "dashed" | "dotted"
-}
-
-// ─── Element Types ───
-
-interface BaseElementProps {
-  left: number
-  top: number
-  width: number
-  height: number
-  order: number
-  name?: string
-  link?: string
-}
-
-export interface TextElement extends BaseElementProps {
-  type: "text"
-  borderColor: string
-  borderWidth: number
-  borderType: "solid" | "dashed" | "dotted"
-  borderStrokeDasharray: string
-  shadow?: Shadow
-  fill: Fill
-  isFlipV: boolean
-  isFlipH: boolean
-  isVertical: boolean
-  rotate: number
-  content: string
-  vAlign: string
-  autoFit?: AutoFit
-  textInset?: TextInset
-}
-
-export interface ShapeElement extends BaseElementProps {
-  type: "shape"
-  borderColor: string
-  borderWidth: number
-  borderType: "solid" | "dashed" | "dotted"
-  borderStrokeDasharray: string
-  shadow?: Shadow
-  fill: Fill
-  content: string
-  isFlipV: boolean
-  isFlipH: boolean
-  rotate: number
-  shapType: string
-  vAlign: string
-  path?: string
-  pathViewBox?: PathViewBox
-  headEnd?: LineEnd
-  tailEnd?: LineEnd
-  strokeOnly?: boolean
-  keypoints?: Record<string, number>
-  autoFit?: AutoFit
-  textInset?: TextInset
-}
-
-export interface ImageElement extends BaseElementProps {
-  type: "image"
-  ref: string
-  base64: string
-  blob: string
-  rotate: number
-  isFlipH: boolean
-  isFlipV: boolean
-  rect?: { t?: number; b?: number; l?: number; r?: number }
-  geom: string
-  borderColor: string
-  borderWidth: number
-  borderType: "solid" | "dashed" | "dotted"
-  borderStrokeDasharray: string
-  filters?: {
-    sharpen?: number
-    colorTemperature?: number
-    saturation?: number
-    brightness?: number
-    contrast?: number
-  }
-}
-
-export interface TableCell {
-  text: string
-  rowSpan?: number
-  colSpan?: number
-  vMerge?: number
-  hMerge?: number
-  fillColor?: string
-  fontColor?: string
-  fontBold?: boolean
-  vAlign: string
-  borders: {
-    top?: Border
-    bottom?: Border
-    left?: Border
-    right?: Border
-  }
-}
-
-export interface TableElement extends BaseElementProps {
-  type: "table"
-  data: TableCell[][]
-  borders: {
-    top?: Border
-    bottom?: Border
-    left?: Border
-    right?: Border
-  }
-  rowHeights: number[]
-  colWidths: number[]
-}
-
-export type ChartType =
-  | "lineChart"
-  | "line3DChart"
-  | "barChart"
-  | "bar3DChart"
-  | "pieChart"
-  | "pie3DChart"
-  | "doughnutChart"
-  | "areaChart"
-  | "area3DChart"
-  | "scatterChart"
-  | "bubbleChart"
-  | "radarChart"
-  | "surfaceChart"
-  | "surface3DChart"
-  | "stockChart"
-
-export interface ChartValue {
-  x: string
-  y: number
-}
-
-export interface ChartXLabel {
-  [key: string]: string
-}
-
-export interface ChartItem {
-  key: string
-  values: ChartValue[]
-  xlabels: ChartXLabel
-}
-
-export interface CommonChartElement extends BaseElementProps {
-  type: "chart"
-  data: ChartItem[]
-  colors: string[]
-  chartType: Exclude<ChartType, "scatterChart" | "bubbleChart">
-  barDir?: "bar" | "col"
-  marker?: boolean
-  holeSize?: string
-  grouping?: string
-  style?: string
-}
-
-export interface ScatterChartElement extends BaseElementProps {
-  type: "chart"
-  data: number[][]
-  colors: string[]
-  chartType: "scatterChart" | "bubbleChart"
-}
-
-export type ChartElement = CommonChartElement | ScatterChartElement
-
-export interface VideoElement extends BaseElementProps {
-  type: "video"
-  ref: string
-  blob: string
-}
-
-export interface AudioElement extends BaseElementProps {
-  type: "audio"
-  ref: string
-  blob: string
-}
-
-export interface MathElement extends BaseElementProps {
-  type: "math"
-  latex: string
-  picRef: string
-  picBase64: string
-  picBlob: string
-  text?: string
-}
-
-export interface DiagramElement extends BaseElementProps {
-  type: "diagram"
-  elements: (ShapeElement | TextElement)[]
-  textList: string[]
-}
-
-export interface GroupElement {
-  type: "group"
-  left: number
-  top: number
-  width: number
-  height: number
-  rotate: number
-  elements: PptxElement[]
-  order: number
-  isFlipH: boolean
-  isFlipV: boolean
-}
-
-export type PptxElement =
-  | TextElement
-  | ShapeElement
-  | ImageElement
-  | TableElement
-  | ChartElement
-  | VideoElement
-  | AudioElement
-  | MathElement
-  | DiagramElement
-  | GroupElement
-
-// ─── Slide & Parse Result ───
-
-export interface SlideTransition {
-  type: string
-  duration: number
-  direction: string | null
-}
-
-export interface Slide {
-  fill: Fill
-  elements: PptxElement[]
-  layoutElements: PptxElement[]
-  note: string
-  transition?: SlideTransition | null
-}
-
-export interface PptxParseResult {
-  slides: Slide[]
-  themeColors: string[]
-  usedFonts: string[]
-  size: {
-    width: number
-    height: number
-  }
-}

package/src/components/composite/PptxRenderer/utils.ts

@@ -1,129 +0,0 @@
-import type { CSSProperties } from "react"
-import { PT_TO_PX } from "./constants"
-import type { Fill, GradientFillValue, Shadow } from "./types"
-
-/** pt → px */
-export function ptToPx(pt: number): number {
-  return pt * PT_TO_PX
-}
-
-/** 构建元素的 transform CSS */
-export function buildTransform(rotate?: number, isFlipH?: boolean, isFlipV?: boolean): string | undefined {
-  const parts: string[] = []
-  if (rotate) parts.push(`rotate(${rotate}deg)`)
-  if (isFlipH) parts.push("scaleX(-1)")
-  if (isFlipV) parts.push("scaleY(-1)")
-  return parts.length ? parts.join(" ") : undefined
-}
-
-/**
- * 将 Fill 转为 CSS background。
- *
- * 返回的色值是**文档内容色**（来自 .pptx 里作者定的填充/渐变/图案），属 §2「零裸
- * hex」的第三方内容豁免，禁 tokenize、禁随主题反色；核对说明见 PptxRenderer/index.ts。
- * 唯一由本包决定的兜底是 pattern 缺色时的 --ow-paper 恒定纸面。
- */
-export function fillToCSS(fill?: Fill | null): CSSProperties {
-  if (!fill) return {}
-  switch (fill.type) {
-    case "color":
-      return { background: fill.value }
-    case "image":
-      if (fill.value?.base64) {
-        return {
-          backgroundImage: `url(data:image/png;base64,${fill.value.base64})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          opacity: fill.value.opacity != null ? fill.value.opacity : undefined,
-        }
-      }
-      return {}
-    case "gradient":
-      return { background: buildGradientCSS(fill.value) }
-    case "pattern":
-      return { background: fill.value?.backgroundColor || "var(--ow-paper)" }
-    default:
-      return {}
-  }
-}
-
-/** 构建 CSS gradient 字符串 */
-export function buildGradientCSS(gradient: GradientFillValue): string {
-  if (!gradient?.colors?.length) return "transparent"
-  const stops = gradient.colors.map((c) => `${c.color} ${c.pos}`).join(", ")
-
-  if (gradient.path === "line") {
-    const angle = (gradient.rot ?? 0) + 90
-    return `linear-gradient(${angle}deg, ${stops})`
-  }
-  // radial for circle/rect/shape
-  return `radial-gradient(circle, ${stops})`
-}
-
-/** 构建 SVG 的 fill defs（渐变） */
-export function buildSvgGradient(fill: Fill | undefined | null, id: string): { defs: string; fillAttr: string } {
-  if (!fill) return { defs: "", fillAttr: "none" }
-
-  switch (fill.type) {
-    case "color":
-      return { defs: "", fillAttr: fill.value || "none" }
-    case "gradient": {
-      const { colors, rot, path } = fill.value
-      if (!colors?.length) return { defs: "", fillAttr: "none" }
-      if (path === "line") {
-        // linear gradient in SVG
-        const angle = ((rot ?? 0) * Math.PI) / 180
-        const x1 = 50 - 50 * Math.cos(angle)
-        const y1 = 50 - 50 * Math.sin(angle)
-        const x2 = 50 + 50 * Math.cos(angle)
-        const y2 = 50 + 50 * Math.sin(angle)
-        const stops = colors.map((c) => `<stop offset="${c.pos}" stop-color="${c.color}"/>`).join("")
-        const defs = `<linearGradient id="${id}" x1="${x1}%" y1="${y1}%" x2="${x2}%" y2="${y2}%">${stops}</linearGradient>`
-        return { defs, fillAttr: `url(#${id})` }
-      }
-      // radial
-      const stops = colors.map((c) => `<stop offset="${c.pos}" stop-color="${c.color}"/>`).join("")
-      const defs = `<radialGradient id="${id}" cx="50%" cy="50%" r="50%">${stops}</radialGradient>`
-      return { defs, fillAttr: `url(#${id})` }
-    }
-    case "image":
-      // SVG image fill is complex; fall back to transparent
-      return { defs: "", fillAttr: "transparent" }
-    default:
-      return { defs: "", fillAttr: "none" }
-  }
-}
-
-/** 构建 box-shadow 或 drop-shadow CSS */
-export function shadowToCSS(shadow?: Shadow): CSSProperties {
-  if (!shadow) return {}
-  const { h, v, blur, color } = shadow
-  return {
-    filter: `drop-shadow(${ptToPx(h)}px ${ptToPx(v)}px ${ptToPx(blur)}px ${color})`,
-  }
-}
-
-/** 构建 border CSS */
-export function borderToCSS(borderColor?: string, borderWidth?: number, borderType?: string): CSSProperties {
-  if (!borderWidth || !borderColor) return {}
-  const style = borderType || "solid"
-  return {
-    border: `${ptToPx(borderWidth)}px ${style} ${borderColor}`,
-  }
-}
-
-/** 构建 CSS filter 属性 */
-export function filtersToCSS(filters?: {
-  sharpen?: number
-  colorTemperature?: number
-  saturation?: number
-  brightness?: number
-  contrast?: number
-}): CSSProperties {
-  if (!filters) return {}
-  const parts: string[] = []
-  if (filters.brightness != null) parts.push(`brightness(${1 + filters.brightness / 100})`)
-  if (filters.contrast != null) parts.push(`contrast(${1 + filters.contrast / 100})`)
-  if (filters.saturation != null) parts.push(`saturate(${1 + filters.saturation / 100})`)
-  return parts.length ? { filter: parts.join(" ") } : {}
-}

package/src/components/composite/ProjectSelect/ProjectSelect.stories.tsx

@@ -1,112 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { useState } from "react"
-import { ProjectSelect } from "./index"
-
-const meta = {
-  title: "Composite/ProjectSelect",
-  component: ProjectSelect,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof ProjectSelect>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const sampleProjects = [
-  { value: "proj-1", label: "Website Redesign", sub: "/Users/alice/projects/website" },
-  { value: "proj-2", label: "Mobile App", sub: "/Users/alice/projects/mobile-app" },
-  { value: "proj-3", label: "API Backend", sub: "/Users/alice/projects/api" },
-]
-
-export const Default: Story = {
-  render: () => {
-    const [value, setValue] = useState("proj-1")
-    return <ProjectSelect value={value} options={sampleProjects} onChange={setValue} />
-  },
-}
-
-export const WithCreateAction: Story = {
-  render: () => {
-    const [value, setValue] = useState("proj-1")
-    const [projects, setProjects] = useState(sampleProjects)
-
-    const handleCreate = async (name: string) => {
-      // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-      const newId = `proj-${projects.length + 1}`
-      setProjects([...projects, { value: newId, label: name, sub: `/Users/alice/projects/${name}` }])
-      return newId
-    }
-
-    return <ProjectSelect value={value} options={projects} onChange={setValue} onCreate={handleCreate} />
-  },
-}
-
-export const EmptyList: Story = {
-  render: () => {
-    const [value, setValue] = useState("")
-    const [projects, setProjects] = useState<typeof sampleProjects>([])
-
-    const handleCreate = async (name: string) => {
-      await new Promise((resolve) => setTimeout(resolve, 800))
-      const newId = "proj-1"
-      setProjects([{ value: newId, label: name, sub: `/Users/alice/projects/${name}` }])
-      return newId
-    }
-
-    return (
-      <ProjectSelect
-        value={value}
-        options={projects}
-        onChange={setValue}
-        onCreate={handleCreate}
-        placeholder="创建第一个项目"
-      />
-    )
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    value: "proj-1",
-    options: sampleProjects,
-    onChange: () => {},
-    disabled: true,
-  },
-}
-
-export const LongProjectNames: Story = {
-  render: () => {
-    const [value, setValue] = useState("proj-1")
-    const projects = [
-      {
-        value: "proj-1",
-        label: "Very Long Project Name That Should Be Truncated Properly",
-        sub: "/Users/alice/very-long-path/to/project",
-      },
-      { value: "proj-2", label: "Another Extremely Long Project Name", sub: "/Users/alice/another/long/path" },
-      { value: "proj-3", label: "Short", sub: "/Users/alice/short" },
-    ]
-
-    return <ProjectSelect value={value} options={projects} onChange={setValue} />
-  },
-}
-
-export const CreateWithError: Story = {
-  render: () => {
-    const [value, setValue] = useState("proj-1")
-
-    const handleCreate = async (name: string) => {
-      await new Promise((resolve) => setTimeout(resolve, 800))
-      if (name.toLowerCase().includes("test")) {
-        throw new Error('项目名称不能包含 "test"')
-      }
-      const newId = `proj-${Date.now()}`
-      return newId
-    }
-
-    return <ProjectSelect value={value} options={sampleProjects} onChange={setValue} onCreate={handleCreate} />
-  },
-}

package/src/components/composite/ProjectSelect/ProjectSelectSource.test.mjs

@@ -1,34 +0,0 @@
-import assert from "node:assert/strict"
-import { readFile } from "node:fs/promises"
-import test from "node:test"
-
-const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
-const indexSource = await readFile(new URL("../index.ts", import.meta.url), "utf8")
-
-test("project select creates and immediately selects projects", () => {
-  assert.ok(
-    indexSource.includes('export * from "./ProjectSelect"') ||
-      indexSource.includes('export { ProjectSelect } from "./ProjectSelect"'),
-  )
-  assert.ok(source.includes("onCreate?: (name: string) => Promise<string>"))
-  assert.ok(source.includes("const projectId = await onCreate(name)"))
-  assert.ok(source.includes("onChange(projectId)"))
-  assert.ok(source.includes("autoFocus"))
-  assert.ok(source.includes("isImeEnter(event)"))
-  assert.ok(source.includes('event.key === "Enter"'))
-  assert.ok(source.includes('cause instanceof Error ? cause.message : "创建项目失败，请重试"'))
-  assert.ok(source.includes("disabled={createPending}"))
-})
-
-test("project select keeps options scrollable and creation pinned", () => {
-  assert.ok(source.includes('data-ow-part="footer"'))
-  assert.ok(source.includes("footer={footer}"))
-  assert.ok(source.indexOf('data-ow-part="footer"') > source.indexOf("Select"))
-})
-
-test("project select create action matches the borderless composer action", () => {
-  assert.ok(source.includes('data-ow-part="add"'))
-  assert.ok(source.includes('data-ow-part="add-meta"'))
-  assert.ok(source.includes('variant="ghost"'))
-  assert.ok(source.includes('className="w-full h-auto justify-start'))
-})