feat: upgrade project & blue #1890FF => #1677FF (#84)

* deps: upgrade father

* chore: upgrade config

* style: code format

use prettier

* style: lint fix

use eslint --fix

* style: code Style

* test: update case

* feat: upgrade blue `#1890FF` => `#1677FF`

ref: https://ant.design/docs/react/migration-v5#design-specification

* style: code format

use prettier

* docs: update README.md

.eslintrc.js

@@ -1,23 +1,3 @@
-module.exports =  {
-  parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
-  extends:  [
-    'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from @typescript-eslint/eslint-plugin
-    'plugin:prettier/recommended',  // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
-  ],
-  env: {
-    browser: true,
-    node: true,
-  },
-  parserOptions:  {
-    ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
-    sourceType:  'module',  // Allows for the use of imports
-    ecmaFeatures:  {
-      jsx:  true,  // Allows for the parsing of JSX
-    },
-  },
-  rules:  {
-    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
-    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
-    '@typescript-eslint/indent': ['error', 2],
-  },
+module.exports = {
+  extends: [require.resolve('@umijs/fabric/dist/eslint')],
 };

.fatherrc.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'father';
+
+export default defineConfig({
+  platform: 'browser',
+  esm: { output: 'es' },
+  cjs: { output: 'lib' },
+});

.prettierrc.js

@@ -1,7 +1,5 @@
-module.exports =  {
-  semi:  true,
-  trailingComma:  'all',
-  singleQuote:  true,
-  printWidth:  120,
-  tabWidth:  2,
+const fabric = require('@umijs/fabric');
+
+module.exports = {
+  ...fabric.prettier,
 };

README.md

@@ -4,13 +4,10 @@
 
 :art: Color palettes calculator of [Ant Design](https://ant.design/docs/spec/colors).
 
-[![Travis](https://img.shields.io/travis/ant-design/ant-design-colors/master.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design-colors)
-[![Test coverage](https://img.shields.io/coveralls/ant-design/ant-design-colors.svg?style=flat-square)](https://coveralls.io/r/ant-design/ant-design-colors?branch=master)
-[![npm package](https://img.shields.io/npm/v/@ant-design/colors.svg?style=flat-square)](https://www.npmjs.org/package/@ant-design/colors)
-[![NPM downloads](http://img.shields.io/npm/dm/@ant-design/colors.svg?style=flat-square)](http://npmjs.com/@ant-design/colors)
+[![Travis](https://img.shields.io/travis/ant-design/ant-design-colors/master.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design-colors) [![Test coverage](https://img.shields.io/coveralls/ant-design/ant-design-colors.svg?style=flat-square)](https://coveralls.io/r/ant-design/ant-design-colors?branch=master) [![npm package](https://img.shields.io/npm/v/@ant-design/colors.svg?style=flat-square)](https://www.npmjs.org/package/@ant-design/colors) [![NPM downloads](http://img.shields.io/npm/dm/@ant-design/colors.svg?style=flat-square)](http://npmjs.com/@ant-design/colors)
+
+[![Dependencies](https://img.shields.io/david/ant-design/ant-design-colors.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design-colors) [![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design-colors.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design-colors?type=dev) [![Greenkeeper badge](https://badges.greenkeeper.io/ant-design/ant-design-colors.svg)](https://greenkeeper.io/)
 
-[![Dependencies](https://img.shields.io/david/ant-design/ant-design-colors.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design-colors)
-[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design-colors.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design-colors?type=dev) [![Greenkeeper badge](https://badges.greenkeeper.io/ant-design/ant-design-colors.svg)](https://greenkeeper.io/)
 </div>
 
 ![](https://user-images.githubusercontent.com/507615/55726820-43e68400-5a43-11e9-8541-b0fc28b78f37.png)
@@ -30,10 +27,23 @@ $ npm install @ant-design/colors --save
 ```
 
 ```js
-import { red, volcano, gold, yellow, lime, green, cyan, blue, geekblue, purple, magenta, grey } from '@ant-design/colors';
-
-console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', ''#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
-console.log(blue.primary); // '#1890FF'
+import {
+  red,
+  volcano,
+  gold,
+  yellow,
+  lime,
+  green,
+  cyan,
+  blue,
+  geekblue,
+  purple,
+  magenta,
+  grey,
+} from '@ant-design/colors';
+
+console.log(blue); // ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D9', '#003EB3', '#002C8C', '#001D66']
+console.log(blue.primary); // '#1677FF'
 ```
 
 ```js
@@ -67,9 +77,9 @@ import { generate, presetDarkPalettes } from '@ant-design/colors';
 // Generate dark color palettes by a given color
 const colors = generate('#1890ff', {
   theme: 'dark',
-  backgroundColor: '#141414'
+  backgroundColor: '#141414',
 });
-console.log(colors); // ["#111d2c", "#112a45", "#15395b", "#164c7e", "#1765ad", "#177ddc", "#3993dc", "#65b7f3", "#8bcbf3", "#b2dcf3"]
+console.log(colors); // ['#111d2c', '#112a45', '#15395b', '#164c7e', '#1765ad', '#177ddc', '#3c9ae8', '#65b7f3', '#8dcff8', '#b7e3fa']
 console.log(presetDarkPalettes);
 /*
 {

package.json

@@ -2,52 +2,44 @@
   "name": "@ant-design/colors",
   "version": "6.0.0",
   "description": "Color palettes calculator of Ant Design",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "files": [
-    "lib",
-    "dist/index.js",
-    "dist/index.esm.js",
-    "dist/src/index.d.ts",
-    "dist/src/generate.d.ts"
-  ],
-  "typings": "dist/src/index.d.ts",
+  "homepage": "https://github.com/ant-design/ant-design-colors#readme",
+  "bugs": {
+    "url": "https://github.com/ant-design/ant-design-colors/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ant-design/ant-design-colors.git"
   },
-  "bugs": {
-    "url": "https://github.com/ant-design/ant-design-colors/issues"
-  },
+  "license": "MIT",
+  "author": "afc163 <[email protected]>",
+  "main": "./lib/index",
+  "module": "./es/index",
+  "typings": "es/index.d.ts",
+  "files": [
+    "lib",
+    "es"
+  ],
   "scripts": {
-    "tsc": "tsc --noEmit",
-    "compile": "father build --esm --cjs",
-    "prepublishOnly": "npm run compile && np --no-cleanup --no-publish",
+    "compile": "father build",
+    "coverage": "npm test -- --coverage && coveralls < coverage/lcov.info",
     "lint": "eslint src --ext .ts",
-    "lint:fix": "prettier --write '{src,tests}/**/*.ts'",
-    "jest": "jest",
-    "coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls",
-    "test": "npm run tsc && npm run lint && npm run jest"
+    "prepublishOnly": "npm run compile && np --no-cleanup --no-publish",
+    "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
+    "test": "jest"
   },
-  "author": "afc163 <[email protected]>",
-  "license": "MIT",
   "dependencies": {
     "@ctrl/tinycolor": "^3.4.0"
   },
   "devDependencies": {
     "@types/jest": "^26.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
-    "@typescript-eslint/parser": "^4.7.0",
-    "coveralls": "^3.0.3",
+    "@umijs/fabric": "^3.0.0",
+    "coveralls": "^3.1.1",
     "eslint": "^7.1.0",
-    "eslint-config-prettier": "^8.0.0",
-    "eslint-plugin-prettier": "^3.0.1",
-    "father": "^2.29.5",
+    "father": "^4.1.2",
     "jest": "^26.0.1",
     "np": "^7.0.0",
     "prettier": "^2.0.0",
     "ts-jest": "^26.0.0",
     "typescript": "^4.0.2"
-  },
-  "homepage": "https://github.com/ant-design/ant-design-colors#readme"
+  }
 }

renovate.json

@@ -1,5 +1,3 @@
 {
-  "extends": [
-    "config:base"
-  ]
+  "extends": ["config:base"]
 }

src/generate.ts

@@ -1,4 +1,4 @@
-import { rgbToHsv, rgbToHex, inputToRGB } from '@ctrl/tinycolor';
+import { inputToRGB, rgbToHex, rgbToHsv } from '@ctrl/tinycolor';
 
 const hueStep = 2; // 色相阶梯
 const saturationStep = 0.16; // 饱和度阶梯，浅色部分
@@ -121,7 +121,7 @@ interface Opts {
 }
 
 export default function generate(color: string, opts: Opts = {}): string[] {
-  const patterns: Array<string> = [];
+  const patterns: string[] = [];
   const pColor = inputToRGB(color);
   for (let i = lightColorCount; i > 0; i -= 1) {
     const hsv = toHsv(pColor);
@@ -151,7 +151,11 @@ export default function generate(color: string, opts: Opts = {}): string[] {
   if (opts.theme === 'dark') {
     return darkColorMap.map(({ index, opacity }) => {
       const darkColorString: string = toHex(
-        mix(inputToRGB(opts.backgroundColor || '#141414'), inputToRGB(patterns[index]), opacity * 100),
+        mix(
+          inputToRGB(opts.backgroundColor || '#141414'),
+          inputToRGB(patterns[index]),
+          opacity * 100,
+        ),
       );
       return darkColorString;
     });

src/index.ts

@@ -1,12 +1,6 @@
 import generate from './generate';
 
-export interface PalettesProps {
-  [key: string]: string[] & { primary?: string };
-}
-
-const presetPrimaryColors: {
-  [key: string]: string;
-} = {
+const presetPrimaryColors: Record<string, string> = {
   red: '#F5222D',
   volcano: '#FA541C',
   orange: '#FA8C16',
@@ -15,7 +9,7 @@ const presetPrimaryColors: {
   lime: '#A0D911',
   green: '#52C41A',
   cyan: '#13C2C2',
-  blue: '#1890FF',
+  blue: '#1677FF',
   geekblue: '#2F54EB',
   purple: '#722ED1',
   magenta: '#EB2F96',
@@ -50,6 +44,9 @@ const geekblue = presetPalettes.geekblue;
 const purple = presetPalettes.purple;
 const magenta = presetPalettes.magenta;
 const grey = presetPalettes.grey;
+const gray = presetPalettes.grey;
+
+export type PalettesProps = Record<string, string[] & { primary?: string }>;
 
 export {
   generate,
@@ -69,6 +66,5 @@ export {
   purple,
   magenta,
   grey,
+  gray,
 };
-
-export const gray = grey;

tests/export.test.ts

@@ -1,29 +1,30 @@
 import {
-  red,
-  volcano,
-  orange,
-  gold,
-  yellow,
-  lime,
-  green,
-  cyan,
   blue,
+  cyan,
   geekblue,
-  purple,
-  magenta,
+  gold,
+  gray,
+  green,
   grey,
+  lime,
+  magenta,
+  orange,
   presetDarkPalettes,
+  purple,
+  red,
+  volcano,
+  yellow,
 } from '../src';
-import { blueColors, blueDarkColors } from './index.test';
+import { presetBlueColors, presetBlueDarkColors } from './index.test';
 
 test(`import { blue } from '@ant-design/colors'`, () => {
-  expect(blue.primary).toEqual(blueColors[5]);
-  expect([...blue]).toEqual(blueColors);
+  expect(blue.primary).toEqual(presetBlueColors[5]);
+  expect([...blue]).toEqual(presetBlueColors);
 });
 
 test(`import { presetDarkPalettes } from '@ant-design/colors'`, () => {
   const darkBlue = presetDarkPalettes.blue;
-  expect([...darkBlue]).toEqual(blueDarkColors);
+  expect([...darkBlue]).toEqual(presetBlueDarkColors);
 });
 
 test(`other colors'`, () => {
@@ -40,6 +41,7 @@ test(`other colors'`, () => {
   expect(purple.length).toEqual(10);
   expect(magenta.length).toEqual(10);
   expect(grey.length).toEqual(10);
+  expect(gray.length).toEqual(10);
 
   expect(presetDarkPalettes.red.length).toEqual(10);
   expect(presetDarkPalettes.volcano.length).toEqual(10);