Add storybook for UI testing (#74032)

### Why?

This PR initialized the Storybook for UI, a11y, and screen testing for Dev Overlay and future potential. 

Closes NDX-587

.gitignore

@@ -56,3 +56,6 @@ test-timings.json
 *.tsbuildinfo
 .swc/
 .turbo
+
+# Storybook
+*storybook.log

package.json

@@ -65,7 +65,9 @@
     "swc-build-native": "node scripts/build-native.cjs",
     "swc-build-wasm": "node scripts/build-wasm.cjs",
     "sweep": "node scripts/sweep.cjs",
-    "check-error-codes": "node packages/next/check-error-codes.js"
+    "check-error-codes": "node packages/next/check-error-codes.js",
+    "storybook": "turbo run storybook",
+    "build-storybook": "turbo run build-storybook"
   },
   "devDependencies": {
     "@actions/core": "1.10.1",

packages/next/.storybook/main.ts

@@ -0,0 +1,29 @@
+import type { StorybookConfig } from '@storybook/react-webpack5'
+
+import { join, dirname } from 'path'
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+const config: StorybookConfig = {
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {},
+  },
+}
+export default config

packages/next/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview

packages/next/package.json

@@ -86,7 +86,9 @@
     "prepublishOnly": "cd ../../ && turbo run build",
     "types": "tsc --declaration --emitDeclarationOnly --stripInternal --declarationDir dist",
     "typescript": "tsec --noEmit",
-    "ncc-compiled": "taskr ncc"
+    "ncc-compiled": "taskr ncc",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "taskr": {
     "requires": [
@@ -153,6 +155,7 @@
     "@babel/traverse": "7.22.5",
     "@babel/types": "7.22.5",
     "@capsizecss/metrics": "3.4.0",
+    "@chromatic-com/storybook": "^3.2.2",
     "@edge-runtime/cookies": "6.0.0",
     "@edge-runtime/ponyfill": "4.0.0",
     "@edge-runtime/primitives": "6.0.0",
@@ -168,6 +171,14 @@
     "@next/swc": "15.1.1-canary.12",
     "@opentelemetry/api": "1.6.0",
     "@playwright/test": "1.41.2",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-webpack5": "^8.4.7",
+    "@storybook/test": "^8.4.7",
     "@swc/core": "1.9.3",
     "@swc/types": "0.1.7",
     "@taskr/clear": "1.1.0",
@@ -306,6 +317,7 @@
     "source-map-loader": "5.0.0",
     "source-map08": "npm:[email protected]",
     "stacktrace-parser": "0.1.10",
+    "storybook": "^8.4.7",
     "stream-browserify": "3.0.0",
     "stream-http": "3.1.1",
     "strict-event-emitter": "0.5.0",