✨ feat: Add new props and functionality to components, update styles,…

… and adjust form layout

This commit introduces new props and functionality to components, updates styles, and makes adjustments to the form layout. The changes aim to enhance the user experience and improve the overall design of the project.

src/Form/components/FormItem.tsx

@@ -10,18 +10,20 @@ const { Item } = Form;
 export interface FormItemProps extends AntdFormItemProps {
   desc?: string;
   divider?: boolean;
+  hidden?: boolean;
   minWidth?: string | number;
+  tag?: string;
 }
 
 const FormItem = memo<FormItemProps>(
-  ({ desc, minWidth, className, label, children, divider, ...props }) => {
+  ({ desc, tag, minWidth, className, label, children, divider, ...props }) => {
     const { cx, styles } = useStyles(minWidth);
     return (
       <>
         {divider && <FormDivider />}
         <Item
           className={cx(styles.item, className)}
-          label={desc ? <FormTitle desc={desc} title={String(label)} /> : label}
+          label={<FormTitle desc={desc} tag={tag} title={String(label)} />}
           {...props}
         >
           {children}

src/Form/components/FormTitle.tsx

@@ -1,19 +1,25 @@
+import { Tag } from 'antd';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 import { DivProps } from '@/types';
 
 import { useStyles } from './style';
 
 export interface FormTitleProps extends DivProps {
   desc?: string;
+  tag?: string;
   title: string;
 }
 
-const FormTitle = memo<FormTitleProps>(({ className, title, desc }) => {
+const FormTitle = memo<FormTitleProps>(({ className, tag, title, desc }) => {
   const { cx, styles } = useStyles();
   return (
     <div className={cx(styles.formTitle, className)}>
-      <div>{title}</div>
+      <Flexbox align={'center'} direction={'horizontal'} gap={8}>
+        {title}
+        {tag && <Tag>{tag}</Tag>}
+      </Flexbox>
       {desc && <small>{desc}</small>}
     </div>
   );

src/Form/components/style.ts

@@ -1,85 +1,98 @@
 import { createStyles } from 'antd-style';
 import { isNumber } from 'lodash-es';
 
-export const useStyles = createStyles(({ css, token }, itemMinWidth?: string | number) => ({
-  footer: css`
-    display: flex;
-    gap: 8px;
-    justify-content: flex-end;
-  `,
-  formTitle: css`
-    position: relative;
+export const useStyles = createStyles(
+  ({ css, cx, token, isDarkMode }, itemMinWidth?: string | number) => ({
+    footer: css`
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+    `,
+    formTitle: css`
+      position: relative;
 
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
 
-    text-align: left;
+      text-align: left;
 
-    > div {
-      font-weight: 500;
-      line-height: 1;
-    }
+      > div {
+        font-weight: 500;
+        line-height: 1;
+      }
+
+      > small {
+        display: block;
 
-    > small {
-      display: block;
+        line-height: 1;
+        color: ${token.colorTextDescription};
+        word-wrap: break-word;
+        white-space: pre-wrap;
+      }
 
-      line-height: 1;
-      color: ${token.colorTextDescription};
-      word-wrap: break-word;
-      white-space: pre-wrap;
-    }
-  `,
-  group: css`
-    .ant-collapse-header {
-      background: ${token.colorFillTertiary};
-      border-radius: 0 !important;
-    }
+      .ant-tag {
+        font-family: ${token.fontFamilyCode};
+      }
+    `,
+    group: cx(
+      isDarkMode &&
+        css`
+          .ant-collapse-content {
+            background: transparent;
+          }
 
-    .ant-collapse-content {
-      background: transparent;
-    }
+          .ant-collapse-header {
+            background: ${token.colorFillTertiary};
+          }
+        `,
+      css`
+        .ant-collapse-header {
+          border-radius: 0 !important;
+        }
 
-    .ant-collapse-content-box {
-      padding-top: 0 !important;
-      padding-bottom: 0 !important;
-    }
+        .ant-collapse-content-box {
+          padding-top: 0 !important;
+          padding-bottom: 0 !important;
+        }
 
-    .ant-form-item-label {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-  `,
-  item: css`
-    padding: 8px 0;
+        .ant-form-item-label {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+      `,
+    ),
+    item: css`
+      padding: 8px 0;
 
-    .ant-row {
-      justify-content: space-between;
+      .ant-row {
+        justify-content: space-between;
 
-      > div {
-        flex: unset !important;
-        flex-grow: unset !important;
+        > div {
+          flex: unset !important;
+          flex-grow: unset !important;
+        }
       }
-    }
 
-    ${itemMinWidth &&
-    css`
-      .ant-form-item-control {
-        width: ${isNumber(itemMinWidth) ? `${itemMinWidth}px` : itemMinWidth};
-      }
-    `}
-  `,
-  title: css`
-    display: flex;
-    gap: 8px;
-    align-items: center;
+      ${itemMinWidth &&
+      css`
+        .ant-form-item-control {
+          width: ${isNumber(itemMinWidth) ? `${itemMinWidth}px` : itemMinWidth};
+        }
+      `}
+    `,
+    title: css`
+      display: flex;
+      gap: 8px;
+      align-items: center;
 
-    font-size: 16px;
-    font-weight: 600;
+      font-size: 16px;
+      font-weight: 600;
 
-    .anticon {
-      color: ${token.colorPrimary};
-    }
-  `,
-}));
+      .anticon {
+        color: ${token.colorPrimary};
+      }
+    `,
+  }),
+);

src/Form/index.tsx

@@ -1,6 +1,6 @@
-import { Form as AntForm, FormProps as AntFormProps } from 'antd';
+import { Form as AntForm, FormProps as AntFormProps, type FormInstance } from 'antd';
 import { LucideIcon } from 'lucide-react';
-import { type ReactNode, memo } from 'react';
+import { type ReactNode, forwardRef } from 'react';
 
 import FormFooter from './components/FormFooter';
 import FormGroup from './components/FormGroup';
@@ -20,27 +20,37 @@ export interface FormProps extends AntFormProps {
   items?: ItemGroup[];
 }
 
-const Form = memo<FormProps>(({ className, itemMinWidth, footer, items, children, ...props }) => {
-  const { cx, styles } = useStyles();
-  return (
-    <AntForm className={cx(styles.form, className)} colon={false} layout="horizontal" {...props}>
-      {items?.map((group, groupIndex) => (
-        <FormGroup icon={group?.icon} key={groupIndex} title={group.title}>
-          {group.children.map((item, itemIndex) => {
-            return (
-              <FormItem
-                divider={itemIndex !== 0}
-                key={itemIndex}
-                minWidth={itemMinWidth}
-                {...item}
-              />
-            );
-          })}
-        </FormGroup>
-      ))}
-      {children}
-      {footer && <FormFooter>{footer}</FormFooter>}
-    </AntForm>
-  );
-});
+const Form = forwardRef<FormInstance, FormProps>(
+  ({ className, itemMinWidth, footer, items, children, ...props }, ref) => {
+    const { cx, styles } = useStyles();
+    return (
+      <AntForm
+        className={cx(styles.form, className)}
+        colon={false}
+        layout="horizontal"
+        ref={ref}
+        {...props}
+      >
+        {items?.map((group, groupIndex) => (
+          <FormGroup icon={group?.icon} key={groupIndex} title={group.title}>
+            {group.children
+              .filter((item) => !item.hidden)
+              .map((item, itemIndex) => {
+                return (
+                  <FormItem
+                    divider={itemIndex !== 0}
+                    key={itemIndex}
+                    minWidth={itemMinWidth}
+                    {...item}
+                  />
+                );
+              })}
+          </FormGroup>
+        ))}
+        {children}
+        {footer && <FormFooter>{footer}</FormFooter>}
+      </AntForm>
+    );
+  },
+);
 export default Form;

src/Form/style.ts

@@ -1,6 +1,6 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ css }) => ({
+export const useStyles = createStyles(({ css, token }) => ({
   footer: css`
     display: flex;
     gap: 8px;
@@ -35,5 +35,10 @@ export const useStyles = createStyles(({ css }) => ({
       flex: 0;
       min-width: unset !important;
     }
+
+    .ant-collapse-item {
+      overflow: hidden !important;
+      border-radius: ${token.borderRadius}px !important;
+    }
   `,
 }));

src/ThemeProvider/GlobalStyle/antdOverride.ts

@@ -21,4 +21,8 @@ export default (token: Theme) => css`
       background: ${token.colorText} !important;
     }
   }
+
+  .ant-switch-handle::before {
+    background: ${token.colorBgContainer} !important;
+  }
 `;