✨ feat: 新增 horizontal props

Author: arvinxx

packages/layout-kit/package.json

@@ -13,8 +13,8 @@
     "registry": "https://registry.npmjs.org",
     "access": "public"
   },
-  "peerDependencies": {
-    "styled-components": ">5"
+  "dependencies": {
+    "styled-components": "^5.3.3"
   },
   "devDependencies": {
     "styled-components": "^5.3.3",

packages/layout-kit/src/index.tsx

@@ -11,6 +11,7 @@ import type {
 export type CommonSpaceNumber = 2 | 4 | 8 | 12 | 16 | 24;
 
 export interface IFlexbox {
+  horizontal?: boolean;
   direction?: FlexDirection;
   distribution?: ContentDistribution;
   align?: ContentPosition;
@@ -28,7 +29,7 @@ export const Flexbox: FC<FlexboxProps> = styled.div.attrs(() => ({
 }))<IFlexbox>`
   display: flex;
   flex-direction: ${(props) => {
-    return getFlexDirection(props.direction);
+    return getFlexDirection(props.direction, props.horizontal);
   }};
   justify-content: ${(props) => props.distribution};
   align-items: ${(props) => props.align};
@@ -40,8 +41,10 @@ export const Flexbox: FC<FlexboxProps> = styled.div.attrs(() => ({
 
   > *:not(:last-child) {
     margin-right: ${(props) =>
-      getFlexDirection(props.direction) === 'row' && calcValue(props.gap)};
+      getFlexDirection(props.direction, props.horizontal) === 'row' &&
+      calcValue(props.gap)};
     margin-bottom: ${(props) =>
-      getFlexDirection(props.direction) === 'column' && calcValue(props.gap)};
+      getFlexDirection(props.direction, props.horizontal) === 'column' &&
+      calcValue(props.gap)};
   }
 `;

packages/layout-kit/src/type.ts

@@ -4,7 +4,8 @@ export type ContentPosition =
   | 'flex-end'
   | 'flex-start'
   | 'start'
-  | 'stretch';
+  | 'stretch'
+  | 'baseline';
 
 export type ContentDistribution =
   | 'center'

packages/layout-kit/src/utils.ts

@@ -1,6 +1,11 @@
 import type { FlexDirection } from './type';
 
-export const getFlexDirection = (direction: FlexDirection) => {
+export const getFlexDirection = (
+  direction: FlexDirection,
+  isHorizontal: boolean,
+) => {
+  if (isHorizontal) return 'row';
+
   switch (direction) {
     case 'horizontal':
       return 'row';