Merge pull request #40 from LYXOfficial/release

[WIP] feat: add flex

.changeset/big-swans-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@qwqui/flex": major
+---
+
+feat: add flex layout

doc/docs/components/layout/_meta.json

@@ -8,5 +8,10 @@
     "type": "file",
     "name": "group",
     "label": "Group"
+  },
+  {
+    "type": "file",
+    "name": "flex",
+    "label": "Flex"
   }
 ]

doc/docs/components/layout/flex.mdx

@@ -0,0 +1,30 @@
+import FlexControls from "./flex/FlexControls";
+
+# Flex
+
+## 基本用法
+
+<FlexControls />
+
+## Props
+
+|   名称    |           类型            |                     介绍                      |  默认值   |
+| :-------: | :-----------------------: | :-------------------------------------------: | :-------: |
+|    gap    |          number           |                元素之间的间隔                 |     0     |
+|   align   |        FlexAlign         |   元素垂直方向对齐方式, 等价于`align-items`   |  'start'  |
+|  justify  |       FlexJustify        | 元素水平方向排列方式, 等价于`justify-content` | 'start'  |
+|  direction  |       FlexDirection        | 元素排列方向, 等价于`flex-direction` | 'row'  |
+|   wrap    |          FlexWrap         |                子元素换行策略                 |  'nowrap'   |
+| className |          string           |               额外的`className`               |    ''     |
+|   mih     |          number           |                   容器最小高度                    | undefined |
+|   style   |       CSSProperties       |                  追加的样式                   |   `{}`    |
+|   grow    |          boolean          |           子元素是否会自动占据宽度            |   false   |
+
+## Type
+
+```ts
+export type FlexJustify = 'center' | 'start' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+export type FlexAlign = 'stretch' | 'center' | 'end' | 'start';
+export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+```

doc/docs/components/layout/flex/FlexControls.tsx

@@ -0,0 +1,103 @@
+import { useState } from "react";
+import { Button, FlexAlign, FlexDirection, FlexJustify, FlexWrap } from "@qwqui/core";
+import { Flex } from "@qwqui/core";
+
+const FlexControls = () => {
+  const [gap, setGap] = useState(10);
+  const [justify, setJustify] = useState('start');
+  const [align, setAlign] = useState('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}
+            style={{background: "gray"}}
+        >
+            <Button>Button 1</Button>
+            <Button>Button 2</Button>
+            <Button>Button 3</Button>
+            <Button>Button 4</Button>
+        </Flex>
+    );
+}
+
+export default App;`.trimStart();
+
+  const JUSTIFYS = ['center', 'start', 'end', 'space-between', 'space-around', 'space-evenly'];
+  const ALIGNS = ['center', 'start', 'end'];
+  const DIRECTIONS = ['row', 'column', 'row-reverse', 'column-reverse'];
+  const WRAPS = ['wrap', 'nowrap', 'wrap-reverse'];
+
+  return (
+    <>
+        <label>
+            Gap:
+            <span>{gap}px</span>
+            <input type="range" max={100} min={0} value={gap} onChange={(e) => setGap(Number(e.target.value))}/>
+        </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>
+            Wrap:
+            <select value={wrap} onChange={(e) => setWrap(e.target.value)}>
+                {WRAPS.map(item=>(
+                    <option key={item} value={item}>{item}</option>
+                ))}
+            </select>
+        </label>
+        <Flex
+            direction={direction as FlexDirection}
+            justify={justify as FlexJustify}
+            align={align as FlexAlign}
+            wrap={wrap as FlexWrap}
+            gap={gap}
+            mih={50}
+            style={{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/layout/group.mdx

@@ -8,7 +8,7 @@
 
 |   名称    |           类型            |                     介绍                      |  默认值   |
 | :-------: | :-----------------------: | :-------------------------------------------: | :-------: |
-|    gao    |          number           |                元素之间的间隔                 |     0     |
+|    gap    |          number           |                元素之间的间隔                 |     0     |
 |   align   |        GroupAlign         |   元素垂直方向对齐方式, 等价于`align-items`   |  'start'  |
 |  justify  |       GroupJustify        | 元素水平方向排列方式, 等价于`justify-content` | 'center'  |
 | className |          string           |               额外的`className`               |    ''     |

packages/components/flex/README.md

@@ -0,0 +1,13 @@
+# @qwqui/flex
+
+<!-- Description -->
+
+## Install
+
+```bash
+pnpm add @qwqui/flex
+```
+
+## License
+
+MIT

packages/components/flex/__test__/flex.test.tsx

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react'
+import { Flex } from '..';
+describe('flex', () => {
+  it('should define', () => {
+    const wrapper = render(<Flex></Flex>)
+    expect(wrapper).toBeDefined();
+  });
+  it('gap', () => {
+    const wrapper = render(
+      <Flex gap={8}></Flex>
+    )
+    const firstChild = wrapper.container.firstElementChild;
+    const gap = window.getComputedStyle(firstChild).getPropertyValue('gap');
+    expect(gap).toBe('8px');
+  })
+})

packages/components/flex/index.ts

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

packages/components/flex/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@qwqui/flex",
+    "version": "0.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/flex/rslib.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,39 @@
+import React, { CSSProperties } from 'react';
+import classes from './flex.module.scss';
+
+export type FlexJustify = 'center' | 'start' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+export type FlexAlign = 'stretch' | 'center' | 'end' | 'start';
+export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+
+export declare interface FlexProps {
+    children?: React.ReactNode;
+    mih?: number;
+    style?: CSSProperties;
+    gap?: number;
+    justify?: FlexJustify;
+    align?: FlexAlign;
+    direction?: FlexDirection;
+    wrap?: FlexWrap;
+    className?: string;
+}
+
+export const Flex = (props: FlexProps) => {
+    return (
+        <div
+            style={{
+                ...props.style,
+                minHeight: props.mih,
+                gap: props.gap,
+                justifyContent: props.justify,
+                alignItems: props.align,
+                flexDirection: props.direction,
+                flexWrap: props.wrap,
+            }}
+            className={classes.root + " " + (props.className ?? "")}
+        >
+            {props.children}
+        </div>
+    );
+}
+Flex.displayName='@qwqui/layout/flex'

packages/components/flex/tsconfig.json

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

packages/components/index.ts

@@ -1,10 +1,12 @@
 import './button/src/button.module.scss'
 import './center/src/center.module.scss'
+import './flex/src/flex.module.scss'
 import './group/src/group.module.scss'
 import './ripple/src/ripple.module.scss'
 import './stack/src/stack.module.scss'
 export * from './button/index.ts'
 export * from './center/index.ts'
+export * from './flex/index.ts'
 export * from './group/index.ts'
 export * from './ripple/index.ts'
 export * from './stack/index.ts'