fix: render GUIGroup without bindPath

Author: MrKou47

packages/gui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galacean/gui",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "An opinionated UI library designed to create engaging and functional online tools with ease.",
   "licenses": [
     {
@@ -73,7 +73,8 @@
   "dependencies": {
     "@galacean/editor-ui": "workspace:*",
     "@radix-ui/react-use-controllable-state": "^1.1.0",
-    "@tabler/icons-react": "^3.17.0"
+    "@tabler/icons-react": "^3.17.0",
+    "nanoid": "^5.1.6"
   },
   "peerDependencies": {
     "react": "^18.2.0",

packages/gui/src/components/FormItem/FormItem.tsx

@@ -1,7 +1,7 @@
 import React, { cloneElement, forwardRef, ReactElement, ReactNode } from 'react'
 import { styled, type CSS, VariantProps } from '@galacean/editor-ui'
-import { v4 as uuidv4 } from 'uuid'
 import { Label } from './Label'
+import { nanoid } from 'nanoid'
 
 const StyledField = styled('div', {
   display: 'grid',
@@ -132,7 +132,7 @@ const FormItem = forwardRef<HTMLDivElement, FormItemProps>(function FormItem(pro
 
   const name = propLabel
 
-  const labelId = `${(name ?? '').replace(/\s/g, '-')}-${uuidv4()}`
+  const labelId = `${(name ?? '').replace(/\s/g, '-')}-${nanoid()}`
   const withoutLabel = !propLabel
 
   const decorateChildren = React.Children.toArray(children).map((child) => {

packages/gui/src/components/GUIRoot/GUIRoot.tsx

@@ -155,16 +155,16 @@ const StyledGroupWrapper = styled('div', {
 function renderGUIItem(item: GUIDefineItem, index: number) {
   const [data, keyOrBindPath, config] = item
   const { type, onChange, bindPath, label, ...rest } = config as Exclude<GUIItemConfig, GUIItemGroupConfig>
-  const realKey = keyOrBindPath.split('.').pop()
+  const realKey = keyOrBindPath?.split('.').pop()
 
   let realLabel = label ?? realKey
-  let value: any = data[keyOrBindPath]
+  let value: any = keyOrBindPath ? data[keyOrBindPath] : undefined
   let GUIComponent = null
   let nested = false
 
   let extraProps: any = {}
 
-  if (keyOrBindPath.indexOf('.') !== -1 && realKey) {
+  if (keyOrBindPath?.indexOf('.') !== -1 && realKey) {
     nested = true
   }
 
@@ -265,7 +265,7 @@ function renderGUIItem(item: GUIDefineItem, index: number) {
 
   if (GUIComponent === FormItemGroup) {
     return (
-      <StyledGroupWrapper>
+      <StyledGroupWrapper key={`group_${index}`}>
         <UnControlledComponent
           key={`label_${index}`}
           label={realLabel}

packages/gui/tsup.config.ts

@@ -30,8 +30,12 @@ export default defineConfig([
     globalName: 'GalaceanGUI',
     dts: false,
     sourcemap: true,
-    noExternal: ['react', 'react-dom', '@galacean/editor-ui'],
+    noExternal: ['react', 'react-dom', '@galacean/editor-ui', 'nanoid'],
     minify: true,
+    platform: 'browser',
     outExtension: () => ({ js: '.umd.js' }),
+    define: {
+      'process.env.NODE_ENV': '"production"',
+    },
   },
 ])