@tipp/ui 2.3.21 → 2.3.23

package/src/molecules/dynamic-form-editor-field-editor-panel.tsx

@@ -0,0 +1,688 @@
+import React, { useMemo } from 'react';
+import { Box } from '@radix-ui/themes';
+import { Button } from '@/atoms/button';
+import { Card } from '@/atoms/card';
+import { Checkbox } from '@/atoms/check-box';
+import { Flex } from '@/atoms/flex';
+import { IconButton } from '@/atoms/icon-button';
+import { Select } from '@/atoms/select';
+import { TextArea } from '@/atoms/text-area';
+import { TextField } from '@/atoms/text-field';
+import { Typo } from '@/atoms/typo';
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CopyIcon,
+  PlusIcon,
+  TrashIcon,
+} from '@/icon';
+import type {
+  DynamicFormFieldSchema,
+  FieldOption,
+  ImageFieldOption,
+  ValidationRule,
+} from '@/types/dynamic-form-schema-generated';
+import {
+  getFieldTypeLabel,
+  resetFieldType,
+  updateFieldCommonProps,
+  updateFieldValidation,
+  updateImageLayout,
+  updateImageOptions,
+  updateOptions,
+  updateOrientation,
+  updateTextPlaceholder,
+  type FieldType,
+} from './dynamic-form-editor-utils';
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+
+function isFieldType(value: string, types: FieldType[]): value is FieldType {
+  return types.some((t) => t === value);
+}
+
+function parseOptionalNumber(value: string): number | undefined {
+  const trimmed: string = value.trim();
+  if (trimmed.length === 0) return undefined;
+  const num = Number(trimmed);
+  return Number.isFinite(num) ? num : undefined;
+}
+
+function getValidation(field: DynamicFormFieldSchema): ValidationRule {
+  return field.validation ? field.validation : {};
+}
+
+function cleanValidation(next: ValidationRule): ValidationRule | undefined {
+  const hasAny: boolean =
+    next.min !== undefined ||
+    next.max !== undefined ||
+    (typeof next.pattern === 'string' && next.pattern.trim().length > 0) ||
+    (typeof next.message === 'string' && next.message.trim().length > 0);
+  return hasAny ? next : undefined;
+}
+
+function moveItem<T>(items: T[], fromIndex: number, toIndex: number): T[] {
+  if (fromIndex < 0 || fromIndex >= items.length) return items;
+  if (toIndex < 0 || toIndex >= items.length) return items;
+  if (fromIndex === toIndex) return items;
+  const next: T[] = [...items];
+  const [item] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, item);
+  return next;
+}
+
+function getOptionDrafts(field: DynamicFormFieldSchema): { label: string; value: string }[] {
+  const raw: unknown = field.options;
+  if (!Array.isArray(raw)) return [];
+  return raw
+    .map((o): { label: string; value: string } | null => {
+      if (!isRecord(o)) return null;
+      const label = typeof o.label === 'string' ? o.label : '';
+      const valueRaw = o.value;
+      const value =
+        typeof valueRaw === 'string' || typeof valueRaw === 'number'
+          ? String(valueRaw)
+          : '';
+      return { label, value };
+    })
+    .filter((v): v is { label: string; value: string } => v !== null);
+}
+
+function getImageOptionDrafts(field: DynamicFormFieldSchema): {
+  label: string;
+  value: string;
+  imageSrc: string;
+  alt?: string;
+}[] {
+  const raw: unknown = field.options;
+  if (!Array.isArray(raw)) return [];
+  return raw
+    .map(
+      (
+        o
+      ):
+        | { label: string; value: string; imageSrc: string; alt?: string }
+        | null => {
+        if (!isRecord(o)) return null;
+        const label = typeof o.label === 'string' ? o.label : '';
+        const valueRaw = o.value;
+        const value =
+          typeof valueRaw === 'string' || typeof valueRaw === 'number'
+            ? String(valueRaw)
+            : '';
+        const imageSrc = typeof o.imageSrc === 'string' ? o.imageSrc : '';
+        const alt = typeof o.alt === 'string' ? o.alt : undefined;
+        return { label, value, imageSrc, ...(alt ? { alt } : {}) };
+      }
+    )
+    .filter(
+      (
+        v
+      ): v is { label: string; value: string; imageSrc: string; alt?: string } =>
+        v !== null
+    );
+}
+
+function toFieldOptions(options: { label: string; value: string }[]): FieldOption[] {
+  return options.map((o) => ({ label: o.label, value: o.value }));
+}
+
+function toImageFieldOptions(
+  options: { label: string; value: string; imageSrc: string; alt?: string }[]
+): ImageFieldOption[] {
+  return options.map((o) => ({
+    label: o.label,
+    value: o.value,
+    imageSrc: o.imageSrc,
+    ...(o.alt !== undefined ? { alt: o.alt } : {}),
+  }));
+}
+
+export interface DynamicFormEditorFieldEditorPanelProps {
+  field: DynamicFormFieldSchema | null;
+  fieldIndex: number;
+  fields: DynamicFormFieldSchema[];
+  readonly: boolean;
+  fieldTypes: FieldType[];
+  onRenameField: (nextName: string) => void;
+  onUpdateField: (nextField: DynamicFormFieldSchema) => void;
+  onDeleteField: () => void;
+  onMoveField: (direction: 'up' | 'down') => void;
+  onDuplicateField: () => void;
+}
+
+export function DynamicFormEditorFieldEditorPanel(
+  props: DynamicFormEditorFieldEditorPanelProps
+): React.ReactElement {
+  const {
+    field,
+    fieldIndex,
+    fields,
+    readonly,
+    fieldTypes,
+    onRenameField,
+    onUpdateField,
+    onDeleteField,
+    onMoveField,
+    onDuplicateField,
+  } = props;
+
+  const canMoveUp: boolean = fieldIndex > 0;
+  const canMoveDown: boolean = fieldIndex >= 0 && fieldIndex < fields.length - 1;
+
+  const placeholderValue: string = useMemo(() => {
+    if (!field) return '';
+    return String(field.placeholder || '');
+  }, [field]);
+
+  return (
+    <Card style={{ flex: 1, minWidth: 520, padding: 12 }}>
+      <Flex direction="column" gap="4">
+        <Flex align="center" justify="between">
+          <Typo variant="body">필드 편집</Typo>
+          <Flex align="center" gap="1">
+            <IconButton
+              aria-label="필드 위로"
+              disabled={readonly || !field || !canMoveUp}
+              onClick={(): void => { onMoveField('up'); }}
+              variant="soft"
+            >
+              <ChevronUpIcon />
+            </IconButton>
+            <IconButton
+              aria-label="필드 아래로"
+              disabled={readonly || !field || !canMoveDown}
+              onClick={(): void => { onMoveField('down'); }}
+              variant="soft"
+            >
+              <ChevronDownIcon />
+            </IconButton>
+            <IconButton
+              aria-label="필드 복제"
+              disabled={readonly || !field}
+              onClick={onDuplicateField}
+              variant="soft"
+            >
+              <CopyIcon />
+            </IconButton>
+            <IconButton
+              aria-label="필드 삭제"
+              disabled={readonly || !field}
+              onClick={onDeleteField}
+              variant="soft"
+            >
+              <TrashIcon />
+            </IconButton>
+          </Flex>
+        </Flex>
+
+        {!field ? (
+          <Typo color="gray" variant="caption">
+            왼쪽에서 필드를 선택하세요.
+          </Typo>
+        ) : (
+          <Flex direction="column" gap="3">
+            <Flex align="end" gap="2">
+              <Box style={{ flex: 1 }}>
+                <Typo variant="caption">name</Typo>
+                <TextField.Root
+                  disabled={readonly}
+                  onChange={(e): void => { onRenameField(e.target.value); }}
+                  value={field.name}
+                />
+              </Box>
+              <Box style={{ flex: 1 }}>
+                <Typo variant="caption">label</Typo>
+                <TextField.Root
+                  disabled={readonly}
+                  onChange={(e): void => {
+                    onUpdateField(updateFieldCommonProps(field, { label: e.target.value }));
+                  }}
+                  value={field.label}
+                />
+              </Box>
+            </Flex>
+
+            <Flex align="center" gap="2">
+              <Select.Root
+                disabled={readonly}
+                onValueChange={(v: string): void => {
+                  if (!isFieldType(v, fieldTypes)) return;
+                  onUpdateField(resetFieldType(field, v, fields));
+                }}
+                value={field.type}
+              >
+                <Select.Trigger style={{ minWidth: 220 }} />
+                <Select.Content>
+                  {fieldTypes.map((t) => (
+                    <Select.Item key={t} value={t}>
+                      {getFieldTypeLabel(t)}
+                    </Select.Item>
+                  ))}
+                </Select.Content>
+              </Select.Root>
+
+              <Flex align="center" gap="2">
+                <Checkbox
+                  checked={Boolean(field.required)}
+                  disabled={readonly}
+                  onCheckedChange={(checked: boolean): void => {
+                    onUpdateField(updateFieldCommonProps(field, { required: checked }));
+                  }}
+                />
+                <Typo variant="caption">필수</Typo>
+              </Flex>
+            </Flex>
+
+            <Box>
+              <Typo variant="caption">description</Typo>
+              <TextArea
+                disabled={readonly}
+                onChange={(e): void => {
+                  onUpdateField(
+                    updateFieldCommonProps(field, { description: e.target.value })
+                  );
+                }}
+                rows={3}
+                value={field.description || ''}
+              />
+            </Box>
+
+            {field.type === 'short_text' ||
+            field.type === 'long_text' ||
+            field.type === 'number' ||
+            field.type === 'email' ||
+            field.type === 'dropdown' ? (
+              <Box>
+                <Typo variant="caption">placeholder</Typo>
+                <TextField.Root
+                  disabled={readonly}
+                  onChange={(e): void => {
+                    onUpdateField(updateTextPlaceholder(field, e.target.value));
+                  }}
+                  value={placeholderValue}
+                />
+              </Box>
+            ) : null}
+
+            {field.type === 'choice' || field.type === 'choices' ? (
+              <Box>
+                <Typo variant="caption">orientation</Typo>
+                <Select.Root
+                  disabled={readonly}
+                  onValueChange={(v: string): void => {
+                    const nextOrientation: 'horizontal' | 'vertical' =
+                      v === 'horizontal' ? 'horizontal' : 'vertical';
+                    onUpdateField(updateOrientation(field, nextOrientation));
+                  }}
+                  value={field.orientation || 'vertical'}
+                >
+                  <Select.Trigger style={{ minWidth: 220 }} />
+                  <Select.Content>
+                    <Select.Item value="vertical">vertical</Select.Item>
+                    <Select.Item value="horizontal">horizontal</Select.Item>
+                  </Select.Content>
+                </Select.Root>
+              </Box>
+            ) : null}
+
+            {field.type === 'dropdown' ||
+            field.type === 'choice' ||
+            field.type === 'radio_cards' ||
+            field.type === 'choices' ? (
+              <Card style={{ padding: 12 }}>
+                <Flex direction="column" gap="2">
+                  <Flex align="center" justify="between">
+                    <Typo variant="caption">options</Typo>
+                    <Button
+                      disabled={readonly}
+                      onClick={(): void => {
+                        const drafts = getOptionDrafts(field);
+                        const nextDrafts = [
+                          ...drafts,
+                          {
+                            label: `옵션 ${drafts.length + 1}`,
+                            value: `option${drafts.length + 1}`,
+                          },
+                        ];
+                        onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                      }}
+                      size="small"
+                      variant="soft"
+                    >
+                      <PlusIcon /> 추가
+                    </Button>
+                  </Flex>
+
+                  {getOptionDrafts(field).map((opt, i) => (
+                    <Flex align="end" gap="2" key={`${opt.value}-${opt.label}`}>
+                      <Box style={{ flex: 1 }}>
+                        <Typo variant="caption">label</Typo>
+                        <TextField.Root
+                          disabled={readonly}
+                          onChange={(e): void => {
+                            const drafts = getOptionDrafts(field);
+                            const nextDrafts = drafts.map((d, idx) =>
+                              idx === i ? { ...d, label: e.target.value } : d
+                            );
+                            onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                          }}
+                          value={opt.label}
+                        />
+                      </Box>
+                      <Box style={{ flex: 1 }}>
+                        <Typo variant="caption">value</Typo>
+                        <TextField.Root
+                          disabled={readonly}
+                          onChange={(e): void => {
+                            const drafts = getOptionDrafts(field);
+                            const nextDrafts = drafts.map((d, idx) =>
+                              idx === i ? { ...d, value: e.target.value } : d
+                            );
+                            onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                          }}
+                          value={opt.value}
+                        />
+                      </Box>
+                      <Flex gap="1">
+                        <IconButton
+                          aria-label="옵션 위로"
+                          disabled={readonly || i === 0}
+                          onClick={(): void => {
+                            const drafts = getOptionDrafts(field);
+                            const nextDrafts = moveItem(drafts, i, i - 1);
+                            onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                          }}
+                          variant="soft"
+                        >
+                          <ChevronUpIcon />
+                        </IconButton>
+                        <IconButton
+                          aria-label="옵션 아래로"
+                          disabled={readonly || i === getOptionDrafts(field).length - 1}
+                          onClick={(): void => {
+                            const drafts = getOptionDrafts(field);
+                            const nextDrafts = moveItem(drafts, i, i + 1);
+                            onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                          }}
+                          variant="soft"
+                        >
+                          <ChevronDownIcon />
+                        </IconButton>
+                        <IconButton
+                          aria-label="옵션 삭제"
+                          disabled={readonly}
+                          onClick={(): void => {
+                            const drafts = getOptionDrafts(field);
+                            const nextDrafts = drafts.filter((_, idx) => idx !== i);
+                            onUpdateField(updateOptions(field, toFieldOptions(nextDrafts)));
+                          }}
+                          variant="soft"
+                        >
+                          <TrashIcon />
+                        </IconButton>
+                      </Flex>
+                    </Flex>
+                  ))}
+                </Flex>
+              </Card>
+            ) : null}
+
+            {field.type === 'image_radio_card' ? (
+              <Card style={{ padding: 12 }}>
+                <Flex direction="column" gap="3">
+                  <Flex align="center" justify="between">
+                    <Typo variant="caption">image options</Typo>
+                    <Button
+                      disabled={readonly}
+                      onClick={(): void => {
+                        const drafts = getImageOptionDrafts(field);
+                        const nextDrafts = [
+                          ...drafts,
+                          {
+                            label: `이미지 ${drafts.length + 1}`,
+                            value: `option${drafts.length + 1}`,
+                            imageSrc: 'https://placehold.co/300x300/png?text=new',
+                          },
+                        ];
+                        onUpdateField(updateImageOptions(field, toImageFieldOptions(nextDrafts)));
+                      }}
+                      size="small"
+                      variant="soft"
+                    >
+                      <PlusIcon /> 추가
+                    </Button>
+                  </Flex>
+
+                  {getImageOptionDrafts(field).map((opt, i) => (
+                    <Card
+                      key={`${opt.value}-${opt.label}-${opt.imageSrc}`}
+                      style={{ padding: 10 }}
+                    >
+                      <Flex direction="column" gap="2">
+                        <Flex align="end" gap="2">
+                          <Box style={{ flex: 1 }}>
+                            <Typo variant="caption">label</Typo>
+                            <TextField.Root
+                              disabled={readonly}
+                              onChange={(e): void => {
+                                const drafts = getImageOptionDrafts(field);
+                                const nextDrafts = drafts.map((d, idx) =>
+                                  idx === i ? { ...d, label: e.target.value } : d
+                                );
+                                onUpdateField(
+                                  updateImageOptions(field, toImageFieldOptions(nextDrafts))
+                                );
+                              }}
+                              value={opt.label}
+                            />
+                          </Box>
+                          <Box style={{ flex: 1 }}>
+                            <Typo variant="caption">value</Typo>
+                            <TextField.Root
+                              disabled={readonly}
+                              onChange={(e): void => {
+                                const drafts = getImageOptionDrafts(field);
+                                const nextDrafts = drafts.map((d, idx) =>
+                                  idx === i ? { ...d, value: e.target.value } : d
+                                );
+                                onUpdateField(
+                                  updateImageOptions(field, toImageFieldOptions(nextDrafts))
+                                );
+                              }}
+                              value={opt.value}
+                            />
+                          </Box>
+                        </Flex>
+
+                        <Box>
+                          <Typo variant="caption">imageSrc</Typo>
+                          <TextField.Root
+                            disabled={readonly}
+                            onChange={(e): void => {
+                              const drafts = getImageOptionDrafts(field);
+                              const nextDrafts = drafts.map((d, idx) =>
+                                idx === i ? { ...d, imageSrc: e.target.value } : d
+                              );
+                              onUpdateField(
+                                updateImageOptions(field, toImageFieldOptions(nextDrafts))
+                              );
+                            }}
+                            value={opt.imageSrc}
+                          />
+                        </Box>
+
+                        <Flex align="end" gap="2">
+                          <Box style={{ flex: 1 }}>
+                            <Typo variant="caption">alt</Typo>
+                            <TextField.Root
+                              disabled={readonly}
+                              onChange={(e): void => {
+                                const drafts = getImageOptionDrafts(field);
+                                const nextAlt =
+                                  e.target.value.trim().length === 0 ? undefined : e.target.value;
+                                const nextDrafts = drafts.map((d, idx) =>
+                                  idx === i ? { ...d, alt: nextAlt } : d
+                                );
+                                onUpdateField(
+                                  updateImageOptions(field, toImageFieldOptions(nextDrafts))
+                                );
+                              }}
+                              value={opt.alt || ''}
+                            />
+                          </Box>
+                          <IconButton
+                            aria-label="이미지 옵션 삭제"
+                            disabled={readonly}
+                            onClick={(): void => {
+                              const drafts = getImageOptionDrafts(field);
+                              const nextDrafts = drafts.filter((_, idx) => idx !== i);
+                              onUpdateField(
+                                updateImageOptions(field, toImageFieldOptions(nextDrafts))
+                              );
+                            }}
+                            variant="soft"
+                          >
+                            <TrashIcon />
+                          </IconButton>
+                        </Flex>
+                      </Flex>
+                    </Card>
+                  ))}
+
+                  <Flex gap="2">
+                    <Box style={{ flex: 1 }}>
+                      <Typo variant="caption">gridColumnsCount</Typo>
+                      <TextField.Root
+                        disabled={readonly}
+                        inputMode="numeric"
+                        onChange={(e): void => {
+                          onUpdateField(
+                            updateImageLayout(field, {
+                              gridColumnsCount: parseOptionalNumber(e.target.value),
+                            })
+                          );
+                        }}
+                        value={String(field.gridColumnsCount || '')}
+                      />
+                    </Box>
+                    <Box style={{ flex: 1 }}>
+                      <Typo variant="caption">gridItemHeight</Typo>
+                      <TextField.Root
+                        disabled={readonly}
+                        onChange={(e): void => {
+                          onUpdateField(
+                            updateImageLayout(field, { gridItemHeight: e.target.value })
+                          );
+                        }}
+                        value={String(field.gridItemHeight || '')}
+                      />
+                    </Box>
+                    <Box style={{ flex: 1 }}>
+                      <Typo variant="caption">gridGap</Typo>
+                      <TextField.Root
+                        disabled={readonly}
+                        onChange={(e): void => {
+                          onUpdateField(updateImageLayout(field, { gridGap: e.target.value }));
+                        }}
+                        value={String(field.gridGap || '')}
+                      />
+                    </Box>
+                  </Flex>
+
+                  <Box>
+                    <Typo variant="caption">imageFit</Typo>
+                    <Select.Root
+                      disabled={readonly}
+                      onValueChange={(v: string): void => {
+                        const nextFit: 'cover' | 'contain' =
+                          v === 'contain' ? 'contain' : 'cover';
+                        onUpdateField(updateImageLayout(field, { imageFit: nextFit }));
+                      }}
+                      value={field.imageFit || 'cover'}
+                    >
+                      <Select.Trigger style={{ minWidth: 220 }} />
+                      <Select.Content>
+                        <Select.Item value="cover">cover</Select.Item>
+                        <Select.Item value="contain">contain</Select.Item>
+                      </Select.Content>
+                    </Select.Root>
+                  </Box>
+                </Flex>
+              </Card>
+            ) : null}
+
+            <Card style={{ padding: 12 }}>
+              <Flex direction="column" gap="2">
+                <Typo variant="caption">validation</Typo>
+                <Flex gap="2">
+                  <Box style={{ flex: 1 }}>
+                    <Typo variant="caption">min</Typo>
+                    <TextField.Root
+                      disabled={readonly}
+                      inputMode="numeric"
+                      onChange={(e): void => {
+                        const current = getValidation(field);
+                        const next = cleanValidation({
+                          ...current,
+                          min: parseOptionalNumber(e.target.value),
+                        });
+                        onUpdateField(updateFieldValidation(field, next));
+                      }}
+                      value={getValidation(field).min !== undefined ? String(getValidation(field).min) : ''}
+                    />
+                  </Box>
+                  <Box style={{ flex: 1 }}>
+                    <Typo variant="caption">max</Typo>
+                    <TextField.Root
+                      disabled={readonly}
+                      inputMode="numeric"
+                      onChange={(e): void => {
+                        const current = getValidation(field);
+                        const next = cleanValidation({
+                          ...current,
+                          max: parseOptionalNumber(e.target.value),
+                        });
+                        onUpdateField(updateFieldValidation(field, next));
+                      }}
+                      value={getValidation(field).max !== undefined ? String(getValidation(field).max) : ''}
+                    />
+                  </Box>
+                </Flex>
+
+                <Box>
+                  <Typo variant="caption">pattern</Typo>
+                  <TextField.Root
+                    disabled={readonly}
+                    onChange={(e): void => {
+                      const current = getValidation(field);
+                      const next = cleanValidation({ ...current, pattern: e.target.value });
+                      onUpdateField(updateFieldValidation(field, next));
+                    }}
+                    value={String(getValidation(field).pattern || '')}
+                  />
+                </Box>
+
+                <Box>
+                  <Typo variant="caption">message</Typo>
+                  <TextField.Root
+                    disabled={readonly}
+                    onChange={(e): void => {
+                      const current = getValidation(field);
+                      const next = cleanValidation({ ...current, message: e.target.value });
+                      onUpdateField(updateFieldValidation(field, next));
+                    }}
+                    value={String(getValidation(field).message || '')}
+                  />
+                </Box>
+              </Flex>
+            </Card>
+          </Flex>
+        )}
+      </Flex>
+    </Card>
+  );
+}
+