feat: stack component

.changeset/olive-pugs-accept.md

@@ -0,0 +1,5 @@
+---
+"@qwqui/stack": major
+---
+
+implment stack component

doc/docs/components/_meta.json

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

doc/docs/components/layout/_meta.json

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

doc/docs/components/layout/stack.mdx

@@ -0,0 +1,29 @@
+# Stack
+
+## 基本用法
+
+<code src="./stack/basic-usage.tsx" />
+
+## Props
+
+|   名称    |     类型      |           介绍           | Demo 示例 | 是否必选 |  默认值   |
+| :-------: | :-----------: | :----------------------: | :-------: | :------: | :-------: |
+|    gap    |    number     |      元素之间的间隔      |    [基本用法](#基本用法)     |    否    |     0     |
+|   align   |  StackAlign   |     水平方向对齐方式     |     [基本用法](#基本用法)     |    否    |  'start'  |
+|  justify  | StackJustify  |    垂直方向的对齐方式    |    [基本用法](#基本用法)     |    否    |  'start'  |
+| className |    string     | 对该元素补充的 className |    [基本用法](#基本用法)     |    否    |    ''     |
+|     h     |    number     |           高度           |  [基本用法](#基本用法)     |    否    | undefined |
+|   style   | CSSProperties |         样式对象         |   [基本用法](#基本用法)     |    否    |    \{\}     |
+
+## Types
+
+```ts
+export type StackAlign = "stretch" | "center" | "start" | "end";
+export type StackJustify =
+  | "start"
+  | "center"
+  | "end"
+  | "space-around"
+  | "space-between"
+  | "evenly";
+```

doc/docs/components/layout/stack/basic-usage.tsx

@@ -0,0 +1,73 @@
+import { Stack, StackAlign, StackJustify } from '@qwqui/core';
+import './btn-style.scss';
+import { Dispatch, SetStateAction, useState } from 'react';
+
+function select<T extends string>(
+  state: T,
+  setState: Dispatch<SetStateAction<T>>,
+  id: string,
+  values: T[]
+) {
+  return (
+    <div className={id}>
+      <p>{id}: {state}</p>
+      {
+        values.map((val, idx) => {
+          return (
+            <div key={idx}>
+              <input
+                name={`${id}`}
+                key={idx}
+                type='radio'
+                id={`${id}-${val}`}
+                value={val}
+                onClick={() => setState(val)}
+                defaultChecked={val === state}
+              />
+              <label htmlFor={`${id}-${val}`}>{val}</label>
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}
+
+export default function App() {
+  const [gap, setGap] = useState(8);
+  const [align, setAlign] = useState<StackAlign>('stretch');
+  const [justify, setJustify] = useState<StackJustify>('center');
+  const aligns: StackAlign[] = ['stretch', 'center', 'start', 'end'];
+  const justifies: StackJustify[] = ["center", "start", "end", "space-around", "space-between", "evenly"];
+  return (
+    <div>
+      <Stack gap={gap} align={align} justify={justify} h={300} style={{
+        border: '3px solid #66ccff',
+        padding: '4px',
+        borderRadius: '8px'
+      }}>
+        <button className='btn'>
+          Item - 1
+        </button>
+        <button className='btn'>
+          Item - 2
+        </button>
+        <button className='btn'>
+          Item - 3
+        </button>
+      </Stack>
+      <div className="gap">
+        <p>Gap: {gap}px</p>
+        <input type={'range'} min={0} max={64} value={gap} onChange={(ev) => setGap(Number(ev.target.value))} />
+      </div>
+      <div className='actions'>
+        {
+          select(align, setAlign, 'aligns', aligns)
+        }
+        {
+          select(justify, setJustify, 'justify', justifies)
+        }
+      </div>
+    </div>
+  )
+}

doc/docs/components/layout/stack/btn-style.scss

@@ -0,0 +1,16 @@
+.btn {
+  padding: 8px;
+  border-radius: 8px;
+  background: var(--zen-300);
+  transition: all .3s linear;
+
+  &:hover {
+    background: var(--zen-200);
+  }
+}
+
+.actions {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: 1fr 1fr;
+}

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 './stack/src/stack.module.scss'
+export * from './button/index.ts'
+export * from './center/index.ts'
+export * from './ripple/index.ts'
+export * from './stack/index.ts'

packages/components/stack/README.md

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

packages/components/stack/__test__/stack.test.tsx

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

packages/components/stack/index.ts

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

packages/components/stack/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@qwqui/stack",
+  "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/stack/rslib.config.ts

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

packages/components/stack/src/stack.module.scss

@@ -0,0 +1,8 @@
+.root {
+  display: flex;
+  align-items: var(--stack-align, start);
+  justify-content: var(--stack-justify, start);
+  gap: var(--stack-gap, 0px);
+  flex-direction: column;
+  height: var(--stack-height);
+}

packages/components/stack/src/stack.tsx

@@ -0,0 +1,49 @@
+import React, { CSSProperties } from 'react';
+import stackStyle from './stack.module.scss';
+
+const vars = (props: Omit<StackProps, 'children'>) => {
+  return {
+    '--stack-gap': `${props.gap}px`,
+    '--stack-align': props.align,
+    '--stack-justify': props.justify,
+    '--stack-height': props.h ? `${props.h}px` : ''
+  } as React.CSSProperties
+}
+
+export const Stack = (
+  props: StackProps
+) => {
+  const stackStyleVar = vars({
+    gap: 0,
+    justify: 'start',
+    align: 'start',
+    className: '',
+    ...props
+  });
+  return (
+    <div
+      className={[stackStyle.root, props.className].join(' ')}
+      style={{
+        ...stackStyleVar,
+        ...props.style
+      }}
+    >
+      {props.children}
+    </div>
+  )
+}
+
+export type StackAlign = 'stretch' | 'center' | 'start' | 'end';
+export type StackJustify = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'evenly';
+
+export interface StackProps {
+  gap?: number;
+  align?: 'stretch' | 'center' | 'start' | 'end';
+  justify?: 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'evenly';
+  className?: string;
+  children?: React.ReactNode;
+  h?: number;
+  style?: CSSProperties
+}
+
+Stack.displayName = '@qwqui/layout/Stack'

packages/components/stack/tsconfig.json

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