Website: replace react-scripts with webpack (#118)

.eslintignore

@@ -0,0 +1,5 @@
+babel.config.js
+webpack.common.js
+webpack.dev.js
+webpack.prod.js
+.eslintrc.js

.nvmrc

@@ -0,0 +1 @@
+v16

@stellar/design-system-website/babel.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  presets: [
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          browsers: "last 2 versions",
+        },
+        modules: false,
+        loose: false,
+      },
+    ],
+  ],
+  plugins: ["transform-class-properties", "react-hot-loader/babel"],
+  env: {
+    test: {
+      plugins: ["transform-es2015-modules-commonjs"],
+    },
+  },
+};

@stellar/design-system-website/package.json

@@ -6,25 +6,37 @@
   "license": "Apache-2.0",
   "scripts": {
     "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\"};\" > src/generated/gitInfo.ts",
-    "start": "yarn git-info && react-scripts start",
-    "build": "yarn git-info && react-scripts build",
+    "start": "yarn git-info && webpack serve --open --config webpack.dev.js",
+    "build": "yarn git-info && NODE_ENV=production webpack --config webpack.prod.js",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint-tsc": "tsc --noEmit"
   },
   "dependencies": {
     "@stellar/design-system": "^0.8.0",
+    "@svgr/webpack": "^6.2.1",
+    "assert": "^2.0.0",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
+    "https-browserify": "^1.0.0",
     "lodash": "^4.17.21",
+    "os-browserify": "^0.3.0",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-element-to-jsx-string": "^14.3.4",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
     "tslib": "^2.3.1",
-    "typescript": "~4.5.4"
+    "typescript": "~4.5.4",
+    "url": "^0.11.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
+    "@babel/preset-typescript": "^7.17.12",
     "@stellar/eslint-config": "^2.1.2",
     "@stellar/prettier-config": "^1.0.1",
     "@stellar/tsconfig": "^1.0.2",
@@ -37,7 +49,13 @@
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@types/react-router-dom": "^5.3.2",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
+    "clean-webpack-plugin": "^4.0.0",
     "concurrently": "^6.5.1",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.2.0",
     "eslint-config-react": "^1.1.7",
@@ -49,11 +67,23 @@
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-webpack-plugin": "^3.1.1",
+    "fork-ts-checker-webpack-plugin": "^7.2.11",
+    "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.4",
     "lint-staged": "^11.1.2",
+    "mini-css-extract-plugin": "^2.6.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
-    "pretty-quick": "^3.1.3"
+    "pretty-quick": "^3.1.3",
+    "react-hot-loader": "^4.13.0",
+    "sass-loader": "^13.0.0",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.3.0",
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.1"
   },
   "browserslist": {
     "production": [

@stellar/design-system-website/src/components/ComponentsList/index.tsx

@@ -2,7 +2,7 @@ import { Icon } from "@stellar/design-system";
 import { useHistory } from "react-router-dom";
 import { componentDetails } from "constants/componentDetails";
 import { componentsInDisplayOrder } from "constants/componentsInDisplayOrder";
-import { Routes } from "types/types.d";
+import { Routes } from "types/types";
 import "./styles.scss";
 
 export const ComponentsList = () => {

@stellar/design-system-website/src/components/Details/index.tsx

@@ -13,7 +13,7 @@ import {
   ComponentProp,
   ComponentDetailsId,
   ComponentExternalProps,
-} from "types/types.d";
+} from "types/types";
 
 import "./styles.scss";
 

@stellar/design-system-website/src/constants/componentDetails.ts

@@ -26,7 +26,7 @@ import { textLinks } from "constants/details/textLinks";
 import { toggles } from "constants/details/toggles";
 import { tooltips } from "constants/details/tooltips";
 import { typography } from "constants/details/typography";
-import { ComponentDetailsList } from "types/types.d";
+import { ComponentDetailsList } from "types/types";
 
 export const componentDetails: ComponentDetailsList = {
   assets,

@stellar/design-system-website/src/constants/componentsInDisplayOrder.ts

@@ -1,4 +1,4 @@
-import { ComponentDetailsId } from "types/types.d";
+import { ComponentDetailsId } from "types/types";
 
 interface ComponentsInDisplayOrder {
   id: ComponentDetailsId;

@stellar/design-system-website/src/constants/details/assets.tsx

@@ -1,5 +1,5 @@
 import { Icon, Logo, TextLink } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const assets: ComponentDetails = {
   id: ComponentDetailsId.assets,

@stellar/design-system-website/src/constants/details/avatars.tsx

@@ -1,5 +1,5 @@
 import { Avatar, Icon } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const avatars: ComponentDetails = {
   id: ComponentDetailsId.avatars,

@stellar/design-system-website/src/constants/details/branding.tsx

@@ -1,5 +1,5 @@
 import { ProjectLogo } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const branding: ComponentDetails = {
   id: ComponentDetailsId.branding,

@stellar/design-system-website/src/constants/details/buttons.tsx

@@ -1,5 +1,5 @@
 import { Button, Icon } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const buttons: ComponentDetails = {
   id: ComponentDetailsId.buttons,

@stellar/design-system-website/src/constants/details/cards.tsx

@@ -1,5 +1,5 @@
 import { Card } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const cards: ComponentDetails = {
   id: ComponentDetailsId.cards,

@stellar/design-system-website/src/constants/details/checkboxes.tsx

@@ -1,5 +1,5 @@
 import { Checkbox } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const checkboxes: ComponentDetails = {
   id: ComponentDetailsId.checkboxes,

@stellar/design-system-website/src/constants/details/copyTexts.tsx

@@ -1,5 +1,5 @@
 import { CopyText, TextLink, IconButton } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const copyTexts: ComponentDetails = {
   id: ComponentDetailsId.copyTexts,

@stellar/design-system-website/src/constants/details/detailsTooltips.tsx

@@ -1,5 +1,5 @@
 import { DetailsTooltip, Icon } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const detailsTooltips: ComponentDetails = {
   id: ComponentDetailsId.detailsTooltips,

@stellar/design-system-website/src/constants/details/iconButtons.tsx

@@ -1,5 +1,5 @@
 import { IconButton, Icon } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const iconButtons: ComponentDetails = {
   id: ComponentDetailsId.iconButtons,

@stellar/design-system-website/src/constants/details/identicons.tsx

@@ -1,5 +1,5 @@
 import { Identicon, TextLink } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const identicons: ComponentDetails = {
   id: ComponentDetailsId.identicons,

@stellar/design-system-website/src/constants/details/infoBlocks.tsx

@@ -1,5 +1,5 @@
 import { InfoBlock } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const infoBlocks: ComponentDetails = {
   id: ComponentDetailsId.infoBlocks,

@stellar/design-system-website/src/constants/details/inputs.tsx

@@ -1,5 +1,5 @@
 import { Input, IconButton, Icon } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 import { Field } from "./mocks";
 

@stellar/design-system-website/src/constants/details/layout.tsx

@@ -1,5 +1,5 @@
 import { Layout } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const layout: ComponentDetails = {
   id: ComponentDetailsId.layout,

@stellar/design-system-website/src/constants/details/loaders.tsx

@@ -1,5 +1,5 @@
 import { Loader } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const loaders: ComponentDetails = {
   id: ComponentDetailsId.loaders,

@stellar/design-system-website/src/constants/details/modals.tsx

@@ -6,7 +6,7 @@ import {
   RadioButton,
 } from "@stellar/design-system";
 import { useState } from "react";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 const SimpleModalExample = () => {
   const [modalVisible, setModalVisible] = useState(false);
@@ -129,9 +129,12 @@ export const modals: ComponentDetails = {
       description: "",
       previewExampleOverride: [<SimpleModalExample />],
       component: [
-        <Modal visible={false} onClose={() => {
-          // do nothing
-        }}>
+        <Modal
+          visible={false}
+          onClose={() => {
+            // do nothing
+          }}
+        >
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur
             eius beatae sint dolorem, excepturi quos enim, et ullam suscipit
@@ -146,9 +149,12 @@ export const modals: ComponentDetails = {
       description: "Modal with scrolling content using modal sub-components.",
       previewExampleOverride: [<ModalExample />],
       component: [
-        <Modal visible={false} onClose={() => {
-          // do nothing
-        }}>
+        <Modal
+          visible={false}
+          onClose={() => {
+            // do nothing
+          }}
+        >
           <Modal.Heading>Modal heading</Modal.Heading>
 
           <Modal.Body>

@stellar/design-system-website/src/constants/details/navButtons.tsx

@@ -1,5 +1,5 @@
 import { NavButton, Icon } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const navButtons: ComponentDetails = {
   id: ComponentDetailsId.navButtons,

@stellar/design-system-website/src/constants/details/pagination.tsx

@@ -1,5 +1,5 @@
 import { Pagination } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const pagination: ComponentDetails = {
   id: ComponentDetailsId.pagination,

@stellar/design-system-website/src/constants/details/pieProgress.tsx

@@ -1,5 +1,5 @@
 import { PieProgress } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const pieProgress: ComponentDetails = {
   id: ComponentDetailsId.pieProgress,

@stellar/design-system-website/src/constants/details/radioButtons.tsx

@@ -1,5 +1,5 @@
 import { RadioButton } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const radioButtons: ComponentDetails = {
   id: ComponentDetailsId.radioButtons,

@stellar/design-system-website/src/constants/details/selects.tsx

@@ -1,5 +1,5 @@
 import { Select, IconButton, Icon } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const selects: ComponentDetails = {
   id: ComponentDetailsId.selects,

@stellar/design-system-website/src/constants/details/statusBars.tsx

@@ -1,5 +1,5 @@
 import { StatusBar } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const statusBars: ComponentDetails = {
   id: ComponentDetailsId.statusBars,

@stellar/design-system-website/src/constants/details/tables.tsx

@@ -1,5 +1,5 @@
 import { Table } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 const tableData = [
   {

@stellar/design-system-website/src/constants/details/tags.tsx

@@ -1,5 +1,5 @@
 import { Tag } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const tags: ComponentDetails = {
   id: ComponentDetailsId.tags,

@stellar/design-system-website/src/constants/details/textLinks.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-no-comment-textnodes */
 import { TextLink, Icon } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const textLinks: ComponentDetails = {
   id: ComponentDetailsId.textLinks,

@stellar/design-system-website/src/constants/details/textareas.tsx

@@ -1,5 +1,5 @@
 import { Textarea } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 import { TextareaField } from "./mocks";
 

@stellar/design-system-website/src/constants/details/toggles.tsx

@@ -1,5 +1,5 @@
 import { Toggle } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 import { Field } from "./mocks";
 

@stellar/design-system-website/src/constants/details/tooltips.tsx

@@ -1,5 +1,5 @@
 import { TextLink, Tooltip } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const tooltips: ComponentDetails = {
   id: ComponentDetailsId.tooltips,

@stellar/design-system-website/src/constants/details/typography.tsx

@@ -7,7 +7,7 @@ import {
   Heading6,
   Eyebrow,
 } from "@stellar/design-system";
-import { ComponentDetails, ComponentDetailsId } from "types/types.d";
+import { ComponentDetails, ComponentDetailsId } from "types/types";
 
 export const typography: ComponentDetails = {
   id: ComponentDetailsId.typography,

@stellar/design-system-website/src/generated/gitInfo.ts

@@ -1 +1 @@
-export default { commitHash: "d2c5d54" };
+export default { commitHash: "1345794" };

@stellar/design-system-website/src/helpers/getComponentDetailsLink.ts

@@ -1,4 +1,4 @@
-import { Routes, ComponentDetailsId } from "types/types.d";
+import { Routes, ComponentDetailsId } from "types/types";
 
 export const getComponentDetailsLink = (component: ComponentDetailsId) =>
   `/${Routes.component}/${component}`;