BloopAI/vibe-kanban-web-companion
1
0
Fork 0
mirror of https://github.com/BloopAI/vibe-kanban-web-companion.git synced 2026-08-23 11:58:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix examples

Browse Source
This commit is contained in:
Louis Knight-Webb
2025-09-26 15:53:35 +01:00
parent 6a58f45694
commit 6295cad54c
11 changed files with 46 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/cra/package.json
View File

@@ -36,6 +36,6 @@
]
},
"devDependencies": {
"click-to-react-component": "workspace:^1.1.2"
"vibe-kanban-web-companion": "workspace:^0.0.1"
}
}
}

4
apps/cra/src/index.js
View File

@@ -1,4 +1,4 @@
import { ClickToComponent } from 'click-to-react-component';
import { VibeKanbanWebCompanion } from 'vibe-kanban-web-companion';
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
@@ -8,7 +8,7 @@ import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<ClickToComponent editor={process.env.REACT_APP_CTC_EDITOR} />
<VibeKanbanWebCompanion />
<App />
</React.StrictMode>
);

4
apps/next/package.json
View File

@@ -15,9 +15,9 @@
"devDependencies": {
"@types/node": "17.0.23",
"@types/react": "18.0.3",
"click-to-react-component": "workspace:^1.1.2",
"vibe-kanban-web-companion": "workspace:^0.0.1",
"eslint": "8.13.0",
"eslint-config-next": "12.1.5",
"typescript": "4.6.3"
}
}
}

4
apps/next/pages/_app.tsx
View File

@@ -1,4 +1,4 @@
import { ClickToComponent } from 'click-to-react-component'
import { VibeKanbanWebCompanion } from 'vibe-kanban-web-companion'
import type { AppProps } from 'next/app'
import '../styles/globals.css'
@@ -6,7 +6,7 @@ import '../styles/globals.css'
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<ClickToComponent editor={process.env.NEXT_PUBLIC_CTC_EDITOR} />
<VibeKanbanWebCompanion />
<Component {...pageProps} />
</>
)

8
apps/remix/app/root.tsx
View File

@@ -1,6 +1,6 @@
import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction, LoaderArgs } from "@remix-run/node";
import { ClickToComponent } from "click-to-react-component";
import { VibeKanbanWebCompanion } from "vibe-kanban-web-companion";
import { json } from "@remix-run/node";
import {
Links,
@@ -21,8 +21,8 @@ export const links: LinksFunction = () => [
];
export const loader = async ({ request }: LoaderArgs) => {
return json({
user: await getUser(request),
return json({
user: await getUser(request),
projectDir: process.env.NODE_ENV === 'production' ? undefined : process.cwd(),
});
};
@@ -43,7 +43,7 @@ export default function App() {
<ScrollRestoration />
<Scripts />
<LiveReload />
<ClickToComponent pathModifier={(path: string) => `${projectDir}/${path}`} />
<VibeKanbanWebCompanion />
</body>
</html>
);

4
apps/remix/package.json
View File

@@ -38,7 +38,7 @@
"@remix-run/serve": "^1.4.1",
"@remix-run/server-runtime": "^1.4.1",
"bcryptjs": "^2.4.3",
"click-to-react-component": "workspace:^1.1.2",
"vibe-kanban-web-companion": "workspace:^0.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tiny-invariant": "^1.2.0"
@@ -87,4 +87,4 @@
"prisma": {
"seed": "ts-node --require tsconfig-paths/register prisma/seed.ts"
}
}
}

4
packages/vibe-kanban-web-companion/package.json
View File

@@ -1,7 +1,7 @@
{
"type": "module",
"name": "vibe-kanban-web-companion",
"version": "0.0.1",
"version": "0.0.3",
"description": "Add point-and-click edit functionality to web apps, when used with [Vibe Kanban](https://vibekanban.com).",
"exports": {
"types": "./src/types.d.ts",
@@ -51,4 +51,4 @@
"eslint-config-react-app": "^7.0.1"
},
"sideEffects": false
}
}

19
packages/vibe-kanban-web-companion/src/ClickToComponent.js → packages/vibe-kanban-web-companion/src/VibeKanbanWebCompanion.js
View File

@@ -1,6 +1,6 @@
/**
* @typedef {import('./types').ClickToComponentProps} Props
* @typedef {import('./types').Coords} Coords
* @typedef {import('./types.js').VibeKanbanWebCompanion} Props
* @typedef {import('./types.js').Coords} Coords
*/
import { FloatingPortal } from '@floating-ui/react-dom-interactions'
@@ -33,7 +33,7 @@ const MESSAGE_VERSION = 1
/**
* Extract component instances data for a target element
* @param {HTMLElement} target
* @param {import('./types').PathModifier} pathModifier
* @param {import('./types.js').PathModifier} pathModifier
* @returns {Array}
*/
function getComponentInstances(target, pathModifier) {
@@ -72,7 +72,7 @@ function getComponentInstances(target, pathModifier) {
* @param {'alt-click'|'context-menu'} args.trigger
* @param {MouseEvent} [args.event]
* @param {HTMLElement} [args.element]
* @param {import('./types').PathModifier} [args.pathModifier]
* @param {import('./types.js').PathModifier} [args.pathModifier]
* @param {string} [args.selectedComponent] - Name of the selected component
*/
function postOpenToParent({ editor, pathToSource, url, trigger, event, element, pathModifier, selectedComponent }) {
@@ -146,7 +146,9 @@ function postOpenToParent({ editor, pathToSource, url, trigger, event, element,
/**
* @param {Props} props
*/
export function ClickToComponent({ editor = 'vscode', pathModifier }) {
export function VibeKanbanWebCompanion() {
const editor = 'vscode' // legacy
const pathModifier = (path) => path // legacy
const [state, setState] = React.useState(
/** @type {State[keyof State]} */
(State.IDLE)
@@ -256,9 +258,14 @@ export function ClickToComponent({ editor = 'vscode', pathModifier }) {
*/
event
) {
// Prevent all default actions when targeting is active
if (state === State.HOVER) {
event.preventDefault()
event.stopPropagation()
}
// Handle targeting mode click (left-click sends message to parent)
if (state === State.HOVER && trigger === Trigger.BUTTON && target instanceof HTMLElement) {
event.preventDefault()
// Notify parent window with component info
postOpenToParent({

4
packages/vibe-kanban-web-companion/src/index.js
View File

@@ -1,4 +1,4 @@
import { ClickToComponent as Component } from './ClickToComponent.js'
import { VibeKanbanWebCompanion as Component } from './VibeKanbanWebCompanion.js'
export const ClickToComponent =
export const VibeKanbanWebCompanion =
process.env.NODE_ENV === 'development' ? Component : () => null

4
packages/vibe-kanban-web-companion/src/types.d.ts vendored
View File

@@ -1,10 +1,10 @@
export { ClickToComponent } from './ClickToComponent'
export { VibeKanbanWebCompanion } from './VibeKanbanWebCompanion'
export type Editor = 'vscode' | 'vscode-insiders' | 'cursor' | string
export type PathModifier = (path: string) => string
export type ClickToComponentProps = {
export type VibeKanbanWebCompanionProps = {
editor?: Editor
pathModifier?: PathModifier
}

26
pnpm-lock.yaml generated
View File

@@ -42,9 +42,9 @@ importers:
specifier: ^2.1.4
version: 2.1.4
devDependencies:
click-to-react-component:
specifier: workspace:^1.1.2
version: link:../../packages/click-to-react-component
vibe-kanban-web-companion:
specifier: workspace:^0.0.1
version: link:../../packages/vibe-kanban-web-companion
apps/next:
dependencies:
@@ -64,9 +64,6 @@ importers:
'@types/react':
specifier: 18.0.3
version: 18.0.3
click-to-react-component:
specifier: workspace:^1.1.2
version: link:../../packages/click-to-react-component
eslint:
specifier: 8.13.0
version: 8.13.0
@@ -76,6 +73,9 @@ importers:
typescript:
specifier: 4.6.3
version: 4.6.3
vibe-kanban-web-companion:
specifier: workspace:^0.0.1
version: link:../../packages/vibe-kanban-web-companion
apps/remix:
dependencies:
@@ -97,9 +97,6 @@ importers:
bcryptjs:
specifier: ^2.4.3
version: 2.4.3
click-to-react-component:
specifier: workspace:^1.1.2
version: link:../../packages/click-to-react-component
react:
specifier: ^17.0.2
version: 17.0.2
@@ -109,6 +106,9 @@ importers:
tiny-invariant:
specifier: ^1.2.0
version: 1.3.3
vibe-kanban-web-companion:
specifier: workspace:^0.0.1
version: link:../../packages/vibe-kanban-web-companion
devDependencies:
'@faker-js/faker':
specifier: ^6.1.1
@@ -219,7 +219,7 @@ importers:
specifier: ^0.8.2
version: 0.8.5(c8@7.14.0)(happy-dom@2.55.0)(jsdom@16.7.0)
packages/click-to-react-component:
packages/vibe-kanban-web-companion:
dependencies:
'@floating-ui/react-dom-interactions':
specifier: ^0.3.1
@@ -13814,7 +13814,7 @@ snapshots:
eslint: 8.13.0
eslint-import-resolver-node: 0.3.4
eslint-import-resolver-typescript: 2.4.0(eslint-plugin-import@2.25.2(eslint@8.13.0))(eslint@8.13.0)
eslint-plugin-import: 2.25.2(@typescript-eslint/parser@5.10.1(eslint@8.13.0)(typescript@4.6.3))(eslint-import-resolver-typescript@2.4.0)(eslint@8.13.0)
eslint-plugin-import: 2.25.2(@typescript-eslint/parser@5.10.1(eslint@8.13.0)(typescript@4.6.3))(eslint-import-resolver-typescript@2.4.0(eslint-plugin-import@2.25.2(eslint@8.13.0))(eslint@8.13.0))(eslint@8.13.0)
eslint-plugin-jsx-a11y: 6.5.1(eslint@8.13.0)
eslint-plugin-react: 7.29.1(eslint@8.13.0)
eslint-plugin-react-hooks: 4.3.0(eslint@8.13.0)
@@ -13910,7 +13910,7 @@ snapshots:
dependencies:
debug: 4.4.3(supports-color@8.1.1)
eslint: 8.13.0
eslint-plugin-import: 2.25.2(@typescript-eslint/parser@5.10.1(eslint@8.13.0)(typescript@4.6.3))(eslint-import-resolver-typescript@2.4.0)(eslint@8.13.0)
eslint-plugin-import: 2.25.2(@typescript-eslint/parser@5.10.1(eslint@8.13.0)(typescript@4.6.3))(eslint-import-resolver-typescript@2.4.0(eslint-plugin-import@2.25.2(eslint@8.13.0))(eslint@8.13.0))(eslint@8.13.0)
glob: 7.2.3
is-glob: 4.0.3
resolve: 1.22.10
@@ -13969,7 +13969,7 @@ snapshots:
lodash: 4.17.21
string-natural-compare: 3.0.1
eslint-plugin-import@2.25.2(@typescript-eslint/parser@5.10.1(eslint@8.13.0)(typescript@4.6.3))(eslint-import-resolver-typescript@2.4.0)(eslint@8.13.0):
eslint-plugin-import@2.25.2(@typescript-eslint/parser@5.10.1(eslint@8.13.0)(typescript@4.6.3))(eslint-import-resolver-typescript@2.4.0(eslint-plugin-import@2.25.2(eslint@8.13.0))(eslint@8.13.0))(eslint@8.13.0):
dependencies:
array-includes: 3.1.9
array.prototype.flat: 1.3.3