Merge pull request #23202 from storybookjs/kasper/whatsnew

Settings: Add What's new? page and remove release notes page

code/addons/docs/src/typings.d.ts

@@ -10,12 +10,6 @@ declare module 'sveltedoc-parser' {
   export function parse(options: any): Promise<any>;
 }
 
-declare var FEATURES:
-  | {
-      storyStoreV7?: boolean;
-      argTypeTargetsV7?: boolean;
-      legacyMdx1?: boolean;
-    }
-  | undefined;
+declare var FEATURES: import('@storybook/types').StorybookConfig['features'];
 
 declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/addons/storyshots-core/src/typings.d.ts

@@ -10,12 +10,7 @@ declare var STORYBOOK_ENV: any;
 declare var STORIES: any;
 
 declare var CONFIG_TYPE: 'DEVELOPMENT' | 'PRODUCTION';
-declare var FEATURES:
-  | {
-      storyStoreV7?: boolean;
-      argTypeTargetsV7?: boolean;
-    }
-  | undefined;
+declare var FEATURES: import('@storybook/types').StorybookConfig['features'];
 
 declare var __STORYBOOK_STORY_STORE__: any;
 declare var __requireContext: any;

code/builders/builder-manager/src/utils/template.ts

@@ -34,7 +34,7 @@ export const renderHTML = async (
   refs: Promise<Record<string, Ref>>,
   logLevel: Promise<string>,
   docsOptions: Promise<DocsOptions>,
-  { versionCheck, releaseNotesData, previewUrl, configType }: Options
+  { versionCheck, previewUrl, configType }: Options
 ) => {
   const titleRef = await title;
   const templateRef = await template;
@@ -51,7 +51,6 @@ export const renderHTML = async (
       CONFIG_TYPE: JSON.stringify(await configType, null, 2),
       // These two need to be double stringified because the UI expects a string
       VERSIONCHECK: JSON.stringify(JSON.stringify(versionCheck), null, 2),
-      RELEASE_NOTES_DATA: JSON.stringify(JSON.stringify(releaseNotesData), null, 2),
       PREVIEW_URL: JSON.stringify(previewUrl, null, 2), // global preview URL
     },
     head: (await customHead) || '',

code/frameworks/angular/src/typings.d.ts

@@ -12,12 +12,7 @@ declare var __STORYBOOK_STORY_STORE__: any;
 declare var CHANNEL_OPTIONS: any;
 declare var DOCS_OPTIONS: any;
 
-declare var FEATURES:
-  | {
-      storyStoreV7?: boolean;
-      argTypeTargetsV7?: boolean;
-    }
-  | undefined;
+declare var FEATURES: import('@storybook/types').StorybookConfig['features'];
 
 declare var IS_STORYBOOK: any;
 declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined;

code/lib/cli/src/generate.ts

@@ -203,11 +203,6 @@ command('dev')
   .option('--loglevel <level>', 'Control level of logging during build')
   .option('--quiet', 'Suppress verbose build output')
   .option('--no-version-updates', 'Suppress update check', true)
-  .option(
-    '--no-release-notes',
-    'Suppress automatic redirects to the release notes after upgrading',
-    true
-  )
   .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
   .option('--webpack-stats-json [directory]', 'Write Webpack Stats JSON to disk')
   .option(

code/lib/core-events/src/index.ts

@@ -64,6 +64,10 @@ enum events {
   SHARED_STATE_SET = 'sharedStateSet',
   NAVIGATE_URL = 'navigateUrl',
   UPDATE_QUERY_PARAMS = 'updateQueryParams',
+
+  REQUEST_WHATS_NEW_DATA = 'requestWhatsNewData',
+  RESULT_WHATS_NEW_DATA = 'resultWhatsNewData',
+  SET_WHATS_NEW_CACHE = 'setWhatsNewCache',
 }
 
 // Enables: `import Events from ...`
@@ -111,7 +115,29 @@ export const {
   UPDATE_GLOBALS,
   UPDATE_QUERY_PARAMS,
   UPDATE_STORY_ARGS,
+  REQUEST_WHATS_NEW_DATA,
+  RESULT_WHATS_NEW_DATA,
+  SET_WHATS_NEW_CACHE,
 } = events;
 
 // Used to break out of the current render without showing a redbox
 export const IGNORED_EXCEPTION = new Error('ignoredException');
+
+export interface WhatsNewCache {
+  lastDismissedPost?: string;
+  lastReadPost?: string;
+}
+
+export type WhatsNewData =
+  | {
+      status: 'SUCCESS';
+      title: string;
+      url: string;
+      publishedAt: string;
+      excerpt: string;
+      postIsRead: boolean;
+      showNotification: boolean;
+    }
+  | {
+      status: 'ERROR';
+    };

code/lib/core-server/src/build-dev.ts

@@ -7,7 +7,6 @@ import type {
   StorybookConfig,
 } from '@storybook/types';
 import {
-  cache,
   loadAllPresets,
   loadMainConfig,
   resolveAddonName,
@@ -20,7 +19,6 @@ import { telemetry } from '@storybook/telemetry';
 
 import { join, resolve } from 'path';
 import { storybookDevServer } from './dev-server';
-import { getReleaseNotesData, getReleaseNotesFailedState } from './utils/release-notes';
 import { outputStats } from './utils/output-stats';
 import { outputStartupInformation } from './utils/output-startup-information';
 import { updateCheck } from './utils/update-check';
@@ -31,18 +29,15 @@ import { warnOnIncompatibleAddons } from './utils/warnOnIncompatibleAddons';
 export async function buildDevStandalone(
   options: CLIOptions & LoadOptions & BuilderOptions
 ): Promise<{ port: number; address: string; networkAddress: string }> {
-  const { packageJson, versionUpdates, releaseNotes } = options;
+  const { packageJson, versionUpdates } = options;
   const { version } = packageJson;
 
-  // updateInfo and releaseNotesData are cached, so this is typically pretty fast
-  const [port, versionCheck, releaseNotesData] = await Promise.all([
+  // updateInfo are cached, so this is typically pretty fast
+  const [port, versionCheck] = await Promise.all([
     getServerPort(options.port),
     versionUpdates
       ? updateCheck(version)
       : Promise.resolve({ success: false, cached: false, data: {}, time: Date.now() }),
-    releaseNotes
-      ? getReleaseNotesData(version, cache)
-      : Promise.resolve(getReleaseNotesFailedState(version)),
   ]);
 
   if (!options.ci && !options.smokeTest && options.port != null && port !== options.port) {
@@ -58,7 +53,6 @@ export async function buildDevStandalone(
   /* eslint-disable no-param-reassign */
   options.port = port;
   options.versionCheck = versionCheck;
-  options.releaseNotesData = releaseNotesData;
   options.configType = 'DEVELOPMENT';
   options.configDir = resolve(options.configDir);
   options.outputDir = options.smokeTest

code/lib/core-server/src/presets/common-preset.ts

@@ -8,16 +8,24 @@ import {
 } from '@storybook/core-common';
 import type {
   CLIOptions,
-  IndexerOptions,
-  StoryIndexer,
   CoreConfig,
+  IndexerOptions,
   Options,
-  StorybookConfig,
   PresetPropertyFn,
+  StorybookConfig,
+  StoryIndexer,
 } from '@storybook/types';
 import { loadCsf } from '@storybook/csf-tools';
 import { join } from 'path';
 import { dedent } from 'ts-dedent';
+import fetch from 'node-fetch';
+import type { Channel } from '@storybook/channels';
+import type { WhatsNewCache, WhatsNewData } from '@storybook/core-events';
+import {
+  REQUEST_WHATS_NEW_DATA,
+  RESULT_WHATS_NEW_DATA,
+  SET_WHATS_NEW_CACHE,
+} from '@storybook/core-events';
 import { parseStaticDir } from '../utils/server-statics';
 import { defaultStaticDirs } from '../utils/constants';
 
@@ -180,6 +188,7 @@ export const features = async (
   storyStoreV7: true,
   argTypeTargetsV7: true,
   legacyDecoratorFileOrder: false,
+  whatsNewNotifications: false,
 });
 
 export const storyIndexers = async (indexers?: StoryIndexer[]) => {
@@ -232,3 +241,46 @@ export const managerHead = async (_: any, options: Options) => {
 
   return '';
 };
+
+const WHATS_NEW_CACHE = 'whats-new-cache';
+const WHATS_NEW_URL = 'https://storybook.js.org/whats-new/v1';
+
+// Grabbed from the implementation: https://github.com/storybookjs/dx-functions/blob/main/netlify/functions/whats-new.ts
+type WhatsNewResponse = { title: string; url: string; publishedAt: string; excerpt: string };
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const experimental_serverChannel = (channel: Channel, options: Options) => {
+  channel.on(SET_WHATS_NEW_CACHE, async (data: WhatsNewCache) => {
+    const cache: WhatsNewCache = await options.cache.get(WHATS_NEW_CACHE).catch((e) => {
+      logger.verbose(e);
+      return {};
+    });
+    await options.cache.set(WHATS_NEW_CACHE, { ...cache, ...data });
+  });
+
+  channel.on(REQUEST_WHATS_NEW_DATA, async () => {
+    try {
+      const post = (await fetch(WHATS_NEW_URL).then(async (response) => {
+        if (response.ok) return response.json();
+        // eslint-disable-next-line @typescript-eslint/no-throw-literal
+        throw response;
+      })) as WhatsNewResponse;
+
+      const cache: WhatsNewCache = (await options.cache.get(WHATS_NEW_CACHE)) ?? {};
+      const data = {
+        ...post,
+        status: 'SUCCESS',
+        postIsRead: post.url === cache.lastReadPost,
+        showNotification: post.url !== cache.lastDismissedPost && post.url !== cache.lastReadPost,
+      } satisfies WhatsNewData;
+      channel.emit(RESULT_WHATS_NEW_DATA, { data });
+    } catch (e) {
+      logger.verbose(e);
+      channel.emit(RESULT_WHATS_NEW_DATA, {
+        data: { status: 'ERROR' } satisfies WhatsNewData,
+      });
+    }
+  });
+
+  return channel;
+};

code/lib/core-server/src/typings.d.ts

@@ -6,10 +6,4 @@ declare module '@aw-web-design/x-default-browser';
 declare module '@discoveryjs/json-ext';
 declare module 'watchpack';
 
-declare var FEATURES:
-  | {
-      storyStoreV7?: boolean;
-      argTypeTargetsV7?: boolean;
-      legacyMdx1?: boolean;
-    }
-  | undefined;
+declare var FEATURES: import('@storybook/types').StorybookConfig['features'];