Merge pull request #3620 from overleaf/ae-storybook-theme

Improve Storybook theming

GitOrigin-RevId: f02f0cfc8d13ca1a1510bd840afdc8f326fb6750

services/web/.storybook/default-theme.js

@@ -1,6 +0,0 @@
-import React from 'react'
-import '../frontend/stylesheets/style.less'
-
-const DefaultTheme = () => <React.Fragment />
-
-export default DefaultTheme

services/web/.storybook/global.css

@@ -0,0 +1,3 @@
+.sidebar-container a[title='Overleaf'] {
+  max-width: 100px;
+}

services/web/.storybook/ieee-theme.js

@@ -1,6 +0,0 @@
-import React from 'react'
-import '../frontend/stylesheets/ieee-style.less'
-
-const IEEETheme = () => <React.Fragment />
-
-export default IEEETheme

services/web/.storybook/light-theme.js

@@ -1,6 +0,0 @@
-import React from 'react'
-import '../frontend/stylesheets/light-style.less'
-
-const LightTheme = () => <React.Fragment />
-
-export default LightTheme

services/web/.storybook/main.js

@@ -11,7 +11,14 @@ module.exports = {
       ...storybookConfig.module.rules.filter(
         rule => !rule.test.toString().includes('woff')
       ),
-      ...customConfig.module.rules
+      // Replace the less rule, adding to-string-loader
+      ...customConfig.module.rules.filter(
+        rule => !rule.test.toString().includes('less')
+      ),
+      {
+        test: /\.less$/,
+        use: ['to-string-loader', 'css-loader', 'less-loader']
+      }
     ]
 
     // Combine Storybook's webpack plugins with our webpack plugins

services/web/.storybook/manager.js

@@ -1,6 +1,15 @@
 import { addons } from '@storybook/addons'
-import { themes } from '@storybook/theming'
+import { create } from '@storybook/theming'
 
-addons.setConfig({
-  theme: themes.dark
+import './global.css'
+
+import brandImage from '../public/img/ol-brand/overleaf.svg'
+
+const theme = create({
+  base: 'light',
+  brandTitle: 'Overleaf',
+  brandUrl: 'https://www.overleaf.com',
+  brandImage
 })
+
+addons.setConfig({ theme })

services/web/.storybook/preview-body.html

@@ -1,5 +0,0 @@
-<style>
-  body {
-    background: inherit; /* makes grid visible */
-  }
-</style>

services/web/.storybook/preview.css

@@ -0,0 +1,7 @@
+.sb-show-main .modal-backdrop {
+  display: none;
+}
+
+.sb-show-main .modal {
+  position: relative;
+}

services/web/.storybook/preview.js

@@ -1,8 +1,6 @@
 import React from 'react'
 
-const DefaultTheme = React.lazy(() => import('./default-theme'))
-const LightTheme = React.lazy(() => import('./light-theme'))
-const IEEETheme = React.lazy(() => import('./ieee-theme'))
+import './preview.css'
 
 // Storybook does not (currently) support async loading of "stories". Therefore
 // the strategy in frontend/js/i18n.js does not work (because we cannot wait on
@@ -46,26 +44,43 @@ export const globalTypes = {
   theme: {
     name: 'Theme',
     description: 'Editor theme',
-    defaultValue: 'default',
+    defaultValue: 'default-',
     toolbar: {
       icon: 'circlehollow',
-      items: ['default', 'light', 'IEEE']
+      items: [
+        { value: 'default-', title: 'Default' },
+        { value: 'light-', title: 'Light' },
+        { value: 'ieee-', title: 'IEEE' }
+      ]
     }
   }
 }
 
+export const loaders = [
+  async ({ globals }) => {
+    const { theme } = globals
+
+    return {
+      // NOTE: this uses `${theme}style.less` rather than `${theme}.less`
+      // so that webpack only bundles files ending with "style.less"
+      activeStyle: await import(
+        `../frontend/stylesheets/${theme === 'default-' ? '' : theme}style.less`
+      )
+    }
+  }
+]
+
 const withTheme = (Story, context) => {
+  const { activeStyle } = context.loaded
+
   return (
     <>
-      <React.Suspense fallback={<></>}>
-        {context.globals.theme === 'default' && <DefaultTheme />}
-        {context.globals.theme === 'light' && <LightTheme />}
-        {context.globals.theme === 'IEEE' && <IEEETheme />}
-      </React.Suspense>
+      {activeStyle && <style>{activeStyle.default}</style>}
       <Story {...context} />
     </>
   )
 }
+
 export const decorators = [withTheme]
 
 window.ExposedSettings = {}

services/web/package-lock.json

@@ -29328,6 +29328,14 @@
         "to-no-case": "^1.0.0"
       }
     },
+    "to-string-loader": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/to-string-loader/-/to-string-loader-1.1.6.tgz",
+      "integrity": "sha512-VNg62//PS1WfNwrK3n7t6wtK5Vdtx/qeYLLEioW46VMlYUwAYT6wnfB+OwS2FMTCalIHu0tk79D3RXX8ttmZTQ==",
+      "requires": {
+        "loader-utils": "^1.0.0"
+      }
+    },
     "toggle-selection": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",

services/web/package.json

@@ -229,6 +229,7 @@
     "socket.io-mock": "^1.3.1",
     "terser-webpack-plugin": "^2.3.6",
     "timekeeper": "^2.2.0",
+    "to-string-loader": "^1.1.6",
     "val-loader": "^1.1.1",
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.11",