Stable/autumn sprint 2025

.gitignore

@@ -39,3 +39,8 @@ dist
 
 # nix
 result*
+
+_site
+.vscode
+
+update-tsup-deps.js

.npmrc

@@ -1 +1,2 @@
 auto-install-peers = true
+@graviola:registry=https://npm.winzlieb.eu/

_templates/forms-designer/tool-collection/README.md.t

@@ -0,0 +1,34 @@
+---
+to: packages/<%= name.split("/")[1] %>/README.md
+---
+# <%= name %>
+
+<%= description %>
+
+## Installation
+
+```bash
+npm install <%= name %>
+```
+
+## Usage
+
+```typescript
+import { <%= name.split("/")[1].replace(/-/g, '') %>ToolCollection } from '<%= name %>'
+
+// Use the tool collection in your forms designer
+const { draggableComponents, icons, renderers } = <%= name.split("/")[1].replace(/-/g, '') %>ToolCollection
+```
+
+## Components
+
+This package includes:
+
+- **Draggable Components**: Form components that can be dragged into the designer
+- **Icons**: Icon components for the toolbox
+- **Renderers**: JsonForms renderers for displaying the components
+- **Tool Settings**: Configuration options for each component
+
+## License
+
+MIT

_templates/forms-designer/tool-collection/draggableComponents.ts.t

@@ -0,0 +1,16 @@
+---
+to: packages/<%= name.split("/")[1] %>/src/draggableComponents.ts
+---
+import { DraggableElement } from '@formswizard/types'
+
+export const draggableComponents: DraggableElement[] = [
+  // Add your draggable components here
+  // Example:
+  // {
+  //   name: 'Example Component',
+  //   ToolIconName: 'ExampleIcon',
+  //   jsonSchemaElement: {
+  //     type: 'string',
+  //   },
+  // },
+]

_templates/forms-designer/tool-collection/icons.tsx.t

@@ -0,0 +1,14 @@
+---
+to: packages/<%= name.split("/")[1] %>/src/icons.tsx
+---
+import { ToolIconRegistry } from '@formswizard/types'
+
+export const icons: ToolIconRegistry = {
+  // Add your icon components here
+  // Example:
+  // ExampleIcon: ({ sx, variant = 'outlined' }) => (
+  //   <SvgIcon sx={sx}>
+  //     {/* Your icon SVG content */}
+  //   </SvgIcon>
+  // ),
+}

_templates/forms-designer/tool-collection/package.json.t

@@ -0,0 +1,71 @@
+---
+to: packages/<%= name.split("/")[1] %>/package.json
+---
+{
+  "name": "<%= name %>",
+  "version": "0.0.0",
+  "description": "<%= description %>",
+  "license": "MIT",
+  "homepage": "https://github.com/FormsWizard",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/FormsWizard/forms-designer.git"
+  },
+  "contributors": [
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "scripts": {
+    "depcheck": "depcheck",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/**/*.{ts,tsx}",
+    "lint-fix": "eslint --fix src/**/*.{ts,tsx}",
+    "pack-clean": "bun run clean-package && (bun pm pack || true) ; bun run clean-package restore",
+    "publish-clean": "bun run clean-package && npm publish --access public && bun run clean-package restore"
+  },
+  "peerDependencies": {
+    "@jsonforms/core": "^3",
+    "@jsonforms/material-renderers": "^3",
+    "@jsonforms/react": "^3",
+    "@mui/icons-material": "^5",
+    "@mui/material": "^5",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "react": "^16.9.0 || ^17.0.0 || ^18",
+    "react-dnd": "^16.0.1"
+  },
+  "dependencies": {
+    "@formswizard/types": "workspace:*",
+    "@formswizard/utils": "workspace:*"
+  },
+  "devDependencies": {
+    "@formswizard/designer-tsconfig": "workspace:*",
+    "@formswizard/tsup-config": "workspace:*",
+    "eslint-config-formsdesigner": "workspace:*",
+    "tsup": "^8.0.0",
+    "typescript": "^4.5.2"
+  },
+  "clean-package": {
+    "extends": "../../../clean-package.config.cjs"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": ["eslint-config-formsdesigner"]
+  }
+}

_templates/forms-designer/tool-collection/prompt.js

@@ -0,0 +1,17 @@
+// see types of prompts:
+// https://github.com/enquirer/enquirer/tree/master/examples
+//
+module.exports = [
+  {
+    type: "input",
+    name: "name",
+    message: "Name of the tool collection package",
+    initial: "@formswizard/",
+  },
+  {
+    type: "input", 
+    name: "description",
+    message: "Description of the tool collection",
+    initial: "A collection of form components and renderers",
+  },
+];

_templates/forms-designer/tool-collection/renderers.ts.t

@@ -0,0 +1,13 @@
+---
+to: packages/<%= name.split("/")[1] %>/src/renderers.ts
+---
+import { JsonFormsRendererRegistryEntry } from '@jsonforms/core'
+
+export const renderers: JsonFormsRendererRegistryEntry[] = [
+  // Add your renderers here
+  // Example:
+  // {
+  //   tester: exampleRendererTester,
+  //   renderer: ExampleRenderer,
+  // },
+]

_templates/forms-designer/tool-collection/src_index.ts.t

@@ -0,0 +1,17 @@
+---
+to: packages/<%= name.split("/")[1] %>/src/index.ts
+---
+// Export draggable components
+export * from './draggableComponents'
+
+// Export icons
+export * from './icons'
+
+// Export renderers
+export * from './renderers'
+
+// Export tool settings if applicable
+export * from './toolSettings'
+
+// Export the complete tool collection
+export * from './toolCollection'

_templates/forms-designer/tool-collection/toolCollection.ts.t

@@ -0,0 +1,14 @@
+---
+to: packages/<%= name.split("/")[1] %>/src/toolCollection.ts
+---
+import { ToolCollection } from '@formswizard/types'
+import { draggableComponents } from './draggableComponents'
+import { icons } from './icons'
+import { renderers } from './renderers'
+
+export const <%= name.split("/")[1].replace(/-/g, '') %>ToolCollection: ToolCollection = {
+  name: '<%= name.split("/")[1] %>',
+  draggableComponents,
+  icons,
+  renderers,
+}

_templates/forms-designer/tool-collection/toolSettings.ts.t

@@ -0,0 +1,12 @@
+---
+to: packages/<%= name.split("/")[1] %>/src/toolSettings.ts
+---
+import { FieldSettings } from '@formswizard/types'
+
+export const toolSettings: Record<string, FieldSettings> = {
+  // Add your tool settings here
+  // Example:
+  // ExampleComponent: {
+  //   // Field settings configuration
+  // },
+}

_templates/forms-designer/tool-collection/tsconfig.json.t

@@ -0,0 +1,12 @@
+---
+to: packages/<%= name.split("/")[1] %>/tsconfig.json
+---
+{
+  "extends": "@formswizard/designer-tsconfig/react-library.json",
+  "include": ["src"],
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "strict": false,
+    "resolveJsonModule": true
+  }
+}

_templates/forms-designer/tool-collection/tsup.config.js.t

@@ -0,0 +1,8 @@
+---
+to: packages/<%= name.split("/")[1] %>/tsup.config.js
+---
+import { makeConfigWithExternals } from "@formswizard/tsup-config/tsup.config.js";
+import pkg from "./package.json";
+
+const config = makeConfigWithExternals(pkg);
+export default config;

apps/cra/craco.config.js

@@ -0,0 +1,27 @@
+const path = require('path');
+
+module.exports = {
+  webpack: {
+    configure: (webpackConfig) => {
+      // Allow imports from the workspace root node_modules
+      webpackConfig.resolve.modules = [
+        ...webpackConfig.resolve.modules,
+        path.resolve(__dirname, '../../node_modules'),
+      ];
+
+      // Add alias for react-refresh to point to the workspace root
+      webpackConfig.resolve.alias = {
+        ...webpackConfig.resolve.alias,
+        'react-refresh': path.resolve(__dirname, '../../node_modules/react-refresh'),
+      };
+
+      // Disable the ModuleScopePlugin to allow imports from outside src/
+      const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+      webpackConfig.resolve.plugins = webpackConfig.resolve.plugins.filter(
+        plugin => !(plugin instanceof ModuleScopePlugin)
+      );
+
+      return webpackConfig;
+    },
+  },
+};

apps/cra/package.json

@@ -2,12 +2,11 @@
   "name": "@formswizard/wizard-cra",
   "version": "0.0.0",
   "private": true,
-  "homepage": "/forms-designer/cra",
   "scripts": {
     "start": "serve -s build -l 3000",
-    "dev": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "dev": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject",
     "lint": "eslint \"src/**/*.ts*\"",
     "clean": "rm -rf build"
@@ -17,12 +16,12 @@
     "@emotion/react": "^11.11.1",
     "@formswizard/experimental-renderers": "workspace:*",
     "@formswizard/forms-designer": "workspace:*",
-    "@jsonforms/material-renderers": "^3.1.0",
-    "@jsonforms/react": "^3.1.0",
+    "@jsonforms/material-renderers": "^3",
+    "@jsonforms/react": "^3",
     "@mui/icons-material": "^5.14.1",
     "@mui/material": "~5.14.2",
     "@mui/x-date-pickers": "^6.10.0",
-    "@reduxjs/toolkit": "^1.9.5",
+    "@reduxjs/toolkit": "^2.6.1",
     "ajv": "^8.12.0",
     "dayjs": "^1.11.9",
     "lodash": "^4.17.21",
@@ -31,11 +30,13 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-touch-backend": "^16.0.1",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.1.1",
-    "react-scripts": "5.0.0",
+    "react-redux": "^9.2.0",
+    "react-refresh": "^0.17.0",
+    "react-scripts": "5.0.1",
     "web-vitals": "^2.1.2"
   },
   "devDependencies": {
+    "@craco/craco": "^7.1.0",
     "@formswizard/designer-tsconfig": "workspace:*",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
@@ -45,9 +46,14 @@
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@types/testing-library__jest-dom": "^5.14.5",
+    "react-dev-utils": "^12.0.1",
     "serve": "^14.2.1",
     "typescript": "^4.5.4"
   },
+  "resolutions": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
   "eslintConfig": {
     "extends": [
       "react-app",

apps/cra/public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="A JSON Schema based WYSIWYG Forms Designer"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Web - Turborepo Example</title>
+    <title>Forms Designer</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

apps/cra/src/App.tsx

@@ -1,10 +1,7 @@
-import { locationTools } from '@formswizard/experimental-renderers'
-import { WizardProvider, MainLayout } from '@formswizard/forms-designer'
+import { WizardApp } from '@formswizard/forms-designer'
 
 export const App = () => {
   return (
-    <WizardProvider>
-      <MainLayout additionalToolSettings={locationTools.toolSettings} renderers={locationTools.rendererRegistry} />
-    </WizardProvider>
+    <WizardApp />
   )
 }

apps/storybook/package.json

@@ -11,7 +11,20 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@formswizard/graviola-forms-designer": "workspace:*",
+    "@ebay/nice-modal-react": "^1.2.13",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@jsonforms/material-renderers": "^3",
+    "@jsonforms/react": "^3",
+    "@mui/material": "~5.14.0",
+    "@mui/x-date-pickers": "^6.10.0",
+    "@reduxjs/toolkit": "^2.6.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd-touch-backend": "^16.0.1",
+    "react-redux": "^9.2.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.2.0",