chore: examples for @kubb/react (#1388)

.changeset/shiny-rules-invent.md

@@ -0,0 +1,5 @@
+---
+"@kubb/react": patch
+---
+
+Better error logging + wider range for `@kubb/react` peerDependency

.codesandbox/ci.json

@@ -26,6 +26,7 @@
     "/examples/react-query",
     "/examples/typescript",
     "/examples/simple-single",
+    "/examples/react",
     "/examples/solid-query",
     "/examples/svelte-query",
     "/examples/swr",

docs/.vitepress/config.ts

@@ -309,6 +309,10 @@ const examplesSidebar = [
     text: 'Generators <span class="new">new</span>',
     link: '/examples/generators',
   },
+  {
+    text: 'React <span class="new">new</span>',
+    link: '/examples/react',
+  },
 ]
 
 const blogSidebar = [

docs/changelog.md

@@ -4,6 +4,9 @@ title: Changelog
 
 # Changelog
 
+## 3.0.4
+- [`react`](/helpers/react//): Better error logging + wider range for `@kubb/react` peerDependency
+
 ## 3.0.3
 - [`plugin-ts`](/plugins/plugin-ts/): `@deprecated` jsdoc tag for schemas
 

docs/examples/react.md

@@ -0,0 +1,18 @@
+---
+title: React
+aside: false
+---
+
+<iframe
+  src="https://codesandbox.io/embed/github/kubb-labs/kubb/tree/main/examples/react?fontsize=14&module=%2Fsrc%2Fgen%2Fmodels%2FPerson.ts&theme=dark&view=editor"
+  :style="{
+    width: '100%',
+    height: '700px',
+    border: 0,
+    borderRadius: '4px',
+    overflow: 'hidden'
+  }"
+  title="React"
+  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>

docs/helpers/react/hooks/index.md

@@ -10,6 +10,22 @@ outline: deep
 Some hooks that can be used with `@kubb/react`.
 
 
+## useLifecycle
+
+`useLifecycle` will return some helpers to exit/restart the generation.
+
+
+```tsx
+import { useCli } from '@kubb/react'
+
+function Component() {
+  const { exit } = useLifecycle()
+
+  return null
+}
+```
+
+
 ## useApp
 
 `useApp` will return the current App with plugin, pluginManager, fileManager, mode, ...

docs/package.json

@@ -49,7 +49,7 @@
     "cross-env": "^7.0.3",
     "react": "^18.3.1",
     "unplugin-kubb": "workspace:^",
-    "vite": "^5.4.10"
+    "vite": "^5.4.11"
   },
   "packageManager": "[email protected]",
   "engines": {

e2e/package.json

@@ -37,7 +37,7 @@
     "@tanstack/svelte-query": "^5.59.20",
     "@tanstack/vue-query": "^5.59.20",
     "axios": "^1.7.7",
-    "msw": "^2.6.3",
+    "msw": "^2.6.4",
     "react": "^18.3.1",
     "solid-js": "^1.9.3",
     "svelte": "^3.59.2",

examples/advanced/package.json

@@ -44,7 +44,7 @@
     "@tanstack/svelte-query": "^5.59.20",
     "@tanstack/vue-query": "^5.59.20",
     "axios": "^1.7.7",
-    "msw": "^2.6.3",
+    "msw": "^2.6.4",
     "react": "^18.3.1",
     "solid-js": "^1.9.3",
     "svelte": "^3.59.2",

examples/msw/package.json

@@ -33,7 +33,7 @@
     "@kubb/plugin-oas": "workspace:*",
     "@kubb/plugin-ts": "workspace:*",
     "@mswjs/http-middleware": "^0.9.2",
-    "msw": "^2.6.3",
+    "msw": "^2.6.4",
     "react": "^18.3.1",
     "tsup": "^8.3.5"
   },

examples/react/.codesandbox/Dockerfile

@@ -0,0 +1,2 @@
+FROM node:20-bullseye
+RUN npm i -g pnpm

examples/react/.codesandbox/build.js

@@ -0,0 +1,20 @@
+import fs from 'node:fs'
+
+const pkgJsonPaths = ['package.json']
+try {
+  for (const pkgJsonPath of pkgJsonPaths) {
+    const pkg = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf-8'))
+    const oldVersion = 'workspace:*'
+    const newVersion = 'alpha'
+
+    const content = JSON.stringify(pkg, null, '\t') + '\n'
+    const newContent = content
+      // @ts-ignore
+      .replaceAll(`"${oldVersion}"`, `"${newVersion}"`)
+
+    fs.writeFileSync(pkgJsonPath, newContent)
+  }
+} catch (error) {
+  console.error(error)
+  process.exit(1)
+}

examples/react/.codesandbox/tasks.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://codesandbox.io/schemas/tasks.json",
+  "setupTasks": [
+    {
+      "name": "Replace workspace:* by latest",
+      "command": "node ./.codesandbox/build.js"
+    },
+    {
+      "name": "Install Dependencies",
+      "command": "pnpm install"
+    }
+  ],
+  "tasks": {
+    "dev": {
+      "name": "dev",
+      "command": "pnpm dev",
+      "runAtStart": true,
+      "preview": {
+        "port": 5173
+      }
+    },
+    "build": {
+      "name": "build",
+      "command": "pnpm build",
+      "runAtStart": false
+    },
+    "update": {
+      "name": "update",
+      "command": "pnpm update",
+      "runAtStart": false
+    }
+  }
+}

examples/react/example1/index.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { Text, createRoot, useLifecycle } from '@kubb/react'
+
+// attach node stdout with Kubb's internal one
+const root = createRoot({ stdout: process.stdout })
+
+/**
+ * Render component that will count down from 5
+ */
+function Component() {
+  const timer = useRef<NodeJS.Timer>()
+  const [counter, setCounter] = useState(5)
+  const { exit } = useLifecycle()
+
+  useEffect(() => {
+    timer.current = setInterval(() => {
+      setCounter((previousCounter) => {
+        return previousCounter - 1
+      })
+    }, 1000)
+
+    return () => {
+      clearInterval(timer.current)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (counter === 0) {
+      // trigger unmount
+      exit()
+      clearInterval(timer.current)
+    }
+  }, [counter, exit])
+
+  if (counter === 0) {
+    return <Text indentSize={2}>Finished</Text>
+  }
+
+  return <Text>Counter: {counter}</Text>
+}
+
+root.render(<Component />)

examples/react/example2/index.tsx

@@ -0,0 +1,28 @@
+import process from 'node:process'
+import React from 'react'
+
+import path from 'node:path'
+import { Const, File, createRoot } from '@kubb/react'
+
+const root = createRoot({ stdout: process.stdout })
+
+/**
+ * Create a simple file and write it to the file-system
+ */
+function Component() {
+  return (
+    <File path={path.resolve(__dirname, 'result.ts')} baseName={'result.ts'}>
+      <File.Source>
+        <Const name={'hello'}>"World!"</Const>
+      </File.Source>
+    </File>
+  )
+}
+
+async function start() {
+  root.render(<Component />)
+  console.log('\nFiles: ', root.files.length)
+  await root.write()
+}
+
+start()

examples/react/example2/result.ts

@@ -0,0 +1 @@
+const hello = 'World!'

examples/react/example3/index.tsx

@@ -0,0 +1,42 @@
+import process from 'node:process'
+import React from 'react'
+
+import path from 'node:path'
+import { Const, File, createRoot } from '@kubb/react'
+
+const root = createRoot({ stdout: process.stdout })
+
+/**
+ * Create 2 files and write them to the file-system
+ */
+function Component() {
+  const namesPath = path.resolve(__dirname, 'name.ts')
+  const helloWorldPath = path.resolve(__dirname, 'result.ts')
+
+  return (
+    <>
+      <File path={namesPath} baseName={'name.ts'}>
+        <File.Source>
+          <Const export asConst name={'name'}>
+            "Lily"
+          </Const>
+        </File.Source>
+      </File>
+
+      <File path={helloWorldPath} baseName={'result.ts'}>
+        <File.Import root={helloWorldPath} name={['name']} path={namesPath} />
+        <File.Source>
+          <Const name={'hello'}>name</Const>
+        </File.Source>
+      </File>
+    </>
+  )
+}
+
+async function start() {
+  root.render(<Component />)
+  console.log('\nFiles: ', root.files.length)
+  await root.write()
+}
+
+start()

examples/react/example3/name.ts

@@ -0,0 +1 @@
+export const name = 'Lily' as const

examples/react/example3/result.ts

@@ -0,0 +1,3 @@
+import { name } from './name'
+
+const hello = name

examples/react/example4/index.tsx

@@ -0,0 +1,67 @@
+import process from 'node:process'
+import React, { useEffect, useState } from 'react'
+
+import path from 'node:path'
+import { Const, File, Function, createRoot, useLifecycle } from '@kubb/react'
+
+const root = createRoot({ stdout: process.stdout })
+
+const fetchNames = async (): Promise<string[]> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(['Lily', 'Jan'])
+    }, 2000)
+  })
+}
+
+/**
+ * Create a file and append data based on a promise
+ */
+function Component() {
+  const [names, setNames] = useState<string[]>([])
+  const { exit } = useLifecycle()
+
+  useEffect(() => {
+    fetchNames().then((newNames) => {
+      setNames(newNames)
+      exit()
+    })
+  }, [exit])
+
+  return (
+    <File path={path.resolve(__dirname, 'result.ts')} baseName={'result.ts'}>
+      <File.Source>
+        <Const name={'names'}>"{names.join(' and ')}"</Const>
+        <br />
+        <Function.Arrow name={'getNames'} export singleLine>
+          names
+        </Function.Arrow>
+        <Function.Arrow name={'getFirstChar'} export>
+          return names.charAt(0)
+        </Function.Arrow>
+        <br />
+        <Function
+          name={'getNamesTyped'}
+          export
+          returnType={'TNames'}
+          JSDoc={{
+            comments: ['Returns the names'],
+          }}
+          generics={['TNames extends string']}
+        >
+          return names as TNames
+        </Function>
+      </File.Source>
+    </File>
+  )
+}
+
+async function start() {
+  root.render(<Component />)
+
+  await root.waitUntilExit()
+  console.log('\nFiles: ', root.files.length)
+  await root.write()
+}
+
+start()

examples/react/example4/result.ts

@@ -0,0 +1,12 @@
+const names = 'Lily and Jan'
+export const getNames = () => names
+export const getFirstChar = () => {
+  return names.charAt(0)
+}
+
+/**
+ * Returns the names
+ */
+export function getNamesTyped<TNames extends string>(): TNames {
+  return names as TNames
+}

examples/react/example5/App.tsx

@@ -0,0 +1,3 @@
+export function Users() {
+  return <div className="test" />
+}