feat: add flex

.gitignore

@@ -2,4 +2,5 @@ node_modules
 dist
 .rslib
 pnpm-lock.yaml
-packages/component/index.ts
+packages/component/index.ts
+.vscode

doc/docs/components/_meta.json

@@ -19,5 +19,12 @@
     "label": "Center",
     "collapsible": true,
     "collapsed": false
+  },
+  {
+    "type": "dir",
+    "name": "flex",
+    "label": "Flex",
+    "collapsible": true,
+    "collapsed": false
   }
 ]

doc/docs/components/flex/FlexControls.tsx

@@ -0,0 +1,107 @@
+import { useState } from "react";
+import { Button } from "@qwqui/core";
+import { Flex } from "@qwqui/core";
+
+const FlexControls = () => {
+  const [gap, setGap] = useState('xs');
+  const [justify, setJustify] = useState('flex-start');
+  const [align, setAlign] = useState('flex-start');
+  const [direction, setDirection] = useState('row');
+  const [wrap, setWrap] = useState('nowrap');
+
+  const codeStr = `
+import React from 'react';
+import { Flex } from '@qwqui/core';
+import { Button } from '@qwqui/core';
+
+const App = () => {
+    return (
+        <Flex
+            direction=${direction}
+            justify=${justify}
+            align=${align}
+            wrap=${wrap}
+            gap=${gap}
+            minHeight={50}
+            background="gray"
+        >
+            <Button>Button 1</Button>
+            <Button>Button 2</Button>
+            <Button>Button 3</Button>
+            <Button>Button 4</Button>
+        </Flex>
+    );
+}
+
+export default App;`.trimStart();
+
+  const GAPS = ['xs', 'sm', 'md', 'lg', 'xl'];
+  const JUSTIFYS = ['center', 'flex-start', 'flex-end', 'space-between', 'space-around', 'space-evenly'];
+  const ALIGNS = ['center', 'flex-start', 'flex-end'];
+  const DIRECTIONS = ['row', 'column', 'row-reverse', 'column-reverse'];
+  const WRAPS = ['wrap', 'nowrap', 'wrap-reverse'];
+
+  return (
+    <>
+        <label>
+            Gap:
+            <select value={gap} onChange={(e) => setGap(e.target.value)}>
+                {GAPS.map(item=>(
+                    <option key={item} value={item}>{item}</option>
+                ))}
+            </select>
+        </label>
+        <label>
+            Justify:
+            <select value={justify} onChange={(e) => setJustify(e.target.value)}>
+                {JUSTIFYS.map(item=>(
+                    <option key={item} value={item}>{item}</option>
+                ))}
+            </select>
+        </label>
+        <label>
+            Align:
+            <select value={align} onChange={(e) => setAlign(e.target.value)}>
+                {ALIGNS.map(item=>(
+                    <option key={item} value={item}>{item}</option>
+                ))}
+            </select>
+        </label>
+        <label>
+            Direction:
+            <select value={direction} onChange={(e) => setDirection(e.target.value)}>
+                {DIRECTIONS.map(item=>(
+                    <option key={item} value={item}>{item}</option>
+                ))}
+            </select>
+        </label>
+        <label>
+            Wraps:
+            <select value={wrap} onChange={(e) => setWrap(e.target.value)}>
+                {WRAPS.map(item=>(
+                    <option key={item} value={item}>{item}</option>
+                ))}
+            </select>
+        </label>
+        <Flex
+            direction={direction}
+            justify={justify}
+            align={align}
+            wrap={wrap}
+            gap={gap}
+            minHeight={50}
+            background="gray"
+        >
+            <Button>Button 1</Button>
+            <Button>Button 2</Button>
+            <Button>Button 3</Button>
+            <Button>Button 4</Button>
+        </Flex>
+        <pre style={{backgroundColor: "var(--gray-50)", padding: 20, fontSize: 14, borderRadius: 5}} className={'code'}>
+            {codeStr}
+        </pre>
+    </>
+  );``
+};
+
+export default FlexControls;

doc/docs/components/flex/_meta.json

@@ -0,0 +1,7 @@
+[
+    {
+      "type": "file",
+      "name": "flex",
+      "label": "Flex"
+    }
+]

doc/docs/components/flex/flex.mdx

@@ -0,0 +1,7 @@
+import FlexControls from "./FlexControls";
+
+# Flex
+
+## 基本用法
+
+<FlexControls />

packages/components/flex/index.ts

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

packages/components/flex/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@qwqui/center",
+    "version": "1.0.1-alpha.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/flex/relib.config.ts

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

packages/components/flex/src/flex.module.scss

@@ -0,0 +1,3 @@
+.root{
+    display: flex;
+}

packages/components/flex/src/flex.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import classes from './flex.module.scss';
+
+export declare interface FlexProps {
+    children?: React.ReactNode;
+    minHeight?: number;
+    background?: string;
+    gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    justify?: 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+    align?: 'center' | 'flex-end' | 'flex-start';
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+}
+
+export const Flex = (props: FlexProps) => {
+    return (
+        <div
+            style={{
+                background: props.background,
+                minHeight: props.minHeight,
+                gap: props.gap ? `var(--spacing-${props.gap})` : null,
+                justifyContent: props.justify,
+                alignItems: props.align,
+                flexDirection: props.direction,
+                flexWrap: props.wrap,
+            }}
+            className={classes.root}
+        >
+            {props.children}
+        </div>
+    );
+}

packages/components/flex/tsconfig.json

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

packages/components/index.ts

@@ -0,0 +1,8 @@
+import './button/src/button.module.scss'
+import './center/src/center.module.scss'
+import './ripple/src/ripple.module.scss'
+import './flex/src/flex.module.scss'
+export * from './button/index.ts'
+export * from './center/index.ts'
+export * from './ripple/index.ts'
+export * from './flex/index.ts'

packages/theme/size.scss

@@ -12,4 +12,10 @@
   --breakpoint-lg: 960px;
   --breakpoint-xl: 1140px;
   --breakpoint-xxl: 1320px;
+
+  --spacing-xs: 0.625rem;
+  --spacing-sm: 0.75rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.25rem;
+  --spacing-xl: 2rem;
 }