doc: FormTabs

Author: DanielSchiavini

packages/curve-ui-kit/src/shared/ui/FormTabs/FormTabs.tsx

@@ -17,11 +17,17 @@ const applyFnOrValue = <Props extends object, R extends string | boolean>(
 type FormSubTab<Props extends object> = Pick<FormTab<Props>, 'value' | 'label' | 'component' | 'visible' | 'disabled'>
 
 export type FormTab<Props extends object> = {
+  /** Unique value of the tab, it might be used in the URL later */
   value: string
+  /** Label of the tab, can be a function that receives the form props */
   label: FnOrValue<Props, string>
+  /** Optional sub-tabs of the tab */
   subTabs?: FormSubTab<Props>[]
+  /** Function or value to determine if the tab is visible */
   visible?: FnOrValue<Props, boolean>
+  /** Function or value to determine if the tab is disabled */
   disabled?: FnOrValue<Props, boolean>
+  /** Component to render when the tab is selected */
   component?: ComponentType<Props>
 }
 
@@ -46,15 +52,14 @@ const selectVisible = <Props extends object, Tab extends FormSubTab<Props>>(
   return visible.find(({ value }) => value === key) ?? visible[0]
 }
 
-function useFormTabs<T extends object>({
-  menu,
-  defaultTab,
-  params,
-}: {
+type UseFormTabOptions<T extends object> = {
   menu: FormTab<T>[]
   params: T
   defaultTab: string
-}) {
+}
+
+/** Hook to manage form tabs and sub-tabs. */
+function useFormTabs<T extends object>({ menu, defaultTab, params }: UseFormTabOptions<T>) {
   const [tabKey, onChangeTab] = useState(defaultTab)
   const [subTabKey, onChangeSubTab] = useState<string>()
   const tab = selectVisible(menu, tabKey, params)
@@ -68,21 +73,21 @@ function useFormTabs<T extends object>({
   return { tab, tabs, subTabs, subTab, Component, onChangeTab, onChangeSubTab }
 }
 
+/**
+ * Adds a background to the form content. In the new forms we don't show the background at this level,
+ * we still render AppFormContentWrapper there. However, in the new forms the accordion stays outside the background,
+ * but is still co-located with the form content.
+ */
 const LegacyFormWrapper = ({ children }: { children: ReactNode }) => (
   <Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
     <AppFormContentWrapper>{children}</AppFormContentWrapper>
   </Stack>
 )
 
-export function FormTabs<T extends object>({
-  shouldWrap,
-  ...options
-}: {
-  menu: FormTab<T>[]
-  params: T
-  shouldWrap: boolean
-  defaultTab: string
-}) {
+/**
+ * Form wrapper that displays tabs and handles tab switching. It supports sub-tabs as well.
+ */
+export function FormTabs<T extends object>({ shouldWrap, ...options }: UseFormTabOptions<T> & { shouldWrap: boolean }) {
   const { tab, tabs, subTabs, subTab, Component, onChangeTab, onChangeSubTab } = useFormTabs(options)
   const params = options.params
   return (