From 15bcf3930a51447d08664bc6c94798136c5d2abd Mon Sep 17 00:00:00 2001
From: Snowball_233 <wangrb.qq@outlook.com>
Date: Tue, 1 Oct 2024 10:35:14 +0000
Subject: [PATCH 1/6] feat: add center components

---
 packages/components/center/README.md          | 13 +++++++++
 .../center/__test__/center.test.tsx           |  6 ++++
 packages/components/center/index.ts           |  1 +
 packages/components/center/package.json       | 29 +++++++++++++++++++
 packages/components/center/rslib.config.ts    |  2 ++
 .../components/center/src/center.module.scss  |  9 ++++++
 packages/components/center/src/center.tsx     | 28 ++++++++++++++++++
 packages/components/center/tsconfig.json      | 10 +++++++
 8 files changed, 98 insertions(+)
 create mode 100644 packages/components/center/README.md
 create mode 100644 packages/components/center/__test__/center.test.tsx
 create mode 100644 packages/components/center/index.ts
 create mode 100644 packages/components/center/package.json
 create mode 100644 packages/components/center/rslib.config.ts
 create mode 100644 packages/components/center/src/center.module.scss
 create mode 100644 packages/components/center/src/center.tsx
 create mode 100644 packages/components/center/tsconfig.json

diff --git a/packages/components/center/README.md b/packages/components/center/README.md
new file mode 100644
index 0000000..033804c
--- /dev/null
+++ b/packages/components/center/README.md
@@ -0,0 +1,13 @@
+# @qwqui/center
+
+<!-- Description -->
+
+## Install
+
+```bash
+pnpm add @qwqui/center
+```
+
+## License
+
+MIT
diff --git a/packages/components/center/__test__/center.test.tsx b/packages/components/center/__test__/center.test.tsx
new file mode 100644
index 0000000..ebd75d7
--- /dev/null
+++ b/packages/components/center/__test__/center.test.tsx
@@ -0,0 +1,6 @@
+import * as Rect from 'react';
+import { act, render } from '@testing-library/react'
+import { center } from '..';
+describe('center', () => {
+  it.todo('should define');
+})
\ No newline at end of file
diff --git a/packages/components/center/index.ts b/packages/components/center/index.ts
new file mode 100644
index 0000000..14def09
--- /dev/null
+++ b/packages/components/center/index.ts
@@ -0,0 +1 @@
+export * from './src/center'
\ No newline at end of file
diff --git a/packages/components/center/package.json b/packages/components/center/package.json
new file mode 100644
index 0000000..30ac2f7
--- /dev/null
+++ b/packages/components/center/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@qwqui/center",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "build": "rslib build",
+    "clean:dist": "rimraf dist .rslib",
+    "clean:deps": "rimraf node_modules"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "types": "./dist/index.d.mts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.mts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "18.3.1"
+  }
+}
\ No newline at end of file
diff --git a/packages/components/center/rslib.config.ts b/packages/components/center/rslib.config.ts
new file mode 100644
index 0000000..29296fc
--- /dev/null
+++ b/packages/components/center/rslib.config.ts
@@ -0,0 +1,2 @@
+import { defineBuild } from '@qwqui/build';
+export default defineBuild();
\ No newline at end of file
diff --git a/packages/components/center/src/center.module.scss b/packages/components/center/src/center.module.scss
new file mode 100644
index 0000000..5cb2040
--- /dev/null
+++ b/packages/components/center/src/center.module.scss
@@ -0,0 +1,9 @@
+.root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  
+    &[data-inline] {
+      display: inline-flex;
+    }
+  }
\ No newline at end of file
diff --git a/packages/components/center/src/center.tsx b/packages/components/center/src/center.tsx
new file mode 100644
index 0000000..82a9661
--- /dev/null
+++ b/packages/components/center/src/center.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import classes from './center.module.scss';
+
+export const Center = (props: CenterProps) => {
+  const { children, inline, ...others } = props;
+
+  const getDisplayType = () => {
+    return inline ? 'inline-flex' : 'flex';
+  };
+
+  return (
+    <div
+      className={classes.root}
+      style={{
+        display: getDisplayType(),
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+      {...others}>
+      {children}
+    </div>
+  );
+};
+
+export interface CenterProps {
+  children?: React.ReactNode;
+  inline?: boolean;
+}
diff --git a/packages/components/center/tsconfig.json b/packages/components/center/tsconfig.json
new file mode 100644
index 0000000..d7507e0
--- /dev/null
+++ b/packages/components/center/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "include": [
+    "index.ts",
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ],
+  "extends": "../../../tsconfig.json"
+}  

From b07f1c18cc9db31fef44a71d0e2ec05e3c903a06 Mon Sep 17 00:00:00 2001
From: Snowball_233 <wangrb.qq@outlook.com>
Date: Wed, 2 Oct 2024 11:57:50 +0800
Subject: [PATCH 2/6] Update packages/components/center/src/center.tsx

Co-authored-by: GaoNeng <31283122+GaoNeng-wWw@users.noreply.github.com>
---
 packages/components/center/src/center.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/components/center/src/center.tsx b/packages/components/center/src/center.tsx
index 82a9661..58f6f3f 100644
--- a/packages/components/center/src/center.tsx
+++ b/packages/components/center/src/center.tsx
@@ -11,11 +11,7 @@ export const Center = (props: CenterProps) => {
   return (
     <div
       className={classes.root}
-      style={{
-        display: getDisplayType(),
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
+  data-inline={inline}
       {...others}>
       {children}
     </div>

From 7ea765c07999e56ce35b3e7d3fc1ed4f32d11f80 Mon Sep 17 00:00:00 2001
From: Snowball_233 <wangrb.qq@outlook.com>
Date: Wed, 2 Oct 2024 11:58:04 +0800
Subject: [PATCH 3/6] Update packages/components/center/src/center.tsx

Co-authored-by: GaoNeng <31283122+GaoNeng-wWw@users.noreply.github.com>
---
 packages/components/center/src/center.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/center/src/center.tsx b/packages/components/center/src/center.tsx
index 58f6f3f..a6f18e4 100644
--- a/packages/components/center/src/center.tsx
+++ b/packages/components/center/src/center.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import classes from './center.module.scss';
 
 export const Center = (props: CenterProps) => {
-  const { children, inline, ...others } = props;
+  const { children, inline } = props;
 
   const getDisplayType = () => {
     return inline ? 'inline-flex' : 'flex';

From b95e36c034ede1964a7a71d5d139178db730d7b2 Mon Sep 17 00:00:00 2001
From: Snowball_233 <wangrb.qq@outlook.com>
Date: Wed, 2 Oct 2024 12:27:39 +0800
Subject: [PATCH 4/6] =?UTF-8?q?fix:=20del=20unnecessary=20`=E2=80=A6other`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/center/src/center.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/components/center/src/center.tsx b/packages/components/center/src/center.tsx
index a6f18e4..9f602de 100644
--- a/packages/components/center/src/center.tsx
+++ b/packages/components/center/src/center.tsx
@@ -11,8 +11,7 @@ export const Center = (props: CenterProps) => {
   return (
     <div
       className={classes.root}
-  data-inline={inline}
-      {...others}>
+  data-inline={inline}>
       {children}
     </div>
   );

From 0a2c71fd1c0ba44990cfe55ff8d9aba6a379ebd8 Mon Sep 17 00:00:00 2001
From: Snowball_233 <wangrb.qq@outlook.com>
Date: Wed, 2 Oct 2024 12:36:44 +0800
Subject: [PATCH 5/6] doc: featured readme for center comp

---
 packages/components/center/README.md | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/components/center/README.md b/packages/components/center/README.md
index 033804c..e39377d 100644
--- a/packages/components/center/README.md
+++ b/packages/components/center/README.md
@@ -1,6 +1,6 @@
 # @qwqui/center
 
-<!-- Description -->
+The `Center` component provides a flexible way to center its children either in a block or inline context.
 
 ## Install
 
@@ -8,6 +8,26 @@
 pnpm add @qwqui/center
 ```
 
+## Usage
+
+```typescript
+import React from 'react';
+import { Center } from '@qwqui/center';
+
+const Example = () => (
+  <Center inline>
+    <span>Your content here</span>
+  </Center>
+);
+```
+
+## Props
+
+| Name | Type | Description |
+|---|---|---|
+| children | `React.ReactNode` | The content to be centered. |
+| inline | `boolen` | If true, applies `inline-flex` display type; otherwise, applies `flex`. Defaults to `false`. |
+
 ## License
 
-MIT
+- MIT

From 0429a4c5e525bfc17f8b371e8a8479dbbf098477 Mon Sep 17 00:00:00 2001
From: Snowball_233 <wangrb.qq@outlook.com>
Date: Wed, 2 Oct 2024 12:39:00 +0800
Subject: [PATCH 6/6] chore: unit test

---
 .../center/__test__/center.test.tsx           | 39 ++++++++++++++++---
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/components/center/__test__/center.test.tsx b/packages/components/center/__test__/center.test.tsx
index ebd75d7..a4eb3d9 100644
--- a/packages/components/center/__test__/center.test.tsx
+++ b/packages/components/center/__test__/center.test.tsx
@@ -1,6 +1,33 @@
-import * as Rect from 'react';
-import { act, render } from '@testing-library/react'
-import { center } from '..';
-describe('center', () => {
-  it.todo('should define');
-})
\ No newline at end of file
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Center } from '..';
+
+describe('Center', () => {
+  it('should be defined', () => {
+    const { container } = render(
+      <Center>Centered Content</Center>
+    );
+    expect(container).toBeDefined();
+  });
+
+  it('should render children correctly', () => {
+    const { getByText } = render(
+      <Center>Centered Content</Center>
+    );
+    expect(getByText('Centered Content')).toBeInTheDocument();
+  });
+
+  it('should apply inline-flex when inline is true', () => {
+    const { container } = render(
+      <Center inline>Inline Centered Content</Center>
+    );
+    expect(container.firstChild).toHaveStyle('display: inline-flex');
+  });
+
+  it('should apply flex when inline is false', () => {
+    const { container } = render(
+      <Center>Block Centered Content</Center>
+    );
+    expect(container.firstChild).toHaveStyle('display: flex');
+  });
+});