web: add Storybook workspace level commands (#22311)

client/branded/package.json

@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "license": "Apache-2.0",
   "scripts": {
+    "storybook": "STORIES_GLOB=client/branded/src/**/*.story.tsx yarn workspace @sourcegraph/storybook run start",
     "eslint": "eslint --cache '**/*.[jt]s?(x)'",
     "stylelint": "stylelint 'src/**/*.scss' --quiet",
     "test": "jest"

client/browser/package.json

@@ -7,6 +7,7 @@
     "yarn": ">1.10.0"
   },
   "scripts": {
+    "storybook": "STORIES_GLOB=client/browser/src/**/*.story.tsx yarn workspace @sourcegraph/storybook run start",
     "fetch-code-intel-extensions": "node scripts/fetch-code-intel-extensions",
     "build-inline-extensions": "node scripts/build-inline-extensions",
     "dev": "yarn run build-inline-extensions && NODE_ENV=development NODE_OPTIONS=--max_old_space_size=4096 TS_NODE_COMPILER_OPTIONS=\"{\\\"module\\\":\\\"commonjs\\\"}\" node -r ts-node/register scripts/development",

client/shared/package.json

@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "license": "Apache-2.0",
   "scripts": {
+    "storybook": "STORIES_GLOB=client/shared/src/**/*.story.tsx yarn workspace @sourcegraph/storybook run start",
     "eslint": "eslint --cache '**/*.[jt]s?(x)'",
     "stylelint": "stylelint 'src/**/*.scss' --quiet",
     "test": "jest",

client/storybook/package.json

@@ -7,8 +7,8 @@
   "license": "Apache-2.0",
   "scripts": {
     "eslint": "eslint --cache 'src/**/*.[jt]s?(x)'",
-    "start": "start-storybook -p 9001 -c ./src -s ./assets",
-    "build": "build-storybook -c ./src -s ./assets",
+    "start": "TS_NODE_TRANSPILE_ONLY=true start-storybook -p 9001 -c ./src -s ./assets",
+    "build": "TS_NODE_TRANSPILE_ONLY=true build-storybook -c ./src -s ./assets",
     "test": "jest"
   }
 }

client/storybook/src/main.ts

@@ -8,16 +8,24 @@ import { Configuration, DefinePlugin, ProgressPlugin, RuleSetUseItem, RuleSetUse
 const rootPath = path.resolve(__dirname, '../../../')
 const monacoEditorPaths = [path.resolve(rootPath, 'node_modules', 'monaco-editor')]
 
-// Stories in this file are guarded by the `isChromatic()` check. It will result in noop in all other environments.
-const chromaticStoriesGlob = path.resolve(rootPath, 'client/storybook/src/chromatic-story/Chromatic.story.tsx')
-
-// Due to an issue with constant recompiling (https://github.com/storybookjs/storybook/issues/14342)
-// we need to make the globs more specific (`(web|shared..)` also doesn't work). Once the above issue
-// is fixed, this can be removed and watched for `client/**/*.story.tsx` again.
-const directoriesWithStories = ['branded', 'browser', 'shared', 'web', 'wildcard']
-const storiesGlobs = directoriesWithStories.map(packageDirectory =>
-    path.resolve(rootPath, `client/${packageDirectory}/src/**/*.story.tsx`)
-)
+const getStoriesGlob = (): string[] => {
+    if (process.env.STORIES_GLOB) {
+        return [path.resolve(rootPath, process.env.STORIES_GLOB)]
+    }
+
+    // Stories in `Chromatic.story.tsx` are guarded by the `isChromatic()` check. It will result in noop in all other environments.
+    const chromaticStoriesGlob = path.resolve(rootPath, 'client/storybook/src/chromatic-story/Chromatic.story.tsx')
+
+    // Due to an issue with constant recompiling (https://github.com/storybookjs/storybook/issues/14342)
+    // we need to make the globs more specific (`(web|shared..)` also doesn't work). Once the above issue
+    // is fixed, this can be removed and watched for `client/**/*.story.tsx` again.
+    const directoriesWithStories = ['branded', 'browser', 'shared', 'web', 'wildcard']
+    const storiesGlobs = directoriesWithStories.map(packageDirectory =>
+        path.resolve(rootPath, `client/${packageDirectory}/src/**/*.story.tsx`)
+    )
+
+    return [...storiesGlobs, chromaticStoriesGlob]
+}
 
 const shouldMinify = !!process.env.MINIFY
 const isDevelopment = !shouldMinify
@@ -36,7 +44,7 @@ const getCSSLoaders = (...loaders: RuleSetUseItem[]): RuleSetUse => [
 ]
 
 const config = {
-    stories: [...storiesGlobs, chromaticStoriesGlob],
+    stories: getStoriesGlob(),
     addons: [
         '@storybook/addon-knobs',
         '@storybook/addon-actions',

client/web/package.json

@@ -16,6 +16,7 @@
     "test:regression:onboarding": "yarn task:mocha ./src/regression/onboarding.test.ts",
     "test:regression:search": "yarn task:mocha ./src/regression/search.test.ts",
     "test-e2e-sgdev": "cross-env SOURCEGRAPH_BASE_URL=https://sourcegraph.sgdev.org OVERRIDE_AUTH_SECRET=${SGDEV_OVERRIDE_AUTH_SECRET} yarn task:mocha ./src/end-to-end/end-to-end.test.ts",
+    "storybook": "STORIES_GLOB=client/web/src/**/*.story.tsx yarn workspace @sourcegraph/storybook run start",
     "serve:dev": "ts-node-transpile-only --project ./dev/tsconfig.json ./dev/server/development.server.ts",
     "serve:prod": "ts-node-transpile-only --project ./dev/tsconfig.json ./dev/server/production.server.ts",
     "task:gulp": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" gulp",

client/wildcard/package.json

@@ -7,6 +7,7 @@
   "sideEffects": false,
   "license": "Apache-2.0",
   "scripts": {
+    "storybook": "STORIES_GLOB=client/wildcard/src/**/*.story.tsx yarn workspace @sourcegraph/storybook run start",
     "eslint": "eslint --cache '**/*.[jt]s?(x)'",
     "stylelint": "stylelint 'src/**/*.scss' --quiet",
     "test": "jest"

doc/dev/background-information/web/web_app.md

@@ -55,6 +55,29 @@ To install it, use the following command.
     yarn watch-generate
     ```
 
+### Storybook
+
+Storybook is used to work on the components in isolation. The latest version is deployed at http://storybook.sgdev.org/.
+
+To use it locally, use `yarn storybook` command to start the Storybook development server. This will load stories from all the workspaces that we have in the monorepo.
+
+To boost the build/recompilation performance of the Storybook, it's possible to load only a subset of stories needed for the current feature implementation. This is done via the environment variable `STORIES_GLOB`:
+
+```sh
+STORIES_GLOB=client/web/src/**/*.story.tsx yarn workspace @sourcegraph/storybook run start
+```
+
+It's common for a developer to work only in one client workspace, e.g., `web` or `browser`.
+The root `package.json` has commands to launch Storybook only for each individual workspace, which greatly increases the build performance.
+
+```sh
+yarn storybook:branded
+yarn storybook:browser
+yarn storybook:shared
+yarn storybook:web
+yarn storybook:wildcard
+```
+
 ## Naming files
 
 If the file only contains one main export (e.g. a component class + some interfaces), name the file like the main export.

package.json

@@ -27,6 +27,11 @@
     "test-e2e": "TS_NODE_PROJECT=client/web/src/end-to-end/tsconfig.json mocha ./client/web/src/end-to-end/end-to-end.test.ts",
     "cover-e2e": "nyc --hook-require=false --silent=true yarn test-e2e",
     "storybook": "yarn workspace @sourcegraph/storybook run start",
+    "storybook:branded": "yarn workspace @sourcegraph/branded run storybook",
+    "storybook:browser": "yarn workspace @sourcegraph/browser run storybook",
+    "storybook:shared": "yarn workspace @sourcegraph/shared run storybook",
+    "storybook:web": "yarn workspace @sourcegraph/web run storybook",
+    "storybook:wildcard": "yarn workspace @sourcegraph/wildcard run storybook",
     "build-storybook": "yarn workspace @sourcegraph/storybook run build",
     "cover-storybook": "nyc --hook-require=false yarn jest client/storybook/src/coverage",
     "deduplicate": "yarn-deduplicate -s fewer",