chore: upgrade to latest SB

- fix docs not showing per package
rpldy · Nov 7, 2024 · d9a15ad · d9a15ad
1 parent 47cfe17
commit d9a15ad
Show file tree

Hide file tree

Showing 36 changed files with 687 additions and 3,723 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -9,6 +9,7 @@
 .*/node_modules/.pnpm/hermes-estree.*/.*
 .*/lib/.*
 
+
 [include]
 ./packages/**/*.js.flow
 
@@ -45,3 +46,4 @@ module.name_mapper='^@rpldy/life-events$' -> '<PROJECT_ROOT>/packages/core/life-
 
 #tricking flow so it doesnt complain about not able to import README files in storybook
 module.name_mapper='README.md$' -> '<PROJECT_ROOT>/node_modules/react/index.js'
+module.name_mapper='.*storydoc.mdx$' -> '<PROJECT_ROOT>/node_modules/react/index.js'
diff --git a/.storybook/cypressAddon/cypressDecorator.ts b/.storybook/cypressAddon/cypressDecorator.ts
@@ -1,8 +1,7 @@
-import React from "react";
-import { makeDecorator } from "@storybook/addons";
+import { makeDecorator } from "@storybook/preview-api";
 
 export default makeDecorator({
-	name: "cypressDecorator",
+    name: "cypressDecorator",
 	wrapper: (getStory, context) => {
 		const win = (window.parent && window.parent.Cypress) ?
 			window.parent :
@@ -21,5 +20,7 @@ export default makeDecorator({
 		}
 
 		return getStory(context);
-	}
-})
+	},
+    parameterName: "cypressDecorator",
+    skipIfNoParametersOrOptions: false,
+});
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -4,24 +4,39 @@ import type { StorybookConfig } from "@storybook/react-webpack5";
 const config: StorybookConfig = {
     stories: [
         "../packages/**/*.stories.js",
-        "./welcome.stories.mdx"
-    ],
-    addons: [
-        path.resolve("./.storybook/uploadyPreset"),
-        "@storybook/addon-links",
-        "@storybook/addon-essentials",
-        "@storybook/addon-interactions",
+        // "./welcome.stories.mdx"
     ],
+    addons: [path.resolve("./.storybook/uploadyPreset"), "@storybook/addon-links", {
+        name: "@storybook/addon-docs", //path.dirname(require.resolve("@storybook/addon-docs/package.json")),
+        options: { transcludeMarkdown: true },
+    }, {
+        name: "@storybook/addon-essentials",
+        options: {
+            actions: true,
+            backgrounds: false,
+            controls: true,
+            docs: false,
+            viewport: false,
+            // toolbars: false
+        }
+    }, "@storybook/addon-interactions", "@storybook/addon-webpack5-compiler-babel"],
     framework: {
         name: "@storybook/react-webpack5",
         options: {},
     },
-    docs: {
-        autodocs: "tag",
-    },
+    // docs: {
+    //     autodocs: true,
+    // },
     core: {
         disableTelemetry: true
     },
+    typescript: {
+        // Overrides the default Typescript configuration to allow multi-package components to be documented via Autodocs.
+        reactDocgen: "react-docgen-typescript",
+        check: false,
+        // skipCompiler: true,
+        // skipBabel: true,
+    },
 };
 
 export default config;
diff --git a/.storybook/manager.tsx b/.storybook/manager.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { addons } from "@storybook/addons";
+import { addons } from "@storybook/manager-api";
 import theme from "./theme";
 import VersionBadge from "./VersionBadge";
 

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,12 +1,12 @@
+import React from "react";
 import type { Preview } from "@storybook/react";
 import { Description } from "@storybook/addon-docs";
-import React from "react";
+//import { DocsContainer } from "@storybook/blocks";
 import cypressDecorator from "./cypressAddon/cypressDecorator";
 import UploadyStoryDecorator from "./UploadyStoryDecorator";
 
 const preview: Preview = {
     parameters: {
-        actions: { argTypesRegex: "^on[A-Z].*" },
         options: {
             storySort: {
                 method: "alphabetical",
@@ -19,11 +19,20 @@ const preview: Preview = {
             },
         },
         docs: {
-            page: () => (
-                <>
-                <Description/>
-            </>
-            ),
+            // container:  ({ children, ...props }) => {
+            //     console.log("RENDERING DOCS CONTAINER !!!! !@#!@#!@#@#");
+            //     return (
+            //         <DocsContainer {...props}>{children}</DocsContainer>
+            //     )
+            // },
+            page: () => {
+                // console.log("RENDERING DOCS PAGE !!!! !@#!@#!#@!#");
+                return (
+                    <>
+                        <Description/>
+                    </>
+                )
+            },
         },
     },
     decorators: [UploadyStoryDecorator, cypressDecorator],

diff --git a/package.json b/package.json
@@ -73,13 +73,17 @@
     "@commitlint/config-conventional": "^19.4.1",
     "@commitlint/config-lerna-scopes": "^19.0.0",
     "@monorepo-utils/package-utils": "^2.10.4",
-    "@storybook/addon-essentials": "^7.6.16",
-    "@storybook/addon-interactions": "^7.6.16",
-    "@storybook/addon-links": "^7.6.16",
-    "@storybook/blocks": "^7.6.16",
-    "@storybook/react": "^7.6.16",
-    "@storybook/react-webpack5": "^7.6.16",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-docs": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/preview-api": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-webpack5": "^8.4.2",
+    "@storybook/test": "^8.4.2",
+    "@storybook/theming": "^8.4.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -116,7 +120,7 @@
     "eslint-plugin-no-async": "^1.1.0",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.11.0",
     "eslint-plugin-vitest": "^0.3.22",
     "execa": "^9.3.0",
     "filesize": "^10.1.4",
@@ -142,7 +146,7 @@
     "rimraf": "^5.0.5",
     "semver-utils": "^1.1.4",
     "shelljs": "^0.8.5",
-    "storybook": "^7.6.16",
+    "storybook": "^8.4.2",
     "styled-components": "^6.1.12",
     "typescript": "^5.3.3",
     "vite": "^5.3.4",

diff --git a/packages/core/chunked-sender/ChunkedSender.stories.js b/packages/core/chunked-sender/ChunkedSender.stories.js
@@ -12,7 +12,7 @@ import {
     type UploadyStory,
 } from "../../../story-helpers";
 import getChunkedEnhancer, { CHUNK_EVENTS } from "./src";
-import readme from "./README.md";
+import Readme from "./ChunkedSender.storydoc.mdx";
 
 export const WithChunkedSender: UploadyStory = createUploadyStory(
     ({ destination, chunkSize }): Node => {
@@ -86,7 +86,7 @@ export const WithChunkedSender: UploadyStory = createUploadyStory(
         );
     });
 
-const chunkedSenderStories: CsfExport = getCsfExport(undefined, "Chunked Sender", readme, {
+const chunkedSenderStories: CsfExport = getCsfExport(undefined, "Chunked Sender", Readme, {
     pkg: "chunked-sender",
     section: "Core",
     parameters: {

diff --git a/packages/core/chunked-sender/ChunkedSender.storydoc.mdx b/packages/core/chunked-sender/ChunkedSender.storydoc.mdx
@@ -0,0 +1,4 @@
+import { Markdown } from "@storybook/blocks";
+import readme from "./README.md?raw";
+
+<Markdown>{readme}</Markdown>
diff --git a/packages/core/mock-sender/MockSender.stories.js b/packages/core/mock-sender/MockSender.stories.js
@@ -9,7 +9,7 @@ import {
 import createUploader, { type UploadyUploaderType } from "@rpldy/uploader";
 import { getMockSenderEnhancer } from "./src";
 
-import readme from "./README.md";
+import Readme from "./MockSender.storydoc.mdx";
 import type { Node } from "react";
 
 const mockSenderEnhancer = getMockSenderEnhancer({
@@ -60,7 +60,7 @@ export const WithMockProgress = (): Node => {
     );
 };
 
-const mockSenderStories: CsfExport = getCsfExport(undefined, "Mock Sender", readme, {
+const mockSenderStories: CsfExport = getCsfExport(undefined, "Mock Sender", Readme, {
     pkg: "mock-sender",
     section: "Core",
     parameters: {

diff --git a/packages/core/mock-sender/MockSender.storydoc.mdx b/packages/core/mock-sender/MockSender.storydoc.mdx
@@ -0,0 +1,4 @@
+import { Markdown } from "@storybook/blocks";
+import readme from "./README.md?raw";
+
+<Markdown>{readme}</Markdown>
diff --git a/packages/core/tus-sender/TusSender.stories.js b/packages/core/tus-sender/TusSender.stories.js
@@ -10,7 +10,7 @@ import {
     type UploadyStory,
 } from "../../../story-helpers";
 import getTusEnhancer from "./src";
-import readme from "./README.md";
+import Readme from "./TusSender.storydoc.mdx";
 
 import type { Node } from "react";
 import type { UploadyUploaderType, UploaderEnhancer } from "@rpldy/uploader";
@@ -182,7 +182,7 @@ export const WithFeatureDetection: UploadyStory = createUploadyStory((props): No
     );
 });
 
-const tusSenderStories: CsfExport = getCsfExport(undefined, "TUS Sender", readme, {
+const tusSenderStories: CsfExport = getCsfExport(undefined, "TUS Sender", Readme, {
     pkg: "tus-sender",
     section: "Core",
     parameters: {

diff --git a/packages/core/tus-sender/TusSender.storydoc.mdx b/packages/core/tus-sender/TusSender.storydoc.mdx
@@ -0,0 +1,4 @@
+import { Markdown } from "@storybook/blocks";
+import readme from "./README.md?raw";
+
+<Markdown>{readme}</Markdown>
diff --git a/packages/core/uploader/Uploader.stories.js b/packages/core/uploader/Uploader.stories.js
@@ -18,7 +18,7 @@ import {
 } from "../../../story-helpers";
 import createUploader, { UPLOADER_EVENTS } from "./src";
 
-import readme from "./README.md";
+import Readme from "./Uploader.storydoc.mdx";
 import type { UploadyUploaderType } from "./src";
 import type { Node } from "react";
 
@@ -260,7 +260,7 @@ export const UMD_Core: UploadyStory = createUploadyStory(
     );
 });
 
-const uploaderStories: CsfExport = getCsfExport(undefined, "Uploader", readme, {
+const uploaderStories: CsfExport = getCsfExport(undefined, "Uploader", Readme, {
     pkg: "uploader",
     section: "Core",
 });

diff --git a/packages/core/uploader/Uploader.storydoc.mdx b/packages/core/uploader/Uploader.storydoc.mdx
@@ -0,0 +1,4 @@
+import { Markdown } from "@storybook/blocks";
+import readme from "./README.md?raw";
+
+<Markdown>{readme}</Markdown>
diff --git a/packages/native/native-uploady/NativeUploady.stories.js b/packages/native/native-uploady/NativeUploady.stories.js
@@ -7,7 +7,7 @@ import {
     type UploadyStory
 } from "../../../story-helpers";
 import NativeUploady, { UploadyContext } from "./src";
-import readme from "./README.md";
+import Readme from "./NativeUploady.storydoc.mdx";
 
 import type { Node } from "react";
 
@@ -56,7 +56,7 @@ export const Simple: UploadyStory = createUploadyStory(
         );
     });
 
-const nativeUploadyStories: CsfExport = getCsfExport(NativeUploady, "Native Uploady", readme, {
+const nativeUploadyStories: CsfExport = getCsfExport(NativeUploady, "Native Uploady", Readme, {
     pkg: "native-uploady",
     section: "React-Native"
 });

diff --git a/packages/native/native-uploady/NativeUploady.storydoc.mdx b/packages/native/native-uploady/NativeUploady.storydoc.mdx
@@ -0,0 +1,4 @@
+import { Markdown } from "@storybook/blocks";
+import readme from "./README.md?raw";
+
+<Markdown>{readme}</Markdown>
diff --git a/packages/ui/chunked-uploady/ChunkedUploady.stories.js b/packages/ui/chunked-uploady/ChunkedUploady.stories.js
@@ -21,7 +21,7 @@ import {
     type UploadyStory,
     type UploadyStoryParams,
 } from "../../../story-helpers";
-import readme from "./README.md";
+import Readme from "./ChunkedUploady.storydoc.mdx";
 
 import type { Node } from "react";
 
@@ -215,7 +215,7 @@ export const UMD_CoreChunkedUI: UploadyStory = createUploadyStory(
         );
     });
 
-const chunkedUploadyStories: CsfExport = getCsfExport(ChunkedUploady, "Chunked Uploady", readme, {
+const chunkedUploadyStories: CsfExport = getCsfExport(ChunkedUploady, "Chunked Uploady", Readme, {
     pkg: "chunked-uploady",
     section: "UI",
     parameters: {

diff --git a/packages/ui/chunked-uploady/ChunkedUploady.storydoc.mdx b/packages/ui/chunked-uploady/ChunkedUploady.storydoc.mdx
@@ -0,0 +1,4 @@
+import { Markdown } from "@storybook/blocks";
+import readme from "./README.md?raw";
+
+<Markdown>{readme}</Markdown>
diff --git a/packages/ui/retry-hooks/RetryHooks.stories.js b/packages/ui/retry-hooks/RetryHooks.stories.js
@@ -27,7 +27,7 @@ import retryEnhancer, {
     useRetryListener,
     RETRY_EVENT,
 } from "./src";
-import readme from "./README.md";
+import Readme from "./RetryHooks.storydoc.mdx";
 
 import type { Node } from "react";
 import type { RefObject } from "@rpldy/shared-ui";
@@ -395,7 +395,7 @@ export const WithRetryAndPreview: UploadyStory = createUploadyStory(
         );
     });
 
-const retryHooksStories: CsfExport = getCsfExport(undefined, "Retry Hooks", readme, {
+const retryHooksStories: CsfExport = getCsfExport(undefined, "Retry Hooks", Readme, {
     pkg: "retry-hooks",
     section: "UI"
 });

diff --git a/packages/ui/retry-hooks/RetryHooks.storydoc.mdx b/packages/ui/retry-hooks/RetryHooks.storydoc.mdx
@@ -0,0 +1,4 @@
+import { Markdown } from "@storybook/blocks";
+import readme from "./README.md?raw";
+
+<Markdown>{readme}</Markdown>
diff --git a/packages/ui/tus-uploady/TusUploady.stories.js b/packages/ui/tus-uploady/TusUploady.stories.js
@@ -22,7 +22,7 @@ import TusUploady, {
     useTusResumeStartListener,
 } from "./src";
 
-import readme from "./README.md";
+import Readme from "./TusUploady.storydoc.mdx";
 import type { Node } from "react";
 
 const AbortButton = () => {
@@ -303,7 +303,7 @@ export const WithResumeStartHandler: UploadyStory = createUploadyStory(
         );
     });
 
-const tusUploadyStories: CsfExport = getCsfExport(TusUploady, "Tus Uploady", readme, {
+const tusUploadyStories: CsfExport = getCsfExport(TusUploady, "Tus Uploady", Readme, {
     pkg: "tus-uploady",
     section: "UI",
     parameters: {

diff --git a/packages/ui/tus-uploady/TusUploady.storydoc.mdx b/packages/ui/tus-uploady/TusUploady.storydoc.mdx
@@ -0,0 +1,4 @@
+import { Markdown } from "@storybook/blocks";
+import readme from "./README.md?raw";
+
+<Markdown>{readme}</Markdown>
diff --git a/packages/ui/upload-button/UploadButton.stories.js b/packages/ui/upload-button/UploadButton.stories.js
@@ -31,7 +31,7 @@ import {
 } from "../../../story-helpers";
 import UploadButton, { asUploadButton } from "./src";
 
-import readme from "./README.md";
+import Readme from "./UploadButton.storydoc.mdx";
 
 import type { Node } from "react";
 import type { Batch, BatchItem, UploadyContextType } from "@rpldy/uploady";
@@ -511,7 +511,7 @@ export const WithForm: UploadyStory = createUploadyStory(
         );
     });
 
-const UploadButtonStories: CsfExport = getCsfExport(UploadButton, "Upload Button", readme, {
+const UploadButtonStories: CsfExport = getCsfExport(UploadButton, "Upload Button", Readme, {
     pkg: "upload-button",
     section: "UI"
 });

diff --git a/packages/ui/upload-button/UploadButton.storydoc.mdx b/packages/ui/upload-button/UploadButton.storydoc.mdx
@@ -0,0 +1,4 @@
+import { Markdown } from "@storybook/blocks";
+import readme from "./README.md?raw";
+
+<Markdown>{readme}</Markdown>
diff --git a/packages/ui/upload-drop-zone/UploadDropZone.stories.js b/packages/ui/upload-drop-zone/UploadDropZone.stories.js
@@ -29,7 +29,7 @@ import {
     type CsfExport,
     type UploadyStory,
 } from "../../../story-helpers";
-import readme from "./README.md";
+import Readme from "./UploadDropZone.storydoc.mdx";
 
 import type { Node, Ref } from "react";
 import type { UploadButtonProps } from "@rpldy/upload-button";
@@ -517,7 +517,7 @@ export const WithChildElement: UploadyStory = createUploadyStory(
         );
     });
 
-const dropzoneStories: CsfExport = getCsfExport(UploadDropZone, "Upload Drop Zone", readme, {
+const dropzoneStories: CsfExport = getCsfExport(UploadDropZone, "Upload Drop Zone", Readme, {
     pkg: "upload-drop-zone",
     section: "UI",
 });