Tech: migrate to es version of lodash (and shows dist size stats)

code/frameworks/angular/src/builders/build-storybook/schema.json

@@ -47,19 +47,13 @@
     "compodocArgs": {
       "type": "array",
       "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
-      "default": [
-        "-e",
-        "json"
-      ],
+      "default": ["-e", "json"],
       "items": {
         "type": "string"
       }
     },
     "webpackStatsJson": {
-      "type": [
-        "boolean",
-        "string"
-      ],
+      "type": ["boolean", "string"],
       "description": "Write Webpack Stats JSON to disk",
       "default": false
     },
@@ -110,9 +104,7 @@
             }
           },
           "additionalProperties": false,
-          "required": [
-            "input"
-          ]
+          "required": ["input"]
         },
         {
           "type": "string",
@@ -121,4 +113,4 @@
       ]
     }
   }
-}
+}

code/frameworks/angular/src/builders/start-storybook/schema.json

@@ -74,10 +74,7 @@
     "compodocArgs": {
       "type": "array",
       "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
-      "default": [
-        "-e",
-        "json"
-      ],
+      "default": ["-e", "json"],
       "items": {
         "type": "string"
       }
@@ -129,9 +126,7 @@
             }
           },
           "additionalProperties": false,
-          "required": [
-            "input"
-          ]
+          "required": ["input"]
         },
         {
           "type": "string",
@@ -140,4 +135,4 @@
       ]
     }
   }
-}
+}

code/jest.config.base.js

@@ -30,7 +30,9 @@ module.exports = {
     '^.+\\.(t|j)sx?$': '@swc/jest',
     '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
   },
-  transformIgnorePatterns: ['/node_modules/(?!@angular|rxjs|nanoid|uuid|lit-html|@mdx-js)'],
+  transformIgnorePatterns: [
+    '/node_modules/(?!@angular|rxjs|nanoid|uuid|lit-html|@mdx-js|lodash-es)',
+  ],
   testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
   testPathIgnorePatterns: [
     '/storybook-static/',

code/lib/builder-vite/src/optimizeDeps.ts

@@ -42,6 +42,7 @@ const INCLUDE_CANDIDATES = [
   'isobject',
   'jest-mock',
   'loader-utils',
+  'lodash-es',
   'lodash/cloneDeep',
   'lodash/isFunction',
   'lodash/isPlainObject',

code/lib/codemod/src/lib/utils.ts

@@ -1,5 +1,4 @@
-import camelCase from 'lodash/camelCase.js';
-import upperFirst from 'lodash/upperFirst.js';
+import { camelCase, upperFirst } from 'lodash';
 
 export const sanitizeName = (name: string) => {
   let key = upperFirst(camelCase(name));

code/lib/core-server/package.json

@@ -62,7 +62,6 @@
     "@storybook/docs-mdx": "next",
     "@storybook/global": "^5.0.0",
     "@storybook/node-logger": "7.0.0-beta.40",
-    "@storybook/preview-api": "7.0.0-beta.40",
     "@storybook/telemetry": "7.0.0-beta.40",
     "@storybook/types": "7.0.0-beta.40",
     "@types/detect-port": "^1.3.0",
@@ -96,6 +95,7 @@
     "ws": "^8.2.3"
   },
   "devDependencies": {
+    "@storybook/preview-api": "7.0.0-beta.40",
     "@types/compression": "^1.7.0",
     "@types/ip": "^1.1.0",
     "@types/serve-favicon": "^2.5.2",

code/lib/core-server/src/utils/StoryIndexGenerator.ts

@@ -18,7 +18,7 @@ import type {
   StoryId,
   StoryName,
 } from '@storybook/types';
-import { userOrAutoTitleFromSpecifier, sortStoriesV7 } from '@storybook/preview-api';
+import { userOrAutoTitleFromSpecifier, sortStoriesV7 } from '@storybook/preview-api'; // eslint-disable-line import/no-extraneous-dependencies
 import { normalizeStoryPath } from '@storybook/core-common';
 import { logger } from '@storybook/node-logger';
 import { getStorySortParameter, NoMetaError } from '@storybook/csf-tools';

code/lib/manager-api/package.json

@@ -51,7 +51,7 @@
     "@storybook/theming": "7.0.0-beta.40",
     "@storybook/types": "7.0.0-beta.40",
     "dequal": "^2.0.2",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "memoizerific": "^1.11.3",
     "semver": "^7.3.7",
     "store2": "^2.14.2",
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.3.1",
-    "@types/lodash": "^4.14.167",
+    "@types/lodash-es": "^4.17.6",
     "@types/qs": "^6",
     "flush-promises": "^1.0.2",
     "qs": "^6.10.0",

code/lib/manager-api/src/index.tsx

@@ -9,7 +9,7 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import mergeWith from 'lodash/mergeWith.js';
+import { mergeWith } from 'lodash-es';
 import type {
   Args,
   ArgTypes,

code/lib/manager-api/src/lib/merge.ts

@@ -1,15 +1,16 @@
-import mergeWith from 'lodash/mergeWith.js';
-import isEqual from 'lodash/isEqual.js';
+import { mergeWith, isEqual } from 'lodash-es';
 
 import { logger } from '@storybook/client-logger';
 
 export default <TObj = any>(a: TObj, b: Partial<TObj>) =>
   mergeWith({}, a, b, (objValue: TObj, srcValue: Partial<TObj>) => {
     if (Array.isArray(srcValue) && Array.isArray(objValue)) {
-      srcValue.forEach((s) => {
-        const existing = objValue.find((o) => o === s || isEqual(o, s));
+      srcValue.forEach((srcItem) => {
+        const existing = objValue.find(
+          (objItem) => objItem === srcItem || isEqual(objItem, srcItem)
+        );
         if (!existing) {
-          objValue.push(s);
+          objValue.push(srcItem);
         }
       });
 

code/lib/manager-api/src/lib/stories.ts

@@ -1,7 +1,6 @@
 import memoize from 'memoizerific';
 import { dedent } from 'ts-dedent';
-import countBy from 'lodash/countBy.js';
-import mapValues from 'lodash/mapValues.js';
+import { countBy, mapValues } from 'lodash-es';
 import { sanitize } from '@storybook/csf';
 import type {
   StoryId,

code/lib/manager-api/src/modules/layout.ts

@@ -1,5 +1,5 @@
 import { global } from '@storybook/global';
-import pick from 'lodash/pick.js';
+import { pick } from 'lodash-es';
 import { dequal as deepEqual } from 'dequal';
 import { create } from '@storybook/theming/create';
 import { SET_CONFIG } from '@storybook/core-events';

code/lib/preview-api/package.json

@@ -74,9 +74,10 @@
     "@storybook/csf": "next",
     "@storybook/global": "^5.0.0",
     "@storybook/types": "7.0.0-beta.40",
+    "@types/lodash-es": "^4.17.6",
     "@types/qs": "^6.9.5",
     "dequal": "^2.0.2",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "memoizerific": "^1.11.3",
     "qs": "^6.10.0",
     "slash": "^3.0.0",

code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts

@@ -3,7 +3,7 @@
  */
 
 import { global } from '@storybook/global';
-import merge from 'lodash/merge.js';
+import { merge } from 'lodash-es';
 import {
   CONFIG_ERROR,
   CURRENT_STORY_WAS_SET,

code/lib/preview-api/src/modules/preview-web/parseArgsParam.ts

@@ -2,7 +2,7 @@ import qs from 'qs';
 import { dedent } from 'ts-dedent';
 import type { Args } from '@storybook/types';
 import { once } from '@storybook/client-logger';
-import isPlainObject from 'lodash/isPlainObject.js';
+import { isPlainObject } from 'lodash-es';
 
 // Keep this in sync with validateArgs in router/src/utils.ts
 const VALIDATION_REGEXP = /^[a-zA-Z0-9 _-]*$/;

code/lib/preview-api/src/modules/store/StoryStore.ts

@@ -21,8 +21,7 @@ import type {
   StoryContextForLoaders,
   StoryId,
 } from '@storybook/types';
-import mapValues from 'lodash/mapValues.js';
-import pick from 'lodash/pick.js';
+import { mapValues, pick } from 'lodash-es';
 import { SynchronousPromise } from 'synchronous-promise';
 
 import { HooksContext } from '../addons';

code/lib/preview-api/src/modules/store/args.ts

@@ -1,7 +1,7 @@
 import { dequal as deepEqual } from 'dequal';
 import type { Renderer, Args, ArgTypes, InputType, SBType, StoryContext } from '@storybook/types';
 import { once } from '@storybook/client-logger';
-import isPlainObject from 'lodash/isPlainObject.js';
+import { isPlainObject } from 'lodash-es';
 import { dedent } from 'ts-dedent';
 
 const INCOMPATIBLE = Symbol('incompatible');

code/lib/preview-api/src/modules/store/csf/normalizeInputTypes.ts

@@ -1,4 +1,4 @@
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'lodash-es';
 import type {
   ArgTypes,
   GlobalTypes,

code/lib/preview-api/src/modules/store/filterArgTypes.ts

@@ -1,5 +1,5 @@
 import type { StrictArgTypes } from '@storybook/types';
-import pickBy from 'lodash/pickBy.js';
+import { pickBy } from 'lodash-es';
 
 export type PropDescriptor = string[] | RegExp;
 

code/lib/preview-api/src/modules/store/inferArgTypes.ts

@@ -1,4 +1,4 @@
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'lodash-es';
 import { dedent } from 'ts-dedent';
 import { logger } from '@storybook/client-logger';
 import type { Renderer, SBType, ArgTypesEnhancer } from '@storybook/types';

code/lib/preview-api/src/modules/store/inferControls.ts

@@ -1,4 +1,4 @@
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'lodash-es';
 import { logger } from '@storybook/client-logger';
 import type { Renderer, ArgTypesEnhancer, SBEnumType, StrictInputType } from '@storybook/types';
 import { filterArgTypes } from './filterArgTypes';

code/lib/preview-api/src/modules/store/parameters.ts

@@ -1,6 +1,6 @@
 // Utilities for handling parameters
 import type { Parameters } from '@storybook/types';
-import isPlainObject from 'lodash/isPlainObject.js';
+import { isPlainObject } from 'lodash-es';
 
 /**
  * Safely combine parameters recursively. Only copy objects when needed.

code/lib/router/src/utils.ts

@@ -1,6 +1,5 @@
 import { once } from '@storybook/client-logger';
 import { dequal as deepEqual } from 'dequal';
-import isPlainObject from 'lodash/isPlainObject.js';
 import memoize from 'memoizerific';
 import type { IStringifyOptions } from 'qs';
 import qs from 'qs';
@@ -14,6 +13,10 @@ export interface StoryData {
 
 const splitPathRegex = /\/([^/]+)\/(?:(.*)_)?([^/]+)?/;
 
+function isPlainObject(value: any): boolean {
+  return Object.getPrototypeOf(value) === null || Object === value.constructor;
+}
+
 export const parsePath: (path: string | undefined) => StoryData = memoize(1000)(
   (path: string | undefined | null) => {
     const result: StoryData = {

code/lib/store/template/stories/args.stories.ts

@@ -2,7 +2,7 @@ import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { pick } from 'lodash';
+import { pick } from 'lodash-es';
 
 export default {
   component: globalThis.Components.Pre,

code/package.json

@@ -199,7 +199,7 @@
     "@testing-library/user-event": "^13.2.1",
     "@types/express": "^4.17.11",
     "@types/fs-extra": "^11.0.1",
-    "@types/lodash": "^4.14.167",
+    "@types/lodash-es": "^4.17.6",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
@@ -239,7 +239,7 @@
     "jest-watch-typeahead": "^2.2.1",
     "lerna": "^6.4.0",
     "lint-staged": "^10.5.4",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "node-gyp": "^8.4.0",
     "nx": "^15.4.5",
     "playwright": "1.30.0",

code/renderers/react/package.json

@@ -56,13 +56,14 @@
     "@storybook/types": "7.0.0-beta.40",
     "@types/escodegen": "^0.0.6",
     "@types/estree": "^0.0.51",
+    "@types/lodash-es": "^4.17.6",
     "@types/node": "^16.0.0",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
     "escodegen": "^2.0.0",
     "html-tags": "^3.1.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "prop-types": "^15.7.2",
     "react-element-to-jsx-string": "^15.0.0",
     "ts-dedent": "^2.0.0",

code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts

@@ -1,7 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import isPlainObject from 'lodash/isPlainObject.js';
-import isFunction from 'lodash/isFunction.js';
-import isString from 'lodash/isString.js';
+import { isPlainObject, isFunction, isString } from 'lodash-es';
 import reactElementToJSXString from 'react-element-to-jsx-string';
 import {
   type PropDef,

code/renderers/react/template/stories/js-argtypes.stories.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'lodash-es';
 import { PureArgsTable as ArgsTable } from '@storybook/blocks';
 import { inferControls } from '@storybook/preview-api';
 import { ThemeProvider, themes, convert } from '@storybook/theming';

code/renderers/react/template/stories/ts-argtypes.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'lodash-es';
 import { PureArgsTable as ArgsTable } from '@storybook/blocks';
 import type { Args, Parameters, StoryContext } from '@storybook/types';
 import { inferControls } from '@storybook/preview-api';

code/stats.json

@@ -34,25 +34,25 @@
   "lib/docs-tools": 14515,
   "lib/instrumenter": 12543,
   "lib/manager-api-shim": 53,
-  "lib/manager-api": 50044,
+  "lib/manager-api": 49953,
   "lib/node-logger": 1073,
   "lib/postinstall": 1488,
-  "lib/preview-api": 157569,
+  "lib/preview-api": 157448,
   "lib/preview-web": 70,
-  "lib/preview": 345126,
-  "lib/router": 24415,
+  "lib/preview": 365317,
+  "lib/router": 20141,
   "lib/store": 64,
   "lib/theming": 75562,
   "lib/types": 318,
   "renderers/html": 3583,
   "renderers/preact": 1927,
-  "renderers/react": 28236,
+  "renderers/react": 28158,
   "renderers/server": 2482,
   "renderers/svelte": 6952,
   "renderers/vue": 9649,
   "renderers/vue3": 172272,
   "renderers/web-components": 7502,
-  "ui/blocks": 136164,
+  "ui/blocks": 136059,
   "ui/components": 2936826,
-  "ui/manager": 1971665
+  "ui/manager": 1983971
 }

code/ui/.storybook/manager.ts

@@ -1,5 +1,5 @@
 import { addons } from '@storybook/manager-api';
-import startCase from 'lodash/startCase.js';
+import { startCase } from 'lodash-es';
 
 addons.setConfig({
   sidebar: {