🎉 chore: 初始化 Preloader 组件

docs/components/common/examples/Preloader/Square.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { Square } from '@arvinxu/preloader';
+
+const Loading = () => {
+  return <Square />;
+};
+
+export default Loading;

docs/components/common/preloader.md

@@ -0,0 +1,12 @@
+---
+title: Preloader
+order: 2
+---
+
+# Preloader
+
+## 图形一览
+
+### Square
+
+<code src="./examples/Preloader/Square" />

jest.config.base.js

@@ -11,6 +11,7 @@ module.exports = {
   setupFiles: [...defaultConfig.setupFiles],
   moduleNameMapper: {
     '@arvinxu/image-gallery': '<rootDir>/packages/image-gallery/src',
+    '@arvinxu/preloader': '<rootDir>/packages/preloader/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/preloader/.fatherrc.js

@@ -0,0 +1,5 @@
+const base = require('../../.fatherrc');
+
+module.exports = {
+  ...base,
+};

packages/preloader/README.md

@@ -0,0 +1,14 @@
+# @arvinxu/preloader
+
+[![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/preloader.svg?color=deepgreen&label=latest
+[version-url]: http://npmjs.org/package/@arvinxu/preloader
+[download-image]: https://img.shields.io/npm/dm/@arvinxu/preloader.svg
+[download-url]: https://npmjs.org/package/@arvinxu/preloader

packages/preloader/jest.config.js

@@ -0,0 +1,14 @@
+const base = require('../../jest.config.base');
+
+const packageName = '@arvinxu/preloader';
+
+const root = '<rootDir>/packages/preloader';
+
+module.exports = {
+  ...base,
+  rootDir: '../..',
+  roots: [root],
+  name: packageName,
+  displayName: packageName,
+  collectCoverageFrom: [`${root}/src/**/*.tsx`, `${root}/src/**/*.ts`],
+};

packages/preloader/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@arvinxu/preloader",
+  "version": "1.0.0",
+  "files": [
+    "lib",
+    "es"
+  ],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "homepage": "https://github.com/arvinxx/components/tree/master/packages/preloader#readme",
+  "repository": "git+https://github.com/arvinxx/components.git",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "scripts": {
+    "build": "father-build && yarn webpack",
+    "webpack": "webpack",
+    "test": "jest",
+    "test:update": "jest -u",
+    "prepublishOnly": "yarn build",
+    "cov": "jest --coverage",
+    "clean": "rm -rf es lib dist build coverage .umi"
+  }
+}

packages/preloader/src/Square.less

@@ -0,0 +1,31 @@
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.avx-preloader-square {
+  &-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-around;
+    width: 36px;
+    height: 36px;
+  }
+
+  &-item {
+    width: 35%;
+    height: 35%;
+    animation: pulse 0.75s ease-in infinite alternate;
+  }
+
+  &-animation-delay {
+    -webkit-animation-delay: 0.75s;
+    animation-delay: 0.75s;
+  }
+}

packages/preloader/src/Square.tsx

@@ -0,0 +1,33 @@
+import type { CSSProperties, FC } from 'react';
+import React from 'react';
+
+import './Square.less';
+
+export interface SquareProps {
+  /**
+   * 主色(可选)
+   * @default #1890ff
+   */
+  color?: string;
+}
+
+const Square: FC<SquareProps> = ({ color = '#1890ff' }) => {
+  const colorStyle: CSSProperties = { background: color };
+
+  return (
+    <div className="avx-preloader-square-container">
+      <div className="avx-preloader-square-item" style={colorStyle} />
+      <div
+        className="avx-preloader-square-item avx-preloader-square-animation-delay"
+        style={colorStyle}
+      />
+      <div
+        className="avx-preloader-square-item avx-preloader-square-animation-delay"
+        style={colorStyle}
+      />
+      <div className="avx-preloader-square-item" style={colorStyle} />
+    </div>
+  );
+};
+
+export default Square;

packages/preloader/src/index.ts

@@ -0,0 +1 @@
+export { default as Square } from './Square';

packages/preloader/tests/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Preloader Square 1`] = `
+<div>
+  <div
+    class="avx-preloader-square-container"
+  >
+    <div
+      class="avx-preloader-square-item"
+      style="background: rgb(24, 144, 255);"
+    />
+    <div
+      class="avx-preloader-square-item avx-preloader-square-animation-delay"
+      style="background: rgb(24, 144, 255);"
+    />
+    <div
+      class="avx-preloader-square-item avx-preloader-square-animation-delay"
+      style="background: rgb(24, 144, 255);"
+    />
+    <div
+      class="avx-preloader-square-item"
+      style="background: rgb(24, 144, 255);"
+    />
+  </div>
+</div>
+`;

packages/preloader/tests/index.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Square } from '@arvinxu/preloader';
+
+describe('Preloader', () => {
+  it('Square', () => {
+    const { container } = render(<Square />);
+    expect(container).toMatchSnapshot();
+  });
+});

packages/preloader/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    /* 模块导入配置项 */
+    "esModuleInterop": true,
+    "types": ["../../types", "@types/jest"]
+  }
+}

packages/preloader/webpack.config.js

@@ -0,0 +1,11 @@
+const path = require('path');
+const config = require('../../webpack.config');
+
+module.exports = {
+  ...config,
+  output: {
+    ...config.output,
+    library: 'preloader',
+    path: path.resolve(__dirname, 'dist'),
+  },
+};

tsconfig.json

@@ -20,6 +20,8 @@
     "paths": {
       "@arvinxu/image-gallery": ["./packages/image-gallery/src"],
       "@arvinxu/image-gallery/*": ["./packages/image-gallery/src/*"],
+      "@arvinxu/preloader": ["./packages/preloader/src"],
+      "@arvinxu/preloader/*": ["./packages/preloader/src/*"],
       "@arvinxu/float-label-input": ["./packages/float-label-input/src"],
       "@arvinxu/page-loading": ["./packages/page-loading/src"],
       "@arvinxu/mindflow": ["./packages/mindflow/src"],