diff --git a/.changeset/olive-pugs-accept.md b/.changeset/olive-pugs-accept.md new file mode 100644 index 0000000..c1bab93 --- /dev/null +++ b/.changeset/olive-pugs-accept.md @@ -0,0 +1,5 @@ +--- +"@qwqui/stack": major +--- + +implment stack component diff --git a/doc/docs/components/_meta.json b/doc/docs/components/_meta.json index c0cd199..6ed18bf 100644 --- a/doc/docs/components/_meta.json +++ b/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 } ] diff --git a/doc/docs/components/layout/_meta.json b/doc/docs/components/layout/_meta.json new file mode 100644 index 0000000..513ea81 --- /dev/null +++ b/doc/docs/components/layout/_meta.json @@ -0,0 +1,7 @@ +[ + { + "type": "file", + "name": "stack", + "label": "Stack" + } +] \ No newline at end of file diff --git a/doc/docs/components/layout/stack.mdx b/doc/docs/components/layout/stack.mdx new file mode 100644 index 0000000..7677208 --- /dev/null +++ b/doc/docs/components/layout/stack.mdx @@ -0,0 +1,29 @@ +# Stack + +## 基本用法 + + + +## 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"; +``` diff --git a/doc/docs/components/layout/stack/basic-usage.tsx b/doc/docs/components/layout/stack/basic-usage.tsx new file mode 100644 index 0000000..73accb2 --- /dev/null +++ b/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( + state: T, + setState: Dispatch>, + id: string, + values: T[] +) { + return ( +
+

{id}: {state}

+ { + values.map((val, idx) => { + return ( +
+ setState(val)} + defaultChecked={val === state} + /> + +
+ ) + }) + } +
+ ) +} + +export default function App() { + const [gap, setGap] = useState(8); + const [align, setAlign] = useState('stretch'); + const [justify, setJustify] = useState('center'); + const aligns: StackAlign[] = ['stretch', 'center', 'start', 'end']; + const justifies: StackJustify[] = ["center", "start", "end", "space-around", "space-between", "evenly"]; + return ( +
+ + + + + +
+

Gap: {gap}px

+ setGap(Number(ev.target.value))} /> +
+
+ { + select(align, setAlign, 'aligns', aligns) + } + { + select(justify, setJustify, 'justify', justifies) + } +
+
+ ) +} \ No newline at end of file diff --git a/doc/docs/components/layout/stack/btn-style.scss b/doc/docs/components/layout/stack/btn-style.scss new file mode 100644 index 0000000..f99c311 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/packages/components/index.ts b/packages/components/index.ts new file mode 100644 index 0000000..4045ed2 --- /dev/null +++ b/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' \ No newline at end of file diff --git a/packages/components/stack/README.md b/packages/components/stack/README.md new file mode 100644 index 0000000..fb17b79 --- /dev/null +++ b/packages/components/stack/README.md @@ -0,0 +1,13 @@ +# @qwqui/stack + + + +## Install + +```bash +pnpm add @qwqui/stack +``` + +## License + +MIT diff --git a/packages/components/stack/__test__/stack.test.tsx b/packages/components/stack/__test__/stack.test.tsx new file mode 100644 index 0000000..2ab6de9 --- /dev/null +++ b/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() + expect(wrapper).toBeDefined(); + }); + it('gap', () => { + const wrapper = render( + + ) + const firstChild = wrapper.container.firstElementChild; + const gap = window.getComputedStyle(firstChild).getPropertyValue('--stack-gap'); + expect(gap).toBe('8px'); + }) +}) \ No newline at end of file diff --git a/packages/components/stack/index.ts b/packages/components/stack/index.ts new file mode 100644 index 0000000..1ff5b04 --- /dev/null +++ b/packages/components/stack/index.ts @@ -0,0 +1 @@ +export * from './src/stack' \ No newline at end of file diff --git a/packages/components/stack/package.json b/packages/components/stack/package.json new file mode 100644 index 0000000..676afc2 --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/packages/components/stack/rslib.config.ts b/packages/components/stack/rslib.config.ts new file mode 100644 index 0000000..29296fc --- /dev/null +++ b/packages/components/stack/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/stack/src/stack.module.scss b/packages/components/stack/src/stack.module.scss new file mode 100644 index 0000000..09691fd --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/packages/components/stack/src/stack.tsx b/packages/components/stack/src/stack.tsx new file mode 100644 index 0000000..2fad960 --- /dev/null +++ b/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) => { + 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 ( +
+ {props.children} +
+ ) +} + +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' \ No newline at end of file diff --git a/packages/components/stack/tsconfig.json b/packages/components/stack/tsconfig.json new file mode 100644 index 0000000..d7507e0 --- /dev/null +++ b/packages/components/stack/tsconfig.json @@ -0,0 +1,10 @@ +{ + "include": [ + "index.ts", + "src" + ], + "exclude": [ + "node_modules" + ], + "extends": "../../../tsconfig.json" +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3112208..01226d4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -193,17 +193,13 @@ importers: specifier: 18.3.1 version: 18.3.1 - packages/components/drop-zone: + packages/components/ripple: dependencies: react: specifier: 18.3.1 version: 18.3.1 - devDependencies: - '@qwqui/theme': - specifier: workspace:^ - version: link:../../theme - packages/components/ripple: + packages/components/stack: dependencies: react: specifier: 18.3.1