feat!: Rename HSB -> HSV

Wondermarin · Apr 24, 2021 · bf741e3 · bf741e3
1 parent 3450b26
commit bf741e3
Show file tree

Hide file tree

Showing 67 changed files with 1,438 additions and 1,446 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,7 +1,10 @@
 {
   "presets": [
     ["@babel/preset-env", {
-      "targets": "defaults"
+      "targets": {
+        "node": "current"
+      },
+      "modules": false
     }],
     ["@babel/preset-react", {
       "runtime": "automatic"
@@ -12,6 +15,14 @@
     }]
   ],
   "plugins": [
+    ["module-resolver", {
+      "root": ["."],
+      "alias": {
+        "@interfaces": "./src/interfaces",
+        "@utils": "./src/utils"
+      }
+    }],
+    "@babel/plugin-transform-runtime",
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-object-rest-spread"
   ]

diff --git a/.eslintignore b/.eslintignore
@@ -4,3 +4,7 @@
 # Production
 /lib
 /demo/build
+
+# Configurations
+rollup.config.dev.ts
+rollup.config.prod.ts
diff --git a/.eslintrc b/.eslintrc
@@ -41,12 +41,12 @@
       { "blankLine": "always", "prev": [ "const", "let" ], "next": "*" },
       { "blankLine": "any", "prev": [ "const", "let" ], "next": [ "const", "let" ] }
     ],
-    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/explicit-function-return-type": "error",
-    "@typescript-eslint/no-unused-expressions": "warn",
-    "prettier/prettier": "warn",
+    "@typescript-eslint/no-unused-expressions": "error",
+    "prettier/prettier": "error",
     "react/display-name": "off",
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off"

diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,10 @@
+# Dependencies
+/node_modules
+
+# Production
+/lib
+/demo/build
+
+# Configurations
+rollup.config.dev.ts
+rollup.config.prod.ts
diff --git a/README.md b/README.md
@@ -52,7 +52,7 @@ import "react-color-palette/lib/css/styles.css";
 export const App = () => {
   const [color, setColor] = useColor("hex", "#121212");
 
-  return <ColorPicker width={456} height={228} color={color} onChange={setColor} hideHSB dark />;
+  return <ColorPicker width={456} height={228} color={color} onChange={setColor} hideHSV dark />;
 };
 ```
 
@@ -95,10 +95,10 @@ If the default colors don't fit your project, you can always change them.
 | width    | `number`     |         | The width of the color picker.                                           |
 | height   | `number`     | width   | The height of the color picker.                                          |
 | color    | [`Color`][1] |         | The current [`Color`][1].                                                |
-| onChange | `Function`   |         | The function that accepts the updated [`Color`][1] as a single argument. |
+| onChange | `Function`   |         | A function to update [`Color`][1].                                       |
 | hideHEX  | `bool`       | false   | Hide HEX input.                                                          |
 | hideRGB  | `bool`       | false   | Hide RGB input.                                                          |
-| hideHSB  | `bool`       | false   | Hide HSB input.                                                          |
+| hideHSV  | `bool`       | false   | Hide HSV input.                                                          |
 | dark     | `bool`       | false   | Color theme.                                                             |
 
 [1]: #color
@@ -107,23 +107,23 @@ If the default colors don't fit your project, you can always change them.
 
 | Name         | Type                                 | Default | Description                                     |
 | ------------ | ------------------------------------ | ------- | ----------------------------------------------- |
-| format       | `"hex"` \| `"rgb"` \| `"hsb"`        |         | The color format.                               |
-| initialColor | `string` \| `ColorRGB` \| `ColorHSB` |         | The initial color in the selected color format. |
+| format       | `"hex"` \| `"rgb"` \| `"hsv"`        |         | The color format.                               |
+| initialColor | `string` \| `ColorRGB` \| `ColorHSV` |         | The initial color in the selected color format. |
 
 ### `toColor` Arguments
 
 | Name   | Type                                 | Default | Description                             |
 | ------ | ------------------------------------ | ------- | --------------------------------------- |
-| format | `"hex"` \| `"rgb"` \| `"hsb"`        |         | The color format.                       |
-| color  | `string` \| `ColorRGB` \| `ColorHSB` |         | The color in the selected color format. |
+| format | `"hex"` \| `"rgb"` \| `"hsv"`        |         | The color format.                       |
+| color  | `string` \| `ColorRGB` \| `ColorHSV` |         | The color in the selected color format. |
 
 ### `Color`
 
 | Field | Type       |
 | ----- | ---------- |
 | hex   | `string`   |
 | rgb   | `ColorRGB` |
-| hsb   | `ColorHSB` |
+| hsv   | `ColorHSV` |
 
 ### `ColorRGB`
 
@@ -133,13 +133,13 @@ If the default colors don't fit your project, you can always change them.
 | g     | `number` |
 | b     | `number` |
 
-### `ColorHSB`
+### `ColorHSV`
 
 | Field | Type     |
 | ----- | -------- |
 | h     | `number` |
 | s     | `number` |
-| b     | `number` |
+| v     | `number` |
 
 ## License
 

diff --git a/package.json b/package.json
@@ -32,8 +32,10 @@
     "test:typescript": "tsc --noEmit",
     "test": "yarn test:lint && yarn test:typescript",
     "build:js": "rollup --config rollup.config.prod.ts",
-    "build:types": "tsc --emitDeclarationOnly",
+    "build:types": "dts-bundle-generator src/index.ts -o lib/index.d.ts --no-check --no-banner",
+    "prebuild": "del-cli lib",
     "build": "yarn build:js && yarn build:types",
+    "prestart": "del-cli demo/build",
     "start": "rollup --config rollup.config.dev.ts -w",
     "release:first": "standard-version --first-release",
     "release:alpha": "standard-version --prerelease alpha",
@@ -51,9 +53,11 @@
     "@babel/core": "^7.13.14",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
+    "@babel/plugin-transform-runtime": "^7.13.15",
     "@babel/preset-env": "^7.13.12",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
+    "@babel/runtime": "^7.13.17",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-html": "^0.2.3",
@@ -64,6 +68,9 @@
     "@types/react-dom": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
     "@typescript-eslint/parser": "^4.20.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "del-cli": "^3.0.1",
+    "dts-bundle-generator": "^5.9.0",
     "eslint": "^7.23.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
@@ -75,10 +82,8 @@
     "react-dom": "^17.0.2",
     "rollup": "^2.44.0",
     "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dev": "^1.1.3",
     "rollup-plugin-postcss": "^4.0.0",
-    "rollup-plugin-progress": "^1.1.2",
     "rollup-plugin-terser": "^7.0.2",
     "standard-version": "^9.1.1",
     "typescript": "^4.2.3"

diff --git a/rollup.config.dev.ts b/rollup.config.dev.ts
@@ -5,8 +5,7 @@ import babel from "@rollup/plugin-babel";
 import html from "@rollup/plugin-html";
 import postcss from "rollup-plugin-postcss";
 import dev from "rollup-plugin-dev";
-import del from "rollup-plugin-delete";
-import progress from "rollup-plugin-progress";
+import { terser } from "rollup-plugin-terser";
 
 const production = !process.env.ROLLUP_WATCH;
 const mode = production ? "production" : "development";
@@ -22,18 +21,16 @@ const config = {
   plugins: [
     replace({
       preventAssignment: true,
-      "process.env.NODE_ENV": JSON.stringify(mode),
-    }),
-    nodeResolve({
-      extensions,
-    }),
-    commonjs({
-      include: /node_modules/,
+      values: {
+        "process.env.NODE_ENV": JSON.stringify(mode),
+      },
     }),
+    nodeResolve({ extensions }),
+    commonjs({ include: /node_modules/ }),
     babel({
       extensions,
       exclude: /node_modules/,
-      babelHelpers: "inline",
+      babelHelpers: "runtime",
     }),
     html({
       fileName: "index.html",
@@ -54,16 +51,7 @@ const config = {
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <title>${title}</title>
             <style type="text/css">
-              * {
-                box-sizing: border-box;
-                padding: 0;
-                margin: 0;
-              }
-              
-              html,
-              body {
-                font-family: "Montserrat", sans-serif;
-              }
+              *{box-sizing:border-box;padding:0;margin:0}html,body{font-family:"Montserrat",sans-serif}
             </style>
             ${links}
           </head>
@@ -77,16 +65,14 @@ const config = {
     }),
     postcss({
       extensions: [".css"],
+      minimize: true,
     }),
-    dev({
-      dirs: ["demo/build"],
-      port: 3000,
-    }),
-    del({
-      targets: ["demo/build"],
-      verbose: true,
-    }),
-    progress(),
+    production && terser(),
+    !production &&
+      dev({
+        dirs: ["demo/build"],
+        port: 3000,
+      }),
   ],
 };
 

diff --git a/rollup.config.prod.ts b/rollup.config.prod.ts
@@ -3,43 +3,35 @@ import commonjs from "@rollup/plugin-commonjs";
 import babel from "@rollup/plugin-babel";
 import copy from "rollup-plugin-copy";
 import { terser } from "rollup-plugin-terser";
-import del from "rollup-plugin-delete";
-import progress from "rollup-plugin-progress";
 
 const production = !process.env.ROLLUP_WATCH;
 const extensions = [".tsx", ".ts", ".js"];
 
 const config = {
   input: "src/index.ts",
   output: {
-    dir: "lib",
+    file: "lib/index.js",
     format: "cjs",
-    exports: "named",
-    preserveModules: true,
   },
-  external: ["react", "react/jsx-runtime"],
+  external: [/@babel\/runtime/, "react", "react/jsx-runtime"],
   plugins: [
-    nodeResolve({
-      extensions,
-    }),
-    commonjs({
-      include: /node_modules/,
-    }),
+    nodeResolve({ extensions }),
+    commonjs({ include: /node_modules/ }),
     babel({
-      extensions,
       exclude: /node_modules/,
-      babelHelpers: "inline",
+      extensions,
+      babelHelpers: "runtime",
     }),
     copy({
       targets: [{ src: "src/css/styles.css", dest: "lib/css" }],
       verbose: true,
     }),
-    production && terser(),
-    del({
-      targets: ["lib"],
-      verbose: true,
+    production && terser({
+      ecma: 5,
+      module: true,
+      toplevel: true,
+      safari10: true,
     }),
-    progress(),
   ],
 };
 

diff --git a/...nts/ColorPicker/ColorPicker.component.tsx → src/components/ColorPicker.component.tsx b/...nts/ColorPicker/ColorPicker.component.tsx → src/components/ColorPicker.component.tsx
@@ -1,7 +1,7 @@
-import { ColorPickerProps } from "./ColorPicker.types";
-import { Saturation } from "../Saturation";
-import { Hue } from "../Hue";
-import { Fields } from "../Fields";
+import { ColorPickerProps } from "@interfaces/ColorPicker.interface";
+import { Saturation } from "./Saturation.component";
+import { Hue } from "./Hue.component";
+import { Fields } from "./Fields.component";
 
 const ColorPicker = ({
   width,

diff --git a/src/components/ColorPicker/index.ts b/src/components/ColorPicker/index.ts