Boxicons are imported as svg and transformed to react components

rcsb · Nov 21, 2023 · dff3d3c · dff3d3c
1 parent 5b5f3c5
commit dff3d3c
Show file tree

Hide file tree

Showing 10 changed files with 2,696 additions and 261 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 [Semantic Versioning](https://semver.org/)
 
+## [3.0.1] - 2023-11-21
+### Improvements
+- Boxicons are imported as svg and transformed to react components
+
 ## [3.0.0] - 2023-11-02
 ### Breaking changes
 - Types are not anymore exposed from `build/src`

diff --git a/examples/local.html b/examples/local.html
@@ -35,7 +35,7 @@
             trackData: [
                 {
                     begin: 1,
-                    value: sequence
+                    label: sequence
                 }
             ]
         },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   "scripts": {
     "devServer": "webpack-dev-server --config webpack.server.dev.config.js",
     "build": "webpack --config ./webpack.config.js",
-    "buildApp": "npm run build-tsc && npm run build-commonjs && npm run build && npm run cpStyles",
+    "buildApp": "npm run clean && npm run build-tsc && npm run build-commonjs && npm run build && npm run cpStyles",
     "buildAll": "npm run buildApp && npm run buildAllDoc",
     "buildDoc": "typedoc --excludeExternals --externalPattern \"**/node_modules/**\" --plugin typedoc-plugin-missing-exports  --plugin typedoc-theme-hierarchy --theme hierarchy --entryPointStrategy expand ./src && sed -i '' '/---/d' docs/index.html",
     "cpExamples": "ncp examples docs/examples",
@@ -20,6 +20,7 @@
     "publishApp": "npm publish",
     "build-tsc": "tsc",
     "build-commonjs": "tsc --build tsconfig.commonjs.json",
+    "clean": "del-cli lib && del-cli build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -43,6 +44,7 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.23.2",
     "@floating-ui/dom": "^1.5.3",
+    "@svgr/webpack": "^8.1.0",
     "@types/d3": "^7.4.2",
     "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
@@ -52,6 +54,7 @@
     "buffer": "^6.0.3",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^6.7.1",
+    "del-cli": "^5.1.0",
     "html-webpack-plugin": "^5.5.0",
     "ncp": "^2.0.0",
     "path-browserify": "^1.0.1",
@@ -76,7 +79,6 @@
     "d3": "^7.6.1",
     "d3-shape": "^3.1.0",
     "react-transition-group": "^4.4.5",
-    "resolve-url-loader": "^5.0.0",
     "rxjs": "^7.5.6"
   },
   "peerDependencies": {

diff --git a/src/RcsbFv/RcsbFvUI/RcsbFvUI.tsx b/src/RcsbFv/RcsbFvUI/RcsbFvUI.tsx
@@ -14,8 +14,11 @@ import {asyncScheduler, Subscription} from "rxjs";
 import {RcsbScaleInterface} from "../../RcsbBoard/RcsbD3/RcsbD3ScaleFactory";
 import {computePosition, detectOverflow} from "@floating-ui/dom";
 import {ReactNode} from "react";
-import iconClasses from "../../scss/RcsbFvIcons.module.scss";
-
+import BxPlus from "boxicons/svg/regular/bx-plus.svg";
+import BxMinus from "boxicons/svg/regular/bx-minus.svg";
+import BxRight from "boxicons/svg/regular/bx-right-arrow.svg";
+import BxLeft from "boxicons/svg/regular/bx-left-arrow.svg";
+import BxDown from "boxicons/svg/solid/bxs-down-arrow.svg";
 
 export interface RcsbFvUIConfigInterface {
     readonly boardId: string;
@@ -39,21 +42,27 @@ export class RcsbFvUI extends React.Component<RcsbFvUIConfigInterface, RcsbFvUIS
     private tooltipDiv: HTMLDivElement;
     private refDiv: HTMLDivElement;
 
+    private static readonly ICON_PROPS = {
+        width: 16,
+        height: 16,
+        viewBox: "0 0 24 24"
+    }
+
     /**UI config Object*/
     private readonly config: Array<RcsbFvUIButtonInterface> = [{
-        icon: <i className={"bx bx-plus"}/>,
+        icon: <BxPlus {...RcsbFvUI.ICON_PROPS}/>,
         callback: this.zoomIn.bind(this),
         name: "zoom-in"
     },{
-        icon: <i className={"bx bx-minus"}/>,
+        icon: <BxMinus {...RcsbFvUI.ICON_PROPS}/>,
         callback: this.zoomOut.bind(this),
         name: "zoom-out"
     },{
-        icon: <i className={"bx bx-right-arrow"} ></i>,
+        icon: <BxRight {...RcsbFvUI.ICON_PROPS}/>,
         callback: this.move.bind(this,1),
         name: "move-right"
     },{
-        icon: <i className={"bx bx-left-arrow"} ></i>,
+        icon: <BxLeft {...RcsbFvUI.ICON_PROPS}/>,
         callback: this.move.bind(this,-1),
         name: "move-left"
     }];
@@ -69,7 +78,7 @@ export class RcsbFvUI extends React.Component<RcsbFvUIConfigInterface, RcsbFvUIS
         return (
             <div
                 id={this.props.boardId+RcsbFvDOMConstants.UI_DOM_ID_PREFIX}
-                className={classes.rcsbUI+" "+classes.rcsbSmoothDivHide+" "+iconClasses.boxIconsComponentScope}
+                className={classes.rcsbUI+" "+classes.rcsbSmoothDivHide}
                 style={{position:"absolute", top:0, left:0}}
             >
                 <div style={{position:"relative"}} >
@@ -79,7 +88,7 @@ export class RcsbFvUI extends React.Component<RcsbFvUIConfigInterface, RcsbFvUIS
                         classNames={classes.rcsbCollapseUI}>
                         <div style={{position:"absolute"}} className={classes.rcsbCollapsedUIDiv+" "+classes.rcsbCollapseUI} onMouseEnter={this.changeState.bind(this,{collapse: false})}>
                             <div className={classes.rcsbCollapsedIcon}>
-                                <i className={"bx bxs-down-arrow"}/>
+                                <BxDown {...RcsbFvUI.ICON_PROPS}/>
                             </div>
                         </div>
                     </CSSTransition>

diff --git a/src/custom.d.ts b/src/custom.d.ts
@@ -6,3 +6,8 @@ declare module "*.json" {
     const value: any;
     export default value;
 }
+declare module "boxicons/*.svg" {
+    import {SVGProps} from "react";
+    const content: React.FC<SVGProps<any>>;
+    export default content;
+}
diff --git a/src/scss/RcsbFvIcons.module.scss b/src/scss/RcsbFvIcons.module.scss
diff --git a/src/scss/RcsbFvRow.module.scss b/src/scss/RcsbFvRow.module.scss
@@ -212,13 +212,20 @@ $boxShadow-rcsbFvUI: 0 0 3px 0 #aaa;
     width: 100%;
     height: 100%;
     cursor: pointer;
-    color: #999;
 }
 
-.rcsbIcon i {
+.rcsbIcon > svg {
     margin: calc(($height-rcsbFvUI - 16px) / 2) calc(($width-rcsbFvUI - 16px) / 2) calc(($height-rcsbFvUI - 16px) / 2) calc(($width-rcsbFvUI - 16px) / 2);
 }
 
+.rcsbIcon > svg > path {
+    fill: #999;
+}
+
+.rcsbIcon > svg:hover > path {
+    fill: #333;
+}
+
 .rcsbCollapsedIcon {
     width: $width-rcsbFvUI;
     height: $width-rcsbFvUI;
@@ -229,12 +236,12 @@ $boxShadow-rcsbFvUI: 0 0 3px 0 #aaa;
     box-shadow: $boxShadow-rcsbFvUI;
 }
 
-.rcsbCollapsedIcon i {
+.rcsbCollapsedIcon svg {
     margin: 4px 3px 2px 3px;
 }
 
-.rcsbIcon:hover {
-    color:#333;
+.rcsbCollapsedIcon > svg > path {
+    fill: #999;
 }
 
 .rcsbSmoothDivHide {

diff --git a/webpack.config.js b/webpack.config.js
@@ -9,7 +9,17 @@ module.exports = {
     },
     module: {
       rules: [
-        {
+          {
+              test: /\.svg$/,
+              issuer: /\.[jt]sx?$/,
+              use: [{
+                  loader:'@svgr/webpack',
+                  options: {
+                      expandProps: "end",
+                      svgoConfig: {}
+                  }
+              }]
+          },{
           test: /\.tsx?$/,
           loader: 'ts-loader',
           exclude: /node_modules/
@@ -27,12 +37,7 @@ module.exports = {
                   }
               }
           }, {
-              loader: 'resolve-url-loader'
-          }, {
-              loader: 'sass-loader',
-              options: {
-                  sourceMap: true
-              }
+              loader: 'sass-loader'
           }]
         }
       ]

diff --git a/webpack.server.dev.config.js b/webpack.server.dev.config.js
@@ -6,6 +6,16 @@ const commonConfig = {
     module: {
       rules: [
         {
+            test: /\.svg$/,
+            issuer: /\.[jt]sx?$/,
+            use: [{
+                loader:'@svgr/webpack',
+                options: {
+                    expandProps: "end",
+                    svgoConfig: {}
+                }
+            }]
+        },{
           test: /\.tsx?$/,
           loader: 'ts-loader',
           exclude: /node_modules/
@@ -22,7 +32,7 @@ const commonConfig = {
                       localIdentName:'[local]'
                   }
               }
-          }, 'resolve-url-loader', 'sass-loader']
+          },'sass-loader']
         }
       ]
     },