Merge pull request #15 from TeamVastsea/center

feat: add center components

packages/components/center/README.md

@@ -0,0 +1,33 @@
+# @qwqui/center
+
+The `Center` component provides a flexible way to center its children either in a block or inline context.
+
+## Install
+
+```bash
+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

packages/components/center/__test__/center.test.tsx

@@ -0,0 +1,33 @@
+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');
+  });
+});

packages/components/center/index.ts

@@ -0,0 +1 @@
+export * from './src/center'

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"
+  }
+}

packages/components/center/rslib.config.ts

@@ -0,0 +1,2 @@
+import { defineBuild } from '@qwqui/build';
+export default defineBuild();

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;
+    }
+  }

packages/components/center/src/center.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import classes from './center.module.scss';
+
+export const Center = (props: CenterProps) => {
+  const { children, inline } = props;
+
+  const getDisplayType = () => {
+    return inline ? 'inline-flex' : 'flex';
+  };
+
+  return (
+    <div
+      className={classes.root}
+  data-inline={inline}>
+      {children}
+    </div>
+  );
+};
+
+export interface CenterProps {
+  children?: React.ReactNode;
+  inline?: boolean;
+}

packages/components/center/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "include": [
+    "index.ts",
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ],
+  "extends": "../../../tsconfig.json"
+}