Sync DSM Storybook Integration codebases

Author: baiirun

bin/dsm-storybook.js

@@ -10,7 +10,9 @@ program
   .option('--dsm-host [host]', 'The DSM server')
   .option('--auth-token [token]', 'Key provided to you by DSM to authenticate uploads')
   .option('--story-path [glob]', 'Path to folder containing storybook stories')
-  .option('-o, --output-dir [path]', 'Path to folder to store the DSM build artifacts');
+  .option('-o, --output-dir [path]', 'Path to folder to store the DSM build artifacts')
+  .option('--default-docs-tab', 'Load the docs tab by default on web')
+  .option('--hide-dsm-generated-table', 'Hide the DSM Props Table and Sample Code on your DSM website');
 
 program
   .command('publish')
@@ -77,6 +79,7 @@ function getConfigurations() {
  * */
 function optionsFromArgs() {
   const configurationKeys = buildConfiguration.configurationKeys;
+
   return keys(configurationKeys).reduce((acc, key) => {
     if (program[key]) {
       acc[configurationKeys[key]] = program[key];

config/webpack-node.config.dev.js

@@ -7,7 +7,7 @@ const webpackConfigBase = require('./webpack-node.config.base');
 const devWebpackConfig = {
   devtool: false,
   plugins: [
-    new WebpackShellPlugin({ dev: false, onBuildEnd: ['yalc publish --no-sig --force --push'] }),
+    new WebpackShellPlugin({ dev: false, onBuildEnd: ['yalc publish --yarn --no-sig --force --push'] }),
     new webpack.SourceMapDevToolPlugin({
       filename: '[file].map'
     })

config/webpack.config.dev.js

@@ -6,7 +6,7 @@ const webpackConfigBase = require('./webpack.config.base');
 
 const devWebpackConfig = {
   devtool: 'eval-source-map',
-  plugins: [new WebpackShellPlugin({ dev: false, onBuildEnd: ['yalc publish --no-sig --force --push'] })]
+  plugins: [new WebpackShellPlugin({ dev: false, onBuildEnd: ['yalc publish --yarn --no-sig --force --push'] })]
 };
 
 module.exports = _.merge({}, webpackConfigBase, devWebpackConfig);

package.json

@@ -16,7 +16,7 @@
       "test": "NODE_ENV=test jest --config jest.config.json",
       "test-local": "docker-compose -f docker-compose.yml -f docker-compose-test.yml up",
       "lint": "eslint src",
-      "local-publish": "yalc publish --no-sig --force",
+      "local-publish": "yalc publish --yarn --no-sig --force",
       "clean-yalc": "yalc installations clean @invisionapp/dsm-storybook",
       "postupdate": "chmod +x ./node_modules/.bin/dsm-storybook"
    },
@@ -46,8 +46,8 @@
       "pkg-dir": "4.1.0",
       "prettier": "1.19.1",
       "prism-react-renderer": "1.0.2",
-      "prismjs": "1.15.0",
-      "react-docgen": "5.3.0",
+      "prismjs": "1.21.0",
+      "react-docgen": "5.3.1",
       "read-pkg": "4.0.1",
       "read-pkg-up": "4.0.0",
       "request-promise": "4.2.4",
@@ -93,6 +93,6 @@
       "webpack-cli": "3.1.2",
       "webpack-node-externals": "1.7.2",
       "webpack-shell-plugin": "0.5.0",
-      "yalc": "1.0.0-pre.27"
+      "yalc": "1.0.0-pre.45"
    }
-}
+}

src/addons/constants.js

@@ -1,6 +1,7 @@
 const DSM_ADDON_NAME = 'invision-dsm';
 const DSM_INFO_OBJECT_KEY = 'in-dsm';
 const STORY_SELECTED_EVENT = `${DSM_ADDON_NAME}/on_story_selected`;
+const STORY_CONTENT_LOADED = `${DSM_ADDON_NAME}/on_story_content_loaded`;
 const HTML_SAMPLE_CODE_CHANGED_EVENT = `${DSM_ADDON_NAME}/on_html_sample_code_changed`;
 const INIT_DSM_REGISTERED_EVENT = `${DSM_ADDON_NAME}/on_init_dsm_registered`;
 const INIT_DSM_EVENT = `${DSM_ADDON_NAME}/on_init_dsm`;
@@ -19,6 +20,7 @@ module.exports = {
   DSM_INFO_OBJECT_KEY,
   DSM_STORYBOOK_START_EVENT,
   STORY_SELECTED_EVENT,
+  STORY_CONTENT_LOADED,
   HTML_SAMPLE_CODE_CHANGED_EVENT,
   INIT_DSM_REGISTERED_EVENT,
   INIT_DSM_EVENT,

src/addons/register.js

@@ -16,7 +16,9 @@ import {
   KNOBS_SET_EVENT as DSM_KNOBS_SET_EVENT,
   INIT_DSM_REGISTERED_EVENT,
   INIT_DSM_EVENT,
-  DSM_STORYBOOK_START_EVENT
+  DSM_STORYBOOK_START_EVENT,
+  STORY_CONTENT_LOADED,
+  FRAMEWORKS
 } from './constants';
 import { optionsSettings, isLocalPreview } from './dsm-options';
 
@@ -55,6 +57,12 @@ export function registerDsm(envVariable) {
       });
 
       channel.on(HTML_SAMPLE_CODE_CHANGED_EVENT, (data) => {
+        if (getByEnvKey(environmentKeys.storybookFramework) === FRAMEWORKS.html) {
+          notifyDsm(data);
+        }
+      });
+
+      channel.on(STORY_CONTENT_LOADED, (data) => {
         notifyDsm(data);
       });
 

src/addons/services/client-logger.js

@@ -4,6 +4,7 @@ import { isString } from 'lodash';
 const getErrorMessage = (message) => (message && isString(message) ? message : message.stack);
 
 export default {
+  info: (message) => console.log(message),
   warning: (message) => console.log(message),
   error: (message, exception) => console.log(`${getErrorMessage(message)} ${exception ? `\n${exception.stack}` : ''}`)
 };

src/addons/with-dsm.js

@@ -2,8 +2,7 @@ import addons, { makeDecorator } from '@storybook/addons';
 import logger from './services/client-logger';
 import userMessages from '../user-messages';
 
-import { DSM_INFO_OBJECT_KEY, STORY_SELECTED_EVENT, HTML_SAMPLE_CODE_CHANGED_EVENT, FRAMEWORKS } from './constants';
-import { environmentKeys, getByEnvKey } from '../services/configuration';
+import { STORY_SELECTED_EVENT, HTML_SAMPLE_CODE_CHANGED_EVENT, DSM_INFO_OBJECT_KEY, STORY_CONTENT_LOADED } from './constants';
 import { getStorySampleCode } from './html-sample-code';
 
 function isDifferentStories(current, next) {
@@ -12,47 +11,87 @@ function isDifferentStories(current, next) {
 
 let currentStory = null;
 
-export default makeDecorator({
-  name: 'withDsm',
-  parameterName: DSM_INFO_OBJECT_KEY,
-  skipIfNoParametersOrOptions: true,
-  wrapper: (getStory, context) => {
-    const story = getStory(context);
-    const framework = getByEnvKey(environmentKeys.storybookFramework);
-
-    // In HTML framework the sample code is the story itself on runtime, return the story only if it's a string and not a JS document
-    if (framework === FRAMEWORKS.html) {
-      const { containerClass } = context.parameters['in-dsm'];
-      let sampleCode = '';
-
-      try {
-        sampleCode = getStorySampleCode(story, containerClass);
-      } catch (e) {
-        sampleCode = userMessages.failedToExtractSampleCode();
-        logger.error(e);
-      }
+const emitHtmlSampleCode = (story, context) => {
+  // In HTML framework the sample code is the story itself on runtime, the story only
+  // if it's a string and not a JS document
+  const { containerClass } = context.parameters['in-dsm'];
+  let sampleCode = '';
 
-      addons.getChannel().emit(HTML_SAMPLE_CODE_CHANGED_EVENT, {
-        eventName: HTML_SAMPLE_CODE_CHANGED_EVENT,
-        sampleCode: sampleCode
+  try {
+    sampleCode = getStorySampleCode(story, containerClass);
+  } catch (e) {
+    sampleCode = userMessages.failedToExtractSampleCode();
+    logger.error(e);
+  }
+
+  addons.getChannel().emit(HTML_SAMPLE_CODE_CHANGED_EVENT, {
+    eventName: HTML_SAMPLE_CODE_CHANGED_EVENT,
+    sampleCode: sampleCode
+  });
+};
+
+const emitStoryData = (story, context) => {
+  if (!currentStory || isDifferentStories(currentStory, context)) {
+    // story.type won't exist for Vue, we ignore it for now (__docgenInfo is only relevant for react)
+    const docgenInfo = story.type && story.type.__docgenInfo;
+
+    const storyData = {
+      eventName: STORY_SELECTED_EVENT,
+      docgenInfo: docgenInfo
+    };
+
+    addons.getChannel().emit(STORY_SELECTED_EVENT, storyData);
+    currentStory = context;
+  }
+};
+
+const emitStoryLayoutDimensions = () => {
+  const CONTENT_REFRESH_TIME = 200; // ms
+  const RETRY_MAX_ATTEMPTS = 20;
+  let retryCount = 0;
+
+  const messageContentHeightInterval = setInterval(() => {
+    const container = document.getElementById('docs-root');
+
+    // If the container does not exist we want to continue retrying in the "else" block.
+    // Additionally if the container DOES exist but is hidden, the offsetHeight will be 0.
+    // In this case we also continue retrying.
+    if (container && container.offsetHeight) {
+      addons.getChannel().emit(STORY_CONTENT_LOADED, {
+        eventName: STORY_CONTENT_LOADED,
+        height: container.offsetHeight
       });
-    }
 
-    // Will emit the story selected event only one time per story selected instead of each time the story is updated
-    // (for example story is updated each time knobs are changed)
-    if (!currentStory || isDifferentStories(currentStory, context)) {
-      // story.type won't exist for Vue, we ignore it for now (__docgenInfo is only relevant for react)
-      const docgenInfo = story.type && story.type.__docgenInfo;
+      clearInterval(messageContentHeightInterval);
+    } else {
+      addons.getChannel().emit(STORY_CONTENT_LOADED, {
+        eventName: STORY_CONTENT_LOADED
+        // We do not send a height so that web will use a default height. dsm-storybook
+        // doesn't really care what that height is.
+      });
 
-      const storyData = {
-        eventName: STORY_SELECTED_EVENT,
-        docgenInfo: docgenInfo
-      };
+      // We may not ever find the container, or the container may not have an `offsetHeight`.
+      // This may occur if the user is viewing "Canvas" instead of "Docs." In this situation
+      // we want to just stop the interval to prevent a "memory leak."
+      retryCount += 1;
 
-      addons.getChannel().emit(STORY_SELECTED_EVENT, storyData);
-      currentStory = context;
+      if (retryCount > RETRY_MAX_ATTEMPTS) {
+        clearInterval(messageContentHeightInterval);
+      }
     }
+  }, CONTENT_REFRESH_TIME);
+};
 
+export default makeDecorator({
+  name: 'withDsm',
+  parameterName: DSM_INFO_OBJECT_KEY,
+  skipIfNoParametersOrOptions: true,
+  wrapper: (getStory, context) => {
+    const story = getStory(context);
+    emitHtmlSampleCode(story, context);
+    emitStoryData(story, context);
+    emitStoryLayoutDimensions();
+    logger.info(userMessages.decoratorStarted());
     return story;
   }
 });

src/cli/build-configuration.js

@@ -18,7 +18,9 @@ const configurationKeys = {
   dsmHost: 'dsmHost',
   authToken: 'authToken',
   storyPath: 'storyPath',
-  outputDir: 'outputDir'
+  outputDir: 'outputDir',
+  hideDsmGeneratedTable: 'hideDsmGeneratedTable',
+  defaultDocsTab: 'defaultDocsTab'
 };
 
 let loadedConfiguration = null;
@@ -56,7 +58,8 @@ function create(commandlineOptions, customArgs) {
     prettierConfiguration,
     storybookConfigPath,
     storybookConfigFolderPath,
-    isUsingDeclarativeConfiguration: isUsingDeclarativeConfiguration(storybookConfigPath)
+    isUsingDeclarativeConfiguration: isUsingDeclarativeConfiguration(storybookConfigPath),
+    isDocsPage: customArgs.includes('--docs')
   };
 
   const environmentConfiguration = loadEnvironmentVariables();
@@ -81,8 +84,22 @@ function loadEnvironmentVariables() {
 }
 
 function mergeConfigurationValues(appConfiguration, cmdConfiguration, fileConfiguration = {}, environmentConfiguration) {
-  // command line args overrides config file and environment variables
-  return Object.assign(appConfiguration, fileConfiguration, environmentConfiguration, cmdConfiguration);
+  // The below options are optional and we automatically set them to false. If the
+  // user specifies them via the command-line or dsmrc the user options will be
+  // overwrite the defaults.
+  const optionalCommandLineOptions = {
+    [configurationKeys.defaultDocsTab]: false,
+    [configurationKeys.hideDsmGeneratedTable]: false
+  };
+
+  // command line args overrides config file, default DSM options, and environment variables
+  return Object.assign(
+    appConfiguration,
+    optionalCommandLineOptions,
+    fileConfiguration,
+    environmentConfiguration,
+    cmdConfiguration
+  );
 }
 
 function get() {
@@ -99,8 +116,10 @@ function validateConfiguration() {
     process.exit(1);
   }
   let hasMissingConfiguration = false;
+
   keys(configurationKeys).map((key) => {
-    if (!loadedConfiguration[key]) {
+    const configurationKeyExists = key in loadedConfiguration;
+    if (!configurationKeyExists) {
       logger.error(userMessages.missingConfigurationKey(key));
       hasMissingConfiguration = true;
     }

src/cli/runner.js

@@ -57,7 +57,11 @@ async function publish(options, customArgs) {
     storybookDependencies: options.storybookDependencies,
     storiesMetadata: storiesMetadata,
     buildId: buildId,
-    prettierConfiguration: options.prettierConfiguration
+    prettierConfiguration: options.prettierConfiguration,
+
+    isDocsPage: options.isDocsPage,
+    hideDsmGeneratedTable: options.hideDsmGeneratedTable,
+    defaultDocsTab: options.defaultDocsTab
   };
 
   logger.progress(userMessages.updatingDsm());

src/url-generator/get-story-url-params.js

@@ -1,6 +1,6 @@
 const { getByVersion, resolvers } = require('../versions');
 
-module.exports = function(kind, name, storybookVersion) {
+module.exports = function(kind, name, storybookVersion, { defaultDocsTab = false }) {
   const { getStoryUrlParams } = getByVersion(resolvers.getStoryUrlParams, storybookVersion);
-  return getStoryUrlParams(kind, name);
+  return getStoryUrlParams(kind, name, defaultDocsTab);
 };

src/user-messages.js

@@ -102,7 +102,8 @@ const messages = {
     `More than 1 Storybook UI framework dependencies detected. You can set the UI framework you want to use explicitly inside the '.dsmrc' file or make sure only 1 '@storybook/<framework>' is inside the 'package.json' file.`,
   explicitFrameworkNotDetectedInInstalledPackages: (framework) =>
     `Failed to detect the framework '${framework}' that was provided in '.dsmrc' file. Please ensure you installed Storybook for your selected UI library correctly. See https://storybook.js.org/basics/slow-start-guide/ for details.`,
-  inDsmInitLocationError: (inDsmLevel) => `${inDsmLevel} 'in-dsm' must be initialized inside the 'parameters' property`
+  inDsmInitLocationError: (inDsmLevel) => `${inDsmLevel} 'in-dsm' must be initialized inside the 'parameters' property`,
+  decoratorStarted: () => 'The DSM Storybook integration is now running.'
 };
 
 module.exports = messages;

src/versions/v5.1.1/get-story-url-params.js

@@ -1,9 +1,10 @@
 const { sanitize } = require('./url-utils');
 
-const getStoryUrlParams = (rawKind, rawName) => {
+const getStoryUrlParams = (rawKind, rawName, defaultDocsTab) => {
   const { kind, name } = sanitizeParams(rawKind, rawName);
+  const initialTab = defaultDocsTab ? 'docs' : 'story';
 
-  return { path: `/story/${kind}--${name}` };
+  return { path: `/${initialTab}/${kind}--${name}` };
 };
 
 const sanitizeParams = (rawKind, rawName) => {