2.2.56 • Published 1 year ago

@quotalab/antd-form-builder v2.2.56

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

@quotalab/antd-form-builder

VICS 연동을 위해 VICS에서 사용하는 Input 필드를 제한적으로 지원하는 폼 빌더이며, 앞으로 진행할 폼 빌더의 PoC 역할

  • 지원하는 컴포넌트 목록

    Untitled

폼 빌더의 목적

폼 빌더의 목적은 폼 하나를 그리기 위해 디자이너와 프론트엔드 개발자 사이의 커뮤니케이션을 최소한으로 하기 위해 정형화된 폼을 그려내는 것입니다.

폼 빌더의 발전 방향

API의 유연성을 저해하지 않으면서 폼 필드와 레이아웃을 정의하는 것에 도움을 주는 방향으로 발전해야 합니다. 현재는 제한된 폼 필드만 사용할 수 있으며, 그 제한될 필드가 쿼타북 내의 폼을 녹여내지 못합니다.

TODO

  • 현재 Antd에 강하게 종속되어있습니다. 때문에 번들 사이즈가 매우 크며, Date 필드를 처리하기 위해 @quotalab/antd-datepicker 라이브러리를 사용하고 있어서 CommonJS 배포로 제한되고 있습니다.
  • 현재 폼 빌더를 사용하기 위해서는 개발자가 피그마 화면을 직접 보고 meta 필드를 직접 입력해야 합니다. 또한, 디자이너 역시 그리고 싶은 폼의 형태를 구상한 후, 피그마의 컴포넌트로 하나씩 그려야합니다. 이 과정을 최소화하기 위해 Drag&Drop 으로 디자이너가 폼을 그리면 이에 상응하는 JSON 파일을 출력하고 Figma로 볼 수 있도록 하는 작업이 필요합니다.

FormBuilder API

다음은 폼 빌더를 이루는 필드의 사용 예시입니다.

FormBuilder props

NameTypeDescription
metaMetaFieldItem[]폼 빌더의 메타 정보를 이루는 props입니다.

MetaFieldItem Type

MetaFieldItem 타입은 폼 빌더의 각 행을 이루는 필드입니다.

NameTypeDescription
namestringAntd FormItem의 name에 대입되는 값입니다.
labelundefined or stringAntd FormItem의 label에 대입되는 값입니다.
rulesundefined or Rule[]Antd FormItem의 rules에 대입되는 값입니다.
requiredundefined or boolean or BaseFieldOptionalInteractiveCallback해당 값이 true로 반환된다면 Antd는 해당 값을 필수 필드로 지정합니다. BaseFieldOptionalInteractiveCallback 함수의 인자로 전달되는 safeGetFieldValue를 이용해 폼의 상태를 즉각적으로 받아올 수 있습니다.
disabledundefined or boolean or BaseFieldOptionalInteractiveCallback해당 값이 true로 반환된다면 Antd는 해당 값을 비활성 필드로 지정합니다. BaseFieldOptionalInteractiveCallback 함수의 인자로 전달되는 safeGetFieldValue를 이용해 폼의 상태를 즉각적으로 받아올 수 있습니다.
componentkeyof BaseFieldComponentProps어떤 컴포넌트를 렌더링할 것인지 결정하는 값입니다. 해당 값에 따라 MetaFieldItem 타입이 확장되거나 제한됩니다.
propsComponentPropscomponent로 전달되는 props 값입니다.

BaseFieldOptionalInteractiveCallback Type

required / disabled 필드에서 지정할 수 있는 타입입니다.

type BaseFieldOptionalInteractiveCallback = (args: {
  safeGetFieldValue: typeof safeGetFieldValueFunction;
}) => boolean;

BaseFieldComponentProps Type

NameProps TypeDescription
textComponentProps특수문자를 포함하여 모든 문자를 입력할 수 있습니다. 입력한 값은 string으로 저장합니다.
textareaComponentProps특수문자를 포함하여 모든 문자를 입력할 수 있습니다. 입력한 값은 string으로 저장합니다.
selectSelectProps<string or string[]>지정된 option 중 하나를 선택합니다. 필드에 string을 입력하면 일치하는 option을 검색할 수 있습니다. 선택된 값은 각 option에 설정한 형식으로 저장합니다.
booleanRadioGroupProps상호 배타적인 false, true 중 하나를 선택할 수 있습니다. 선택한 값은 false 또는 true로 저장합니다.
numberInputNumberProps음수 및 소수점을 포함한 숫자를 입력할 수 있습니다. 입력한 값은 number로 저장합니다.
dateComponentPropsdatepicker에서 연, 월, 일을 선택할 수 있습니다. 선택한 값은 date로 저장합니다.
formListFormListPropsindex, element에 따라 contentsBox 내부에 formBuilder를 출력합니다. addButton을 통해 arrayItem을 생성하고 삭제할 수 있습니다.
customnever개발자가 직접 필요한 폼의 필드를 ReactElement 타입으로 전달할 수 있습니다.

BaseFieldComponentProps MetaFieldItem Type

BaseFieldComponentProps에 따라서 변화하는 MetaFieldItem 타입입니다.

Component NameMetaFieldProps TypeDescription
selectoptionsArray<{ label: string; value: string }>Select에서 선택할 수 있는 option 리스트를 입력합니다.
multipleundefined or booleantrue로 지정될 경우, 여러 option을 선택할 수 있습니다.
numbertypeundefined or ‘default’ or ‘amount’ or ‘percent’‘amount’로 지정될 경우, suffix로 currency symbol을 노출합니다. ’percent’로 지정될 경우, prefix로 ‘%’를 노출합니다.
number ‘amount’ typecurrencyCurrencySymbolsuffix로 노출할 currency 값을 입력합니다.
dateshowTimeundefined or booleanHH:mm 값을 입력받는 필드를 함께 노출합니다.
customcustomComponent(field: BaseFieldProps<'custom'>) => ReactElementReactElement 값을 render props 형태로 전달합니다.
disabledundefined or nevercustom 값은 disabled 필드를 meta 정보에 입력할 필요가 없습니다. 렌더링할 컴포넌트에 직접 입력해주세요.
formListdisabledundefined or neverFormList 컴포넌트는 disabled 상태로 지정될 수 없습니다.
quotalabantd-form-builder
@quotalab/antd@quotalab/antd-datepicker@quotalab/color@quotalab/headless-hooks@quotalab/qds@quotalab/react@quotalab/utilsmoment
@everything-registry/sub-chunk-753
1.1.5-local.3

1 year ago

1.1.5-local.2

1 year ago

1.1.5-local.1

1 year ago

2.2.55

1 year ago

2.2.56

1 year ago

2.2.53

1 year ago

2.2.54

1 year ago

2.2.51

1 year ago

2.2.52

1 year ago

2.2.50

1 year ago

2.0.21-alpha.2

1 year ago

2.0.21-alpha.1

1 year ago

2.2.24-alpha.1

1 year ago

2.2.3-local.2

1 year ago

2.2.3-local.1

1 year ago

2.1.3-local.7

1 year ago

2.1.3-local.6

1 year ago

2.1.3-local.9

1 year ago

2.1.3-local.8

1 year ago

2.2.0-beta.1

1 year ago

2.2.0-beta.2

1 year ago

2.2.0-beta.3

1 year ago

2.2.0-beta.4

1 year ago

2.2.1

1 year ago

2.2.0

1 year ago

2.2.3

1 year ago

2.2.2

1 year ago

2.2.5

1 year ago

2.2.4

1 year ago

2.2.7

1 year ago

2.2.6

1 year ago

2.2.46-local.2

1 year ago

2.2.46-local.1

1 year ago

2.2.18-alpha.1

1 year ago

2.1.3-local.1

1 year ago

2.1.3-local.3

1 year ago

2.1.3-local.2

1 year ago

2.1.3-local.5

1 year ago

2.1.3-local.4

1 year ago

2.1.2

1 year ago

2.0.15

1 year ago

2.1.1

1 year ago

2.0.16

1 year ago

2.0.13

1 year ago

2.0.14

1 year ago

2.0.11

1 year ago

2.0.12

1 year ago

2.0.10

1 year ago

2.1.0

1 year ago

2.1.3-local.10

1 year ago

2.2.9

1 year ago

2.2.8

1 year ago

2.0.19

1 year ago

2.0.17

1 year ago

2.0.18

1 year ago

2.0.20

1 year ago

2.0.21

1 year ago

2.0.14-alpha.6

1 year ago

2.0.14-alpha.5

1 year ago

2.0.14-alpha.4

1 year ago

2.0.14-alpha.3

1 year ago

2.0.14-alpha.2

1 year ago

2.0.14-alpha.1

1 year ago

2.1.0-alpha.10

1 year ago

2.1.0-alpha.12

1 year ago

2.1.0-alpha.11

1 year ago

2.1.0-alpha.14

1 year ago

2.1.0-alpha.13

1 year ago

2.1.0-alpha.15

1 year ago

2.0.3

1 year ago

2.0.2

1 year ago

2.0.5

1 year ago

2.0.4

1 year ago

2.0.7

1 year ago

2.0.6

1 year ago

2.0.9

1 year ago

2.0.8

1 year ago

2.0.1

1 year ago

2.0.0

1 year ago

2.0.13-alpha.4

1 year ago

2.0.13-alpha.3

1 year ago

2.0.13-alpha.2

1 year ago

2.0.13-alpha.1

1 year ago

2.0.13-alpha.7

1 year ago

2.0.13-alpha.6

1 year ago

2.0.13-alpha.5

1 year ago

2.1.1-alpha.4

1 year ago

2.1.1-alpha.3

1 year ago

2.1.1-alpha.2

1 year ago

2.1.1-alpha.1

1 year ago

1.1.1

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

2.0.16-alpha.2

1 year ago

2.1.0-local.5

1 year ago

2.1.0-local.4

1 year ago

2.1.0-local.3

1 year ago

2.0.16-alpha.1

1 year ago

2.1.0-local.2

1 year ago

2.1.0-local.1

1 year ago

2.2.14-alpha.1

1 year ago

2.0.18-alpha.5

1 year ago

2.0.18-alpha.4

1 year ago

2.0.18-alpha.1

1 year ago

2.0.18-alpha.3

1 year ago

2.0.18-alpha.2

1 year ago

2.2.17

1 year ago

2.2.18

1 year ago

2.2.15

1 year ago

2.2.16

1 year ago

2.2.13

1 year ago

2.2.14

1 year ago

2.2.11

1 year ago

2.2.12

1 year ago

2.2.14-alpha.6

1 year ago

2.2.10

1 year ago

2.2.14-alpha.2

1 year ago

2.2.14-alpha.3

1 year ago

2.2.14-alpha.4

1 year ago

2.2.14-alpha.5

1 year ago

2.1.3-alpha.1

1 year ago

2.1.3-alpha.2

1 year ago

2.2.19

1 year ago

2.2.28

1 year ago

2.2.29

1 year ago

2.2.26

1 year ago

2.2.27

1 year ago

2.2.24

1 year ago

2.2.25

1 year ago

2.2.22

1 year ago

2.2.23

1 year ago

2.2.20

1 year ago

2.1.3-alpha.5

1 year ago

2.0.15-alpha.1

1 year ago

2.2.21

1 year ago

2.1.3-alpha.6

1 year ago

2.1.3-alpha.3

1 year ago

2.1.3-alpha.4

1 year ago

2.1.3-alpha.7

1 year ago

2.2.25-alpha.6

1 year ago

2.2.25-alpha.7

1 year ago

2.2.25-alpha.4

1 year ago

2.2.25-alpha.5

1 year ago

2.2.25-alpha.3

1 year ago

2.2.39

1 year ago

2.2.25-alpha.1

1 year ago

2.2.37

1 year ago

2.2.38

1 year ago

2.2.35

1 year ago

2.2.11-alpha.2

1 year ago

2.2.36

1 year ago

2.2.11-alpha.1

1 year ago

2.2.33

1 year ago

2.2.11-alpha.4

1 year ago

2.2.34

1 year ago

2.2.11-alpha.3

1 year ago

2.2.31

1 year ago

2.2.32

1 year ago

2.2.2-local.1

1 year ago

2.2.30

1 year ago

2.2.2-local.2

1 year ago

2.1.0-alpha.8

1 year ago

2.1.0-alpha.7

1 year ago

2.1.0-alpha.6

1 year ago

2.2.48

1 year ago

2.2.49

1 year ago

2.2.46

1 year ago

2.2.47

1 year ago

2.2.44

1 year ago

2.2.45

1 year ago

2.2.42

1 year ago

2.1.0-alpha.5

1 year ago

2.2.43

1 year ago

2.2.40

1 year ago

2.2.41

1 year ago

2.1.0-alpha.1

1 year ago

1.1.0

1 year ago

1.1.0-alpha.1

1 year ago

1.1.0-alpha.2

1 year ago

1.1.0-alpha.3

1 year ago

1.0.14

1 year ago

1.0.14-alpha.1

1 year ago

1.0.13

1 year ago

1.0.12

1 year ago

1.0.12-alpha.1

1 year ago

1.0.11

1 year ago

1.0.11-alpha.2

1 year ago

1.0.11-alpha.1

1 year ago

1.0.6-alpha.2

1 year ago

1.0.10

1 year ago

1.0.6-alpha.1

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago

1.0.0-alpha.14

1 year ago

1.0.0-alpha.13

1 year ago

1.0.0-alpha.12

1 year ago

1.0.0-alpha.11

1 year ago

1.0.0-alpha.10

1 year ago

1.0.0-alpha.9

1 year ago

1.0.0-alpha.8

1 year ago

1.0.0-alpha.7

1 year ago

1.0.0-alpha.6

1 year ago

1.0.0-alpha.5

1 year ago

1.0.0-alpha.4

1 year ago

1.0.0-alpha.3

1 year ago

1.0.0-alpha.2

1 year ago

1.0.0-alpha.1

1 year ago