Update architecture: CPC, globals, API

.storybook/preview.ts

@@ -1,18 +1,18 @@
 import type { Preview } from "@storybook/react";
+import { background } from "storybook/internal/theming";
 
 const preview: Preview = {
   parameters: {
-    backgrounds: {
-      default: "light",
-    },
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
   },
+  initialGlobals: {
+    background: { value: "light" },
+  },
 };
 
 export default preview;

package.json

@@ -45,40 +45,40 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
+  "dependencies": {
+    "@storybook/icons": "^1.2.10"
+  },
   "devDependencies": {
-    "@storybook/addon-essentials": "8.0.0",
-    "@storybook/addon-interactions": "8.0.0",
-    "@storybook/addon-links": "8.0.0",
-    "@storybook/blocks": "8.0.0",
-    "@storybook/components": "8.0.0",
-    "@storybook/core-events": "8.0.0",
-    "@storybook/manager": "8.0.0",
-    "@storybook/manager-api": "8.0.0",
-    "@storybook/preview": "8.0.0",
-    "@storybook/preview-api": "8.0.0",
-    "@storybook/react": "8.0.0",
-    "@storybook/react-vite": "8.0.0",
-    "@storybook/test": "8.0.0",
-    "@storybook/theming": "8.0.0",
-    "@storybook/types": "8.0.0",
+    "@storybook/addon-essentials": "0.0.0-pr-26654-sha-49d01553",
+    "@storybook/addon-interactions": "0.0.0-pr-26654-sha-49d01553",
+    "@storybook/addon-links": "0.0.0-pr-26654-sha-49d01553",
+    "@storybook/blocks": "0.0.0-pr-26654-sha-49d01553",
+    "@storybook/react": "0.0.0-pr-26654-sha-49d01553",
+    "@storybook/react-vite": "0.0.0-pr-26654-sha-49d01553",
+    "@storybook/test": "0.0.0-pr-26654-sha-49d01553",
     "@types/node": "^18.15.0",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",
     "@vitejs/plugin-react": "^4.2.1",
     "auto": "^11.1.1",
     "boxen": "^7.1.1",
     "dedent": "^1.5.1",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
     "prompts": "^2.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "8.0.0",
-    "tsup": "^8.0.2",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.6",
+    "storybook": "0.0.0-pr-26654-sha-49d01553",
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.5",
     "zx": "^7.2.3"
   },
+  "peerDependencies": {
+    "storybook": "^8.3.0 || 0.0.0-pr-26654-sha-49d01553"
+  },
+  "overrides": {
+    "storybook": "0.0.0-pr-26654-sha-49d01553"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -87,7 +87,7 @@
       "src/index.ts"
     ],
     "managerEntries": [
-      "src/manager.ts"
+      "src/manager.tsx"
     ],
     "previewEntries": [
       "src/preview.ts"
@@ -103,4 +103,4 @@
     ],
     "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
   }
-}
+}

scripts/prepublish-checks.js

@@ -2,11 +2,11 @@
 
 import boxen from "boxen";
 import dedent from "dedent";
-import { readFile } from 'fs/promises';
-import { globalPackages as globalManagerPackages } from "@storybook/manager/globals";
-import { globalPackages as globalPreviewPackages } from "@storybook/preview/globals";
+import { readFile } from "node:fs/promises";
+import { globalPackages as globalManagerPackages } from "storybook/internal/manager/globals";
+import { globalPackages as globalPreviewPackages } from "storybook/internal/preview/globals";
 
-const packageJson = await readFile('./package.json', 'utf8').then(JSON.parse);
+const packageJson = await readFile("./package.json", "utf8").then(JSON.parse);
 
 const name = packageJson.name;
 const displayName = packageJson.storybook.displayName;
@@ -28,8 +28,8 @@ if (name.includes("addon-kit") || displayName.includes("Addon Kit")) {
 
       Please configure appropriate metadata before publishing your addon. For more info, see:
       https://storybook.js.org/docs/react/addons/addon-catalog#addon-metadata`)}`,
-      { padding: 1, borderColor: "red" }
-    )
+      { padding: 1, borderColor: "red" },
+    ),
   );
 
   exitCode = 1;
@@ -50,8 +50,8 @@ if ((await $`cat README.md | grep -E ${readmeTestStrings}`.exitCode) == 0) {
         ${chalk.red(dedent`You are using the default README.md file that comes with the addon kit.
         Please update it to provide info on what your addon does and how to use it.`)}
       `,
-      { padding: 1, borderColor: "red" }
-    )
+      { padding: 1, borderColor: "red" },
+    ),
   );
 
   exitCode = 1;
@@ -63,7 +63,7 @@ if ((await $`cat README.md | grep -E ${readmeTestStrings}`.exitCode) == 0) {
 const peerDependencies = Object.keys(packageJson.peerDependencies || {});
 const globalPackages = [...globalManagerPackages, ...globalPreviewPackages];
 peerDependencies.forEach((dependency) => {
-  if(globalPackages.includes(dependency)) {
+  if (globalPackages.includes(dependency)) {
     console.error(
       boxen(
         dedent`
@@ -74,13 +74,12 @@ peerDependencies.forEach((dependency) => {
           Check the "bundling" section in README.md for more information.
           If you are absolutely sure you are doing it correct, you should remove this check from scripts/prepublish-checks.js.`)}
         `,
-        { padding: 1, borderColor: "red" }
-      )
+        { padding: 1, borderColor: "red" },
+      ),
     );
-  
+
     exitCode = 1;
-
   }
-})
+});
 
 process.exit(exitCode);

src/components/List.tsx

@@ -1,6 +1,19 @@
+import { ArrowDownIcon } from "@storybook/icons";
 import React, { Fragment, useState } from "react";
-import { styled, themes, convert } from "@storybook/theming";
-import { Icons, IconsProps } from "@storybook/components";
+import { styled } from "storybook/internal/theming";
+
+type Item = {
+  title: string;
+  description: string;
+};
+
+interface ListItemProps {
+  item: Item;
+}
+
+interface ListProps {
+  items: Item[];
+}
 
 const ListWrapper = styled.ul({
   listStyle: "none",
@@ -9,29 +22,29 @@ const ListWrapper = styled.ul({
   margin: 0,
 });
 
-const Wrapper = styled.div({
+const Wrapper = styled.div(({ theme }) => ({
   display: "flex",
   width: "100%",
-  borderBottom: `1px solid ${convert(themes.normal).appBorderColor}`,
+  borderBottom: `1px solid ${theme.appBorderColor}`,
   "&:hover": {
-    background: convert(themes.normal).background.hoverable,
+    background: theme.background.hoverable,
   },
-});
+}));
 
-const Icon = styled(Icons)<IconsProps>({
+const Icon = styled(ArrowDownIcon)(({ theme }) => ({
   height: 10,
   width: 10,
   minWidth: 10,
-  color: convert(themes.normal).color.mediumdark,
+  color: theme.color.mediumdark,
   marginRight: 10,
   transition: "transform 0.1s ease-in-out",
   alignSelf: "center",
   display: "inline-flex",
-});
+}));
 
-const HeaderBar = styled.div({
-  padding: convert(themes.normal).layoutMargin,
-  paddingLeft: convert(themes.normal).layoutMargin - 3,
+const HeaderBar = styled.div(({ theme }) => ({
+  padding: theme.layoutMargin,
+  paddingLeft: theme.layoutMargin - 3,
   background: "none",
   color: "inherit",
   textAlign: "left",
@@ -41,24 +54,17 @@ const HeaderBar = styled.div({
 
   "&:focus": {
     outline: "0 none",
-    borderLeft: `3px solid ${convert(themes.normal).color.secondary}`,
+    borderLeft: `3px solid ${theme.color.secondary}`,
   },
-});
+}));
 
-const Description = styled.div({
-  padding: convert(themes.normal).layoutMargin,
-  marginBottom: convert(themes.normal).layoutMargin,
-  fontStyle: "italic",
-});
-
-type Item = {
-  title: string;
-  description: string;
-};
-
-interface ListItemProps {
-  item: Item;
-}
+const Description = styled.div(({ theme }) => ({
+  padding: theme.layoutMargin,
+  background: theme.background.content,
+  fontFamily: theme.typography.fonts.mono,
+  whiteSpace: "pre-wrap",
+  textAlign: "left",
+}));
 
 export const ListItem: React.FC<ListItemProps> = ({ item }) => {
   const [open, onToggle] = useState(false);
@@ -68,8 +74,6 @@ export const ListItem: React.FC<ListItemProps> = ({ item }) => {
       <Wrapper>
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
-            icon="arrowdown"
-            color={convert(themes.normal).appBorderColor}
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,
             }}
@@ -82,10 +86,6 @@ export const ListItem: React.FC<ListItemProps> = ({ item }) => {
   );
 };
 
-interface ListProps {
-  items: Item[];
-}
-
 export const List: React.FC<ListProps> = ({ items }) => (
   <ListWrapper>
     {items.map((item, idx) => (