@teleporthq/teleport-project-generator-next 0.43.13 → 0.43.15

package/__tests__/analytics-project-plugin.test.ts

@@ -0,0 +1,132 @@
+import { parse } from '@babel/parser'
+import { FileType, ProjectPluginStructure } from '@teleporthq/teleport-types'
+import { NextAnalyticsProjectPlugin } from '../src/analytics/project-plugin'
+
+const APP_CONTENT = `import { GlobalProvider } from '../global-context'
+
+const MyApp = ({ Component, pageProps }) => {
+  return (
+    <GlobalProvider>
+      <Component {...pageProps} />
+    </GlobalProvider>
+  )
+}
+
+export default MyApp
+`
+
+function makeStructure(analyticsEnabled: boolean): ProjectPluginStructure {
+  const files = new Map()
+  files.set('_app', {
+    path: ['pages'],
+    files: [{ name: '_app', fileType: FileType.JS, content: APP_CONTENT }],
+  })
+
+  return {
+    uidl: {
+      name: 'test-project',
+      globals: { settings: { title: 'Test', language: 'en' }, assets: [] },
+      root: {} as never,
+      ...(analyticsEnabled ? { analytics: { enabled: true } } : {}),
+    },
+    files,
+    dependencies: {},
+    devDependencies: {},
+    template: { files: [], subFolders: [] },
+  } as unknown as ProjectPluginStructure
+}
+
+describe('NextAnalyticsProjectPlugin', () => {
+  it('does nothing when analytics is not enabled', async () => {
+    const plugin = new NextAnalyticsProjectPlugin()
+    const structure = makeStructure(false)
+
+    await plugin.runAfter(structure)
+
+    expect(structure.files.has('teleport-analytics-lib')).toBe(false)
+    expect(structure.files.has('teleport-analytics-tracker')).toBe(false)
+
+    const appFile = structure.files.get('_app').files[0]
+    expect(appFile.content).not.toContain('AnalyticsTracker')
+  })
+
+  it('emits the tracker lib + component and wires the env placeholders', async () => {
+    const plugin = new NextAnalyticsProjectPlugin()
+    const structure = makeStructure(true)
+
+    await plugin.runAfter(structure)
+
+    const lib = structure.files.get('teleport-analytics-lib')
+    expect(lib.path).toEqual(['lib'])
+    expect(lib.files[0].name).toBe('teleport-analytics')
+    expect(lib.files[0].content).toContain('NEXT_PUBLIC_TELEPORT_ANALYTICS_URL')
+    expect(lib.files[0].content).toContain('initTeleportAnalytics')
+    expect(lib.files[0].content).toContain('sendBeacon')
+    expect(lib.files[0].content).toContain("localStorage.getItem('cookieConsent')")
+
+    // Beacons/batches must use the CORS-safelisted text/plain content type so
+    // unload sends are preflight-free and survive a closing tab.
+    expect(lib.files[0].content).toContain('text/plain;charset=UTF-8')
+    expect(lib.files[0].content).not.toContain("type: 'application/json'")
+    expect(lib.files[0].content).not.toContain("'Content-Type': 'application/json'")
+
+    const tracker = structure.files.get('teleport-analytics-tracker')
+    expect(tracker.path).toEqual(['components', 'analytics'])
+    expect(tracker.files[0].content).toContain('routeChangeComplete')
+
+    expect(structure.uidl.globals.env).toEqual({
+      NEXT_PUBLIC_TELEPORT_ANALYTICS_URL: 'teleporthq.secrets.NEXT_PUBLIC_TELEPORT_ANALYTICS_URL',
+      NEXT_PUBLIC_TELEPORT_ANALYTICS_KEY: 'teleporthq.secrets.NEXT_PUBLIC_TELEPORT_ANALYTICS_KEY',
+    })
+  })
+
+  it('injects <AnalyticsTracker /> into _app as a fragment sibling', async () => {
+    const plugin = new NextAnalyticsProjectPlugin()
+    const structure = makeStructure(true)
+
+    await plugin.runAfter(structure)
+
+    const appFile = structure.files.get('_app').files[0]
+    expect(appFile.content).toContain(
+      "import AnalyticsTracker from '../components/analytics/AnalyticsTracker'"
+    )
+    expect(appFile.content).toContain('<AnalyticsTracker /></>')
+    expect(appFile.content).toContain('<>')
+    // Idempotent: a second run must not double-inject
+    await plugin.runAfter(structure)
+    const occurrences = appFile.content.split('<AnalyticsTracker />').length - 1
+    expect(occurrences).toBe(1)
+  })
+
+  it('produces a still-parseable _app after the string surgery', async () => {
+    const plugin = new NextAnalyticsProjectPlugin()
+    const structure = makeStructure(true)
+
+    await plugin.runAfter(structure)
+
+    const appFile = structure.files.get('_app').files[0]
+    // The fragment wrap is raw string manipulation — guarantee it never emits
+    // invalid JSX that would silently blank the deployed app.
+    expect(() =>
+      parse(appFile.content, {
+        sourceType: 'module',
+        plugins: ['jsx'],
+      })
+    ).not.toThrow()
+  })
+
+  it('preserves env values already set by the GUI mapper', async () => {
+    const plugin = new NextAnalyticsProjectPlugin()
+    const structure = makeStructure(true)
+    structure.uidl.globals.env = {
+      NEXT_PUBLIC_TELEPORT_ANALYTICS_URL: 'teleporthq.secrets.NEXT_PUBLIC_TELEPORT_ANALYTICS_URL',
+      NEXT_PUBLIC_TELEPORT_ANALYTICS_KEY: 'teleporthq.secrets.NEXT_PUBLIC_TELEPORT_ANALYTICS_KEY',
+      OTHER_KEY: 'value',
+    }
+
+    await plugin.runAfter(structure)
+
+    expect(Object.keys(structure.uidl.globals.env)).toHaveLength(3)
+    expect(structure.uidl.globals.env.OTHER_KEY).toBe('value')
+  })
+})

package/__tests__/calendarkit-end2end.test.ts

@@ -0,0 +1,98 @@
+import { GeneratedFolder, ProjectUIDL } from '@teleporthq/teleport-types'
+import uidlSample from '../../../examples/test-samples/project-sample.json'
+import { createNextProjectGenerator } from '../src'
+import NextTemplate from '../src/project-template'
+
+// The production template (react ^17) — the same one the GUI publish path
+// feeds into packProject, so the react bump is asserted against real deps.
+const template = JSON.parse(JSON.stringify(NextTemplate)) as GeneratedFolder
+
+const CALENDAR_ELEMENT_NODE = {
+  type: 'element',
+  content: {
+    elementType: 'BasicScheduler',
+    name: 'calendar',
+    dependency: {
+      type: 'package',
+      path: 'calendarkit-basic',
+      version: '1.1.0',
+      meta: { namedImport: true },
+    },
+    attrs: {
+      view: { type: 'static', content: 'month' },
+      weekStartsOn: { type: 'static', content: 1 },
+      events: {
+        type: 'static',
+        content: [
+          {
+            id: '1',
+            title: 'Team Meeting',
+            start: '2026-06-15T09:00:00',
+            end: '2026-06-15T10:30:00',
+          },
+        ],
+      },
+    },
+    children: [],
+  },
+}
+
+const buildUidlWithCalendar = (): ProjectUIDL => {
+  const uidl = JSON.parse(JSON.stringify(uidlSample)) as ProjectUIDL
+  const indexPage = (uidl.root.node.content.children || []).find(
+    (child) =>
+      child.type === 'conditional' && (child.content as { value?: string }).value === 'index'
+  )
+  const pageElement = (indexPage as { content: { node: { content: { children: unknown[] } } } })
+    .content.node.content
+  pageElement.children.push(CALENDAR_ELEMENT_NODE)
+  return uidl
+}
+
+const findFile = (folder: GeneratedFolder, folderName: string, fileName: string) =>
+  folder.subFolders
+    .find((sub) => sub.name === folderName)
+    ?.files.find((file) => file.name === fileName)
+
+describe('Next generator with a CalendarKit calendar element', () => {
+  const generator = createNextProjectGenerator()
+
+  it('generates the calendar page, bumps react and ships the precompiled stylesheet', async () => {
+    const outputFolder = await generator.generateProject(buildUidlWithCalendar(), template)
+
+    const packageFile = outputFolder.files.find((file) => file.name === 'package')
+    const packageJson = JSON.parse(packageFile?.content || '{}')
+    expect(packageJson.dependencies['calendarkit-basic']).toBe('1.1.0')
+    expect(packageJson.dependencies.react).toBe('^18.3.1')
+    expect(packageJson.dependencies['react-dom']).toBe('^18.3.1')
+    expect(packageJson.dependencies.next).toBe('^12.1.10')
+
+    const indexPage = findFile(outputFolder, 'pages', 'index')
+    expect(indexPage?.content).toContain("import { BasicScheduler } from 'calendarkit-basic'")
+    expect(indexPage?.content).toContain('new Date(e.start)')
+    expect(indexPage?.content).toContain('new Date(e.end)')
+
+    const cssFile = findFile(outputFolder, 'pages', 'calendarkit')
+    expect(cssFile?.fileType).toBe('css')
+    expect(cssFile?.content).toContain(':root')
+    expect(cssFile?.content).not.toContain('@tailwind')
+
+    const appFile = findFile(outputFolder, 'pages', '_app')
+    expect(appFile?.content).toContain("import './calendarkit.css'")
+  })
+
+  it('leaves react untouched for projects without a calendar', async () => {
+    const outputFolder = await generator.generateProject(
+      JSON.parse(JSON.stringify(uidlSample)) as ProjectUIDL,
+      template
+    )
+
+    const packageFile = outputFolder.files.find((file) => file.name === 'package')
+    const packageJson = JSON.parse(packageFile?.content || '{}')
+    expect(packageJson.dependencies['calendarkit-basic']).toBeUndefined()
+    expect(packageJson.dependencies.react).toBe('^17.0.2')
+
+    const pagesFolder = outputFolder.subFolders.find((sub) => sub.name === 'pages')
+    expect(pagesFolder?.files.find((file) => file.name === 'calendarkit')).toBeUndefined()
+  })
+})

package/__tests__/calendarkit-project-plugin.test.ts

@@ -0,0 +1,99 @@
+import { FileType, InMemoryFileRecord, ProjectPluginStructure } from '@teleporthq/teleport-types'
+import { NextCalendarKitProjectPlugin } from '../src/calendar/project-plugin'
+import { CALENDARKIT_CSS } from '../src/calendar/calendarkit-css'
+
+const APP_CONTENT = `import './style.css'
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+`
+
+const buildStructure = (
+  dependencies: Record<string, string>,
+  withAppFile = true
+): ProjectPluginStructure => {
+  const files = new Map<string, InMemoryFileRecord>()
+  if (withAppFile) {
+    files.set('_app', {
+      path: ['pages'],
+      files: [{ name: '_app', fileType: FileType.JS, content: APP_CONTENT }],
+    })
+  }
+
+  return {
+    files,
+    dependencies,
+    devDependencies: {},
+  } as unknown as ProjectPluginStructure
+}
+
+describe('NextCalendarKitProjectPlugin', () => {
+  const plugin = new NextCalendarKitProjectPlugin()
+
+  it('is a no-op for projects without calendarkit-basic', async () => {
+    const structure = buildStructure({ react: '^17.0.2' })
+
+    await plugin.runAfter(structure)
+
+    expect(structure.dependencies.react).toBe('^17.0.2')
+    expect(structure.files.has('calendarkit-css')).toBe(false)
+    const appFile = structure.files.get('_app')?.files[0]
+    expect(appFile?.content).toBe(APP_CONTENT)
+  })
+
+  it('bumps react/react-dom, writes the stylesheet and imports it from _app', async () => {
+    const structure = buildStructure({
+      react: '^17.0.2',
+      'react-dom': '^17.0.2',
+      'calendarkit-basic': '1.1.0',
+    })
+
+    await plugin.runAfter(structure)
+
+    expect(structure.dependencies.react).toBe('^18.3.1')
+    expect(structure.dependencies['react-dom']).toBe('^18.3.1')
+
+    const cssRecord = structure.files.get('calendarkit-css')
+    expect(cssRecord?.path).toEqual(['pages'])
+    expect(cssRecord?.files[0]).toEqual({
+      name: 'calendarkit',
+      fileType: FileType.CSS,
+      content: CALENDARKIT_CSS,
+    })
+
+    const appContent = structure.files.get('_app')?.files[0].content as string
+    expect(appContent).toContain("import './calendarkit.css'")
+    expect(appContent.indexOf("import './calendarkit.css'")).toBeLessThan(
+      appContent.indexOf("import './style.css'")
+    )
+  })
+
+  it('is idempotent when run twice', async () => {
+    const structure = buildStructure({ 'calendarkit-basic': '1.1.0' })
+
+    await plugin.runAfter(structure)
+    await plugin.runAfter(structure)
+
+    const appContent = structure.files.get('_app')?.files[0].content as string
+    expect(appContent.match(/import '\.\/calendarkit\.css'/g)).toHaveLength(1)
+  })
+
+  it('still adds the stylesheet when no _app file exists', async () => {
+    const structure = buildStructure({ 'calendarkit-basic': '1.1.0' }, false)
+
+    await plugin.runAfter(structure)
+
+    expect(structure.files.has('calendarkit-css')).toBe(true)
+    expect(structure.dependencies.react).toBe('^18.3.1')
+  })
+
+  it('ships CSS with no tailwind directives and no global resets', () => {
+    expect(CALENDARKIT_CSS).not.toContain('@tailwind')
+    expect(CALENDARKIT_CSS).not.toMatch(/(^|\})\*\{/)
+    expect(CALENDARKIT_CSS).not.toMatch(/(^|\})body\{/)
+    expect(CALENDARKIT_CSS).toContain(':root')
+    expect(CALENDARKIT_CSS).toContain('.dark')
+    expect(CALENDARKIT_CSS).toContain('grid-cols-7')
+  })
+})

package/__tests__/dragdrop-kanban-end2end.test.ts

@@ -0,0 +1,176 @@
+import { GeneratedFolder, ProjectUIDL } from '@teleporthq/teleport-types'
+import uidlSample from '../../../examples/test-samples/project-sample.json'
+import { createNextProjectGenerator } from '../src'
+import NextTemplate from '../src/project-template'
+
+// The production template (react ^17) — the same one the GUI publish path
+// feeds into packProject.
+const template = JSON.parse(JSON.stringify(NextTemplate)) as GeneratedFolder
+
+const textChild = (content: string) => ({ type: 'static', content })
+
+const DRAG_AREA_NODE = {
+  type: 'element',
+  content: {
+    elementType: 'thq-drag-area',
+    name: 'tasks-drag-area',
+    children: [
+      {
+        type: 'element',
+        content: {
+          elementType: 'thq-droppable',
+          name: 'todo-zone',
+          attrs: { dropId: { type: 'static', content: 'todo' } },
+          children: [
+            {
+              type: 'element',
+              content: {
+                elementType: 'thq-draggable',
+                name: 'task-card',
+                attrs: { dragId: { type: 'static', content: 'task-1' } },
+                children: [textChild('Write the report')],
+              },
+            },
+          ],
+        },
+      },
+      {
+        type: 'element',
+        content: {
+          elementType: 'thq-droppable',
+          name: 'done-zone',
+          attrs: { dropId: { type: 'static', content: 'done' } },
+          children: [],
+        },
+      },
+    ],
+  },
+}
+
+const SORTABLE_NODE = {
+  type: 'element',
+  content: {
+    elementType: 'thq-sortable',
+    name: 'priority-list',
+    attrs: { direction: { type: 'static', content: 'vertical' } },
+    children: [
+      {
+        type: 'element',
+        content: {
+          elementType: 'thq-sortable-item',
+          name: 'priority-item',
+          children: [textChild('First priority')],
+        },
+      },
+      {
+        type: 'element',
+        content: {
+          elementType: 'thq-sortable-item',
+          name: 'priority-item-2',
+          children: [textChild('Second priority')],
+        },
+      },
+    ],
+  },
+}
+
+const KANBAN_NODE = {
+  type: 'element',
+  content: {
+    elementType: 'kanban-node',
+    name: 'project-board',
+    attrs: {
+      board: {
+        type: 'static',
+        content: {
+          columns: [
+            {
+              id: 'todo',
+              title: 'To Do',
+              cards: [{ id: '1', title: 'Design review', description: 'Review mockups' }],
+            },
+            { id: 'done', title: 'Done', cards: [] },
+          ],
+        },
+      },
+      disableColumnDrag: { type: 'static', content: true },
+    },
+    children: [],
+  },
+}
+
+const buildUidl = (): ProjectUIDL => {
+  const uidl = JSON.parse(JSON.stringify(uidlSample)) as ProjectUIDL
+  const indexPage = (uidl.root.node.content.children || []).find(
+    (child) =>
+      child.type === 'conditional' && (child.content as { value?: string }).value === 'index'
+  )
+  const pageElement = (indexPage as { content: { node: { content: { children: unknown[] } } } })
+    .content.node.content
+  pageElement.children.push(DRAG_AREA_NODE, SORTABLE_NODE, KANBAN_NODE)
+  return uidl
+}
+
+const findFile = (folder: GeneratedFolder, folderName: string, fileName: string) =>
+  folder.subFolders
+    .find((sub) => sub.name === folderName)
+    ?.files.find((file) => file.name === fileName)
+
+describe('Next generator with drag-and-drop and kanban primitives', () => {
+  const generator = createNextProjectGenerator()
+
+  it('generates the wrapper components, page imports and dependencies', async () => {
+    const outputFolder = await generator.generateProject(buildUidl(), template)
+
+    const packageFile = outputFolder.files.find((file) => file.name === 'package')
+    const packageJson = JSON.parse(packageFile?.content || '{}')
+    expect(packageJson.dependencies['@dnd-kit/core']).toBe('^6.3.1')
+    expect(packageJson.dependencies['@dnd-kit/sortable']).toBe('^10.0.0')
+    expect(packageJson.dependencies['@dnd-kit/utilities']).toBe('^3.2.2')
+    expect(packageJson.dependencies['@asseinfo/react-kanban']).toBe('2.2.0')
+    // Neither library requires a react bump on its own.
+    expect(packageJson.dependencies.react).toBe('^17.0.2')
+
+    const dragDropComponent = findFile(outputFolder, 'components', 'tq-drag-drop')
+    expect(dragDropComponent?.content).toContain('export const TqDragArea')
+    expect(dragDropComponent?.content).toContain("from '@dnd-kit/core'")
+
+    const kanbanComponent = findFile(outputFolder, 'components', 'tq-kanban')
+    expect(kanbanComponent?.content).toContain('initialBoard')
+    expect(kanbanComponent?.content).toContain('ssr: false')
+
+    const indexPage = findFile(outputFolder, 'pages', 'index')
+    expect(indexPage?.content).toContain('TqDragArea')
+    expect(indexPage?.content).toContain('TqDraggable')
+    expect(indexPage?.content).toContain('TqDroppable')
+    expect(indexPage?.content).toContain('TqSortable')
+    expect(indexPage?.content).toContain("from '../components/tq-drag-drop'")
+    expect(indexPage?.content).toContain('TqKanban')
+    expect(indexPage?.content).toContain("from '../components/tq-kanban'")
+    expect(indexPage?.content).toContain('dragId="task-1"')
+    expect(indexPage?.content).toContain('dropId="todo"')
+
+    const npmrc = outputFolder.files.find((file) => file.name === '.npmrc')
+    expect(npmrc?.content).toContain('legacy-peer-deps=true')
+
+    const appFile = findFile(outputFolder, 'pages', '_app')
+    expect(appFile?.content).toContain("import '@asseinfo/react-kanban/dist/styles.css'")
+  })
+
+  it('emits none of the wrappers for projects without these primitives', async () => {
+    const outputFolder = await generator.generateProject(
+      JSON.parse(JSON.stringify(uidlSample)) as ProjectUIDL,
+      JSON.parse(JSON.stringify(NextTemplate)) as GeneratedFolder
+    )
+
+    const componentsFolder = outputFolder.subFolders.find((sub) => sub.name === 'components')
+    expect(componentsFolder?.files.find((file) => file.name === 'tq-drag-drop')).toBeUndefined()
+    expect(componentsFolder?.files.find((file) => file.name === 'tq-kanban')).toBeUndefined()
+    expect(outputFolder.files.find((file) => file.name === '.npmrc')).toBeUndefined()
+
+    const packageFile = outputFolder.files.find((file) => file.name === 'package')
+    const packageJson = JSON.parse(packageFile?.content || '{}')
+    expect(packageJson.dependencies['@dnd-kit/core']).toBeUndefined()
+    expect(packageJson.dependencies['@asseinfo/react-kanban']).toBeUndefined()
+  })
+})

package/__tests__/dragdrop-kanban-project-plugins.test.ts

@@ -0,0 +1,144 @@
+import {
+  FileType,
+  InMemoryFileRecord,
+  ProjectPluginStructure,
+  ProjectUIDL,
+  UIDLElementNode,
+} from '@teleporthq/teleport-types'
+import { NextDragDropProjectPlugin } from '../src/drag-drop/project-plugin'
+import { NextKanbanProjectPlugin } from '../src/kanban/project-plugin'
+
+const APP_CONTENT = `import './style.css'
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+`
+
+const elementNode = (elementType: string, children: UIDLElementNode[] = []): UIDLElementNode => ({
+  type: 'element',
+  content: {
+    elementType,
+    children,
+  },
+})
+
+const buildStructure = (pageChildren: UIDLElementNode[]): ProjectPluginStructure => {
+  const files = new Map<string, InMemoryFileRecord>()
+  files.set('_app', {
+    path: ['pages'],
+    files: [{ name: '_app', fileType: FileType.JS, content: APP_CONTENT }],
+  })
+
+  const uidl = {
+    name: 'test',
+    root: {
+      name: 'App',
+      node: elementNode('container', pageChildren),
+    },
+    components: {},
+  } as unknown as ProjectUIDL
+
+  return {
+    uidl,
+    files,
+    dependencies: {},
+    devDependencies: {},
+  } as unknown as ProjectPluginStructure
+}
+
+describe('NextDragDropProjectPlugin', () => {
+  const plugin = new NextDragDropProjectPlugin()
+
+  it('is a no-op for projects without drag-and-drop primitives', async () => {
+    const structure = buildStructure([elementNode('container')])
+
+    await plugin.runAfter(structure)
+
+    expect(structure.files.has('tq-drag-drop-component')).toBe(false)
+    expect(structure.dependencies['@dnd-kit/core']).toBeUndefined()
+  })
+
+  it.each(['thq-drag-area', 'thq-draggable', 'thq-droppable', 'thq-sortable', 'thq-sortable-item'])(
+    'emits the wrapper file and dnd-kit deps when %s is used',
+    async (primitive) => {
+      const structure = buildStructure([elementNode(primitive)])
+
+      await plugin.runAfter(structure)
+
+      const record = structure.files.get('tq-drag-drop-component')
+      expect(record?.path).toEqual(['components'])
+      expect(record?.files[0].name).toBe('tq-drag-drop')
+      expect(record?.files[0].content).toContain('export const TqDragArea')
+      expect(record?.files[0].content).toContain('export const TqSortable')
+      expect(structure.dependencies['@dnd-kit/core']).toBe('^6.3.1')
+      expect(structure.dependencies['@dnd-kit/sortable']).toBe('^10.0.0')
+      expect(structure.dependencies['@dnd-kit/utilities']).toBe('^3.2.2')
+    }
+  )
+
+  it('detects primitives nested deep in the tree', async () => {
+    const structure = buildStructure([
+      elementNode('container', [elementNode('container', [elementNode('thq-sortable')])]),
+    ])
+
+    await plugin.runAfter(structure)
+
+    expect(structure.files.has('tq-drag-drop-component')).toBe(true)
+  })
+})
+
+describe('NextKanbanProjectPlugin', () => {
+  const plugin = new NextKanbanProjectPlugin()
+
+  it('is a no-op for projects without a kanban board', async () => {
+    const structure = buildStructure([elementNode('container')])
+
+    await plugin.runAfter(structure)
+
+    expect(structure.files.has('tq-kanban-component')).toBe(false)
+    expect(structure.files.has('tq-kanban-npmrc')).toBe(false)
+    expect(structure.dependencies['@asseinfo/react-kanban']).toBeUndefined()
+    const appContent = structure.files.get('_app')?.files[0].content as string
+    expect(appContent).toBe(APP_CONTENT)
+  })
+
+  it('emits the wrapper, dependency, stylesheet import and .npmrc when used', async () => {
+    const structure = buildStructure([elementNode('kanban-node')])
+
+    await plugin.runAfter(structure)
+
+    const componentRecord = structure.files.get('tq-kanban-component')
+    expect(componentRecord?.path).toEqual(['components'])
+    expect(componentRecord?.files[0].name).toBe('tq-kanban')
+    expect(componentRecord?.files[0].content).toContain(
+      "dynamic(() => import('@asseinfo/react-kanban')"
+    )
+    expect(componentRecord?.files[0].content).toContain('ssr: false')
+    expect(componentRecord?.files[0].content).toContain('initialBoard')
+
+    const npmrcRecord = structure.files.get('tq-kanban-npmrc')
+    expect(npmrcRecord?.path).toEqual([])
+    expect(npmrcRecord?.files[0].name).toBe('.npmrc')
+    expect(npmrcRecord?.files[0].fileType).toBeUndefined()
+    expect(npmrcRecord?.files[0].content).toContain('legacy-peer-deps=true')
+
+    expect(structure.dependencies['@asseinfo/react-kanban']).toBe('2.2.0')
+
+    const appContent = structure.files.get('_app')?.files[0].content as string
+    expect(appContent).toContain("import '@asseinfo/react-kanban/dist/styles.css'")
+    expect(appContent.indexOf('@asseinfo/react-kanban/dist/styles.css')).toBeLessThan(
+      appContent.indexOf('./style.css')
+    )
+  })
+
+  it('is idempotent when run twice', async () => {
+    const structure = buildStructure([elementNode('kanban-node')])
+
+    await plugin.runAfter(structure)
+    await plugin.runAfter(structure)
+
+    const appContent = structure.files.get('_app')?.files[0].content as string
+    expect(appContent.match(/@asseinfo\/react-kanban\/dist\/styles\.css/g)).toHaveLength(1)
+  })
+})