feat: add limit to type 'create' and remove

.changeset/violet-humans-notice.md

@@ -0,0 +1,6 @@
+---
+"@example/erp": patch
+"@genseki/react": patch
+---
+
+[Feat]: add limit to type 'create' and remove button

examples/erp/genseki/collections/posts.tsx

@@ -116,6 +116,7 @@ export const fields = builder.fields('post', (fb) => ({
   postTags: fb.relations('postTags', (fb) => ({
     type: 'create' as const,
     label: 'Tags',
+    limit: 4,
     fields: fb.fields('postTag', (fb) => ({
       remark: fb.columns('remark', {
         type: 'text',

packages/react/src/core/field.ts

@@ -373,6 +373,7 @@ export interface FieldRelationConnectOptions extends FieldOptionsShapeBase {
   type: 'connect'
   fields: Fields
   options: string
+  limit?: number
 }
 export interface FieldRelationConnectShapeClient
   extends Omit<FieldRelationConnectOptions, 'fields'>,
@@ -387,6 +388,7 @@ export interface FieldRelationConnectShape
 export interface FieldRelationCreateOptions extends FieldOptionsShapeBase {
   type: 'create'
   fields: Fields
+  limit?: number
 }
 export interface FieldRelationCreateShapeClient
   extends Omit<FieldRelationCreateOptions, 'fields'>,
@@ -401,6 +403,7 @@ export interface FieldRelationConnectOrCreateOptions extends FieldOptionsShapeBa
   type: 'connectOrCreate'
   fields: Fields
   options: string
+  limit?: number
 }
 export interface FieldRelationConnectOrCreateShapeClient
   extends Omit<FieldRelationConnectOrCreateOptions, 'fields'>,

packages/react/src/react/components/compound/auto-field/index.tsx

@@ -647,6 +647,7 @@ export function AutoField(props: AutoFieldProps) {
           disabled={disabled}
           optionsFetchPath={props.optionsFetchPath}
           deselectable={field.deselectable}
+          limit={field.limit}
         />
       )
     }
@@ -667,6 +668,8 @@ interface AutoRelationshipFieldProps {
   allowConnect?: boolean
   disabled?: boolean
   deselectable?: boolean
+
+  limit?: number
 }
 
 export function AutoRelationshipField(props: AutoRelationshipFieldProps) {
@@ -685,6 +688,7 @@ export function AutoRelationshipField(props: AutoRelationshipFieldProps) {
           disabled={props.disabled}
           optionsFetchPath={props.optionsFetchPath}
           deselectable={props.deselectable}
+          limit={props.limit}
         />
       )
     case true:
@@ -698,6 +702,7 @@ export function AutoRelationshipField(props: AutoRelationshipFieldProps) {
           disabled={props.disabled}
           optionsFetchPath={props.optionsFetchPath}
           deselectable={props.deselectable}
+          limit={props.limit}
         />
       )
     default:
@@ -803,6 +808,8 @@ interface AutoManyRelationshipFieldProps {
   allowConnect?: boolean
   disabled?: boolean
   deselectable?: boolean
+
+  limit?: number
 }
 
 export function AutoManyRelationshipField(props: AutoManyRelationshipFieldProps) {
@@ -814,8 +821,9 @@ export function AutoManyRelationshipField(props: AutoManyRelationshipFieldProps)
 
   const fieldShape = props.fieldShape
 
+  const isLimitReached = props.limit ? fieldArray.fields.length >= props.limit : false
   if (fieldShape.hidden) return null
-  const disabled = fieldShape.disabled || props.disabled
+  const disabled = fieldShape.disabled || props.disabled || isLimitReached
 
   const connectComponent = (name: string, options: string) => (
     <FormField
@@ -871,6 +879,16 @@ export function AutoManyRelationshipField(props: AutoManyRelationshipFieldProps)
                     {fieldShape.label} #{index + 1}
                   </div>
                   {connectComponent(`${props.name}.${index}.connect`, fieldShape.options)}
+                  <div className="flex justify-end">
+                    <Button
+                      type="button"
+                      variant="primary"
+                      size="sm"
+                      onClick={() => fieldArray.remove(index)}
+                    >
+                      Remove
+                    </Button>
+                  </div>
                 </div>
               ))}
             </div>
@@ -889,22 +907,40 @@ export function AutoManyRelationshipField(props: AutoManyRelationshipFieldProps)
     case 'create':
       return (
         <div className="rounded-md border border-input p-6 grid grid-cols-1 gap-y-6">
-          {!!fieldArray.fields.length && (
+          {fieldArray.fields.length ? (
             <div className="flex flex-col space-y-6">
               {fieldArray.fields.map((fieldValue, index) => (
                 <div
                   key={fieldValue.id}
                   className="p-6 bg-surface-tertiary rounded-sm flex flex-col gap-y-4"
                 >
                   <Typography type="caption" weight="normal">
-                    {fieldShape.label} #{index + 1}
+                    {fieldShape.label} #{index + 1}{' '}
+                    {fieldShape.required && <span className="ml-1 text-text-brand">*</span>}
                   </Typography>
                   <div className="flex flex-col">
                     {createComponent(`${props.name}.${index}.create`)}
                   </div>
+                  <div className="flex justify-end">
+                    <Button
+                      type="button"
+                      variant="primary"
+                      size="sm"
+                      onClick={() => fieldArray.remove(index)}
+                    >
+                      Remove
+                    </Button>
+                  </div>
                 </div>
               ))}
             </div>
+          ) : (
+            <div>
+              <Typography type="body" weight="bold">
+                {fieldShape.label}
+              </Typography>
+              {fieldShape.required && <span className="ml-1 text-text-brand">*</span>}
+            </div>
           )}
           <Button
             type="button"
@@ -929,6 +965,16 @@ export function AutoManyRelationshipField(props: AutoManyRelationshipFieldProps)
               </div>
               {connectComponent(`${props.name}.${index}.connect`, fieldShape.options)}
               {createComponent(`${props.name}.${index}.create`)}
+              <div className="flex justify-end">
+                <Button
+                  type="button"
+                  variant="primary"
+                  size="sm"
+                  onClick={() => fieldArray.remove(index)}
+                >
+                  Remove
+                </Button>
+              </div>
             </div>
           ))}
           <Button