From ddc88dffabf8d7cde1e9f7a5280a42da8983d1d2 Mon Sep 17 00:00:00 2001
From: Carrotzpc <zhang.pc3@gmail.com>
Date: Thu, 4 Jul 2024 16:32:55 +0800
Subject: [PATCH] feat: add CollapseGroup component

---
 src/CollapseGroup/demos/Playground.tsx | 25 ++++++++++++++++++++
 src/CollapseGroup/demos/index.tsx      | 10 ++++++++
 src/CollapseGroup/index.md             | 32 ++++++++++++++++++++++++++
 src/CollapseGroup/index.tsx            | 28 ++++++++++++++++++++++
 src/CollapseGroup/style.ts             | 31 +++++++++++++++++++++++++
 5 files changed, 126 insertions(+)
 create mode 100644 src/CollapseGroup/demos/Playground.tsx
 create mode 100644 src/CollapseGroup/demos/index.tsx
 create mode 100644 src/CollapseGroup/index.md
 create mode 100644 src/CollapseGroup/index.tsx
 create mode 100644 src/CollapseGroup/style.ts

diff --git a/src/CollapseGroup/demos/Playground.tsx b/src/CollapseGroup/demos/Playground.tsx
new file mode 100644
index 00000000..d1a5c276
--- /dev/null
+++ b/src/CollapseGroup/demos/Playground.tsx
@@ -0,0 +1,25 @@
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import { CollapseGroup, CollapseGroupProps } from '@yuntijs/ui';
+import { VariableIcon } from 'lucide-react';
+
+export default () => {
+  const store = useCreateStore();
+  const control: CollapseGroupProps | any = useControls(
+    {
+      title: '输出变量',
+      defaultActive: true,
+      variant: {
+        options: ['default', 'block', 'ghost', 'pure'],
+        value: 'default',
+      },
+    },
+    { store }
+  );
+  return (
+    <StoryBook levaStore={store} style={{ width: '100%' }}>
+      <CollapseGroup icon={VariableIcon} style={{ width: '100%' }} {...control}>
+        我是收起来的内容
+      </CollapseGroup>
+    </StoryBook>
+  );
+};
diff --git a/src/CollapseGroup/demos/index.tsx b/src/CollapseGroup/demos/index.tsx
new file mode 100644
index 00000000..585d16cd
--- /dev/null
+++ b/src/CollapseGroup/demos/index.tsx
@@ -0,0 +1,10 @@
+import { CollapseGroup } from '@yuntijs/ui';
+import { VariableIcon } from 'lucide-react';
+
+export default () => {
+  return (
+    <CollapseGroup icon={VariableIcon} style={{ width: '100%' }} title="输出变量">
+      我是收起来的内容
+    </CollapseGroup>
+  );
+};
diff --git a/src/CollapseGroup/index.md b/src/CollapseGroup/index.md
new file mode 100644
index 00000000..2f845904
--- /dev/null
+++ b/src/CollapseGroup/index.md
@@ -0,0 +1,32 @@
+---
+nav: Components
+group: Data Display
+title: CollapseGroup
+---
+
+## Usage
+
+Based on [lobehub ui FormGroup](https://github.com/lobehub/lobe-ui/blob/master/src/Form/components/FormGroup.tsx).
+
+```tsx | pure
+import { CollapseGroup } from '@yuntijs/ui';
+import { VariableIcon } from 'lucide-react';
+
+export default () => {
+  return (
+    <CollapseGroup icon={VariableIcon} title="输出变量">
+      我是收起来的内容
+    </CollapseGroup>
+  );
+};
+```
+
+<code src="./demos/index.tsx" center></code>
+
+## Playground
+
+<code src="./demos/Playground.tsx" center></code>
+
+## APIs
+
+<API></API>
diff --git a/src/CollapseGroup/index.tsx b/src/CollapseGroup/index.tsx
new file mode 100644
index 00000000..ba4ff171
--- /dev/null
+++ b/src/CollapseGroup/index.tsx
@@ -0,0 +1,28 @@
+import { FormGroupProps, Form as LobeForm } from '@lobehub/ui';
+import React from 'react';
+
+import { useStyles } from './style';
+
+const FormGroup = LobeForm.Group;
+
+export type CollapseGroupProps = Omit<
+  FormGroupProps,
+  'items' | 'activeKey' | 'defaultActiveKey' | 'accordion' | 'expandIconPosition'
+>;
+
+export const CollapseGroup: React.FC<CollapseGroupProps> = ({
+  className,
+  variant,
+  ...otherProps
+}) => {
+  const { styles, cx } = useStyles();
+
+  return (
+    <FormGroup
+      className={cx(styles.root, className)}
+      collapsible={variant === 'pure' ? 'icon' : 'header'}
+      variant={variant}
+      {...otherProps}
+    />
+  );
+};
diff --git a/src/CollapseGroup/style.ts b/src/CollapseGroup/style.ts
new file mode 100644
index 00000000..58aac0c3
--- /dev/null
+++ b/src/CollapseGroup/style.ts
@@ -0,0 +1,31 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token, prefixCls }) => {
+  return {
+    root: css`
+      margin-bottom: ${token.margin}px;
+      .${prefixCls}-collapse {
+        &-header {
+          padding: 0 !important;
+          &-text {
+            padding: ${token.paddingSM}px ${token.paddingSM}px ${token.paddingSM}px 0;
+            & > * {
+              font-size: ${token.fontSize}px;
+              /* font-weight: unset; */
+            }
+          }
+        }
+        &-expand-icon {
+          padding: ${token.padding}px 0 ${token.padding}px ${token.paddingSM}px;
+        }
+        &-extra {
+          padding-right: ${token.paddingSM}px;
+        }
+        &-content {
+          padding: ${token.paddingXS}px 0;
+          background-color: ${token.colorBgContainer};
+        }
+      }
+    `,
+  };
+});