Merge pull request #26 from dapilab/fix-build

fix: bundling script

Author: wwayne

Makefile

@@ -13,7 +13,7 @@ dev:
 .PHONY: lint lint-fix dev
 
 # Test
-test: lint-fix
+test:
 	@echo "Running test..."
 	@npx jest
 .PHONY: test

demo/src/App/AvatarEditor/index.tsx

@@ -78,7 +78,7 @@ export default class AvatarEditor extends Component {
     const { config, shape, download } = this.props
     const { isCodeShow } = this.state
     return (
-      <div className="AvatarEditor rounded-full p-3 flex items-center">
+      <div className="AvatarEditor rounded-full px-3 py-2 flex items-center">
         {/* Face */}
         <SectionWrapper
           className="w-8 h-8 rounded-full p-2 mx-2"
@@ -163,10 +163,10 @@ export default class AvatarEditor extends Component {
             })}
             data-tip="Config"
             onClick={this.toggleCodeShow.bind(this)} />
-          <div className={classnames("rounded-lg bg-white py-5 px-6 absolute bottom-full codeBlock mb-4", {
+          <div className={classnames("rounded-lg bg-white p-5 absolute bottom-full codeBlock mb-4", {
             active: isCodeShow
           })}>
-            <pre className="text-sm">{this.genCodeString(config)}</pre>
+            <pre className="text-xs highres:text-sm">{this.genCodeString(config)}</pre>
           </div>
         </div>
 

demo/src/App/AvatarList/index.scss

@@ -1,4 +1,7 @@
+@import "~shared-style/mixin";
+
 $avatarWidth: 4.5rem;
+$laptopWidth: $avatarWidth - 0.8rem;
 $displayCount: 10;
 $sectionWidth: $avatarWidth * $displayCount;
 
@@ -7,14 +10,21 @@ $sectionWidth: $avatarWidth * $displayCount;
 }
 
 .AvatarList {
-  width: $sectionWidth;
+  width: $laptopWidth * $displayCount;
+  @include breakpoint(highres) {
+    width: $avatarWidth * $displayCount;
+  }
   .listWrapper {
     transition: all 0.35s ease-out;
   }
 
   .AvatarItemWrapper {
-    flex: 0 0 $avatarWidth;
-    height: $avatarWidth;
+    flex: 0 0 $laptopWidth;
+    height: $laptopWidth;
+    @include breakpoint(highres) {
+      flex: 0 0 $avatarWidth;
+      height: $avatarWidth;
+    }
     display: flex;
     align-items: center;
     justify-content: center;
@@ -24,9 +34,14 @@ $sectionWidth: $avatarWidth * $displayCount;
       }
     }
     & > .AvatarItem {
-      $avatarWidth: $avatarWidth - 1.5rem;
-      width: $avatarWidth;
-      height: $avatarWidth;
+      $avatarLaptopInnerWidth: $laptopWidth - 1.2rem;
+      $avatarInnerWidth: $avatarWidth - 1.5rem;
+      width: $avatarLaptopInnerWidth;
+      height: $avatarLaptopInnerWidth;
+      @include breakpoint(highres) {
+        width: $avatarInnerWidth;
+        height: $avatarInnerWidth;
+      }
       transition: all 0.25s ease-out;
       cursor: pointer;
     }

demo/src/App/index.tsx

@@ -66,7 +66,7 @@ class App extends Component<{}, {}> {
             id={this.avatarId}
             className="mb-10">
             <ReactNiceAvatar
-              className="w-80 h-80"
+              className="w-64 h-64 highres:w-80 highres:h-80"
               hairColorRandom
               shape={shape}
               {...config} />

demo/src/scss/_mixin.scss

@@ -0,0 +1,20 @@
+@mixin breakpoint($class) {
+  @if $class == tablet {
+    @media (min-width: 640px) { @content; }
+  }
+  @else if $class == laptop {
+    @media (min-width: 768px) { @content; }
+  }
+  @else if $class == desktop {
+    @media (min-width: 1280px) { @content; }
+  }
+  @else if $class == highres {
+    @media (min-width: 1680px) { @content; }
+  }
+  @else if $class == 5k {
+    @media (min-width: 2000px) { @content; }
+  }
+  @else {
+    @warn "Breakpoint mixin supports: mobile, tablet, desktop, highres";
+  }
+}

package.json

@@ -20,13 +20,14 @@
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.14.3",
     "@babel/plugin-proposal-decorators": "^7.14.5",
     "@babel/plugin-syntax-async-generators": "^7.8.4",
     "@babel/plugin-transform-regenerator": "^7.14.5",
     "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
+    "@babel/preset-env": "^7.14.4",
+    "@babel/preset-react": "^7.13.13",
+    "@babel/preset-typescript": "^7.14.5",
     "@types/file-saver": "^2.0.3",
     "@types/jest": "^26.0.24",
     "@types/react": "^17.0.14",
@@ -65,7 +66,6 @@
     "terser-webpack-plugin": "^2.1.2",
     "ts-jest": "^27.0.4",
     "tsconfig-paths-webpack-plugin": "^3.5.1",
-    "tslib": "^2.3.0",
     "typescript": "^4.4.2",
     "webpack": "^4.41.0",
     "webpack-cli": "^3.3.10",

src/types.ts

@@ -47,7 +47,7 @@ export interface NiceAvatarProps extends AvatarConfig {
   shape?: "circle" | "rounded" | "square"
 }
 
-export type GenConfigFunc = (config?: AvatarConfig) => Required<AvatarFullConfig>
+export type GenConfigFunc = (config?: AvatarFullConfig) => Required<AvatarFullConfig>
 
 export declare const genConfig: GenConfigFunc
 

src/utils.ts

@@ -144,8 +144,9 @@ export const genConfig: GenConfigFunc = (userConfig = {}) => {
   const _hairOrHatColor = response.hatStyle === "none" && response.hairColor || response.hatColor;
 
   // Eyebrow
-  response.eyeBrowStyle = userConfig.eyeBrowStyle
-  if (!response.eyeBrowStyle) {
+  if (userConfig.eyeBrowStyle) {
+    response.eyeBrowStyle = userConfig.eyeBrowStyle
+  } else {
     response.eyeBrowStyle = response.sex === "woman"
       ? pickRandomFromList(defaultOptions.eyeBrowWoman)
       : "up"

webpack/demo.js

@@ -16,7 +16,8 @@ module.exports = merge(baseConfig, {
       new TsconfigPathsPlugin({ configFile: path.resolve(__dirname, "../demo/tsconfig.json") })
     ],
     alias: {
-      "react-nice-avatar": path.resolve(__dirname, "../src")
+      "react-nice-avatar": path.resolve(__dirname, "../src"),
+      "shared-style": path.resolve(__dirname, "../demo/src/scss")
     }
   },
   entry: {

webpack/production.js

@@ -16,12 +16,12 @@ module.exports = merge(baseConfig, {
     ]
   },
   entry: {
-    app: path.resolve(__dirname, "../src/index.tsx")
+    index: path.resolve(__dirname, "../src/index.tsx")
   },
   output: {
     filename: "[name].js",
     path: path.resolve(__dirname, "../dist"),
-    publicPath: "/dist/"
+    libraryTarget: 'commonjs2'
   },
   plugins: [
     new webpack.DefinePlugin({
@@ -33,4 +33,4 @@ module.exports = merge(baseConfig, {
       new TerserJSPlugin({ extractComments: false })
     ]
   }
-});
+});