🚚 chore: rename package

config/menu.ts

@@ -25,7 +25,7 @@ export const menus = {
     },
     {
       title: 'LayoutToolkit 布局工具库',
-      children: ['layout-toolkit'],
+      children: ['layout-kit'],
     },
   ],
   '/guide': [

jest.config.base.js

@@ -19,7 +19,7 @@ module.exports = {
     '@arvinxu/heatmap-calendar': '<rootDir>/packages/heatmap-calendar/src',
     '@arvinxu/utils': '<rootDir>/packages/utils/src',
     '@arvinxu/i18n': '<rootDir>/packages/i18n/src',
-    '@arvinxu/layout-toolkit': '<rootDir>/packages/layout-toolkit/src',
+    '@arvinxu/layout-kit': '<rootDir>/packages/layout-kit/src',
     '@arvinxu/float-label-input': '<rootDir>/packages/float-label-input/src',
     '@arvinxu/page-loading': '<rootDir>/packages/page-loading/src',
     '@arvinxu/mindflow': '<rootDir>/packages/mindflow/src',

packages/layout-kit/README.md

@@ -0,0 +1,14 @@
+# @arvinxu/layout-kit
+
+[![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
+
+## License
+
+[MIT](../../LICENSE) ® Arvin Xu
+
+<!-- npm url -->
+
+[version-image]: http://img.shields.io/npm/v/@arvinxu/layout-kit.svg?color=deepgreen&label=latest
+[version-url]: http://npmjs.org/package/@arvinxu/layout-kit
+[download-image]: https://img.shields.io/npm/dm/@arvinxu/layout-kit.svg
+[download-url]: https://npmjs.org/package/@arvinxu/layout-kit

packages/layout-toolkit/jest.config.js → packages/layout-kit/jest.config.js

@@ -1,8 +1,8 @@
 const base = require('../../jest.config.base');
 
-const packageName = '@arvinxu/layout-toolkit';
+const packageName = '@arvinxu/layout-kit';
 
-const root = '<rootDir>/packages/layout-toolkit';
+const root = '<rootDir>/packages/layout-kit';
 
 module.exports = {
   ...base,

packages/layout-toolkit/package.json → packages/layout-kit/package.json

@@ -1,18 +1,25 @@
 {
-  "name": "@arvinxu/layout-toolkit",
+  "name": "@arvinxu/layout-kit",
   "version": "1.0.0",
   "files": [
     "lib",
     "es"
   ],
   "main": "lib/index.js",
   "module": "es/index.js",
-  "homepage": "https://github.com/arvinxx/components/tree/master/packages/layout-toolkit#readme",
+  "homepage": "https://github.com/arvinxx/components/tree/master/packages/layout-kit#readme",
   "repository": "git+https://github.com/arvinxx/components.git",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
   },
+  "peerDependencies": {
+    "styled-components": ">5"
+  },
+  "devDependencies": {
+    "styled-components": "^5.3.3",
+    "@types/styled-components": "^5.1.15"
+  },
   "scripts": {
     "build": "father-build && yarn webpack",
     "webpack": "webpack",

packages/layout-kit/src/index.tsx

@@ -0,0 +1,46 @@
+import type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';
+import styled from 'styled-components';
+
+import { calcValue, getFlexDirection } from './utils';
+import type {
+  ContentDistribution,
+  ContentPosition,
+  FlexDirection,
+} from './type';
+
+type CommonSpaceNumber = 2 | 4 | 8 | 12 | 16 | 24;
+
+interface IFlexbox {
+  direction?: FlexDirection;
+  distribution?: ContentDistribution;
+  align?: ContentPosition;
+  gap?: CommonSpaceNumber | number;
+  width?: number | string;
+  height?: number | string;
+  padding?: string | number | CommonSpaceNumber;
+}
+export type FlexboxProps = IFlexbox &
+  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+
+export const Flexbox: FC<FlexboxProps> = styled.div.attrs(() => ({
+  className: 'layoutkit-flexbox',
+}))<IFlexbox>`
+  display: flex;
+  flex-direction: ${(props) => {
+    return getFlexDirection(props.direction);
+  }};
+  justify-content: ${(props) => props.distribution};
+  align-items: ${(props) => props.align};
+
+  width: ${(props) => calcValue(props.width)};
+  height: ${(props) => calcValue(props.height)};
+
+  padding: ${(props) => calcValue(props.padding)};
+
+  > *:not(:last-child) {
+    margin-right: ${(props) =>
+      getFlexDirection(props.direction) === 'row' && calcValue(props.gap)};
+    margin-bottom: ${(props) =>
+      getFlexDirection(props.direction) === 'column' && calcValue(props.gap)};
+  }
+`;

packages/layout-toolkit/src/layout-toolkit.md → packages/layout-kit/src/layout-toolkit.md

@@ -12,9 +12,9 @@ nav:
 
 <!-- npm url -->
 
-[version-image]: http://img.shields.io/npm/v/@arvinxu/layout-toolkit.svg?color=deepgreen&label=latest
-[version-url]: http://npmjs.org/package/@arvinxu/layout-toolkit
-[download-image]: https://img.shields.io/npm/dm/@arvinxu/layout-toolkit.svg
-[download-url]: https://npmjs.org/package/@arvinxu/layout-toolkit
+[version-image]: http://img.shields.io/npm/v/@arvinxu/layout-kit.svg?color=deepgreen&label=latest
+[version-url]: http://npmjs.org/package/@arvinxu/layout-kit
+[download-image]: https://img.shields.io/npm/dm/@arvinxu/layout-kit.svg
+[download-url]: https://npmjs.org/package/@arvinxu/layout-kit
 
 <API src='./index.tsx'></API>

packages/layout-kit/src/type.ts

@@ -0,0 +1,20 @@
+export type ContentPosition =
+  | 'center'
+  | 'end'
+  | 'flex-end'
+  | 'flex-start'
+  | 'start'
+  | 'stretch';
+
+export type ContentDistribution =
+  | 'center'
+  | 'space-around'
+  | 'space-between'
+  | 'space-evenly'
+  | 'stretch';
+
+export type FlexDirection =
+  | 'vertical'
+  | 'vertical-reverse'
+  | 'horizontal'
+  | 'horizontal-reverse';

packages/layout-kit/src/utils.ts

@@ -0,0 +1,18 @@
+import type { FlexDirection } from './type';
+
+export const getFlexDirection = (direction: FlexDirection) => {
+  switch (direction) {
+    case 'horizontal':
+      return 'row';
+    case 'horizontal-reverse':
+      return 'row-reverse';
+    case 'vertical':
+    default:
+      return 'column';
+    case 'vertical-reverse':
+      return 'column-reverse';
+  }
+};
+
+export const calcValue = (value: string | number) =>
+  typeof value === 'number' ? `${value}px` : value;

packages/layout-kit/tests/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Flexbox gap 1`] = `
+<div>
+  <div
+    class="sc-bdvvtL ezjxOX"
+  >
+    <div>
+      1
+    </div>
+    <div>
+      2
+    </div>
+  </div>
+</div>
+`;

packages/layout-kit/tests/index.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Flexbox } from '@arvinxu/layout-kit';
+
+describe('Flexbox', () => {
+  it('gap', () => {
+    const { container } = render(
+      <Flexbox gap={2}>
+        <div>1</div>
+        <div>2</div>
+      </Flexbox>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

packages/layout-toolkit/webpack.config.js → packages/layout-kit/webpack.config.js

@@ -5,7 +5,7 @@ module.exports = {
   ...config,
   output: {
     ...config.output,
-    library: 'LayoutToolkit',
+    library: 'LayoutKit',
     path: path.resolve(__dirname, 'dist'),
   },
 };

tsconfig.json

@@ -36,8 +36,8 @@
       "@arvinxu/utils/*": ["./packages/utils/src/*"],
       "@arvinxu/i18n": ["./packages/i18n/src"],
       "@arvinxu/i18n/*": ["./packages/i18n/src/*"],
-      "@arvinxu/layout-toolkit": ["./packages/layout-toolkit/src"],
-      "@arvinxu/layout-toolkit/*": ["./packages/layout-toolkit/src/*"],
+      "@arvinxu/layout-kit": ["./packages/layout-kit/src"],
+      "@arvinxu/layout-kit/*": ["./packages/layout-kit/src/*"],
       "@arvinxu/float-label-input": ["./packages/float-label-input/src"],
       "@arvinxu/page-loading": ["./packages/page-loading/src"],
       "@arvinxu/mindflow": ["./packages/mindflow/src"],