dangdinhtai0001 / friday-fw-ssr Goto Github PK

Cấu trúc

• Form field
  -- Form field control: Định nghĩa phần control của form field
  -- Form filed label: Định nghĩa label cho form field
  -- Default form field: form field layout và nhiều hơn thế
• Formlayout
  -- Default form layout: Form layout và hơn thế
• Form context: Trạng thái của form
• Form utils: Các hàm dùng chung
• Form Wrapper: Wrap form trong context provider
• Form:
• Form.d: Định nghĩa các interface sử dụng
• useForm: Xử lý tất cả logic của form

ĐỊnh nghĩa kiểu

Form field

• name: Tên field. Phải là duy nhất trong.
• label: Tên hiển thị trên label
• description: Phần nội dung của description
• required: Có phải là trường bắt buộc hay không? Nếu có, một rule require sẽ đc apply cho field này
• initialValue: Giá trị ban đầu (phụ thuộc vào component gì)
• component: Component của field
• componentParams: Các params truyền vào

Thử nghiệm các component của MUI base để xây dựng một component cho package slytherin

• Thử nghiệp apply custom css
• Thử nghiệm với button và modal

Thử nghiệp apply custom css

• Tích hợp tailwind vào project
• Tích hợp motion framer
• Tạo theme với tailwind và next theme

Thử nghiệm button

• button được style bằng tailwind

Thử nghiệm modal

Thửu nghiệm Tab

Hook form cần thực hiện được các thao tác sau:

• Trigger sự kiện form mouted
  Chuyển trạng thái form sang thành mounted
  Gọi event mounted được định nghĩa
  Apply các rules cần thiết (disabled, visible, validate,....) ứng với giá trị khởi tạo của form
• handleResetForm: set giá trị của form về giá trị initial, đồng thời applyRules vào
• handleResetField: set giá trị của fieldvề giá trị initial, đồng thời applyRules vào
• handleSetFieldValue: set giá trị của field, apply rules, kiểm tra validate
• handleSetFormValue: set giá trị của form (nhiều field), apply rules, kiểm tra validate
• handleOnSubmitSuccess:
• handleOnSubmitError:
• handleOnChange:
• handleOnValidate: (data, context) => { return formResolver(data, context, formContext, helper)}

Hàm utils

• getValues: Lấy ra giá trị hiện tại của form (Có cấu hình lấy dữ liệu raw hoặc dữ liệu đc transform) getValues(data, context, helper)

Thông tin cần quản lý

• fields metadata: Các thông tin cần quả lý dựa trên fields
• disabled: Một object có các props là id của các field, trả về trạng thái disabled của field đó
• visible: Một object có các props là id của các field, trả về trạng thái visiblecủa field đó
• values: Giá trị hiện tại của form
• submitCount: đếm số lần submit của form
• initialValues: Giá trị khởi tạo của form (Dùng khi cần reset form/field)
• errors: Object lưu trữ thông tin về lỗi của form khi validate
• status : trạng thái của form

Các trạng thái của form:

• before mount: Trạng thái khởi đàu của form
• mounted: Form sau khi đã thực hiện init form context
• idle: Form khi đang không thực hiện thao tác gì
• validating: Form đang thực hiện validate
• submiting: Form đang submit

Trong mỗi thời điểm, form sẽ chỉ có một trạng thái duy nhất

Checklist

• #15
• #16
• #17
• Xây dựng form layout
• Xử lý giao diện
• Test thử form

Các sự kiện sẽ xử lý:

• onChange:
• onBlur
• onMounted:
• onSubmitSuccess:
• onSubmitError:
• resetForm
• resetField
• setFormValue (setFieldValue)
• validateForm

Form rule

• validate : Rule được apply khi có yêu cầu validate form hoặc trước khi submit
• disabled: Thay đổi trạng thái disable của các field
• visible: Thay đổi trạng thái visible của các field

• Tạo branch mới dev-1
• Init cấu trúc mới

Dựa theo cấu trúc của MUI

Chia thành các package chính, bao gồm:

• hufflepuff-package: Bao gồm các component chưa được style và các hook ở low-level
• slytherin-package: Bao gồm các component được style
• gryffindor-package: Bao gồm các component form và grid
• ravenclaw-package: Các hàm utils được sử dụng chung

Cấu trúc project sẽ như sau:

pages
public
styles
packages
 - gryffindor
 - slytherin
 - ravenclaw
 - hufflepuff
modules