@open-flow/ui 0.2.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -21
- package/dist/screen-toolbar.js +1 -1
- package/dist/workbench-app.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,40 +1,42 @@
|
|
|
1
1
|
# open-flow
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
A live workbench over the Next.js app you already have — real components, real
|
|
4
|
+
design tokens, real user flows. Nothing is a copy: the viewer imports your
|
|
5
|
+
app's own components, so a preview and the shipped component can never drift,
|
|
6
|
+
because they are the same code.
|
|
7
7
|
|
|
8
8
|
```
|
|
9
9
|
pnpm add -D @open-flow/ui
|
|
10
10
|
```
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
Public and zero-config: any repository installs it with no tokens and no
|
|
13
|
+
registry setup.
|
|
14
14
|
|
|
15
|
-
##
|
|
15
|
+
## The two halves
|
|
16
16
|
|
|
17
|
-
- **`@open-flow/ui`** (
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
- **`@open-flow/ui`** (this repository, open source): the complete viewer —
|
|
18
|
+
design tokens, the component catalog, the flow storyboard with its live
|
|
19
|
+
mirror board, named UI surfaces, the ⌥P overlay for pointing at real pages,
|
|
20
|
+
and the demo-authoring API.
|
|
21
|
+
- **The scan engine** (private): the analyzer that reads your repository and
|
|
22
|
+
produces the map this viewer renders. Distributed separately, under
|
|
23
|
+
authorization from Ecorona LLC.
|
|
23
24
|
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
The viewer consumes the artifacts the engine generates (`.workbench/`); with
|
|
26
|
+
pre-generated artifacts, the viewer mounts on its own.
|
|
26
27
|
|
|
27
|
-
##
|
|
28
|
+
## Development
|
|
28
29
|
|
|
29
30
|
```
|
|
30
31
|
pnpm install
|
|
31
|
-
pnpm build # tsc +
|
|
32
|
+
pnpm build # tsc + minify
|
|
32
33
|
pnpm test # vitest
|
|
33
34
|
pnpm typecheck
|
|
34
35
|
```
|
|
35
36
|
|
|
36
|
-
##
|
|
37
|
+
## License
|
|
37
38
|
|
|
38
|
-
Elastic License 2.0 —
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
Elastic License 2.0 — the source is visible and modifiable; it may not be
|
|
40
|
+
offered as a managed service to third parties, and the separation from the
|
|
41
|
+
gated engine may not be circumvented. See [LICENSE](./LICENSE).
|
|
42
|
+
_(Text pending legal review by Ecorona LLC.)_
|
package/dist/screen-toolbar.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import{useViewerConfig as
|
|
1
|
+
"use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import{useViewerConfig as w}from"./config-context";import{cx as d}from"./cx";import{workbenchUrl as C}from"./manifest";const N="rounded-md border border-zinc-300 px-2 py-1 text-[11px] font-medium text-zinc-600 hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800",j="auto";function s({options:n,value:a,onChange:o,disabled:t=!1,disabledReason:i}){return e("div",{className:d("flex rounded-md border border-zinc-300 p-0.5 dark:border-zinc-700",t&&"opacity-40"),title:t?i:void 0,children:n.map(r=>e("button",{type:"button",disabled:t,onClick:()=>o(r.id),title:t?i:r.note??void 0,className:d("rounded px-2 py-1 text-[11px] font-medium transition-colors",r.id===a?"bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900":"text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"),children:r.label},String(r.id)))})}function b({label:n,children:a}){return c("span",{className:"flex items-center gap-1.5",children:[e("span",{className:"text-[10px] font-medium uppercase tracking-wider text-zinc-400 dark:text-zinc-500",children:n}),a]})}const A=[{id:"fit",label:"Ajustar"},{id:.5,label:"50%"},{id:.75,label:"75%"},{id:1,label:"100%"}],E=[{id:"light",label:"Claro"},{id:"dark",label:"Oscuro"},{id:"split",label:"Ambos"}];function _({viewport:n,onViewport:a,zoom:o,onZoom:t,theme:i,onTheme:r,hint:m,actions:y,identity:x,backHref:u,zoomEnabled:S=!0,editing:p,onToggleEdit:z,pinCount:h,onOpenRequest:f,isolatedBase:g}){const k=w(),v=g?C(k,"",new URLSearchParams({...g,vp:n,zoom:String(o),theme:i,chrome:"off"})):null;return c("div",{className:"flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-zinc-200 bg-white px-6 py-2 dark:border-zinc-700 dark:bg-zinc-900",children:[u&&e("a",{href:u,className:"rounded-md px-2 py-1 text-[11px] font-medium text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-100",children:"\u2190 Open-Flow"}),x&&e("span",{className:"max-w-[16rem] truncate rounded bg-zinc-100 px-2 py-1 font-mono text-[11px] text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300",children:x}),e(b,{label:"Tama\xF1o",children:e(s,{value:n,onChange:a,options:[{id:j,label:"Auto"},...k.viewports.map(l=>({id:l.id,label:l.label,note:l.note}))]})}),e(b,{label:"Zoom",children:e(s,{value:o,onChange:t,options:A,disabled:!S,disabledReason:"En Auto el componente se dibuja en l\xEDnea, sin cuadro que escalar."})}),e(b,{label:"Tema",children:e(s,{value:i,onChange:r,options:E})}),y,c("span",{className:"ml-auto flex items-center gap-2",children:[z&&e("button",{type:"button",onClick:z,className:d("rounded-md px-2 py-1 text-[11px] font-medium transition-colors",p?"bg-amber-400 text-amber-950":"border border-zinc-300 text-zinc-600 hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"),title:"Se\xF1alar elementos (E)",children:p?"Editando \u25CF":"Editar"}),f&&c("button",{type:"button",onClick:f,className:N,children:["Solicitud",(h??0)>0?` (${h})`:""]}),v&&e("a",{href:v,target:"_blank",rel:"noreferrer",className:N,title:"Sin cromo, en una pesta\xF1a nueva",children:"Abrir aislado \u2197"})]}),m&&e("p",{className:"basis-full text-[11px] leading-snug text-zinc-500 dark:text-zinc-400",children:m})]})}export{j as AUTO,N as CHIP,_ as ScreenToolbar,s as SegmentedControl};
|
package/dist/workbench-app.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as n,jsxs as o,Fragment as
|
|
1
|
+
"use client";import{jsx as n,jsxs as o,Fragment as O}from"react/jsx-runtime";import{useMemo as x,useState as d}from"react";import{ManifestProvider as R}from"./config-context";import{cx as m}from"./cx";import{EditSessionOverlay as _,useEditSession as A}from"./edit-session";import{buildComponentIndex as D}from"./hover-inspect";import{byGroup as H,flowById as V,groupLabel as Z}from"./manifest";import{ComponentsPanel as q}from"./panels/components";import{ElementsPanel as G}from"./panels/elements";import{FlowsPanel as K}from"./panels/flows";import{SurfacesPanel as W}from"./panels/surfaces";import{TicketDrawer as $}from"./ticket-drawer";import{VerdictBadge as J}from"./component-preview";const w=[{id:"elementos",label:"Elementos"},{id:"componentes",label:"Componentes"},{id:"flujos",label:"Flujos"},{id:"superficies",label:"Superficies"}];function Q(e){return w.some(r=>r.id===e)&&e?e:"componentes"}function U(e){if(e==="fit")return"fit";const r=Number(e);return r===.5||r===.75||r===1?r:void 0}function X(e){return e==="light"||e==="dark"||e==="split"?e:void 0}function me({manifest:e,registry:r,tickets:N,view:i,onCreateTicket:C}){const[s,v]=d(Q(i.tab)),[F,j]=d(i.component??e.components[0]?.id),[E,I]=d(i.flow??e.flows[0]?.id),[S,P]=d(i.surface??e.surfaces[0]?.id),[h,T]=d(""),c=A({bareKeys:!0}),B=x(()=>D(e.components),[e.components]),g=i.chrome!=="off",u=e.components.find(t=>t.id===F)??e.components[0],l=V(e.flows,E),b=e.surfaces.find(t=>t.id===S)??e.surfaces[0],z={componentIndex:B,editing:c.editing,onPin:c.addPin,onHover:c.setHovering,onToggleEdit:c.toggleEditing,pinCount:c.pins.length,onOpenRequest:c.openDrawer,showChrome:g,initialViewport:i.vp,initialZoom:U(i.zoom),initialTheme:X(i.theme)},p=h.trim().toLowerCase(),k=x(()=>p?e.components.filter(t=>t.name.toLowerCase().includes(p)||t.file.toLowerCase().includes(p)):e.components,[e.components,p]),y=x(()=>H(k),[k]),L=s==="elementos"?n(G,{}):s==="flujos"?l?n(K,{flow:l,...z},l.id):n(f,{what:"recorridos",hint:"El rastreador no encontr\xF3 enlaces entre p\xE1ginas."}):s==="superficies"?b?n(W,{surface:b,tickets:N}):n(f,{what:"superficies",hint:"Nada bajo el directorio de la app importa una cabecera, un rail o una barra lateral."}):u?n(q,{entry:u,registry:r,...z}):n(f,{what:"componentes",hint:"Revisa `componentRoots` en workbench.config.json."});return o(R,{manifest:e,children:[o("div",{className:"fixed inset-0 flex bg-white text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100",children:[g&&o("nav",{className:"flex w-64 shrink-0 flex-col border-r border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900",children:[o("header",{className:"border-b border-zinc-200 px-4 py-3 dark:border-zinc-700",children:[n("h1",{className:"text-sm font-semibold",title:e.config.subtitle,children:"Open-Flow"}),n("p",{className:"mt-0.5 text-[11px] leading-snug text-zinc-500 dark:text-zinc-400",children:e.config.title})]}),n("div",{className:"flex flex-wrap gap-1 border-b border-zinc-200 p-2 dark:border-zinc-700",children:w.map(t=>n("button",{type:"button",onClick:()=>v(t.id),className:m("rounded px-2 py-1 text-[11px] font-medium",t.id===s?"bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900":"text-zinc-600 hover:bg-zinc-200 dark:text-zinc-300 dark:hover:bg-zinc-800"),children:t.label},t.id))}),o("div",{className:"min-h-0 flex-1 overflow-auto p-2",children:[s==="componentes"&&o(O,{children:[n("input",{value:h,onChange:t=>T(t.target.value),placeholder:`Filtrar ${e.components.length}\u2026`,className:"mb-2 w-full rounded border border-zinc-300 px-2 py-1 text-[11px] dark:border-zinc-700 dark:bg-zinc-800"}),y.map(([t,M])=>o("section",{className:"mb-3",children:[n("h2",{className:"px-1 pb-1 text-[10px] font-medium uppercase tracking-wider text-zinc-400",children:Z(e.config,t)}),M.map(a=>o("button",{type:"button",onClick:()=>j(a.id),className:m("flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-[12px]",a.id===u?.id?"bg-zinc-200 font-medium dark:bg-zinc-800":"text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"),children:[n("span",{className:"truncate",children:a.name}),a.verdict!=="auto"&&n("span",{className:"ml-auto shrink-0",children:n(J,{verdict:a.verdict})})]},a.id))]},t))]}),s==="flujos"&&e.flows.map(t=>n("button",{type:"button",onClick:()=>I(t.id),className:m("block w-full truncate rounded px-2 py-1 text-left text-[12px]",t.id===l?.id?"bg-zinc-200 font-medium dark:bg-zinc-800":"text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"),children:t.title},t.id)),s==="superficies"&&e.surfaces.map(t=>n("button",{type:"button",onClick:()=>P(t.id),className:m("block w-full truncate rounded px-2 py-1 text-left text-[12px]",t.id===b?.id?"bg-zinc-200 font-medium dark:bg-zinc-800":"text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"),children:t.label},t.id))]}),o("footer",{className:"border-t border-zinc-200 px-3 py-2 text-[10px] text-zinc-400 dark:border-zinc-700",children:[e.stats.filesScanned," archivos \xB7 ",e.stats.elapsedMs," ms \xB7"," ",e.generatedBy,e.stats.parseFailures.length>0&&o("span",{className:"block text-amber-600 dark:text-amber-400",children:[e.stats.parseFailures.length," archivos no se analizaron"]})]})]}),n("main",{className:"min-w-0 flex-1",children:L})]}),n(_,{session:c}),n($,{session:c,surfaces:e.surfaces.map(t=>({id:t.id,label:t.label,weight:t.weight,predictedFileCount:t.predictedFiles.length})),onCreate:C})]})}function f({what:e,hint:r}){return n("div",{className:"flex h-full items-center justify-center p-10",children:o("p",{className:"max-w-sm text-center text-sm text-zinc-500 dark:text-zinc-400",children:["No se encontraron ",e,". ",r]})})}export{me as WorkbenchApp};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@open-flow/ui",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.3.1",
|
|
4
|
+
"description": "A live workbench over your Next.js app — real components, tokens, and flows. The open-flow viewer, open source.",
|
|
5
5
|
"license": "Elastic-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|