Disallow use of console, alert, and debugger (#681)

* Disallow use of console logging, alerts, and debugging

* Calling unimplemented methods should raise an exception

* Allow console logging for logic that only occurs in development and testing

* Allow console logging for CLI/build tooling

* Remove unnecessary console logging

* Convert console logging to debug statements

* Fix path for utils import

* Update severity levels for particular debug calls

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
     'plugin:jsx-a11y/recommended',
+    'plugin:storybook/recommended',
     'plugin:jsdoc/recommended',
     'plugin:cypress/recommended',
   ],
@@ -100,6 +101,9 @@ module.exports = {
     'jsdoc/require-param-type': 'off',
     'require-await': 'error',
     'linebreak-style': ['error', 'unix'],
+    'no-console': 'error',
+    'no-alert': 'error',
+    'no-debugger': 'error'
   },
   settings: {
     react: {

.gitignore

@@ -13,5 +13,3 @@
 
 cypress/videos
 cypress/screenshots
-
-storybook-static

.storybook/main.js

@@ -0,0 +1,17 @@
+module.exports = {
+  'stories': [
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+  'addons': [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    'storybook-addon-material-ui',
+    'storybook-addon-turbo-build'
+  ],
+  'framework': '@storybook/react',
+  'features': {
+    'modernInlineRender': true
+  }
+}

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons'
+import theme from './theme'
+
+addons.setConfig({
+  theme,
+})

.storybook/preview.js

@@ -0,0 +1,24 @@
+import {createContext} from 'react'
+import {addDecorator} from '@storybook/react'
+import {ThemeProvider} from '@mui/material/styles'
+import useShareTheme from '../src/theme/Theme'
+
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
+
+addDecorator((Story) => {
+  return (
+    <ThemeProvider theme={useShareTheme()}>
+      {Story()}
+    </ThemeProvider>
+  )
+})

.storybook/theme.js

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming'
+
+export default create({
+  base: 'light',
+  brandTitle: 'BLDRS',
+  brandUrl: 'https://bldrs.ai',
+  brandTarget: '_self',
+})

__mocks__/web-ifc-viewer.js

@@ -1,12 +1,10 @@
 jest.mock('three')
 jest.mock('../src/Infrastructure/IfcHighlighter')
-jest.mock('../src/Infrastructure/IfcIsolator')
-jest.mock('../src/Infrastructure/CustomPostProcessor')
 const ifcjsMock = jest.createMockFromModule('web-ifc-viewer')
 
 
 // Not sure why this is required, but otherwise these internal fields
-// are not present in the instantiated IfcViewerAPIExtended.
+// are not present in the instantiated IfcViewerAPI.
 const loadedModel = {
   ifcManager: {
     getSpatialStructure: jest.fn(),
@@ -17,9 +15,6 @@ const loadedModel = {
     boundingBox: {
       getCenter: jest.fn(),
     },
-    attributes: {
-      expressID: 123,
-    },
   },
 }
 
@@ -51,6 +46,7 @@ const impl = {
         },
       },
     },
+    loadIfcUrl: jest.fn(jest.fn(() => loadedModel)),
     setWasmPath: jest.fn(),
     selector: {
       unpickIfcItems: jest.fn(),
@@ -91,16 +87,13 @@ const impl = {
     getRenderer: jest.fn(),
     getScene: jest.fn(),
     getCamera: jest.fn(),
-    getClippingPlanes: jest.fn(() => {
-      return []
-    }),
   },
-  loadIfcUrl: jest.fn(jest.fn(() => loadedModel)),
   getProperties: jest.fn((modelId, eltId) => {
     return loadedModel.ifcManager.getProperties(eltId)
   }),
   setSelection: jest.fn(),
   pickIfcItemsByID: jest.fn(),
+  loadIfcUrl: jest.fn(jest.fn(() => loadedModel)),
 }
 const constructorMock = ifcjsMock.IfcViewerAPI
 constructorMock.mockImplementation(() => impl)
@@ -109,13 +102,13 @@ constructorMock.mockImplementation(() => impl)
 /**
  * @return {object} The single mock instance of IfcViewerAPI.
  */
-function __getIfcViewerAPIExtendedMockSingleton() {
+function __getIfcViewerAPIMockSingleton() {
   return impl
 }
 
 
 export {
   ifcjsMock as default,
   constructorMock as IfcViewerAPI,
-  __getIfcViewerAPIExtendedMockSingleton as __getIfcViewerAPIExtendedMockSingleton,
+  __getIfcViewerAPIMockSingleton,
 }

config/common.js

@@ -33,7 +33,7 @@ export const build = {
   format: 'esm',
   sourcemap: true,
   platform: 'browser',
-  target: ['chrome58', 'firefox57', 'safari11', 'edge18', 'es2020'],
+  target: ['chrome58', 'firefox57', 'safari11', 'edge18'],
   logLevel: 'info',
   define: {
     'process.env.OAUTH2_CLIENT_ID': JSON.stringify(process.env.OAUTH2_CLIENT_ID),

package.json

@@ -1,25 +1,24 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r677",
+  "version": "1.0.0-r646",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",
   "bugs": {
     "url": "https://github.com/bldrs-ai/Share/issues"
   },
   "scripts": {
-    "build": "yarn clean && yarn build-share && yarn build-cosmos",
-    "build-cosmos": "shx rm -rf docs/cosmos; shx mkdir -p docs ; cosmos-export --config .cosmos.config.json && shx mv cosmos-export docs/cosmos",
+    "build": "yarn build-share && yarn build-storybook",
+    "build-storybook": "shx mkdir -p docs && build-storybook -o docs/sb",
     "build-share": "yarn write-new-version && node config/build.js && yarn build-share-copy-web-asm",
     "build-share-copy-web-asm": "shx cp node_modules/web-ifc/*.wasm docs/static/js",
-    "clean": "shx rm -rf docs",
     "deps-graph": "npx dependency-cruiser src --include-only 'jsx?' --config --output-type dot | dot -T svg > deps.svg",
     "husky-init": "husky install",
     "lint": "yarn eslint src && tsc",
     "precommit": "yarn lint && yarn test",
     "serve": "yarn serve-share",
-    "serve-cosmos": "cosmos --config .cosmos.config.json",
     "serve-share": "yarn build-share && node config/serve.js",
+    "serve-storybook": "start-storybook -p 6006",
     "test": "jest",
     "cypress": "cypress run",
     "cypress-spec": "cypress run --spec",
@@ -33,15 +32,13 @@
     "@bldrs-ai/ifclib": "^5.3.3",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@iconscout/react-unicons": "^2.0.0",
-    "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "@fortawesome/free-solid-svg-icons": "^6.3.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/icons-material": "^5.11.9",
+    "@iconscout/react-unicons": "^1.1.6",
+    "@material-ui/core": "^4.12.4",
+    "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.95",
     "@mui/material": "^5.9.2",
     "@mui/styled-engine": "^5.8.7",
-    "@mui/styles": "^5.11.13",
+    "@mui/styles": "^5.9.2",
     "@octokit/rest": "^19.0.3",
     "@sentry/react": "^7.31.1",
     "@sentry/tracing": "^7.31.1",
@@ -75,7 +72,16 @@
     "@bahmutov/cypress-esbuild-preprocessor": "^2.1.3",
     "@mui/types": "^7.2.3",
     "@pablo-mayrgundter/cookies.js": "^1.0.0",
-    "@svgr/webpack": "^6.5.1",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addons": "^6.5.10",
+    "@storybook/builder-webpack4": "^6.5.10",
+    "@storybook/manager-webpack4": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/theming": "^6.5.10",
     "@testing-library/cypress": "^9.0.0",
     "@testing-library/dom": "^8.19.1",
     "@testing-library/jest-dom": "^5.16.5",
@@ -103,17 +109,17 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.4",
     "eslint-plugin-testing-library": "^5.9.1",
-    "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
     "jsdom": "^20.0.3",
     "msw": "^0.47.4",
-    "react-cosmos": "^5.7.2",
     "shx": "^0.3.4",
-    "webpack": "^5.75.0"
+    "storybook-addon-material-ui": "^0.9.0-alpha.24",
+    "storybook-addon-turbo-build": "^1.1.0"
   },
   "msw": {
     "workerDirectory": "public"

src/BaseRoutes.jsx

@@ -63,8 +63,6 @@ export default function BaseRoutes({testElt = null}) {
         if (err.error !== 'login_required') {
           throw err
         }
-
-        console.log(err.error)
       })
     }
   }, [basePath, installPrefix, location, navigation, getAccessTokenSilently, isAuthenticated, isLoading, setAccessToken])

src/Components/About/AboutControl.jsx

@@ -15,7 +15,7 @@ import {Helmet} from 'react-helmet-async'
 /**
  * Button to toggle About panel on and off
  *
- * @return {React.Component}
+ * @return {React.ReactElement}
  */
 export default function AboutControl() {
   const isAboutDialogSuppressed = useStore((state) => state.isAboutDialogSuppressed)
@@ -27,8 +27,6 @@ export default function AboutControl() {
   const setIsDialogDisplayedLocal = (value) => {
     setIsDialogDisplayed(value)
   }
-
-  // eslint-disable-next-line no-unused-vars
   const setIsDialogDisplayedForDialog = () => {
     setIsDialogDisplayed(false)
     setCookieBoolean({component: 'about', name: 'isFirstTime', value: false})
@@ -65,7 +63,7 @@ export default function AboutControl() {
  * @param {Function} setIsDialogDisplayed
  * @return {React.ReactElement} React component
  */
-export function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
+function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
   return (
     <Dialog
       icon={