feat(lib): export useFieldPlugin react hook

package.json

@@ -37,6 +37,7 @@
     "build:lib": "yarn workspace @storyblok/field-plugin build",
     "build:cli": "yarn workspace @storyblok/field-plugin-cli build",
     "build:container": "yarn build:lib && yarn workspace container build",
+    "build:helpers": "yarn workspaces foreach --include \"helper-*\" run build",
     "test": "jest",
     "check:types": "yarn workspaces foreach run check:types",
     "lint": "eslint .",

packages/cli/templates/react/package.json

@@ -22,7 +22,7 @@
     "@vitejs/plugin-react": "^3.1.0",
     "eslint": "latest",
     "eslint-plugin-react": "7.30.0",
-    "typescript": "^4.9.3",
+    "typescript": "5.1.6",
     "vite": "^4.2.2",
     "vite-plugin-css-injected-by-js": "3.1.0"
   }

packages/cli/templates/react/src/App.tsx

@@ -1,7 +1,7 @@
 import FieldPlugin from './components/FieldPlugin'
 import FieldPluginExample from './components/FieldPluginExample'
 import { FunctionComponent } from 'react'
-import { FieldPluginProvider } from './FieldPluginProvider'
+import { FieldPluginProvider } from '@storyblok/field-plugin/react'
 
 const App: FunctionComponent = () => {
   return (

packages/cli/templates/react/src/components/FieldPlugin.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import { useFieldPlugin } from '../useFieldPlugin'
+import { useFieldPlugin } from '@storyblok/field-plugin/react'
 
 const FieldPlugin: FunctionComponent = () => {
   const plugin = useFieldPlugin()

packages/cli/templates/react/src/components/FieldPluginExample/AssetSelector.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useState } from 'react'
-import { useFieldPlugin } from '../../useFieldPlugin'
+import { useFieldPlugin } from '@storyblok/field-plugin/react'
 import { Asset } from '@storyblok/field-plugin'
 
 const AssetSelector: FunctionComponent = () => {

packages/cli/templates/react/src/components/FieldPluginExample/Counter.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import { useFieldPlugin } from '../../useFieldPlugin'
+import { useFieldPlugin } from '@storyblok/field-plugin/react'
 
 const Counter: FunctionComponent = () => {
   const {

packages/cli/templates/react/src/components/FieldPluginExample/ModalToggle.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import { useFieldPlugin } from '../../useFieldPlugin'
+import { useFieldPlugin } from '@storyblok/field-plugin/react'
 
 const ModalToggle: FunctionComponent = () => {
   const {

packages/cli/templates/react/src/components/FieldPluginExample/index.tsx

@@ -3,7 +3,7 @@ import Counter from './Counter'
 import ModalToggle from './ModalToggle'
 import AssetSelector from './AssetSelector'
 import { FunctionComponent } from 'react'
-import { useFieldPlugin } from '../../useFieldPlugin'
+import { useFieldPlugin } from '@storyblok/field-plugin/react'
 
 const FieldPlugin: FunctionComponent = () => {
   const { data, actions } = useFieldPlugin()

packages/cli/templates/react/tsconfig.json

@@ -10,7 +10,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

packages/field-plugin/package.json

@@ -13,7 +13,13 @@
   "exports": {
     ".": {
       "import": "./dist/field-plugin.js",
-      "require": "./dist/field-plugin.umd.cjs"
+      "require": "./dist/field-plugin.umd.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.umd.cjs",
+      "types": "./dist/react/index.d.ts"
     }
   },
   "repository": {
@@ -25,7 +31,8 @@
     "check:types": "tsc --noEmit",
     "dev": "vite build --watch",
     "test": "jest",
-    "build": "vite build"
+    "build": "rm -rf dist && vite build && yarn build:helpers && yarn copy-helpers",
+    "copy-helpers": "./scripts/copy-helpers.sh"
   },
   "devDependencies": {
     "@types/jest": "29.0.3",

packages/field-plugin/scripts/copy-helpers.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+mkdir ./dist/react
+cp -r ../helper-react/dist/* ./dist/react/

packages/field-plugin/vite.config.ts

@@ -13,7 +13,8 @@ export default defineConfig({
     lib: {
       // Could also be a dictionary or array of multiple entry points
       entry: fileURLToPath(new URL('./src/index.ts', import.meta.url)),
-      name: 'field-plugin',
+      name: 'FieldPlugin',
+      fileName: 'field-plugin',
     },
     emptyOutDir: false,
   },

packages/helper-react/.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}

packages/helper-react/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/helper-react/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "helper-react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --resolve-plugins-relative-to ."
+  },
+  "dependencies": {
+    "@storyblok/field-plugin": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9",
+    "vite-plugin-dts": "3.0.3"
+  }
+}

packages/helper-react/src/context.ts

@@ -0,0 +1,6 @@
+import { FieldPluginResponse } from '@storyblok/field-plugin'
+import { createContext } from 'react'
+
+export const FieldPluginContext = createContext<
+  Extract<FieldPluginResponse, { type: 'loaded' }> | undefined
+>(undefined)

packages/helper-react/src/index.ts

@@ -0,0 +1,3 @@
+export * from './context'
+export * from './provider'
+export * from './useFieldPlugin'

packages/cli/templates/react/src/FieldPluginProvider.tsx → packages/helper-react/src/provider.tsx

@@ -1,20 +1,11 @@
-import {
-  FunctionComponent,
-  createContext,
-  useEffect,
-  useState,
-  ComponentType,
-} from 'react'
+import { FunctionComponent, useEffect, useState, ComponentType } from 'react'
 import {
   type FieldPluginResponse,
   createFieldPlugin,
 } from '@storyblok/field-plugin'
+import { FieldPluginContext } from './context'
 import { ReactNode } from 'react'
 
-export const FieldPluginContext = createContext<
-  Extract<FieldPluginResponse, { type: 'loaded' }> | undefined
->(undefined)
-
 type Props = {
   Error?: ComponentType<{ error: Error }>
   Loading?: ComponentType

packages/cli/templates/react/src/useFieldPlugin.ts → packages/helper-react/src/useFieldPlugin.ts

@@ -1,6 +1,6 @@
 import { FieldPluginResponse } from '@storyblok/field-plugin'
 import { useContext } from 'react'
-import { FieldPluginContext } from './FieldPluginProvider'
+import { FieldPluginContext } from './context'
 
 export const useFieldPlugin = (): Extract<
   FieldPluginResponse,

packages/helper-react/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

packages/helper-react/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

packages/helper-react/vite.config.ts

@@ -0,0 +1,27 @@
+import { PluginOption, defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import dts from 'vite-plugin-dts'
+import { resolve } from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  // there is a typing problem with the dts package
+  plugins: [dts() as unknown as PluginOption, react()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'react-helper',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', '@storyblok/field-plugin'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          '@storyblok/field-plugin': 'FieldPlugin',
+        },
+      },
+    },
+  },
+})